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

<script setup lang="ts">
import Konva from 'konva/lib/index';
import { Layer } from 'konva/lib/Layer';
import { Arc } from 'konva/lib/shapes/Arc';
import { Label } from 'konva/lib/shapes/Label';
import { Ring } from 'konva/lib/shapes/Ring';
import { Star } from 'konva/lib/shapes/Star';
import { Text } from 'konva/lib/shapes/Text';
import { TextPath } from 'konva/lib/shapes/TextPath';
import { Stage } from 'konva/lib/Stage';

import { nextTick, onMounted } from 'vue';

/**
 * * 初始化
 */
const initial = () => {
	nextTick(() => {
		const content =
			"COMPLEX TEXT\n\nAll the world's a stage, and all the men and women merely players. They have their exits and their entrances.";

		const stage = new Stage({
			container: 'container',
			width: 500,
			height: 500,
		});

		const layer = new Layer({ draggable: true });

		// 文本内容
		const text = new Text({
			x: 0,
			y: 0,
			text: content,
			fontSize: 18,
			fontFamily: 'Calibri',
			fill: 'green',
			width: 300,
			padding: 20,
			align: 'center',
		});

		// 文字路径
		const textpath = new TextPath({
			x: 100,
			y: 0,
			text: content,
			fontSize: 16,
			fill: 'blue',
			fontFamily: 'Calibri',
			data: 'M10,10 C0,0 10,150 100,100 S300,150 5.0.300',
		});

		// 星
		const start = new Star({
			x: 90,
			y: 100,
			numPoints: 10,
			innerRadius: 40,
			outerRadius: 100,
			fill: 'red',
			stroke: 'green',
			strokeWidth: 4,
			draggable: true,
		});

		// 同心圆
		const ring = new Ring({
			x: 200,
			y: 150,
			innerRadius: 40,
			outerRadius: 100,
			fill: 'green',
			stroke: 'red',
			strokeWidth: 6,
			draggable: true,
		});

		const arc = new Arc({
			x: 150,
			y: 220,
			angle: 90,
			innerRadius: 40,
			outerRadius: 70,
			fill: 'green',
			stroke: '#fff',
			strokeWidth: 4,
		});

		// tooltip
		const tooltip = new Label({
			x: 170,
			y: 75,
			opacity: 0.75,
			draggable: true,
		});

		tooltip.add(
			new Konva.Tag({
				fill: 'black',
				pointerDirection: 'down',
				pointerWidth: 10,
				pointerHeight: 10,
				lineJoin: 'round',
				shadowColor: 'black',
				shadowBlur: 10,
				shadowOffsetX: 10,
				shadowOffsetY: 10,
				shadowOpacity: 0.5,
			}),
		);

		tooltip.add(
			new Konva.Text({
				text: 'Tooltip pointing down',
				fontFamily: 'Calibri',
				fontSize: 18,
				padding: 5,
				fill: 'white',
			}),
		);

		const label1 = new Label({
			x: 300,
			y: 150,
			opacity: 1,
			draggable: true,
		});

		label1.add(
			new Konva.Tag({
				fill: 'green',
				pointerDirection: 'left',
				pointerWidth: 20,
				pointerHeight: 28,
				lineJoin: 'round',
			}),
			new Konva.Text({
				text: 'Label pointing left',
				fontFamily: 'Calibri',
				fontSize: 18,
				padding: 5,
				fill: '#fff',
			}),
		);

		layer.add(text);
		layer.add(textpath);
		layer.add(start);
		layer.add(ring);
		layer.add(arc);
		layer.add(label1);
		layer.add(tooltip);

		stage.add(layer);
	});
};

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