From 79f0c067909014b3482f462cc970ed92966a9a26 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Tue, 30 Jun 2026 12:31:08 +0800
Subject: [PATCH] feat: add workflow selection preservation logic and related
 tests

---
 .../_components/workflow-config-sidebar.tsx      |  1 +
 .../ai-workflows/_components/workflow-editor.tsx | 16 ++++++++++++++--
 .../_components/workflow-node-card.tsx           |  1 +
 .../_components/workflow-port-node-menu.tsx      |  1 +
 .../_components/workflow-utils.test.mjs          | 15 +++++++++++++++
 .../ai-workflows/_components/workflow-utils.ts   |  8 ++++++++
 6 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx b/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
index a9240cd..085d3f0 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx
@@ -101,6 +101,7 @@ export function WorkflowConfigPanel({
 
   return (
     <div
+      data-workflow-preserve-selection
       className="pointer-events-none absolute inset-y-3 right-3 z-50 flex max-w-[calc(100%-1.5rem)]"
       style={{ width: panelWidth }}
     >
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx b/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
index 402ea7d..1c8d9de 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-editor.tsx
@@ -41,6 +41,7 @@ import {
 import {
   createWorkflowNodeFromSpec,
   deleteWorkflowNode,
+  shouldClearWorkflowSelectionOnPointerDown,
   updateWorkflowNodeData,
   validateWorkflowDefinition,
   type WorkflowNodeData,
@@ -319,13 +320,24 @@ function WorkflowEditorInner({
     onSelectBranch(null)
   }
 
+  const clearSelectionFromCanvas = () => {
+    setNodeMenu(null)
+    closeConfigPanel()
+  }
+
   return (
     <div
       ref={editorRootRef}
       data-workflow-editor-root
       className="relative isolate h-full min-h-0 w-full flex-1 overflow-hidden border bg-[var(--g-editor-background)]"
+      onPointerDownCapture={(event) => {
+        if (shouldClearWorkflowSelectionOnPointerDown(event.target)) {
+          clearSelectionFromCanvas()
+        }
+      }}
     >
       <div
+        data-workflow-preserve-selection
         className={cn(
           "absolute left-3 top-3 z-50 flex max-w-[calc(100%-1.5rem)] flex-col items-start gap-1.5",
           selectedNodeId && "max-w-[calc(100%-25rem)]"
@@ -348,7 +360,7 @@ function WorkflowEditorInner({
         />
       </div>
 
-      <div className="absolute bottom-4 left-4 z-50">
+      <div data-workflow-preserve-selection className="absolute bottom-4 left-4 z-50">
         <WorkflowCanvasControls
           zoomPercent={zoomPercent}
           onZoomIn={() => playgroundTools.zoomin(true)}
@@ -360,7 +372,7 @@ function WorkflowEditorInner({
         />
       </div>
 
-      <div className="absolute bottom-4 right-4 z-50">
+      <div data-workflow-preserve-selection className="absolute bottom-4 right-4 z-50">
         <WorkflowEditorStatus
           validation={validation}
           nodeCount={definition.nodes.length}
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-node-card.tsx b/web/app/dashboard/ai-workflows/_components/workflow-node-card.tsx
index 32a9c4d..0f0206e 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-node-card.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-node-card.tsx
@@ -16,6 +16,7 @@ export function WorkflowNodeCard({
 }) {
   return (
     <div
+      data-workflow-preserve-selection
       className={cn(
         "group relative rounded-lg bg-[#FFFFFF] p-0.5 transition-all",
         "w-[242px]",
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-port-node-menu.tsx b/web/app/dashboard/ai-workflows/_components/workflow-port-node-menu.tsx
index ad3a9cd..c6e7e7d 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-port-node-menu.tsx
+++ b/web/app/dashboard/ai-workflows/_components/workflow-port-node-menu.tsx
@@ -61,6 +61,7 @@ export function WorkflowPortNodeMenu({
   return (
     <div
       ref={menuRef}
+      data-workflow-preserve-selection
       className="pointer-events-auto absolute z-[80] w-64 overflow-hidden rounded-lg border border-slate-200 bg-white py-1.5 shadow-[0_14px_35px_rgba(15,23,42,0.16)]"
       style={{
         left: position.x,
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-utils.test.mjs b/web/app/dashboard/ai-workflows/_components/workflow-utils.test.mjs
index 35b68fb..186acd9 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-utils.test.mjs
+++ b/web/app/dashboard/ai-workflows/_components/workflow-utils.test.mjs
@@ -277,6 +277,21 @@ describe("workflow branch interaction helpers", () => {
       },
     }), false)
   })
+
+  it("clears workflow selection only when clicking outside preserved regions", async () => {
+    const { shouldClearWorkflowSelectionOnPointerDown } = await loadModule()
+
+    assert.equal(shouldClearWorkflowSelectionOnPointerDown({
+      closest(selector) {
+        return selector === "[data-workflow-preserve-selection]" ? {} : null
+      },
+    }), false)
+    assert.equal(shouldClearWorkflowSelectionOnPointerDown({
+      closest() {
+        return null
+      },
+    }), true)
+  })
 })
 
 describe("workflow definition mutations", () => {
diff --git a/web/app/dashboard/ai-workflows/_components/workflow-utils.ts b/web/app/dashboard/ai-workflows/_components/workflow-utils.ts
index e567f34..6c83bd5 100644
--- a/web/app/dashboard/ai-workflows/_components/workflow-utils.ts
+++ b/web/app/dashboard/ai-workflows/_components/workflow-utils.ts
@@ -131,6 +131,14 @@ export function isBranchRowActionTarget(target: EventTarget | null): boolean {
   return typeof maybeElement?.closest === "function" && maybeElement.closest("button") !== null
 }
 
+export function shouldClearWorkflowSelectionOnPointerDown(target: EventTarget | null): boolean {
+  const maybeElement = target as { closest?: (selector: string) => Element | null } | null
+  if (typeof maybeElement?.closest !== "function") {
+    return false
+  }
+  return maybeElement.closest("[data-workflow-preserve-selection]") === null
+}
+
 export function getNodeTitle(
   node: AIWorkflowDefinition["nodes"][number] | undefined,
   specs: AIWorkflowNodeSpec[] = []