@tableslayer/ui 0.1.3 → 0.1.4

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

@@ -0,0 +1,79 @@
+export enum GridType {
+  Square = 0,
+  Hex = 1
+}
+
+export enum GridMode {
+  FillSpace = 0,
+  MapDefined = 1
+}
+
+export interface GridLayerProps {
+  /**
+   * The type of grid. 0 for square, 1 for hex
+   */
+  gridType: GridType;
+
+  /**
+   * The grid calculation mode. FillSpace fills display with 1-inch squares, MapDefined uses exact grid dimensions
+   */
+  gridMode: GridMode;
+
+  /**
+   * Fixed grid dimensions when using MapDefined mode
+   */
+  fixedGridCount: {
+    x: number;
+    y: number;
+  };
+
+  /**
+   * The opacity of the grid lines (0 to 1)
+   */
+  opacity: number;
+
+  /**
+   * The grid spacing in inches
+   */
+  spacing: number;
+
+  /**
+   * The real-world size of one grid square
+   */
+  worldGridSize: number;
+
+  /**
+   * The units for the world grid size (e.g., 'ft', 'm', 'yd')
+   */
+  worldGridUnits: string;
+
+  /**
+   * Line thickness
+   */
+  lineThickness: number;
+
+  /**
+   * Line color represented as a hex string (e.g. 0x60A3FE)
+   */
+  lineColor: string;
+
+  /**
+   * Opacity of the drop shadow
+   */
+  shadowOpacity: number;
+
+  /**
+   * Blur factor for the drop shadow
+   */
+  shadowBlur: number;
+
+  /**
+   * Spread amount for the drop shadow
+   */
+  shadowSpread: number;
+
+  /**
+   * Shadow represented as a hex string (e.g. 0x60A3FE)
+   */
+  shadowColor: string;
+}

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

