From 49636be0e96133044ca575b04ac6d6de7fda0082 Mon Sep 17 00:00:00 2001 From: Fabian Bieler Date: Thu, 28 Jul 2022 11:22:47 +0200 Subject: [PATCH 1/3] fix(validation): Remove css-classes if mouse moves directly to different handle. If two handles are next to each other or overlap it is possible for the mouse-cursor to move from one handle to the other without a mouse-move-event being fired where isHoveringHandle is false. Thus, the valid and connecting css-classes were not removed from the handle. This commit fixes this. --- src/components/Handle/handler.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Handle/handler.ts b/src/components/Handle/handler.ts index 6e03da96..ca0fe8d7 100644 --- a/src/components/Handle/handler.ts +++ b/src/components/Handle/handler.ts @@ -153,6 +153,7 @@ export function handleMouseDown({ } if (connection.source !== connection.target && elementBelow) { + resetRecentHandle(recentHoveredHandle); recentHoveredHandle = elementBelow; elementBelow.classList.add('react-flow__handle-connecting'); elementBelow.classList.toggle('react-flow__handle-valid', isValid); From d07e76018fad52f0eb1c004c39365bdf51face5e Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 5 Aug 2022 18:12:02 +0200 Subject: [PATCH 2/3] fix(minZoom,maxZoom): pass min- maxZoom for initial view closes #2343 --- example/src/CustomNode/index.tsx | 7 ++++--- src/container/FlowRenderer/index.tsx | 10 ++++++++-- src/container/GraphView/index.tsx | 20 ++++++++++++++++++-- src/container/ReactFlow/index.tsx | 10 +++++++--- src/container/ZoomPane/index.tsx | 10 +++++++--- 5 files changed, 44 insertions(+), 13 deletions(-) diff --git a/example/src/CustomNode/index.tsx b/example/src/CustomNode/index.tsx index 8169dc52..d867a9c4 100644 --- a/example/src/CustomNode/index.tsx +++ b/example/src/CustomNode/index.tsx @@ -18,8 +18,8 @@ import ColorSelectorNode from './ColorSelectorNode'; const onInit = (reactFlowInstance: ReactFlowInstance) => { console.log('flow loaded:', reactFlowInstance); - reactFlowInstance.fitView(); }; + const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); @@ -117,8 +117,9 @@ const CustomNodeFlow = () => { connectionLineStyle={connectionLineStyle} snapToGrid={true} snapGrid={snapGrid} - defaultZoom={1.5} - fitView + defaultZoom={0.3} + minZoom={0.3} + maxZoom={2} > { diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx index 1eae6797..6b48feea 100644 --- a/src/container/FlowRenderer/index.tsx +++ b/src/container/FlowRenderer/index.tsx @@ -48,8 +48,11 @@ const FlowRenderer = ({ panOnScrollMode, zoomOnDoubleClick, panOnDrag, - defaultPosition, + translateExtent, + minZoom, + maxZoom, defaultZoom, + defaultPosition, preventScrolling, onSelectionContextMenu, noWheelClassName, @@ -84,8 +87,11 @@ const FlowRenderer = ({ panOnScrollMode={panOnScrollMode} zoomOnDoubleClick={zoomOnDoubleClick} panOnDrag={panOnDrag} - defaultPosition={defaultPosition} + translateExtent={translateExtent} + minZoom={minZoom} + maxZoom={maxZoom} defaultZoom={defaultZoom} + defaultPosition={defaultPosition} zoomActivationKeyCode={zoomActivationKeyCode} preventScrolling={preventScrolling} noWheelClassName={noWheelClassName} diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index f7774444..9b55e973 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -5,7 +5,14 @@ import NodeRenderer from '../NodeRenderer'; import EdgeRenderer from '../EdgeRenderer'; import Viewport from '../Viewport'; import useOnInitHandler from '../../hooks/useOnInitHandler'; -import { NodeTypesWrapped, EdgeTypesWrapped, ConnectionLineType, KeyCode, ReactFlowProps } from '../../types'; +import { + NodeTypesWrapped, + EdgeTypesWrapped, + ConnectionLineType, + KeyCode, + ReactFlowProps, + CoordinateExtent, +} from '../../types'; export interface GraphViewProps extends Omit { @@ -16,6 +23,9 @@ export interface GraphViewProps multiSelectionKeyCode: KeyCode | null; connectionLineType: ConnectionLineType; onlyRenderVisibleElements: boolean; + translateExtent: CoordinateExtent; + minZoom: number; + maxZoom: number; defaultZoom: number; defaultPosition: [number, number]; defaultMarkerColor: string; @@ -52,6 +62,9 @@ const GraphView = ({ onlyRenderVisibleElements, elementsSelectable, selectNodesOnDrag, + translateExtent, + minZoom, + maxZoom, defaultZoom, defaultPosition, preventScrolling, @@ -102,8 +115,11 @@ const GraphView = ({ panOnScrollSpeed={panOnScrollSpeed} panOnScrollMode={panOnScrollMode} panOnDrag={panOnDrag} - defaultPosition={defaultPosition} + translateExtent={translateExtent} + minZoom={minZoom} + maxZoom={maxZoom} defaultZoom={defaultZoom} + defaultPosition={defaultPosition} onSelectionContextMenu={onSelectionContextMenu} preventScrolling={preventScrolling} noDragClassName={noDragClassName} diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 257d37f4..debdd3ae 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -26,6 +26,7 @@ import GraphView from '../GraphView'; import { createNodeTypes } from '../NodeRenderer/utils'; import { injectStyle, useNodeOrEdgeTypes } from './utils'; import Wrapper from './Wrapper'; +import { infiniteExtent } from '../../store/initialState'; if (__INJECT_STYLES__) { injectStyle(css as unknown as string); @@ -103,11 +104,11 @@ const ReactFlow = forwardRef( nodesDraggable, nodesConnectable, elementsSelectable, - minZoom, - maxZoom, + minZoom = 0.5, + maxZoom = 2, defaultZoom = 1, defaultPosition = initDefaultPosition, - translateExtent, + translateExtent = infiniteExtent, preventScrolling = true, nodeExtent, defaultMarkerColor = '#b1b1b7', @@ -177,6 +178,9 @@ const ReactFlow = forwardRef( zoomActivationKeyCode={zoomActivationKeyCode} onlyRenderVisibleElements={onlyRenderVisibleElements} selectNodesOnDrag={selectNodesOnDrag} + translateExtent={translateExtent} + minZoom={minZoom} + maxZoom={maxZoom} defaultZoom={defaultZoom} defaultPosition={defaultPosition} preventScrolling={preventScrolling} diff --git a/src/container/ZoomPane/index.tsx b/src/container/ZoomPane/index.tsx index 9c6075d9..fd309741 100644 --- a/src/container/ZoomPane/index.tsx +++ b/src/container/ZoomPane/index.tsx @@ -45,8 +45,11 @@ const ZoomPane = ({ selectionKeyPressed, elementsSelectable, panOnDrag = true, - defaultPosition = [0, 0], + translateExtent, + minZoom, + maxZoom, defaultZoom = 1, + defaultPosition = [0, 0], zoomActivationKeyCode, preventScrolling = true, children, @@ -56,6 +59,7 @@ const ZoomPane = ({ const store = useStoreApi(); const isZoomingOrPanning = useRef(false); const zoomPane = useRef(null); + const initialized = useRef(false); const prevTransform = useRef({ x: 0, y: 0, zoom: 0 }); const { d3Zoom, d3Selection, d3ZoomHandler } = useStore(selector, shallow); const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode); @@ -63,8 +67,8 @@ const ZoomPane = ({ useResizeHandler(zoomPane); useEffect(() => { - if (zoomPane.current) { - const { minZoom, maxZoom, translateExtent } = store.getState(); + if (zoomPane.current && !initialized.current) { + initialized.current = true; const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent); const selection = select(zoomPane.current as Element).call(d3ZoomInstance); From 46ba0dee9da49a564570840d3ae2775340c9d233 Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 5 Aug 2022 18:13:32 +0200 Subject: [PATCH 3/3] chore: release v10.3.13 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7d355d1c..e5e44b7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "10.3.12", + "version": "10.3.13", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "10.3.12", + "version": "10.3.13", "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.9", diff --git a/package.json b/package.json index 7ab95ad5..e9961761 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-flow-renderer", - "version": "10.3.12", + "version": "10.3.13", "engines": { "node": ">=14" },