@field/cascade 0.10.0 → 0.12.0

package/dist/runtime/builtins/image/contactSheet.js

@@ -0,0 +1,150 @@
+/**
+ * Where each image goes. By default every cell is as wide as the widest image
+ * and as tall as the tallest, and images keep their size. With `cellWidth`,
+ * cells are that wide and as tall as the tallest image needs at that width,
+ * and each image is scaled to fit. Either way an image is centred in its cell
+ * and never cropped, in whole pixels, so a sheet is the same bytes every run.
+ */
+export function contactSheetLayout(sizes, options = {}) {
+    const count = sizes.length;
+    if (!count)
+        throw new Error("cascade.image.ContactSheet needs at least one image");
+    for (const [width, height] of sizes) {
+        if (!(width > 0 && height > 0))
+            throw new Error(`cascade.image.ContactSheet: an image is ${width}x${height}`);
+    }
+    const gap = Math.max(0, Math.round(options.gap ?? 16));
+    const columns = Math.min(count, options.columns && options.columns > 0 ? Math.round(options.columns) : Math.ceil(Math.sqrt(count)));
+    const rows = Math.ceil(count / columns);
+    const scaled = Boolean(options.cellWidth && options.cellWidth > 0);
+    const cellWidth = scaled ? Math.round(options.cellWidth) : Math.max(...sizes.map(([width]) => width));
+    const cellHeight = scaled
+        ? Math.max(...sizes.map(([width, height]) => Math.round((height * cellWidth) / width)))
+        : Math.max(...sizes.map(([, height]) => height));
+    const labelHeight = Math.max(0, Math.round(options.labelHeight ?? 0));
+    const cells = sizes.map(([width, height], index) => {
+        const column = index % columns;
+        const row = Math.floor(index / columns);
+        // Native size unless a cell width was asked for; never cropped.
+        const fit = Math.min(cellWidth / width, cellHeight / height);
+        const scale = scaled ? fit : Math.min(1, fit);
+        const drawnWidth = Math.max(1, Math.round(width * scale));
+        const drawnHeight = Math.max(1, Math.round(height * scale));
+        const left = gap + column * (cellWidth + gap);
+        const top = gap + row * (cellHeight + labelHeight + gap);
+        return {
+            x: left + Math.floor((cellWidth - drawnWidth) / 2),
+            y: top + Math.floor((cellHeight - drawnHeight) / 2),
+            width: drawnWidth,
+            height: drawnHeight,
+            labelX: left,
+            labelY: top + cellHeight,
+        };
+    });
+    return {
+        width: gap + columns * (cellWidth + gap),
+        height: gap + rows * (cellHeight + labelHeight + gap),
+        columns,
+        rows,
+        cell: [cellWidth, cellHeight],
+        labelHeight,
+        cells,
+    };
+}
+/** The host's canvas, read here and nowhere else (see `cascade.geo.Render`). */
+function host() {
+    const globals = globalThis;
+    const Canvas = globals.OffscreenCanvas;
+    const createBitmap = globals.createImageBitmap;
+    if (!Canvas || !createBitmap || !globals.Blob) {
+        throw new Error("cascade.image.ContactSheet needs OffscreenCanvas and createImageBitmap, which this host does not provide");
+    }
+    const BlobType = globals.Blob;
+    return {
+        surface: (width, height) => new Canvas(width, height),
+        decode: (bytes) => createBitmap(new BlobType([bytes])),
+    };
+}
+function css(colour, fallback) {
+    const [r = 0, g = 0, b = 0, a = 1] = colour ?? fallback;
+    return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${a})`;
+}
+/** Encoded images (PNG, JPEG, WebP) in, one PNG sheet out. */
+export async function composeContactSheet(images, options = {}) {
+    const canvas = host();
+    const bitmaps = [];
+    try {
+        for (const bytes of images)
+            bitmaps.push(await canvas.decode(bytes));
+        const labels = options.labels ?? [];
+        const labelSize = Math.round(options.labelSize ?? 14);
+        const labelled = labels.some((label) => label.trim().length > 0);
+        const layout = contactSheetLayout(bitmaps.map((bitmap) => [bitmap.width, bitmap.height]), {
+            columns: options.columns,
+            gap: options.gap,
+            cellWidth: options.cellWidth,
+            labelHeight: labelled ? Math.round(labelSize * 1.8) : 0,
+        });
+        const surface = canvas.surface(layout.width, layout.height);
+        const context = surface.getContext("2d");
+        if (!context)
+            throw new Error("cascade.image.ContactSheet: no 2D context");
+        context.fillStyle = css(options.background, [1, 1, 1, 1]);
+        context.fillRect(0, 0, layout.width, layout.height);
+        context.imageSmoothingEnabled = true;
+        context.imageSmoothingQuality = "high";
+        layout.cells.forEach((cell, index) => context.drawImage(bitmaps[index], cell.x, cell.y, cell.width, cell.height));
+        if (labelled) {
+            context.fillStyle = css(options.labelColor, [0.1, 0.1, 0.1, 1]);
+            context.font = `${labelSize}px sans-serif`;
+            context.textBaseline = "top";
+            layout.cells.forEach((cell, index) => {
+                const label = labels[index];
+                if (label)
+                    context.fillText(label, cell.labelX, cell.labelY + Math.round((layout.labelHeight - labelSize) / 2), layout.cell[0]);
+            });
+        }
+        const blob = await surface.convertToBlob({ type: "image/png" });
+        return { bytes: new Uint8Array(await blob.arrayBuffer()), layout };
+    }
+    finally {
+        for (const bitmap of bitmaps)
+            bitmap.close?.();
+    }
+}
+/** An image value or a path, as the asset reference to read it by. */
+function imageReference(value) {
+    if (typeof value === "string" && value)
+        return { path: value };
+    const candidate = value?.path;
+    return typeof candidate === "string" && candidate ? { path: candidate } : undefined;
+}
+export async function executeContactSheet(context) {
+    const { props } = context;
+    const references = [...context.inputs.images, ...(context.inputs.list ?? [])]
+        .map(imageReference)
+        .filter((reference) => reference !== undefined);
+    const bytes = [];
+    for (const reference of references) {
+        bytes.push(await context.capabilities.assets.read(reference, { signal: context.signal }));
+    }
+    const { bytes: sheet, layout } = await composeContactSheet(bytes, {
+        columns: props.columns,
+        gap: props.gap,
+        cellWidth: props.cellWidth,
+        labels: props.labels ? props.labels.split("\n") : [],
+        labelSize: props.labelSize,
+        background: props.background,
+        labelColor: props.labelColor,
+    });
+    const asset = await context.capabilities.assets.write(sheet, { mediaType: "image/png", suggestedName: props.filename }, { signal: context.signal });
+    context.outputs.asset.set(asset);
+    context.outputs.image.set({
+        path: asset.path ?? props.filename,
+        size: [layout.width, layout.height],
+        channels: "rgba",
+        depth: "u8",
+        space: "srgb",
+    });
+}
+//# sourceMappingURL=contactSheet.js.map