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

refactor(nodeWrap): outsource event handler

Browse Source
This commit is contained in:
moklick
2019-07-31 13:38:32 +02:00
parent aa7e209d02
commit a0646a31f2
5 changed files with 284 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/ReactGraph.js
Vendored
+115 -66
View File
@@ -33188,6 +33188,80 @@
};
};
var _onStart = function onStart(evt, _ref) {
var setOffset = _ref.setOffset,
position = _ref.position,
transform = _ref.transform;
if (isInput(evt) || isHandle(evt)) {
return false;
}
var scaledClient = {
x: evt.clientX * (1 / [transform[2]]),
y: evt.clientY * (1 / [transform[2]])
};
var offsetX = scaledClient.x - position.x - [transform[0]];
var offsetY = scaledClient.y - position.y - [transform[1]];
setOffset({
x: offsetX,
y: offsetY
});
};
var _onDrag = function onDrag(evt, _ref2) {
var dispatch = _ref2.dispatch,
id = _ref2.id,
offset = _ref2.offset,
transform = _ref2.transform;
var scaledClient = {
x: evt.clientX * (1 / [transform[2]]),
y: evt.clientY * (1 / [transform[2]])
};
dispatch(updateNodePos(id, {
x: scaledClient.x - [transform[0]] - offset.x,
y: scaledClient.y - [transform[1]] - offset.y
}));
};
var onNodeClick = function onNodeClick(evt, _ref3) {
var onClick = _ref3.onClick,
dispatch = _ref3.dispatch,
data = _ref3.data,
id = _ref3.id,
type = _ref3.type,
position = _ref3.position;
if (isInput(evt)) {
return false;
}
dispatch(setSelectedElements({
data: data,
id: id
}));
onClick({
id: id,
type: type,
data: data,
position: position
});
};
var _onStop = function onStop(_ref4) {
var onNodeDragStop = _ref4.onNodeDragStop,
id = _ref4.id,
type = _ref4.type,
data = _ref4.data,
position = _ref4.position;
onNodeDragStop({
id: id,
type: type,
data: data,
position: position
});
};
var wrapNode = (function (NodeComponent) {
return React.memo(function (props) {
var nodeElement = React.useRef(null);
@@ -33205,7 +33279,7 @@
setOffset = _useState2[1];
var data = props.data,
onClick = props.onClick,
_onClick = props.onClick,
type = props.type,
id = props.id,
__rg = props.__rg,
@@ -33223,6 +33297,10 @@
var nodeClasses = classnames('react-graph__node', {
selected: selected
});
var nodeStyle = {
zIndex: selected ? 10 : 3,
transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
};
React.useEffect(function () {
var bounds = nodeElement.current.getBoundingClientRect();
var unscaledWith = Math.round(bounds.width * (1 / k));
@@ -33237,75 +33315,46 @@
handleBounds: handleBounds
}));
}, []);
var onStart = function onStart(evt) {
if (isInput(evt) || isHandle(evt)) {
return false;
}
var scaledClient = {
x: evt.clientX * (1 / k),
y: evt.clientY * (1 / k)
};
var offsetX = scaledClient.x - position.x - x;
var offsetY = scaledClient.y - position.y - y;
setOffset({
x: offsetX,
y: offsetY
});
};
var onDrag = function onDrag(evt) {
var scaledClient = {
x: evt.clientX * (1 / k),
y: evt.clientY * (1 / k)
};
dispatch(updateNodePos(id, {
x: scaledClient.x - x - offset.x,
y: scaledClient.y - y - offset.y
}));
};
var onNodeClick = function onNodeClick(evt) {
if (isInput(evt)) {
return false;
}
dispatch(setSelectedElements({
data: data,
id: id
}));
onClick({
id: id,
type: type,
data: data,
position: position
});
};
var onStop = function onStop() {
onNodeDragStop({
id: id,
type: type,
data: data,
position: position
});
};
return React__default.createElement(reactDraggable.DraggableCore, {
grid: [1, 1],
onStart: onStart,
onDrag: onDrag,
onStop: onStop,
scale: k
onStart: function onStart(evt) {
return _onStart(evt, {
setOffset: setOffset,
transform: state.transform,
position: position
});
},
onDrag: function onDrag(evt) {
return _onDrag(evt, {
dispatch: dispatch,
id: id,
offset: offset,
transform: state.transform
});
},
onStop: function onStop() {
return _onStop({
onNodeDragStop: onNodeDragStop,
id: id,
type: type,
data: data,
position: position
});
},
scale: state.transform[2]
}, React__default.createElement("div", {
className: nodeClasses,
ref: nodeElement,
style: {
zIndex: selected ? 10 : 3,
transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
},
onClick: onNodeClick
style: nodeStyle,
onClick: function onClick(evt) {
return onNodeClick(evt, {
onClick: _onClick,
dispatch: dispatch,
data: data,
id: id,
type: type,
position: position
});
}
}, React__default.createElement(Provider$1, {
value: id
}, React__default.createElement(NodeComponent, _extends({}, props, {
example/build/example.e31bb0bc.js
+115 -66
View File
@@ -41584,6 +41584,80 @@ var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k
};
};
var _onStart = function onStart(evt, _ref) {
var setOffset = _ref.setOffset,
position = _ref.position,
transform = _ref.transform;
if (isInput(evt) || isHandle(evt)) {
return false;
}
var scaledClient = {
x: evt.clientX * (1 / [transform[2]]),
y: evt.clientY * (1 / [transform[2]])
};
var offsetX = scaledClient.x - position.x - [transform[0]];
var offsetY = scaledClient.y - position.y - [transform[1]];
setOffset({
x: offsetX,
y: offsetY
});
};
var _onDrag = function onDrag(evt, _ref2) {
var dispatch = _ref2.dispatch,
id = _ref2.id,
offset = _ref2.offset,
transform = _ref2.transform;
var scaledClient = {
x: evt.clientX * (1 / [transform[2]]),
y: evt.clientY * (1 / [transform[2]])
};
dispatch((0, _actions.updateNodePos)(id, {
x: scaledClient.x - [transform[0]] - offset.x,
y: scaledClient.y - [transform[1]] - offset.y
}));
};
var onNodeClick = function onNodeClick(evt, _ref3) {
var onClick = _ref3.onClick,
dispatch = _ref3.dispatch,
data = _ref3.data,
id = _ref3.id,
type = _ref3.type,
position = _ref3.position;
if (isInput(evt)) {
return false;
}
dispatch((0, _actions.setSelectedElements)({
data: data,
id: id
}));
onClick({
id: id,
type: type,
data: data,
position: position
});
};
var _onStop = function onStop(_ref4) {
var onNodeDragStop = _ref4.onNodeDragStop,
id = _ref4.id,
type = _ref4.type,
data = _ref4.data,
position = _ref4.position;
onNodeDragStop({
id: id,
type: type,
data: data,
position: position
});
};
var _default = function _default(NodeComponent) {
return (0, _react.memo)(function (props) {
var nodeElement = (0, _react.useRef)(null);
@@ -41601,7 +41675,7 @@ var _default = function _default(NodeComponent) {
setOffset = _useState2[1];
var data = props.data,
onClick = props.onClick,
_onClick = props.onClick,
type = props.type,
id = props.id,
__rg = props.__rg,
@@ -41619,6 +41693,10 @@ var _default = function _default(NodeComponent) {
var nodeClasses = (0, _classnames.default)('react-graph__node', {
selected: selected
});
var nodeStyle = {
zIndex: selected ? 10 : 3,
transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
};
(0, _react.useEffect)(function () {
var bounds = nodeElement.current.getBoundingClientRect();
var unscaledWith = Math.round(bounds.width * (1 / k));
@@ -41633,75 +41711,46 @@ var _default = function _default(NodeComponent) {
handleBounds: handleBounds
}));
}, []);
var onStart = function onStart(evt) {
if (isInput(evt) || isHandle(evt)) {
return false;
}
var scaledClient = {
x: evt.clientX * (1 / k),
y: evt.clientY * (1 / k)
};
var offsetX = scaledClient.x - position.x - x;
var offsetY = scaledClient.y - position.y - y;
setOffset({
x: offsetX,
y: offsetY
});
};
var onDrag = function onDrag(evt) {
var scaledClient = {
x: evt.clientX * (1 / k),
y: evt.clientY * (1 / k)
};
dispatch((0, _actions.updateNodePos)(id, {
x: scaledClient.x - x - offset.x,
y: scaledClient.y - y - offset.y
}));
};
var onNodeClick = function onNodeClick(evt) {
if (isInput(evt)) {
return false;
}
dispatch((0, _actions.setSelectedElements)({
data: data,
id: id
}));
onClick({
id: id,
type: type,
data: data,
position: position
});
};
var onStop = function onStop() {
onNodeDragStop({
id: id,
type: type,
data: data,
position: position
});
};
return _react.default.createElement(_reactDraggable.default.DraggableCore, {
grid: [1, 1],
onStart: onStart,
onDrag: onDrag,
onStop: onStop,
scale: k
onStart: function onStart(evt) {
return _onStart(evt, {
setOffset: setOffset,
transform: state.transform,
position: position
});
},
onDrag: function onDrag(evt) {
return _onDrag(evt, {
dispatch: dispatch,
id: id,
offset: offset,
transform: state.transform
});
},
onStop: function onStop() {
return _onStop({
onNodeDragStop: onNodeDragStop,
id: id,
type: type,
data: data,
position: position
});
},
scale: state.transform[2]
}, _react.default.createElement("div", {
className: nodeClasses,
ref: nodeElement,
style: {
zIndex: selected ? 10 : 3,
transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
},
onClick: onNodeClick
style: nodeStyle,
onClick: function onClick(evt) {
return onNodeClick(evt, {
onClick: _onClick,
dispatch: dispatch,
data: data,
id: id,
type: type,
position: position
});
}
}, _react.default.createElement(_NodeIdContext.Provider, {
value: id
}, _react.default.createElement(NodeComponent, _extends({}, props, {
example/build/example.e31bb0bc.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
example/build/index.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/NodeRenderer/NodeTypes/wrapNode.js
+52 -52
View File
@@ -33,6 +33,51 @@ const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
};
};
const onStart = (evt, { setOffset, position, transform }) => {
if (isInput(evt) || isHandle(evt)) {
return false;
}
const scaledClient = {
x: evt.clientX * (1 / [transform[2]]),
y: evt.clientY * (1 / [transform[2]])
}
const offsetX = scaledClient.x - position.x - [transform[0]];
const offsetY = scaledClient.y - position.y - [transform[1]];
setOffset({ x: offsetX, y: offsetY });
};
const onDrag = (evt, { dispatch, id, offset, transform }) => {
const scaledClient = {
x: evt.clientX * (1 / [transform[2]]),
y: evt.clientY * (1 / [transform[2]])
};
dispatch(updateNodePos(id, {
x: scaledClient.x - [transform[0]] - offset.x,
y: scaledClient.y - [transform[1]] - offset.y
}));
};
const onNodeClick = (evt, { onClick, dispatch, data, id, type, position }) => {
if (isInput(evt)) {
return false;
}
dispatch(setSelectedElements({ data, id }));
onClick({ id, type, data, position });
};
const onStop = ({ onNodeDragStop, id, type, data, position }) => {
onNodeDragStop({
id,
type,
data,
position
});
};
export default NodeComponent => memo((props) => {
const nodeElement = useRef(null);
const { state, dispatch } = useContext(GraphContext);
@@ -44,6 +89,7 @@ export default NodeComponent => memo((props) => {
const [ x, y, k ] = state.transform;
const selected = state.selectedElements.filter(isNode).map(e => e.id).includes(id);
const nodeClasses = cx('react-graph__node', { selected });
const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${position.x}px,${position.y}px)` };
useEffect(() => {
const bounds = nodeElement.current.getBoundingClientRect();
@@ -57,64 +103,18 @@ export default NodeComponent => memo((props) => {
dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight, handleBounds }));
}, []);
const onStart = (evt) => {
if (isInput(evt) || isHandle(evt)) {
return false;
}
const scaledClient = {
x: evt.clientX * (1 / k),
y: evt.clientY * (1 / k)
}
const offsetX = scaledClient.x - position.x - x;
const offsetY = scaledClient.y - position.y - y;
setOffset({ x: offsetX, y: offsetY });
};
const onDrag = (evt) => {
const scaledClient = {
x: evt.clientX * (1 / k),
y: evt.clientY * (1 / k)
};
dispatch(updateNodePos(id, {
x: scaledClient.x - x - offset.x,
y: scaledClient.y - y - offset.y
}));
};
const onNodeClick = (evt) => {
if (isInput(evt)) {
return false;
}
dispatch(setSelectedElements({ data, id }));
onClick({ id, type, data, position });
};
const onStop = () => {
onNodeDragStop({
id,
type,
data,
position
});
}
return (
<ReactDraggable.DraggableCore
grid={[1, 1]}
onStart={onStart}
onDrag={onDrag}
onStop={onStop}
scale={k}
onStart={evt => onStart(evt, { setOffset, transform: state.transform, position })}
onDrag={evt => onDrag(evt, { dispatch, id, offset, transform: state.transform })}
onStop={() => onStop({ onNodeDragStop, id, type, data, position })}
scale={state.transform[2]}
>
<div
className={nodeClasses}
ref={nodeElement}
style={{ zIndex: selected ? 10 : 3, transform: `translate(${position.x}px,${position.y}px)` }}
onClick={onNodeClick}
style={nodeStyle}
onClick={evt => onNodeClick(evt, { onClick, dispatch, data, id, type, position })}
>
<Provider value={id}>
<NodeComponent {...props} selected={selected} />