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/affine/blocks/image/src/image-edgeless-block.ts

@@ -26,6 +26,11 @@ import {
 
 @Peekable()
 export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockModel> {
+  private static readonly LOD_MIN_IMAGE_BYTES = 1024 * 1024;
+  private static readonly LOD_MIN_IMAGE_PIXELS = 1920 * 1080;
+  private static readonly LOD_MAX_ZOOM = 0.4;
+  private static readonly LOD_THUMBNAIL_MAX_EDGE = 256;
+
   static override styles = css`
     affine-edgeless-image {
       position: relative;
@@ -63,6 +68,11 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
       width: 100%;
       height: 100%;
     }
+
+    affine-edgeless-image .resizable-img {
+      position: relative;
+      overflow: hidden;
+    }
   `;
 
   resourceController = new ResourceController(
@@ -70,6 +80,12 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
     'Image'
   );
 
+  private _lodThumbnailUrl: string | null = null;
+  private _lodSourceUrl: string | null = null;
+  private _lodGeneratingSourceUrl: string | null = null;
+  private _lodGenerationToken = 0;
+  private _lastShouldUseLod = false;
+
   get blobUrl() {
     return this.resourceController.blobUrl$.value;
   }
@@ -96,6 +112,134 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
     });
   }
 
+  private _isLargeImage() {
+    const { width = 0, height = 0, size = 0 } = this.model.props;
+    const pixels = width * height;
+    return (
+      size >= ImageEdgelessBlockComponent.LOD_MIN_IMAGE_BYTES ||
+      pixels >= ImageEdgelessBlockComponent.LOD_MIN_IMAGE_PIXELS
+    );
+  }
+
+  private _shouldUseLod(blobUrl: string | null, zoom = this.gfx.viewport.zoom) {
+    return (
+      Boolean(blobUrl) &&
+      this._isLargeImage() &&
+      zoom <= ImageEdgelessBlockComponent.LOD_MAX_ZOOM
+    );
+  }
+
+  private _revokeLodThumbnail() {
+    if (!this._lodThumbnailUrl) {
+      return;
+    }
+
+    URL.revokeObjectURL(this._lodThumbnailUrl);
+    this._lodThumbnailUrl = null;
+  }
+
+  private _resetLodSource(blobUrl: string | null) {
+    if (this._lodSourceUrl === blobUrl) {
+      return;
+    }
+
+    this._lodGenerationToken += 1;
+    this._lodGeneratingSourceUrl = null;
+    this._lodSourceUrl = blobUrl;
+    this._revokeLodThumbnail();
+  }
+
+  private _createImageElement(src: string) {
+    return new Promise<HTMLImageElement>((resolve, reject) => {
+      const image = new Image();
+      image.decoding = 'async';
+      image.onload = () => resolve(image);
+      image.onerror = () => reject(new Error('Failed to load image'));
+      image.src = src;
+    });
+  }
+
+  private _createThumbnailBlob(image: HTMLImageElement) {
+    const maxEdge = ImageEdgelessBlockComponent.LOD_THUMBNAIL_MAX_EDGE;
+    const longestEdge = Math.max(image.naturalWidth, image.naturalHeight);
+    const scale = longestEdge > maxEdge ? maxEdge / longestEdge : 1;
+    const targetWidth = Math.max(1, Math.round(image.naturalWidth * scale));
+    const targetHeight = Math.max(1, Math.round(image.naturalHeight * scale));
+
+    const canvas = document.createElement('canvas');
+    canvas.width = targetWidth;
+    canvas.height = targetHeight;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      return Promise.resolve<Blob | null>(null);
+    }
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = 'low';
+    ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
+
+    return new Promise<Blob | null>(resolve => {
+      canvas.toBlob(resolve);
+    });
+  }
+
+  private _ensureLodThumbnail(blobUrl: string) {
+    if (
+      this._lodThumbnailUrl ||
+      this._lodGeneratingSourceUrl === blobUrl ||
+      !this._shouldUseLod(blobUrl)
+    ) {
+      return;
+    }
+
+    const token = ++this._lodGenerationToken;
+    this._lodGeneratingSourceUrl = blobUrl;
+
+    void this._createImageElement(blobUrl)
+      .then(image => this._createThumbnailBlob(image))
+      .then(blob => {
+        if (!blob || token !== this._lodGenerationToken || !this.isConnected) {
+          return;
+        }
+
+        const thumbnailUrl = URL.createObjectURL(blob);
+        if (token !== this._lodGenerationToken || !this.isConnected) {
+          URL.revokeObjectURL(thumbnailUrl);
+          return;
+        }
+
+        this._revokeLodThumbnail();
+        this._lodThumbnailUrl = thumbnailUrl;
+
+        if (this._shouldUseLod(this.blobUrl)) {
+          this.requestUpdate();
+        }
+      })
+      .catch(err => {
+        if (token !== this._lodGenerationToken || !this.isConnected) {
+          return;
+        }
+        console.error(err);
+      })
+      .finally(() => {
+        if (token === this._lodGenerationToken) {
+          this._lodGeneratingSourceUrl = null;
+        }
+      });
+  }
+
+  private _updateLodFromViewport(zoom: number) {
+    const shouldUseLod = this._shouldUseLod(this.blobUrl, zoom);
+    if (shouldUseLod === this._lastShouldUseLod) {
+      return;
+    }
+
+    this._lastShouldUseLod = shouldUseLod;
+    if (shouldUseLod && this.blobUrl) {
+      this._ensureLodThumbnail(this.blobUrl);
+    }
+    this.requestUpdate();
+  }
+
   override connectedCallback() {
     super.connectedCallback();
 
@@ -108,14 +252,32 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
 
     this.disposables.add(
       this.model.props.sourceId$.subscribe(() => {
+        this._resetLodSource(null);
         this.refreshData();
       })
     );
+
+    this.disposables.add(
+      this.gfx.viewport.viewportUpdated.subscribe(({ zoom }) => {
+        this._updateLodFromViewport(zoom);
+      })
+    );
+
+    this._lastShouldUseLod = this._shouldUseLod(this.blobUrl);
+  }
+
+  override disconnectedCallback() {
+    this._lodGenerationToken += 1;
+    this._lodGeneratingSourceUrl = null;
+    this._lodSourceUrl = null;
+    this._revokeLodThumbnail();
+    super.disconnectedCallback();
   }
 
   override renderGfxBlock() {
     const blobUrl = this.blobUrl;
     const { rotate = 0, size = 0, caption = 'Image' } = this.model.props;
+    this._resetLodSource(blobUrl);
 
     const containerStyleMap = styleMap({
       display: 'flex',
@@ -138,6 +300,13 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
     });
 
     const { loading, icon, description, error, needUpload } = resovledState;
+    const shouldUseLod = this._shouldUseLod(blobUrl);
+    if (shouldUseLod && blobUrl) {
+      this._ensureLodThumbnail(blobUrl);
+    }
+    this._lastShouldUseLod = shouldUseLod;
+    const imageUrl =
+      shouldUseLod && this._lodThumbnailUrl ? this._lodThumbnailUrl : blobUrl;
 
     return html`
       <div class="affine-image-container" style=${containerStyleMap}>
@@ -149,7 +318,7 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
                 class="drag-target"
                 draggable="false"
                 loading="lazy"
-                src=${blobUrl}
+                src=${imageUrl ?? ''}
                 alt=${caption}
                 @error=${this._handleError}
               />