style(nodes): default styles

example/SimpleGraph.js

@@ -40,17 +40,17 @@ class App extends PureComponent {
 
     this.state = {
       elements: [
-        { id: '1', type: 'input', data: { label: 'Tests' }, position: { x: 50, y: 50 } },
+        { id: '1', type: 'input', data: { label: 'Tests' }, position: { x: 250, y: 5 } },
         { id: '2', data: { label: 'This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
-        { id: '3', data: { label: 'This is a node' }, position: { x: 100, y: 200 }, style: { background: '#222', color: '#fff' } },
+        { id: '3', data: { label: 'I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
         { id: '4', type: 'output', data: { label: 'nody nodes' }, position: { x: 50, y: 300 } },
         { id: '5', type: 'default', data: { label: 'Another node'}, position: { x: 400, y: 300 } },
-        { id: '6', type: 'special', onChange, data: { label: 'no option selected' }, position: { x: 400, y: 400 } },
-        { source: '1', target: '2', type: 'bezier', animated: true, style: { stroke: 'orange' } },
+        { id: '6', type: 'special', onChange, data: { label: 'no option selected' }, position: { x: 425, y: 400 } },
+        { source: '1', target: '2', animated: true },
         { source: '2', target: '3' },
         { source: '3', target: '4' },
         { source: '3', target: '5' },
-        { source: '5', target: '6' }
+        { source: '5', target: '6', type: 'straight', animated: true, style: { stroke: '#FFCC00' } }
       ]
     };
   }

example/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="stylesheet" type="text/css" href="../dist/ReactGraph.css">
+  <!--<link rel="stylesheet" type="text/css" href="../dist/ReactGraph.css">-->
   <title>Document</title>
   <style>
     html, body {

src/NodeRenderer/Handle/index.js

@@ -1,3 +1,15 @@
 import React from 'react';
+import cx from 'classnames';
 
-export default props => <div className="react-graph__handle" {...props} />;
+export default (props) => {
+  const handleClasses = cx(
+    'react-graph__handle', {
+      input: props.input,
+      output: props.output
+    }
+  );
+
+  return (
+    <div className={handleClasses} {...props} />
+  );
+};

src/NodeRenderer/NodeTypes/DefaultNode.js

@@ -11,8 +11,8 @@ const nodeStyles = {
 
 export default ({ data, style }) => (
   <div style={{ ...nodeStyles, ...style }}>
-    <Handle style={{ top: 0 }} />
+    <Handle input />
     {data.label}
-    <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
+    <Handle output />
   </div>
 );

src/NodeRenderer/NodeTypes/InputNode.js

@@ -15,6 +15,6 @@ export default ({ data, style }) => (
     className="react-graph__node-inner"
   >
     {data.label}
-    <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
+    <Handle output />
   </div>
 );

src/NodeRenderer/NodeTypes/OutputNode.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Handle from '../Handle';
 
 const nodeStyles = {
-  background: '#55ff99',
+  background: '#55dd99',
   padding: 10,
   borderRadius: 5,
   width: 150
@@ -11,7 +11,7 @@ const nodeStyles = {
 
 export default ({ data, style }) => (
   <div style={{ ...nodeStyles, ...style }}>
-    <Handle style={{ top: 0 }} />
+    <Handle input />
     {data.label}
   </div>
 );

src/style.css

@@ -47,12 +47,12 @@
 
 .react-graph__edge {
   fill: none;
-  stroke: #333;
+  stroke: #bbb;
   stroke-width: 2;
   pointer-events: all;
 
   &.selected {
-    stroke: #ff5050;
+    stroke: #555;
   }
 
   &.animated {
@@ -90,18 +90,23 @@
   }
 
   &.selected > * {
-    box-shadow: 0 0 0 2px #000;
+    box-shadow: 0 0 0 2px #555;
   }
 }
 
 .react-graph__handle {
   position: absolute;
-  width: 12px;
-  height: 12px;
-  transform: translate(-50%, -50%);
-  background: #222;
+  width: 10px;
+  height: 5px;
+  transform: translate(-50%, 0);
+  background: rgba(255, 255, 255, 0.4);
   left: 50%;
-  border-radius: 50%;
+  top: 0;
+
+  &.output {
+    top: auto;
+    bottom: 0;
+  }
 }
 
 .react-graph__nodesselection {