@tableslayer/ui 0.1.4 → 0.1.6

package/src/lib/components/Stage/helpers/lazyBrush.ts

@@ -1,171 +0,0 @@
-import { LazyBrush } from 'lazy-brush';
-import * as THREE from 'three';
-
-export interface LazyBrushConfig {
-  radius?: number;
-  enabled?: boolean;
-  friction?: number;
-  initialPoint?: { x: number; y: number };
-}
-
-export class LazyBrushManager {
-  private lazyBrush: LazyBrush;
-  private isEnabled: boolean;
-  private friction: number;
-  private hasStarted: boolean = false;
-  private currentStrokePoints: THREE.Vector2[] = [];
-
-  constructor(config: LazyBrushConfig = {}) {
-    this.lazyBrush = new LazyBrush({
-      radius: config.radius ?? 15, // Default radius for smoothing
-      enabled: config.enabled ?? true,
-      initialPoint: config.initialPoint ?? { x: 0, y: 0 }
-    });
-    this.isEnabled = config.enabled ?? true;
-    this.friction = config.friction ?? 0.5; // Default friction for moderate smoothing
-  }
-
-  /**
-   * Updates the lazy brush configuration
-   */
-  updateConfig(config: Partial<LazyBrushConfig>) {
-    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: THREE.Vector2) {
-    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: THREE.Vector2): THREE.Vector2[] {
-    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(): THREE.Vector2 | null {
-    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(): THREE.Vector2 | null {
-    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(): boolean {
-    return this.isEnabled;
-  }
-
-  /**
-   * Sets whether lazy brush is enabled
-   */
-  set enabled(value: boolean) {
-    this.isEnabled = value;
-    // LazyBrush doesn't have an enable property, we'll handle it internally
-  }
-
-  /**
-   * Gets the lazy radius
-   */
-  get radius(): number {
-    return this.lazyBrush.radius;
-  }
-
-  /**
-   * Sets the lazy radius
-   */
-  set radius(value: number) {
-    this.lazyBrush.setRadius(value);
-  }
-}

package/src/lib/components/Stage/helpers/performanceMetrics.svelte.ts

@@ -1,220 +0,0 @@
-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[];
-}
-
-const HISTORY_SIZE = 120; // Store last 120 frames (~2 seconds at 60fps)
-
-// Performance metrics state
-export const performanceMetrics: { value: 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: { value: PerformanceHistory } = $state({
-  value: {
-    timestamps: []
-  }
-});
-
-// Timing helpers
-let lastLogTime = 0;
-
-/**
- * Start timing a render pass
- */
-export const startTiming = (): number => {
-  return performance.now();
-};
-
-/**
- * End timing a render pass and return elapsed time in ms
- */
-export const endTiming = (startTime: number): number => {
-  return performance.now() - startTime;
-};
-
-/**
- * Update metrics at the start of each frame
- */
-export const beginFrame = (): number => {
-  return performance.now();
-};
-
-/**
- * Update metrics at the end of each frame
- */
-export const endFrame = (
-  _frameStartTime: number,
-  renderer: THREE.WebGLRenderer,
-  timings: {
-    composerTime: number;
-    overlayTime: number;
-    weatherTime?: number;
-  }
-): void => {
-  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: timings.weatherTime ?? 0,
-    totalRenderTime: timings.composerTime + timings.overlayTime + (timings.weatherTime ?? 0)
-  };
-
-  performanceHistory.value = { ...history };
-};
-
-/**
- * Log metrics to console at specified rate
- */
-export const logMetrics = (rate: number): void => {
-  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 = (): number => {
-  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 = (): number => {
-  const timestamps = performanceHistory.value.timestamps;
-  if (timestamps.length < 10) return 0;
-
-  // Calculate frame times from timestamp deltas
-  const frameTimes: number[] = [];
-  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 = (): number[] => {
-  const timestamps = performanceHistory.value.timestamps;
-  if (timestamps.length < 2) return [];
-
-  const frameTimes: number[] = [];
-  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 = (): void => {
-  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/src/lib/components/Stage/helpers/utils.ts

@@ -1,21 +0,0 @@
-import * as THREE from 'three';
-
-export function textureToBase64(texture: THREE.DataTexture): string {
-  if (!texture.image.data) {
-    throw new Error('Texture image data is null');
-  }
-  return texture.image.data.toString();
-}
-
-export function base64ToTexture(base64: string) {
-  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/src/lib/components/Stage/index.ts

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