<script>
import keycon from "keycon";
import Moveable from "vue3-moveable";
import { throttle } from "@daybrush/utils";

keycon.setGlobal();
export default {
    components: { Moveable },
    setup() {
        const onResizeStart = e => {
            e.setFixedDirection([0, 0]);
        };
        const onDrag = e => {
            e.target.style.transform = e.transform;
        };
        const onBeforeResize = e => {
            if (keycon.global.shiftKey) {
                e.setFixedDirection([-1, -1]);
            } else {
                e.setFixedDirection([0, 0]);
            }
        };
        const onResize = e => {
            e.target.style.cssText += `width: ${e.width}px; height: ${e.height}px`;
            e.target.style.transform = e.drag.transform;
        };
        const onBeforeRotate = e => {
            e.setRotation(throttle(e.rotation, 45));
        };
        const onRotate = e => {
            e.target.style.transform = e.drag.transform;
        };
        const onScaleStart = e => {
            e.setFixedDirection([0, 0]);
        };
        const onDrag$0 = e => {
            e.target.style.transform = e.transform;
        };
        const onBeforeScale = e => {
            if (keycon.global.shiftKey) {
                e.setFixedDirection([-1, -1]);
            } else {
                e.setFixedDirection([0, 0]);
            }
        };
        const onScale = e => {
            e.target.style.transform = e.drag.transform;
        };
        return {
            onResizeStart,
            onDrag,
            onBeforeResize,
            onResize,
            onBeforeRotate,
            onRotate,
            onScaleStart,
            onDrag$0,
            onBeforeScale,
            onScale
        };
    }
};
</script>
<template>
    <div class="root">
        <div
            class="container"
            style="height: 400px;border: 1px solid black;"
        >
            <div
                class="target resizable"
                style="position: absolute;width: 200px;height: 100px;top: 50px;"
            >Resizable Target</div>
            <div
                class="target scalable"
                style="position: absolute;width: 200px;height: 100px;top: 150px;left: 350px;"
            >Scalable Target</div>
            <Moveable
                :target="'.target.resizable'"
                :resizable="true"
                :draggable="true"
                :rotatable="true"
                :snappable="true"
                :bounds="({ left: 0, top: 0, bottom: 0, right: 0, position: 'css' })"
                @resizeStart="onResizeStart"
                @drag="onDrag"
                @beforeResize="onBeforeResize"
                @resize="onResize"
                @beforeRotate="onBeforeRotate"
                @rotate="onRotate"/>
            <Moveable
                :target="'.target.scalable'"
                :scalable="true"
                :keepRatio="true"
                :draggable="true"
                :snappable="true"
                :bounds="({ left: 0, top: 0, bottom: 0, right: 0, position: 'css' })"
                @scaleStart="onScaleStart"
                @drag="onDrag$0"
                @beforeScale="onBeforeScale"
                @scale="onScale"/>
        </div>
    </div>
</template>