feat: improve grouping perf in edgeless (#14442)

fix #14433 

#### PR Dependency Tree


* **PR #14442** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Level-of-detail thumbnails for large images.
  * Adaptive pacing for snapping, distribution and other alignment work.
  * RAF coalescer utility to batch high-frequency updates.
  * Operation timing utility to measure synchronous work.

* **Improvements**
* Batch group/ungroup reparenting that preserves element order and
selection.
  * Coalesced panning and drag updates to reduce jitter.
* Connector/group indexing for more reliable updates, deletions and
sync.
  * Throttled viewport refresh behavior.

* **Documentation**
  * Docs added for RAF coalescer and measureOperation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/framework/std/src/gfx/layer.ts

@@ -101,6 +101,8 @@ export class LayerManager extends GfxExtension {
 
   layers: Layer[] = [];
 
+  private readonly _groupChildSnapshot = new Map<string, string[]>();
+
   slots = {
     layerUpdated: new Subject<{
       type: 'delete' | 'add' | 'update';
@@ -148,6 +150,43 @@ export class LayerManager extends GfxExtension {
       : 'block';
   }
 
+  private _getModelById(id: string): GfxModel | null {
+    if (!this._surface) return null;
+
+    return (
+      this._surface.getElementById(id) ??
+      (this._doc.getModelById(id) as GfxModel | undefined) ??
+      null
+    );
+  }
+
+  private _getRelatedGroupElements(
+    group: GfxModel & GfxGroupCompatibleInterface,
+    oldChildIds?: string[]
+  ) {
+    const elements = new Set<GfxModel>([group, ...group.descendantElements]);
+
+    oldChildIds?.forEach(id => {
+      const model = this._getModelById(id);
+      if (!model) return;
+
+      elements.add(model);
+      if (isGfxGroupCompatibleModel(model)) {
+        model.descendantElements.forEach(descendant => {
+          elements.add(descendant);
+        });
+      }
+    });
+
+    return [...elements];
+  }
+
+  private _syncGroupChildSnapshot(
+    group: GfxModel & GfxGroupCompatibleInterface
+  ) {
+    this._groupChildSnapshot.set(group.id, [...group.childIds]);
+  }
+
   private _initLayers() {
     let blockIdx = 0;
     let canvasIdx = 0;
@@ -487,6 +526,29 @@ export class LayerManager extends GfxExtension {
     updateLayersZIndex(layers, index);
   }
 
+  private _refreshElementsInLayer(elements: GfxModel[]) {
+    const uniqueElements = [...new Set(elements)];
+
+    uniqueElements.forEach(element => {
+      const modelType = this._getModelType(element);
+      if (modelType === 'canvas') {
+        removeFromOrderedArray(this.canvasElements, element);
+        insertToOrderedArray(this.canvasElements, element);
+      } else {
+        removeFromOrderedArray(this.blocks, element);
+        insertToOrderedArray(this.blocks, element);
+      }
+    });
+
+    uniqueElements.forEach(element => {
+      this._removeFromLayer(element, this._getModelType(element));
+    });
+
+    uniqueElements.sort(compare).forEach(element => {
+      this._insertIntoLayer(element, this._getModelType(element));
+    });
+  }
+
   private _reset() {
     const elements = (
       this._doc
@@ -512,6 +574,17 @@ export class LayerManager extends GfxExtension {
 
     this.canvasElements.sort(compare);
     this.blocks.sort(compare);
+    this._groupChildSnapshot.clear();
+    this.canvasElements.forEach(element => {
+      if (isGfxGroupCompatibleModel(element)) {
+        this._syncGroupChildSnapshot(element);
+      }
+    });
+    this.blocks.forEach(element => {
+      if (isGfxGroupCompatibleModel(element)) {
+        this._syncGroupChildSnapshot(element);
+      }
+    });
 
     this._initLayers();
     this._buildCanvasLayers();
@@ -522,7 +595,8 @@ export class LayerManager extends GfxExtension {
    */
   private _updateLayer(
     element: GfxModel | GfxLocalElementModel,
-    props?: Record<string, unknown>
+    props?: Record<string, unknown>,
+    oldValues?: Record<string, unknown>
   ) {
     const modelType = this._getModelType(element);
     const isLocalElem = element instanceof GfxLocalElementModel;
@@ -539,7 +613,16 @@ export class LayerManager extends GfxExtension {
     };
 
     if (shouldUpdateGroupChildren) {
-      this._reset();
+      const group = element as GfxModel & GfxGroupCompatibleInterface;
+      const oldChildIds = childIdsChanged
+        ? Array.isArray(oldValues?.['childIds'])
+          ? (oldValues['childIds'] as string[])
+          : this._groupChildSnapshot.get(group.id)
+        : undefined;
+
+      const relatedElements = this._getRelatedGroupElements(group, oldChildIds);
+      this._refreshElementsInLayer(relatedElements);
+      this._syncGroupChildSnapshot(group);
       return true;
     }
 
@@ -581,6 +664,13 @@ export class LayerManager extends GfxExtension {
         element
       );
     }
+
+    if (isContainer) {
+      this._syncGroupChildSnapshot(
+        element as GfxModel & GfxGroupCompatibleInterface
+      );
+    }
+
     this._insertIntoLayer(element as GfxModel, modelType);
 
     if (isContainer) {
@@ -648,7 +738,26 @@ export class LayerManager extends GfxExtension {
     const isLocalElem = element instanceof GfxLocalElementModel;
 
     if (isGroup) {
-      this._reset();
+      const groupElements = this._getRelatedGroupElements(
+        element as GfxModel & GfxGroupCompatibleInterface
+      );
+      const descendants = groupElements.filter(model => model !== element);
+
+      if (!isLocalElem) {
+        const groupType = this._getModelType(element);
+        if (groupType === 'canvas') {
+          removeFromOrderedArray(this.canvasElements, element);
+        } else {
+          removeFromOrderedArray(this.blocks, element);
+        }
+
+        this._removeFromLayer(element, groupType);
+      }
+
+      this._groupChildSnapshot.delete(element.id);
+
+      this._refreshElementsInLayer(descendants);
+      this._buildCanvasLayers();
       this.slots.layerUpdated.next({
         type: 'delete',
         initiatingElement: element as GfxModel,
@@ -680,6 +789,7 @@ export class LayerManager extends GfxExtension {
 
   override unmounted() {
     this.slots.layerUpdated.complete();
+    this._groupChildSnapshot.clear();
     this._disposable.dispose();
   }
 
@@ -777,9 +887,10 @@ export class LayerManager extends GfxExtension {
 
   update(
     element: GfxModel | GfxLocalElementModel,
-    props?: Record<string, unknown>
+    props?: Record<string, unknown>,
+    oldValues?: Record<string, unknown>
   ) {
-    if (this._updateLayer(element, props)) {
+    if (this._updateLayer(element, props, oldValues)) {
       this._buildCanvasLayers();
       this.slots.layerUpdated.next({
         type: 'update',
@@ -867,7 +978,11 @@ export class LayerManager extends GfxExtension {
       this._disposable.add(
         surface.elementUpdated.subscribe(payload => {
           if (payload.props['index'] || payload.props['childIds']) {
-            this.update(surface.getElementById(payload.id)!, payload.props);
+            this.update(
+              surface.getElementById(payload.id)!,
+              payload.props,
+              payload.oldValues
+            );
           }
         })
       );