@formicoidea/labre-core 0.50.0 → 0.51.0

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

@@ -0,0 +1,104 @@
+import { readImageCrop, } from '../../affine-model/index.js';
+import { Bound } from '../../global/gfx/index.js';
+import { computed, signal } from '@preact/signals-core';
+import { html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { maskRatio, presetCrop, WHOLE_IMAGE, wholeImageFrame, } from './crop-math.js';
+import { writeImageCrop } from './write-crop.js';
+/**
+ * The « Rogner » state of one image block (ADR 0037), shared by the page and
+ * the canvas components: which preset the crop frame is open on, if any, and
+ * the gestures that write. The frame is local UI and never stored.
+ */
+export class ImageCropController {
+    constructor(_block, _onCanvas) {
+        this._block = _block;
+        this._onCanvas = _onCanvas;
+        /** The mask the crop frame is open on, `null` when it is closed. */
+        this.editing$ = signal(null);
+        this.crop$ = computed(() => readImageCrop(this._block.model.props.crop$.value));
+    }
+    /**
+     * The source's proportions: the loaded `<img>`'s pixel size, else what the
+     * block stores. Only the ratio matters to the crop, and an SVG without an
+     * intrinsic size loads with none: a canvas box is the cropped share of the
+     * whole picture, a page `width`/`height` is the whole picture.
+     */
+    natural() {
+        const img = this._block.querySelector('img.drag-target');
+        if (img?.naturalWidth && img.naturalHeight) {
+            return { width: img.naturalWidth, height: img.naturalHeight };
+        }
+        const { model } = this._block;
+        const crop = this.crop$.peek() ?? WHOLE_IMAGE;
+        if (this._onCanvas) {
+            const bound = Bound.deserialize(model.xywh);
+            if (bound.w <= 0 || bound.h <= 0)
+                return null;
+            return { width: bound.w / crop.w, height: bound.h / crop.h };
+        }
+        const { width, height } = model.props;
+        return width && height ? { width, height } : null;
+    }
+    /**
+     * Open the frame on a preset. A ratio preset first writes its largest
+     * centred window — unless the crop already uses that preset, which keeps
+     * the author's adjustment. Free opens on the current crop and writes
+     * nothing until a drag.
+     */
+    choose(mask) {
+        const { model } = this._block;
+        if (model.store.readonly)
+            return;
+        if (mask !== 'free' && this.crop$.peek()?.mask !== mask) {
+            const natural = this.natural();
+            if (!natural)
+                return;
+            this.commit(presetCrop(mask, natural.width, natural.height), mask);
+        }
+        this.editing$.value = mask;
+    }
+    commit(rect, mask = this.editing$.peek() ?? 'free') {
+        return writeImageCrop(this._block.model, rect, mask, this._onCanvas);
+    }
+    /** « Image d'origine »: removes the crop; the bytes never changed. */
+    restoreOriginal() {
+        this.editing$.value = null;
+        return writeImageCrop(this._block.model, undefined, 'free', this._onCanvas);
+    }
+    stop() {
+        this.editing$.value = null;
+    }
+    /** The frame, or nothing when it is closed or the page is readonly. */
+    renderOverlay(src, rotate = 0) {
+        const mask = this.editing$.value;
+        if (mask === null || !src || this._block.model.store.readonly) {
+            return nothing;
+        }
+        const crop = this.crop$.value ?? WHOLE_IMAGE;
+        const natural = this.natural();
+        const ratio = natural
+            ? maskRatio(mask, natural.width, natural.height)
+            : null;
+        return html `<affine-image-crop-overlay
+      data-testid="image-crop-overlay"
+      style=${styleMap(wholeImageFrame(crop))}
+      .src=${src}
+      .crop=${crop}
+      .ratio=${ratio}
+      .rotate=${rotate}
+      .onCommit=${(rect) => {
+            this.commit(rect);
+        }}
+      .onExit=${() => this.stop()}
+    ></affine-image-crop-overlay>`;
+    }
+}
+/** Inline styles of an `<img>` showing `crop` of its source in its box. */
+export function croppedImageStyle(crop) {
+    return styleMap({
+        position: 'absolute',
+        maxWidth: 'none',
+        ...wholeImageFrame(crop),
+    });
+}

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

@@ -0,0 +1,70 @@
+import { type ImageCrop, type ImageCropMask } from '../../affine-model/index.js';
+/** A crop rectangle without its mask, normalised to the source (ADR 0037). */
+export type CropRect = Pick<ImageCrop, 'x' | 'y' | 'w' | 'h'>;
+export type CropCorner = 'nw' | 'ne' | 'sw' | 'se';
+export declare const WHOLE_IMAGE: CropRect;
+/**
+ * The normalised `w / h` a mask holds on a source of this size, or `null`
+ * when the crop is free or the size is unknown. A 16:9 window on a portrait
+ * photo is much wider in normalised units than in pixels.
+ */
+export declare function maskRatio(mask: ImageCropMask, naturalWidth: number, naturalHeight: number): number | null;
+/**
+ * The largest centred rectangle of the mask's ratio: what choosing a preset
+ * writes before the author adjusts it. Free is the whole image.
+ */
+export declare function presetCrop(mask: ImageCropMask, naturalWidth: number, naturalHeight: number): CropRect;
+/** The window dragged by a normalised delta, kept inside the image. */
+export declare function moveCrop(start: CropRect, dx: number, dy: number): CropRect;
+/**
+ * The window resized by dragging one corner, the opposite corner pinned.
+ * With a ratio `k` (normalised `w / h`), the window grows to cover the pointer
+ * and then shrinks to fit the image, so it never leaves the source.
+ */
+export declare function resizeCrop(start: CropRect, corner: CropCorner, dx: number, dy: number, k: number | null): CropRect;
+export declare function sameCropRect(a: CropRect, b: CropRect): boolean;
+/**
+ * The canvas box once the crop changes from `from` to `to`, for a block whose
+ * box shows `from`: the picture keeps its scale and the kept part stays where
+ * it was on the canvas. The box rotates about its centre (`rotate` degrees,
+ * CSS direction), so the shift is rotated before it is applied.
+ */
+export declare function cropBoundFor(bound: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}, rotate: number, from: CropRect, to: CropRect): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/**
+ * The stored page `width`/`height` of a cropped image whose window was
+ * resized to `box`: the WHOLE picture's size (ADR 0037), never the window's.
+ * The height follows the source's proportions when they are known; an SVG
+ * with no intrinsic size, or a picture not loaded yet, scales the window's
+ * own height instead — writing the window itself would shrink the image on
+ * every resize.
+ */
+export declare function wholeImageSize(box: {
+    w: number;
+    h: number;
+}, crop: CropRect, natural: {
+    width: number;
+    height: number;
+} | null): {
+    width: number;
+    height: number;
+};
+/**
+ * Where the WHOLE source sits relative to a box showing `crop`, as CSS
+ * percentages of that box: the cropped `<img>` and the crop frame both use it.
+ */
+export declare function wholeImageFrame(crop: CropRect): {
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+};

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

