react-x11 2.32.0 → 2.34.0

package/src/nodes/fit.js

@@ -0,0 +1,46 @@
+// `objectFit`: where a picture with a size of its own goes in a box that has
+// another — CSS's `object-fit`, for `<image>` and `<video>`, centred the way
+// CSS's default `object-position: 50% 50%` centres it. A leaf: no node, no
+// backend, rects in and a rect out.
+
+export const OBJECT_FITS = Object.freeze([
+  'fill',
+  'contain',
+  'cover',
+  'none',
+  'scale-down',
+]);
+
+/** The element's `objectFit`, or its default where the style names none. */
+export function objectFitOf(style, fallback) {
+  const fit = style?.objectFit;
+  return OBJECT_FITS.includes(fit) ? fit : fallback;
+}
+
+/**
+ * Where a `width` x `height` picture goes in `box` under `fit`: `fill`
+ * stretches it to the box, `contain` scales it to fit inside with bars,
+ * `cover` scales it to fill with the overflow cut (by the caller), `none`
+ * leaves it its own size, and `scale-down` is `none` or `contain`, whichever
+ * is smaller. Its edges are snapped to whole pixels, so a picture drawn
+ * there and a layer placed there cover exactly the same ones — except under
+ * `fill`, which is the box itself, as an `<image>` has always been drawn.
+ */
+export function fitRect(box, width, height, fit) {
+  if (fit === 'fill' || !(width > 0 && height > 0)) return { ...box };
+  let k;
+  if (fit === 'none') k = 1;
+  else {
+    const sx = box.width / width;
+    const sy = box.height / height;
+    k = fit === 'cover' ? Math.max(sx, sy) : Math.min(sx, sy);
+    if (fit === 'scale-down') k = Math.min(k, 1);
+  }
+  const w = width * k;
+  const h = height * k;
+  const x0 = Math.round(box.x + (box.width - w) / 2);
+  const y0 = Math.round(box.y + (box.height - h) / 2);
+  const x1 = Math.round(box.x + (box.width + w) / 2);
+  const y1 = Math.round(box.y + (box.height + h) / 2);
+  return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+}

package/src/nodes/image.js

@@ -18,6 +18,7 @@ import {
 } from '../imagesource.js';
 import { loadImageFile } from '../imagedecode.js';
 import { symbolWeight, symbolsFor, warnOnce } from '../symbols.js';
+import { fitRect, objectFitOf } from './fit.js';
 import { intrinsicSize } from './layout.js';
 import { Node } from './node.js';
 import { DEV } from './util.js';
@@ -317,12 +318,42 @@ export class ImageNode extends Node {
     }
     if (!this.image) return;
     const content = this.contentBox();
-    ctx.drawImage(
-      this.image,
-      content.x,
-      content.y,
-      content.width,
-      content.height,
+    const fit = objectFitOf(this.style, 'fill');
+    if (fit === 'fill') {
+      ctx.drawImage(
+        this.image,
+        content.x,
+        content.y,
+        content.width,
+        content.height,
+      );
+      return;
+    }
+    // the source's size in device pixels, as `measureContent` takes it
+    const s = this.scale;
+    const rect = fitRect(
+      content,
+      (this.image.width ?? 0) * s,
+      (this.image.height ?? 0) * s,
+      fit,
     );
+    if (!(rect.width > 0 && rect.height > 0)) return;
+    const inside =
+      rect.x >= content.x &&
+      rect.y >= content.y &&
+      rect.x + rect.width <= content.x + content.width &&
+      rect.y + rect.height <= content.y + content.height;
+    if (!inside) {
+      // `cover`, and `none` larger than the box: cut to the content box
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(content.x, content.y, content.width, content.height);
+      ctx.clip();
+    }
+    try {
+      ctx.drawImage(this.image, rect.x, rect.y, rect.width, rect.height);
+    } finally {
+      if (!inside) ctx.restore();
+    }
   }
 }

package/src/nodes/kinds.js

@@ -13,6 +13,7 @@ export const DRAWN_KINDS = new Set([
   'box',
   'text',
   'image',
+  'video',
   'canvas',
   'textinput',
   'textarea',

package/src/nodes/layouthost.js

@@ -147,6 +147,7 @@ const NO_LAYOUT_KINDS = new Set([
   'text',
   'textchunk',
   'image',
+  'video',
   'svg',
   'canvas',
   'textinput',