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

@customElement("lit-app")
export default class App extends LitElement {
    moveableRef: Ref<Moveable> = createRef(null);
    render() {
        return html `<div class="container">
    <button @click=${this.onClick}>Resize</button>
    <div
        class="target target1"
        style="transform: rotate(30deg);"
    >Target1</div>
    <div class="target target2">Target2</div>
    <div
        class="target target3"
        style="transform: rotate(30deg);"
    >Target3</div>
    <lit-moveable
        ${ref(this.moveableRef)}
        .target=${[[".target1, .target2"], ".target3"]}
        .litDraggable=${true}
        .rotatable=${true}
        .scalable=${true}
        @litRenderGroup=${this.onRenderGroup}
    ></lit-moveable>
</div>`;
    }
    onClick() {
        this.moveableRef.value!.updateRect();
    }
    onRenderGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.transform = ev.transform;
        });
    }
}