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>

src/container/NodeRenderer/index.tsx

@@ -40,6 +40,8 @@ function renderNode(
       selected={isSelected}
       style={node.style}
       isInteractive={isInteractive}
+      sourcePosition={node.sourcePosition}
+      targetPosition={node.targetPosition}
     />
   );
 }

src/types/index.ts

@@ -54,6 +54,8 @@ export interface Node {
   __rg?: any;
   data?: any;
   style?: CSSProperties;
+  targetPosition?: Position;
+  sourcePosition?: Position;
 }
 
 export interface Edge {
@@ -83,6 +85,8 @@ export interface NodeProps {
   type: string;
   data: any;
   selected: boolean;
+  targetPosition?: Position;
+  sourcePosition?: Position;
   style?: CSSProperties;
 }
 
@@ -94,6 +98,8 @@ export interface NodeComponentProps {
   transform?: Transform;
   xPos?: number;
   yPos?: number;
+  targetPosition?: Position;
+  sourcePosition?: Position;
   onClick?: (node: Node) => void | undefined;
   onNodeDragStop?: () => any;
   style?: CSSProperties;
@@ -111,6 +117,8 @@ export interface WrapNodeProps {
   onClick: (node: Node) => void | undefined;
   onNodeDragStop: (node: Node) => void;
   style?: CSSProperties;
+  sourcePosition?: Position;
+  targetPosition?: Position;
 }
 
 export type FitViewParams = {