@cadit-app/image-extrude 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cadit-app/image-extrude",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Image Extrude for CADit - Extrude shapes from SVG or bitmap images",
   "type": "module",
   "main": "dist/bundle.js",
@@ -15,15 +15,8 @@
       "types": "./dist/src/main.d.ts"
     }
   },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "build:types": "tsc",
-    "build:bundle": "vite build",
-    "build": "npm run build:types && npm run build:bundle",
-    "prepublishOnly": "npm run build",
-    "generate": "npx tsx cli.ts",
-    "build:glb": "npx tsx cli.ts output.glb",
-    "build:3mf": "npx tsx cli.ts output.3mf"
+  "cadit": {
+    "browserBundle": "./dist/bundle.js"
   },
   "dependencies": {
     "@cadit-app/script-params": "0.4.1",
@@ -59,12 +52,20 @@
   "license": "MIT",
   "files": [
     "dist/**/*",
-    "src/**/*",
     "images/**/*",
     "cadit.json",
     "README.md"
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build:types": "tsc",
+    "build:bundle": "vite build",
+    "build": "npm run build:types && npm run build:bundle",
+    "generate": "npx tsx cli.ts",
+    "build:glb": "npx tsx cli.ts output.glb",
+    "build:3mf": "npx tsx cli.ts output.3mf"
   }
-}
+}

package/src/crossSectionUtils.ts

@@ -1,30 +0,0 @@
-/**
- * CrossSection utility functions
- */
-
-import { CrossSection } from '@cadit-app/manifold-3d/manifoldCAD';
-
-/**
- * Centers a CrossSection at the origin based on its bounding box
- */
-export function centerCrossSection(crossSection: CrossSection): CrossSection {
-  const bounds = crossSection.bounds();
-  const centerX = (bounds.min[0] + bounds.max[0]) / 2;
-  const centerY = (bounds.min[1] + bounds.max[1]) / 2;
-  return crossSection.translate([-centerX, -centerY]);
-}
-
-/**
- * Scales a CrossSection to fit within a maximum size while maintaining aspect ratio
- */
-export function scaleToMaxSize(crossSection: CrossSection, maxSize: number): CrossSection {
-  const bounds = crossSection.bounds();
-  const width = bounds.max[0] - bounds.min[0];
-  const height = bounds.max[1] - bounds.min[1];
-  const maxDim = Math.max(width, height);
-  
-  if (maxDim <= 0) return crossSection;
-  
-  const scale = maxSize / maxDim;
-  return crossSection.scale([scale, scale]);
-}

package/src/main.ts

@@ -1,77 +0,0 @@
-/**
- * @cadit-app/image-extrude
- * 
- * Extrude 3D shapes from SVG or bitmap images.
- * Uses the defineParams API from @cadit-app/script-params.
- */
-
-import { defineParams } from '@cadit-app/script-params';
-import type { Manifold, CrossSection } from '@cadit-app/manifold-3d/manifoldCAD';
-import { imageExtrudeParamsSchema, ImageExtrudeParams, ImageFileValue } from './params';
-import { sampleSvg, traceImage } from './tracing';
-import { renderSvgToBitmapDataUrl } from './resvg';
-import { fetchImageAsDataUrl } from './utils';
-import { createEmptyManifold } from './manifoldUtils';
-
-// Re-export for external use
-export { sampleSvg, traceImage } from './tracing';
-export { renderSvgToBitmapDataUrl } from './resvg';
-export { makeCrossSection } from './makeCrossSection';
-
-/**
- * Main entry point using defineParams
- */
-export default defineParams({
-  params: imageExtrudeParamsSchema as any,
-  main: async (params): Promise<Manifold> => {
-    const typedParams = params as unknown as ImageExtrudeParams;
-    let { mode, height } = typedParams;
-    let imageFile: ImageFileValue | undefined = typedParams.imageFile;
-
-    // If imageFile has imageUrl but not dataUrl, fetch and convert to dataUrl
-    if (imageFile && !imageFile.dataUrl && imageFile.imageUrl) {
-      try {
-        imageFile = {
-          ...imageFile,
-          dataUrl: await fetchImageAsDataUrl(imageFile.imageUrl)
-        };
-      } catch (err) {
-        console.warn('Failed to fetch imageUrl:', err);
-        return createEmptyManifold();
-      }
-    }
-
-    if (!imageFile || !imageFile.dataUrl) {
-      console.warn('No valid image file provided.');
-      return createEmptyManifold();
-    }
-
-    // Adjust mode if sample is selected for non-SVG
-    if (mode === 'sample' && !imageFile.fileType?.includes('svg')) {
-      console.warn('Sample mode selected for non-SVG file. Defaulting to Trace mode.');
-      mode = 'trace';
-    }
-
-    let crossSection: CrossSection;
-    try {
-      if (mode === 'trace') {
-        // if svg, render svg to bitmap and then trace
-        const isSvg = imageFile.fileType?.includes('svg');
-        const dataUrl = isSvg ? await renderSvgToBitmapDataUrl(imageFile.dataUrl) : imageFile.dataUrl;
-
-        crossSection = await traceImage(dataUrl, {
-          maxWidth: typedParams.maxWidth,
-          despeckleSize: typedParams.despeckleSize
-        });
-      } else {
-        // mode is 'sample', and fileType is guaranteed to be svg+xml
-        crossSection = await sampleSvg(imageFile.dataUrl, typedParams.maxWidth);
-      }
-    } catch (error) {
-      console.error(`Error during image processing (mode: ${mode}):`, error);
-      return createEmptyManifold();
-    }
-
-    return crossSection.extrude(height);
-  },
-});

