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

export default {
    components: { Moveable },
    setup() {
        const onRound = e => {
            console.log("ROUND", e.borderRadius);
        };
        const onRender = e => {
            e.target.style.cssText += e.cssText;
        };
        const onRenderEnd = e => {
            e.target.style.cssText += e.cssText;
        };
        const onRound$0 = e => {
            console.log("ROUND", e.borderRadius);
            e.target.style.borderRadius = e.borderRadius;
        };
        const onRound$1 = e => {
            console.log("ROUND", e.borderRadius);
            e.target.style.borderRadius = e.borderRadius;
        };
        const onRound$2 = e => {
            console.log("ROUND", e.borderRadius);
            e.target.style.borderRadius = e.borderRadius;
        };
        return {
            onRound,
            onRender,
            onRenderEnd,
            onRound$0,
            onRound$1,
            onRound$2
        };
    }
};
</script>
<template>
    <div class="root">
        <div class="container">
            <div
                class="target target1"
                style="left: 10px;top: 10px;border-radius: 25px;"
            >Target1</div>
            <div
                class="target target2"
                style="left: 140px;top: 10px;border-radius: 25px 23px;"
            >Target2</div>
            <div
                class="target target3"
                style="left: 10px;top: 140px;border-radius: 25px 23px / 20px;"
            >Target3</div>
            <div
                class="target target4"
                style="left: 140px;top: 140px;border-radius: 25px 25.5px 24.5px 24.9115px / 25.5px 25.5px 24.5px 24.5px;"
            >Target4</div>
            <Moveable
                :target="'.target1'"
                :draggable="true"
                :roundable="true"
                :resizable="true"
                :isDisplayShadowRoundControls="'horizontal'"
                :roundClickable="'control'"
                :roundPadding="15"
                @round="onRound"
                @render="onRender"
                @renderEnd="onRenderEnd"/>
            <Moveable
                :target="'.target2'"
                :roundable="true"
                :roundClickable="true"
                @round="onRound$0"/>
            <Moveable
                :target="'.target3'"
                :roundable="true"
                @round="onRound$1"/>
            <Moveable
                :target="'.target4'"
                :roundable="true"
                @round="onRound$2"/>
        </div>
    </div>
</template>