@formicoidea/labre-core 0.50.0 → 0.52.0

package/dist/_pkgs/affine-block-image/crop/crop-overlay.js

@@ -0,0 +1,343 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { unsafeCSSVarV2 } from '../../affine-shared/theme/index.js';
+import { WithDisposable } from '../../global/lit/index.js';
+import { css, html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { moveCrop, resizeCrop, WHOLE_IMAGE, } from './crop-math.js';
+const CORNERS = ['nw', 'ne', 'sw', 'se'];
+const rectStyle = (rect) => styleMap({
+    left: `${rect.x * 100}%`,
+    top: `${rect.y * 100}%`,
+    width: `${rect.w * 100}%`,
+    height: `${rect.h * 100}%`,
+});
+/**
+ * The crop frame (ADR 0037): the WHOLE source, laid over the block at the
+ * place it would occupy uncropped (the parent sizes this element with
+ * `wholeImageFrame`), dimmed outside the window being edited.
+ *
+ * Dragging the window moves it, dragging a corner resizes it, the ratio held
+ * when `ratio` is set. The draft lives here while the pointer is down; the
+ * release hands it to `onCommit` once — one gesture, one write, one undo
+ * step, decided by the caller (`writeImageCrop`).
+ *
+ * Pointer events never reach the editor while the frame is open: a press on
+ * the frame would otherwise start a canvas drag or a page selection. Escape,
+ * Enter or a press anywhere else calls `onExit`.
+ */
+let ImageCropOverlay = (() => {
+    let _classSuper = WithDisposable(LitElement);
+    let _src_decorators;
+    let _src_initializers = [];
+    let _src_extraInitializers = [];
+    let _crop_decorators;
+    let _crop_initializers = [];
+    let _crop_extraInitializers = [];
+    let _ratio_decorators;
+    let _ratio_initializers = [];
+    let _ratio_extraInitializers = [];
+    let _rotate_decorators;
+    let _rotate_initializers = [];
+    let _rotate_extraInitializers = [];
+    let _onCommit_decorators;
+    let _onCommit_initializers = [];
+    let _onCommit_extraInitializers = [];
+    let _onExit_decorators;
+    let _onExit_initializers = [];
+    let _onExit_extraInitializers = [];
+    let _draft_decorators;
+    let _draft_initializers = [];
+    let _draft_extraInitializers = [];
+    return class ImageCropOverlay extends _classSuper {
+        constructor() {
+            super(...arguments);
+            this.#src_accessor_storage = __runInitializers(this, _src_initializers, '');
+            this.#crop_accessor_storage = (__runInitializers(this, _src_extraInitializers), __runInitializers(this, _crop_initializers, WHOLE_IMAGE));
+            this.#ratio_accessor_storage = (__runInitializers(this, _crop_extraInitializers), __runInitializers(this, _ratio_initializers, null));
+            this.#rotate_accessor_storage = (__runInitializers(this, _ratio_extraInitializers), __runInitializers(this, _rotate_initializers, 0));
+            this.#onCommit_accessor_storage = (__runInitializers(this, _rotate_extraInitializers), __runInitializers(this, _onCommit_initializers, () => { }));
+            this.#onExit_accessor_storage = (__runInitializers(this, _onCommit_extraInitializers), __runInitializers(this, _onExit_initializers, () => { }));
+            this.#draft_accessor_storage = (__runInitializers(this, _onExit_extraInitializers), __runInitializers(this, _draft_initializers, WHOLE_IMAGE));
+            this._dragging = (__runInitializers(this, _draft_extraInitializers), false);
+            /** Removes the listeners of the gesture in progress, if any. */
+            this._releaseGesture = null;
+            this._stop = (event) => event.stopPropagation();
+            this._onOutsidePointer = (event) => {
+                if (event.composedPath().includes(this))
+                    return;
+                this.onExit();
+            };
+            this._onKeydown = (event) => {
+                if (event.key !== 'Escape' && event.key !== 'Enter')
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                this.onExit();
+            };
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _src_decorators = [property({ attribute: false })];
+            _crop_decorators = [property({ attribute: false })];
+            _ratio_decorators = [property({ attribute: false })];
+            _rotate_decorators = [property({ attribute: false })];
+            _onCommit_decorators = [property({ attribute: false })];
+            _onExit_decorators = [property({ attribute: false })];
+            _draft_decorators = [state()];
+            __esDecorate(this, null, _src_decorators, { kind: "accessor", name: "src", static: false, private: false, access: { has: obj => "src" in obj, get: obj => obj.src, set: (obj, value) => { obj.src = value; } }, metadata: _metadata }, _src_initializers, _src_extraInitializers);
+            __esDecorate(this, null, _crop_decorators, { kind: "accessor", name: "crop", static: false, private: false, access: { has: obj => "crop" in obj, get: obj => obj.crop, set: (obj, value) => { obj.crop = value; } }, metadata: _metadata }, _crop_initializers, _crop_extraInitializers);
+            __esDecorate(this, null, _ratio_decorators, { kind: "accessor", name: "ratio", static: false, private: false, access: { has: obj => "ratio" in obj, get: obj => obj.ratio, set: (obj, value) => { obj.ratio = value; } }, metadata: _metadata }, _ratio_initializers, _ratio_extraInitializers);
+            __esDecorate(this, null, _rotate_decorators, { kind: "accessor", name: "rotate", static: false, private: false, access: { has: obj => "rotate" in obj, get: obj => obj.rotate, set: (obj, value) => { obj.rotate = value; } }, metadata: _metadata }, _rotate_initializers, _rotate_extraInitializers);
+            __esDecorate(this, null, _onCommit_decorators, { kind: "accessor", name: "onCommit", static: false, private: false, access: { has: obj => "onCommit" in obj, get: obj => obj.onCommit, set: (obj, value) => { obj.onCommit = value; } }, metadata: _metadata }, _onCommit_initializers, _onCommit_extraInitializers);
+            __esDecorate(this, null, _onExit_decorators, { kind: "accessor", name: "onExit", static: false, private: false, access: { has: obj => "onExit" in obj, get: obj => obj.onExit, set: (obj, value) => { obj.onExit = value; } }, metadata: _metadata }, _onExit_initializers, _onExit_extraInitializers);
+            __esDecorate(this, null, _draft_decorators, { kind: "accessor", name: "draft", static: false, private: false, access: { has: obj => "draft" in obj, get: obj => obj.draft, set: (obj, value) => { obj.draft = value; } }, metadata: _metadata }, _draft_initializers, _draft_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static { this.styles = css `
+    :host {
+      position: absolute;
+      z-index: 1;
+      display: block;
+      touch-action: none;
+      user-select: none;
+    }
+
+    .clip {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    .shade {
+      position: absolute;
+      box-shadow: 0 0 0 100000px
+        ${unsafeCSSVarV2('layer/background/modal', 'rgba(0, 0, 0, 0.7)')};
+      pointer-events: none;
+    }
+
+    .window {
+      position: absolute;
+      box-sizing: border-box;
+      border: 1px solid ${unsafeCSSVarV2('button/primary')};
+      cursor: move;
+    }
+
+    .handle {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      box-sizing: border-box;
+      border: 1px solid ${unsafeCSSVarV2('button/primary')};
+      border-radius: 2px;
+      background: ${unsafeCSSVarV2('layer/pureWhite')};
+    }
+
+    /* A wider grip than the square drawn, for a finger. */
+    .handle::before {
+      content: '';
+      position: absolute;
+      inset: -10px;
+    }
+
+    .handle[data-corner='nw'] {
+      left: -6px;
+      top: -6px;
+      cursor: nwse-resize;
+    }
+
+    .handle[data-corner='ne'] {
+      right: -6px;
+      top: -6px;
+      cursor: nesw-resize;
+    }
+
+    .handle[data-corner='sw'] {
+      left: -6px;
+      bottom: -6px;
+      cursor: nesw-resize;
+    }
+
+    .handle[data-corner='se'] {
+      right: -6px;
+      bottom: -6px;
+      cursor: nwse-resize;
+    }
+  `; }
+        #src_accessor_storage;
+        get src() { return this.#src_accessor_storage; }
+        set src(value) { this.#src_accessor_storage = value; }
+        #crop_accessor_storage;
+        /** The stored crop the frame opens on; the whole image when uncropped. */
+        get crop() { return this.#crop_accessor_storage; }
+        set crop(value) { this.#crop_accessor_storage = value; }
+        #ratio_accessor_storage;
+        /** Normalised `w / h` to hold while resizing, `null` for a free crop. */
+        get ratio() { return this.#ratio_accessor_storage; }
+        set ratio(value) { this.#ratio_accessor_storage = value; }
+        #rotate_accessor_storage;
+        /** The block's rotation in degrees (canvas only), for pointer deltas. */
+        get rotate() { return this.#rotate_accessor_storage; }
+        set rotate(value) { this.#rotate_accessor_storage = value; }
+        #onCommit_accessor_storage;
+        get onCommit() { return this.#onCommit_accessor_storage; }
+        set onCommit(value) { this.#onCommit_accessor_storage = value; }
+        #onExit_accessor_storage;
+        get onExit() { return this.#onExit_accessor_storage; }
+        set onExit(value) { this.#onExit_accessor_storage = value; }
+        #draft_accessor_storage;
+        get draft() { return this.#draft_accessor_storage; }
+        set draft(value) { this.#draft_accessor_storage = value; }
+        /**
+         * The document-wide listeners (a press elsewhere, Escape, Enter) live only
+         * as long as this element: the frame is rendered while it is open and
+         * removed when it closes, which disposes them.
+         */
+        connectedCallback() {
+            super.connectedCallback();
+            this.disposables.add(() => this._releaseGesture?.());
+            this.disposables.addFromEvent(this, 'pointerdown', this._stop);
+            this.disposables.addFromEvent(this, 'click', this._stop);
+            this.disposables.addFromEvent(this, 'dblclick', this._stop);
+            this.disposables.addFromEvent(document, 'pointerdown', this._onOutsidePointer, true);
+            this.disposables.addFromEvent(document, 'keydown', this._onKeydown, true);
+        }
+        willUpdate(changed) {
+            if (changed.has('crop') && !this._dragging)
+                this.draft = this.crop;
+        }
+        /**
+         * Client pixels per layout pixel, read from the rendered box: the canvas
+         * zoom and any CSS scale, without asking the viewport. The bounding box of
+         * a rotated element is wider than the element, hence the trigonometry.
+         */
+        _geometry() {
+            const width = this.offsetWidth;
+            const height = this.offsetHeight;
+            const t = (this.rotate * Math.PI) / 180;
+            const cos = Math.cos(t);
+            const sin = Math.sin(t);
+            const span = width * Math.abs(cos) + height * Math.abs(sin);
+            const scale = span > 0 ? this.getBoundingClientRect().width / span : 1;
+            return { width, height, cos, sin, scale: scale || 1 };
+        }
+        _startGesture(event, grip) {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const start = this.draft;
+            const originX = event.clientX;
+            const originY = event.clientY;
+            const { width, height, cos, sin, scale } = this._geometry();
+            if (width <= 0 || height <= 0)
+                return;
+            this._dragging = true;
+            const onMove = (move) => {
+                move.preventDefault();
+                move.stopPropagation();
+                const cdx = move.clientX - originX;
+                const cdy = move.clientY - originY;
+                const dx = (cdx * cos + cdy * sin) / scale / width;
+                const dy = (-cdx * sin + cdy * cos) / scale / height;
+                this.draft =
+                    grip === 'move'
+                        ? moveCrop(start, dx, dy)
+                        : resizeCrop(start, grip, dx, dy, this.ratio);
+            };
+            const finish = (end, commit) => {
+                end.preventDefault();
+                end.stopPropagation();
+                this._releaseGesture?.();
+                this._dragging = false;
+                if (commit) {
+                    this.onCommit(this.draft);
+                }
+                else {
+                    this.draft = this.crop;
+                }
+            };
+            const onUp = (end) => finish(end, true);
+            const onCancel = (end) => finish(end, false);
+            this._releaseGesture?.();
+            window.addEventListener('pointermove', onMove, true);
+            window.addEventListener('pointerup', onUp, true);
+            window.addEventListener('pointercancel', onCancel, true);
+            this._releaseGesture = () => {
+                window.removeEventListener('pointermove', onMove, true);
+                window.removeEventListener('pointerup', onUp, true);
+                window.removeEventListener('pointercancel', onCancel, true);
+                this._releaseGesture = null;
+            };
+        }
+        render() {
+            const draft = this.draft;
+            return html `
+      <div class="clip">
+        <img src=${this.src} draggable="false" alt="" />
+        <div class="shade" style=${rectStyle(draft)}></div>
+      </div>
+      <div
+        class="window"
+        data-testid="image-crop-window"
+        style=${rectStyle(draft)}
+        @pointerdown=${(event) => this._startGesture(event, 'move')}
+      >
+        ${repeat(CORNERS, corner => corner, corner => html `
+            <div
+              class="handle"
+              data-corner=${corner}
+              data-testid=${`image-crop-handle-${corner}`}
+              @pointerdown=${(event) => {
+                event.stopPropagation();
+                this._startGesture(event, corner);
+            }}
+            ></div>
+          `)}
+      </div>
+    `;
+        }
+    };
+})();
+export { ImageCropOverlay };

package/dist/_pkgs/affine-block-image/crop/crop-toolbar.d.ts

@@ -0,0 +1,12 @@
+import { type ToolbarAction, type ToolbarContext } from '../../affine-shared/services/index.js';
+import type { ImageCropController } from './crop-controller.js';
+/**
+ * « Rogner » in the image toolbar (ADR 0037), page and canvas alike: the
+ * toolbar's own `editor-menu-button` of `editor-menu-action`s, nothing drawn
+ * anew. Hidden on a readonly page and until the picture has loaded — a preset
+ * needs the source's size.
+ */
+export declare function imageCropToolbarAction(blockOf: (ctx: ToolbarContext) => {
+    cropController: ImageCropController;
+    blobUrl?: string | null;
+} | null): ToolbarAction;

package/dist/_pkgs/affine-block-image/crop/crop-toolbar.js

@@ -0,0 +1,78 @@
+import { EditorChevronDown } from '../../affine-components/toolbar/index.js';
+import { translateKey, } from '../../affine-shared/services/index.js';
+import { CropIcon } from '@blocksuite/icons/lit';
+import { html, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { IMAGE_TOOLBAR_CROP, IMAGE_TOOLBAR_CROP_1_1, IMAGE_TOOLBAR_CROP_4_3, IMAGE_TOOLBAR_CROP_16_9, IMAGE_TOOLBAR_CROP_FREE, IMAGE_TOOLBAR_CROP_ORIGINAL, } from '../translations.js';
+const MASK_ENTRIES = [
+    ['free', IMAGE_TOOLBAR_CROP_FREE],
+    ['16:9', IMAGE_TOOLBAR_CROP_16_9],
+    ['4:3', IMAGE_TOOLBAR_CROP_4_3],
+    ['1:1', IMAGE_TOOLBAR_CROP_1_1],
+];
+const testIdOf = (mask) => `image-crop-${mask.replace(':', '-')}`;
+/**
+ * « Rogner » in the image toolbar (ADR 0037), page and canvas alike: the
+ * toolbar's own `editor-menu-button` of `editor-menu-action`s, nothing drawn
+ * anew. Hidden on a readonly page and until the picture has loaded — a preset
+ * needs the source's size.
+ */
+export function imageCropToolbarAction(blockOf) {
+    return {
+        id: 'b.crop',
+        when: ctx => !ctx.readonly,
+        content(ctx) {
+            const block = blockOf(ctx);
+            if (!block?.blobUrl)
+                return null;
+            const controller = block.cropController;
+            const crop = controller.crop$.value;
+            const current = crop ? (crop.mask ?? 'free') : null;
+            const label = translateKey(ctx.std, ...IMAGE_TOOLBAR_CROP);
+            const original = translateKey(ctx.std, ...IMAGE_TOOLBAR_CROP_ORIGINAL);
+            return html `
+        <editor-menu-button
+          .contentPadding="${'8px'}"
+          .button=${html `
+            <editor-icon-button
+              aria-label=${label}
+              data-testid="image-crop-button"
+              .tooltip=${label}
+            >
+              ${CropIcon()} ${EditorChevronDown}
+            </editor-icon-button>
+          `}
+        >
+          <div data-size="small" data-orientation="vertical">
+            ${repeat(MASK_ENTRIES, ([mask]) => mask, ([mask, wording]) => {
+                const word = translateKey(ctx.std, ...wording);
+                return html `
+                  <editor-menu-action
+                    aria-label=${word}
+                    data-testid=${testIdOf(mask)}
+                    ?data-selected=${current === mask}
+                    @click=${() => controller.choose(mask)}
+                  >
+                    <span class="label">${word}</span>
+                  </editor-menu-action>
+                `;
+            })}
+            ${crop
+                ? html `
+                  <editor-menu-action
+                    aria-label=${original}
+                    data-testid="image-crop-original"
+                    @click=${() => {
+                    controller.restoreOriginal();
+                }}
+                  >
+                    <span class="label">${original}</span>
+                  </editor-menu-action>
+                `
+                : nothing}
+          </div>
+        </editor-menu-button>
+      `;
+        },
+    };
+}

package/dist/_pkgs/affine-block-image/crop/write-crop.d.ts

@@ -0,0 +1,16 @@
+import { type ImageBlockModel, type ImageCropMask } from '../../affine-model/index.js';
+import { type CropRect } from './crop-math.js';
+/**
+ * Record one crop gesture (ADR 0037). Answers whether anything was written.
+ *
+ * - Nothing on a readonly store, nothing when the crop (mask included) is
+ *   already the one asked for: an unchanged write is an empty undo step.
+ * - One gesture, one undo step: `captureSync` then a single transaction.
+ * - The whole image, or `undefined`, REMOVES the key; a full rectangle is
+ *   never stored.
+ * - On the canvas the box is the visible part, so `xywh` moves in the same
+ *   transaction: the picture keeps its scale and position. On a page,
+ *   `width`/`height` stay those of the whole picture and nothing else moves.
+ * - `sourceId` is never touched: the bytes do not change.
+ */
+export declare function writeImageCrop(model: ImageBlockModel, next: CropRect | undefined, mask: ImageCropMask, onCanvas: boolean): boolean;

package/dist/_pkgs/affine-block-image/crop/write-crop.js

@@ -0,0 +1,57 @@
+import { isWholeImage, readImageCrop, } from '../../affine-model/index.js';
+import { Bound } from '../../global/gfx/index.js';
+import { cropBoundFor, sameCropRect, WHOLE_IMAGE, } from './crop-math.js';
+/**
+ * Record one crop gesture (ADR 0037). Answers whether anything was written.
+ *
+ * - Nothing on a readonly store, nothing when the crop (mask included) is
+ *   already the one asked for: an unchanged write is an empty undo step.
+ * - One gesture, one undo step: `captureSync` then a single transaction.
+ * - The whole image, or `undefined`, REMOVES the key; a full rectangle is
+ *   never stored.
+ * - On the canvas the box is the visible part, so `xywh` moves in the same
+ *   transaction: the picture keeps its scale and position. On a page,
+ *   `width`/`height` stay those of the whole picture and nothing else moves.
+ * - `sourceId` is never touched: the bytes do not change.
+ */
+export function writeImageCrop(model, next, mask, onCanvas) {
+    const store = model.store;
+    if (store.readonly)
+        return false;
+    const current = readImageCrop(model.props.crop);
+    const target = next && !isWholeImage(next)
+        ? {
+            x: next.x,
+            y: next.y,
+            w: next.w,
+            h: next.h,
+            ...(mask === 'free' ? {} : { mask }),
+        }
+        : undefined;
+    if (!current && !target)
+        return false;
+    if (current &&
+        target &&
+        sameCropRect(current, target) &&
+        (current.mask ?? 'free') === (target.mask ?? 'free')) {
+        return false;
+    }
+    const props = {};
+    if (onCanvas) {
+        const bound = Bound.deserialize(model.xywh);
+        if (bound.w > 0 && bound.h > 0) {
+            const { x, y, w, h } = cropBoundFor(bound, model.props.rotate ?? 0, current ?? WHOLE_IMAGE, target ?? WHOLE_IMAGE);
+            props.xywh = new Bound(x, y, w, h).serialize();
+        }
+    }
+    if (target)
+        props.crop = target;
+    store.captureSync();
+    store.transact(() => {
+        if (Object.keys(props).length > 0)
+            store.updateBlock(model, props);
+        if (!target)
+            delete model.props.crop;
+    });
+    return true;
+}

package/dist/_pkgs/affine-block-image/edgeless-clipboard-config.js

@@ -3,7 +3,7 @@ import {} from '../store/index.js';
 export class EdgelessClipboardImageConfig extends EdgelessClipboardConfig {
     static { this.key = 'affine:image'; }
     async createBlock(image) {
-        const { xywh, rotate, sourceId, size, width, height, caption } = image.props;
+        const { xywh, rotate, sourceId, size, width, height, caption, crop } = image.props;
         if (!this.surface)
             return null;
         if (!(await this.std.workspace.blobSync.get(sourceId))) {
@@ -17,6 +17,9 @@ export class EdgelessClipboardImageConfig extends EdgelessClipboardConfig {
             size,
             width,
             height,
+            // The box above is the cropped one: without its crop the copy would
+            // stretch the whole picture into it (ADR 0037).
+            crop,
         }, this.surface.model.id);
     }
 }

package/dist/_pkgs/affine-block-image/effects.js

@@ -1,5 +1,6 @@
 import { ImageBlockFallbackCard } from './components/image-block-fallback.js';
 import { ImageBlockPageComponent } from './components/page-image-block.js';
+import { ImageCropOverlay } from './crop/crop-overlay.js';
 import { ImageBlockComponent } from './image-block.js';
 import { ImageEdgelessBlockComponent } from './image-edgeless-block.js';
 import { ImageEdgelessPlaceholderBlockComponent } from './preview-image/edgeless.js';
@@ -9,6 +10,7 @@ export function effects() {
     customElements.define('affine-edgeless-image', ImageEdgelessBlockComponent);
     customElements.define('affine-page-image', ImageBlockPageComponent);
     customElements.define('affine-image-fallback-card', ImageBlockFallbackCard);
+    customElements.define('affine-image-crop-overlay', ImageCropOverlay);
     customElements.define('affine-placeholder-preview-image', ImagePlaceholderBlockComponent);
     customElements.define('affine-edgeless-placeholder-preview-image', ImageEdgelessPlaceholderBlockComponent);
 }

package/dist/_pkgs/affine-block-image/image-block.d.ts

@@ -1,9 +1,11 @@
 import { CaptionedBlockComponent } from '../affine-components/caption/index.js';
 import { ResourceController } from '../affine-components/resource/index.js';
 import type { ImageBlockModel } from '../affine-model/index.js';
+import { ImageCropController } from './crop/crop-controller.js';
 export declare class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel> {
     resizeable$: import("@preact/signals-core").ReadonlySignal<boolean>;
     resourceController: ResourceController;
+    readonly cropController: ImageCropController;
     get blobUrl(): string | null;
     convertToCardView: () => void;
     copy: () => void;

package/dist/_pkgs/affine-block-image/image-block.js

@@ -49,6 +49,7 @@ import { 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 { ImageCropController } from './crop/crop-controller.js';
 import { IMAGE_LABEL } from './translations.js';
 import { copyImageBlob, downloadImageBlob, refreshData, turnImageIntoCardView, } from './utils.js';
 let ImageBlockComponent = (() => {
@@ -71,6 +72,7 @@ let ImageBlockComponent = (() => {
             super(...arguments);
             this.resizeable$ = computed(() => this.std.selection.value.some(selection => selection.is(ImageSelection) && selection.blockId === this.blockId));
             this.resourceController = new ResourceController(computed(() => this.model.props.sourceId$.value), 'Image');
+            this.cropController = new ImageCropController(this, false);
             this.convertToCardView = () => {
                 turnImageIntoCardView(this).catch(console.error);
             };

package/dist/_pkgs/affine-block-image/image-edgeless-block.d.ts

@@ -2,9 +2,11 @@ import type { BlockCaptionEditor } from '../affine-components/caption/index.js';
 import { ResourceController } from '../affine-components/resource/index.js';
 import { type ImageBlockModel } from '../affine-model/index.js';
 import { GfxBlockComponent } from '../std/index.js';
+import { ImageCropController } from './crop/crop-controller.js';
 export declare class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockModel> {
     static styles: import("lit").CSSResult;
     resourceController: ResourceController;
+    readonly cropController: ImageCropController;
     get blobUrl(): string | null;
     convertToCardView: () => void;
     copy: () => void;

package/dist/_pkgs/affine-block-image/image-edgeless-block.js

@@ -47,6 +47,7 @@ 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 { croppedImageStyle, ImageCropController, } from './crop/crop-controller.js';
 import { IMAGE_LABEL, IMAGE_TOAST_DOWNLOAD_FAILED } from './translations.js';
 import { copyImageBlob, downloadImageBlob, refreshData, turnImageIntoCardView, } from './utils.js';
 let ImageEdgelessBlockComponent = (() => {
@@ -107,6 +108,16 @@ let ImageEdgelessBlockComponent = (() => {
       width: 100%;
       height: 100%;
     }
+
+    affine-edgeless-image .resizable-img {
+      position: relative;
+    }
+
+    affine-edgeless-image .labre-image-crop-window {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+    }
   `; }
         get blobUrl() {
             return this.resourceController.blobUrl$.value;
@@ -130,6 +141,9 @@ let ImageEdgelessBlockComponent = (() => {
             const blobUrl = this.blobUrl;
             const imageLabel = translateKey(this.std, ...IMAGE_LABEL);
             const { rotate = 0, size = 0, caption = imageLabel } = this.model.props;
+            // The box is the visible part (ADR 0037): the source is drawn scaled
+            // and offset inside it, through a window that clips the rest.
+            const crop = this.cropController.crop$.value;
             const containerStyleMap = styleMap({
                 display: 'flex',
                 position: 'relative',
@@ -153,14 +167,27 @@ let ImageEdgelessBlockComponent = (() => {
       <div class="affine-image-container" style=${containerStyleMap}>
         ${when(blobUrl, () => html `
             <div class="resizable-img">
-              <img
-                class="drag-target"
-                draggable="false"
-                loading="lazy"
-                src=${blobUrl}
-                alt=${caption}
-                @error=${this._handleError}
-              />
+              ${crop
+                ? html `<div class="labre-image-crop-window">
+                    <img
+                      class="drag-target"
+                      draggable="false"
+                      loading="lazy"
+                      src=${blobUrl}
+                      alt=${caption}
+                      style=${croppedImageStyle(crop)}
+                      @error=${this._handleError}
+                    />
+                  </div>`
+                : html `<img
+                    class="drag-target"
+                    draggable="false"
+                    loading="lazy"
+                    src=${blobUrl}
+                    alt=${caption}
+                    @error=${this._handleError}
+                  />`}
+              ${this.cropController.renderOverlay(blobUrl, rotate)}
             </div>
             ${when(loading, () => html `<div class="loading">${icon}</div>`)}
             ${when(Boolean(error && description), () => html `<affine-resource-status
@@ -190,6 +217,7 @@ let ImageEdgelessBlockComponent = (() => {
         constructor() {
             super(...arguments);
             this.resourceController = new ResourceController(computed(() => this.model.props.sourceId$.value), 'Image');
+            this.cropController = new ImageCropController(this, true);
             this.convertToCardView = () => {
                 turnImageIntoCardView(this).catch(console.error);
             };