import Moveable from "lit-moveable";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("lit-app")
export default class App extends LitElement {
    render() {
        return html `<div class="root">
    <div class="container">
        <div
            class="target target1"
            style="transform: translate(0px, 0px) rotate(0deg) scale(1, 1);"
        >Target1</div>
        <div
            class="target target2"
            style="transform: translate(0px, 0px) rotate(0deg) scale(1, 1);"
        >Target2</div>
        <div
            class="target target3"
            style="transform: translate(0px, 0px) rotate(0deg) scale(1, 1);"
        >Target3</div>
        <lit-moveable
            .target=${".target"}
            .litDraggable=${true}
            .resizable=${true}
            .keepRatio=${false}
            @litDragGroup=${this.onDragGroup}
            @litResizeGroup=${this.onResizeGroup}
        ></lit-moveable>
    </div>
</div>`;
    }
    onDragGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.cssText += ev.cssText;
        });
    }
    onResizeGroup(e) {
        if (e.direction[0] === -1) {
            e.events.forEach((ev) => {
                ev.target.style.width = `${ev.width - ev.dist[0] + e.dist[0]}px`;
                ev.target.style.cssText += `margin-left: ${-e.dist[0]}px`;
            });
        } else if (e.direction[0] === 1) {
            e.events.forEach((ev) => {
                ev.target.style.width = `${ev.width - ev.dist[0] + e.dist[0]}px`;
            });
        }
    }
}