@tableslayer/ui 0.1.3 → 0.1.4

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

@@ -0,0 +1,249 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { getContext, onDestroy } from 'svelte';
+  import { T, type Props as ThrelteProps } from '@threlte/core';
+  import { ToolType } from '../DrawingLayer/types';
+  import { type FogOfWarLayerProps } from './types';
+  import type { Size } from '../../types';
+  import type { Callbacks } from '../Stage/types';
+  import LayerInput from '../LayerInput/LayerInput.svelte';
+  import toolOutlineVertexShader from '../../shaders/default.vert?raw';
+  import toolOutlineFragmentShader from '../../shaders/ToolOutline.frag?raw';
+  import { SceneLayer } from '../Scene/types';
+  import FogOfWarMaterial from './FogOfWarMaterial.svelte';
+
+  interface Props extends ThrelteProps<typeof THREE.Mesh> {
+    props: FogOfWarLayerProps;
+    isActive: boolean;
+    mapSize: Size | null;
+  }
+
+  const { props, isActive, mapSize, ...meshProps }: Props = $props();
+
+  const onFogUpdate = getContext<Callbacks>('callbacks').onFogUpdate;
+
+  // Convert percentage-based tool.size to texture pixels for outline
+  // This must match the conversion in FogOfWarMaterial
+  const toolSizePixels = $derived.by(() => {
+    if (!mapSize) return props.tool.size;
+    const textureSize = Math.min(mapSize.width, mapSize.height);
+    return Math.round(textureSize * (props.tool.size / 100));
+  });
+
+  let mesh: THREE.Mesh = $state(new THREE.Mesh());
+  let outlineMesh: THREE.Mesh = $state(new THREE.Mesh());
+  let material: FogOfWarMaterial | undefined = $state();
+  let drawing = false;
+  let hasFinishedDrawing = false;
+
+  // Export drawing state so parent can check it
+  export function isDrawing() {
+    return drawing;
+  }
+
+  // If mouse leaves the drawing area, we need to reset the start position
+  // when it re-enters the drawing area to prevent the drawing from "jumping"
+  // to the new point
+  let lastPos: THREE.Vector2 | null = null;
+
+  // Add outline material
+  // Initial value will be updated by $effect below
+  const outlineMaterial = new THREE.ShaderMaterial({
+    uniforms: {
+      uStart: { value: new THREE.Vector2(Infinity, Infinity) },
+      uEnd: { value: new THREE.Vector2(Infinity, Infinity) },
+      uBrushSize: { value: props.tool.size }, // Will be updated to pixels in $effect
+      uTextureSize: { value: new THREE.Vector2(0, 0) },
+      uShapeType: { value: props.tool.type },
+      uOutlineColor: { value: new THREE.Color(props.outline.color) },
+      uOutlineOpacity: { value: props.outline.opacity },
+      uOutlineThickness: { value: props.outline.thickness }
+    },
+    vertexShader: toolOutlineVertexShader,
+    fragmentShader: toolOutlineFragmentShader,
+    transparent: true,
+    depthTest: false
+  });
+
+  onDestroy(() => {
+    outlineMaterial.dispose();
+  });
+
+  // Whenever the tool becomes inactive, reset the drawing state and hide outline
+  $effect(() => {
+    if (!isActive) {
+      lastPos = null;
+      drawing = false;
+      material?.revertChanges();
+      outlineMesh.visible = false;
+      // Reset cursor position so it doesn't appear at old location when reactivated
+      outlineMaterial.uniforms.uStart.value.set(Infinity, Infinity);
+      outlineMaterial.uniforms.uEnd.value.set(Infinity, Infinity);
+    }
+  });
+
+  // Update outline material uniforms (but don't control visibility here - let draw() handle it)
+  $effect(() => {
+    if (!mapSize) return;
+
+    // Use .set() to avoid allocating new objects
+    outlineMaterial.uniforms.uTextureSize.value.set(mapSize.width, mapSize.height);
+    outlineMaterial.uniforms.uOutlineColor.value.set(props.outline.color);
+    outlineMaterial.uniforms.uOutlineThickness.value = props.outline.thickness;
+    outlineMaterial.uniforms.uOutlineOpacity.value = props.outline.opacity;
+    outlineMaterial.uniforms.uShapeType.value = props.tool.type;
+    outlineMaterial.uniforms.uBrushSize.value = toolSizePixels;
+  });
+
+  function onMouseDown(e: Event, p: THREE.Vector2 | null) {
+    e.preventDefault();
+    lastPos = p;
+    drawing = true;
+    hasFinishedDrawing = false;
+
+    draw(e, p);
+  }
+
+  function onMouseUp(_e: Event, p: THREE.Vector2 | null) {
+    // If using shapes, draw the shape outline when the mouse button is released
+    if (props.tool.type === ToolType.Ellipse || props.tool.type === ToolType.Rectangle) {
+      if (p && drawing && lastPos) {
+        material?.drawPath(p, lastPos, true);
+        outlineMesh.visible = false;
+        hasFinishedDrawing = true;
+      }
+    }
+
+    if (hasFinishedDrawing) {
+      onFogUpdate(toPng());
+    }
+
+    // Reset the drawing state
+    lastPos = null;
+    drawing = false;
+    hasFinishedDrawing = false;
+  }
+
+  function onMouseLeave() {
+    lastPos = null;
+    drawing = false;
+    outlineMesh.visible = false;
+    material?.revertChanges();
+
+    // Hide cursor when mouse leaves
+    outlineMaterial.uniforms.uStart.value.set(Infinity, Infinity);
+    outlineMaterial.uniforms.uEnd.value.set(Infinity, Infinity);
+  }
+
+  function draw(e: Event, p: THREE.Vector2 | null) {
+    // If the mouse is not within the drawing area, do nothing
+    if (!p) {
+      // Move cursor off-screen when mouse is outside
+      outlineMaterial.uniforms.uStart.value.set(Infinity, Infinity);
+      outlineMaterial.uniforms.uEnd.value.set(Infinity, Infinity);
+      return;
+    }
+
+    if (props.tool.type === ToolType.Ellipse || props.tool.type === ToolType.Rectangle) {
+      // Shapes don't use lazy brush
+      outlineMaterial.uniforms.uStart.value.copy(p);
+      outlineMaterial.uniforms.uEnd.value.copy(lastPos ?? p);
+
+      // When using shapes, draw the shape outline while the mouse button is held down
+      if (drawing) {
+        outlineMesh.visible = true;
+        material?.drawPath(p, lastPos);
+      }
+    } else {
+      // For freehand tools, always show the cursor
+      outlineMesh.visible = true;
+
+      // For freehand drawing
+      if (drawing) {
+        if (!lastPos) {
+          lastPos = p.clone();
+        }
+        material?.drawPath(p, lastPos, true);
+        hasFinishedDrawing = true;
+        lastPos = p.clone();
+      }
+
+      // Always show cursor at current position
+      outlineMaterial.uniforms.uStart.value.copy(p);
+      outlineMaterial.uniforms.uEnd.value.copy(p);
+    }
+  }
+
+  /**
+   * Clears all fog, revealing the entire map underneath
+   */
+  export function clearFog() {
+    material?.clear();
+    onFogUpdate(toPng());
+  }
+
+  /**
+   * Resets the fog to fill the entire layer
+   */
+  export function resetFog() {
+    material?.fill();
+    onFogUpdate(toPng());
+  }
+
+  /**
+   * Serializes the fog of war image data into a binary buffer
+   * @return A binary buffer
+   */
+  export async function toPng(): Promise<Blob> {
+    return (await material?.toPng()) ?? new Blob();
+  }
+
+  /**
+   * Exports the fog of war state as RLE-encoded data
+   * @returns RLE encoded Uint8Array
+   */
+  export async function toRLE(): Promise<Uint8Array> {
+    return (await material?.toRLE()) ?? new Uint8Array();
+  }
+
+  /**
+   * Loads RLE-encoded data into the fog of war
+   * @param rleData RLE encoded data
+   * @param width Image width
+   * @param height Image height
+   */
+  export async function fromRLE(rleData: Uint8Array, width: number, height: number) {
+    return material?.fromRLE(rleData, width, height);
+  }
+</script>
+
+<LayerInput
+  id="fogOfWar"
+  {isActive}
+  layerSize={mapSize}
+  target={mesh}
+  {onMouseDown}
+  onMouseMove={draw}
+  {onMouseUp}
+  {onMouseLeave}
+/>
+
+<!--
+Invisible mesh used for input detection.
+The plane geometry is larger than the map size to allow cursor
+events to be detected outside of the fog of war layer.
+-->
+<T.Mesh bind:ref={mesh} name="fogOfWarInput" layer={SceneLayer.Input}>
+  <T.MeshBasicMaterial visible={false} />
+  <T.PlaneGeometry args={[10, 10]} />
+</T.Mesh>
+
+<T.Mesh bind:ref={outlineMesh} name="fogOfWarToolOutline" layers={[SceneLayer.Overlay]}>
+  <T is={outlineMaterial} transparent={true} opacity={0.0} depthTest={false} />
+  <T.PlaneGeometry />
+</T.Mesh>
+
+<T.Mesh name="fogOfWar" {...meshProps} layers={[SceneLayer.Main]}>
+  <FogOfWarMaterial bind:this={material} {props} {mapSize} />
+  <T.PlaneGeometry />
+</T.Mesh>

