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

export default {
    components: { Moveable },
    setup() {
        const onRender = e => {
            e.target.style.cssText += e.cssText;
        };
        const onRender$0 = e => {
            e.target.style.cssText += e.cssText;
        };
        return { onRender, onRender$0 };
    }
};
</script>
<template>
    <div
        class="no-relative"
        style="height: 400px;"
    >
        <div
            class="target"
            style="margin-left: 100px;"
        >Target</div>
        <svg
            class="target2"
            data-target="svg"
            style="top: 45.7%;left: 63%;width: 17%;height: 40%;transform: rotate(0deg);border: 1px solid black;"
        >
            <path
                data-target="path1"
                d="M 74 53.64101615137753 L 14.000000000000027 88.28203230275507 L 14 19 L 74 53.64101615137753 Z"
                fill="#f55"
                stroke-linejoin="round"
                stroke-width="8"
                opacity="1"
                stroke="#5f5"
                origin="50% 50%"/>
            <path
                data-target="path2"
                d="M 84 68.64101615137753 L 24.00000000000003 103.28203230275507 L 24 34 L 84 68.64101615137753 Z"
                fill="#55f"
                stroke-linejoin="round"
                stroke-width="8"
                opacity="1"
                stroke="#333"
                origin="50% 50%"/>
            <g style="transform: translate(40px, 10px);">
                <path
                    data-target="pathline"
                    d="M3,19.333C3,17.258,9.159,1.416,21,5.667&#xD;&#xA;                            c13,4.667,13.167,38.724,39.667,7.39"
                    fill="transparent"
                    stroke="#ff5"/>
                <ellipse
                    data-target="ellipse"
                    cx="40"
                    cy="80"
                    rx="40"
                    ry="10"
                    style="fill: yellow;stroke: purple;stroke-width: 2;"/>
            </g>
        </svg>
        <Moveable
            :target="'.target'"
            :draggable="true"
            :rotatable="true"
            @render="onRender"
        ></Moveable>
        <Moveable
            :target="'.target2'"
            :draggable="true"
            :rotatable="true"
            @render="onRender$0"
        ></Moveable>
    </div>
</template>