@tableslayer/ui 0.1.4 → 0.1.5

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

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

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

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

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

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