package/src/lib/components/Stage/components/FogOfWarLayer/FogOfWarMaterial.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { T, useTask } from '@threlte/core';
+  import { getContext, onDestroy } from 'svelte';
+  import DrawingMaterial from '../DrawingLayer/DrawingMaterial.svelte';
+  import { type FogOfWarLayerProps } from './types';
+  import type { Size } from '../../types';
+  import { clippingPlaneStore } from '../../helpers/clippingPlaneStore.svelte';
+  import { InitialState } from '../DrawingLayer/types';
+  import { StageMode } from '../Stage/types';
+  import fogVertexShader from '../../shaders/default.vert?raw';
+  import fogFragmentShader from '../../shaders/Fog.frag?raw';
+
+  interface Props {
+    props: FogOfWarLayerProps;
+    mapSize: Size | null;
+  }
+
+  const { props, mapSize }: Props = $props();
+
+  const stage = getContext<{ mode: StageMode }>('stage');
+  let drawMaterial: DrawingMaterial;
+
+  // Convert percentage-based tool.size to texture pixels
+  // tool.size is a percentage (5-20), mapSize gives texture dimensions
+  const toolSizePixels = $derived.by(() => {
+    if (!mapSize) return props.tool.size;
+    const textureSize = Math.min(mapSize.width, mapSize.height);
+    return Math.round(textureSize * (props.tool.size / 100));
+  });
+
+  // Create derived props with converted tool size
+  const drawingProps = $derived({
+    ...props,
+    tool: {
+      ...props.tool,
+      size: toolSizePixels
+    }
+  });
+
+  // Material used for rendering the fog of war
+  let fogMaterial = new THREE.ShaderMaterial({
+    uniforms: {
+      uMaskTexture: { value: null },
+      uTime: { value: 0.0 },
+      uBaseColor: { value: new THREE.Color(props.noise.baseColor) },
+      uFogColor1: { value: new THREE.Color(props.noise.fogColor1) },
+      uFogColor2: { value: new THREE.Color(props.noise.fogColor2) },
+      uFogColor3: { value: new THREE.Color(props.noise.fogColor3) },
+      uFogColor4: { value: new THREE.Color(props.noise.fogColor4) },
+      uFogSpeed: { value: props.noise.speed },
+      uEdgeMinMipMapLevel: { value: props.edge.minMipMapLevel },
+      uEdgeMaxMipMapLevel: { value: props.edge.maxMipMapLevel },
+      uEdgeFrequency: { value: props.edge.frequency },
+      uEdgeAmplitude: { value: props.edge.amplitude },
+      uEdgeOffset: { value: props.edge.offset },
+      uEdgeSpeed: { value: props.edge.speed },
+      uPersistence: { value: props.noise.persistence },
+      uLacunarity: { value: props.noise.lacunarity },
+      uFrequency: { value: props.noise.frequency },
+      uOffset: { value: props.noise.offset },
+      uAmplitude: { value: props.noise.amplitude },
+      uLevels: { value: props.noise.levels },
+      uOpacity: { value: stage.mode === StageMode.DM ? props.opacity.dm : props.opacity.player },
+      uClippingPlanes: new THREE.Uniform(
+        clippingPlaneStore.value.map((p) => new THREE.Vector4(p.normal.x, p.normal.y, p.normal.z, p.constant))
+      )
+    },
+    transparent: true,
+    fragmentShader: fogFragmentShader,
+    vertexShader: fogVertexShader
+  });
+
+  // Track opacity separately to ensure it updates properly
+  let currentOpacity = $derived(stage.mode === StageMode.DM ? props.opacity.dm : props.opacity.player);
+
+  // Update opacity when it changes
+  $effect(() => {
+    fogMaterial.uniforms.uOpacity.value = currentOpacity;
+    fogMaterial.uniformsNeedUpdate = true;
+  });
+
+  // Whenever the fog of war props change, we need to update the material
+  $effect(() => {
+    // Use .set() to avoid allocating new Color objects
+    fogMaterial.uniforms.uBaseColor.value.set(props.noise.baseColor);
+    fogMaterial.uniforms.uFogColor1.value.set(props.noise.fogColor1);
+    fogMaterial.uniforms.uFogColor2.value.set(props.noise.fogColor2);
+    fogMaterial.uniforms.uFogColor3.value.set(props.noise.fogColor3);
+    fogMaterial.uniforms.uFogColor4.value.set(props.noise.fogColor4);
+
+    fogMaterial.uniforms.uEdgeMinMipMapLevel.value = props.edge.minMipMapLevel;
+    fogMaterial.uniforms.uEdgeMaxMipMapLevel.value = props.edge.maxMipMapLevel;
+    fogMaterial.uniforms.uEdgeFrequency.value = props.edge.frequency;
+    fogMaterial.uniforms.uEdgeAmplitude.value = props.edge.amplitude;
+    fogMaterial.uniforms.uEdgeOffset.value = props.edge.offset;
+    fogMaterial.uniforms.uEdgeSpeed.value = props.edge.speed;
+    fogMaterial.uniforms.uFogSpeed.value = props.noise.speed;
+    fogMaterial.uniforms.uFrequency.value = props.noise.frequency;
+    fogMaterial.uniforms.uPersistence.value = props.noise.persistence;
+    fogMaterial.uniforms.uLacunarity.value = props.noise.lacunarity;
+    fogMaterial.uniforms.uLevels.value = props.noise.levels;
+    fogMaterial.uniforms.uOffset.value = props.noise.offset;
+    fogMaterial.uniforms.uAmplitude.value = props.noise.amplitude;
+
+    // Update clipping planes in place
+    const planes = clippingPlaneStore.value;
+    for (let i = 0; i < planes.length; i++) {
+      const p = planes[i];
+      fogMaterial.uniforms.uClippingPlanes.value[i].set(p.normal.x, p.normal.y, p.normal.z, p.constant);
+    }
+
+    // Force shader to update with new uniform values
+    fogMaterial.uniformsNeedUpdate = true;
+  });
+
+  useTask((delta) => {
+    fogMaterial.uniforms.uTime.value += delta;
+  });
+
+  /**
+   * Reverts the changes made to the fog of war
+   */
+  export function revertChanges() {
+    drawMaterial.revert();
+  }
+
+  /**
+   * Clears the fog of war
+   */
+  export function clear() {
+    drawMaterial.clear();
+  }
+
+  /**
+   * Fills the fog of war
+   */
+  export function fill() {
+    drawMaterial.fill();
+  }
+
+  /**
+   * Draws a path on the fog of war
+   * @param start The start position of the path
+   * @param last The last position of the path
+   * @param persist Whether to persist the current state
+   */
+  export function drawPath(start: THREE.Vector2, last: THREE.Vector2 | null = null, persist: boolean = false) {
+    drawMaterial.drawPath(start, last, persist);
+  }
+
+  /**
+   * Serializes the current fog of war state to a binary buffer
+   * @returns A binary buffer representation of the fog of war textuare
+   */
+  export async function toPng(): Promise<Blob> {
+    return drawMaterial.toPng();
+  }
+
+  /**
+   * Exports the fog of war state as RLE-encoded data
+   * @returns RLE encoded Uint8Array
+   */
+  export async function toRLE(): Promise<Uint8Array> {
+    return drawMaterial.toRLE();
+  }
+
+  /**
+   * Loads RLE-encoded data into the fog of war
+   * @param rleData RLE encoded data
+   * @param width Image width
+   * @param height Image height
+   */
+  export async function fromRLE(rleData: Uint8Array, width: number, height: number) {
+    return drawMaterial.fromRLE(rleData, width, height);
+  }
+
+  onDestroy(() => {
+    fogMaterial.dispose();
+  });
+</script>
+
+<DrawingMaterial
+  bind:this={drawMaterial}
+  props={drawingProps}
+  size={mapSize}
+  initialState={InitialState.Fill}
+  onRender={(texture) => {
+    fogMaterial.uniforms.uMaskTexture.value = texture;
+    fogMaterial.uniformsNeedUpdate = true;
+  }}
+/>
+
+{#snippet attachMaterial()}
+  {fogMaterial}
+{/snippet}
+
+<T is={fogMaterial}>
+  {@render attachMaterial()}
+</T>

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

@@ -0,0 +1,116 @@
+import type { DrawingLayerProps } from '../DrawingLayer/types';
+
+export interface FogOfWarLayerProps extends DrawingLayerProps {
+  /**
+   * The outline settings
+   */
+  outline: {
+    /**
+     * The color of the outline
+     */
+    color: string;
+
+    /**
+     * The opacity of the outline
+     */
+    opacity: number;
+
+    /**
+     * The thickness of the outline
+     */
+    thickness: number;
+  };
+
+  /**
+   * The edge settings
+   */
+  edge: {
+    /**
+     * The minimum mip map level to use for the edge mask
+     */
+    minMipMapLevel: number;
+
+    /**
+     * The maximum mip map level to use for the edge mask
+     */
+    maxMipMapLevel: number;
+
+    /**
+     * The frequency of the noise added to the mask edge
+     */
+    frequency: { x: number; y: number; z: number; w: number };
+
+    /**
+     * The amplitude of the noise added to the mask edge
+     */
+    amplitude: { x: number; y: number; z: number; w: number };
+
+    /**
+     * The offset of the noise added to the mask edge
+     */
+    offset: number;
+
+    /**
+     * The speed of the noise added to the mask edge
+     */
+    speed: number;
+  };
+
+  /**
+   * The noise settings
+   */
+  noise: {
+    /**
+     * Color of the fog
+     */
+    baseColor: string;
+    fogColor1: string;
+    fogColor2: string;
+    fogColor3: string;
+    fogColor4: string;
+
+    /**
+     * Controls the speed of the fog
+     */
+    speed: { x: number; y: number; z: number; w: number };
+
+    /**
+     * Controls the frequency of the fog
+     */
+    frequency: { x: number; y: number; z: number; w: number };
+
+    /**
+     * Controls the persistence of the fog
+     */
+    persistence: { x: number; y: number; z: number; w: number };
+
+    /**
+     * Controls the lacunarity of the fog
+     */
+    lacunarity: { x: number; y: number; z: number; w: number };
+
+    /**
+     * Controls the levels of the fog
+     */
+    levels: { x: number; y: number; z: number; w: number };
+
+    /**
+     * Controls the offset of the fog
+     */
+    offset: { x: number; y: number; z: number; w: number };
+
+    /**
+     * Controls the amplitude of the fog
+     */
+    amplitude: { x: number; y: number; z: number; w: number };
+  };
+}
+
+export interface FogOfWarExports {
+  clearFog: () => void;
+  resetFog: () => void;
+  toPng: () => Promise<Blob>;
+  toRLE: () => Promise<Uint8Array>;
+  fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+  isDrawing: () => boolean;
+}

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { T, type Props as ThrelteProps } from '@threlte/core';
+  import { type GridLayerProps } from './types';
+  import { type DisplayProps } from '../Stage/types';
+  import GridMaterial from './GridMaterial.svelte';
+
+  interface Props extends ThrelteProps<typeof THREE.Mesh> {
+    grid: GridLayerProps;
+    display: DisplayProps;
+    sceneZoom: number;
+  }
+
+  const { grid, display, sceneZoom, ...meshProps }: Props = $props();
+</script>
+
+<T.Mesh name="gridLayer" scale={[display.resolution.x, display.resolution.y, 1]} {...meshProps}>
+  <GridMaterial {grid} {display} {sceneZoom} />
+  <T.PlaneGeometry />
+</T.Mesh>

package/src/lib/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>