@thi.ng/imago 0.4.0 → 0.5.0

package/index.js

@@ -3,3 +3,21 @@ export * from "./ops.js";
 export * from "./path.js";
 export * from "./proc.js";
 export * from "./units.js";
+export * from "./layers/color.js";
+export * from "./layers/image.js";
+export * from "./layers/raw.js";
+export * from "./layers/svg.js";
+export * from "./layers/text.js";
+export * from "./ops/blur.js";
+export * from "./ops/composite.js";
+export * from "./ops/crop.js";
+export * from "./ops/dither.js";
+export * from "./ops/exif.js";
+export * from "./ops/extend.js";
+export * from "./ops/gamma.js";
+export * from "./ops/grayscale.js";
+export * from "./ops/hsbl.js";
+export * from "./ops/nest.js";
+export * from "./ops/output.js";
+export * from "./ops/resize.js";
+export * from "./ops/rotate.js";

package/layers/color.d.ts

@@ -0,0 +1,3 @@
+import type { CompLayerFn } from "../api.js";
+export declare const colorLayerImpl: CompLayerFn;
+//# sourceMappingURL=color.d.ts.map

package/layers/color.js

@@ -0,0 +1,31 @@
+import { coerceColor, computeSize, positionOrGravity } from "../units.js";
+const colorLayerImpl = async (layer, _, ctx) => {
+  const {
+    type: __,
+    bg,
+    gravity,
+    path,
+    pos,
+    ref,
+    size,
+    unit,
+    ...opts
+  } = layer;
+  const layerSize = size ? computeSize(size, ctx.size, ref, unit) : ctx.size;
+  const $pos = positionOrGravity(layerSize, ctx.size, layer);
+  return {
+    input: {
+      create: {
+        width: layerSize[0],
+        height: layerSize[1],
+        channels: 4,
+        background: coerceColor(bg)
+      }
+    },
+    ...$pos,
+    ...opts
+  };
+};
+export {
+  colorLayerImpl
+};

package/layers/image.d.ts

@@ -1,3 +1,3 @@
 import type { CompLayerFn } from "../api.js";
-export declare const imageLayer: CompLayerFn;
+export declare const imageLayerImpl: CompLayerFn;
 //# sourceMappingURL=image.d.ts.map

package/layers/image.js

@@ -1,29 +1,41 @@
+import { illegalArgs } from "@thi.ng/errors";
 import sharp from "sharp";
 import { computeSize, ensureSize, positionOrGravity } from "../units.js";
