@pretty-chitty/core 1.1.1 → 1.2.0

package/src/library/utilities/GlbLoader.ts

@@ -0,0 +1,292 @@
+import {
+  BufferGeometry,
+  BufferAttribute,
+  Group,
+  Mesh,
+  MeshStandardMaterial,
+  Matrix4,
+  Color,
+} from "three";
+import QuickLRU from "quick-lru";
+
+// ── glTF JSON types (subset we care about) ──────────────────────────────
+
+interface GltfJson {
+  scene?: number;
+  scenes?: Array<{ nodes?: number[] }>;
+  nodes?: Array<{
+    mesh?: number;
+    children?: number[];
+    name?: string;
+    translation?: [number, number, number];
+    rotation?: [number, number, number, number];
+    scale?: [number, number, number];
+    matrix?: number[];
+  }>;
+  meshes?: Array<{
+    name?: string;
+    primitives: Array<{
+      attributes: Record<string, number>;
+      indices?: number;
+      material?: number;
+    }>;
+  }>;
+  accessors?: Array<{
+    bufferView?: number;
+    byteOffset?: number;
+    componentType: number;
+    count: number;
+    type: string;
+  }>;
+  bufferViews?: Array<{
+    buffer: number;
+    byteOffset?: number;
+    byteLength: number;
+    byteStride?: number;
+  }>;
+  materials?: Array<{
+    name?: string;
+    doubleSided?: boolean;
+    pbrMetallicRoughness?: {
+      baseColorFactor?: [number, number, number, number];
+      metallicFactor?: number;
+      roughnessFactor?: number;
+    };
+  }>;
+}
+
+// ── Constants ───────────────────────────────────────────────────────────
+
+const COMPONENT_TYPES: Record<number, { ctor: new (buffer: ArrayBuffer, byteOffset: number, length: number) => ArrayLike<number>; bytes: number }> = {
+  5120: { ctor: Int8Array, bytes: 1 },
+  5121: { ctor: Uint8Array, bytes: 1 },
+  5122: { ctor: Int16Array, bytes: 2 },
+  5123: { ctor: Uint16Array, bytes: 2 },
+  5125: { ctor: Uint32Array, bytes: 4 },
+  5126: { ctor: Float32Array, bytes: 4 },
+};
+
+const TYPE_SIZES: Record<string, number> = {
+  SCALAR: 1, VEC2: 2, VEC3: 3, VEC4: 4, MAT2: 4, MAT3: 9, MAT4: 16,
+};
+
+// ── Module-level caches ─────────────────────────────────────────────────
+
+const groupCache = new QuickLRU<string, Group>({ maxSize: 50 });
+
+// ── Helpers ─────────────────────────────────────────────────────────────
+
+function hashString(s: string): string {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) + h) ^ s.charCodeAt(i);
+  return (h >>> 0).toString(36);
+}
+
+function decodeToArrayBuffer(dataUrl: string): ArrayBuffer {
+  const commaIndex = dataUrl.indexOf(",");
+  const base64 = commaIndex !== -1 ? dataUrl.slice(commaIndex + 1) : dataUrl;
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return bytes.buffer;
+}
+
+// ── GLB container parser ────────────────────────────────────────────────
+
+function parseGLBContainer(buffer: ArrayBuffer): { json: GltfJson; bin: ArrayBuffer } {
+  const view = new DataView(buffer);
+  const magic = view.getUint32(0, true);
+  if (magic !== 0x46546C67) throw new Error("Not a valid GLB file");
+  const version = view.getUint32(4, true);
+  if (version !== 2) throw new Error(`Unsupported glTF version: ${version}`);
+
+  let offset = 12;
+  let json: GltfJson | undefined;
+  let bin: ArrayBuffer | undefined;
+
+  while (offset < buffer.byteLength) {
+    const chunkLength = view.getUint32(offset, true);
+    const chunkType = view.getUint32(offset + 4, true);
+    const chunkData = buffer.slice(offset + 8, offset + 8 + chunkLength);
+    if (chunkType === 0x4E4F534A) {
+      json = JSON.parse(new TextDecoder().decode(chunkData));
+    } else if (chunkType === 0x004E4942) {
+      bin = chunkData;
+    }
+    offset += 8 + chunkLength;
+  }
+
+  if (!json) throw new Error("GLB missing JSON chunk");
+  return { json, bin: bin ?? new ArrayBuffer(0) };
+}
+
+// ── Accessor → TypedArray ───────────────────────────────────────────────
+
+function readAccessor(json: GltfJson, bin: ArrayBuffer, idx: number): { array: ArrayLike<number>; itemSize: number } {
+  const acc = json.accessors![idx];
+  const bv = json.bufferViews![acc.bufferView ?? 0];
+  const info = COMPONENT_TYPES[acc.componentType];
+  if (!info) throw new Error(`Unsupported accessor componentType ${acc.componentType}`);
+
+  const itemSize = TYPE_SIZES[acc.type];
+  const byteOffset = (bv.byteOffset ?? 0) + (acc.byteOffset ?? 0);
+  const totalElements = acc.count * itemSize;
+
+  // Non-interleaved (or tightly packed): direct view
+  if (!bv.byteStride || bv.byteStride === itemSize * info.bytes) {
+    return { array: new info.ctor(bin, byteOffset, totalElements), itemSize };
+  }
+
+  // Interleaved: de-stride into a contiguous array
+  const out = new Float32Array(totalElements);
+  const stride = bv.byteStride;
+  const srcView = new DataView(bin);
+  for (let i = 0; i < acc.count; i++) {
+    const base = byteOffset + i * stride;
+    for (let c = 0; c < itemSize; c++) {
+      out[i * itemSize + c] = srcView.getFloat32(base + c * info.bytes, true);
+    }
+  }
+  return { array: out, itemSize };
+}
+
+// ── Build Three.js objects ──────────────────────────────────────────────
+
+type GltfPrimitive = NonNullable<GltfJson["meshes"]>[0]["primitives"][0];
+
+function buildGeometry(json: GltfJson, bin: ArrayBuffer, prim: GltfPrimitive): BufferGeometry {
+  const geom = new BufferGeometry();
+
+  const ATTR_MAP: Record<string, string> = {
+    POSITION: "position",
+    NORMAL: "normal",
+    TEXCOORD_0: "uv",
+    TEXCOORD_1: "uv2",
+    COLOR_0: "color",
+    TANGENT: "tangent",
+  };
+
+  for (const [gltfName, accIdx] of Object.entries(prim.attributes)) {
+    const threeAttr = ATTR_MAP[gltfName];
+    if (!threeAttr) continue;
+    const { array, itemSize } = readAccessor(json, bin, accIdx as number);
+    geom.setAttribute(threeAttr, new BufferAttribute(new Float32Array(array as ArrayLike<number>), itemSize));
+  }
+
+  if (prim.indices !== undefined) {
+    const { array } = readAccessor(json, bin, prim.indices);
+    geom.setIndex(new BufferAttribute(
+      array instanceof Uint32Array ? array : new Uint32Array(array as ArrayLike<number>),
+      1,
+    ));
+  }
+
+  if (!geom.getAttribute("normal")) {
+    geom.computeVertexNormals();
+  }
+
+  return geom;
+}
+
+function buildMaterial(json: GltfJson, matIdx: number | undefined): MeshStandardMaterial {
+  const mat = new MeshStandardMaterial();
+  if (matIdx === undefined || !json.materials?.[matIdx]) return mat;
+
+  const def = json.materials[matIdx];
+  const pbr = def.pbrMetallicRoughness;
+  if (pbr) {
+    if (pbr.baseColorFactor) {
+      mat.color = new Color(pbr.baseColorFactor[0], pbr.baseColorFactor[1], pbr.baseColorFactor[2]);
+      mat.opacity = pbr.baseColorFactor[3];
+      if (mat.opacity < 1) mat.transparent = true;
+    }
+    if (pbr.metallicFactor !== undefined) mat.metalness = pbr.metallicFactor;
+    if (pbr.roughnessFactor !== undefined) mat.roughness = pbr.roughnessFactor;
+  }
+  if (def.doubleSided) mat.side = 2; // DoubleSide
+
+  return mat;
+}
+
+function buildNode(json: GltfJson, bin: ArrayBuffer, nodeIdx: number): Group | Mesh {
+  const nodeDef = json.nodes![nodeIdx];
+  const group = new Group();
+  if (nodeDef.name) group.name = nodeDef.name;
+
+  // Apply transform
+  if (nodeDef.matrix) {
+    const m = new Matrix4();
+    m.fromArray(nodeDef.matrix);
+    m.decompose(group.position, group.quaternion, group.scale);
+  } else {
+    if (nodeDef.translation) group.position.fromArray(nodeDef.translation);
+    if (nodeDef.rotation) group.quaternion.set(nodeDef.rotation[0], nodeDef.rotation[1], nodeDef.rotation[2], nodeDef.rotation[3]);
+    if (nodeDef.scale) group.scale.fromArray(nodeDef.scale);
+  }
+
+  // Attach mesh primitives
+  if (nodeDef.mesh !== undefined && json.meshes) {
+    const meshDef = json.meshes[nodeDef.mesh];
+    for (const prim of meshDef.primitives) {
+      const geom = buildGeometry(json, bin, prim);
+      const mat = buildMaterial(json, prim.material);
+      const mesh = new Mesh(geom, mat);
+      if (meshDef.name) mesh.name = meshDef.name;
+      group.add(mesh);
+    }
+  }
+
+  // Recurse children
+  if (nodeDef.children) {
+    for (const childIdx of nodeDef.children) {
+      group.add(buildNode(json, bin, childIdx));
+    }
+  }
+
+  return group;
+}
+
+function buildScene(json: GltfJson, bin: ArrayBuffer): Group {
+  const root = new Group();
+  const sceneDef = json.scenes?.[json.scene ?? 0];
+  if (sceneDef?.nodes) {
+    for (const nodeIdx of sceneDef.nodes) {
+      root.add(buildNode(json, bin, nodeIdx));
+    }
+  }
+  return root;
+}
+
+// ── Public API ──────────────────────────────────────────────────────────
+
+/**
+ * Synchronously load a GLB file (provided as a base64 data-URL from webpack
+ * asset/inline) and return a cloned scene Group.
+ *
+ * Parses the GLB binary directly (no async GLTFLoader). The parsed scene is
+ * memoized — subsequent calls return `.clone()`, giving each caller an
+ * independent object hierarchy while sharing BufferGeometry and Material data.
+ */
+export function loadGLB(
+  glbData: string,
+  { scale = 1, castShadow = false, receiveShadow = false }: { scale?: number; castShadow?: boolean; receiveShadow?: boolean } = {},
+): Group {
+  const key = `${hashString(glbData)}|s:${scale}|cs:${castShadow ? 1 : 0}|rs:${receiveShadow ? 1 : 0}`;
+
+  let cached = groupCache.get(key);
+  if (!cached) {
+    const buffer = decodeToArrayBuffer(glbData);
+    const { json, bin } = parseGLBContainer(buffer);
+    cached = buildScene(json, bin);
+    cached.traverse((obj) => {
+      if ((obj as Mesh).isMesh) {
+        if (scale !== 1) (obj as Mesh).geometry.scale(scale, scale, scale);
+        obj.castShadow = castShadow;
+        obj.receiveShadow = receiveShadow;
+      }
+    });
+    groupCache.set(key, cached);
+  }
+
+  return cached.clone();
+}

