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">Target1</div>
        <div class="target target2">Target2</div>
        <div class="target target3">Target3</div>
        <lit-moveable
            .target=${".target"}
            .individualGroupable=${true}
            .litDraggable=${true}
            .resizable=${true}
            .rotatable=${true}
            .individualGroupableProps=${this.individualGroupableProps}
            @litRender=${this.onRender}
        ></lit-moveable>
    </div>
</div>`;
    }
    individualGroupableProps(element) {
        if (element!.classList.contains("target2")) {
            return { resizable: false };
        }
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
}