From afa1ebe3165b28347ceb80303ce2a3a32d713d92 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 8 Jul 2024 17:02:51 +0200 Subject: [PATCH 1/4] chore(packages): bump --- packages/react/package.json | 2 +- packages/svelte/package.json | 2 +- packages/system/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 4a7b7d2e..5b7810b9 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@xyflow/react", - "version": "12.0.0-next.26", + "version": "12.0.0-next.27", "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.", "keywords": [ "react", diff --git a/packages/svelte/package.json b/packages/svelte/package.json index d2089204..cdfa7d51 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@xyflow/svelte", - "version": "0.1.8", + "version": "0.1.9", "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.", "keywords": [ "svelte", diff --git a/packages/system/package.json b/packages/system/package.json index e825a010..62a1cdea 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,6 +1,6 @@ { "name": "@xyflow/system", - "version": "0.0.32", + "version": "0.0.33", "description": "xyflow core system that powers React Flow and Svelte Flow.", "keywords": [ "node-based UI", From 69bd68f4b8fb5b208439b8236f1b10535e4db94c Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 9 Jul 2024 10:50:50 +0200 Subject: [PATCH 2/4] feat(panzoom): add paneClickDistance prop --- examples/react/src/App/routes.ts | 6 ++ .../src/examples/ClickDistance/index.tsx | 72 +++++++++++++++++++ .../src/components/StoreUpdater/index.tsx | 5 ++ .../src/container/FlowRenderer/index.tsx | 2 + .../react/src/container/GraphView/index.tsx | 3 + .../react/src/container/ReactFlow/index.tsx | 3 + .../react/src/container/ZoomPane/index.tsx | 2 + packages/react/src/store/index.ts | 3 + packages/react/src/types/component-props.ts | 4 ++ packages/react/src/types/store.ts | 1 + packages/svelte/src/lib/actions/zoom/index.ts | 14 +++- .../container/SvelteFlow/SvelteFlow.svelte | 8 ++- .../src/lib/container/SvelteFlow/types.ts | 4 ++ .../src/lib/container/SvelteFlow/utils.ts | 13 +++- .../svelte/src/lib/container/Zoom/Zoom.svelte | 4 +- .../svelte/src/lib/container/Zoom/types.ts | 1 + packages/svelte/src/lib/store/index.ts | 5 ++ packages/svelte/src/lib/store/types.ts | 1 + packages/system/src/types/panzoom.ts | 2 + packages/system/src/xypanzoom/XYPanZoom.ts | 23 +++++- 20 files changed, 166 insertions(+), 10 deletions(-) create mode 100644 examples/react/src/examples/ClickDistance/index.tsx diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts index 024a22ac..6dffe3b0 100644 --- a/examples/react/src/App/routes.ts +++ b/examples/react/src/App/routes.ts @@ -1,6 +1,7 @@ import Basic from '../examples/Basic'; import Backgrounds from '../examples/Backgrounds'; import ColorMode from '../examples/ColorMode'; +import ClickDistance from '../examples/ClickDistance'; import ControlledUncontrolled from '../examples/ControlledUncontrolled'; import ControlledViewport from '../examples/ControlledViewport'; import CustomConnectionLine from '../examples/CustomConnectionLine'; @@ -85,6 +86,11 @@ const routes: IRoute[] = [ path: 'cancel-connection', component: CancelConnection, }, + { + name: 'Click Distance', + path: 'click-distance', + component: ClickDistance, + }, { name: 'Controlled/Uncontrolled', path: 'controlled-uncontrolled', diff --git a/examples/react/src/examples/ClickDistance/index.tsx b/examples/react/src/examples/ClickDistance/index.tsx new file mode 100644 index 00000000..97fa015b --- /dev/null +++ b/examples/react/src/examples/ClickDistance/index.tsx @@ -0,0 +1,72 @@ +import { useCallback, useState } from 'react'; +import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState, Panel } from '@xyflow/react'; + +const initNodes: Node[] = [ + { + id: '1a', + type: 'input', + data: { label: 'Node 1' }, + position: { x: 250, y: 5 }, + className: 'light', + ariaLabel: 'Input Node 1', + }, + { + id: '2a', + data: { label: 'Node 2' }, + position: { x: 100, y: 100 }, + className: 'light', + ariaLabel: 'Default Node 2', + }, + { + id: '3a', + data: { label: 'Node 3' }, + position: { x: 400, y: 100 }, + className: 'light', + }, + { + id: '4a', + data: { label: 'Node 4' }, + position: { x: 400, y: 200 }, + className: 'light', + }, +]; + +const initEdges: Edge[] = [ + { id: 'e1-2', source: '1a', target: '2a', ariaLabel: undefined }, + { id: 'e1-3', source: '1a', target: '3a' }, +]; + +const onPaneClick = () => console.log('pane click'); + +const BasicFlow = () => { + const [nodes, setNodes, onNodesChange] = useNodesState(initNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges); + const [paneClickDistance, setPaneClickDistance] = useState(0); + + const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]); + + return ( + + + setPaneClickDistance(+evt.target.value)} + /> + click distance: {paneClickDistance} + + + ); +}; + +export default BasicFlow; diff --git a/packages/react/src/components/StoreUpdater/index.tsx b/packages/react/src/components/StoreUpdater/index.tsx index 674eebd1..120db624 100644 --- a/packages/react/src/components/StoreUpdater/index.tsx +++ b/packages/react/src/components/StoreUpdater/index.tsx @@ -67,6 +67,7 @@ const reactFlowFieldsToTrack = [ 'onBeforeDelete', 'debug', 'autoPanSpeed', + 'paneClickDistance', ] as const; type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number]; @@ -89,6 +90,7 @@ const selector = (s: ReactFlowState) => ({ setNodeExtent: s.setNodeExtent, reset: s.reset, setDefaultNodesAndEdges: s.setDefaultNodesAndEdges, + setPaneClickDistance: s.setPaneClickDistance, }); const initPrevValues = { @@ -102,6 +104,7 @@ const initPrevValues = { elementsSelectable: true, noPanClassName: 'nopan', rfId: '1', + paneClickDistance: 0, }; export function StoreUpdater( @@ -116,6 +119,7 @@ export function StoreUpdater(); @@ -146,6 +150,7 @@ export function StoreUpdater({ onPaneMouseLeave, onPaneContextMenu, onPaneScroll, + paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, @@ -101,6 +102,7 @@ function FlowRendererComponent({ noPanClassName={noPanClassName} onViewportChange={onViewportChange} isControlledViewport={isControlledViewport} + paneClickDistance={paneClickDistance} > > & { rfId: string; @@ -84,6 +85,7 @@ function GraphViewComponent( onPaneMouseLeave, onPaneScroll, onPaneContextMenu, + paneClickDistance = 0, children, onReconnect, onReconnectStart, @@ -200,6 +201,7 @@ function ReactFlow( onPaneMouseLeave={onPaneMouseLeave} onPaneScroll={onPaneScroll} onPaneContextMenu={onPaneContextMenu} + paneClickDistance={paneClickDistance} onSelectionContextMenu={onSelectionContextMenu} onSelectionStart={onSelectionStart} onSelectionEnd={onSelectionEnd} @@ -277,6 +279,7 @@ function ReactFlow( selectNodesOnDrag={selectNodesOnDrag} nodeDragThreshold={nodeDragThreshold} onBeforeDelete={onBeforeDelete} + paneClickDistance={paneClickDistance} debug={debug} /> diff --git a/packages/react/src/container/ZoomPane/index.tsx b/packages/react/src/container/ZoomPane/index.tsx index f6e7a79c..3d4003e0 100644 --- a/packages/react/src/container/ZoomPane/index.tsx +++ b/packages/react/src/container/ZoomPane/index.tsx @@ -47,6 +47,7 @@ export function ZoomPane({ noPanClassName, onViewportChange, isControlledViewport, + paneClickDistance, }: ZoomPaneProps) { const store = useStoreApi(); const zoomPane = useRef(null); @@ -64,6 +65,7 @@ export function ZoomPane({ maxZoom, translateExtent, viewport: defaultViewport, + paneClickDistance, onTransformChange: (transform: Transform) => { onViewportChange?.({ x: transform[0], y: transform[1], zoom: transform[2] }); diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 062340b7..3d3eab93 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -255,6 +255,9 @@ const createStore = ({ set({ translateExtent }); }, + setPaneClickDistance: (clickDistance) => { + get().panZoom?.setClickDistance(clickDistance); + }, resetSelectedElements: () => { const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get(); diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts index cd46ac22..29919931 100644 --- a/packages/react/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -223,6 +223,10 @@ export interface ReactFlowProps void; /** This event handler gets called when mouse leaves the pane */ onPaneMouseLeave?: (event: ReactMouseEvent) => void; + /** Distance that the mouse can move between mousedown/up that will trigger a click + * @default 0 + */ + paneClickDistance?: number; /** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */ onBeforeDelete?: OnBeforeDelete; /** Custom node types to be available in a flow. diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts index 0e89d5c6..66bf3c44 100644 --- a/packages/react/src/types/store.ts +++ b/packages/react/src/types/store.ts @@ -170,6 +170,7 @@ export type ReactFlowActions = { panBy: PanBy; fitView: (options?: FitViewOptions) => Promise; fitViewSync: (options?: FitViewOptions) => boolean; + setPaneClickDistance: (distance: number) => void; }; export type ReactFlowState = ReactFlowStore< diff --git a/packages/svelte/src/lib/actions/zoom/index.ts b/packages/svelte/src/lib/actions/zoom/index.ts index b96e012f..a0c83c31 100644 --- a/packages/svelte/src/lib/actions/zoom/index.ts +++ b/packages/svelte/src/lib/actions/zoom/index.ts @@ -35,11 +35,20 @@ type ZoomParams = { noWheelClassName: string; userSelectionActive: boolean; lib: string; + paneClickDistance: number; }; export default function zoom(domNode: Element, params: ZoomParams) { - const { panZoom, minZoom, maxZoom, initialViewport, viewport, dragging, translateExtent } = - params; + const { + panZoom, + minZoom, + maxZoom, + initialViewport, + viewport, + dragging, + translateExtent, + paneClickDistance + } = params; const panZoomInstance = XYPanZoom({ domNode, @@ -47,6 +56,7 @@ export default function zoom(domNode: Element, params: ZoomParams) { maxZoom, translateExtent, viewport: initialViewport, + paneClickDistance, onTransformChange: (transform) => viewport.set({ x: transform[0], y: transform[1], zoom: transform[2] }), onDraggingChange: dragging.set diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index 74709680..f19e003c 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -79,6 +79,7 @@ export let onbeforedelete: $$Props['onbeforedelete'] = undefined; export let oninit: $$Props['oninit'] = undefined; export let nodeOrigin: $$Props['nodeOrigin'] = undefined; + export let paneClickDistance: $$Props['paneClickDistance'] = 0; export let defaultMarkerColor = '#b1b1b7'; @@ -125,7 +126,8 @@ edgeTypes, minZoom, maxZoom, - translateExtent + translateExtent, + paneClickDistance }); return () => { @@ -188,7 +190,8 @@ edgeTypes, minZoom, maxZoom, - translateExtent + translateExtent, + paneClickDistance }); $: colorModeClass = useColorModeClass(colorMode); @@ -225,6 +228,7 @@ zoomOnPinch={zoomOnPinch === undefined ? true : zoomOnPinch} panOnScroll={panOnScroll === undefined ? false : panOnScroll} panOnDrag={panOnDrag === undefined ? true : panOnDrag} + paneClickDistance={paneClickDistance === undefined ? 0 : paneClickDistance} > & { * @default 1 */ nodeDragThreshold?: number; + /** Distance that the mouse can move between mousedown/up that will trigger a click + * @default 0 + */ + paneClickDistance?: number; /** Minimum zoom level * @default 0.5 */ diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts index c7166b0c..d7a71a7c 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts @@ -1,7 +1,8 @@ +import type { Writable } from 'svelte/store'; +import type { CoordinateExtent } from '@xyflow/system'; + import type { SvelteFlowStore } from '$lib/store/types'; import type { EdgeTypes, NodeTypes } from '$lib/types'; -import type { CoordinateExtent } from '@xyflow/system'; -import type { Writable } from 'svelte/store'; // this is helper function for updating the store // for props where we need to call a specific store action @@ -12,13 +13,15 @@ export function updateStore( edgeTypes, minZoom, maxZoom, - translateExtent + translateExtent, + paneClickDistance }: { nodeTypes?: NodeTypes; edgeTypes?: EdgeTypes; minZoom?: number; maxZoom?: number; translateExtent?: CoordinateExtent; + paneClickDistance?: number; } ) { if (nodeTypes !== undefined) { @@ -40,6 +43,10 @@ export function updateStore( if (translateExtent !== undefined) { store.setTranslateExtent(translateExtent); } + + if (paneClickDistance !== undefined) { + store.setPaneClickDistance(paneClickDistance); + } } const getKeys = (obj: T) => Object.keys(obj) as Array; diff --git a/packages/svelte/src/lib/container/Zoom/Zoom.svelte b/packages/svelte/src/lib/container/Zoom/Zoom.svelte index 205f0f2d..adb4463d 100644 --- a/packages/svelte/src/lib/container/Zoom/Zoom.svelte +++ b/packages/svelte/src/lib/container/Zoom/Zoom.svelte @@ -19,6 +19,7 @@ export let zoomOnPinch: $$Props['zoomOnPinch']; export let panOnDrag: $$Props['panOnDrag']; export let panOnScroll: $$Props['panOnScroll']; + export let paneClickDistance: $$Props['paneClickDistance']; const { viewport, @@ -68,7 +69,8 @@ noWheelClassName: 'nowheel', userSelectionActive: !!$selectionRect, translateExtent: $translateExtent, - lib: $lib + lib: $lib, + paneClickDistance }} > diff --git a/packages/svelte/src/lib/container/Zoom/types.ts b/packages/svelte/src/lib/container/Zoom/types.ts index cf2e15cd..b7b4f29b 100644 --- a/packages/svelte/src/lib/container/Zoom/types.ts +++ b/packages/svelte/src/lib/container/Zoom/types.ts @@ -12,4 +12,5 @@ export type ZoomProps = { zoomOnPinch: boolean; panOnScroll: boolean; panOnDrag: boolean | number[]; + paneClickDistance: number; }; diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index bae08a24..9ed41bc0 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -248,6 +248,10 @@ export function createStore({ return elementsChanged; } + function setPaneClickDistance(distance: number) { + get(store.panZoom)?.setClickDistance(distance); + } + function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) { const resetNodes = resetSelectedElements(params?.nodes || get(store.nodes)); if (resetNodes) store.nodes.set(get(store.nodes)); @@ -448,6 +452,7 @@ export function createStore({ setMinZoom, setMaxZoom, setTranslateExtent, + setPaneClickDistance, unselectNodesAndEdges, addSelectedNodes, addSelectedEdges, diff --git a/packages/svelte/src/lib/store/types.ts b/packages/svelte/src/lib/store/types.ts index 0d8c01bf..88ee8be0 100644 --- a/packages/svelte/src/lib/store/types.ts +++ b/packages/svelte/src/lib/store/types.ts @@ -25,6 +25,7 @@ export type SvelteFlowStoreActions = { setMinZoom: (minZoom: number) => void; setMaxZoom: (maxZoom: number) => void; setTranslateExtent: (extent: CoordinateExtent) => void; + setPaneClickDistance: (distance: number) => void; fitView: (options?: FitViewOptions) => Promise; updateNodePositions: UpdateNodePositions; updateNodeInternals: (updates: Map) => void; diff --git a/packages/system/src/types/panzoom.ts b/packages/system/src/types/panzoom.ts index 4a126a98..561714b4 100644 --- a/packages/system/src/types/panzoom.ts +++ b/packages/system/src/types/panzoom.ts @@ -9,6 +9,7 @@ export type PanZoomParams = { domNode: Element; minZoom: number; maxZoom: number; + paneClickDistance: number; viewport: Viewport; translateExtent: CoordinateExtent; onTransformChange: OnTransformChange; @@ -56,4 +57,5 @@ export type PanZoomInstance = { scaleTo: (scale: number, options?: PanZoomTransformOptions) => Promise; scaleBy: (factor: number, options?: PanZoomTransformOptions) => Promise; syncViewport: (viewport: Viewport) => void; + setClickDistance: (distance: number) => void; }; diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts index 2db56b10..3266b8e7 100644 --- a/packages/system/src/xypanzoom/XYPanZoom.ts +++ b/packages/system/src/xypanzoom/XYPanZoom.ts @@ -9,7 +9,7 @@ import { PanZoomParams, PanZoomInstance, } from '../types'; -import { clamp } from '../utils'; +import { clamp, isNumeric } from '../utils'; import { getD3Transition, viewportToTransform, wheelDelta } from './utils'; import { createPanOnScrollHandler, @@ -34,6 +34,7 @@ export function XYPanZoom({ domNode, minZoom, maxZoom, + paneClickDistance, translateExtent, viewport, onPanZoom, @@ -52,7 +53,10 @@ export function XYPanZoom({ isPanScrolling: false, }; const bbox = domNode.getBoundingClientRect(); - const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent); + const d3ZoomInstance = zoom() + .clickDistance(paneClickDistance) + .scaleExtent([minZoom, maxZoom]) + .translateExtent(translateExtent); const d3Selection = select(domNode).call(d3ZoomInstance); setViewportConstrained( @@ -267,6 +271,20 @@ export function XYPanZoom({ d3ZoomInstance?.translateExtent(translateExtent); } + function setClickDistance(distance: number) { + let validNumber = distance; + + if (!isNumeric(distance)) { + validNumber = 0; + } + + if (validNumber < 0) { + validNumber = 0; + } + + d3ZoomInstance?.clickDistance(validNumber); + } + return { update, destroy, @@ -278,5 +296,6 @@ export function XYPanZoom({ setScaleExtent, setTranslateExtent, syncViewport, + setClickDistance, }; } From b1118b1dd97003d2a4e789f002749f2beeeb61ce Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 9 Jul 2024 10:58:44 +0200 Subject: [PATCH 3/4] chore(changelogs): update --- packages/react/CHANGELOG.md | 4 ++++ packages/svelte/CHANGELOG.md | 4 ++++ packages/system/src/xypanzoom/XYPanZoom.ts | 15 +++------------ 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index eb0e3238..3c52df40 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,9 @@ # @xyflow/react +## 12.0.0-next.28 + +- add `paneDistanceClick` prop (max distance between mousedown/up that will trigger a click) + ## 12.0.0-next.27 - return Promises for `setViewport`, `fitView`, `fitBounds` and `zoomTo` to be able to await viewport update diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 169b8e7d..d41c15dd 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -1,5 +1,9 @@ # @xyflow/svelte +## 0.1.10 + +- add `paneDistanceClick` prop (max distance between mousedown/up that will trigger a click) + ## 0.1.9 - return Promises for `setViewport`, `fitView`, `fitBounds` and `zoomTo` to be able to await viewport update diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts index 3266b8e7..ffb6f8b0 100644 --- a/packages/system/src/xypanzoom/XYPanZoom.ts +++ b/packages/system/src/xypanzoom/XYPanZoom.ts @@ -54,7 +54,7 @@ export function XYPanZoom({ }; const bbox = domNode.getBoundingClientRect(); const d3ZoomInstance = zoom() - .clickDistance(paneClickDistance) + .clickDistance(!isNumeric(paneClickDistance) || paneClickDistance < 0 ? 0 : paneClickDistance) .scaleExtent([minZoom, maxZoom]) .translateExtent(translateExtent); const d3Selection = select(domNode).call(d3ZoomInstance); @@ -272,17 +272,8 @@ export function XYPanZoom({ } function setClickDistance(distance: number) { - let validNumber = distance; - - if (!isNumeric(distance)) { - validNumber = 0; - } - - if (validNumber < 0) { - validNumber = 0; - } - - d3ZoomInstance?.clickDistance(validNumber); + const validDistance = !isNumeric(distance) || distance < 0 ? 0 : distance; + d3ZoomInstance?.clickDistance(validDistance); } return { From f722e2f0a3e5eea1bbdc9620f2c26e3d83b4466c Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 9 Jul 2024 11:21:31 +0200 Subject: [PATCH 4/4] fix(onNodeDragStop): nodes are set to dragging=false --- packages/react/CHANGELOG.md | 1 + packages/react/src/store/index.ts | 1 - packages/svelte/CHANGELOG.md | 1 + packages/system/src/xydrag/XYDrag.ts | 1 + packages/system/src/xydrag/utils.ts | 4 ++++ 5 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 3c52df40..027b0d49 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,7 @@ ## 12.0.0-next.28 - add `paneDistanceClick` prop (max distance between mousedown/up that will trigger a click) +- returned nodes in `onNodeDragStop` are set to `dragging=false` ## 12.0.0-next.27 diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts index 3d3eab93..9d101191 100644 --- a/packages/react/src/store/index.ts +++ b/packages/react/src/store/index.ts @@ -134,7 +134,6 @@ const createStore = ({ const changes = []; for (const [id, dragItem] of nodeDragItems) { - // @todo add expandParent to drag item so that we can get rid of the look up here const change: NodeChange = { id, type: 'position', diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index d41c15dd..7f53295b 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -3,6 +3,7 @@ ## 0.1.10 - add `paneDistanceClick` prop (max distance between mousedown/up that will trigger a click) +- returned nodes in `on:nodedragstop` are set to `dragging=false` ## 0.1.9 diff --git a/packages/system/src/xydrag/XYDrag.ts b/packages/system/src/xydrag/XYDrag.ts index 54489a00..d03f729c 100644 --- a/packages/system/src/xydrag/XYDrag.ts +++ b/packages/system/src/xydrag/XYDrag.ts @@ -332,6 +332,7 @@ export function XYDrag voi nodeId, dragItems, nodeLookup, + dragging: false, }); onDragStop?.(event.sourceEvent as MouseEvent, dragItems, currentNode, currentNodes); diff --git a/packages/system/src/xydrag/utils.ts b/packages/system/src/xydrag/utils.ts index ee8326ff..a668746a 100644 --- a/packages/system/src/xydrag/utils.ts +++ b/packages/system/src/xydrag/utils.ts @@ -81,10 +81,12 @@ export function getEventHandlerParams({ nodeId, dragItems, nodeLookup, + dragging = true, }: { nodeId?: string; dragItems: Map; nodeLookup: Map; + dragging?: boolean; }): [NodeBase, NodeBase[]] { const nodesFromDragItems: NodeBase[] = []; @@ -95,6 +97,7 @@ export function getEventHandlerParams({ nodesFromDragItems.push({ ...node, position: dragItem.position, + dragging, }); } } @@ -109,6 +112,7 @@ export function getEventHandlerParams({ { ...node, position: dragItems.get(nodeId)?.position || node.position, + dragging, }, nodesFromDragItems, ];