react-native-nano-icons 0.0.0 → 0.1.0

package/src/core/shims/pathops.py

@@ -0,0 +1,181 @@
+# shims/pathops.py
+#
+# Minimal skia-pathops-compatible API backed by a JS module registered as "_pathops_js".
+# This is designed to satisfy picosvg's usage of pathops (Path, op, enums, iteration).
+#
+# IMPORTANT BEHAVIOR:
+# - skia-pathops simplify(fix_winding=True) forces fillType to WINDING.
+#   PathKit does not do that, so we emulate it here by explicitly setting fillType.
+
+from __future__ import annotations
+from dataclasses import dataclass
+from typing import Iterable, Iterator, List, Sequence, Tuple, Optional, Any
+
+try:
+    import _pathops_js  # provided via pyodide.registerJsModule(...)
+except Exception as e:
+    raise ImportError("Missing JS backend module _pathops_js") from e
+
+
+# ---- Exceptions ----
+class PathOpsError(RuntimeError):
+    pass
+
+
+# ---- Enums (values chosen to match our JS backend verb mapping) ----
+class PathVerb:
+    MOVE = 0
+    LINE = 1
+    QUAD = 2
+    CUBIC = 3
+    CLOSE = 4
+    CONIC = 5  # should not occur for picosvg after conversions
+
+
+class FillType:
+    WINDING = 0
+    EVEN_ODD = 1
+
+
+class PathOp:
+    UNION = 0
+    INTERSECTION = 1
+    DIFFERENCE = 2
+
+
+class LineCap:
+    BUTT_CAP = 0
+    ROUND_CAP = 1
+    SQUARE_CAP = 2
+
+
+class LineJoin:
+    MITER_JOIN = 0
+    ROUND_JOIN = 1
+    BEVEL_JOIN = 2
+
+
+Point = Tuple[float, float]
+SvgCmd = Tuple[str, Tuple[float, ...]]
+
+
+@dataclass
+class _Handle:
+    h: Any  # opaque handle owned by JS backend
+
+
+class Path:
+    def __init__(self, other: "Path" = None, *, fillType: int = FillType.WINDING):
+        if other is not None:
+            self._handle = _Handle(_pathops_js.clone_path(other._handle.h))
+        else:
+            self._handle = _Handle(_pathops_js.create_path(int(fillType)))
+
+    # ---- fillType property ----
+    @property
+    def fillType(self) -> int:
+        return int(_pathops_js.get_fill_type(self._handle.h))
+
+    @fillType.setter
+    def fillType(self, ft: int) -> None:
+        _pathops_js.set_fill_type(self._handle.h, int(ft))
+
+    # ---- drawing commands ----
+    def moveTo(self, x: float, y: float) -> None:
+        _pathops_js.move_to(self._handle.h, float(x), float(y))
+
+    def lineTo(self, x: float, y: float) -> None:
+        _pathops_js.line_to(self._handle.h, float(x), float(y))
+
+    def quadTo(self, x1: float, y1: float, x2: float, y2: float) -> None:
+        _pathops_js.quad_to(self._handle.h, float(x1), float(y1), float(x2), float(y2))
+
+    def cubicTo(self, x1: float, y1: float, x2: float, y2: float, x3: float, y3: float) -> None:
+        _pathops_js.cubic_to(self._handle.h, float(x1), float(y1), float(x2), float(y2), float(x3), float(y3))
+
+    def close(self) -> None:
+        _pathops_js.close(self._handle.h)
+
+    # ---- transforms ----
+    def transform(self, a: float, b: float, c: float, d: float, e: float, f: float) -> "Path":
+        out_h = _pathops_js.transform(self._handle.h, float(a), float(b), float(c), float(d), float(e), float(f))
+        out = Path.__new__(Path)
+        out._handle = _Handle(out_h)
+        return out
+
+    # ---- simplify / stroke ----
+    def simplify(self, fix_winding: bool = False) -> None:
+        ok = bool(_pathops_js.simplify(self._handle.h, bool(fix_winding)))
+        # In skia-pathops, simplify(fix_winding=True) forces WINDING fill type.
+        if fix_winding:
+            _pathops_js.set_fill_type(self._handle.h, int(FillType.WINDING))
+        if not ok:
+            # skia-pathops may throw PathOpsError; picosvg usually expects simplify to succeed
+            # but some paths can be tricky. We'll be conservative and not throw.
+            return
+
+    def stroke(
+        self,
+        stroke_width: float,
+        cap: int,
+        join: int,
+        miter_limit: float,
+        dash_array: Sequence[float] = (),
+        dash_offset: float = 0.0,
+    ) -> None:
+        out_h = _pathops_js.stroke(
+            self._handle.h,
+            float(stroke_width),
+            int(cap),
+            int(join),
+            float(miter_limit),
+            list(map(float, dash_array)) if dash_array else [],
+            float(dash_offset),
+        )
+        if out_h is None:
+            raise PathOpsError("stroke failed")
+        # Replace in-place (matches typical expectations)
+        self._handle = _Handle(out_h)
+
+    def convertConicsToQuads(self, tolerance: float = 0.25) -> None:
+        # PathKit roundtrip already avoids conics for our use cases
+        _pathops_js.convert_conics_to_quads(self._handle.h, float(tolerance))
+
+    # ---- geometry ----
+    @property
+    def bounds(self) -> Tuple[float, float, float, float]:
+        b = _pathops_js.bounds(self._handle.h)
+        return (float(b[0]), float(b[1]), float(b[2]), float(b[3]))
+
+    @property
+    def area(self) -> float:
+        return float(_pathops_js.area(self._handle.h))
+
+    # ---- iteration ----
+    def __iter__(self) -> Iterator[Tuple[int, List[Point]]]:
+        # JS backend returns list of [verbInt, [[x,y], ...]]
+        segs = _pathops_js.iter_segments(self._handle.h)
+        for verb, pts in segs:
+            out_pts: List[Point] = [(float(p[0]), float(p[1])) for p in pts]
+            yield int(verb), out_pts
+
+    # ---- cleanup ----
+    def __del__(self):
+        try:
+            _pathops_js.delete_path(self._handle.h)
+        except Exception:
+            pass
+
+
+def op(path1: Path, path2: Path, op: int, fix_winding: bool = False) -> Path:
+    out_h = _pathops_js.op(path1._handle.h, path2._handle.h, int(op))
+    if out_h is None:
+        raise PathOpsError("operation did not succeed")
+
+    out = Path.__new__(Path)
+    out._handle = _Handle(out_h)
+
+    if fix_winding:
+        _pathops_js.set_fill_type(out._handle.h, int(FillType.WINDING))
+
+    return out

