refactor(examples): update custom node example, create rich example

src/components/Nodes/DefaultNode.tsx

@@ -10,10 +10,10 @@ const nodeStyles: CSSProperties = {
   width: 150,
 };
 
-export default ({ data, style }: NodeProps) => (
+export default ({ data, targetPosition = Position.Top, sourcePosition = Position.Bottom, style }: NodeProps) => (
   <div style={{ ...nodeStyles, ...style }}>
-    <Handle type="target" position={Position.Top} />
+    <Handle type="target" position={targetPosition} />
     {data.label}
-    <Handle type="source" position={Position.Bottom} />
+    <Handle type="source" position={sourcePosition} />
   </div>
 );

src/components/Nodes/InputNode.tsx

@@ -10,9 +10,9 @@ const nodeStyles: CSSProperties = {
   width: 150,
 };
 
-export default ({ data, style }: NodeProps) => (
+export default ({ data, style, sourcePosition = Position.Bottom }: NodeProps) => (
   <div style={{ ...nodeStyles, ...style }}>
     {data.label}
-    <Handle type="source" position={Position.Bottom} />
+    <Handle type="source" position={sourcePosition} />
   </div>
 );

src/components/Nodes/OutputNode.tsx

@@ -10,9 +10,9 @@ const nodeStyles: CSSProperties = {
   width: 150,
 };
 
-export default ({ data, style }: NodeProps) => (
+export default ({ data, style, targetPosition = Position.Top }: NodeProps) => (
   <div style={{ ...nodeStyles, ...style }}>
-    <Handle type="target" position={Position.Top} />
+    <Handle type="target" position={targetPosition} />
     {data.label}
   </div>
 );

src/components/Nodes/wrapNode.tsx

@@ -149,6 +149,8 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       onNodeDragStop,
       style,
       isInteractive,
+      sourcePosition,
+      targetPosition,
     }: WrapNodeProps) => {
       const nodeElement = useRef<HTMLDivElement>(null);
       const [offset, setOffset] = useState({ x: 0, y: 0 });
@@ -208,7 +210,15 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         >
           <div className={nodeClasses} ref={nodeElement} style={nodeStyle}>
             <Provider value={id}>
-              <NodeComponent id={id} data={data} type={type} style={style} selected={selected} />
+              <NodeComponent
+                id={id}
+                data={data}
+                type={type}
+                style={style}
+                selected={selected}
+                sourcePosition={sourcePosition}
+                targetPosition={targetPosition}
+              />
             </Provider>
           </div>
         </DraggableCore>