<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 group = new Konva.Group({ x: 120, y: 40, rotation: 20, draggable: true });
	const colors = ['red', 'orange', 'yellow'];
	for (let i = 0; i < 3; i++) {
		const rect = new Konva.Rect({
			x: i * 30,
			y: i * 30,
			width: 100,
			height: 20,
			name: `color${colors[i]}`,
			fill: colors[i],
			stroke: 'black',
			strokeWidth: 4,
		});
		group.add(rect);
	}

	layer.add(group);
};

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

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

<style scoped lang="scss"></style>
