Merge branch 'main' into drag-edge

example/craco.config.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  webpack: {
+    alias: {
+      react: path.resolve(__dirname, '..', 'node_modules', 'react'),
+    },
+  },
+};

example/package.json

@@ -3,15 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react-dom": "^16.13.1",
-    "react-flow-renderer": "file:../",
+    "@craco/craco": "^5.7.0",
+    "react-dom": "^16.14.0",
+    "react-flow-renderer": "file:..",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "^3.4.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

example/src/CustomNode/index.js

@@ -56,8 +56,8 @@ const CustomNodeFlow = () => {
       { id: '4', type: 'output', data: { label: 'Output B' }, position: { x: 550, y: 100 }, targetPosition: 'left' },
 
       { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
-      { id: 'e2a-3', source: '2__a', target: '3', animated: true, style: { stroke: '#fff' } },
-      { id: 'e2b-4', source: '2__b', target: '4', animated: true, style: { stroke: '#fff' } },
+      { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
+      { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
     ]);
   }, []);
 

example/src/Interaction/index.js

@@ -26,6 +26,7 @@ const InteractionFlow = () => {
   const [isDraggable, setIsDraggable] = useState(false);
   const [isConnectable, setIsConnectable] = useState(false);
   const [zoomOnScroll, setZoomOnScroll] = useState(false);
+  const [panOnScroll, setPanOnScroll] = useState(false);
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false);
   const [paneMoveable, setPaneMoveable] = useState(true);
   const [captureZoomClick, setCaptureZoomClick] = useState(false);
@@ -39,6 +40,7 @@ const InteractionFlow = () => {
       nodesConnectable={isConnectable}
       nodesDraggable={isDraggable}
       zoomOnScroll={zoomOnScroll}
+      panOnScroll={panOnScroll}
       zoomOnDoubleClick={zoomOnDoubleClick}
       onConnect={onConnect}
       onElementClick={captureElementClick ? onElementClick : undefined}
@@ -55,7 +57,7 @@ const InteractionFlow = () => {
       <div style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
         <div>
           <label htmlFor="draggable">
-            draggable
+            nodesDraggable
             <input
               id="draggable"
               type="checkbox"
@@ -67,7 +69,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="connectable">
-            connectable
+            nodesConnectable
             <input
               id="connectable"
               type="checkbox"
@@ -79,7 +81,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="selectable">
-            selectable
+            elementsSelectable
             <input
               id="selectable"
               type="checkbox"
@@ -91,7 +93,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="zoomonscroll">
-            zoom on scroll
+            zoomOnScroll
             <input
               id="zoomonscroll"
               type="checkbox"
@@ -101,9 +103,21 @@ const InteractionFlow = () => {
             />
           </label>
         </div>
+        <div>
+          <label htmlFor="panonscroll">
+            panOnScroll
+            <input
+              id="panonscroll"
+              type="checkbox"
+              checked={panOnScroll}
+              onChange={(event) => setPanOnScroll(event.target.checked)}
+              className="react-flow__panonscroll"
+            />
+          </label>
+        </div>
         <div>
           <label htmlFor="zoomondbl">
-            zoom on double click
+            zoomOnDoubleClick
             <input
               id="zoomondbl"
               type="checkbox"
@@ -115,7 +129,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="panemoveable">
-            pane moveable
+            paneMoveable
             <input
               id="panemoveable"
               type="checkbox"
@@ -127,7 +141,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="capturezoompaneclick">
-            capture zoom pane click
+            capture onPaneClick
             <input
               id="capturezoompaneclick"
               type="checkbox"
@@ -139,7 +153,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="capturezoompanescroll">
-            capture zoom pane scroll
+            capture onPaneScroll
             <input
               id="capturezoompanescroll"
               type="checkbox"
@@ -151,7 +165,7 @@ const InteractionFlow = () => {
         </div>
         <div>
           <label htmlFor="captureelementclick">
-            capture element click
+            capture onElementClick
             <input
               id="captureelementclick"
               type="checkbox"

example/src/Overview/index.js

@@ -158,7 +158,7 @@ const OverviewFlow = () => {
 
           return '#fff';
         }}
-        borderRadius={2}
+        nodeBorderRadius={2}
       />
       <Controls />
       <Background color="#aaa" gap={16} />