package/src/makeCrossSection.ts

@@ -1,57 +0,0 @@
-/**
- * Create a CrossSection from image parameters
- * Exported for external use (e.g., embedding in other makers)
- */
-
-import type { CrossSection } from '@cadit-app/manifold-3d/manifoldCAD';
-import { ImageExtrudeParams } from './params';
-import { sampleSvg, traceImage } from './tracing';
-import { renderSvgToBitmapDataUrl } from './resvg';
-import { fetchImageAsDataUrl } from './utils';
-
-export type MakeCrossSectionOptions = {
-  imageFile: ImageExtrudeParams['imageFile'];
-  mode: 'trace' | 'sample';
-  maxWidth?: number;
-  despeckleSize?: number;
-};
-
-/**
- * Creates a CrossSection from image data
- * This is the main function for embedding in other makers
- */
-export async function makeCrossSection(options: MakeCrossSectionOptions): Promise<CrossSection> {
-  let { imageFile, mode, maxWidth, despeckleSize } = options;
-
-  // If imageFile has imageUrl but not dataUrl, fetch and convert
-  if (imageFile && !imageFile.dataUrl && imageFile.imageUrl) {
-    imageFile = {
-      ...imageFile,
-      dataUrl: await fetchImageAsDataUrl(imageFile.imageUrl)
-    };
-  }
-
-  if (!imageFile?.dataUrl) {
-    throw new Error('No valid image file provided');
-  }
-
-  // Adjust mode if sample is selected for non-SVG
-  if (mode === 'sample' && !imageFile.fileType?.includes('svg')) {
-    console.warn('Sample mode selected for non-SVG file. Defaulting to Trace mode.');
-    mode = 'trace';
-  }
-
-  if (mode === 'trace') {
-    // if svg, render svg to bitmap and then trace
-    const isSvg = imageFile.fileType?.includes('svg');
-    const dataUrl = isSvg ? await renderSvgToBitmapDataUrl(imageFile.dataUrl) : imageFile.dataUrl;
-
-    return traceImage(dataUrl, {
-      maxWidth,
-      despeckleSize
-    });
-  } else {
-    // mode is 'sample', and fileType is guaranteed to be svg+xml
-    return sampleSvg(imageFile.dataUrl, maxWidth);
-  }
-}

package/src/manifoldUtils.ts

@@ -1,13 +0,0 @@
-/**
- * Manifold utility functions
- */
-
-import { Manifold, CrossSection } from '@cadit-app/manifold-3d/manifoldCAD';
-
-/**
- * Creates an empty manifold (a very small cube that will be invisible)
- */
-export function createEmptyManifold(): Manifold {
-  // Create a tiny box that's essentially invisible
-  return CrossSection.square([0.001, 0.001], true).extrude(0.001);
-}

package/src/params.ts

