@tableslayer/ui 0.1.4 → 0.1.6

package/src/lib/components/Stage/components/MeasurementLayer/measurements/ConeMeasurement.ts

@@ -1,163 +0,0 @@
-// prettier-ignore
-import * as THREE from 'three';
-// prettier-ignore
-import type { DisplayProps } from '../../Stage/types';
-// prettier-ignore
-import type { GridLayerProps } from '../../GridLayer/types';
-import { MeasurementType, type MeasurementLayerProps } from '../types';
-import { drawCircle } from '../utils/canvasDrawing';
-import { BaseMeasurement } from './BaseMeasurement';
-
-export class ConeMeasurement extends BaseMeasurement {
-  private coneAngle: number;
-
-  constructor(
-    startPoint: THREE.Vector2,
-    measurementProps: MeasurementLayerProps,
-    displayProps: DisplayProps,
-    gridProps: GridLayerProps
-  ) {
-    super(MeasurementType.Cone, startPoint, measurementProps, displayProps, gridProps);
-    this.coneAngle = measurementProps.coneAngle;
-  }
-
-  renderShape(): void {
-    // Calculate cone parameters
-    const radius = this.startPoint.distanceTo(this.endPoint);
-    const direction = this.endPoint.clone().sub(this.startPoint);
-    const centerAngle = Math.atan2(direction.y, direction.x);
-
-    // Convert cone angle from degrees to radians and calculate start/end angles
-    const coneAngleRad = (this.coneAngle * Math.PI) / 180;
-    const startAngle = centerAngle - coneAngleRad / 2;
-    const endAngle = centerAngle + coneAngleRad / 2;
-
-    // Create canvas for the cone
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d', { colorSpace: 'srgb' })!;
-
-    // Calculate canvas size - accommodate full cone plus padding
-    const padding = Math.max(this.markerSize + this.outlineThickness, 40);
-    const canvasSize = (radius + padding) * 2;
-
-    canvas.width = Math.max(canvasSize, 100);
-    canvas.height = Math.max(canvasSize, 100);
-
-    // Clear canvas
-    context.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Canvas center coordinates
-    const canvasCenterX = canvas.width / 2;
-    const canvasCenterY = canvas.height / 2;
-
-    // Draw cone with dashed pattern
-    if (radius > 0) {
-      // First draw the fill
-      context.fillStyle = this.color;
-      context.globalAlpha = 0.2;
-      context.beginPath();
-      context.moveTo(canvasCenterX, canvasCenterY);
-      context.arc(canvasCenterX, canvasCenterY, radius, -startAngle, -endAngle, true);
-      context.closePath();
-      context.fill();
-      context.globalAlpha = 1.0;
-
-      // Draw the outline with dashed pattern if needed
-      if (this.outlineThickness > 0) {
-        context.strokeStyle = this.outlineColor;
-        context.lineWidth = this.thickness + this.outlineThickness * 2;
-        context.setLineDash([20, 10]); // Dashed pattern
-
-        // Draw the arc
-        context.beginPath();
-        context.arc(canvasCenterX, canvasCenterY, radius, -startAngle, -endAngle, true);
-        context.stroke();
-
-        // Draw the sides
-        context.beginPath();
-        context.moveTo(canvasCenterX, canvasCenterY);
-        context.lineTo(canvasCenterX + Math.cos(-startAngle) * radius, canvasCenterY + Math.sin(-startAngle) * radius);
-        context.stroke();
-
-        context.beginPath();
-        context.moveTo(canvasCenterX, canvasCenterY);
-        context.lineTo(canvasCenterX + Math.cos(-endAngle) * radius, canvasCenterY + Math.sin(-endAngle) * radius);
-        context.stroke();
-      }
-
-      // Draw the main stroke with dashed pattern
-      context.strokeStyle = this.color;
-      context.lineWidth = this.thickness;
-      context.setLineDash([20, 10]); // Dashed pattern
-
-      // Draw the arc
-      context.beginPath();
-      context.arc(canvasCenterX, canvasCenterY, radius, -startAngle, -endAngle, true);
-      context.stroke();
-
-      // Draw the sides
-      context.beginPath();
-      context.moveTo(canvasCenterX, canvasCenterY);
-      context.lineTo(canvasCenterX + Math.cos(-startAngle) * radius, canvasCenterY + Math.sin(-startAngle) * radius);
-      context.stroke();
-
-      context.beginPath();
-      context.moveTo(canvasCenterX, canvasCenterY);
-      context.lineTo(canvasCenterX + Math.cos(-endAngle) * radius, canvasCenterY + Math.sin(-endAngle) * radius);
-      context.stroke();
-
-      // Reset dash pattern for other elements
-      context.setLineDash([]);
-    }
-
-    // Draw center point (cone origin)
-    drawCircle(
-      context,
-      canvasCenterX,
-      canvasCenterY,
-      this.markerSize / 2,
-      this.color,
-      this.outlineColor,
-      this.outlineThickness
-    );
-
-    // Draw point at the center of the cone's end arc (invert Y for canvas coordinates)
-    const endPointX = canvasCenterX + Math.cos(centerAngle) * radius;
-    const endPointY = canvasCenterY - Math.sin(centerAngle) * radius;
-    drawCircle(
-      context,
-      endPointX,
-      endPointY,
-      this.markerSize / 2,
-      this.color,
-      this.outlineColor,
-      this.outlineThickness
-    );
-
-    // Draw points at the cone's edges (invert Y for canvas coordinates)
-    const startEdgeX = canvasCenterX + Math.cos(startAngle) * radius;
-    const startEdgeY = canvasCenterY - Math.sin(startAngle) * radius;
-    drawCircle(
-      context,
-      startEdgeX,
-      startEdgeY,
-      this.markerSize / 2,
-      this.color,
-      this.outlineColor,
-      this.outlineThickness
-    );
-
-    const endEdgeX = canvasCenterX + Math.cos(endAngle) * radius;
-    const endEdgeY = canvasCenterY - Math.sin(endAngle) * radius;
-    drawCircle(context, endEdgeX, endEdgeY, this.markerSize / 2, this.color, this.outlineColor, this.outlineThickness);
-
-    // Create texture from canvas
-    const texture = new THREE.CanvasTexture(canvas);
-    texture.needsUpdate = true;
-
-    this.updateShapeMesh(new THREE.PlaneGeometry(canvas.width, canvas.height), texture);
-
-    // Position the cone at the start point (cone origin) in world coordinates
-    this.shapeMesh.position.set(this.startPoint.x, this.startPoint.y, 0);
-  }
-}

