From 52816debbaf4074618a9281323f1b8b97858e37b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Mon, 7 Nov 2022 13:55:20 +0100 Subject: [PATCH 01/17] feat(minimap): add prop to configure the minimap title --- packages/minimap/src/MiniMap.tsx | 4 ++-- packages/minimap/src/types.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index f2487f18..a6212672 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -38,7 +38,6 @@ const selector = (s: ReactFlowState) => { const getAttrFunction = (func: any): GetMiniMapNodeAttribute => (func instanceof Function ? func : () => func); const ARIA_LABEL_KEY = 'react-flow__minimap-desc'; - function MiniMap({ style, className, @@ -53,6 +52,7 @@ function MiniMap({ onNodeClick, pannable = false, zoomable = false, + ariaLabel = 'React Flow mini map', }: MiniMapProps) { const store = useStoreApi(); const svg = useRef(null); @@ -155,7 +155,7 @@ function MiniMap({ ref={svg} onClick={onSvgClick} > - React Flow mini map + {ariaLabel} {nodes.map((node) => { return ( = Omit, ' onNodeClick?: (event: MouseEvent, node: Node) => void; pannable?: boolean; zoomable?: boolean; + ariaLabel?: string; }; From a9e7411d6daa8562a8e70d2acb9dc6b291d9c6f6 Mon Sep 17 00:00:00 2001 From: GeoffreyLiu Date: Tue, 8 Nov 2022 13:56:05 +0800 Subject: [PATCH 02/17] test: add the test case --- .../reactflow/multiple-instance.cy.tsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx diff --git a/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx new file mode 100644 index 00000000..eacf8d4f --- /dev/null +++ b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx @@ -0,0 +1,61 @@ +import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from 'reactflow'; +import * as simpleflow from '../../fixtures/simpleflow'; + +function CustomEdge(props: EdgeProps) { + const [path, labelX, labelY] = getSmoothStepPath(props); + return ( + <> + + +
{props.id}
+ + + ); +} + +const simpleflow1 = { ...simpleflow }; +simpleflow1.edges = [...simpleflow1.edges]; +simpleflow1.edges[0] = { ...simpleflow1.edges[0], id: 'edge1' }; + +const simpleflow2 = { ...simpleflow }; +simpleflow2.edges = [...simpleflow2.edges]; +simpleflow2.edges[0] = { ...simpleflow2.edges[0], id: 'edge2' }; + +describe(': Multiple Instances', () => { + describe('render EdgeLabelRenderer', () => { + beforeEach(() => { + cy.mount( + <> + + + + + + + + ); + }); + + it('Each ReactFlow instance has its EdgeLabelRenderer DOM element without conflict', () => { + cy.get('#edgelabel-portal-reactflow-a').should('have.length', 1); + cy.get('#edgelabel-portal-reactflow-b').should('have.length', 1); + }); + + it('Each ReactFlow instance has one edge label in EdgeLabelRenderer', () => { + cy.get('#edgelabel-portal-reactflow-a .label').should('have.length', 1); + cy.get('#edgelabel-portal-reactflow-a .label').should('contain.text', 'edge1'); + cy.get('#edgelabel-portal-reactflow-b .label').should('have.length', 1); + cy.get('#edgelabel-portal-reactflow-b .label').should('contain.text', 'edge2'); + }); + }); +}); From 55cf7560c0713cf4b499e142ed9fa2b96f440af4 Mon Sep 17 00:00:00 2001 From: GeoffreyLiu Date: Tue, 8 Nov 2022 13:53:48 +0800 Subject: [PATCH 03/17] fix: access the edge-label-renderer by reactflow's id --- packages/core/src/components/EdgeLabelRenderer/index.tsx | 6 +++++- packages/core/src/container/GraphView/index.tsx | 3 ++- packages/core/src/utils/graph.ts | 4 ++++ 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/EdgeLabelRenderer/index.tsx b/packages/core/src/components/EdgeLabelRenderer/index.tsx index 0647364a..772a8372 100644 --- a/packages/core/src/components/EdgeLabelRenderer/index.tsx +++ b/packages/core/src/components/EdgeLabelRenderer/index.tsx @@ -1,9 +1,13 @@ import { useRef } from 'react'; import type { ReactNode } from 'react'; import { createPortal } from 'react-dom'; +import { useStoreApi } from '../../hooks/useStore'; +import { getEdgeLabelRendererId } from '../../utils/graph'; function EdgeLabelRenderer({ children }: { children: ReactNode }) { - const wrapperRef = useRef(document.getElementById('edgelabel-portal')); + const store = useStoreApi() + const state = store.getState() + const wrapperRef = useRef(document.getElementById(getEdgeLabelRendererId(state.rfId))); if (!wrapperRef.current) { return null; diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index 4190bed0..47be5bfc 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -6,6 +6,7 @@ import EdgeRenderer from '../EdgeRenderer'; import ViewportWrapper from '../Viewport'; import useOnInitHandler from '../../hooks/useOnInitHandler'; import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types'; +import { getEdgeLabelRendererId } from '../../utils/graph'; export type GraphViewProps = Omit & Required< @@ -158,7 +159,7 @@ const GraphView = ({ disableKeyboardA11y={disableKeyboardA11y} rfId={rfId} /> -
+
, duration = 0) => { return selection.transition().duration(duration); }; + +export function getEdgeLabelRendererId(id: string) { + return `edgelabel-portal-${id}` +} From 3170f875e543d81c90ebe4eb2a3ff9dda65340d7 Mon Sep 17 00:00:00 2001 From: GeoffreyLiu Date: Fri, 11 Nov 2022 09:31:53 +0800 Subject: [PATCH 04/17] refactor: access edge-label-renderer by storing the root element --- .../components/EdgeLabelRenderer/index.tsx | 21 ++++++++++++------- .../src/components/StoreUpdater/index.tsx | 14 +++++++++++-- packages/core/src/constants/component.ts | 1 + .../core/src/container/GraphView/index.tsx | 4 ++-- .../core/src/container/ReactFlow/index.tsx | 20 ++++++++++++++++-- packages/core/src/store/initialState.ts | 1 + packages/core/src/types/general.ts | 5 ++++- packages/core/src/utils/graph.ts | 3 --- 8 files changed, 52 insertions(+), 17 deletions(-) create mode 100644 packages/core/src/constants/component.ts diff --git a/packages/core/src/components/EdgeLabelRenderer/index.tsx b/packages/core/src/components/EdgeLabelRenderer/index.tsx index 772a8372..815916f0 100644 --- a/packages/core/src/components/EdgeLabelRenderer/index.tsx +++ b/packages/core/src/components/EdgeLabelRenderer/index.tsx @@ -1,19 +1,26 @@ -import { useRef } from 'react'; import type { ReactNode } from 'react'; import { createPortal } from 'react-dom'; import { useStoreApi } from '../../hooks/useStore'; -import { getEdgeLabelRendererId } from '../../utils/graph'; +import { EDGE_LABEL_RENDERER_MAIN_CLASS } from '../../constants/component'; function EdgeLabelRenderer({ children }: { children: ReactNode }) { - const store = useStoreApi() - const state = store.getState() - const wrapperRef = useRef(document.getElementById(getEdgeLabelRendererId(state.rfId))); + const store = useStoreApi(); + const { + rootElementRef: { current: rootElement }, + } = store.getState(); - if (!wrapperRef.current) { + if (!rootElement) { return null; } - return createPortal(children, wrapperRef.current); + const collection = rootElement.getElementsByClassName(EDGE_LABEL_RENDERER_MAIN_CLASS); + + const edgeLabelRendererElement = collection.item(0); + if (!edgeLabelRendererElement) { + return null; + } + + return createPortal(children, edgeLabelRendererElement); } export default EdgeLabelRenderer; diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index 2f98a453..bb3f89ca 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/packages/core/src/components/StoreUpdater/index.tsx @@ -3,7 +3,15 @@ import { StoreApi } from 'zustand'; import shallow from 'zustand/shallow'; import { useStore, useStoreApi } from '../../hooks/useStore'; -import type { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '../../types'; +import type { + Node, + Edge, + ReactFlowState, + CoordinateExtent, + ReactFlowProps, + ReactFlowStore, + RootElementRef, +} from '../../types'; type StoreUpdaterProps = Pick< ReactFlowProps, @@ -44,7 +52,7 @@ type StoreUpdaterProps = Pick< | 'onSelectionDragStop' | 'noPanClassName' | 'nodeOrigin' -> & { rfId: string }; +> & { rfId: string; rootElementRef: RootElementRef }; const selector = (s: ReactFlowState) => ({ setNodes: s.setNodes, @@ -117,6 +125,7 @@ const StoreUpdater = ({ noPanClassName, nodeOrigin, rfId, + rootElementRef, }: StoreUpdaterProps) => { const { setNodes, @@ -169,6 +178,7 @@ const StoreUpdater = ({ useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState); useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState); useDirectStoreUpdater('rfId', rfId, store.setState); + useDirectStoreUpdater('rootElementRef', rootElementRef, store.setState); useStoreUpdater(nodes, setNodes); useStoreUpdater(edges, setEdges); diff --git a/packages/core/src/constants/component.ts b/packages/core/src/constants/component.ts new file mode 100644 index 00000000..abb2f46b --- /dev/null +++ b/packages/core/src/constants/component.ts @@ -0,0 +1 @@ +export const EDGE_LABEL_RENDERER_MAIN_CLASS = 'react-flow__edgelabel-renderer' diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index 47be5bfc..98f9bede 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -6,7 +6,7 @@ import EdgeRenderer from '../EdgeRenderer'; import ViewportWrapper from '../Viewport'; import useOnInitHandler from '../../hooks/useOnInitHandler'; import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types'; -import { getEdgeLabelRendererId } from '../../utils/graph'; +import { EDGE_LABEL_RENDERER_MAIN_CLASS } from '../../constants/component'; export type GraphViewProps = Omit & Required< @@ -159,7 +159,7 @@ const GraphView = ({ disableKeyboardA11y={disableKeyboardA11y} rfId={rfId} /> -
+
( const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped; const rfId = id || '1'; + const rootElementRef = useRef(null); + + function setRootRef(element: HTMLDivElement | null) { + rootElementRef.current = element; + + if (typeof ref === 'function') { + ref(element); + return; + } + + if (ref) { + ref.current = element; + } + } + return (
( noPanClassName={noPanClassName} nodeOrigin={nodeOrigin} rfId={rfId} + rootElementRef={rootElementRef} /> {children} diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index ab918e65..a0353868 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -54,6 +54,7 @@ const initialState: ReactFlowStore = { connectOnClick: true, ariaLiveMessage: '', + rootElementRef: { current: null } }; export default initialState; diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index b18f4d32..48222f49 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import type { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react'; +import type { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent, MutableRefObject } from 'react'; import type { Selection as D3Selection, ZoomBehavior } from 'd3'; import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils'; @@ -129,6 +129,8 @@ export type ViewportHelperFunctions = { viewportInitialized: boolean; }; +export type RootElementRef = MutableRefObject + export type ReactFlowStore = { rfId: string; width: number; @@ -208,6 +210,7 @@ export type ReactFlowStore = { onSelectionChange?: OnSelectionChangeFunc; ariaLiveMessage: string; + rootElementRef: RootElementRef }; export type ReactFlowActions = { diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index 95feec38..5e7e776b 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -224,6 +224,3 @@ export const getD3Transition = (selection: D3Selection Date: Fri, 11 Nov 2022 10:38:48 +0800 Subject: [PATCH 05/17] test: update the test cases --- .../components/reactflow/basic-props.cy.tsx | 29 +++++++++++++++++++ .../reactflow/multiple-instance.cy.tsx | 24 ++++++++------- .../vite-app/cypress/support/RefReactFlow.tsx | 12 ++++++++ 3 files changed, 54 insertions(+), 11 deletions(-) create mode 100644 examples/vite-app/cypress/support/RefReactFlow.tsx diff --git a/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx b/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx index d777531e..8738436e 100644 --- a/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx +++ b/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx @@ -2,6 +2,7 @@ import ReactFlow, { EdgeProps } from 'reactflow'; import ControlledFlow from '../../support/ControlledFlow'; import * as simpleflow from '../../fixtures/simpleflow'; +import { RefReactFlow } from '../../support/RefReactFlow'; describe(': Basic Props', () => { describe('uses defaultNodes and defaultEdges', () => { @@ -194,4 +195,32 @@ describe(': Basic Props', () => { cy.mount(); cy.get('.react-flow').should('have.class', 'custom'); }); + + it('uses function ref', () => { + let pResolve: ((element: HTMLDivElement | PromiseLike | null) => void) | null = null; + const promise: Promise = new Promise((resolve) => { + pResolve = resolve; + }); + + function ref(root: HTMLDivElement | null) { + pResolve && pResolve(root); + } + + cy.mount(); + cy.wrap(promise).should('be.instanceOf', HTMLDivElement); + }); + + it('use mutable ref', () => { + let pResolve: ((element: HTMLDivElement | PromiseLike | null) => void) | null = null; + const promise: Promise = new Promise((resolve) => { + pResolve = resolve; + }); + + function onGetRef(root: HTMLDivElement | null) { + pResolve && pResolve(root); + } + + cy.mount(); + cy.wrap(promise).should('be.instanceOf', HTMLDivElement); + }); }); diff --git a/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx index eacf8d4f..b1b354a0 100644 --- a/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx +++ b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx @@ -31,7 +31,6 @@ describe(': Multiple Instances', () => { defaultNodes={simpleflow1.nodes} edgeTypes={{ default: CustomEdge }} defaultEdges={simpleflow1.edges} - id="reactflow-a" /> @@ -39,23 +38,26 @@ describe(': Multiple Instances', () => { defaultNodes={simpleflow2.nodes} edgeTypes={{ default: CustomEdge }} defaultEdges={simpleflow2.edges} - id="reactflow-b" /> ); }); - it('Each ReactFlow instance has its EdgeLabelRenderer DOM element without conflict', () => { - cy.get('#edgelabel-portal-reactflow-a').should('have.length', 1); - cy.get('#edgelabel-portal-reactflow-b').should('have.length', 1); - }); - it('Each ReactFlow instance has one edge label in EdgeLabelRenderer', () => { - cy.get('#edgelabel-portal-reactflow-a .label').should('have.length', 1); - cy.get('#edgelabel-portal-reactflow-a .label').should('contain.text', 'edge1'); - cy.get('#edgelabel-portal-reactflow-b .label').should('have.length', 1); - cy.get('#edgelabel-portal-reactflow-b .label').should('contain.text', 'edge2'); + cy.get('.react-flow__edgelabel-renderer').should('have.length', 2); + + cy.get('.react-flow__edgelabel-renderer') + .eq(0) + .within(() => { + cy.get('.label').should('have.length', 1).should('contain.text', 'edge1'); + }); + + cy.get('.react-flow__edgelabel-renderer') + .eq(1) + .within(() => { + cy.get('.label').should('have.length', 1).should('contain.text', 'edge2'); + }); }); }); }); diff --git a/examples/vite-app/cypress/support/RefReactFlow.tsx b/examples/vite-app/cypress/support/RefReactFlow.tsx new file mode 100644 index 00000000..baec9696 --- /dev/null +++ b/examples/vite-app/cypress/support/RefReactFlow.tsx @@ -0,0 +1,12 @@ +import { useEffect, useRef } from 'react'; +import ReactFlow from 'reactflow'; + +export function RefReactFlow({ onGetRef }: { onGetRef: (element: HTMLDivElement | null) => void }) { + const ref = useRef(null); + + useEffect(() => { + onGetRef(ref.current); + }, []); + + return ; +} From d586202d97e0b9337b27ae920a5b0b1536c8349b Mon Sep 17 00:00:00 2001 From: Wenchen Li <9028430+neo@users.noreply.github.com> Date: Fri, 11 Nov 2022 17:30:31 -0500 Subject: [PATCH 06/17] Always elevate 1000 in `zIndex` when node is selected Instead of only elevating when `zIndex` is unset --- packages/core/src/store/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index f9a79ea1..e54db262 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -39,7 +39,7 @@ export function createNodeInternals(nodes: Node[], nodeInternals: NodeInternals) const parentNodes: ParentNodes = {}; nodes.forEach((node) => { - const z = isNumeric(node.zIndex) ? node.zIndex : node.selected ? 1000 : 0; + const z = (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? 1000 : 0); const currInternals = nodeInternals.get(node.id); const internals: Node = { From 23aa8bb2707406c79a28b0cba5d49752e8335e81 Mon Sep 17 00:00:00 2001 From: GeoffreyLiu Date: Mon, 14 Nov 2022 08:30:09 +0800 Subject: [PATCH 07/17] refactor: use existing d3Selection to get the element ref --- .../components/reactflow/basic-props.cy.tsx | 29 ------------------- .../vite-app/cypress/support/RefReactFlow.tsx | 12 -------- .../components/EdgeLabelRenderer/index.tsx | 22 ++++++-------- .../src/components/StoreUpdater/index.tsx | 14 ++------- packages/core/src/constants/component.ts | 1 - .../core/src/container/GraphView/index.tsx | 3 +- .../core/src/container/ReactFlow/index.tsx | 20 ++----------- packages/core/src/store/initialState.ts | 1 - packages/core/src/types/general.ts | 5 +--- 9 files changed, 15 insertions(+), 92 deletions(-) delete mode 100644 examples/vite-app/cypress/support/RefReactFlow.tsx delete mode 100644 packages/core/src/constants/component.ts diff --git a/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx b/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx index 8738436e..d777531e 100644 --- a/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx +++ b/examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx @@ -2,7 +2,6 @@ import ReactFlow, { EdgeProps } from 'reactflow'; import ControlledFlow from '../../support/ControlledFlow'; import * as simpleflow from '../../fixtures/simpleflow'; -import { RefReactFlow } from '../../support/RefReactFlow'; describe(': Basic Props', () => { describe('uses defaultNodes and defaultEdges', () => { @@ -195,32 +194,4 @@ describe(': Basic Props', () => { cy.mount(); cy.get('.react-flow').should('have.class', 'custom'); }); - - it('uses function ref', () => { - let pResolve: ((element: HTMLDivElement | PromiseLike | null) => void) | null = null; - const promise: Promise = new Promise((resolve) => { - pResolve = resolve; - }); - - function ref(root: HTMLDivElement | null) { - pResolve && pResolve(root); - } - - cy.mount(); - cy.wrap(promise).should('be.instanceOf', HTMLDivElement); - }); - - it('use mutable ref', () => { - let pResolve: ((element: HTMLDivElement | PromiseLike | null) => void) | null = null; - const promise: Promise = new Promise((resolve) => { - pResolve = resolve; - }); - - function onGetRef(root: HTMLDivElement | null) { - pResolve && pResolve(root); - } - - cy.mount(); - cy.wrap(promise).should('be.instanceOf', HTMLDivElement); - }); }); diff --git a/examples/vite-app/cypress/support/RefReactFlow.tsx b/examples/vite-app/cypress/support/RefReactFlow.tsx deleted file mode 100644 index baec9696..00000000 --- a/examples/vite-app/cypress/support/RefReactFlow.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { useEffect, useRef } from 'react'; -import ReactFlow from 'reactflow'; - -export function RefReactFlow({ onGetRef }: { onGetRef: (element: HTMLDivElement | null) => void }) { - const ref = useRef(null); - - useEffect(() => { - onGetRef(ref.current); - }, []); - - return ; -} diff --git a/packages/core/src/components/EdgeLabelRenderer/index.tsx b/packages/core/src/components/EdgeLabelRenderer/index.tsx index 815916f0..c98665ef 100644 --- a/packages/core/src/components/EdgeLabelRenderer/index.tsx +++ b/packages/core/src/components/EdgeLabelRenderer/index.tsx @@ -1,22 +1,18 @@ import type { ReactNode } from 'react'; import { createPortal } from 'react-dom'; -import { useStoreApi } from '../../hooks/useStore'; -import { EDGE_LABEL_RENDERER_MAIN_CLASS } from '../../constants/component'; +import { useStore } from '../../hooks/useStore'; +import { ReactFlowState } from '../../types'; + +const selector = (s: ReactFlowState) => ({ + d3Selection: s.d3Selection, +}); function EdgeLabelRenderer({ children }: { children: ReactNode }) { - const store = useStoreApi(); - const { - rootElementRef: { current: rootElement }, - } = store.getState(); + const { d3Selection } = useStore(selector); - if (!rootElement) { - return null; - } + const edgeLabelRendererElement = d3Selection?.select('.react-flow__edgelabel-renderer').node(); - const collection = rootElement.getElementsByClassName(EDGE_LABEL_RENDERER_MAIN_CLASS); - - const edgeLabelRendererElement = collection.item(0); - if (!edgeLabelRendererElement) { + if (!edgeLabelRendererElement || !(edgeLabelRendererElement instanceof HTMLDivElement)) { return null; } diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index bb3f89ca..2f98a453 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/packages/core/src/components/StoreUpdater/index.tsx @@ -3,15 +3,7 @@ import { StoreApi } from 'zustand'; import shallow from 'zustand/shallow'; import { useStore, useStoreApi } from '../../hooks/useStore'; -import type { - Node, - Edge, - ReactFlowState, - CoordinateExtent, - ReactFlowProps, - ReactFlowStore, - RootElementRef, -} from '../../types'; +import type { Node, Edge, ReactFlowState, CoordinateExtent, ReactFlowProps, ReactFlowStore } from '../../types'; type StoreUpdaterProps = Pick< ReactFlowProps, @@ -52,7 +44,7 @@ type StoreUpdaterProps = Pick< | 'onSelectionDragStop' | 'noPanClassName' | 'nodeOrigin' -> & { rfId: string; rootElementRef: RootElementRef }; +> & { rfId: string }; const selector = (s: ReactFlowState) => ({ setNodes: s.setNodes, @@ -125,7 +117,6 @@ const StoreUpdater = ({ noPanClassName, nodeOrigin, rfId, - rootElementRef, }: StoreUpdaterProps) => { const { setNodes, @@ -178,7 +169,6 @@ const StoreUpdater = ({ useDirectStoreUpdater('noPanClassName', noPanClassName, store.setState); useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState); useDirectStoreUpdater('rfId', rfId, store.setState); - useDirectStoreUpdater('rootElementRef', rootElementRef, store.setState); useStoreUpdater(nodes, setNodes); useStoreUpdater(edges, setEdges); diff --git a/packages/core/src/constants/component.ts b/packages/core/src/constants/component.ts deleted file mode 100644 index abb2f46b..00000000 --- a/packages/core/src/constants/component.ts +++ /dev/null @@ -1 +0,0 @@ -export const EDGE_LABEL_RENDERER_MAIN_CLASS = 'react-flow__edgelabel-renderer' diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index 98f9bede..3af02659 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -6,7 +6,6 @@ import EdgeRenderer from '../EdgeRenderer'; import ViewportWrapper from '../Viewport'; import useOnInitHandler from '../../hooks/useOnInitHandler'; import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types'; -import { EDGE_LABEL_RENDERER_MAIN_CLASS } from '../../constants/component'; export type GraphViewProps = Omit & Required< @@ -159,7 +158,7 @@ const GraphView = ({ disableKeyboardA11y={disableKeyboardA11y} rfId={rfId} /> -
+
( const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped; const rfId = id || '1'; - const rootElementRef = useRef(null); - - function setRootRef(element: HTMLDivElement | null) { - rootElementRef.current = element; - - if (typeof ref === 'function') { - ref(element); - return; - } - - if (ref) { - ref.current = element; - } - } - return (
( noPanClassName={noPanClassName} nodeOrigin={nodeOrigin} rfId={rfId} - rootElementRef={rootElementRef} /> {children} diff --git a/packages/core/src/store/initialState.ts b/packages/core/src/store/initialState.ts index a0353868..ab918e65 100644 --- a/packages/core/src/store/initialState.ts +++ b/packages/core/src/store/initialState.ts @@ -54,7 +54,6 @@ const initialState: ReactFlowStore = { connectOnClick: true, ariaLiveMessage: '', - rootElementRef: { current: null } }; export default initialState; diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 48222f49..b18f4d32 100644 --- a/packages/core/src/types/general.ts +++ b/packages/core/src/types/general.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import type { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent, MutableRefObject } from 'react'; +import type { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react'; import type { Selection as D3Selection, ZoomBehavior } from 'd3'; import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils'; @@ -129,8 +129,6 @@ export type ViewportHelperFunctions = { viewportInitialized: boolean; }; -export type RootElementRef = MutableRefObject - export type ReactFlowStore = { rfId: string; width: number; @@ -210,7 +208,6 @@ export type ReactFlowStore = { onSelectionChange?: OnSelectionChangeFunc; ariaLiveMessage: string; - rootElementRef: RootElementRef }; export type ReactFlowActions = { From 038835772f54e6e11cc66d89c4ad7d7ae610c537 Mon Sep 17 00:00:00 2001 From: GeoffreyLiu Date: Mon, 14 Nov 2022 19:55:56 +0800 Subject: [PATCH 08/17] refactor: use domNode prop to get edge-label-renderer --- .../core/src/components/EdgeLabelRenderer/index.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/core/src/components/EdgeLabelRenderer/index.tsx b/packages/core/src/components/EdgeLabelRenderer/index.tsx index c98665ef..059dae1b 100644 --- a/packages/core/src/components/EdgeLabelRenderer/index.tsx +++ b/packages/core/src/components/EdgeLabelRenderer/index.tsx @@ -4,19 +4,17 @@ import { useStore } from '../../hooks/useStore'; import { ReactFlowState } from '../../types'; const selector = (s: ReactFlowState) => ({ - d3Selection: s.d3Selection, + edgeLabelRenderer: s.domNode?.querySelector('.react-flow__edgelabel-renderer'), }); function EdgeLabelRenderer({ children }: { children: ReactNode }) { - const { d3Selection } = useStore(selector); + const { edgeLabelRenderer } = useStore(selector); - const edgeLabelRendererElement = d3Selection?.select('.react-flow__edgelabel-renderer').node(); - - if (!edgeLabelRendererElement || !(edgeLabelRendererElement instanceof HTMLDivElement)) { + if (!edgeLabelRenderer) { return null; } - return createPortal(children, edgeLabelRendererElement); + return createPortal(children, edgeLabelRenderer); } export default EdgeLabelRenderer; From a5963e62b648535ce8359561f81a774ded08ce7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Mon, 14 Nov 2022 15:28:15 +0100 Subject: [PATCH 09/17] feat(minimap): turn ariaLabel into an optional property --- packages/minimap/src/MiniMap.tsx | 2 +- packages/minimap/src/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/minimap/src/MiniMap.tsx b/packages/minimap/src/MiniMap.tsx index a6212672..42ceccce 100644 --- a/packages/minimap/src/MiniMap.tsx +++ b/packages/minimap/src/MiniMap.tsx @@ -155,7 +155,7 @@ function MiniMap({ ref={svg} onClick={onSvgClick} > - {ariaLabel} + {ariaLabel && {ariaLabel}} {nodes.map((node) => { return ( = Omit, ' onNodeClick?: (event: MouseEvent, node: Node) => void; pannable?: boolean; zoomable?: boolean; - ariaLabel?: string; + ariaLabel?: string | null; }; From 8f63f751e302d3c935865760d2134350c31ab93f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Mon, 14 Nov 2022 15:30:26 +0100 Subject: [PATCH 10/17] feat(minimap): add changeset --- .changeset/nine-cougars-turn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/nine-cougars-turn.md diff --git a/.changeset/nine-cougars-turn.md b/.changeset/nine-cougars-turn.md new file mode 100644 index 00000000..eb6f3776 --- /dev/null +++ b/.changeset/nine-cougars-turn.md @@ -0,0 +1,5 @@ +--- +'@reactflow/minimap': minor +--- + +add a new property "ariaLabel" to configure or remove the aria-label of the minimap component From be89fe0020d9d0791b2dfb32d655923545e646a9 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 15 Nov 2022 11:18:12 +0100 Subject: [PATCH 11/17] refactor(edge-label-renderer): simplify selector --- packages/core/src/components/EdgeLabelRenderer/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components/EdgeLabelRenderer/index.tsx b/packages/core/src/components/EdgeLabelRenderer/index.tsx index 059dae1b..07477493 100644 --- a/packages/core/src/components/EdgeLabelRenderer/index.tsx +++ b/packages/core/src/components/EdgeLabelRenderer/index.tsx @@ -3,12 +3,10 @@ import { createPortal } from 'react-dom'; import { useStore } from '../../hooks/useStore'; import { ReactFlowState } from '../../types'; -const selector = (s: ReactFlowState) => ({ - edgeLabelRenderer: s.domNode?.querySelector('.react-flow__edgelabel-renderer'), -}); +const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__edgelabel-renderer'); function EdgeLabelRenderer({ children }: { children: ReactNode }) { - const { edgeLabelRenderer } = useStore(selector); + const edgeLabelRenderer = useStore(selector); if (!edgeLabelRenderer) { return null; From 2a1c7db6b27ac0f4f81dcef2d593f4753c4321c7 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 15 Nov 2022 11:19:46 +0100 Subject: [PATCH 12/17] chore(changeset): add --- .changeset/tender-pears-knock.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tender-pears-knock.md diff --git a/.changeset/tender-pears-knock.md b/.changeset/tender-pears-knock.md new file mode 100644 index 00000000..697143ef --- /dev/null +++ b/.changeset/tender-pears-knock.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +EdgeLabelRenderer: handle multiple instances on a page From a39224b3a80afbdb83fc4490dd5f4f2be23cd4dd Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 15 Nov 2022 11:55:32 +0100 Subject: [PATCH 13/17] chore(changeset): add --- .changeset/silly-taxis-drop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silly-taxis-drop.md diff --git a/.changeset/silly-taxis-drop.md b/.changeset/silly-taxis-drop.md new file mode 100644 index 00000000..e26bd820 --- /dev/null +++ b/.changeset/silly-taxis-drop.md @@ -0,0 +1,5 @@ +--- +'@reactflow/core': patch +--- + +Core: Always elevate zIndex when node is selected From b70ede04f3496f235ae52009c86c17177b08138f Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 15 Nov 2022 16:00:21 +0100 Subject: [PATCH 14/17] 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 15/17] 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 From ccbffeb139897ea984066bd77a02f442f9ff6a8c Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 16 Nov 2022 10:53:26 +0100 Subject: [PATCH 16/17] fix(node-toolbar): handle nodeOrigin --- examples/vite-app/src/examples/NodeToolbar/index.tsx | 3 +++ packages/node-toolbar/src/NodeToolbar.tsx | 6 +++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/examples/vite-app/src/examples/NodeToolbar/index.tsx b/examples/vite-app/src/examples/NodeToolbar/index.tsx index 13dba39b..424ee202 100644 --- a/examples/vite-app/src/examples/NodeToolbar/index.tsx +++ b/examples/vite-app/src/examples/NodeToolbar/index.tsx @@ -7,6 +7,7 @@ import ReactFlow, { Edge, NodeTypes, Position, + NodeOrigin, } from 'reactflow'; import CustomNode from './CustomNode'; @@ -53,6 +54,7 @@ const initialEdges: Edge[] = [ ]; const defaultEdgeOptions = { zIndex: 0 }; +const nodeOrigin: NodeOrigin = [0.5, 0.5]; export default function NodeToolbarExample() { return ( @@ -65,6 +67,7 @@ export default function NodeToolbarExample() { fitView defaultEdgeOptions={defaultEdgeOptions} nodeTypes={nodeTypes} + nodeOrigin={nodeOrigin} > diff --git a/packages/node-toolbar/src/NodeToolbar.tsx b/packages/node-toolbar/src/NodeToolbar.tsx index c8085ecf..c413eb30 100644 --- a/packages/node-toolbar/src/NodeToolbar.tsx +++ b/packages/node-toolbar/src/NodeToolbar.tsx @@ -25,7 +25,7 @@ const nodeEqualityFn = (a: SelectedNode, b: SelectedNode) => a?.selected === b?.selected && a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z; -const transformSelector = (state: ReactFlowState) => state.transform; +const transformSelector = (state: ReactFlowState) => ({ transform: state.transform, nodeOrigin: state.nodeOrigin }); function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number): string { // position === Position.Top @@ -68,13 +68,13 @@ function NodeToolbar({ }: NodeToolbarProps) { const nodeSelector = useCallback((state: ReactFlowState): SelectedNode => state.nodeInternals.get(nodeId), [nodeId]); const node = useStore(nodeSelector, nodeEqualityFn); - const transform = useStore(transformSelector, shallow); + const { transform, nodeOrigin } = useStore(transformSelector, shallow); if (!isActive || !node) { return null; } - const nodeRect: Rect = getRectOfNodes([node]); + const nodeRect: Rect = getRectOfNodes([node], nodeOrigin); const wrapperStyle: CSSProperties = { transform: getTransform(nodeRect, transform, position, offset), From be8f22e5f3ccde5bf63feab145ec4cf3d8568f4e Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 16 Nov 2022 10:59:20 +0100 Subject: [PATCH 17/17] chore(node-toolbar): cleanup --- packages/node-toolbar/src/NodeToolbar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/node-toolbar/src/NodeToolbar.tsx b/packages/node-toolbar/src/NodeToolbar.tsx index c413eb30..1b98682e 100644 --- a/packages/node-toolbar/src/NodeToolbar.tsx +++ b/packages/node-toolbar/src/NodeToolbar.tsx @@ -25,7 +25,7 @@ const nodeEqualityFn = (a: SelectedNode, b: SelectedNode) => a?.selected === b?.selected && a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z; -const transformSelector = (state: ReactFlowState) => ({ transform: state.transform, nodeOrigin: state.nodeOrigin }); +const selector = (state: ReactFlowState) => ({ transform: state.transform, nodeOrigin: state.nodeOrigin }); function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number): string { // position === Position.Top @@ -68,7 +68,7 @@ function NodeToolbar({ }: NodeToolbarProps) { const nodeSelector = useCallback((state: ReactFlowState): SelectedNode => state.nodeInternals.get(nodeId), [nodeId]); const node = useStore(nodeSelector, nodeEqualityFn); - const { transform, nodeOrigin } = useStore(transformSelector, shallow); + const { transform, nodeOrigin } = useStore(selector, shallow); if (!isActive || !node) { return null;