@slithy/prim-interface 1.0.6 → 1.1.0

package/LICENSE-COMMERCIAL.md

@@ -0,0 +1,23 @@
+Commercial License for @slithy/prim-interface
+
+Copyright Matthew Campagna
+
+1. Grant
+
+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 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
+
+This commercial license is separate from the public license distributed with the package. All other recipients use the software, if at all, under the terms of the public license or another separately granted written license.
+
+4. Third-Party Attributions
+
+This package includes or is derived from third-party material identified in the package `LICENSE` file. Those third-party attribution and notice requirements remain in effect.
+
+5. No Warranty
+
+To the maximum extent permitted by law, the software is provided "as is", without warranty of any kind, express or implied.

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,39 +1,43 @@
 {
   "name": "@slithy/prim-interface",
-  "version": "1.0.6",
+  "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"
+    "dist",
+    "LICENSE-COMMERCIAL.md"
+  ],
+  "sideEffects": [
+    "./dist/worker-entry.js"
   ],
-  "sideEffects": false,
   "dependencies": {
-    "@slithy/prim-lib": "0.8.1"
+    "@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",
     "url": "https://github.com/mjcampagna"
   },
   "license": "PolyForm-Noncommercial-1.0.0",
+  "commercialLicense": "SEE LICENSE-COMMERCIAL.md",
   "keywords": [
     "image",
     "reconstruction",