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
src/EdgeRenderer/EdgeTypes/BezierEdge.js
+16 -12
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;
src/EdgeRenderer/EdgeTypes/StraightEdge.js
+13 -10
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
src/EdgeRenderer/index.js
+18 -3
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}
/>
);
}