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

export default {
    components: { Moveable },
    data() {
        const targets = [".cube1", ".cube2"];
        const moveableRef = null;
        const cubes = [];
        for (let i = 0; i < 30; ++i) {
            cubes.push(i);
        }
        return { targets, moveableRef, cubes };
    },
    methods: {
        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;
            });
        }
    },
    mounted() {
        this.moveableRef = this.$refs.moveableRef;
    }
};
</script>
<template>
    <div class="root">
        <div class="container">
            <Moveable
                ref="moveableRef"
                :draggable="true"
                :target="targets"
                @dragGroupStart="onDragGroupStart"
                @drag="onDrag"
                @dragGroup="onDragGroup"
            ></Moveable>
            <div class="elements selecto-area">
                <div
                    :class="`cube cube${i}`"
                    :key="i"
                    v-for="i in cubes"
                ></div>
            </div>
            <div class="empty elements"></div>
        </div>
    </div>
</template>