feat(subflow): add extendParent option

example/src/Subflow/index.tsx

@@ -43,6 +43,7 @@ const initialNodes: Node[] = [
     className: 'light',
     style: { backgroundColor: 'rgba(50, 50, 255, 0.5)', height: 200, width: 300 },
     parentNode: '4',
+    expandParent: true,
   },
   {
     id: '4b1',
@@ -110,9 +111,7 @@ const BasicFlow = () => {
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
   const onConnect = useCallback((connection: Connection) => {
-    setEdges((eds) => {
+    setEdges((eds) => addEdge(connection, eds));
-      return addEdge(connection, eds);
-    });
   }, []);
   const onPaneReady = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
 
@@ -150,6 +149,8 @@ const BasicFlow = () => {
     });
   };
 
+  console.log(nodes);
+
   return (
     <ReactFlow
       nodes={nodes}

src/types/nodes.ts

@@ -26,6 +26,7 @@ export interface Node<T = any> {
   parentNode?: string;
   zIndex?: number;
   extent?: 'parent' | CoordinateExtent;
+  expandParent?: boolean;
 }
 
 // props that get passed to a custom node

src/utils/changes.ts

@@ -28,6 +28,44 @@ function applyChanges(changes: NodeChange[] | EdgeChange[], elements: any[]): an
             updateItem.dragging = currentChange.dragging;
           }
 
+          if (updateItem.expandParent) {
+            const parent = res.find((e) => e.id === updateItem.parentNode);
+
+            if (parent) {
+              const extendWidth = updateItem.position.x + updateItem.width - parent.width;
+              const extendHeight = updateItem.position.y + updateItem.height - parent.height;
+
+              if (extendWidth > 0 || extendHeight > 0 || updateItem.position.x < 0 || updateItem.position.y < 0) {
+                parent.style = { ...parent.style } || {};
+
+                if (extendWidth > 0) {
+                  parent.style.width += extendWidth;
+                }
+
+                if (extendHeight > 0) {
+                  parent.style.height += extendHeight;
+                }
+
+                if (updateItem.position.x < 0) {
+                  const xDiff = Math.abs(updateItem.position.x);
+                  parent.position.x = parent.position.x - xDiff;
+                  parent.style.width += xDiff;
+                  updateItem.position.x = 0;
+                }
+
+                if (updateItem.position.y < 0) {
+                  const yDiff = Math.abs(updateItem.position.y);
+                  parent.position.y = parent.position.y - yDiff;
+                  parent.style.height += yDiff;
+                  updateItem.position.y = 0;
+                }
+
+                parent.width = parent.style.width;
+                parent.height = parent.style.height;
+              }
+            }
+          }
+
           res.push(updateItem);
           return res;
         }