@tableslayer/ui 0.0.1

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

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

@@ -0,0 +1,2 @@
+export { BaseMeasurement, type IMeasurement } from './BaseMeasurement';
+export { LineMeasurement } from './LineMeasurement';

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

@@ -0,0 +1,7 @@
+export { BaseMeasurement } 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/dist/components/Stage/components/MeasurementLayer/types.d.ts

@@ -0,0 +1,76 @@
+import * as THREE from 'three';
+export declare enum MeasurementType {
+    Line = 1,
+    Beam = 2,
+    Cone = 3,
+    Circle = 4,
+    Square = 5
+}
+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;
+}

package/dist/components/Stage/components/MeasurementLayer/types.js

@@ -0,0 +1,9 @@
+import * as THREE from 'three';
+export var MeasurementType;
+(function (MeasurementType) {
+    MeasurementType[MeasurementType["Line"] = 1] = "Line";
+    MeasurementType[MeasurementType["Beam"] = 2] = "Beam";
+    MeasurementType[MeasurementType["Cone"] = 3] = "Cone";
+    MeasurementType[MeasurementType["Circle"] = 4] = "Circle";
+    MeasurementType[MeasurementType["Square"] = 5] = "Square";
+})(MeasurementType || (MeasurementType = {}));

package/dist/components/Stage/components/MeasurementLayer/utils/canvasDrawing.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Utility functions for drawing shapes on canvas
+ */
+/**
+ * Draws a line, optionally with an outline
+ * @param context Canvas 2D context
+ * @param startX Start X coordinate
+ * @param startY Start Y coordinate
+ * @param endX End X coordinate
+ * @param endY End Y coordinate
+ * @param color Line color
+ * @param thickness Line thickness
+ * @param outlineColor Optional outline color
+ * @param outlineThickness Optional outline thickness
+ */
+export declare function drawLine(context: CanvasRenderingContext2D, startX: number, startY: number, endX: number, endY: number, color: string, thickness: number, outlineColor?: string, outlineThickness?: number): void;
+/**
+ * Draws a circle, optionally with an outline
+ * @param context Canvas 2D context
+ * @param x Center X coordinate
+ * @param y Center Y coordinate
+ * @param radius Circle radius
+ * @param color Circle color
+ * @param outlineColor Optional outline color
+ * @param outlineThickness Optional outline thickness
+ */
+export declare function drawCircle(context: CanvasRenderingContext2D, x: number, y: number, radius: number, color: string, outlineColor?: string, outlineThickness?: number): void;
+/**
+ * Draws a large circle with stroke and optional fill
+ * @param context Canvas 2D context
+ * @param x Center X coordinate
+ * @param y Center Y coordinate
+ * @param radius Circle radius
+ * @param strokeColor Stroke color
+ * @param strokeThickness Stroke thickness
+ * @param fillColor Optional fill color
+ * @param fillOpacity Optional fill opacity (0-1)
+ * @param outlineColor Optional outline color
+ * @param outlineThickness Optional outline thickness
+ */
+export declare function drawLargeCircle(context: CanvasRenderingContext2D, x: number, y: number, radius: number, strokeColor: string, strokeThickness: number, fillColor?: string, fillOpacity?: number, outlineColor?: string, outlineThickness?: number): void;
+/**
+ * Draws a rectangle with stroke and optional fill
+ * @param context Canvas 2D context
+ * @param x Top-left X coordinate
+ * @param y Top-left Y coordinate
+ * @param width Rectangle width
+ * @param height Rectangle height
+ * @param strokeColor Stroke color
+ * @param strokeThickness Stroke thickness
+ * @param fillColor Optional fill color
+ * @param fillOpacity Optional fill opacity (0-1)
+ * @param outlineColor Optional outline color
+ * @param outlineThickness Optional outline thickness
+ */
+export declare function drawRectangle(context: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, strokeColor: string, strokeThickness: number, fillColor?: string, fillOpacity?: number, outlineColor?: string, outlineThickness?: number): void;
+/**
+ * Draws a cone/sector with stroke and optional fill
+ * @param context Canvas 2D context
+ * @param x Center X coordinate
+ * @param y Center Y coordinate
+ * @param radius Cone radius
+ * @param startAngle Start angle in radians
+ * @param endAngle End angle in radians
+ * @param strokeColor Stroke color
+ * @param strokeThickness Stroke thickness
+ * @param fillColor Optional fill color
+ * @param fillOpacity Optional fill opacity (0-1)
+ * @param outlineColor Optional outline color
+ * @param outlineThickness Optional outline thickness
+ */
+export declare function drawCone(context: CanvasRenderingContext2D, x: number, y: number, radius: number, startAngle: number, endAngle: number, strokeColor: string, strokeThickness: number, fillColor?: string, fillOpacity?: number, outlineColor?: string, outlineThickness?: number): void;
+/**
+ * Creates a text canvas with consistent styling
+ * @param text The text to display
+ * @param fontSize Font size in pixels
+ * @param color Text color
+ * @param outlineColor Outline color
+ * @param outlineThickness Outline thickness
+ * @param units Optional units text to display in smaller font
+ * @returns Canvas element with rendered text
+ */
+export declare function createTextCanvas(text: string, fontSize: number, color: string, outlineColor?: string, _outlineThickness?: number, units?: string): HTMLCanvasElement;

