removed deprecated svelte event dispatcher, moved to Svelte 5 event h…

…ook functions instead.
konvajs · Apr 24, 2024 · 2a18b63 · 2a18b63
1 parent d1d28f5
commit 2a18b63
Show file tree

Hide file tree

Showing 30 changed files with 270 additions and 279 deletions.
diff --git 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<Konva.ArcConfig> = $props();
+	let {
+		config = $bindable(),
+		staticConfig = false,
+		...eventHooks
+	}: Props<Konva.ArcConfig> = $props();
 
 	export const handle = new Konva.Arc(config);
 
 	const parent: Writable<null | KonvaParent> = 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
@@ -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<Konva.ArrowConfig> = $props();
+	let {
+		config = $bindable(),
+		staticConfig = false,
+		...eventHooks
+	}: Props<Konva.ArrowConfig> = $props();
 
 	export const handle = new Konva.Arrow(config);
 
 	const parent: Writable<null | KonvaParent> = 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
@@ -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<Konva.CircleConfig> = $props();
+	let {
+		config = $bindable(),
+		staticConfig = false,
+		...eventHooks
+	}: Props<Konva.CircleConfig> = $props();
 
 	export const handle = new Konva.Circle(config);
 
 	const parent: Writable<null | KonvaParent> = 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
@@ -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<Konva.EllipseConfig> = $props();
+	let {
+		config = $bindable(),
+		staticConfig = false,
+		...eventHooks
+	}: Props<Konva.EllipseConfig> = $props();
 
 	export const handle = new Konva.Ellipse(config);
 
 	const parent: Writable<null | KonvaParent> = 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
@@ -20,32 +20,29 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Group.html),
 -->
 <script lang="ts">
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { type Writable, writable } from 'svelte/store';
 	import {
 		Container,
 		getParentContainer,
 		setContainerContext,
 		type KonvaParent
 	} from '$lib/util/manageContext';
-	import { registerEvents, type KonvaEvents } from '$lib/util/events';
+	import { registerEvents } from '$lib/util/events';
 	import { copyExistingKeys } from '$lib/util/object';
 	import { type PropsContainer } from '$lib/util/props';
 
-	interface $$Events extends KonvaEvents {}
-
 	let {
 		children,
 		config = $bindable({}),
-		staticConfig = false
+		staticConfig = false,
+		...eventHooks
 	}: PropsContainer<Konva.GroupConfig | undefined> = $props();
 
 	export const handle = new Konva.Group(config);
 
 	const inner = writable<null | Konva.Group>(null);
 
-	const dispatcher = createEventDispatcher();
-
 	let isReady = $state(false);
 
 	$effect(() => {
@@ -67,7 +64,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Group.html),
 			});
 		}
 
-		registerEvents(dispatcher, handle);
+		registerEvents(eventHooks, handle);
 
 		inner.set(handle);
 		isReady = true;

diff --git a/src/lib/Image.svelte b/src/lib/Image.svelte
@@ -20,21 +20,22 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Image.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<Konva.ImageConfig> = $props();
+	let {
+		config = $bindable(),
+		staticConfig = false,
+		...eventHooks
+	}: Props<Konva.ImageConfig> = $props();
 
 	export const handle = new Konva.Image(config);
 
 	const parent: Writable<null | KonvaParent> = getParentContainer();
-	const dispatcher = createEventDispatcher();
 
 	$effect(() => {
 		handle.setAttrs(config);
@@ -53,7 +54,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Image.html),
 			});
 		}
 
-		registerEvents(dispatcher, handle);
+		registerEvents(eventHooks, handle);
 	});
 
 	onDestroy(() => {

diff --git a/src/lib/Label.svelte b/src/lib/Label.svelte
@@ -21,7 +21,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Label.html),
 -->
 <script lang="ts">
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { writable, type Writable } from 'svelte/store';
 	import { copyExistingKeys } from '$lib/util/object';
 	import {
@@ -30,23 +30,20 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Label.html),
 		setContainerContext,
 		type KonvaParent
 	} from '$lib/util/manageContext';
-	import { registerEvents, type KonvaEvents } from '$lib/util/events';
+	import { registerEvents } from '$lib/util/events';
 	import { type PropsContainer } from '$lib/util/props';
 
-	interface $$Events extends KonvaEvents {}
-
 	let {
 		children,
 		config = $bindable(),
-		staticConfig = false
+		staticConfig = false,
+		...eventHooks
 	}: PropsContainer<Konva.LabelConfig> = $props();
 
 	export const handle = new Konva.Label(config);
 
 	const inner = writable<null | Konva.Label>(null);
 
-	const dispatcher = createEventDispatcher();
-
 	let isReady = $state(false);
 
 	$effect(() => {
@@ -68,7 +65,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Label.html),
 			});
 		}
 
-		registerEvents(dispatcher, handle);
+		registerEvents(eventHooks, handle);
 
 		inner.set(handle);
 		isReady = true;

diff --git a/src/lib/Layer.svelte b/src/lib/Layer.svelte
@@ -22,27 +22,24 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Layer.html),
 -->
 <script lang="ts">
 	import Konva from 'konva';
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { type Writable, writable } from 'svelte/store';
 	import { Container, getParentStage, setContainerContext } from '$lib/util/manageContext';
-	import { registerEvents, type KonvaEvents } from '$lib/util/events';
+	import { registerEvents } from '$lib/util/events';
 	import { copyExistingKeys } from '$lib/util/object';
 	import { type PropsContainer } from '$lib/util/props';
 
-	interface $$Events extends KonvaEvents {}
-
 	let {
 		children,
 		config = $bindable({}),
-		staticConfig = false
+		staticConfig = false,
+		...eventHooks
 	}: PropsContainer<Konva.LayerConfig | undefined> = $props();
 
 	export const handle = new Konva.Layer(config);
 
 	const inner = writable<null | Konva.Layer>(null);
 
-	const dispatcher = createEventDispatcher();
-
 	let isReady = $state(false);
 
 	$effect(() => {
@@ -64,7 +61,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Layer.html),
 			});
 		}
 
-		registerEvents(dispatcher, handle);
+		registerEvents(eventHooks, handle);
 
 		inner.set(handle);
 		isReady = true;

diff --git a/src/lib/Line.svelte b/src/lib/Line.svelte
@@ -20,21 +20,22 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Line.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<Konva.LineConfig> = $props();
+	let {
+		config = $bindable(),
+		staticConfig = false,
+		...eventHooks
+	}: Props<Konva.LineConfig> = $props();
 
 	export const handle = new Konva.Line(config);
 
 	const parent: Writable<null | KonvaParent> = getParentContainer();
-	const dispatcher = createEventDispatcher();
 
 	$effect(() => {
 		handle.setAttrs(config);
@@ -53,7 +54,7 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Line.html),
 			});
 		}
 
-		registerEvents(dispatcher, handle);
+		registerEvents(eventHooks, handle);
 	});
 
 	onDestroy(() => {