Merge branch 'next' into enhance-connection-more

examples/react/src/examples/NodeResizer/index.tsx

@@ -37,6 +37,7 @@ const initialNodes: Node[] = [
     type: 'defaultResizer',
     data: { label: 'default resizer' },
     position: { x: 0, y: 0 },
+    origin: [1, 1],
     style: { ...nodeStyle },
   },
   {
@@ -127,7 +128,7 @@ const initialNodes: Node[] = [
     data: { label: 'Parent', keepAspectRatio: true },
     position: { x: 700, y: 0 },
     width: 300,
-    height: 400,
+    height: 300,
     style: { ...nodeStyle },
   },
   {
@@ -147,7 +148,9 @@ const initialNodes: Node[] = [
     id: '5b',
     type: 'defaultResizer',
     data: { label: 'Child with expandParent' },
-    position: { x: 150, y: 100 },
+    position: { x: 100, y: 100 },
+    width: 100,
+    height: 100,
     parentId: '5',
     expandParent: true,
     style: { ...nodeStyle },
@@ -155,8 +158,10 @@ const initialNodes: Node[] = [
   {
     id: '5c',
     type: 'defaultResizer',
-    data: { label: 'Child with expandParent & keepAspectRatio', keepAspectRatio: true },
-    position: { x: 25, y: 200 },
+    data: { label: 'Child with expandParent & keepAspectRatio' },
+    position: { x: 250, y: 200 },
+    height: 100,
+    width: 100,
     parentId: '5',
     expandParent: true,
     style: { ...nodeStyle },

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

@@ -14,6 +14,8 @@ import {
   Background,
   Panel,
   NodeOrigin,
+  useUpdateNodeInternals,
+  ReactFlowProvider,
 } from '@xyflow/react';
 
 import DebugNode from './DebugNode';
@@ -104,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,
@@ -151,6 +153,7 @@ const nodeTypes = {
 
 const Subflow = () => {
   const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
+  const updateNodeInternals = useUpdateNodeInternals();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
@@ -216,6 +219,7 @@ const Subflow = () => {
       onlyRenderVisibleElements={false}
       nodeTypes={nodeTypes}
       fitView
+      nodeOrigin={[0, 0]}
     >
       <MiniMap />
       <Controls />
@@ -228,9 +232,14 @@ const Subflow = () => {
         <button onClick={toggleChildNodes}>toggleChildNodes</button>
         <button onClick={logToObject}>toObject</button>
         <button onClick={() => setNodes(initialNodes)}>setNodes</button>
+        <button onClick={() => updateNodeInternals(nodes.map((node) => node.id))}>updateNodeInternals</button>
       </Panel>
     </ReactFlow>
   );
 };
 
-export default Subflow;
+export default () => (
+  <ReactFlowProvider>
+    <Subflow />
+  </ReactFlowProvider>
+);