refactor(edges): no re render on data change

dist/ReactGraph.js

@@ -30399,12 +30399,12 @@
     }
 
     var EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes["default"];
+    var hasSourceHandle = !!sourceNode.__rg.handleBounds.source;
+    var hasTargetHandle = !!sourceNode.__rg.handleBounds.target;
     return React__default.createElement(EdgeComponent, {
       key: e.id,
       id: e.id,
       type: e.type,
-      sourceNode: sourceNode,
-      targetNode: targetNode,
       onClick: props.onElementClick,
       selectedElements: graphContext.state.selectedElements,
       dispatch: graphContext.dispatch,
@@ -30414,8 +30414,22 @@
       target: e.target,
       sourceNodeX: sourceNode.__rg.position.x,
       sourceNodeY: sourceNode.__rg.position.y,
+      sourceNodeWidth: sourceNode.__rg.width,
+      sourceNodeHeight: sourceNode.__rg.height,
       targetNodeX: targetNode.__rg.position.x,
-      targeteNodeY: targetNode.__rg.position.y
+      targetNodeY: targetNode.__rg.position.y,
+      targetNodeWidth: targetNode.__rg.width,
+      targetNodeHeight: targetNode.__rg.height,
+      hasSourceHandle: hasSourceHandle,
+      hasTargetHandle: hasTargetHandle,
+      sourceHandleX: sourceNode.__rg.handleBounds.source.x,
+      sourceHandleY: sourceNode.__rg.handleBounds.source.y,
+      sourceHandleWidth: sourceNode.__rg.handleBounds.source.width,
+      sourceHandleHeight: sourceNode.__rg.handleBounds.source.height,
+      targetHandleX: targetNode.__rg.handleBounds.target.x,
+      targetHandleY: targetNode.__rg.handleBounds.target.y,
+      targetHandleWidth: targetNode.__rg.handleBounds.target.width,
+      targetHandleHeight: targetNode.__rg.handleBounds.target.height
     });
   }
 
