@pretty-chitty/core 1.1.2 → 1.2.1

package/src/library/rendering/RootChitRenderInstance.ts

@@ -1,7 +1,7 @@
 import { Tween, Group as TweenGroup } from "@tweenjs/tween.js";
 import { ChitRenderInstance } from "./ChitRenderInstance";
 import { Chit } from "../game/Chit";
-import { Box3, Group, Object3D, Raycaster, Vector2, Vector3 } from "three";
+import { Box3, Group, Object3D, Plane, Raycaster, Vector2, Vector3 } from "three";
 import { CameraWrapperPerspective } from "./CameraWrapperPerspective";
 import { LightWrapper } from "./LightWrapper";
 import { ModalState } from "../game/ModalState";
@@ -10,7 +10,7 @@ import { chitsToGalleryItems } from "../utilities/GalleryItemConversion";
 import { GalleryItemRawSource } from "../game/GalleryItemRawSource";
 import { CameraSpec } from "./CameraSpec";
 import { SceneWrapper } from "./outline";
-import { TextureReferenaceCounter, TextureReferenceCounterRootGroup } from "./TextureReferenceCounter";
+import { TextureReferenceCounter, TextureReferenceCounterRootGroup } from "./TextureReferenceCounter";
 
 export type AnimationState = "leaving" | "entering" | "pending" | "inactive";
 
@@ -56,7 +56,7 @@ export class RootChitRenderInstance extends ChitRenderInstance implements Textur
 
   constructor(chit: Chit) {
     super(chit);
-    TextureReferenaceCounter.registerInstance(this);
+    TextureReferenceCounter.registerInstance(this);
     this._sceneWrapper.scene.add(this.rootGroup);
     this.id = chit.id ?? `${Date.now()}_${Math.random()}`;
     this.bboxGroup.visible = false;
@@ -101,7 +101,7 @@ export class RootChitRenderInstance extends ChitRenderInstance implements Textur
 
   resetDirty() {
     if (this.dirty) {
-      TextureReferenaceCounter.update();
+      TextureReferenceCounter.update();
       this.dirty = false;
     }
   }
@@ -181,9 +181,12 @@ export class RootChitRenderInstance extends ChitRenderInstance implements Textur
   }
 
   public resetMarks() {
-    this._hasPendingChanges = false;
-    this._hasChitsEntering = false;
-    this._hasChitsLeaving = false;
+    if (this._hasChitsEntering || this._hasChitsLeaving || this._hasPendingChanges) {
+      this._hasPendingChanges = false;
+      this._hasChitsEntering = false;
+      this._hasChitsLeaving = false;
+      this.notifyPanelStatusChange();
+    }
   }
 
   public markHasPendingChange() {
@@ -246,7 +249,7 @@ export class RootChitRenderInstance extends ChitRenderInstance implements Textur
   }
 
   public override destroy() {
-    TextureReferenaceCounter.unregisterInstance(this);
+    TextureReferenceCounter.unregisterInstance(this);
     this.lightWrapper.destroy();
     this.cameraWrapper.destroy();
     clearTimeout(this._notifyTimeout);
@@ -349,7 +352,7 @@ export class RootChitRenderInstance extends ChitRenderInstance implements Textur
       const circumference = PI2 * r;
 
       for (let steps = 0; steps <= circumference; steps += precision) {
-        const angle = (steps / circumference) * PI2;
+        const angle = (steps / (circumference + 0.0001)) * PI2;
         let vector = new Vector3(
           ((x + r * Math.cos(angle)) / this._width) * 2 - 1,
           -((y + r * Math.sin(angle)) / this._height) * 2 + 1,
@@ -389,6 +392,7 @@ export class RootChitRenderInstance extends ChitRenderInstance implements Textur
                 orig();
                 if (this.modalState) {
                   this.modalState.gallerySource.value = undefined;
+                  this.modalState.inlineGallerySource.value = undefined;
                 }
               };
             }
@@ -405,6 +409,14 @@ export class RootChitRenderInstance extends ChitRenderInstance implements Textur
     }
   }
 
