Merge pull request #508 from wbkd/develop

Develop

example/src/Hidden/index.js

@@ -27,8 +27,6 @@ const HiddenFlow = () => {
     );
   }, [isHidden]);
 
-  console.log(elements);
-
   return (
     <ReactFlow elements={elements} onConnect={onConnect}>
       <MiniMap />

package-lock.json

@@ -11297,9 +11297,9 @@
       }
     },
     "rollup": {
-      "version": "2.26.10",
+      "version": "2.26.11",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.10.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.11.tgz",
-      "integrity": "sha512-dUnjCWOA0h9qNX6qtcHidyatz8FAFZxVxt1dbcGtKdlJkpSxGK3G9+DLCYvtZr9v94D129ij9zUhG+xbRoqepw==",
+      "integrity": "sha512-xyfxxhsE6hW57xhfL1I+ixH8l2bdoIMaAecdQiWF3N7IgJEMu99JG+daBiSZQjnBpzFxa0/xZm+3pbCdAQehHw==",
       "dev": true,
       "requires": {
         "fsevents": "~2.1.2"

package.json

@@ -52,7 +52,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "release-it": "^14.0.2",
-    "rollup": "^2.26.10",
+    "rollup": "^2.26.11",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-commonjs": "^10.1.0",

src/components/Nodes/wrapNode.tsx

@@ -1,14 +1,4 @@
-import React, {
+import React, { useEffect, useRef, memo, ComponentType, CSSProperties, useMemo, MouseEvent, useCallback } from 'react';
-  useEffect,
-  useRef,
-  useState,
-  memo,
-  ComponentType,
-  CSSProperties,
-  useMemo,
-  MouseEvent,
-  useCallback,
-} from 'react';
 import { DraggableCore } from 'react-draggable';
 import cc from 'classcat';
 import { ResizeObserver } from 'resize-observer';
@@ -45,6 +35,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     isInitialized,
     snapToGrid,
     snapGrid,
+    isDragging,
   }: WrapNodeProps) => {
     const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
     const setSelectedElements = useStoreActions((actions) => actions.setSelectedElements);
@@ -52,7 +43,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
 
     const nodeElement = useRef<HTMLDivElement>(null);
-    const [isDragging, setDragging] = useState(false);
 
     const node = useMemo(() => ({ id, type, position: { x: xPos, y: yPos }, data }), [id, type, xPos, yPos, data]);
     const grid = useMemo(() => (snapToGrid ? snapGrid : [1, 1])! as [number, number], [snapToGrid, snapGrid]);
@@ -122,12 +112,11 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           setSelectedElements({ id: node.id, type: node.type } as Node);
         }
       },
-      [node, transform, selectNodesOnDrag, isSelectable, onNodeDragStart]
+      [node, selectNodesOnDrag, isSelectable, onNodeDragStart]
     );
 
     const onDrag = useCallback(
       (_, data) => {
-        setDragging(true);
         updateNodePosDiff({
           id,
           diff: {
@@ -136,7 +125,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           },
         });
       },
-      [id, transform]
+      [id]
     );
 
     const onDragStop = useCallback(
@@ -153,7 +142,6 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           return;
         }
 
-        setDragging(false);
         updateNodePosDiff({
           id,
           isDragging: false,
@@ -161,11 +149,11 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
         onNodeDragStop?.(event as MouseEvent, node);
       },
-      [node, isDragging, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop]
+      [node, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop]
     );
 
     useEffect(() => {
-      if (nodeElement.current) {
+      if (nodeElement.current && !isHidden) {
         updateNodeDimensions({ id, nodeElement: nodeElement.current });
 
         const resizeObserver = new ResizeObserver(() => {
@@ -184,7 +172,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       }
 
       return;
-    }, [id]);
+    }, [id, isHidden]);
 
     if (isHidden) {
       return null;

src/components/NodesSelection/index.tsx

@@ -3,7 +3,7 @@
  * made a selectio  with on or several nodes
  */
 
-import React, { useMemo, useCallback, MouseEvent } from 'react';
+import React, { useMemo, useCallback, useRef, MouseEvent } from 'react';
 import ReactDraggable, { DraggableData } from 'react-draggable';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -33,7 +33,9 @@ export default ({
 
   const updateNodePosDiff = useStoreActions((actions) => actions.updateNodePosDiff);
 
-  const grid = (snapToGrid ? snapGrid : [1, 1])! as [number, number];
+  const nodeRef = useRef(null);
+
+  const grid = useMemo(() => (snapToGrid ? snapGrid : [1, 1])! as [number, number], [snapToGrid, snapGrid]);
 
   const selectedNodes = useMemo(
     () =>
@@ -45,6 +47,23 @@ export default ({
     [selectedElements]
   );
 
+  const style = useMemo(
+    () => ({
+      transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
+    }),
+    [tX, tY, tScale]
+  );
+
+  const innerStyle = useMemo(
+    () => ({
+      width: selectedNodesBbox.width,
+      height: selectedNodesBbox.height,
+      top: selectedNodesBbox.y,
+      left: selectedNodesBbox.x,
+    }),
+    [selectedNodesBbox]
+  );
+
   const onStart = useCallback(
     (event: MouseEvent) => {
       onSelectionDragStart?.(event, selectedNodes);
@@ -96,23 +115,6 @@ export default ({
     [onSelectionContextMenu]
   );
 
-  const style = useMemo(
-    () => ({
-      transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
-    }),
-    [tX, tY, tScale]
-  );
-
-  const innerStyle = useMemo(
-    () => ({
-      width: selectedNodesBbox.width,
-      height: selectedNodesBbox.height,
-      top: selectedNodesBbox.y,
-      left: selectedNodesBbox.x,
-    }),
-    [selectedNodesBbox]
-  );
-
   if (!selectedElements || selectionActive) {
     return null;
   }
@@ -125,8 +127,14 @@ export default ({
         onStart={(event) => onStart(event as MouseEvent)}
         onDrag={(event, data) => onDrag(event as MouseEvent, data)}
         onStop={(event) => onStop(event as MouseEvent)}
+        nodeRef={nodeRef}
       >
-        <div className="react-flow__nodesselection-rect" onContextMenu={onContextMenu} style={innerStyle} />
+        <div
+          ref={nodeRef}
+          className="react-flow__nodesselection-rect"
+          onContextMenu={onContextMenu}
+          style={innerStyle}
+        />
       </ReactDraggable>
     </div>
   );