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

tests/kit/src/utils/editor.ts

@@ -36,6 +36,8 @@ export async function ensureInPageMode(page: Page) {
 
 export async function ensureInEdgelessMode(page: Page) {
   await expect(locateModeSwitchButton(page, 'edgeless', true)).toBeVisible();
+  // wait zoom animation
+  await page.waitForTimeout(500);
 }
 
 export async function getPageMode(page: Page): Promise<'page' | 'edgeless'> {
@@ -80,6 +82,32 @@ export async function getEdgelessSelectedIds(page: Page, editorIndex = 0) {
   });
 }
 
+export async function getViewportCenter(page: Page, editorIndex = 0) {
+  const container = locateEditorContainer(page, editorIndex);
+  return container.evaluate((container: AffineEditorContainer) => {
+    const root = container.querySelector('affine-edgeless-root');
+    if (!root) {
+      throw new Error('Edgeless root not found');
+    }
+    return root.gfx.viewport.center;
+  });
+}
+
+export async function setViewportCenter(
+  page: Page,
+  center: IVec,
+  editorIndex = 0
+) {
+  const container = locateEditorContainer(page, editorIndex);
+  return container.evaluate((container: AffineEditorContainer, center) => {
+    const root = container.querySelector('affine-edgeless-root');
+    if (!root) {
+      throw new Error('Edgeless root not found');
+    }
+    root.gfx.viewport.setCenter(center[0], center[1]);
+  }, center);
+}
+
 /**
  * Convert a canvas point to view coordinate
  * @param point the coordinate on the canvas

tests/kit/src/utils/page-logic.ts

@@ -33,13 +33,6 @@ export async function waitForAllPagesLoad(page: Page) {
 }
 
 export async function clickNewPageButton(page: Page, title?: string) {
-  // FiXME: when the page is in edgeless mode, clickNewPageButton will create a new edgeless page
-  const edgelessPage = page.locator('edgeless-editor');
-  if (await edgelessPage.isVisible()) {
-    await page.getByTestId('switch-page-mode-button').click({
-      delay: 100,
-    });
-  }
   // fixme(himself65): if too fast, the page will crash
   await page.getByTestId('sidebar-new-page-button').click({
     delay: 100,