@@ -0,0 +1,300 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { onDestroy, onMount } from 'svelte';
+  import { useThrelte } from '@threlte/core';
+  import type { Size } from '../../types';
+  import { SceneLayer } from '../Scene/types';
+
+  interface Props {
+    id?: string;
+    isActive: boolean;
+    target?: THREE.Mesh;
+    layerSize?: Size | null;
+    onMouseDown?: (e: MouseEvent | TouchEvent, coords: THREE.Vector2 | null) => void;
+    onMouseUp?: (e: MouseEvent | TouchEvent, coords: THREE.Vector2 | null) => void;
+    onMouseMove?: (e: MouseEvent | TouchEvent, coords: THREE.Vector2 | null) => void;
+    onContextMenu?: (e: MouseEvent | TouchEvent, coords: THREE.Vector2 | null) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onWheel?: (e: WheelEvent) => void;
+  }
+
+  let {
+    id,
+    layerSize,
+    isActive,
+    target,
+    onMouseDown,
+    onMouseUp,
+    onMouseMove,
+    onMouseEnter,
+    onMouseLeave,
+    onWheel,
+    onContextMenu
+  }: Props = $props();
+
+  const { camera, renderer, size } = useThrelte();
+
+  let raycaster = new THREE.Raycaster();
+  raycaster.layers.enable(SceneLayer.Overlay);
+  raycaster.layers.enable(SceneLayer.Main);
+  raycaster.layers.enable(SceneLayer.Input);
+
+  function isTouchDevice() {
+    return window.matchMedia('(any-pointer: coarse)').matches;
+  }
+
+  // Track pending touch to detect multi-touch gestures
+  let touchStartTimer: ReturnType<typeof setTimeout> | null = null;
+  let pendingTouchEvent: TouchEvent | null = null;
+  let pendingTouchCoords: THREE.Vector2 | null = null;
+  let isDrawing = false;
+
+  // Bind events to the renderer's canvas element
+  onMount(() => {
+    // Mouse events
+    if (onMouseDown) renderer.domElement.addEventListener('mousedown', handleMouseDown);
+    if (onMouseMove) renderer.domElement.addEventListener('mousemove', handleMouseMove);
+    if (onMouseUp) renderer.domElement.addEventListener('mouseup', handleMouseUp);
+    if (onMouseEnter) renderer.domElement.addEventListener('mouseenter', handleMouseEnter);
+    if (onMouseLeave) renderer.domElement.addEventListener('mouseleave', handleMouseLeave);
+    if (onContextMenu) renderer.domElement.addEventListener('contextmenu', handleContextMenu);
+    if (onWheel) renderer.domElement.addEventListener('wheel', handleWheel);
+
+    // Touch events
+    if (onMouseDown) renderer.domElement.addEventListener('touchstart', handleTouchStart);
+    if (onMouseMove) renderer.domElement.addEventListener('touchmove', handleTouchMove);
+    if (onMouseUp) renderer.domElement.addEventListener('touchend', handleTouchEnd);
+    if (onMouseLeave) renderer.domElement.addEventListener('touchcancel', handleTouchCancel);
+  });
+
+  onDestroy(() => {
+    // Clean up any pending timers
+    if (touchStartTimer) {
+      clearTimeout(touchStartTimer);
+      touchStartTimer = null;
+    }
+
+    // Mouse events
+    if (onMouseDown) renderer.domElement.removeEventListener('mousedown', handleMouseDown);
+    if (onMouseMove) renderer.domElement.removeEventListener('mousemove', handleMouseMove);
+    if (onMouseUp) renderer.domElement.removeEventListener('mouseup', handleMouseUp);
+    if (onMouseEnter) renderer.domElement.removeEventListener('mouseenter', handleMouseEnter);
+    if (onMouseLeave) renderer.domElement.removeEventListener('mouseleave', handleMouseLeave);
+    if (onContextMenu) renderer.domElement.removeEventListener('contextmenu', handleContextMenu);
+    if (onWheel) renderer.domElement.removeEventListener('wheel', handleWheel);
+
+    // Touch events
+    if (onMouseDown) renderer.domElement.removeEventListener('touchstart', handleTouchStart);
+    if (onMouseMove) renderer.domElement.removeEventListener('touchmove', handleTouchMove);
+    if (onMouseUp) renderer.domElement.removeEventListener('touchend', handleTouchEnd);
+    if (onMouseLeave) renderer.domElement.removeEventListener('touchcancel', handleTouchCancel);
+  });
+
+  export function getId() {
+    return id;
+  }
+
+  // Internal event handler methods for mouse
+  function handleMouseDown(event: MouseEvent) {
+    if (onMouseDown && isActive) {
+      onMouseDown(event, mouseToCanvasCoords(event));
+    }
+  }
+
+  function handleMouseUp(event: MouseEvent) {
+    if (onMouseUp && isActive) {
+      onMouseUp(event, mouseToCanvasCoords(event));
+    }
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    if (onMouseMove && isActive) {
+      onMouseMove(event, mouseToCanvasCoords(event));
+    }
+  }
+
+  function handleMouseEnter() {
+    if (onMouseEnter && isActive) {
+      onMouseEnter();
+    }
+  }
+
+  function handleMouseLeave() {
+    if (onMouseLeave && isActive) {
+      onMouseLeave();
+    }
+  }
+
+  function handleContextMenu(event: MouseEvent) {
+    if (onContextMenu && isActive) {
+      onContextMenu(event, mouseToCanvasCoords(event));
+    }
+  }
+
+  function handleWheel(event: WheelEvent) {
+    if (onWheel && isActive) {
+      onWheel(event);
+    }
+  }
+
+  function handleTouchStart(event: TouchEvent) {
+    if (onMouseDown && isActive) {
+      // If multiple touches detected immediately, cancel any pending touch
+      if (event.touches.length > 1) {
+        // Cancel pending touch if it exists
+        if (touchStartTimer) {
+          clearTimeout(touchStartTimer);
+          touchStartTimer = null;
+          pendingTouchEvent = null;
+          pendingTouchCoords = null;
+        }
+        // Stop any ongoing drawing
+        if (isDrawing && onMouseUp) {
+          onMouseUp(event, null);
+          isDrawing = false;
+        }
+        return;
+      }
+
+      event.preventDefault(); // Prevent scrolling when interacting with the canvas
+      const touch = event.touches[0];
+      const coords = touchToCanvasCoords(touch);
+
+      // Store the touch event and wait to see if another finger touches
+      pendingTouchEvent = event;
+      pendingTouchCoords = coords;
+
+      // Clear any existing timer
+      if (touchStartTimer) {
+        clearTimeout(touchStartTimer);
+      }
+
+      // Wait 50ms to see if this becomes a multi-touch gesture
+      touchStartTimer = setTimeout(() => {
+        // If we still only have one touch after the delay, start drawing
+        if (pendingTouchEvent && pendingTouchCoords && event.touches.length === 1) {
+          onMouseDown(pendingTouchEvent, pendingTouchCoords);
+          isDrawing = true;
+        }
+        touchStartTimer = null;
+        pendingTouchEvent = null;
+        pendingTouchCoords = null;
+      }, 50);
+    }
+  }
+
+  function handleTouchEnd(event: TouchEvent) {
+    if (onMouseUp && isActive && isTouchDevice()) {
+      event.preventDefault();
+
+      // Cancel any pending touch start
+      if (touchStartTimer) {
+        clearTimeout(touchStartTimer);
+        touchStartTimer = null;
+        pendingTouchEvent = null;
+        pendingTouchCoords = null;
+      }
+
+      // Only trigger mouse up if we were actually drawing
+      if (isDrawing) {
+        const touch = event.changedTouches[0];
+        onMouseUp(event, touch ? touchToCanvasCoords(touch) : null);
+        isDrawing = false;
+      }
+    }
+  }
+
+  function handleTouchMove(event: TouchEvent) {
+    if (onMouseMove && isActive && isTouchDevice()) {
+      // Stop drawing if multiple touches detected (pinch/zoom gesture)
+      if (event.touches.length > 1) {
+        // Cancel any pending touch
+        if (touchStartTimer) {
+          clearTimeout(touchStartTimer);
+          touchStartTimer = null;
+          pendingTouchEvent = null;
+          pendingTouchCoords = null;
+        }
+        // Stop any ongoing drawing
+        if (isDrawing && onMouseUp) {
+          onMouseUp(event, null);
+          isDrawing = false;
+        }
+        return;
+      }
+
+      // Only process move if we're actually drawing
+      if (isDrawing) {
+        event.preventDefault();
+        const touch = event.touches[0];
+        onMouseMove(event, touchToCanvasCoords(touch));
+      }
+    }
+  }
+
+  function handleTouchCancel() {
+    // Clean up any pending or ongoing touch operations
+    if (touchStartTimer) {
+      clearTimeout(touchStartTimer);
+      touchStartTimer = null;
+      pendingTouchEvent = null;
+      pendingTouchCoords = null;
+    }
+
+    if (isDrawing) {
+      isDrawing = false;
+    }
+
+    if (onMouseLeave && isActive) {
+      onMouseLeave();
+    }
+  }
+
+  function mouseToCanvasCoords(e: MouseEvent): THREE.Vector2 | null {
+    if (!target || !layerSize) return null;
+
+    const mouse = new THREE.Vector2((e.offsetX / $size.width) * 2 - 1, -(e.offsetY / $size.height) * 2 + 1);
+
+    raycaster.setFromCamera(mouse, $camera);
+    const intersects = raycaster.intersectObject(target);
+
+    if (intersects.length > 0) {
+      const { point } = intersects[0];
+      const localPoint = target.worldToLocal(point);
+      const canvasPoint = new THREE.Vector2(
+        layerSize.width * (localPoint.x + 0.5),
+        layerSize.height * (localPoint.y + 0.5)
+      );
+      return canvasPoint;
+    } else {
+      return null;
+    }
+  }
+
+  function touchToCanvasCoords(touch: Touch): THREE.Vector2 | null {
+    if (!target || !layerSize || !renderer.domElement) return null;
+
+    const rect = renderer.domElement.getBoundingClientRect();
+
+    const offsetX = touch.clientX - rect.left;
+    const offsetY = touch.clientY - rect.top;
+
+    const mouse = new THREE.Vector2((offsetX / $size.width) * 2 - 1, -(offsetY / $size.height) * 2 + 1);
+
+    raycaster.setFromCamera(mouse, $camera);
+    const intersects = raycaster.intersectObject(target);
+
+    if (intersects.length > 0) {
+      const { point } = intersects[0];
+      const localPoint = target.worldToLocal(point);
+      const canvasPoint = new THREE.Vector2(
+        layerSize.width * (localPoint.x + 0.5),
+        layerSize.height * (localPoint.y + 0.5)
+      );
+      return canvasPoint;
+    } else {
+      return null;
+    }
+  }
+</script>

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

