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

export default {
    components: { Moveable },
    setup() {
        const containerScale = "$preview_containerScale";
        const throttleDrag = "$preview_throttleDrag";
        const edgeDraggable = "$preview_edgeDraggable";
        const startDragRotate = "$preview_startDragRotate";
        const throttleDragRotate = "$preview_throttleDragRotate";
        const xInputRef = ref(null);
        const yInputRef = ref(null);
        const moveableRef = ref(null);
        const requestCallbacks = ref((() => {
            function request() {
                moveableRef.value.request("draggable", {
                    x: parseInt(xInputRef.value.value),
                    y: parseInt(yInputRef.value.value)
                }, true);
            }
            return {
                onInput(e) {
                    const ev = (e.nativeEvent || e);
                    if (typeof ev.data === "undefined") {
                        request();
                    }
                },
                onKeyUp(e) {
                    e.stopPropagation();
                    if (e.keyCode === 13) {
                        request();
                    }
                }
            };
        })());
        const onDrag = e => {
            e.target.style.transform = e.transform;
        };
        const onDragEnd = e => {
            requestAnimationFrame(() => {
                const rect = e.moveable.getRect();
                xInputRef.value.value = `${rect.left}`;
                yInputRef.value.value = `${rect.top}`;
            });
        };
        return {
            xInputRef,
            requestCallbacks,
            yInputRef,
            containerScale,
            moveableRef,
            throttleDrag,
            edgeDraggable,
            startDragRotate,
            throttleDragRotate,
            onDrag,
            onDragEnd
        };
    }
};
</script>
<template>
    <div class="root">
        <div>
            X:
            <input
                ref="xInputRef"
                type="number"
                defaultValue="100"
                {...requestCallbacks}
            ></input>
            &nbsp;
                            Y:
            <input
                ref="yInputRef"
                type="number"
                defaultValue="150"
                {...requestCallbacks}
            ></input>
        </div>
        <div
            class="container"
            :style="`transform: ${`scale(${containerScale})`};`"
        >
            <div class="target">Target</div>
            <Moveable
                ref="moveableRef"
                :target="'.target'"
                :draggable="true"
                :throttleDrag="throttleDrag"
                :edgeDraggable="edgeDraggable"
                :startDragRotate="startDragRotate"
                :throttleDragRotate="throttleDragRotate"
                @drag="onDrag"
                @dragEnd="onDragEnd"/>
        </div>
    </div>
</template>