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

@Component({ selector: "ngx-app", templateUrl: "./App.component.html" })
export default class NgxAppComponent {
    resizable: any = "$preview_resizable";
    keepRatio: any = "$preview_keepRatio";
    throttleResize: any = "$preview_throttleResize";
    renderDirections: any = "$preview_renderDirections";
    @ViewChild("widthInputRef")
    widthInputRef!: ElementRef<HTMLInputElement>;
    @ViewChild("heightInputRef")
    heightInputRef!: ElementRef<HTMLInputElement>;
    @ViewChild("moveableRef")
    moveableRef!: NgxMoveableComponent;
    onInput: any = (e: any) => {
        const ev = (e.nativeEvent || e) as InputEvent;
        if (typeof ev.data === "undefined") {
            this.moveableRef!.request("resizable", {
                offsetWidth: parseFloat(this.widthInputRef!.value),
                offsetHeight: parseFloat(this.heightInputRef!.value)
            }, true);
        }
    };
    onKeyUp: any = (e: any) => {
        e.stopPropagation();
        if (e.keyCode === 13) {
            this.moveableRef!.request("resizable", {
                offsetWidth: parseFloat(this.widthInputRef!.value),
                offsetHeight: parseFloat(this.heightInputRef!.value)
            }, true);
        }
    };
    onResize(e) {
        e.target.style.width = `${e.width}px`;
        e.target.style.height = `${e.height}px`;
        e.target.style.transform = e.drag.transform;
    }
    onResizeEnd(e) {
        requestAnimationFrame(() => {
            const rect = e.moveable.getRect();
            this.widthInputRef!.value = `${rect.offsetWidth}`;
            this.heightInputRef!.value = `${rect.offsetHeight}`;
        });
    }
}