@tableslayer/ui 0.0.1

package/dist/components/Stage/helpers/lazyBrush.js

@@ -0,0 +1,137 @@
+import { LazyBrush } from 'lazy-brush';
+import * as THREE from 'three';
+export class LazyBrushManager {
+    constructor(config = {}) {
+        var _a, _b, _c, _d, _e;
+        this.hasStarted = false;
+        this.currentStrokePoints = [];
+        this.lazyBrush = new LazyBrush({
+            radius: (_a = config.radius) !== null && _a !== void 0 ? _a : 15, // Default radius for smoothing
+            enabled: (_b = config.enabled) !== null && _b !== void 0 ? _b : true,
+            initialPoint: (_c = config.initialPoint) !== null && _c !== void 0 ? _c : { x: 0, y: 0 }
+        });
+        this.isEnabled = (_d = config.enabled) !== null && _d !== void 0 ? _d : true;
+        this.friction = (_e = config.friction) !== null && _e !== void 0 ? _e : 0.5; // Default friction for moderate smoothing
+    }
+    /**
+     * Updates the lazy brush configuration
+     */
+    updateConfig(config) {
+        if (config.radius !== undefined) {
+            this.lazyBrush.setRadius(config.radius);
+        }
+        if (config.enabled !== undefined) {
+            this.isEnabled = config.enabled;
+            // LazyBrush doesn't have an enable property, we'll handle it internally
+        }
+        if (config.friction !== undefined) {
+            this.friction = config.friction;
+        }
+    }
+    /**
+     * Starts a new stroke
+     */
+    startStroke(point) {
+        this.hasStarted = true;
+        this.currentStrokePoints = [];
+        if (this.isEnabled) {
+            // Update lazy brush with the starting point - force both pointer and brush to the same position
+            this.lazyBrush.update({ x: point.x, y: point.y }, { both: true });
+            this.currentStrokePoints.push(point.clone());
+        }
+    }
+    /**
+     * Updates the current stroke with a new point
+     * Returns an array of interpolated points to draw
+     */
+    updateStroke(point) {
+        if (!this.hasStarted) {
+            this.startStroke(point);
+            return [];
+        }
+        if (!this.isEnabled) {
+            // If lazy brush is disabled, just return the direct line
+            const lastPoint = this.currentStrokePoints[this.currentStrokePoints.length - 1] || point;
+            this.currentStrokePoints.push(point.clone());
+            return [lastPoint, point];
+        }
+        // Update the lazy brush with the new pointer position
+        this.lazyBrush.update({ x: point.x, y: point.y }, { friction: this.friction });
+        // Get the brush position (this is the smoothed position)
+        const brushPoint = this.lazyBrush.getBrushCoordinates();
+        // Check if the brush has moved enough to add a new point
+        if (this.lazyBrush.brushHasMoved()) {
+            const smoothedPoint = new THREE.Vector2(brushPoint.x, brushPoint.y);
+            // Get the last point we drew
+            const lastPoint = this.currentStrokePoints[this.currentStrokePoints.length - 1];
+            // Add the new smoothed point to our stroke
+            this.currentStrokePoints.push(smoothedPoint.clone());
+            // Removed console logging for performance
+            // Return the segment to draw
+            if (lastPoint) {
+                return [lastPoint, smoothedPoint];
+            }
+        }
+        return [];
+    }
+    /**
+     * Ends the current stroke
+     */
+    endStroke() {
+        this.hasStarted = false;
+        this.currentStrokePoints = [];
+    }
+    /**
+     * Gets the current lazy pointer position
+     */
+    getLazyPosition() {
+        if (!this.isEnabled || !this.hasStarted) {
+            return null;
+        }
+        const lazyCoords = this.lazyBrush.getPointerCoordinates();
+        return new THREE.Vector2(lazyCoords.x, lazyCoords.y);
+    }
+    /**
+     * Gets the current brush position (smoothed)
+     */
+    getBrushPosition() {
+        if (!this.isEnabled || !this.hasStarted) {
+            return null;
+        }
+        const brushCoords = this.lazyBrush.getBrushCoordinates();
+        return new THREE.Vector2(brushCoords.x, brushCoords.y);
+    }
+    /**
+     * Resets the lazy brush
+     */
+    reset() {
+        this.hasStarted = false;
+        this.currentStrokePoints = [];
+        this.lazyBrush.update({ x: 0, y: 0 }, { both: true });
+    }
+    /**
+     * Returns whether lazy brush is enabled
+     */
+    get enabled() {
+        return this.isEnabled;
+    }
+    /**
+     * Sets whether lazy brush is enabled
+     */
+    set enabled(value) {
+        this.isEnabled = value;
+        // LazyBrush doesn't have an enable property, we'll handle it internally
+    }
+    /**
+     * Gets the lazy radius
+     */
+    get radius() {
+        return this.lazyBrush.radius;
+    }
+    /**
+     * Sets the lazy radius
+     */
+    set radius(value) {
+        this.lazyBrush.setRadius(value);
+    }
+}

