@tableslayer/ui 0.1.3 → 0.1.4

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

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

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

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

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

@@ -0,0 +1,94 @@
+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;
+}