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

refactor(nodewrap): dont pass all props

Browse Source
This commit is contained in:
moklick
2019-08-05 15:19:45 +02:00
parent b24d7b6704
commit 6aa8f9cc6a
4 changed files with 86 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/ReactGraph.js
Vendored
+36 -47
View File
@@ -33224,7 +33224,12 @@
};
var _onStart = function onStart(evt, _ref) {
var setOffset = _ref.setOffset,
var dispatch = _ref.dispatch,
setOffset = _ref.setOffset,
onClick = _ref.onClick,
id = _ref.id,
type = _ref.type,
data = _ref.data,
position = _ref.position,
transform = _ref.transform;
@@ -33238,10 +33243,21 @@
};
var offsetX = scaledClient.x - position.x - [transform[0]];
var offsetY = scaledClient.y - position.y - [transform[1]];
var node = {
id: id,
type: type,
position: position,
data: data
};
dispatch(setSelectedElements({
id: id,
type: type
}));
setOffset({
x: offsetX,
y: offsetY
});
onClick(node);
};
var _onDrag = function onDrag(evt, _ref2) {
@@ -33261,40 +33277,15 @@
}));
};
var onNodeClick = function onNodeClick(evt, _ref3) {
var onClick = _ref3.onClick,
dispatch = _ref3.dispatch,
var _onStop = function onStop(_ref3) {
var onNodeDragStop = _ref3.onNodeDragStop,
setDragging = _ref3.setDragging,
isDragging = _ref3.isDragging,
id = _ref3.id,
type = _ref3.type,
position = _ref3.position,
data = _ref3.data;
if (isInput(evt)) {
return false;
}
var node = {
id: id,
type: type,
position: position,
data: data
};
dispatch(setSelectedElements({
id: id,
type: type
}));
onClick(node);
};
var _onStop = function onStop(_ref4) {
var onNodeDragStop = _ref4.onNodeDragStop,
setDragging = _ref4.setDragging,
isDragging = _ref4.isDragging,
id = _ref4.id,
type = _ref4.type,
position = _ref4.position,
data = _ref4.data;
if (!isDragging) {
return false;
}
@@ -33333,9 +33324,9 @@
yPos = props.yPos,
selected = props.selected,
dispatch = props.dispatch,
getNodeById = props.getNodeById,
_onClick = props.onClick,
onNodeDragStop = props.onNodeDragStop;
onClick = props.onClick,
onNodeDragStop = props.onNodeDragStop,
style = props.style;
var position = {
x: xPos,
y: yPos
@@ -33364,6 +33355,11 @@
return React__default.createElement(reactDraggable.DraggableCore, {
onStart: function onStart(evt) {
return _onStart(evt, {
dispatch: dispatch,
onClick: onClick,
id: id,
type: type,
data: data,
setOffset: setOffset,
transform: transform,
position: position
@@ -33393,23 +33389,16 @@
}, React__default.createElement("div", {
className: nodeClasses,
ref: nodeElement,
style: nodeStyle,
onClick: function onClick(evt) {
return onNodeClick(evt, {
getNodeById: getNodeById,
onClick: _onClick,
dispatch: dispatch,
id: id,
type: type,
position: position,
data: data
});
}
style: nodeStyle
}, React__default.createElement(Provider$2, {
value: id
}, React__default.createElement(NodeComponent, _extends({}, props, {
}, React__default.createElement(NodeComponent, {
id: id,
data: data,
type: type,
style: style,
selected: selected
})))));
}))));
});
WrappedComp.displayName = 'Wrapped Node';
WrappedComp.whyDidYouRender = false;
example/build/example.e31bb0bc.js
+36 -49
View File
@@ -41606,8 +41606,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
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 _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); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
@@ -41643,7 +41641,12 @@ var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k
};
var _onStart = function onStart(evt, _ref) {
var setOffset = _ref.setOffset,
var dispatch = _ref.dispatch,
setOffset = _ref.setOffset,
onClick = _ref.onClick,
id = _ref.id,
type = _ref.type,
data = _ref.data,
position = _ref.position,
transform = _ref.transform;
@@ -41657,10 +41660,21 @@ var _onStart = function onStart(evt, _ref) {
};
var offsetX = scaledClient.x - position.x - [transform[0]];
var offsetY = scaledClient.y - position.y - [transform[1]];
var node = {
id: id,
type: type,
position: position,
data: data
};
dispatch((0, _actions.setSelectedElements)({
id: id,
type: type
}));
setOffset({
x: offsetX,
y: offsetY
});
onClick(node);
};
var _onDrag = function onDrag(evt, _ref2) {
@@ -41680,40 +41694,15 @@ var _onDrag = function onDrag(evt, _ref2) {
}));
};
var onNodeClick = function onNodeClick(evt, _ref3) {
var onClick = _ref3.onClick,
dispatch = _ref3.dispatch,
var _onStop = function onStop(_ref3) {
var onNodeDragStop = _ref3.onNodeDragStop,
setDragging = _ref3.setDragging,
isDragging = _ref3.isDragging,
id = _ref3.id,
type = _ref3.type,
position = _ref3.position,
data = _ref3.data;
if (isInput(evt)) {
return false;
}
var node = {
id: id,
type: type,
position: position,
data: data
};
dispatch((0, _actions.setSelectedElements)({
id: id,
type: type
}));
onClick(node);
};
var _onStop = function onStop(_ref4) {
var onNodeDragStop = _ref4.onNodeDragStop,
setDragging = _ref4.setDragging,
isDragging = _ref4.isDragging,
id = _ref4.id,
type = _ref4.type,
position = _ref4.position,
data = _ref4.data;
if (!isDragging) {
return false;
}
@@ -41752,9 +41741,9 @@ var _default = function _default(NodeComponent) {
yPos = props.yPos,
selected = props.selected,
dispatch = props.dispatch,
getNodeById = props.getNodeById,
_onClick = props.onClick,
onNodeDragStop = props.onNodeDragStop;
onClick = props.onClick,
onNodeDragStop = props.onNodeDragStop,
style = props.style;
var position = {
x: xPos,
y: yPos
@@ -41783,6 +41772,11 @@ var _default = function _default(NodeComponent) {
return _react.default.createElement(_reactDraggable.default.DraggableCore, {
onStart: function onStart(evt) {
return _onStart(evt, {
dispatch: dispatch,
onClick: onClick,
id: id,
type: type,
data: data,
setOffset: setOffset,
transform: transform,
position: position
@@ -41812,23 +41806,16 @@ var _default = function _default(NodeComponent) {
}, _react.default.createElement("div", {
className: nodeClasses,
ref: nodeElement,
style: nodeStyle,
onClick: function onClick(evt) {
return onNodeClick(evt, {
getNodeById: getNodeById,
onClick: _onClick,
dispatch: dispatch,
id: id,
type: type,
position: position,
data: data
});
}
style: nodeStyle
}, _react.default.createElement(_NodeIdContext.Provider, {
value: id
}, _react.default.createElement(NodeComponent, _extends({}, props, {
}, _react.default.createElement(NodeComponent, {
id: id,
data: data,
type: type,
style: style,
selected: selected
})))));
}))));
});
WrappedComp.displayName = 'Wrapped Node';
WrappedComp.whyDidYouRender = false;
example/build/example.e31bb0bc.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/NodeRenderer/NodeTypes/wrapNode.js
+13 -16
View File
@@ -31,7 +31,7 @@ const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
};
};
const onStart = (evt, { setOffset, position, transform }) => {
const onStart = (evt, { dispatch, setOffset, onClick, id, type, data, position, transform }) => {
if (isInput(evt) || isHandle(evt)) {
return false;
}
@@ -42,8 +42,11 @@ const onStart = (evt, { setOffset, position, transform }) => {
}
const offsetX = scaledClient.x - position.x - [transform[0]];
const offsetY = scaledClient.y - position.y - [transform[1]];
const node = { id, type, position, data }
dispatch(setSelectedElements({ id, type }));
setOffset({ x: offsetX, y: offsetY });
onClick(node);
};
const onDrag = (evt, { dispatch, setDragging, id, offset, transform }) => {
@@ -59,17 +62,6 @@ const onDrag = (evt, { dispatch, setDragging, id, offset, transform }) => {
}));
};
const onNodeClick = (evt, { onClick, dispatch, id, type, position, data }) => {
if (isInput(evt)) {
return false;
}
const node = { id, type, position, data }
dispatch(setSelectedElements({ id, type }));
onClick(node);
};
const onStop = ({ onNodeDragStop, setDragging, isDragging, id, type, position, data }) => {
if (!isDragging) {
return false;
@@ -88,7 +80,7 @@ export default NodeComponent => {
const [isDragging, setDragging] = useState(false);
const {
id, type, data, transform, xPos, yPos, selected,
dispatch, getNodeById, onClick, onNodeDragStop
dispatch, onClick, onNodeDragStop, style
} = props;
const position = { x: xPos, y: yPos };
@@ -109,7 +101,7 @@ export default NodeComponent => {
return (
<ReactDraggable.DraggableCore
onStart={evt => onStart(evt, { setOffset, transform, position })}
onStart={evt => onStart(evt, { dispatch, onClick, id, type, data, setOffset, transform, position })}
onDrag={evt => onDrag(evt, { dispatch, setDragging, id, offset, transform })}
onStop={() => onStop({ onNodeDragStop, isDragging, setDragging, id, type, position, data })}
scale={transform[2]}
@@ -118,10 +110,15 @@ export default NodeComponent => {
className={nodeClasses}
ref={nodeElement}
style={nodeStyle}
onClick={evt => onNodeClick(evt, { getNodeById, onClick, dispatch, id, type, position, data })}
>
<Provider value={id}>
<NodeComponent {...props} selected={selected} />
<NodeComponent
id={id}
data={data}
type={type}
style={style}
selected={selected}
/>
</Provider>
</div>
</ReactDraggable.DraggableCore>