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

dist/components/ConnectionLine/index.d.ts

@@ -7,8 +7,9 @@ interface ConnectionLineProps {
     connectionLineType?: string | null;
     nodes: Node[];
     transform: Transform;
+    isInteractive: boolean;
     connectionLineStyle?: SVGAttributes<{}>;
     className?: string;
 }
-declare const _default: ({ connectionSourceId, connectionLineStyle, connectionPositionX, connectionPositionY, connectionLineType, nodes, className, transform, }: ConnectionLineProps) => JSX.Element | null;
+declare const _default: ({ connectionSourceId, connectionLineStyle, connectionPositionX, connectionPositionY, connectionLineType, nodes, className, transform, isInteractive, }: ConnectionLineProps) => JSX.Element | null;
 export default _default;

dist/components/Edges/wrapEdge.d.ts

@@ -8,6 +8,7 @@ interface EdgeWrapperProps {
     onClick: (edge: Edge) => void;
     animated: boolean;
     selected: boolean;
+    isInteractive: boolean;
 }
-declare const _default: (EdgeComponent: React.ComponentType<EdgeCompProps>) => React.MemoExoticComponent<({ id, source, target, type, animated, selected, onClick, ...rest }: EdgeWrapperProps) => JSX.Element>;
+declare const _default: (EdgeComponent: React.ComponentType<EdgeCompProps>) => React.MemoExoticComponent<({ id, source, target, type, animated, selected, onClick, isInteractive, ...rest }: EdgeWrapperProps) => JSX.Element>;
 export default _default;

dist/components/Nodes/DefaultNode.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { NodeProps } from '../../types';
-declare const _default: ({ data, style }: NodeProps) => JSX.Element;
+declare const _default: ({ data, targetPosition, sourcePosition, style }: NodeProps) => JSX.Element;
 export default _default;

dist/components/Nodes/InputNode.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { NodeProps } from '../../types';
-declare const _default: ({ data, style }: NodeProps) => JSX.Element;
+declare const _default: ({ data, style, sourcePosition }: NodeProps) => JSX.Element;
 export default _default;

dist/components/Nodes/OutputNode.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { NodeProps } from '../../types';
-declare const _default: ({ data, style }: NodeProps) => JSX.Element;
+declare const _default: ({ data, style, targetPosition }: NodeProps) => JSX.Element;
 export default _default;

dist/components/Nodes/wrapNode.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { NodeComponentProps, WrapNodeProps } from '../../types';
-declare const _default: (NodeComponent: React.ComponentType<NodeComponentProps>) => React.MemoExoticComponent<({ id, type, data, transform, xPos, yPos, selected, onClick, onNodeDragStop, style, isInteractive, }: WrapNodeProps) => JSX.Element>;
+declare const _default: (NodeComponent: React.ComponentType<NodeComponentProps>) => React.MemoExoticComponent<({ id, type, data, transform, xPos, yPos, selected, onClick, onNodeDragStop, style, isInteractive, sourcePosition, targetPosition, }: WrapNodeProps) => JSX.Element>;
 export default _default;

dist/components/UserSelection/index.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<() => JSX.Element | null>;
+declare type UserSelectionProps = {
+    isInteractive: boolean;
+};
+declare const _default: React.MemoExoticComponent<({ isInteractive }: UserSelectionProps) => JSX.Element | null>;
 export default _default;

dist/container/ReactFlow/index.d.ts

@@ -35,9 +35,9 @@ declare const ReactFlow: {
         onLoad: () => void;
         onMove: () => void;
         nodeTypes: {
-            input: ({ data, style }: import("../../types").NodeProps) => JSX.Element;
-            default: ({ data, style }: import("../../types").NodeProps) => JSX.Element;
-            output: ({ data, style }: import("../../types").NodeProps) => JSX.Element;
+            input: ({ data, style, sourcePosition }: import("../../types").NodeProps) => JSX.Element;
+            default: ({ data, targetPosition, sourcePosition, style }: import("../../types").NodeProps) => JSX.Element;
+            output: ({ data, style, targetPosition }: import("../../types").NodeProps) => JSX.Element;
         };
         edgeTypes: {
             default: React.MemoExoticComponent<({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, }: import("../../types").EdgeBezierProps) => JSX.Element>;

dist/types/index.d.ts

@@ -43,6 +43,8 @@ export interface Node {
     __rg?: any;
     data?: any;
     style?: CSSProperties;
+    targetPosition?: Position;
+    sourcePosition?: Position;
 }
 export interface Edge {
     id: ElementId;
@@ -68,6 +70,8 @@ export interface NodeProps {
     type: string;
     data: any;
     selected: boolean;
+    targetPosition?: Position;
+    sourcePosition?: Position;
     style?: CSSProperties;
 }
 export interface NodeComponentProps {
@@ -78,6 +82,8 @@ export interface NodeComponentProps {
     transform?: Transform;
     xPos?: number;
     yPos?: number;
+    targetPosition?: Position;
+    sourcePosition?: Position;
     onClick?: (node: Node) => void | undefined;
     onNodeDragStop?: () => any;
     style?: CSSProperties;
@@ -94,6 +100,8 @@ export interface WrapNodeProps {
     onClick: (node: Node) => void | undefined;
     onNodeDragStop: (node: Node) => void;
     style?: CSSProperties;
+    sourcePosition?: Position;
+    targetPosition?: Position;
 }
 export declare type FitViewParams = {
     padding: number;