From b761859aa008c5ea181020befbdf7be1218037e4 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 11 Mar 2024 10:59:53 +0100 Subject: [PATCH 1/2] added nodedrag events to selection box --- .../NodeSelection/NodeSelection.svelte | 16 ++++++++++- .../components/NodeWrapper/NodeWrapper.svelte | 28 +++++++------------ .../container/SvelteFlow/SvelteFlow.svelte | 8 +++++- packages/svelte/src/lib/utils/index.ts | 13 +++++++++ 4 files changed, 45 insertions(+), 20 deletions(-) diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte index b314e2ad..4e324a12 100644 --- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte +++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte @@ -6,6 +6,7 @@ import { Selection } from '$lib/components/Selection'; import drag from '$lib/actions/drag'; import type { Node } from '$lib/types'; + import { createNodeEventDispatcher } from '$lib'; const store = useStore(); const { selectionRectMode, nodes } = store; @@ -14,6 +15,7 @@ selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent }; selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent }; }>(); + const dispatchNodeEvent = createNodeEventDispatcher(); $: selectedNodes = $nodes.filter((n) => n.selected); $: bounds = getNodesBounds(selectedNodes); @@ -31,7 +33,19 @@
{ + dispatchNodeEvent('nodedrag', { event, node, nodes }); + }, + onDragStart: (event, _, node, nodes) => { + dispatchNodeEvent('nodedragstart', { event, node, nodes }); + }, + onDragStop: (event, _, node, nodes) => { + dispatchNodeEvent('nodedragstop', { event, node, nodes }); + } + }} on:contextmenu={onContextMenu} on:click={onClick} > diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 04dcfc8c..0b7305ff 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -12,6 +12,7 @@ import type { NodeWrapperProps } from './types'; import type { Node } from '$lib/types'; import { getNodeInlineStyleDimensions } from './utils'; + import { createNodeEventDispatcher } from '$lib'; interface $$Props extends NodeWrapperProps {} @@ -66,16 +67,7 @@ } const nodeComponent = $nodeTypes[nodeType] || DefaultNode; - const dispatch = createEventDispatcher<{ - nodeclick: { node: Node; event: MouseEvent | TouchEvent }; - nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent }; - nodedrag: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent }; - nodedragstart: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent }; - nodedragstop: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent }; - nodemouseenter: { node: Node; event: MouseEvent | TouchEvent }; - nodemouseleave: { node: Node; event: MouseEvent | TouchEvent }; - nodemousemove: { node: Node; event: MouseEvent | TouchEvent }; - }>(); + const dispatchNodeEvent = createNodeEventDispatcher(); const connectableStore = writable(connectable); let prevType: string | undefined = undefined; let prevSourcePosition: Position | undefined = undefined; @@ -151,7 +143,7 @@ handleNodeSelection(id); } - dispatch('nodeclick', { node, event }); + dispatchNodeEvent('nodeclick', { node, event }); } @@ -167,13 +159,13 @@ noDragClass: 'nodrag', onNodeMouseDown: handleNodeSelection, onDrag: (event, _, node, nodes) => { - dispatch('nodedrag', { event, node, nodes }); + dispatchNodeEvent('nodedrag', { event, node, nodes }); }, onDragStart: (event, _, node, nodes) => { - dispatch('nodedragstart', { event, node, nodes }); + dispatchNodeEvent('nodedragstart', { event, node, nodes }); }, onDragStop: (event, _, node, nodes) => { - dispatch('nodedragstop', { event, node, nodes }); + dispatchNodeEvent('nodedragstop', { event, node, nodes }); }, store }} @@ -192,10 +184,10 @@ style:visibility={initialized ? 'visible' : 'hidden'} style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}" on:click={onSelectNodeHandler} - on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })} - on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })} - on:mousemove={(event) => dispatch('nodemousemove', { node, event })} - on:contextmenu={(event) => dispatch('nodecontextmenu', { node, event })} + on:mouseenter={(event) => dispatchNodeEvent('nodemouseenter', { node, event })} + on:mouseleave={(event) => dispatchNodeEvent('nodemouseleave', { node, event })} + on:mousemove={(event) => dispatchNodeEvent('nodemousemove', { node, event })} + on:contextmenu={(event) => dispatchNodeEvent('nodecontextmenu', { node, event })} > - + diff --git a/packages/svelte/src/lib/utils/index.ts b/packages/svelte/src/lib/utils/index.ts index 10f205ca..d5da3085 100644 --- a/packages/svelte/src/lib/utils/index.ts +++ b/packages/svelte/src/lib/utils/index.ts @@ -1,3 +1,4 @@ +import { createEventDispatcher } from 'svelte'; import { isNodeBase, isEdgeBase } from '@xyflow/system'; import type { Edge, Node } from '$lib/types'; @@ -21,3 +22,15 @@ export const isNode = (element: unknown): element */ export const isEdge = (element: unknown): element is EdgeType => isEdgeBase(element); + +export const createNodeEventDispatcher = () => + createEventDispatcher<{ + nodeclick: { node: Node; event: MouseEvent | TouchEvent }; + nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent }; + nodedrag: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent }; + nodedragstart: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent }; + nodedragstop: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent }; + nodemouseenter: { node: Node; event: MouseEvent | TouchEvent }; + nodemouseleave: { node: Node; event: MouseEvent | TouchEvent }; + nodemousemove: { node: Node; event: MouseEvent | TouchEvent }; + }>(); From 1d2befe121649c1d5ce5e972cdfe487f7c739022 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 14 Mar 2024 14:59:32 +0100 Subject: [PATCH 2/2] changed node drag arguments, targetNode is null when dragging selectionbox --- .../components/NodeSelection/NodeSelection.svelte | 12 ++++++------ .../lib/components/NodeWrapper/NodeWrapper.svelte | 12 ++++++------ packages/svelte/src/lib/utils/index.ts | 6 +++--- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte index 4e324a12..0c7b50e0 100644 --- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte +++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte @@ -36,14 +36,14 @@ use:drag={{ disabled: false, store, - onDrag: (event, _, node, nodes) => { - dispatchNodeEvent('nodedrag', { event, node, nodes }); + onDrag: (event, _, __, nodes) => { + dispatchNodeEvent('nodedrag', { event, targetNode: null, nodes }); }, - onDragStart: (event, _, node, nodes) => { - dispatchNodeEvent('nodedragstart', { event, node, nodes }); + onDragStart: (event, _, __, nodes) => { + dispatchNodeEvent('nodedragstart', { event, targetNode: null, nodes }); }, - onDragStop: (event, _, node, nodes) => { - dispatchNodeEvent('nodedragstop', { event, node, nodes }); + onDragStop: (event, _, __, nodes) => { + dispatchNodeEvent('nodedragstop', { event, targetNode: null, nodes }); } }} on:contextmenu={onContextMenu} diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index 0b7305ff..eff6c733 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -158,14 +158,14 @@ handleSelector: dragHandle, noDragClass: 'nodrag', onNodeMouseDown: handleNodeSelection, - onDrag: (event, _, node, nodes) => { - dispatchNodeEvent('nodedrag', { event, node, nodes }); + onDrag: (event, _, targetNode, nodes) => { + dispatchNodeEvent('nodedrag', { event, targetNode, nodes }); }, - onDragStart: (event, _, node, nodes) => { - dispatchNodeEvent('nodedragstart', { event, node, nodes }); + onDragStart: (event, _, targetNode, nodes) => { + dispatchNodeEvent('nodedragstart', { event, targetNode, nodes }); }, - onDragStop: (event, _, node, nodes) => { - dispatchNodeEvent('nodedragstop', { event, node, nodes }); + onDragStop: (event, _, targetNode, nodes) => { + dispatchNodeEvent('nodedragstop', { event, targetNode, nodes }); }, store }} diff --git a/packages/svelte/src/lib/utils/index.ts b/packages/svelte/src/lib/utils/index.ts index d5da3085..8c9acdf3 100644 --- a/packages/svelte/src/lib/utils/index.ts +++ b/packages/svelte/src/lib/utils/index.ts @@ -27,9 +27,9 @@ export const createNodeEventDispatcher = () => createEventDispatcher<{ nodeclick: { node: Node; event: MouseEvent | TouchEvent }; nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent }; - nodedrag: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent }; - nodedragstart: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent }; - nodedragstop: { node: Node; nodes: 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 };