@hidemikimura/receipt-html-to-pdf 0.2.1 → 0.3.0

package/src/paginate.js

@@ -4,6 +4,7 @@
  *
  * 方針: 命令は動かさず、ページごとに「この y 範囲を描く」と決めるだけにする。
  * 境界は、アトム（テキスト行・表の行・画像・break-inside: avoid）を跨がない位置まで上へ戻す。
+ * `break-before/after: avoid` で結ばれた箱の間にも境界を置かず、置きそうなら前の箱の先頭まで戻す。
  * テーブルが次ページへ続くときは thead を各ページ先頭で繰り返し、その高さ分だけ本文を下げる。
  */
 
@@ -27,10 +28,17 @@
  * @returns {PageRange[]}
  */
 export function paginate(walk, pageHeightPx) {
+  const EPS_INIT = 0.01;
   const H = pageHeightPx;
   const total = walk.height;
   const atoms = [...walk.atoms].sort((a, b) => a.top - b.top);
   const breaks = [...new Set(walk.breaks)].sort((a, b) => a - b);
+  // break-before/after: avoid で結ばれた箱。
+  // 境界は次の箱の「先頭」ではなく「最初の行」まで許せない（line-height の半行分だけ箱の上端より下に来るため）。
+  const joins = (walk.joins ?? []).map((j) => {
+    const first = atoms.find((a) => a.top >= j.end - EPS_INIT);
+    return { start: j.start, limit: first ? Math.max(first.top, j.end) : j.end, pullTo: j.pullTo };
+  });
   const EPS = 0.01;
 
   /** @type {PageRange[]} */
@@ -110,6 +118,17 @@ export function paginate(walk, pageHeightPx) {
             moved = true;
           }
         }
+        // break-before/after: avoid — 結ばれた 2 つの箱の間に境界があれば、前の箱の先頭まで戻す
+        for (const j of joins) {
+          // 結んだ範囲がページに収まらないなら諦める（戻しても同じ位置で切ることになる）
+          if (j.limit - j.pullTo > capacity) continue;
+          // 戻し先がページ先頭以前だと空ページになるので諦める
+          if (j.pullTo <= start + EPS) continue;
+          if (end >= j.start - EPS && end <= j.limit + EPS && end > j.pullTo + EPS) {
+            end = j.pullTo;
+            moved = true;
+          }
+        }
       }
       // 上げ過ぎて空ページになる場合（ページより大きいアトム）は容量いっぱいで切る
       if (end <= start + EPS) end = Math.min(start + capacity, total);

package/src/pdf/content.js

@@ -136,8 +136,41 @@ export class ContentStream {
     return this;
   }
 
