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

export default {
    components: { Moveable },
    setup() {
        const containerScale = "$preview_containerScale";
        const targetRef = ref(null);
        const onDrag = e => {
            e.target.style.transform = e.transform;
        };
        return { containerScale, targetRef, onDrag };
    }
};
</script>
<template>
    <div class="root">
        <div
            class="container"
            :style="`transform-origin: 0 0;transform: ${`scale(${containerScale})`};`"
        >
            <svg
                viewBox="0 0 200 200"
                style="position: relative;border: 1px solid black;width: 200px;height: 200px;top: 100px;left: 100px;"
            >
                <g
                    transform="translate(10, 10) rotate(0)"
                    x="50"
                    y="50"
                    style=""
                >
                    <path
                        d="M 50 50 L 250 50 L 250 250 z"
                        ref="targetRef"
                        style="transform: translate(30px, 30px) rotate(20deg);fill: white;stroke: red;stroke-width: 2;"/>
                </g>
            </svg>
            <Moveable
                :target="targetRef"
                :draggable="true"
                @drag="onDrag"/>
        </div>
    </div>
</template>