@tableslayer/ui 0.1.3 → 0.1.4

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

@@ -0,0 +1,398 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { T, type Props as ThrelteProps } from '@threlte/core';
+  import { MarkerShape, MarkerSize, MarkerVisibility, type Marker } from './types';
+  import { getContext } from 'svelte';
+  import LayerInput from '../LayerInput/LayerInput.svelte';
+  import type { Callbacks } from '../Stage/types';
+  import { type StageProps, StageMode } from '../Stage/types';
+  import MarkerToken from './MarkerToken.svelte';
+  import { getGridCellSize, snapToGrid } from '../../helpers/grid';
+  import type { GridLayerProps } from '../GridLayer/types';
+  import type { DisplayProps } from '../Stage/types';
+  import { SceneLayer } from '../Scene/types';
+  import { MapLayerType } from '../MapLayer/types';
+  import { v4 as uuidv4 } from 'uuid';
+
+  interface Props extends ThrelteProps<typeof THREE.Mesh> {
+    props: StageProps;
+    isActive: boolean;
+    grid: GridLayerProps;
+    display: DisplayProps;
+  }
+
+  const { props, isActive, display, grid }: Props = $props();
+
+  const stage = getContext<{ mode: StageMode; hoveredMarkerId: string | null; pinnedMarkerIds: string[] }>('stage');
+  const { onMarkerAdded, onMarkerMoved, onMarkerSelected, onMarkerContextMenu, onMarkerHover } =
+    getContext<Callbacks>('callbacks');
+
+  // Quad used for raycasting / mouse input detection
+  let inputMesh = $state(new THREE.Mesh());
+
+  // Track the currently selected marker and dragging state
+  let selectedMarker: Marker | null = $state(null);
+  let isDragging = $state(false);
+  let hoveredMarker: Marker | null = $state(null);
+  let hoveredMarkerDelayed: Marker | null = $state(null); // Marker after hover delay
+  let hoverTimer: ReturnType<typeof setTimeout> | null = null;
+  let hideTimer: ReturnType<typeof setTimeout> | null = null;
+  const HOVER_DELAY_MS = 500; // Half second delay before showing tooltip
+  const HIDE_DELAY_MS = 300; // Delay before hiding tooltip to allow moving to it
+
+  const ghostMarker: Marker = $state({
+    id: uuidv4(),
+    title: '',
+    position: new THREE.Vector2(0, 0),
+    size: MarkerSize.Small,
+    shape: MarkerShape.Circle,
+    shapeColor: '#ffffff',
+    imageScale: 1.0,
+    label: '',
+    imageUrl: null,
+    visibility: MarkerVisibility.Always,
+    note: null
+  });
+
+  function findClosestMarker(gridCoords: THREE.Vector2) {
+    // Find the marker that is closest to the mouse down point. The test point
+    // must be within the outer radius of the marker for it to be considered.
+    // Uses isTokenInteractable to ensure hidden/DM-only markers can't be found in Player mode.
+    let closestMarker: Marker | undefined;
+    let minDistance = Infinity;
+    props.marker.markers.forEach((marker) => {
+      if (!isTokenInteractable(marker)) return;
+
+      const distance = gridCoords.distanceTo(marker.position);
+      const markerRadius = getGridCellSize(grid, display) * marker.size;
+      if (distance < minDistance && distance <= markerRadius / 2) {
+        minDistance = distance;
+        closestMarker = marker;
+      }
+    });
+
+    return closestMarker;
+  }
+
+  function onMouseDown(e: MouseEvent | TouchEvent, coords: THREE.Vector2 | null) {
+    if (!coords) return;
+
+    // Check if TouchEvent is defined in the browser before using it
+    const isTouchEvent = typeof TouchEvent !== 'undefined' && e instanceof TouchEvent;
+    const isMouseEvent = e instanceof MouseEvent;
+
+    // Verify the primary mouse/touch was used
+    if (isMouseEvent && e.button !== 0) return;
+    if (isTouchEvent && (e as TouchEvent).touches.length !== 1) return;
+
+    // Only allow marker interaction when activeLayer is None or Marker
+    // This prevents marker dragging during fog, drawing, annotation, and measurement modes
+    if (props.activeLayer !== MapLayerType.None && props.activeLayer !== MapLayerType.Marker) {
+      return;
+    }
+
+    const gridCoords = new THREE.Vector2(coords.x - display.resolution.x / 2, coords.y - display.resolution.y / 2);
+
+    const closestMarker = findClosestMarker(gridCoords);
+
+    // Did we click on an existing marker?
+    if (closestMarker !== undefined) {
+      selectedMarker = closestMarker;
+      // Allow dragging in both DM and Player mode, except for pin-shaped markers (locked)
+      if (closestMarker.shape !== MarkerShape.Pin) {
+        isDragging = true;
+        // Clear tooltip when drag starts
+        hoveredMarkerDelayed = null;
+        clearHoverTimer();
+      }
+      onMarkerSelected(selectedMarker);
+    } else {
+      // In player mode, clicking empty space clears selection
+      if (stage.mode === StageMode.Player) {
+        selectedMarker = null;
+        return;
+      }
+
+      // In DM mode, clicking empty space also clears selection (unless we're creating a new marker)
+      if (props.activeLayer === MapLayerType.None) {
+        selectedMarker = null;
+        onMarkerSelected(null); // Notify that selection is cleared
+        return;
+      }
+      const newMarker: Marker = {
+        id: uuidv4(),
+        title: 'New Marker',
+        position: props.marker.snapToGrid ? snapToGrid(gridCoords, grid, display) : gridCoords,
+        size: MarkerSize.Small,
+        shape: MarkerShape.Circle,
+        shapeColor: '#ffffff',
+        imageScale: 1.0,
+        label: 'A1',
+        imageUrl: null,
+        visibility: MarkerVisibility.DM,
+        note: null
+      };
+      selectedMarker = newMarker;
+      onMarkerAdded(newMarker);
+    }
+  }
+
+  function onMouseMove(e: Event, coords: THREE.Vector2 | null) {
+    if (!coords) {
+      hoveredMarker = null;
+      clearHoverTimer();
+      return;
+    }
+
+    let position = new THREE.Vector2(coords.x - display.resolution.x / 2, coords.y - display.resolution.y / 2);
+    const snapPosition = props.marker.snapToGrid ? snapToGrid(position, grid, display) : position;
+
+    ghostMarker.position = snapPosition;
+
+    // Only check for hover when we're not dragging and when activeLayer is None or Marker
+    // This prevents hover during fog/drawing/annotation/measurement modes
+    if (!isDragging && (props.activeLayer === MapLayerType.None || props.activeLayer === MapLayerType.Marker)) {
+      // Check if there are any interactable markers (not just visible ones)
+      const hasInteractableMarkers = props.marker.markers.some(isTokenInteractable);
+      if (hasInteractableMarkers) {
+        const newHoveredMarker = findClosestMarker(position) ?? null;
+
+        // If we're hovering over a different marker than before
+        if (newHoveredMarker?.id !== hoveredMarker?.id) {
+          hoveredMarker = newHoveredMarker;
+          clearHoverTimer();
+
+          // Start timer for new hover if we have a marker
+          if (newHoveredMarker) {
+            cancelHideTimer(); // Cancel any pending hide
+            hoverTimer = setTimeout(() => {
+              hoveredMarkerDelayed = newHoveredMarker;
+            }, HOVER_DELAY_MS);
+          }
+        }
+      } else {
+        hoveredMarker = null;
+        clearHoverTimer();
+      }
+    } else {
+      hoveredMarker = null;
+      clearHoverTimer();
+    }
+
+    if (isDragging && selectedMarker) {
+      onMarkerMoved(selectedMarker, snapPosition);
+    }
+  }
+
+  function clearHoverTimer() {
+    if (hoverTimer) {
+      clearTimeout(hoverTimer);
+      hoverTimer = null;
+    }
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+    }
+    hideTimer = setTimeout(() => {
+      hoveredMarkerDelayed = null;
+    }, HIDE_DELAY_MS);
+  }
+
+  function cancelHideTimer() {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  }
+
+  function isTokenVisible(marker: Marker) {
+    return (
+      marker.visibility === MarkerVisibility.Always ||
+      (marker.visibility === MarkerVisibility.DM && stage.mode === StageMode.DM) ||
+      (marker.visibility === MarkerVisibility.Hover && stage.mode === StageMode.DM) ||
+      (marker.visibility === MarkerVisibility.Hover &&
+        stage.mode === StageMode.Player &&
+        marker.id === stage.hoveredMarkerId) ||
+      (marker.visibility === MarkerVisibility.Hover &&
+        stage.mode === StageMode.Player &&
+        stage.pinnedMarkerIds?.includes(marker.id)) ||
+      (marker.visibility === MarkerVisibility.Player && stage.mode === StageMode.Player)
+    );
+  }
+
+  /**
+   * Checks if a marker can be interacted with (clicked, hovered, dragged) in the current mode.
+   * In Player mode, only markers with Always or Player visibility can be interacted with.
+   * Hover-revealed markers are visible to players but NOT interactable - they're for viewing only.
+   * DM-only markers are never interactable in Player mode.
+   */
+  function isTokenInteractable(marker: Marker) {
+    if (stage.mode === StageMode.DM) {
+      // In DM mode, all visible markers are interactable
+      return isTokenVisible(marker);
+    }
+
+    // In Player mode, only Always and Player visibility markers are interactable
+    // Hover and DM visibility markers are view-only (revealed by DM) or hidden
+    return marker.visibility === MarkerVisibility.Always || marker.visibility === MarkerVisibility.Player;
+  }
+
+  function onMouseUp() {
+    if (isDragging && selectedMarker) {
+      isDragging = false;
+    }
+  }
+
+  function onMouseLeave() {
+    hoveredMarker = null;
+    clearHoverTimer();
+  }
+
+  function onContextMenu(e: MouseEvent | TouchEvent, coords: THREE.Vector2 | null) {
+    if (!coords) return;
+
+    const gridCoords = new THREE.Vector2(coords.x - display.resolution.x / 2, coords.y - display.resolution.y / 2);
+    const closestMarker = findClosestMarker(gridCoords);
+
+    if (closestMarker) {
+      onMarkerContextMenu(closestMarker, e);
+    }
+  }
+
+  // Track previous hovered marker to detect changes
+  let previousHoveredMarkerDelayed: Marker | null = null;
+
+  // Notify about hover changes when in DM mode (only after delay)
+  $effect(() => {
+    if (stage.mode === StageMode.DM && hoveredMarkerDelayed !== previousHoveredMarkerDelayed) {
+      onMarkerHover?.(hoveredMarkerDelayed);
+      previousHoveredMarkerDelayed = hoveredMarkerDelayed;
+    }
+  });
+
+  export function maintainHover(maintain: boolean) {
+    if (maintain && stage.mode === StageMode.DM) {
+      cancelHideTimer();
+    } else if (!maintain && stage.mode === StageMode.DM && !hoveredMarker) {
+      clearHoverTimer();
+    }
+  }
+
+  /**
+   * Called when the scene changes to clear all marker interaction state.
+   * Resets selection, hover, dragging, and clears any pending timers.
+   */
+  export function onSceneChange() {
+    selectedMarker = null;
+    isDragging = false;
+    hoveredMarker = null;
+    hoveredMarkerDelayed = null;
+
+    if (hoverTimer) {
+      clearTimeout(hoverTimer);
+      hoverTimer = null;
+    }
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  }
+
+  // Export reactive state for hover and drag
+  export const markerState = {
+    get isHovering() {
+      if (stage.mode === StageMode.DM) {
+        return hoveredMarkerDelayed !== null && hoveredMarkerDelayed !== undefined;
+      }
+      return stage.hoveredMarkerId !== null && stage.hoveredMarkerId !== undefined;
+    },
+    get isDragging() {
+      return isDragging;
+    },
+    get hoveredMarker() {
+      // In DM mode, use the delayed hover
+      if (stage.mode === StageMode.DM) {
+        return hoveredMarkerDelayed;
+      }
+      // In Player mode, find the marker that matches the DM's hoveredMarkerId or is pinned
+      if (stage.hoveredMarkerId) {
+        const hoveredMarker = props.marker.markers.find((m) => m.id === stage.hoveredMarkerId);
+        return hoveredMarker || null;
+      }
+      // Check for pinned markers
+      if (stage.pinnedMarkerIds && stage.pinnedMarkerIds.length > 0) {
+        const pinnedMarker = props.marker.markers.find((m) => stage.pinnedMarkerIds.includes(m.id));
+        return pinnedMarker || null;
+      }
+      return null;
+    },
+    get selectedMarker() {
+      return selectedMarker;
+    }
+  };
+</script>
+
+<LayerInput
+  id="marker"
+  isActive={isActive || stage.mode === StageMode.Player}
+  target={inputMesh}
+  layerSize={{ width: display.resolution.x, height: display.resolution.y }}
+  {onMouseDown}
+  {onMouseMove}
+  {onMouseUp}
+  {onMouseLeave}
+  {onContextMenu}
+/>
+
+<!-- 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={[SceneLayer.Input]}>
+  <T.MeshBasicMaterial visible={false} />
+  <T.PlaneGeometry />
+</T.Mesh>
+
+<!-- This group contains all the markers -->
+<T.Group name="markerLayer" position={[-0.5, -0.5, 0]}>
+  {#each props.marker.markers as marker (marker.id)}
+    {#if isTokenVisible(marker)}
+      <MarkerToken
+        {marker}
+        {grid}
+        {display}
+        opacity={1.0}
+        textColor={props.marker.text.color}
+        textStroke={props.marker.text.strokeWidth}
+        textStrokeColor={props.marker.text.strokeColor}
+        textSize={props.marker.text.size}
+        shadowColor={props.marker.shape.shadowColor}
+        shadowBlur={props.marker.shape.shadowBlur}
+        shadowOffset={props.marker.shape.shadowOffset}
+        strokeColor={props.marker.shape.strokeColor}
+        strokeWidth={props.marker.shape.strokeWidth}
+        isSelected={selectedMarker?.id === marker.id}
+        isHovered={hoveredMarker?.id === marker.id}
+        sceneRotation={props.scene.rotation}
+      />
+    {/if}
+  {/each}
+
+  <!-- Only show the ghost marker when the marker layer is active -->
+  {#if isActive && stage.mode === StageMode.DM && props.activeLayer === MapLayerType.Marker}
+    <MarkerToken
+      marker={ghostMarker}
+      {grid}
+      {display}
+      opacity={0.3}
+      textColor={props.marker.text.color}
+      textStroke={props.marker.text.strokeWidth}
+      textStrokeColor={props.marker.text.strokeColor}
+      textSize={props.marker.text.size}
+      shadowColor={props.marker.shape.shadowColor}
+      shadowBlur={props.marker.shape.shadowBlur}
+      shadowOffset={props.marker.shape.shadowOffset}
+      strokeColor={props.marker.shape.strokeColor}
+      strokeWidth={props.marker.shape.strokeWidth}
+      isSelected={false}
+      isHovered={false}
+      sceneRotation={props.scene.rotation}
+    />
+  {/if}
+</T.Group>

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

@@ -0,0 +1,262 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { T, useLoader } from '@threlte/core';
+  import { onDestroy } from 'svelte';
+  import { MarkerShape, type Marker } from './types';
+  import { SceneLayer, SceneLayerOrder } from '../Scene/types';
+  import { getGridCellSize } from '../../helpers/grid';
+  import type { GridLayerProps } from '../GridLayer/types';
+  import type { DisplayProps } from '../Stage/types';
+
+  interface Props {
+    marker: Marker;
+    grid: GridLayerProps;
+    display: DisplayProps;
+    opacity: number;
+    strokeColor: string;
+    strokeWidth: number;
+    shadowColor: string;
+    shadowBlur: number;
+    shadowOffset: {
+      x: number;
+      y: number;
+    };
+    textColor: string;
+    textStroke: number;
+    textStrokeColor: string;
+    textSize: number;
+    isSelected: boolean;
+    isHovered?: boolean;
+    sceneRotation: number;
+  }
+
+  const {
+    marker,
+    grid,
+    display,
+    opacity,
+    textColor,
+    textStroke,
+    textStrokeColor,
+    textSize,
+    strokeColor,
+    strokeWidth,
+    shadowColor,
+    shadowBlur,
+    shadowOffset,
+    isSelected = false,
+    isHovered = false,
+    sceneRotation
+  }: Props = $props();
+
+  const loader = useLoader(THREE.TextureLoader);
+  const baseMarkerSize = $derived(getGridCellSize(grid, display) * marker.size);
+  const markerSize = $derived(isHovered ? baseMarkerSize * 1.15 : baseMarkerSize);
+  const sizeMultiplier = 0.9;
+
+  // Counter-rotate markers to keep them upright relative to the viewport
+  const normalizedRotation = $derived(((sceneRotation % 360) + 360) % 360);
+  const needsFlip = $derived(
+    (normalizedRotation > 85 && normalizedRotation < 95) || (normalizedRotation > 265 && normalizedRotation < 275)
+  );
+  const counterRotation = $derived(
+    needsFlip ? -((sceneRotation + 180) * Math.PI) / 180 : -(sceneRotation * Math.PI) / 180
+  );
+
+  const canvasSize = 1024;
+
+  let markerCanvas = new OffscreenCanvas(canvasSize, canvasSize);
+  let ctx = markerCanvas.getContext('2d')!;
+  ctx.globalCompositeOperation = 'source-over';
+
+  let markerMaterial = new THREE.MeshBasicMaterial({
+    transparent: true,
+    opacity
+  });
+  let imageTexture: THREE.Texture | null = $state(null);
+
+  // Load image if URL is provided
+  $effect(() => {
+    if (marker.imageUrl) {
+      loader
+        .load(marker.imageUrl)
+        .then((texture) => {
+          imageTexture = texture;
+          imageTexture.needsUpdate = true;
+        })
+        .catch((err) => console.error('Error loading image:', err));
+    } else {
+      imageTexture = null;
+    }
+  });
+
+  // Create complete marker canvas with shape, stroke, and text
+  function createShape(centerX: number, centerY: number, size: number, clipOnly: boolean = false) {
+    ctx.beginPath();
+
+    switch (marker.shape) {
+      case MarkerShape.None:
+        break;
+      case MarkerShape.Circle:
+        const radius = (size * sizeMultiplier) / 2;
+        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+        ctx.closePath();
+        break;
+
+      case MarkerShape.Square:
+        const squareSize = size * sizeMultiplier; // Adjust size to match circle's visual weight
+        ctx.rect(centerX - squareSize / 2, centerY - squareSize / 2, squareSize, squareSize);
+        ctx.closePath();
+        break;
+
+      case MarkerShape.Triangle:
+        const height = size * sizeMultiplier;
+        ctx.moveTo(centerX, centerY - height / 2); // Top
+        ctx.lineTo(centerX - height / 2, centerY + height / 2); // Bottom left
+        ctx.lineTo(centerX + height / 2, centerY + height / 2); // Bottom right
+        ctx.closePath();
+        break;
+    }
+
+    if (!clipOnly) {
+      ctx.shadowColor = shadowColor;
+      ctx.shadowBlur = shadowBlur;
+      ctx.shadowOffsetX = shadowOffset.x;
+      ctx.shadowOffsetY = shadowOffset.y;
+      ctx.fill();
+      if (strokeWidth > 0) {
+        ctx.stroke();
+      }
+    }
+
+    return ctx;
+  }
+
+  // Create text for the marker
+  function createText(centerX: number, centerY: number) {
+    if (!marker.label) return;
+
+    // Reset shadow settings for text
+    ctx.shadowColor = 'transparent';
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+
+    // Set text properties
+    ctx.font = `700 ${textSize}px Inter`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    // Add text stroke if specified
+    if (textStroke && textStrokeColor) {
+      ctx.strokeStyle = textStrokeColor;
+      ctx.lineWidth = textStroke * (textSize / 5);
+      ctx.strokeText(marker.label, centerX, centerY);
+    }
+
+    // Fill text
+    ctx.fillStyle = textColor || '#ffffff';
+    ctx.fillText(marker.label, centerX, centerY);
+  }
+
+  // Create the marker canvas
+  function drawMarker() {
+    const width = markerCanvas.width;
+    const height = markerCanvas.height;
+    const centerX = width / 2;
+    const centerY = height / 2;
+
+    // Clear canvas with transparency
+    ctx.clearRect(0, 0, width, height);
+
+    if (marker.shape !== undefined) {
+      // Set stroke and fill styles for shape
+      // Use --fgPrimary color when hovered or selected, otherwise use the default stroke color
+      ctx.strokeStyle = isHovered || isSelected ? getCSSVariable('--fgPrimary') : (strokeColor ?? '#000000');
+      ctx.lineWidth = strokeWidth;
+      ctx.fillStyle = marker.shapeColor ?? '#ffffff';
+
+      createShape(centerX, centerY, canvasSize);
+
+      // Draw image if available
+      if (imageTexture && imageTexture.image) {
+        // Save the current canvas state
+        ctx.save();
+
+        // Create a smaller shape path for clipping that accounts for stroke width
+        const innerSize = canvasSize - strokeWidth; // Reduce by twice the stroke width
+        createShape(centerX, centerY, innerSize, true);
+
+        // Apply clipping to the shape
+        ctx.clip();
+
+        // Set proper compositing for image drawing
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalAlpha = 1.0; // Ensure full opacity for the image itself
+
+        // Draw the image (will only appear inside the clipped shape)
+        ctx.drawImage(
+          imageTexture.image as CanvasImageSource,
+          centerX - (canvasSize / 2) * marker.imageScale * sizeMultiplier,
+          centerY - (canvasSize / 2) * marker.imageScale * sizeMultiplier,
+          sizeMultiplier * canvasSize * marker.imageScale,
+          sizeMultiplier * canvasSize * marker.imageScale
+        );
+
+        // Restore the canvas state (removes clipping)
+        ctx.restore();
+      }
+    }
+
+    // // Draw text if enabled
+    if (marker.label) {
+      createText(centerX, centerY);
+    }
+
+    return markerCanvas;
+  }
+
+  // Create and update marker texture when properties change (including hover state)
+  $effect(() => {
+    markerCanvas = drawMarker();
+
+    // Dispose old texture before creating new one
+    if (markerMaterial.map) {
+      markerMaterial.map.dispose();
+    }
+
+    markerMaterial.map = new THREE.CanvasTexture(markerCanvas);
+    markerMaterial.map.colorSpace = THREE.SRGBColorSpace;
+    markerMaterial.map.needsUpdate = true;
+  });
+
+  onDestroy(() => {
+    if (markerMaterial.map) {
+      markerMaterial.map.dispose();
+    }
+    markerMaterial.dispose();
+    if (imageTexture) {
+      imageTexture.dispose();
+    }
+  });
+
+  // Get CSS variable value for hover color
+  function getCSSVariable(varName: string): string {
+    if (typeof window !== 'undefined') {
+      return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+    }
+    return '#ffffff';
+  }
+</script>
+
+<T.Group
+  position={[marker.position.x, marker.position.y, 0]}
+  scale={[markerSize, markerSize, 1]}
+  rotation={[0, 0, counterRotation]}
+>
+  <!-- Combined shape, stroke and text -->
+  <T.Mesh renderOrder={SceneLayerOrder.Marker} layers={[SceneLayer.Main]}>
+    <T.MeshBasicMaterial is={markerMaterial} />
+    <T.PlaneGeometry args={[1, 1]} />
+  </T.Mesh>
+</T.Group>