@tableslayer/ui 0.1.4 → 0.1.5

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

@@ -1,445 +0,0 @@
-<script lang="ts">
-  import * as THREE from 'three';
-  import { getContext, onDestroy } from 'svelte';
-  import { T } from '@threlte/core';
-  import { type AnnotationLayerData, type AnnotationsLayerProps, AnnotationEffect } from './types';
-  import { StageMode, type Callbacks, type DisplayProps } from '../Stage/types';
-  import LayerInput from '../LayerInput/LayerInput.svelte';
-  import { SceneLayer, SceneLayerOrder } from '../Scene/types';
-  import AnnotationMaterial from './AnnotationMaterial.svelte';
-  import { LazyBrushManager } from '../../helpers/lazyBrush';
-  import { ToolType } from '../DrawingLayer/types';
-  import toolOutlineVertexShader from '../../shaders/default.vert?raw';
-  import toolOutlineFragmentShader from '../../shaders/ToolOutline.frag?raw';
-
-  interface Props {
-    props: AnnotationsLayerProps;
-    mode: StageMode;
-    isActive: boolean;
-    display: DisplayProps;
-    sceneZoom: number;
-  }
-
-  const { props, mode, isActive, display, sceneZoom }: Props = $props();
-
-  const onAnnotationUpdate = getContext<Callbacks>('callbacks').onAnnotationUpdate;
-
-  // Outline styling (same as fog of war)
-  const OUTLINE_COLOR = '#FFFFFF';
-  const OUTLINE_OPACITY = 1;
-  const OUTLINE_THICKNESS = 2;
-
-  // Pre-allocated vector for display center offset to avoid GC pressure
-  const displayCenterOffset = new THREE.Vector2();
-
-  // Convert percentage-based lineWidth to texture pixels for outline
-  const lineWidthPixels = $derived.by(() => {
-    const textureSize = Math.min(display.resolution.x, display.resolution.y);
-    return Math.round(textureSize * ((props.lineWidth ?? 2.0) / 100));
-  });
-
-  let mesh: THREE.Mesh = $state(new THREE.Mesh());
-  let outlineMesh: THREE.Mesh = $state(new THREE.Mesh());
-  let drawing = 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;
-
-  // Track the last screen position for the persist button
-  let lastScreenPos: { x: number; y: number } | null = null;
-
-  // Track if cursors are hidden to avoid redundant resets
-  let cursorsHidden = false;
-
-  // Initialize lazy brush for smooth drawing
-  // Base values for zoom level 1.0
-  const BASE_RADIUS = 20;
-  const BASE_FRICTION = 0.05;
-
-  // Smoothing disabled by default for more responsive drawing
-  const smoothingEnabled = $derived(props.smoothingEnabled ?? false);
-
-  const lazyBrush = new LazyBrushManager({
-    radius: BASE_RADIUS,
-    enabled: smoothingEnabled,
-    friction: BASE_FRICTION
-  });
-
-  // Outline material for brush cursor (same as fog of war)
-  const outlineMaterial = new THREE.ShaderMaterial({
-    uniforms: {
-      uStart: { value: new THREE.Vector2(Infinity, Infinity) },
-      uEnd: { value: new THREE.Vector2(Infinity, Infinity) },
-      uBrushSize: { value: lineWidthPixels },
-      uTextureSize: { value: new THREE.Vector2(display.resolution.x, display.resolution.y) },
-      uShapeType: { value: ToolType.Brush },
-      uOutlineColor: { value: new THREE.Color(OUTLINE_COLOR) },
-      uOutlineOpacity: { value: OUTLINE_OPACITY },
-      uOutlineThickness: { value: OUTLINE_THICKNESS }
-    },
-    vertexShader: toolOutlineVertexShader,
-    fragmentShader: toolOutlineFragmentShader,
-    transparent: true,
-    depthTest: false
-  });
-
-  onDestroy(() => {
-    outlineMaterial.dispose();
-  });
-
-  // Adjust lazy brush settings based on zoom level and smoothing toggle
-  $effect(() => {
-    // Scale radius inversely with zoom - less smoothing when zoomed in
-    // At zoom 2x, radius is 25 (half)
-    // At zoom 0.5x, radius is 100 (double)
-    const adjustedRadius = BASE_RADIUS / sceneZoom;
-
-    // Adjust friction based on zoom - more responsive when zoomed in
-    // At high zoom (>2), reduce friction for more immediate response
-    // At low zoom (<0.5), increase friction for smoother lines
-    const adjustedFriction =
-      sceneZoom > 2 ? BASE_FRICTION * 0.5 : sceneZoom < 0.5 ? BASE_FRICTION * 1.5 : BASE_FRICTION;
-
-    lazyBrush.updateConfig({
-      radius: Math.max(5, Math.min(100, adjustedRadius)), // Clamp between 5 and 100
-      friction: adjustedFriction,
-      enabled: smoothingEnabled
-    });
-  });
-
-  // Update outline material uniforms and center offset when props change
-  $effect(() => {
-    // Use .set() to avoid allocating new objects
-    outlineMaterial.uniforms.uTextureSize.value.set(display.resolution.x, display.resolution.y);
-    outlineMaterial.uniforms.uBrushSize.value = lineWidthPixels;
-    displayCenterOffset.set(display.resolution.x / 2, display.resolution.y / 2);
-  });
-
-  // Hide outline when tool is not active
-  $effect(() => {
-    if (!isActive || !props.activeLayer) {
-      outlineMesh.visible = false;
-      outlineMaterial.uniforms.uStart.value.set(Infinity, Infinity);
-      outlineMaterial.uniforms.uEnd.value.set(Infinity, Infinity);
-    }
-  });
-
-  // Reference to the child layers
-  let layers: AnnotationMaterial[] = $state([]);
-
-  // Get the currently active layer
-  let activeLayer = $derived(
-    layers.find((layer) => {
-      if (!layer) return false;
-      return layer.getId() === props.activeLayer;
-    })
-  );
-
-  // Whenever the tool type changes, we need to reset the drawing state
-  $effect(() => {
-    if (!isActive) {
-      lastPos = null;
-      drawing = false;
-      lazyBrush.reset();
-      // Reset cursor for all layers to ensure no ghosting
-      if (!cursorsHidden) {
-        layers.forEach((layer) => {
-          if (layer) {
-            layer.revertChanges();
-            layer.resetCursor();
-          }
-        });
-        cursorsHidden = true;
-      }
-    } else {
-      // Tool is active again
-      cursorsHidden = false;
-    }
-  });
-
-  // Also reset cursor when active layer becomes null
-  $effect(() => {
-    if (!props.activeLayer && layers.length > 0) {
-      // No active layer selected, reset all cursors and revert changes
-      lastPos = null; // Reset last position to prevent cursor from appearing
-      if (!cursorsHidden) {
-        layers.forEach((layer) => {
-          if (layer) {
-            layer.revertChanges();
-            layer.resetCursor();
-          }
-        });
-        cursorsHidden = true;
-      }
-    } else if (props.activeLayer) {
-      // Active layer selected again
-      cursorsHidden = false;
-    }
-  });
-
-  function onMouseDown(e: Event, p: THREE.Vector2 | null) {
-    e.preventDefault();
-    lastPos = p;
-    drawing = true;
-
-    // Track screen position for persist button
-    if (e instanceof MouseEvent) {
-      lastScreenPos = { x: e.clientX, y: e.clientY };
-    } else if (e instanceof TouchEvent && e.touches[0]) {
-      lastScreenPos = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-    }
-
-    // Start a new stroke with lazy brush
-    if (p) {
-      // Need to adjust for display offset before starting stroke
-      const adjustedP = p.clone();
-      adjustedP.add(displayCenterOffset);
-      lazyBrush.startStroke(adjustedP);
-    }
-
-    draw(e, p);
-  }
-
-  function onMouseUp() {
-    // If we have just finished drawing, save the annotation
-    if (props.activeLayer && drawing) {
-      onAnnotationUpdate(props.activeLayer, toPng(), lastScreenPos || undefined);
-    }
-
-    // Reset the drawing state
-    drawing = false;
-    lazyBrush.endStroke();
-    // Don't reset lastPos here to prevent cursor jumping
-  }
-
-  function onMouseLeave() {
-    lastPos = null;
-    drawing = false;
-    lazyBrush.reset();
-
-    // Revert changes and hide cursor
-    if (activeLayer && !cursorsHidden) {
-      activeLayer.revertChanges();
-      activeLayer.resetCursor();
-    }
-
-    // Hide outline
-    outlineMesh.visible = false;
-    outlineMaterial.uniforms.uStart.value.set(Infinity, Infinity);
-    outlineMaterial.uniforms.uEnd.value.set(Infinity, Infinity);
-  }
-
-  function draw(e: Event, p: THREE.Vector2 | null) {
-    // Track screen position during drawing for persist button
-    if (drawing) {
-      if (e instanceof MouseEvent) {
-        lastScreenPos = { x: e.clientX, y: e.clientY };
-      } else if (e instanceof TouchEvent && e.touches[0]) {
-        lastScreenPos = { x: e.touches[0].clientX, y: e.touches[0].clientY };
-      }
-    }
-
-    // If the mouse is not within the drawing area, hide cursor and outline
-    if (!p) {
-      // Reset cursor for all layers when mouse leaves (only if not already hidden)
-      if (!cursorsHidden) {
-        layers.forEach((layer) => {
-          if (layer) {
-            layer.resetCursor();
-          }
-        });
-      }
-      // Hide outline
-      outlineMesh.visible = false;
-      outlineMaterial.uniforms.uStart.value.set(Infinity, Infinity);
-      outlineMaterial.uniforms.uEnd.value.set(Infinity, Infinity);
-      return;
-    }
-
-    // Only process if we have an active layer and the annotation tool is active
-    if (!activeLayer || !isActive || !props.activeLayer) {
-      // Make sure all cursors are hidden when not active (only if not already hidden)
-      if (!cursorsHidden) {
-        layers.forEach((layer) => {
-          if (layer) {
-            layer.resetCursor();
-          }
-        });
-        cursorsHidden = true;
-      }
-      // Hide outline
-      outlineMesh.visible = false;
-      outlineMaterial.uniforms.uStart.value.set(Infinity, Infinity);
-      outlineMaterial.uniforms.uEnd.value.set(Infinity, Infinity);
-      return;
-    }
-
-    // Tool is active and we have a valid position
-    cursorsHidden = false;
-
-    p.add(displayCenterOffset);
-
-    // Show outline at cursor position
-    outlineMesh.visible = true;
-    outlineMaterial.uniforms.uStart.value.copy(p);
-    outlineMaterial.uniforms.uEnd.value.copy(p);
-
-    // Use lazy brush for smooth drawing when drawing is active
-    if (drawing && lazyBrush.enabled) {
-      // Update lazy brush and get smoothed points
-      const segments = lazyBrush.updateStroke(p);
-
-      // Draw each segment (segments come as pairs: [lastPoint, newPoint])
-      for (let i = 0; i < segments.length; i += 2) {
-        if (segments[i] && segments[i + 1]) {
-          // Draw from last point to new point
-          activeLayer.drawPath(segments[i + 1], segments[i], true);
-        }
-      }
-
-      // Update cursor to show brush position
-      const brushPos = lazyBrush.getBrushPosition();
-      if (brushPos) {
-        activeLayer.drawPath(brushPos, brushPos, false);
-        // Update outline to follow lazy brush position
-        outlineMaterial.uniforms.uStart.value.copy(brushPos);
-        outlineMaterial.uniforms.uEnd.value.copy(brushPos);
-      } else {
-        // Show cursor at actual position if no brush position
-        activeLayer.drawPath(p, p, false);
-      }
-    } else if (drawing && !lazyBrush.enabled) {
-      // Drawing but lazy brush is disabled
-      if (!lastPos) {
-        lastPos = p.clone();
-      }
-      activeLayer.drawPath(p, lastPos, true);
-      lastPos = p.clone();
-    } else {
-      // Just hovering, show cursor
-      activeLayer.drawPath(p, p, false);
-    }
-  }
-
-  function isVisible(layer: AnnotationLayerData) {
-    // Don't show DM layers to players
-    return !(mode === StageMode.Player && layer.visibility === StageMode.DM);
-  }
-
-  function hasEffect(layer: AnnotationLayerData) {
-    // Check if the layer has an effect (not None)
-    return layer.effect?.type !== undefined && layer.effect.type !== AnnotationEffect.None;
-  }
-
-  /**
-   * Clears the annotation layer
-   */
-  export function clear(layerId: string) {
-    if (layerId) {
-      const layer = layers.find((layer) => layer.getId() === layerId);
-      if (layer) {
-        layer.clear();
-        onAnnotationUpdate(layerId, toPng());
-      }
-    }
-  }
-
-  /**
-   * Serializes the annotation layer image data into a binary buffer
-   * @return A binary buffer
-   */
-  export async function toPng(): Promise<Blob> {
-    // For now, return the active layer's PNG or an empty blob
-    return (await activeLayer?.toPng()) ?? new Blob();
-  }
-
-  /**
-   * Exports the active annotation layer state as RLE-encoded data
-   * @returns RLE encoded Uint8Array
-   */
-  export async function toRLE(): Promise<Uint8Array> {
-    return (await activeLayer?.toRLE()) ?? new Uint8Array();
-  }
-
-  /**
-   * Loads RLE-encoded data into the active annotation layer
-   * @param rleData RLE encoded data
-   * @param width Image width
-   * @param height Image height
-   */
-  export async function fromRLE(rleData: Uint8Array, width: number, height: number) {
-    return activeLayer?.fromRLE(rleData, width, height);
-  }
-
-  /**
-   * Loads RLE-encoded data into a specific annotation layer by ID
-   * @param layerId The ID of the annotation layer
-   * @param rleData RLE encoded data
-   */
-  export async function loadMask(layerId: string, rleData: Uint8Array) {
-    // Filter out null entries that may exist before components are rendered
-    const layer = layers.find((layer) => layer && layer.getId() === layerId);
-    if (layer) {
-      return layer.fromRLE(rleData, 1024, 1024);
-    }
-  }
-</script>
-
-<LayerInput
-  id="annotation"
-  {isActive}
-  layerSize={{ width: 1, height: 1 }}
-  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="annotationInput" layers={isActive ? [SceneLayer.Input] : undefined}>
-  <T.MeshBasicMaterial visible={false} />
-  <T.PlaneGeometry args={[2 * display.resolution.x, 2 * display.resolution.y]} />
-</T.Mesh>
-
-<!-- Brush outline for annotation tool -->
-<T.Mesh
-  bind:ref={outlineMesh}
-  name="annotationToolOutline"
-  layers={[SceneLayer.Overlay]}
-  scale={[display.resolution.x, display.resolution.y, 1]}
-  renderOrder={SceneLayerOrder.Cursor}
->
-  <T is={outlineMaterial} transparent={true} depthTest={false} />
-  <T.PlaneGeometry />
-</T.Mesh>
-
-<!--
-Effect annotations render on Main layer (under fog, with post-processing).
-Color annotations render on Overlay layer (over fog, no post-processing).
--->
-<T.Mesh name="annotationLayer" scale={[display.resolution.x, display.resolution.y, 1]}>
-  {#each props.layers as layer, index (layer.id)}
-    <T.Mesh
-      name={layer.id}
-      visible={isVisible(layer)}
-      position.z={(props.layers.length - index) * 0.001}
-      layers={hasEffect(layer) ? [SceneLayer.Main] : [SceneLayer.Overlay]}
-      renderOrder={hasEffect(layer) ? SceneLayerOrder.EffectAnnotation : SceneLayerOrder.Annotation}
-    >
-      <AnnotationMaterial bind:this={layers[index]} props={layer} {display} lineWidth={props.lineWidth} />
-      <T.PlaneGeometry />
-    </T.Mesh>
-  {/each}
-</T.Mesh>

package/src/lib/components/Stage/components/AnnotationLayer/AnnotationMaterial.svelte

@@ -1,167 +0,0 @@
-<script lang="ts">
-  import * as THREE from 'three';
-  import { T, useTask } from '@threlte/core';
-  import { onDestroy } from 'svelte';
-  import chroma from 'chroma-js';
-  import DrawingMaterial from '../DrawingLayer/DrawingMaterial.svelte';
-  import { type AnnotationLayerData, AnnotationEffect } from './types';
-  import { clippingPlaneStore } from '../../helpers/clippingPlaneStore.svelte';
-  import { DrawMode, ToolType, InitialState } from '../DrawingLayer/types';
-  import type { DisplayProps } from '../Stage/types';
-
-  import annotationEffectsFragmentShader from '../../shaders/AnnotationEffects.frag?raw';
-  import annotationVertexShader from '../../shaders/default.vert?raw';
-
-  interface Props {
-    props: AnnotationLayerData;
-    display: DisplayProps;
-    lineWidth?: number;
-  }
-
-  const { props, display, lineWidth = 2.0 }: Props = $props();
-
-  const lineWidthPixels = $derived.by(() => {
-    const textureSize = Math.min(display.resolution.x, display.resolution.y);
-    return Math.round(textureSize * (lineWidth / 100));
-  });
-
-  let size = $derived({ width: display.resolution.x, height: display.resolution.y });
-
-  let drawMaterial: DrawingMaterial;
-
-  const hexToRGB = (hex: string): THREE.Vector3 => {
-    const [r, g, b] = chroma(hex).gl();
-    return new THREE.Vector3(r, g, b);
-  };
-
-  // Hardcoded color for Magic effect (saturated purple)
-  const MAGIC_EFFECT_COLOR = '#9333ea';
-
-  // Use hardcoded color for Magic effect, otherwise use layer color
-  let colorUniform = $derived(
-    props.effect?.type === AnnotationEffect.Magic ? hexToRGB(MAGIC_EFFECT_COLOR) : hexToRGB(props.color)
-  );
-
-  const getEffectType = () => props.effect?.type ?? AnnotationEffect.None;
-  const getEffectSpeed = () => props.effect?.speed ?? 1.0;
-  const getEffectIntensity = () => props.effect?.intensity ?? 1.0;
-  const getEffectSoftness = () => props.effect?.softness ?? 0.5;
-  const getEffectBorder = () => props.effect?.border ?? 0.5;
-  const getEffectRoughness = () => props.effect?.roughness ?? 0.0;
-
-  let material = new THREE.ShaderMaterial({
-    defines: {
-      NUM_CLIPPING_PLANES: 4
-    },
-    uniforms: {
-      uMaskTexture: { value: null },
-      uTime: { value: 0.0 },
-      uEffectType: { value: getEffectType() },
-      uBaseColor: { value: hexToRGB(props.color) },
-      uOpacity: { value: props.opacity },
-      uSpeed: { value: getEffectSpeed() },
-      uIntensity: { value: getEffectIntensity() },
-      uSoftness: { value: getEffectSoftness() },
-      uBorder: { value: getEffectBorder() },
-      uRoughness: { value: getEffectRoughness() },
-      uEdgeMinMipMapLevel: { value: 0 },
-      uEdgeMaxMipMapLevel: { value: 4 },
-      uClippingPlanes: new THREE.Uniform(
-        clippingPlaneStore.value.map((p) => new THREE.Vector4(p.normal.x, p.normal.y, p.normal.z, p.constant))
-      )
-    },
-    transparent: true,
-    depthWrite: false, // Prevent transparent overlay from affecting depth buffer
-    fragmentShader: annotationEffectsFragmentShader,
-    vertexShader: annotationVertexShader
-  });
-
-  $effect(() => {
-    material.uniforms.uBaseColor.value.copy(colorUniform);
-    material.uniforms.uOpacity.value = props.opacity;
-    material.uniforms.uEffectType.value = getEffectType();
-    material.uniforms.uSpeed.value = getEffectSpeed();
-    material.uniforms.uIntensity.value = getEffectIntensity();
-    material.uniforms.uSoftness.value = getEffectSoftness();
-    material.uniforms.uBorder.value = getEffectBorder();
-    material.uniforms.uRoughness.value = getEffectRoughness();
-    // Update clipping planes in place to avoid allocating new Vector4 objects
-    const planes = clippingPlaneStore.value;
-    for (let i = 0; i < planes.length; i++) {
-      const p = planes[i];
-      material.uniforms.uClippingPlanes.value[i].set(p.normal.x, p.normal.y, p.normal.z, p.constant);
-    }
-    material.uniformsNeedUpdate = true;
-  });
-
-  useTask((delta) => {
-    material.uniforms.uTime.value += delta;
-  });
-
-  export const getId = () => props.id;
-
-  export const revertChanges = () => {
-    drawMaterial.revert();
-  };
-
-  export const resetCursor = () => {
-    if (drawMaterial) {
-      drawMaterial.resetCursor();
-    }
-  };
-
-  export const clear = () => {
-    drawMaterial.clear();
-  };
-
-  export const drawPath = (start: THREE.Vector2, last: THREE.Vector2 | null = null, persist: boolean = false) => {
-    drawMaterial.drawPath(start, last, persist);
-  };
-
-  export const toPng = async (): Promise<Blob> => {
-    return drawMaterial.toPng();
-  };
-
-  export const toRLE = async (): Promise<Uint8Array> => {
-    return drawMaterial.toRLE();
-  };
-
-  export const fromRLE = async (rleData: Uint8Array, width: number, height: number) => {
-    return drawMaterial.fromRLE(rleData, width, height);
-  };
-
-  onDestroy(() => {
-    material.dispose();
-  });
-</script>
-
-<DrawingMaterial
-  bind:this={drawMaterial}
-  props={{
-    url: props.url,
-    opacity: {
-      dm: props.opacity,
-      player: props.opacity
-    },
-    tool: {
-      mode: DrawMode.Draw,
-      size: lineWidthPixels,
-      type: ToolType.Brush
-    }
-  }}
-  initialState={InitialState.Clear}
-  {size}
-  onRender={(texture) => {
-    material.uniforms.uBaseColor.value.copy(colorUniform);
-    material.uniforms.uMaskTexture.value = texture;
-    material.uniformsNeedUpdate = true;
-  }}
-/>
-
-{#snippet attachMaterial()}
-  {material}
-{/snippet}
-
-<T is={material}>
-  {@render attachMaterial()}
-</T>