@arraypress/covers 0.0.0-stage → 1.1.0

package/src/layers/table.js

@@ -0,0 +1,80 @@
+/**
+ * The `table` layer: meta grids, lineups, tracklists.
+ *
+ * @module layers/table
+ */
+
+import { attrs, num } from '../svg.js';
+import { len } from '../geometry.js';
+import { toHex } from '../color.js';
+import { faceFor, setLine } from '../type/line.js';
+import { pos, wrap, contentOf } from './util.js';
+
+
+/**
+ * `table` — text on a grid: meta blocks, lineups, tracklists, programmes.
+ * `rows` is an array of rows (each an array of cells, or an object read
+ * through each column's `key`); a cell is text (`\n` for more lines) or
+ * `{ content, weight, size, color, align, font, opacity }`. `columns` give
+ * each column's `x` (px or `'%'`), `align`, `width` (justify), `key` and
+ * text style. Rows start at `y` (the first baseline) and step by
+ * `rowHeight`, or by their line count × `lineHeight` plus `rowGap`.
+ * `rules` draws hairlines between or above rows.
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {Promise<import('../layers.js').Markup>}
+ */
+export async function table(layer, ctx) {
+  const rows = /** @type {any[]} */ (layer.rows ?? []);
+  const cols = /** @type {any[]} */ (layer.columns ?? []);
+  const size = len(layer.size, ctx.canvas, '2.2vmin');
+  const lineH = len(layer.lineHeight, ctx.canvas, size * 1.22);
+  const x0 = pos(layer.x ?? 0, 'x', ctx.canvas);
+  let y = pos(layer.y ?? 0, 'y', ctx.canvas);
+  const color = layer.color ? toHex(layer.color) : ctx.palette.text;
+  /** @type {Map<string, string>} */
+  const byColor = new Map();
+  const add = (/** @type {string} */ c, /** @type {string} */ d) => byColor.set(c, (byColor.get(c) ?? '') + d);
+  let rules = '';
+  const r = layer.rules ? (layer.rules === true ? {} : layer.rules) : null;
+  const rx1 = r ? pos(r.x1 ?? layer.x ?? 0, 'x', ctx.canvas) : 0;
+  const rx2 = r ? pos(r.x2 ?? '100%', 'x', ctx.canvas) : 0;
+  const ruleAt = (/** @type {number} */ ry) => { rules += `M${num(rx1)} ${num(ry)}H${num(rx2)}`; };
+
+  for (let ri = 0; ri < rows.length; ri++) {
+    const row = rows[ri];
+    const cells = Array.isArray(row) ? row : typeof row === 'string' || typeof row === 'number' ? [row] : cols.map((c) => row?.[c.key]);
+    if (r && (r.at === 'top' || r.at === 'each') && ri === 0) ruleAt(y - size * (r.above ?? 1.1));
+    let lines = 1;
+    for (let ci = 0; ci < cells.length; ci++) {
+      const cell = cells[ci];
+      if (cell == null || cell === '') continue;
+      const col = { ...(layer.header && ri === 0 ? layer.header : {}), ...(cols[ci] ?? {}) };
+      const o = typeof cell === 'object' && !Array.isArray(cell) ? { ...col, ...cell } : { ...col, content: cell };
+      const text = String(Array.isArray(o.content) ? o.content.join('\n') : contentOf(o.content) ?? o.content);
+      const face = await faceFor(ctx, { font: o.font ?? layer.font, weight: o.weight ?? layer.weight ?? 400, style: o.style ?? layer.style, axes: o.axes ?? layer.axes });
+      const s = len(o.size, ctx.canvas, size);
+      const ls = (o.letterSpacing ?? layer.letterSpacing ?? 0) * s;
+      const cx = o.x != null ? pos(o.x, 'x', ctx.canvas) : x0 + ci * len(layer.columnWidth, ctx.canvas, '20vmin');
+      const parts = (o.transform === 'uppercase' ? text.toUpperCase() : text).split('\n');
+      parts.forEach((t, li) => {
+        const line = setLine({ face, text: t, size: s, tracking: ls, x: cx, y: y + li * lineH, align: o.align ?? 'left', width: o.width != null ? len(o.width, ctx.canvas) : undefined, adjust: o.lengthAdjust });
+        const fill = o.color ? toHex(o.color) : color;
+        add(o.opacity != null ? `${fill}|${o.opacity}` : fill, line.d);
+      });
+      lines = Math.max(lines, parts.length);
+    }
+    const step = layer.rowHeight != null ? len(layer.rowHeight, ctx.canvas) : lines * lineH + len(layer.rowGap, ctx.canvas, size * 0.6);
+    if (r && (r.at === 'between' || r.at == null || r.at === 'each') && ri < rows.length - 1) ruleAt(y + step - size * (r.above ?? 1.1));
+    y += step;
+  }
+  let body = '';
+  if (rules && r) body += `<path${attrs({ d: rules, fill: 'none', stroke: r.color ? toHex(r.color) : color, 'stroke-width': len(r.width, ctx.canvas, '0.12vmin'), opacity: r.opacity })}/>`;
+  for (const [key, d] of byColor) {
+    const [fill, op] = key.split('|');
+    body += `<path${attrs({ d, fill, opacity: op != null ? Number(op) : undefined })}/>`;
+  }
+  /** @type {any} */ (ctx).report?.({ kind: 'text', id: layer.id, content: rows.map((row) => (Array.isArray(row) ? row : Object.values(row ?? {})).map((c) => (typeof c === 'object' && c ? c.content : c)).join(' ')).join('\n'), size, capHeight: size * 0.72, box: null });
+  return { defs: '', body: wrap(layer, body) };
+}

