@tableslayer/ui 0.1.4 → 0.1.6

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

@@ -1,42 +0,0 @@
-export interface FogLayerProps {
-    /**
-     * Whether the fog layer is enabled
-     */
-    enabled: boolean;
-    /**
-     * Color of the fog
-     */
-    color: string;
-    /**
-     * Overall opacity of the fog layer
-     */
-    opacity: number;
-    /**
-     * Speed of fog movement
-     */
-    speed: number;
-    /**
-     * How quickly the amplitude decreases for each octave
-     */
-    persistence: number;
-    /**
-     * How quickly the frequency increases for each octave
-     */
-    lacunarity: number;
-    /**
-     * Base frequency of the noise
-     */
-    frequency: number;
-    /**
-     * Vertical offset of the noise
-     */
-    offset: number;
-    /**
-     * Overall amplitude of the noise
-     */
-    amplitude: number;
-    /**
-     * Number of octaves to use
-     */
-    levels: number;
-}

package/dist/components/Stage/components/FogLayer/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,19 +0,0 @@
-import * as THREE from 'three';
-import { type Props as ThrelteProps } from '@threlte/core';
-import { type FogOfWarLayerProps } from './types';
-import type { Size } from '../../types';
-interface Props extends ThrelteProps<typeof THREE.Mesh> {
-    props: FogOfWarLayerProps;
-    isActive: boolean;
-    mapSize: Size | null;
-}
-declare const FogOfWarLayer: import("svelte").Component<Props, {
-    isDrawing: () => boolean;
-    clearFog: () => void;
-    resetFog: () => void;
-    toPng: () => Promise<Blob>;
-    toRLE: () => Promise<Uint8Array>;
-    fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void | undefined>;
-}, "">;
-type FogOfWarLayer = ReturnType<typeof FogOfWarLayer>;
-export default FogOfWarLayer;

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

@@ -1,18 +0,0 @@
-import * as THREE from 'three';
-import { type FogOfWarLayerProps } from './types';
-import type { Size } from '../../types';
-interface Props {
-    props: FogOfWarLayerProps;
-    mapSize: Size | null;
-}
-declare const FogOfWarMaterial: import("svelte").Component<Props, {
-    revertChanges: () => void;
-    clear: () => void;
-    fill: () => void;
-    drawPath: (start: THREE.Vector2, last?: THREE.Vector2 | null, persist?: boolean) => void;
-    toPng: () => Promise<Blob>;
-    toRLE: () => Promise<Uint8Array>;
-    fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
-}, "">;
-type FogOfWarMaterial = ReturnType<typeof FogOfWarMaterial>;
-export default FogOfWarMaterial;

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

@@ -1,143 +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/dist/components/Stage/components/FogOfWarLayer/types.js

@@ -1 +0,0 @@
-export {};

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