@tableslayer/ui 0.1.4 → 0.1.5

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

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

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

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

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

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

@@ -1,23 +0,0 @@
-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)
-}