@@ -1,70 +0,0 @@
-/**
- * Parameter schema for the Image Extrude generator.
- */
-
-/**
- * Value type for image parameters.
- * Matches the ImageFileValue type from @cadit-app/script-params.
- * TODO: Import from script-params once version with ImageFileValue is published.
- */
-export interface ImageFileValue {
-  /** Remote URL to fetch the image from (e.g., HTTP URL or relative path). */
-  imageUrl?: string;
-  /** Base64-encoded data URL of the image content. */
-  dataUrl?: string;
-  /** MIME type of the image (e.g., 'image/svg+xml', 'image/png'). */
-  fileType?: string;
-  /** Original filename of the image. */
-  fileName?: string;
-}
-
-// Default image - CookieCAD logo from GitHub via jsdelivr CDN
-const defaultImageUrl = 'https://cdn.jsdelivr.net/gh/CADit-app/image-extrude@master/images/cookiecad-logo-dark.svg';
-
-export const imageExtrudeParamsSchema = {
-  mode: {
-    type: 'choice' as const,
-    label: 'Mode',
-    options: [
-      { value: 'trace', label: 'Trace' },
-      { value: 'sample', label: 'Sample (SVG only)' },
-    ],
-    default: 'trace',
-  },
-  imageFile: {
-    type: 'image' as const,
-    label: 'Image File',
-    default: {
-      imageUrl: defaultImageUrl,
-      dataUrl: '',
-      fileType: 'image/svg+xml',
-      fileName: 'cookiecad-logo-dark.svg'
-    } as ImageFileValue,
-  },
-  height: {
-    type: 'number' as const,
-    label: 'Extrusion Height (mm)',
-    default: 1,
-    min: 0.1,
-  },
-  maxWidth: {
-    type: 'number' as const,
-    label: 'Maximum Width (mm)',
-    default: 50,
-    min: 0.1,
-  },
-  despeckleSize: {
-    type: 'number' as const,
-    label: 'Despeckle Size (Tracing only)',
-    default: 2,
-    min: 0.1,
-  },
-};
-
-export type ImageExtrudeParams = {
-  mode: 'trace' | 'sample';
-  imageFile: ImageFileValue;
-  height: number;
-  maxWidth: number;
-  despeckleSize: number;
-};

package/src/resvg.ts

@@ -1,79 +0,0 @@
-/**
- * SVG to bitmap rendering using resvg-wasm
- * 
- * Note: When running as a dynamically loaded script in CADit, the WASM module
- * is loaded from esm.sh CDN since Vite's ?url import syntax isn't available.
- */
-
-import * as resvg from '@resvg/resvg-wasm';
-import { svgDataUrlToString } from './utils';
-
-// Hardcoded version for WASM URL - update when upgrading @resvg/resvg-wasm dependency
-const RESVG_VERSION = '2.6.2';
-
-let wasmInitialized = false;
-let wasmInitPromise: Promise<void> | null = null;
-
-/**
- * Initialize resvg WASM module.
- * Fetches the WASM binary from esm.sh CDN to work in dynamically loaded scripts.
- * 
- * Safe to call multiple times - subsequent calls return immediately.
- * If initialization fails, subsequent calls will retry.
- */
-async function initializeResvgWasm(): Promise<void> {
-  if (wasmInitialized) return;
-  if (wasmInitPromise) return wasmInitPromise;
-
-  wasmInitPromise = (async () => {
-    try {
-      // Fetch WASM from esm.sh CDN
-      const wasmUrl = `https://esm.sh/@resvg/resvg-wasm@${RESVG_VERSION}/index_bg.wasm`;
-      await resvg.initWasm(fetch(wasmUrl));
-      wasmInitialized = true;
-    } catch (error) {
-      // Reset promise so retry is possible
-      wasmInitPromise = null;
-      throw error;
-    }
-  })();
-
-  return wasmInitPromise;
-}
-
-/**
- * Renders an SVG Data URL to a PNG Data URL using resvg-wasm.
- */
-export const renderSvgToBitmapDataUrl = async (
-  svgDataUrl: string,
-  options?: { maxWidth?: number }
-): Promise<string> => {
-  await initializeResvgWasm();
-
-  const svgString = svgDataUrlToString(svgDataUrl);
-  if (!svgString) {
-    throw new Error("Could not decode SVG Data URL");
-  }
-
-  const opts: Record<string, unknown> = {};
-  if (options?.maxWidth && options.maxWidth > 0 && isFinite(options.maxWidth)) {
-    opts.fitTo = {
-      mode: 'width',
-      value: options.maxWidth
-    };
-  }
-
-  const resvgInstance = new resvg.Resvg(svgString, opts);
-  const pngData = resvgInstance.render();
-  const pngBuffer = pngData.asPng(); // Uint8Array
-
-  // Convert Uint8Array to proper ArrayBuffer for Blob
-  const arrayBuffer = pngBuffer.buffer.slice(
-    pngBuffer.byteOffset,
-    pngBuffer.byteOffset + pngBuffer.byteLength
-  ) as ArrayBuffer;
-
-  // Return blob URL (browser-compatible and more efficient)
-  const blob = new Blob([arrayBuffer], { type: 'image/png' });
-  return URL.createObjectURL(blob);
-};

