@tableslayer/ui 0.0.1

package/dist/components/Stage/components/GridLayer/GridLayer.svelte.d.ts

@@ -0,0 +1,12 @@
+import * as THREE from 'three';
+import { type Props as ThrelteProps } from '@threlte/core';
+import { type GridLayerProps } from './types';
+import { type DisplayProps } from '../Stage/types';
+interface Props extends ThrelteProps<typeof THREE.Mesh> {
+    grid: GridLayerProps;
+    display: DisplayProps;
+    sceneZoom: number;
+}
+declare const GridLayer: import("svelte").Component<Props, {}, "">;
+type GridLayer = ReturnType<typeof GridLayer>;
+export default GridLayer;

package/dist/components/Stage/components/GridLayer/GridMaterial.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import type { GridLayerProps } from './types';
+  import type { DisplayProps } from '../Stage/types';
+  import fragmentShader from '../../shaders/GridShader.frag?raw';
+  import vertexShader from '../../shaders/default.vert?raw';
+  import { T, useThrelte } from '@threlte/core';
+
+  interface Props {
+    grid: GridLayerProps;
+    display: DisplayProps;
+    sceneZoom: number;
+  }
+
+  let { invalidate } = useThrelte();
+  const { grid, display, sceneZoom }: Props = $props();
+
+  let material = new THREE.ShaderMaterial({
+    uniforms: {
+      uOpacity: new THREE.Uniform(grid.opacity),
+      uGridType: new THREE.Uniform(grid.gridType),
+      uGridMode: new THREE.Uniform(grid.gridMode || 0),
+      uSpacing_in: new THREE.Uniform(grid.spacing),
+      uPadding_px: new THREE.Uniform(display.padding),
+      uLineThickness: new THREE.Uniform(grid.lineThickness),
+      uLineColor: new THREE.Uniform(new THREE.Color(grid.lineColor)),
+      uShadowOpacity: new THREE.Uniform(grid.shadowOpacity),
+      uShadowBlur: new THREE.Uniform(grid.shadowBlur),
+      uShadowSpread: new THREE.Uniform(grid.shadowSpread),
+      uShadowColor: new THREE.Uniform(new THREE.Color(grid.shadowColor)),
+      uSceneScale: new THREE.Uniform(1),
+      uResolution_px: new THREE.Uniform(new THREE.Vector2(0, 0)),
+      uDisplaySize_in: new THREE.Uniform(new THREE.Vector2(0, 0)),
+      uFixedGridCountX: new THREE.Uniform(grid.fixedGridCount?.x || 24),
+      uFixedGridCountY: new THREE.Uniform(grid.fixedGridCount?.y || 17)
+    }
+  });
+
+  $effect(() => {
+    material.uniforms.uOpacity.value = grid.opacity;
+    material.uniforms.uSceneScale.value = sceneZoom;
+    material.uniforms.uGridType.value = grid.gridType;
+    material.uniforms.uGridMode.value = grid.gridMode || 0;
+    material.uniforms.uSpacing_in.value = grid.spacing;
+    material.uniforms.uPadding_px.value = display.padding;
+    material.uniforms.uLineThickness.value = grid.lineThickness;
+    // Use .set() to avoid allocating new objects
+    material.uniforms.uLineColor.value.set(grid.lineColor);
+    material.uniforms.uShadowOpacity.value = grid.shadowOpacity;
+    material.uniforms.uShadowBlur.value = grid.shadowBlur;
+    material.uniforms.uShadowSpread.value = grid.shadowSpread;
+    material.uniforms.uShadowColor.value.set(grid.shadowColor);
+    material.uniforms.uResolution_px.value.set(display.resolution.x, display.resolution.y);
+    material.uniforms.uDisplaySize_in.value.set(display.size.x, display.size.y);
+    material.uniforms.uFixedGridCountX.value = grid.fixedGridCount?.x || 24;
+    material.uniforms.uFixedGridCountY.value = grid.fixedGridCount?.y || 17;
+
+    invalidate();
+  });
+</script>
+
+{#snippet attachMaterial()}
+  {material}
+{/snippet}
+
+<!-- Export the material to be used in the parent component -->
+<T is={material} {fragmentShader} {vertexShader} transparent={true} depthTest={false}>
+  {@render attachMaterial()}
+</T>

package/dist/components/Stage/components/GridLayer/GridMaterial.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { GridLayerProps } from './types';
+import type { DisplayProps } from '../Stage/types';
+interface Props {
+    grid: GridLayerProps;
+    display: DisplayProps;
+    sceneZoom: number;
+}
+declare const GridMaterial: import("svelte").Component<Props, {}, "">;
+type GridMaterial = ReturnType<typeof GridMaterial>;
+export default GridMaterial;

package/dist/components/Stage/components/GridLayer/types.d.ts

@@ -0,0 +1,65 @@
+export declare enum GridType {
+    Square = 0,
+    Hex = 1
+}
+export declare 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/dist/components/Stage/components/GridLayer/types.js

@@ -0,0 +1,10 @@
+export var GridType;
+(function (GridType) {
+    GridType[GridType["Square"] = 0] = "Square";
+    GridType[GridType["Hex"] = 1] = "Hex";
+})(GridType || (GridType = {}));
+export var GridMode;
+(function (GridMode) {
+    GridMode[GridMode["FillSpace"] = 0] = "FillSpace";
+    GridMode[GridMode["MapDefined"] = 1] = "MapDefined";
+})(GridMode || (GridMode = {}));

package/dist/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/dist/components/Stage/components/LayerInput/LayerInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import * as THREE from 'three';
+import type { Size } from '../../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;
+}
+declare const LayerInput: import("svelte").Component<Props, {
+    getId: () => string | undefined;
+}, "">;
+type LayerInput = ReturnType<typeof LayerInput>;
+export default LayerInput;

package/dist/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>