package/src/layers/tear.d.ts

@@ -0,0 +1,21 @@
+// The `tear` layer.
+import type { Color, Length, BaseLayer, Anchor } from '../index.js';
+import type { RenderContext, Markup } from '../render/context.js';
+import type { Paint } from '../effects/paint.js';
+
+export interface TearLayer extends BaseLayer {
+  type: 'tear';
+  from?: [Length | `${number}%`, Length | `${number}%`];
+  to?: [Length | `${number}%`, Length | `${number}%`];
+  side?: 'above' | 'below' | 'left' | 'right';
+  color?: Paint;
+  sheetOpacity?: number;
+  step?: Length; jitter?: Length;
+  rip?: false | { color?: Color; width?: Length; opacity?: number };
+  fibres?: false | { color?: Color; width?: Length; opacity?: number; length?: [Length, Length]; spread?: Length };
+  ripColor?: Color;
+}
+
+
+/** Draw torn paper: the sheet, its rip and fibres. */
+export function tear(layer: TearLayer, ctx: RenderContext): Markup;

package/src/layers/tear.js

@@ -0,0 +1,74 @@
+/**
+ * The `tear` layer: torn paper with fibres at the rip.
+ *
+ * @module layers/tear
+ */
+
+import { attrs, num } from '../svg.js';
+import { len } from '../geometry.js';
+import { toHex } from '../color.js';
+import { paint } from '../effects/paint.js';
+import { pos, wrap } from './util.js';
+
+
+/**
+ * `tear` — paper torn along a jagged line from `from` to `to` (edge to
+ * edge): the sheet on one `side` (`'above'`, `'below'`, `'left'`, `'right'`)
+ * in `color`, the white core of the rip along the edge (`rip`), and fibres
+ * hanging off it (`fibres`). `step` and `jitter` set the jaggedness. Use
+ * the same `seed` on two tear layers to draw the sheet and its edge
+ * separately (say, the sheet under a knockout and the edge over it).
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {import('../layers.js').Markup}
+ */
+export function tear(layer, ctx) {
+  const { width: w, height: h, rng } = ctx;
+  const P = (/** @type {any} */ q) => /** @type {[number, number]} */ ([pos(q?.[0] ?? q?.x ?? 0, 'x', ctx.canvas), pos(q?.[1] ?? q?.y ?? 0, 'y', ctx.canvas)]);
+  const from = P(layer.from ?? [0, '62%']);
+  const to = P(layer.to ?? ['100%', '36%']);
+  const step = len(layer.step, ctx.canvas, '2vmin');
+  const jitter = len(layer.jitter, ctx.canvas, '4.4vmin');
+  const L = Math.hypot(to[0] - from[0], to[1] - from[1]);
+  const n = Math.max(2, Math.round(L / step));
+  const nx = -(to[1] - from[1]) / L;
+  const ny = (to[0] - from[0]) / L;
+  const pts = [];
+  for (let i = 0; i <= n; i++) {
+    const t = i / n;
+    const j = (rng.next() - 0.5) * jitter;
+    pts.push([from[0] + (to[0] - from[0]) * t + nx * j, from[1] + (to[1] - from[1]) * t + ny * j]);
+  }
+  const line = pts.map((q, i) => `${i ? 'L' : 'M'}${num(q[0], 1)} ${num(q[1], 1)}`).join('');
+  let body = '';
+  const side = layer.side ?? 'above';
+  if (layer.color !== 'none' && layer.color !== false) {
+    const pad = Math.max(w, h);
+    const ext = { above: [0, -pad], below: [0, pad], left: [-pad, 0], right: [pad, 0] }[/** @type {'above'} */ (side)] ?? [0, -pad];
+    const first = pts[0];
+    const last = pts[pts.length - 1];
+    // Extend the ends past the canvas so a line that stops at the edge still closes off the corner.
+    const sx = Math.sign(last[0] - first[0]) || 1;
+    const sy = Math.sign(last[1] - first[1]) || 1;
+    const horizontal = side === 'above' || side === 'below';
+    const d = horizontal
+      ? `M${num(first[0] - sx * pad, 1)} ${num(first[1], 1)}${line.replace(/^M/, 'L')}L${num(last[0] + sx * pad, 1)} ${num(last[1], 1)}L${num(last[0] + sx * pad, 1)} ${num(last[1] + ext[1], 1)}L${num(first[0] - sx * pad, 1)} ${num(first[1] + ext[1], 1)}Z`
+      : `M${num(first[0], 1)} ${num(first[1] - sy * pad, 1)}${line.replace(/^M/, 'L')}L${num(last[0], 1)} ${num(last[1] + sy * pad, 1)}L${num(last[0] + ext[0], 1)} ${num(last[1] + sy * pad, 1)}L${num(first[0] + ext[0], 1)} ${num(first[1] - sy * pad, 1)}Z`;
+    const fp = paint(layer.color, ctx.palette.accent, { id: `${ctx.id}t`, box: { x: 0, y: 0, width: w, height: h }, canvas: ctx.canvas });
+    body += `<path${attrs({ d, fill: fp.value, opacity: layer.sheetOpacity })}/>`;
+  }
+  if (layer.fibres !== false) {
+    const f = layer.fibres && typeof layer.fibres === 'object' ? layer.fibres : {};
+    const [lo, hi] = (f.length ?? ['0.8vmin', '2vmin']).map((/** @type {any} */ v) => len(v, ctx.canvas));
+    const spread = len(f.spread, ctx.canvas, '0.6vmin');
+    const dir = side === 'above' || side === 'left' ? 1 : -1;
+    const d = pts.map((q) => `M${num(q[0], 1)} ${num(q[1], 1)}l${num((rng.next() * 2 - 1) * spread, 1)} ${num(dir * (lo + rng.next() * (hi - lo)), 1)}`).join('');
+    body += `<path${attrs({ d, stroke: toHex(f.color ?? layer.ripColor ?? '#fff6fb'), 'stroke-width': len(f.width, ctx.canvas, '0.44vmin'), 'stroke-linecap': 'round', fill: 'none', opacity: f.opacity ?? 0.85 })}/>`;
+  }
+  if (layer.rip !== false) {
+    const r = layer.rip && typeof layer.rip === 'object' ? layer.rip : {};
+    body += `<path${attrs({ d: line, stroke: toHex(r.color ?? layer.ripColor ?? '#fff6fb'), 'stroke-width': len(r.width, ctx.canvas, '0.7vmin'), fill: 'none', opacity: r.opacity ?? 0.9 })}/>`;
+  }
+  return { defs: '', body: wrap(layer, body) };
+}

