<script>
import Moveable, { MoveableManagerInterface, Renderer } from "vue3-moveable";
import { ref, onMounted } from "vue";

const DimensionViewable = {
    name: "dimensionViewable",
    props: [],
    events: [],
    render(moveable, React) {
        const rect = moveable.getRect();
        return React.createElement("div", {
            key: "dimension-viewer",
            className: "moveable-dimension",
            style: {
                position: "absolute",
                left: `${rect.width / 2}px`,
                top: `${rect.height + 20}px`,
                background: "#4af",
                borderRadius: "2px",
                padding: "2px 4px",
                color: "white",
                fontSize: "13px",
                whiteSpace: "nowrap",
                fontWeight: "bold",
                willChange: "transform",
                transform: `translate(-50%, 0px)`
            }
        }, [
            "\r\n            Target\r\n        "
        ]);
    }
};
export default {
    components: { Moveable },
    setup() {
        const targetRef = ref(null);
        const dragTarget = ref(undefiend);
        const onDrag = e => {
            e.target.style.transform = e.transform;
        };
        const onResize = e => {
            e.target.style.width = `${e.width}px`;
            e.target.style.height = `${e.height}px`;
            e.target.style.transform = e.drag.transform;
        };
        const onRotate = e => {
            e.target.style.transform = e.drag.transform;
        };
        onMounted(() => {
            dragTarget.value = document.querySelector(".moveable-dimension");
        });
        return {
            targetRef,
            DimensionViewable,
            dragTarget,
            onDrag,
            onResize,
            onRotate
        };
    }
};
</script>
<template>
    <div class="container">
        <div
            class="target"
            ref="targetRef"
        ></div>
        <Moveable
            :target="targetRef"
            :ables="[DimensionViewable]"
            :draggable="true"
            :resizable="true"
            :rotatable="true"
            :dragTarget="dragTarget"
            :props="({ dimensionViewable: true })"
            @drag="onDrag"
            @resize="onResize"
            @rotate="onRotate"/>
    </div>
</template>