refactor(actions): split up

dist/ReactGraph.js

@@ -30070,20 +30070,6 @@
     }
   };
 
-  var updateTransform = function updateTransform(transform) {
-    return {
-      type: UPDATE_TRANSFORM,
-      payload: {
-        transform: [transform.x, transform.y, transform.k]
-      }
-    };
-  };
-  var updateSize = function updateSize(size) {
-    return {
-      type: UPDATE_SIZE,
-      payload: size
-    };
-  };
   var setNodes = function setNodes(nodes) {
     return {
       type: SET_NODES,
@@ -30118,40 +30104,6 @@
       }
     };
   };
-  var initD3 = function initD3(_ref) {
-    var zoom = _ref.zoom,
-        selection = _ref.selection;
-    return {
-      type: INIT_D3,
-      payload: {
-        d3Zoom: zoom,
-        d3Selection: selection,
-        d3Initialised: true
-      }
-    };
-  };
-  var fitView = function fitView() {
-    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref2$padding = _ref2.padding,
-        padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
-
-    return {
-      type: FIT_VIEW,
-      payload: {
-        padding: padding
-      }
-    };
-  };
-  var zoomIn = function zoomIn() {
-    return {
-      type: ZOOM_IN
-    };
-  };
-  var zoomOut = function zoomOut() {
-    return {
-      type: ZOOM_OUT
-    };
-  };
   var setSelection = function setSelection(isActive) {
     return {
       type: SET_SELECTION,
@@ -30160,9 +30112,9 @@
       }
     };
   };
-  var setNodesSelection = function setNodesSelection(_ref3) {
+  var setNodesSelection = function setNodesSelection(_ref) {
-    var isActive = _ref3.isActive,
+    var isActive = _ref.isActive,
-        selection = _ref3.selection;
+        selection = _ref.selection;
     return {
       type: SET_NODES_SELECTION,
       payload: {
@@ -30172,11 +30124,10 @@
     };
   };
   var setSelectedElements = function setSelectedElements(elements) {
-    var elementsArray = Array.isArray(elements) ? elements : [elements];
     return {
       type: SET_SELECTED_ELEMENTS,
       payload: {
-        selectedElements: elementsArray
+        selectedElements: Array.isArray(elements) ? elements : [elements]
       }
     };
   };
@@ -32879,6 +32830,55 @@
     })));
   });
 
+  var updateTransform = function updateTransform(transform) {
+    return {
+      type: UPDATE_TRANSFORM,
+      payload: {
+        transform: [transform.x, transform.y, transform.k]
+      }
+    };
+  };
+  var updateSize = function updateSize(size) {
+    return {
+      type: UPDATE_SIZE,
+      payload: size
+    };
+  };
+  var initD3 = function initD3(_ref) {
+    var zoom = _ref.zoom,
+        selection = _ref.selection;
+    return {
+      type: INIT_D3,
+      payload: {
+        d3Zoom: zoom,
+        d3Selection: selection,
+        d3Initialised: true
+      }
+    };
+  };
+  var fitView = function fitView() {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref2$padding = _ref2.padding,
+        padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
+
+    return {
+      type: FIT_VIEW,
+      payload: {
+        padding: padding
+      }
+    };
+  };
+  var zoomIn = function zoomIn() {
+    return {
+      type: ZOOM_IN
+    };
+  };
+  var zoomOut = function zoomOut() {
+    return {
+      type: ZOOM_OUT
+    };
+  };
+
   function useKeyPress(targetKey) {
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),

example/build/example.e31bb0bc.js

@@ -37973,30 +37973,10 @@ exports.reducer = reducer;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateSelection = exports.removeNodes = exports.setSelectedElements = exports.setNodesSelection = exports.setSelection = exports.zoomOut = exports.zoomIn = exports.fitView = exports.initD3 = exports.updateNodePos = exports.updateNodeData = exports.setEdges = exports.setNodes = exports.updateSize = exports.updateTransform = void 0;
+exports.updateSelection = exports.removeNodes = exports.setSelectedElements = exports.setNodesSelection = exports.setSelection = exports.updateNodePos = exports.updateNodeData = exports.setEdges = exports.setNodes = void 0;
 
 var _index = require("./index");
 
