@tableslayer/ui 0.0.1

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

@@ -0,0 +1,121 @@
+import type { StageMode } from '../Stage/types';
+/**
+ * Visual effect types for annotation layers
+ */
+export declare 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 declare const AnnotationEffectDefaults: Record<AnnotationEffect, Omit<AnnotationEffectProps, 'type'>>;
+/**
+ * Get the default effect properties for a given effect type
+ */
+export declare const getDefaultEffectProps: (effectType: AnnotationEffect) => AnnotationEffectProps;

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

@@ -0,0 +1,71 @@
+/**
+ * Visual effect types for annotation layers
+ */
+export var AnnotationEffect;
+(function (AnnotationEffect) {
+    AnnotationEffect[AnnotationEffect["None"] = 0] = "None";
+    AnnotationEffect[AnnotationEffect["Fire"] = 1] = "Fire";
+    AnnotationEffect[AnnotationEffect["SpaceTear"] = 2] = "SpaceTear";
+    AnnotationEffect[AnnotationEffect["Water"] = 3] = "Water";
+    AnnotationEffect[AnnotationEffect["Magic"] = 4] = "Magic";
+    AnnotationEffect[AnnotationEffect["Grease"] = 5] = "Grease";
+    AnnotationEffect[AnnotationEffect["Ice"] = 6] = "Ice";
+})(AnnotationEffect || (AnnotationEffect = {}));
+/**
+ * Default effect properties for each annotation effect type
+ */
+export const AnnotationEffectDefaults = {
+    [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) => (Object.assign({ type: effectType }, AnnotationEffectDefaults[effectType]));

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

@@ -0,0 +1,7 @@
+import type { CursorLayerProps } from './types';
+interface Props {
+    props: CursorLayerProps;
+}
+declare const CursorLayer: import("svelte").Component<Props, {}, "">;
+type CursorLayer = ReturnType<typeof CursorLayer>;
+export default CursorLayer;

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

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

package/dist/components/Stage/components/CursorLayer/index.js

@@ -0,0 +1 @@
+export { default as CursorLayer } from './CursorLayer.svelte';

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

@@ -0,0 +1,28 @@
+export interface CursorData {
+    id: string;
+    worldPosition: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    color: string;
+    label?: string;
+    opacity: number;
+    lastUpdateTime: number;
+}
+export interface CursorLayerProps {
+    cursors: CursorData[];
+    showLabels: boolean;
+    fadeOutDelay: number;
+    fadeOutDuration: number;
+    gridSpacing?: number;
+    displaySize?: {
+        x: number;
+        y: number;
+    };
+    displayResolution?: {
+        x: number;
+        y: number;
+    };
+    sceneZoom?: number;
+}

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

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