import { NgxMoveableComponent } from "ngx-moveable";
import "./snap.css";
import { Component } from "@angular/core";

@Component({ selector: "ngx-app", templateUrl: "./App.component.html" })
export default class NgxAppComponent {
    snapContainer: HTMLElement | string = ".snapGrid";
    onMoustEnter(e: MouseEvent) {
        this.snapContainer = e.currentTarget as HTMLElement;
    }
    onDragStart() {
        document.querySelectorAll<HTMLElement>(".snapGrid").forEach(grid => {
            grid.addEventListener("mouseenter", this.onMoustEnter);
        });
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
        e.target.style.pointerEvents = "none";
    }
    onDragEnd(e) {
        e.target.style.pointerEvents = "";
        document.querySelectorAll<HTMLElement>(".snapGrid").forEach(grid => {
            grid.removeEventListener("mouseenter", this.onMoustEnter);
        });
    }
}