From 3c3239afd8788527153570c33be0103bf97c8de8 Mon Sep 17 00:00:00 2001 From: Peter Date: Wed, 20 Sep 2023 12:05:16 +0200 Subject: [PATCH 1/3] feat(svelte) added nodedrag events --- examples/svelte/src/routes/overview/+page.svelte | 9 +++++++++ packages/svelte/src/lib/actions/drag/index.ts | 12 +++++++++--- .../lib/components/NodeWrapper/NodeWrapper.svelte | 9 +++++++++ .../lib/container/NodeRenderer/NodeRenderer.svelte | 3 +++ .../src/lib/container/SvelteFlow/SvelteFlow.svelte | 3 +++ .../svelte/src/lib/container/SvelteFlow/types.ts | 6 +++++- 6 files changed, 38 insertions(+), 4 deletions(-) diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index 5fdd7d47..2a290401 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -167,6 +167,15 @@ event.preventDefault(); console.log('on pane contextmenu', event); }} + on:nodedrag={(event) => { + console.log('on node drag', event); + }} + on:nodedragstart={(event) => { + console.log('on node drag start', event); + }} + on:nodedragstop={(event) => { + console.log('on node drag stop', event); + }} > diff --git a/packages/svelte/src/lib/actions/drag/index.ts b/packages/svelte/src/lib/actions/drag/index.ts index 5a0d4436..276e319c 100644 --- a/packages/svelte/src/lib/actions/drag/index.ts +++ b/packages/svelte/src/lib/actions/drag/index.ts @@ -1,22 +1,28 @@ import { get } from 'svelte/store'; -import { XYDrag } from '@xyflow/system'; +import { XYDrag, type OnDrag } from '@xyflow/system'; import type { SvelteFlowStore } from '$lib/store/types'; -type UseDragParams = { +export type UseDragParams = { store: SvelteFlowStore; disabled?: boolean; noDragClass?: string; handleSelector?: string; nodeId?: string; isSelectable?: boolean; + onDrag?: OnDrag; + onDragStart?: OnDrag; + onDragStop?: OnDrag; }; export default function drag(domNode: Element, params: UseDragParams) { + const { store, onDrag, onDragStart, onDragStop } = params; const dragInstance = XYDrag({ domNode, + onDrag, + onDragStart, + onDragStop, getStoreItems: () => { - const { store } = params; const snapGrid = get(store.snapGrid); return { diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 17c8e4ce..7e18ee61 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -97,6 +97,15 @@ disabled: false, handleSelector: dragHandle, noDragClass: 'nodrag', + onDrag: (event, _, node, nodes) => { + dispatch('nodedrag', { event, node, nodes }); + }, + onDragStart: (event, _, node, nodes) => { + dispatch('nodedragstart', { event, node, nodes }); + }, + onDragStop: (event, _, node, nodes) => { + dispatch('nodedragstop', { event, node, nodes }); + }, store }} bind:this={nodeRef} diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte index bc30ea1a..a695b03d 100644 --- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte +++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte @@ -72,6 +72,9 @@ on:connectstart on:connect on:connectend + on:nodedrag + on:nodedragstart + on:nodedragstop /> {/each} diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index bb359302..2d6da254 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -154,6 +154,9 @@ on:connectstart on:connect on:connectend + on:nodedrag + on:nodedragstart + on:nodedragstop /> diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 97d5a3a9..2b145942 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -12,7 +12,8 @@ import type { CoordinateExtent, PanOnScrollMode, IsValidConnection, - HandleType + HandleType, + NodeBase } from '@xyflow/system'; import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types'; @@ -74,4 +75,7 @@ export type SvelteFlowProps = DOMAttributes & { 'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>; 'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>; 'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>; + 'on:nodedrag'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>; + 'on:nodedragstop'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>; + 'on:nodedragstart'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>; }; From 57413926443f79f5cf4720b21b46dffdda522786 Mon Sep 17 00:00:00 2001 From: Peter Date: Wed, 20 Sep 2023 15:14:52 +0200 Subject: [PATCH 2/3] feat(svelte) added on:nodecontextmenu --- examples/svelte/src/routes/overview/+page.svelte | 3 +++ .../svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte | 1 + .../svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte | 1 + packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte | 1 + packages/svelte/src/lib/container/SvelteFlow/types.ts | 1 + 5 files changed, 7 insertions(+) diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index 2a290401..38a79a3f 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -176,6 +176,9 @@ on:nodedragstop={(event) => { console.log('on node drag stop', event); }} + on:nodecontextmenu={(event) => { + console.log('on node contextmenu', event); + }} > diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 7e18ee61..2be5c098 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -124,6 +124,7 @@ on:mouseenter={(event) => dispatchEvent('nodemouseenter', event)} on:mouseleave={(event) => dispatchEvent('nodemouseleave', event)} on:mousemove={(event) => dispatchEvent('nodemousemove', event)} + on:contextmenu={(event) => dispatchEvent('nodecontextmenu', event)} > {/each} diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 2d6da254..18b0c722 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -157,6 +157,7 @@ on:nodedrag on:nodedragstart on:nodedragstop + on:nodecontextmenu /> diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 2b145942..61e3f8c8 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -78,4 +78,5 @@ export type SvelteFlowProps = DOMAttributes & { 'on:nodedrag'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>; 'on:nodedragstop'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>; 'on:nodedragstart'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>; + 'on:nodecontextmenu'?: CustomEvent<{ event: MouseEvent; node: NodeBase }>; }; From c61a9f3c9bbdb2cbd51a0f842d2734bcdfdfb16b Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 20 Sep 2023 15:51:17 +0200 Subject: [PATCH 3/3] chore(svelte): cleanup node drag handlers, add to changelog --- examples/svelte/src/routes/overview/+page.svelte | 2 +- packages/svelte/CHANGELOG.md | 5 +++++ .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte | 2 +- packages/svelte/src/lib/container/SvelteFlow/types.ts | 2 +- 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte index 38a79a3f..c975744f 100644 --- a/examples/svelte/src/routes/overview/+page.svelte +++ b/examples/svelte/src/routes/overview/+page.svelte @@ -164,7 +164,6 @@ on:connectend={(event) => console.log('on connect end', event)} on:paneclick={(event) => console.log('on pane click', event)} on:panecontextmenu={(event) => { - event.preventDefault(); console.log('on pane contextmenu', event); }} on:nodedrag={(event) => { @@ -177,6 +176,7 @@ console.log('on node drag stop', event); }} on:nodecontextmenu={(event) => { + event.detail.event.preventDefault(); console.log('on node contextmenu', event); }} > diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 491aa21f..30da979c 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,3 +1,8 @@ +## 0.0.21 + +- add `on:nodedragstart`, `on:nodedrag` and `on:nodedragstop` +- add `on:nodecontextmenu` + ## 0.0.20 - [breaking change] use same convention for all custom events: Always pass the original event if possible and additional data diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 18b0c722..0b2fac70 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -154,8 +154,8 @@ on:connectstart on:connect on:connectend - on:nodedrag on:nodedragstart + on:nodedrag on:nodedragstop on:nodecontextmenu /> diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 61e3f8c8..1c2f6ebb 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -75,8 +75,8 @@ export type SvelteFlowProps = DOMAttributes & { 'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>; 'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>; 'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>; + 'on:nodedragstart'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>; 'on:nodedrag'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>; 'on:nodedragstop'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>; - 'on:nodedragstart'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>; 'on:nodecontextmenu'?: CustomEvent<{ event: MouseEvent; node: NodeBase }>; };