snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

blocksuite/affine/blocks/image/src/image-edgeless-block.ts

@@ -0,0 +1,375 @@
+import type { BlockCaptionEditor } from '@blocksuite/affine-components/caption';
+import { LoadingIcon } from '@blocksuite/affine-components/icons';
+import { Peekable } from '@blocksuite/affine-components/peek';
+import { ResourceController } from '@blocksuite/affine-components/resource';
+import {
+  type ImageBlockModel,
+  ImageBlockSchema,
+} from '@blocksuite/affine-model';
+import { cssVarV2, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { formatSize } from '@blocksuite/affine-shared/utils';
+import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit';
+import { GfxBlockComponent } from '@blocksuite/std';
+import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
+import { computed } from '@preact/signals-core';
+import { css, html } from 'lit';
+import { query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+
+import {
+  copyImageBlob,
+  downloadImageBlob,
+  refreshData,
+  turnImageIntoCardView,
+} from './utils';
+
+@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;
+    }
+
+    affine-edgeless-image .loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      width: 36px;
+      height: 36px;
+      padding: 5px;
+      border-radius: 8px;
+      background: ${unsafeCSSVarV2(
+        'loading/imageLoadingBackground',
+        '#92929238'
+      )};
+
+      & > svg {
+        font-size: 25.71px;
+      }
+    }
+
+    affine-edgeless-image .affine-image-status {
+      position: absolute;
+      left: 18px;
+      bottom: 18px;
+    }
+
+    affine-edgeless-image .resizable-img,
+    affine-edgeless-image .resizable-img img {
+      width: 100%;
+      height: 100%;
+    }
+
+    affine-edgeless-image .resizable-img {
+      position: relative;
+      overflow: hidden;
+    }
+  `;
+
+  resourceController = new ResourceController(
+    computed(() => this.model.props.sourceId$.value),
+    '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;
+  }
+
+  convertToCardView = () => {
+    turnImageIntoCardView(this).catch(console.error);
+  };
+
+  copy = () => {
+    copyImageBlob(this).catch(console.error);
+  };
+
+  download = () => {
+    downloadImageBlob(this).catch(console.error);
+  };
+
+  refreshData = () => {
+    refreshData(this).catch(console.error);
+  };
+
+  private _handleError() {
+    this.resourceController.updateState({
+      errorMessage: 'Failed to download image!',
+    });
+  }
+
+  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();
+
+    this.contentEditable = 'false';
+
+    this.resourceController.setEngine(this.std.store.blobSync);
+
+    this.disposables.add(this.resourceController.subscribe());
+    this.disposables.add(this.resourceController);
+
+    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, size: rawSize, caption = 'Image' } = this.model.props;
+    const size = rawSize ?? 0;
+    this._resetLodSource(blobUrl);
+
+    const containerStyleMap = styleMap({
+      display: 'flex',
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      transform: `rotate(${rotate}deg)`,
+      transformOrigin: 'center',
+    });
+
+    const resovledState = this.resourceController.resolveStateWith({
+      loadingIcon: LoadingIcon({
+        strokeColor: cssVarV2('button/pureWhiteText'),
+        ringColor: cssVarV2('loading/imageLoadingLayer', '#ffffff8f'),
+      }),
+      errorIcon: BrokenImageIcon(),
+      icon: ImageIcon(),
+      title: 'Image',
+      description: formatSize(size),
+    });
+
+    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}>
+        ${when(
+          blobUrl,
+          () => html`
+            <div class="resizable-img">
+              <img
+                class="drag-target"
+                draggable="false"
+                loading="lazy"
+                src=${imageUrl ?? ''}
+                alt=${caption}
+                @error=${this._handleError}
+              />
+            </div>
+            ${when(loading, () => html`<div class="loading">${icon}</div>`)}
+            ${when(
+              Boolean(error && description),
+              () =>
+                html`<affine-resource-status
+                  class="affine-image-status"
+                  .message=${description}
+                  .needUpload=${needUpload}
+                  .action=${() =>
+                    needUpload
+                      ? this.resourceController.upload()
+                      : this.refreshData()}
+                ></affine-resource-status>`
+            )}
+          `,
+          () =>
+            html`<affine-image-fallback-card
+              .state=${resovledState}
+            ></affine-image-fallback-card>`
+        )}
+        <affine-block-selection .block=${this}></affine-block-selection>
+      </div>
+      <block-caption-editor></block-caption-editor>
+
+      ${Object.values(this.widgets)}
+    `;
+  }
+
+  @query('block-caption-editor')
+  accessor captionEditor!: BlockCaptionEditor | null;
+
+  @query('.resizable-img')
+  accessor resizableImg!: HTMLDivElement;
+}
+
+export const ImageEdgelessBlockInteraction = GfxViewInteractionExtension(
+  ImageBlockSchema.model.flavour,
+  {
+    resizeConstraint: {
+      lockRatio: true,
+    },
+  }
+);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-edgeless-image': ImageEdgelessBlockComponent;
+  }
+}