package/src/library/utilities/LayoutHelper.ts

@@ -161,7 +161,10 @@ function buildValidTree(tree: LayoutNode, width: number, height: number): Concre
   }
 
   // Step 3: Scan ENTIRE tree for the container with smallest collapseOrder
-  const toCollapse = findSmallestCollapseOrder(concreteTree);
+  let toCollapse = findSmallestCollapseOrder(concreteTree);
+  if (!toCollapse) {
+    toCollapse = findSmallestCollapseOrderIgnoringConstraints(concreteTree);
+  }
 
   if (!toCollapse) {
     return concreteTree;
@@ -345,7 +348,7 @@ function findSmallestCollapseOrder(node: ConcreteLayoutNode): ContainerNode | nu
   }
 
   const container = node as ConcreteContainerNode;
-  let smallest: ContainerNode | null = container.collapseOrder !== undefined ? container : null;
+  let smallest: ContainerNode | null = null;
 
   for (const split of container.splits) {
     const childSmallest = findSmallestCollapseOrder(split);
@@ -362,6 +365,29 @@ function findSmallestCollapseOrder(node: ConcreteLayoutNode): ContainerNode | nu
   return smallest;
 }
 
+function findSmallestCollapseOrderIgnoringConstraints(node: ConcreteLayoutNode): ContainerNode | null {
+  if (isPanelNode(node) || isCollapsedNode(node)) {
+    return null;
+  }
+
+  const container = node as ConcreteContainerNode;
+  let smallest: ContainerNode | null = node.collapseOrder !== undefined ? container : null;
+
+  for (const split of container.splits) {
+    const childSmallest = findSmallestCollapseOrderIgnoringConstraints(split);
+    if (childSmallest) {
+      const childOrder = childSmallest.collapseOrder ?? Number.MAX_SAFE_INTEGER;
+      const currentOrder = smallest?.collapseOrder ?? Number.MAX_SAFE_INTEGER;
+
+      if (childOrder < currentOrder) {
+        smallest = childSmallest;
+      }
+    }
+  }
+
+  return smallest;
+}
+
 /**
  * Flattens a valid ConcreteLayoutNode tree into PanelLayoutResult[]
  */