package/src/layers/texture.d.ts

@@ -0,0 +1,17 @@
+// The `texture` layer.
+import type { Color, Length, BaseLayer, Anchor } from '../index.js';
+import type { RenderContext, Markup } from '../render/context.js';
+
+export interface TextureLayer extends BaseLayer {
+  type: 'texture';
+  kind?: 'paper' | 'creases' | 'concrete' | 'speck' | 'wood' | 'folds' | 'dust';
+  color?: Color; amount?: number; frequency?: number | [number, number]; octaves?: number;
+  depth?: number; azimuth?: number; elevation?: number;
+  x?: number[]; y?: number[]; width?: Length; strength?: number;
+  count?: number; size?: [Length, Length];
+  region?: { x?: Length | `${number}%`; y?: Length | `${number}%`; width?: Length | `${number}%`; height?: Length | `${number}%` };
+}
+
+
+/** Draw a surface texture. */
+export function texture(layer: TextureLayer, ctx: RenderContext): Markup;

package/src/layers/texture.js

@@ -0,0 +1,106 @@
+/**
+ * The `texture` layer: paper, creases, concrete, speck, wood, folds, dust.
+ *
+ * @module layers/texture
+ */
+
+import { attrs, num } from '../svg.js';
+import { len } from '../geometry.js';
+import { toHex } from '../color.js';
+import { pos, wrap } from './util.js';
+
+
+/**
+ * `texture` — a surface laid over (or under) the artwork: `paper` (fibres),
+ * `creases` (pasted paper lit from the side; soft-light), `concrete`,
+ * `speck` (white specks), `wood`, `folds` (straight fold lines with a lit
+ * and a shaded side), `dust` (seeded specks of dirt). `color`, `opacity`,
+ * `blend`, `frequency`, `octaves` and `region` adjust it.
+ *
+ * @param {any} layer
+ * @param {import('../layers.js').RenderContext} ctx
+ * @returns {import('../layers.js').Markup}
+ */
+export function texture(layer, ctx) {
+  const { width: w, height: h, rng } = ctx;
+  const kind = layer.kind ?? 'paper';
+  const id = `${ctx.id}t`;
+  const seed = layer.seed ?? rng.int(1, 9999);
+  const rgb = (/** @type {string} */ c) => [1, 3, 5].map((i) => num(parseInt(toHex(c).slice(i, i + 2), 16) / 255, 3));
+  const f = (/** @type {any} */ v, /** @type {string} */ d) => (v == null ? d : [].concat(v).map((x) => num(x, 4)).join(' '));
+  const rect = (/** @type {string} */ extra = '') => `<rect${attrs({ width: w, height: h, filter: `url(#${id})` })}${extra}/>`;
+  const region = `${attrs({ id, x: 0, y: 0, width: w, height: h, filterUnits: 'userSpaceOnUse', 'color-interpolation-filters': 'sRGB' })}`;
+  let defs = '';
+  let body = '';
+  let blend = layer.blend;
+  let opacity = layer.opacity;
+  // Feature sizes are tuned on a 400 px wide sheet; scale with the canvas.
+  const k = 400 / Math.min(w, h * 0.8);
+  const fq = (/** @type {number[]} */ ...v) => v.map((x) => x * k);
+  switch (kind) {
+    case 'paper': {
+      const [r, g, b] = rgb(layer.color ?? '#73664d');
+      defs = `<filter${region}><feTurbulence type="fractalNoise" baseFrequency="${f(layer.frequency, fq(0.55, 0.3).map((x) => num(x, 4)).join(' '))}" numOctaves="${layer.octaves ?? 3}" seed="${seed}"/><feColorMatrix type="matrix" values="0 0 0 0 ${r}  0 0 0 0 ${g}  0 0 0 0 ${b}  0 0 0 -0.9 ${num(0.5 * (layer.amount ?? 1), 3)}"/></filter>`;
+      body = rect();
+      break;
+    }
+    case 'creases':
+      defs = `<filter${region}><feTurbulence type="turbulence" baseFrequency="${f(layer.frequency, fq(0.006, 0.022).map((x) => num(x, 4)).join(' '))}" numOctaves="${layer.octaves ?? 3}" seed="${seed}" result="t"/><feDiffuseLighting in="t" surfaceScale="${num(layer.depth ?? 3.4, 3)}" lighting-color="#fff" result="lit"><feDistantLight azimuth="${layer.azimuth ?? 225}" elevation="${layer.elevation ?? 38}"/></feDiffuseLighting><feColorMatrix in="lit" type="saturate" values="0"/></filter>`;
+      body = rect();
+      blend ??= 'soft-light';
+      opacity ??= 0.95;
+      break;
+    case 'concrete': {
+      const [r, g, b] = rgb(layer.color ?? '#857f7a');
+      defs = `<filter${region}><feTurbulence type="fractalNoise" baseFrequency="${f(layer.frequency, fq(0.035, 0.05).map((x) => num(x, 4)).join(' '))}" numOctaves="${layer.octaves ?? 4}" seed="${seed}"/><feColorMatrix type="matrix" values="0 0 0 0 ${r}  0 0 0 0 ${g}  0 0 0 0 ${b}  0.6 0.6 0.6 0 -0.4"/></filter>`;
+      body = rect();
+      break;
+    }
+    case 'speck': {
+      const [r, g, b] = rgb(layer.color ?? '#ffffff');
+      defs = `<filter${region}><feTurbulence type="fractalNoise" baseFrequency="${f(layer.frequency, num(0.7 * k, 4))}" numOctaves="1" seed="${seed}"/><feColorMatrix type="matrix" values="0 0 0 0 ${r}  0 0 0 0 ${g}  0 0 0 0 ${b}  0 0 0 -12 7.3"/></filter>`;
+      body = rect();
+      opacity ??= 0.25;
+      break;
+    }
+    case 'wood': {
+      const [r, g, b] = rgb(layer.color ?? '#6b4224');
+      defs = `<filter${region}><feTurbulence type="fractalNoise" baseFrequency="${f(layer.frequency, fq(0.006, 0.16).map((x) => num(x, 4)).join(' '))}" numOctaves="${layer.octaves ?? 4}" seed="${seed}"/><feColorMatrix type="matrix" values="0 0 0 0 ${r}  0 0 0 0 ${g}  0 0 0 0 ${b}  1.4 0 0 0 -0.45"/></filter>`;
+      body = rect();
+      break;
+    }
+    case 'folds': {
+      // Straight folds: a lit side and a shaded side either side of each line.
+      const xs = layer.x ?? [];
+      const ys = layer.y ?? (layer.x ? [] : [0.5]);
+      const bw = len(layer.width, ctx.canvas, '1.6vmin');
+      const strength = layer.strength ?? 0.35;
+      const band = (/** @type {boolean} */ vertical, /** @type {number} */ at, /** @type {number} */ i) => {
+        const gid = `${id}${vertical ? 'v' : 'h'}${i}`;
+        const p = vertical ? at * w : at * h;
+        defs += `<linearGradient${attrs({ id: gid, gradientUnits: 'userSpaceOnUse', x1: vertical ? p - bw : 0, y1: vertical ? 0 : p - bw, x2: vertical ? p + bw : 0, y2: vertical ? 0 : p + bw })}><stop offset="0" stop-color="#000" stop-opacity="0"/><stop offset="0.48" stop-color="#000" stop-opacity="${num(strength, 3)}"/><stop offset="0.52" stop-color="#fff" stop-opacity="${num(strength * 1.4, 3)}"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>`;
+        body += vertical ? `<rect${attrs({ x: p - bw, y: 0, width: bw * 2, height: h, fill: `url(#${gid})` })}/>` : `<rect${attrs({ x: 0, y: p - bw, width: w, height: bw * 2, fill: `url(#${gid})` })}/>`;
+      };
+      xs.forEach((/** @type {number} */ x, /** @type {number} */ i) => band(true, x, i));
+      ys.forEach((/** @type {number} */ y, /** @type {number} */ i) => band(false, y, i));
+      blend ??= 'soft-light';
+      break;
+    }
+    case 'dust': {
+      const n = layer.count ?? 70;
+      const c = toHex(layer.color ?? ctx.palette.text);
+      const [lo, hi] = (layer.size ?? ['0.06vmin', '0.26vmin']).map((/** @type {any} */ v) => len(v, ctx.canvas));
+      for (let i = 0; i < n; i++) body += `<circle${attrs({ cx: rng.next() * w, cy: rng.next() * h, r: lo + rng.next() * (hi - lo) })}/>`;
+      body = `<g fill="${c}">${body}</g>`;
+      break;
+    }
+    default:
+      throw new TypeError(`Unknown texture "${kind}" (paper, creases, concrete, speck, wood, folds, dust)`);
+  }
+  if (layer.region) {
+    const rg = layer.region;
+    defs += `<clipPath id="${id}c"><rect${attrs({ x: pos(rg.x ?? 0, 'x', ctx.canvas), y: pos(rg.y ?? 0, 'y', ctx.canvas), width: pos(rg.width ?? '100%', 'x', ctx.canvas), height: pos(rg.height ?? '100%', 'y', ctx.canvas) })}/></clipPath>`;
+    body = `<g clip-path="url(#${id}c)">${body}</g>`;
+  }
+  return { defs, body: wrap({ blend, opacity }, body) };
+}

package/src/layers/util.d.ts

@@ -0,0 +1,8 @@
+// Helpers the poster layers share.
+
+/** A coordinate: px, `'50%'` of the canvas along `axis`, or a length. */
+export function pos(v: unknown, axis: 'x' | 'y', canvas: { width: number; height: number }): number;
+/** Markup wrapped in the layer's opacity and blend (when it has them). */
+export function wrap(layer: { opacity?: number; blend?: string }, body: string): string;
+/** The text of a string-or-object option. */
+export function contentOf(v: unknown): string | undefined;

package/src/layers/util.js

@@ -0,0 +1,48 @@
+/**
+ * Small helpers the poster layers share: coordinates in px or `'%'`, the
+ * opacity/blend wrapper, and the text of a string-or-object option.
+ *
+ * @module layers/util
+ */
+
+import { attrs, esc } from '../svg.js';
+import { len } from '../geometry.js';
+
+/**
+ * A coordinate: px as a number, `'50%'` of the canvas along `axis`, or a
+ * length (`'4vmin'`).
+ *
+ * @param {unknown} v
+ * @param {'x' | 'y'} axis
+ * @param {{ width: number, height: number }} canvas
+ * @returns {number} px
+ */
+export function pos(v, axis, canvas) {
+  if (typeof v === 'string' && v.trim().endsWith('%')) return (parseFloat(v) / 100) * (axis === 'x' ? canvas.width : canvas.height);
+  return len(/** @type {any} */ (v), canvas, 0);
+}
+
+/**
+ * Wrap markup in a group with the layer's `opacity` and `blend` (only when
+ * it has them).
+ *
+ * @param {{ opacity?: number, blend?: string }} layer
+ * @param {string} body
+ * @returns {string}
+ */
+export function wrap(layer, body) {
+  const a = attrs({ opacity: layer.opacity != null && layer.opacity < 1 ? Math.max(0, layer.opacity) : undefined, style: layer.blend && layer.blend !== 'normal' ? `mix-blend-mode:${esc(layer.blend)}` : undefined });
+  return a ? `<g${a}>${body}</g>` : body;
+}
+
+/**
+ * The text of a string-or-object option (`'Hello'` or `{ content: 'Hello' }`).
+ *
+ * @param {unknown} v
+ * @returns {string | undefined}
+ */
+export function contentOf(v) {
+  if (typeof v === 'string' || typeof v === 'number') return String(v);
+  if (v && typeof v === 'object' && 'content' in v) return /** @type {any} */ (v).content;
+  return undefined;
+}