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

refactor(svelte): use same data passing convention for all custom events

Browse Source
This commit is contained in:
moklick
2023-09-19 15:43:37 +02:00
parent accfc9d200
commit a33351fb9f
4 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+2 -2
View File
@@ -41,13 +41,13 @@
$: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined; $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
$: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined; $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
function onClick() { function onClick(event: MouseEvent | TouchEvent) {
if (selectable) { if (selectable) {
addSelectedEdges([id]); addSelectedEdges([id]);
} }
const edge = $edges.find((e) => e.id === id); const edge = $edges.find((e) => e.id === id);
dispatch('edgeclick', edge); dispatch('edgeclick', { event, edge });
} }
</script> </script>
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+8 -8
View File
@@ -69,21 +69,21 @@
}; };
}); });
function dispatchEvent(eventName: string) { function dispatchEvent(eventName: string, event?: MouseEvent | TouchEvent) {
const node = $nodes.find((n) => n.id === id); const node = $nodes.find((n) => n.id === id);
dispatch(eventName, node); dispatch(eventName, { node, event });
} }
function onSelectNodeHandler(event: MouseEvent) { function onSelectNodeHandler(event: MouseEvent | TouchEvent) {
if (selectable && (!selectNodesOnDrag || !draggable)) { if (selectable && (!selectNodesOnDrag || !draggable)) {
// this handler gets called within the drag start event when selectNodesOnDrag=true // this handler gets called within the drag start event when selectNodesOnDrag=true
addSelectedNodes([id]); addSelectedNodes([id]);
} }
// @todo: support multiselection // @todo: support multiselection
dispatchEvent('nodeclick', event);
dispatchEvent('nodeclick');
} }
// @todo: add selectable state // @todo: add selectable state
</script> </script>
@@ -112,9 +112,9 @@
style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)" style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
{style} {style}
on:click={onSelectNodeHandler} on:click={onSelectNodeHandler}
on:mouseenter={() => dispatchEvent('nodemouseenter')} on:mouseenter={(event) => dispatchEvent('nodemouseenter', event)}
on:mouseleave={() => dispatchEvent('nodemouseleave')} on:mouseleave={(event) => dispatchEvent('nodemouseleave', event)}
on:mousemove={() => dispatchEvent('nodemousemove')} on:mousemove={(event) => dispatchEvent('nodemousemove', event)}
> >
<svelte:component <svelte:component
this={nodeComponent} this={nodeComponent}
packages/svelte/src/lib/container/Pane/Pane.svelte
+3 -3
View File
@@ -64,8 +64,8 @@
$: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user'); $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
$: _panOnDrag = $panActivationKeyPressed || panOnDrag; $: _panOnDrag = $panActivationKeyPressed || panOnDrag;
function onClick(event: MouseEvent) { function onClick(event: MouseEvent | TouchEvent) {
dispatch('paneclick', event); dispatch('paneclick', { event });
unselectNodesAndEdges(); unselectNodesAndEdges();
selectionRectMode.set(null); selectionRectMode.set(null);
@@ -180,7 +180,7 @@
return; return;
} }
dispatch('panecontextmenu', event); dispatch('panecontextmenu', { event });
}; };
</script> </script>
packages/svelte/src/lib/container/SvelteFlow/types.ts
+7 -8
View File
@@ -3,7 +3,6 @@ import type {
Connection, Connection,
ConnectionLineType, ConnectionLineType,
NodeOrigin, NodeOrigin,
OnConnectStartParams,
Viewport, Viewport,
SelectionMode, SelectionMode,
SnapGrid, SnapGrid,
@@ -60,11 +59,11 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
onMove?: OnMove; onMove?: OnMove;
onMoveEnd?: OnMoveEnd; onMoveEnd?: OnMoveEnd;
'on:nodeclick'?: CustomEvent<Node>; 'on:nodeclick'?: CustomEvent<{ event: MouseEvent | TouchEvent; node: Node }>;
'on:nodemouseenter'?: CustomEvent<Node>; 'on:nodemouseenter'?: CustomEvent<{ event: MouseEvent; node: Node }>;
'on:nodemousemove'?: CustomEvent<Node>; 'on:nodemousemove'?: CustomEvent<{ event: MouseEvent; node: Node }>;
'on:nodemouseleave'?: CustomEvent<Node>; 'on:nodemouseleave'?: CustomEvent<{ event: MouseEvent; node: Node }>;
'on:edgeclick'?: CustomEvent<Edge>; 'on:edgeclick'?: CustomEvent<{ event: MouseEvent; edge: Edge }>;
'on:connectstart'?: CustomEvent<{ 'on:connectstart'?: CustomEvent<{
event: MouseEvent | TouchEvent; event: MouseEvent | TouchEvent;
nodeId?: string; nodeId?: string;
@@ -73,6 +72,6 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
}>; }>;
'on:connect'?: CustomEvent<{ connection: Connection }>; 'on:connect'?: CustomEvent<{ connection: Connection }>;
'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>; 'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
'on:paneclick'?: CustomEvent; 'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
'on:panecontextmenu'?: CustomEvent; 'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>;
}; };