@tableslayer/ui 0.1.4 → 0.1.6

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

@@ -1,126 +0,0 @@
-import type { JSONContent } from '@tiptap/core';
-
-export enum MarkerVisibility {
-  Always = 0,
-  DM = 1,
-  Player = 2,
-  Hover = 3 // Hidden from players, revealed on DM hover
-}
-
-export enum MarkerShape {
-  None = 0,
-  Circle = 1,
-  Square = 2,
-  Triangle = 3,
-  Pin = 4
-}
-
-export enum MarkerSize {
-  Small = 1,
-  Medium = 2,
-  Large = 3
-}
-
-export interface Marker {
-  id: string;
-  title: string;
-  position: {
-    x: number;
-    y: number;
-  };
-  size: MarkerSize;
-  shape: MarkerShape;
-  shapeColor: string;
-  label: string | null;
-  imageUrl: string | null;
-  imageScale: number;
-  visibility: MarkerVisibility;
-  note: JSONContent | null;
-  pinnedTooltip?: boolean;
-}
-
-export interface MarkerLayerProps {
-  /**
-   * Whether the marker layer is visible
-   */
-  visible: boolean;
-
-  /**
-   * The shape of the marker icons
-   */
-  shape: {
-    /**
-     * The stroke color of the marker icons represented as a hex string (e.g. 0x60A3FE)
-     */
-    strokeColor: string;
-
-    /**
-     * The stroke width of the marker icons
-     */
-    strokeWidth: number;
-
-    /**
-     * The shadow color of the marker icons represented as a hex string (e.g. 0x60A3FE)
-     */
-    shadowColor: string;
-
-    /**
-     * The shadow blur of the marker icons
-     */
-    shadowBlur: number;
-
-    /**
-     * The shadow offset of the marker icons
-     */
-    shadowOffset: {
-      x: number;
-      y: number;
-    };
-  };
-
-  /**
-   * The text of the marker
-   */
-  text: {
-    /**
-     * The size of the marker text
-     */
-    size: number;
-
-    /**
-     * The color of the marker text
-     */
-    color: string;
-
-    /**
-     * The stroke width of the marker text
-     */
-    strokeWidth: number;
-
-    /**
-     * The color of the marker text stroke
-     */
-    strokeColor: string;
-  };
-
-  /**
-   * Whether to snap the marker to the grid
-   */
-  snapToGrid: boolean;
-
-  /**
-   * An array of Marker objects
-   */
-  markers: Marker[];
-}
-
-export interface MarkerLayerExports {
-  markerState: {
-    isHovering: boolean;
-    isDragging: boolean;
-    hoveredMarker: Marker | null;
-    selectedMarker: Marker | null;
-  };
-  maintainHover: (maintain: boolean) => void;
-  onSceneChange: () => void;
-}

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

