chore(examples): cleanup

examples/react/src/examples/Subflow/DebugNode.tsx

@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';
 
-import { Handle, NodeProps, Position } from '@xyflow/react';
+import { Handle, NodeProps, Position, useInternalNode } from '@xyflow/react';
 
 const infoStyle: CSSProperties = { fontSize: 11 };
 const idStyle: CSSProperties = {
@@ -12,6 +12,8 @@ const idStyle: CSSProperties = {
 };
 
 const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsoluteX, positionAbsoluteY, id }) => {
+  const node = useInternalNode(id)!;
+
   return (
     <>
       <Handle type="target" position={Position.Top} />
@@ -19,6 +21,9 @@ const DebugNode: FC<NodeProps> = ({ zIndex, positionAbsoluteX, positionAbsoluteY
       <div style={infoStyle}>
         x:{Math.round(positionAbsoluteX)} y:{Math.round(positionAbsoluteY)} z:{zIndex}
       </div>
+      <div style={infoStyle}>
+        x:{Math.round(node.position.x)} y:{Math.round(node.position.y)}
+      </div>
       <Handle type="source" position={Position.Bottom} />
     </>
   );

examples/react/src/examples/Subflow/index.tsx

@@ -29,7 +29,7 @@ const defaultViewport = { x: 0, y: 0, zoom: 1.5 };
 const initialNodes: Node[] = [
   {
     id: '1',
-    // type: 'input',
+    type: 'input',
     data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
     className: 'light',
@@ -90,11 +90,10 @@ const initialNodes: Node[] = [
     id: '5',
     type: 'group',
     data: { label: 'Node 5' },
-    position: { x: 900, y: 250 },
+    position: { x: 650, y: 250 },
     className: 'light',
     style: { width: 100, height: 100 },
     zIndex: 1000,
-    origin: [1, 0],
   },
   {
     id: '5a',
@@ -107,7 +106,7 @@ const initialNodes: Node[] = [
   {
     id: '5b',
     data: { label: 'Node 5b' },
-    position: { x: 225, y: 50 },
+    position: { x: 200, y: 200 },
     className: 'light',
     parentId: '5',
     expandParent: true,
@@ -121,9 +120,9 @@ const initialNodes: Node[] = [
   {
     id: '3',
     data: { label: 'Node 3' },
-    position: { x: 250, y: 100 },
+    position: { x: 400, y: 100 },
     className: 'light',
-    // extent: 'parent',
+    extent: 'parent',
   },
 ];
 
@@ -220,6 +219,7 @@ const Subflow = () => {
       onlyRenderVisibleElements={false}
       nodeTypes={nodeTypes}
       fitView
+      nodeOrigin={[0, 0]}
     >
       <MiniMap />
       <Controls />