Merge branch 'main' into v11

.yarnrc.yml

@@ -2,4 +2,4 @@ nodeLinker: node-modules
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
+    spec: '@yarnpkg/plugin-workspace-tools'

examples/nextjs/pages/CustomNode/index.tsx

@@ -17,10 +17,9 @@ 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 onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 
 const initBgColor = '#1A192B';

examples/nextjs/styles/theme-default.css

@@ -1,19 +1,4 @@
 .react-flow__edge {
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    outline: none;
-
-    .react-flow__edge-path {
-      stroke: #555;
-    }
-  }
-
-  &.animated path {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
   &.updating {
     .react-flow__edge-path {
       stroke: #777;
@@ -21,20 +6,10 @@
   }
 }
 
-.react-flow__edge-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-}
-
 .react-flow__edge-text {
   font-size: 10px;
 }
 
-.react-flow__connection-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-}
-
 .react-flow__node-default,
 .react-flow__node-input,
 .react-flow__node-output,
@@ -52,6 +27,7 @@
   &.selected,
   &:focus,
   &:focus-visible {
+    border: none;
     box-shadow: 0 0 0 0.5px #1a192b;
     outline: none;
   }
@@ -72,8 +48,9 @@
   &.selected,
   &:focus,
   &:focus-visible {
-    outline: none;
+    border: none;
     box-shadow: 0 0 0 0.5px #1a192b;
+    outline: none;
   }
 }
 

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);