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="root">
    <div
        class="container"
        style="width: 500px;height: 500px;border: 1px solid #ccc;"
    >
        <div class="target target1">Target1</div>
        <div class="target target2">Target2</div>
        <div class="target target3">Target3</div>
        <lit-moveable
            ${ref(this.moveableRef)}
            .target=${[".target1", ".target2"]}
            .litDraggable=${true}
            .rotatable=${true}
            .snappable=${true}
            .verticalGuidelines=${[0]}
            @litDragGroup=${this.onDragGroup}
            @litRotateGroup=${this.onRotateGroup}
        ></lit-moveable>
    </div>
</div>`;
    }
    onDragGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.cssText += ev.cssText;
        });
    }
    onRotateGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.cssText += ev.cssText;
        });
    }
}