@@ -0,0 +1,196 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { T } from '@threlte/core';
+  import { MapLayerType } from './types';
+  import type { Size } from '../../types';
+  import FogOfWarLayer from '../FogOfWarLayer/FogOfWarLayer.svelte';
+  import type { FogOfWarExports } from '../FogOfWarLayer/types';
+  import type { Callbacks, StageProps } from '../Stage/types';
+  import { getContext } from 'svelte';
+  import { SceneLayer, SceneLayerOrder } from '../Scene/types';
+  import FogLayer from '../FogLayer/FogLayer.svelte';
+  import { createDataSource, type IMapDataSource } from './dataSources';
+
+  interface Props {
+    props: StageProps;
+    onMapLoading: () => void;
+    onMapLoaded: (mapUrl: string, mapSize: Size) => void;
+  }
+
+  const { props, onMapLoading, onMapLoaded }: Props = $props();
+
+  const callbacks = getContext<Callbacks>('callbacks');
+  const onMapUpdate = callbacks.onMapUpdate;
+
+  let currentMapUrl: string | null = $state(null);
+  let dataSource: IMapDataSource | null = null;
+  let mapImageMaterial = new THREE.MeshBasicMaterial();
+  let fogOfWarLayer: FogOfWarExports;
+
+  // The size of the map image
+  let mapSize: Size | null = $state(null);
+
+  // Track if the material needs a full update
+  let materialUpdateKey = $state(0);
+
+  $effect(() => {
+    if (!props.map.url) {
+      currentMapUrl = props.map.url;
+      // Dispose of data source when URL is null
+      if (dataSource) {
+        dataSource.dispose();
+        dataSource = null;
+      }
+      return;
+    }
+
+    // Check if the URL is changing (including query params for cache busting)
+    // For video files, we need to check the full URL including query params
+    const newMapUrlWithoutParams = getUrlWithoutParams(props.map.url);
+    const currentMapUrlWithoutParams = getUrlWithoutParams(currentMapUrl);
+
+    // Check if this is a video file
+    const isVideo = props.map.url.match(/\.(mp4|webm|mov|avi)/i);
+
+    // For videos, compare full URLs (including query params) to ensure cache busting
+    // For images, compare without params to avoid unnecessary reloads
+    if (isVideo) {
+      if (currentMapUrl === props.map.url) {
+        return;
+      }
+    } else {
+      if (currentMapUrlWithoutParams === newMapUrlWithoutParams) {
+        return;
+      }
+    }
+
+    // Update the current URL immediately
+    currentMapUrl = props.map.url;
+
+    onMapLoading();
+
+    // Dispose of previous data source
+    if (dataSource) {
+      dataSource.dispose();
+      dataSource = null;
+    }
+
+    // Dispose of previous material map
+    if (mapImageMaterial.map) {
+      mapImageMaterial.map.dispose();
+      mapImageMaterial.map = null;
+      mapImageMaterial.needsUpdate = true;
+    }
+
+    // Create new data source based on file type
+    dataSource = createDataSource(props.map.url);
+
+    // Load the new data source
+    dataSource
+      .load(props.map.url)
+      .then(() => {
+        const texture = dataSource?.getTexture();
+        const size = dataSource?.getSize();
+
+        if (texture && size) {
+          mapImageMaterial.map = texture;
+          mapImageMaterial.needsUpdate = true;
+          mapSize = size;
+          // Force material key update to trigger re-render
+          materialUpdateKey++;
+          onMapLoaded(props.map.url, mapSize);
+        }
+      })
+      .catch((reason) => {
+        console.error('Failed to load map:', reason);
+      });
+  });
+
+  function getUrlWithoutParams(url: string | null): string {
+    if (!url) return '';
+    return url.split('?')[0];
+  }
+
+  export function getCompositeMapTexture(): THREE.Texture | null {
+    return mapImageMaterial.map;
+  }
+
+  export function fill() {
+    if (!mapSize) return;
+
+    const imageAspectRatio = mapSize.width / mapSize.height;
+    const sceneAspectRatio = props.display.resolution.x / props.display.resolution.y;
+
+    let newZoom: number;
+    if (imageAspectRatio > sceneAspectRatio) {
+      newZoom = props.display.resolution.y / mapSize.height;
+    } else {
+      newZoom = props.display.resolution.x / mapSize.width;
+    }
+
+    onMapUpdate({ x: 0, y: 0 }, newZoom);
+  }
+
+  export function fit() {
+    if (!mapSize) return;
+
+    const imageAspectRatio = mapSize.width / mapSize.height;
+    const sceneAspectRatio = props.display.resolution.x / props.display.resolution.y;
+
+    let newZoom: number;
+    if (imageAspectRatio > sceneAspectRatio) {
+      newZoom = props.display.resolution.x / mapSize.width;
+    } else {
+      newZoom = props.display.resolution.y / mapSize.height;
+    }
+
+    onMapUpdate({ x: 0, y: 0 }, newZoom);
+  }
+
+  // Export the map size for external components
+  export { mapSize };
+
+  // References to the layer doesn't exist until the component is mounted,
+  // so we need create these wrapper functions
+  export const fogOfWar = {
+    clear: () => fogOfWarLayer.clearFog(),
+    reset: () => fogOfWarLayer.resetFog(),
+    toPng: () => fogOfWarLayer.toPng(),
+    toRLE: () => fogOfWarLayer.toRLE(),
+    fromRLE: (rleData: Uint8Array, width: number, height: number) => fogOfWarLayer.fromRLE(rleData, width, height),
+    isDrawing: () => fogOfWarLayer?.isDrawing() ?? false
+  };
+</script>
+
+<!-- Map -->
+<T.Object3D
+  name="mapLayer"
+  position={[props.map.offset.x, props.map.offset.y, 0]}
+  rotation.z={(props.map.rotation / 180.0) * Math.PI}
+  scale={[(mapSize?.width ?? 0) * props.map.zoom, (mapSize?.height ?? 0) * props.map.zoom, 1]}
+>
+  <!-- Map image -->
+  {#key materialUpdateKey}
+    <T.Mesh name="mapImage" layers={[SceneLayer.Main]} renderOrder={SceneLayerOrder.Map} visible={true}>
+      <T.MeshBasicMaterial is={mapImageMaterial} />
+      <T.PlaneGeometry />
+    </T.Mesh>
+  {/key}
+
+  <FogLayer
+    props={props.fog}
+    {mapSize}
+    layers={[SceneLayer.Main]}
+    renderOrder={SceneLayerOrder.Fog}
+    visible={props.fog.enabled}
+  />
+
+  <FogOfWarLayer
+    bind:this={fogOfWarLayer}
+    props={props.fogOfWar}
+    isActive={props.activeLayer === MapLayerType.FogOfWar}
+    {mapSize}
+    layers={[SceneLayer.Main]}
+    renderOrder={SceneLayerOrder.FogOfWar}
+  />
+</T.Object3D>