@tableslayer/ui 0.1.3 → 0.1.4

package/src/lib/components/Stage/components/Scene/types.ts

@@ -0,0 +1,225 @@
+import type { ToneMappingMode } from 'postprocessing';
+
+export enum SceneLoadingState {
+  LoadingMap = 1,
+  Resizing = 2,
+  Rendering = 3,
+  Initialized = 4
+}
+
+export enum SceneRotation {
+  Deg0 = 0,
+  Deg90 = 90,
+  Deg180 = 180,
+  Deg270 = 270
+}
+
+export enum SceneLayer {
+  Main = 0,
+  Overlay = 1,
+  Input = 2
+}
+
+export enum SceneLayerOrder {
+  Background = 0,
+  Map = 10,
+  Fog = 20,
+  Weather = 30,
+  EffectAnnotation = 35, // Effect annotations render under fog of war
+  Marker = 37, // Markers render above effect annotations but below fog of war
+  FogOfWar = 40,
+  Grid = 50,
+  EdgeOverlay = 70,
+  Annotation = 80, // Color annotations render over fog of war
+  Measurement = 90,
+  Cursor = 100
+}
+
+export interface SceneLayerProps {
+  /**
+   * Whether the scene layer should auto fit
+   */
+  autoFit: boolean;
+
+  /**
+   * The position of the scene layer within the canvas
+   */
+  offset: { x: number; y: number };
+
+  /**
+   * The rotation of the scene layer in degrees
+   */
+  rotation: SceneRotation;
+
+  /**
+   * The scale of the scene layer
+   */
+  zoom: number;
+}
+
+import type { Marker } from '../MarkerLayer/types';
+
+export interface SceneExports {
+  fill: () => void;
+  fit: () => void;
+  generateThumbnail: () => Promise<Blob>;
+  getMarkerScreenPosition: (marker: Marker) => { x: number; y: number } | null;
+
+  annotations: {
+    clear: (layerId: string) => void;
+    toRLE: () => Promise<Uint8Array>;
+    fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+    loadMask: (layerId: string, rleData: Uint8Array) => Promise<void>;
+    isDrawing: () => boolean;
+  };
+
+  fogOfWar: {
+    clear: () => void;
+    reset: () => void;
+    toPng: () => Promise<Blob>;
+    toRLE: () => Promise<Uint8Array>;
+    fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+    isDrawing: () => boolean;
+  };
+
+  map: {
+    fit: () => void;
+    fill: () => void;
+    getSize: () => { width: number; height: number } | null;
+  };
+
+  markers: {
+    isHoveringMarker: boolean;
+    isDraggingMarker: boolean;
+    hoveredMarker: Marker | null;
+    selectedMarker: Marker | null;
+    maintainHover: (maintain: boolean) => void;
+    onSceneChange: () => void;
+  };
+
+  getMarkerSizeInScreenSpace: (markerSize: number) => number;
+
+  measurement: {
+    getCurrentMeasurement: () => {
+      startPoint: { x: number; y: number } | null;
+      endPoint: { x: number; y: number } | null;
+      type: number;
+    } | null;
+    isDrawing: () => boolean;
+  };
+}
+
+/**
+ * Properties for post-processing effects
+ */
+export interface PostProcessingProps {
+  /**
+   * Whether post-processing is enabled
+   */
+  enabled: boolean;
+
+  /**
+   * Bloom effect properties
+   */
+  bloom: {
+    /**
+     * Whether the bloom effect is enabled
+     */
+    enabled: boolean;
+
+    /**
+     * Overall intensity of the bloom effect (0-1)
+     */
+    intensity: number;
+
+    /**
+     * Luminance threshold for what pixels will bloom (0-1)
+     */
+    threshold: number;
+
+    /**
+     * How smoothly the bloom transitions at the threshold (0-1)
+     */
+    smoothing: number;
+
+    /**
+     * Radius of the bloom effect
+     */
+    radius: number;
+
+    /**
+     * Levels of the bloom effect
+     */
+    levels: number;
+
+    /**
+     * Whether to apply mipmap blur
+     */
+    mipmapBlur: boolean;
+  };
+
+  /**
+   * Chromatic aberration effect properties
+   */
+  chromaticAberration: {
+    /**
+     * Whether the chromatic aberration effect is enabled
+     */
+    enabled: boolean;
+
+    /**
+     * The offset of the chromatic aberration effect
+     */
+    offset: number;
+  };
+
+  /**
+   * LUT effect properties
+   */
+  lut: {
+    /**
+     * Whether the LUT3D effect is enabled
+     */
+    enabled: boolean;
+
+    /**
+     * The URL of the LUT to use
+     */
+    url: string | null;
+  };
+
+  /**
+   * Tone mapping effect properties
+   */
+  toneMapping: {
+    /**
+     * Whether the tone mapping effect is enabled
+     */
+    enabled: boolean;
+
+    /**
+     * The mode of the tone mapping effect
+     */
+    mode: ToneMappingMode;
+  };
+
+  /**
+   * Vignette effect properties
+   */
+  vignette: {
+    /**
+     * Whether the vignette effect is enabled
+     */
+    enabled: boolean;
+
+    /**
+     * How far from the center the vignette starts (0-1)
+     */
+    offset: number;
+
+    /**
+     * How dark the vignette effect is (0-1)
+     */
+    darkness: number;
+  };
+}

