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 {
    threshold: any = "$preview_threshold";
    checkScrollEvent: any = "$preview_checkScrollEvent";
    throttleTime: any = "$preview_throttleTime";
    render() {
        return html `<div class="container">
    <div class="scrollArea">
        <div class="target">Target</div>
        <lit-moveable
            .scrollable=${true}
            .scrollOptions=${{
            container: ".scrollArea",
            threshold: this.threshold,
            checkScrollEvent: this.checkScrollEvent,
            throttleTime: this.throttleTime
        }}
            .target=${".target"}
            .litDraggable=${true}
            .resizable=${true}
            .rotatable=${true}
            @litRender=${this.onRender}
            @litScroll=${this.onScroll}
        ></lit-moveable>
    </div>
</div>`;
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
    onScroll({ scrollContainer, direction }) {
        scrollContainer.scrollBy(direction[0] * 10, direction[1] * 10);
    }
}