refactor(connectionContext): memoize context

xyflow · Aug 5, 2019 · 8691edd · 8691edd
1 parent e148e27
commit 8691edd
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 53 deletions.
diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js
@@ -27933,13 +27933,15 @@
         position = _useState4[0],
         setPosition = _useState4[1];
 
-    var connectionContext = {
-      sourceId: sourceId,
-      setSourceId: setSourceId,
-      position: position,
-      setPosition: setPosition,
-      onConnect: onConnect
-    };
+    var connectionContext = React.useMemo(function () {
+      return {
+        sourceId: sourceId,
+        setSourceId: setSourceId,
+        position: position,
+        setPosition: setPosition,
+        onConnect: onConnect
+      };
+    }, [sourceId, position]);
     return React__default.createElement(ConnectionContext.Provider, {
       value: connectionContext
     }, children);
@@ -33088,8 +33090,7 @@
         onConnect = _ref2.onConnect,
         setSourceId = _ref2.setSourceId,
         setPosition = _ref2.setPosition,
-        _ref2$className = _ref2.className,
-        className = _ref2$className === void 0 ? null : _ref2$className,
+        className = _ref2.className,
         rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "setSourceId", "setPosition", "className"]);
 
     var handleClasses = classnames('react-graph__handle', className, {
@@ -33134,7 +33135,7 @@
     }, props));
   });
   TargetHandle.displayName = 'TargetHandle';
