<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import { onMounted } from 'vue';
import Konva from 'konva/lib';

const { width, height } = useWindowSize();

const initial = () => {
	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
	const layer = new Konva.Layer();
	stage.add(layer);

	const rect = new Konva.Rect({
		x: 100,
		y: 100,
		width: 100,
		height: 100,
		fill: 'red',
		name: 'rect',
		stroke: 'black',
		strokeWidth: 6,
		draggable: true,
	});
	layer.add(rect);

	const tr = new Konva.Transformer();
	layer.add(tr);

	tr.nodes([rect]);
	tr.on('transform', function () {
		const width = rect.width() * rect.scaleX();
		if (width > 200) {
			tr.stopTransform();

			const scaleX = 200 / rect.width();
			rect.scaleX(scaleX);
		}
	});
};

onMounted(() => initial());
</script>

<template>
	<div id="container"></div>
</template>
