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

<script setup lang="ts">
import { Layer } from 'konva/lib/Layer';
import { Circle } from 'konva/lib/shapes/Circle';
import { Stage } from 'konva/lib/Stage';
import { nextTick, onBeforeMount } from 'vue';

const initial = () => {
	// first we need to create a stage
	var stage = new Stage({
		container: 'container', // id of container <div>
		width: 500,
		height: 500,
	});

	// then create layer
	var layer = new Layer();

	// create our shape
	var circle = new Circle({
		x: stage.width() / 2,
		y: stage.height() / 2,
		radius: 70,
		fill: 'red',
		stroke: 'black',
		strokeWidth: 4,
	});

	// add the shape to the layer
	layer.add(circle);

	// add the layer to the stage
	stage.add(layer);
	stage.draggable(true);

	// draw the image
	layer.draw();
};

onBeforeMount(() => {
	nextTick(() => {
		initial();
	});
});
</script>