package/src/lib/components/Stage/components/MeasurementLayer/measurements/LineMeasurement.ts

@@ -1,102 +0,0 @@
-// prettier-ignore
-import * as THREE from 'three';
-// prettier-ignore
-import type { DisplayProps } from '../../Stage/types';
-// prettier-ignore
-import type { GridLayerProps } from '../../GridLayer/types';
-import { MeasurementType, type MeasurementLayerProps } from '../types';
-import { drawCircle } from '../utils/canvasDrawing';
-import { BaseMeasurement } from './BaseMeasurement';
-
-export class LineMeasurement extends BaseMeasurement {
-  constructor(
-    startPoint: THREE.Vector2,
-    measurementProps: MeasurementLayerProps,
-    displayProps: DisplayProps,
-    gridProps: GridLayerProps
-  ) {
-    super(MeasurementType.Line, startPoint, measurementProps, displayProps, gridProps);
-  }
-
-  renderShape(): void {
-    // Create canvas for the line
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d', { colorSpace: 'srgb' })!;
-
-    // Calculate the bounding box of the line
-    const minX = Math.min(this.startPoint.x, this.endPoint.x);
-    const maxX = Math.max(this.startPoint.x, this.endPoint.x);
-    const minY = Math.min(this.startPoint.y, this.endPoint.y);
-    const maxY = Math.max(this.startPoint.y, this.endPoint.y);
-
-    // Add padding for line thickness and circles at endpoints
-    const endpointRadius = (this.markerSize + this.outlineThickness) * 2;
-    const padding = Math.max(endpointRadius, 20);
-    const width = maxX - minX + padding * 2;
-    const height = maxY - minY + padding * 2;
-
-    canvas.width = width;
-    canvas.height = height;
-
-    // Clear canvas
-    context.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Transform coordinates: Three.js world space -> Canvas space
-    // Canvas origin is top-left, Three.js origin is center of the plane
-    const startX = this.startPoint.x - minX + padding;
-    const startY = canvas.height - (this.startPoint.y - minY + padding); // Invert Y
-    const endX = this.endPoint.x - minX + padding;
-    const endY = canvas.height - (this.endPoint.y - minY + padding); // Invert Y
-
-    // Draw the line with dashed pattern
-    // First draw the outline if needed
-    if (this.outlineThickness > 0) {
-      context.strokeStyle = this.outlineColor;
-      context.lineWidth = this.thickness + this.outlineThickness * 2;
-      context.lineCap = 'round';
-      context.lineJoin = 'round';
-
-      // Set dash pattern for outline
-      const dashLength = 20;
-      const gapLength = 10;
-      context.setLineDash([dashLength, gapLength]);
-
-      context.beginPath();
-      context.moveTo(startX, startY);
-      context.lineTo(endX, endY);
-      context.stroke();
-    }
-
-    // Draw the main line with dashed pattern
-    context.strokeStyle = this.color;
-    context.lineWidth = this.thickness;
-    context.lineCap = 'round';
-    context.lineJoin = 'round';
-
-    // Set dash pattern - adjust based on line thickness for good visual proportion
-    const dashLength = 20;
-    const gapLength = 10;
-    context.setLineDash([dashLength, gapLength]);
-
-    context.beginPath();
-    context.moveTo(startX, startY);
-    context.lineTo(endX, endY);
-    context.stroke();
-
-    // Reset dash pattern for other elements
-    context.setLineDash([]);
-
-    // Start point circle
-    drawCircle(context, startX, startY, this.markerSize / 2, this.color, this.outlineColor, this.outlineThickness);
-
-    // End point circle
-    drawCircle(context, endX, endY, this.markerSize / 2, this.color, this.outlineColor, this.outlineThickness);
-
-    // Create texture from canvas
-    const texture = new THREE.CanvasTexture(canvas);
-    texture.needsUpdate = true;
-
-    this.updateShapeMesh(new THREE.PlaneGeometry(canvas.width, canvas.height), texture);
-    this.shapeMesh.position.set(minX + width / 2 - padding, minY + height / 2 - padding, 0);
-  }
-}

