chore(core): improve scroll anchoring (#8132)

Upstreams: https://github.com/toeverything/blocksuite/pull/8335
* set `padding` to `[20,20,100,20]`
* cancel smooth movement and scaling
* focus and zoom in on elements/blocks

packages/frontend/core/src/modules/editor/entities/editor.ts

@@ -169,11 +169,10 @@ export class Editor extends Entity {
         get(this.mode$) === 'edgeless' && selector?.elementIds?.length
           ? selector?.elementIds?.[0]
           : selector?.blockIds?.[0];
-      if (id) {
+
-        return { id, refreshKey: selector?.refreshKey };
+      if (!id) return null;
-      } else {
+
-        return null;
+      return { id, refreshKey: selector?.refreshKey };
-      }
     });
     if (focusAt$.value === null && docTitle) {
       const title = docTitle.querySelector<

packages/frontend/core/src/modules/editor/utils/scroll-anchoring.ts

@@ -1,9 +1,10 @@
-import type { BlockStdScope } from '@blocksuite/block-std';
+import type { BlockStdScope, SelectionManager } from '@blocksuite/block-std';
 import type {
   DocMode,
   EdgelessRootService,
   PageRootService,
 } from '@blocksuite/blocks';
+import { ZOOM_MAX } from '@blocksuite/blocks';
 import { Bound, deserializeXYWH } from '@blocksuite/global/utils';
 
 function scrollAnchoringInEdgelessMode(
@@ -11,23 +12,14 @@ function scrollAnchoringInEdgelessMode(
   id: string
 ) {
   requestAnimationFrame(() => {
-    let isNotInNote = true;
     let bounds: Bound | null = null;
+    let pageSelection: SelectionManager | null = null;
 
     const blockComponent = service.std.view.getBlock(id);
-
     const parentComponent = blockComponent?.parentComponent;
     if (parentComponent && parentComponent.flavour === 'affine:note') {
-      isNotInNote = false;
+      pageSelection = parentComponent.std.selection;
-
+      if (!pageSelection) return;
-      const selection = parentComponent.std.selection;
-      if (!selection) return;
-
-      selection.set([
-        selection.create('block', {
-          blockId: id,
-        }),
-      ]);
 
       const { left: x, width: w } = parentComponent.getBoundingClientRect();
       const { top: y, height: h } = blockComponent.getBoundingClientRect();
@@ -48,20 +40,28 @@ function scrollAnchoringInEdgelessMode(
 
     if (!bounds) return;
 
-    if (isNotInNote) {
+    const { zoom, centerX, centerY } = service.getFitToScreenData(
+      [20, 20, 100, 20],
+      [bounds],
+      ZOOM_MAX
+    );
+
+    service.viewport.setCenter(centerX, centerY);
+    service.viewport.setZoom(zoom);
+
+    if (pageSelection) {
+      pageSelection.setGroup('note', [
+        pageSelection.create('block', {
+          blockId: id,
+        }),
+      ]);
+    } else {
       service.selection.set({
         elements: [id],
         editing: false,
       });
     }
 
-    const { zoom, centerX, centerY } = service.getFitToScreenData(
-      [20, 20, 20, 20],
-      [bounds]
-    );
-
-    service.viewport.setViewport(zoom, [centerX, centerY]);
-
     // const surfaceComponent = service.std.view.getBlock(service.surface.id);
     // if (!surfaceComponent) return;
     // (surfaceComponent as SurfaceBlockComponent).refresh();
@@ -82,7 +82,7 @@ function scrollAnchoringInPageMode(service: PageRootService, id: string) {
   const selection = service.std.selection;
   if (!selection) return;
 
-  selection.set([
+  selection.setGroup('note', [
     selection.create('block', {
       blockId: id,
     }),