Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-09-07 01:09:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): add animation for switching to edgeless mode firstly (#10021)

Browse Source 
Close [BS-2327](https://linear.app/affine-design/issue/BS-2327/page-block-%E5%9C%A8-edgeless-%E5%88%87%E6%8D%A2%E7%BC%A9%E6%94%BE%E5%8A%A8%E7%94%BB)

### What Changes:
- Add a zoom animation when switching to edgeless mode firstly
- Move viewport record from `sessionStorage` to `localStorage`

https://github.com/user-attachments/assets/dac11aab-76bd-44b1-8c0e-4a8a10919841
This commit is contained in:
L-Sun
2025-02-10 07:41:10 +00:00
parent 1d1eab8139
commit 9f56a21d8a
10 changed files with 120 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
+3 -3
View File
@@ -236,7 +236,7 @@ test.describe('edgeless note element toolbar', () => {
await locateModeSwitchButton(page, 'page').click();
expect(notes).toHaveCount(2);
await locateModeSwitchButton(page, 'edgeless').click();
await clickEdgelessModeButton(page);
await clickView(page, [100, 100]);
await displayInPage.click();
await locateModeSwitchButton(page, 'page').click();
@@ -246,7 +246,7 @@ test.describe('edgeless note element toolbar', () => {
const undoButton = page.getByTestId('undo-display-in-page');
const viewTocButton = page.getByTestId('view-in-toc');
await locateModeSwitchButton(page, 'edgeless').click();
await clickEdgelessModeButton(page);
await waitForEditorLoad(page);
await clickView(page, [100, 100]);
await displayInPage.click();
@@ -259,7 +259,7 @@ test.describe('edgeless note element toolbar', () => {
await waitForEditorLoad(page);
expect(notes).toHaveCount(1);
await locateModeSwitchButton(page, 'edgeless').click();
await clickEdgelessModeButton(page);
await waitForEditorLoad(page);
await clickView(page, [100, 100]);
await displayInPage.click();
tests/affine-local/e2e/blocksuite/outline/outline-panel.spec.ts
+6 -1
View File
@@ -6,7 +6,9 @@ import {
createEdgelessNoteBlock,
focusDocTitle,
getEdgelessSelectedIds,
getViewportCenter,
locateElementToolbar,
setViewportCenter,
} from '@affine-test/kit/utils/editor';
import {
pressBackspace,
@@ -207,7 +209,8 @@ test.describe('TOC display', () => {
}) => {
await clickEdgelessModeButton(page);
const toc = await openTocPanel(page);
await createEdgelessNoteBlock(page, [100, 100]);
const viewportCenter = await getViewportCenter(page);
await createEdgelessNoteBlock(page, [viewportCenter.x, viewportCenter.y]);
const card = locateCards(toc, 'edgeless');
await changeNoteDisplayMode(card, 'doc');
@@ -337,6 +340,7 @@ test.describe('TOC and edgeless selection', () => {
page,
}) => {
await clickEdgelessModeButton(page);
await setViewportCenter(page, [0, 0]);
await selectAllByKeyboard(page);
await pressBackspace(page);
await createEdgelessNoteBlock(page, [100, 100]);
@@ -490,6 +494,7 @@ test.describe('advanced visibility control', () => {
page,
}) => {
await clickEdgelessModeButton(page);
await setViewportCenter(page, [0, 0]);
await createEdgelessNoteBlock(page, [100, 100]);
await type(page, 'hello');
await clickView(page, [200, 200]);
tests/affine-local/e2e/links.spec.ts
+4 -4
View File
@@ -1,5 +1,5 @@
import { test } from '@affine-test/kit/playwright';
import { locateModeSwitchButton } from '@affine-test/kit/utils/editor';
import { clickEdgelessModeButton } from '@affine-test/kit/utils/editor';
import {
pasteByKeyboard,
writeTextToClipboard,
@@ -506,7 +506,7 @@ test('the viewport should be fit when the linked document is with edgeless mode'
}) => {
await page.keyboard.press('Enter');
await locateModeSwitchButton(page, 'edgeless').click();
await clickEdgelessModeButton(page);
const note = page.locator('affine-edgeless-note');
const noteBoundingBox = await note.boundingBox();
@@ -570,7 +570,7 @@ test('should show edgeless content when switching card view of linked mode doc i
}) => {
await page.keyboard.press('Enter');
await locateModeSwitchButton(page, 'edgeless').click();
await clickEdgelessModeButton(page);
const note = page.locator('affine-edgeless-note');
const noteBoundingBox = await note.boundingBox();
@@ -596,7 +596,7 @@ test('should show edgeless content when switching card view of linked mode doc i
const url = new URL(page.url());
await clickNewPageButton(page);
await locateModeSwitchButton(page, 'edgeless').click();
await clickEdgelessModeButton(page);
await page.mouse.move(x, y);
await writeTextToClipboard(page, url.toString());