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="margin no-relative">
    <div
        style="position: absolute;left: 84px;top: 159px;z-index: 1;"
    >92 x 167 (34, 84)</div>
    <div
        class="root"
        style="padding: 10px;"
    >
        <div style="zoom: 0.5;position: relative;">
            <div
                style="position: relative;margin-top: 100px;width: 500px;height: 500px;"
            >
                <div
                    class="target"
                    style="transform: translate(0px, 0px);"
                >Target</div>
                <lit-moveable
                    .target=${".target"}
                    .litDraggable=${true}
                    .rotatable=${true}
                    .resizable=${true}
                    .rootContainer=${document.body}
                    @litRender=${this.onRender}
                    @litRenderEnd=${this.onRenderEnd}
                ></lit-moveable>
            </div>
        </div>
    </div>
</div>`;
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
    onRenderEnd(e) {
        console.log("RCR", e.moveable.state.rootContainerClientRect);
        console.log("ORM", e.moveable.state.originalRootMatrix);
        console.log("MCR", e.moveable.state.moveableClientRect);
    }
}