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="root">
    <div class="container">
        <button @click=${this.onClick}>Random Position</button>
        <p>
            Changes in css position due to className or attribute selector are not detected.
        </p>
        <p>Use with `
        useResizeObserver`.</p>
        <div class="target">Target1</div>
        <lit-moveable
            .target=${".target"}
            .litDraggable=${true}
            .rotatable=${true}
            .resizable=${true}
            .useResizeObserver=${true}
            .useMutationObserver=${true}
            @litDrag=${this.onDrag}
            @litResize=${this.onResize}
            @litRotate=${this.onRotate}
        ></lit-moveable>
    </div>
</div>`;
    }
    onClick() {
        const left = 50 + Math.floor(50 * Math.random());
        const top = 50 + Math.floor(50 * Math.random());
        document.querySelector<HTMLElement>(".target")!.style.cssText += `left: ${left}px;top: ${top}px`;
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onResize(e) {
        e.target.style.width = `${e.width}px`;
        e.target.style.height = `${e.height}px`;
        e.target.style.transform = e.drag.transform;
    }
    onRotate(e) {
        e.target.style.transform = e.drag.transform;
    }
}