package/src/lib/components/Stage/components/MeasurementLayer/measurements/RectangleMeasurement.ts

@@ -1,120 +0,0 @@
-// prettier-ignore
-import * as THREE from 'three';
-// prettier-ignore
-import type { DisplayProps } from '../../Stage/types';
-// prettier-ignore
-import type { GridLayerProps } from '../../GridLayer/types';
-import { MeasurementType, type MeasurementLayerProps } from '../types';
-import { drawCircle } from '../utils/canvasDrawing';
-import { BaseMeasurement } from './BaseMeasurement';
-
-export class RectangleMeasurement extends BaseMeasurement {
-  constructor(
-    startPoint: THREE.Vector2,
-    measurementProps: MeasurementLayerProps,
-    displayProps: DisplayProps,
-    gridProps: GridLayerProps
-  ) {
-    super(MeasurementType.Square, startPoint, measurementProps, displayProps, gridProps);
-  }
-
-  renderShape(): void {
-    // Calculate the distance from center to mouse position
-    const distance = this.startPoint.distanceTo(this.endPoint);
-
-    // For a square, use the same distance for both width and height
-    // This creates a square where the distance from center to edge equals the distance to the mouse
-    const halfSize = distance;
-    const squareSize = halfSize * 2;
-
-    // Create canvas for the square
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d', { colorSpace: 'srgb' })!;
-
-    // Add padding for outline and corner points
-    const padding = Math.max(this.markerSize + this.outlineThickness, 40);
-    const canvasSize = squareSize + padding * 2;
-
-    canvas.width = Math.max(canvasSize, 100);
-    canvas.height = Math.max(canvasSize, 100);
-
-    // Clear canvas
-    context.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Canvas center coordinates
-    const canvasCenterX = canvas.width / 2;
-    const canvasCenterY = canvas.height / 2;
-
-    // Calculate square position on canvas (centered)
-    const rectX = canvasCenterX - halfSize;
-    const rectY = canvasCenterY - halfSize;
-
-    // Draw square with dashed pattern
-    if (squareSize > 0) {
-      // First draw the fill
-      context.fillStyle = this.color;
-      context.globalAlpha = 0.2;
-      context.fillRect(rectX, rectY, squareSize, squareSize);
-      context.globalAlpha = 1.0;
-
-      // Draw the outline with dashed pattern if needed
-      if (this.outlineThickness > 0) {
-        context.strokeStyle = this.outlineColor;
-        context.lineWidth = this.thickness + this.outlineThickness * 2;
-        context.setLineDash([20, 10]); // Dashed pattern
-        context.strokeRect(rectX, rectY, squareSize, squareSize);
-      }
-
-      // Draw the main stroke with dashed pattern
-      context.strokeStyle = this.color;
-      context.lineWidth = this.thickness;
-      context.setLineDash([20, 10]); // Dashed pattern
-      context.strokeRect(rectX, rectY, squareSize, squareSize);
-
-      // Reset dash pattern for other elements
-      context.setLineDash([]);
-    }
-
-    // Draw center point (like circle measurement)
-    drawCircle(
-      context,
-      canvasCenterX,
-      canvasCenterY,
-      this.markerSize / 2,
-      this.color,
-      this.outlineColor,
-      this.outlineThickness
-    );
-
-    // Draw corner points
-    const cornerRadius = this.markerSize / 2;
-
-    // Top-left corner
-    drawCircle(context, rectX, rectY, cornerRadius, this.color, this.outlineColor, this.outlineThickness);
-
-    // Top-right corner
-    drawCircle(context, rectX + squareSize, rectY, cornerRadius, this.color, this.outlineColor, this.outlineThickness);
-
-    // Bottom-right corner
-    drawCircle(
-      context,
-      rectX + squareSize,
-      rectY + squareSize,
-      cornerRadius,
-      this.color,
-      this.outlineColor,
-      this.outlineThickness
-    );
-
-    // Bottom-left corner
-    drawCircle(context, rectX, rectY + squareSize, cornerRadius, this.color, this.outlineColor, this.outlineThickness);
-
-    const texture = new THREE.CanvasTexture(canvas);
-    texture.needsUpdate = true;
-
-    this.updateShapeMesh(new THREE.PlaneGeometry(canvas.width, canvas.height), texture);
-
-    // Position the square at the center point (startPoint), like circle measurement
-    this.shapeMesh.position.set(this.startPoint.x, this.startPoint.y, 0);
-  }
-}