package/dist/components/Stage/helpers/performanceMetrics.svelte.d.ts

@@ -0,0 +1,62 @@
+import type * as THREE from 'three';
+export interface PerformanceMetrics {
+    frameTime: number;
+    fps: number;
+    drawCalls: number;
+    triangles: number;
+    textures: number;
+    geometries: number;
+    composerTime: number;
+    overlayTime: number;
+    weatherTime: number;
+    totalRenderTime: number;
+}
+export interface PerformanceHistory {
+    timestamps: number[];
+}
+export declare const performanceMetrics: {
+    value: PerformanceMetrics;
+};
+export declare const performanceHistory: {
+    value: PerformanceHistory;
+};
+/**
+ * Start timing a render pass
+ */
+export declare const startTiming: () => number;
+/**
+ * End timing a render pass and return elapsed time in ms
+ */
+export declare const endTiming: (startTime: number) => number;
+/**
+ * Update metrics at the start of each frame
+ */
+export declare const beginFrame: () => number;
+/**
+ * Update metrics at the end of each frame
+ */
+export declare const endFrame: (_frameStartTime: number, renderer: THREE.WebGLRenderer, timings: {
+    composerTime: number;
+    overlayTime: number;
+    weatherTime?: number;
+}) => void;
+/**
+ * Log metrics to console at specified rate
+ */
+export declare const logMetrics: (rate: number) => void;
+/**
+ * Get average FPS over the entire history window
+ */
+export declare const getAverageFps: () => number;
+/**
+ * Get the 1% low FPS (slowest 1% of frames)
+ */
+export declare const get1PercentLowFps: () => number;
+/**
+ * Get frame times calculated from timestamps (for graphing)
+ */
+export declare const getFrameTimes: () => number[];
+/**
+ * Reset all metrics and history
+ */
+export declare const resetMetrics: () => void;

package/dist/components/Stage/helpers/performanceMetrics.svelte.js

