refactor(nodeWrap): outsource event handler

dist/ReactGraph.js

@@ -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: function onStart(evt) {
-        onStart: onStart,
+          return _onStart(evt, {
-        onDrag: onDrag,
+            setOffset: setOffset,
-        onStop: onStop,
+            transform: state.transform,
-        scale: k
+            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: {
+        style: nodeStyle,
-          zIndex: selected ? 10 : 3,
+        onClick: function onClick(evt) {
-          transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
+          return onNodeClick(evt, {
-        },
+            onClick: _onClick,
-        onClick: onNodeClick
+            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

@@ -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: function onStart(evt) {
-      onStart: onStart,
+        return _onStart(evt, {
-      onDrag: onDrag,
+          setOffset: setOffset,
-      onStop: onStop,
+          transform: state.transform,
-      scale: k
+          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: {
+      style: nodeStyle,
-        zIndex: selected ? 10 : 3,
+      onClick: function onClick(evt) {
-        transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
+        return onNodeClick(evt, {
-      },
+          onClick: _onClick,
-      onClick: onNodeClick
+          dispatch: dispatch,
+          data: data,
+          id: id,
+          type: type,
+          position: position
+        });
+      }
     }, _react.default.createElement(_NodeIdContext.Provider, {
       value: id
     }, _react.default.createElement(NodeComponent, _extends({}, props, {

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -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={evt => onStart(evt, { setOffset, transform: state.transform, position })}
-      onStart={onStart}
+      onDrag={evt => onDrag(evt, { dispatch, id, offset, transform: state.transform })}
-      onDrag={onDrag}
+      onStop={() => onStop({ onNodeDragStop, id, type, data, position })}
-      onStop={onStop}
+      scale={state.transform[2]}
-      scale={k}
     >
       <div
         className={nodeClasses}
         ref={nodeElement}
-        style={{ zIndex: selected ? 10 : 3, transform: `translate(${position.x}px,${position.y}px)` }}
+        style={nodeStyle}
-        onClick={onNodeClick}
+        onClick={evt => onNodeClick(evt, { onClick, dispatch, data, id, type, position })}
       >
         <Provider value={id}>
           <NodeComponent {...props} selected={selected} />