package/dist/components/Stage/components/MeasurementLayer/utils/canvasDrawing.js

@@ -0,0 +1,267 @@
+/**
+ * Utility functions for drawing shapes on canvas
+ */
+/**
+ * Draws a line, optionally with an outline
+ * @param context Canvas 2D context
+ * @param startX Start X coordinate
+ * @param startY Start Y coordinate
+ * @param endX End X coordinate
+ * @param endY End Y coordinate
+ * @param color Line color
+ * @param thickness Line thickness
+ * @param outlineColor Optional outline color
+ * @param outlineThickness Optional outline thickness
+ */
+export function drawLine(context, startX, startY, endX, endY, color, thickness, outlineColor, outlineThickness) {
+    // Draw outline if specified
+    if (outlineColor && outlineThickness) {
+        context.strokeStyle = outlineColor;
+        context.lineWidth = thickness + outlineThickness * 2;
+        context.lineCap = 'round';
+        context.lineJoin = 'round';
+        context.beginPath();
+        context.moveTo(startX, startY);
+        context.lineTo(endX, endY);
+        context.stroke();
+    }
+    // Draw the line
+    context.strokeStyle = color;
+    context.lineWidth = thickness;
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    context.beginPath();
+    context.moveTo(startX, startY);
+    context.lineTo(endX, endY);
+    context.stroke();
+}
+/**
+ * Draws a circle, optionally with an outline
+ * @param context Canvas 2D context
+ * @param x Center X coordinate
+ * @param y Center Y coordinate
+ * @param radius Circle radius
+ * @param color Circle color
+ * @param outlineColor Optional outline color
+ * @param outlineThickness Optional outline thickness
+ */
+export function drawCircle(context, x, y, radius, color, outlineColor, outlineThickness) {
+    // Draw outline if specified
+    if (outlineColor && outlineThickness) {
+        context.beginPath();
+        context.arc(x, y, radius + outlineThickness, 0, Math.PI * 2);
+        context.fillStyle = outlineColor;
+        context.fill();
+    }
+    // Draw the circle
+    context.beginPath();
+    context.arc(x, y, radius, 0, Math.PI * 2);
+    context.fillStyle = color;
+    context.fill();
+}
+/**
+ * Draws a large circle with stroke and optional fill
+ * @param context Canvas 2D context
+ * @param x Center X coordinate
+ * @param y Center Y coordinate
+ * @param radius Circle radius
+ * @param strokeColor Stroke color
+ * @param strokeThickness Stroke thickness
+ * @param fillColor Optional fill color
+ * @param fillOpacity Optional fill opacity (0-1)
+ * @param outlineColor Optional outline color
+ * @param outlineThickness Optional outline thickness
+ */
+export function drawLargeCircle(context, x, y, radius, strokeColor, strokeThickness, fillColor, fillOpacity, outlineColor, outlineThickness) {
+    // Draw fill if specified
+    if (fillColor && fillOpacity !== undefined) {
+        const originalAlpha = context.globalAlpha;
+        context.globalAlpha = fillOpacity;
+        context.fillStyle = fillColor;
+        context.beginPath();
+        context.arc(x, y, radius, 0, 2 * Math.PI);
+        context.fill();
+        context.globalAlpha = originalAlpha;
+    }
+    // Draw outline if specified
+    if (outlineColor && outlineThickness) {
+        context.strokeStyle = outlineColor;
+        context.lineWidth = strokeThickness + outlineThickness * 2;
+        context.beginPath();
+        context.arc(x, y, radius, 0, 2 * Math.PI);
+        context.stroke();
+    }
+    // Draw the main stroke
+    context.strokeStyle = strokeColor;
+    context.lineWidth = strokeThickness;
+    context.beginPath();
+    context.arc(x, y, radius, 0, 2 * Math.PI);
+    context.stroke();
+}
+/**
+ * Draws a rectangle with stroke and optional fill
+ * @param context Canvas 2D context
+ * @param x Top-left X coordinate
+ * @param y Top-left Y coordinate
+ * @param width Rectangle width
+ * @param height Rectangle height
+ * @param strokeColor Stroke color
+ * @param strokeThickness Stroke thickness
+ * @param fillColor Optional fill color
+ * @param fillOpacity Optional fill opacity (0-1)
+ * @param outlineColor Optional outline color
+ * @param outlineThickness Optional outline thickness
+ */
+export function drawRectangle(context, x, y, width, height, strokeColor, strokeThickness, fillColor, fillOpacity, outlineColor, outlineThickness) {
+    // Draw fill if specified
+    if (fillColor && fillOpacity !== undefined) {
+        const originalAlpha = context.globalAlpha;
+        context.globalAlpha = fillOpacity;
+        context.fillStyle = fillColor;
+        context.fillRect(x, y, width, height);
+        context.globalAlpha = originalAlpha;
+    }
+    // Draw outline if specified
+    if (outlineColor && outlineThickness) {
+        context.strokeStyle = outlineColor;
+        context.lineWidth = strokeThickness + outlineThickness * 2;
+        context.strokeRect(x, y, width, height);
+    }
+    // Draw the main stroke
+    context.strokeStyle = strokeColor;
+    context.lineWidth = strokeThickness;
+    context.strokeRect(x, y, width, height);
+}
+/**
+ * Draws a cone/sector with stroke and optional fill
+ * @param context Canvas 2D context
+ * @param x Center X coordinate
+ * @param y Center Y coordinate
+ * @param radius Cone radius
+ * @param startAngle Start angle in radians
+ * @param endAngle End angle in radians
+ * @param strokeColor Stroke color
+ * @param strokeThickness Stroke thickness
+ * @param fillColor Optional fill color
+ * @param fillOpacity Optional fill opacity (0-1)
+ * @param outlineColor Optional outline color
+ * @param outlineThickness Optional outline thickness
+ */
+export function drawCone(context, x, y, radius, startAngle, endAngle, strokeColor, strokeThickness, fillColor, fillOpacity, outlineColor, outlineThickness) {
+    // Invert angles for canvas coordinate system (Y increases downward)
+    const invertedStartAngle = -endAngle;
+    const invertedEndAngle = -startAngle;
+    // Draw fill if specified
+    if (fillColor && fillOpacity !== undefined) {
+        const originalAlpha = context.globalAlpha;
+        context.globalAlpha = fillOpacity;
+        context.fillStyle = fillColor;
+        context.beginPath();
+        context.moveTo(x, y);
+        context.arc(x, y, radius, invertedStartAngle, invertedEndAngle);
+        context.closePath();
+        context.fill();
+        context.globalAlpha = originalAlpha;
+    }
+    // Draw outline if specified
+    if (outlineColor && outlineThickness) {
+        context.strokeStyle = outlineColor;
+        context.lineWidth = strokeThickness + outlineThickness * 2;
+        context.beginPath();
+        context.moveTo(x, y);
+        context.arc(x, y, radius, invertedStartAngle, invertedEndAngle);
+        context.closePath();
+        context.stroke();
+    }
+    // Draw the main stroke
+    context.strokeStyle = strokeColor;
+    context.lineWidth = strokeThickness;
+    context.beginPath();
+    context.moveTo(x, y);
+    context.arc(x, y, radius, invertedStartAngle, invertedEndAngle);
+    context.closePath();
+    context.stroke();
+}
+/**
+ * Creates a text canvas with consistent styling
+ * @param text The text to display
+ * @param fontSize Font size in pixels
+ * @param color Text color
+ * @param outlineColor Outline color
+ * @param outlineThickness Outline thickness
+ * @param units Optional units text to display in smaller font
+ * @returns Canvas element with rendered text
+ */
+export function createTextCanvas(text, fontSize, color, outlineColor = '#000000', 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_outlineThickness = 16, units) {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d', { colorSpace: 'srgb' });
+    // Set canvas size
+    canvas.width = 256;
+    canvas.height = 256;
+    // Set composite operation to ensure proper alpha blending
+    context.globalCompositeOperation = 'source-over';
+    // Clear canvas to fully transparent (alpha = 0)
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    // Set text properties with semi-bold font
+    context.font = `600 ${fontSize}px Inter`;
+    context.textAlign = 'center';
+    context.textBaseline = 'alphabetic';
+    if (units) {
+        // Split rendering for number and units
+        const unitsFontSize = fontSize * 0.5; // 50% of the main font size
+        // Measure both parts with the same font we'll use for drawing
+        context.font = `600 ${fontSize}px Inter`;
+        const numberWidth = context.measureText(text).width;
+        context.font = `600 ${unitsFontSize}px Inter`;
+        const unitsWidth = context.measureText(' ' + units).width;
+        const totalWidth = numberWidth + unitsWidth;
+        // Calculate padding for the background box
+        const padding = fontSize * 0.3;
+        const boxWidth = totalWidth + padding * 2;
+        const boxHeight = fontSize + padding;
+        const boxX = (canvas.width - boxWidth) / 2;
+        const boxY = (canvas.height - boxHeight) / 2;
+        // Draw background box
+        context.fillStyle = color;
+        context.fillRect(boxX, boxY, boxWidth, boxHeight);
+        // Calculate starting position to center the combined text
+        const startX = (canvas.width - totalWidth) / 2;
+        // Center the text vertically - the baseline should be at the vertical center plus some offset
+        const baselineY = canvas.height / 2 + fontSize * 0.35;
+        // Draw number text
+        context.font = `600 ${fontSize}px Inter`;
+        context.textAlign = 'left';
+        context.textBaseline = 'alphabetic';
+        context.fillStyle = outlineColor;
+        context.fillText(text, startX, baselineY);
+        // Re-measure the actual rendered width to ensure proper spacing
+        const actualNumberWidth = context.measureText(text).width;
+        // Draw units text in smaller font, aligned to same baseline
+        context.font = `600 ${unitsFontSize}px Inter`;
+        context.textBaseline = 'alphabetic';
+        context.fillText(' ' + units, startX + actualNumberWidth, baselineY);
+    }
+    else {
+        // Original behavior for text without units
+        // Measure text for box dimensions
+        context.font = `600 ${fontSize}px Inter`;
+        const textMetrics = context.measureText(text);
+        const padding = fontSize * 0.3;
+        const boxWidth = textMetrics.width + padding * 2;
+        const boxHeight = fontSize + padding;
+        const boxX = (canvas.width - boxWidth) / 2;
+        const boxY = (canvas.height - boxHeight) / 2;
+        // Draw background box
+        context.fillStyle = color;
+        context.fillRect(boxX, boxY, boxWidth, boxHeight);
+        // Center the text vertically - the baseline should be at the vertical center plus some offset
+        const baselineY = canvas.height / 2 + fontSize * 0.35;
+        // Draw text on top
+        context.textBaseline = 'alphabetic';
+        context.fillStyle = outlineColor;
+        context.fillText(text, canvas.width / 2, baselineY);
+    }
+    return canvas;
+}