package/src/threeMfExport.ts

@@ -1,67 +0,0 @@
-/**
- * 3MF Export for image-extrude
- */
-
-import type { Manifold } from '@cadit-app/manifold-3d/manifoldCAD';
-// @ts-ignore - No type declarations available
-import { to3dmodel, fileForContentTypes, FileForRelThumbnail } from '@jscadui/3mf-export';
-import { strToU8, zipSync, Zippable } from 'fflate';
-
-/**
- * Creates a 3MF ArrayBuffer from manifolds
- */
-export async function create3mfArrayBuffer(manifolds: Manifold[]): Promise<ArrayBuffer> {
-  const meshes = manifolds.map((m, index) => {
-    const mesh = m.getMesh();
-    return {
-      id: String(index + 1),
-      vertices: mesh.vertProperties,
-      indices: mesh.triVerts,
-      name: `Part-${index + 1}`,
-    };
-  });
-
-  // Generate a single component with all meshes as children
-  const components = [
-    {
-      id: meshes.length + 1,
-      children: meshes.map((mesh) => ({ objectID: mesh.id })),
-      name: 'ImageExtrude-Assembly',
-    },
-  ];
-
-  // The main item should reference the component
-  const items = components.map((component) => ({
-    objectID: component.id,
-  }));
-
-  const header = {
-    unit: 'millimeter',
-    title: 'CADit Image Extrude',
-    description: 'Image Extrude 3MF export',
-    application: 'CADit',
-  };
-
-  const to3mf = {
-    meshes,
-    components,
-    items,
-    precision: 7,
-    header,
-  };
-
-  // Generate the 3D model XML
-  const model = to3dmodel(to3mf as any);
-
-  // Package the 3MF file using fflate
-  const fileForRelThumbnail = new FileForRelThumbnail();
-  fileForRelThumbnail.add3dModel('3D/3dmodel.model');
-
-  const files: Zippable = {};
-  files['3D/3dmodel.model'] = strToU8(model);
-  files[fileForContentTypes.name] = strToU8(fileForContentTypes.content);
-  files[fileForRelThumbnail.name] = strToU8(fileForRelThumbnail.content);
-
-  const zipData = zipSync(files);
-  return zipData.buffer as ArrayBuffer;
-}

package/src/tracing.ts

