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

export default {
    components: { Moveable },
    data() {
        const containerScale = "$preview_containerScale";
        const throttleDrag = "$preview_throttleDrag";
        const edgeDraggable = "$preview_edgeDraggable";
        const startDragRotate = "$preview_startDragRotate";
        const throttleDragRotate = "$preview_throttleDragRotate";
        const xInputRef = null;
        const yInputRef = null;
        const moveableRef = null;
        const requestCallbacks = (() => {
            function request() {
                moveableRef.request("draggable", {
                    x: parseInt(xInputRef.value),
                    y: parseInt(yInputRef.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();
                    }
                }
            };
        })();
        return {
            containerScale,
            throttleDrag,
            edgeDraggable,
            startDragRotate,
            throttleDragRotate,
            xInputRef,
            yInputRef,
            moveableRef,
            requestCallbacks
        };
    },
    methods: {
        onDrag(e) {
            e.target.style.transform = e.transform;
        },
        onDragEnd(e) {
            requestAnimationFrame(() => {
                const rect = e.moveable.getRect();
                this.$refs.xInputRef.value = `${rect.left}`;
                this.$refs.yInputRef.value = `${rect.top}`;
            });
        }
    },
    mounted() {
        this.xInputRef = this.$refs.xInputRef;
        this.yInputRef = this.$refs.yInputRef;
        this.moveableRef = this.$refs.moveableRef;
    }
};
</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>