-  TargetHandle.whyDidYouRender = false;
+  TargetHandle.whyDidYouRender = true;
 
   var SourceHandle = React.memo(function (props) {
     var nodeId = React.useContext(NodeIdContext);
@@ -33339,12 +33340,6 @@
         x: xPos,
         y: yPos
       };
-
-      var _transform = _slicedToArray(transform, 3),
-          x = _transform[0],
-          y = _transform[1],
-          k = _transform[2];
-
       var nodeClasses = classnames('react-graph__node', {
         selected: selected
       });
@@ -33354,11 +33349,11 @@
       };
       React.useEffect(function () {
         var bounds = nodeElement.current.getBoundingClientRect();
-        var unscaledWith = Math.round(bounds.width * (1 / k));
-        var unscaledHeight = Math.round(bounds.height * (1 / k));
+        var unscaledWith = Math.round(bounds.width * (1 / transform[2]));
+        var unscaledHeight = Math.round(bounds.height * (1 / transform[2]));
         var handleBounds = {
-          source: getHandleBounds('.source', nodeElement.current, bounds, k),
-          target: getHandleBounds('.target', nodeElement.current, bounds, k)
+          source: getHandleBounds('.source', nodeElement.current, bounds, transform[2]),
+          target: getHandleBounds('.target', nodeElement.current, bounds, transform[2])
         };
         dispatch(updateNodeData(id, {
           width: unscaledWith,

diff --git a/example/build/example.e31bb0bc.js b/example/build/example.e31bb0bc.js
@@ -35710,13 +35710,15 @@ var Provider = (0, _react.memo)(function (_ref) {
       position = _useState4[0],
       setPosition = _useState4[1];
 
-  var connectionContext = {
-    sourceId: sourceId,
-    setSourceId: setSourceId,
-    position: position,
-    setPosition: setPosition,
-    onConnect: onConnect
-  };
+  var connectionContext = (0, _react.useMemo)(function () {
+    return {
+      sourceId: sourceId,
+      setSourceId: setSourceId,
+      position: position,
+      setPosition: setPosition,
+      onConnect: onConnect
+    };
+  }, [sourceId, position]);
   return _react.default.createElement(ConnectionContext.Provider, {
     value: connectionContext
   }, children);
@@ -41346,8 +41348,7 @@ var BaseHandle = (0, _react.memo)(function (_ref2) {
       onConnect = _ref2.onConnect,
       setSourceId = _ref2.setSourceId,
       setPosition = _ref2.setPosition,
-      _ref2$className = _ref2.className,
-      className = _ref2$className === void 0 ? null : _ref2$className,
+      className = _ref2.className,
       rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "setSourceId", "setPosition", "className"]);
 
   var handleClasses = (0, _classnames.default)('react-graph__handle', className, {
@@ -41429,7 +41430,7 @@ var TargetHandle = (0, _react.memo)(function (props) {
   }, props));
 });
 TargetHandle.displayName = 'TargetHandle';
-TargetHandle.whyDidYouRender = false;
+TargetHandle.whyDidYouRender = true;
 var _default = TargetHandle;
 exports.default = _default;
 },{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js","../../ConnectionContext":"../src/ConnectionContext/index.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js"}],"../src/NodeRenderer/HandleTypes/SourceHandle.js":[function(require,module,exports) {
@@ -41758,12 +41759,6 @@ var _default = function _default(NodeComponent) {
       x: xPos,
       y: yPos
     };
-
-    var _transform = _slicedToArray(transform, 3),
-        x = _transform[0],
-        y = _transform[1],
-        k = _transform[2];
-
     var nodeClasses = (0, _classnames.default)('react-graph__node', {
       selected: selected
     });
@@ -41773,11 +41768,11 @@ var _default = function _default(NodeComponent) {
     };
     (0, _react.useEffect)(function () {
       var bounds = nodeElement.current.getBoundingClientRect();
-      var unscaledWith = Math.round(bounds.width * (1 / k));
-      var unscaledHeight = Math.round(bounds.height * (1 / k));
+      var unscaledWith = Math.round(bounds.width * (1 / transform[2]));
+      var unscaledHeight = Math.round(bounds.height * (1 / transform[2]));
       var handleBounds = {
-        source: getHandleBounds('.source', nodeElement.current, bounds, k),
-        target: getHandleBounds('.target', nodeElement.current, bounds, k)
+        source: getHandleBounds('.source', nodeElement.current, bounds, transform[2]),
+        target: getHandleBounds('.target', nodeElement.current, bounds, transform[2])
       };
       dispatch((0, _actions.updateNodeData)(id, {
         width: unscaledWith,

diff --git a/example/build/example.e31bb0bc.js.map b/example/build/example.e31bb0bc.js.map
diff --git a/src/ConnectionContext/index.js b/src/ConnectionContext/index.js
@@ -1,18 +1,18 @@
-import React, { createContext, useState, memo } from 'react';
+import React, { createContext, useState, memo, useMemo } from 'react';
 
 export const ConnectionContext = createContext({});
 
 export const Provider = memo(({ onConnect, children }) => {
   const [sourceId, setSourceId] = useState(null);
   const [position, setPosition] = useState({ x:0, y: 0 });
 
-  const connectionContext = {
+  const connectionContext = useMemo(() => ({
     sourceId,
     setSourceId,
     position,
     setPosition,
     onConnect
-  };
+  }), [sourceId, position]);
 
   return (
     <ConnectionContext.Provider value={connectionContext}>

diff --git a/src/NodeRenderer/HandleTypes/BaseHandle.js b/src/NodeRenderer/HandleTypes/BaseHandle.js
@@ -39,7 +39,10 @@ function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarg
   document.addEventListener('mouseup', onMouseUp)
 }
 
-const BaseHandle = memo(({ source, target, nodeId, onConnect, setSourceId, setPosition, className = null, ...rest }) => {
+const BaseHandle = memo(({
+  source, target, nodeId, onConnect,
+  setSourceId, setPosition, className, ...rest
+}) => {
   const handleClasses = cx(
     'react-graph__handle',
     className,
@@ -59,4 +62,4 @@ const BaseHandle = memo(({ source, target, nodeId, onConnect, setSourceId, setPo
 BaseHandle.displayName = 'BaseHandle';
 BaseHandle.whyDidYouRender = false;
 
-export default BaseHandle;
+export default BaseHandle;
diff --git a/src/NodeRenderer/HandleTypes/TargetHandle.js b/src/NodeRenderer/HandleTypes/TargetHandle.js
@@ -21,6 +21,6 @@ const TargetHandle = memo((props) => {
 });
 
 TargetHandle.displayName = 'TargetHandle';
-TargetHandle.whyDidYouRender = false;
+TargetHandle.whyDidYouRender = true;
 
 export default TargetHandle;
diff --git a/src/NodeRenderer/NodeTypes/wrapNode.js b/src/NodeRenderer/NodeTypes/wrapNode.js
@@ -92,25 +92,24 @@ export default NodeComponent => {
     } = props;
 
     const position = { x: xPos, y: yPos };
-    const [ x, y, k ] = transform;
     const nodeClasses = cx('react-graph__node', { selected });
     const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
 
     useEffect(() => {
       const bounds = nodeElement.current.getBoundingClientRect();
-      const unscaledWith = Math.round(bounds.width * (1 / k));
-      const unscaledHeight = Math.round(bounds.height * (1 / k));
+      const unscaledWith = Math.round(bounds.width * (1 / transform[2]));
+      const unscaledHeight = Math.round(bounds.height * (1 / transform[2]));
       const handleBounds = {
-        source: getHandleBounds('.source', nodeElement.current, bounds, k),
-        target: getHandleBounds('.target', nodeElement.current, bounds, k)
+        source: getHandleBounds('.source', nodeElement.current, bounds, transform[2]),
+        target: getHandleBounds('.target', nodeElement.current, bounds, transform[2])
       };
 
       dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight, handleBounds }));
     }, []);
 
     return (
       <ReactDraggable.DraggableCore
-        onStart={evt => onStart(evt, { setOffset,transform, position })}
+        onStart={evt => onStart(evt, { setOffset, transform, position })}
         onDrag={evt => onDrag(evt, { dispatch, setDragging, id, offset, transform })}
         onStop={() => onStop({ onNodeDragStop, isDragging, setDragging, id, type, position, data })}
         scale={transform[2]}