Native transparency by default; harmonization held to the traced boundary (v=11)

index.html

@@ -187,7 +187,7 @@ footer .v{margin-left:auto}
   <button class="primary" id="go" disabled>Trace</button>
   <span class="status mono" id="status">loading the tracer…</span>
 </div>
-<p class="note" style="margin:2px 0 12px">Repeated shapes are harmonized by default &mdash; fewer paths and smaller SVGs; on very fine line art this can visibly shift geometry (CLI opt-out: <code class="mono">--no-harmonize</code>).</p>
+<p class="note" style="margin:2px 0 12px">Repeated shapes are harmonized by default &mdash; a copy is redrawn from the shared geometry only where that stays within 0.1&nbsp;px of what was traced and saves parameters (CLI opt-out: <code class="mono">--no-harmonize</code>).</p>
 
 <div class="viewer empty" id="viewer"><span>Your input and the vector result appear here side by side. Scroll to zoom, drag to pan; both sides move together.</span></div>
 <div class="tools" id="livetools" hidden></div>
@@ -379,7 +379,7 @@ for (const b of document.querySelectorAll("#presets button")) b.addEventListener
 
 let worker = null;
 function makeWorker(){
-  const url = A.workerUrl || "./worker.js?v=8";
+  const url = A.workerUrl || "./worker.js?v=11";
   try { worker = new Worker(url, { type: "module" }); } catch (e) { worker = null; return; }
   worker.onmessage = (e) => {
     const m = e.data;
@@ -432,7 +432,7 @@ for (const n of ["365retailmarkets","adamo","1075thefan"]){
   const b = el("button", "", n); b.addEventListener("click", async () => { const r = await fetch(asset(n)); const bl = await r.blob(); pick(new File([bl], n + ".png", {type:"image/png"})); });
   $("samples").appendChild(b);
 }
-function options(){ return { precision:+$("precision").value, min_area:+$("min_area").value, colors:+$("colors").value, merge:+$("merge").value, max_dim:+$("max_dim").value, time_budget:+$("time_budget").value, no_background:$("no_background").checked, minify:$("minify").checked, margin:+$("margin").value, content_units:$("content_units").checked }; }
+function options(){ return { precision:+$("precision").value, min_area:+$("min_area").value, colors:+$("colors").value, merge:+$("merge").value, max_dim:+$("max_dim").value, time_budget:+$("time_budget").value, no_background:$("no_background").checked, minify:$("minify").checked, margin:+$("margin").value, content_units:$("content_units").checked, cutout:$("no_background").checked }; }
 function start(){ $("go").disabled = true; const t0 = performance.now(); live && live.busy(true, "Tracing…"); timer = setInterval(() => live && live.busy(true, `Tracing… ${((performance.now()-t0)/1000).toFixed(1)} s`), 100); }
 function finish(){ $("go").disabled = false; clearInterval(timer); live && live.busy(false); }
 $("go").addEventListener("click", () => {

pkg-threads/inkvec_wasm.d.ts

@@ -19,9 +19,11 @@ export function threads_available(): boolean;
  * defaults 0.1, 2, 64, 0.035 when unsure; the merge default is
  * `inkvec_trace::color::DEFAULT_MERGE_DISTANCE`); `max_dim` and `time_budget` bound the
  * work; `no_background`, `minify`, `margin`, `content_units` shape the output. `max_dim = 0`
- * means no cap.
+ * means no cap. `cutout` is `--cutout`: an input's transparency is carried into the SVG
+ * (holes stay holes, a flat wash keeps its opacity); it changes nothing for an opaque
+ * input.
  */
-export function trace(bytes: Uint8Array, precision: number, min_area: number, colors: number, merge: number, max_dim: number, time_budget: number, no_background: boolean, minify: boolean, margin: number, content_units: boolean): string;
+export function trace(bytes: Uint8Array, precision: number, min_area: number, colors: number, merge: number, max_dim: number, time_budget: number, no_background: boolean, minify: boolean, margin: number, content_units: boolean, cutout: boolean): string;
 
 /**
  * The tracer's version, for the page footer.
@@ -45,7 +47,7 @@ export interface InitOutput {
     readonly __wbg_wbg_rayon_poolbuilder_free: (a: number, b: number) => void;
     readonly initThreadPool: (a: number) => any;
     readonly threads_available: () => number;
-    readonly trace: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number) => [number, number, number, number];
+    readonly trace: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number) => [number, number, number, number];
     readonly version: () => [number, number];
     readonly wbg_rayon_poolbuilder_build: (a: number) => void;
     readonly wbg_rayon_poolbuilder_numThreads: (a: number) => number;

pkg-threads/inkvec_wasm.js

@@ -31,7 +31,9 @@ export function threads_available() {
  * defaults 0.1, 2, 64, 0.035 when unsure; the merge default is
  * `inkvec_trace::color::DEFAULT_MERGE_DISTANCE`); `max_dim` and `time_budget` bound the
  * work; `no_background`, `minify`, `margin`, `content_units` shape the output. `max_dim = 0`
- * means no cap.
+ * means no cap. `cutout` is `--cutout`: an input's transparency is carried into the SVG
+ * (holes stay holes, a flat wash keeps its opacity); it changes nothing for an opaque
+ * input.
  * @param {Uint8Array} bytes
  * @param {number} precision
  * @param {number} min_area
@@ -43,15 +45,16 @@ export function threads_available() {
  * @param {boolean} minify
  * @param {number} margin
  * @param {boolean} content_units
+ * @param {boolean} cutout
  * @returns {string}
  */
-export function trace(bytes, precision, min_area, colors, merge, max_dim, time_budget, no_background, minify, margin, content_units) {
+export function trace(bytes, precision, min_area, colors, merge, max_dim, time_budget, no_background, minify, margin, content_units, cutout) {
     let deferred3_0;
     let deferred3_1;
     try {
         const ptr0 = passArray8ToWasm0(bytes, wasm.__wbindgen_malloc);
         const len0 = WASM_VECTOR_LEN;
-        const ret = wasm.trace(ptr0, len0, precision, min_area, colors, merge, max_dim, time_budget, no_background, minify, margin, content_units);
+        const ret = wasm.trace(ptr0, len0, precision, min_area, colors, merge, max_dim, time_budget, no_background, minify, margin, content_units, cutout);
         var ptr2 = ret[0];
         var len2 = ret[1];
         if (ret[3]) {

pkg-threads/inkvec_wasm_bg.wasm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:48381fa26e59e2f6ebf832b59ccfd384b3f08d2c371c1edf7d824fdaeb023815
-size 3036282
+oid sha256:b3ccebb870dc2387ecd1308736326103be62f5bd2b16a7bc6231ee5036f59d39
+size 3228020

pkg-threads/inkvec_wasm_bg.wasm.d.ts

@@ -3,7 +3,7 @@
 export const __wbg_wbg_rayon_poolbuilder_free: (a: number, b: number) => void;
 export const initThreadPool: (a: number) => any;
 export const threads_available: () => number;
-export const trace: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number) => [number, number, number, number];
+export const trace: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number) => [number, number, number, number];
 export const version: () => [number, number];
 export const wbg_rayon_poolbuilder_build: (a: number) => void;
 export const wbg_rayon_poolbuilder_numThreads: (a: number) => number;

pkg-threads/snippets/wasm-bindgen-rayon-38edf6e439f6d70d/src/workerHelpers.js

@@ -51,7 +51,7 @@ waitForMsgType(self, 'wasm_bindgen_worker_init').then(async ({ init, receiver })
   // OTOH, even though it can't be inlined, it should be still reasonably
   // cheap since the requested file is already in cache (it was loaded by
   // the main thread).
-  const pkg = await import('../../../inkvec_wasm.js?v=8');
+  const pkg = await import('../../../inkvec_wasm.js?v=11');
   await pkg.default(init);
   postMessage({ type: 'wasm_bindgen_worker_ready' });
   pkg.wbg_rayon_start_worker(receiver);

pkg/inkvec_wasm.d.ts

@@ -17,9 +17,11 @@ export function threads_available(): boolean;
  * defaults 0.1, 2, 64, 0.035 when unsure; the merge default is
  * `inkvec_trace::color::DEFAULT_MERGE_DISTANCE`); `max_dim` and `time_budget` bound the
  * work; `no_background`, `minify`, `margin`, `content_units` shape the output. `max_dim = 0`
- * means no cap.
+ * means no cap. `cutout` is `--cutout`: an input's transparency is carried into the SVG
+ * (holes stay holes, a flat wash keeps its opacity); it changes nothing for an opaque
+ * input.
  */
-export function trace(bytes: Uint8Array, precision: number, min_area: number, colors: number, merge: number, max_dim: number, time_budget: number, no_background: boolean, minify: boolean, margin: number, content_units: boolean): string;
+export function trace(bytes: Uint8Array, precision: number, min_area: number, colors: number, merge: number, max_dim: number, time_budget: number, no_background: boolean, minify: boolean, margin: number, content_units: boolean, cutout: boolean): string;
 
 /**
  * The tracer's version, for the page footer.
@@ -31,7 +33,7 @@ export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembl
 export interface InitOutput {
     readonly memory: WebAssembly.Memory;
     readonly threads_available: () => number;
-    readonly trace: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number) => [number, number, number, number];
+    readonly trace: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number) => [number, number, number, number];
     readonly version: () => [number, number];
     readonly __wbindgen_free: (a: number, b: number, c: number) => void;
     readonly __wbindgen_malloc: (a: number, b: number) => number;

pkg/inkvec_wasm.js

@@ -20,7 +20,9 @@ export function threads_available() {
  * defaults 0.1, 2, 64, 0.035 when unsure; the merge default is
  * `inkvec_trace::color::DEFAULT_MERGE_DISTANCE`); `max_dim` and `time_budget` bound the
  * work; `no_background`, `minify`, `margin`, `content_units` shape the output. `max_dim = 0`
- * means no cap.
+ * means no cap. `cutout` is `--cutout`: an input's transparency is carried into the SVG
+ * (holes stay holes, a flat wash keeps its opacity); it changes nothing for an opaque
+ * input.
  * @param {Uint8Array} bytes
  * @param {number} precision
  * @param {number} min_area
@@ -32,15 +34,16 @@ export function threads_available() {
  * @param {boolean} minify
  * @param {number} margin
  * @param {boolean} content_units
+ * @param {boolean} cutout
  * @returns {string}
  */
-export function trace(bytes, precision, min_area, colors, merge, max_dim, time_budget, no_background, minify, margin, content_units) {
+export function trace(bytes, precision, min_area, colors, merge, max_dim, time_budget, no_background, minify, margin, content_units, cutout) {
     let deferred3_0;
     let deferred3_1;
     try {
         const ptr0 = passArray8ToWasm0(bytes, wasm.__wbindgen_malloc);
         const len0 = WASM_VECTOR_LEN;
-        const ret = wasm.trace(ptr0, len0, precision, min_area, colors, merge, max_dim, time_budget, no_background, minify, margin, content_units);
+        const ret = wasm.trace(ptr0, len0, precision, min_area, colors, merge, max_dim, time_budget, no_background, minify, margin, content_units, cutout);
         var ptr2 = ret[0];
         var len2 = ret[1];
         if (ret[3]) {

pkg/inkvec_wasm_bg.wasm

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f20be44f61e2270d8687e517fb79a05a9f9702e49499afbb11cbbcbeb47c2b9e
-size 2997588
+oid sha256:91885871972c755a6086c08c8d6ad67439814fc2dd200bb2d186a4df135ab05f
+size 3189650

pkg/inkvec_wasm_bg.wasm.d.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 export const memory: WebAssembly.Memory;
 export const threads_available: () => number;
-export const trace: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number) => [number, number, number, number];
+export const trace: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number) => [number, number, number, number];
 export const version: () => [number, number];
 export const __wbindgen_free: (a: number, b: number, c: number) => void;
 export const __wbindgen_malloc: (a: number, b: number) => number;

worker.js

@@ -15,7 +15,7 @@
 // import alone busts the JavaScript and never the WebAssembly — the wrong way round, since
 // the bindings rarely change and the wasm changes on every build. Bump it when `pkg/` or
 // `pkg-threads/` is rebuilt.
-const V = "v=8";
+const V = "v=11";
 
 const isolated = typeof crossOriginIsolated !== "undefined" && crossOriginIsolated;
 
@@ -63,7 +63,8 @@ onmessage = async (e) => {
   const t0 = performance.now();
   try {
     const svg = mod.trace(bytes, o.precision, o.min_area, o.colors, o.merge, o.max_dim,
-                          o.time_budget, o.no_background, o.minify, o.margin, o.content_units);
+                          o.time_budget, o.no_background, o.minify, o.margin, o.content_units,
+                          o.cutout);
     postMessage({ type: "done", id, svg, ms: performance.now() - t0 });
   } catch (err) {
     postMessage({ type: "error", id, error: String(err) });