@pretty-chitty/core 1.1.1

package/src/library/components/GalleryViewer.tsx

@@ -0,0 +1,773 @@
+import {
+  AmbientLight,
+  Box3,
+  DirectionalLight,
+  Fog,
+  Group,
+  Mesh,
+  Object3D,
+  PerspectiveCamera,
+  PlaneGeometry,
+  Raycaster,
+  Scene,
+  Vector3,
+} from "three";
+import { Box } from "@mui/material";
+import React, { useEffect, useRef, useState } from "react";
+import Hammer from "@egjs/hammerjs";
+import { useWebGlRenderer } from "../hooks/useWebGlRenderer";
+import { Easing, Tween } from "@tweenjs/tween.js";
+import { addWheelListener, removeWheelListener } from "wheel";
+import { CanvasStack } from "../utilities/CanvasStack/CanvasStack";
+import {
+  ColorCanvasOperation,
+  IconMap,
+  LayeredCanvasOperation,
+  MarkdownCanvasOperation,
+  PadCanvasOperation,
+} from "../utilities/CanvasStack/CanvasOperations";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { GameTheme } from "../game/GameTheme";
+import { RichTextRenderOptionsParameters } from "../utilities/CanvasStack/RichTextRenderer";
+import { SceneWrapper } from "../rendering/outline";
+import { requestSharedAnimationFrame } from "../utilities/RequestSharedAnimationFrame";
+import { TextureReferenaceCounter, TextureReferenceCounterRootGroup } from "../rendering/TextureReferenceCounter";
+
+let ID_COUNTER = 1;
+
+const SCALE_FACTOR = 20;
+
+type UpdateCallback = () => void;
+
+export interface GalleryItem {
+  id: string;
+  createMesh(sceneWrapper: SceneWrapper): Object3D;
+  onClick?: () => void;
+
+  maximumWidth?: number;
+  maximumHeight?: number;
+
+  preferredWidth?: number;
+  preferredHeight?: number;
+
+  summary?: string;
+  summaryIconMap?: IconMap;
+  summaryRenderingOptions?: RichTextRenderOptionsParameters;
+
+  /**
+   * This takes a callback that gets updated any time the gallery item needs to be refreshed (new texture or mesh or whatnot).
+   * It returns a callback that can be invoked to unsubscribe this callback
+   */
+  registerUpdateHandler(cb: UpdateCallback): UpdateCallback;
+}
+
+export interface GalleryItemSource {
+  backingObject?: any;
+  get items(): GalleryItem[];
+
+  /**
+   * This takes a callback that gets updated any time the gallery item needs to be refreshed (new texture or mesh or whatnot).
+   * It returns a callback that can be invoked to unsubscribe this callback
+   */
+  registerUpdateHandler(cb: UpdateCallback): UpdateCallback;
+  close(): void;
+}
+
+type BuiltItem = {
+  index: number;
+  enteredAmount: number;
+  targetIndex: number;
+  item: GalleryItem;
+  group: Object3D;
+  mesh: Object3D;
+  meshToShowOrHideIfCentered?: Object3D;
+  center: Vector3;
+  height: number;
+  depth: number;
+  summaryHeight: number;
+  tween?: Tween<{ x: number }>;
+  enteredTween?: Tween<{ x: number }>;
+  unsubscribe: UpdateCallback;
+};
+
+class GalleryController implements TextureReferenceCounterRootGroup {
+  constructor(
+    public sceneWrapper: SceneWrapper,
+    private theme: GameTheme,
+    public offsetAngle: number,
+    fov: number,
+  ) {
+    this.camera = new PerspectiveCamera(fov, 1, 0.1, 10000 / SCALE_FACTOR);
+    this.camera.position.z = 500 / SCALE_FACTOR;
+
+    this.light = new DirectionalLight(0xffffff, 1);
+    this.light.position.copy(this.camera.position);
+    sceneWrapper.scene.add(this.light);
+    const ambient = new AmbientLight(0xffffff, 1);
+    sceneWrapper.scene.add(ambient);
+  }
+
+  getRootGroup(): Object3D {
+    return this.sceneWrapper.scene;
+  }
+  markHasChange(): void {
+    this.changed = true;
+  }
+
+  public camera: PerspectiveCamera;
+  private w = 100 / SCALE_FACTOR;
+  private h = 100 / SCALE_FACTOR;
+  private itemWidth = 100 / SCALE_FACTOR;
+  private itemHeight = 100 / SCALE_FACTOR;
+
+  public tweenDuration = 250;
+  public showSummary = true;
+  private changed = false;
+  private itemSpacing = 100 / SCALE_FACTOR;
+  private itemsPerPage = 1;
+  private frontStageWidth = 1;
+  private offsetX = 0;
+  private light: DirectionalLight;
+
+  private effectiveItemHeight = 0;
+  private baseCameraZ = 500 / SCALE_FACTOR;
+
+  private items: BuiltItem[] = [];
+  private leavingItems: BuiltItem[] = [];
+  private itemLookup: { [key: string]: BuiltItem } = {};
+
+  private updateEffectiveItemHeightAndCamera() {
+    // Calculate the tallest actual mesh height (capped at itemHeight)
+    const tallestMeshHeight = Math.max(...this.items.map((item) => item.height), 0);
+    const newEffectiveItemHeight = Math.min(tallestMeshHeight, this.itemHeight);
+
+    // Check if effective height changed - if so, need to reposition all summaries
+    const heightChanged = Math.abs(newEffectiveItemHeight - this.effectiveItemHeight) > 0.001;
+    this.effectiveItemHeight = newEffectiveItemHeight;
+
+    if (heightChanged) {
+      this.items.forEach((item) => {
+        if (item.meshToShowOrHideIfCentered) {
+          // Reposition summary based on new effective height
+          const summaryHeight = item.summaryHeight - this.theme.spacing / SCALE_FACTOR;
+          item.meshToShowOrHideIfCentered.position.y =
+            -this.effectiveItemHeight * 0.5 - summaryHeight / 2 - this.theme.spacing / SCALE_FACTOR;
+        }
+      });
+    }
+
+    // Calculate tallest summary
+    const tallestSummaryHeight = Math.max(...this.items.map((item) => item.summaryHeight), 0);
+
+    // Vertical offset is based on effective item height + tallest summary
+    const verticalOffset = -tallestSummaryHeight / 2;
+
+    // Update camera position using the base Z distance
+    this.camera.position.z = Math.cos(this.offsetAngle) * this.baseCameraZ;
+    this.camera.position.y = Math.sin(this.offsetAngle) * this.baseCameraZ + verticalOffset;
+    this.camera.lookAt(new Vector3(this.camera.position.x, verticalOffset, 0));
+
+    // Update light to match camera
+    this.light.position.copy(this.camera.position);
+    this.light.lookAt(0, verticalOffset, 0);
+
+    this.changed = true;
+  }
+
+  public setSize(w: number, h: number, itemWidth: number, itemHeight: number, itemSpacing: number) {
+    this.changed = true;
+    this.w = w / SCALE_FACTOR;
+    this.h = h / SCALE_FACTOR;
+    this.itemHeight = Math.min(itemHeight, h - itemSpacing) / SCALE_FACTOR;
+    this.itemWidth = Math.min(itemWidth, w - itemSpacing) / SCALE_FACTOR;
+    this.itemSpacing = itemSpacing / SCALE_FACTOR;
+    this.itemsPerPage = Math.floor((w - itemSpacing * 2) / (this.itemWidth * SCALE_FACTOR + itemSpacing));
+    this.frontStageWidth =
+      (this.itemsPerPage * (this.itemWidth * SCALE_FACTOR + itemSpacing)) / SCALE_FACTOR - this.itemSpacing;
+
+    this.camera.aspect = w / h;
+    this.camera.updateProjectionMatrix();
+
+    // Calculate base camera Z distance from the field of view
+    const aspect = this.camera.aspect;
+    const vFov = (this.camera.fov * Math.PI) / 180;
+    const hFov = 2 * Math.atan(aspect * Math.tan(vFov / 2));
+    this.baseCameraZ = w / SCALE_FACTOR / (2 * Math.tan(hFov / 2));
+    this.camera.position.x = 0;
+
+    // Set up fog and camera clipping planes
+    this.sceneWrapper.scene.fog = new Fog(0x000000, this.baseCameraZ, this.baseCameraZ + (w / SCALE_FACTOR) * 2);
+    this.camera.near = this.baseCameraZ * 0.5;
+    this.camera.far = this.baseCameraZ + (w / SCALE_FACTOR) * 3;
+    this.camera.updateProjectionMatrix();
+
+    // reset the world
+    this.setItems(this.items.map((item) => item.item));
+    this.pan(0, true);
+  }
+
+  getItemAtPosition(x: any, y: any) {
+    const paddingX = (this.w - this.frontStageWidth) / 2;
+    const index = (-this.offsetX + x / SCALE_FACTOR - paddingX) / (this.itemWidth + this.itemSpacing);
+
+    const item = this.items.find((item) => index > item.index && Math.abs(index - item.index) < 1);
+    if (!item) {
+      return null;
+    }
+
+    if (index - item.index > 1 - this.itemSpacing / (this.itemWidth + this.itemSpacing)) {
+      return null;
+    }
+
+    const ndc = new Vector3((x / SCALE_FACTOR / this.w) * 2 - 1, -(y / SCALE_FACTOR / this.h) * 2 + 1, 0.5);
+    ndc.unproject(this.camera);
+    const raycaster = new Raycaster(this.camera.position, ndc.sub(this.camera.position).normalize());
+
+    // Create a combined bounding box from mesh to summary (if present)
+    const combinedBox = new Box3().setFromObject(item.mesh);
+    if (item.meshToShowOrHideIfCentered) {
+      const summaryBox = new Box3().setFromObject(item.meshToShowOrHideIfCentered);
+      combinedBox.union(summaryBox);
+    }
+
+    const hit = raycaster.ray.intersectBox(combinedBox, new Vector3());
+    if (!hit) {
+      return null;
+    }
+
+    return item.item;
+  }
+
+  render() {
+    let changed = this.changed;
+    if (this.tween) {
+      this.tween.update();
+      changed = true;
+    }
+    this.items.forEach((item) => {
+      if (item.tween) {
+        item.tween.update();
+        changed = true;
+      }
+      if (item.enteredTween) {
+        item.enteredTween.update();
+        changed = true;
+      }
+    });
+    this.leavingItems.forEach((item) => {
+      if (item.enteredTween) {
+        item.enteredTween.update();
+      }
+      changed = true;
+    });
+    this.changed = false;
+    return changed;
+  }
+
+  isAnimating() {
+    return this.tween !== undefined;
+  }
+  stop() {
+    this.tween?.stop();
+    this.tween = undefined;
+  }
+
+  private tween: Tween<{ x: number }> | undefined;
+  pan(deltaX: number, animate = false) {
+    const max = 0;
+    const min =
+      -(this.items.length - Math.min(this.items.length, this.itemsPerPage)) * (this.itemWidth + this.itemSpacing);
+
+    this.changed = true;
+    if (this.tween) {
+      this.tween.stop();
+      this.tween = undefined;
+    }
+
+    if (!animate) {
+      this.offsetX += deltaX / SCALE_FACTOR;
+
+      if (this.offsetX > max + this.w / 2) {
+        this.offsetX = max + this.w / 2;
+      }
+      if (this.offsetX < min - this.w / 2) {
+        this.offsetX = min - this.w / 2;
+      }
+
+      this.items.forEach((item) => this.positionItem(item));
+    } else {
+      // lock the offset to the nearest item
+      let target = this.offsetX + deltaX / SCALE_FACTOR;
+      const itemIndex = Math.round(target / (this.itemWidth + this.itemSpacing));
+      target = itemIndex * (this.itemWidth + this.itemSpacing);
+
+      if (target > max) {
+        target = max;
+      }
+      if (target < min) {
+        target = min;
+      }
+
+      const duration = 0.0001 + Math.min(750, Math.abs(target - this.offsetX));
+
+      this.tween = new Tween({ x: this.offsetX })
+        .onUpdate(({ x }) => {
+          this.offsetX = x;
+          this.items.forEach((item) => this.positionItem(item));
+        })
+        .easing(Easing.Quadratic.Out)
+        .to({ x: target }, duration)
+        .onComplete(() => {
+          this.tween = undefined;
+        })
+        .start();
+    }
+  }
+
+  positionItem(item: BuiltItem) {
+    const index = item.index;
+    const initialOffset = -(this.frontStageWidth / 2 - this.itemWidth / 2);
+    const group = item.group;
+    group.position.x = initialOffset + index * (this.itemWidth + this.itemSpacing) + this.offsetX;
+
+    group.position.y = (1 - item.enteredAmount) * -this.h; // 5 is height of display?
+
+    const zFactor = 3;
+    const largestX = initialOffset + (this.itemsPerPage - 1) * (this.itemWidth + this.itemSpacing);
+    if (group.position.x > largestX) {
+      const overshot = group.position.x - largestX;
+      group.position.x = largestX + Math.pow(overshot, 0.94);
+      group.position.z = -overshot * zFactor;
+      group.rotation.x = -overshot / (3000 / SCALE_FACTOR) - this.offsetAngle;
+      if (item.meshToShowOrHideIfCentered) {
+        item.meshToShowOrHideIfCentered.position.x = overshot * 3;
+        item.meshToShowOrHideIfCentered.position.z = -overshot * 3;
+      }
+    } else if (group.position.x < initialOffset) {
+      const overshot = Math.abs(initialOffset - group.position.x);
+      group.position.x = initialOffset - Math.pow(overshot, 0.94);
+      group.position.z = -overshot * zFactor;
+      group.rotation.x = -overshot / (3000 / SCALE_FACTOR) - this.offsetAngle;
+      if (item.meshToShowOrHideIfCentered) {
+        item.meshToShowOrHideIfCentered.position.x = -overshot * 3;
+        item.meshToShowOrHideIfCentered.position.z = -overshot * 3;
+      }
+    } else {
+      if (item.meshToShowOrHideIfCentered) {
+        item.meshToShowOrHideIfCentered.position.x = 0;
+        item.meshToShowOrHideIfCentered.position.z = 0;
+      }
+      group.position.z = 0;
+      group.rotation.x = -this.offsetAngle;
+    }
+
+    // group.rotation.x -= Math.min(1, item.depth / this.w);
+    group.position.add(item.center);
+  }
+
+  scaleItem(item: BuiltItem, maximumWidth?: number, maximumHeight?: number) {
+    if (item.mesh) {
+      item.mesh.removeFromParent();
+    }
+
+    item.mesh = item.item.createMesh(this.sceneWrapper);
+    const box3 = new Box3();
+    box3.expandByObject(item.mesh);
+    if (!box3.isEmpty()) {
+      const size = box3.getSize(new Vector3());
+      const center = box3.getCenter(new Vector3());
+      const xScale = Math.min(this.itemWidth, (maximumWidth ?? Number.MAX_SAFE_INTEGER) / SCALE_FACTOR) / size.x;
+      const yScale = Math.min(this.itemHeight, (maximumHeight ?? Number.MAX_SAFE_INTEGER) / SCALE_FACTOR) / size.y;
+      const scale = Math.min(xScale, yScale);
+      item.mesh.scale.set(scale, scale, scale);
+      item.mesh.updateMatrix();
+      item.center = center.multiplyScalar(scale).negate();
+      item.center.z = 0; // i want to "floor" everything... but that is hard?
+      item.height = size.y * scale;
+      item.depth = size.z * scale;
+    }
+    item.group.add(item.mesh);
+  }
+
+  updateHelpText(item: BuiltItem) {
+    const summary = item.item.summary;
+    if (!summary || !this.showSummary) {
+      item.summaryHeight = 0;
+      return;
+    }
+
+    const height = (this.h - this.itemHeight) / 2 - this.theme.spacing * 2;
+
+    const specs: RichTextRenderOptionsParameters = {
+      align: "center",
+      color: this.theme.dialogForegroundColor,
+      ...(item.item.summaryRenderingOptions ?? {}),
+    };
+    if (!specs.fontSize) {
+      specs.fontSize = this.theme.dialogFontSize;
+    }
+    specs.fontSize *= window.devicePixelRatio;
+
+    const pad = this.theme.spacing * window.devicePixelRatio;
+    const markdown = new MarkdownCanvasOperation(summary, item.item.summaryIconMap ?? {}, specs);
+    const ops = new LayeredCanvasOperation([
+      new ColorCanvasOperation(this.theme.gallerySummaryBackgroundColor, this.theme.gallerySummaryBackgroundOpacity),
+      new PadCanvasOperation({ top: pad, bottom: pad, left: pad, right: pad }, markdown),
+    ]);
+
+    const stack1 = new CanvasStack(
+      this.itemWidth * SCALE_FACTOR * window.devicePixelRatio,
+      height * SCALE_FACTOR * window.devicePixelRatio,
+      ops,
+    );
+    stack1.render();
+    const stack2 = new CanvasStack(
+      this.itemWidth * SCALE_FACTOR * window.devicePixelRatio,
+      markdown.height + this.theme.spacing * 2 * window.devicePixelRatio,
+      ops,
+    );
+    stack2.render();
+
+    const material = stack2.material;
+    material.transparent = true;
+    material.depthWrite = true;
+
+    const finalHeight = stack2.height / window.devicePixelRatio / SCALE_FACTOR;
+    item.summaryHeight = finalHeight + this.theme.spacing / SCALE_FACTOR;
+    const face = new PlaneGeometry(this.itemWidth, finalHeight);
+    const m = new Mesh(face, material);
+    // m.renderOrder = 2;
+    // Position will be set by updateEffectiveItemHeightAndCamera based on effectiveItemHeight
+    m.position.set(0, -this.effectiveItemHeight * 0.5 - finalHeight / 2 - this.theme.spacing / SCALE_FACTOR, 0);
+
+    item.meshToShowOrHideIfCentered = m;
+    item.group.add(m);
+  }
+
+  private _rawItems: GalleryItem[] = [];
+  public setItems(items: GalleryItem[]) {
+    this._rawItems = items;
+    this.changed = true;
+    const itemIndexOffset = items.length < this.itemsPerPage ? (this.itemsPerPage - items.length) / 2 : 0;
+
+    const seenIds = new Set(Object.keys(this.itemLookup));
+    items.forEach((item, i) => {
+      seenIds.delete(item.id);
+      if (!this.itemLookup[item.id]) {
+        const builtItem: BuiltItem = (this.itemLookup[item.id] = {
+          item,
+          enteredAmount: 0,
+          mesh: item.createMesh(this.sceneWrapper),
+          group: new Group(),
+          index: i + itemIndexOffset,
+          center: new Vector3(),
+          height: 0,
+          depth: 0,
+          summaryHeight: 0,
+          targetIndex: i + itemIndexOffset,
+          unsubscribe: item.registerUpdateHandler(() => {
+            builtItem.group.removeFromParent();
+            builtItem.mesh.removeFromParent();
+            this.changed = true;
+
+            builtItem.group = new Group();
+
+            this.sceneWrapper.scene.add(builtItem.group);
+
+            this.scaleItem(builtItem, item.maximumWidth, item.maximumHeight);
+            this.positionItem(builtItem);
+            this.updateHelpText(builtItem);
+            this.updateEffectiveItemHeightAndCamera();
+
+            TextureReferenaceCounter.update();
+          }),
+        });
+        this.scaleItem(builtItem, item.maximumWidth, item.maximumHeight);
+
+        // Also add your mesh to the scene:
+        builtItem.mesh.removeFromParent();
+        builtItem.group.removeFromParent();
+        builtItem.group.add(builtItem.mesh);
+        this.sceneWrapper.scene.add(builtItem.group);
+        this.positionItem(builtItem);
+        this.updateHelpText(builtItem);
+
+        builtItem.enteredTween = new Tween({ x: 0 })
+          .to({ x: 1 }, this.tweenDuration)
+          .easing(Easing.Quadratic.Out)
+          .onUpdate((obj) => {
+            builtItem.enteredAmount = obj.x;
+            this.positionItem(builtItem);
+          })
+          .onComplete(() => {
+            this.positionItem(builtItem);
+            builtItem.enteredTween = undefined;
+          })
+          .start();
+      } else {
+        const it = this.itemLookup[item.id];
+        this.scaleItem(it, it.item.maximumWidth, it.item.maximumHeight);
+        this.positionItem(it);
+      }
+    });
+
+    [...seenIds].forEach((id) => {
+      const item = this.itemLookup[id];
+      item.unsubscribe();
+      delete this.itemLookup[id];
+      this.leavingItems.push(item);
+
+      if (item.enteredTween) {
+        item.enteredTween.stop();
+        item.enteredTween = undefined;
+      }
+
+      item.enteredTween = new Tween({ x: item.enteredAmount })
+        .to({ x: 0 }, this.tweenDuration)
+        .easing(Easing.Quadratic.In)
+        .onUpdate((obj) => {
+          item.enteredAmount = obj.x;
+          this.positionItem(item);
+        })
+        .onComplete(() => {
+          item.enteredTween = undefined;
+          item.mesh.parent?.remove(item.mesh);
+          this.leavingItems = this.leavingItems.filter((i) => i !== item);
+        })
+        .start();
+    });
+
+    const hasChangedLength = this.items.length !== items.length;
+    this.items = items.map((item) => this.itemLookup[item.id]);
+
+    this.items.forEach((item, index) => {
+      if (item.tween) {
+        item.tween.stop();
+        item.tween = undefined;
+      }
+      if (item.index !== index + itemIndexOffset) {
+        item.targetIndex = index + itemIndexOffset;
+
+        item.tween = new Tween({ x: item.index })
+          .to({ x: item.targetIndex }, this.tweenDuration)
+          .easing(Easing.Quadratic.InOut)
+          .onUpdate((obj) => {
+            item.index = obj.x;
+            this.positionItem(item);
+          })
+          .onComplete(() => {
+            item.tween = undefined;
+          })
+          .start();
+      }
+    });
+
+    if (hasChangedLength && !this.tween) {
+      this.pan(0, true);
+    }
+
+    this.updateEffectiveItemHeightAndCamera();
+    this.sceneWrapper.markDirty();
+    TextureReferenaceCounter.update();
+  }
+}
+
+export function GalleryViewer({
+  items,
+  paused = false,
+  galleryItemWidth = 200,
+  fov = 15,
+  angle = Math.PI * 0.1,
+  onClose,
+  itemSpacing = 50,
+  tweenDuration = 250,
+  w = 0,
+  h = 0,
+  galleryItemHeight = h * 0.7,
+  showSummary = true,
+}: {
+  items: GalleryItem[];
+  w: number;
+  h: number;
+  fov?: number;
+  angle?: number;
+  itemSpacing: number;
+  paused?: boolean;
+  tweenDuration?: number;
+  galleryItemWidth?: number;
+  galleryItemHeight?: number;
+  onClose?: () => void;
+  showSummary?: boolean;
+}) {
+  const calcedItemWidth = Math.min(...items.map((item) => item.preferredWidth ?? galleryItemWidth));
+  const calcedItemHeight = Math.min(...items.map((item) => item.preferredHeight ?? galleryItemHeight));
+
+  const [id] = useState(`GalleryViewer${ID_COUNTER++}`);
+  const refContainer = useRef<HTMLCanvasElement>(null);
+  const rendererWrapper = useWebGlRenderer();
+  const theme = useGameTheme();
+  const [galleryController] = useState(new GalleryController(new SceneWrapper(new Scene()), theme, angle, fov));
+
+  galleryController.tweenDuration = tweenDuration;
+  galleryController.showSummary = showSummary;
+
+  useEffect(() => {
+    if (!w || !h) {
+      return;
+    }
+    if (!Number.isFinite(calcedItemHeight) || !Number.isFinite(calcedItemWidth)) {
+      return;
+    }
+
+    galleryController.setSize(w, h, calcedItemWidth, calcedItemHeight, itemSpacing);
+  }, [calcedItemWidth, itemSpacing, calcedItemHeight, w, h, galleryController]);
+
+  useEffect(() => {
+    galleryController.setItems(items);
+  }, [items, galleryController]);
+
+  useEffect(() => {
+    const canvas = refContainer.current;
+    if (!canvas || !rendererWrapper || paused) return;
+    const ctx = canvas.getContext("2d");
+    let cancelled = false;
+
+    // FPS tracking variables
+    let frameCount = 0;
+    let fpsStartTime = performance.now();
+    let isAnimating = false;
+
+    const animate = () => {
+      if (cancelled) return;
+      requestSharedAnimationFrame(animate);
+
+      const wasAnimating = isAnimating;
+      isAnimating = galleryController.render();
+
+      if (isAnimating) {
+        if (!wasAnimating) {
+          // Animation just started
+          frameCount = 0;
+          fpsStartTime = performance.now();
+        }
+
+        frameCount++;
+        const elapsed = performance.now() - fpsStartTime;
+
+        if (elapsed > 1000 && frameCount > 10) {
+          // After 1 second and at least 10 frames
+          const fps = (frameCount / elapsed) * 1000;
+          console.log(`Gallery Animation FPS: ${fps.toFixed(1)}`);
+          frameCount = 0;
+          fpsStartTime = performance.now();
+        }
+
+        if (ctx) {
+          // Set canvas size to match target dimensions
+          ctx.canvas.width = w * rendererWrapper.pixelRatio;
+          ctx.canvas.height = h * rendererWrapper.pixelRatio;
+
+          // Clear canvas and render
+          ctx.clearRect(0, 0, w * rendererWrapper.pixelRatio, h * rendererWrapper.pixelRatio);
+          rendererWrapper.render(galleryController.sceneWrapper, galleryController.camera, ctx, theme);
+        }
+      }
+    };
+    animate();
+    return () => {
+      cancelled = true;
+    };
+  }, [id, rendererWrapper, galleryController, paused, theme, w, h]);
+
+  useEffect(() => {
+    const el = refContainer.current;
+    if (!el) return;
+    const hammer = new Hammer.Manager(el);
+    hammer.add(new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL }));
+
+    const fixPosition = (ev: HammerInput) => {
+      const rect = el.getBoundingClientRect();
+      return { x: ev.center.x - rect.left, y: ev.center.y - rect.top };
+    };
+
+    hammer.add(new Hammer.Tap());
+    hammer.on("tap", (ev) => {
+      const pos = fixPosition(ev);
+
+      if (galleryController.isAnimating()) {
+        galleryController.pan(0, true); // goofy but fine?  locks to closest slot?
+      } else {
+        const tappedItem = galleryController.getItemAtPosition(pos.x, pos.y);
+        if (tappedItem) {
+          if (tappedItem.onClick) {
+            tappedItem.onClick();
+
+            // // TODO: this is maybe not right? do we always want to close upon selection?  I don't think so
+            // if (onClose) {
+            //   setTimeout(onClose, 500);
+            // }
+          }
+        } else if (onClose) {
+          onClose();
+        }
+      }
+    });
+
+    let lastX: number | undefined = undefined;
+    let lastVelocityX = 0;
+    hammer.on("pan", (ev) => {
+      if (lastX === undefined) {
+        lastX = 0;
+      } else {
+        lastVelocityX = ev.velocityX;
+        galleryController.pan(-(lastX - ev.deltaX));
+        lastX = ev.deltaX;
+      }
+      ev.preventDefault();
+    });
+    hammer.on("panend", () => {
+      lastX = undefined;
+      galleryController.pan(lastVelocityX * 300, true);
+      lastVelocityX = 0;
+    });
+
+    let timeout: NodeJS.Timeout;
+    const wheelListener = (ev: any) => {
+      const dy = ev.wheelDeltaY as number;
+      galleryController.pan(dy / 3, false);
+      ev.preventDefault();
+      clearTimeout(timeout);
+      timeout = setTimeout(() => galleryController.pan(0, true), 50);
+    };
+
+    addWheelListener(el, wheelListener);
+    return () => {
+      hammer.destroy();
+      removeWheelListener(el, wheelListener);
+    };
+  }, [galleryController, onClose]);
+
+  // Cleanup sceneWrapper on unmount
+  useEffect(() => {
+    TextureReferenaceCounter.registerInstance(galleryController);
+    return () => {
+      TextureReferenaceCounter.unregisterInstance(galleryController);
+      galleryController.sceneWrapper.dispose();
+    };
+  }, [galleryController]);
+
+  if (!w || !h) {
+    return null;
+  }
+
+  return (
+    <Box sx={{ position: "absolute", top: 0, right: 0, left: 0, bottom: 0 }}>
+      <canvas
+        width={w * rendererWrapper.pixelRatio}
+        height={h * rendererWrapper.pixelRatio}
+        style={{ width: w, height: h }}
+        ref={refContainer}
+      />
+    </Box>
+  );
+}