@pretty-chitty/core 1.1.2 → 1.2.1

package/src/library/components/GalleryViewer.tsx

@@ -1,773 +1,4 @@
-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>
-  );
-}
+// This file is kept for backward compatibility
+// The implementation has been moved to the Gallery folder for better organization
+export { GalleryViewer } from "./Gallery";
+export type { GalleryItem, GalleryItemSource } from "./Gallery";