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
example/build/example.e31bb0bc.js
+82 -28
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 = {};