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 }) => {