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

refactor(connectionContext): memoize context

Browse Source
This commit is contained in:
moklick
2019-08-05 14:31:35 +02:00
parent e148e27893
commit 8691edd3f4
7 changed files with 45 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
dist/ReactGraph.js vendored
View File

@@ -27933,13 +27933,15 @@
position = _useState4[0],
setPosition = _useState4[1];
var connectionContext = {
sourceId: sourceId,
setSourceId: setSourceId,
position: position,
setPosition: setPosition,
onConnect: onConnect
};
var connectionContext = React.useMemo(function () {
return {
sourceId: sourceId,
setSourceId: setSourceId,
position: position,
setPosition: setPosition,
onConnect: onConnect
};
}, [sourceId, position]);
return React__default.createElement(ConnectionContext.Provider, {
value: connectionContext
}, children);
@@ -33088,8 +33090,7 @@
onConnect = _ref2.onConnect,
setSourceId = _ref2.setSourceId,
setPosition = _ref2.setPosition,
_ref2$className = _ref2.className,
className = _ref2$className === void 0 ? null : _ref2$className,
className = _ref2.className,
rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "setSourceId", "setPosition", "className"]);
var handleClasses = classnames('react-graph__handle', className, {
@@ -33134,7 +33135,7 @@
}, props));
});
TargetHandle.displayName = 'TargetHandle';
TargetHandle.whyDidYouRender = false;
TargetHandle.whyDidYouRender = true;
var SourceHandle = React.memo(function (props) {
var nodeId = React.useContext(NodeIdContext);
@@ -33339,12 +33340,6 @@
x: xPos,
y: yPos
};
var _transform = _slicedToArray(transform, 3),
x = _transform[0],
y = _transform[1],
k = _transform[2];
var nodeClasses = classnames('react-graph__node', {
selected: selected
});
@@ -33354,11 +33349,11 @@
};
React.useEffect(function () {
var bounds = nodeElement.current.getBoundingClientRect();
var unscaledWith = Math.round(bounds.width * (1 / k));
var unscaledHeight = Math.round(bounds.height * (1 / k));
var unscaledWith = Math.round(bounds.width * (1 / transform[2]));
var unscaledHeight = Math.round(bounds.height * (1 / transform[2]));
var handleBounds = {
source: getHandleBounds('.source', nodeElement.current, bounds, k),
target: getHandleBounds('.target', nodeElement.current, bounds, k)
source: getHandleBounds('.source', nodeElement.current, bounds, transform[2]),
target: getHandleBounds('.target', nodeElement.current, bounds, transform[2])
};
dispatch(updateNodeData(id, {
width: unscaledWith,

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

@@ -35710,13 +35710,15 @@ var Provider = (0, _react.memo)(function (_ref) {
position = _useState4[0],
setPosition = _useState4[1];
var connectionContext = {
sourceId: sourceId,
setSourceId: setSourceId,
position: position,
setPosition: setPosition,
onConnect: onConnect
};
var connectionContext = (0, _react.useMemo)(function () {
return {
sourceId: sourceId,
setSourceId: setSourceId,
position: position,
setPosition: setPosition,
onConnect: onConnect
};
}, [sourceId, position]);
return _react.default.createElement(ConnectionContext.Provider, {
value: connectionContext
}, children);
@@ -41346,8 +41348,7 @@ var BaseHandle = (0, _react.memo)(function (_ref2) {
onConnect = _ref2.onConnect,
setSourceId = _ref2.setSourceId,
setPosition = _ref2.setPosition,
_ref2$className = _ref2.className,
className = _ref2$className === void 0 ? null : _ref2$className,
className = _ref2.className,
rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "setSourceId", "setPosition", "className"]);
var handleClasses = (0, _classnames.default)('react-graph__handle', className, {
@@ -41429,7 +41430,7 @@ var TargetHandle = (0, _react.memo)(function (props) {
}, props));
});
TargetHandle.displayName = 'TargetHandle';
TargetHandle.whyDidYouRender = false;
TargetHandle.whyDidYouRender = true;
var _default = TargetHandle;
exports.default = _default;
},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js","../../ConnectionContext":"../src/ConnectionContext/index.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js"}],"../src/NodeRenderer/HandleTypes/SourceHandle.js":[function(require,module,exports) {
@@ -41758,12 +41759,6 @@ var _default = function _default(NodeComponent) {
x: xPos,
y: yPos
};
var _transform = _slicedToArray(transform, 3),
x = _transform[0],
y = _transform[1],
k = _transform[2];
var nodeClasses = (0, _classnames.default)('react-graph__node', {
selected: selected
});
@@ -41773,11 +41768,11 @@ var _default = function _default(NodeComponent) {
};
(0, _react.useEffect)(function () {
var bounds = nodeElement.current.getBoundingClientRect();
var unscaledWith = Math.round(bounds.width * (1 / k));
var unscaledHeight = Math.round(bounds.height * (1 / k));
var unscaledWith = Math.round(bounds.width * (1 / transform[2]));
var unscaledHeight = Math.round(bounds.height * (1 / transform[2]));
var handleBounds = {
source: getHandleBounds('.source', nodeElement.current, bounds, k),
target: getHandleBounds('.target', nodeElement.current, bounds, k)
source: getHandleBounds('.source', nodeElement.current, bounds, transform[2]),
target: getHandleBounds('.target', nodeElement.current, bounds, transform[2])
};
dispatch((0, _actions.updateNodeData)(id, {
width: unscaledWith,

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

File diff suppressed because one or more lines are too long

6
src/ConnectionContext/index.js
View File

@@ -1,4 +1,4 @@
import React, { createContext, useState, memo } from 'react';
import React, { createContext, useState, memo, useMemo } from 'react';
export const ConnectionContext = createContext({});
@@ -6,13 +6,13 @@ export const Provider = memo(({ onConnect, children }) => {
const [sourceId, setSourceId] = useState(null);
const [position, setPosition] = useState({ x:0, y: 0 });
const connectionContext = {
const connectionContext = useMemo(() => ({
sourceId,
setSourceId,
position,
setPosition,
onConnect
};
}), [sourceId, position]);
return (
<ConnectionContext.Provider value={connectionContext}>

7
src/NodeRenderer/HandleTypes/BaseHandle.js
View File

@@ -39,7 +39,10 @@ function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarg
document.addEventListener('mouseup', onMouseUp)
}
const BaseHandle = memo(({ source, target, nodeId, onConnect, setSourceId, setPosition, className = null, ...rest }) => {
const BaseHandle = memo(({
source, target, nodeId, onConnect,
setSourceId, setPosition, className, ...rest
}) => {
const handleClasses = cx(
'react-graph__handle',
className,
@@ -59,4 +62,4 @@ const BaseHandle = memo(({ source, target, nodeId, onConnect, setSourceId, setPo
BaseHandle.displayName = 'BaseHandle';
BaseHandle.whyDidYouRender = false;
export default BaseHandle;
export default BaseHandle;

2
src/NodeRenderer/HandleTypes/TargetHandle.js
View File

@@ -21,6 +21,6 @@ const TargetHandle = memo((props) => {
});
TargetHandle.displayName = 'TargetHandle';
TargetHandle.whyDidYouRender = false;
TargetHandle.whyDidYouRender = true;
export default TargetHandle;

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

@@ -92,17 +92,16 @@ export default NodeComponent => {
} = props;
const position = { x: xPos, y: yPos };
const [ x, y, k ] = transform;
const nodeClasses = cx('react-graph__node', { selected });
const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
useEffect(() => {
const bounds = nodeElement.current.getBoundingClientRect();
const unscaledWith = Math.round(bounds.width * (1 / k));
const unscaledHeight = Math.round(bounds.height * (1 / k));
const unscaledWith = Math.round(bounds.width * (1 / transform[2]));
const unscaledHeight = Math.round(bounds.height * (1 / transform[2]));
const handleBounds = {
source: getHandleBounds('.source', nodeElement.current, bounds, k),
target: getHandleBounds('.target', nodeElement.current, bounds, k)
source: getHandleBounds('.source', nodeElement.current, bounds, transform[2]),
target: getHandleBounds('.target', nodeElement.current, bounds, transform[2])
};
dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight, handleBounds }));
@@ -110,7 +109,7 @@ export default NodeComponent => {
return (
<ReactDraggable.DraggableCore
onStart={evt => onStart(evt, { setOffset,transform, position })}
onStart={evt => onStart(evt, { setOffset, transform, position })}
onDrag={evt => onDrag(evt, { dispatch, setDragging, id, offset, transform })}
onStop={() => onStop({ onNodeDragStop, isDragging, setDragging, id, type, position, data })}
scale={transform[2]}