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

const MouseEnterLeaveAble = makeAble("enterLeave", {
    mouseEnter(moveable: MoveableManagerInterface) {
        if (moveable.moveables) {
            moveable.moveables.forEach(child => {
                child.state.target!.style.backgroundColor = "#e55";
            });
        } else {
            moveable.state.target!.style.backgroundColor = "#e55";
        }
    },
    mouseLeave(moveable: MoveableManagerInterface) {
        if (moveable.moveables) {
            moveable.moveables.forEach(child => {
                child.state.target!.style.backgroundColor = "";
            });
        } else {
            moveable.state.target!.style.backgroundColor = "";
        }
    }
});
@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;
    }
    onDragGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.transform = ev.transform;
        });
    }
}