From 2a18b6322f0a828c164a9994c96ae3cbc4f8e985 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thierry=20K=C3=BChni?= Date: Wed, 24 Apr 2024 20:25:44 +0200 Subject: [PATCH] removed deprecated svelte event dispatcher, moved to Svelte 5 event hook functions instead. --- src/lib/Arc.svelte | 17 +-- src/lib/Arrow.svelte | 17 +-- src/lib/Circle.svelte | 17 +-- src/lib/Ellipse.svelte | 17 +-- src/lib/Group.svelte | 13 +-- src/lib/Image.svelte | 17 +-- src/lib/Label.svelte | 13 +-- src/lib/Layer.svelte | 13 +-- src/lib/Line.svelte | 17 +-- src/lib/Path.svelte | 17 +-- src/lib/Rect.svelte | 17 +-- src/lib/RegularPolygon.svelte | 17 +-- src/lib/Ring.svelte | 17 +-- src/lib/Shape.svelte | 17 +-- src/lib/Sprite.svelte | 17 +-- src/lib/Stage.svelte | 10 +- src/lib/Star.svelte | 17 +-- src/lib/Tag.svelte | 17 +-- src/lib/Text.svelte | 17 +-- src/lib/TextPath.svelte | 17 +-- src/lib/Transformer.svelte | 16 +-- src/lib/Wedge.svelte | 17 +-- src/lib/util/events.ts | 110 +++++++++--------- src/lib/util/props.ts | 3 +- src/routes/ResponsiveStage.svelte | 16 +-- src/routes/examples/connectFour/Token.svelte | 4 +- src/routes/examples/drawing/Drawing.svelte | 12 +- src/routes/examples/label/Label.svelte | 13 +-- .../examples/transform/Transform.svelte | 20 ++-- src/templates/svelteKonvaComponent.hbs | 17 +-- 30 files changed, 270 insertions(+), 279 deletions(-) diff --git a/src/lib/Arc.svelte b/src/lib/Arc.svelte index f83bc5f..653b18d 100644 --- a/src/lib/Arc.svelte +++ b/src/lib/Arc.svelte @@ -20,21 +20,22 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arc.html), [ */ import Konva from 'konva'; - import { onMount, onDestroy, createEventDispatcher } from 'svelte'; - import type { Writable } from 'svelte/store'; - import { registerEvents, type KonvaEvents } from '$lib/util/events'; + import { onMount, onDestroy } from 'svelte'; + import { type Writable } from 'svelte/store'; + import { registerEvents } from '$lib/util/events'; import { getParentContainer, type KonvaParent } from '$lib/util/manageContext'; import { copyExistingKeys } from '$lib/util/object'; import { type Props } from '$lib/util/props'; - interface $$Events extends KonvaEvents {} - - let { config = $bindable(), staticConfig = false }: Props = $props(); + let { + config = $bindable(), + staticConfig = false, + ...eventHooks + }: Props = $props(); export const handle = new Konva.Arc(config); const parent: Writable = getParentContainer(); - const dispatcher = createEventDispatcher(); $effect(() => { handle.setAttrs(config); @@ -53,7 +54,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arc.html), [ }); } - registerEvents(dispatcher, handle); + registerEvents(eventHooks, handle); }); onDestroy(() => { diff --git a/src/lib/Arrow.svelte b/src/lib/Arrow.svelte index ebbd7b9..c698d49 100644 --- a/src/lib/Arrow.svelte +++ b/src/lib/Arrow.svelte @@ -20,21 +20,22 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arrow.html), */ import Konva from 'konva'; - import { onMount, onDestroy, createEventDispatcher } from 'svelte'; - import type { Writable } from 'svelte/store'; - import { registerEvents, type KonvaEvents } from '$lib/util/events'; + import { onMount, onDestroy } from 'svelte'; + import { type Writable } from 'svelte/store'; + import { registerEvents } from '$lib/util/events'; import { getParentContainer, type KonvaParent } from '$lib/util/manageContext'; import { copyExistingKeys } from '$lib/util/object'; import { type Props } from '$lib/util/props'; - interface $$Events extends KonvaEvents {} - - let { config = $bindable(), staticConfig = false }: Props = $props(); + let { + config = $bindable(), + staticConfig = false, + ...eventHooks + }: Props = $props(); export const handle = new Konva.Arrow(config); const parent: Writable = getParentContainer(); - const dispatcher = createEventDispatcher(); $effect(() => { handle.setAttrs(config); @@ -53,7 +54,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arrow.html), }); } - registerEvents(dispatcher, handle); + registerEvents(eventHooks, handle); }); onDestroy(() => { diff --git a/src/lib/Circle.svelte b/src/lib/Circle.svelte index 5c42b5d..8bc8907 100644 --- a/src/lib/Circle.svelte +++ b/src/lib/Circle.svelte @@ -20,21 +20,22 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Circle.html) */ import Konva from 'konva'; - import { onMount, onDestroy, createEventDispatcher } from 'svelte'; - import type { Writable } from 'svelte/store'; - import { registerEvents, type KonvaEvents } from '$lib/util/events'; + import { onMount, onDestroy } from 'svelte'; + import { type Writable } from 'svelte/store'; + import { registerEvents } from '$lib/util/events'; import { getParentContainer, type KonvaParent } from '$lib/util/manageContext'; import { copyExistingKeys } from '$lib/util/object'; import { type Props } from '$lib/util/props'; - interface $$Events extends KonvaEvents {} - - let { config = $bindable(), staticConfig = false }: Props = $props(); + let { + config = $bindable(), + staticConfig = false, + ...eventHooks + }: Props = $props(); export const handle = new Konva.Circle(config); const parent: Writable = getParentContainer(); - const dispatcher = createEventDispatcher(); $effect(() => { handle.setAttrs(config); @@ -53,7 +54,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Circle.html) }); } - registerEvents(dispatcher, handle); + registerEvents(eventHooks, handle); }); onDestroy(() => { diff --git a/src/lib/Ellipse.svelte b/src/lib/Ellipse.svelte index 3bb0710..4436ca7 100644 --- a/src/lib/Ellipse.svelte +++ b/src/lib/Ellipse.svelte @@ -20,21 +20,22 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Ellipse.html */ import Konva from 'konva'; - import { onMount, onDestroy, createEventDispatcher } from 'svelte'; - import type { Writable } from 'svelte/store'; - import { registerEvents, type KonvaEvents } from '$lib/util/events'; + import { onMount, onDestroy } from 'svelte'; + import { type Writable } from 'svelte/store'; + import { registerEvents } from '$lib/util/events'; import { getParentContainer, type KonvaParent } from '$lib/util/manageContext'; import { copyExistingKeys } from '$lib/util/object'; import { type Props } from '$lib/util/props'; - interface $$Events extends KonvaEvents {} - - let { config = $bindable(), staticConfig = false }: Props = $props(); + let { + config = $bindable(), + staticConfig = false, + ...eventHooks + }: Props = $props(); export const handle = new Konva.Ellipse(config); const parent: Writable = getParentContainer(); - const dispatcher = createEventDispatcher(); $effect(() => { handle.setAttrs(config); @@ -53,7 +54,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Ellipse.html }); } - registerEvents(dispatcher, handle); + registerEvents(eventHooks, handle); }); onDestroy(() => { diff --git a/src/lib/Group.svelte b/src/lib/Group.svelte index 51c1a2a..ebe623e 100644 --- a/src/lib/Group.svelte +++ b/src/lib/Group.svelte @@ -20,7 +20,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Group.html), -->
- + {@render children()}
diff --git a/src/routes/examples/connectFour/Token.svelte b/src/routes/examples/connectFour/Token.svelte index bf4cfde..a957a8a 100644 --- a/src/routes/examples/connectFour/Token.svelte +++ b/src/routes/examples/connectFour/Token.svelte @@ -93,7 +93,7 @@ // On dragend we need to check if the token/stone has been moved into a position where it can be dropped into the game grid function handleDragEnd(e: KonvaDragTransformEvent) { // stop propagation as the event handling is done in this component - e.stopPropagation(); + e.cancelBubble = true; // as the circle config is bound we already know the current position of the circle and do not need to extract it from the event manually if (config.y! < TOKEN_DROP_THRESHOLD_Y) { @@ -159,4 +159,4 @@ } - + diff --git a/src/routes/examples/drawing/Drawing.svelte b/src/routes/examples/drawing/Drawing.svelte index ac03e1d..d4698ef 100644 --- a/src/routes/examples/drawing/Drawing.svelte +++ b/src/routes/examples/drawing/Drawing.svelte @@ -84,10 +84,8 @@ } function drawMouseOut(e: KonvaMouseEvent) { - const konvaEvent = e.detail; - // Check if event target is stage (eg. user clicked on empty part of the stage and not any shape) - if (konvaEvent.target.getType() !== 'Stage') { + if (e.target.getType() !== 'Stage') { return; } @@ -113,10 +111,10 @@ diff --git a/src/routes/examples/label/Label.svelte b/src/routes/examples/label/Label.svelte index e753d3b..a508359 100644 --- a/src/routes/examples/label/Label.svelte +++ b/src/routes/examples/label/Label.svelte @@ -8,6 +8,7 @@ import Label from 'svelte-konva/Label.svelte'; import Tag from 'svelte-konva/Tag.svelte'; import Text from 'svelte-konva/Text.svelte'; + import type { KonvaMouseEvent } from 'svelte-konva'; let circles: Array = []; @@ -52,12 +53,10 @@ fill: 'white' }; - function handleMouseEnter(e: CustomEvent>) { - const konvaEvent = e.detail; - - let hoveredElementPos = konvaEvent.target.getPosition(); - let hoveredElementRadius = konvaEvent.target.attrs.radius; - let hoveredElementName = konvaEvent.target.attrs.name; + function handleMouseEnter(e: KonvaMouseEvent) { + let hoveredElementPos = e.target.getPosition(); + let hoveredElementRadius = e.target.attrs.radius; + let hoveredElementName = e.target.attrs.name; labelConfig.x = hoveredElementPos.x; labelConfig.y = hoveredElementPos.y - hoveredElementRadius; @@ -75,7 +74,7 @@ {#each circles as config} - + {/each}