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<string> = [".cube1", ".cube2"];
    @ViewChild("moveableRef")
    moveableRef!: NgxMoveableComponent;
    cubes: any = [];
    ngOnInit() {
        for (let i = 0; i < 30; ++i) {
            this.cubes.push(i);
        }
    }
    onDragGroupStart() {
        requestAnimationFrame(() => {
            if (this.targets.length === 2) {
                this.targets = [".cube1", ".cube2", ".cube3"];
            } else if (this.targets.length === 3) {
                this.targets = [".cube1", ".cube2", ".cube3", ".cube4"];
            }
        });
    }
    onDrag(e) {
        e.target.style.cssText += e.cssText;
    }
    onDragGroup(e) {
        e.events.forEach(ev => {
            ev.target.style.cssText += ev.cssText;
        });
    }
    trackBy(_, i) {
        return i;
    }
}