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="container">
    <div class="target">Target1</div>
    <lit-moveable
        .target=${".target"}
        .keepRatio=${true}
        .triggerAblesSimultaneously=${true}
        .resizable=${{
            edge: ["e", "w"],
            renderDirections: ["e", "w"]
        }}
        .scalable=${{
            edge: [],
            renderDirections: ["nw", "ne", "se", "sw"]
        }}
        .litDraggable=${true}
        .edgeDraggable=${["n", "s"]}
        @litDrag=${this.onDrag}
        @litResize=${this.onResize}
        @litScale=${this.onScale}
    ></lit-moveable>
</div>`;
    }
    onDrag(e) {
        e.target.style.cssText += `transform: ${e.transform}`;
    }
    onResize(e) {
        e.target.style.cssText += `width: ${e.boundingWidth}px;` + `height: ${e.boundingHeight}px;` + `transform: ${e.drag.transform}`;
    }
    onScale(e) {
        e.target.style.cssText += `transform: ${e.drag.transform}`;
    }
}