fix(editor): should toggle toolbar when creating connector via auto complete (#11862)

Closes: [BS-2403](https://linear.app/affine-design/issue/BS-2403/[improvement]-edgeless-拖出-connector-时，yuan素的-toolbar-需要消失)

blocksuite/affine/blocks/root/src/edgeless/components/auto-complete/edgeless-auto-complete.ts

@@ -27,6 +27,7 @@ import {
   ShapeElementModel,
   shapeMethods,
 } from '@blocksuite/affine-model';
+import { ToolbarRegistryIdentifier } from '@blocksuite/affine-shared/services';
 import { handleNativeRangeAtPoint } from '@blocksuite/affine-shared/utils';
 import { DisposableGroup } from '@blocksuite/global/disposable';
 import type { Bound, IVec } from '@blocksuite/global/gfx';
@@ -211,6 +212,8 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) {
           point,
           otherSideId ? [otherSideId] : []
         );
+
+        this.std.get(ToolbarRegistryIdentifier).flags.hide();
       }
     });
 
@@ -222,6 +225,8 @@ export class EdgelessAutoComplete extends WithDisposable(LitElement) {
         this._createAutoCompletePanel(e, connector);
       }
 
+      this.std.get(ToolbarRegistryIdentifier).flags.show();
+
       this._isMoving = false;
       this.connectionOverlay.clear();
       this._disposables.dispose();

tests/affine-local/e2e/blocksuite/edgeless/auto-complete.spec.ts

@@ -0,0 +1,100 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickView,
+  dragView,
+  locateEditorContainer,
+  locateToolbar,
+  setEdgelessTool,
+  toViewCoord,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should hide toolbar when creating connector', async ({ page }) => {
+  await setEdgelessTool(page, 'shape');
+  await dragView(page, [100, 300], [200, 400]);
+  await clickView(page, [150, 350]);
+
+  const toolbar = locateToolbar(page);
+
+  await expect(toolbar).toBeVisible();
+
+  const autoComplete = page.locator('edgeless-auto-complete');
+  const rightArrowButton = autoComplete
+    .locator('.edgeless-auto-complete-arrow')
+    .nth(0);
+
+  const bounds = await rightArrowButton.boundingBox();
+  expect(bounds).not.toBeNull();
+
+  const { x, y, width: w, height: h } = bounds!;
+  const startPos = [x + w / 2, y + h / 2];
+  const endPos = [startPos[0] + 100, startPos[1] + 100];
+
+  await page.mouse.move(startPos[0], startPos[1]);
+  await page.mouse.down();
+  await page.mouse.move(endPos[0], endPos[1]);
+
+  await expect(toolbar).toBeHidden();
+
+  await page.mouse.up();
+
+  const autoCompletePanel = page
+    .locator('edgeless-auto-complete-panel')
+    .locator('.auto-complete-panel-container');
+
+  await expect(toolbar).toBeHidden();
+  await expect(autoCompletePanel).toBeVisible();
+});
+
+test('should toggle toolbar when connecting target', async ({ page }) => {
+  await setEdgelessTool(page, 'shape');
+  // source
+  await dragView(page, [100, 300], [200, 400]);
+
+  // target
+  await setEdgelessTool(page, 'shape');
+  await dragView(page, [300, 300], [400, 400]);
+
+  await clickView(page, [150, 350]);
+
+  const toolbar = locateToolbar(page);
+
+  await expect(toolbar).toBeVisible();
+
+  const autoComplete = page.locator('edgeless-auto-complete');
+  const rightArrowButton = autoComplete
+    .locator('.edgeless-auto-complete-arrow')
+    .nth(0);
+
+  const bounds = await rightArrowButton.boundingBox();
+  expect(bounds).not.toBeNull();
+
+  const { x, y, width: w, height: h } = bounds!;
+  const startPos = [x + w / 2, y + h / 2];
+  const endPos = await toViewCoord(page, [300, 350]);
+
+  await page.mouse.move(startPos[0], startPos[1]);
+  await page.mouse.down();
+  await page.mouse.move(endPos[0], endPos[1]);
+
+  await expect(toolbar).toBeHidden();
+
+  await page.mouse.up();
+
+  await expect(toolbar).toBeVisible();
+});