package/src/core/svg/layers.ts

@@ -0,0 +1,66 @@
+import fsp from 'node:fs/promises';
+import path from 'node:path';
+
+function roundInt(n: number): number {
+  return Math.round(n);
+}
+
+export function computePlacement(opts: {
+  upm: number;
+  safeZone: number;
+  viewBox: [number, number, number, number];
+}) {
+  const [vx, vy, vw, vh] = opts.viewBox;
+
+  // Guard against invalid viewBox height from source svg
+  const safeVh = vh === 0 ? 1 : vh;
+
+  // ✅ Fit-to-height (same visual height for all glyphs)
+  const scale = opts.safeZone / safeVh;
+
+  const totalPadding = (opts.upm - opts.safeZone) / 2;
+
+  // Scaled dimensions in font units
+  const scaledW = vw * scale;
+  const scaledH = vh * scale; // ~= safeZone
+
+  // ✅ proportional advance width (includes same padding concept as vertical)
+  // This is the width of the glyph coordinate space we will emit in the layer SVG.
+  const adv = Math.max(1, roundInt(scaledW + totalPadding * 2));
+
+  // Center scaled content within (adv x upm)
+  // (when adv == scaledW + 2*padding, xOff is basically padding, with rounding compensation)
+  const xOff = (adv - scaledW) / 2;
+  const yOff = (opts.upm - scaledH) / 2; // ~= totalPadding
+
+  return { vx, vy, scale, xOff, yOff, adv };
+}
+
+export async function writeLayerSvg(opts: {
+  tempDir: string;
+  upm: number;
+  adv: number;
+  vx: number;
+  vy: number;
+  scale: number;
+  xOff: number;
+  yOff: number;
+  d: string;
+  codepoint: number;
+}): Promise<void> {
+  const hex = opts.codepoint.toString(16).padStart(4, '0');
+
+  const layerSvg = `
+    <svg viewBox="0 0 ${opts.adv} ${
+    opts.upm
+  }" xmlns="http://www.w3.org/2000/svg">
+      <rect width="${opts.adv}" height="${opts.upm}" fill="none" />
+      <g transform="translate(${opts.xOff}, ${opts.yOff}) scale(${
+    opts.scale
+  }) translate(${-opts.vx}, ${-opts.vy})">
+        <path d="${opts.d}" fill="black" />
+      </g>
+    </svg>`.trim();
+
+  await fsp.writeFile(path.join(opts.tempDir, `u${hex}.svg`), layerSvg, 'utf8');
+}

