feat(editor): disable clickToDrag for edgeless toolbar shape and mindmap (#11310)

blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-menu.ts

@@ -254,6 +254,20 @@ export class EdgelessMindmapMenu extends EdgelessToolbarToolMixin(
         }
       },
     });
+
+    this.edgeless.bindHotKey(
+      {
+        m: () => {
+          const gfx = this.gfx;
+          const locked = gfx.viewport.locked;
+          if (locked) return;
+          if (gfx.selection.editing) return;
+          // toolbar mindmap button will capture the `m` key and create a new overlay
+          this.draggableController.cancelWithoutAnimation();
+        },
+      },
+      { global: true }
+    );
   }
 
   override render() {

blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-tool-button.ts

@@ -231,7 +231,7 @@ export class EdgelessMindmapToolButton extends EdgelessToolbarToolMixin(
       edgeless: this.edgeless,
       scopeElement: this.toolbarContainer,
       standardWidth: 100,
-      clickToDrag: true,
+      clickToDrag: false,
       onOverlayCreated: (overlay, { data }) => {
         const tool = this.draggableTools.find(t => t.name === data.name);
         if (!tool) return;
@@ -321,7 +321,7 @@ export class EdgelessMindmapToolButton extends EdgelessToolbarToolMixin(
           const { viewport } = this.edgeless.std.get(ViewportElementProvider);
           const { left, top } = viewport;
           const clientPos = { x: x + left, y: y + top };
-          this.draggableController.clickToDrag(icon, clientPos);
+          this.draggableController.dragAndMoveTo(icon, clientPos);
         },
       },
       { global: true }

blocksuite/affine/gfx/shape/src/draggable/shape-draggable.ts

@@ -163,7 +163,7 @@ export class EdgelessToolbarShapeDraggable extends EdgelessToolbarToolMixin(
       edgeless: this.edgeless,
       scopeElement: this.toolbarContainer,
       standardWidth: 100,
-      clickToDrag: true,
+      clickToDrag: false,
       onOverlayCreated: (overlay, element) => {
         const shapeName =
           this.draggableController.states.draggingElement?.data.name;
@@ -219,7 +219,6 @@ export class EdgelessToolbarShapeDraggable extends EdgelessToolbarToolMixin(
       },
       onElementClick: el => {
         this.onShapeClick?.(el.data);
-        this._setShapeOverlayLock(true);
       },
       onEnterOrLeaveScope: (overlay, isOutside) => {
         overlay.element.style.filter = isOutside
@@ -260,7 +259,7 @@ export class EdgelessToolbarShapeDraggable extends EdgelessToolbarToolMixin(
           const { viewport } = this.edgeless.std.get(ViewportElementProvider);
           const { left, top } = viewport;
           const clientPos = { x: x + left, y: y + top };
-          this.draggableController.clickToDrag(el, clientPos);
+          this.draggableController.dragAndMoveTo(el, clientPos);
         },
       },
       { global: true }

blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/draggable-element.controller.ts

@@ -389,6 +389,30 @@ export class EdgelessDraggableElementController<T>
     this.options.edgeless.host.dispatchEvent(mouseMoveEvent);
   }
 
+  dragAndMoveTo(target: HTMLElement, to: { x: number; y: number }) {
+    const targetRect = target.getBoundingClientRect();
+    const targetCenter = {
+      x: targetRect.left + targetRect.width / 2,
+      y: targetRect.top + targetRect.height / 2,
+    };
+
+    const mouseDownEvent = new MouseEvent('mousedown', {
+      clientX: targetCenter.x,
+      clientY: targetCenter.y,
+    });
+    const mouseMoveStartEvent = new MouseEvent('mousemove', {
+      clientX: targetCenter.x,
+      clientY: targetCenter.y,
+    });
+    const mouseMoveToEvent = new MouseEvent('mousemove', {
+      clientX: to.x,
+      clientY: to.y,
+    });
+    target.dispatchEvent(mouseDownEvent);
+    this.options.edgeless.host.dispatchEvent(mouseMoveStartEvent);
+    this.options.edgeless.host.dispatchEvent(mouseMoveToEvent);
+  }
+
   hostConnected() {
     this.host.disposables.add(
       this.gfx.viewport.viewportUpdated.subscribe(({ zoom }) => {

tests/blocksuite/e2e/edgeless/frame/frame-mindmap.spec.ts

@@ -166,6 +166,9 @@ test('add mindmap into frame, then drag root node of mindmap out.', async ({
 
   const button = page.locator('edgeless-mindmap-tool-button');
   await button.click();
+  const mindMapMenu = page.locator('edgeless-mindmap-menu');
+  const mindMapItem = mindMapMenu.locator('.mindmap-item').first();
+  await mindMapItem.click();
   await toViewCoord(page, [100, 200]);
   await clickView(page, [100, 200]);
   const mindmapId = await getFirstContainerId(page, [frameId]);
@@ -198,6 +201,9 @@ test('add mindmap out of frame and add new node in frame then drag frame', async
 
   const button = page.locator('edgeless-mindmap-tool-button');
   await button.click();
+  const mindMapMenu = page.locator('edgeless-mindmap-menu');
+  const mindMapItem = mindMapMenu.locator('.mindmap-item').first();
+  await mindMapItem.click();
   await toViewCoord(page, [20, 200]);
   await clickView(page, [20, 200]);
   await waitNextFrame(page, 100);

tests/blocksuite/e2e/utils/actions/edgeless.ts

@@ -1212,6 +1212,9 @@ export async function triggerComponentToolbarAction(
     case 'addMindmap': {
       const button = page.locator('edgeless-mindmap-tool-button');
       await button.click();
+      const mindMapMenu = page.locator('edgeless-mindmap-menu');
+      const mindMapItem = mindMapMenu.locator('.mindmap-item').first();
+      await mindMapItem.click();
       await page.mouse.move(400, 400);
       await page.mouse.click(400, 400);
       break;