shit

web/src/app/home/workflows/components/workflow-editor/WorkflowEditorComponent.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState, useEffect } from 'react';
 import {
   ReactFlow,
   Background,
@@ -425,7 +425,16 @@ function WorkflowEditorInner() {
         </div>
 
         {/* Center: Flow Canvas */}
-        <div className="flex-1 relative">
+        <div
+          className="flex-1 relative"
+          style={{
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            touchAction: 'none',
+            overflow: 'hidden',
+          }}
+          onContextMenu={(e) => e.preventDefault()}
+        >
           <ReactFlow
             nodes={displayNodes}
             edges={edges}
@@ -444,7 +453,7 @@ function WorkflowEditorInner() {
             snapGrid={[15, 15]}
             selectionMode={SelectionMode.Partial}
             selectionOnDrag
-            panOnDrag={[1, 2]} // Middle click and right click to pan
+            panOnDrag={[2]} // Right click to pan (left click is for node selection)
             selectNodesOnDrag={false}
             defaultEdgeOptions={{
               type: 'default',
@@ -453,7 +462,7 @@ function WorkflowEditorInner() {
                 type: MarkerType.ArrowClosed,
                 width: 20,
                 height: 20,
-                color: 'hsl(var(--muted-foreground))',
+                color: 'oklch(from var(--muted-foreground) l c h / 1)',
               },
             }}
             deleteKeyCode={null} // We handle delete manually
@@ -463,7 +472,7 @@ function WorkflowEditorInner() {
               gap={15}
               size={1}
               variant={BackgroundVariant.Dots}
-              color="hsl(var(--muted-foreground) / 0.3)"
+              color="oklch(from var(--muted-foreground) l c h / 0.9)"
             />
             <Controls
               showInteractive={false}
@@ -571,7 +580,6 @@ function WorkflowEditorInner() {
                 </TooltipContent>
               </Tooltip>
 
-              <div className="w-px bg-border mx-0.5" />
 
               {/* Zoom controls */}
               <Tooltip>

web/src/i18n/locales/en-US.ts

@@ -1489,6 +1489,8 @@ const enUS = {
     inputOutputVariables: 'Input/Output Variables',
     inputs: 'Inputs',
     outputs: 'Outputs',
+    autoLayout: 'Auto Layout',
+    autoLayoutSuccess: 'Nodes auto-layout complete',
     availableVariables: 'Available Variables',
     globalVariables: 'Global Variables',
     messageContent: 'Message Content',

web/src/i18n/locales/zh-Hans.ts

@@ -1427,6 +1427,8 @@ const zhHans = {
     inputOutputVariables: '输入/输出变量',
     inputs: '输入',
     outputs: '输出',
+    autoLayout: '自动整理',
+    autoLayoutSuccess: '节点已自动整理',
     availableVariables: '可用变量',
     globalVariables: '全局变量',
     messageContent: '消息内容',