@u1f992/pdfdiff 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@u1f992/pdfdiff",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Visualize and quantify differences between two PDF files.",
   "main": "dist/index.js",
   "bin": {
@@ -30,6 +30,7 @@
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
     "@types/node": "^22.18.7",
+    "coi-serviceworker": "^0.1.7",
     "http-server": "^14.1.1",
     "nodehog": "^0.1.2",
     "prettier": "^3.5.3",

package/rollup.config.js

@@ -15,6 +15,10 @@ const plugins = [
         src: "node_modules/mupdf/dist/mupdf-wasm.wasm",
         dest: "dist",
       },
+      {
+        src: "node_modules/coi-serviceworker/coi-serviceworker.min.js",
+        dest: "dist",
+      },
       {
         src: "src/index.html",
         dest: "dist",
@@ -27,6 +31,26 @@ const plugins = [
   }),
 ];
 
+const jimpAlias = alias({
+  entries: [
+    {
+      find: "jimp",
+      replacement: path.resolve("node_modules/jimp/dist/browser/index.js"),
+    },
+  ],
+});
+
+const webWorkerAlias = alias({
+  entries: [
+    {
+      find: "web-worker",
+      replacement: path.resolve(
+        "node_modules/web-worker/dist/browser/index.cjs",
+      ),
+    },
+  ],
+});
+
 const rollupConfig = defineConfig([
   {
     input: "src/index.ts",
@@ -35,22 +59,8 @@ const rollupConfig = defineConfig([
       sourcemap: true,
     },
     plugins: [
-      alias({
-        entries: [
-          {
-            find: "jimp",
-            replacement: path.resolve(
-              "node_modules/jimp/dist/browser/index.js",
-            ),
-          },
-          {
-            find: "web-worker",
-            replacement: path.resolve(
-              "node_modules/web-worker/dist/browser/index.cjs",
-            ),
-          },
-        ],
-      }),
+      jimpAlias,
+      webWorkerAlias,
       typescript({ tsconfig: "./tsconfig.json" }),
       ...plugins,
     ],
@@ -62,16 +72,7 @@ const rollupConfig = defineConfig([
       sourcemap: true,
     },
     plugins: [
-      alias({
-        entries: [
-          {
-            find: "jimp",
-            replacement: path.resolve(
-              "node_modules/jimp/dist/browser/index.js",
-            ),
-          },
-        ],
-      }),
+      jimpAlias,
       typescript({ tsconfig: "./tsconfig.json" }),
       ...plugins,
     ],
@@ -96,22 +97,8 @@ const rollupConfig = defineConfig([
       sourcemap: true,
     },
     plugins: [
-      alias({
-        entries: [
-          {
-            find: "jimp",
-            replacement: path.resolve(
-              "node_modules/jimp/dist/browser/index.js",
-            ),
-          },
-          {
-            find: "web-worker",
-            replacement: path.resolve(
-              "node_modules/web-worker/dist/browser/index.cjs",
-            ),
-          },
-        ],
-      }),
+      jimpAlias,
+      webWorkerAlias,
       typescript({ tsconfig: "./tsconfig.json" }),
       ...plugins,
     ],

package/src/browser.ts

@@ -1,6 +1,6 @@
 /// <reference lib="dom" />
 
-import * as pdfdiff from "./index.js";
+import * as pdfdiff from "./index.ts";
 
 async function readFileAsUint8Array(file: File): Promise<Uint8Array> {
   return new Promise((resolve, reject) => {
@@ -62,6 +62,17 @@ document
         throw new Error();
       }
 
+      const workers = ((
+        val = (document.getElementById("workers") as HTMLInputElement | null)
+          ?.value,
+      ) => (typeof val !== "undefined" ? parseInt(val, 10) : undefined))();
+      if (
+        typeof workers !== "undefined" &&
+        (Number.isNaN(workers) || workers < 1)
+      ) {
+        throw new Error();
+      }
+
       const additionColorHex = (
         document.getElementById("addition-color") as HTMLInputElement | null
       )?.value;
@@ -93,6 +104,7 @@ document
       if (alpha !== undefined) options.alpha = alpha;
       if (pdfMask !== undefined) options.mask = pdfMask;
       if (align !== undefined) options.align = align;
+      if (workers !== undefined) options.workers = workers;
       if (additionColor || deletionColor || modificationColor) {
         options.pallet = {};
         if (additionColor) options.pallet.addition = additionColor;

package/src/cli.ts

@@ -28,7 +28,7 @@ import {
   parseHex,
   formatHex,
   visualizeDifferences,
-} from "./index.js";
+} from "./index.ts";
 
 const {
   positionals,
@@ -40,6 +40,7 @@ const {
     "addition-color": additionColorHex,
     "deletion-color": deletionColorHex,
     "modification-color": modificationColorHex,
+    workers: workers_,
     version,
     help,
   },
@@ -53,6 +54,7 @@ const {
     "addition-color": { type: "string" },
     "deletion-color": { type: "string" },
     "modification-color": { type: "string" },
+    workers: { type: "string" },
     version: { type: "boolean", short: "v" },
     help: { type: "boolean", short: "h" },
   },
@@ -72,8 +74,17 @@ OPTIONS:
     --addition-color <#HEX>        default: ${formatHex(defaultOptions.pallet.addition)}
     --deletion-color <#HEX>        default: ${formatHex(defaultOptions.pallet.deletion)}
     --modification-color <#HEX>    default: ${formatHex(defaultOptions.pallet.modification)}
+    --workers <N>                  default: ${defaultOptions.workers}
     -v, --version
     -h, --help
+
+NOTES:
+    Approximate per-worker memory:
+        a_size_MB + b_size_MB [+ mask_size_MB]    (PDF buffers in wasm)
+        + 300 MB                                  (mupdf + V8 base)
+        + (dpi / 150)^2 * 50 MB                   (pixmap working set)
+    The main process adds ~500 MB - 1 GB (varies with --workers).
+    Choose --workers so the total stays under ~80% of available memory.
 `);
   process.exit(0);
 }
@@ -137,6 +148,14 @@ if (
   throw new Error("Invalid color format");
 }
 
+const workers =
+  typeof workers_ !== "undefined"
+    ? parseInt(workers_, 10)
+    : defaultOptions.workers;
+if (Number.isNaN(workers) || workers < 1) {
+  throw new Error("Invalid workers value");
+}
+
 fs.mkdirSync(outDir, { recursive: true });
 for await (const [
   i,
@@ -152,6 +171,7 @@ for await (const [
       deletion: deletionColor,
       modification: modificationColor,
     },
+    workers,
   }),
   1,
 )) {

package/src/diff.ts

@@ -15,11 +15,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import * as jimp from "jimp";
-
-import { type JimpInstance } from "./jimp.js";
-import { alignSize, createEmptyImage, type AlignStrategy } from "./image.js";
-import { type RGBAColor } from "./rgba-color.js";
+import { type JimpInstance } from "./jimp.ts";
+import { alignSize, createEmptyImage, type AlignStrategy } from "./image.ts";
+import { type RGBAColor } from "./rgba-color.ts";
 
 export type Pallet = {
   addition: RGBAColor;
@@ -35,34 +33,51 @@ export function drawDifference(
   align: AlignStrategy,
 ) {
   const [aNew, bNew, maskNew] = alignSize([a, b, mask], align);
+  const width = aNew.width;
+  const height = aNew.height;
+  const aData = aNew.bitmap.data;
+  const bData = bNew.bitmap.data;
+  const mData = maskNew.bitmap.data;
 
-  const addColor = jimp.rgbaToInt(...pallet.addition);
-  const delColor = jimp.rgbaToInt(...pallet.deletion);
-  const modColor = jimp.rgbaToInt(...pallet.modification);
+  const diffImage = createEmptyImage(width, height);
+  const dData = diffImage.bitmap.data;
 
-  const diffImage = createEmptyImage(aNew.width, aNew.height);
-  const addition = [] as [number, number][];
-  const deletion = [] as [number, number][];
-  const modification = [] as [number, number][];
+  const addition: [number, number][] = [];
+  const deletion: [number, number][] = [];
+  const modification: [number, number][] = [];
 
-  for (let x = 0; x < aNew.width; x++) {
-    for (let y = 0; y < aNew.height; y++) {
-      const intA = aNew.getPixelColor(x, y);
-      const intB = bNew.getPixelColor(x, y);
-      const colorA = jimp.intToRGBA(intA);
-      const colorB = jimp.intToRGBA(intB);
-      const masked = jimp.intToRGBA(maskNew.getPixelColor(x, y)).a !== 0;
-      if (masked || intA === intB || (colorA.a === 0 && colorB.a === 0)) {
+  for (let x = 0; x < width; x++) {
+    for (let y = 0; y < height; y++) {
+      const idx = (y * width + x) * 4;
+      if (mData[idx + 3]! !== 0) continue;
+      const aAlpha = aData[idx + 3]!;
+      const bAlpha = bData[idx + 3]!;
+      if (
+        aAlpha === bAlpha &&
+        aData[idx] === bData[idx] &&
+        aData[idx + 1] === bData[idx + 1] &&
+        aData[idx + 2] === bData[idx + 2]
+      ) {
         continue;
       }
-      const [target, color] =
-        colorA.a === 0 && colorB.a !== 0
-          ? [addition, addColor]
-          : colorA.a !== 0 && colorB.a === 0
-            ? [deletion, delColor]
-            : [modification, modColor];
+      if (aAlpha === 0 && bAlpha === 0) continue;
+      let target: [number, number][];
+      let color: Readonly<RGBAColor>;
+      if (aAlpha === 0) {
+        target = addition;
+        color = pallet.addition;
+      } else if (bAlpha === 0) {
+        target = deletion;
+        color = pallet.deletion;
+      } else {
+        target = modification;
+        color = pallet.modification;
+      }
       target.push([x, y]);
-      diffImage.setPixelColor(color, x, y);
+      dData[idx] = color[0];
+      dData[idx + 1] = color[1];
+      dData[idx + 2] = color[2];
+      dData[idx + 3] = color[3];
     }
   }
 

package/src/image.ts

@@ -16,7 +16,7 @@
  */
 
 import * as jimp from "jimp";
-import { type JimpInstance } from "./jimp.js";
+import { type JimpInstance } from "./jimp.ts";
 
 export function createEmptyImage(width: number, height: number) {
   return new jimp.Jimp({
@@ -117,12 +117,34 @@ export function composeLayers(
   canvasHeight: number,
   layers: [JimpInstance, number][],
 ) {
-  return layers.reduce(
-    (acc, [image, opacity]) =>
-      acc.composite(image, 0, 0, {
-        mode: jimp.BlendMode.SRC_OVER,
-        opacitySource: opacity,
-      }),
-    createEmptyImage(canvasWidth, canvasHeight),
-  );
+  const canvas = createEmptyImage(canvasWidth, canvasHeight);
+  const dData = canvas.bitmap.data;
+  for (const [image, opacity] of layers) {
+    const sData = image.bitmap.data;
+    const srcWidth = image.width;
+    const w = Math.min(canvasWidth, srcWidth);
+    const h = Math.min(canvasHeight, image.height);
+    for (let y = 0; y < h; y++) {
+      for (let x = 0; x < w; x++) {
+        const dIdx = (y * canvasWidth + x) * 4;
+        const sIdx = (y * srcWidth + x) * 4;
+        const sa = (sData[sIdx + 3]! / 255) * opacity;
+        if (sa === 0) continue;
+        const da = dData[dIdx + 3]! / 255;
+        const oa = sa + da * (1 - sa);
+        if (oa === 0) continue;
+        const sw = sa / oa;
+        const dw = (da * (1 - sa)) / oa;
+        dData[dIdx] = Math.round(sData[sIdx]! * sw + dData[dIdx]! * dw);
+        dData[dIdx + 1] = Math.round(
+          sData[sIdx + 1]! * sw + dData[dIdx + 1]! * dw,
+        );
+        dData[dIdx + 2] = Math.round(
+          sData[sIdx + 2]! * sw + dData[dIdx + 2]! * dw,
+        );
+        dData[dIdx + 3] = Math.round(oa * 255);
+      }
+    }
+  }
+  return canvas;
 }

package/src/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>pdfdiff</title>
     <link rel="stylesheet" href="./style.css" />
+    <script src="./coi-serviceworker.min.js"></script>
     <script type="module" src="./browser.js"></script>
   </head>
   <body>
@@ -46,6 +47,10 @@
             <option value="bottom-right">bottom-right</option>
           </select>
         </div>
+        <div>
+          <label for="workers">Workers:</label>
+          <input type="number" id="workers" value="1" min="1" />
+        </div>
         <div>
           <label for="addition-color">Addition:</label>
           <input type="color" id="addition-color" value="#4cae4f" />

package/src/index.test.ts

@@ -0,0 +1,97 @@
+/*
+ * Copyright (C) 2025  Koutaro Mukai
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import test from "node:test";
+
+import {
+  defaultOptions,
+  formatHex,
+  isValidAlignStrategy,
+  parseHex,
+  visualizeDifferences,
+  withIndex,
+} from "./index.ts";
+
+const fixtures = new URL("../test/", import.meta.url);
+const readFixture = (name: string) =>
+  new Uint8Array(fs.readFileSync(new URL(name, fixtures)));
+
+test("re-exports are exposed as runtime values", () => {
+  assert.equal(typeof withIndex, "function");
+  assert.equal(typeof isValidAlignStrategy, "function");
+  assert.equal(typeof parseHex, "function");
+  assert.equal(typeof formatHex, "function");
+});
+
+test("defaultOptions", () => {
+  assert.deepEqual(defaultOptions, {
+    dpi: 150,
+    alpha: true,
+    mask: undefined,
+    align: "resize",
+    pallet: {
+      addition: [0x4c, 0xae, 0x4f, 0xff],
+      deletion: [0xff, 0x57, 0x24, 0xff],
+      modification: [0xff, 0xc1, 0x05, 0xff],
+    },
+    workers: 1,
+  });
+});
+
+test("isValidAlignStrategy", async (ctx) => {
+  for (const s of [
+    "resize",
+    "top-left",
+    "top-center",
+    "top-right",
+    "middle-left",
+    "middle-center",
+    "middle-right",
+    "bottom-left",
+    "bottom-center",
+    "bottom-right",
+  ]) {
+    await ctx.test(s, () => {
+      assert.equal(isValidAlignStrategy(s), true);
+    });
+  }
+  await ctx.test("invalid", () => {
+    assert.equal(isValidAlignStrategy("invalid"), false);
+  });
+});
+
+test("visualizeDifferences pins counts for fixtures at dpi 300", async () => {
+  const a = readFixture("a.pdf");
+  const b = readFixture("b.pdf");
+  const mask = readFixture("mask.pdf");
+
+  const pages: { addition: number; deletion: number; modification: number }[] =
+    [];
+  for await (const page of visualizeDifferences(a, b, { dpi: 300, mask })) {
+    pages.push({
+      addition: page.addition.length,
+      deletion: page.deletion.length,
+      modification: page.modification.length,
+    });
+  }
+
+  assert.deepEqual(pages, [
+    { addition: 7500, deletion: 7500, modification: 7500 },
+  ]);
+});