@pretty-chitty/core 1.1.1

package/dist/components/GalleryViewer.d.ts

@@ -0,0 +1,48 @@
+import { Object3D } from "three";
+import { IconMap } from "../utilities/CanvasStack/CanvasOperations";
+import { RichTextRenderOptionsParameters } from "../utilities/CanvasStack/RichTextRenderer";
+import { SceneWrapper } from "../rendering/outline";
+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;
+}
+export declare function GalleryViewer({ items, paused, galleryItemWidth, fov, angle, onClose, itemSpacing, tweenDuration, w, h, galleryItemHeight, showSummary, }: {
+    items: GalleryItem[];
+    w: number;
+    h: number;
+    fov?: number;
+    angle?: number;
+    itemSpacing: number;
+    paused?: boolean;
+    tweenDuration?: number;
+    galleryItemWidth?: number;
+    galleryItemHeight?: number;
+    onClose?: () => void;
+    showSummary?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=GalleryViewer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryViewer.d.ts","sourceRoot":"","sources":["../../src/library/components/GalleryViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,QAAQ,EAMT,MAAM,OAAO,CAAC;AAQf,OAAO,EAEL,OAAO,EAIR,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EAAE,+BAA+B,EAAE,MAAM,2CAA2C,CAAC;AAC5F,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAQpD,KAAK,cAAc,GAAG,MAAM,IAAI,CAAC;AAEjC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,CAAC,YAAY,EAAE,YAAY,GAAG,QAAQ,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uBAAuB,CAAC,EAAE,+BAA+B,CAAC;IAE1D;;;OAGG;IACH,qBAAqB,CAAC,EAAE,EAAE,cAAc,GAAG,cAAc,CAAC;CAC3D;AAED,MAAM,WAAW,iBAAiB;IAChC,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,IAAI,KAAK,IAAI,WAAW,EAAE,CAAC;IAE3B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,EAAE,cAAc,GAAG,cAAc,CAAC;IAC1D,KAAK,IAAI,IAAI,CAAC;CACf;AAqfD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAc,EACd,gBAAsB,EACtB,GAAQ,EACR,KAAqB,EACrB,OAAO,EACP,WAAgB,EAChB,aAAmB,EACnB,CAAK,EACL,CAAK,EACL,iBAA2B,EAC3B,WAAkB,GACnB,EAAE;IACD,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,kDA4KA"}

package/dist/components/GalleryViewer.js

@@ -0,0 +1,567 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AmbientLight, Box3, DirectionalLight, Fog, Group, Mesh, PerspectiveCamera, PlaneGeometry, Raycaster, Scene, Vector3, } from "three";
+import { Box } from "@mui/material";
+import { 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, LayeredCanvasOperation, MarkdownCanvasOperation, PadCanvasOperation, } from "../utilities/CanvasStack/CanvasOperations";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { SceneWrapper } from "../rendering/outline";
+import { requestSharedAnimationFrame } from "../utilities/RequestSharedAnimationFrame";
+import { TextureReferenaceCounter } from "../rendering/TextureReferenceCounter";
+let ID_COUNTER = 1;
+const SCALE_FACTOR = 20;
+class GalleryController {
+    constructor(sceneWrapper, theme, offsetAngle, fov) {
+        this.sceneWrapper = sceneWrapper;
+        this.theme = theme;
+        this.offsetAngle = offsetAngle;
+        this.w = 100 / SCALE_FACTOR;
+        this.h = 100 / SCALE_FACTOR;
+        this.itemWidth = 100 / SCALE_FACTOR;
+        this.itemHeight = 100 / SCALE_FACTOR;
+        this.tweenDuration = 250;
+        this.showSummary = true;
+        this.changed = false;
+        this.itemSpacing = 100 / SCALE_FACTOR;
+        this.itemsPerPage = 1;
+        this.frontStageWidth = 1;
+        this.offsetX = 0;
+        this.effectiveItemHeight = 0;
+        this.baseCameraZ = 500 / SCALE_FACTOR;
+        this.items = [];
+        this.leavingItems = [];
+        this.itemLookup = {};
+        this._rawItems = [];
+        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() {
+        return this.sceneWrapper.scene;
+    }
+    markHasChange() {
+        this.changed = true;
+    }
+    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;
+    }
+    setSize(w, h, itemWidth, itemHeight, itemSpacing) {
+        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, y) {
+        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;
+    }
+    pan(deltaX, 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) {
+        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, maximumWidth, maximumHeight) {
+        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) {
+        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 = {
+            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);
+    }
+    setItems(items) {
+        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 = (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, }) {
+    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(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) => {
+            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 = 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;
+        const wheelListener = (ev) => {
+            const dy = ev.wheelDeltaY;
+            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 (_jsx(Box, { sx: { position: "absolute", top: 0, right: 0, left: 0, bottom: 0 }, children: _jsx("canvas", { width: w * rendererWrapper.pixelRatio, height: h * rendererWrapper.pixelRatio, style: { width: w, height: h }, ref: refContainer }) }));
+}
+//# sourceMappingURL=GalleryViewer.js.map