import Moveable, { MoveableManagerInterface, Renderer } from "lit-moveable";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ref, createRef } from "lit/directives/ref.js";

const DimensionViewable = {
    name: "dimensionViewable",
    props: [],
    events: [],
    render(moveable: MoveableManagerInterface<any, any>, React: Renderer) {
        const rect = moveable.getRect();
        return React.createElement("div", {
            key: "dimension-viewer",
            className: "moveable-dimension",
            style: {
                position: "absolute",
                left: `${rect.width / 2}px`,
                top: `${rect.height + 20}px`,
                background: "#4af",
                borderRadius: "2px",
                padding: "2px 4px",
                color: "white",
                fontSize: "13px",
                whiteSpace: "nowrap",
                fontWeight: "bold",
                willChange: "transform",
                transform: `translate(-50%, 0px)`
            }
        }, [
            "\r\n            ",
            Math.round(rect.offsetWidth),
            " x ",
            Math.round(rect.offsetHeight),
            "\r\n        "
        ]);
    }
} as const;
@customElement("lit-app")
export default class App extends LitElement {
    targetRef: Ref<HTMLDivElement> = createRef(null);
    render() {
        return html `<div class="container">
    <div
        class="target"
        ${ref(this.targetRef)}
    >Target</div>
    <lit-moveable
        .target=${this.targetRef}
        .ables=${[DimensionViewable]}
        .litDraggable=${true}
        .resizable=${true}
        .rotatable=${true}
        .props=${{ dimensionViewable: true
        }}
        @litDrag=${this.onDrag}
        @litResize=${this.onResize}
        @litRotate=${this.onRotate}
    ></lit-moveable>
</div>`;
    }
    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;
    }
}