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

refactor(renderer): dont rerender nodes when selcting element

Browse Source
This commit is contained in:
moklick
2019-08-05 14:19:49 +02:00
parent bcf5ea2ccd
commit e148e27893
7 changed files with 42 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
dist/ReactGraph.js vendored
View File

@@ -30204,6 +30204,9 @@
}
var NodeComponent = props.nodeTypes[nodeType] || props.nodeTypes["default"];
var selected = graphContext.state.selectedElements.filter(isNode).map(function (e) {
return e.id;
}).includes(d.id);
return React__default.createElement(NodeComponent, {
key: d.id,
id: d.id,
@@ -30216,7 +30219,7 @@
dispatch: graphContext.dispatch,
transform: graphContext.state.transform,
getNodeById: graphContext.getNodeById,
selectedElements: graphContext.state.selectedElements,
selected: selected,
style: d.style
});
}
@@ -30374,12 +30377,15 @@
targetX = _getEdgePositions.targetX,
targetY = _getEdgePositions.targetY;
var selected = graphContext.state.selectedElements.filter(isEdge).find(function (elm) {
return elm.source === e.source && elm.target === e.target;
});
return React__default.createElement(EdgeComponent, {
key: e.id,
id: e.id,
type: e.type,
onClick: props.onElementClick,
selectedElements: graphContext.state.selectedElements,
selected: selected,
dispatch: graphContext.dispatch,
animated: e.animated,
style: e.style,
@@ -33324,7 +33330,7 @@
transform = props.transform,
xPos = props.xPos,
yPos = props.yPos,
selectedElements = props.selectedElements,
selected = props.selected,
dispatch = props.dispatch,
getNodeById = props.getNodeById,
_onClick = props.onClick,
@@ -33339,9 +33345,6 @@
y = _transform[1],
k = _transform[2];
var selected = selectedElements.filter(isNode).map(function (e) {
return e.id;
}).includes(id);
var nodeClasses = classnames('react-graph__node', {
selected: selected
});
@@ -33471,13 +33474,8 @@
animated = props.animated,
type = props.type,
dispatch = props.dispatch,
selectedElements = props.selectedElements,
selected = props.selected,
_onClick = props.onClick;
var selected = selectedElements.filter(function (e) {
return isEdge(e);
}).find(function (e) {
return e.source === source && e.target === target;
});
var edgeClasses = classnames('react-graph__edge', {
selected: selected,
animated: animated

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

@@ -38190,6 +38190,8 @@ var _react = _interopRequireWildcard(require("react"));
var _GraphContext = require("../GraphContext");
var _graphUtils = require("../graph-utils");
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function renderNode(d, props, graphContext) {
@@ -38200,6 +38202,9 @@ function renderNode(d, props, graphContext) {
}
var NodeComponent = props.nodeTypes[nodeType] || props.nodeTypes.default;
var selected = graphContext.state.selectedElements.filter(_graphUtils.isNode).map(function (e) {
return e.id;
}).includes(d.id);
return _react.default.createElement(NodeComponent, {
key: d.id,
id: d.id,
@@ -38212,7 +38217,7 @@ function renderNode(d, props, graphContext) {
dispatch: graphContext.dispatch,
transform: graphContext.state.transform,
getNodeById: graphContext.getNodeById,
selectedElements: graphContext.state.selectedElements,
selected: selected,
style: d.style
});
}
@@ -38236,7 +38241,7 @@ NodeRenderer.displayName = 'NodeRenderer';
NodeRenderer.whyDidYouRender = false;
var _default = NodeRenderer;
exports.default = _default;
},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js"}],"../node_modules/classnames/index.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../graph-utils":"../src/graph-utils.js"}],"../node_modules/classnames/index.js":[function(require,module,exports) {
var define;
/*!
Copyright (c) 2017 Jed Watson.
@@ -38376,6 +38381,8 @@ var _ConnectionContext = require("../ConnectionContext");
var _ConnectionLine = _interopRequireDefault(require("../ConnectionLine"));
var _graphUtils = require("../graph-utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -38424,12 +38431,15 @@ function renderEdge(e, props, graphContext) {
targetX = _getEdgePositions.targetX,
targetY = _getEdgePositions.targetY;
var selected = graphContext.state.selectedElements.filter(_graphUtils.isEdge).find(function (elm) {
return elm.source === e.source && elm.target === e.target;
});
return _react.default.createElement(EdgeComponent, {
key: e.id,
id: e.id,
type: e.type,
onClick: props.onElementClick,
selectedElements: graphContext.state.selectedElements,
selected: selected,
dispatch: graphContext.dispatch,
animated: e.animated,
style: e.style,
@@ -38483,7 +38493,7 @@ var EdgeRenderer = (0, _react.memo)(function (props) {
});
var _default = EdgeRenderer;
exports.default = _default;
},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../ConnectionContext":"../src/ConnectionContext/index.js","../ConnectionLine":"../src/ConnectionLine/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../ConnectionContext":"../src/ConnectionContext/index.js","../ConnectionLine":"../src/ConnectionLine/index.js","../graph-utils":"../src/graph-utils.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -41589,8 +41599,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
var _actions = require("../../state/actions");
var _graphUtils = require("../../graph-utils");
var _NodeIdContext = require("../NodeIdContext");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41741,7 +41749,7 @@ var _default = function _default(NodeComponent) {
transform = props.transform,
xPos = props.xPos,
yPos = props.yPos,
selectedElements = props.selectedElements,
selected = props.selected,
dispatch = props.dispatch,
getNodeById = props.getNodeById,
_onClick = props.onClick,
@@ -41756,9 +41764,6 @@ var _default = function _default(NodeComponent) {
y = _transform[1],
k = _transform[2];
var selected = selectedElements.filter(_graphUtils.isNode).map(function (e) {
return e.id;
}).includes(id);
var nodeClasses = (0, _classnames.default)('react-graph__node', {
selected: selected
});
@@ -41836,7 +41841,7 @@ var _default = function _default(NodeComponent) {
};
exports.default = _default;
},{"react":"../node_modules/react/index.js","react-draggable":"../node_modules/react-draggable/dist/react-draggable.js","classnames":"../node_modules/classnames/index.js","../../state/actions":"../src/state/actions.js","../../graph-utils":"../src/graph-utils.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js"}],"../src/NodeRenderer/utils.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","react-draggable":"../node_modules/react-draggable/dist/react-draggable.js","classnames":"../node_modules/classnames/index.js","../../state/actions":"../src/state/actions.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js"}],"../src/NodeRenderer/utils.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -41945,8 +41950,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
var _actions = require("../../state/actions");
var _graphUtils = require("../../graph-utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -41962,13 +41965,8 @@ var _default = function _default(EdgeComponent) {
animated = props.animated,
type = props.type,
dispatch = props.dispatch,
selectedElements = props.selectedElements,
selected = props.selected,
_onClick = props.onClick;
var selected = selectedElements.filter(function (e) {
return (0, _graphUtils.isEdge)(e);
}).find(function (e) {
return e.source === source && e.target === target;
});
var edgeClasses = (0, _classnames.default)('react-graph__edge', {
selected: selected,
animated: animated
@@ -41999,7 +41997,7 @@ var _default = function _default(EdgeComponent) {
};
exports.default = _default;
},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../../state/actions":"../src/state/actions.js","../../graph-utils":"../src/graph-utils.js"}],"../src/EdgeRenderer/utils.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../../state/actions":"../src/state/actions.js"}],"../src/EdgeRenderer/utils.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {

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

File diff suppressed because one or more lines are too long

6
src/EdgeRenderer/EdgeTypes/wrapEdge.js
View File

@@ -2,7 +2,6 @@ import React, { memo } from 'react';
import cx from 'classnames';
import { setSelectedElements } from '../../state/actions';
import { isEdge } from '../../graph-utils';
const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
@@ -10,11 +9,8 @@ export default EdgeComponent => {
const WrappedEdge = memo((props) => {
const {
source, target, animated, type,
dispatch, selectedElements, onClick
dispatch, selected, onClick
} = props;
const selected = selectedElements
.filter(e => isEdge(e))
.find(e => e.source === source && e.target === target);
const edgeClasses = cx('react-graph__edge', { selected, animated: animated });
return (

6
src/EdgeRenderer/index.js
View File

@@ -3,6 +3,7 @@ import React, { memo, useContext } from 'react';
import { GraphContext } from '../GraphContext';
import { ConnectionContext } from '../ConnectionContext';
import ConnectionLine from '../ConnectionLine';
import { isEdge } from '../graph-utils';
function getEdgePositions(sourceNode, targetNode) {
const hasSourceHandle = !!sourceNode.__rg.handleBounds.source;
@@ -50,6 +51,9 @@ function renderEdge(e, props, graphContext) {
const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
const { sourceX, sourceY, targetX, targetY } = getEdgePositions(sourceNode, targetNode);
const selected = graphContext.state.selectedElements
.filter(isEdge)
.find(elm => elm.source === e.source && elm.target === e.target);
return (
<EdgeComponent
@@ -57,7 +61,7 @@ function renderEdge(e, props, graphContext) {
id={e.id}
type={e.type}
onClick={props.onElementClick}
selectedElements={graphContext.state.selectedElements}
selected={selected}
dispatch={graphContext.dispatch}
animated={e.animated}
style={e.style}

4
src/NodeRenderer/NodeTypes/wrapNode.js
View File

@@ -3,7 +3,6 @@ import ReactDraggable from 'react-draggable';
import cx from 'classnames';
import { updateNodeData, updateNodePos, setSelectedElements } from '../../state/actions';
import { isNode } from '../../graph-utils';
import { Provider } from '../NodeIdContext';
const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
@@ -88,13 +87,12 @@ export default NodeComponent => {
const [offset, setOffset] = useState({ x: 0, y: 0 });
const [isDragging, setDragging] = useState(false);
const {
id, type, data, transform, xPos, yPos, selectedElements,
id, type, data, transform, xPos, yPos, selected,
dispatch, getNodeById, onClick, onNodeDragStop
} = props;
const position = { x: xPos, y: yPos };
const [ x, y, k ] = transform;
const selected = selectedElements.filter(isNode).map(e => e.id).includes(id);
const nodeClasses = cx('react-graph__node', { selected });
const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };

7
src/NodeRenderer/index.js
View File

@@ -1,6 +1,7 @@
import React, { memo, useContext } from 'react';
import { GraphContext } from '../GraphContext';
import { isNode } from '../graph-utils';
function renderNode(d, props, graphContext) {
const nodeType = d.type || 'default';
@@ -10,6 +11,10 @@ function renderNode(d, props, graphContext) {
}
const NodeComponent = props.nodeTypes[nodeType] || props.nodeTypes.default;
const selected = graphContext.state.selectedElements
.filter(isNode)
.map(e => e.id)
.includes(d.id);
return (
<NodeComponent
@@ -24,7 +29,7 @@ function renderNode(d, props, graphContext) {
dispatch={graphContext.dispatch}
transform={graphContext.state.transform}
getNodeById={graphContext.getNodeById}
selectedElements={graphContext.state.selectedElements}
selected={selected}
style={d.style}
/>
);