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

export default {
    components: { Moveable },
    data() {
        const targetRef = null;
        return { targetRef };
    },
    methods: {
        onClip(e) {
            if (e.clipType === "rect") {
                e.target.style.clip = e.clipStyle;
            } else {
                e.target.style.clipPath = e.clipStyle;
            }
        },
        onRender(e) {
            e.target.style.transform = e.transform;
        }
    },
    mounted() {
        this.targetRef = this.$refs.targetRef;
    }
};
</script>
<template>
    <div class="container">
        <div class="nested first">
            No Transform
            <div class="nested scale">
                scale(1.5, 1.5)
                <div class="nested rotate">
                    rotate(30deg)
                    <div
                        class="target"
                        ref="targetRef"
                    >Target</div>
                </div>
            </div>
        </div>
        <Moveable
            :target="targetRef"
            :draggable="true"
            :throttleDrag="0"
            :startDragRotate="0"
            :throttleDragRotate="0"
            :zoom="1"
            :origin="true"
            :padding="({ left: 0, top: 0, right: 0, bottom: 0 })"
            :clippable="true"
            :clipRelative="false"
            :clipArea="false"
            :dragWithClip="false"
            :defaultClipPath="'inset'"
            :clipTargetBounds="true"
            :clipVerticalGuidelines="[0, 100, 200]"
            :clipHorizontalGuidelines="[0, 100, 200]"
            :snapThreshold="5"
            @clip="onClip"
            @render="onRender"/>
    </div>
</template>