@voithos-labs/aragonite 0.10.2 → 0.10.3

package/dist/components/image/ImageResizeHandles.svelte

@@ -64,10 +64,25 @@
 		return getWidgetEl()?.querySelector('img') ?? null;
 	}
 
+	/**
+	 * What the drag measures and previews on. A cropped image is a FRAME (the widget) with the
+	 * picture panned inside it, so the `<img>` is neither the size being changed nor the box the
+	 * user is dragging: previewing on it bulges the picture out of its frame, and at a zoom above
+	 * 1 the drag would start from the painted image's width and jump.
+	 */
+	function isCropped(): boolean {
+		return getWidgetEl()?.classList.contains('md-image-cropped') ?? false;
+	}
+
+	function previewEl(): HTMLElement | null {
+		return isCropped() ? getWidgetEl() : imgEl();
+	}
+
 	function startDrag(e: PointerEvent) {
 		const img = imgEl();
-		if (!img) return;
-		const { width: startWidth, height: startHeight } = img.getBoundingClientRect();
+		const preview = previewEl();
+		if (!img || !preview) return;
+		const { width: startWidth, height: startHeight } = preview.getBoundingClientRect();
 		// Unmeasurable width makes every snap run against 0 and commit a tiny image
 		// whichever way the drag goes; bail before pointer capture.
 		if (startWidth < MIN_WIDTH || editorContentWidth < MIN_WIDTH) return;
@@ -79,7 +94,10 @@
 			startWidth,
 			startHeight,
 			naturalWidth: img.naturalWidth,
-			aspectLocked: !e.shiftKey,
+			// A crop's frame keeps its shape through a resize (`commitImageResize` derives the
+			// height from it), so Shift has nothing to unlock here; the crop session's corner
+			// brackets are where a frame's aspect changes.
+			aspectLocked: isCropped() || !e.shiftKey,
 			currentWidth: startWidth
 		};
 	}
@@ -95,12 +113,13 @@
 		const clamped = clampWidth(proposed, editorContentWidth);
 		const snapped = snapWidth(clamped, editorContentWidth, SNAP_THRESHOLD_PX);
 		dragState.currentWidth = snapped;
-		const img = imgEl();
-		if (!img) return;
-		img.style.width = `${snapped}px`;
+		const preview = previewEl();
+		if (!preview) return;
+		preview.style.width = `${snapped}px`;
 		// Shift unlocks the aspect: the height stays where the user found it and the image
-		// distorts. Locked, the stylesheet's `height: auto` derives it from the new width.
-		img.style.height = dragState.aspectLocked ? '' : `${dragState.startHeight}px`;
+		// distorts. Locked, the frame's own `aspect-ratio` (cropped) or the stylesheet's
+		// `height: auto` (plain) derives it from the new width.
+		preview.style.height = dragState.aspectLocked ? '' : `${dragState.startHeight}px`;
 	}
 
 	function endDrag(e: PointerEvent) {
@@ -126,26 +145,36 @@
 				dx: e.clientX - startX,
 				editorContentWidth,
 				naturalWidth,
-				imgRectWidth: imgEl()?.getBoundingClientRect().width,
+				imgRectWidth: previewEl()?.getBoundingClientRect().width,
 				imgWidthAttr: imgEl()?.getAttribute('width')
 			});
 		}
 		onCommit(Math.round(finalWidth), resolveDraggedHeight(aspectLocked, startHeight));
 	}
 
