import { NgxMoveableComponent } from "ngx-moveable";
import { ViewChild, ElementRef, Component } from "@angular/core";

@Component({ selector: "ngx-app", templateUrl: "./App.component.html" })
export default class NgxAppComponent {
    containerScale: any = "$preview_containerScale";
    throttleDrag: any = "$preview_throttleDrag";
    edgeDraggable: any = "$preview_edgeDraggable";
    startDragRotate: any = "$preview_startDragRotate";
    throttleDragRotate: any = "$preview_throttleDragRotate";
    @ViewChild("xInputRef")
    xInputRef!: ElementRef<HTMLInputElement>;
    @ViewChild("yInputRef")
    yInputRef!: ElementRef<HTMLInputElement>;
    @ViewChild("moveableRef")
    moveableRef!: NgxMoveableComponent;
    requestCallbacks: any = (() => {
        function request() {
            this.moveableRef!.request("draggable", {
                x: parseInt(this.xInputRef!.value),
                y: parseInt(this.yInputRef!.value)
            }, true);
        }
        return {
            onInput(e: any) {
                const ev = (e.nativeEvent || e) as InputEvent;
                if (typeof ev.data === "undefined") {
                    request();
                }
            },
            onKeyUp(e: any) {
                e.stopPropagation();
                if (e.keyCode === 13) {
                    request();
                }
            }
        };
    })();
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onDragEnd(e) {
        requestAnimationFrame(() => {
            const rect = e.moveable.getRect();
            this.xInputRef!.value = `${rect.left}`;
            this.yInputRef!.value = `${rect.top}`;
        });
    }
}