@@ -1,364 +0,0 @@
-<script lang="ts">
-  import * as THREE from 'three';
-  import { T, type Props as ThrelteProps } from '@threlte/core';
-  import { type MeasurementLayerProps } from './types';
-  import { type DisplayProps } from '../Stage/types';
-  import { SceneLayer } from '../Scene/types';
-  import { type GridLayerProps, GridType } from '../GridLayer/types';
-  import { snapToGrid } from '../../helpers/grid';
-  import LayerInput from '../LayerInput/LayerInput.svelte';
-  import MeasurementManager from './MeasurementManager.svelte';
-
-  interface Props extends ThrelteProps<typeof THREE.Mesh> {
-    props: MeasurementLayerProps;
-    isActive: boolean;
-    display: DisplayProps;
-    grid: GridLayerProps;
-    sceneRotation?: number;
-    onMeasurementStart?: (startPoint: THREE.Vector2, type: number) => void;
-    onMeasurementUpdate?: (startPoint: THREE.Vector2, endPoint: THREE.Vector2, type: number) => void;
-    onMeasurementEnd?: () => void;
-    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;
-  }
-
-  const {
-    props,
-    isActive,
-    display,
-    grid,
-    sceneRotation = 0,
-    onMeasurementStart,
-    onMeasurementUpdate,
-    onMeasurementEnd,
-    receivedMeasurement
-  }: Props = $props();
-
-  // Pre-allocated vectors to avoid GC pressure
-  const centerOffset = new THREE.Vector2();
-  let snappedPosition = new THREE.Vector2();
-  let inputMesh = $state(new THREE.Mesh());
-
-  // Update centerOffset when display resolution changes
-  $effect(() => {
-    centerOffset.set(display.resolution.x / 2, display.resolution.y / 2);
-  });
-
-  // Measurement state
-  let isDrawing = false;
-  let startPoint: THREE.Vector2 | null = null;
-  let measurementManager: MeasurementManager | null = null;
-
-  // Track previous display resolution to detect scene changes
-  let prevResX = display.resolution.x;
-  let prevResY = display.resolution.y;
-
-  // Reset measurement state when layer becomes inactive or display changes (scene switch)
-  $effect(() => {
-    const resChanged = display.resolution.x !== prevResX || display.resolution.y !== prevResY;
-
-    // Reset any lingering measurement state when layer deactivates or scene changes
-    if (!isActive || resChanged) {
-      isDrawing = false;
-      startPoint = null;
-      if (measurementManager) {
-        measurementManager.clearMeasurement();
-        measurementManager.hidePreview();
-      }
-    }
-
-    // Update tracked resolution
-    prevResX = display.resolution.x;
-    prevResY = display.resolution.y;
-  });
-
-  /**
-   * Handles mouse down events to initiate measurement creation.
-   * Converts screen coordinates to world coordinates, applies grid snapping if enabled,
-   * and starts a new measurement at the clicked position.
-   *
-   * @param {MouseEvent | TouchEvent} event - The mouse or touch event that triggered this handler
-   * @param {THREE.Vector2 | null} coords - The world coordinates of the mouse/touch position, or null if outside bounds
-   * @returns {void}
-   */
-  function handleMouseDown(event: MouseEvent | TouchEvent, coords: THREE.Vector2 | null): void {
-    if (!coords || !isActive || !measurementManager || !props) return;
-
-    coords.sub(centerOffset);
-
-    // For measurements on hex grids, snap to centers only
-    const isHexGrid = grid.gridType === GridType.Hex;
-    const snappedCoords = props.snapToGrid ? snapToGrid(coords, grid, display, isHexGrid) : coords;
-
-    // Always clear any existing measurement state before starting new one
-    // This handles edge cases where isDrawing might be unexpectedly true
-    if (isDrawing) {
-      measurementManager.clearMeasurement();
-    }
-
-    // Start new measurement
-    isDrawing = true;
-    startPoint = snappedCoords.clone(); // Clone to avoid reference issues
-    measurementManager.startMeasurement(snappedCoords);
-
-    // Notify parent component
-    if (onMeasurementStart) {
-      onMeasurementStart(snappedCoords, props.type);
-    }
-  }
-
-  /**
-   * Handles mouse move events to update measurement preview and active measurements.
-   * Converts coordinates to world space, applies grid snapping, and either updates
-   * the current measurement being drawn or shows a preview indicator.
-   *
-   * @param {MouseEvent | TouchEvent} event - The mouse or touch event that triggered this handler
-   * @param {THREE.Vector2 | null} coords - The world coordinates of the mouse/touch position, or null if outside bounds
-   * @returns {void}
-   */
-  function handleMouseMove(event: MouseEvent | TouchEvent, coords: THREE.Vector2 | null): void {
-    if (!coords || !isActive || !measurementManager || !props) return;
-
-    coords.sub(centerOffset);
-
-    // Apply snapping if enabled
-    // For measurements on hex grids, snap to centers only
-    const isHexGrid = grid.gridType === GridType.Hex;
-    if (props.snapToGrid) {
-      snappedPosition = snapToGrid(coords, grid, display, isHexGrid);
-    } else {
-      snappedPosition.copy(coords);
-    }
-
-    if (isDrawing && startPoint && measurementManager) {
-      // Update current measurement
-      measurementManager.updateMeasurement(snappedPosition);
-
-      // Notify parent component
-      if (onMeasurementUpdate) {
-        onMeasurementUpdate(startPoint, snappedPosition, props.type);
-      }
-    } else {
-      // Update the preview indicator position
-      measurementManager.updatePreview(snappedPosition, isActive);
-    }
-  }
-
-  /**
-   * Handles mouse up events to complete measurement creation.
-   * Finalizes the current measurement at the release position and resets the drawing state.
-   * Applies grid snapping to the final position if enabled.
-   *
-   * @param {MouseEvent | TouchEvent} event - The mouse or touch event that triggered this handler
-   * @param {THREE.Vector2 | null} coords - The world coordinates of the mouse/touch position, or null if outside bounds
-   * @returns {void}
-   */
-  function handleMouseUp(event: MouseEvent | TouchEvent, coords: THREE.Vector2 | null): void {
-    // Always reset drawing state when mouseUp is called, even if coords is null
-    // This prevents isDrawing from staying true after touch gestures or edge cases
-    const wasDrawing = isDrawing;
-    isDrawing = false;
-
-    if (!wasDrawing || !startPoint || !measurementManager) {
-      startPoint = null;
-      return;
-    }
-
-    if (coords) {
-      coords.sub(centerOffset);
-      // For measurements on hex grids, snap to centers only
-      const isHexGrid = grid.gridType === GridType.Hex;
-      const snappedCoords = props.snapToGrid ? snapToGrid(coords, grid, display, isHexGrid) : coords;
-
-      if (snappedCoords) {
-        measurementManager.finishMeasurement();
-      }
-    } else {
-      // Coords is null (released outside canvas) - clear the incomplete measurement
-      measurementManager.clearMeasurement();
-    }
-
-    startPoint = null;
-
-    // Notify parent component
-    if (onMeasurementEnd) {
-      onMeasurementEnd();
-    }
-  }
-
-  /**
-   * Handles mouse leave events when the cursor exits the measurement area.
-   * Hides the preview indicator to provide clear visual feedback that measurements
-   * cannot be placed outside the active area.
-   * Also resets any in-progress measurement to prevent stuck state.
-   * @returns {void}
-   */
-  function handleMouseLeave(): void {
-    // Reset drawing state if user leaves canvas while drawing
-    if (isDrawing && measurementManager) {
-      measurementManager.clearMeasurement();
-      isDrawing = false;
-      startPoint = null;
-      if (onMeasurementEnd) {
-        onMeasurementEnd();
-      }
-    }
-
-    if (measurementManager) {
-      measurementManager.hidePreview();
-    }
-  }
-
-  /**
-   * Handles mouse enter events when the cursor enters the measurement area.
-   * Shows the preview indicator if the measurement layer is active, providing
-   * visual feedback for where measurements can be placed.
-   * @returns {void}
-   */
-  function handleMouseEnter(): void {
-    if (measurementManager && isActive) {
-      measurementManager.showPreviewIndicator();
-    }
-  }
-
-  // Export methods for parent components to get measurement state
-  export function getCurrentMeasurement(): {
-    startPoint: THREE.Vector2 | null;
-    endPoint: THREE.Vector2 | null;
-    type: number;
-  } | null {
-    if (!measurementManager || !isDrawing || !startPoint) return null;
-
-    return {
-      startPoint: startPoint.clone(),
-      endPoint: snappedPosition.clone(),
-      type: props.type
-    };
-  }
-
-  export function isCurrentlyDrawing(): boolean {
-    return isDrawing;
-  }
-
-  // Track the last displayed measurement to avoid redundant updates
-  let lastDisplayedMeasurement: {
-    startX: number;
-    startY: number;
-    endX: number;
-    endY: number;
-    type: number;
-  } | null = null;
-
-  // Track if a measurement is currently fading (so we don't clear it prematurely)
-  let measurementIsFading = false;
-
-  // Effect to handle received measurements from other users
-  $effect(() => {
-    if (receivedMeasurement && measurementManager && !isActive) {
-      // Check if this is a new measurement (not the same as last displayed)
-      const isNewMeasurement =
-        !lastDisplayedMeasurement ||
-        lastDisplayedMeasurement.startX !== receivedMeasurement.startPoint.x ||
-        lastDisplayedMeasurement.startY !== receivedMeasurement.startPoint.y ||
-        lastDisplayedMeasurement.endX !== receivedMeasurement.endPoint.x ||
-        lastDisplayedMeasurement.endY !== receivedMeasurement.endPoint.y ||
-        lastDisplayedMeasurement.type !== receivedMeasurement.type;
-
-      if (isNewMeasurement) {
-        // Convert to Vector2 with center offset adjustment
-        const startPoint = new THREE.Vector2(receivedMeasurement.startPoint.x, receivedMeasurement.startPoint.y);
-        const endPoint = new THREE.Vector2(receivedMeasurement.endPoint.x, receivedMeasurement.endPoint.y);
-
-        // Display the received measurement with all properties if available
-        measurementManager.displayReceivedMeasurement(
-          startPoint,
-          endPoint,
-          receivedMeasurement.type,
-          receivedMeasurement.beamWidth,
-          receivedMeasurement.coneAngle,
-          receivedMeasurement.color,
-          receivedMeasurement.thickness,
-          receivedMeasurement.outlineColor,
-          receivedMeasurement.outlineThickness,
-          receivedMeasurement.opacity,
-          receivedMeasurement.markerSize,
-          receivedMeasurement.autoHideDelay,
-          receivedMeasurement.fadeoutTime,
-          receivedMeasurement.showDistance,
-          receivedMeasurement.snapToGrid,
-          receivedMeasurement.enableDMG252
-        );
-
-        // Mark that a measurement is now fading
-        measurementIsFading = true;
-
-        // Update last displayed measurement
-        lastDisplayedMeasurement = {
-          startX: receivedMeasurement.startPoint.x,
-          startY: receivedMeasurement.startPoint.y,
-          endX: receivedMeasurement.endPoint.x,
-          endY: receivedMeasurement.endPoint.y,
-          type: receivedMeasurement.type
-        };
-      }
-    } else if (!receivedMeasurement && lastDisplayedMeasurement && !measurementIsFading) {
-      // Only clear if no measurement is fading
-      // The measurement will clear itself after fade completes
-      lastDisplayedMeasurement = null;
-    }
-  });
-</script>
-
-<!-- Input handling -->
-<LayerInput
-  {isActive}
-  target={inputMesh}
-  layerSize={{ width: display.resolution.x, height: display.resolution.y }}
-  onMouseDown={handleMouseDown}
-  onMouseMove={handleMouseMove}
-  onMouseUp={handleMouseUp}
-  onMouseLeave={handleMouseLeave}
-  onMouseEnter={handleMouseEnter}
-/>
-
-<!-- This quad is user for raycasting / mouse input detection. It is invisible -->
-<T.Mesh
-  bind:ref={inputMesh}
-  scale={[display.resolution.x, display.resolution.y, 1]}
-  layers={isActive ? [SceneLayer.Input] : undefined}
->
-  <T.MeshBasicMaterial visible={false} />
-  <T.PlaneGeometry />
-</T.Mesh>
-
-<!-- Measurement Manager Component -->
-<MeasurementManager
-  bind:this={measurementManager}
-  {props}
-  visible={isActive}
-  displayProps={display}
-  gridProps={grid}
-  {sceneRotation}
-  onFadeComplete={() => {
-    measurementIsFading = false;
-  }}
-/>