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">
        <div
            class="target"
            style="position: relative;top: 50px;left: 50px;width: 200px;height: 200px;"
        >Target</div>
        <lit-moveable
            target=".target"
            .litDraggable=${true}
            .resizable=${{ keepRatio: true
        }}
            .clippable=${{ keepRatio: false
        }}
            @litDrag=${this.onDrag}
            @litResize=${this.onResize}
            @litClip=${this.onClip}
        ></lit-moveable>
    </div>
</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;
    }
    onClip(e) {
        e.target.style.clipPath = e.clipStyle;
    }
}