@pretty-chitty/core 1.1.2 → 1.2.1

package/src/library/components/Gallery/GalleryViewer.tsx

@@ -0,0 +1,211 @@
+import { Box } from "@mui/material";
+import React, { useEffect, useRef, useState } from "react";
+import Hammer from "@egjs/hammerjs";
+import { Scene } from "three";
+import { addWheelListener, removeWheelListener } from "wheel";
+import { useWebGlRenderer } from "../../hooks/useWebGlRenderer";
+import { useGameTheme } from "../../hooks/useGameTheme";
+import { SceneWrapper } from "../../rendering/outline";
+import { requestSharedAnimationFrame } from "../../utilities/RequestSharedAnimationFrame";
+import { TextureReferenceCounter } from "../../rendering/TextureReferenceCounter";
+import { GalleryController } from "./GalleryController";
+import { GalleryItem, SummaryMode } from "./types";
+import {
+  DEFAULT_TWEEN_DURATION,
+  DEFAULT_FOV,
+  DEFAULT_ANGLE,
+  DEFAULT_ITEM_WIDTH,
+  DEFAULT_ITEM_SPACING,
+  DEFAULT_Z_FACTOR,
+  VELOCITY_MULTIPLIER,
+  WHEEL_SENSITIVITY,
+  WHEEL_SNAP_DELAY,
+} from "./constants";
+
+let ID_COUNTER = 1;
+
+export interface GalleryViewerProps {
+  items: GalleryItem[];
+  w: number;
+  h: number;
+  fov?: number;
+  angle?: number;
+  itemSpacing?: number;
+  paused?: boolean;
+  tweenDuration?: number;
+  galleryItemWidth?: number;
+  galleryItemHeight?: number;
+  onClose?: () => void;
+  showSummary?: SummaryMode;
+  zFactor?: number;
+}
+
+export function GalleryViewer({
+  items,
+  paused = false,
+  galleryItemWidth = DEFAULT_ITEM_WIDTH,
+  fov = DEFAULT_FOV,
+  angle = DEFAULT_ANGLE,
+  onClose,
+  itemSpacing = DEFAULT_ITEM_SPACING,
+  tweenDuration = DEFAULT_TWEEN_DURATION,
+  w = 0,
+  h = 0,
+  galleryItemHeight = h * 0.7,
+  showSummary = "full",
+  zFactor = DEFAULT_Z_FACTOR,
+}: GalleryViewerProps) {
+  const calcedItemWidth =
+    items.length > 0 ? Math.min(...items.map((item) => item.preferredWidth ?? galleryItemWidth)) : galleryItemWidth;
+  const calcedItemHeight =
+    items.length > 0 ? Math.min(...items.map((item) => item.preferredHeight ?? galleryItemHeight)) : 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.setTweenDuration(tweenDuration);
+  galleryController.showSummary = showSummary;
+
+  // Single effect to handle both size and items changes
+  useEffect(() => {
+    if (!w || !h || !Number.isFinite(calcedItemHeight) || !Number.isFinite(calcedItemWidth)) {
+      return;
+    }
+
+    // Always call setSize which will internally call setItems
+    // This ensures items are always rendered with the correct dimensions
+    galleryController.setSize({
+      w,
+      h,
+      itemWidth: calcedItemWidth,
+      itemHeight: calcedItemHeight,
+      itemSpacing,
+      zFactor,
+    });
+  }, [calcedItemWidth, itemSpacing, calcedItemHeight, w, h, galleryController, zFactor]);
+
+  useEffect(() => {
+    galleryController.setItems(items);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [galleryController, items.map((i) => i.id).join("--")]);
+
+  useEffect(() => {
+    const canvas = refContainer.current;
+    if (!canvas || !rendererWrapper || paused) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    let cancelled = false;
+
+    const animate = () => {
+      if (cancelled) return;
+      requestSharedAnimationFrame(animate);
+
+      const isAnimating = galleryController.render();
+
+      if (isAnimating) {
+        ctx.canvas.width = w * rendererWrapper.pixelRatio;
+        ctx.canvas.height = h * rendererWrapper.pixelRatio;
+        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 }));
+    hammer.add(new Hammer.Tap());
+
+    const fixPosition = (ev: any) => {
+      const rect = el.getBoundingClientRect();
+      return { x: ev.center.x - rect.left, y: ev.center.y - rect.top };
+    };
+
+    hammer.on("tap", (ev) => {
+      const pos = fixPosition(ev);
+      // TODO: fix this
+      if (galleryController.isAnimating()) {
+        galleryController.pan(0, true);
+      } else {
+        const tappedItem = galleryController.getItemAtPosition(pos.x, pos.y);
+        if (tappedItem?.onClick) {
+          tappedItem.onClick();
+        } else if (!tappedItem && 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 * VELOCITY_MULTIPLIER, true);
+      lastVelocityX = 0;
+    });
+
+    let wheelTimeout: NodeJS.Timeout;
+    const wheelListener = (ev: WheelEvent) => {
+      const dy = (ev as any).wheelDeltaY as number;
+      galleryController.pan(dy / WHEEL_SENSITIVITY, false);
+      ev.preventDefault();
+      clearTimeout(wheelTimeout);
+      wheelTimeout = setTimeout(() => galleryController.pan(0, true), WHEEL_SNAP_DELAY);
+    };
+
+    addWheelListener(el, wheelListener);
+
+    return () => {
+      hammer.destroy();
+      removeWheelListener(el, wheelListener);
+    };
+  }, [galleryController, onClose]);
+
+  useEffect(() => {
+    TextureReferenceCounter.registerInstance(galleryController);
+    return () => {
+      TextureReferenceCounter.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>
+  );
+}

package/src/library/components/Gallery/LayoutManager.ts

@@ -0,0 +1,166 @@
+import { GameTheme } from "../../game/GameTheme";
+import { SummaryMode } from "./types";
+
+export class LayoutManager {
+  // Dimensions (all scaled)
+  private w = 100;
+  private h = 100;
+
+  private baseItemWidth = 100;
+  private baseItemHeight = 100;
+  private itemSpacing = 100;
+
+  // Layout calculated values
+  private itemWidth = 100;
+  private itemHeight = 100;
+  private itemsPerPage = 1;
+  private frontStageWidth = 1;
+  private itemCount = 1;
+
+  // Original requested dimensions
+  private itemPreferredWidth?: number;
+  private itemPreferredHeight?: number;
+
+  // summary info
+  private summaryMode: SummaryMode = "full";
+  private summaryMaxHeight = 0;
+
+  public dirty = false;
+
+  constructor(private theme: GameTheme) {}
+
+  setDimensions(w: number, h: number) {
+    if (this.w !== w || this.h !== h) {
+      this.w = w;
+      this.h = h;
+      this.dirty = true;
+      this.recalculateEffectiveItemDimensions();
+    }
+  }
+
+  setSummaryMaxHeight(newHeight: number) {
+    if (this.summaryMaxHeight !== newHeight) {
+      this.summaryMaxHeight = newHeight;
+      this.dirty = true;
+      this.recalculateEffectiveItemDimensions();
+    }
+  }
+
+  getSummaryMaxHeight() {
+    return this.summaryMaxHeight;
+  }
+
+  getSummaryMode() {
+    return this.summaryMode;
+  }
+
+  setSummaryMode(mode: SummaryMode) {
+    if (this.summaryMode !== mode) {
+      this.summaryMode = mode;
+      this.dirty = true;
+    }
+  }
+
+  getDimensions() {
+    return { w: this.w, h: this.h };
+  }
+
+  getItemDimensions() {
+    return { w: this.itemWidth, h: this.itemHeight, summaryMaxHeight: this.summaryMaxHeight };
+  }
+
+  getStageDimensions() {
+    return { frontStageWidth: this.frontStageWidth, itemsPerPage: this.itemsPerPage, itemSpacing: this.itemSpacing };
+  }
+
+  setBaseItemDimensions(itemW: number, itemH: number, itemSpacing: number) {
+    if (this.baseItemWidth !== itemW || this.baseItemHeight !== itemH || this.itemSpacing !== itemSpacing) {
+      this.baseItemWidth = itemW;
+      this.baseItemHeight = itemH;
+      this.itemSpacing = itemSpacing;
+      this.dirty = true;
+      this.recalculateEffectiveItemDimensions();
+    }
+  }
+
+  setItemCount(count: number) {
+    if (this.itemCount !== count) {
+      this.itemCount = count;
+      this.recalculateEffectiveItemDimensions();
+      this.dirty = true;
+    }
+  }
+
+  setItemDimensions(items: { preferredWidth?: number; preferredHeight?: number }[]) {
+    let newPreferredWidth: number | undefined = 0,
+      newPreferredHeight: number | undefined = 0;
+    for (const item of items) {
+      if (item.preferredWidth !== undefined && newPreferredWidth !== undefined) {
+        newPreferredWidth = Math.max(newPreferredWidth, item.preferredWidth);
+      } else {
+        newPreferredWidth = undefined;
+      }
+
+      if (item.preferredHeight !== undefined && newPreferredHeight !== undefined) {
+        newPreferredHeight = Math.max(newPreferredHeight, item.preferredHeight);
+      } else {
+        newPreferredHeight = undefined;
+      }
+    }
+
+    if (this.itemPreferredWidth !== newPreferredWidth || this.itemPreferredHeight !== newPreferredHeight) {
+      this.itemPreferredWidth = newPreferredWidth;
+      this.itemPreferredHeight = newPreferredHeight;
+      this.dirty = true;
+      this.recalculateEffectiveItemDimensions();
+    }
+  }
+
+  recalculateEffectiveItemDimensions() {
+    // recalcs itemWidth,itemHeight,itemsPerPage and frontStageWidth
+
+    let itemWidth = this.itemPreferredWidth ?? this.baseItemWidth;
+    let itemHeight = this.itemPreferredHeight ?? this.baseItemHeight;
+    const aspectRatio = itemWidth / itemHeight;
+
+    const maxItemHeight = Math.max(
+      this.theme.galleryItemMinimumHeight,
+      this.h - this.itemSpacing * 2 - this.summaryMaxHeight,
+    );
+    const maxItemWidth = Math.max(this.theme.galleryItemMinimumWidth, this.w - this.itemSpacing * 2);
+
+    if (itemHeight > maxItemHeight) {
+      itemHeight = maxItemHeight;
+      itemWidth = maxItemHeight * aspectRatio;
+    }
+    if (itemWidth > maxItemWidth) {
+      itemWidth = maxItemWidth;
+      itemHeight = maxItemWidth / aspectRatio;
+    }
+
+    itemWidth = Math.max(this.theme.galleryItemMinimumWidth, itemWidth);
+
+    const itemsPerPage = Math.max(
+      1,
+      Math.min(this.itemCount, Math.floor((this.w - this.itemSpacing * 2) / (itemWidth + this.itemSpacing))),
+    );
+    const frontStageWidth = itemsPerPage * (itemWidth + this.itemSpacing) - this.itemSpacing;
+
+    if (
+      this.itemHeight !== itemHeight ||
+      this.itemWidth !== itemWidth ||
+      this.itemsPerPage !== itemsPerPage ||
+      this.frontStageWidth !== frontStageWidth
+    ) {
+      this.itemHeight = itemHeight;
+      this.itemWidth = itemWidth;
+      this.itemsPerPage = itemsPerPage;
+      this.frontStageWidth = frontStageWidth;
+      this.dirty = true;
+    }
+  }
+
+  calculateItemIndexOffset(itemCount: number): number {
+    return itemCount < this.itemsPerPage ? (this.itemsPerPage - itemCount) / 2 : 0;
+  }
+}

package/src/library/components/Gallery/constants.ts

@@ -0,0 +1,12 @@
+export const DEFAULT_TWEEN_DURATION = 250;
+export const MAX_SNAP_DURATION = 750;
+export const SNAP_DURATION_MULTIPLIER = 20;
+export const ROTATION_DIVISOR = 1500;
+export const VELOCITY_MULTIPLIER = 300;
+export const WHEEL_SENSITIVITY = 3;
+export const WHEEL_SNAP_DELAY = 50;
+export const DEFAULT_FOV = 15;
+export const DEFAULT_ANGLE = Math.PI * 0.0;
+export const DEFAULT_ITEM_WIDTH = 200;
+export const DEFAULT_ITEM_SPACING = 50;
+export const DEFAULT_Z_FACTOR = 3;

package/src/library/components/Gallery/index.ts

@@ -0,0 +1,2 @@
+export { GalleryViewer } from "./GalleryViewer";
+export type { GalleryItem, GalleryItemSource } from "./types";

package/src/library/components/Gallery/types.ts

@@ -0,0 +1,55 @@
+import { Object3D } from "three";
+import { IconMap } from "../../utilities/CanvasStack/CanvasOperations";
+import { RichTextRenderOptionsParameters } from "../../utilities/CanvasStack/RichTextRenderer";
+import { SceneWrapper } from "../../rendering/outline";
+
+export type UpdateCallback = () => void;
+
+export interface GalleryItem {
+  id: string;
+  createMesh(sceneWrapper: SceneWrapper): Object3D;
+  onClick?: () => void;
+
+  maximumWidth?: number;
+  maximumHeight?: number;
+
+  preferredWidth?: number;
+  preferredHeight?: number;
+
+  summary?: string;
+  shortSummary?: string;
+  summaryIconMap?: IconMap;
+  summaryRenderingOptions?: RichTextRenderOptionsParameters;
+  shortSummaryRenderingOptions?: 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;
+
+  inlineGallerySize?: number;
+}
+
+export interface GallerySizeConfig {
+  w: number;
+  h: number;
+  itemWidth: number;
+  itemHeight: number;
+  itemSpacing: number;
+  zFactor: number;
+}
+
+export type SummaryMode = "full" | "partial" | "none";

package/src/library/components/GalleryPlayground.tsx

@@ -30,7 +30,7 @@ export default function GalleryPlayground({ game }: { game: Game<any, any> }) {
   useEffect(() => {
     setTimeout(() => {
       const index = Math.floor(Math.random() * items.length);
-      if (Math.random() > 0.5) {
+      if (Math.random() > 0.75) {
         const item = new MyItem(Math.random() * 0xffffff, Math.random().toString());
 
         setItems(items.slice(0, index).concat([item]).concat(items.slice(index)));