@pretty-chitty/core 1.1.1

package/src/library/utilities/OutlineGeometry.ts

@@ -0,0 +1,69 @@
+import { BufferGeometry, ExtrudeGeometry, Mesh, Shape } from "three";
+import { CSG } from "three-csg-ts";
+
+export function outlineGeometry(shape: Shape, height: number): BufferGeometry | ExtrudeGeometry {
+  // const extrudeSettings = {
+  //   depth: height, // Extrude by 2 units
+  //   bevelEnabled: false, // Disable bevel for simplicity
+  // };
+
+  const g = new ExtrudeGeometry(shape, { depth: height * 20, bevelEnabled: false });
+  g.scale(0.95, 0.95, 0.95);
+  const g2 = new ExtrudeGeometry(shape, { depth: height, bevelEnabled: false });
+  g2.scale(1.05, 1.05, 1.45);
+  const original = new Mesh(g);
+  const scaled = new Mesh(g2);
+
+  original.updateMatrix();
+  scaled.updateMatrix();
+  // scaled.scale(1.05, 1.05, 1.05);
+
+  const subRes = CSG.subtract(scaled, original);
+
+  subRes.geometry.translate(0, 0, -(subRes.geometry.boundingBox?.max.z ?? 0) / 2);
+  // return scaled.geometry;
+  return subRes.geometry;
+
+  // const stroke = extrude({ thickness: 0.05, cap: "square", join: "none", miterLimit: 10 });
+
+  // const m = stroke.build(vectors.map((v) => [v.x, v.y]));
+
+  // const vertexCount = m.positions.length;
+  // const topVertices = m.positions.map((p) => [p[0], p[1], height / 2]).flat();
+  // const bottomVertices = m.positions.map((p) => [p[0], p[1], -height / 2]).flat();
+
+  // const vertices = new Float32Array(topVertices.concat(bottomVertices));
+  // const top: number[][] = [];
+  // const bottom: number[][] = [];
+  // const sides: number[][] = [];
+  // const hasAddedTriangles = new Set<string>();
+
+  // const addSide = (a: number, b: number) => {
+  //   const key = `${a}_${b}`;
+  //   if (!hasAddedTriangles.has(key)) {
+  //     hasAddedTriangles.add(key);
+  //     sides.push([a + vertexCount, b, a]);
+  //     sides.push([a + vertexCount, b + vertexCount, b]);
+  //   }
+  // };
+
+  // m.cells.forEach((triangle) => {
+  //   const [a, b, c] = triangle;
+  //   top.push([c, b, a]);
+  //   bottom.push([a + vertexCount, b + vertexCount, c + vertexCount]); // add bottom triangle
+  //   addSide(a, b);
+  //   addSide(c, a);
+  //   addSide(c, b);
+  // });
+
+  // // const cells = new Uint16Array(triangles.flat());
+  // const geometry = new BufferGeometry();
+  // geometry.setAttribute("position", new BufferAttribute(vertices, 3));
+  // geometry.setIndex(new BufferAttribute(new Uint16Array([...top.flat(), ...bottom.flat(), ...sides.flat()]), 1));
+
+  // geometry.addGroup(0, top.length * 3, 0);
+  // geometry.addGroup(top.length * 3, bottom.length * 3, 1);
+  // geometry.addGroup(top.length * 6, 3 * sides.length, 2);
+  // geometry.computeVertexNormals();
+  // // geometry.computeTangents();
+}

