diff --git a/blocksuite/affine/blocks/block-root/src/widgets/page-dragging-area/page-dragging-area.ts b/blocksuite/affine/blocks/block-root/src/widgets/page-dragging-area/page-dragging-area.ts index 8cd24e00f8..eb54d998ec 100644 --- a/blocksuite/affine/blocks/block-root/src/widgets/page-dragging-area/page-dragging-area.ts +++ b/blocksuite/affine/blocks/block-root/src/widgets/page-dragging-area/page-dragging-area.ts @@ -205,23 +205,21 @@ export class AffinePageDraggingAreaWidget extends WidgetComponent< const state = ctx.get('pointerState'); const { button } = state.raw; if (button !== 0) return; - if (isDragArea(state)) { - if (!this._viewport) { - return; - } - this._dragging = true; - const { scrollLeft, scrollTop } = this._viewport; - this._initialScrollOffset = { - left: scrollLeft, - top: scrollTop, - }; - this._initialContainerOffset = { - x: state.containerOffset.x, - y: state.containerOffset.y, - }; - return true; - } - return; + if (!isDragArea(state)) return; + if (!this._viewport) return; + + this._dragging = true; + const { scrollLeft, scrollTop } = this._viewport; + this._initialScrollOffset = { + left: scrollLeft, + top: scrollTop, + }; + this._initialContainerOffset = { + x: state.containerOffset.x, + y: state.containerOffset.y, + }; + + return true; }, { global: true } ); diff --git a/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts b/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts index 6e25674d67..2495e040ef 100644 --- a/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts +++ b/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts @@ -274,8 +274,10 @@ export class AffineToolbarWidget extends WidgetComponent { const dragStart = () => flags.toggle(Flag.Hiding, true); const dragEnd = () => flags.toggle(Flag.Hiding, false); const eventOptions = { passive: false }; - this.handleEvent('dragStart', dragStart); - this.handleEvent('dragEnd', dragEnd); + this.handleEvent('dragStart', () => { + dragStart(); + host.addEventListener('pointerup', dragEnd, { once: true }); + }); this.handleEvent('nativeDrop', dragEnd); disposables.addFromEvent(host, 'dragenter', dragStart, eventOptions); disposables.addFromEvent( @@ -288,9 +290,9 @@ export class AffineToolbarWidget extends WidgetComponent { const rect = host.getBoundingClientRect(); if ( x >= rect.left && + x <= rect.right && y >= rect.top && - x <= rect.bottom && - y <= rect.right + y <= rect.bottom ) return; dragEnd(); diff --git a/tests/affine-local/e2e/blocksuite/paragraph.spec.ts b/tests/affine-local/e2e/blocksuite/paragraph.spec.ts index e0992e511d..0c07d53e57 100644 --- a/tests/affine-local/e2e/blocksuite/paragraph.spec.ts +++ b/tests/affine-local/e2e/blocksuite/paragraph.spec.ts @@ -1,5 +1,5 @@ import { test } from '@affine-test/kit/playwright'; -import { locateFormatBar } from '@affine-test/kit/utils/editor'; +import { locateToolbar } from '@affine-test/kit/utils/editor'; import { pressEnter, pressShiftTab, @@ -33,16 +33,16 @@ test('heading icon should be updated after change heading level', async ({ const paragraph = page.locator('affine-note affine-paragraph').nth(0); await selectAllByKeyboard(page); - const formatBar = locateFormatBar(page); - await formatBar.getByLabel('Conversions').click(); - await formatBar.getByLabel('Heading 1').click(); + const toolbar = locateToolbar(page); + await toolbar.getByLabel('Conversions').click(); + await toolbar.getByLabel('Heading 1').click(); await paragraph.hover(); await expect(page.getByTestId('heading-icon-1')).toBeVisible(); await selectAllByKeyboard(page); - await formatBar.getByLabel('Conversions').click(); - await formatBar.getByLabel('Heading 2').click(); + await toolbar.getByLabel('Conversions').click(); + await toolbar.getByLabel('Heading 2').click(); await paragraph.hover(); await expect(page.getByTestId('heading-icon-1')).toBeHidden(); diff --git a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts b/tests/affine-local/e2e/blocksuite/toolbar.spec.ts index d1be7de761..10f4cddb1e 100644 --- a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts +++ b/tests/affine-local/e2e/blocksuite/toolbar.spec.ts @@ -1,5 +1,6 @@ import { test } from '@affine-test/kit/playwright'; -import { locateFormatBar } from '@affine-test/kit/utils/editor'; +import { locateToolbar } from '@affine-test/kit/utils/editor'; +import { selectAllByKeyboard } from '@affine-test/kit/utils/keyboard'; import { openHomePage } from '@affine-test/kit/utils/load-page'; import { clickNewPageButton, @@ -34,6 +35,33 @@ test.beforeEach(async ({ page }) => { await waitForEmptyEditor(page); }); +test('should toggle toolbar when dragging page area', async ({ page }) => { + await page.keyboard.press('Enter'); + await page.keyboard.type('Roman'); + await selectAllByKeyboard(page); + + const toolbar = locateToolbar(page); + + await expect(toolbar).toBeVisible(); + await expect(toolbar).toBeInViewport(); + + const paragraph = page.locator('affine-note affine-paragraph').nth(0); + const bounds = await paragraph.boundingBox(); + + expect(bounds).toBeTruthy(); + const { x, y, width } = bounds!; + + await page.mouse.move(x + width + 10, y - 10, { steps: 2 }); + await page.mouse.down(); + await page.mouse.move(x + width - 10, y + 10, { steps: 2 }); + + await expect(toolbar).toBeHidden(); + + await page.mouse.up(); + + await expect(toolbar).toBeVisible(); +}); + test.describe('Formatting', () => { test('should change text color', async ({ page }) => { await page.keyboard.press('Enter'); @@ -43,12 +71,12 @@ test.describe('Formatting', () => { await page.keyboard.press('Shift+ArrowLeft'); await page.keyboard.press('Shift+ArrowLeft'); - const formatBar = locateFormatBar(page); - const highlightButton = formatBar.locator('affine-highlight-duotone-icon'); + const toolbar = locateToolbar(page); + const highlightButton = toolbar.locator('affine-highlight-duotone-icon'); await highlightButton.click(); - const fgGreenButton = formatBar.locator('[data-testid="foreground-green"]'); + const fgGreenButton = toolbar.locator('[data-testid="foreground-green"]'); await fgGreenButton.click(); const fgColor = await fgGreenButton .locator('affine-text-duotone-icon') @@ -73,12 +101,12 @@ test.describe('Formatting', () => { await page.keyboard.press('Shift+ArrowLeft'); await page.keyboard.press('Shift+ArrowLeft'); - const formatBar = locateFormatBar(page); - const highlightButton = formatBar.locator('affine-highlight-duotone-icon'); + const toolbar = locateToolbar(page); + const highlightButton = toolbar.locator('affine-highlight-duotone-icon'); await highlightButton.click(); - const fgGreenButton = formatBar.locator('[data-testid="foreground-green"]'); + const fgGreenButton = toolbar.locator('[data-testid="foreground-green"]'); await fgGreenButton.click(); await page.waitForTimeout(200); @@ -104,9 +132,7 @@ test.describe('Formatting', () => { await highlightButton.click(); const yellow = 'var(--affine-text-highlight-yellow)'; - const bgYellowButton = formatBar.locator( - '[data-testid="background-yellow"]' - ); + const bgYellowButton = toolbar.locator('[data-testid="background-yellow"]'); await bgYellowButton.click(); const textSpan2 = paragraph diff --git a/tests/kit/src/utils/editor.ts b/tests/kit/src/utils/editor.ts index bfaa61b62a..80c70a4e56 100644 --- a/tests/kit/src/utils/editor.ts +++ b/tests/kit/src/utils/editor.ts @@ -64,7 +64,7 @@ export async function focusDocTitle(page: Page, editorIndex = 0) { } // ================== Page ================== -export function locateFormatBar(page: Page, editorIndex = 0) { +export function locateToolbar(page: Page, editorIndex = 0) { return locateEditorContainer(page, editorIndex).locator( 'affine-toolbar-widget editor-toolbar' );