package/src/lib/components/Stage/components/Stage/Stage.svelte

@@ -0,0 +1,332 @@
+<script lang="ts">
+  import { Canvas, T } from '@threlte/core';
+  import * as THREE from 'three';
+  import type { Callbacks, StageProps } from './types';
+  import Scene from '../Scene/Scene.svelte';
+  import { type SceneExports, SceneLayerOrder } from '../Scene/types';
+  import { setContext } from 'svelte';
+  import { PerfMonitor } from '@threlte/extras';
+  import { MarkerTooltip } from '../../../MarkerTooltip';
+
+  import type { CursorData } from './types';
+
+  /**
+   * Creates a custom WebGL renderer with high-performance settings.
+   * This fixes Chrome/Mac performance issues by:
+   * - Requesting high-performance GPU mode (critical for macOS)
+   * - Disabling unnecessary features like stencil buffer
+   */
+  const createRenderer = (canvas: HTMLCanvasElement) => {
+    return new THREE.WebGLRenderer({
+      canvas,
+      powerPreference: 'high-performance',
+      antialias: true,
+      alpha: false,
+      stencil: false,
+      depth: true
+    });
+  };
+
+  interface Props {
+    props: StageProps;
+    callbacks: Callbacks;
+    receivedMeasurement?: {
+      startPoint: { x: number; y: number };
+      endPoint: { x: number; y: number };
+      type: number;
+      beamWidth?: number;
+      coneAngle?: number;
+      // Visual properties
+      color?: string;
+      thickness?: number;
+      outlineColor?: string;
+      outlineThickness?: number;
+      opacity?: number;
+      markerSize?: number;
+      // Timing properties
+      autoHideDelay?: number;
+      fadeoutTime?: number;
+      // Distance properties
+      showDistance?: boolean;
+      snapToGrid?: boolean;
+      enableDMG252?: boolean;
+    } | null;
+    cursors?: CursorData[];
+    trackLocalCursor?: boolean;
+    hoveredMarkerId?: string | null;
+    pinnedMarkerIds?: string[];
+    onPinToggle?: (markerId: string, pinned: boolean) => void;
+  }
+
+  let {
+    props,
+    callbacks,
+    receivedMeasurement = null,
+    cursors = [],
+    trackLocalCursor = false,
+    hoveredMarkerId = null,
+    pinnedMarkerIds = [],
+    onPinToggle
+  }: Props = $props();
+
+  let sceneRef = $state<SceneExports>();
+  let containerElement = $state<HTMLDivElement>();
+  let tooltipPosition = $state<{ x: number; y: number } | null>(null);
+  interface MarkerData {
+    id: string;
+    title?: string;
+    note?: unknown;
+    visibility?: number;
+    size?: number;
+    tooltip?: {
+      title?: string;
+      content?: unknown;
+    };
+  }
+
+  let hoveredMarkerData = $state<MarkerData | null>(null);
+  let markerSizeInPixels = $state<number>(40);
+
+  let pinnedTooltips = $state<
+    Array<{
+      marker: MarkerData;
+      position: { x: number; y: number };
+      preferredPlacement: 'top' | 'bottom' | 'left' | 'right';
+    }>
+  >([]);
+
+  const renderedTooltips = new Map<string, { element: HTMLElement; bounds: DOMRect }>();
+
+  let stageContext = $state({ mode: props.mode, hoveredMarkerId, pinnedMarkerIds });
+  setContext('stage', stageContext);
+
+  $effect(() => {
+    stageContext.mode = props.mode;
+    stageContext.hoveredMarkerId = hoveredMarkerId;
+    stageContext.pinnedMarkerIds = pinnedMarkerIds;
+  });
+
+  setContext('callbacks', callbacks);
+
+  export const annotations = {
+    clear: (layerId: string) => sceneRef?.annotations.clear(layerId),
+    toRLE: () => sceneRef?.annotations?.toRLE() ?? Promise.resolve(new Uint8Array()),
+    fromRLE: (rleData: Uint8Array, width: number, height: number) =>
+      sceneRef?.annotations?.fromRLE(rleData, width, height) ?? Promise.resolve(),
+    loadMask: (layerId: string, rleData: Uint8Array) =>
+      sceneRef?.annotations?.loadMask(layerId, rleData) ?? Promise.resolve(),
+    isDrawing: () => sceneRef?.annotations?.isDrawing() ?? false
+  };
+
+  export const map = {
+    fill: () => sceneRef?.map.fill(),
+    fit: () => sceneRef?.map.fit(),
+    getSize: () => sceneRef?.map?.getSize?.() ?? null
+  };
+
+  export const fogOfWar = {
+    clear: () => sceneRef?.fogOfWar.clear(),
+    reset: () => sceneRef?.fogOfWar.reset(),
+    toPng: () => sceneRef?.fogOfWar.toPng() ?? Promise.resolve(new Blob()),
+    toRLE: () => sceneRef?.fogOfWar.toRLE() ?? Promise.resolve(new Uint8Array()),
+    fromRLE: (rleData: Uint8Array, width: number, height: number) =>
+      sceneRef?.fogOfWar.fromRLE(rleData, width, height) ?? Promise.resolve(),
+    isDrawing: () => sceneRef?.fogOfWar?.isDrawing() ?? false
+  };
+
+  export const scene = {
+    fill: () => sceneRef?.fill(),
+    fit: () => sceneRef?.fit(),
+    generateThumbnail: () => sceneRef?.generateThumbnail() ?? Promise.resolve(new Blob())
+  };
+
+  export const markers = {
+    get isHoveringMarker() {
+      return sceneRef?.markers?.isHoveringMarker ?? false;
+    },
+    get isDraggingMarker() {
+      return sceneRef?.markers?.isDraggingMarker ?? false;
+    }
+  };
+
+  export const measurement = {
+    getCurrentMeasurement: () => sceneRef?.measurement?.getCurrentMeasurement() ?? null,
+    isDrawing: () => sceneRef?.measurement?.isDrawing() ?? false
+  };
+
+  /**
+   * Called when the scene changes to clear all transient state.
+   * Clears tooltips, marker hover/selection, and other scene-specific state.
+   */
+  export function onSceneChange() {
+    // Clear tooltip state
+    hoveredMarkerData = null;
+    tooltipPosition = null;
+
+    // Clear marker interaction state
+    sceneRef?.markers?.onSceneChange?.();
+  }
+
+  $effect(() => {
+    // Update marker size when zoom changes or marker data changes
+    const zoom = props.scene.zoom;
+    if (sceneRef?.getMarkerSizeInScreenSpace) {
+      const markerSize = hoveredMarkerData?.size || 1;
+      markerSizeInPixels = sceneRef.getMarkerSizeInScreenSpace(markerSize);
+    }
+    // Use zoom to avoid unused variable warning
+    void zoom;
+  });
+
+  $effect(() => {
+    // Only show pinned tooltips in DM mode when activeLayer is None (0) or Marker (2)
+    // In player mode, always show pinned tooltips
+    const shouldShowPinnedTooltips = props.mode === 1 || props.activeLayer === 0 || props.activeLayer === 2;
+
+    if (
+      pinnedMarkerIds &&
+      pinnedMarkerIds.length > 0 &&
+      containerElement &&
+      sceneRef?.getMarkerScreenPosition &&
+      shouldShowPinnedTooltips
+    ) {
+      const newPinnedTooltips = [];
+
+      const placementPatterns = [
+        ['top', 'bottom', 'left', 'right'],
+        ['bottom', 'top', 'right', 'left'],
+        ['left', 'right', 'top', 'bottom'],
+        ['right', 'left', 'bottom', 'top']
+      ];
+
+      for (let i = 0; i < pinnedMarkerIds.length; i++) {
+        const markerId = pinnedMarkerIds[i];
+        const marker = props.marker.markers.find((m) => m.id === markerId);
+        if (marker) {
+          const screenPos = sceneRef.getMarkerScreenPosition(marker);
+          if (screenPos) {
+            const pattern = placementPatterns[i % placementPatterns.length];
+            const preferredPlacement = pattern[0] as 'top' | 'bottom' | 'left' | 'right';
+
+            newPinnedTooltips.push({ marker, position: screenPos, preferredPlacement });
+          }
+        }
+      }
+      pinnedTooltips = newPinnedTooltips;
+    } else {
+      pinnedTooltips = [];
+    }
+  });
+
+  $effect(() => {
+    let markerForTooltip = null;
+
+    if (props.mode === 0) {
+      const hoveredMarker = sceneRef?.markers?.hoveredMarker;
+      const isDragging = sceneRef?.markers?.isDraggingMarker;
+      // Only show tooltips when activeLayer is None (0) or Marker (2)
+      // MapLayerType: None = 0, FogOfWar = 1, Marker = 2, Annotation = 3, Measurement = 4
+      const isMarkerOrNoneLayer = props.activeLayer === 0 || props.activeLayer === 2;
+      if (hoveredMarker && !pinnedMarkerIds.includes(hoveredMarker.id) && !isDragging && isMarkerOrNoneLayer) {
+        // Look up the current marker from the markers array by ID to handle Y.js updates
+        // This prevents stale marker references from breaking tooltips after sync
+        const currentMarker = props.marker.markers.find((m) => m.id === hoveredMarker.id);
+        markerForTooltip = currentMarker || hoveredMarker;
+      }
+    } else if (props.mode === 1) {
+      // Player mode - only show tooltips for markers where:
+      // 1. The marker is pinned (handled separately in pinnedTooltips)
+      // 2. The marker visibility is "On hover" (MarkerVisibility.Hover = 3) AND DM is hovering
+      // 3. The marker visibility is "Everyone" (MarkerVisibility.Always = 0) AND DM is hovering
+      let dmBroadcastMarker = null;
+      if (hoveredMarkerId) {
+        if (!pinnedMarkerIds.includes(hoveredMarkerId)) {
+          const marker = props.marker.markers.find((m) => m.id === hoveredMarkerId);
+          // Only show if marker visibility is "On hover" or "Everyone"
+          // MarkerVisibility: Always = 0, DM = 1, Player = 2, Hover = 3
+          if (marker && (marker.visibility === 0 || marker.visibility === 3)) {
+            dmBroadcastMarker = marker;
+          }
+        }
+      }
+
+      // In player mode, also check if player has selected a marker
+      // But only show tooltip if it has appropriate visibility (not DM-only)
+      const selectedByPlayer = sceneRef?.markers?.selectedMarker;
+      const isDragging = sceneRef?.markers?.isDraggingMarker;
+      let selectedNotPinned = null;
+      if (selectedByPlayer && !pinnedMarkerIds.includes(selectedByPlayer.id) && !isDragging) {
+        // Only show if marker visibility is not DM-only (i.e., not visibility = 1)
+        // MarkerVisibility: Always = 0, DM = 1, Player = 2, Hover = 3
+        if (selectedByPlayer.visibility !== 1) {
+          selectedNotPinned = selectedByPlayer;
+        }
+      }
+
+      markerForTooltip = dmBroadcastMarker || selectedNotPinned;
+    }
+
+    if (markerForTooltip && containerElement) {
+      hoveredMarkerData = markerForTooltip;
+      const screenPos = sceneRef?.getMarkerScreenPosition?.(markerForTooltip);
+      if (screenPos) {
+        tooltipPosition = screenPos;
+      }
+    } else {
+      hoveredMarkerData = null;
+      tooltipPosition = null;
+    }
+  });
+</script>
+
+<div bind:this={containerElement} style="height: 100%; width: 100%; position: relative;">
+  <Canvas {createRenderer} renderMode="always">
+    <T.Mesh scale={[100000, 100000, 1]} layers={[SceneLayerOrder.Background]}>
+      <T.PlaneGeometry />
+      <T.MeshBasicMaterial color={props.backgroundColor} />
+    </T.Mesh>
+
+    <Scene bind:this={sceneRef} {props} {receivedMeasurement} {cursors} {trackLocalCursor} />
+    {#if props.debug.enableStats}
+      <PerfMonitor logsPerSecond={props.debug.loggingRate} anchorX={'right'} anchorY={'bottom'} />
+    {/if}
+  </Canvas>
+
+  {#each pinnedTooltips as { marker, position, preferredPlacement }, index}
+    <MarkerTooltip
+      {marker}
+      {position}
+      {containerElement}
+      markerDiameter={sceneRef?.getMarkerSizeInScreenSpace ? sceneRef.getMarkerSizeInScreenSpace(marker.size || 1) : 40}
+      isDM={props.mode === 0}
+      isPinned={true}
+      {onPinToggle}
+      {preferredPlacement}
+      existingTooltips={Array.from(renderedTooltips.values()).filter((t, i) => i < index)}
+      onTooltipMount={(element, bounds) => {
+        renderedTooltips.set(marker.id, { element, bounds });
+      }}
+      onTooltipUnmount={() => {
+        renderedTooltips.delete(marker.id);
+      }}
+    />
+  {/each}
+
+  {#if hoveredMarkerData}
+    <MarkerTooltip
+      marker={hoveredMarkerData}
+      position={tooltipPosition}
+      {containerElement}
+      markerDiameter={markerSizeInPixels}
+      isDM={props.mode === 0}
+      isPinned={false}
+      {onPinToggle}
+      existingTooltips={Array.from(renderedTooltips.values())}
+      onTooltipHover={(isHovering) => {
+        if (props.mode === 0 && sceneRef?.markers?.maintainHover) {
+          sceneRef.markers.maintainHover(isHovering);
+        }
+      }}
+    />
+  {/if}
+</div>

package/src/lib/components/Stage/components/Stage/types.ts

@@ -0,0 +1,136 @@
+import type { AnnotationsLayerProps } from '../AnnotationLayer/types';
+import type { EdgeOverlayProps } from '../EdgeOverlayLayer/types';
+import type { FogLayerProps } from '../FogLayer/types';
+import type { FogOfWarLayerProps } from '../FogOfWarLayer/types';
+import type { GridLayerProps } from '../GridLayer/types';
+import type { MapLayerProps, MapLayerType } from '../MapLayer/types';
+import type { Marker, MarkerLayerProps } from '../MarkerLayer/types';
+import type { MeasurementLayerProps } from '../MeasurementLayer/types';
+import type { PostProcessingProps, SceneLayerProps } from '../Scene/types';
+import type { WeatherLayerProps } from '../WeatherLayer/types';
+export type { CursorData } from '../CursorLayer/types';
+
+export interface Callbacks {
+  onAnnotationUpdate: (layerId: string, blob: Promise<Blob>, endPosition?: { x: number; y: number }) => void;
+  onFogUpdate: (blob: Promise<Blob>) => void;
+  onMapUpdate: (offset: { x: number; y: number }, zoom: number) => void;
+  onSceneUpdate: (offset: { x: number; y: number }, zoom: number) => void;
+  onStageLoading: () => void;
+  onStageInitialized: () => void;
+  onMarkerAdded: (marker: Marker) => void;
+  onMarkerMoved: (marker: Marker, position: { x: number; y: number }) => void;
+  onMarkerSelected: (marker: Marker | null) => void;
+  onMarkerContextMenu: (marker: Marker, event: MouseEvent | TouchEvent) => void;
+  onMeasurementStart?: (startPoint: { x: number; y: number }, type: number) => void;
+  onMeasurementUpdate?: (
+    startPoint: { x: number; y: number },
+    endPoint: { x: number; y: number },
+    type: number
+  ) => void;
+  onMeasurementEnd?: () => void;
+  onCursorMove?: (worldPosition: { x: number; y: number; z: number }) => void;
+  onMarkerHover?: (marker: Marker | null) => void;
+}
+
+export enum StageMode {
+  DM = 0,
+  Player = 1
+}
+
+export interface DisplayProps {
+  /**
+   * The minimum padding around the grid relative to the edge of the scene.
+   * The actual padding may be greater depending on the grid layout.
+   */
+  padding: {
+    x: number;
+    y: number;
+  };
+
+  /**
+   * The size of the display in inches
+   */
+  size: { x: number; y: number };
+
+  /**
+   * The resolution of the display in pixels
+   */
+  resolution: { x: number; y: number };
+
+  /**
+   * Maximum device pixel ratio to use for rendering.
+   * Caps the pixel ratio to improve performance on high-DPI devices with weak GPUs.
+   * Defaults to 2 if not specified.
+   */
+  maxPixelRatio?: number;
+}
+
+/**
+ * Properties for the Stage component
+ */
+export type StageProps = {
+  mode: StageMode;
+  activeLayer: MapLayerType;
+  annotations: AnnotationsLayerProps;
+  backgroundColor: string;
+  debug: {
+    enableStats: boolean;
+    loggingRate: number;
+    enableMetrics: boolean;
+    logMetricsToConsole: boolean;
+    disabledLayers: string[];
+  };
+  display: DisplayProps;
+  fog: FogLayerProps;
+  edgeOverlay: EdgeOverlayProps;
+  fogOfWar: FogOfWarLayerProps;
+  grid: GridLayerProps;
+  map: MapLayerProps;
+  marker: MarkerLayerProps;
+  measurement: MeasurementLayerProps;
+  postProcessing: PostProcessingProps;
+  scene: SceneLayerProps;
+  weather: WeatherLayerProps;
+};
+
+export interface StageExports {
+  annotations: {
+    clear: (layerId: string) => void;
+    toRLE: () => Promise<Uint8Array>;
+    fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+    loadMask: (layerId: string, rleData: Uint8Array) => Promise<void>;
+    isDrawing: () => boolean;
+  };
+
+  fogOfWar: {
+    clear: () => void;
+    reset: () => void;
+    toPng: () => Promise<Blob>;
+    toRLE: () => Promise<Uint8Array>;
+    fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+    isDrawing: () => boolean;
+  };
+  map: {
+    fit: () => void;
+    fill: () => void;
+    getSize: () => { width: number; height: number } | null;
+  };
+  scene: {
+    fit: () => void;
+    fill: () => void;
+    generateThumbnail: () => Promise<Blob>;
+  };
+  markers: {
+    isHoveringMarker: boolean;
+    isDraggingMarker: boolean;
+  };
+  measurement: {
+    getCurrentMeasurement: () => {
+      startPoint: { x: number; y: number } | null;
+      endPoint: { x: number; y: number } | null;
+      type: number;
+    } | null;
+    isDrawing: () => boolean;
+  };
+  onSceneChange: () => void;
+}