+	/** The frame's committed width, from the `|WxH` hint the widget was built with. */
+	function restoreFrameWidth(widget: HTMLElement): void {
+		const width = imgEl()?.getAttribute('width');
+		if (width) widget.style.width = `${width}px`;
+	}
+
 	function cancelDrag(e: PointerEvent) {
 		if (!dragState) return;
-		// Fall back to the widget's committed width/height attributes.
-		const img = imgEl();
-		if (img) {
-			img.style.width = '';
-			img.style.height = '';
+		// Fall back to the committed geometry: the widget's width/height attributes, or for a
+		// cropped image the frame width `applyCropToWidget` wrote.
+		const preview = previewEl();
+		if (preview) {
+			preview.style.height = '';
+			if (preview === imgEl()) preview.style.width = '';
+			else restoreFrameWidth(preview);
 		}
 		dragState = null;
 		(e.target as HTMLElement).releasePointerCapture(e.pointerId);
 	}
 </script>
 
+<!-- One grip, on the right edge: width is the only thing a drag sets (Shift unlocks the
+	aspect), so a second corner grip was the same gesture twice. -->
 {#if !isBroken}
 	<div
 		class="md-resize-handle md-resize-handle-right"
@@ -155,34 +184,30 @@
 		onpointerup={endDrag}
 		onpointercancel={cancelDrag}
 	></div>
-	<div
-		class="md-resize-handle md-resize-handle-corner"
-		role="presentation"
-		onpointerdown={startDrag}
-		onpointermove={moveDrag}
-		onpointerup={endDrag}
-		onpointercancel={cancelDrag}
-	></div>
 {/if}
 
 <style>
+	/* An accent pill straddling the edge with a white rim, so it reads on any picture. The hit
+	   strip is wider than the paint. */
 	.md-resize-handle {
 		position: absolute;
-		width: 8px;
-		height: 8px;
+		right: -3px;
+		top: 50%;
+		width: 6px;
+		height: 44px;
+		max-height: 60%;
+		transform: translateY(-50%);
+		border-radius: 3px;
 		background: var(--color-accent, #567b67);
-		border: 1px solid #fff;
+		box-shadow:
+			0 0 0 1.5px rgba(255, 255, 255, 0.9),
+			0 1px 3px rgba(0, 0, 0, 0.3);
 		z-index: 10;
 		cursor: ew-resize;
 	}
-	.md-resize-handle-right {
-		right: -4px;
-		top: 50%;
-		transform: translateY(-50%);
-	}
-	.md-resize-handle-corner {
-		right: -4px;
-		bottom: -4px;
-		cursor: nwse-resize;
+	.md-resize-handle::before {
+		content: '';
+		position: absolute;
+		inset: -6px -8px;
 	}
 </style>

package/dist/components/image/image-crop.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Pure math for the image crop: how a `{x, y, z}` window maps to the styles that paint it, and
+ * how a pan or a wheel turn moves it. No DOM here beyond a style bag; the properties surface
+ * owns the pointer events and `widget-dom.ts` paints a committed crop from the same styles.
+ *
+ * The model is CSS `background-size: cover` at `z` times the fill scale, with the image point
+ * (`x`%, `y`%) pinned to that point of the frame, so `{50, 50, 1}` is a centred cover fit.
+ */
+import type { ImageCrop } from '../../core/nodes';
+export declare const DEFAULT_CROP: ImageCrop;
+export interface Size {
+    width: number;
+    height: number;
+}
+export declare function clampCrop(crop: ImageCrop): ImageCrop;
+/**
+ * The styles an `<img>` inside an `overflow: hidden` frame takes. The image box is `z` times
+ * the frame with `object-fit: cover`, offset so the pinned point stays put: at `z` 1 the offset
+ * is zero and `object-position` alone pans the cover overflow.
+ */
+export declare function cropImageStyle(crop: ImageCrop): {
+    width: string;
+    height: string;
+    left: string;
+    top: string;
+    objectPosition: string;
+};
+/** The painted image size at this crop: cover-scaled to the frame, then times `z`. */
+export declare function paintedSize(frame: Size, natural: Size, z: number): Size;
+/**
+ * A drag of (`dx`, `dy`) px moves the window the other way, by the share of the overflow the
+ * pointer covered; an axis with nothing to pan on ignores its component.
+ */
+export declare function panCrop(crop: ImageCrop, dx: number, dy: number, frame: Size, natural: Size): ImageCrop;
+/** A wheel turn zooms about the pinned point; positive `deltaY` (scrolling down) zooms out. */
+export declare function zoomCrop(crop: ImageCrop, deltaY: number): ImageCrop;
+export declare function isDefaultCrop(crop: ImageCrop): boolean;
+/** Paint a crop onto a widget and its image, the way a committed one renders. */
+export declare function applyCropToWidget(widget: HTMLElement, img: HTMLImageElement, frame: Size, crop: ImageCrop): void;

package/dist/components/image/image-crop.js

@@ -0,0 +1,74 @@
+/**
+ * Pure math for the image crop: how a `{x, y, z}` window maps to the styles that paint it, and
+ * how a pan or a wheel turn moves it. No DOM here beyond a style bag; the properties surface
+ * owns the pointer events and `widget-dom.ts` paints a committed crop from the same styles.
+ *
+ * The model is CSS `background-size: cover` at `z` times the fill scale, with the image point
+ * (`x`%, `y`%) pinned to that point of the frame, so `{50, 50, 1}` is a centred cover fit.
+ */
+import { MAX_CROP_ZOOM } from '../../core/inline/image-dimensions';
+export const DEFAULT_CROP = { x: 50, y: 50, z: 1 };
+export function clampCrop(crop) {
+    return {
+        x: Math.min(100, Math.max(0, crop.x)),
+        y: Math.min(100, Math.max(0, crop.y)),
+        z: Math.min(MAX_CROP_ZOOM, Math.max(1, crop.z))
+    };
+}
+/**
+ * The styles an `<img>` inside an `overflow: hidden` frame takes. The image box is `z` times
+ * the frame with `object-fit: cover`, offset so the pinned point stays put: at `z` 1 the offset
+ * is zero and `object-position` alone pans the cover overflow.
+ */
+export function cropImageStyle(crop) {
+    const c = clampCrop(crop);
+    const pct = (n) => `${Math.round(n * 1000) / 1000}%`;
+    return {
+        width: pct(c.z * 100),
+        height: pct(c.z * 100),
+        left: pct(-(c.z - 1) * c.x),
+        top: pct(-(c.z - 1) * c.y),
+        objectPosition: `${pct(c.x)} ${pct(c.y)}`
+    };
+}
+/** The painted image size at this crop: cover-scaled to the frame, then times `z`. */
+export function paintedSize(frame, natural, z) {
+    if (natural.width <= 0 || natural.height <= 0)
+        return { width: frame.width * z, height: frame.height * z };
+    const scale = Math.max(frame.width / natural.width, frame.height / natural.height) * z;
+    return { width: natural.width * scale, height: natural.height * scale };
+}
+/**
+ * A drag of (`dx`, `dy`) px moves the window the other way, by the share of the overflow the
+ * pointer covered; an axis with nothing to pan on ignores its component.
+ */
+export function panCrop(crop, dx, dy, frame, natural) {
+    const painted = paintedSize(frame, natural, crop.z);
+    const overX = painted.width - frame.width;
+    const overY = painted.height - frame.height;
+    return clampCrop({
+        x: overX > 0.5 ? crop.x - (dx / overX) * 100 : crop.x,
+        y: overY > 0.5 ? crop.y - (dy / overY) * 100 : crop.y,
+        z: crop.z
+    });
+}
+/** A wheel turn zooms about the pinned point; positive `deltaY` (scrolling down) zooms out. */
+export function zoomCrop(crop, deltaY) {
+    return clampCrop({ ...crop, z: crop.z - deltaY * 0.002 });
+}
+export function isDefaultCrop(crop) {
+    return crop.x === 50 && crop.y === 50 && crop.z === 1;
+}
+/** Paint a crop onto a widget and its image, the way a committed one renders. */
+export function applyCropToWidget(widget, img, frame, crop) {
+    widget.classList.add('md-image-cropped');
+    widget.style.width = `${Math.round(frame.width)}px`;
+    widget.style.aspectRatio = `${Math.round(frame.width)} / ${Math.round(frame.height)}`;
+    const style = cropImageStyle(crop);
+    img.style.width = style.width;
+    img.style.height = style.height;
+    img.style.left = style.left;
+    img.style.top = style.top;
+    img.style.objectPosition = style.objectPosition;
+    img.style.aspectRatio = '';
+}

package/dist/components/image/image-edit-commit.d.ts

@@ -30,6 +30,7 @@ export interface ImageEditCommitter {
      *  popover's dirty check compares against these. */
     buildEditBytes(target: WidgetTarget, newFields: ImageFields): string | null;
     commitImageResize(newWidth: number, newHeight: number | undefined): void;
+    removeImage(target: WidgetTarget): void;
     dismissImagePopover(): void;
     getEditorContentWidth(): number;
     attachWidgetSelectListener(): () => void;

package/dist/components/image/image-edit-commit.js

@@ -2,7 +2,7 @@ import { resolvedInlineContent } from '../../core/inline/inline-cache';
 import { flattenInlineWidgets } from '../../core/inline/inline-widgets';
 import { createInlineRangeCommit } from '../../editor-actions/inline-range-commit';
 import { FALLBACK_CONTENT_WIDTH } from '../../cursor/typography-estimates';
-import { blockNodeAt } from '../../tree-operations/node-ops';
+import { blockNodeAt } from '../../tree-operations/node-primitives';
 import { buildImageEditBytes } from './image-source-bytes';
 export function createImageEditCommitter(deps) {
     const { getDoc, getEditorEl, widgetSelection, controller, events } = deps;
@@ -71,15 +71,30 @@ export function createImageEditCommitter(deps) {
         const ctx = getSelectedImageFields();
         if (!ctx)
             return;
+        const { image } = ctx;
+        // A cropped frame keeps its shape through a resize: the height follows the width.
+        const framedHeight = image.crop && image.width !== undefined && image.height !== undefined
+            ? Math.round((image.height * newWidth) / image.width)
+            : newHeight;
         const newFields = {
-            alt: ctx.image.alt ?? '',
-            url: ctx.image.url ?? '',
-            ...(ctx.image.title !== undefined ? { title: ctx.image.title } : {}),
+            alt: image.alt ?? '',
+            url: image.url ?? '',
+            ...(image.title !== undefined ? { title: image.title } : {}),
             width: newWidth,
-            ...(newHeight !== undefined ? { height: newHeight } : {})
+            ...(framedHeight !== undefined ? { height: framedHeight } : {}),
+            ...(image.crop !== undefined && framedHeight !== undefined ? { crop: image.crop } : {})
         };
         commitImageEdit(sel, newFields);
     }
+    /** The whole `![...](...)` span goes; the caret lands where the image began. */
+    function removeImage(target) {
+        const paragraph = blockNodeAt(getDoc(), target.paragraphPath);
+        const image = paragraph && findImageInParagraph(paragraph, target.sourceStart);
+        if (!image)
+            return;
+        widgetSelection.clear();
+        void inlineRange.commitInlineRange(target.paragraphPath, image.start, image.end, '', 0);
+    }
     function dismissImagePopover() {
         widgetSelection.clear();
     }
@@ -151,6 +166,7 @@ export function createImageEditCommitter(deps) {
         commitImageEdit,
         buildEditBytes,
         commitImageResize,
+        removeImage,
         dismissImagePopover,
         getEditorContentWidth,
         attachWidgetSelectListener,

package/dist/components/image/image-source-bytes.js

@@ -31,6 +31,7 @@ export function imageFieldsFromInline(image) {
         ...(image.title !== undefined ? { title: image.title } : {}),
         ...(image.width !== undefined ? { width: image.width } : {}),
         ...(image.height !== undefined ? { height: image.height } : {}),
+        ...(image.crop !== undefined ? { crop: image.crop } : {}),
         ...(image.label !== undefined ? { label: image.label } : {})
     };
 }
@@ -38,7 +39,7 @@ export function imageFieldsFromInline(image) {
 /** The built-in grammar's inverse. Reach it through `buildImageEditBytes`, the only
  *  caller entitled to decide these bytes are GFM's to write. */
 export function buildImageSourceBytes(fields) {
-    const dimSuffix = buildDimSuffix(fields.width, fields.height);
+    const dimSuffix = buildDimSuffix(fields.width, fields.height, fields.crop);
     const altSegment = escapeAlt(fields.alt) + dimSuffix;
     // Reference form: the dimension hint rides in the alt, and url/title are not
     // written — they belong to the LRD.
@@ -48,12 +49,18 @@ export function buildImageSourceBytes(fields) {
     const titleSegment = fields.title !== undefined ? ` "${escapeTitle(fields.title)}"` : '';
     return `![${altSegment}](${encodeDestination(fields.url)}${titleSegment})`;
 }
-function buildDimSuffix(width, height) {
+function buildDimSuffix(width, height, crop) {
     if (width === undefined)
         return '';
     if (height === undefined)
         return `|${width}`;
-    return `|${width}x${height}`;
+    return `|${width}x${height}${crop ? buildCropTail(crop) : ''}`;
+}
+/** Whole percents; the zoom only when it is one worth writing, trimmed to what it needs. */
+function buildCropTail(crop) {
+    const z = Math.round(crop.z * 100) / 100;
+    const zoom = z === 1 ? '' : `,${String(z)}`;
+    return `@${Math.round(crop.x)},${Math.round(crop.y)}${zoom}`;
 }
 // Alt sits inside `[...]`, where an unescaped bracket closes the scan early. Unlike
 // `title` and `url` it carries RAW label bytes, so a blanket escape doubles every

package/dist/components/image/image-widget-editing.js

@@ -28,6 +28,7 @@ export function imageWidgetOnSelectedKey(e, ctx) {
         ...(inline.height !== undefined
             ? { height: Math.round((newWidth / currentWidth) * inline.height) }
             : {}),
+        ...(inline.crop !== undefined ? { crop: inline.crop } : {}),
         ...(inline.label !== undefined ? { label: inline.label } : {})
     };
     const newBytes = buildImageEditBytes(inline, node.raw, newFields);

package/dist/components/image/widget-dom.js

@@ -4,6 +4,7 @@
 import { isAllowedImageSrcScheme } from '../../core/url-policy';
 import { findSurfacePathForElement } from '../../selection/path-lookup';
 import { devWarn } from '../../dev-warn';
+import { applyCropToWidget } from './image-crop';
 export function buildImageWidget(node, _raw, opts) {
     const widget = document.createElement('span');
     widget.className = 'md-image-widget';
@@ -63,9 +64,12 @@ export function buildImageWidget(node, _raw, opts) {
         img.setAttribute('height', String(node.height));
     // A declared `|WxH` box belongs to the author, so it both reserves space before the bytes
     // arrive and survives the decode: the attribute pair alone loses to the natural ratio the
-    // moment `height: auto` has one to read.
+    // moment `height: auto` has one to read. With a crop the box is a frame the image pans in.
     if (node.width !== undefined && node.height !== undefined) {
         img.style.aspectRatio = `${node.width} / ${node.height}`;
+        if (node.crop) {
+            applyCropToWidget(widget, img, { width: node.width, height: node.height }, node.crop);
+        }
     }
     const markBroken = () => {
         opts.brokenUrlCache.add(resolvedUrl);

package/dist/components/link-card/link-card-commit.js

@@ -5,7 +5,7 @@
  */
 import { wireOverlayRemeasure } from '../../cursor/overlay-remeasure';
 import { createInlineRangeCommit } from '../../editor-actions/inline-range-commit';
-import { isBlockNode, nodeAt } from '../../tree-operations/node-ops';
+import { isBlockNode, nodeAt } from '../../tree-operations/node-primitives';
 import { linkConstructAt } from '../blocks/text/link-at-point';
 import { buildLinkEditBytes, buildLinkUnwrapBytes, buildLinkWrapBytes, linkFieldsFromInline } from '../blocks/text/link-source-bytes';
 export function createLinkCardCommitter(deps) {

package/dist/components/lrd-map-gate.js

@@ -1,4 +1,4 @@
-import { nodeAt } from '../tree-operations/node-ops';
+import { nodeAt } from '../tree-operations/node-primitives';
 /**
  * Whether a commit could change the LRD set, keeping the O(nodes) map rebuild off the keystroke
  * hot path. Any op that is not a kind-stable `input`/`metadataUpdate` could add or remove a