From bd9b78f7d2b3507661066cfc6cd8f528eec69d4b Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Thu, 20 Mar 2025 02:08:16 +0000
Subject: [PATCH] refactor(editor): edgeless toolbar quick connect action
 (#10876)

---
 .../src/edgeless/configs/toolbar/misc.ts      | 47 +++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/misc.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/misc.ts
index 223162e25..54127d129 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/misc.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/misc.ts
@@ -1,5 +1,10 @@
+import {
+  ConnectorElementModel,
+  DEFAULT_CONNECTOR_MODE,
+} from '@blocksuite/affine-model';
 import {
   ActionPlacement,
+  type ToolbarAction,
   type ToolbarModuleConfig,
 } from '@blocksuite/affine-shared/services';
 import {
@@ -7,6 +12,7 @@ import {
   LockIcon,
   ReleaseFromGroupIcon,
 } from '@blocksuite/icons/lit';
+import { html } from 'lit';
 
 export const builtinMiscToolbarConfig = {
   actions: [
@@ -26,10 +32,45 @@ export const builtinMiscToolbarConfig = {
     {
       placement: ActionPlacement.End,
       id: 'a.draw-connector',
-      icon: ConnectorCIcon(),
       tooltip: 'Draw connector',
-      run() {},
-    },
+      icon: ConnectorCIcon(),
+      when(ctx) {
+        const models = ctx.getSurfaceModels();
+        if (models.length !== 1) return false;
+        if (models[0].isLocked()) return false;
+        return !ctx.matchModel(models[0], ConnectorElementModel);
+      },
+      content(ctx) {
+        const models = ctx.getSurfaceModels();
+        if (!models.length) return null;
+
+        const { id, label, icon, tooltip } = this;
+
+        const quickConnect = (e: MouseEvent) => {
+          e.stopPropagation();
+
+          const { x, y } = e;
+          const point = ctx.gfx.viewport.toViewCoordFromClientCoord([x, y]);
+
+          ctx.store.captureSync();
+          ctx.gfx.tool.setTool('connector', { mode: DEFAULT_CONNECTOR_MODE });
+
+          const ctc = ctx.gfx.tool.get('connector');
+          ctc.quickConnect(point, models[0]);
+        };
+
+        return html`
+          <editor-icon-button
+            data-testid=${id}
+            aria-label=${label}
+            .tooltip=${tooltip}
+            @click=${quickConnect}
+          >
+            ${icon}
+          </editor-icon-button>
+        `;
+      },
+    } satisfies ToolbarAction,
     {
       placement: ActionPlacement.End,
       id: 'b.lock',