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="container">
    <div class="target target1">Target1</div>
    <div class="target target2">Target2</div>
    <div class="target target3">Target3</div>
    <lit-moveable
        .target=${".target"}
        .litDraggable=${true}
        .resizable=${true}
        @litResizeGroupStart=${this.onResizeGroupStart}
        @litResizeGroup=${this.onResizeGroup}
        @litDragGroup=${this.onDragGroup}
        @litDragGroupEnd=${this.onDragGroupEnd}
    ></lit-moveable>
</div>`;
    }
    onResizeGroupStart({ events }) {
        events[0].setMin([50, 50]);
        events[1].setMin([60, 50]);
        events[2].setMin([50, 60]);
    }
    onResizeGroup({ events }) {
        events.forEach(ev => {
            ev.target.style.width = `${ev.width}px`;
            ev.target.style.height = `${ev.height}px`;
            ev.target.style.transform = ev.drag.transform;
        });
    }
    onDragGroup({ events }) {
        events.forEach(ev => {
            ev.target.style.transform = ev.transform;
        });
    }
    onDragGroupEnd({ events }) {
        console.log(events);
    }
}