package/src/library/utilities/ParameterizedCanvas.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from "react";
+
+import { IUpdatingCanvas } from "./IUpdatingCanvas";
+import { CanvasStack } from "./CanvasStack/CanvasStack";
+import { ObjectWithProps } from "./ObjectWithProps";
+import { NonEditable } from "./Annotations";
+import { unwrapCanvasNode } from "./CanvasStack/ReactCanvas";
+import { LayeredCanvasOperation } from "./CanvasStack/CanvasOperations";
+
+export abstract class ParameterizedCanvas extends ObjectWithProps {
+  // only remove items from the lru where there is no texture built on it.
+
+  /** @internal */
+  static lu: { [key: string]: IUpdatingCanvas } = {};
+
+  /** @internal */
+  static counter = 1;
+
+  @NonEditable width = 100;
+  @NonEditable height = 100;
+
+  private signature(): string {
+    const proto = Object.getPrototypeOf(this);
+    const constructor = proto.constructor;
+
+    // handle hot reloading - or the old class instance will be cached
+    if (!proto.counter) {
+      proto.counter = ++ParameterizedCanvas.counter;
+    }
+
+    const keySpace = constructor.name;
+    return `${keySpace}___${proto.counter}___${this.width}___${this.height}___${this.props
+      .map((prop) => {
+        const v = (this as any)[prop];
+        if (v instanceof Object) {
+          return JSON.stringify(v);
+        }
+        return v;
+      })
+      .join("___")}`;
+  }
+
+  get(): IUpdatingCanvas {
+    const signature = this.signature();
+    let result = ParameterizedCanvas.lu[signature];
+    if (!result) {
+      ParameterizedCanvas.resize();
+      result = ParameterizedCanvas.lu[signature] = (() => {
+        try {
+          const ops = this.render();
+          return new CanvasStack(this.width, this.height, unwrapCanvasNode(ops));
+        } catch (e) {
+          console.error(e);
+          return new CanvasStack(this.width, this.height, new LayeredCanvasOperation([]));
+        }
+      })();
+    }
+    return result;
+  }
+
+  private static resize() {
+    const entries = Object.entries(ParameterizedCanvas.lu);
+    if (entries.length % 10 === 0) {
+      entries.forEach(([sig, value]) => {
+        if (!value.hasBuiltTexture && value.createdAt < Date.now() - 5000) {
+          ParameterizedCanvas.lu[sig].dispose();
+          delete ParameterizedCanvas.lu[sig];
+        }
+      });
+    }
+  }
+
+  get material() {
+    return this.get().material;
+  }
+
+  protected abstract render(): ReactNode;
+}

package/src/library/utilities/RequestSharedAnimationFrame.ts

@@ -0,0 +1,16 @@
+let cbs:(()=>void)[] = [];
+let hasRequestedAnimationFrame = false;
+function frameCb() {
+  hasRequestedAnimationFrame = false;
+  const oldCbs = cbs;
+  cbs = [];
+  oldCbs.forEach(cb => cb());
+}
+
+export function requestSharedAnimationFrame(cb:()=>void) {
+  cbs.push(cb);
+  if (!hasRequestedAnimationFrame) {
+    hasRequestedAnimationFrame = true;
+    requestAnimationFrame(frameCb);
+  }
+}

package/src/library/utilities/StaticImage.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { ParameterizedCanvas } from "./ParameterizedCanvas";
+import { Color, Image, Layered } from "./CanvasStack/ReactCanvas";
+import { RepeatWrapping } from "three";
+import { ImageSpec } from "./CanvasStack/CanvasOperations";
+
+export type StaticImageOptions = {
+  rx?: number;
+  ry?: number;
+  overlayColor?: string;
+  backgroundColor?: string;
+};
+
+export class StaticImage extends ParameterizedCanvas {
+  protected imageInfo: string;
+
+  constructor(
+    private image: ImageSpec,
+    private overlayColor?: string,
+    private backgroundColor?: string,
+  ) {
+    super();
+    this.width = this.image.primary.bounds.width;
+    this.height = this.image.primary.bounds.height;
+    this.imageInfo = JSON.stringify(this.image);
+  }
+
+  protected render() {
+    const imageNode = <Image image={this.image} fill overlayColor={this.overlayColor} />;
+
+    if (this.backgroundColor) {
+      return (
+        <Layered>
+          <Color hex={this.backgroundColor} />
+          {imageNode}
+        </Layered>
+      );
+    }
+    return imageNode;
+  }
+
+  static material(image: ImageSpec, options?: StaticImageOptions) {
+    const result = new StaticImage(image, options?.overlayColor, options?.backgroundColor);
+    return result.get().material;
+  }
+
+  static texture(image: ImageSpec, options?: StaticImageOptions) {
+    const result = new StaticImage(image, options?.overlayColor, options?.backgroundColor);
+    const texture = result.get().texture;
+    if (options) {
+      texture.repeat.x = options.rx ?? 1;
+      texture.repeat.y = options.ry ?? 1;
+      texture.wrapS = RepeatWrapping;
+      texture.wrapT = RepeatWrapping;
+    }
+    return texture;
+  }
+}

