[vue-draggable-resizable] リサイズをする

VueでHTML要素をリサイズするサンプルです。
「vue-draggable-resizable」を使用したバージョンです。

リサイズでも、parent: true を設定すると、親要素の大きさを超えないようです。

コード

template

<template>
<div id="app">
    <div id="stage">
        <vue-draggable-resizable 
            v-for="item in shapes"
            :key="item._id" 
            :x="item.x" 
            :y="item.y"      
            :w="item.w" 
            :h="item.h" 
            :resizable="item.resizable" 
            :parent="item.parent" 
            class="item" 
            :style="item.fillStyle"
        >
            <div>
                <h1>{{ item.heading }}</h1>
                <p>
                    {{ item.text }}
                </p>
            </div>
        </vue-draggable-resizable>
    </div>
</div>
</template>

script

<script>
Vue.component( 'vue-draggable-resizable', VueDraggableResizable );
    
export default {
    data() {
        return {
            // setting for Rect object
            shapes: [
                {
                    _id: '0',
                    x: 10,
                    y: 10,
                    w: 150,
                    h: 150,
                    fillStyle: 'background: white;',
                    resizable: true,
                    parent: true,
                    heading: 'Resize 1',
                    text: 'parent: true'
                },
                {
                    _id: '1',
                    x: 200,
                    y: 200,
                    w: 250,
                    h: 250,
                    fillStyle: 'background: white;',
                    resizable: true,
                    parent: false,
                    heading: 'Resize 2',
                    text: 'parent: false'
                }
            ]
        };
    }
};
</script>

style

<style>
#app {
    width: 100%;
    height: 100vh;
    background: #ECEFF1;
    color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: center;
}

#stage {
    background: #CFD8DC;
    width: 500px;
    height: 500px;
}

.item {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item h1 {
    font-size: 24px;
}
</style>

メモ

HTML要素をリサイズではなく、拡大縮小を試してみたが、「scale」を設定するだけではうまくいかなかった。
拡大縮小できている?が、中身の大きさが同じだったので、リサイズとの違いがわからなかった。

SVG要素をリサイズしようとすると、枠線(バウンディングボックス)のみリサイズされた。