import keycon from "keycon";
import Moveable from "lit-moveable";
import { throttle } from "@daybrush/utils";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";

keycon.setGlobal();
@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 resizable"
            style="position: absolute;width: 200px;height: 100px;top: 50px;"
        >Resizable Target</div>
        <div
            class="target scalable"
            style="position: absolute;width: 200px;height: 100px;top: 150px;left: 350px;"
        >Scalable Target</div>
        <lit-moveable
            .target=${".target.resizable"}
            .resizable=${true}
            .litDraggable=${true}
            .rotatable=${true}
            .snappable=${true}
            .bounds=${{
            left: 0,
            top: 0,
            bottom: 0,
            right: 0,
            position: "css"
        }}
            @litResizeStart=${this.onResizeStart}
            @litDrag=${this.onDrag}
            @litBeforeResize=${this.onBeforeResize}
            @litResize=${this.onResize}
            @litBeforeRotate=${this.onBeforeRotate}
            @litRotate=${this.onRotate}
        ></lit-moveable>
        <lit-moveable
            .target=${".target.scalable"}
            .scalable=${true}
            .keepRatio=${true}
            .litDraggable=${true}
            .snappable=${true}
            .bounds=${{
            left: 0,
            top: 0,
            bottom: 0,
            right: 0,
            position: "css"
        }}
            @litScaleStart=${this.onScaleStart}
            @litDrag=${this.onDrag$0}
            @litBeforeScale=${this.onBeforeScale}
            @litScale=${this.onScale}
        ></lit-moveable>
    </div>
</div>`;
    }
    onResizeStart(e) {
        e.setFixedDirection([0, 0]);
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onBeforeResize(e) {
        if (keycon.global.shiftKey) {
            e.setFixedDirection([-1, -1]);
        } else {
            e.setFixedDirection([0, 0]);
        }
    }
    onResize(e) {
        e.target.style.cssText += `width: ${e.width}px; height: ${e.height}px`;
        e.target.style.transform = e.drag.transform;
    }
    onBeforeRotate(e) {
        e.setRotation(throttle(e.rotation, 45));
    }
    onRotate(e) {
        e.target.style.transform = e.drag.transform;
    }
    onScaleStart(e) {
        e.setFixedDirection([0, 0]);
    }
    onDrag$0(e) {
        e.target.style.transform = e.transform;
    }
    onBeforeScale(e) {
        if (keycon.global.shiftKey) {
            e.setFixedDirection([-1, -1]);
        } else {
            e.setFixedDirection([0, 0]);
        }
    }
    onScale(e) {
        e.target.style.transform = e.drag.transform;
    }
}