@tableslayer/ui 0.1.4 → 0.1.6

package/dist/components/Stage/components/MeasurementLayer/MeasurementManager.svelte

@@ -1,473 +0,0 @@
-<script lang="ts">
-  import * as THREE from 'three';
-  import { T, useTask } from '@threlte/core';
-  import { onDestroy } from 'svelte';
-  import { MeasurementType, type MeasurementLayerProps } from './types';
-  import type { IMeasurement } from './measurements/BaseMeasurement';
-  import { LineMeasurement } from './measurements/LineMeasurement';
-  import { CircleMeasurement } from './measurements/CircleMeasurement';
-  import { RectangleMeasurement } from './measurements/RectangleMeasurement';
-  import { BeamMeasurement } from './measurements/BeamMeasurement';
-  import { ConeMeasurement } from './measurements/ConeMeasurement';
-  import { drawCircle } from './utils/canvasDrawing';
-  import type { DisplayProps } from '../Stage/types';
-  import type { GridLayerProps } from '../GridLayer/types';
-  import { SceneLayer, SceneLayerOrder } from '../Scene/types';
-
-  interface Props {
-    props: MeasurementLayerProps;
-    visible: boolean;
-    displayProps: DisplayProps;
-    gridProps: GridLayerProps;
-    sceneRotation?: number;
-    onFadeComplete?: () => void;
-  }
-
-  const { props, visible, displayProps, gridProps, sceneRotation = 0, onFadeComplete }: Props = $props();
-
-  $effect(() => {
-    console.log('[MeasurementManager] Grid props:', gridProps);
-  });
-
-  let currentMeasurement: IMeasurement | null = null;
-  let measurementGroup = $state(new THREE.Group());
-  let autoHideTimeoutId: ReturnType<typeof setTimeout> | null = null;
-
-  // Fade animation state
-  let isFading = $state(false);
-  let fadeStartTime = $state(0);
-  let fadeOpacity = $state(1.0);
-  let receivedFadeoutTime = $state<number | null>(null); // Store fadeout time for received measurements
-
-  // Preview indicator
-  let previewMesh = $state(new THREE.Mesh());
-  let previewMaterial = $state(new THREE.MeshBasicMaterial());
-  let previewGeometry = $state(new THREE.PlaneGeometry());
-  let previewSize = $derived(props ? props.markerSize + props.outlineThickness * 2 : 22);
-  let showPreview = $state(false);
-
-  // Task for fade animation
-  useTask(() => {
-    if (isFading && props) {
-      const now = performance.now();
-      const fadeElapsed = now - fadeStartTime;
-      // Use receivedFadeoutTime if set, otherwise use props.fadeoutTime
-      const fadeTime = receivedFadeoutTime ?? props.fadeoutTime;
-      const progress = Math.min(fadeElapsed / fadeTime, 1);
-
-      fadeOpacity = 1 - progress;
-
-      // Update the opacity of all materials in the measurement group
-      if (currentMeasurement) {
-        if (currentMeasurement.shapeMesh.material instanceof THREE.MeshBasicMaterial) {
-          currentMeasurement.shapeMesh.material.opacity = props.opacity * fadeOpacity;
-        }
-        if (currentMeasurement.textMesh.material instanceof THREE.MeshBasicMaterial) {
-          currentMeasurement.textMesh.material.opacity = props.opacity * fadeOpacity;
-        }
-      }
-
-      if (progress >= 1) {
-        isFading = false;
-        clearMeasurement();
-        // Notify parent that fade is complete
-        if (onFadeComplete) {
-          onFadeComplete();
-        }
-      }
-    }
-  });
-
-  onDestroy(() => {
-    // Clear any pending auto-hide timeout
-    if (autoHideTimeoutId !== null) {
-      clearTimeout(autoHideTimeoutId);
-      autoHideTimeoutId = null;
-    }
-
-    // Stop fade animation
-    isFading = false;
-
-    currentMeasurement?.dispose();
-    if (previewGeometry) {
-      previewGeometry.dispose();
-    }
-    if (previewMaterial) {
-      if (previewMaterial.map) {
-        previewMaterial.map.dispose();
-      }
-      previewMaterial.dispose();
-    }
-  });
-
-  /**
-   * Creates a canvas texture for the preview marker that matches the measurement point styling.
-   * The marker uses the same visual properties (color, thickness, outline) as measurement start/end points.
-   */
-  $effect(() => {
-    if (!props) return;
-
-    // Create the preview marker texture
-    const markerCanvas = createMarkerCanvas();
-    const markerTexture = new THREE.CanvasTexture(markerCanvas);
-    markerTexture.needsUpdate = true;
-
-    // Dispose the old texture before assigning new one to prevent memory leak
-    if (previewMaterial.map) {
-      previewMaterial.map.dispose();
-    }
-
-    // Assign the texture to the preview material
-    previewMaterial.map = markerTexture;
-    previewMaterial.needsUpdate = true;
-  });
-
-  /**
-   * Updates the preview indicator position and visibility based on mouse position and measurement state.
-   * The preview is automatically hidden when a measurement is currently being created.
-   *
-   * @param {THREE.Vector2 | null} position - The world position where the preview should be displayed, or null to hide
-   * @param {boolean} [visible=true] - Whether the preview should be visible (defaults to true)
-   * @returns {void}
-   */
-  function updatePreview(position: THREE.Vector2 | null, visible: boolean = true): void {
-    if (!position || currentMeasurement) {
-      showPreview = false;
-      return;
-    }
-
-    showPreview = visible;
-    if (previewMesh && showPreview) {
-      previewMesh.position.set(position.x, position.y, 0);
-    }
-  }
-
-  /**
-   * Hides the preview indicator from view.
-   * Used when measurements are active or when the cursor leaves the measurement area.
-   * @returns {void}
-   */
-  function hidePreview(): void {
-    showPreview = false;
-  }
-
-  /**
-   * Shows the preview indicator if no measurement is currently active.
-   * Provides visual feedback for where the next measurement point will be placed.
-   * @returns {void}
-   */
-  function showPreviewIndicator(): void {
-    if (!currentMeasurement) {
-      showPreview = true;
-    }
-  }
-
-  /**
-   * Creates a canvas texture for the measurement marker that matches the measurement point styling.
-   * The marker uses the same visual properties (color, thickness, outline) as measurement start/end points.
-   *
-   * @returns {HTMLCanvasElement} A canvas element with the rendered marker that can be used as a texture
-   */
-  function createMarkerCanvas(): HTMLCanvasElement {
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d', { colorSpace: 'srgb' })!;
-
-    const width = previewSize;
-    const height = previewSize;
-
-    canvas.width = width;
-    canvas.height = height;
-
-    context.clearRect(0, 0, canvas.width, canvas.height);
-
-    if (props) {
-      drawCircle(
-        context,
-        previewSize / 2,
-        previewSize / 2,
-        props.markerSize / 2,
-        props.color,
-        props.outlineColor,
-        props.outlineThickness
-      );
-    }
-
-    return canvas;
-  }
-
-  /**
-   * Starts a new measurement at the specified point based on the current measurement type.
-   * Clears any existing measurement and creates the appropriate measurement class instance.
-   *
-   * @param {THREE.Vector2} startPoint - The world coordinates where the measurement should begin
-   * @returns {void}
-   */
-  function startMeasurement(startPoint: THREE.Vector2): void {
-    if (!props) return;
-
-    // Clear any existing auto-hide timeout
-    if (autoHideTimeoutId !== null) {
-      clearTimeout(autoHideTimeoutId);
-      autoHideTimeoutId = null;
-    }
-
-    // Reset fade state
-    isFading = false;
-    fadeOpacity = 1.0;
-
-    clearMeasurement();
-    showPreview = false; // Hide preview when starting measurement
-
-    // Create new measurement based on type
-    let measurement: IMeasurement;
-
-    switch (props.type) {
-      case MeasurementType.Line:
-        measurement = new LineMeasurement(startPoint, props, displayProps, gridProps);
-        break;
-      case MeasurementType.Beam:
-        measurement = new BeamMeasurement(startPoint, props, displayProps, gridProps);
-        break;
-      case MeasurementType.Cone:
-        measurement = new ConeMeasurement(startPoint, props, displayProps, gridProps);
-        break;
-      case MeasurementType.Circle:
-        measurement = new CircleMeasurement(startPoint, props, displayProps, gridProps);
-        break;
-      case MeasurementType.Square:
-        measurement = new RectangleMeasurement(startPoint, props, displayProps, gridProps);
-        break;
-      default:
-        measurement = new LineMeasurement(startPoint, props, displayProps, gridProps);
-        break;
-    }
-
-    currentMeasurement = measurement;
-    measurementGroup.add(measurement.object);
-  }
-
-  /**
-   * Updates the current measurement with a new end point, typically called during mouse movement.
-   * Recalculates measurement geometry and updates the visual representation in real-time.
-   *
-   * @param {THREE.Vector2} endPoint - The world coordinates for the current end point of the measurement
-   * @returns {void}
-   */
-  function updateMeasurement(endPoint: THREE.Vector2): void {
-    currentMeasurement?.update(endPoint, sceneRotation);
-  }
-
-  /**
-   * Completes the current measurement and schedules its automatic removal.
-   * The measurement is displayed for the duration specified by autoHideDelay, then fades out over fadeoutTime before being cleared.
-   * @returns {void}
-   */
-  function finishMeasurement(): void {
-    if (!currentMeasurement || !props) return;
-
-    // Don't finish measurements with zero distance (same start and end point)
-    const distance = currentMeasurement.startPoint.distanceTo(currentMeasurement.endPoint);
-    if (distance === 0) {
-      clearMeasurement();
-      return;
-    }
-
-    autoHideTimeoutId = setTimeout(() => {
-      // Start the fade animation
-      fadeStartTime = performance.now();
-      isFading = true;
-    }, props.autoHideDelay);
-  }
-
-  /**
-   * Removes the current measurement from the scene and disposes of its resources.
-   * Cleans up Three.js objects to prevent memory leaks and resets the measurement state.
-   * @returns {void}
-   */
-  function clearMeasurement(): void {
-    // Clear any existing auto-hide timeout
-    if (autoHideTimeoutId !== null) {
-      clearTimeout(autoHideTimeoutId);
-      autoHideTimeoutId = null;
-    }
-
-    // Reset fade state
-    isFading = false;
-    fadeOpacity = 1.0;
-    receivedFadeoutTime = null; // Reset received fadeout time
-
-    if (currentMeasurement) {
-      currentMeasurement.dispose();
-      currentMeasurement = null;
-      measurementGroup.clear();
-    }
-  }
-
-  /**
-   * Displays a measurement received from another user (via Y.js).
-   * Creates the measurement and immediately sets it to finished state to trigger auto-fade.
-   *
-   * @param {THREE.Vector2} startPoint - The starting point of the measurement
-   * @param {THREE.Vector2} endPoint - The ending point of the measurement
-   * @param {number} type - The type of measurement (MeasurementType enum)
-   * @returns {void}
-   */
-  function displayReceivedMeasurement(
-    startPoint: THREE.Vector2,
-    endPoint: THREE.Vector2,
-    type: number,
-    beamWidth?: number,
-    coneAngle?: number,
-    color?: string,
-    thickness?: number,
-    outlineColor?: string,
-    outlineThickness?: number,
-    opacity?: number,
-    markerSize?: number,
-    autoHideDelay?: number,
-    fadeoutTime?: number,
-    showDistance?: boolean,
-    snapToGrid?: boolean,
-    enableDMG252?: boolean
-  ): void {
-    if (!props) {
-      console.log('[MeasurementManager] No props available for displayReceivedMeasurement');
-      return;
-    }
-
-    console.log('[MeasurementManager] displayReceivedMeasurement called:', {
-      startPoint,
-      endPoint,
-      type,
-      beamWidth,
-      coneAngle,
-      thickness,
-      hasCurrentMeasurement: !!currentMeasurement
-    });
-
-    // Clear any existing measurement
-    clearMeasurement();
-
-    // Create the appropriate measurement type
-    let measurement: IMeasurement;
-
-    // Use the received properties if provided, override the props temporarily
-    const measurementProps = {
-      ...props,
-      type,
-      ...(beamWidth !== undefined && { beamWidth }),
-      ...(coneAngle !== undefined && { coneAngle }),
-      ...(color !== undefined && { color }),
-      ...(thickness !== undefined && { thickness }),
-      ...(outlineColor !== undefined && { outlineColor }),
-      ...(outlineThickness !== undefined && { outlineThickness }),
-      ...(opacity !== undefined && { opacity }),
-      ...(markerSize !== undefined && { markerSize }),
-      ...(autoHideDelay !== undefined && { autoHideDelay }),
-      ...(fadeoutTime !== undefined && { fadeoutTime }),
-      ...(showDistance !== undefined && { showDistance }),
-      ...(snapToGrid !== undefined && { snapToGrid }),
-      ...(enableDMG252 !== undefined && { enableDMG252 })
-    };
-
-    switch (type) {
-      case MeasurementType.Line:
-        measurement = new LineMeasurement(startPoint, measurementProps, displayProps, gridProps);
-        break;
-      case MeasurementType.Beam:
-        measurement = new BeamMeasurement(startPoint, measurementProps, displayProps, gridProps);
-        break;
-      case MeasurementType.Cone:
-        measurement = new ConeMeasurement(startPoint, measurementProps, displayProps, gridProps);
-        break;
-      case MeasurementType.Circle:
-        measurement = new CircleMeasurement(startPoint, measurementProps, displayProps, gridProps);
-        break;
-      case MeasurementType.Square:
-        measurement = new RectangleMeasurement(startPoint, measurementProps, displayProps, gridProps);
-        break;
-      default:
-        measurement = new LineMeasurement(startPoint, measurementProps, displayProps, gridProps);
-        break;
-    }
-
-    // Set the measurement
-    currentMeasurement = measurement;
-    measurementGroup.add(measurement.object);
-
-    console.log('[MeasurementManager] Measurement created and added to group:', {
-      groupChildren: measurementGroup.children.length,
-      measurementObject: measurement.object,
-      visible: measurementGroup.visible
-    });
-
-    // Update to the end point
-    currentMeasurement.update(endPoint, sceneRotation);
-
-    console.log('[MeasurementManager] Measurement updated to endpoint');
-
-    // Store the fadeout time if provided for the fade animation
-    if (fadeoutTime !== undefined) {
-      receivedFadeoutTime = fadeoutTime;
-    }
-
-    // Schedule auto-fade with the received timing properties
-    const delay = autoHideDelay ?? props.autoHideDelay;
-    console.log(
-      '[MeasurementManager] Scheduling auto-fade with delay:',
-      delay,
-      'fadeTime:',
-      fadeoutTime ?? props.fadeoutTime
-    );
-
-    autoHideTimeoutId = setTimeout(() => {
-      // Start the fade animation
-      fadeStartTime = performance.now();
-      isFading = true;
-    }, delay);
-
-    console.log('[MeasurementManager] Measurement auto-fade scheduled');
-  }
-
-  // Export the methods for use by parent components
-  export {
-    startMeasurement,
-    updateMeasurement,
-    finishMeasurement,
-    clearMeasurement,
-    updatePreview,
-    hidePreview,
-    showPreviewIndicator,
-    displayReceivedMeasurement
-  };
-</script>
-
-<!-- Measurement Group -->
-<!-- Always visible to show received measurements in playfield -->
-<T.Group
-  bind:ref={measurementGroup}
-  visible={true}
-  layers={[SceneLayer.Overlay]}
-  renderOrder={SceneLayerOrder.Measurement}
->
-  <!-- Measurement objects will be added here dynamically -->
-</T.Group>
-
-<!-- Preview indicator -->
-<T.Mesh
-  bind:ref={previewMesh}
-  visible={showPreview && visible}
-  layers={[SceneLayer.Overlay]}
-  renderOrder={SceneLayerOrder.Measurement}
->
-  <T.MeshBasicMaterial
-    bind:ref={previewMaterial}
-    transparent={true}
-    opacity={props?.opacity ?? 1}
-    side={THREE.DoubleSide}
-    depthWrite={false}
-    depthTest={false}
-    toneMapped={false}
-  />
-  <T.PlaneGeometry bind:ref={previewGeometry} args={[previewSize, previewSize]} />
-</T.Mesh>

