alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(edges): no re render on data change

Browse Source
This commit is contained in:
moklick
2019-08-01 10:34:20 +02:00
parent f9bf2368c7
commit b0cf101a7f
7 changed files with 212 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
dist/ReactGraph.js vendored
View File

@@ -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,
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);
@@ -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)
}));

110
example/build/example.e31bb0bc.js
View File

@@ -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,
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);
@@ -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)
}));
@@ -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 = {};

2
example/build/example.e31bb0bc.js.map
View File

File diff suppressed because one or more lines are too long

2
example/build/index.js
View File

@@ -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 = {};

28
src/EdgeRenderer/EdgeTypes/BezierEdge.js
View File

@@ -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;

23
src/EdgeRenderer/EdgeTypes/StraightEdge.js
View File

@@ -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

21
src/EdgeRenderer/index.js
View File

@@ -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}
/>
);
}