@slithy/prim-interface 1.0.7 → 1.1.0

package/LICENSE-COMMERCIAL.md

@@ -4,11 +4,11 @@ Copyright Matthew Campagna
 
 1. Grant
 
-Matthew Campagna grants Matthew Campagna a personal, non-transferable, non-sublicensable license to use, reproduce, modify, distribute, and commercially exploit `@slithy/prim-interface` as part of software products and related internal development activities.
+The individual copyright owner of `@slithy/prim-interface`, currently Matthew Campagna, is granted a personal, non-transferable, non-sublicensable license to use, reproduce, modify, distribute, and commercially exploit `@slithy/prim-interface` as part of software products and related internal development activities.
 
 2. Scope
 
-This commercial license applies only to Matthew Campagna in his personal capacity. It does not extend to any employer, client, contractor, affiliate, assignee, or other third party.
+This commercial license applies only to the natural person who is the individual copyright owner of `@slithy/prim-interface` at the time of use, in that person's personal capacity. It does not extend to any employer, client, contractor, affiliate, assignee, or other third party.
 
 3. Public License Unchanged
 

package/dist/chunk-4GHCEQDS.js

@@ -0,0 +1,16 @@
+// src/shared.ts
+import { parseColor } from "@slithy/prim-lib";
+function deriveDisplayConfigs(computeCfg, pixelRatio) {
+  const viewCfg = { ...computeCfg, width: computeCfg.scale * computeCfg.width, height: computeCfg.scale * computeCfg.height };
+  const displayFill = computeCfg.outputFill ?? computeCfg.fill;
+  const deviceViewCfg = { ...viewCfg, width: viewCfg.width * pixelRatio, height: viewCfg.height * pixelRatio, fill: displayFill };
+  return { viewCfg, deviceViewCfg };
+}
+function serializeOutput(cc, steps) {
+  return { v: 1, w: cc.width, h: cc.height, scale: cc.scale, fill: parseColor(cc.fill), steps };
+}
+
+export {
+  deriveDisplayConfigs,
+  serializeOutput
+};

package/dist/index.d.ts

@@ -1,23 +1,9 @@
-import { ShapeInterface, StepData, SerializedOutput } from '@slithy/prim-lib';
+import { PreCfg, StepData, SerializedOutput } from '@slithy/prim-lib';
 export { Bbox, Circle, CircleOptions, Ellipse, EllipseOptions, Glyph, GlyphOptions, Hexagon, NGonOptions, RGB, RectOptions, Rectangle, ReplayResult, SerializedOutput, ShapeInterface, Square, StepData, Triangle, makeCircle, makeEllipse, makeGlyph, makeNGon, makeRect, replayOutput, stepPerf } from '@slithy/prim-lib';
 