-var updateTransform = function updateTransform(transform) {
-  return {
-    type: _index.UPDATE_TRANSFORM,
-    payload: {
-      transform: [transform.x, transform.y, transform.k]
-    }
-  };
-};
-
-exports.updateTransform = updateTransform;
-
-var updateSize = function updateSize(size) {
-  return {
-    type: _index.UPDATE_SIZE,
-    payload: size
-  };
-};
-
-exports.updateSize = updateSize;
-
 var setNodes = function setNodes(nodes) {
   return {
     type: _index.SET_NODES,
@@ -38043,52 +38023,6 @@ var updateNodePos = function updateNodePos(id, pos) {
 
 exports.updateNodePos = updateNodePos;
 
-var initD3 = function initD3(_ref) {
-  var zoom = _ref.zoom,
-      selection = _ref.selection;
-  return {
-    type: _index.INIT_D3,
-    payload: {
-      d3Zoom: zoom,
-      d3Selection: selection,
-      d3Initialised: true
-    }
-  };
-};
-
-exports.initD3 = initD3;
-
-var fitView = function fitView() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref2$padding = _ref2.padding,
-      padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
-
-  return {
-    type: _index.FIT_VIEW,
-    payload: {
-      padding: padding
-    }
-  };
-};
-
-exports.fitView = fitView;
-
-var zoomIn = function zoomIn() {
-  return {
-    type: _index.ZOOM_IN
-  };
-};
-
-exports.zoomIn = zoomIn;
-
-var zoomOut = function zoomOut() {
-  return {
-    type: _index.ZOOM_OUT
-  };
-};
-
-exports.zoomOut = zoomOut;
-
 var setSelection = function setSelection(isActive) {
   return {
     type: _index.SET_SELECTION,
@@ -38100,9 +38034,9 @@ var setSelection = function setSelection(isActive) {
 
 exports.setSelection = setSelection;
 
-var setNodesSelection = function setNodesSelection(_ref3) {
+var setNodesSelection = function setNodesSelection(_ref) {
-  var isActive = _ref3.isActive,
+  var isActive = _ref.isActive,
-      selection = _ref3.selection;
+      selection = _ref.selection;
   return {
     type: _index.SET_NODES_SELECTION,
     payload: {
@@ -38115,11 +38049,10 @@ var setNodesSelection = function setNodesSelection(_ref3) {
 exports.setNodesSelection = setNodesSelection;
 
 var setSelectedElements = function setSelectedElements(elements) {
-  var elementsArray = Array.isArray(elements) ? elements : [elements];
   return {
     type: _index.SET_SELECTED_ELEMENTS,
     payload: {
-      selectedElements: elementsArray
+      selectedElements: Array.isArray(elements) ? elements : [elements]
     }
   };
 };
@@ -38127,11 +38060,10 @@ var setSelectedElements = function setSelectedElements(elements) {
 exports.setSelectedElements = setSelectedElements;
 
 var removeNodes = function removeNodes(ids) {
-  var idArray = Array.isArray(ids) ? ids : [ids];
   return {
     type: _index.REMOVE_NODES,
     payload: {
-      ids: idArray
+      ids: Array.isArray(ids) ? ids : [ids]
     }
   };
 };
@@ -41020,7 +40952,82 @@ var _default = (0, _react.memo)(function () {
 });
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","react-draggable":"../node_modules/react-draggable/dist/react-draggable.js","../GraphContext":"../src/GraphContext/index.js","../graph-utils":"../src/graph-utils.js","../state/actions":"../src/state/actions.js"}],"../src/hooks.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","react-draggable":"../node_modules/react-draggable/dist/react-draggable.js","../GraphContext":"../src/GraphContext/index.js","../graph-utils":"../src/graph-utils.js","../state/actions":"../src/state/actions.js"}],"../src/state/view-actions.js":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.zoomOut = exports.zoomIn = exports.fitView = exports.initD3 = exports.updateSize = exports.updateTransform = void 0;
+
+var _index = require("./index");
+
+var updateTransform = function updateTransform(transform) {
+  return {
+    type: _index.UPDATE_TRANSFORM,
+    payload: {
+      transform: [transform.x, transform.y, transform.k]
+    }
+  };
+};
+
+exports.updateTransform = updateTransform;
+
+var updateSize = function updateSize(size) {
+  return {
+    type: _index.UPDATE_SIZE,
+    payload: size
+  };
+};
+
+exports.updateSize = updateSize;
+
+var initD3 = function initD3(_ref) {
+  var zoom = _ref.zoom,
+      selection = _ref.selection;
+  return {
+    type: _index.INIT_D3,
+    payload: {
+      d3Zoom: zoom,
+      d3Selection: selection,
+      d3Initialised: true
+    }
+  };
+};
+
+exports.initD3 = initD3;
+
+var fitView = function fitView() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref2$padding = _ref2.padding,
+      padding = _ref2$padding === void 0 ? 0 : _ref2$padding;
+
+  return {
+    type: _index.FIT_VIEW,
+    payload: {
+      padding: padding
+    }
+  };
+};
+
+exports.fitView = fitView;
+
+var zoomIn = function zoomIn() {
+  return {
+    type: _index.ZOOM_IN
+  };
+};
+
+exports.zoomIn = zoomIn;
+
+var zoomOut = function zoomOut() {
+  return {
+    type: _index.ZOOM_OUT
+  };
+};
+
+exports.zoomOut = zoomOut;
+},{"./index":"../src/state/index.js"}],"../src/hooks.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -41100,6 +41107,8 @@ var _NodesSelection = _interopRequireDefault(require("../NodesSelection"));
 
 var _actions = require("../state/actions");
 
+var _viewActions = require("../state/view-actions");
+
 var _hooks = require("../hooks");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41117,7 +41126,7 @@ var GraphView = (0, _react.memo)(function (props) {
   var shiftPressed = (0, _hooks.useKeyPress)('Shift');
   (0, _react.useEffect)(function () {
     var selection = (0, _d3Selection.select)(zoomPane.current).call(d3ZoomInstance);
-    dispatch((0, _actions.initD3)({
+    dispatch((0, _viewActions.initD3)({
       zoom: d3ZoomInstance,
       selection: selection
     }));
@@ -41131,7 +41140,7 @@ var GraphView = (0, _react.memo)(function (props) {
           return false;
         }
 
-        dispatch((0, _actions.updateTransform)(_d3Selection.event.transform));
+        dispatch((0, _viewActions.updateTransform)(_d3Selection.event.transform));
         props.onMove();
       });
 
@@ -41143,7 +41152,7 @@ var GraphView = (0, _react.memo)(function (props) {
     }
   }, [shiftPressed]);
   (0, _react.useEffect)(function () {
-    return dispatch((0, _actions.updateSize)(props.size));
+    return dispatch((0, _viewActions.updateSize)(props.size));
   }, [props.size.width, props.size.height]);
   (0, _react.useEffect)(function () {
     if (state.d3Initialised) {
@@ -41151,13 +41160,13 @@ var GraphView = (0, _react.memo)(function (props) {
         nodes: state.nodes,
         edges: state.edges,
         fitView: function fitView(opts) {
-          return dispatch((0, _actions.fitView)(opts));
+          return dispatch((0, _viewActions.fitView)(opts));
         },
         zoomIn: function zoomIn() {
-          return dispatch((0, _actions.zoomIn)());
+          return dispatch((0, _viewActions.zoomIn)());
         },
         zoomOut: function zoomOut() {
-          return dispatch((0, _actions.zoomOut)());
+          return dispatch((0, _viewActions.zoomOut)());
         }
       });
     }
@@ -41199,7 +41208,7 @@ var _default = _reactSizeme.default.withSize({
 })(GraphView);
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","d3-zoom":"../node_modules/d3-zoom/src/index.js","d3-selection":"../node_modules/d3-selection/src/index.js","react-sizeme":"../node_modules/react-sizeme/dist/react-sizeme.js","../ConnectionContext":"../src/ConnectionContext/index.js","../GraphContext":"../src/GraphContext/index.js","../NodeRenderer":"../src/NodeRenderer/index.js","../EdgeRenderer":"../src/EdgeRenderer/index.js","../UserSelection":"../src/UserSelection/index.js","../NodesSelection":"../src/NodesSelection/index.js","../state/actions":"../src/state/actions.js","../hooks":"../src/hooks.js"}],"../src/GlobalKeyHandler/index.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","d3-zoom":"../node_modules/d3-zoom/src/index.js","d3-selection":"../node_modules/d3-selection/src/index.js","react-sizeme":"../node_modules/react-sizeme/dist/react-sizeme.js","../ConnectionContext":"../src/ConnectionContext/index.js","../GraphContext":"../src/GraphContext/index.js","../NodeRenderer":"../src/NodeRenderer/index.js","../EdgeRenderer":"../src/EdgeRenderer/index.js","../UserSelection":"../src/UserSelection/index.js","../NodesSelection":"../src/NodesSelection/index.js","../state/actions":"../src/state/actions.js","../state/view-actions":"../src/state/view-actions.js","../hooks":"../src/hooks.js"}],"../src/GlobalKeyHandler/index.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {

src/GraphView/index.js

@@ -9,10 +9,11 @@ import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import UserSelection from '../UserSelection';
 import NodesSelection from '../NodesSelection';
+import { setNodesSelection } from '../state/actions';
 import {
   updateTransform, updateSize, initD3, fitView,
-  zoomIn, zoomOut, setNodesSelection
+  zoomIn, zoomOut
-} from '../state/actions';
+} from '../state/view-actions';
 import { useKeyPress } from '../hooks';
 
 const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2]);

src/state/actions.js

@@ -1,101 +1,52 @@
 import {
-  UPDATE_TRANSFORM, UPDATE_SIZE, SET_NODES, SET_EDGES,
+  SET_NODES, SET_EDGES, UPDATE_NODE_DATA, UPDATE_NODE_POS,
-  UPDATE_NODE_DATA, UPDATE_NODE_POS, INIT_D3, FIT_VIEW,
   UPDATE_SELECTION, SET_SELECTION, SET_NODES_SELECTION,
-  SET_SELECTED_ELEMENTS, REMOVE_NODES, ZOOM_IN, ZOOM_OUT
+  SET_SELECTED_ELEMENTS, REMOVE_NODES,
 } from './index';
 
-export const updateTransform = (transform) => {
+export const setNodes = nodes => ({
-  return {
+  type: SET_NODES,
-    type: UPDATE_TRANSFORM,
+  payload: { nodes }
-    payload: { transform: [transform.x, transform.y, transform.k] }
+});
-  };
-};
 
-export const updateSize = (size) => {
+export const setEdges = edges => ({
-  return {
+  type: SET_EDGES,
-    type: UPDATE_SIZE,
+  payload: { edges }
-    payload: size
+});
-  };
-};
 
-export const setNodes = (nodes) => {
+export const updateNodeData = (id, data) => ({
-  return {
+  type: UPDATE_NODE_DATA,
-    type: SET_NODES,
+  payload: { id, data }
-    payload: { nodes }
+});
-  };
-};
 
-export const setEdges = (edges) => {
+export const updateNodePos = (id, pos) => ({
-  return {
+  type: UPDATE_NODE_POS,
-    type: SET_EDGES,
+  payload: { id, pos }
-    payload: { edges }
+});
-  };
-};
 
-export const updateNodeData = (id, data) => {
+export const setSelection = isActive => ({
-  return {
+ type: SET_SELECTION,
-    type: UPDATE_NODE_DATA,
+ payload: { selectionActive: isActive }
-    payload: { id, data }
+});
-  };
-};
 
-export const updateNodePos = (id, pos) => {
+export const setNodesSelection = ({ isActive, selection }) => ({
-  return {
+  type: SET_NODES_SELECTION,
-    type: UPDATE_NODE_POS,
+  payload: { nodesSelectionActive: isActive, selection }
-    payload: { id, pos }
+});
-  };
-};
 
-export const initD3 = ({ zoom, selection }) => {
+export const setSelectedElements = elements => ({
-  return {
+  type: SET_SELECTED_ELEMENTS,
-    type: INIT_D3,
+  payload: {
-    payload: { d3Zoom: zoom, d3Selection: selection, d3Initialised: true }
+    selectedElements: Array.isArray(elements) ? elements : [elements]
-  };
+  }
-};
+});
 
-export const fitView = ({ padding = 0 } = {}) => {
+export const removeNodes = ids => ({
-  return { type: FIT_VIEW, payload: { padding } };
+  type: REMOVE_NODES,
-};
+  payload: { ids:  Array.isArray(ids) ? ids : [ids] }
+});
 
-export const zoomIn = () => {
+export const updateSelection = selection => ({
-  return { type: ZOOM_IN };
+  type: UPDATE_SELECTION,
-};
+  payload: { selection }
-
+});
-export const zoomOut = () => {
-  return { type: ZOOM_OUT };
-};
-
-export const setSelection = (isActive) => {
-  return { type: SET_SELECTION, payload: { selectionActive: isActive } };
-};
-
-export const setNodesSelection = ({ isActive, selection }) => {
-  return { type: SET_NODES_SELECTION, payload: { nodesSelectionActive: isActive, selection } };
-};
-
-export const setSelectedElements = (elements) => {
-  const elementsArray = Array.isArray(elements) ? elements : [elements];
-
-  return {
-    type: SET_SELECTED_ELEMENTS,
-    payload: {
-      selectedElements: elementsArray
-    }
-  };
-};
-
-export const removeNodes = (ids) => {
-  const idArray = Array.isArray(ids) ? ids : [ids];
-
-  return { type: REMOVE_NODES, payload: { ids: idArray } };
-};
-
-export const updateSelection = (selection) => {
-  return {
-    type: UPDATE_SELECTION,
-    payload: {
-      selection
-    }
-  };
-};

src/state/view-actions.js

@@ -0,0 +1,32 @@
+import {
+  UPDATE_TRANSFORM, UPDATE_SIZE, INIT_D3,
+  FIT_VIEW, ZOOM_IN, ZOOM_OUT
+} from './index';
+
+export const updateTransform = transform => ({
+  type: UPDATE_TRANSFORM,
+  payload: { transform: [transform.x, transform.y, transform.k] }
+});
+
+export const updateSize = size => ({
+  type: UPDATE_SIZE,
+  payload: size
+});
+
+export const initD3 = ({ zoom, selection }) => ({
+  type: INIT_D3,
+  payload: { d3Zoom: zoom, d3Selection: selection, d3Initialised: true }
+});
+
+export const fitView = ({ padding = 0 } = {}) => ({
+  type: FIT_VIEW,
+  payload: { padding }
+});
+
+export const zoomIn = () => ({
+  type: ZOOM_IN
+});
+
+export const zoomOut = () => ({
+  type: ZOOM_OUT
+});