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

const CustomRotation = makeAble("customRotation", {
    render(moveable: MoveableManagerInterface<any, any>, React: Renderer): any {
        const rect = moveable.getRect();
        const { pos1, pos2 } = moveable.state;
        return React.createElement("div", {
            key: "custom-rotation",
            className: "moveable-custom-rotation",
            style: {
                position: "absolute",
                transform: `translate(-50%, -100%)` + ` translate(${(pos1[0] + pos2[0]) / 2}px, ${(pos1[1] + pos2[1]) / 2}px)` + ` rotate(${rect.rotation}deg) translateY(-20px)`,
                width: "20px",
                height: "20px",
                background: "#f55",
                cursor: "move",
                transformOrigin: "50% 100%"
            }
        }, [
            "\r\n        "
        ]);
    }
});
@Component({ selector: "ngx-app", templateUrl: "./App.component.html" })
export default class NgxAppComponent {
    @ViewChild("targetRef")
    targetRef!: ElementRef<HTMLDivElement>;
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onResize(e) {
        e.target.style.width = `${e.width}px`;
        e.target.style.height = `${e.height}px`;
        e.target.style.transform = e.drag.transform;
    }
    onRotate(e) {
        e.target.style.transform = e.drag.transform;
    }
}