@@ -1,98 +0,0 @@
-/**
- * Image tracing and SVG sampling utilities
- * 
- * Uses potrace for bitmap tracing. When running in CADit, potrace is exposed
- * as an importable library by the code.worker, which handles the jimp dependency.
- */
-
-import { svgToPolygons } from '@cadit-app/svg-sampler';
-import { CrossSection } from '@cadit-app/manifold-3d/manifoldCAD';
-import { Potrace } from 'potrace';
-import { svgDataUrlToString } from './utils';
-import { centerCrossSection } from './crossSectionUtils';
-
-/**
- * Converts SVG content to polygons
- */
-export const svgContentToPolygons = async (
-  svgContent: string,
-  maxError: number
-) => {
-  // Sample the SVG into polygons
-  const polygons = await svgToPolygons(svgContent, { maxError });
-
-  // Flip the Y-axis for SVG paths (SVG uses Y-down, but 3D modeling uses Y-up)
-  const flippedPolygons = polygons.map((polygon) => {
-    return polygon.points.map(([x, y]) => [x, -y]) as [number, number][];
-  });
-
-  return flippedPolygons;
-};
-
-/**
- * Converts an SVG string to a CrossSection with optional scaling
- */
-export const svgStringToCrossSection = async (
-  svgContent: string,
-  maxWidth?: number,
-  maxError: number = 0.01
-): Promise<CrossSection> => {
-  const polygons = await svgContentToPolygons(svgContent, maxError);
-
-  const crossSection = new CrossSection(polygons, 'EvenOdd').simplify(maxError);
-  if (!maxWidth) return crossSection;
-
-  // Check the width of the resulting CrossSection
-  const boundingBox = crossSection.bounds();
-  const width = boundingBox.max[0] - boundingBox.min[0];
-  const scaleFactor = maxWidth / width;
-  const scaledError = maxError / scaleFactor;
-
-  // Sample again with new error
-  const newPolygons = await svgContentToPolygons(svgContent, scaledError);
-  const newCrossSection = new CrossSection(newPolygons, 'EvenOdd').simplify(scaledError);
-  return newCrossSection.scale([scaleFactor, scaleFactor]);
-};
-
-/**
- * Samples an SVG data URL and returns a centered CrossSection
- */
-export const sampleSvg = async (svgDataUrl: string, maxWidth?: number): Promise<CrossSection> => {
-  const svgContent = svgDataUrlToString(svgDataUrl);
-  if (!svgContent) {
-    throw new Error('Failed to parse SVG data URL');
-  }
-  const crossSection = await svgStringToCrossSection(svgContent, maxWidth);
-  return centerCrossSection(crossSection);
-};
-
-/**
- * Traces a bitmap image and returns a centered CrossSection
- * Uses potrace with jimp for image loading (works in web workers).
- */
-export const traceImage = async (
-  imageDataUrl: string,
-  options: {
-    maxWidth?: number;
-    despeckleSize?: number;
-  }
-): Promise<CrossSection> => {
-  const tracer = new Potrace({
-    turdSize: options.despeckleSize || 2,
-  });
-
-  // Promisify tracer.loadImage
-  await new Promise<void>((resolve, reject) => {
-    tracer.loadImage(imageDataUrl, (_potrace, err) => {
-      if (err) {
-        reject(err);
-      } else {
-        resolve();
-      }
-    });
-  });
-
-  const svgContent = tracer.getSVG();
-  const crossSection = await svgStringToCrossSection(svgContent, options.maxWidth);
-  return centerCrossSection(crossSection);
-};

package/src/utils.ts

@@ -1,55 +0,0 @@
-/**
- * Utility functions for image processing
- */
-
-/**
- * Extracts the plain SVG XML string from a Data URL.
- * Handles both Base64 encoded and URL-encoded SVG data URLs.
- */
-export function svgDataUrlToString(dataUrl: string): string | null {
-  if (!dataUrl || !dataUrl.startsWith('data:image/svg+xml')) {
-    console.error("Invalid SVG Data URL format.");
-    return null;
-  }
-
-  const commaIndex = dataUrl.indexOf(',');
-  if (commaIndex === -1) {
-    console.error("Invalid Data URL: Missing comma separator.");
-    return null;
-  }
-
-  const header = dataUrl.substring(0, commaIndex);
-  const encodedData = dataUrl.substring(commaIndex + 1);
-
-  if (header.includes(';base64')) {
-    try {
-      // Decode Base64
-      return atob(encodedData);
-    } catch (e) {
-      console.error("Error decoding Base64 SVG data:", e);
-      return null;
-    }
-  } else {
-    try {
-      // Decode URL-encoded string
-      return decodeURIComponent(encodedData);
-    } catch (e) {
-      console.error("Error decoding URL-encoded SVG data:", e);
-      return null;
-    }
-  }
-}
-
-/**
- * Fetches an image URL and converts it to a data URL
- */
-export async function fetchImageAsDataUrl(imageUrl: string): Promise<string> {
-  const response = await fetch(imageUrl);
-  const blob = await response.blob();
-  return new Promise<string>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result as string);
-    reader.onerror = reject;
-    reader.readAsDataURL(blob);
-  });
-}