<script>
import Moveable from "vue3-moveable";
import { ref } from "vue";

export default {
    components: { Moveable },
    setup() {
        const targets = ref([".cube1", ".cube2"]);
        const moveableRef = ref(null);
        const cubes = [];
        for (let i = 0; i < 30; ++i) {
            cubes.push(i);
        }
        const onDragGroupStart = () => {
            requestAnimationFrame(() => {
                if (targets.value.length === 2) {
                    targets.value = [".cube1", ".cube2", ".cube3"];
                } else if (targets.value.length === 3) {
                    targets.value = [".cube1", ".cube2", ".cube3", ".cube4"];
                }
            });
        };
        const onDrag = e => {
            e.target.style.cssText += e.cssText;
        };
        const onDragGroup = e => {
            e.events.forEach(ev => {
                ev.target.style.cssText += ev.cssText;
            });
        };
        return {
            moveableRef,
            targets,
            onDragGroupStart,
            onDrag,
            onDragGroup,
            cubes
        };
    }
};
</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>