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 target1"
            style="left: 10px;top: 10px;border-radius: 25px;"
        >Target1</div>
        <div
            class="target target2"
            style="left: 140px;top: 10px;border-radius: 25px 23px;"
        >Target2</div>
        <div
            class="target target3"
            style="left: 10px;top: 140px;border-radius: 25px 23px / 20px;"
        >Target3</div>
        <div
            class="target target4"
            style="left: 140px;top: 140px;border-radius: 25px 25.5px 24.5px 24.9115px / 25.5px 25.5px 24.5px 24.5px;"
        >Target4</div>
        <lit-moveable
            .target=${".target1"}
            .litDraggable=${true}
            .roundable=${true}
            .resizable=${true}
            .isDisplayShadowRoundControls=${"horizontal"}
            .roundClickable=${"control"}
            .roundPadding=${15}
            @litRound=${this.onRound}
            @litRender=${this.onRender}
            @litRenderEnd=${this.onRenderEnd}
        ></lit-moveable>
        <lit-moveable
            .target=${".target2"}
            .roundable=${true}
            .roundClickable=${true}
            @litRound=${this.onRound$0}
        ></lit-moveable>
        <lit-moveable
            .target=${".target3"}
            .roundable=${true}
            @litRound=${this.onRound$1}
        ></lit-moveable>
        <lit-moveable
            .target=${".target4"}
            .roundable=${true}
            @litRound=${this.onRound$2}
        ></lit-moveable>
    </div>
</div>`;
    }
    onRound(e) {
        console.log("ROUND", e.borderRadius);
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
    onRenderEnd(e) {
        e.target.style.cssText += e.cssText;
    }
    onRound$0(e) {
        console.log("ROUND", e.borderRadius);
        e.target.style.borderRadius = e.borderRadius;
    }
    onRound$1(e) {
        console.log("ROUND", e.borderRadius);
        e.target.style.borderRadius = e.borderRadius;
    }
    onRound$2(e) {
        console.log("ROUND", e.borderRadius);
        e.target.style.borderRadius = e.borderRadius;
    }
}