<script>
import Moveable from "vue-moveable";

export default {
    components: { Moveable },
    data() {
        const groupInstances = [];
        const t1 = null;
        const t2 = null;
        const groupMoveable = null;
        return { groupInstances, t1, t2, groupMoveable };
    },
    methods: {
        initGroupElements() {
            const arr = [];
            arr.push(document.getElementsByClassName("target1")[0]);
            arr.push(document.getElementsByClassName("target2")[0]);
            this.groupInstances = arr;
        },
        handleDragStart(e) {
            initGroupElements();
            this.$refs.groupMoveable.dragStart(e.inputEvent);
        },
        onDragGroup(e) {
            e.events.forEach((ev) => (ev.target.style.transform = ev.transform));
            this.$refs.t1.updateRect();
            this.$refs.t2.updateRect();
        },
        onDragGroupEnd() {
            this.groupInstances = [];
        }
    },
    mounted() {
        this.t1 = this.$refs.t1;
        this.t2 = this.$refs.t2;
        this.groupMoveable = this.$refs.groupMoveable;
    }
};
</script>
<template>
    <div class="root">
        <div class="container">
            <div :class="`target target1`">Target 1</div>
            <div :class="`target target2`">Target 2</div>
            <Moveable
                ref="t1"
                :target="`.target1`"
                :draggable="true"
                :edgeDraggable="true"
                :origin="false"
                @dragStart="handleDragStart"/>
            <Moveable
                ref="t2"
                :target="`.target2`"
                :draggable="true"
                :origin="false"
                :edgeDraggable="true"
                @dragStart="handleDragStart"/>
            <Moveable
                ref="groupMoveable"
                :target="groupInstances"
                :hideDefaultLines="false"
                :draggable="true"
                @dragGroup="onDragGroup"
                @dragGroupEnd="onDragGroupEnd"/>
        </div>
    </div>
</template>