@tableslayer/ui 0.1.4 → 0.1.6

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

@@ -1,225 +0,0 @@
-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

@@ -1,332 +0,0 @@
-<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

@@ -1,136 +0,0 @@
-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;
-}