package/src/lib/components/Stage/components/MeasurementLayer/measurements/index.ts

@@ -1,7 +0,0 @@
-export { BaseMeasurement, type IMeasurement } from './BaseMeasurement';
-export { LineMeasurement } from './LineMeasurement';
-// TODO: Add other measurement types as they are implemented
-// export { CircleMeasurement } from './CircleMeasurement';
-// export { BeamMeasurement } from './BeamMeasurement';
-// export { ConeMeasurement } from './ConeMeasurement';
-// export { SquareMeasurement } from './SquareMeasurement';

package/src/lib/components/Stage/components/MeasurementLayer/types.ts

@@ -1,94 +0,0 @@
-import * as THREE from 'three';
-
-export enum MeasurementType {
-  Line = 1,
-  Beam = 2,
-  Cone = 3,
-  Circle = 4,
-  Square = 5
-}
-
-// Removed SnapType enum - using boolean instead
-
-export interface Measurement {
-  id: string;
-  type: MeasurementType;
-  startPoint: THREE.Vector2;
-  endPoint: THREE.Vector2;
-  distance: number;
-  unit: string;
-  createdAt: number;
-}
-
-export interface MeasurementLayerProps {
-  /**
-   * The type of measurement to display
-   */
-  type: MeasurementType;
-
-  /**
-   * Whether to snap to grid
-   */
-  snapToGrid: boolean;
-
-  /**
-   * Enable DMG 252 diagonal movement rules (only applies when snapping to square grid)
-   * First diagonal = 5ft, second = 10ft, alternating
-   */
-  enableDMG252: boolean;
-
-  /**
-   * Auto-hide delay in milliseconds (default 3000ms)
-   */
-  autoHideDelay: number;
-
-  /**
-   * Color of the measurement line
-   */
-  color: string;
-
-  /**
-   * Thickness of the measurement line
-   */
-  thickness: number;
-
-  /**
-   * Diameter of the measurement markers/points
-   */
-  markerSize: number;
-
-  /**
-   * Opacity of the measurement
-   */
-  opacity: number;
-
-  /**
-   * Whether to show distance text
-   */
-  showDistance: boolean;
-
-  /**
-   * Thickness of the text outline
-   */
-  outlineThickness: number;
-
-  /**
-   * Color of the text outline
-   */
-  outlineColor: string;
-
-  /**
-   * Width of beam measurements in world grid units
-   */
-  beamWidth: number;
-
-  /**
-   * Angle of cone measurements in degrees
-   */
-  coneAngle: number;
-
-  /**
-   * Fadeout animation duration in milliseconds (default 500ms)
-   */
-  fadeoutTime: number;
-}