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

@Component({ selector: "ngx-app", templateUrl: "./App.component.html" })
export default class NgxAppComponent {
    hideChildMoveableDefaultLines: any = "$preview_hideChildMoveableDefaultLines";
    draggable: any = "$preview_draggable";
    throttleDrag: any = "$preview_throttleDrag";
    edgeDraggable: any = "$preview_edgeDraggable";
    startDragRotate: any = "$preview_startDragRotate";
    throttleDragRotate: any = "$preview_throttleDragRotate";
    resizable: any = "$preview_resizable";
    keepRatio: any = "$preview_keepRatio";
    throttleResize: any = "$preview_throttleResize";
    renderDirections: any = "$preview_renderDirections";
    rotatable: any = "$preview_rotatable";
    throttleRotate: any = "$preview_throttleRotate";
    rotationPosition: any = "$preview_rotationPosition";
    minWidth: any = "$preview_minWidth";
    minHeight: any = "$preview_minHeight";
    maxWidth: any = "$preview_maxWidth";
    maxHeight: any = "$preview_maxHeight";
    @ViewChild("moveableRef")
    moveableRef!: NgxMoveableComponent;
    onClick() {
        this.moveableRef!.updateRect();
    }
    onDragGroup({ events }) {
        events.forEach(ev => {
            ev.target.style.transform = ev.transform;
        });
    }
    onResizeGroupStart({ setMin, setMax }) {
        setMin([this.minWidth, this.minHeight]);
        setMax([this.maxWidth, this.maxHeight]);
    }
    onResizeGroup({ events }) {
        events.forEach(ev => {
            ev.target.style.width = `${ev.width}px`;
            ev.target.style.height = `${ev.height}px`;
            ev.target.style.transform = ev.drag.transform;
        });
    }
    onRotateGroup({ events }) {
        events.forEach(ev => {
            ev.target.style.transform = ev.drag.transform;
        });
    }
}