-interface Config {
-    steps: number;
-    shapes: number;
-    mutations: number;
-    alpha: number;
-    mutateAlpha: boolean;
-    computeSize: number;
-    viewSize: number;
-    allowUpscale?: boolean;
+interface Config extends PreCfg {
     pixelRatio?: number;
     glyphChar?: string;
-    shapeTypes: Array<new (w: number, h: number) => ShapeInterface>;
-    shapeWeights?: number[];
-    fill: 'auto' | string;
-    width?: number;
-    height?: number;
-    scale?: number;
 }
 interface StepResult {
     raster: HTMLCanvasElement;
@@ -66,7 +52,7 @@ interface ShareFromVectorOptions extends SaveOptions {
     quality?: number;
 }
 type Background = string | [png: string, jpeg: string];
-declare function saveRaster(canvas: HTMLCanvasElement, options?: SaveRasterOptions): void;
+declare function saveRaster(canvas: HTMLCanvasElement, options?: SaveRasterOptions): Promise<void>;
 declare function saveRasterFromVector(svgString: string, width: number, height: number, options?: SaveRasterFromVectorOptions): Promise<void>;
 declare function copyRasterFromVector(svgString: string, width: number, height: number): Promise<void>;
 declare function shareFromVector(svgString: string, width: number, height: number, options?: ShareFromVectorOptions): Promise<void>;

package/dist/index.js

@@ -1,9 +1,15 @@
+import {
+  deriveDisplayConfigs,
+  serializeOutput
+} from "./chunk-4GHCEQDS.js";
+
 // src/run.ts
-import { Canvas, Optimizer, parseColor } from "@slithy/prim-lib";
+import { Canvas, Optimizer } from "@slithy/prim-lib";
 function run(source, cfg, callbacks = {}) {
   const url = source instanceof File ? URL.createObjectURL(source) : source;
   let optimizer = null;
   let stopped = false;
+  let settled = false;
   let computeCfg = null;
   const accumulatedSteps = [];
   Canvas.original(url, cfg).then((original) => {
@@ -14,21 +20,24 @@ function run(source, cfg, callbacks = {}) {
     if (source instanceof File) URL.revokeObjectURL(url);
     computeCfg = { ...cfg, width: cfg.width, height: cfg.height };
     const pixelRatio = cfg.pixelRatio ?? 1;
-    const viewCfg = { ...computeCfg, width: computeCfg.scale * computeCfg.width, height: computeCfg.scale * computeCfg.height };
-    const displayFill = computeCfg.outputFill ?? computeCfg.fill;
-    const deviceViewCfg = { ...viewCfg, width: viewCfg.width * pixelRatio, height: viewCfg.height * pixelRatio, fill: displayFill };
+    const { viewCfg, deviceViewCfg } = deriveDisplayConfigs(computeCfg, pixelRatio);
     const result = Canvas.empty(deviceViewCfg);
     result.ctx.scale(computeCfg.scale * pixelRatio, computeCfg.scale * pixelRatio);
     if (!(result.node instanceof HTMLCanvasElement)) throw new Error("[prim] Expected HTMLCanvasElement");
     const rasterNode = result.node;
+    rasterNode.style.width = `${viewCfg.width}px`;
     const svg = Canvas.empty(computeCfg, true);
     svg.setAttribute("width", String(viewCfg.width));
     svg.setAttribute("height", String(viewCfg.height));
     callbacks.onStart?.(rasterNode, svg);
     const serializer = new XMLSerializer();
     optimizer = new Optimizer(original, computeCfg);
+    optimizer.onError = (err) => {
+      callbacks.onError?.(err instanceof Error ? err.message : String(err));
+    };
     let stepCount = 0;
     optimizer.onStep = (step) => {
+      if (settled) return;
       stepCount++;
       if (step) {
         result.drawStep(step);
@@ -38,7 +47,9 @@ function run(source, cfg, callbacks = {}) {
         callbacks.onStep?.({
           raster: rasterNode,
           svg,
-          svgString: serializer.serializeToString(svg),
+          get svgString() {
+            return serializer.serializeToString(svg);
+          },
           stepData,
           progress: {
             current: stepCount,
@@ -48,14 +59,8 @@ function run(source, cfg, callbacks = {}) {
         });
       }
       if (stepCount >= cfg.steps) {
-        callbacks.onComplete?.({
-          v: 1,
-          w: computeCfg.width,
-          h: computeCfg.height,
-          scale: computeCfg.scale,
-          fill: parseColor(cfg.fill),
-          steps: accumulatedSteps
-        });
+        settled = true;
+        callbacks.onComplete?.(serializeOutput(computeCfg, accumulatedSteps));
       }
     };
     optimizer.start();
@@ -66,15 +71,10 @@ function run(source, cfg, callbacks = {}) {
   return {
     stop: () => {
       stopped = true;
+      if (settled) return;
+      settled = true;
       optimizer?.stop();
-      callbacks.onStop?.(computeCfg ? {
-        v: 1,
-        w: computeCfg.width,
-        h: computeCfg.height,
-        scale: computeCfg.scale,
-        fill: parseColor(cfg.fill),
-        steps: accumulatedSteps
-      } : null);
+      callbacks.onStop?.(computeCfg ? serializeOutput(computeCfg, accumulatedSteps) : null);
     },
     pause: () => optimizer?.pause(),
     resume: () => optimizer?.resume()
@@ -89,6 +89,7 @@ function runWorker(source, cfg, callbacks = {}) {
   let stopped = false;
   let settled = false;
   let result = null;
+  let displayCanvas = null;
   let svgEl = null;
   const serializer = new XMLSerializer();
   const worker = new Worker(new URL("./worker-entry.js", import.meta.url), { type: "module" });
@@ -109,20 +110,10 @@ function runWorker(source, cfg, callbacks = {}) {
       const { width, height, scale, fill, outputFill } = msg;
       const pixelRatio = cfg.pixelRatio ?? 1;
       const computeCfg = { ...cfg, width, height, scale, fill, outputFill };
-      const viewCfg = {
-        ...computeCfg,
-        width: scale * width,
-        height: scale * height
-      };
-      const displayFill = outputFill ?? fill;
-      const deviceViewCfg = {
-        ...viewCfg,
-        width: viewCfg.width * pixelRatio,
-        height: viewCfg.height * pixelRatio,
-        fill: displayFill
-      };
+      const { viewCfg, deviceViewCfg } = deriveDisplayConfigs(computeCfg, pixelRatio);
       result = Canvas2.empty(deviceViewCfg);
-      const displayCanvas = result.node;
+      if (!(result.node instanceof HTMLCanvasElement)) throw new Error("[prim] Expected HTMLCanvasElement");
+      displayCanvas = result.node;
       displayCanvas.style.width = `${viewCfg.width}px`;
       result.ctx.scale(scale * pixelRatio, scale * pixelRatio);
       svgEl = Canvas2.empty(computeCfg, true);
@@ -130,14 +121,17 @@ function runWorker(source, cfg, callbacks = {}) {
       svgEl.setAttribute("height", String(viewCfg.height));
       callbacks.onStart?.(displayCanvas, svgEl);
     } else if (msg.type === "step") {
-      if (!result || !svgEl) return;
+      if (!result || !svgEl || !displayCanvas) return;
+      const svg = svgEl;
       const { stepData, progress } = msg;
       renderStepToCtx(stepData, result.ctx);
-      svgEl.appendChild(stepDataToSVGElement(stepData));
+      svg.appendChild(stepDataToSVGElement(stepData));
       callbacks.onStep?.({
-        raster: result.node,
-        svg: svgEl,
-        svgString: serializer.serializeToString(svgEl),
+        raster: displayCanvas,
+        svg,
+        get svgString() {
+          return serializer.serializeToString(svg);
+        },
         stepData,
         progress
       });
@@ -228,19 +222,21 @@ function svgToCanvas(svgString, width, height, background) {
     img.src = url;
   });
 }
-function saveRaster(canvas, options) {
+async function saveRaster(canvas, options) {
   const format = options?.format ?? "png";
   const quality = options?.quality ?? 0.92;
   const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
   const ext = format === "jpeg" ? "jpg" : "png";
-  const dataUrl = canvas.toDataURL(mimeType, quality);
-  triggerDownload(dataUrl, buildFilename(ext, options));
+  const blob = await new Promise((resolve, reject) => canvas.toBlob((b) => b ? resolve(b) : reject(new Error("toBlob failed")), mimeType, quality));
+  const url = URL.createObjectURL(blob);
+  triggerDownload(url, buildFilename(ext, options));
+  URL.revokeObjectURL(url);
 }
 async function saveRasterFromVector(svgString, width, height, options) {
   const format = options?.format ?? "png";
   const quality = options?.quality ?? 0.92;
   const canvas = await svgToCanvas(svgString, width, height, resolveBackground(options?.background, format));
-  saveRaster(canvas, { format, quality, suffix: options?.suffix, filename: options?.filename });
+  await saveRaster(canvas, { format, quality, suffix: options?.suffix, filename: options?.filename });
 }
 async function copyRasterFromVector(svgString, width, height) {
   const canvas = await svgToCanvas(svgString, width, height);
@@ -260,16 +256,8 @@ function saveVector(svgString, options) {
 async function copyVector(svgString) {
   await navigator.clipboard.writeText(svgString);
 }
-function dataUrlToBlob(dataUrl) {
-  const [header, data] = dataUrl.split(",");
-  const mime = header.match(/:(.*?);/)[1];
-  const bytes = atob(data);
-  const arr = new Uint8Array(bytes.length);
-  for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i);
-  return new Blob([arr], { type: mime });
-}
 async function copyRaster(canvas) {
-  const blob = dataUrlToBlob(canvas.toDataURL("image/png"));
+  const blob = await new Promise((resolve, reject) => canvas.toBlob((b) => b ? resolve(b) : reject(new Error("toBlob failed")), "image/png"));
   await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
 }
 async function share(canvas, options) {
@@ -279,7 +267,7 @@ async function share(canvas, options) {
   const ext = format === "jpeg" ? "jpg" : "png";
   const blob = await new Promise((resolve, reject) => canvas.toBlob((b) => b ? resolve(b) : reject(new Error("toBlob failed")), mimeType, quality));
   const file = new File([blob], buildFilename(ext, options), { type: mimeType });
-  if (navigator.canShare({ files: [file] })) {
+  if (navigator.canShare?.({ files: [file] })) {
     await navigator.share({ files: [file] });
   }
 }

package/dist/worker-entry.js

@@ -1,5 +1,9 @@
+import {
+  serializeOutput
+} from "./chunk-4GHCEQDS.js";
+
 // src/worker-entry.ts
-import { Canvas, Optimizer, parseColor, makeNGon, makeRect, makeCircle, makeEllipse, makeGlyph } from "@slithy/prim-lib";
+import { Canvas, Optimizer, makeNGon, makeRect, makeCircle, makeEllipse, makeGlyph } from "@slithy/prim-lib";
 import { Triangle, Rectangle, Ellipse, Circle, Square, Hexagon, Glyph } from "@slithy/prim-lib";
 var SHAPES = {
   Triangle,
@@ -17,6 +21,7 @@ self.onmessage = async (e) => {
   const msg = e.data;
   switch (msg.type) {
     case "start": {
+      optimizer?.stop();
       const { url, cfg: workerCfg } = msg;
       const { shapeTypeNames, glyphChar, ...rest } = workerCfg;
       const shapeTypes = shapeTypeNames.map((spec) => {
@@ -50,7 +55,10 @@ self.onmessage = async (e) => {
       let blob;
       let bitmap;
       try {
-        blob = await fetch(url).then((r) => r.blob());
+        blob = await fetch(url).then((r) => {
+          if (!r.ok) throw new Error(`Failed to fetch image: ${r.status} ${r.statusText}`);
+          return r.blob();
+        });
         bitmap = await createImageBitmap(blob);
       } catch (err) {
         self.postMessage({ type: "error", message: err instanceof Error ? err.message : String(err) });
@@ -71,6 +79,9 @@ self.onmessage = async (e) => {
       let stepCount = 0;
       const cc = computeCfg;
       optimizer = new Optimizer(original, cc, (fn) => setTimeout(fn, 0));
+      optimizer.onError = (err) => {
+        self.postMessage({ type: "error", message: err instanceof Error ? err.message : String(err) });
+      };
       optimizer.onStep = (step) => {
         stepCount++;
         if (step) {
@@ -88,14 +99,7 @@ self.onmessage = async (e) => {
           self.postMessage(outbound);
         }
         if (stepCount >= cc.steps) {
-          const serialized = {
-            v: 1,
-            w: cc.width,
-            h: cc.height,
-            scale: cc.scale,
-            fill: parseColor(cc.fill),
-            steps: accumulatedSteps
-          };
+          const serialized = serializeOutput(cc, accumulatedSteps);
           self.postMessage({ type: "complete", serialized });
         }
       };
@@ -110,14 +114,7 @@ self.onmessage = async (e) => {
       break;
     case "stop":
       optimizer?.stop();
-      self.postMessage({ type: "stopped", serialized: computeCfg ? {
-        v: 1,
-        w: computeCfg.width,
-        h: computeCfg.height,
-        scale: computeCfg.scale,
-        fill: parseColor(computeCfg.fill),
-        steps: accumulatedSteps
-      } : null });
+      self.postMessage({ type: "stopped", serialized: computeCfg ? serializeOutput(computeCfg, accumulatedSteps) : null });
       break;
   }
 };

package/package.json

@@ -1,34 +1,36 @@
 {
   "name": "@slithy/prim-interface",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "Browser-facing API for primitive-based image reconstruction.",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./worker-entry": {
-      "import": "./dist/worker-entry.js",
-      "types": "./dist/worker-entry.d.ts"
+      "types": "./dist/worker-entry.d.ts",
+      "import": "./dist/worker-entry.js"
     }
   },
   "files": [
     "dist",
     "LICENSE-COMMERCIAL.md"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/worker-entry.js"
+  ],
   "dependencies": {
-    "@slithy/prim-lib": "0.8.2"
+    "@slithy/prim-lib": "0.9.0"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^4.1.7",
+    "@vitest/coverage-v8": "^4.1.9",
     "jsdom": "^29.1.1",
     "tsup": "^8",
     "typescript": "^5",
-    "vitest": "^4.1.7",
-    "@slithy/eslint-config": "0.0.0",
-    "@slithy/tsconfig": "0.0.0"
+    "vitest": "^4.1.9",
+    "@slithy/tsconfig": "0.0.0",
+    "@slithy/eslint-config": "0.0.0"
   },
   "author": {
     "name": "Matthew Campagna",