feat(nodetypes): custome types

example/SimpleGraph.js

@@ -1,13 +1,11 @@
 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 }) =>
+const SpecialNode = ({ data }) =>
   <div>I am Special!<br />{data.label}</div>
-);
+;
 
 class App extends PureComponent {
   constructor() {
@@ -27,7 +25,7 @@ class App extends PureComponent {
         { data: { source: '3', target: '5' } },
         { data: { source: '5', target: '6' } }
       ]
-    }
+    };
   }
 
   onLoad(graphInstance) {

src/NodeRenderer/NodeTypes/DefaultNode.js

@@ -1,12 +1,11 @@
 import React from 'react';
 
-import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-export default wrapNode(({ data, style }) => (
+export default ({ data, style }) => (
   <div style={{ background: '#ff6060', padding: '10px', ...style }}>
     <Handle style={{ top: 0 }} />
     {data.label}
     <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
   </div>
-));
+);

src/NodeRenderer/NodeTypes/InputNode.js

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-export default wrapNode(({ data, style }) => (
+export default ({ data, style }) => (
   <div style={{ background: '#9999ff', padding: '10px', ...style }}>
     {data.label}
     <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
   </div>
-));
+);

src/NodeRenderer/NodeTypes/OutputNode.js

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-export default wrapNode(({ data, style }) => (
+export default ({ data, style }) => (
   <div style={{ background: '#55ff99', padding: '10px', ...style }}>
     <Handle style={{ top: 0 }} />
     {data.label}
   </div>
-));
+);

src/NodeRenderer/index.js

@@ -1,30 +1,11 @@
 import React, { PureComponent } from 'react';
 
 import { Consumer } from '../GraphContext';
-import DefaultNode from './NodeTypes/DefaultNode';
-import InputNode from './NodeTypes/InputNode';
-import OutputNode from './NodeTypes/OutputNode';
-
 class NodeRenderer extends PureComponent {
 
   renderNode(d, onNodeClick) {
     const nodeType = d.data.type || 'default';
-    let NodeComponent = null;
+    const NodeComponent = this.props.nodeTypes[nodeType];
-
-    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
@@ -55,12 +36,4 @@ class NodeRenderer extends PureComponent {
   }
 }
 
-NodeRenderer.defaultProps = {
-  nodeTypes: {
-    input: InputNode,
-    default: DefaultNode,
-    output: OutputNode
-  }
-};
-
 export default NodeRenderer;

src/NodeRenderer/utils.js

@@ -0,0 +1,26 @@
+import DefaultNode from './NodeTypes/DefaultNode';
+import InputNode from './NodeTypes/InputNode';
+import OutputNode from './NodeTypes/OutputNode';
+import wrapNode from './NodeTypes/wrapNode';
+
+export function createNodeTypes(nodeTypes) {
+  const standardTypes = {
+    input: wrapNode(nodeTypes.input || InputNode),
+    default: wrapNode(nodeTypes.default || DefaultNode),
+    output: wrapNode(nodeTypes.output || OutputNode)
+  };
+
+  const specialTypes = Object
+    .keys(nodeTypes)
+    .filter(k => !['input', 'default', 'output'].includes(k))
+    .reduce((res, key) => {
+      res[key] = wrapNode(nodeTypes[key]);
+
+      return res;
+    }, {});
+
+  return {
+    ...standardTypes,
+    ...specialTypes
+  };
+}

src/index.js

@@ -3,13 +3,24 @@ import React, { PureComponent } from 'react';
 import { separateElements } from './graph-utils';
 import GraphView from './GraphView';
 import { Provider } from './GraphContext';
+import { createNodeTypes } from './NodeRenderer/utils';
+
+import DefaultNode from './NodeRenderer/NodeTypes/DefaultNode';
+import InputNode from './NodeRenderer/NodeTypes/InputNode';
+import OutputNode from './NodeRenderer/NodeTypes/OutputNode';
 
 import './style.css';
 
 class ReactGraph extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.nodeTypes = createNodeTypes(props.nodeTypes);
+  }
+
   render() {
     const {
-      style, onNodeClick, children, onLoad, onMove, onChange, elements, nodeTypes
+      style, onNodeClick, children, onLoad, onMove, onChange, elements
     } = this.props;
 
     const { nodes, edges } = separateElements(elements);
@@ -21,7 +32,7 @@ class ReactGraph extends PureComponent {
             onLoad={onLoad}
             onMove={onMove}
             onChange={onChange}
-            nodeTypes={nodeTypes}
+            nodeTypes={this.nodeTypes}
           />
           {children}
         </Provider>
@@ -34,7 +45,12 @@ ReactGraph.defaultProps = {
 	onNodeClick: () => {},
 	onLoad: () => {},
   onMove: () => {},
-  onChange: () => {}
+  onChange: () => {},
+  nodeTypes: {
+    input: InputNode,
+    default: DefaultNode,
+    output: OutputNode
+  }
 };
 
 export default ReactGraph;