fix(blocks): element toolbar should be hidden when resizing element (#…

…7047) Closes: [AFF-1077](https://linear.app/affine-design/issue/AFF-1077/移动-connector-端点时，toolbar-应该关掉)
toeverything · May 14, 2024 · 09e5658 · 09e5658
1 parent 5238dfe
commit 09e5658
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 1 deletion.
diff --git a/packages/blocks/src/root-block/edgeless/components/connector/connector-handle.ts b/packages/blocks/src/root-block/edgeless/components/connector/connector-handle.ts
@@ -89,16 +89,19 @@ export class EdgelessConnectorHandle extends WithDisposable(LitElement) {
       _disposables.dispose();
       this._disposables = new DisposableGroup();
       this._bindEvent();
+      edgeless.slots.elementResizeEnd.emit();
     });
   }
 
   private _bindEvent() {
     const edgeless = this.edgeless;
 
     this._disposables.addFromEvent(this._startHandler, 'pointerdown', e => {
+      edgeless.slots.elementResizeStart.emit();
       this._capPointerDown(e, 'source');
     });
     this._disposables.addFromEvent(this._endHandler, 'pointerdown', e => {
+      edgeless.slots.elementResizeStart.emit();
       this._capPointerDown(e, 'target');
     });
     this._disposables.add(() => {

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/index.ts b/packages/blocks/src/root-block/widgets/element-toolbar/index.ts
@@ -239,13 +239,24 @@ export class EdgelessElementToolbarWidget extends WidgetElement<
         this._dragging = true;
       })
     );
-
     _disposables.add(
       edgeless.dispatcher.add('dragEnd', () => {
         this._dragging = false;
         this._recalculatePosition();
       })
     );
+
+    _disposables.add(
+      edgeless.slots.elementResizeStart.on(() => {
+        this._dragging = true;
+      })
+    );
+    _disposables.add(
+      edgeless.slots.elementResizeEnd.on(() => {
+        this._dragging = false;
+        this._recalculatePosition();
+      })
+    );
   }
 
   private _recalculatePosition() {

diff --git a/tests/edgeless/element-toolbar.spec.ts b/tests/edgeless/element-toolbar.spec.ts
@@ -1,9 +1,12 @@
 import { expect } from '@playwright/test';
 
 import {
+  addBasicRectShapeElement,
   locatorComponentToolbar,
+  resizeElementByHandle,
   selectNoteInEdgeless,
   switchEditorMode,
+  zoomResetByKeyboard,
 } from '../utils/actions/edgeless.js';
 import {
   enterPlaygroundRoom,
@@ -61,3 +64,27 @@ test('tooltip should be hidden after clicking on button', async ({ page }) => {
   await expect(page.locator('note-display-mode-panel')).toBeHidden();
   await expect(page.locator('edgeless-color-panel')).toBeVisible();
 });
+
+test('should be hidden when resizing element', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+
+  await addBasicRectShapeElement(page, { x: 210, y: 110 }, { x: 310, y: 210 });
+  await page.mouse.click(220, 120);
+
+  const toolbar = locatorComponentToolbar(page);
+  await expect(toolbar).toBeVisible();
+
+  await resizeElementByHandle(page, { x: 400, y: 300 }, 'top-left', 30);
+
+  await page.mouse.move(450, 300);
+  await expect(toolbar).toBeEmpty();
+
+  await page.mouse.move(320, 220);
+  await expect(toolbar).toBeEmpty();
+
+  await page.mouse.up();
+  await expect(toolbar).toBeVisible();
+});