refactor(app): folder structure, components cleanup

package.json

@@ -6,37 +6,37 @@
   "main": "dist/ReactGraph.js",
   "private": true,
   "dependencies": {
-    "@welldone-software/why-did-you-render": "^3.2.3",
+    "@welldone-software/why-did-you-render": "^3.3.6",
     "classnames": "^2.2.6",
     "d3-selection": "^1.4.0",
-    "d3-zoom": "^1.7.3",
-    "easy-peasy": "^3.0.2",
-    "fast-deep-equal": "^3.0.0-beta.1",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-draggable": "^3.3.0",
+    "d3-zoom": "^1.8.3",
+    "easy-peasy": "^3.1.0",
+    "fast-deep-equal": "^3.0.0-beta.2",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "react-draggable": "^3.3.2",
     "scheduler": "^0.15.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.4",
-    "@babel/preset-env": "^7.5.4",
+    "@babel/core": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
     "@babel/preset-react": "^7.0.0",
-    "autoprefixer": "^9.6.1",
+    "autoprefixer": "^9.6.4",
     "babel-loader": "^8.0.6",
-    "babel-preset-react-app": "^9.0.0",
+    "babel-preset-react-app": "^9.0.2",
     "cypress": "^3.4.1",
-    "husky": "^3.0.0",
-    "parcel-bundler": "^1.12.3",
+    "husky": "^3.0.8",
+    "parcel-bundler": "^1.12.4",
     "postcss-nested": "^4.1.2",
-    "rollup": "^1.16.2",
+    "rollup": "^1.23.1",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-bundle-size": "^1.0.3",
-    "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-livereload": "^1.0.1",
-    "rollup-plugin-node-resolve": "^5.1.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-livereload": "^1.0.4",
+    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-serve": "^1.0.1",
-    "start-server-and-test": "^1.10.2",
+    "start-server-and-test": "^1.10.4",
     "wait-on": "^3.3.0"
   },
   "peerDependencies": {

src/ReactGraph/index.js

@@ -6,28 +6,26 @@ if (process.env.NODE_ENV !== 'production') {
   whyDidYouRender(React);
 }
 
-import GraphView from '../GraphView';
-import GlobalKeyHandler from '../GlobalKeyHandler';
+import GraphView from '../container/GraphView';
 
-import DefaultNode from '../NodeRenderer/NodeTypes/DefaultNode';
-import InputNode from '../NodeRenderer/NodeTypes/InputNode';
-import OutputNode from '../NodeRenderer/NodeTypes/OutputNode';
-import { createNodeTypes } from '../NodeRenderer/utils';
+import DefaultNode from '../components/Nodes/DefaultNode';
+import InputNode from '../components/Nodes/InputNode';
+import OutputNode from '../components/Nodes/OutputNode';
+import { createNodeTypes } from '../container/NodeRenderer/utils';
 
-import BezierEdge from '../EdgeRenderer/EdgeTypes/BezierEdge';
-import StraightEdge from '../EdgeRenderer/EdgeTypes/StraightEdge';
-import StepEdge from '../EdgeRenderer/EdgeTypes/StepEdge';
-import { createEdgeTypes } from '../EdgeRenderer/utils';
+import BezierEdge from '../components/Edges/BezierEdge';
+import StraightEdge from '../components/Edges/StraightEdge';
+import StepEdge from '../components/Edges/StepEdge';
+import { createEdgeTypes } from '../container/EdgeRenderer/utils';
 import store from '../store';
-import ElementUpdater from './ElementUpdater';
 
 import '../style.css';
 
 const ReactGraph = ({
   style, onElementClick, elements, children,
-  nodeTypes, edgeTypes, onLoad, onMove, onElementsRemove,
-  onConnect, onNodeDragStop, connectionLineType, connectionLineStyle,
-  deleteKeyCode, selectionKeyCode
+  nodeTypes, edgeTypes, onLoad, onMove,
+  onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
+  connectionLineStyle, deleteKeyCode, selectionKeyCode
 }) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -35,7 +33,6 @@ const ReactGraph = ({
   return (
     <div style={style} className="react-graph">
       <StoreProvider store={store}>
-        <ElementUpdater elements={elements} onConnect={onConnect} />
         <GraphView
           onLoad={onLoad}
           onMove={onMove}
@@ -46,10 +43,10 @@ const ReactGraph = ({
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
           selectionKeyCode={selectionKeyCode}
-        />
-        <GlobalKeyHandler
           onElementsRemove={onElementsRemove}
           deleteKeyCode={deleteKeyCode}
+          elements={elements}
+          onConnect={onConnect}
         />
         {children}
       </StoreProvider>

src/components/ConnectionLine/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, memo } from 'react';
+import React, { useEffect, useState } from 'react';
 import cx from 'classnames';
 
 export default (props) => {

src/components/Handle/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useStoreActions, useStoreState } from 'easy-peasy';
 
 import BaseHandle from './BaseHandle';
-import NodeIdContext from '../NodeIdContext'
+import NodeIdContext from '../../contexts/NodeIdContext'
 
 const Handle = memo(({ onConnect, ...rest }) => {
   const nodeId = useContext(NodeIdContext);

src/components/Nodes/DefaultNode.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Handle from '../HandleTypes/Handle';
+import Handle from '../../components/Handle';
 
 const nodeStyles = {
   background: '#ff6060',

src/components/Nodes/InputNode.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Handle from '../HandleTypes/Handle';
+import Handle from '../../components/Handle';
 
 const nodeStyles = {
   background: '#9999ff',

src/components/Nodes/OutputNode.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Handle from '../HandleTypes/Handle';
+import Handle from '../../components/Handle';
 
 const nodeStyles = {
   background: '#55dd99',

src/components/Nodes/wrapNode.js

@@ -3,7 +3,7 @@ import ReactDraggable from 'react-draggable';
 import cx from 'classnames';
 
 import { getDimensions, isInputNode } from '../../utils';
-import { Provider } from '../NodeIdContext';
+import { Provider } from '../../contexts/NodeIdContext';
 import store from '../../store';
 
 const isHandle = e => (

src/components/NodesSelection/index.js

@@ -2,7 +2,7 @@ import React, { useState, memo } from 'react';
 import ReactDraggable from 'react-draggable';
 import { useStoreState, useStoreActions } from 'easy-peasy';
 
-import { isNode } from '../graph-utils';
+import { isNode } from '../../graph-utils';
 
 function getStartPositions(elements) {
   return elements

src/container/EdgeRenderer/index.js

@@ -1,8 +1,8 @@
 import React, { memo } from 'react';
 import { useStoreState } from 'easy-peasy';
 
-import ConnectionLine from '../ConnectionLine';
-import { isEdge } from '../graph-utils';
+import ConnectionLine from '../../components/ConnectionLine';
+import { isEdge } from '../../graph-utils';
 
 function getHandlePosition(position, node, handle = null) {
   if (!handle) {

src/container/EdgeRenderer/utils.js

@@ -1,6 +1,6 @@
-import StraightEdge from './EdgeTypes/StraightEdge';
-import BezierEdge from './EdgeTypes/BezierEdge';
-import wrapEdge from './EdgeTypes/wrapEdge';
+import StraightEdge from '../../components/Edges/StraightEdge';
+import BezierEdge from '../../components/Edges/BezierEdge';
+import wrapEdge from '../../components/Edges/wrapEdge';
 
 export function createEdgeTypes(edgeTypes) {
   const standardTypes = {

src/container/GraphView/index.js

@@ -3,17 +3,20 @@ import { useStoreState, useStoreActions } from 'easy-peasy';
 
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
-import UserSelection from '../UserSelection';
-import NodesSelection from '../NodesSelection';
-import useKeyPress from '../hooks/useKeyPress';
-import useD3Zoom from '../hooks/useD3Zoom';
-import { getDimensions } from '../utils';
-import { fitView, zoomIn, zoomOut } from '../graph-utils';
+import UserSelection from '../../components/UserSelection';
+import NodesSelection from '../../components/NodesSelection';
+import useKeyPress from '../../hooks/useKeyPress';
+import useD3Zoom from '../../hooks/useD3Zoom';
+import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
+import useElementUpdater from '../../hooks/useElementUpdater'
+import { getDimensions } from '../../utils';
+import { fitView, zoomIn, zoomOut } from '../../graph-utils';
 
 const GraphView = memo(({
   nodeTypes, edgeTypes, onMove, onLoad,
   onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle,
-  selectionKeyCode
+  selectionKeyCode, onElementsRemove, deleteKeyCode, elements,
+  onConnect
 }) => {
   const zoomPane = useRef();
   const rendererNode = useRef();
@@ -27,8 +30,11 @@ const GraphView = memo(({
   }));
   const updateSize = useStoreActions(actions => actions.updateSize);
   const setNodesSelection = useStoreActions(actions => actions.setNodesSelection);
-
+  const setOnConnect = useStoreActions(a => a.setOnConnect);
   const selectionKeyPressed = useKeyPress(selectionKeyCode);
+
+  const onZoomPaneClick = () => setNodesSelection({ isActive: false });
+
   const updateDimensions = () => {
     const size = getDimensions(rendererNode.current);
     updateSize(size);
@@ -36,6 +42,7 @@ const GraphView = memo(({
 
   useEffect(() => {
     updateDimensions();
+    setOnConnect(onConnect);
     window.onresize = updateDimensions;
 
     return () => {
@@ -55,6 +62,9 @@ const GraphView = memo(({
     }
   }, [state.d3Initialised]);
 
+  useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
+  useElementUpdater({ elements });
+
   return (
     <div className="react-graph__renderer" ref={rendererNode}>
       <NodeRenderer
@@ -74,7 +84,7 @@ const GraphView = memo(({
       {state.nodesSelectionActive && <NodesSelection />}
       <div
         className="react-graph__zoompane"
-        onClick={() => setNodesSelection({ isActive: false })}
+        onClick={onZoomPaneClick}
         ref={zoomPane}
       />
     </div>

src/container/NodeRenderer/index.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { useStoreState } from 'easy-peasy';
 
-import { isNode } from '../graph-utils';
+import { isNode } from '../../graph-utils';
 
 function renderNode(d, props, state) {
   const nodeType = d.type || 'default';

src/container/NodeRenderer/utils.js

@@ -1,7 +1,7 @@
-import DefaultNode from './NodeTypes/DefaultNode';
-import InputNode from './NodeTypes/InputNode';
-import OutputNode from './NodeTypes/OutputNode';
-import wrapNode from './NodeTypes/wrapNode';
+import DefaultNode from '../../components/Nodes/DefaultNode';
+import InputNode from '../../components/Nodes/InputNode';
+import OutputNode from '../../components/Nodes/OutputNode';
+import wrapNode from '../../components/Nodes/wrapNode';
 
 export function createNodeTypes(nodeTypes) {
   const standardTypes = {

src/hooks/useElementUpdater.js

@@ -1,10 +1,10 @@
-import { useEffect, memo } from 'react';
+import { useEffect } from 'react';
 import { useStoreState, useStoreActions } from 'easy-peasy';
 import isEqual from 'fast-deep-equal';
 
 import { parseElement, isNode, isEdge } from '../graph-utils';
 
-const ElementUpdater = (props) => {
+const useElementUpdater = ({ elements }) => {
   const state = useStoreState(s => ({
     nodes: s.nodes,
     edges: s.edges,
@@ -13,11 +13,10 @@ const ElementUpdater = (props) => {
 
   const setNodes = useStoreActions(a => a.setNodes);
   const setEdges = useStoreActions(a => a.setEdges);
-  const setOnConnect = useStoreActions(a => a.setOnConnect);
 
   useEffect(() => {
-    const nodes = props.elements.filter(isNode);
-    const edges = props.elements.filter(isEdge).map(parseElement);
+    const nodes = elements.filter(isNode);
+    const edges = elements.filter(isEdge).map(parseElement);
 
     const nextNodes = nodes.map(propNode => {
       const existingNode = state.nodes.find(n => n.id === propNode.id);
@@ -47,13 +46,7 @@ const ElementUpdater = (props) => {
     }
   });
 
-  useEffect(() => {
-    setOnConnect(props.onConnect);
-  }, []);
-
   return null;
 };
 
-ElementUpdater.displayName = 'ElementUpdater';
-
-export default memo(ElementUpdater);
+export default useElementUpdater;

src/hooks/useGlobalKeyHandler.js

@@ -1,10 +1,10 @@
-import { useEffect, memo } from 'react';
+import { useEffect } from 'react';
 import { useStoreState, useStoreActions } from 'easy-peasy';
 
-import useKeyPress from '../hooks/useKeyPress';
+import useKeyPress from './useKeyPress';
 import { isEdge, getConnectedEdges } from '../graph-utils';
 
-export default memo(({ deleteKeyCode, onElementsRemove }) => {
+export default ({ deleteKeyCode, onElementsRemove }) => {
   const state = useStoreState(s => ({ selectedElements: s.selectedElements, edges: s.edges }))
   const setNodesSelection = useStoreActions(a => a.setNodesSelection);
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
@@ -25,4 +25,4 @@ export default memo(({ deleteKeyCode, onElementsRemove }) => {
   }, [deleteKeyPressed])
 
   return null;
-});
+};

src/index.js

@@ -2,8 +2,8 @@ import ReactGraph from './ReactGraph';
 
 export default ReactGraph;
 
-export { default as Handle } from './NodeRenderer/HandleTypes/Handle';
-export { default as MiniMap } from './Plugins/MiniMap';
+export { default as Handle } from './components/Handle';
+export { default as MiniMap } from './plugins/MiniMap';
 
 export {
   isNode,