From b70ede04f3496f235ae52009c86c17177b08138f Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 15 Nov 2022 16:00:21 +0100 Subject: [PATCH 1/2] fix(nodeOrigin): repair multi selection and fitView --- .../vite-app/src/examples/Basic/index.tsx | 8 +++- .../src/components/NodesSelection/index.tsx | 3 +- .../src/components/UserSelection/index.tsx | 4 +- packages/core/src/store/utils.ts | 16 +++++-- packages/core/src/utils/graph.ts | 40 ++++++++++++----- packages/minimap/src/MiniMap.tsx | 43 +++++++++---------- 6 files changed, 74 insertions(+), 40 deletions(-) diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx index d6f3950f..92077b35 100644 --- a/examples/vite-app/src/examples/Basic/index.tsx +++ b/examples/vite-app/src/examples/Basic/index.tsx @@ -8,6 +8,7 @@ import ReactFlow, { Node, Edge, useReactFlow, + NodeOrigin, } from 'reactflow'; const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node); @@ -47,6 +48,8 @@ const initialEdges: Edge[] = [ { id: 'e1-3', source: '1', target: '3' }, ]; +const nodeOrigin: NodeOrigin = [0.5, 0.5]; + const defaultEdgeOptions = { zIndex: 0 }; const BasicFlow = () => { @@ -91,6 +94,7 @@ const BasicFlow = () => { fitView defaultEdgeOptions={defaultEdgeOptions} selectNodesOnDrag={false} + nodeOrigin={nodeOrigin} > @@ -106,7 +110,9 @@ const BasicFlow = () => { - + ); diff --git a/packages/core/src/components/NodesSelection/index.tsx b/packages/core/src/components/NodesSelection/index.tsx index 5e75d5ed..ed841db6 100644 --- a/packages/core/src/components/NodesSelection/index.tsx +++ b/packages/core/src/components/NodesSelection/index.tsx @@ -24,12 +24,11 @@ export interface NodesSelectionProps { const selector = (s: ReactFlowState) => ({ transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`, userSelectionActive: s.userSelectionActive, - ...getRectOfNodes(Array.from(s.nodeInternals.values()).filter((n) => n.selected)), }); const bboxSelector = (s: ReactFlowState) => { const selectedNodes = Array.from(s.nodeInternals.values()).filter((n) => n.selected); - return getRectOfNodes(selectedNodes); + return getRectOfNodes(selectedNodes, s.nodeOrigin); }; function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) { diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index 142be18f..cbf1e830 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/packages/core/src/components/UserSelection/index.tsx @@ -101,9 +101,9 @@ const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => { height: Math.abs(mousePos.y - startY), }; - const { nodeInternals, edges, transform, onNodesChange, onEdgesChange } = store.getState(); + const { nodeInternals, edges, transform, onNodesChange, onEdgesChange, nodeOrigin } = store.getState(); const nodes = Array.from(nodeInternals.values()); - const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true); + const selectedNodes = getNodesInside(nodeInternals, nextUserSelectRect, transform, false, true, nodeOrigin); const selectedEdgeIds = getConnectedEdges(selectedNodes, edges).map((e) => e.id); const selectedNodeIds = selectedNodes.map((n) => n.id); diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index f9a79ea1..5eaa232d 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -100,8 +100,18 @@ type InternalFitViewOptions = { } & FitViewOptions; export function fitView(get: StoreApi['getState'], options: InternalFitViewOptions = {}) { - const { nodeInternals, width, height, minZoom, maxZoom, d3Zoom, d3Selection, fitViewOnInitDone, fitViewOnInit } = - get(); + const { + nodeInternals, + width, + height, + minZoom, + maxZoom, + d3Zoom, + d3Selection, + fitViewOnInitDone, + fitViewOnInit, + nodeOrigin, + } = get(); if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) { if (d3Zoom && d3Selection) { @@ -112,7 +122,7 @@ export function fitView(get: StoreApi['getState'], options: Inte const nodesInitialized = nodes.every((n) => n.width && n.height); if (nodes.length > 0 && nodesInitialized) { - const bounds = getRectOfNodes(nodes); + const bounds = getRectOfNodes(nodes, nodeOrigin); const [x, y, zoom] = getTransformForBounds( bounds, width, diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index 78569276..e3f6b9d7 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -2,7 +2,17 @@ import type { Selection as D3Selection } from 'd3'; import { boxToRect, clamp, devWarn, getBoundsOfBoxes, getOverlappingArea, rectToBox } from '../utils'; -import type { Node, Edge, Connection, EdgeMarkerType, Transform, XYPosition, Rect, NodeInternals } from '../types'; +import type { + Node, + Edge, + Connection, + EdgeMarkerType, + Transform, + XYPosition, + Rect, + NodeInternals, + NodeOrigin, +} from '../types'; export const isEdge = (element: Node | Connection | Edge): element is Edge => 'id' in element && 'source' in element && 'target' in element; @@ -131,22 +141,26 @@ export const pointToRendererPoint = ( return position; }; -export const getRectOfNodes = (nodes: Node[]): Rect => { +export const getRectOfNodes = (nodes: Node[], nodeOrigin: NodeOrigin = [0, 0]): Rect => { if (nodes.length === 0) { return { x: 0, y: 0, width: 0, height: 0 }; } const box = nodes.reduce( - (currBox, { positionAbsolute, position, width, height }) => - getBoundsOfBoxes( + (currBox, { positionAbsolute, position, width, height }) => { + const nodeX = positionAbsolute ? positionAbsolute.x : position.x; + const nodeY = positionAbsolute ? positionAbsolute.y : position.y; + + return getBoundsOfBoxes( currBox, rectToBox({ - x: positionAbsolute ? positionAbsolute.x : position.x, - y: positionAbsolute ? positionAbsolute.y : position.y, + x: nodeX - nodeOrigin[0] * (width || 0), + y: nodeY - nodeOrigin[1] * (height || 0), width: width || 0, height: height || 0, }) - ), + ); + }, { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity } ); @@ -159,7 +173,8 @@ export const getNodesInside = ( [tx, ty, tScale]: Transform = [0, 0, 1], partially = false, // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute - excludeNonSelectableNodes = false + excludeNonSelectableNodes = false, + nodeOrigin: NodeOrigin = [0, 0] ): Node[] => { const paneRect = { x: (rect.x - tx) / tScale, @@ -171,13 +186,18 @@ export const getNodesInside = ( const visibleNodes: Node[] = []; nodeInternals.forEach((node) => { - const { positionAbsolute = { x: 0, y: 0 }, width, height, selectable = true } = node; + const { width, height, selectable = true, positionAbsolute = { x: 0, y: 0 } } = node; if (excludeNonSelectableNodes && !selectable) { return false; } - const nodeRect = { ...positionAbsolute, width: width || 0, height: height || 0 }; + const nodeRect = { + x: positionAbsolute.x - nodeOrigin[0] * (width || 0), + y: positionAbsolute.y - nodeOrigin[1] * (height || 0), + width: width || 0, + height: height || 0, + }; const overlappingArea = getOverlappingArea(paneRect, nodeRect); const notInitialized = typeof width === 'undefined' || typeof height === 'undefined' || width === null || height === null; diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index f2487f18..c278ebd0 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -30,8 +30,9 @@ const selector = (s: ReactFlowState) => { return { nodes: nodes.filter((node) => !node.hidden && node.width && node.height), viewBB, - boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes), viewBB) : viewBB, + boundingRect: nodes.length > 0 ? getBoundsOfRects(getRectOfNodes(nodes, s.nodeOrigin), viewBB) : viewBB, rfId: s.rfId, + nodeOrigin: s.nodeOrigin, }; }; @@ -56,7 +57,7 @@ function MiniMap({ }: MiniMapProps) { const store = useStoreApi(); const svg = useRef(null); - const { boundingRect, viewBB, nodes, rfId } = useStore(selector, shallow); + const { boundingRect, viewBB, nodes, rfId, nodeOrigin } = useStore(selector, shallow); const elementWidth = (style?.width as number) ?? defaultWidth; const elementHeight = (style?.height as number) ?? defaultHeight; const nodeColorFunc = getAttrFunction(nodeColor); @@ -156,26 +157,24 @@ function MiniMap({ onClick={onSvgClick} > React Flow mini map - {nodes.map((node) => { - return ( - - ); - })} + {nodes.map((node) => ( + + ))} Date: Tue, 15 Nov 2022 16:11:00 +0100 Subject: [PATCH 2/2] chore(changeset): add --- .changeset/breezy-houses-travel.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/breezy-houses-travel.md diff --git a/.changeset/breezy-houses-travel.md b/.changeset/breezy-houses-travel.md new file mode 100644 index 00000000..cab7b162 --- /dev/null +++ b/.changeset/breezy-houses-travel.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Fix multi selection and fitView when nodeOrigin is used