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

export default {
    components: { Moveable },
    setup() {
        const onRenderGroup = e => {
            e.events.forEach(ev => {
                ev.target.style.cssText += ev.cssText;
            });
        };
        const onRenderGroupEnd = e => {
            console.log(JSON.stringify(e.moveable.getRect(), undefined, 4));
        };
        const onChangeTargets = e => {
            console.log(
                "??",
                JSON.stringify(e.moveable.getRect(), undefined, 4)
            );
        };
        return { onRenderGroup, onRenderGroupEnd, onChangeTargets };
    }
};
</script>
<template>
    <div class="root">
        <p class="description">* You can persist by `moveable.getRect()` method.</p>
        <div
            class="target target1"
            style="transform: translate(57.4837px, 16.3011px) rotate(10.5213deg);"
        >No Target1</div>
        <div
            class="target target2"
            style="transform: translate(22.3858px, 104.945px) rotate(30.5213deg);"
        >No Target2</div>
        <div
            class="target target3"
            style="transform: translate(-16.8514px, 28.7599px) rotate(30.5213deg);"
        >No Target3</div>
        <Moveable
            :draggable="true"
            :resizable="true"
            :rotatable="true"
            :origin="true"
            :persistData="({ 'width': 391.66543415599995, 'height': 383.962796948, 'left': 62.228131762906024, 'top': 90.31465753146728, 'pos1': [219.08575903890602, 90.31465753146728], 'pos2': [453.89356591890595, 287.34203529146725], 'pos3': [62.228131762906024, 277.25007671946724], 'pos4': [297.035938642906, 474.2774544794673], 'offsetWidth': 306.52, 'offsetHeight': 244.027, 'beforeOrigin': [258.060280934906, 282.2936213634673], 'origin': [258.060280934906, 282.2936213634673], 'transformOrigin': [153.258, 122.012], 'rotation': 40.00003345093183, 'children': [{ 'width': 116.5788, 'height': 116.5788, 'left': 169.1943, 'top': 128.01170000000002, 'pos1': [187.4544, 128.01170000000002], 'pos2': [285.7731, 146.2718], 'pos3': [169.1943, 226.33040000000003], 'pos4': [267.51300000000003, 244.59050000000002], 'offsetWidth': 100, 'offsetHeight': 100, 'beforeOrigin': [227.4837, 186.30110000000002], 'origin': [227.4837, 186.30110000000002], 'transformOrigin': [50, 50], 'rotation': 10.52129854976897 }, { 'width': 136.92990000000003, 'height': 136.92989999999998, 'left': 303.92085, 'top': 226.48005, 'pos1': [354.70675, 226.48005], 'pos2': [440.85075, 277.26595], 'pos3': [303.92085, 312.62405], 'pos4': [390.06485, 363.40995], 'offsetWidth': 100, 'offsetHeight': 100, 'beforeOrigin': [372.3858, 294.945], 'origin': [372.3858, 294.945], 'transformOrigin': [50, 50], 'rotation': 30.521329871109174 }, { 'width': 136.92990000000003, 'height': 136.92989999999998, 'left': 144.68365, 'top': 260.29495, 'pos1': [195.46955, 260.29495], 'pos2': [281.61355000000003, 311.08084999999994], 'pos3': [144.68365, 346.43895], 'pos4': [230.82765, 397.22484999999995], 'offsetWidth': 100, 'offsetHeight': 100, 'origin': [213.1486, 328.75989999999996], 'transformOrigin': [50, 50], 'rotation': 30.521329871109167 }] })"
            @renderGroup="onRenderGroup"
            @renderGroupEnd="onRenderGroupEnd"
            @changeTargets="onChangeTargets"/>
    </div>
</template>