-const imageLayer = async (layer, _, ctx) => {
+const imageLayerImpl = async (layer, _, ctx) => {
   const {
     type: __,
+    buffer,
     gravity,
     path,
     pos,
+    ref,
     size,
     unit,
     ...opts
   } = layer;
-  const input = sharp(path);
+  if (!(path || buffer))
+    illegalArgs("missing image source");
+  const input = sharp(path || buffer);
   const meta = await input.metadata();
   let imgSize = [meta.width, meta.height];
-  const $pos = positionOrGravity(pos, gravity, imgSize, ctx.size, unit);
+  if (size)
+    imgSize = computeSize(size, imgSize, ref, unit);
+  const $pos = positionOrGravity(imgSize, ctx.size, layer);
   if (!size)
     return { input: path, ...$pos, ...opts };
   ensureSize(meta);
-  imgSize = computeSize(size, imgSize, unit);
+  const { data, info } = await input.resize(imgSize[0], imgSize[1], { fit: "fill" }).raw().toBuffer({ resolveWithObject: true });
   return {
-    input: await input.resize(imgSize[0], imgSize[1]).png({ compressionLevel: 0 }).toBuffer(),
+    input: data,
+    raw: {
+      width: info.width,
+      height: info.height,
+      channels: info.channels
+    },
     ...$pos,
     ...opts
   };
 };
 export {
-  imageLayer
+  imageLayerImpl
 };

package/layers/raw.d.ts

@@ -0,0 +1,3 @@
+import type { CompLayerFn } from "../api.js";
+export declare const rawLayerImpl: CompLayerFn;
+//# sourceMappingURL=raw.d.ts.map

package/layers/raw.js

@@ -0,0 +1,28 @@
+import { positionOrGravity } from "../units.js";
+const rawLayerImpl = async (layer, _, ctx) => {
+  const {
+    type: __,
+    buffer,
+    channels,
+    gravity,
+    pos,
+    ref,
+    size,
+    unit,
+    ...opts
+  } = layer;
+  const $pos = positionOrGravity(size, ctx.size, layer);
+  return {
+    input: Buffer.from(buffer.buffer),
+    raw: {
+      width: size[0],
+      height: size[1],
+      channels
+    },
+    ...$pos,
+    ...opts
+  };
+};
+export {
+  rawLayerImpl
+};

package/layers/svg.d.ts

@@ -1,3 +1,3 @@
 import type { CompLayerFn } from "../api.js";
-export declare const svgLayer: CompLayerFn;
+export declare const svgLayerImpl: CompLayerFn;
 //# sourceMappingURL=svg.d.ts.map

package/layers/svg.js

@@ -1,17 +1,30 @@
 import { readText } from "@thi.ng/file-io";
 import { positionOrGravity } from "../units.js";
-const svgLayer = async (layer, _, ctx) => {
-  let { type: __, body, gravity, path, pos, unit, ...opts } = layer;
+import { illegalArgs } from "@thi.ng/errors";
+const svgLayerImpl = async (layer, _, ctx) => {
+  let {
+    type: __,
+    body,
+    gravity,
+    origin,
+    path,
+    pos,
+    ref,
+    unit,
+    ...opts
+  } = layer;
   if (path)
     body = readText(path, ctx.logger);
+  if (!body)
+    illegalArgs("missing SVG doc");
   const w = +(/width="(\d+)"/.exec(body)?.[1] || 0);
   const h = +(/height="(\d+)"/.exec(body)?.[1] || 0);
   return {
     input: Buffer.from(body),
-    ...positionOrGravity(pos, gravity, [w, h], ctx.size, unit),
+    ...positionOrGravity([w, h], ctx.size, layer),
     ...opts
   };
 };
 export {
-  svgLayer
+  svgLayerImpl
 };

package/layers/text.d.ts

@@ -1,3 +1,3 @@
 import type { CompLayerFn } from "../api.js";
-export declare const textLayer: CompLayerFn;
+export declare const textLayerImpl: CompLayerFn;
 //# sourceMappingURL=text.d.ts.map

package/layers/text.js

@@ -1,32 +1,35 @@
 import { isFunction } from "@thi.ng/checks";
-import { writeText } from "@thi.ng/file-io";
 import { XML_SVG } from "@thi.ng/prefixes";
-import { computeSize, positionOrGravity } from "../units.js";
-const textLayer = async (layer, _, ctx) => {
-  const {
+import { computeSize, gravityFlags, positionOrGravity } from "../units.js";
+import { readText } from "@thi.ng/file-io";
+const textLayerImpl = async (layer, _, ctx) => {
+  let {
     type: __,
-    bg = "transparent",
-    color = "white",
+    bg = "#0000",
+    body = "",
+    color = "#fff",
     font = "sans-serif",
     fontSize = 16,
     padding = 0,
     textGravity = "c",
-    body,
     gravity,
+    origin,
     path,
     pos,
+    ref,
     size,
     unit,
     ...opts
   } = layer;
-  const [w, h] = computeSize(size, ctx.size, unit);
-  const [isE, isW, isN, isS] = ["e", "w", "n", "s"].map(
-    (x2) => textGravity.includes(x2)
-  );
+  let bounds;
+  const [w, h] = bounds = computeSize(size, ctx.size, ref, unit);
+  const [isE, isW, isN, isS] = gravityFlags(textGravity);
   const x = isW ? padding : isE ? w - padding : w / 2;
   const y = isN ? padding : isS ? h - padding : h / 2;
   const align = isW ? "start" : isE ? "end" : "middle";
   const valign = isN ? 0.75 : isS ? 0 : 0.25;
+  if (path)
+    body = readText(path, ctx.logger);
   const $body = isFunction(body) ? body(ctx) : body;
   const svg = [
     `<svg xmlns="${XML_SVG}" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`,
@@ -34,13 +37,12 @@ const textLayer = async (layer, _, ctx) => {
     `<text x="${x}" y="${y}" text-anchor="${align}" dy="${valign}em" fill="${color}" font-family="${font}" font-size="${fontSize}">${$body}</text>`,
     `</svg>`
   ].join("");
-  writeText("text-debug.svg", svg);
   return {
     input: Buffer.from(svg),
-    ...positionOrGravity(pos, gravity, [w, h], ctx.size, unit),
+    ...positionOrGravity(bounds, ctx.size, layer),
     ...opts
   };
 };
 export {
-  textLayer
+  textLayerImpl
 };

package/ops/composite.js

@@ -1,7 +1,9 @@
 import { defmulti } from "@thi.ng/defmulti";
-import { imageLayer } from "../layers/image.js";
-import { svgLayer } from "../layers/svg.js";
-import { textLayer } from "../layers/text.js";
+import { colorLayerImpl } from "../layers/color.js";
+import { imageLayerImpl } from "../layers/image.js";
+import { rawLayerImpl } from "../layers/raw.js";
+import { svgLayerImpl } from "../layers/svg.js";
+import { textLayerImpl } from "../layers/text.js";
 const compositeProc = async (spec, input, ctx) => {
   const { layers } = spec;
   const layerSpecs = await Promise.all(
@@ -14,9 +16,11 @@ const defLayer = defmulti(
   (x) => x.type,
   {},
   {
-    img: imageLayer,
-    svg: svgLayer,
-    text: textLayer
+    color: colorLayerImpl,
+    img: imageLayerImpl,
+    raw: rawLayerImpl,
+    svg: svgLayerImpl,
+    text: textLayerImpl
   }
 );
 export {

package/ops/crop.js

@@ -1,12 +1,14 @@
+import { isNumber } from "@thi.ng/checks";
 import { illegalArgs } from "@thi.ng/errors";
 import {
   computeMargins,
   computeSize,
+  computeSizeWithAspect,
   gravityPosition,
   positionOrGravity
 } from "../units.js";
 const cropProc = async (spec, input, ctx) => {
-  const { border, gravity, pos, size, ref, unit } = spec;
+  const { aspect, border, gravity, pos, size, ref, unit } = spec;
   if (border == null && size == null)
     illegalArgs("require `border` or `size` option");
   if (border != null) {
@@ -22,10 +24,17 @@ const cropProc = async (spec, input, ctx) => {
       true
     ];
   }
-  const $size = computeSize(size, ctx.size, unit);
+  let $size;
+  if (aspect != void 0) {
+    if (!isNumber(size))
+      illegalArgs("size must be numeric if aspect is used");
+    $size = computeSizeWithAspect(size, ctx.size, aspect, unit);
+  } else {
+    $size = computeSize(size, ctx.size, ref, unit);
+  }
   let left = 0, top = 0;
   if (pos) {
-    ({ left = 0, top = 0 } = positionOrGravity(pos, gravity, $size, ctx.size, unit) || {});
+    ({ left = 0, top = 0 } = positionOrGravity($size, ctx.size, spec) || {});
   } else {
     [left, top] = gravityPosition(gravity || "c", $size, ctx.size);
   }

package/ops/extend.js

@@ -9,7 +9,7 @@ const extendProc = async (spec, input, ctx) => {
       right,
       top,
       bottom,
-      background: coerceColor(bg || "#000"),
+      background: coerceColor(bg || "#0000"),
       extendWith: mode
     }),
     true

package/ops/output.js

@@ -1,8 +1,9 @@
 import { encode } from "@thi.ng/blurhash";
+import { isNumber, isPlainObject } from "@thi.ng/checks";
 import { writeFile, writeJSON } from "@thi.ng/file-io";
 import { join, resolve } from "node:path";
 import { formatPath } from "../path.js";
-import { isNumber, isPlainObject } from "@thi.ng/checks";
+import { illegalArgs } from "@thi.ng/errors";
 const outputProc = async (spec, input, ctx) => {
   const opts = spec;
   const outDir = resolve(ctx.opts.outDir || ".");
@@ -11,6 +12,8 @@ const outputProc = async (spec, input, ctx) => {
     await outputBlurHash(opts, output, ctx);
     return [input, false];
   }
+  if (!opts.path)
+    illegalArgs("output path missing");
   if (opts.raw) {
     await outputRaw(opts, output, ctx, outDir);
     return [input, false];
@@ -81,7 +84,7 @@ const outputRaw = async (opts, output, ctx, outDir) => {
   const { alpha = false, meta = false } = isPlainObject(opts.raw) ? opts.raw : {};
   if (alpha)
     output = output.ensureAlpha();
-  const { data, info } = await output.ensureAlpha().raw().toBuffer({ resolveWithObject: true });
+  const { data, info } = await output.raw().toBuffer({ resolveWithObject: true });
   const path = join(outDir, formatPath(opts.path, ctx, opts, data));
   writeFile(path, data, null, ctx.logger);
   ctx.outputs[opts.id] = path;
@@ -97,7 +100,7 @@ const outputRaw = async (opts, output, ctx, outDir) => {
 };
 const outputBlurHash = async (opts, output, ctx) => {
   const { data, info } = await output.ensureAlpha().raw().toBuffer({ resolveWithObject: true });
-  const detail = opts.blurhash.detail || 4;
+  const detail = opts.blurhash === true ? 4 : opts.blurhash;
   const [dx, dy] = isNumber(detail) ? [detail, detail] : detail;
   const hash = encode(
     new Uint32Array(data.buffer),
@@ -106,8 +109,8 @@ const outputBlurHash = async (opts, output, ctx) => {
     dx,
     dy
   );
-  ctx.outputs[opts.id] = hash;
   ctx.logger.debug("computed blurhash:", hash);
+  ctx.outputs[opts.id] = hash;
 };
 export {
   outputProc

package/ops/resize.js

@@ -1,8 +1,15 @@
+import { isNumber } from "@thi.ng/checks";
 import { GRAVITY_POSITION } from "../api.js";
 import { coerceColor, computeSize } from "../units.js";
 const resizeProc = async (spec, input, ctx) => {
-  const { bg, filter, fit, gravity, size, unit } = spec;
-  const [width, height] = computeSize(size, ctx.size, unit);
+  const { bg, filter, fit, gravity, ref, size, unit } = spec;
+  const aspect = ctx.size[0] / ctx.size[1];
+  let $size = size;
+  let width, height;
+  if (isNumber($size) && unit !== "%") {
+    $size = aspect > 1 ? [$size, $size / aspect] : [$size * aspect, $size];
+  }
+  [width, height] = computeSize($size, ctx.size, ref, unit);
   return [
     input.resize({
       width,

package/ops/rotate.js

@@ -5,7 +5,10 @@ const rotateProc = async (spec, input, _) => {
     input = input.flop();
   if (flipY)
     input = input.flip();
-  return [input.rotate(angle, { background: coerceColor(bg) }), true];
+  return [
+    input.rotate(angle, { background: coerceColor(bg || "#0000") }),
+    true
+  ];
 };
 export {
   rotateProc

package/ops.d.ts

@@ -1,16 +1,83 @@
-import type { BlurSpec, CompSpec, CropSpec, DitherSpec, EXIFSpec, ExtendSpec, GammaSpec, GrayscaleSpec, HSBLSpec, NestSpec, OutputSpec, ProcSpec, ResizeSpec, RotateSpec } from "./api.js";
+import type { BlurSpec, ColorLayer, CompLayer, CompSpec, CropSpec, DitherSpec, EXIFSpec, ExtendSpec, GammaSpec, GrayscaleSpec, HSBLSpec, ImgLayer, NestSpec, OutputSpec, ProcSpec, RawLayer, ResizeSpec, RotateSpec, SVGLayer, TextLayer } from "./api.js";
+/** @internal */
 export declare const defSpec: <T extends ProcSpec>(op: T["op"]) => (opts: Omit<T, "op">) => T;
+/** @internal */
+export declare const defLayerSpec: <T extends CompLayer>(type: T["type"]) => (opts: Omit<T, "op">) => T;
+/**
+ * Creates a new {@link BlurSpec} with given opts.
+ */
 export declare const blur: (opts: Omit<BlurSpec, "op">) => BlurSpec;
+/**
+ * Creates a new {@link CompSpec} with given opts.
+ */
 export declare const composite: (opts: Omit<CompSpec, "op">) => CompSpec;
+/**
+ * Creates a new {@link ColorLayer} spec with given opts (for use with
+ * {@link composite} /  {@link CompSpec}).
+ */
+export declare const colorLayer: (opts: Omit<ColorLayer, "op">) => ColorLayer;
+/**
+ * Creates a new {@link ImgLayer} spec with given opts (for use with
+ * {@link composite} /  {@link CompSpec}).
+ */
+export declare const imageLayer: (opts: Omit<ImgLayer, "op">) => ImgLayer;
+/**
+ * Creates a new {@link RawLayer} spec with given opts (for use with
+ * {@link composite} /  {@link CompSpec}).
+ */
+export declare const rawLayer: (opts: Omit<RawLayer, "op">) => RawLayer;
+/**
+ * Creates a new {@link SVGLayer} spec with given opts (for use with
+ * {@link composite} /  {@link CompSpec}).
+ */
+export declare const svgLayer: (opts: Omit<SVGLayer, "op">) => SVGLayer;
+/**
+ * Creates a new {@link TextLayer} spec with given opts (for use with
+ * {@link composite} /  {@link CompSpec}).
+ */
+export declare const textLayer: (opts: Omit<TextLayer, "op">) => TextLayer;
+/**
+ * Creates a new {@link CompSpec} with given opts.
+ */
 export declare const crop: (opts: Omit<CropSpec, "op">) => CropSpec;
+/**
+ * Creates a new {@link DitherSpec} with given opts.
+ */
 export declare const dither: (opts: Omit<DitherSpec, "op">) => DitherSpec;
+/**
+ * Creates a new {@link EXIFSpec} with given opts.
+ */
 export declare const exif: (opts: Omit<EXIFSpec, "op">) => EXIFSpec;
+/**
+ * Creates a new {@link ExtendSpec} with given opts.
+ */
 export declare const extend: (opts: Omit<ExtendSpec, "op">) => ExtendSpec;
+/**
+ * Creates a new {@link GammaSpec} with given opts.
+ */
 export declare const gamma: (opts: Omit<GammaSpec, "op">) => GammaSpec;
+/**
+ * Creates a new {@link GrayscaleSpec} with given opts.
+ */
 export declare const grayscale: (opts: Omit<GrayscaleSpec, "op">) => GrayscaleSpec;
+/**
+ * Creates a new {@link HSBLSpec} with given opts.
+ */
 export declare const hsbl: (opts: Omit<HSBLSpec, "op">) => HSBLSpec;
+/**
+ * Creates a new {@link NestSpec} with given opts.
+ */
 export declare const nest: (opts: Omit<NestSpec, "op">) => NestSpec;
+/**
+ * Creates a new {@link OutputSpec} with given opts.
+ */
 export declare const output: (opts: Omit<OutputSpec, "op">) => OutputSpec;
+/**
+ * Creates a new {@link ResizeSpec} with given opts.
+ */
 export declare const resize: (opts: Omit<ResizeSpec, "op">) => ResizeSpec;
+/**
+ * Creates a new {@link RotateSpec} with given opts.
+ */
 export declare const rotate: (opts: Omit<RotateSpec, "op">) => RotateSpec;
 //# sourceMappingURL=ops.d.ts.map

package/ops.js

@@ -1,6 +1,12 @@
 const defSpec = (op) => (opts) => ({ op, ...opts });
+const defLayerSpec = (type) => (opts) => ({ type, ...opts });
 const blur = defSpec("blur");
 const composite = defSpec("composite");
+const colorLayer = defLayerSpec("color");
+const imageLayer = defLayerSpec("img");
+const rawLayer = defLayerSpec("raw");
+const svgLayer = defLayerSpec("svg");
+const textLayer = defLayerSpec("text");
 const crop = defSpec("crop");
 const dither = defSpec("dither");
 const exif = defSpec("exif");
@@ -14,8 +20,10 @@ const resize = defSpec("resize");
 const rotate = defSpec("rotate");
 export {
   blur,
+  colorLayer,
   composite,
   crop,
+  defLayerSpec,
   defSpec,
   dither,
   exif,
@@ -23,8 +31,12 @@ export {
   gamma,
   grayscale,
   hsbl,
+  imageLayer,
   nest,
   output,
+  rawLayer,
   resize,
-  rotate
+  rotate,
+  svgLayer,
+  textLayer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/imago",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "JSON & API-based declarative and extensible image processing trees/pipelines",
   "type": "module",
   "module": "./index.js",
@@ -39,19 +39,19 @@
     "@thi.ng/associative": "^6.3.43",
     "@thi.ng/blurhash": "^0.1.11",
     "@thi.ng/checks": "^3.5.0",
-    "@thi.ng/date": "^2.7.1",
+    "@thi.ng/date": "^2.7.2",
     "@thi.ng/defmulti": "^3.0.26",
     "@thi.ng/errors": "^2.4.18",
     "@thi.ng/file-io": "^1.3.4",
     "@thi.ng/logger": "^3.0.3",
-    "@thi.ng/pixel": "^6.1.12",
-    "@thi.ng/pixel-dither": "^1.1.110",
+    "@thi.ng/pixel": "^6.1.13",
+    "@thi.ng/pixel-dither": "^1.1.111",
     "@thi.ng/prefixes": "^2.3.10",
     "sharp": "^0.33.2"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.40.1",
-    "@thi.ng/vectors": "^7.10.12",
+    "@thi.ng/vectors": "^7.10.13",
     "esbuild": "^0.20.0",
     "rimraf": "^5.0.5",
     "typedoc": "^0.25.7",
@@ -109,6 +109,60 @@
     "./api": {
       "default": "./api.js"
     },
+    "./layers/color": {
+      "default": "./layers/color.js"
+    },
+    "./layers/image": {
+      "default": "./layers/image.js"
+    },
+    "./layers/raw": {
+      "default": "./layers/raw.js"
+    },
+    "./layers/svg": {
+      "default": "./layers/svg.js"
+    },
+    "./layers/text": {
+      "default": "./layers/text.js"
+    },
+    "./ops/blur": {
+      "default": "./ops/blur.js"
+    },
+    "./ops/composite": {
+      "default": "./ops/composite.js"
+    },
+    "./ops/crop": {
+      "default": "./ops/crop.js"
+    },
+    "./ops/dither": {
+      "default": "./ops/dither.js"
+    },
+    "./ops/exif": {
+      "default": "./ops/exif.js"
+    },
+    "./ops/extend": {
+      "default": "./ops/extend.js"
+    },
+    "./ops/gamma": {
+      "default": "./ops/gamma.js"
+    },
+    "./ops/grayscale": {
+      "default": "./ops/grayscale.js"
+    },
+    "./ops/hsbl": {
+      "default": "./ops/hsbl.js"
+    },
+    "./ops/nest": {
+      "default": "./ops/nest.js"
+    },
+    "./ops/output": {
+      "default": "./ops/output.js"
+    },
+    "./ops/resize": {
+      "default": "./ops/resize.js"
+    },
+    "./ops/rotate": {
+      "default": "./ops/rotate.js"
+    },
     "./ops": {
       "default": "./ops.js"
     },
@@ -126,5 +180,5 @@
     "status": "alpha",
     "year": 2024
   },
-  "gitHead": "41860743a21093aa13b6b7f4e36cd5e2e934d159\n"
+  "gitHead": "dab0cb468a4c3d968ee1eea4e5dcd8df4889faa6\n"
 }

package/path.d.ts

@@ -13,6 +13,7 @@ import type { ImgProcCtx, OutputSpec } from "./api.js";
  * - sha1/224/256/384/512: truncated hash of output
  * - w: current width
  * - h: current height
+ * - aspect: "p" (portrait), "l" (landscape) or "sq" (square)
  * - date: yyyyMMdd
  * - time: HHmmss
  * - year: 4-digit year

package/path.js

@@ -38,6 +38,10 @@ const formatPath = (path, ctx, spec, buf) => path.replace(/\{(\w+)\}/g, (match,
       return String(ctx.size[0]);
     case "h":
       return String(ctx.size[1]);
+    case "aspect": {
+      const [w, h] = ctx.size;
+      return w > h ? "l" : w < h ? "p" : "sq";
+    }
     case "date":
       return FMT_yyyyMMdd_ALT(_, true);
     case "time":