@tableslayer/ui 0.1.3 → 0.1.4

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

@@ -0,0 +1,196 @@
+import type { StageMode } from '../Stage/types';
+
+/**
+ * Visual effect types for annotation layers
+ */
+export enum AnnotationEffect {
+  None = 0,
+  Fire = 1,
+  SpaceTear = 2,
+  Water = 3,
+  Magic = 4,
+  Grease = 5,
+  Ice = 6
+}
+
+/**
+ * Properties for annotation visual effects
+ */
+export interface AnnotationEffectProps {
+  /**
+   * The type of visual effect to apply
+   */
+  type: AnnotationEffect;
+
+  /**
+   * Animation speed multiplier (0.0 - 2.0)
+   */
+  speed: number;
+
+  /**
+   * Intensity of the effect (0.0 - 1.0)
+   */
+  intensity: number;
+
+  /**
+   * Edge softness - how much the effect fades at the boundaries (0.0 - 1.0)
+   * Higher values create a more gradual fade to transparent
+   */
+  softness: number;
+
+  /**
+   * Border/edge effect intensity (0.0 - 1.0)
+   * Controls foam, glow, nebula wisps, etc. at the edges
+   */
+  border: number;
+
+  /**
+   * Edge roughness - adds random noise to effect edges (0.0 - 1.0)
+   * Higher values create more jagged, organic-looking boundaries
+   */
+  roughness: number;
+}
+
+/**
+ * The properties for the annotations layer
+ */
+export interface AnnotationsLayerProps {
+  /**
+   * The layers to display
+   */
+  layers: AnnotationLayerData[];
+
+  /**
+   * The id of the active layer
+   */
+  activeLayer: string | null;
+
+  /**
+   * The line width for drawing (global setting)
+   */
+  lineWidth?: number;
+
+  /**
+   * Whether to enable brush smoothing for drawing
+   * When true, uses lazy brush algorithm for smoother lines
+   * Default: true in editor, false in play view
+   */
+  smoothingEnabled?: boolean;
+}
+
+/**
+ * The properties for an individual annotation drawing layer
+ */
+export interface AnnotationLayerData {
+  /**
+   * The ID of the annotation layer
+   */
+  id: string;
+
+  /**
+   * The name of the annotation layer
+   */
+  name?: string;
+
+  /**
+   * The opacity of the annotation layer
+   */
+  opacity: number;
+
+  /**
+   * The color of the annotation layer
+   */
+  color: string;
+
+  /**
+   * The URL of the texture to use for the annotation layer
+   */
+  url: string | null;
+
+  /**
+   * Version timestamp for mask data changes (for real-time sync)
+   */
+  maskVersion?: number;
+
+  /**
+   * Control who can see the layer
+   */
+  visibility: StageMode;
+
+  /**
+   * Visual effect settings for this annotation layer (experimental, not persisted)
+   */
+  effect?: AnnotationEffectProps;
+}
+
+export interface AnnotationExports {
+  clear: (layerId: string) => void;
+  toPng: () => Promise<Blob>;
+  toRLE: () => Promise<Uint8Array>;
+  fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+  loadMask: (layerId: string, rleData: Uint8Array) => Promise<void>;
+  isDrawing: () => boolean;
+}
+
+/**
+ * Default effect properties for each annotation effect type
+ */
+export const AnnotationEffectDefaults: Record<AnnotationEffect, Omit<AnnotationEffectProps, 'type'>> = {
+  [AnnotationEffect.None]: {
+    speed: 1.0,
+    intensity: 1.0,
+    softness: 0.5,
+    border: 0.5,
+    roughness: 0.0
+  },
+  [AnnotationEffect.Fire]: {
+    speed: 0.94,
+    intensity: 1.04,
+    softness: 0.37,
+    border: 0.4,
+    roughness: 0.62
+  },
+  [AnnotationEffect.SpaceTear]: {
+    speed: 1.5,
+    intensity: 1.96,
+    softness: 0.35,
+    border: 0.36,
+    roughness: 0.34
+  },
+  [AnnotationEffect.Water]: {
+    speed: 0.42,
+    intensity: 1.06,
+    softness: 0.0,
+    border: 0.36,
+    roughness: 0.32
+  },
+  [AnnotationEffect.Magic]: {
+    speed: 0.5,
+    intensity: 0.98,
+    softness: 0.24,
+    border: 0.18,
+    roughness: 0.5
+  },
+  [AnnotationEffect.Grease]: {
+    speed: 0.26,
+    intensity: 1.52,
+    softness: 0.13,
+    border: 0.57,
+    roughness: 0.26
+  },
+  [AnnotationEffect.Ice]: {
+    speed: 0.92,
+    intensity: 1.2,
+    softness: 0.32,
+    border: 0.44,
+    roughness: 0.55
+  }
+};
+
+/**
+ * Get the default effect properties for a given effect type
+ */
+export const getDefaultEffectProps = (effectType: AnnotationEffect): AnnotationEffectProps => ({
+  type: effectType,
+  ...AnnotationEffectDefaults[effectType]
+});

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

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import * as THREE from 'three';
+  import { T, useTask, useThrelte } from '@threlte/core';
+  import type { CursorData, CursorLayerProps } from './types';
+  import { SceneLayer, SceneLayerOrder } from '../Scene/types';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    props: CursorLayerProps;
+  }
+
+  const { props }: Props = $props();
+  const { invalidate } = useThrelte();
+
+  // Track current time for fade calculations
+  let currentTime = $state(Date.now());
+
+  useTask(() => {
+    currentTime = Date.now();
+  });
+
+  // Calculate opacity for each cursor based on fade settings
+  const getCursorOpacity = (cursor: CursorData): number => {
+    const timeSinceUpdate = currentTime - cursor.lastUpdateTime;
+
+    if (timeSinceUpdate < props.fadeOutDelay) {
+      return cursor.opacity;
+    }
+
+    const fadeProgress = (timeSinceUpdate - props.fadeOutDelay) / props.fadeOutDuration;
+    if (fadeProgress >= 1) {
+      return 0;
+    }
+
+    return cursor.opacity * (1 - fadeProgress);
+  };
+
+  // Calculate cursor size based on grid spacing and display dimensions
+  const calculateCursorSize = () => {
+    if (!props.gridSpacing || !props.displaySize || !props.displayResolution) {
+      return 50;
+    }
+
+    const worldUnitsPerInch = props.displayResolution.x / props.displaySize.x;
+    const gridSizeInWorldUnits = props.gridSpacing * worldUnitsPerInch;
+    const sceneZoom = props.sceneZoom || 1;
+    const adjustedSize = gridSizeInWorldUnits / sceneZoom;
+    const targetScale = 0.6;
+    const finalSize = adjustedSize * targetScale;
+
+    return finalSize;
+  };
+
+  const targetDiameter = $derived(calculateCursorSize());
+
+  // Create plane geometry for the cursor
+  const planeGeometry = new THREE.PlaneGeometry(1, 1);
+
+  // Load and create textures for each cursor color
+  const textureCache = new Map<string, THREE.Texture>();
+
+  const createCursorTexture = (color: string): THREE.Texture => {
+    // Check cache first
+    if (textureCache.has(color)) {
+      return textureCache.get(color)!;
+    }
+
+    // Create SVG with the specified color
+    const svg = `
+      <svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
+            <feOffset dx="0" dy="1" result="offsetblur"/>
+            <feFlood flood-color="#000000" flood-opacity="0.2"/>
+            <feComposite in2="offsetblur" operator="in"/>
+            <feMerge>
+              <feMergeNode/>
+              <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+          </filter>
+        </defs>
+        <circle 
+          cx="32" 
+          cy="32" 
+          r="20" 
+          fill="${color}" 
+          stroke="white" 
+          stroke-width="4"
+          filter="url(#shadow)"
+        />
+      </svg>
+    `;
+
+    // Convert SVG to data URL
+    const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(svg);
+
+    // Create texture from SVG
+    const loader = new THREE.TextureLoader();
+    const texture = loader.load(svgDataUrl, () => {
+      invalidate();
+    });
+
+    // Configure texture for best quality
+    texture.minFilter = THREE.LinearFilter;
+    texture.magFilter = THREE.LinearFilter;
+    texture.generateMipmaps = false;
+    texture.needsUpdate = true;
+
+    // Cache the texture
+    textureCache.set(color, texture);
+
+    return texture;
+  };
+
+  // Cleanup textures on unmount
+  onMount(() => {
+    return () => {
+      textureCache.forEach((texture) => texture.dispose());
+      textureCache.clear();
+    };
+  });
+</script>
+
+{#each props.cursors as cursor, index (cursor.id)}
+  {@const opacity = getCursorOpacity(cursor)}
+  {@const cursorColor = index === 0 ? '#000000' : cursor.color}
+
+  {#if opacity > 0}
+    {@const texture = createCursorTexture(cursorColor)}
+
+    <T.Group
+      position={[cursor.worldPosition.x, cursor.worldPosition.y, cursor.worldPosition.z + 0.1]}
+      layers={[SceneLayer.Overlay]}
+    >
+      <T.Mesh geometry={planeGeometry} scale={[targetDiameter, targetDiameter, 1]} renderOrder={SceneLayerOrder.Cursor}>
+        <T.MeshBasicMaterial
+          map={texture}
+          transparent={true}
+          {opacity}
+          depthTest={false}
+          depthWrite={false}
+          alphaTest={0.01}
+        />
+      </T.Mesh>
+    </T.Group>
+  {/if}
+{/each}

package/src/lib/components/Stage/components/CursorLayer/cursor.svg

@@ -0,0 +1,26 @@
+<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+  <!-- Drop shadow -->
+  <defs>
+    <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
+      <feOffset dx="0" dy="1" result="offsetblur"/>
+      <feFlood flood-color="#000000" flood-opacity="0.2"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  
+  <!-- Main circle with white stroke -->
+  <circle 
+    cx="32" 
+    cy="32" 
+    r="20" 
+    fill="currentColor" 
+    stroke="white" 
+    stroke-width="4"
+    filter="url(#shadow)"
+  />
+</svg>

package/src/lib/components/Stage/components/CursorLayer/index.ts

@@ -0,0 +1,2 @@
+export { default as CursorLayer } from './CursorLayer.svelte';
+export type { CursorData, CursorLayerProps } from './types';

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

@@ -0,0 +1,23 @@
+export interface CursorData {
+  id: string; // Unique identifier for the cursor (userId or sessionId)
+  worldPosition: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  color: string;
+  label?: string;
+  opacity: number; // For fade-out effect
+  lastUpdateTime: number;
+}
+
+export interface CursorLayerProps {
+  cursors: CursorData[];
+  showLabels: boolean;
+  fadeOutDelay: number; // Time in ms before cursor starts fading
+  fadeOutDuration: number; // Time in ms for fade animation
+  gridSpacing?: number; // Grid spacing in inches (for sizing cursor)
+  displaySize?: { x: number; y: number }; // Display size in inches
+  displayResolution?: { x: number; y: number }; // Display resolution in pixels
+  sceneZoom?: number; // Current scene zoom level (to compensate for scaling)
+}