feat: update node components to enhance resizing functionality and improve drag interactions

MiaoMint · MiaoMint · commit b7594a84f6ac · 2026-01-10T01:02:10.000+08:00
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
@@ -1 +1 @@
-26a1cb68f011440ec834ec05278dcf9a
+f510197448dce85168f8ff06bb3b3003
diff --git a/frontend/src/components/canvas-view.tsx b/frontend/src/components/canvas-view.tsx
@@ -15,6 +15,7 @@ import {
   useReactFlow,
   getNodesBounds,
   getViewportForBounds,
+  ControlButton,
 } from "@xyflow/react";
 import { toPng } from "html-to-image";
 import { useState, useCallback, useMemo, useRef, useEffect } from "react";
@@ -261,8 +262,6 @@ function CanvasEditor({ project, onBack }: CanvasViewProps) {
   const dragRef = useRef<{ id: string; position: { x: number; y: number } } | null>(null);
 
 
-
-
   // group 子节点跟随拖动
   const onNodeDrag = useCallback(
     (_: React.MouseEvent, node: Node) => {
@@ -278,7 +277,7 @@ function CanvasEditor({ project, onBack }: CanvasViewProps) {
         // Find intersecting nodes
         // Note: We use the group node's current dimension (which React Flow tracks)
         const intersectingNodes = getIntersectingNodes(node).filter(
-          (n) => n.type !== "group" && n.parentId !== node.id
+          (n) => n.parentId !== node.id
         );
 
         if (intersectingNodes.length > 0) {
@@ -547,9 +546,13 @@ function CanvasEditor({ project, onBack }: CanvasViewProps) {
             panOnScroll
             onNodeDragStart={onNodeDragStart}
             onNodeDragStop={onNodeDragStop}
+            onNodeDrag={onNodeDrag}
             onNodeClick={onNodeClick}
+            minZoom={0.1}
+            maxZoom={2}
+            proOptions={{ hideAttribution: true }}
           >
-            <MiniMap />
+            <MiniMap pannable />
             <Background variant={BackgroundVariant.Cross} gap={12} size={1} />
           </ReactFlow>
         </div>
diff --git a/frontend/src/components/nodes/base-node.tsx b/frontend/src/components/nodes/base-node.tsx
@@ -1,4 +1,4 @@
-import { Handle, Position, useReactFlow, type NodeProps, NodeResizeControl, NodeToolbar } from "@xyflow/react";
+import { Handle, Position, useReactFlow, type NodeProps, NodeResizeControl, NodeToolbar, EdgeText } from "@xyflow/react";
 import { Card } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
 import { NodeParametersPanel } from "./node-parameters-panel";
@@ -30,8 +30,10 @@ export function BaseNode({
     promptPlaceholder,
     minWidth = 200,
     minHeight = 200,
-    maxWidth = 400,
-    maxHeight = 400,
+    maxWidth,
+    maxHeight,
+    width,
+    height,
 }: BaseNodeProps) {
     const nodeData = data as unknown as BaseNodeData;
     const { updateNodeData, getNodes, updateNode } = useReactFlow();
@@ -41,10 +43,12 @@ export function BaseNode({
     const isSelected = selected && selectedNodesCount === 1;
 
     useEffect(() => {
-        updateNode(id, {
-            width: minWidth,
-            height: minHeight
-        });
+        if (!width && !height) {
+            updateNode(id, {
+                width: minWidth,
+                height: minHeight
+            });
+        }
     }, []);
 
     return (
diff --git a/frontend/src/components/nodes/group-node.tsx b/frontend/src/components/nodes/group-node.tsx
@@ -146,17 +146,19 @@ export const GroupNode = memo(({ id, data, selected, }: NodeProps) => {
     return (
         <div className={cn(["h-full w-full relative group border rounded-2xl bg-muted/20", selected && "border-primary bg-primary/5 "])}>
 
-            <NodeResizeControl
-                minWidth={100}
-                minHeight={100}
-                position="bottom-right"
-                className="bg-transparent border-none"
-            >
-                <div
-                    className="absolute bottom-0 right-0 p-4 rounded-br-2xl cursor-nwse-resize bg-transparent nodrag z-50 pointer-events-auto"
-                    style={{ cursor: 'nwse-resize' }}
-                />
-            </NodeResizeControl>
+            {isSelected && (
+                <NodeResizeControl
+                    minWidth={100}
+                    minHeight={100}
+                    position="bottom-right"
+                    className="bg-transparent border-none"
+                >
+                    <div
+                        className="absolute bottom-0 right-0 p-4 rounded-br-2xl cursor-nwse-resize bg-transparent nodrag z-50 pointer-events-auto"
+                        style={{ cursor: 'nwse-resize' }}
+                    />
+                </NodeResizeControl>
+            )}
 
             <NodeToolbar
                 isVisible={isSelected}

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-26a1cb68f011440ec834ec05278dcf9a`
	`1`	`+f510197448dce85168f8ff06bb3b3003`