@tableslayer/ui 0.1.3 → 0.1.4

package/src/lib/components/Stage/components/MeasurementLayer/utils/canvasDrawing.ts

@@ -0,0 +1,357 @@
+/**
+ * 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: CanvasRenderingContext2D,
+  startX: number,
+  startY: number,
+  endX: number,
+  endY: number,
+  color: string,
+  thickness: number,
+  outlineColor?: string,
+  outlineThickness?: number
+): void {
+  // 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: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  radius: number,
+  color: string,
+  outlineColor?: string,
+  outlineThickness?: number
+): void {
+  // 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: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  radius: number,
+  strokeColor: string,
+  strokeThickness: number,
+  fillColor?: string,
+  fillOpacity?: number,
+  outlineColor?: string,
+  outlineThickness?: number
+): void {
+  // 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: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  strokeColor: string,
+  strokeThickness: number,
+  fillColor?: string,
+  fillOpacity?: number,
+  outlineColor?: string,
+  outlineThickness?: number
+): void {
+  // 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: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+  strokeColor: string,
+  strokeThickness: number,
+  fillColor?: string,
+  fillOpacity?: number,
+  outlineColor?: string,
+  outlineThickness?: number
+): void {
+  // 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: string,
+  fontSize: number,
+  color: string,
+  outlineColor: string = '#000000',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _outlineThickness: number = 16,
+  units?: string
+): HTMLCanvasElement {
+  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/src/lib/components/Stage/components/MeasurementLayer/utils/distanceCalculations.ts

@@ -0,0 +1,170 @@
+import * as THREE from 'three';
+import { hexDistance, pixelToHex, type HexCoordinate } from '../../../helpers/grid';
+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 function calculateHexGridDistance(
+  startPoint: THREE.Vector2,
+  endPoint: THREE.Vector2,
+  gridSpacing: number,
+  displaySize: { x: number; y: number },
+  displayResolution: { x: number; y: number },
+  worldGridSize: number = 5,
+  returnHexCount: boolean = false
+): number {
+  // Convert pixel coordinates to world coordinates (inches)
+  const pixelsPerInchX = displayResolution.x / displaySize.x;
+
+  // Calculate hex size in pixels
+  // The grid spacing represents the distance between hex centers
+  // For pointy-top hexagons, this is the width of the hex
+  const hexSizePixels = gridSpacing * pixelsPerInchX;
+
+  // Convert points to hex coordinates
+  const startHex = pixelToHex(startPoint, hexSizePixels) as HexCoordinate & { isGrid2?: boolean };
+  const endHex = pixelToHex(endPoint, hexSizePixels) as HexCoordinate & { isGrid2?: boolean };
+
+  // Calculate distance in hex units
+  const hexes = hexDistance(startHex, endHex);
+
+  // Return either hex count or world units
+  return returnHexCount ? hexes : hexes * worldGridSize;
+}
+
+/**
+ * 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 function calculateLineDistance(
+  startPoint: THREE.Vector2,
+  endPoint: THREE.Vector2,
+  gridSpacing: number,
+  displaySize: { x: number; y: number },
+  displayResolution: { x: number; y: number },
+  gridType: GridType = GridType.Square,
+  snapToGrid: boolean = false,
+  enableDMG252: boolean = false,
+  worldGridSize: number = 5,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _worldGridUnits: string = 'FT'
+): number {
+  // For hex grids with snapping enabled, use hex pathfinding
+  if (gridType === GridType.Hex && snapToGrid) {
+    return calculateHexGridDistance(startPoint, endPoint, gridSpacing, displaySize, displayResolution, worldGridSize);
+  }
+
+  // Convert pixel coordinates to world coordinates (inches)
+  const pixelsPerInchX = displayResolution.x / displaySize.x;
+  const pixelsPerInchY = displayResolution.y / displaySize.y;
+
+  // Convert to inches
+  const startInches = new THREE.Vector2(startPoint.x / pixelsPerInchX, startPoint.y / pixelsPerInchY);
+  const endInches = new THREE.Vector2(endPoint.x / pixelsPerInchX, endPoint.y / pixelsPerInchY);
+
+  // If DMG 252 rules are enabled and we're snapping to a square grid
+  if (enableDMG252 && snapToGrid && gridType === GridType.Square) {
+    // Convert to grid coordinates (number of grid squares)
+    const startGrid = new THREE.Vector2(startInches.x / gridSpacing, startInches.y / gridSpacing);
+    const endGrid = new THREE.Vector2(endInches.x / gridSpacing, endInches.y / gridSpacing);
+
+    // Calculate grid distance using DMG 252 rules, then convert to world units
+    const gridDistance = calculateDMG252Distance(startGrid, endGrid);
+    return gridDistance * worldGridSize;
+  }
+
+  // Standard distance calculation - convert to world grid units
+  const distanceInches = startInches.distanceTo(endInches);
+  const gridDistance = distanceInches / gridSpacing;
+  return gridDistance * worldGridSize;
+}
+
+/**
+ * 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 function calculateDnDDiagonalDistance(startPoint: THREE.Vector2, endPoint: THREE.Vector2): number {
+  const dx = Math.abs(endPoint.x - startPoint.x);
+  const dy = Math.abs(endPoint.y - startPoint.y);
+  return Math.max(dx, dy) + Math.min(dx, dy) * 0.5;
+}
+
+/**
+ * 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 function calculateDMG252Distance(startPoint: THREE.Vector2, endPoint: THREE.Vector2): number {
+  const dx = Math.abs(endPoint.x - startPoint.x);
+  const dy = Math.abs(endPoint.y - startPoint.y);
+
+  // Get the number of diagonal and straight moves
+  const diagonalMoves = Math.min(dx, dy);
+  const straightMoves = Math.max(dx, dy) - diagonalMoves;
+
+  // Calculate diagonal cost using DMG 252 rules
+  // Every other diagonal costs 2 units instead of 1
+  const fullDiagonalPairs = Math.floor(diagonalMoves / 2);
+  const remainingDiagonals = diagonalMoves % 2;
+
+  const diagonalCost = fullDiagonalPairs * 3 + remainingDiagonals * 1; // 3 = 1 + 2 for each pair
+  const straightCost = straightMoves;
+
+  return diagonalCost + straightCost;
+}
+
+/**
+ * Calculate radius from center point to edge point
+ */
+export function calculateRadius(centerPoint: THREE.Vector2, edgePoint: THREE.Vector2): number {
+  return centerPoint.distanceTo(edgePoint);
+}
+
+/**
+ * Calculate area of a circle
+ */
+export function calculateCircleArea(radius: number): number {
+  return Math.PI * radius * radius;
+}
+
+/**
+ * Calculate area of a square
+ */
+export function calculateSquareArea(sideLength: number): number {
+  return sideLength * sideLength;
+}
+
+/**
+ * Convert pixels to game units (assuming 1 inch = 1 unit)
+ * This is a placeholder - actual conversion depends on grid scale
+ */
+export function pixelsToUnits(pixels: number, pixelsPerUnit: number = 1): number {
+  return pixels / pixelsPerUnit;
+}
+
+/**
+ * Convert game units to pixels
+ */
+export function unitsToPixels(units: number, pixelsPerUnit: number = 1): number {
+  return units * pixelsPerUnit;
+}