@tableslayer/ui 0.1.3 → 0.1.4

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

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

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

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

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