From 54d194afe7454f7771e1863378b46e7f634b924b Mon Sep 17 00:00:00 2001 From: L-Sun Date: Tue, 11 Feb 2025 14:29:25 +0000 Subject: [PATCH] fix(editor): set edgeless note style will override collapse state (#10098) Close [BS-2489](https://linear.app/affine-design/issue/BS-2489/%E6%94%B9%E5%8F%98note-style%E4%BC%9A%E9%87%8D%E7%BD%AEcollapse%E7%8A%B6%E6%80%81) --- .../components/panel/note-shadow-panel.ts | 1 + .../element-toolbar/change-note-button.ts | 4 + .../custom/widgets/edgeless-note-header.tsx | 14 ++- .../e2e/blocksuite/edgeless/note.spec.ts | 90 +++++++++++++++++++ 4 files changed, 107 insertions(+), 2 deletions(-) diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/note-shadow-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/note-shadow-panel.ts index bec1ddfd81..2682ace7df 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/note-shadow-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/note-shadow-panel.ts @@ -118,6 +118,7 @@ export class EdgelessNoteShadowPanel extends WithDisposable(LitElement) { > { const props = { edgeless: { + ...note.edgeless, style: { ...note.edgeless.style, borderRadius, @@ -275,6 +276,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { this.notes.forEach(note => { const props = { edgeless: { + ...note.edgeless, style: { ...note.edgeless.style, shadowType, @@ -289,6 +291,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { this.notes.forEach(note => { const props = { edgeless: { + ...note.edgeless, style: { ...note.edgeless.style, borderStyle, @@ -303,6 +306,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) { this.notes.forEach(note => { const props = { edgeless: { + ...note.edgeless, style: { ...note.edgeless.style, borderSize, diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.tsx index d2002512d2..ef6cd06813 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/edgeless-note-header.tsx @@ -44,8 +44,18 @@ const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => { ); useEffect(() => { - setCollapsed(note.edgeless.collapse); - }, [note.edgeless.collapse]); + return note.edgeless$.subscribe(({ collapse, collapsedHeight }) => { + if ( + collapse && + collapsedHeight && + Math.abs(collapsedHeight - styles.headerHeight) < 1 + ) { + setCollapsed(true); + } else { + setCollapsed(false); + } + }); + }, [note.edgeless$]); useEffect(() => { if (!gfx) return; diff --git a/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts b/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts index 61601f6a1e..bd6714b4b5 100644 --- a/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts +++ b/tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts @@ -22,6 +22,11 @@ import { type, waitForEditorLoad, } from '@affine-test/kit/utils/page-logic'; +import type { AffineEditorContainer } from '@blocksuite/affine/presets'; +import type { + EdgelessRootBlockComponent, + NoteBlockModel, +} from '@blocksuite/blocks'; import { expect, type Page } from '@playwright/test'; const title = 'Edgeless Note Header Test'; @@ -279,4 +284,89 @@ test.describe('edgeless note element toolbar', () => { ); expect(highlightNoteCards).toHaveCount(1); }); + + test('note edgeless styles', async ({ page }) => { + const getNoteEdgelessProps = async (page: Page, noteId: string) => { + const container = locateEditorContainer(page); + return await container.evaluate( + (container: AffineEditorContainer, noteId) => { + const root = container.querySelector( + 'affine-edgeless-root' + ) as EdgelessRootBlockComponent; + const note = root.gfx.getElementById(noteId) as NoteBlockModel; + return note.edgeless; + }, + noteId + ); + }; + + const toolbar = locateElementToolbar(page); + + await selectAllByKeyboard(page); + const noteId = (await getEdgelessSelectedIds(page))[0]; + + expect(await getNoteEdgelessProps(page, noteId)).toEqual({ + style: { + borderRadius: 8, + borderSize: 4, + borderStyle: 'none', + shadowType: '--affine-note-shadow-box', + }, + }); + + await toolbar.getByRole('button', { name: 'Shadow style' }).click(); + await toolbar.getByTestId('affine-note-shadow-film').click(); + + expect(await getNoteEdgelessProps(page, noteId)).toEqual({ + style: { + borderRadius: 8, + borderSize: 4, + borderStyle: 'none', + shadowType: '--affine-note-shadow-film', + }, + }); + + await toolbar.getByRole('button', { name: 'Border style' }).click(); + await toolbar.locator('.mode-solid').click(); + await toolbar.getByRole('button', { name: 'Border style' }).click(); + await toolbar.locator('edgeless-line-width-panel').getByLabel('8').click(); + + expect(await getNoteEdgelessProps(page, noteId)).toEqual({ + style: { + borderRadius: 8, + borderSize: 8, + borderStyle: 'solid', + shadowType: '--affine-note-shadow-film', + }, + }); + + await toolbar.getByRole('button', { name: 'Corners' }).click(); + await toolbar.locator('edgeless-size-panel').getByText('Large').click(); + + expect(await getNoteEdgelessProps(page, noteId)).toEqual({ + style: { + borderRadius: 24, + borderSize: 8, + borderStyle: 'solid', + shadowType: '--affine-note-shadow-film', + }, + }); + + const headerToolbar = page.getByTestId('edgeless-page-block-header'); + const toggleButton = headerToolbar.getByTestId( + 'edgeless-note-toggle-button' + ); + await toggleButton.click(); + + expect(await getNoteEdgelessProps(page, noteId)).toEqual({ + collapse: true, + collapsedHeight: 48, + style: { + borderRadius: 24, + borderSize: 8, + borderStyle: 'solid', + shadowType: '--affine-note-shadow-film', + }, + }); + }); });