import Moveable from "lit-moveable";
import { throttle } from "@daybrush/utils";
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"
        style="height: 400px;border: 1px solid black;"
    >
        <div class="target target1 group">Target1</div>
        <div class="target target2 group">Target2</div>
        <div class="target target3 group">Target3</div>
        <div
            class="target rotatable"
            style="position: absolute;width: 200px;height: 100px;top: 50px;"
        >Single Target</div>
        <lit-moveable
            .target=${".target.rotatable"}
            .resizable=${true}
            .litDraggable=${true}
            .rotatable=${true}
            @litBeforeRotate=${this.onBeforeRotate}
            @litRender=${this.onRender}
        ></lit-moveable>
        <lit-moveable
            .target=${".target.group"}
            .litDraggable=${true}
            .rotatable=${true}
            @litBeforeRotateGroup=${this.onBeforeRotateGroup}
            @litRenderGroup=${this.onRenderGroup}
        ></lit-moveable>
    </div>
</div>`;
    }
    onBeforeRotate(e) {
        e.setRotation(throttle(e.rotation, 45));
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
    onBeforeRotateGroup(e) {
        e.setRotation(throttle(e.rotation, 45));
    }
    onRenderGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.cssText += ev.cssText;
        });
    }
}