package/src/library/utilities/SvgExtruder.ts

@@ -0,0 +1,330 @@
+import {
+  BufferGeometry,
+  BufferAttribute,
+  Vector2,
+  Path,
+  ShapePath,
+  ExtrudeGeometryOptions,
+  ExtrudeGeometry,
+} from "three";
+import { SVGLoader } from "three/examples/jsm/loaders/SVGLoader.js";
+import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js";
+import QuickLRU from "quick-lru";
+
+export interface ExtrudeFromSVGOptions {
+  depth?: number;
+  curveSegments?: number;
+  bevelEnabled?: boolean;
+  bevelThickness?: number;
+  bevelSize?: number;
+  bevelOffset?: number;
+  bevelSegments?: number;
+  scale?: number;
+  center?: boolean;
+  zUp?: boolean;
+  filledPathsOnly?: boolean;
+
+  /** Pre-extrude SVG simplification tolerance (in SVG units). 0 disables. */
+  svgSimplifyTolerance?: number;
+  /** Subdivision per curve before simplifying (baseline polyline density). */
+  svgCurveDivisionsPreSimplify?: number;
+}
+
+/** --- NEW: module-level LRU cache (stores BufferGeometry) --- */
+const geomCache = new QuickLRU<string, BufferGeometry>({ maxSize: 100 });
+
+/** Stable stringify limited to our known option keys (order-insensitive). */
+function stableOptionsKey(
+  opts: Required<
+    Pick<
+      ExtrudeFromSVGOptions,
+      | "depth"
+      | "curveSegments"
+      | "bevelEnabled"
+      | "bevelThickness"
+      | "bevelSize"
+      | "bevelOffset"
+      | "bevelSegments"
+      | "scale"
+      | "center"
+      | "zUp"
+      | "filledPathsOnly"
+      | "svgSimplifyTolerance"
+      | "svgCurveDivisionsPreSimplify"
+    >
+  >,
+): string {
+  const entries = Object.entries(opts).sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
+  return entries.map(([k, v]) => `${k}:${typeof v === "number" ? v : v ? 1 : 0}`).join("|");
+}
+
+/** Tiny non-crypto hash for cache keys (djb2). */
+function hashString(s: string): string {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) + h) ^ s.charCodeAt(i);
+  // force uint32 and base36 to keep key short
+  return (h >>> 0).toString(36);
+}
+
+export function extrudeSVGToGeometry(
+  svgString: string,
+  {
+    depth = 2,
+    curveSegments = 24,
+    bevelEnabled = false,
+    bevelThickness = 0.2,
+    bevelSize = 0.1,
+    bevelOffset = 0,
+    bevelSegments = 2,
+    scale = 0.01,
+    center = true,
+    zUp = false,
+    filledPathsOnly = true,
+    svgSimplifyTolerance = 0,
+    svgCurveDivisionsPreSimplify = 24,
+  }: ExtrudeFromSVGOptions = {},
+): BufferGeometry {
+  // --- helpers ---
+  const decodeSvgDataUrl = (input: string): string => {
+    if (!input.startsWith("data:")) return input;
+    const firstComma = input.indexOf(",");
+    if (firstComma === -1) throw new Error("Invalid data URL");
+    const meta = input.slice(5, firstComma);
+    const data = input.slice(firstComma + 1);
+    const isBase64 = /;base64/i.test(meta);
+    if (isBase64) {
+      try {
+        return new TextDecoder().decode(Uint8Array.from(atob(data), (c) => c.charCodeAt(0)));
+      } catch {
+        return Buffer.from(data, "base64").toString("utf-8");
+      }
+    }
+    return decodeURIComponent(data);
+  };
+
+  const applyPlanarUV_XY = (geometry: BufferGeometry): void => {
+    geometry.computeBoundingBox();
+    const bb = geometry.boundingBox!;
+    const sx = bb.max.x - bb.min.x;
+    const sy = bb.max.y - bb.min.y;
+    const pos = geometry.getAttribute("position") as BufferAttribute;
+    const uv = new Float32Array(pos.count * 2);
+    for (let i = 0; i < pos.count; i++) {
+      const x = pos.getX(i),
+        y = pos.getY(i);
+      uv[2 * i + 0] = sx > 1e-9 ? (x - bb.min.x) / sx : 0;
+      uv[2 * i + 1] = sy > 1e-9 ? (y - bb.min.y) / sy : 0;
+    }
+    geometry.setAttribute("uv", new BufferAttribute(uv, 2));
+    geometry.attributes.uv.needsUpdate = true;
+  };
+
+  const tagGroupsFrontBackSides_Z = (geometry: BufferGeometry, eps = 1e-9): void => {
+    const pos = geometry.getAttribute("position") as BufferAttribute;
+    const index = geometry.getIndex();
+    geometry.clearGroups();
+    const readZ = (vi: number) => pos.getZ(vi);
+
+    if (index) {
+      for (let i = 0; i < index.count; i += 3) {
+        const a = index.getX(i),
+          b = index.getX(i + 1),
+          c = index.getX(i + 2);
+        const za = readZ(a),
+          zb = readZ(b),
+          zc = readZ(c);
+        const zMin = Math.min(za, zb, zc);
+        const zMax = Math.max(za, zb, zc);
+        let matIndex: number;
+        if (Math.abs(zMax - zMin) <= eps) {
+          const zAvg = (za + zb + zc) / 3;
+          matIndex = zAvg >= 0 ? 0 : 1; // 0 front, 1 back
+        } else {
+          matIndex = 2; // sides
+        }
+        geometry.addGroup(i, 3, matIndex);
+      }
+    } else {
+      for (let i = 0; i < pos.count; i += 3) {
+        const za = readZ(i),
+          zb = readZ(i + 1),
+          zc = readZ(i + 2);
+        const zMin = Math.min(za, zb, zc);
+        const zMax = Math.max(za, zb, zc);
+        let matIndex: number;
+        if (Math.abs(zMax - zMin) <= eps) {
+          const zAvg = (za + zb + zc) / 3;
+          matIndex = zAvg >= 0 ? 0 : 1;
+        } else {
+          matIndex = 2;
+        }
+        geometry.addGroup(i, 3, matIndex);
+      }
+    }
+    (geometry as any).groupsNeedUpdate = true;
+  };
+
+  // --- SVG pre-simplification utilities (RDP) ---
+  const rdp = (pts: Vector2[], eps: number): Vector2[] => {
+    if (pts.length <= 2) return pts.slice();
+    const dist = (p: Vector2, a: Vector2, b: Vector2) => {
+      const abx = b.x - a.x,
+        aby = b.y - a.y;
+      const apx = p.x - a.x,
+        apy = p.y - a.y;
+      const t = Math.max(0, Math.min(1, (apx * abx + apy * aby) / (abx * abx + aby * aby || 1)));
+      const qx = a.x + t * abx,
+        qy = a.y + t * aby;
+      return Math.hypot(p.x - qx, p.y - qy);
+    };
+    let maxD = -1,
+      idx = -1;
+    const a = pts[0],
+      b = pts[pts.length - 1];
+    for (let i = 1; i < pts.length - 1; i++) {
+      const d = dist(pts[i], a, b);
+      if (d > maxD) {
+        maxD = d;
+        idx = i;
+      }
+    }
+    if (maxD > eps) {
+      const left = rdp(pts.slice(0, idx + 1), eps);
+      const right = rdp(pts.slice(idx), eps);
+      return left.slice(0, -1).concat(right);
+    } else {
+      return [a, b];
+    }
+  };
+
+  const pathIsClosed = (p: Path, tol = 1e-6): boolean => {
+    const pts = p.getPoints(1);
+    if (pts.length < 2) return false;
+    const first = pts[0],
+      last = pts[pts.length - 1];
+    return Math.hypot(first.x - last.x, first.y - last.y) <= tol;
+  };
+
+  const simplifyShapePath = (sp: ShapePath, eps: number, divisionsPerCurve: number): ShapePath => {
+    const out = new ShapePath();
+    (out as any).color = (sp as any).color;
+    (out as any).userData = (sp as any).userData;
+
+    for (const sub of sp.subPaths) {
+      const divisions = Math.max(1, divisionsPerCurve);
+      const dense = sub.getPoints(divisions * Math.max(1, sub.curves.length));
+      if (dense.length < 2) continue;
+
+      const closed = pathIsClosed(sub);
+      let pts = dense;
+
+      if (closed) {
+        const first = dense[0],
+          last = dense[dense.length - 1];
+        if (first.distanceToSquared(last) > 1e-12) pts = dense.concat([dense[0].clone()]);
+      }
+      let simp = rdp(pts, eps);
+
+      if (closed) {
+        if (simp.length > 1 && simp[0].distanceToSquared(simp[simp.length - 1]) < 1e-12) {
+          simp = simp.slice(0, -1);
+        }
+        if (simp.length < 3) continue;
+      } else if (simp.length < 2) {
+        continue;
+      }
+
+      const np = new Path();
+      np.moveTo(simp[0].x, simp[0].y);
+      for (let i = 1; i < simp.length; i++) np.lineTo(simp[i].x, simp[i].y);
+      np.autoClose = closed;
+      out.subPaths.push(np);
+    }
+    return out;
+  };
+
+  // --- decode (so equivalent data-URLs normalize to same cache key) ---
+  const decodedSvg = decodeSvgDataUrl(svgString);
+
+  // --- NEW: build a cache key from decoded SVG + normalized options ---
+  const keyOptions = stableOptionsKey({
+    depth,
+    curveSegments,
+    bevelEnabled,
+    bevelThickness,
+    bevelSize,
+    bevelOffset,
+    bevelSegments,
+    scale,
+    center,
+    zUp,
+    filledPathsOnly,
+    svgSimplifyTolerance,
+    svgCurveDivisionsPreSimplify,
+  });
+  const cacheKey = `v1|${hashString(decodedSvg)}|${keyOptions}`;
+
+  // --- NEW: fast path from cache (return a clone to keep callers isolated) ---
+  const cached = geomCache.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
+
+  // --- parse + (optional) pre-simplify SVG paths ---
+  const loader = new SVGLoader();
+  const data = loader.parse(decodedSvg);
+
+  const extrudeSettings: ExtrudeGeometryOptions = {
+    depth,
+    bevelEnabled,
+    bevelThickness,
+    bevelSize,
+    bevelOffset,
+    bevelSegments,
+    curveSegments,
+  };
+
+  const parts: BufferGeometry[] = [];
+
+  for (const path of data.paths) {
+    const style = path.userData?.style ?? {};
+    const hasFill = style.fill !== undefined && style.fill !== null && style.fill !== "none";
+    if (!filledPathsOnly || hasFill) {
+      const pathForShapes =
+        svgSimplifyTolerance > 0 ? simplifyShapePath(path, svgSimplifyTolerance, svgCurveDivisionsPreSimplify) : path;
+
+      const shapes = SVGLoader.createShapes(pathForShapes);
+
+      for (const shape of shapes) {
+        const g = new ExtrudeGeometry(shape, extrudeSettings);
+        g.scale(scale, scale, scale);
+        g.rotateX(Math.PI); // fix SVG Y-down; local Z is thickness axis
+        parts.push(g);
+      }
+    }
+  }
+
+  if (parts.length === 0) {
+    throw new Error("No shapes to extrude. Ensure your SVG has filled paths (or set filledPathsOnly=false).");
+  }
+
+  const geometry = mergeGeometries(parts, true);
+
+  if (center) {
+    geometry.computeBoundingBox();
+    const bb = geometry.boundingBox!;
+    geometry.translate(-(bb.min.x + bb.max.x) / 2, -(bb.min.y + bb.max.y) / 2, -(bb.min.z + bb.max.z) / 2);
+  }
+
+  geometry.computeVertexNormals();
+  tagGroupsFrontBackSides_Z(geometry);
+  applyPlanarUV_XY(geometry);
+  if (zUp) geometry.rotateX(Math.PI / 2);
+
+  console.log("Triangle count:", geometry.index ? geometry.index.count / 3 : geometry.attributes.position.count / 3);
+
+  // --- NEW: store in cache (store a clone to protect cache entry) ---
+  geomCache.set(cacheKey, geometry);
+
+  return geometry;
+}