package/src/library/utilities/ObjectWithProps.ts

@@ -1,13 +1,37 @@
 import "reflect-metadata";
-import nextTick from "next-tick";
 import { checkAnnotation, NonEditable } from "./Annotations";
 
 const CATCH_ALL = "[[null]]";
 export class ObjectWithProps {
+  /** @internal */
+  @NonEditable private _propsArray: string[] = [];
+  /** @internal */
+  @NonEditable private _propsSet = new Set<string>();
+
   /** @internal */
   public get props(): string[] {
-    return Object.keys(this).filter((key) => !checkAnnotation(this, key, NonEditable));
+    const props = Object.keys(this).filter((key) => !checkAnnotation(this, key, NonEditable));
+    props.forEach((key) => {
+      if (!this._propsSet.has(key)) {
+        this._propsSet.add(key);
+        this._propsArray.push(key);
+      }
+    });
+    return this._propsArray;
   }
+
+  /** @internal */
+  public expandedPropsFromJson(json: { [key: string]: unknown }): string[] {
+    this.props; // make sure this runs.
+    for (const key of Object.keys(json)) {
+      if (!this._propsSet!.has(key) && !checkAnnotation(this, key, NonEditable)) {
+        this._propsSet!.add(key);
+        this._propsArray!.push(key);
+      }
+    }
+    return this._propsArray;
+  }
+
   /** @internal */
   @NonEditable private _cbs: { [key: string]: Array<() => void> } = {};
 
@@ -22,7 +46,7 @@ export class ObjectWithProps {
   /** @internal */
   public notifyChange(key: string): void {
     if (this._keysThatChanged.size === 0) {
-      nextTick(() => {
+      queueMicrotask(() => {
         this._keysThatChanged.forEach((key) => this._cbs[key]?.forEach((cb) => cb()));
         this._cbs[CATCH_ALL]?.forEach((cb) => cb());
         this._keysThatChanged.clear();

package/dist/components/GalleryDisplay.d.ts

@@ -1,2 +0,0 @@
-export declare function GalleryDisplay(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=GalleryDisplay.d.ts.map

package/dist/components/GalleryDisplay.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GalleryDisplay.d.ts","sourceRoot":"","sources":["../../src/library/components/GalleryDisplay.tsx"],"names":[],"mappings":"AAYA,wBAAgB,cAAc,4CA4C7B"}

package/dist/components/GalleryDisplay.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState, useRef } from "react";
-import { Box } from "@mui/material";
-import { useEventChannelState } from "../hooks/useEventChannelState";
-import { useModalState } from "../hooks/useModalState";
-import { GalleryViewer } from "./GalleryViewer";
-import useSize from "@react-hook/size";
-import { useAnimationSpeedMultiplier } from "../hooks/useTimeController";
-import { useGameTheme } from "../hooks/useGameTheme";
-import { GameModalBackdrop } from "./GameModalBackdrop";
-const DELAY = 300;
-export function GalleryDisplay() {
-    const theme = useGameTheme();
-    const animationSpeedMultiplier = useAnimationSpeedMultiplier();
-    const ref = useRef(null);
-    const [width, height] = useSize(ref);
-    const modalState = useModalState();
-    const [items, setItems] = useState(undefined);
-    const [source, setSource] = useEventChannelState(modalState.gallerySource);
-    const hasItems = items && items?.length > 0;
-    useEffect(() => {
-        if (source) {
-            setItems(source.items);
-            const unSub = source.registerUpdateHandler(() => {
-                setItems(source.items);
-            });
-            return () => {
-                source.close();
-                unSub();
-            };
-        }
-        else {
-            setItems(undefined);
-        }
-    }, [source, setItems]);
-    return (
-    // This has to be outside of the modal backdrop so we can get the size correctly
-    _jsx(Box, { ref: ref, sx: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: _jsx(GameModalBackdrop, { visible: !!hasItems, children: _jsx(GalleryViewer, { onClose: () => {
-                    setSource(undefined);
-                }, items: items ?? [], tweenDuration: DELAY * animationSpeedMultiplier * 0.8, galleryItemWidth: theme.galleryItemWidth, galleryItemHeight: theme.galleryItemHeight, itemSpacing: theme.galleryItemSpacing, w: width, h: height }) }) }));
-}
-//# sourceMappingURL=GalleryDisplay.js.map

package/dist/components/GalleryDisplay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GalleryDisplay.js","sourceRoot":"","sources":["../../src/library/components/GalleryDisplay.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAe,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,OAAO,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,KAAK,GAAG,GAAG,CAAC;AAElB,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAG,YAAY,EAAE,CAAC;IAC7B,MAAM,wBAAwB,GAAG,2BAA2B,EAAE,CAAC;IAC/D,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACzB,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;IACrC,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA4B,SAAS,CAAC,CAAC;IACzE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,oBAAoB,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,KAAK,IAAI,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACvB,MAAM,KAAK,GAAG,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;gBAC9C,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACzB,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,KAAK,EAAE,CAAC;gBACf,KAAK,EAAE,CAAC;YACV,CAAC,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,OAAO;IACL,gFAAgF;IAChF,KAAC,GAAG,IAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,YAC/E,KAAC,iBAAiB,IAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,YACpC,KAAC,aAAa,IACZ,OAAO,EAAE,GAAG,EAAE;oBACZ,SAAS,CAAC,SAAS,CAAC,CAAC;gBACvB,CAAC,EACD,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,aAAa,EAAE,KAAK,GAAG,wBAAwB,GAAG,GAAG,EACrD,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,WAAW,EAAE,KAAK,CAAC,kBAAkB,EACrC,CAAC,EAAE,KAAK,EACR,CAAC,EAAE,MAAM,GACT,GACgB,GAChB,CACP,CAAC;AACJ,CAAC"}

package/dist/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>A Pretty, Chitty Game Engine</title>
-  <script defer src="pretty-chitty.js"></script></head>
-  <body>
-    <div id="root"></div>
-    <!-- Webpack will output your JavaScript here -->
-  </body>
-</html>