@tableslayer/ui 0.1.4 → 0.1.5

package/src/lib/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>