@@ -0,0 +1,165 @@
+const HISTORY_SIZE = 120; // Store last 120 frames (~2 seconds at 60fps)
+// Performance metrics state
+export const performanceMetrics = $state({
+    value: {
+        frameTime: 0,
+        fps: 0,
+        drawCalls: 0,
+        triangles: 0,
+        textures: 0,
+        geometries: 0,
+        composerTime: 0,
+        overlayTime: 0,
+        weatherTime: 0,
+        totalRenderTime: 0
+    }
+});
+// Historical data for graphing - just timestamps, calculate frame times from deltas
+export const performanceHistory = $state({
+    value: {
+        timestamps: []
+    }
+});
+// Timing helpers
+let lastLogTime = 0;
+/**
+ * Start timing a render pass
+ */
+export const startTiming = () => {
+    return performance.now();
+};
+/**
+ * End timing a render pass and return elapsed time in ms
+ */
+export const endTiming = (startTime) => {
+    return performance.now() - startTime;
+};
+/**
+ * Update metrics at the start of each frame
+ */
+export const beginFrame = () => {
+    return performance.now();
+};
+/**
+ * Update metrics at the end of each frame
+ */
+export const endFrame = (_frameStartTime, renderer, timings) => {
+    var _a, _b;
+    const now = performance.now();
+    // Add timestamp to history
+    const history = performanceHistory.value;
+    history.timestamps.push(now);
+    // Trim history to size limit
+    while (history.timestamps.length > HISTORY_SIZE) {
+        history.timestamps.shift();
+    }
+    // Calculate FPS from timestamps (frames / time elapsed)
+    // Use recent window for current FPS
+    const timestamps = history.timestamps;
+    let fps = 0;
+    let frameTime = 0;
+    if (timestamps.length >= 2) {
+        // Use last 30 frames or all available for FPS calculation
+        const sampleSize = Math.min(30, timestamps.length);
+        const oldestIdx = timestamps.length - sampleSize;
+        const elapsed = now - timestamps[oldestIdx];
+        if (elapsed > 0) {
+            fps = ((sampleSize - 1) / elapsed) * 1000;
+            frameTime = elapsed / (sampleSize - 1);
+        }
+    }
+    // Update metrics
+    const info = renderer.info;
+    performanceMetrics.value = {
+        frameTime,
+        fps,
+        drawCalls: info.render.calls,
+        triangles: info.render.triangles,
+        textures: info.memory.textures,
+        geometries: info.memory.geometries,
+        composerTime: timings.composerTime,
+        overlayTime: timings.overlayTime,
+        weatherTime: (_a = timings.weatherTime) !== null && _a !== void 0 ? _a : 0,
+        totalRenderTime: timings.composerTime + timings.overlayTime + ((_b = timings.weatherTime) !== null && _b !== void 0 ? _b : 0)
+    };
+    performanceHistory.value = Object.assign({}, history);
+};
+/**
+ * Log metrics to console at specified rate
+ */
+export const logMetrics = (rate) => {
+    const now = performance.now();
+    if (now - lastLogTime < rate)
+        return;
+    const m = performanceMetrics.value;
+    console.log(`[Perf] FPS: ${m.fps.toFixed(1)} | Frame: ${m.frameTime.toFixed(2)}ms | ` +
+        `Draw calls: ${m.drawCalls} | Triangles: ${m.triangles} | ` +
+        `Textures: ${m.textures} | Geometries: ${m.geometries} | ` +
+        `Composer: ${m.composerTime.toFixed(2)}ms | Overlay: ${m.overlayTime.toFixed(2)}ms`);
+    lastLogTime = now;
+};
+/**
+ * Get average FPS over the entire history window
+ */
+export const getAverageFps = () => {
+    const timestamps = performanceHistory.value.timestamps;
+    if (timestamps.length < 2)
+        return 0;
+    const elapsed = timestamps[timestamps.length - 1] - timestamps[0];
+    if (elapsed <= 0)
+        return 0;
+    return ((timestamps.length - 1) / elapsed) * 1000;
+};
+/**
+ * Get the 1% low FPS (slowest 1% of frames)
+ */
+export const get1PercentLowFps = () => {
+    const timestamps = performanceHistory.value.timestamps;
+    if (timestamps.length < 10)
+        return 0;
+    // Calculate frame times from timestamp deltas
+    const frameTimes = [];
+    for (let i = 1; i < timestamps.length; i++) {
+        frameTimes.push(timestamps[i] - timestamps[i - 1]);
+    }
+    // Sort descending (longest frame times first)
+    frameTimes.sort((a, b) => b - a);
+    // Get 99th percentile (1% slowest)
+    const p99Index = Math.max(0, Math.floor(frameTimes.length * 0.01));
+    const p99FrameTime = frameTimes[p99Index];
+    return p99FrameTime > 0 ? 1000 / p99FrameTime : 0;
+};
+/**
+ * Get frame times calculated from timestamps (for graphing)
+ */
+export const getFrameTimes = () => {
+    const timestamps = performanceHistory.value.timestamps;
+    if (timestamps.length < 2)
+        return [];
+    const frameTimes = [];
+    for (let i = 1; i < timestamps.length; i++) {
+        frameTimes.push(timestamps[i] - timestamps[i - 1]);
+    }
+    return frameTimes;
+};
+/**
+ * Reset all metrics and history
+ */
+export const resetMetrics = () => {
+    performanceMetrics.value = {
+        frameTime: 0,
+        fps: 0,
+        drawCalls: 0,
+        triangles: 0,
+        textures: 0,
+        geometries: 0,
+        composerTime: 0,
+        overlayTime: 0,
+        weatherTime: 0,
+        totalRenderTime: 0
+    };
+    performanceHistory.value = {
+        timestamps: []
+    };
+    lastLogTime = 0;
+};

package/dist/components/Stage/helpers/utils.d.ts

@@ -0,0 +1,3 @@
+import * as THREE from 'three';
+export declare function textureToBase64(texture: THREE.DataTexture): string;
+export declare function base64ToTexture(base64: string): Promise<unknown>;

package/dist/components/Stage/helpers/utils.js