package/src/library/utilities/ThreeDisposer.ts

@@ -0,0 +1,66 @@
+type References<V> = {
+  uuid: string;
+  inUse: boolean;
+  unusedSince: number;
+  ref: V;
+};
+
+export class ThreeDisposer<V> {
+  constructor(private cleanup: (v: V) => void) {}
+
+  private references: { [uuid: string]: References<V> } = {};
+  private changeCallback?: () => void;
+
+  public notifyChange(_uuid: string) {
+    if (this.changeCallback) {
+      this.changeCallback();
+    }
+  }
+
+  public register(uuid: string, ref: V) {
+    this.references[uuid] = {
+      uuid,
+      inUse: false,
+      unusedSince: Date.now(),
+      ref,
+    };
+  }
+
+  public markUsedMap(uuidMap: Map<string, V>, cb: () => void) {
+    uuidMap.forEach((ref, uuid) => {
+      if (!this.references[uuid]) {
+        this.register(uuid, ref);
+      }
+    });
+    this.markUsed(new Set(uuidMap.keys()), cb);
+  }
+
+  public markUsed(uuids: Set<string>, cb: () => void) {
+    const now = Date.now();
+    this.changeCallback = cb;
+
+    // Mark all references as unused first
+    Object.values(this.references).forEach((ref) => {
+      if (ref.inUse) {
+        ref.inUse = false;
+        ref.unusedSince = now;
+      }
+    });
+
+    // Mark currently used references as used
+    uuids.forEach((uuid) => {
+      const ref = this.references[uuid];
+      if (ref) {
+        ref.inUse = true;
+      }
+    });
+
+    // Clean up unused references after 5 seconds
+    Object.values(this.references).forEach((ref) => {
+      if (!ref.inUse && ref.unusedSince < now - 5000) {
+        this.cleanup(ref.ref);
+        delete this.references[ref.uuid];
+      }
+    });
+  }
+}

package/src/library/utilities/zIndex.ts

@@ -0,0 +1,15 @@
+export const ZINDEX_GALLERY_INVISIBLE = -1;
+export const ZINDEX_BOTTOM_BAR_BUTTON_LONG_CLICK = 1;
+export const ZINDEX_BOTTOM_BAR_BUTTON_LABEL = 2;
+export const ZINDEX_PROMPT_CONTROLS = 3;
+export const ZINDEX_SPARKS = 10;
+export const ZINDEX_PANEL_CUTOUTS = 11;
+
+export const ZINDEX_PINCH_OUT = 50;
+export const ZINDEX_PINCH_OUT_FOCUSED = 51;
+
+export const ZINDEX_CONTEXT_GALLERY_DISPLAY = 140;
+export const ZINDEX_MATCH_END_DISPLAY = 150;
+export const ZINDEX_GALLERY_VISIBLE = 160;
+export const ZINDEX_TOP_BAR_HEADER = 210;
+export const ZINDEX_TOP_BAR_BODY = 200;