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

@Component({ selector: "ngx-app", templateUrl: "./App.component.html" })
export default class NgxAppComponent {
    groupInstances: any[] = [];
    @ViewChild("t1")
    t1!: any;
    @ViewChild("t2")
    t2!: any;
    @ViewChild("groupMoveable")
    groupMoveable!: any;
    initGroupElements() {
        const arr: any[] = [];
        arr.push(document.getElementsByClassName("target1")[0]);
        arr.push(document.getElementsByClassName("target2")[0]);
        this.groupInstances = arr;
    }
    handleDragStart(e: any) {
        initGroupElements();
        this.groupMoveable!.dragStart(e.inputEvent);
    }
    onDragGroup(e) {
        e.events.forEach((ev) => (ev.target.style.transform = ev.transform));
        this.t1.updateRect();
        this.t2.updateRect();
    }
    onDragGroupEnd() {
        this.groupInstances = [];
    }
}