Skip to content

Commit

Permalink
refactor(edges): no re render on data change
Browse files Browse the repository at this point in the history
  • Loading branch information
@moklick
moklick committed Aug 1, 2019
1 parent f9bf236 commit b0cf101
Show file tree
Hide file tree
Showing 7 changed files with 212 additions and 82 deletions.
108 changes: 81 additions & 27 deletions dist/ReactGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
});
}

Expand Down Expand Up @@ -33382,19 +33396,40 @@
}

var BezierEdge = React.memo(function (props) {
var targetNode = props.targetNode,
sourceNode = props.sourceNode;
var style = props.style || {};
var sourceHandle = sourceNode.__rg.handleBounds.source;
var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
var sourceX = sourceNode.__rg.position.x + sourceHandleX;
var sourceY = sourceNode.__rg.position.y + sourceHandleY;
var targetHandle = targetNode.__rg.handleBounds.target;
var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
var targetHandleY = targetHandle ? targetHandle.y + targetHandle.height / 2 : 0;
var targetX = targetNode.__rg.position.x + targetHandleX;
var targetY = targetNode.__rg.position.y + targetHandleY;
var sourceNodeX = props.sourceNodeX,
sourceNodeY = props.sourceNodeY,
sourceNodeWidth = props.sourceNodeWidth,
sourceNodeHeight = props.sourceNodeHeight,
targetNodeX = props.targetNodeX,
targetNodeY = props.targetNodeY,
targetNodeWidth = props.targetNodeWidth,
targetNodeHeight = props.targetNodeHeight,
sourceHandleX = props.sourceHandleX,
sourceHandleY = props.sourceHandleY,
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 _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);
Expand All @@ -33404,17 +33439,36 @@
});

var StraightEdge = React.memo(function (props) {
var targetNode = props.targetNode,
sourceNode = props.sourceNode;
var style = props.style || {};
var sourceHandle = sourceNode.__rg.handleBounds.source;
var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
var sourceX = sourceNode.__rg.position.x + sourceHandleX;
var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
var targetHandle = targetNode.__rg.handleBounds.target;
var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
var targetX = targetNode.__rg.position.x + targetHandleX;
var targetY = targetNode.__rg.position.y;
var sourceNodeX = props.sourceNodeX,
sourceNodeY = props.sourceNodeY,
sourceNodeWidth = props.sourceNodeWidth,
sourceNodeHeight = props.sourceNodeHeight,
targetNodeX = props.targetNodeX,
targetNodeY = props.targetNodeY,
targetNodeWidth = props.targetNodeWidth,
targetNodeHeight = props.targetNodeHeight,
sourceHandleX = props.sourceHandleX,
sourceHandleY = props.sourceHandleY,
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)
}));
Expand Down
110 changes: 82 additions & 28 deletions example/build/example.e31bb0bc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
});
}

Expand Down Expand Up @@ -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,
sourceNode = props.sourceNode;
var style = props.style || {};
var sourceHandle = sourceNode.__rg.handleBounds.source;
var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
var sourceX = sourceNode.__rg.position.x + sourceHandleX;
var sourceY = sourceNode.__rg.position.y + sourceHandleY;
var targetHandle = targetNode.__rg.handleBounds.target;
var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
var targetHandleY = targetHandle ? targetHandle.y + targetHandle.height / 2 : 0;
var targetX = targetNode.__rg.position.x + targetHandleX;
var targetY = targetNode.__rg.position.y + targetHandleY;
var sourceNodeX = props.sourceNodeX,
sourceNodeY = props.sourceNodeY,
sourceNodeWidth = props.sourceNodeWidth,
sourceNodeHeight = props.sourceNodeHeight,
targetNodeX = props.targetNodeX,
targetNodeY = props.targetNodeY,
targetNodeWidth = props.targetNodeWidth,
targetNodeHeight = props.targetNodeHeight,
sourceHandleX = props.sourceHandleX,
sourceHandleY = props.sourceHandleY,
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 _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);
Expand All @@ -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,
sourceNode = props.sourceNode;
var style = props.style || {};
var sourceHandle = sourceNode.__rg.handleBounds.source;
var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
var sourceX = sourceNode.__rg.position.x + sourceHandleX;
var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
var targetHandle = targetNode.__rg.handleBounds.target;
var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
var targetX = targetNode.__rg.position.x + targetHandleX;
var targetY = targetNode.__rg.position.y;
var sourceNodeX = props.sourceNodeX,
sourceNodeY = props.sourceNodeY,
sourceNodeWidth = props.sourceNodeWidth,
sourceNodeHeight = props.sourceNodeHeight,
targetNodeX = props.targetNodeX,
targetNodeY = props.targetNodeY,
targetNodeWidth = props.targetNodeWidth,
targetNodeHeight = props.targetNodeHeight,
sourceHandleX = props.sourceHandleX,
sourceHandleY = props.sourceHandleY,
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)
}));
Expand Down Expand Up @@ -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 = {};
Expand Down
2 changes: 1 addition & 1 deletion example/build/example.e31bb0bc.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion example/build/index.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

28 changes: 16 additions & 12 deletions src/EdgeRenderer/EdgeTypes/BezierEdge.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
import React, { memo } from 'react';

export default memo((props) => {
const { targetNode, sourceNode } = props;
const style = props.style || {};
const {
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 targetHandleX = targetHandle ? targetHandle.x + (targetHandle.width / 2) : targetNode.__rg.width / 2;
const targetHandleY = targetHandle ? targetHandle.y + (targetHandle.height / 2) : 0;
const targetX = targetNode.__rg.position.x + targetHandleX;
const targetY = targetNode.__rg.position.y + targetHandleY;
const _sourceHandleX = hasSourceHandle ? sourceHandleX + (sourceHandleWidth / 2) : sourceNodeWidth / 2;
const _sourceHandleY = hasSourceHandle ? sourceHandleY + (sourceHandleHeight / 2) : sourceNodeHeight;
const sourceX = sourceNodeX + _sourceHandleX;
const sourceY = sourceNodeY + _sourceHandleY;

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;
Expand Down
23 changes: 13 additions & 10 deletions src/EdgeRenderer/EdgeTypes/StraightEdge.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import React, { memo } from 'react';

export default memo((props) => {
const { targetNode, sourceNode } = props;
const style = props.style || {};
const {
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 sourceX = sourceNode.__rg.position.x + sourceHandleX;
const sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
const _sourceHandleX = hasSourceHandle ? sourceHandleX + (sourceHandleWidth / 2) : sourceNodeWidth / 2;
const sourceX = sourceNodeX + _sourceHandleX;
const sourceY = sourceNodeY + sourceNodeHeight;

const targetHandle = targetNode.__rg.handleBounds.target;
const targetHandleX = targetHandle ? targetHandle.x + (targetHandle.width / 2) : targetNode.__rg.width / 2;
const targetX = targetNode.__rg.position.x + targetHandleX;
const targetY = targetNode.__rg.position.y;
const _targetHandleX = hasTargetHandle ? targetHandleX + (targetHandleWidth / 2) : targetNodeWidth / 2;
const targetX = targetNodeX + _targetHandleX;
const targetY = targetNodeY;

return (
<path
Expand Down

0 comments on commit b0cf101

Please sign in to comment.