@@ -0,0 +1,141 @@
+import { IMAGE_CROP_MIN_SIDE, } from '../../affine-model/index.js';
+export const WHOLE_IMAGE = { x: 0, y: 0, w: 1, h: 1 };
+/** Width over height, in source pixels, each preset keeps. */
+const MASK_RATIOS = {
+    '16:9': 16 / 9,
+    '4:3': 4 / 3,
+    '1:1': 1,
+};
+const EPSILON = 1e-6;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+ * The normalised `w / h` a mask holds on a source of this size, or `null`
+ * when the crop is free or the size is unknown. A 16:9 window on a portrait
+ * photo is much wider in normalised units than in pixels.
+ */
+export function maskRatio(mask, naturalWidth, naturalHeight) {
+    if (mask === 'free' || naturalWidth <= 0 || naturalHeight <= 0)
+        return null;
+    return (MASK_RATIOS[mask] * naturalHeight) / naturalWidth;
+}
+/**
+ * The largest centred rectangle of the mask's ratio: what choosing a preset
+ * writes before the author adjusts it. Free is the whole image.
+ */
+export function presetCrop(mask, naturalWidth, naturalHeight) {
+    const k = maskRatio(mask, naturalWidth, naturalHeight);
+    if (k === null)
+        return WHOLE_IMAGE;
+    let w = k;
+    let h = 1;
+    if (w > 1) {
+        w = 1;
+        h = 1 / k;
+    }
+    return { x: (1 - w) / 2, y: (1 - h) / 2, w, h };
+}
+/** The window dragged by a normalised delta, kept inside the image. */
+export function moveCrop(start, dx, dy) {
+    return {
+        ...start,
+        x: clamp(start.x + dx, 0, 1 - start.w),
+        y: clamp(start.y + dy, 0, 1 - start.h),
+    };
+}
+/**
+ * The window resized by dragging one corner, the opposite corner pinned.
+ * With a ratio `k` (normalised `w / h`), the window grows to cover the pointer
+ * and then shrinks to fit the image, so it never leaves the source.
+ */
+export function resizeCrop(start, corner, dx, dy, k) {
+    const west = corner === 'nw' || corner === 'sw';
+    const north = corner === 'nw' || corner === 'ne';
+    const anchorX = west ? start.x + start.w : start.x;
+    const anchorY = north ? start.y + start.h : start.y;
+    const pointerX = (west ? start.x : start.x + start.w) + dx;
+    const pointerY = (north ? start.y : start.y + start.h) + dy;
+    const maxW = west ? anchorX : 1 - anchorX;
+    const maxH = north ? anchorY : 1 - anchorY;
+    const min = IMAGE_CROP_MIN_SIDE;
+    let w = clamp(west ? anchorX - pointerX : pointerX - anchorX, min, maxW);
+    let h = clamp(north ? anchorY - pointerY : pointerY - anchorY, min, maxH);
+    if (k !== null) {
+        if (w / k > h)
+            h = w / k;
+        else
+            w = h * k;
+        if (w > maxW) {
+            w = maxW;
+            h = w / k;
+        }
+        if (h > maxH) {
+            h = maxH;
+            w = h * k;
+        }
+        if (w < min) {
+            w = min;
+            h = w / k;
+        }
+        if (h < min) {
+            h = min;
+            w = h * k;
+        }
+    }
+    return {
+        x: west ? anchorX - w : anchorX,
+        y: north ? anchorY - h : anchorY,
+        w,
+        h,
+    };
+}
+export function sameCropRect(a, b) {
+    return (Math.abs(a.x - b.x) < EPSILON &&
+        Math.abs(a.y - b.y) < EPSILON &&
+        Math.abs(a.w - b.w) < EPSILON &&
+        Math.abs(a.h - b.h) < EPSILON);
+}
+/**
+ * The canvas box once the crop changes from `from` to `to`, for a block whose
+ * box shows `from`: the picture keeps its scale and the kept part stays where
+ * it was on the canvas. The box rotates about its centre (`rotate` degrees,
+ * CSS direction), so the shift is rotated before it is applied.
+ */
+export function cropBoundFor(bound, rotate, from, to) {
+    const scaleX = bound.w / from.w;
+    const scaleY = bound.h / from.h;
+    const w = to.w * scaleX;
+    const h = to.h * scaleY;
+    const dx = (to.x - from.x) * scaleX + w / 2 - bound.w / 2;
+    const dy = (to.y - from.y) * scaleY + h / 2 - bound.h / 2;
+    const t = (rotate * Math.PI) / 180;
+    const cx = bound.x + bound.w / 2 + dx * Math.cos(t) - dy * Math.sin(t);
+    const cy = bound.y + bound.h / 2 + dx * Math.sin(t) + dy * Math.cos(t);
+    return { x: cx - w / 2, y: cy - h / 2, w, h };
+}
+/**
+ * The stored page `width`/`height` of a cropped image whose window was
+ * resized to `box`: the WHOLE picture's size (ADR 0037), never the window's.
+ * The height follows the source's proportions when they are known; an SVG
+ * with no intrinsic size, or a picture not loaded yet, scales the window's
+ * own height instead — writing the window itself would shrink the image on
+ * every resize.
+ */
+export function wholeImageSize(box, crop, natural) {
+    const width = box.w / crop.w;
+    return {
+        width,
+        height: natural ? (width * natural.height) / natural.width : box.h / crop.h,
+    };
+}
+/**
+ * Where the WHOLE source sits relative to a box showing `crop`, as CSS
+ * percentages of that box: the cropped `<img>` and the crop frame both use it.
+ */
+export function wholeImageFrame(crop) {
+    return {
+        left: `${(-crop.x / crop.w) * 100}%`,
+        top: `${(-crop.y / crop.h) * 100}%`,
+        width: `${100 / crop.w}%`,
+        height: `${100 / crop.h}%`,
+    };
+}

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

@@ -0,0 +1,57 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { type CropRect } from './crop-math.js';
+declare const ImageCropOverlay_base: typeof LitElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
+/**
+ * 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`.
+ */
+export declare class ImageCropOverlay extends ImageCropOverlay_base {
+    static styles: import("lit").CSSResult;
+    accessor src: string;
+    /** The stored crop the frame opens on; the whole image when uncropped. */
+    accessor crop: CropRect;
+    /** Normalised `w / h` to hold while resizing, `null` for a free crop. */
+    accessor ratio: number | null;
+    /** The block's rotation in degrees (canvas only), for pointer deltas. */
+    accessor rotate: number;
+    accessor onCommit: (rect: CropRect) => void;
+    accessor onExit: () => void;
+    accessor draft: CropRect;
+    private _dragging;
+    /** Removes the listeners of the gesture in progress, if any. */
+    private _releaseGesture;
+    private readonly _stop;
+    private readonly _onOutsidePointer;
+    private readonly _onKeydown;
+    /**
+     * 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(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    /**
+     * 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.
+     */
+    private _geometry;
+    private _startGesture;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'affine-image-crop-overlay': ImageCropOverlay;
+    }
+}
+export {};