@tableslayer/ui 0.1.5 → 0.1.6

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

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

@@ -1,71 +0,0 @@
-/**
- * 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

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

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

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

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

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

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

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

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

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