From f330b0c4ee1a7d9eaa89931b0c8de52e14a4501e Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 16 Jul 2019 12:33:05 +0200
Subject: [PATCH] feat(renderer): pass nodeTypes

---
 dist/ReactGraph.js        |  5 ++++-
 example/SimpleGraph.js    | 13 ++++++++++++-
 package.json              |  4 +---
 src/GraphView/index.js    |  2 +-
 src/NodeRenderer/index.js | 17 ++++++++++++++++-
 src/index.js              |  3 ++-
 6 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js
index f846b1a6..85ee547a 100644
--- a/dist/ReactGraph.js
+++ b/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)));
     };
diff --git a/example/SimpleGraph.js b/example/SimpleGraph.js
index 303978b0..3b68aee4 100644
--- a/example/SimpleGraph.js
+++ b/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"
diff --git a/package.json b/package.json
index 3e58760e..513efb3c 100644
--- a/package.json
+++ b/package.json
@@ -41,9 +41,7 @@
     "dev": "parcel example/index.html -d example/build"
   },
   "husky": {
-    "hooks": {
-      "pre-commit": "npm run build"
-    }
+    "hooks": {}
   },
   "files": [
     "dist"
diff --git a/src/GraphView/index.js b/src/GraphView/index.js
index 627724ca..7a0cff33 100644
--- a/src/GraphView/index.js
+++ b/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>
diff --git a/src/NodeRenderer/index.js b/src/NodeRenderer/index.js
index f10b97ae..27478713 100644
--- a/src/NodeRenderer/index.js
+++ b/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
diff --git a/src/index.js b/src/index.js
index 3dc5a514..6137b067 100644
--- a/src/index.js
+++ b/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>