chore(example): add debug node

example/src/Basic/DebugNode.tsx

@@ -0,0 +1,27 @@
+import { memo, FC, CSSProperties } from 'react';
+
+import { Handle, NodeProps, Position } from 'react-flow-renderer';
+
+const infoStyle: CSSProperties = { fontSize: 11 };
+const idStyle: CSSProperties = {
+  fontSize: 10,
+  color: '#888899',
+  position: 'absolute',
+  top: 2,
+  left: 2,
+};
+
+const ColorSelectorNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
+  return (
+    <>
+      <Handle type="target" position={Position.Top} />
+      <div style={idStyle}>{id}</div>
+      <div style={infoStyle}>
+        x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
+      </div>
+      <Handle type="source" position={Position.Bottom} />
+    </>
+  );
+};
+
+export default memo(ColorSelectorNode);

example/src/Basic/index.tsx

@@ -14,6 +14,7 @@ import ReactFlow, {
   OnLoadParams,
   Connection,
 } from 'react-flow-renderer';
+import DebugNode from './DebugNode';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
@@ -21,15 +22,6 @@ const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
 const initialNodes: Node[] = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
-  {
-    id: '4',
-    data: { label: 'Node 4' },
-    position: { x: 100, y: 200 },
-    className: 'light',
-    style: { backgroundColor: 'rgba(255, 0, 0, 0.8)', width: 600, height: 300 },
-  },
   {
     id: '4a',
     data: { label: 'Node 4a' },
@@ -38,14 +30,7 @@ const initialNodes: Node[] = [
     parentNode: '4',
     extent: 'parent',
   },
-  {
-    id: '4b',
-    data: { label: 'Node 4b' },
-    position: { x: 150, y: 50 },
-    className: 'light',
-    style: { backgroundColor: 'rgba(255, 0, 255, 0.8)', height: 300, width: 300 },
-    parentNode: '4',
-  },
+
   {
     id: '4b1',
     data: { label: 'Node 4b1' },
@@ -60,6 +45,44 @@ const initialNodes: Node[] = [
     className: 'light',
     parentNode: '4b',
   },
+  {
+    id: '4b',
+    data: { label: 'Node 4b' },
+    position: { x: 150, y: 50 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(50, 50, 255, 0.5)', height: 200, width: 300 },
+    parentNode: '4',
+  },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 100, y: 200 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(255,50, 50, 0.5)', width: 500, height: 300 },
+  },
+  {
+    id: '5a',
+    data: { label: 'Node 5a' },
+    position: { x: 25, y: 50 },
+    className: 'light',
+    parentNode: '5',
+  },
+  {
+    id: '5b',
+    data: { label: 'Node 5b' },
+    position: { x: 225, y: 50 },
+    className: 'light',
+    parentNode: '5',
+  },
+  {
+    id: '5',
+    data: { label: 'Node 5' },
+    position: { x: 650, y: 250 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(20 ,200, 255, 1.5)', width: 400, height: 150 },
+  },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
 ];
 
 const initialEdges: Edge[] = [
@@ -70,8 +93,13 @@ const initialEdges: Edge[] = [
   { id: 'e4a-4b1', source: '4a', target: '4b1' },
   { id: 'e4a-4b2', source: '4a', target: '4b2' },
   { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+  { id: '3-5', source: '3', target: '5' },
 ];
 
+const nodeTypes = {
+  default: DebugNode,
+};
+
 const BasicFlow = () => {
   const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
@@ -142,6 +170,7 @@ const BasicFlow = () => {
       minZoom={0.2}
       maxZoom={4}
       onlyRenderVisibleElements={false}
+      nodeTypes={nodeTypes}
     >
       <MiniMap />
       <Controls />