feat(renderer): pass nodeTypes

dist/ReactGraph.js

@@ -32218,7 +32218,10 @@
           transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
         },
         onClick: function onClick() {
-          return onNodeClick(data);
+          return onNodeClick({
+            data: data,
+            position: position
+          });
         }
       }, React__default.createElement(NodeComponent, props)));
     };

example/SimpleGraph.js

@@ -1,8 +1,14 @@
 import React, { PureComponent } from 'react';
 
 import Graph from '../src';
+import wrapNode from '../src/NodeRenderer/NodeTypes/wrapNode';
+
 // import Graph from '../dist/ReactGraph';
 
+const SpecialNode = wrapNode(({ data }) =>
+  <div>I am Special!<br />{data.label}</div>
+);
+
 class App extends PureComponent {
   constructor() {
     super();
@@ -14,10 +20,12 @@ class App extends PureComponent {
         { data: { id: '3', label: 'This is a node' }, position: { x: 100, y: 200 }, style: { background: '#222', color: '#fff' } },
         { data: { id: '4', label: 'nody nodes', type: 'output' }, position: { x: 50, y: 300 } },
         { data: { id: '5', label: 'Another node', type: 'output' }, position: { x: 400, y: 300 } },
+        { data: { id: '6', label: 'A label', type: 'special' }, position: { x: 400, y: 400 } },
         { data: { source: '1', target: '2' } },
         { data: { source: '2', target: '3' } },
         { data: { source: '3', target: '4' } },
-        { data: { source: '3', target: '5' } }
+        { data: { source: '3', target: '5' } },
+        { data: { source: '5', target: '6' } }
       ]
     }
   }
@@ -57,6 +65,9 @@ class App extends PureComponent {
         style={{ width: '100%', height: '100%' }}
         onLoad={graphInstance => this.onLoad(graphInstance)}
         onChange={(elements) => this.onChange(elements)}
+        nodeTypes={{
+          special: SpecialNode
+        }}
       >
         <button
           type="button"

package.json

@@ -41,9 +41,7 @@
     "dev": "parcel example/index.html -d example/build"
   },
   "husky": {
-    "hooks": {
+    "hooks": {}
-      "pre-commit": "npm run build"
-    }
   },
   "files": [
     "dist"

src/GraphView/index.js

@@ -54,7 +54,7 @@ const GraphView = (props) => {
 
   return (
     <div className="react-graph__renderer">
-      <NodeRenderer />
+      <NodeRenderer nodeTypes={props.nodeTypes} />
       <EdgeRenderer width={graphContext.state.width} height={graphContext.state.height} />
       <div className="react-graph__zoomnode" ref={zoomNode} />
     </div>

src/NodeRenderer/index.js

@@ -9,7 +9,22 @@ class NodeRenderer extends PureComponent {
 
   renderNode(d, onNodeClick) {
     const nodeType = d.data.type || 'default';
-    const NodeComponent = this.props.nodeTypes[nodeType] || DefaultNode;
+    let NodeComponent = null;
+
+    switch (nodeType) {
+      case 'input': {
+        NodeComponent = this.props.nodeTypes.input || InputNode; break;
+      }
+      case 'default': {
+        NodeComponent = this.props.nodeTypes.default || DefaultNode; break;
+      }
+      case 'output': {
+        NodeComponent = this.props.nodeTypes.output || OutputNode; break;
+      }
+      default: {
+        NodeComponent = this.props.nodeTypes[nodeType] || DefaultNode;
+      }
+    }
 
     return (
       <NodeComponent

src/index.js

@@ -9,7 +9,7 @@ import './style.css';
 class ReactGraph extends PureComponent {
   render() {
     const {
-      style, onNodeClick, children, onLoad, onMove, onChange, elements
+      style, onNodeClick, children, onLoad, onMove, onChange, elements, nodeTypes
     } = this.props;
 
     const { nodes, edges } = separateElements(elements);
@@ -21,6 +21,7 @@ class ReactGraph extends PureComponent {
             onLoad={onLoad}
             onMove={onMove}
             onChange={onChange}
+            nodeTypes={nodeTypes}
           />
           {children}
         </Provider>