package/dist/components/Stage/components/MeasurementLayer/MeasurementManager.svelte.d.ts

@@ -1,24 +0,0 @@
-import * as THREE from 'three';
-import { type MeasurementLayerProps } from './types';
-import type { DisplayProps } from '../Stage/types';
-import type { GridLayerProps } from '../GridLayer/types';
-interface Props {
-    props: MeasurementLayerProps;
-    visible: boolean;
-    displayProps: DisplayProps;
-    gridProps: GridLayerProps;
-    sceneRotation?: number;
-    onFadeComplete?: () => void;
-}
-declare const MeasurementManager: import("svelte").Component<Props, {
-    startMeasurement: (startPoint: THREE.Vector2) => void;
-    updateMeasurement: (endPoint: THREE.Vector2) => void;
-    finishMeasurement: () => void;
-    clearMeasurement: () => void;
-    updatePreview: (position: THREE.Vector2 | null, visible?: boolean) => void;
-    hidePreview: () => void;
-    showPreviewIndicator: () => void;
-    displayReceivedMeasurement: (startPoint: THREE.Vector2, endPoint: THREE.Vector2, type: number, beamWidth?: number, coneAngle?: number, color?: string, thickness?: number, outlineColor?: string, outlineThickness?: number, opacity?: number, markerSize?: number, autoHideDelay?: number, fadeoutTime?: number, showDistance?: boolean, snapToGrid?: boolean, enableDMG252?: boolean) => void;
-}, "">;
-type MeasurementManager = ReturnType<typeof MeasurementManager>;
-export default MeasurementManager;

