import Moveable, { DIRECTIONS } 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="target"
        style="transform-origin: top center;"
    >Target</div>
    <lit-moveable
        .target=${".target"}
        .litDraggable=${true}
        .rotatable=${{ renderDirections: DIRECTIONS
        }}
        .resolveAblesWithRotatable=${{ resizable: ["nw", "ne", "sw", "se"]
        }}
        .resizable=${{ renderDirections: false
        }}
        .rotateAroundControls=${true}
        @litRender=${this.onRender}
    ></lit-moveable>
</div>`;
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
}