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 {
    arr: any = [];
    constructor() {
        super();
        for (let i = 0; i < 300; ++i) {
            this.arr.push(i);
        }
    }
    render() {
        return html `<div class="root">
    <div class="container">${this.arr.map(i => <>
                        html `this.arr.map(i => <>
                        <div .class=${`target target${i}`}>Target</div>
                        <lit-moveable .target=${`.target${i}`} .litDraggable=${true} @litRender=${this.onRender}></lit-moveable>
                    </>)`
                        html `
        this.arr.map(i => <><div .class=${`target target${i}`}>Target</div><lit-moveable .target=${`.target${i}`} .litDraggable=${true}
        @litRender
=
        $
        {
            this.onRender
        }
        >
</
        lit-moveable>
</
        >
    )
        `
                    </>)}</div>
</div>`;
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
}