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

export default {
    components: { Moveable },
    data() {
        return {};
    },
    methods: {
        onRender(e) {
            e.target.style.cssText += e.cssText;
        },
        onRenderEnd(e) {
            console.log("RCR", e.moveable.state.rootContainerClientRect);
            console.log("ORM", e.moveable.state.originalRootMatrix);
            console.log("MCR", e.moveable.state.moveableClientRect);
        }
    }
};
</script>
<template>
    <div class="margin no-relative">
        <div
            style="position: absolute;left: 84px;top: 159px;z-index: 1;"
        >92 x 167 (34, 84)</div>
        <div
            class="root"
            style="padding: 10px;"
        >
            <div style="zoom: 0.5;position: relative;">
                <div
                    style="position: relative;margin-top: 100px;width: 500px;height: 500px;"
                >
                    <div
                        class="target"
                        style="transform: translate(0px, 0px);"
                    >Target</div>
                    <Moveable
                        :target="'.target'"
                        :draggable="true"
                        :rotatable="true"
                        :resizable="true"
                        :rootContainer="document.body"
                        @render="onRender"
                        @renderEnd="onRenderEnd"
                    ></Moveable>
                </div>
            </div>
        </div>
    </div>
</template>