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

export default {
    components: { Moveable, Selecto },
    data() {
        const targets = [];
        const moveableRef = null;
        const selectoRef = null;
        const cubes = [];
        for (let i = 0; i < 30; ++i) {
            cubes.push(i);
        }
        return { targets, moveableRef, selectoRef, cubes };
    },
    methods: {
        onClickGroup(e) {
            this.$refs.selectoRef.clickTarget(e.inputEvent, e.inputTarget);
        },
        onDrag(e) {
            e.target.style.transform = e.transform;
        },
        onDragGroup(e) {
            e.events.forEach(ev => {
                ev.target.style.transform = ev.transform;
            });
        },
        onDragStart(e) {
            const moveable = this.$refs.moveableRef;
            const target = e.inputEvent.target;
            if (moveable.isMoveableElement(target)
                || this.targets.some(t => t === target || t.contains(target))
            ) {
                e.stop();
            }
        },
        onSelectEnd(e) {
            const moveable = this.$refs.moveableRef;
            if (e.isDragStart) {
                e.inputEvent.preventDefault();
                moveable.waitToChangeTarget().then(() => {
                    moveable.dragStart(e.inputEvent);
                });
            }
            this.targets = e.selected;
        }
    },
    mounted() {
        this.moveableRef = this.$refs.moveableRef;
        this.selectoRef = this.$refs.selectoRef;
    }
};
</script>
<template>
    <div class="root">
        <div class="container">
            <Moveable
                ref="moveableRef"
                :draggable="true"
                :target="targets"
                @clickGroup="onClickGroup"
                @drag="onDrag"
                @dragGroup="onDragGroup"
            ></Moveable>
            <Selecto
                ref="selectoRef"
                :dragContainer="window"
                :selectableTargets="['.selecto-area .cube']"
                :hitRate="0"
                :selectByClick="true"
                :selectFromInside="false"
                :toggleContinueSelect="['shift']"
                :ratio="0"
                @dragStart="onDragStart"
                @selectEnd="onSelectEnd"
            ></Selecto>
            <div class="elements selecto-area">
                <div
                    class="cube"
                    :key="i"
                    v-for="i in cubes"
                ></div>
            </div>
            <div class="empty elements"></div>
        </div>
    </div>
</template>