react-native-nano-icons 0.1.1 → 0.1.3

package/src/core/pipeline/run.ts

@@ -1,13 +1,15 @@
-import fs from 'node:fs';
 import fsp from 'node:fs/promises';
 import path from 'node:path';
 
-import { compileTtfFromGlyphSVGs } from '../font/compile.js';
-import { picoFromFile } from './managers.js';
+import {
+  compileTtfFromGlyphs,
+  parseCompileTtfFromGlyphsError,
+  type FontGlyph,
+} from '../font/compile.js';
+import { picoFromFile, PathKitManager } from './managers.js';
 
 import {
   ensureDir,
-  ensureEmptyDir,
   type PipelineConfig,
   type PipelinePaths,
 } from './config.js';
@@ -16,9 +18,15 @@ import {
   preprocessSvg,
   shouldSkipPath,
   validateSvg,
+  extractOriginalEvenoddDs,
+  restoreOriginalEvenoddDs,
 } from '../svg/svg_dom.js';
-import { computePlacement, writeLayerSvg } from '../svg/layers.js';
-import type { GlyphEntry, NanoGlyphMap } from '../types.js';
+import { computePlacement, transformPathForFont } from '../svg/layers.js';
+import { convertEvenoddToWinding } from '../svg/svg_pathops.js';
+import type {
+  GlyphLayer,
+  NanoGlyphMap,
+} from '../types.js';
 import type { NanoLogger } from '../types.js';
 
 export type PipelineResult = {
@@ -26,6 +34,78 @@ export type PipelineResult = {
   glyphmapPath: string;
 };
 
+// ---------------------------------------------------------------------------
+// Same-color path merging
+// ---------------------------------------------------------------------------
+
+type ParsedPath = { d: string; fill: string | null; fillRule?: 'evenodd'; noMerge?: boolean };
+
+/**
+ * Concatenate multiple SVG path `d` strings into a single compound path.
+ * This preserves the exact geometry of each path (no boolean operations)
+ * while combining them into one glyph. Under nonzero winding, this renders
+ * identically to drawing each path separately with the same color.
+ */
+function concatPathDs(ds: string[]): string | null {
+  if (ds.length === 0) return null;
+  if (ds.length === 1) return ds[0]!;
+  return ds.join(' ');
+}
+
+/**
+ * Merge consecutive same-color paths into single compound paths via boolean UNION.
+ * Preserves z-order: only merges runs of adjacent paths with identical fill color.
+ */
+function mergeSameColorPaths(
+  paths: ParsedPath[],
+  logger?: NanoLogger
+): ParsedPath[] {
+  if (paths.length <= 1) return paths;
+
+  const result: ParsedPath[] = [];
+  let i = 0;
+
+  while (i < paths.length) {
+    const fill = paths[i]!.fill;
+
+    // Find consecutive run of same fill that are all mergeable.
+    // Paths converted from evenodd have compound hole structure and must not
+    // be merged — their CW hole contours would cancel CCW contours from
+    // adjacent paths, producing incorrect fill.
+    let j = i + 1;
+    if (!paths[i]!.noMerge) {
+      while (
+        j < paths.length &&
+        paths[j]!.fill === fill &&
+        !paths[j]!.noMerge
+      ) {
+        j++;
+      }
+    }
+
+    if (j - i === 1) {
+      result.push(paths[i]!);
+    } else {
+      const group = paths.slice(i, j);
+      const merged = concatPathDs(group.map((p) => p.d));
+      if (merged) {
+        logger?.info(
+          `    ⊕ Merged ${group.length} same-color paths (fill=${fill})`
+        );
+        result.push({ d: merged, fill });
+      } else {
+        result.push(...group);
+      }
+    }
+    i = j;
+  }
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Pipeline
+// ---------------------------------------------------------------------------
+
 /**
  * Run the font pipeline with given config and paths.
  * Uses the singleton Pyodide/PathKit instance (initialized on first call).
@@ -40,7 +120,6 @@ export async function runPipeline(
 
   logger?.update(`Building "${config.fontFamily}"…`);
 
-  ensureEmptyDir(paths.tempDir);
   ensureDir(paths.outputDir);
 
   const files = (await fsp.readdir(paths.inputDir)).filter((f) =>
@@ -48,16 +127,20 @@ export async function runPipeline(
   );
 
   const glyphMap: NanoGlyphMap = {
-    meta: {
-      fontFamily: config.fontFamily,
-      upm: config.upm,
-      safeZone: config.safeZone,
-      startUnicode: config.startUnicode,
+    m: {
+      f: config.fontFamily,
+      u: config.upm,
+      z: config.safeZone,
+      s: config.startUnicode,
     },
-    icons: {},
+    i: {},
   };
 
   let currentUnicode = config.startUnicode;
+  const codepointToIcon = new Map<number, string>();
+  const allGlyphs: FontGlyph[] = [];
+
+  const PathKit = await PathKitManager.getInstance();
 
   for (const file of files) {
     const iconName = path.parse(file).name;
@@ -76,8 +159,40 @@ export async function runPipeline(
     }
 
     const preprocessed = preprocessSvg(rawContent);
+
+    // Preserve original evenodd `d` strings BEFORE picosvg processes them.
+    // Picosvg's simplify (via our PathKit shim) can drop contours from
+    // multi-subpath evenodd paths — we restore the originals after.
+    const originalEvenoddDs = extractOriginalEvenoddDs(preprocessed);
+
     const flattenedSvg = await picoFromFile(filePath, preprocessed);
-    const parsed = parseFlattenedSvg(flattenedSvg);
+    const parsed = parseFlattenedSvg(flattenedSvg, {
+      onSanitize: (original) => {
+        logger?.info(
+          `  ⚠ Sanitized path in "${file}": path was missing initial moveto (prepended M from endpoint)`
+        );
+        logger?.info(`    Original: ${original.slice(0, 80)}…`);
+      },
+    });
+
+    // Restore original evenodd path data (undamaged by picosvg's simplify),
+    // then convert to nonzero winding with our containment-based algorithm.
+    // Mark as noMerge — compound paths with holes must stay separate so their
+    // CW hole contours don't cancel adjacent paths' CCW contours.
+    if (originalEvenoddDs.length > 0) {
+      restoreOriginalEvenoddDs(parsed.paths, originalEvenoddDs);
+    }
+    for (const p of parsed.paths) {
+      if (p.fillRule === 'evenodd') {
+        logger?.info(`  ↻ Converting evenodd path to nonzero winding in "${file}"`);
+        p.d = convertEvenoddToWinding(PathKit, p.d);
+        delete p.fillRule;
+        (p as ParsedPath).noMerge = true;
+      }
+    }
+
+    // Merge consecutive same-color paths into single compound glyphs
+    const mergedPaths = mergeSameColorPaths(parsed.paths, logger);
 
     const { vx, vy, scale, xOff, yOff, adv } = computePlacement({
       upm: config.upm,
@@ -85,31 +200,34 @@ export async function runPipeline(
       viewBox: parsed.viewBox,
     });
 
-    const entry: GlyphEntry = { adv, layers: [] };
+    const layers: GlyphLayer[] = [];
 
-    for (const p of parsed.paths) {
+    for (const p of mergedPaths) {
       if (shouldSkipPath(p.d, p.fill)) continue;
 
       const cp = currentUnicode++;
+      codepointToIcon.set(cp, iconName);
 
-      await writeLayerSvg({
-        tempDir: paths.tempDir,
-        upm: config.upm,
-        adv,
+      const fontD = transformPathForFont(PathKit, p.d, {
         vx,
         vy,
         scale,
         xOff,
         yOff,
-        d: p.d,
+        upm: config.upm,
+      });
+
+      allGlyphs.push({
         codepoint: cp,
+        advanceWidth: adv,
+        d: fontD,
       });
 
-      entry.layers.push({ codepoint: cp, color: p.fill || 'black' });
+      layers.push([cp, p.fill || 'black']);
     }
 
-    if (entry.layers.length > 0) {
-      glyphMap.icons[iconName] = entry;
+    if (layers.length > 0) {
+      glyphMap.i[iconName] = [adv, layers];
     }
   }
 
@@ -119,27 +237,27 @@ export async function runPipeline(
   );
 
   if (options?.inputHash) {
-    glyphMap.meta.hash = options.inputHash;
+    glyphMap.m.h = options.inputHash;
   }
-  await fsp.writeFile(glyphmapPath, JSON.stringify(glyphMap, null, 2), 'utf8');
+  await fsp.writeFile(glyphmapPath, JSON.stringify(glyphMap), 'utf8');
 
   logger?.info(`Compiling TTF…`);
   const ttfPath = path.join(paths.outputDir, `${config.fontFamily}.ttf`);
 
-  await compileTtfFromGlyphSVGs({
-    glyphDir: paths.tempDir,
-    outTtfPath: ttfPath,
-    fontName: config.fontFamily,
-    upm: config.upm,
-    ascent: config.upm,
-    descent: 0,
-  });
-
-  if (fs.existsSync(paths.tempDir)) {
-    fs.rmSync(paths.tempDir, { recursive: true, force: true });
+  try {
+    await compileTtfFromGlyphs({
+      glyphs: allGlyphs,
+      outTtfPath: ttfPath,
+      fontName: config.fontFamily,
+      upm: config.upm,
+      ascent: config.upm,
+      descent: 0,
+    });
+  } catch (err: unknown) {
+    parseCompileTtfFromGlyphsError(err, codepointToIcon);
   }
 
-  const iconCount = Object.keys(glyphMap.icons).length;
+  const iconCount = Object.keys(glyphMap.i).length;
   const elapsed = Date.now() - startTime;
   logger?.succeed(
     `Built ${config.fontFamily}.ttf [${iconCount} icon${

package/src/core/svg/layers.ts

@@ -1,6 +1,8 @@
 import fsp from 'node:fs/promises';
 import path from 'node:path';
 
+import type { PathKitModule } from '../types.js';
+
 function roundInt(n: number): number {
   return Math.round(n);
 }
@@ -64,3 +66,45 @@ export async function writeLayerSvg(opts: {
 
   await fsp.writeFile(path.join(opts.tempDir, `u${hex}.svg`), layerSvg, 'utf8');
 }
+
+/**
+ * Transform an SVG path `d` string from source SVG coordinates into font
+ * glyph coordinates (Y-up, with placement scaling and centering applied).
+ *
+ * Combines placement transform (translate + scale + translate) with the
+ * SVG→font Y-axis flip into a single affine transform applied via PathKit.
+ */
+export function transformPathForFont(
+  PathKit: PathKitModule,
+  d: string,
+  opts: {
+    vx: number;
+    vy: number;
+    scale: number;
+    xOff: number;
+    yOff: number;
+    upm: number;
+  }
+): string {
+  const { vx, vy, scale, xOff, yOff, upm } = opts;
+
+  const p = PathKit.FromSVGString(d);
+  if (!p) return d;
+
+  // Combined affine: placement + Y-flip for font coordinates.
+  //   x' =  scale * (x - vx) + xOff
+  //   y' =  upm - (scale * (y - vy) + yOff)
+  //
+  // SkMatrix row-major: [scaleX, skewX, transX, skewY, scaleY, transY, 0,0,1]
+  const scaleX = scale;
+  const scaleY = -scale;
+  const transX = xOff - vx * scale;
+  const transY = upm - yOff + vy * scale;
+
+  p.transform(scaleX, 0, transX, 0, scaleY, transY, 0, 0, 1);
+
+  const result = p.toSVGString();
+  p.delete?.();
+
+  return result;
+}

package/src/core/svg/svg_dom.ts

@@ -3,7 +3,7 @@ import { parseColor } from '../../utils/parse';
 
 export type ParsedFlatSvg = {
   viewBox: [number, number, number, number];
-  paths: Array<{ d: string; fill: string | null }>;
+  paths: Array<{ d: string; fill: string | null; fillRule?: 'evenodd' }>;
 };
 
 // if the fill is implicit, walk ancestors for the first explicit fill value
@@ -29,12 +29,43 @@ export function calculateOpColor(
   return `rgba(${r},${g},${b},${finalAlpha})`;
 }
 
-export const parsePath = (p: Element): { d: string; fill: string | null } => {
+/**
+ * If a flattened path lost its initial moveto (e.g. picosvg dropped an empty
+ * `Mx y z` subpath), prepend `M` using the path's last coordinate pair.
+ * For closed icon shapes the endpoint equals the start point.
+ */
+export function sanitizePathData(d: string): { d: string; sanitized: boolean } {
+  const trimmed = d.trim();
+  if (!trimmed || /^[Mm]/.test(trimmed)) {
+    return { d: trimmed, sanitized: false };
+  }
+
+  // Strip trailing close commands, then grab the last two numbers as x,y
+  const withoutClose = trimmed.replace(/[Zz]\s*$/, '');
+  const nums = withoutClose.match(/-?\d+(?:\.\d+)?/g);
+  if (!nums || nums.length < 2) {
+    return { d: trimmed, sanitized: false };
+  }
+
+  const x = nums[nums.length - 2];
+  const y = nums[nums.length - 1];
+  return { d: `M${x},${y} ${trimmed}`, sanitized: true };
+}
+
+export const parsePath = (
+  p: Element
+): { d: string; fill: string | null; fillRule?: 'evenodd' } => {
   const d = p.getAttribute('d') ?? '';
 
   const op = p.getAttribute('opacity');
   const fillOp = p.getAttribute('fill-opacity');
   const fill = p.getAttribute('fill');
+  // picosvg may drop fill-rule but preserve clip-rule; treat either as evenodd
+  const fillRule =
+    p.getAttribute('fill-rule') === 'evenodd' ||
+    p.getAttribute('clip-rule') === 'evenodd'
+      ? ('evenodd' as const)
+      : undefined;
 
   if (op !== null || fillOp !== null) {
     const opVal = op !== null ? parseFloat(op) : 1;
@@ -43,16 +74,21 @@ export const parsePath = (p: Element): { d: string; fill: string | null } => {
     return {
       d,
       fill: calculateOpColor(fill, combinedOpacity, p),
+      fillRule,
     };
   }
 
   return {
     d,
     fill,
+    fillRule,
   };
 };
 
-export function parseFlattenedSvg(flattenedSvg: string): ParsedFlatSvg {
+export function parseFlattenedSvg(
+  flattenedSvg: string,
+  options?: { onSanitize?: (original: string) => void }
+): ParsedFlatSvg {
   const dom = new JSDOM(flattenedSvg);
   const doc = dom.window.document;
 
@@ -69,7 +105,16 @@ export function parseFlattenedSvg(flattenedSvg: string): ParsedFlatSvg {
 
   const pathEls = Array.from(doc.querySelectorAll('path'));
 
-  const paths = pathEls.map(parsePath).filter((p) => p.d.trim() !== '');
+  const paths = pathEls
+    .map(parsePath)
+    .filter((p) => p.d.trim() !== '')
+    .map((p) => {
+      const { d, sanitized } = sanitizePathData(p.d);
+      if (sanitized) {
+        options?.onSanitize?.(p.d);
+      }
+      return { ...p, d };
+    });
 
   return { viewBox, paths };
 }
@@ -92,8 +137,55 @@ export function validateSvg(content: string): SvgValidation {
   return { valid: true };
 }
 
+/**
+ * Extract the original `d` strings of evenodd paths from the raw SVG
+ * BEFORE picosvg processes it. Picosvg's simplify (via our PathKit shim)
+ * can drop contours from multi-subpath evenodd paths, so we preserve
+ * the originals and apply our own winding conversion later.
+ *
+ * Returns one `d` string per evenodd path, in document order.
+ */
+export function extractOriginalEvenoddDs(svgContent: string): string[] {
+  if (!/<[^>]*fill-rule\s*=\s*["']evenodd/i.test(svgContent)) {
+    return [];
+  }
+
+  const dom = new JSDOM(svgContent, { contentType: 'image/svg+xml' });
+  const doc = dom.window.document;
+  const results: string[] = [];
+
+  const pathEls = doc.querySelectorAll(
+    'path[fill-rule="evenodd"], path[clip-rule="evenodd"]'
+  );
+  for (const el of pathEls) {
+    const d = el.getAttribute('d');
+    if (d) results.push(d);
+  }
+  return results;
+}
+
+/**
+ * Replace picosvg's (potentially damaged) evenodd path data with the
+ * preserved originals. Matches by position: the Nth evenodd path in
+ * the parsed output gets the Nth original `d` string.
+ */
+export function restoreOriginalEvenoddDs(
+  paths: ParsedFlatSvg['paths'],
+  originalDs: string[]
+): void {
+  let oi = 0;
+  for (const p of paths) {
+    if (p.fillRule === 'evenodd' && oi < originalDs.length) {
+      p.d = originalDs[oi]!;
+      oi++;
+    }
+  }
+}
+
 // ensure the svg has a xmlns attribute
 export function preprocessSvg(content: string): string {
   if (/xmlns\s*=/.test(content)) return content;
   return content.replace(/<svg\b/, '<svg xmlns="http://www.w3.org/2000/svg"');
 }
+
+