@tableslayer/ui 0.1.4 → 0.1.6

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

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

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

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