-  fill() {
-    this.ops.push('f');
+  /** @param {0|1|2} join */
+  lineJoin(join) {
+    this.ops.push(`${join} j`);
+    return this;
+  }
+
+  /** @param {number} limit */
+  miterLimit(limit) {
+    this.ops.push(`${num(limit)} M`);
+    return this;
+  }
+
+  /** @param {boolean} [evenOdd] */
+  fill(evenOdd = false) {
+    this.ops.push(evenOdd ? 'f*' : 'f');
+    return this;
+  }
+
+  /** 塗りと線の両方（B / B*） @param {boolean} [evenOdd] */
+  fillAndStroke(evenOdd = false) {
+    this.ops.push(evenOdd ? 'B*' : 'B');
+    return this;
+  }
+
+  /**
+   * 正規化済みのパス（M / L / C / Z）を出力する。
+   * @param {import('../walker/svg-path.js').PathSeg[]} segs
+   */
+  path(segs) {
+    for (const s of segs) {
+      if (s[0] === 'M') this.moveTo(s[1], s[2]);
+      else if (s[0] === 'L') this.lineTo(s[1], s[2]);
+      else if (s[0] === 'C') this.curveTo(s[1], s[2], s[3], s[4], s[5], s[6]);
+      else this.closePath();
+    }
     return this;
   }
 
@@ -146,6 +179,15 @@ export class ContentStream {
     return this;
   }
 
+  /**
+   * シェーディングを現在のクリップ範囲いっぱいに塗る。
+   * @param {string} name  Shading リソース名
+   */
+  shading(name) {
+    this.ops.push(`/${name} sh`);
+    return this;
+  }
+
   /** 現在のパスでクリップして新しいパスを開始する */
   clip() {
     this.ops.push('W n');

package/src/pdf/shading.js

@@ -0,0 +1,113 @@
+// @ts-check
+/**
+ * 軸シェーディング（ShadingType 2）の生成。
+ *
+ * 色は Type 2（指数補間）関数を色止めの数だけ作り、Type 3（継ぎ合わせ）でつなぐ。
+ * 色止めごとにアルファが変わる場合は、同じ形のグレースケールシェーディングを
+ * 輝度ソフトマスクにして再現する（PDF には色とアルファを同時に持つシェーディングが無いため）。
+ */
+import { Name } from './writer.js';
+
+/**
+ * @typedef {import('../walker/gradient.js').GradientStop} GradientStop
+ */
+
+/**
+ * 色止めから Type 2/3 関数を作る。
+ * @param {import('./writer.js').PdfWriter} writer
+ * @param {GradientStop[]} stops
+ * @param {(c: import('../units.js').Rgba) => number[]} pick  色から成分配列を取り出す（RGB か グレー）
+ * @returns {import('./writer.js').Ref}
+ */
+function buildFunction(writer, stops, pick) {
+  const first = /** @type {GradientStop} */ (stops[0]);
+  const last = /** @type {GradientStop} */ (stops[stops.length - 1]);
+  const span = last.t - first.t;
+  // 全区間が 1 点に潰れている場合は単色
+  if (!(span > 0)) {
+    return writer.add({ FunctionType: 2, Domain: [0, 1], C0: pick(first.color), C1: pick(last.color), N: 1 });
+  }
+  if (stops.length === 2) {
+    return writer.add({ FunctionType: 2, Domain: [0, 1], C0: pick(first.color), C1: pick(last.color), N: 1 });
+  }
+  /** @type {import('./writer.js').PdfValue[]} */
+  const functions = [];
+  /** @type {number[]} */
+  const bounds = [];
+  /** @type {number[]} */
+  const encode = [];
+  for (let i = 0; i < stops.length - 1; i++) {
+    const a = /** @type {GradientStop} */ (stops[i]);
+    const b = /** @type {GradientStop} */ (stops[i + 1]);
+    functions.push(writer.add({ FunctionType: 2, Domain: [0, 1], C0: pick(a.color), C1: pick(b.color), N: 1 }));
+    encode.push(0, 1);
+    if (i > 0) bounds.push((a.t - first.t) / span);
+  }
+  return writer.add({ FunctionType: 3, Domain: [0, 1], Functions: functions, Bounds: bounds, Encode: encode });
+}
+
+/**
+ * 軸シェーディングの辞書を作る。座標は PDF 座標（pt）。
+ *
+ * @param {import('./writer.js').PdfWriter} writer
+ * @param {{x0: number, y0: number, x1: number, y1: number}} coords
+ * @param {GradientStop[]} stops
+ * @param {'rgb'|'gray'} space
+ * @returns {import('./writer.js').Ref}
+ */
+export function buildAxialShading(writer, coords, stops, space) {
+  const pick =
+    space === 'rgb'
+      ? (/** @type {import('../units.js').Rgba} */ c) => [c.r, c.g, c.b]
+      : (/** @type {import('../units.js').Rgba} */ c) => [c.a];
+  return writer.add({
+    ShadingType: 2,
+    ColorSpace: new Name(space === 'rgb' ? 'DeviceRGB' : 'DeviceGray'),
+    Coords: [coords.x0, coords.y0, coords.x1, coords.y1],
+    Function: buildFunction(writer, stops, pick),
+    Extend: [true, true],
+  });
+}
+
+/**
+ * 色止めのアルファが一定ならその値、そうでなければ null。
+ * @param {GradientStop[]} stops
+ * @returns {number|null}
+ */
+export function uniformAlpha(stops) {
+  const a = /** @type {GradientStop} */ (stops[0]).color.a;
+  return stops.every((s) => Math.abs(s.color.a - a) < 0.002) ? a : null;
+}
+
+/**
+ * アルファが変化するグラデーション用の輝度ソフトマスクを作る。
+ * グレースケールのシェーディングを描くフォーム XObject を /SMask に入れた ExtGState を返す。
+ *
+ * @param {import('./writer.js').PdfWriter} writer
+ * @param {{x0: number, y0: number, x1: number, y1: number}} coords  PDF 座標
+ * @param {GradientStop[]} stops
+ * @param {{x: number, y: number, w: number, h: number}} bbox  マスクを塗る範囲（PDF 座標）
+ * @param {number} groupAlpha  要素から継承した不透明度（グラデーション全体に掛かる）
+ * @returns {Promise<import('./writer.js').Ref>} ExtGState の参照
+ */
+export async function buildAlphaMaskGState(writer, coords, stops, bbox, groupAlpha) {
+  const scaled = groupAlpha === 1 ? stops : stops.map((s) => ({ t: s.t, color: { ...s.color, a: s.color.a * groupAlpha } }));
+  const shading = buildAxialShading(writer, coords, scaled, 'gray');
+  const content = new TextEncoder().encode(`q ${bbox.x} ${bbox.y} ${bbox.w} ${bbox.h} re W n /Sh0 sh Q\n`);
+  const form = await writer.addStream(
+    {
+      Type: new Name('XObject'),
+      Subtype: new Name('Form'),
+      BBox: [bbox.x, bbox.y, bbox.x + bbox.w, bbox.y + bbox.h],
+      Group: { Type: new Name('Group'), S: new Name('Transparency'), CS: new Name('DeviceGray') },
+      Resources: { Shading: { Sh0: shading } },
+    },
+    content,
+  );
+  return writer.add({
+    Type: new Name('ExtGState'),
+    SMask: { Type: new Name('Mask'), S: new Name('Luminosity'), G: form, BC: [0] },
+    ca: 1,
+    CA: 1,
+  });
+}

package/src/walker/gradient.js

@@ -0,0 +1,193 @@
+// @ts-check
+/**
+ * CSS の linear-gradient を PDF の軸シェーディング（ShadingType 2）に落とすための解析。
+ *
+ * 入力は computed style の値なので、色は rgb()/rgba() に、角度は deg に正規化済み。
+ * 出力は箱のローカル座標（左上原点・y 下向き・CSS px）でのグラデーション線と、
+ * 0〜1 に正規化した色止め。
+ */
+import { parseColor } from '../units.js';
+
+/**
+ * @typedef {{t: number, color: import('../units.js').Rgba}} GradientStop
+ * @typedef {{x0: number, y0: number, x1: number, y1: number, stops: GradientStop[]}} LinearGradient
+ */
+
+/**
+ * computed の background-image が単一の linear-gradient ならそれを解析する。
+ * 対応しない書式（repeating / radial / conic / 複数レイヤー）は null。
+ *
+ * @param {string} value  computed の background-image
+ * @param {number} width  箱の幅（px）
+ * @param {number} height 箱の高さ（px）
+ * @returns {LinearGradient|null}
+ */
+export function parseLinearGradient(value, width, height) {
+  const m = /^linear-gradient\((.*)\)$/s.exec(value.trim());
+  if (!m) return null;
+  const args = splitTopLevelCommas(/** @type {string} */ (m[1]));
+  if (args.length < 2) return null;
+
+  let i = 0;
+  let angle = 180; // 既定は「to bottom」
+  const first = /** @type {string} */ (args[0]).trim();
+  // `in oklab` などの補間指定は無視して sRGB で近似する
+  const head = first.replace(/^in\s+\S+(\s+\S+\s+hue)?\s*/i, '').trim();
+  const dir = parseDirection(head);
+  if (dir !== null) {
+    angle = dir;
+    i = 1;
+  } else if (/^in\s/i.test(first) && head === '') {
+    i = 1;
+  }
+
+  const rawStops = args.slice(i).map((s) => s.trim());
+  if (rawStops.length < 2) return null;
+
+  // グラデーション線の長さ（CSS 仕様: |W·sin θ| + |H·cos θ|）
+  const rad = (angle * Math.PI) / 180;
+  const sin = Math.sin(rad);
+  const cos = Math.cos(rad);
+  const length = Math.abs(width * sin) + Math.abs(height * cos);
+  if (!(length > 0)) return null;
+
+  /** @type {GradientStop[]} */
+  const stops = [];
+  for (const raw of rawStops) {
+    // "rgb(255, 0, 0) 30%" / "rgba(0, 0, 0, 0.5)" / "red 10px 20px"（二重指定）
+    const sp = splitColorAndPositions(raw);
+    if (!sp) return null;
+    const color = parseColor(sp.color);
+    if (!color) return null;
+    if (!sp.positions.length) {
+      stops.push({ t: NaN, color });
+      continue;
+    }
+    for (const pos of sp.positions) {
+      const t = resolvePosition(pos, length);
+      if (t === null) return null;
+      stops.push({ t, color });
+    }
+  }
+  if (stops.length < 2) return null;
+
+  fillMissingPositions(stops);
+
+  // 中心を通る線分。CSS の角度は 0deg = 上向き、時計回り。y は下向きなので cos を反転する。
+  const cx = width / 2;
+  const cy = height / 2;
+  const dx = sin;
+  const dy = -cos;
+  return {
+    x0: cx - (dx * length) / 2,
+    y0: cy - (dy * length) / 2,
+    x1: cx + (dx * length) / 2,
+    y1: cy + (dy * length) / 2,
+    stops,
+  };
+}
+
+/**
+ * `45deg` / `to right` / `to right bottom` を CSS 角度（0 = 上、時計回り）にする。
+ * 方向指定でなければ null。
+ * @param {string} s
+ * @returns {number|null}
+ */
+function parseDirection(s) {
+  const deg = /^(-?[\d.]+)deg$/.exec(s);
+  if (deg) return ((parseFloat(/** @type {string} */ (deg[1])) % 360) + 360) % 360;
+  const to = /^to\s+(.+)$/.exec(s);
+  if (!to) return null;
+  const words = /** @type {string} */ (to[1]).trim().split(/\s+/).sort().join(' ');
+  /** @type {Record<string, number>} */
+  const table = {
+    top: 0,
+    right: 90,
+    bottom: 180,
+    left: 270,
+    'right top': 45,
+    'bottom right': 135,
+    'bottom left': 225,
+    'left top': 315,
+  };
+  return table[words] ?? null;
+}
+
+/**
+ * 色止めを「色」と「位置（0〜2 個）」に分ける。
+ * @param {string} s
+ * @returns {{color: string, positions: string[]}|null}
+ */
+function splitColorAndPositions(s) {
+  // 関数記法（rgb(...)）を先に切り出す
+  const fn = /^([a-z-]+\([^()]*\))\s*(.*)$/i.exec(s);
+  if (fn) return { color: /** @type {string} */ (fn[1]), positions: splitWords(/** @type {string} */ (fn[2])) };
+  const kw = /^(\S+)\s*(.*)$/.exec(s);
+  if (!kw) return null;
+  return { color: /** @type {string} */ (kw[1]), positions: splitWords(/** @type {string} */ (kw[2])) };
+}
+
+/** @param {string} s */
+function splitWords(s) {
+  const t = s.trim();
+  return t ? t.split(/\s+/) : [];
+}
+
+/**
+ * 位置指定（30% / 10px）をグラデーション線上の 0〜1 にする。
+ * @param {string} pos
+ * @param {number} length
+ * @returns {number|null}
+ */
+function resolvePosition(pos, length) {
+  const pct = /^(-?[\d.]+)%$/.exec(pos);
+  if (pct) return parseFloat(/** @type {string} */ (pct[1])) / 100;
+  const px = /^(-?[\d.]+)px$/.exec(pos);
+  if (px) return parseFloat(/** @type {string} */ (px[1])) / length;
+  return null;
+}
+
+/**
+ * 位置の無い色止めを埋める。両端は 0 と 1、間は等間隔。
+ * さらに前の位置を下回らないよう単調にする（CSS 仕様）。
+ * @param {GradientStop[]} stops
+ */
+function fillMissingPositions(stops) {
+  const last = stops.length - 1;
+  if (Number.isNaN(/** @type {number} */ (stops[0]?.t))) /** @type {GradientStop} */ (stops[0]).t = 0;
+  if (Number.isNaN(/** @type {number} */ (stops[last]?.t))) /** @type {GradientStop} */ (stops[last]).t = 1;
+  for (let i = 1; i < last; i++) {
+    if (!Number.isNaN(/** @type {number} */ (stops[i]?.t))) continue;
+    // 次に位置が決まっている色止めまでを等分する
+    let j = i + 1;
+    while (j < last && Number.isNaN(/** @type {number} */ (stops[j]?.t))) j++;
+    const from = /** @type {number} */ (stops[i - 1]?.t);
+    const to = /** @type {number} */ (stops[j]?.t);
+    for (let k = i; k < j; k++) {
+      /** @type {GradientStop} */ (stops[k]).t = from + ((to - from) * (k - i + 1)) / (j - i + 1);
+    }
+    i = j - 1;
+  }
+  for (let i = 1; i < stops.length; i++) {
+    const prev = /** @type {number} */ (stops[i - 1]?.t);
+    if (/** @type {number} */ (stops[i]?.t) < prev) /** @type {GradientStop} */ (stops[i]).t = prev;
+  }
+}
+
+/** @param {string} s */
+function splitTopLevelCommas(s) {
+  /** @type {string[]} */
+  const out = [];
+  let depth = 0;
+  let cur = '';
+  for (const ch of s) {
+    if (ch === '(') depth++;
+    else if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) {
+      out.push(cur);
+      cur = '';
+    } else cur += ch;
+  }
+  if (cur.trim()) out.push(cur);
+  return out;
+}

package/src/walker/image.js

@@ -262,3 +262,80 @@ export function objectFitToSize(fit) {
       return '100% 100%';
   }
 }
