alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move node EventMap to types and use createEventDispatcher from svelte

Browse Source 
Using createEventDispatcher from another imported function seems to
break the svelte types and thus none of the node events where typed.
This commit is contained in:
RedPhoenixQ
2024-04-22 18:29:07 +02:00
parent a6c0bdc863
commit 72582b035f
4 changed files with 24 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
View File

@@ -5,17 +5,17 @@
import { useStore } from '$lib/store';
import { Selection } from '$lib/components/Selection';
import drag from '$lib/actions/drag';
import type { Node } from '$lib/types';
import { createNodeEventDispatcher } from '$lib';
import type { Node, NodeEventMap } from '$lib/types';
const store = useStore();
const { selectionRectMode, nodes } = store;
const dispatch = createEventDispatcher<{
selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
}>();
const dispatchNodeEvent = createNodeEventDispatcher();
const dispatch = createEventDispatcher<
NodeEventMap & {
selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
}
>();
$: selectedNodes = $nodes.filter((n) => n.selected);
$: bounds = getNodesBounds(selectedNodes);
@@ -37,13 +37,13 @@
disabled: false,
store,
onDrag: (event, _, __, nodes) => {
dispatchNodeEvent('nodedrag', { event, targetNode: null, nodes });
dispatch('nodedrag', { event, targetNode: null, nodes });
},
onDragStart: (event, _, __, nodes) => {
dispatchNodeEvent('nodedragstart', { event, targetNode: null, nodes });
dispatch('nodedragstart', { event, targetNode: null, nodes });
},
onDragStop: (event, _, __, nodes) => {
dispatchNodeEvent('nodedragstop', { event, targetNode: null, nodes });
dispatch('nodedragstop', { event, targetNode: null, nodes });
}
}}
on:contextmenu={onContextMenu}

6
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
View File

@@ -1,7 +1,7 @@
<svelte:options immutable />
<script lang="ts">
import { setContext, onDestroy } from 'svelte';
import { setContext, onDestroy, createEventDispatcher } from 'svelte';
import { get, writable } from 'svelte/store';
import cc from 'classcat';
import { errorMessages, Position } from '@xyflow/system';
@@ -11,7 +11,7 @@
import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
import type { NodeWrapperProps } from './types';
import { getNodeInlineStyleDimensions } from './utils';
import { createNodeEventDispatcher } from '$lib';
import type { NodeEventMap } from '$lib/types';
interface $$Props extends NodeWrapperProps {}
@@ -58,7 +58,7 @@
let nodeRef: HTMLDivElement;
let prevNodeRef: HTMLDivElement | null = null;
const dispatchNodeEvent = createNodeEventDispatcher();
const dispatchNodeEvent = createEventDispatcher<NodeEventMap>();
const connectableStore = writable(connectable);
let prevType: string | undefined = undefined;
let prevSourcePosition: Position | undefined = undefined;

11
packages/svelte/src/lib/types/nodes.ts
View File

@@ -45,3 +45,14 @@ export type NodeTypes = Record<
export type DefaultNodeOptions = Partial<Omit<Node, 'id'>>;
export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;
export type NodeEventMap = {
nodeclick: { node: Node; event: MouseEvent | TouchEvent };
nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
nodedrag: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
nodedragstart: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
nodedragstop: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
};

13
packages/svelte/src/lib/utils/index.ts
View File

@@ -1,4 +1,3 @@
import { createEventDispatcher } from 'svelte';
import { isNodeBase, isEdgeBase } from '@xyflow/system';
import type { Edge, Node } from '$lib/types';
@@ -22,15 +21,3 @@ export const isNode = <NodeType extends Node = Node>(element: unknown): element
*/
export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
isEdgeBase<EdgeType>(element);
export const createNodeEventDispatcher = () =>
createEventDispatcher<{
nodeclick: { node: Node; event: MouseEvent | TouchEvent };
nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
nodedrag: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
nodedragstart: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
nodedragstop: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
}>();