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

@Component({ selector: "ngx-app", templateUrl: "./App.component.html" })
export default class NgxAppComponent implements OnInit {
    targets: Array<SVGElement | HTMLElement> = [];
    @ViewChild("moveableRef")
    moveableRef!: NgxMoveableComponent;
    @ViewChild("selectoRef")
    selectoRef!: NgxSelectoComponent;
    cubes: any = [];
    ngOnInit() {
        for (let i = 0; i < 30; ++i) {
            this.cubes.push(i);
        }
    }
    onClickGroup(e) {
        this.selectoRef!.clickTarget(e.inputEvent, e.inputTarget);
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onDragGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.transform = ev.transform;
        });
    }
    onDragStart(e) {
        const moveable = this.moveableRef!;
        const target = e.inputEvent.target;
        if (moveable.isMoveableElement(target)
            || this.targets.some(t => t === target || t.contains(target))
        ) {
            e.stop();
        }
    }
    onSelectEnd(e) {
        const moveable = this.moveableRef!;
        if (e.isDragStart) {
            e.inputEvent.preventDefault();
            moveable.waitToChangeTarget().then(() => {
                moveable.dragStart(e.inputEvent);
            });
        }
        this.targets = e.selected;
    }
    trackBy(_, i) {
        return i;
    }
}