<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 image = new Image();
	const lion = new Konva.Image({
		x: 80,
		y: 30,
		width: 50,
		height: 50,
		draggable: true,
		image,
	});
	layer.add(lion);

	image.crossOrigin = 'Anonymous';
	image.src = 'https://konvajs.org/assets/darth-vader.jpg';

	image.onload = function () {
		lion.image(image);
		lion.cache();
		lion.filters([Konva.Filters.Blur]);
		lion.blurRadius(100);

		const tween = new Konva.Tween({
			node: lion,
			duration: 0.6,
			blurRadius: 0,
			easing: Konva.Easings.EaseInOut,
		});

		lion.on('mouseover', function () {
			tween.play();
		});

		lion.on('mouseout', function () {
			tween.reverse();
		});
	};
};

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

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

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