diff --git a/blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-menu.ts b/blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-menu.ts index 77f1a8ac7..ac9235990 100644 --- a/blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-menu.ts +++ b/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() { diff --git a/blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-tool-button.ts b/blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-tool-button.ts index 82bb15b9f..dfc1b2f09 100644 --- a/blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-tool-button.ts +++ b/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 } diff --git a/blocksuite/affine/gfx/shape/src/draggable/shape-draggable.ts b/blocksuite/affine/gfx/shape/src/draggable/shape-draggable.ts index 770d273b9..0a06f44e9 100644 --- a/blocksuite/affine/gfx/shape/src/draggable/shape-draggable.ts +++ b/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 } diff --git a/blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/draggable-element.controller.ts b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/draggable-element.controller.ts index c112c49a2..d48621179 100644 --- a/blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/draggable-element.controller.ts +++ b/blocksuite/affine/widgets/widget-edgeless-toolbar/src/draggable/draggable-element.controller.ts @@ -389,6 +389,30 @@ export class EdgelessDraggableElementController 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 }) => { diff --git a/tests/blocksuite/e2e/edgeless/frame/frame-mindmap.spec.ts b/tests/blocksuite/e2e/edgeless/frame/frame-mindmap.spec.ts index 68cf9dc62..05fe01545 100644 --- a/tests/blocksuite/e2e/edgeless/frame/frame-mindmap.spec.ts +++ b/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); diff --git a/tests/blocksuite/e2e/utils/actions/edgeless.ts b/tests/blocksuite/e2e/utils/actions/edgeless.ts index 2055734bb..5f6143245 100644 --- a/tests/blocksuite/e2e/utils/actions/edgeless.ts +++ b/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;