@@ -0,0 +1,18 @@
+import * as THREE from 'three';
+export function textureToBase64(texture) {
+    if (!texture.image.data) {
+        throw new Error('Texture image data is null');
+    }
+    return texture.image.data.toString();
+}
+export function base64ToTexture(base64) {
+    return new Promise((resolve) => {
+        const image = new Image();
+        image.src = base64;
+        image.onload = () => {
+            const texture = new THREE.Texture(image);
+            texture.needsUpdate = true; // Update the texture with the loaded image
+            resolve(texture);
+        };
+    });
+}

package/dist/components/Stage/index.d.ts

@@ -0,0 +1,21 @@
+export { type HoveredMarker } from '../../types/awareness';
+export { AnnotationEffect, AnnotationEffectDefaults, getDefaultEffectProps, type AnnotationEffectProps, type AnnotationLayerData, type AnnotationsLayerProps } from './components/AnnotationLayer/types';
+export { DrawMode, RenderMode, ToolType } from './components/DrawingLayer/types';
+export { type EdgeOverlayProps } from './components/EdgeOverlayLayer/types';
+export { type FogLayerProps } from './components/FogLayer/types';
+export { type FogOfWarLayerProps } from './components/FogOfWarLayer/types';
+export { GridMode, GridType, type GridLayerProps } from './components/GridLayer/types';
+export { MapLayerType, type MapLayerProps } from './components/MapLayer/types';
+export { MarkerShape, MarkerSize, MarkerVisibility, type Marker, type MarkerLayerExports, type MarkerLayerProps } from './components/MarkerLayer/types';
+export { MeasurementType, type MeasurementLayerProps } from './components/MeasurementLayer/types';
+export { ParticleType, type ParticleSystemProps } from './components/ParticleSystem/types';
+export { default as PerformanceDebugger } from './components/PerformanceDebugger/PerformanceDebugger.svelte';
+export { default as PerformanceOverlay } from './components/PerformanceOverlay/PerformanceOverlay.svelte';
+export { default as PointerInputManager } from './components/PointerInputManager/PointerInputManager.svelte';
+export { SceneRotation, type PostProcessingProps, type SceneLayerProps } from './components/Scene/types';
+export { default as Stage } from './components/Stage/Stage.svelte';
+export * from './components/Stage/types';
+export { AshPreset, LeavesPreset, RainPreset, SnowPreset } from './components/WeatherLayer/presets';
+export { WeatherType, type DepthOfFieldConfig, type WeatherLayerPreset, type WeatherLayerProps } from './components/WeatherLayer/types';
+export { debugState, isDebugEnabled, setDebugEnabled } from './helpers/debugState.svelte';
+export { get1PercentLowFps, getAverageFps, getFrameTimes, performanceHistory, performanceMetrics, resetMetrics, type PerformanceHistory, type PerformanceMetrics } from './helpers/performanceMetrics.svelte';

package/dist/components/Stage/index.js

@@ -0,0 +1,21 @@
+export {} from '../../types/awareness';
+export { AnnotationEffect, AnnotationEffectDefaults, getDefaultEffectProps } from './components/AnnotationLayer/types';
+export { DrawMode, RenderMode, ToolType } from './components/DrawingLayer/types';
+export {} from './components/EdgeOverlayLayer/types';
+export {} from './components/FogLayer/types';
+export {} from './components/FogOfWarLayer/types';
+export { GridMode, GridType } from './components/GridLayer/types';
+export { MapLayerType } from './components/MapLayer/types';
+export { MarkerShape, MarkerSize, MarkerVisibility } from './components/MarkerLayer/types';
+export { MeasurementType } from './components/MeasurementLayer/types';
+export { ParticleType } from './components/ParticleSystem/types';
+export { default as PerformanceDebugger } from './components/PerformanceDebugger/PerformanceDebugger.svelte';
+export { default as PerformanceOverlay } from './components/PerformanceOverlay/PerformanceOverlay.svelte';
+export { default as PointerInputManager } from './components/PointerInputManager/PointerInputManager.svelte';
+export { SceneRotation } from './components/Scene/types';
+export { default as Stage } from './components/Stage/Stage.svelte';
+export * from './components/Stage/types';
+export { AshPreset, LeavesPreset, RainPreset, SnowPreset } from './components/WeatherLayer/presets';
+export { WeatherType } from './components/WeatherLayer/types';
+export { debugState, isDebugEnabled, setDebugEnabled } from './helpers/debugState.svelte';
+export { get1PercentLowFps, getAverageFps, getFrameTimes, performanceHistory, performanceMetrics, resetMetrics } from './helpers/performanceMetrics.svelte';