package/dist/components/Stage/components/MeasurementLayer/measurements/BaseMeasurement.d.ts

@@ -1,150 +0,0 @@
-import * as THREE from 'three';
-import type { GridLayerProps } from '../../GridLayer/types';
-import type { DisplayProps } from '../../Stage/types';
-import { MeasurementType, type MeasurementLayerProps } from '../types';
-/**
- * Interface defining the contract that all measurement implementations must follow.
- * Provides methods for lifecycle management, rendering, and data access for measurements.
- */
-export interface IMeasurement {
-    /** The Three.js group object containing the measurement visualization */
-    object: THREE.Group;
-    /** The rendered shape object in the Three.js scene */
-    shapeMesh: THREE.Mesh;
-    /** The rendered text object in the Three.js scene */
-    textMesh: THREE.Mesh;
-    /** Starting point of the measurement in world coordinates */
-    startPoint: THREE.Vector2;
-    /** Current end point of the measurement in world coordinates */
-    endPoint: THREE.Vector2;
-    /**
-     * Updates the measurement with a new end point, typically called during mouse movement.
-     * @param {THREE.Vector2} endPoint - The new end point coordinates in world space
-     * @param {number} sceneRotation - Optional scene rotation in degrees
-     * @returns {void}
-     */
-    update(endPoint: THREE.Vector2, sceneRotation?: number): void;
-    /**
-     * Renders only the shape portion of the measurement (without text labels).
-     * @returns {void}
-     */
-    renderShape(): void;
-    /**
-     * Cleans up all Three.js resources and removes the measurement from memory.
-     * Should be called when the measurement is no longer needed.
-     * @returns {void}
-     */
-    dispose(): void;
-}
-/**
- * Abstract base class providing common functionality for all measurement types.
- * Handles shared behavior like distance calculation, text rendering, resource management,
- * and coordinate transformations while allowing subclasses to implement specific shapes.
- */
-export declare abstract class BaseMeasurement implements IMeasurement {
-    /** Unique identifier for this measurement instance */
-    id: string;
-    /** The type of measurement (line, circle, rectangle, etc.) */
-    type: MeasurementType;
-    /** Starting point of the measurement in world coordinates */
-    startPoint: THREE.Vector2;
-    /** Current end point of the measurement in world coordinates */
-    endPoint: THREE.Vector2;
-    /** Timestamp when the measurement was created */
-    createdAt: number;
-    /** Primary color for the measurement visualization */
-    color: string;
-    /** Opacity level for the measurement (0.0 to 1.0) */
-    opacity: number;
-    /** Line thickness for drawing measurement elements */
-    thickness: number;
-    /** Diameter of the measurement markers/points */
-    markerSize: number;
-    /** Thickness of outline strokes around measurement elements */
-    outlineThickness: number;
-    /** Color used for outline strokes */
-    outlineColor: string;
-    /** Whether to display distance text labels */
-    showDistance: boolean;
-    /** Whether to snap measurement points to the grid */
-    snapToGrid: boolean;
-    /** Whether to use DMG 252 measurement calculations */
-    enableDMG252: boolean;
-    /** Display properties containing resolution and size information */
-    protected displayProps: DisplayProps;
-    /** Grid properties containing spacing and units information */
-    protected gridProps: GridLayerProps;
-    /** Scene rotation in degrees for text alignment */
-    protected sceneRotation: number;
-    /** The group object in the Three.js scene */
-    object: THREE.Group;
-    /** The rendered shape object in the Three.js scene */
-    shapeMesh: THREE.Mesh;
-    /** The rendered text object in the Three.js scene */
-    textMesh: THREE.Mesh;
-    /** Flag indicating whether this measurement has been disposed */
-    protected isDisposed: boolean;
-    /**
-     * Creates a new measurement instance with the specified properties.
-     * Initializes all measurement parameters and sets up the coordinate system.
-     *
-     * @param {MeasurementType} type - The specific type of measurement being created
-     * @param {THREE.Vector2} startPoint - Initial starting point in world coordinates
-     * @param {MeasurementLayerProps} measurementProps - Configuration properties for the measurement
-     * @param {DisplayProps} displayProps - Display settings including resolution and dimensions
-     * @param {GridLayerProps} gridProps - Grid configuration for snapping and units
-     */
-    constructor(type: MeasurementType, startPoint: THREE.Vector2, measurementProps: MeasurementLayerProps, displayProps: DisplayProps, gridProps: GridLayerProps);
-    /**
-     * Updates the measurement with a new end point and recalculates all derived values.
-     * Recreates the shape and text objects to reflect the new measurement geometry.
-     * This method is called continuously during measurement creation as the user moves the mouse.
-     *
-     * @param {THREE.Vector2} endPoint - The new end point coordinates in world space
-     * @param {number} sceneRotation - Optional scene rotation in degrees
-     * @returns {void}
-     */
-    update(endPoint: THREE.Vector2, sceneRotation?: number): void;
-    /**
-     * Renders the distance text label for this measurement with standard positioning logic.
-     * Positions text 150 pixels away from the end point in the direction of the measurement.
-     * All measurement types share this text positioning and styling approach.
-     * Returns an empty group if distance display is disabled.
-     *
-     * @returns {void}
-     */
-    renderText(): void;
-    /**
-     * Abstract method that must be implemented by each measurement type to render its specific shape.
-     * Should create and return a Three.js object representing the measurement's visual geometry
-     * (line, circle, rectangle, etc.) based on the current start and end points.
-     * The mesh should be stored in the `this.mesh` property.
-     *
-     * @returns {void}
-     */
-    abstract renderShape(): void;
-    /**
-     * Creates a Three.js mesh displaying text with consistent styling across all measurements.
-     * Generates a canvas-based texture with the specified text and applies standard material settings
-     * for proper transparency, layering, and visual appearance.
-     *
-     * @param {string} text - The text content to display
-     * @param {THREE.Vector2} position - World coordinates where the text should be positioned
-     * @returns {THREE.Mesh} A Three.js mesh containing the rendered text
-     */
-    protected createTextMesh(text: string, position: THREE.Vector2): THREE.Mesh;
-    /**
-     * Updates the shape mesh with a new geometry and texture.
-     * @param {THREE.PlaneGeometry} geometry - The new geometry to use
-     * @param {THREE.CanvasTexture} texture - The new texture to use
-     * @returns {void}
-     */
-    protected updateShapeMesh(geometry: THREE.PlaneGeometry, texture: THREE.CanvasTexture): void;
-    /**
-     * Completely destroys this measurement instance and cleans up all associated resources.
-     * Removes objects from the scene, disposes of Three.js resources, and marks the measurement as disposed.
-     * Should be called when the measurement is no longer needed to prevent memory leaks.
-     * @returns {void}
-     */
-    dispose(): void;
-}