Merge branch 'main' into refactor/redux

example/src/Interaction/index.js

@@ -27,6 +27,7 @@ const InteractionFlow = () => {
   const [isDraggable, setIsDraggable] = useState(false);
   const [isConnectable, setIsConnectable] = useState(false);
   const [zoomOnScroll, setZoomOnScroll] = useState(false);
+  const [zoomOnPinch, setZoomOnPinch] = useState(false);
   const [panOnScroll, setPanOnScroll] = useState(false);
   const [panOnScrollMode, setPanOnScrollMode] = useState('free');
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false);
@@ -42,6 +43,7 @@ const InteractionFlow = () => {
       nodesConnectable={isConnectable}
       nodesDraggable={isDraggable}
       zoomOnScroll={zoomOnScroll}
+      zoomOnPinch={zoomOnPinch}
       panOnScroll={panOnScroll}
       panOnScrollMode={panOnScrollMode}
       zoomOnDoubleClick={zoomOnDoubleClick}
@@ -107,6 +109,18 @@ const InteractionFlow = () => {
             />
           </label>
         </div>
+        <div>
+          <label htmlFor="zoomonpinch">
+            zoomOnPinch
+            <input
+              id="zoomonpinch"
+              type="checkbox"
+              checked={zoomOnPinch}
+              onChange={(event) => setZoomOnPinch(event.target.checked)}
+              className="react-flow__zoomonpinch"
+            />
+          </label>
+        </div>
         <div>
           <label htmlFor="panonscroll">
             panOnScroll

example/src/Layouting/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import ReactFlow, { ReactFlowProvider, addEdge, removeElements, Controls, isNode } from 'react-flow-renderer';
 import dagre from 'dagre';
 
@@ -9,6 +9,11 @@ import './layouting.css';
 const dagreGraph = new dagre.graphlib.Graph();
 dagreGraph.setDefaultEdgeLabel(() => ({}));
 
+const nodeExtent = [
+  [0, 0],
+  [1000, 1000],
+];
+
 const LayoutFlow = () => {
   const [elements, setElements] = useState(initialElements);
   const onConnect = (params) => setElements((els) => addEdge(params, els));
@@ -44,14 +49,16 @@ const LayoutFlow = () => {
     setElements(layoutedElements);
   };
 
-  useEffect(() => {
-    onLayout('TB');
-  }, []);
-
   return (
     <div className="layoutflow">
       <ReactFlowProvider>
-        <ReactFlow elements={elements} onConnect={onConnect} onElementsRemove={onElementsRemove}>
+        <ReactFlow
+          elements={elements}
+          onConnect={onConnect}
+          onElementsRemove={onElementsRemove}
+          nodeExtent={nodeExtent}
+          onLoad={() => onLayout('TB')}
+        >
           <Controls />
         </ReactFlow>
         <div className="controls">

example/src/Overview/index.js

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background, isNode } from 'react-flow-renderer';
 
 const onNodeDragStart = (event, node) => console.log('drag start', node);
+const onNodeDrag = (event, node) => console.log('drag', node);
 const onNodeDragStop = (event, node) => console.log('drag stop', node);
 const onPaneClick = (event) => console.log('pane click', event);
 const onPaneScroll = (event) => console.log('pane scroll', event);
@@ -132,6 +133,7 @@ const OverviewFlow = () => {
       onPaneScroll={onPaneScroll}
       onPaneContextMenu={onPaneContextMenu}
       onNodeDragStart={onNodeDragStart}
+      onNodeDrag={onNodeDrag}
       onNodeDragStop={onNodeDragStop}
       onSelectionDragStart={onSelectionDragStart}
       onSelectionDrag={onSelectionDrag}