+  public handleBeginDrag(x: number, y: number, distance: number, precision: number) {
+    const chits = this.findEligibleRenderInstances((c) => !!c.onDrag, x, y, distance, precision);
+    if (chits.length > 0) {
+      const chit = chits[0];
+      return chit;
+    }
+  }
+
   public handleLongClick(x: number, y: number, distance: number, precision: number) {
     const chits = this.findEligibleRenderInstances(
       (c) => !!c.renderInstance?.showDetailsOnLongPress(),
@@ -419,13 +431,16 @@ export class RootChitRenderInstance extends ChitRenderInstance implements Textur
     }
   }
 
-  public showGallery(source: GalleryItemSource) {
+  public showGallery(source: GalleryItemSource, inline = false) {
     if (this.modalState) {
-      const s = this.modalState.gallerySource;
+      const s = inline ? this.modalState.inlineGallerySource : this.modalState.gallerySource;
       s.value = source;
       return () => {
-        if (s.value === source) {
-          s.value = undefined;
+        if (this.modalState!.inlineGallerySource.value === source) {
+          this.modalState!.inlineGallerySource.value = undefined;
+        }
+        if (this.modalState!.gallerySource.value === source) {
+          this.modalState!.gallerySource.value = undefined;
         }
       };
     }
@@ -435,6 +450,9 @@ export class RootChitRenderInstance extends ChitRenderInstance implements Textur
     if (this.modalState && this.modalState.gallerySource.value === source) {
       this.modalState.gallerySource.value = undefined;
     }
+    if (this.modalState && this.modalState.inlineGallerySource.value === source) {
+      this.modalState.inlineGallerySource.value = undefined;
+    }
   }
 
   public handleZoom(x: number, y: number, dz: number, animate: boolean) {
@@ -451,6 +469,62 @@ export class RootChitRenderInstance extends ChitRenderInstance implements Textur
     return this.cameraWrapper.zoom;
   }
 
+  public attemptToFindPlaneZ0OfScreenPoints(screenX: number, screenY: number): Vector3 | undefined {
+    const screenCoordsOfNewLocation = new Vector2(screenX, screenY);
+    if (!this.convertScreenSpaceToCameraSpace) {
+      return undefined;
+    }
+
+    // find the current screen coordinates of its new home and map it to "camera space"
+    const cameraSpace = this.convertScreenSpaceToCameraSpace(screenCoordsOfNewLocation.x, screenCoordsOfNewLocation.y);
+
+    if (!cameraSpace) {
+      return;
+    }
+
+    const scale = this.camera.zoom;
+    if (!Number.isFinite(scale) || scale === 0) {
+      return undefined;
+    }
+
+    let multiplier = scale > 1 ? 1 : 1 / scale;
+
+    // figure out what camera space means at Z=0
+    for (; multiplier > 0.11; multiplier *= 0.75) {
+      const raycaster = new Raycaster();
+      raycaster.setFromCamera(new Vector2(cameraSpace.x * multiplier, cameraSpace.y * multiplier), this.camera);
+      const planeZ = new Plane(new Vector3(0, 0, 1), 0);
+      const intersection = new Vector3();
+      const intersects = raycaster.ray.intersectPlane(planeZ, intersection);
+      if (intersects) {
+        return intersects;
+      }
+    }
+  }
+
+  public attemptToFindPlaneZ0OfCanvasPoints(canvasX: number, canvasY: number): Vector3 | undefined {
+    const cameraSpace = new Vector2((canvasX / this._width) * 2 - 1, (-canvasY / this._height) * 2 + 1);
+
+    const scale = this.camera.zoom;
+    if (!Number.isFinite(scale) || scale === 0) {
+      return undefined;
+    }
+
+    let multiplier = scale > 1 ? 1 : 1 / scale;
+
+    // figure out what camera space means at Z=0
+    for (; multiplier > 0.11; multiplier *= 0.75) {
+      const raycaster = new Raycaster();
+      raycaster.setFromCamera(new Vector2(cameraSpace.x * multiplier, cameraSpace.y * multiplier), this.camera);
+      const planeZ = new Plane(new Vector3(0, 0, 1), 0);
+      const intersection = new Vector3();
+      const intersects = raycaster.ray.intersectPlane(planeZ, intersection);
+      if (intersects) {
+        return intersects;
+      }
+    }
+  }
+
   // override this stuff - we are never going to a new viewer
   protected override moveToNewViewer(): void {}
   protected override detach() {}

package/src/library/rendering/SplayCounter.tsx

@@ -25,7 +25,8 @@ export class SplayCounter extends ParameterizedCanvas {
   protected render() {
     return (
       <Text
-        font={`${this.textOptions.fontSize * this.dpi}px ${this.textOptions.fontFamily ?? "sans-serif"}`}
+        fontSize={this.textOptions.fontSize * this.dpi}
+        fontFamily={this.textOptions.fontFamily}
         fill={this.textOptions.fill ?? "#000"}
         shadowColor={this.textOptions.shadow}
         shadowBlur={this.textOptions.fontSize * 0.1 * this.dpi}

package/src/library/rendering/TextureReferenceCounter.ts

@@ -6,19 +6,19 @@ export type TextureReferenceCounterRootGroup = {
   markHasChange(): void;
 };
 
-export class TextureReferenaceCounter {
+export class TextureReferenceCounter {
   private static instances: TextureReferenceCounterRootGroup[] = [];
 
   static registerInstance(instance: TextureReferenceCounterRootGroup) {
-    if (!TextureReferenaceCounter.instances.includes(instance)) {
-      TextureReferenaceCounter.instances.push(instance);
+    if (!TextureReferenceCounter.instances.includes(instance)) {
+      TextureReferenceCounter.instances.push(instance);
     }
   }
 
   static unregisterInstance(instance: TextureReferenceCounterRootGroup) {
-    const index = TextureReferenaceCounter.instances.indexOf(instance);
+    const index = TextureReferenceCounter.instances.indexOf(instance);
     if (index !== -1) {
-      TextureReferenaceCounter.instances.splice(index, 1);
+      TextureReferenceCounter.instances.splice(index, 1);
     }
   }
 
@@ -50,7 +50,7 @@ export class TextureReferenaceCounter {
     };
 
     // Scan all active root render instances
-    TextureReferenaceCounter.instances.forEach((instance) => {
+    TextureReferenceCounter.instances.forEach((instance) => {
       instance.getRootGroup().traverseVisible((obj) => {
         if (obj instanceof Mesh) {
           if (obj.geometry instanceof BufferGeometry) {
@@ -68,17 +68,17 @@ export class TextureReferenaceCounter {
     // Mark all textures as used globally
     CanvasStack.disposer.markUsed(allIdsUsed, () => {
       // Mark all instances as dirty when textures change
-      TextureReferenaceCounter.instances.forEach((instance) => {
+      TextureReferenceCounter.instances.forEach((instance) => {
         instance.markHasChange();
       });
     });
     CanvasStack.materialDisposer.markUsedMap(allMaterialsUsed, () => {
-      TextureReferenaceCounter.instances.forEach((instance) => {
+      TextureReferenceCounter.instances.forEach((instance) => {
         instance.markHasChange();
       });
     });
     CanvasStack.geoDisposer.markUsedMap(allGeosUsed, () => {
-      TextureReferenaceCounter.instances.forEach((instance) => {
+      TextureReferenceCounter.instances.forEach((instance) => {
         instance.markHasChange();
       });
     });

package/src/library/rendering/outline/passes/DepthOcclusionPass.ts

@@ -51,7 +51,7 @@ export class DepthOcclusionPass extends Pass {
         inputTexture: { value: null },
         idDepthTexture: { value: null },
         sceneDepthTexture: { value: null },
-        depthTolerance: { value: 0.0001 },
+        depthTolerance: { value: 0.001 },
       },
       vertexShader: `
         varying vec2 vUv;

package/src/library/utilities/Annotations.ts

@@ -3,6 +3,39 @@ import { Chit } from "../game/Chit";
 import { OrderedOutlet } from "../game/OrderedOutlet";
 
 const NON_EDITABLE = "NonEditable";
+const SELECTABLE_KEY = "__selectableProperties";
+
+/**
+ * Represents a single choice option for a Selectable property.
+ */
+export interface SelectableChoice {
+  /** Unique identifier for this choice */
+  id: string;
+  /** Optional user-friendly label for this choice. If not provided, the id will be used. */
+  label?: string;
+}
+
+/**
+ * Configuration for a Selectable property.
+ */
+export interface SelectableConfig {
+  /** User-friendly label for the property */
+  label: string;
+  /** List of possible choices for this property */
+  choices: SelectableChoice[];
+}
+
+/**
+ * Information about a Selectable property including its field name and configuration.
+ */
+export interface SelectablePropertyInfo {
+  /** The name of the property/field */
+  fieldName: string;
+  /** The configuration for this selectable property */
+  config: SelectableConfig;
+  /** The current value of the property */
+  currentValue: any;
+}
 
 function annotationToPropName(key: string, category: string) {
   return `__${key}__${category}`;
@@ -186,3 +219,69 @@ export function FixChildOutlets(instance: Chit) {
     }
   }
 }
+
+/**
+ * Decorator that marks a property as selectable with a user-friendly label and a list of choices.
+ *
+ * @param config - Configuration object containing the label and choices for this property
+ *
+ * @example
+ * ```typescript
+ * class MyChit extends Chit {
+ *   @Selectable({
+ *     label: "Difficulty Level",
+ *     choices: [
+ *       { id: "easy", label: "Easy Mode" },
+ *       { id: "medium", label: "Medium Mode" },
+ *       { id: "hard", label: "Hard Mode" }
+ *     ]
+ *   })
+ *   public difficulty: string = "medium";
+ * }
+ * ```
+ *
+ * @group Chit Annotations
+ */
+export function Selectable(config: SelectableConfig) {
+  return function (cls: any, key: string) {
+    if (!Object.hasOwn(cls, SELECTABLE_KEY)) {
+      const parentSelectables = Object.getPrototypeOf(cls)?.[SELECTABLE_KEY];
+      Object.defineProperty(cls, SELECTABLE_KEY, {
+        enumerable: false,
+        value: parentSelectables ? { ...parentSelectables } : {},
+      });
+    }
+    cls[SELECTABLE_KEY][key] = config;
+  };
+}
+
+/**
+ * Gets all selectable properties from an object instance.
+ *
+ * @param obj - The object to get selectable properties from
+ * @returns An array of SelectablePropertyInfo objects
+ */
+export function getSelectableProperties(obj: any): SelectablePropertyInfo[] {
+  const result: SelectablePropertyInfo[] = [];
+  const seenKeys = new Set<string>();
+
+  let proto = Object.getPrototypeOf(obj);
+  while (proto) {
+    const selectables = proto[SELECTABLE_KEY];
+    if (selectables) {
+      for (const [fieldName, config] of Object.entries(selectables)) {
+        if (!seenKeys.has(fieldName)) {
+          seenKeys.add(fieldName);
+          result.push({
+            fieldName,
+            config: config as SelectableConfig,
+            currentValue: obj[fieldName],
+          });
+        }
+      }
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+
+  return result;
+}

package/src/library/utilities/CanvasStack/CanvasOperations.tsx

@@ -2,6 +2,7 @@ import * as Colors from "color";
 import { RenderBounds } from "./CanvasStack";
 import { ImageResult } from "./ImageCache";
 import { PlayerChit } from "../../game/PlayerChit";
+import { GameTheme } from "../../game/GameTheme";
 import imageColorOverlayer from "./ImageColorOverlayer";
 import { RichTextRenderOptionsParameters, RichTextRenderer } from "./RichTextRenderer";
 
@@ -164,7 +165,15 @@ export class PadCanvasOperation extends CanvasOperation {
 export type Alignment = "center" | "left" | "right";
 
 export interface TextOptions {
-  contextOptions?: any;
+  contextOptions?: {
+    fillStyle?: string;
+    strokeStyle?: string;
+    shadowBlur?: number;
+    shadowColor?: string;
+  };
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?: number | "normal" | "bold";
   align?: Alignment;
   offsetX?: number;
   offsetY?: number;
@@ -243,6 +252,13 @@ export class TextCanvasOperation extends CanvasOperation {
     super();
   }
 
+  private makeFont(): string {
+    const fontSize = this.options.fontSize ?? 16;
+    const fontFamily = this.options.fontFamily ?? GameTheme.defaultFontFamily;
+    const fontWeight = this.options.fontWeight ?? 400;
+    return `${fontWeight} ${fontSize}px ${fontFamily}`;
+  }
+
   override render(
     context: CanvasRenderingContext2D,
     bounds: RenderBounds,
@@ -252,6 +268,8 @@ export class TextCanvasOperation extends CanvasOperation {
     const startX = bounds.x,
       startY = bounds.y;
 
+    context.font = this.makeFont();
+
     if (this.options.contextOptions) {
       Object.keys(this.options.contextOptions).forEach(
         // @ts-expect-error -- It's okay

package/src/library/utilities/CanvasStack/ReactCanvas.tsx

@@ -206,7 +206,9 @@ export function Text({
   align = "center",
   fill,
   stroke,
-  font,
+  fontSize,
+  fontFamily,
+  fontWeight,
   offsetX,
   offsetY,
   shadowBlur,
@@ -218,7 +220,9 @@ export function Text({
   align?: "center" | "left" | "right";
   fill?: string;
   stroke?: string;
-  font?: string;
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?: number | "normal" | "bold";
   shadowBlur?: number;
   shadowColor?: string;
   offsetX?: number;
@@ -235,7 +239,10 @@ export function Text({
           after: after ? unwrapCanvasNode(after) : undefined,
           offsetX,
           offsetY,
-          contextOptions: { fillStyle: fill, strokeStyle: stroke, font, shadowBlur, shadowColor },
+          fontSize,
+          fontFamily,
+          fontWeight,
+          contextOptions: { fillStyle: fill, strokeStyle: stroke, shadowBlur, shadowColor },
         })
       }
     />

package/src/library/utilities/CanvasStack/RichTextRenderer.ts

@@ -1,3 +1,5 @@
+import { GameTheme } from "../../game/GameTheme";
+
 export type Align = "left" | "center" | "right";
 export type IconBaseline = "text" | "middle" | "bottom";
 export type VerticalAlign = "top" | "middle" | "bottom";
@@ -77,7 +79,7 @@ export class RichTextRenderer {
       y = 0,
       maxWidth,
       height,
-      fontFamily = "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
+      fontFamily = GameTheme.defaultFontFamily,
       fontSize = 16,
       lineHeight = 1.25,
       align = "left",
@@ -110,7 +112,15 @@ export class RichTextRenderer {
     ctx.textBaseline = "alphabetic";
     ctx.fillStyle = color;
 
-    const totalHeight = lines.length * metrics.lineHeightPx;
+    // Measure actual font metrics for accurate vertical positioning
+    ctx.font = this.makeFont({}, metrics);
+    const fontMetrics = ctx.measureText("Mg"); // Use chars with ascenders and descenders
+    // Use actual metrics if available, otherwise estimate (ascent ~80% of fontSize)
+    const ascent = fontMetrics.fontBoundingBoxAscent ?? metrics.fontSize * 0.8;
+    const descent = fontMetrics.fontBoundingBoxDescent ?? metrics.fontSize * 0.2;
+    const actualTextHeight = ascent + descent;
+
+    const totalHeight = (lines.length - 1) * metrics.lineHeightPx + actualTextHeight;
     // Compute initial Y based on vertical alignment if a container height was provided.
     let startY = y;
     if (verticalAlign === "middle" && typeof height === "number") {
@@ -125,7 +135,7 @@ export class RichTextRenderer {
       else if (align === "right") offsetX = maxWidth - line.width;
 
       let cursorX = x + offsetX;
-      const baselineY = cursorY + metrics.fontSize;
+      const baselineY = cursorY + ascent;
 
       if (debug) {
         ctx.save();
@@ -184,7 +194,7 @@ export class RichTextRenderer {
     return {
       height: lines.length * metrics.lineHeightPx,
       lines: lines.length,
-      lastBaselineY: startY + (lines.length - 1) * metrics.lineHeightPx + metrics.fontSize,
+      lastBaselineY: startY + (lines.length - 1) * metrics.lineHeightPx + ascent,
     };
   }
 

package/src/library/utilities/EventChannel.ts

@@ -1,5 +1,3 @@
-import nextTick from "next-tick";
-
 export class EventChannel<T> {
   private cbs: ((t: T) => void)[] = [];
   public on(cb: (t: T) => void, notifyImmediate = true) {
@@ -8,7 +6,7 @@ export class EventChannel<T> {
     // it's important to stash the original value otherwise we might the same value 2x in a row to the channel
     const valueToPush = this._value;
     if (notifyImmediate) {
-      nextTick(() => cb(valueToPush));
+      queueMicrotask(() => cb(valueToPush));
     }
 
     return () => {
@@ -20,7 +18,7 @@ export class EventChannel<T> {
   public trigger(force = false) {
     clearTimeout(this._triggerTimeout);
     if (force || this.latency === 0) {
-      nextTick(() => {
+      queueMicrotask(() => {
         this.cbs.forEach((cb) => cb(this._value));
       });
     } else {