package/dist/components/Stage/components/MeasurementLayer/utils/distanceCalculations.d.ts

@@ -0,0 +1,74 @@
+import * as THREE from 'three';
+import { GridType } from '../../GridLayer/types';
+/**
+ * Calculate hex grid distance between two points
+ * @param startPoint Start point in pixel coordinates
+ * @param endPoint End point in pixel coordinates
+ * @param gridSpacing Grid spacing in inches
+ * @param displaySize Display size in inches
+ * @param displayResolution Display resolution in pixels
+ * @param worldGridSize The real-world size of one hex
+ * @param returnHexCount If true, returns hex count instead of world units
+ * @returns Distance in world grid units or hex count
+ */
+export declare function calculateHexGridDistance(startPoint: THREE.Vector2, endPoint: THREE.Vector2, gridSpacing: number, displaySize: {
+    x: number;
+    y: number;
+}, displayResolution: {
+    x: number;
+    y: number;
+}, worldGridSize?: number, returnHexCount?: boolean): number;
+/**
+ * Calculate grid-based distance between two points
+ * @param startPoint Start point in pixel coordinates
+ * @param endPoint End point in pixel coordinates
+ * @param gridSpacing Grid spacing in inches
+ * @param displaySize Display size in inches
+ * @param displayResolution Display resolution in pixels
+ * @param gridType Type of grid (square or hex)
+ * @param snapToGrid Whether snapping is enabled
+ * @param enableDMG252 Whether to use DMG 252 diagonal rules
+ * @param worldGridSize The real-world size of one grid square
+ * @param worldGridUnits The units for the world grid size
+ * @returns Distance in world grid units
+ */
+export declare function calculateLineDistance(startPoint: THREE.Vector2, endPoint: THREE.Vector2, gridSpacing: number, displaySize: {
+    x: number;
+    y: number;
+}, displayResolution: {
+    x: number;
+    y: number;
+}, gridType?: GridType, snapToGrid?: boolean, enableDMG252?: boolean, worldGridSize?: number, _worldGridUnits?: string): number;
+/**
+ * Calculate D&D diagonal movement distance
+ * In D&D, diagonal movement costs 1.5 times normal movement
+ * This is implemented as: max(dx, dy) + min(dx, dy) * 0.5
+ */
+export declare function calculateDnDDiagonalDistance(startPoint: THREE.Vector2, endPoint: THREE.Vector2): number;
+/**
+ * Calculate distance using DMG 252 diagonal movement rules
+ * First diagonal = 1 grid unit, second = 2 grid units, alternating
+ * Only applies when snapping to square grid
+ */
+export declare function calculateDMG252Distance(startPoint: THREE.Vector2, endPoint: THREE.Vector2): number;
+/**
+ * Calculate radius from center point to edge point
+ */
+export declare function calculateRadius(centerPoint: THREE.Vector2, edgePoint: THREE.Vector2): number;
+/**
+ * Calculate area of a circle
+ */
+export declare function calculateCircleArea(radius: number): number;
+/**
+ * Calculate area of a square
+ */
+export declare function calculateSquareArea(sideLength: number): number;
+/**
+ * Convert pixels to game units (assuming 1 inch = 1 unit)
+ * This is a placeholder - actual conversion depends on grid scale
+ */
+export declare function pixelsToUnits(pixels: number, pixelsPerUnit?: number): number;
+/**
+ * Convert game units to pixels
+ */
+export declare function unitsToPixels(units: number, pixelsPerUnit?: number): number;