@@ -33382,19 +33396,40 @@
   }
 
   var BezierEdge = React.memo(function (props) {
-    var targetNode = props.targetNode,
+    var sourceNodeX = props.sourceNodeX,
-        sourceNode = props.sourceNode;
+        sourceNodeY = props.sourceNodeY,
-    var style = props.style || {};
+        sourceNodeWidth = props.sourceNodeWidth,
-    var sourceHandle = sourceNode.__rg.handleBounds.source;
+        sourceNodeHeight = props.sourceNodeHeight,
-    var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
+        targetNodeX = props.targetNodeX,
-    var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
+        targetNodeY = props.targetNodeY,
-    var sourceX = sourceNode.__rg.position.x + sourceHandleX;
+        targetNodeWidth = props.targetNodeWidth,
-    var sourceY = sourceNode.__rg.position.y + sourceHandleY;
+        targetNodeHeight = props.targetNodeHeight,
-    var targetHandle = targetNode.__rg.handleBounds.target;
+        sourceHandleX = props.sourceHandleX,
-    var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
+        sourceHandleY = props.sourceHandleY,
-    var targetHandleY = targetHandle ? targetHandle.y + targetHandle.height / 2 : 0;
+        sourceHandleWidth = props.sourceHandleWidth,
-    var targetX = targetNode.__rg.position.x + targetHandleX;
+        sourceHandleHeight = props.sourceHandleHeight,
-    var targetY = targetNode.__rg.position.y + targetHandleY;
+        targetHandleX = props.targetHandleX,
+        targetHandleY = props.targetHandleY,
+        targetHandleWidth = props.targetHandleWidth,
+        targetHandleHeight = props.targetHandleHeight,
+        hasSourceHandle = props.hasSourceHandle,
+        hasTargetHandle = props.hasTargetHandle,
+        _props$style = props.style,
+        style = _props$style === void 0 ? {} : _props$style;
+
+    var _sourceHandleX = hasSourceHandle ? sourceHandleX + sourceHandleWidth / 2 : sourceNodeWidth / 2;
+
+    var _sourceHandleY = hasSourceHandle ? sourceHandleY + sourceHandleHeight / 2 : sourceNodeHeight;
+
+    var sourceX = sourceNodeX + _sourceHandleX;
+    var sourceY = sourceNodeY + _sourceHandleY;
+
+    var _targetHandleX = hasTargetHandle ? targetHandleX + targetHandleWidth / 2 : targetNodeWidth / 2;
+
+    var _targetHandleY = hasTargetHandle ? targetHandleY + targetHandleHeight / 2 : 0;
+
+    var targetX = targetNodeX + _targetHandleX;
+    var targetY = targetNodeY + _targetHandleY;
     var yOffset = Math.abs(targetY - sourceY) / 2;
     var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
     var dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
@@ -33404,17 +33439,36 @@
   });
 
   var StraightEdge = React.memo(function (props) {
-    var targetNode = props.targetNode,
+    var sourceNodeX = props.sourceNodeX,
-        sourceNode = props.sourceNode;
+        sourceNodeY = props.sourceNodeY,
-    var style = props.style || {};
+        sourceNodeWidth = props.sourceNodeWidth,
-    var sourceHandle = sourceNode.__rg.handleBounds.source;
+        sourceNodeHeight = props.sourceNodeHeight,
-    var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
+        targetNodeX = props.targetNodeX,
-    var sourceX = sourceNode.__rg.position.x + sourceHandleX;
+        targetNodeY = props.targetNodeY,
-    var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
+        targetNodeWidth = props.targetNodeWidth,
-    var targetHandle = targetNode.__rg.handleBounds.target;
+        targetNodeHeight = props.targetNodeHeight,
-    var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
+        sourceHandleX = props.sourceHandleX,
-    var targetX = targetNode.__rg.position.x + targetHandleX;
+        sourceHandleY = props.sourceHandleY,
-    var targetY = targetNode.__rg.position.y;
+        sourceHandleWidth = props.sourceHandleWidth,
+        sourceHandleHeight = props.sourceHandleHeight,
+        targetHandleX = props.targetHandleX,
+        targetHandleY = props.targetHandleY,
+        targetHandleWidth = props.targetHandleWidth,
+        targetHandleHeight = props.targetHandleHeight,
+        hasSourceHandle = props.hasSourceHandle,
+        hasTargetHandle = props.hasTargetHandle,
+        _props$style = props.style,
+        style = _props$style === void 0 ? {} : _props$style;
+
+    var _sourceHandleX = hasSourceHandle ? sourceHandleX + sourceHandleWidth / 2 : sourceNodeWidth / 2;
+
+    var sourceX = sourceNodeX + _sourceHandleX;
+    var sourceY = sourceNodeY + sourceNodeHeight;
+
+    var _targetHandleX = hasTargetHandle ? targetHandleX + targetHandleWidth / 2 : targetNodeWidth / 2;
+
+    var targetX = targetNodeX + _targetHandleX;
+    var targetY = targetNodeY;
     return React__default.createElement("path", _extends({}, style, {
       d: "M ".concat(sourceX, ",").concat(sourceY, "L ").concat(targetX, ",").concat(targetY)
     }));

example/build/example.e31bb0bc.js

@@ -38452,12 +38452,12 @@ function renderEdge(e, props, graphContext) {
   }
 
   var EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
+  var hasSourceHandle = !!sourceNode.__rg.handleBounds.source;
+  var hasTargetHandle = !!sourceNode.__rg.handleBounds.target;
   return _react.default.createElement(EdgeComponent, {
     key: e.id,
     id: e.id,
     type: e.type,
-    sourceNode: sourceNode,
-    targetNode: targetNode,
     onClick: props.onElementClick,
     selectedElements: graphContext.state.selectedElements,
     dispatch: graphContext.dispatch,
@@ -38467,8 +38467,22 @@ function renderEdge(e, props, graphContext) {
     target: e.target,
     sourceNodeX: sourceNode.__rg.position.x,
     sourceNodeY: sourceNode.__rg.position.y,
+    sourceNodeWidth: sourceNode.__rg.width,
+    sourceNodeHeight: sourceNode.__rg.height,
     targetNodeX: targetNode.__rg.position.x,
-    targeteNodeY: targetNode.__rg.position.y
+    targetNodeY: targetNode.__rg.position.y,
+    targetNodeWidth: targetNode.__rg.width,
+    targetNodeHeight: targetNode.__rg.height,
+    hasSourceHandle: hasSourceHandle,
+    hasTargetHandle: hasTargetHandle,
+    sourceHandleX: sourceNode.__rg.handleBounds.source.x,
+    sourceHandleY: sourceNode.__rg.handleBounds.source.y,
+    sourceHandleWidth: sourceNode.__rg.handleBounds.source.width,
+    sourceHandleHeight: sourceNode.__rg.handleBounds.source.height,
+    targetHandleX: targetNode.__rg.handleBounds.target.x,
+    targetHandleY: targetNode.__rg.handleBounds.target.y,
+    targetHandleWidth: targetNode.__rg.handleBounds.target.width,
+    targetHandleHeight: targetNode.__rg.handleBounds.target.height
   });
 }
 
@@ -41812,19 +41826,40 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var _default = (0, _react.memo)(function (props) {
-  var targetNode = props.targetNode,
+  var sourceNodeX = props.sourceNodeX,
-      sourceNode = props.sourceNode;
+      sourceNodeY = props.sourceNodeY,
-  var style = props.style || {};
+      sourceNodeWidth = props.sourceNodeWidth,
-  var sourceHandle = sourceNode.__rg.handleBounds.source;
+      sourceNodeHeight = props.sourceNodeHeight,
-  var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
+      targetNodeX = props.targetNodeX,
-  var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
+      targetNodeY = props.targetNodeY,
-  var sourceX = sourceNode.__rg.position.x + sourceHandleX;
+      targetNodeWidth = props.targetNodeWidth,
-  var sourceY = sourceNode.__rg.position.y + sourceHandleY;
+      targetNodeHeight = props.targetNodeHeight,
-  var targetHandle = targetNode.__rg.handleBounds.target;
+      sourceHandleX = props.sourceHandleX,
-  var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
+      sourceHandleY = props.sourceHandleY,
-  var targetHandleY = targetHandle ? targetHandle.y + targetHandle.height / 2 : 0;
+      sourceHandleWidth = props.sourceHandleWidth,
-  var targetX = targetNode.__rg.position.x + targetHandleX;
+      sourceHandleHeight = props.sourceHandleHeight,
-  var targetY = targetNode.__rg.position.y + targetHandleY;
+      targetHandleX = props.targetHandleX,
+      targetHandleY = props.targetHandleY,
+      targetHandleWidth = props.targetHandleWidth,
+      targetHandleHeight = props.targetHandleHeight,
+      hasSourceHandle = props.hasSourceHandle,
+      hasTargetHandle = props.hasTargetHandle,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style;
+
+  var _sourceHandleX = hasSourceHandle ? sourceHandleX + sourceHandleWidth / 2 : sourceNodeWidth / 2;
+
+  var _sourceHandleY = hasSourceHandle ? sourceHandleY + sourceHandleHeight / 2 : sourceNodeHeight;
+
+  var sourceX = sourceNodeX + _sourceHandleX;
+  var sourceY = sourceNodeY + _sourceHandleY;
+
+  var _targetHandleX = hasTargetHandle ? targetHandleX + targetHandleWidth / 2 : targetNodeWidth / 2;
+
+  var _targetHandleY = hasTargetHandle ? targetHandleY + targetHandleHeight / 2 : 0;
+
+  var targetX = targetNodeX + _targetHandleX;
+  var targetY = targetNodeY + _targetHandleY;
   var yOffset = Math.abs(targetY - sourceY) / 2;
   var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
   var dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
@@ -41849,17 +41884,36 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var _default = (0, _react.memo)(function (props) {
-  var targetNode = props.targetNode,
+  var sourceNodeX = props.sourceNodeX,
-      sourceNode = props.sourceNode;
+      sourceNodeY = props.sourceNodeY,
-  var style = props.style || {};
+      sourceNodeWidth = props.sourceNodeWidth,
-  var sourceHandle = sourceNode.__rg.handleBounds.source;
+      sourceNodeHeight = props.sourceNodeHeight,
-  var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
+      targetNodeX = props.targetNodeX,
-  var sourceX = sourceNode.__rg.position.x + sourceHandleX;
+      targetNodeY = props.targetNodeY,
-  var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
+      targetNodeWidth = props.targetNodeWidth,
-  var targetHandle = targetNode.__rg.handleBounds.target;
+      targetNodeHeight = props.targetNodeHeight,
-  var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
+      sourceHandleX = props.sourceHandleX,
-  var targetX = targetNode.__rg.position.x + targetHandleX;
+      sourceHandleY = props.sourceHandleY,
-  var targetY = targetNode.__rg.position.y;
+      sourceHandleWidth = props.sourceHandleWidth,
+      sourceHandleHeight = props.sourceHandleHeight,
+      targetHandleX = props.targetHandleX,
+      targetHandleY = props.targetHandleY,
+      targetHandleWidth = props.targetHandleWidth,
+      targetHandleHeight = props.targetHandleHeight,
+      hasSourceHandle = props.hasSourceHandle,
+      hasTargetHandle = props.hasTargetHandle,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style;
+
+  var _sourceHandleX = hasSourceHandle ? sourceHandleX + sourceHandleWidth / 2 : sourceNodeWidth / 2;
+
+  var sourceX = sourceNodeX + _sourceHandleX;
+  var sourceY = sourceNodeY + sourceNodeHeight;
+
+  var _targetHandleX = hasTargetHandle ? targetHandleX + targetHandleWidth / 2 : targetNodeWidth / 2;
+
+  var targetX = targetNodeX + _targetHandleX;
+  var targetY = targetNodeY;
   return _react.default.createElement("path", _extends({}, style, {
     d: "M ".concat(sourceX, ",").concat(sourceY, "L ").concat(targetX, ",").concat(targetY)
   }));
@@ -42638,7 +42692,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61736" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "55563" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

example/build/index.js

@@ -212,7 +212,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61736" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "55563" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

src/EdgeRenderer/EdgeTypes/BezierEdge.js

@@ -1,20 +1,24 @@
 import React, { memo } from 'react';
 
 export default memo((props) => {
-  const { targetNode, sourceNode } = props;
+  const {
-  const style = props.style || {};
+    sourceNodeX, sourceNodeY, sourceNodeWidth, sourceNodeHeight,
+    targetNodeX, targetNodeY, targetNodeWidth, targetNodeHeight,
+    sourceHandleX, sourceHandleY, sourceHandleWidth, sourceHandleHeight,
+    targetHandleX, targetHandleY, targetHandleWidth, targetHandleHeight,
+    hasSourceHandle, hasTargetHandle, style = {}
+  } = props;
 
-  const sourceHandle = sourceNode.__rg.handleBounds.source;
-  const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
-  const sourceHandleY = sourceHandle ? sourceHandle.y + (sourceHandle.height / 2) : sourceNode.__rg.height;
-  const sourceX = sourceNode.__rg.position.x + sourceHandleX;
-  const sourceY = sourceNode.__rg.position.y + sourceHandleY;
 
-  const targetHandle = targetNode.__rg.handleBounds.target;
+  const _sourceHandleX = hasSourceHandle ? sourceHandleX + (sourceHandleWidth / 2) : sourceNodeWidth / 2;
-  const targetHandleX = targetHandle ? targetHandle.x + (targetHandle.width / 2) : targetNode.__rg.width / 2;
+  const _sourceHandleY = hasSourceHandle ? sourceHandleY + (sourceHandleHeight / 2) : sourceNodeHeight;
-  const targetHandleY = targetHandle ? targetHandle.y + (targetHandle.height / 2) : 0;
+  const sourceX = sourceNodeX + _sourceHandleX;
-  const targetX = targetNode.__rg.position.x + targetHandleX;
+  const sourceY = sourceNodeY + _sourceHandleY;
-  const targetY = targetNode.__rg.position.y + targetHandleY;
+
+  const _targetHandleX = hasTargetHandle ? targetHandleX + (targetHandleWidth / 2) : targetNodeWidth / 2;
+  const _targetHandleY = hasTargetHandle ? targetHandleY + (targetHandleHeight / 2) : 0;
+  const targetX = targetNodeX + _targetHandleX;
+  const targetY = targetNodeY + _targetHandleY;
 
   const yOffset = Math.abs(targetY - sourceY) / 2;
   const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;

src/EdgeRenderer/EdgeTypes/StraightEdge.js

@@ -1,18 +1,21 @@
 import React, { memo } from 'react';
 
 export default memo((props) => {
-  const { targetNode, sourceNode } = props;
+  const {
-  const style = props.style || {};
+    sourceNodeX, sourceNodeY, sourceNodeWidth, sourceNodeHeight,
+    targetNodeX, targetNodeY, targetNodeWidth, targetNodeHeight,
+    sourceHandleX, sourceHandleY, sourceHandleWidth, sourceHandleHeight,
+    targetHandleX, targetHandleY, targetHandleWidth, targetHandleHeight,
+    hasSourceHandle, hasTargetHandle, style = {}
+  } = props;
 
-  const sourceHandle = sourceNode.__rg.handleBounds.source;
+  const _sourceHandleX = hasSourceHandle ? sourceHandleX + (sourceHandleWidth / 2) : sourceNodeWidth / 2;
-  const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
+  const sourceX = sourceNodeX + _sourceHandleX;
-  const sourceX = sourceNode.__rg.position.x + sourceHandleX;
+  const sourceY = sourceNodeY + sourceNodeHeight;
-  const sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
 
-  const targetHandle = targetNode.__rg.handleBounds.target;
+  const _targetHandleX = hasTargetHandle ? targetHandleX + (targetHandleWidth / 2) : targetNodeWidth / 2;
-  const targetHandleX = targetHandle ? targetHandle.x + (targetHandle.width / 2) : targetNode.__rg.width / 2;
+  const targetX = targetNodeX + _targetHandleX;
-  const targetX = targetNode.__rg.position.x + targetHandleX;
+  const targetY = targetNodeY;
-  const targetY = targetNode.__rg.position.y;
 
   return (
     <path

src/EdgeRenderer/index.js

@@ -17,14 +17,15 @@ function renderEdge(e, props, graphContext) {
   }
 
   const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
+  const hasSourceHandle = !!sourceNode.__rg.handleBounds.source;
+  const hasTargetHandle = !!sourceNode.__rg.handleBounds.target;
+
 
   return (
     <EdgeComponent
       key={e.id}
       id={e.id}
       type={e.type}
-      sourceNode={sourceNode}
-      targetNode={targetNode}
       onClick={props.onElementClick}
       selectedElements={graphContext.state.selectedElements}
       dispatch={graphContext.dispatch}
@@ -34,8 +35,22 @@ function renderEdge(e, props, graphContext) {
       target={e.target}
       sourceNodeX={sourceNode.__rg.position.x}
       sourceNodeY={sourceNode.__rg.position.y}
+      sourceNodeWidth={sourceNode.__rg.width}
+      sourceNodeHeight={sourceNode.__rg.height}
       targetNodeX={targetNode.__rg.position.x}
-      targeteNodeY={targetNode.__rg.position.y}
+      targetNodeY={targetNode.__rg.position.y}
+      targetNodeWidth={targetNode.__rg.width}
+      targetNodeHeight={targetNode.__rg.height}
+      hasSourceHandle={hasSourceHandle}
+      hasTargetHandle={hasTargetHandle}
+      sourceHandleX={sourceNode.__rg.handleBounds.source.x}
+      sourceHandleY={sourceNode.__rg.handleBounds.source.y}
+      sourceHandleWidth={sourceNode.__rg.handleBounds.source.width}
+      sourceHandleHeight={sourceNode.__rg.handleBounds.source.height}
+      targetHandleX={targetNode.__rg.handleBounds.target.x}
+      targetHandleY={targetNode.__rg.handleBounds.target.y}
+      targetHandleWidth={targetNode.__rg.handleBounds.target.width}
+      targetHandleHeight={targetNode.__rg.handleBounds.target.height}
     />
   );
 }