package/src/core/svg/svg_dom.ts

@@ -0,0 +1,99 @@
+import { JSDOM } from 'jsdom';
+import { parseColor } from '../../utils/parse';
+
+export type ParsedFlatSvg = {
+  viewBox: [number, number, number, number];
+  paths: Array<{ d: string; fill: string | null }>;
+};
+
+// if the fill is implicit, walk ancestors for the first explicit fill value
+function resolveInheritedFill(el: Element): string {
+  let current: Element | null = el.parentElement;
+  while (current !== null) {
+    const fill = current.getAttribute('fill');
+    if (fill !== null && fill !== 'inherit') return fill;
+    current = current.parentElement;
+  }
+  return 'black';
+}
+
+// bake opacity into the fill as an rgba(...)
+export function calculateOpColor(
+  fill: string | null,
+  opacity: number,
+  el: Element
+): `rgba(${number},${number},${number},${number})` {
+  const resolvedFill = fill ?? resolveInheritedFill(el);
+  const [r, g, b, a] = parseColor(resolvedFill);
+  const finalAlpha = +(a * opacity).toFixed(4);
+  return `rgba(${r},${g},${b},${finalAlpha})`;
+}
+
+export const parsePath = (p: Element): { d: string; fill: string | null } => {
+  const d = p.getAttribute('d') ?? '';
+
+  const op = p.getAttribute('opacity');
+  const fillOp = p.getAttribute('fill-opacity');
+  const fill = p.getAttribute('fill');
+
+  if (op !== null || fillOp !== null) {
+    const opVal = op !== null ? parseFloat(op) : 1;
+    const fillOpVal = fillOp !== null ? parseFloat(fillOp) : 1;
+    const combinedOpacity = opVal * fillOpVal;
+    return {
+      d,
+      fill: calculateOpColor(fill, combinedOpacity, p),
+    };
+  }
+
+  return {
+    d,
+    fill,
+  };
+};
+
+export function parseFlattenedSvg(flattenedSvg: string): ParsedFlatSvg {
+  const dom = new JSDOM(flattenedSvg);
+  const doc = dom.window.document;
+
+  const svgEl = doc.querySelector('svg');
+  const viewBoxRaw = svgEl
+    ?.getAttribute('viewBox')
+    ?.split(/\s+/)
+    .map(Number) ?? [0, 0, 100, 100];
+
+  const viewBox: [number, number, number, number] =
+    viewBoxRaw.length === 4 && viewBoxRaw.every((n) => Number.isFinite(n))
+      ? [viewBoxRaw[0]!, viewBoxRaw[1]!, viewBoxRaw[2]!, viewBoxRaw[3]!]
+      : [0, 0, 100, 100];
+
+  const pathEls = Array.from(doc.querySelectorAll('path'));
+
+  const paths = pathEls.map(parsePath).filter((p) => p.d.trim() !== '');
+
+  return { viewBox, paths };
+}
+
+export function shouldSkipPath(d: string, fill: string | null): boolean {
+  if (!d || d.trim() === '') return true;
+  const f = (fill ?? '').trim().toLowerCase();
+  return f === 'transparent' || f === 'none';
+}
+
+export type SvgValidation = { valid: true } | { valid: false; reason: string };
+
+export function validateSvg(content: string): SvgValidation {
+  if (/<mask[\s>]/i.test(content)) {
+    return { valid: false, reason: '<mask> is not supported yet' };
+  }
+  if (/<filter[\s>]/i.test(content)) {
+    return { valid: false, reason: '<filter> is not supported yet' };
+  }
+  return { valid: true };
+}
+
+// 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"');
+}