feat: Resizable Flex Nodes

Author: camielvs

src/components/shared/ReactFlow/FlowCanvas/FlexNode/FlexNode.tsx

@@ -1,16 +1,27 @@
-import { type Node, type NodeProps } from "@xyflow/react";
+import {
+  type Node,
+  type NodeProps,
+  NodeResizer,
+  type ResizeDragEvent,
+  type ResizeParams,
+} from "@xyflow/react";
 import { useEffect } from "react";
 
 import { BlockStack } from "@/components/ui/layout";
 import { Paragraph } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
+import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useContextPanel } from "@/providers/ContextPanelProvider";
+import { updateSubgraphSpec } from "@/utils/subgraphUtils";
 
 import { FlexNodeEditor } from "./FlexNodeEditor";
+import { updateFlexNodeInComponentSpec } from "./interface";
 import type { FlexNodeData } from "./types";
 
 type FlexNodeProps = NodeProps<Node<FlexNodeData>>;
 
+const MIN_SIZE = { width: 50, height: 50 };
+
 const FlexNode = ({ data, id, selected }: FlexNodeProps) => {
   const { properties, readOnly } = data;
   const { title, content, color } = properties;
@@ -21,6 +32,34 @@ const FlexNode = ({ data, id, selected }: FlexNodeProps) => {
     setOpen: setContextPanelOpen,
   } = useContextPanel();
 
+  const {
+    currentSubgraphSpec,
+    currentSubgraphPath,
+    componentSpec,
+    setComponentSpec,
+  } = useComponentSpec();
+
+  const handleResizeEnd = (_: ResizeDragEvent, params: ResizeParams) => {
+    const width = Math.max(params.width, MIN_SIZE.width);
+    const height = Math.max(params.height, MIN_SIZE.height);
+
+    const updatedSubgraphSpec = updateFlexNodeInComponentSpec(
+      currentSubgraphSpec,
+      {
+        ...data,
+        size: { width, height },
+      },
+    );
+
+    const newRootSpec = updateSubgraphSpec(
+      componentSpec,
+      currentSubgraphPath,
+      updatedSubgraphSpec,
+    );
+
+    setComponentSpec(newRootSpec);
+  };
+
   useEffect(() => {
     if (selected) {
       setContent(<FlexNodeEditor flexNode={data} readOnly={readOnly} />);
@@ -37,29 +76,40 @@ const FlexNode = ({ data, id, selected }: FlexNodeProps) => {
   const isTransparent = color === "transparent";
 
   return (
-    <div
-      key={id}
-      className={cn(
-        "p-1 rounded-lg border-2 border-transparent h-full w-full",
-        isTransparent && !title && !content && "border-dashed border-warning",
-        selected && "border-gray-500 border-solid",
-      )}
-      style={{ backgroundColor: color }}
-    >
+    <>
+      <NodeResizer
+        color="var(--edge-selected)"
+        isVisible={selected}
+        minWidth={50}
+        minHeight={50}
+        onResizeEnd={handleResizeEnd}
+      />
       <div
+        key={id}
         className={cn(
-          "rounded-sm p-1 h-full w-full overflow-hidden",
-          isTransparent ? "bg-transparent" : "bg-white/40",
+          "p-1 rounded-lg h-full w-full",
+          isTransparent &&
+            !title &&
+            !content &&
+            "border-2 border-dashed border-warning",
         )}
+        style={{ backgroundColor: color }}
       >
-        <BlockStack gap="1">
-          <Paragraph size="sm" weight="semibold">
-            {title}
-          </Paragraph>
-          <Paragraph size="xs">{content}</Paragraph>
-        </BlockStack>
+        <div
+          className={cn(
+            "rounded-sm p-1 h-full w-full overflow-hidden",
+            isTransparent ? "bg-transparent" : "bg-white/40",
+          )}
+        >
+          <BlockStack gap="1">
+            <Paragraph size="sm" weight="semibold">
+              {title}
+            </Paragraph>
+            <Paragraph size="xs">{content}</Paragraph>
+          </BlockStack>
+        </div>
       </div>
-    </div>
+    </>
   );
 };