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

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

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());