+
+/**
+ * `background-repeat` の computed 値を軸ごとに分ける。
+ * `repeat-x` / `repeat-y` は 2 値表記に展開する。
+ * @param {string} value
+ * @returns {['repeat'|'no-repeat'|'space'|'round', 'repeat'|'no-repeat'|'space'|'round']}
+ */
+export function splitRepeat(value) {
+  const v = (value || 'repeat').trim();
+  if (v === 'repeat-x') return ['repeat', 'no-repeat'];
+  if (v === 'repeat-y') return ['no-repeat', 'repeat'];
+  const parts = v.split(/\s+/);
+  const norm = (/** @type {string} */ s) => (s === 'repeat' || s === 'no-repeat' || s === 'space' || s === 'round' ? s : 'repeat');
+  const a = norm(/** @type {string} */ (parts[0] ?? 'repeat'));
+  const b = norm(/** @type {string} */ (parts[1] ?? parts[0] ?? 'repeat'));
+  return [a, b];
+}
+
+/**
+ * 1 軸ぶんのタイル位置を求める。
+ *
+ * - `repeat`: 指定位置を基準に、描画領域を覆うまで両方向へ並べる
+ * - `no-repeat`: 指定位置に 1 枚
+ * - `round`: 描画領域に整数個収まるようタイルの大きさを調整して並べる（大きさが変わる）
+ * - `space`: 整数個を等間隔に置き、余りを隙間に配る。1 枚しか入らないなら先頭に 1 枚
+ *
+ * @param {'repeat'|'no-repeat'|'space'|'round'} mode
+ * @param {number} start      指定位置（background-position の結果）
+ * @param {number} size       タイルの大きさ
+ * @param {number} areaStart  描画領域の開始
+ * @param {number} areaEnd    描画領域の終わり
+ * @returns {{positions: number[], size: number}}
+ */
+export function tileAxis(mode, start, size, areaStart, areaEnd) {
+  if (!(size > 0)) return { positions: [start], size };
+  const area = areaEnd - areaStart;
+  if (mode === 'no-repeat') return { positions: [start], size };
+
+  if (mode === 'round') {
+    const n = Math.max(1, Math.round(area / size));
+    const s = area / n;
+    return { positions: Array.from({ length: n }, (_, i) => areaStart + i * s), size: s };
+  }
+
+  if (mode === 'space') {
+    const n = Math.floor(area / size);
+    if (n < 2) return { positions: [areaStart], size };
+    const gap = (area - n * size) / (n - 1);
+    return { positions: Array.from({ length: n }, (_, i) => areaStart + i * (size + gap)), size };
+  }
+
+  // repeat: 指定位置から前後へ伸ばす
+  const first = start - Math.ceil((start - areaStart) / size) * size;
+  /** @type {number[]} */
+  const positions = [];
+  for (let p = first; p < areaEnd; p += size) {
+    if (p + size > areaStart) positions.push(p);
+    if (positions.length > 10000) break; // 異常な繰り返しの保険
+  }
+  return { positions: positions.length ? positions : [start], size };
+}
+
+/**
+ * 埋め込みが済んだ画像のピクセルデータを手放す。
+ * デコード結果（RGB・アルファ・JPEG のバイト列）は元画像より桁違いに大きいので、
+ * PDF に書き出したあとも抱えていると大きな文書でピーク使用量が跳ね上がる。
+ *
+ * キャッシュからも外すので、次の変換では読み直しになる（速度よりメモリを優先する）。
+ *
+ * @param {DecodedImage} img
+ */
+export function releasePixels(img) {
+  img.jpeg = null;
+  img.rgb = null;
+  img.alpha = null;
+  cache.delete(img.key);
+}