Merge branch 'main' into v11

packages/core/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);

packages/core/src/container/FlowRenderer/index.tsx

@@ -54,6 +54,9 @@ const FlowRenderer = ({
   zoomOnDoubleClick,
   panOnDrag,
   defaultViewport,
+  translateExtent,
+  minZoom,
+  maxZoom,
   preventScrolling,
   onSelectionContextMenu,
   noWheelClassName,
@@ -90,6 +93,9 @@ const FlowRenderer = ({
       zoomOnDoubleClick={zoomOnDoubleClick}
       panOnDrag={panOnDrag}
       defaultViewport={defaultViewport}
+      translateExtent={translateExtent}
+      minZoom={minZoom}
+      maxZoom={maxZoom}
       zoomActivationKeyCode={zoomActivationKeyCode}
       preventScrolling={preventScrolling}
       noWheelClassName={noWheelClassName}

packages/core/src/container/GraphView/index.tsx

@@ -5,7 +5,15 @@ import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import ViewportWrapper from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
-import { NodeTypesWrapped, EdgeTypesWrapped, ConnectionLineType, KeyCode, ReactFlowProps, Viewport } from '../../types';
+import {
+  NodeTypesWrapped,
+  EdgeTypesWrapped,
+  ConnectionLineType,
+  KeyCode,
+  ReactFlowProps,
+  Viewport,
+  CoordinateExtent,
+} from '../../types';
 
 export interface GraphViewProps
   extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> {
@@ -16,6 +24,9 @@ export interface GraphViewProps
   multiSelectionKeyCode: KeyCode | null;
   connectionLineType: ConnectionLineType;
   onlyRenderVisibleElements: boolean;
+  translateExtent: CoordinateExtent;
+  minZoom: number;
+  maxZoom: number;
   defaultMarkerColor: string;
   selectNodesOnDrag: boolean;
   noDragClassName: string;
@@ -54,6 +65,9 @@ const GraphView = ({
   elementsSelectable,
   selectNodesOnDrag,
   defaultViewport,
+  translateExtent,
+  minZoom,
+  maxZoom,
   preventScrolling,
   defaultMarkerColor,
   zoomOnScroll,
@@ -110,6 +124,9 @@ const GraphView = ({
       panOnScrollMode={panOnScrollMode}
       panOnDrag={panOnDrag}
       defaultViewport={defaultViewport}
+      translateExtent={translateExtent}
+      minZoom={minZoom}
+      maxZoom={maxZoom}
       onSelectionContextMenu={onSelectionContextMenu}
       preventScrolling={preventScrolling}
       noDragClassName={noDragClassName}

packages/core/src/container/NodeRenderer/index.tsx

@@ -46,7 +46,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
         nodeElement: entry.target as HTMLDivElement,
         forceUpdate: true,
       }));
-
       updateNodeDimensions(updates);
     });
 

packages/core/src/container/ReactFlow/index.tsx

@@ -31,6 +31,7 @@ import { createNodeTypes } from '../NodeRenderer/utils';
 import { useNodeOrEdgeTypes } from './utils';
 import Wrapper from './Wrapper';
 import A11yDescriptions from '../../components/A11yDescriptions';
+import { infiniteExtent } from '../../store/initialState';
 
 const defaultNodeTypes: NodeTypes = {
   input: InputNode,
@@ -108,10 +109,10 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       nodesDraggable,
       nodesConnectable,
       elementsSelectable,
-      minZoom,
-      maxZoom,
       defaultViewport = initDefaultViewport,
-      translateExtent,
+      minZoom = 0.5,
+      maxZoom = 2,
+      translateExtent = infiniteExtent,
       preventScrolling = true,
       nodeExtent,
       defaultMarkerColor = '#b1b1b7',
@@ -188,6 +189,9 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onlyRenderVisibleElements={onlyRenderVisibleElements}
             selectNodesOnDrag={selectNodesOnDrag}
             defaultViewport={defaultViewport}
+            translateExtent={translateExtent}
+            minZoom={minZoom}
+            maxZoom={maxZoom}
             preventScrolling={preventScrolling}
             zoomOnScroll={zoomOnScroll}
             zoomOnPinch={zoomOnPinch}

packages/core/src/container/ZoomPane/index.tsx

@@ -47,6 +47,9 @@ const ZoomPane = ({
   elementsSelectable,
   panOnDrag = true,
   defaultViewport,
+  translateExtent,
+  minZoom,
+  maxZoom,
   zoomActivationKeyCode,
   preventScrolling = true,
   children,
@@ -64,7 +67,6 @@ const ZoomPane = ({
 
   useEffect(() => {
     if (zoomPane.current) {
-      const { minZoom, maxZoom, translateExtent } = store.getState();
       const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent);
       const selection = select(zoomPane.current as Element).call(d3ZoomInstance);