@tableslayer/ui 0.1.4 → 0.1.6

package/dist/components/Stage/components/MeasurementLayer/measurements/BaseMeasurement.js

@@ -1,274 +0,0 @@
-import * as THREE from 'three';
-import { hexDistance, pixelToHex } from '../../../helpers/grid';
-import { GridType } from '../../GridLayer/types';
-import { SceneLayer, SceneLayerOrder } from '../../Scene/types';
-import { MeasurementType } from '../types';
-import { createTextCanvas } from '../utils/canvasDrawing';
-import { calculateLineDistance } from '../utils/distanceCalculations';
-// =============================================================================
-// MEASUREMENT CONSTANTS
-// =============================================================================
-/** Distance in pixels to offset text labels from measurement end points */
-const TEXT_OFFSET_DISTANCE = 150;
-/** Divisor for calculating font size based on display resolution */
-const FONT_SIZE_DIVISOR = 15;
-/** Decimal places for distance display */
-const DISTANCE_DECIMAL_PLACES = 1;
-/**
- * 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 class BaseMeasurement {
-    /**
-     * 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, startPoint, measurementProps, displayProps, gridProps) {
-        /** Scene rotation in degrees for text alignment */
-        this.sceneRotation = 0;
-        /** Flag indicating whether this measurement has been disposed */
-        this.isDisposed = false;
-        this.id = crypto.randomUUID();
-        this.type = type;
-        this.startPoint = startPoint.clone();
-        this.endPoint = startPoint.clone();
-        this.createdAt = Date.now();
-        this.color = measurementProps.color;
-        this.opacity = measurementProps.opacity;
-        this.thickness = measurementProps.thickness;
-        this.markerSize = measurementProps.markerSize;
-        this.outlineThickness = measurementProps.outlineThickness;
-        this.outlineColor = measurementProps.outlineColor;
-        this.showDistance = measurementProps.showDistance;
-        this.snapToGrid = measurementProps.snapToGrid;
-        this.enableDMG252 = measurementProps.enableDMG252;
-        this.displayProps = displayProps;
-        this.gridProps = gridProps;
-        this.object = new THREE.Group();
-        this.object.userData.measurementId = this.id;
-        // Create meshes and materials once, only update the texture when the measurement is updated
-        const shapeMaterial = new THREE.MeshBasicMaterial({
-            map: null,
-            transparent: true,
-            opacity: this.opacity,
-            side: THREE.DoubleSide,
-            depthWrite: false,
-            depthTest: false,
-            toneMapped: false // Prevent tone mapping from making white appear gray
-        });
-        this.shapeMesh = new THREE.Mesh(undefined, shapeMaterial);
-        this.shapeMesh.layers.set(SceneLayer.Overlay);
-        this.shapeMesh.renderOrder = SceneLayerOrder.Measurement;
-        // Create an empty text mesh that will be updated when measurement has actual distance
-        const emptyCanvas = document.createElement('canvas');
-        emptyCanvas.width = 1;
-        emptyCanvas.height = 1;
-        const emptyTexture = new THREE.CanvasTexture(emptyCanvas);
-        const textMaterial = new THREE.MeshBasicMaterial({
-            map: emptyTexture,
-            transparent: true,
-            opacity: this.opacity,
-            depthWrite: false,
-            depthTest: false,
-            toneMapped: false // Prevent tone mapping from making white appear gray
-        });
-        this.textMesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), textMaterial);
-        this.textMesh.layers.set(SceneLayer.Overlay);
-        this.textMesh.renderOrder = SceneLayerOrder.Measurement;
-        this.textMesh.visible = false; // Start invisible until we have actual content
-        this.object.add(this.shapeMesh);
-        this.object.add(this.textMesh);
-    }
-    /**
-     * 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, sceneRotation) {
-        if (this.isDisposed)
-            return;
-        this.endPoint = endPoint.clone();
-        if (sceneRotation !== undefined) {
-            this.sceneRotation = sceneRotation;
-        }
-        this.renderShape();
-        this.renderText();
-    }
-    /**
-     * 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() {
-        // Calculate direction from start to end point and normalize
-        const direction = this.endPoint.clone().sub(this.startPoint).normalize();
-        // Initial text position at standard offset distance from the end point
-        let textPosition = this.endPoint.clone().add(direction.multiplyScalar(TEXT_OFFSET_DISTANCE));
-        // Edge detection and adjustment
-        const padding = 150; // Padding from edges to prevent clipping
-        const halfWidth = this.displayProps.resolution.x / 2;
-        const halfHeight = this.displayProps.resolution.y / 2;
-        // Check and adjust for edge clipping
-        if (textPosition.x > halfWidth - padding) {
-            textPosition.x = halfWidth - padding;
-        }
-        else if (textPosition.x < -halfWidth + padding) {
-            textPosition.x = -halfWidth + padding;
-        }
-        if (textPosition.y > halfHeight - padding) {
-            textPosition.y = halfHeight - padding;
-        }
-        else if (textPosition.y < -halfHeight + padding) {
-            textPosition.y = -halfHeight + padding;
-        }
-        // For hex grids with snapping, we want to show hex count instead of distance
-        const isHexGrid = this.gridProps.gridType === GridType.Hex;
-        const showHexCount = isHexGrid && this.snapToGrid;
-        let distance;
-        let displayText;
-        let displayUnits;
-        if (showHexCount) {
-            // Calculate hex count directly
-            const pixelsPerInchX = this.displayProps.resolution.x / this.displayProps.size.x;
-            const hexSizePixels = this.gridProps.spacing * pixelsPerInchX;
-            const startHex = pixelToHex(this.startPoint, hexSizePixels);
-            const endHex = pixelToHex(this.endPoint, hexSizePixels);
-            distance = hexDistance(startHex, endHex);
-            // Format as integer hex count
-            displayText = Math.round(distance).toString();
-            displayUnits = distance === 1 ? 'hex' : 'hexes';
-        }
-        else {
-            // Standard distance calculation
-            distance = calculateLineDistance(this.startPoint, this.endPoint, this.gridProps.spacing, this.displayProps.size, this.displayProps.resolution, this.gridProps.gridType, this.snapToGrid, this.enableDMG252, this.gridProps.worldGridSize || 5, this.gridProps.worldGridUnits || 'FT');
-            // Format number to only show decimals if needed
-            displayText = distance % 1 === 0 ? distance.toString() : distance.toFixed(DISTANCE_DECIMAL_PLACES);
-            displayUnits = this.gridProps.worldGridUnits || 'FT';
-        }
-        // Don't render text for zero distance
-        if (distance === 0) {
-            this.textMesh.visible = false;
-            return;
-        }
-        // Show the text mesh since we have content
-        this.textMesh.visible = true;
-        const fontSize = this.displayProps.resolution.y / FONT_SIZE_DIVISOR;
-        const textCanvas = createTextCanvas(displayText, fontSize, this.color, this.outlineColor, this.outlineThickness, displayUnits);
-        // Create texture from canvas
-        const texture = new THREE.CanvasTexture(textCanvas);
-        texture.needsUpdate = true;
-        // Update the text mesh geometry to match canvas size
-        if (this.textMesh.geometry) {
-            this.textMesh.geometry.dispose();
-        }
-        this.textMesh.geometry = new THREE.PlaneGeometry(textCanvas.width, textCanvas.height);
-        if (this.textMesh.material instanceof THREE.MeshBasicMaterial) {
-            // Dispose the old texture before assigning new one to prevent memory leak
-            if (this.textMesh.material.map) {
-                this.textMesh.material.map.dispose();
-            }
-            this.textMesh.material.map = texture;
-            this.textMesh.material.map.needsUpdate = true;
-        }
-        this.textMesh.position.set(textPosition.x, textPosition.y, 0);
-        // Apply counter-rotation to keep text aligned to browser bottom
-        // Similar to how markers handle rotation
-        const normalizedRotation = ((this.sceneRotation % 360) + 360) % 360;
-        const needsFlip = (normalizedRotation > 85 && normalizedRotation < 95) || (normalizedRotation > 265 && normalizedRotation < 275);
-        const counterRotation = needsFlip
-            ? -((this.sceneRotation + 180) * Math.PI) / 180
-            : -(this.sceneRotation * Math.PI) / 180;
-        this.textMesh.rotation.z = counterRotation;
-    }
-    /**
-     * 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
-     */
-    createTextMesh(text, position) {
-        const fontSize = this.displayProps.resolution.y / FONT_SIZE_DIVISOR;
-        const canvas = createTextCanvas(text, fontSize, this.color, this.outlineColor, this.outlineThickness);
-        // Create texture from canvas
-        const texture = new THREE.CanvasTexture(canvas);
-        texture.needsUpdate = true;
-        // Create plane geometry for text with world dimensions
-        const geometry = new THREE.PlaneGeometry(canvas.width, canvas.height);
-        const material = new THREE.MeshBasicMaterial({
-            map: texture,
-            transparent: true,
-            opacity: this.opacity,
-            toneMapped: false // Prevent tone mapping from making white appear gray
-        });
-        const textMesh = new THREE.Mesh(geometry, material);
-        textMesh.layers.set(SceneLayer.Overlay);
-        textMesh.renderOrder = SceneLayerOrder.Measurement;
-        textMesh.position.set(position.x, position.y, 0);
-        return textMesh;
-    }
-    /**
-     * 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}
-     */
-    updateShapeMesh(geometry, texture) {
-        var _a;
-        (_a = this.shapeMesh.geometry) === null || _a === void 0 ? void 0 : _a.dispose();
-        this.shapeMesh.geometry = geometry;
-        if (this.shapeMesh.material instanceof THREE.MeshBasicMaterial) {
-            // Dispose the old texture before assigning new one to prevent memory leak
-            if (this.shapeMesh.material.map) {
-                this.shapeMesh.material.map.dispose();
-            }
-            this.shapeMesh.material.map = texture;
-            this.shapeMesh.material.map.needsUpdate = true;
-        }
-    }
-    /**
-     * 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() {
-        var _a, _b, _c, _d;
-        this.isDisposed = true;
-        this.shapeMesh.removeFromParent();
-        if (this.shapeMesh instanceof THREE.Mesh) {
-            (_a = this.shapeMesh.geometry) === null || _a === void 0 ? void 0 : _a.dispose();
-            // Dispose texture before disposing material
-            if (this.shapeMesh.material instanceof THREE.MeshBasicMaterial && this.shapeMesh.material.map) {
-                this.shapeMesh.material.map.dispose();
-            }
-            (_b = this.shapeMesh.material) === null || _b === void 0 ? void 0 : _b.dispose();
-        }
-        this.textMesh.removeFromParent();
-        if (this.textMesh instanceof THREE.Mesh) {
-            (_c = this.textMesh.geometry) === null || _c === void 0 ? void 0 : _c.dispose();
-            // Dispose texture before disposing material
-            if (this.textMesh.material instanceof THREE.MeshBasicMaterial && this.textMesh.material.map) {
-                this.textMesh.material.map.dispose();
-            }
-            (_d = this.textMesh.material) === null || _d === void 0 ? void 0 : _d.dispose();
-        }
-        this.object.removeFromParent();
-    }
-}

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

@@ -1,10 +0,0 @@
-import * as THREE from 'three';
-import type { DisplayProps } from '../../Stage/types';
-import type { GridLayerProps } from '../../GridLayer/types';
-import { type MeasurementLayerProps } from '../types';
-import { BaseMeasurement } from './BaseMeasurement';
-export declare class BeamMeasurement extends BaseMeasurement {
-    private beamWidth;
-    constructor(startPoint: THREE.Vector2, measurementProps: MeasurementLayerProps, displayProps: DisplayProps, gridProps: GridLayerProps);
-    renderShape(): void;
-}

package/dist/components/Stage/components/MeasurementLayer/measurements/BeamMeasurement.js

@@ -1,58 +0,0 @@
-// prettier-ignore
-import * as THREE from 'three';
-import { MeasurementType } from '../types';
-import { drawCircle, drawRectangle } from '../utils/canvasDrawing';
-import { BaseMeasurement } from './BaseMeasurement';
-export class BeamMeasurement extends BaseMeasurement {
-    constructor(startPoint, measurementProps, displayProps, gridProps) {
-        super(MeasurementType.Beam, startPoint, measurementProps, displayProps, gridProps);
-        this.beamWidth = measurementProps.beamWidth;
-    }
-    renderShape() {
-        // Calculate beam parameters
-        const direction = this.endPoint.clone().sub(this.startPoint);
-        const length = direction.length();
-        const angle = Math.atan2(direction.y, direction.x);
-        // Convert beam width from world units to pixels
-        const pixelsPerInch = this.displayProps.resolution.x / this.displayProps.size.x;
-        const beamWidthInches = (this.beamWidth * this.gridProps.spacing) / this.gridProps.worldGridSize;
-        const beamWidthPixels = beamWidthInches * pixelsPerInch;
-        // Create canvas for the beam
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d', { colorSpace: 'srgb' });
-        // Calculate canvas size - accommodate beam dimensions plus padding
-        const padding = Math.max(this.markerSize + this.outlineThickness + beamWidthPixels, 40);
-        const canvasWidth = length + padding * 2;
-        const canvasHeight = beamWidthPixels + padding * 2;
-        canvas.width = Math.max(canvasWidth, 100);
-        canvas.height = Math.max(canvasHeight, 100);
-        // Clear canvas
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        // Save context and apply rotation
-        context.save();
-        context.translate(canvas.width / 2, canvas.height / 2);
-        // Calculate rectangle dimensions centered on canvas
-        const rectX = -length / 2;
-        const rectY = -beamWidthPixels / 2;
-        const rectWidth = length;
-        const rectHeight = beamWidthPixels;
-        // Draw beam rectangle using utility function
-        if (rectWidth > 0 && rectHeight > 0) {
-            drawRectangle(context, rectX, rectY, rectWidth, rectHeight, this.color, this.thickness, this.color, 0.2, this.outlineThickness > 0 ? this.outlineColor : undefined, this.outlineThickness > 0 ? this.outlineThickness : undefined);
-        }
-        // Draw start point circle
-        drawCircle(context, rectX, 0, this.markerSize / 2, this.color, this.outlineColor, this.outlineThickness);
-        // Draw end point circle
-        drawCircle(context, rectX + rectWidth, 0, this.markerSize / 2, this.color, this.outlineColor, this.outlineThickness);
-        // Restore context
-        context.restore();
-        const texture = new THREE.CanvasTexture(canvas);
-        texture.needsUpdate = true;
-        this.updateShapeMesh(new THREE.PlaneGeometry(canvas.width, canvas.height), texture);
-        // Position the beam at the center point between start and end
-        const centerX = (this.startPoint.x + this.endPoint.x) / 2;
-        const centerY = (this.startPoint.y + this.endPoint.y) / 2;
-        this.shapeMesh.position.set(centerX, centerY, 0);
-        this.shapeMesh.rotation.z = angle;
-    }
-}

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

@@ -1,9 +0,0 @@
-import * as THREE from 'three';
-import type { DisplayProps } from '../../Stage/types';
-import type { GridLayerProps } from '../../GridLayer/types';
-import { type MeasurementLayerProps } from '../types';
-import { BaseMeasurement } from './BaseMeasurement';
-export declare class CircleMeasurement extends BaseMeasurement {
-    constructor(startPoint: THREE.Vector2, measurementProps: MeasurementLayerProps, displayProps: DisplayProps, gridProps: GridLayerProps);
-    renderShape(): void;
-}

package/dist/components/Stage/components/MeasurementLayer/measurements/CircleMeasurement.js

@@ -1,66 +0,0 @@
-// prettier-ignore
-import * as THREE from 'three';
-import { MeasurementType } from '../types';
-import { drawCircle } from '../utils/canvasDrawing';
-import { BaseMeasurement } from './BaseMeasurement';
-export class CircleMeasurement extends BaseMeasurement {
-    constructor(startPoint, measurementProps, displayProps, gridProps) {
-        super(MeasurementType.Circle, startPoint, measurementProps, displayProps, gridProps);
-    }
-    renderShape() {
-        // Calculate radius in pixels
-        const radiusPixels = this.startPoint.distanceTo(this.endPoint);
-        // Create canvas for the circle
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d', { colorSpace: 'srgb' });
-        // Calculate canvas size - need to accommodate the full circle plus outline and points
-        const padding = Math.max(this.markerSize + this.outlineThickness, 40);
-        const canvasSize = (radiusPixels + 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 the large circle with dashed pattern
-        // First draw the fill
-        context.fillStyle = this.color;
-        context.globalAlpha = 0.2;
-        context.beginPath();
-        context.arc(canvasCenterX, canvasCenterY, radiusPixels, 0, Math.PI * 2);
-        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
-            context.beginPath();
-            context.arc(canvasCenterX, canvasCenterY, radiusPixels, 0, Math.PI * 2);
-            context.stroke();
-        }
-        // Draw the main stroke with dashed pattern
-        context.strokeStyle = this.color;
-        context.lineWidth = this.thickness;
-        context.setLineDash([20, 10]); // Dashed pattern
-        context.beginPath();
-        context.arc(canvasCenterX, canvasCenterY, radiusPixels, 0, Math.PI * 2);
-        context.stroke();
-        // Reset dash pattern for other elements
-        context.setLineDash([]);
-        // Draw center point
-        drawCircle(context, canvasCenterX, canvasCenterY, this.markerSize / 2, this.color, this.outlineColor, this.outlineThickness);
-        // Draw radius indicator point at the edge of the circle
-        // Calculate the position of the end point relative to start point, then place on circle edge
-        const direction = this.endPoint.clone().sub(this.startPoint).normalize();
-        const edgeX = canvasCenterX + direction.x * radiusPixels;
-        const edgeY = canvasCenterY - direction.y * radiusPixels; // Invert Y for canvas coordinates
-        drawCircle(context, edgeX, edgeY, this.markerSize / 2, this.color, this.outlineColor, this.outlineThickness);
-        // Create texture from canvas
-        const shapeTexture = new THREE.CanvasTexture(canvas);
-        shapeTexture.needsUpdate = true;
-        this.updateShapeMesh(new THREE.PlaneGeometry(canvas.width, canvas.height), shapeTexture);
-        this.shapeMesh.position.set(this.startPoint.x, this.startPoint.y, 0);
-    }
-}

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

@@ -1,10 +0,0 @@
-import * as THREE from 'three';
-import type { DisplayProps } from '../../Stage/types';
-import type { GridLayerProps } from '../../GridLayer/types';
-import { type MeasurementLayerProps } from '../types';
-import { BaseMeasurement } from './BaseMeasurement';
-export declare class ConeMeasurement extends BaseMeasurement {
-    private coneAngle;
-    constructor(startPoint: THREE.Vector2, measurementProps: MeasurementLayerProps, displayProps: DisplayProps, gridProps: GridLayerProps);
-    renderShape(): void;
-}

package/dist/components/Stage/components/MeasurementLayer/measurements/ConeMeasurement.js

@@ -1,103 +0,0 @@
-// prettier-ignore
-import * as THREE from 'three';
-import { MeasurementType } from '../types';
-import { drawCircle } from '../utils/canvasDrawing';
-import { BaseMeasurement } from './BaseMeasurement';
-export class ConeMeasurement extends BaseMeasurement {
-    constructor(startPoint, measurementProps, displayProps, gridProps) {
-        super(MeasurementType.Cone, startPoint, measurementProps, displayProps, gridProps);
-        this.coneAngle = measurementProps.coneAngle;
-    }
-    renderShape() {
-        // 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/dist/components/Stage/components/MeasurementLayer/measurements/LineMeasurement.d.ts

@@ -1,9 +0,0 @@
-import * as THREE from 'three';
-import type { DisplayProps } from '../../Stage/types';
-import type { GridLayerProps } from '../../GridLayer/types';
-import { type MeasurementLayerProps } from '../types';
-import { BaseMeasurement } from './BaseMeasurement';
-export declare class LineMeasurement extends BaseMeasurement {
-    constructor(startPoint: THREE.Vector2, measurementProps: MeasurementLayerProps, displayProps: DisplayProps, gridProps: GridLayerProps);
-    renderShape(): void;
-}

package/dist/components/Stage/components/MeasurementLayer/measurements/LineMeasurement.js

@@ -1,75 +0,0 @@
-// prettier-ignore
-import * as THREE from 'three';
-import { MeasurementType } from '../types';
-import { drawCircle } from '../utils/canvasDrawing';
-import { BaseMeasurement } from './BaseMeasurement';
-export class LineMeasurement extends BaseMeasurement {
-    constructor(startPoint, measurementProps, displayProps, gridProps) {
-        super(MeasurementType.Line, startPoint, measurementProps, displayProps, gridProps);
-    }
-    renderShape() {
-        // 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/dist/components/Stage/components/MeasurementLayer/measurements/RectangleMeasurement.d.ts

@@ -1,9 +0,0 @@
-import * as THREE from 'three';
-import type { DisplayProps } from '../../Stage/types';
-import type { GridLayerProps } from '../../GridLayer/types';
-import { type MeasurementLayerProps } from '../types';
-import { BaseMeasurement } from './BaseMeasurement';
-export declare class RectangleMeasurement extends BaseMeasurement {
-    constructor(startPoint: THREE.Vector2, measurementProps: MeasurementLayerProps, displayProps: DisplayProps, gridProps: GridLayerProps);
-    renderShape(): void;
-}