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">
        <p class="description">
            * There is a subpixel issue because offsetLeft and offsetTop are used.
            <br></br>
            * You can accurately represent the position of a movable control box.
            <br></br>
            * However, since gBCR is used, css zoom should not be used
            <br></br>
            * and `
        transform: rotate` should not be used for container, rootContainer.
        </p>
        <div style="transform-origin: 0 0;transform: scale(2, 2);">
            <div
                class="target target1"
                style="position: relative;left: 10.5px;top: 10.5px;width: 100px;height: 40px;line-height: 40px;font-size: 10px;"
            >Not Accurate</div>
        </div>
        <lit-moveable
            .target=${".target1"}
            .litDraggable=${true}
            .origin=${false}
            @litRender=${this.onRender}
        ></lit-moveable>
        <div style="transform-origin: 0 0;transform: scale(2, 2);">
            <div
                class="target target2"
                style="position: absolute;left: 10.5px;top: 50.5px;width: 100px;height: 40px;line-height: 40px;font-size: 10px;"
            >Accurate</div>
        </div>
        <lit-moveable
            .target=${".target2"}
            .litDraggable=${true}
            .origin=${false}
            .useAccuratePosition=${true}
            @litRender=${this.onRender$0}
        ></lit-moveable>
    </div>
</div>`;
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
    onRender$0(e) {
        e.target.style.cssText += e.cssText;
    }
}