@accelint/map-toolkit 0.6.0 → 1.0.0

package/dist/deckgl/shapes/display-shape-layer/utils/labels.js.map

@@ -1 +1 @@
-{"version":3,"file":"labels.js","names":["lengths: number[]","defaultOffset: [number, number]","defaultVertical: LabelVerticalPosition","defaultHorizontal: LabelHorizontalPosition","defaultCoordinateAnchor: CardinalLabelCoordinateAnchor"],"sources":["../../../../../src/deckgl/shapes/display-shape-layer/utils/labels.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Label positioning utilities for shapes\n *\n * This module provides utilities for positioning labels on shapes and calculating\n * points along line segments. Use these to customize label placement in your shape data.\n *\n * ## Label Styling\n *\n * Labels use a text-only style for legibility across different map backgrounds:\n * - **Text**: White uppercase with bold Roboto Mono font at 10px\n * - **Outline**: Black 2px outline around text for contrast\n * - **No background or border**: Clean text-only appearance\n *\n * ### Calculating Offsets\n *\n * When positioning labels, the text height is approximately 10px.\n * For example, to position a label exactly 5px above a point:\n * - Label height ≈ text height (10px)\n * - Offset needed: [0, -(10 + 5)] = [0, -15]\n *\n * @example Position label at the middle of a LineString\n * ```typescript\n * import { getLineStringMidpoint } from '@accelint/map-toolkit/deckgl/shapes/display-shape-layer/utils/labels';\n *\n * // Calculate midpoint for custom positioning\n * const coordinates = [[-122.4, 37.8], [-122.3, 37.9], [-122.2, 38.0]];\n * const midpoint = getLineStringMidpoint(coordinates);\n *\n * // Use in shape data with custom label properties\n * const shape = {\n *   feature: {\n *     properties: {\n *       styleProperties: {\n *         labelVerticalAnchor: 'top',\n *         labelHorizontalAnchor: 'center',\n *         labelOffset: [0, -10], // Small offset above the line\n *       }\n *     }\n *   }\n * };\n * ```\n */\n\n'use client';\n\nimport {\n  LABEL_BACKGROUND_OPACITY,\n  LABEL_BORDER_OPACITY,\n} from '../../shared/constants';\nimport type { LineString, Point, Polygon } from 'geojson';\nimport type { EditableShape } from '../../shared/types';\n\n/**\n * Label positioning information including coordinates and screen-space offsets\n */\nexport interface LabelPosition2d {\n  /** Geographic coordinates [longitude, latitude] */\n  coordinates: [number, number];\n  /** Horizontal text anchor point */\n  textAnchor: 'start' | 'middle' | 'end';\n  /** Vertical text alignment */\n  alignmentBaseline: 'top' | 'center' | 'bottom';\n  /** Pixel offset from coordinates [x, y] */\n  pixelOffset: [number, number];\n}\n\n/**\n * Calculate a point along a line segment\n * @param start - Start coordinate [lon, lat]\n * @param end - End coordinate [lon, lat]\n * @param ratio - Position along segment (0 = start, 0.5 = middle, 1 = end)\n * @returns Interpolated coordinate [lon, lat]\n *\n * @example\n * // Get a point 25% along a line segment\n * const start: [number, number] = [-122.4, 37.8];\n * const end: [number, number] = [-122.3, 37.9];\n * const point = interpolatePoint(start, end, 0.25);\n */\nexport function interpolatePoint(\n  start: [number, number],\n  end: [number, number],\n  ratio: number,\n): [number, number] {\n  const clampedRatio = Math.max(0, Math.min(1, ratio));\n  return [\n    start[0] + (end[0] - start[0]) * clampedRatio,\n    start[1] + (end[1] - start[1]) * clampedRatio,\n  ];\n}\n\n/**\n * Calculate segment lengths for a line\n */\nfunction calculateSegmentLengths(coordinates: [number, number][]): {\n  lengths: number[];\n  total: number;\n} {\n  let total = 0;\n  const lengths: number[] = [];\n\n  for (let i = 0; i < coordinates.length - 1; i++) {\n    const start = coordinates[i];\n    const end = coordinates[i + 1];\n    if (start && end) {\n      const length = Math.sqrt(\n        (end[0] - start[0]) ** 2 + (end[1] - start[1]) ** 2,\n      );\n      lengths.push(length);\n      total += length;\n    }\n  }\n\n  return { lengths, total };\n}\n\n/**\n * Find point at specific distance along line\n */\nfunction findPointAtDistance(\n  coordinates: [number, number][],\n  segmentLengths: number[],\n  targetDistance: number,\n): [number, number] {\n  let accumulatedLength = 0;\n\n  for (let i = 0; i < segmentLengths.length; i++) {\n    const segmentLength = segmentLengths[i];\n    if (!segmentLength) {\n      continue;\n    }\n\n    if (accumulatedLength + segmentLength >= targetDistance) {\n      const start = coordinates[i];\n      const end = coordinates[i + 1];\n      if (start && end) {\n        const ratio = (targetDistance - accumulatedLength) / segmentLength;\n        return interpolatePoint(start, end, ratio);\n      }\n    }\n    accumulatedLength += segmentLength;\n  }\n\n  return coordinates[coordinates.length - 1] ?? [0, 0];\n}\n\n/**\n * Get the midpoint of a LineString\n * @param coordinates - LineString coordinates array\n * @returns Midpoint coordinate [lon, lat]\n */\nexport function getLineStringMidpoint(\n  coordinates: [number, number][],\n): [number, number] {\n  if (coordinates.length === 0) {\n    return [0, 0];\n  }\n  if (coordinates.length === 1) {\n    return coordinates[0] ?? [0, 0];\n  }\n\n  const { lengths, total } = calculateSegmentLengths(coordinates);\n  const halfLength = total / 2;\n\n  return findPointAtDistance(coordinates, lengths, halfLength);\n}\n\n/**\n * Get the end point of a LineString\n * @param coordinates - LineString coordinates array\n * @returns End coordinate [lon, lat]\n */\nexport function getLineStringEndpoint(\n  coordinates: [number, number][],\n): [number, number] {\n  if (coordinates.length === 0) {\n    return [0, 0];\n  }\n  return coordinates[coordinates.length - 1] ?? [0, 0];\n}\n\n/**\n * Get the midpoint of a Polygon's outer ring\n * @param coordinates - Polygon coordinates array (rings)\n * @returns Midpoint of outer ring [lon, lat]\n */\nexport function getPolygonMidpoint(\n  coordinates: [number, number][][],\n): [number, number] {\n  const outerRing = coordinates[0];\n  if (!outerRing || outerRing.length === 0) {\n    return [0, 0];\n  }\n  // Use the outer ring (first ring)\n  return getLineStringMidpoint(outerRing);\n}\n\n/**\n * Vertical label position relative to anchor point\n */\nexport type LabelVerticalPosition = 'top' | 'middle' | 'bottom';\n\n/**\n * Horizontal label position relative to anchor point\n */\nexport type LabelHorizontalPosition = 'left' | 'center' | 'right';\n\n/**\n * Cardinal direction anchor for positioning labels on geometry edges\n * Uses edge positions relative to the geometry's bounding box\n * Works for LineString, Polygon, and Circle geometries\n * - 'center': centroid/midpoint of the geometry\n * - 'top'/'right'/'bottom'/'left': edge positions\n */\nexport type CardinalLabelCoordinateAnchor =\n  | 'center'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left';\n\n/**\n * Global label positioning options for DisplayShapeLayer\n *\n * ## Priority System\n * Label positioning follows a three-tier priority system:\n * 1. **Per-shape properties** in `styleProperties` (highest priority)\n * 2. **Global options** via this interface\n * 3. **Default values** (geometry-specific fallbacks)\n *\n * ## Label Appearance\n *\n * Labels use a clean text-only style:\n * - **Text**: White uppercase, bold Roboto Mono, 10px\n * - **Outline**: Black 2px outline for contrast\n * - **No background or border**\n *\n * Text height ≈ 10px\n *\n * ## Positioning Concepts\n *\n * ### Coordinate Anchor\n * Determines *where* on the geometry to place the label:\n * - **Point**: Label is always at the point coordinate\n * - **LineString/Polygon**: 'start', 'middle', or 'end' along the geometry\n * - **Circle**: 'top', 'right', 'bottom', or 'left' on the perimeter\n *\n * ### Vertical/Horizontal Anchor\n * Determines how the label aligns *relative to* the anchor point:\n * - **Vertical**: 'top' (label text below point), 'middle' (centered), 'bottom' (label text above point)\n * - **Horizontal**: 'left' (label text right of point), 'center' (centered), 'right' (label text left of point)\n *\n * ### Pixel Offset\n * Fine-tune label position with [x, y] pixel offsets:\n * - Positive x moves right, negative moves left\n * - Positive y moves down, negative moves up\n *\n * @example Position circle labels at the top with 5px clearance\n * ```tsx\n * const labelOptions: LabelPositionOptions = {\n *   circleLabelCoordinateAnchor: 'top',\n *   circleLabelVerticalAnchor: 'bottom', // Label above the top point\n *   circleLabelOffset: [0, -15], // -(10px text height + 5px clearance)\n * };\n * ```\n *\n * @example Position line labels at middle with offset to the right\n * ```tsx\n * const labelOptions: LabelPositionOptions = {\n *   lineStringLabelCoordinateAnchor: 'middle',\n *   lineStringLabelHorizontalAnchor: 'left',\n *   lineStringLabelOffset: [10, 0], // 10px to the right\n * };\n * ```\n */\nexport interface LabelPositionOptions {\n  // Point geometry options\n  /** Vertical anchor for Point labels @default 'top' */\n  pointLabelVerticalAnchor?: LabelVerticalPosition;\n  /** Horizontal anchor for Point labels @default 'center' */\n  pointLabelHorizontalAnchor?: LabelHorizontalPosition;\n  /** Pixel offset for Point labels [x, y] @default [0, 10] */\n  pointLabelOffset?: [number, number];\n\n  // LineString geometry options\n  /** Position on LineString edge (top/right/bottom/left) @default 'bottom' */\n  lineStringLabelCoordinateAnchor?: CardinalLabelCoordinateAnchor;\n  /** Vertical anchor for LineString labels @default 'top' */\n  lineStringLabelVerticalAnchor?: LabelVerticalPosition;\n  /** Horizontal anchor for LineString labels @default 'center' */\n  lineStringLabelHorizontalAnchor?: LabelHorizontalPosition;\n  /** Pixel offset for LineString labels [x, y] @default [0, 10] */\n  lineStringLabelOffset?: [number, number];\n\n  // Polygon geometry options\n  /** Position on Polygon edge (top/right/bottom/left) @default 'bottom' */\n  polygonLabelCoordinateAnchor?: CardinalLabelCoordinateAnchor;\n  /** Vertical anchor for Polygon labels @default 'top' */\n  polygonLabelVerticalAnchor?: LabelVerticalPosition;\n  /** Horizontal anchor for Polygon labels @default 'center' */\n  polygonLabelHorizontalAnchor?: LabelHorizontalPosition;\n  /** Pixel offset for Polygon labels [x, y] @default [0, 10] */\n  polygonLabelOffset?: [number, number];\n\n  // Circle geometry options\n  /** Position on Circle perimeter (top/right/bottom/left) @default 'bottom' */\n  circleLabelCoordinateAnchor?: CardinalLabelCoordinateAnchor;\n  /** Vertical anchor for Circle labels @default 'top' */\n  circleLabelVerticalAnchor?: LabelVerticalPosition;\n  /** Horizontal anchor for Circle labels @default 'center' */\n  circleLabelHorizontalAnchor?: LabelHorizontalPosition;\n  /** Pixel offset for Circle labels [x, y] @default [0, 10] */\n  circleLabelOffset?: [number, number];\n}\n\n/**\n * Convert vertical/horizontal position to deck.gl textAnchor and alignmentBaseline\n */\nfunction convertPositionToAnchors(\n  vertical: LabelVerticalPosition,\n  horizontal: LabelHorizontalPosition,\n): {\n  textAnchor: 'start' | 'middle' | 'end';\n  alignmentBaseline: 'top' | 'center' | 'bottom';\n} {\n  // Map horizontal to textAnchor\n  const textAnchorMap: Record<\n    LabelHorizontalPosition,\n    'start' | 'middle' | 'end'\n  > = {\n    left: 'start',\n    center: 'middle',\n    right: 'end',\n  };\n\n  // Map vertical to alignmentBaseline\n  const alignmentBaselineMap: Record<\n    LabelVerticalPosition,\n    'top' | 'center' | 'bottom'\n  > = {\n    top: 'top',\n    middle: 'center',\n    bottom: 'bottom',\n  };\n\n  return {\n    textAnchor: textAnchorMap[horizontal],\n    alignmentBaseline: alignmentBaselineMap[vertical],\n  };\n}\n\n/**\n * Helper to resolve label properties with priority: shape > options > default\n */\nfunction resolveLabelProperties(\n  shapeOffset: [number, number] | undefined,\n  shapeVertical: string | undefined,\n  shapeHorizontal: string | undefined,\n  defaultOffset: [number, number],\n  defaultVertical: LabelVerticalPosition,\n  defaultHorizontal: LabelHorizontalPosition,\n  optionsOffset?: [number, number],\n  optionsVertical?: LabelVerticalPosition,\n  optionsHorizontal?: LabelHorizontalPosition,\n) {\n  const vertical = (shapeVertical ??\n    optionsVertical ??\n    defaultVertical) as LabelVerticalPosition;\n  const horizontal = (shapeHorizontal ??\n    optionsHorizontal ??\n    defaultHorizontal) as LabelHorizontalPosition;\n  const pixelOffset = shapeOffset ?? optionsOffset ?? defaultOffset;\n\n  const anchors = convertPositionToAnchors(vertical, horizontal);\n\n  return {\n    pixelOffset,\n    ...anchors,\n  };\n}\n\n/**\n * Get position for Point geometry\n */\nfunction getPointPosition(\n  geometry: Point,\n  shapeOffset: [number, number] | undefined,\n  shapeVertical: string | undefined,\n  shapeHorizontal: string | undefined,\n  options?: LabelPositionOptions,\n): LabelPosition2d {\n  const defaultOffset: [number, number] = [0, 10];\n  const defaultVertical: LabelVerticalPosition = 'top';\n  const defaultHorizontal: LabelHorizontalPosition = 'center';\n\n  const resolved = resolveLabelProperties(\n    shapeOffset,\n    shapeVertical,\n    shapeHorizontal,\n    defaultOffset,\n    defaultVertical,\n    defaultHorizontal,\n    options?.pointLabelOffset,\n    options?.pointLabelVerticalAnchor,\n    options?.pointLabelHorizontalAnchor,\n  );\n\n  return {\n    coordinates: [\n      geometry.coordinates[0] ?? 0,\n      geometry.coordinates[1] ?? 0,\n    ] as [number, number],\n    ...resolved,\n  };\n}\n\n/**\n * Get position for LineString geometry\n * Uses cardinal direction positioning to find the edge point\n */\nfunction getLineStringPosition(\n  geometry: LineString,\n  shapeOffset: [number, number] | undefined,\n  shapeVertical: string | undefined,\n  shapeHorizontal: string | undefined,\n  shapeCoordinateAnchor: string | undefined,\n  options?: LabelPositionOptions,\n): LabelPosition2d | null {\n  const defaultOffset: [number, number] = [0, 10];\n  const defaultVertical: LabelVerticalPosition = 'top';\n  const defaultHorizontal: LabelHorizontalPosition = 'center';\n  const defaultCoordinateAnchor: CardinalLabelCoordinateAnchor = 'bottom';\n\n  const resolved = resolveLabelProperties(\n    shapeOffset,\n    shapeVertical,\n    shapeHorizontal,\n    defaultOffset,\n    defaultVertical,\n    defaultHorizontal,\n    options?.lineStringLabelOffset,\n    options?.lineStringLabelVerticalAnchor,\n    options?.lineStringLabelHorizontalAnchor,\n  );\n\n  // Determine coordinate anchor (priority: shape > options > default)\n  const coordinateAnchor = (shapeCoordinateAnchor ??\n    options?.lineStringLabelCoordinateAnchor ??\n    defaultCoordinateAnchor) as CardinalLabelCoordinateAnchor;\n\n  // Calculate position based on cardinal direction\n  const coordinates = findEdgePoint(\n    geometry.coordinates as number[][],\n    coordinateAnchor,\n  );\n\n  if (!coordinates) {\n    return null;\n  }\n\n  return {\n    coordinates,\n    ...resolved,\n  };\n}\n\n/**\n * Get vertex coordinate from ring\n */\nfunction getVertexCoordinate(\n  vertex: number[] | undefined,\n): [number, number] | null {\n  if (!vertex || vertex[0] === undefined || vertex[1] === undefined) {\n    return null;\n  }\n  return [vertex[0], vertex[1]];\n}\n\n/**\n * Check if a vertex should replace the current target based on edge position\n */\nfunction shouldUpdateEdgeVertex(\n  vertexValue: number,\n  targetValue: number,\n  position: CardinalLabelCoordinateAnchor,\n): boolean {\n  // For top and right, find maximum value\n  // For bottom and left, find minimum value\n  return position === 'top' || position === 'right'\n    ? vertexValue > targetValue\n    : vertexValue < targetValue;\n}\n\n/**\n * Get the coordinate index based on edge position (0 for x/longitude, 1 for y/latitude)\n */\nfunction getCoordinateIndexForEdgePosition(\n  position: CardinalLabelCoordinateAnchor,\n): number {\n  return position === 'top' || position === 'bottom' ? 1 : 0;\n}\n\n/**\n * Calculate the centroid (center point) of a set of coordinates\n * For polygons, this calculates the geometric center\n * For lines, this calculates the midpoint of the bounding box\n * Returns null if no valid coordinates exist\n */\nfunction calculateCentroid(coordinates: number[][]): [number, number] | null {\n  if (coordinates.length === 0) {\n    return null;\n  }\n\n  let sumX = 0;\n  let sumY = 0;\n  let count = 0;\n\n  for (const coord of coordinates) {\n    if (coord && coord[0] !== undefined && coord[1] !== undefined) {\n      sumX += coord[0];\n      sumY += coord[1];\n      count++;\n    }\n  }\n\n  if (count === 0) {\n    return null;\n  }\n\n  return [sumX / count, sumY / count];\n}\n\n/**\n * Find the point on a geometry's perimeter at the specified edge position\n * @param coordinates - Array of coordinates (ring or line)\n * @param position - Edge position (center/top/right/bottom/left) relative to bounding box\n * @returns Coordinate at the specified edge position, or null if no valid coordinates\n */\nfunction findEdgePoint(\n  coordinates: number[][] | undefined,\n  position: CardinalLabelCoordinateAnchor,\n): [number, number] | null {\n  if (!coordinates || coordinates.length === 0) {\n    return null;\n  }\n\n  // Handle center positioning\n  if (position === 'center') {\n    return calculateCentroid(coordinates);\n  }\n\n  // Find the vertex with max/min latitude or longitude\n  let targetVertex = coordinates[0];\n  const coordinateIndex = getCoordinateIndexForEdgePosition(position);\n\n  for (const vertex of coordinates) {\n    if (!vertex) {\n      continue;\n    }\n    if (!targetVertex) {\n      continue;\n    }\n\n    const vertexValue = vertex[coordinateIndex];\n    const targetValue = targetVertex[coordinateIndex];\n\n    if (vertexValue === undefined || targetValue === undefined) {\n      continue;\n    }\n\n    if (shouldUpdateEdgeVertex(vertexValue, targetValue, position)) {\n      targetVertex = vertex;\n    }\n  }\n\n  return getVertexCoordinate(targetVertex);\n}\n\n/**\n * Get position for Circle geometry (special case of Polygon)\n */\nfunction getCirclePosition(\n  ring: number[][] | undefined,\n  shapeOffset: [number, number] | undefined,\n  shapeVertical: string | undefined,\n  shapeHorizontal: string | undefined,\n  shapeCoordinateAnchor: string | undefined,\n  options?: LabelPositionOptions,\n): LabelPosition2d | null {\n  const defaultOffset: [number, number] = [0, 10];\n  const defaultVertical: LabelVerticalPosition = 'top';\n  const defaultHorizontal: LabelHorizontalPosition = 'center';\n  const defaultCoordinateAnchor: CardinalLabelCoordinateAnchor = 'bottom';\n\n  const resolved = resolveLabelProperties(\n    shapeOffset,\n    shapeVertical,\n    shapeHorizontal,\n    defaultOffset,\n    defaultVertical,\n    defaultHorizontal,\n    options?.circleLabelOffset,\n    options?.circleLabelVerticalAnchor,\n    options?.circleLabelHorizontalAnchor,\n  );\n\n  // Determine coordinate anchor (priority: shape > options > default)\n  const coordinateAnchor = (shapeCoordinateAnchor ??\n    options?.circleLabelCoordinateAnchor ??\n    defaultCoordinateAnchor) as CardinalLabelCoordinateAnchor;\n\n  // Calculate position based on coordinate anchor\n  const coordinates = findEdgePoint(ring, coordinateAnchor);\n\n  if (!coordinates) {\n    return null;\n  }\n\n  return {\n    coordinates,\n    ...resolved,\n  };\n}\n\n/**\n * Get position for Polygon geometry\n * Uses cardinal direction positioning to find the edge point\n */\nfunction getPolygonPosition(\n  geometry: Polygon,\n  shape: EditableShape,\n  shapeOffset: [number, number] | undefined,\n  shapeVertical: string | undefined,\n  shapeHorizontal: string | undefined,\n  shapeCoordinateAnchor: string | undefined,\n  options?: LabelPositionOptions,\n): LabelPosition2d | null {\n  const ring = geometry.coordinates[0];\n\n  // Circle shapes use circle-specific options\n  if (shape.shapeType === 'Circle') {\n    return getCirclePosition(\n      ring,\n      shapeOffset,\n      shapeVertical,\n      shapeHorizontal,\n      shapeCoordinateAnchor,\n      options,\n    );\n  }\n\n  // Regular polygons use cardinal direction positioning\n  const defaultOffset: [number, number] = [0, 10];\n  const defaultVertical: LabelVerticalPosition = 'top';\n  const defaultHorizontal: LabelHorizontalPosition = 'center';\n  const defaultCoordinateAnchor: CardinalLabelCoordinateAnchor = 'bottom';\n\n  const resolved = resolveLabelProperties(\n    shapeOffset,\n    shapeVertical,\n    shapeHorizontal,\n    defaultOffset,\n    defaultVertical,\n    defaultHorizontal,\n    options?.polygonLabelOffset,\n    options?.polygonLabelVerticalAnchor,\n    options?.polygonLabelHorizontalAnchor,\n  );\n\n  // Determine coordinate anchor (priority: shape > options > default)\n  const coordinateAnchor = (shapeCoordinateAnchor ??\n    options?.polygonLabelCoordinateAnchor ??\n    defaultCoordinateAnchor) as CardinalLabelCoordinateAnchor;\n\n  // Calculate position based on cardinal direction\n  const coordinates = findEdgePoint(ring, coordinateAnchor);\n\n  if (!coordinates) {\n    return null;\n  }\n\n  return {\n    coordinates,\n    ...resolved,\n  };\n}\n\n/**\n * Get 2D position for label based on geometry type\n * Uses pixel-based offsets for consistent positioning at all zoom levels\n *\n * Priority for positioning:\n * 1. Per-shape properties in styleProperties (highest)\n * 2. Global labelOptions from layer props\n * 3. Default values (fallback)\n *\n * Returns null if no valid coordinates can be determined\n */\nexport function getLabelPosition2d(\n  shape: EditableShape,\n  options?: LabelPositionOptions,\n): LabelPosition2d | null {\n  const { geometry } = shape.feature;\n  const styleProps = shape.feature.properties?.styleProperties;\n\n  // Check if shape has custom label properties\n  const shapeOffset = styleProps?.labelOffset as [number, number] | undefined;\n  const shapeVertical = styleProps?.labelVerticalAnchor;\n  const shapeHorizontal = styleProps?.labelHorizontalAnchor;\n  const shapeCoordinateAnchor = styleProps?.labelCoordinateAnchor;\n\n  switch (geometry.type) {\n    case 'Point':\n      return getPointPosition(\n        geometry,\n        shapeOffset,\n        shapeVertical,\n        shapeHorizontal,\n        options,\n      );\n\n    case 'LineString':\n      return getLineStringPosition(\n        geometry,\n        shapeOffset,\n        shapeVertical,\n        shapeHorizontal,\n        shapeCoordinateAnchor,\n        options,\n      );\n\n    case 'Polygon':\n      return getPolygonPosition(\n        geometry,\n        shape,\n        shapeOffset,\n        shapeVertical,\n        shapeHorizontal,\n        shapeCoordinateAnchor,\n        options,\n      );\n\n    default:\n      // Unknown geometry type - return null\n      return null;\n  }\n}\n\n/**\n * Get label text for a shape\n *\n * Returns the display label for the shape on the map in uppercase.\n * - `label`: Optional short display name shown on the map (e.g., \"NYC\")\n * - `name`: Full shape name used internally (e.g., \"New York City Office\")\n *\n * If `label` is not provided, falls back to using `name`.\n * Text is automatically converted to uppercase for display.\n */\nexport function getLabelText(shape: EditableShape): string {\n  return (shape.label || shape.name).toUpperCase();\n}\n\n/**\n * Get label background color (uses RGB from shape fill color with fixed label opacity)\n */\nexport function getLabelFillColor(\n  shape: EditableShape,\n): [number, number, number, number] {\n  const styleProps = shape.feature.properties?.styleProperties;\n  const fillColor = styleProps?.fillColor ?? [98, 166, 255, 255];\n\n  // Extract RGB, use fixed opacity for label background\n  const r = fillColor[0] ?? 98;\n  const g = fillColor[1] ?? 166;\n  const b = fillColor[2] ?? 255;\n\n  return [r, g, b, LABEL_BACKGROUND_OPACITY];\n}\n\n/**\n * Get label border color (uses RGB from shape stroke color with full opacity)\n */\nexport function getLabelBorderColor(\n  shape: EditableShape,\n): [number, number, number, number] {\n  const styleProps = shape.feature.properties?.styleProperties;\n  const strokeColor = styleProps?.strokeColor ?? [98, 166, 255, 255];\n\n  // Extract RGB, use full opacity for border\n  const r = strokeColor[0] ?? 98;\n  const g = strokeColor[1] ?? 166;\n  const b = strokeColor[2] ?? 255;\n\n  return [r, g, b, LABEL_BORDER_OPACITY];\n}\n"],"mappings":"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"}
+{"version":3,"file":"labels.js","names":["defaultOffset: [number, number]","defaultVertical: LabelVerticalPosition","defaultHorizontal: LabelHorizontalPosition","defaultCoordinateAnchor: CardinalLabelCoordinateAnchor"],"sources":["../../../../../src/deckgl/shapes/display-shape-layer/utils/labels.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Label positioning utilities for shapes\n *\n * This module provides utilities for positioning labels on shapes and calculating\n * points along line segments. Use these to customize label placement in your shape data.\n *\n * ## Label Styling\n *\n * Labels use a text-only style for legibility across different map backgrounds:\n * - **Text**: White uppercase with bold Roboto Mono font at 10px\n * - **Outline**: Black 2px outline around text for contrast\n * - **No background or border**: Clean text-only appearance\n *\n * ### Calculating Offsets\n *\n * When positioning labels, the text height is approximately 10px.\n * For example, to position a label exactly 5px above a point:\n * - Label height ≈ text height (10px)\n * - Offset needed: [0, -(10 + 5)] = [0, -15]\n *\n * @example Position label at the middle of a LineString\n * ```typescript\n * import { getLineStringMidpoint } from '@accelint/map-toolkit/deckgl/shapes/display-shape-layer/utils/labels';\n *\n * // Calculate midpoint for custom positioning\n * const coordinates = [[-122.4, 37.8], [-122.3, 37.9], [-122.2, 38.0]];\n * const midpoint = getLineStringMidpoint(coordinates);\n *\n * // Use in shape data with custom label properties\n * const shape = {\n *   feature: {\n *     properties: {\n *       styleProperties: {\n *         labelVerticalAnchor: 'top',\n *         labelHorizontalAnchor: 'center',\n *         labelOffset: [0, -10], // Small offset above the line\n *       }\n *     }\n *   }\n * };\n * ```\n */\n\n'use client';\n\nimport type { LineString, Point, Polygon } from 'geojson';\nimport { isCircleShape } from '../../shared/types';\nimport type { Shape } from '../../shared/types';\n\n/**\n * Label positioning information including coordinates and screen-space offsets\n */\nexport interface LabelPosition2d {\n  /** Geographic coordinates [longitude, latitude] */\n  coordinates: [number, number];\n  /** Horizontal text anchor point */\n  textAnchor: 'start' | 'middle' | 'end';\n  /** Vertical text alignment */\n  alignmentBaseline: 'top' | 'center' | 'bottom';\n  /** Pixel offset from coordinates [x, y] */\n  pixelOffset: [number, number];\n}\n\n/**\n * Calculate a point along a line segment\n * @param start - Start coordinate [lon, lat]\n * @param end - End coordinate [lon, lat]\n * @param ratio - Position along segment (0 = start, 0.5 = middle, 1 = end)\n * @returns Interpolated coordinate [lon, lat]\n *\n * @example\n * // Get a point 25% along a line segment\n * const start: [number, number] = [-122.4, 37.8];\n * const end: [number, number] = [-122.3, 37.9];\n * const point = interpolatePoint(start, end, 0.25);\n */\nexport function interpolatePoint(\n  start: [number, number],\n  end: [number, number],\n  ratio: number,\n): [number, number] {\n  const clampedRatio = Math.max(0, Math.min(1, ratio));\n  return [\n    start[0] + (end[0] - start[0]) * clampedRatio,\n    start[1] + (end[1] - start[1]) * clampedRatio,\n  ];\n}\n\n/**\n * Calculate segment lengths for a line\n */\nfunction calculateSegmentLengths(coordinates: [number, number][]): {\n  lengths: number[];\n  total: number;\n} {\n  let total = 0;\n  const lengths: number[] = [];\n\n  for (let i = 0; i < coordinates.length - 1; i++) {\n    const start = coordinates[i];\n    const end = coordinates[i + 1];\n    if (start && end) {\n      const length = Math.sqrt(\n        (end[0] - start[0]) ** 2 + (end[1] - start[1]) ** 2,\n      );\n      lengths.push(length);\n      total += length;\n    }\n  }\n\n  return { lengths, total };\n}\n\n/**\n * Find point at specific distance along line\n */\nfunction findPointAtDistance(\n  coordinates: [number, number][],\n  segmentLengths: number[],\n  targetDistance: number,\n): [number, number] {\n  let accumulatedLength = 0;\n\n  for (let i = 0; i < segmentLengths.length; i++) {\n    const segmentLength = segmentLengths[i];\n    if (!segmentLength) {\n      continue;\n    }\n\n    if (accumulatedLength + segmentLength >= targetDistance) {\n      const start = coordinates[i];\n      const end = coordinates[i + 1];\n      if (start && end) {\n        const ratio = (targetDistance - accumulatedLength) / segmentLength;\n        return interpolatePoint(start, end, ratio);\n      }\n    }\n    accumulatedLength += segmentLength;\n  }\n\n  return coordinates[coordinates.length - 1] ?? [0, 0];\n}\n\n/**\n * Get the midpoint of a LineString\n * @param coordinates - LineString coordinates array\n * @returns Midpoint coordinate [lon, lat]\n */\nexport function getLineStringMidpoint(\n  coordinates: [number, number][],\n): [number, number] {\n  if (coordinates.length === 0) {\n    return [0, 0];\n  }\n  if (coordinates.length === 1) {\n    return coordinates[0] ?? [0, 0];\n  }\n\n  const { lengths, total } = calculateSegmentLengths(coordinates);\n  const halfLength = total / 2;\n\n  return findPointAtDistance(coordinates, lengths, halfLength);\n}\n\n/**\n * Get the end point of a LineString\n * @param coordinates - LineString coordinates array\n * @returns End coordinate [lon, lat]\n */\nexport function getLineStringEndpoint(\n  coordinates: [number, number][],\n): [number, number] {\n  if (coordinates.length === 0) {\n    return [0, 0];\n  }\n  return coordinates[coordinates.length - 1] ?? [0, 0];\n}\n\n/**\n * Get the midpoint of a Polygon's outer ring\n * @param coordinates - Polygon coordinates array (rings)\n * @returns Midpoint of outer ring [lon, lat]\n */\nexport function getPolygonMidpoint(\n  coordinates: [number, number][][],\n): [number, number] {\n  const outerRing = coordinates[0];\n  if (!outerRing || outerRing.length === 0) {\n    return [0, 0];\n  }\n  // Use the outer ring (first ring)\n  return getLineStringMidpoint(outerRing);\n}\n\n/**\n * Vertical label position relative to anchor point\n */\nexport type LabelVerticalPosition = 'top' | 'middle' | 'bottom';\n\n/**\n * Horizontal label position relative to anchor point\n */\nexport type LabelHorizontalPosition = 'left' | 'center' | 'right';\n\n/**\n * Cardinal direction anchor for positioning labels on geometry edges\n * Uses edge positions relative to the geometry's bounding box\n * Works for LineString, Polygon, and Circle geometries\n * - 'center': centroid/midpoint of the geometry\n * - 'top'/'right'/'bottom'/'left': edge positions\n */\nexport type CardinalLabelCoordinateAnchor =\n  | 'center'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left';\n\n/**\n * Global label positioning options for DisplayShapeLayer\n *\n * ## Priority System\n * Label positioning follows a three-tier priority system:\n * 1. **Per-shape properties** in `styleProperties` (highest priority)\n * 2. **Global options** via this interface\n * 3. **Default values** (geometry-specific fallbacks)\n *\n * ## Label Appearance\n *\n * Labels use a clean text-only style:\n * - **Text**: White uppercase, bold Roboto Mono, 10px\n * - **Outline**: Black 2px outline for contrast\n * - **No background or border**\n *\n * Text height ≈ 10px\n *\n * ## Positioning Concepts\n *\n * ### Coordinate Anchor\n * Determines *where* on the geometry to place the label:\n * - **Point**: Label is always at the point coordinate\n * - **LineString/Polygon**: 'start', 'middle', or 'end' along the geometry\n * - **Circle**: 'top', 'right', 'bottom', or 'left' on the perimeter\n *\n * ### Vertical/Horizontal Anchor\n * Determines how the label aligns *relative to* the anchor point:\n * - **Vertical**: 'top' (label text below point), 'middle' (centered), 'bottom' (label text above point)\n * - **Horizontal**: 'left' (label text right of point), 'center' (centered), 'right' (label text left of point)\n *\n * ### Pixel Offset\n * Fine-tune label position with [x, y] pixel offsets:\n * - Positive x moves right, negative moves left\n * - Positive y moves down, negative moves up\n *\n * @example Position circle labels at the top with 5px clearance\n * ```tsx\n * const labelOptions: LabelPositionOptions = {\n *   circleLabelCoordinateAnchor: 'top',\n *   circleLabelVerticalAnchor: 'bottom', // Label above the top point\n *   circleLabelOffset: [0, -15], // -(10px text height + 5px clearance)\n * };\n * ```\n *\n * @example Position line labels at middle with offset to the right\n * ```tsx\n * const labelOptions: LabelPositionOptions = {\n *   lineStringLabelCoordinateAnchor: 'middle',\n *   lineStringLabelHorizontalAnchor: 'left',\n *   lineStringLabelOffset: [10, 0], // 10px to the right\n * };\n * ```\n */\nexport interface LabelPositionOptions {\n  // Point geometry options\n  /** Vertical anchor for Point labels @default 'top' */\n  pointLabelVerticalAnchor?: LabelVerticalPosition;\n  /** Horizontal anchor for Point labels @default 'center' */\n  pointLabelHorizontalAnchor?: LabelHorizontalPosition;\n  /** Pixel offset for Point labels [x, y] @default [0, 10] */\n  pointLabelOffset?: [number, number];\n\n  // LineString geometry options\n  /** Position on LineString edge (top/right/bottom/left) @default 'bottom' */\n  lineStringLabelCoordinateAnchor?: CardinalLabelCoordinateAnchor;\n  /** Vertical anchor for LineString labels @default 'top' */\n  lineStringLabelVerticalAnchor?: LabelVerticalPosition;\n  /** Horizontal anchor for LineString labels @default 'center' */\n  lineStringLabelHorizontalAnchor?: LabelHorizontalPosition;\n  /** Pixel offset for LineString labels [x, y] @default [0, 10] */\n  lineStringLabelOffset?: [number, number];\n\n  // Polygon geometry options\n  /** Position on Polygon edge (top/right/bottom/left) @default 'bottom' */\n  polygonLabelCoordinateAnchor?: CardinalLabelCoordinateAnchor;\n  /** Vertical anchor for Polygon labels @default 'top' */\n  polygonLabelVerticalAnchor?: LabelVerticalPosition;\n  /** Horizontal anchor for Polygon labels @default 'center' */\n  polygonLabelHorizontalAnchor?: LabelHorizontalPosition;\n  /** Pixel offset for Polygon labels [x, y] @default [0, 10] */\n  polygonLabelOffset?: [number, number];\n\n  // Circle geometry options\n  /** Position on Circle perimeter (top/right/bottom/left) @default 'bottom' */\n  circleLabelCoordinateAnchor?: CardinalLabelCoordinateAnchor;\n  /** Vertical anchor for Circle labels @default 'top' */\n  circleLabelVerticalAnchor?: LabelVerticalPosition;\n  /** Horizontal anchor for Circle labels @default 'center' */\n  circleLabelHorizontalAnchor?: LabelHorizontalPosition;\n  /** Pixel offset for Circle labels [x, y] @default [0, 10] */\n  circleLabelOffset?: [number, number];\n}\n\n/**\n * Convert vertical/horizontal position to deck.gl textAnchor and alignmentBaseline\n */\nfunction convertPositionToAnchors(\n  vertical: LabelVerticalPosition,\n  horizontal: LabelHorizontalPosition,\n): {\n  textAnchor: 'start' | 'middle' | 'end';\n  alignmentBaseline: 'top' | 'center' | 'bottom';\n} {\n  // Map horizontal to textAnchor\n  const textAnchorMap: Record<\n    LabelHorizontalPosition,\n    'start' | 'middle' | 'end'\n  > = {\n    left: 'start',\n    center: 'middle',\n    right: 'end',\n  };\n\n  // Map vertical to alignmentBaseline\n  const alignmentBaselineMap: Record<\n    LabelVerticalPosition,\n    'top' | 'center' | 'bottom'\n  > = {\n    top: 'top',\n    middle: 'center',\n    bottom: 'bottom',\n  };\n\n  return {\n    textAnchor: textAnchorMap[horizontal],\n    alignmentBaseline: alignmentBaselineMap[vertical],\n  };\n}\n\n/**\n * Helper to resolve label properties with priority: shape > options > default\n */\nfunction resolveLabelProperties(\n  shapeOffset: [number, number] | undefined,\n  shapeVertical: string | undefined,\n  shapeHorizontal: string | undefined,\n  defaultOffset: [number, number],\n  defaultVertical: LabelVerticalPosition,\n  defaultHorizontal: LabelHorizontalPosition,\n  optionsOffset?: [number, number],\n  optionsVertical?: LabelVerticalPosition,\n  optionsHorizontal?: LabelHorizontalPosition,\n) {\n  const vertical = (shapeVertical ??\n    optionsVertical ??\n    defaultVertical) as LabelVerticalPosition;\n  const horizontal = (shapeHorizontal ??\n    optionsHorizontal ??\n    defaultHorizontal) as LabelHorizontalPosition;\n  const pixelOffset = shapeOffset ?? optionsOffset ?? defaultOffset;\n\n  const anchors = convertPositionToAnchors(vertical, horizontal);\n\n  return {\n    pixelOffset,\n    ...anchors,\n  };\n}\n\n/**\n * Get position for Point geometry\n */\nfunction getPointPosition(\n  geometry: Point,\n  shapeOffset: [number, number] | undefined,\n  shapeVertical: string | undefined,\n  shapeHorizontal: string | undefined,\n  options?: LabelPositionOptions,\n): LabelPosition2d {\n  const defaultOffset: [number, number] = [0, 10];\n  const defaultVertical: LabelVerticalPosition = 'top';\n  const defaultHorizontal: LabelHorizontalPosition = 'center';\n\n  const resolved = resolveLabelProperties(\n    shapeOffset,\n    shapeVertical,\n    shapeHorizontal,\n    defaultOffset,\n    defaultVertical,\n    defaultHorizontal,\n    options?.pointLabelOffset,\n    options?.pointLabelVerticalAnchor,\n    options?.pointLabelHorizontalAnchor,\n  );\n\n  return {\n    coordinates: [\n      geometry.coordinates[0] ?? 0,\n      geometry.coordinates[1] ?? 0,\n    ] as [number, number],\n    ...resolved,\n  };\n}\n\n/**\n * Get position for LineString geometry\n * Uses cardinal direction positioning to find the edge point\n */\nfunction getLineStringPosition(\n  geometry: LineString,\n  shapeOffset: [number, number] | undefined,\n  shapeVertical: string | undefined,\n  shapeHorizontal: string | undefined,\n  shapeCoordinateAnchor: string | undefined,\n  options?: LabelPositionOptions,\n): LabelPosition2d | null {\n  const defaultOffset: [number, number] = [0, 10];\n  const defaultVertical: LabelVerticalPosition = 'top';\n  const defaultHorizontal: LabelHorizontalPosition = 'center';\n  const defaultCoordinateAnchor: CardinalLabelCoordinateAnchor = 'bottom';\n\n  const resolved = resolveLabelProperties(\n    shapeOffset,\n    shapeVertical,\n    shapeHorizontal,\n    defaultOffset,\n    defaultVertical,\n    defaultHorizontal,\n    options?.lineStringLabelOffset,\n    options?.lineStringLabelVerticalAnchor,\n    options?.lineStringLabelHorizontalAnchor,\n  );\n\n  // Determine coordinate anchor (priority: shape > options > default)\n  const coordinateAnchor = (shapeCoordinateAnchor ??\n    options?.lineStringLabelCoordinateAnchor ??\n    defaultCoordinateAnchor) as CardinalLabelCoordinateAnchor;\n\n  // Calculate position based on cardinal direction\n  const coordinates = findEdgePoint(\n    geometry.coordinates as number[][],\n    coordinateAnchor,\n  );\n\n  if (!coordinates) {\n    return null;\n  }\n\n  return {\n    coordinates,\n    ...resolved,\n  };\n}\n\n/**\n * Get vertex coordinate from ring\n */\nfunction getVertexCoordinate(\n  vertex: number[] | undefined,\n): [number, number] | null {\n  if (!vertex || vertex[0] === undefined || vertex[1] === undefined) {\n    return null;\n  }\n  return [vertex[0], vertex[1]];\n}\n\n/**\n * Check if a vertex should replace the current target based on edge position\n */\nfunction shouldUpdateEdgeVertex(\n  vertexValue: number,\n  targetValue: number,\n  position: CardinalLabelCoordinateAnchor,\n): boolean {\n  // For top and right, find maximum value\n  // For bottom and left, find minimum value\n  return position === 'top' || position === 'right'\n    ? vertexValue > targetValue\n    : vertexValue < targetValue;\n}\n\n/**\n * Get the coordinate index based on edge position (0 for x/longitude, 1 for y/latitude)\n */\nfunction getCoordinateIndexForEdgePosition(\n  position: CardinalLabelCoordinateAnchor,\n): number {\n  return position === 'top' || position === 'bottom' ? 1 : 0;\n}\n\n/**\n * Calculate the centroid (center point) of a set of coordinates\n * For polygons, this calculates the geometric center\n * For lines, this calculates the midpoint of the bounding box\n * Returns null if no valid coordinates exist\n */\nfunction calculateCentroid(coordinates: number[][]): [number, number] | null {\n  if (coordinates.length === 0) {\n    return null;\n  }\n\n  let sumX = 0;\n  let sumY = 0;\n  let count = 0;\n\n  for (const coord of coordinates) {\n    if (coord && coord[0] !== undefined && coord[1] !== undefined) {\n      sumX += coord[0];\n      sumY += coord[1];\n      count++;\n    }\n  }\n\n  if (count === 0) {\n    return null;\n  }\n\n  return [sumX / count, sumY / count];\n}\n\n/**\n * Find the point on a geometry's perimeter at the specified edge position\n * @param coordinates - Array of coordinates (ring or line)\n * @param position - Edge position (center/top/right/bottom/left) relative to bounding box\n * @returns Coordinate at the specified edge position, or null if no valid coordinates\n */\nfunction findEdgePoint(\n  coordinates: number[][] | undefined,\n  position: CardinalLabelCoordinateAnchor,\n): [number, number] | null {\n  if (!coordinates || coordinates.length === 0) {\n    return null;\n  }\n\n  // Handle center positioning\n  if (position === 'center') {\n    return calculateCentroid(coordinates);\n  }\n\n  // Find the vertex with max/min latitude or longitude\n  let targetVertex = coordinates[0];\n  const coordinateIndex = getCoordinateIndexForEdgePosition(position);\n\n  for (const vertex of coordinates) {\n    if (!vertex) {\n      continue;\n    }\n    if (!targetVertex) {\n      continue;\n    }\n\n    const vertexValue = vertex[coordinateIndex];\n    const targetValue = targetVertex[coordinateIndex];\n\n    if (vertexValue === undefined || targetValue === undefined) {\n      continue;\n    }\n\n    if (shouldUpdateEdgeVertex(vertexValue, targetValue, position)) {\n      targetVertex = vertex;\n    }\n  }\n\n  return getVertexCoordinate(targetVertex);\n}\n\n/**\n * Get position for Circle geometry (special case of Polygon)\n */\nfunction getCirclePosition(\n  ring: number[][] | undefined,\n  shapeOffset: [number, number] | undefined,\n  shapeVertical: string | undefined,\n  shapeHorizontal: string | undefined,\n  shapeCoordinateAnchor: string | undefined,\n  options?: LabelPositionOptions,\n): LabelPosition2d | null {\n  const defaultOffset: [number, number] = [0, 10];\n  const defaultVertical: LabelVerticalPosition = 'top';\n  const defaultHorizontal: LabelHorizontalPosition = 'center';\n  const defaultCoordinateAnchor: CardinalLabelCoordinateAnchor = 'bottom';\n\n  const resolved = resolveLabelProperties(\n    shapeOffset,\n    shapeVertical,\n    shapeHorizontal,\n    defaultOffset,\n    defaultVertical,\n    defaultHorizontal,\n    options?.circleLabelOffset,\n    options?.circleLabelVerticalAnchor,\n    options?.circleLabelHorizontalAnchor,\n  );\n\n  // Determine coordinate anchor (priority: shape > options > default)\n  const coordinateAnchor = (shapeCoordinateAnchor ??\n    options?.circleLabelCoordinateAnchor ??\n    defaultCoordinateAnchor) as CardinalLabelCoordinateAnchor;\n\n  // Calculate position based on coordinate anchor\n  const coordinates = findEdgePoint(ring, coordinateAnchor);\n\n  if (!coordinates) {\n    return null;\n  }\n\n  return {\n    coordinates,\n    ...resolved,\n  };\n}\n\n/**\n * Get position for Polygon geometry\n * Uses cardinal direction positioning to find the edge point\n */\nfunction getPolygonPosition(\n  geometry: Polygon,\n  shape: Shape,\n  shapeOffset: [number, number] | undefined,\n  shapeVertical: string | undefined,\n  shapeHorizontal: string | undefined,\n  shapeCoordinateAnchor: string | undefined,\n  options?: LabelPositionOptions,\n): LabelPosition2d | null {\n  const ring = geometry.coordinates[0];\n\n  // Circle shapes use circle-specific options\n  if (isCircleShape(shape)) {\n    return getCirclePosition(\n      ring,\n      shapeOffset,\n      shapeVertical,\n      shapeHorizontal,\n      shapeCoordinateAnchor,\n      options,\n    );\n  }\n\n  // Regular polygons use cardinal direction positioning\n  const defaultOffset: [number, number] = [0, 10];\n  const defaultVertical: LabelVerticalPosition = 'top';\n  const defaultHorizontal: LabelHorizontalPosition = 'center';\n  const defaultCoordinateAnchor: CardinalLabelCoordinateAnchor = 'bottom';\n\n  const resolved = resolveLabelProperties(\n    shapeOffset,\n    shapeVertical,\n    shapeHorizontal,\n    defaultOffset,\n    defaultVertical,\n    defaultHorizontal,\n    options?.polygonLabelOffset,\n    options?.polygonLabelVerticalAnchor,\n    options?.polygonLabelHorizontalAnchor,\n  );\n\n  // Determine coordinate anchor (priority: shape > options > default)\n  const coordinateAnchor = (shapeCoordinateAnchor ??\n    options?.polygonLabelCoordinateAnchor ??\n    defaultCoordinateAnchor) as CardinalLabelCoordinateAnchor;\n\n  // Calculate position based on cardinal direction\n  const coordinates = findEdgePoint(ring, coordinateAnchor);\n\n  if (!coordinates) {\n    return null;\n  }\n\n  return {\n    coordinates,\n    ...resolved,\n  };\n}\n\n/**\n * Get 2D position for label based on geometry type\n * Uses pixel-based offsets for consistent positioning at all zoom levels\n *\n * Priority for positioning:\n * 1. Per-shape properties in styleProperties (highest)\n * 2. Global labelOptions from layer props\n * 3. Default values (fallback)\n *\n * Returns null if no valid coordinates can be determined\n */\nexport function getLabelPosition2d(\n  shape: Shape,\n  options?: LabelPositionOptions,\n): LabelPosition2d | null {\n  const { geometry } = shape.feature;\n  const styleProps = shape.feature.properties?.styleProperties;\n\n  // Check if shape has custom label properties\n  const shapeOffset = styleProps?.labelOffset as [number, number] | undefined;\n  const shapeVertical = styleProps?.labelVerticalAnchor;\n  const shapeHorizontal = styleProps?.labelHorizontalAnchor;\n  const shapeCoordinateAnchor = styleProps?.labelCoordinateAnchor;\n\n  switch (geometry.type) {\n    case 'Point':\n      return getPointPosition(\n        geometry,\n        shapeOffset,\n        shapeVertical,\n        shapeHorizontal,\n        options,\n      );\n\n    case 'LineString':\n      return getLineStringPosition(\n        geometry,\n        shapeOffset,\n        shapeVertical,\n        shapeHorizontal,\n        shapeCoordinateAnchor,\n        options,\n      );\n\n    case 'Polygon':\n      return getPolygonPosition(\n        geometry,\n        shape,\n        shapeOffset,\n        shapeVertical,\n        shapeHorizontal,\n        shapeCoordinateAnchor,\n        options,\n      );\n\n    default:\n      // Unknown geometry type - return null\n      return null;\n  }\n}\n\n/**\n * Get label text for a shape\n *\n * Returns the display label for the shape on the map in uppercase.\n * - `label`: Optional short display name shown on the map (e.g., \"NYC\")\n * - `name`: Full shape name used internally (e.g., \"New York City Office\")\n *\n * If `label` is not provided, falls back to using `name`.\n * Text is automatically converted to uppercase for display.\n */\nexport function getLabelText(shape: Shape): string {\n  return (shape.label || shape.name).toUpperCase();\n}\n"],"mappings":"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"}

package/dist/deckgl/shapes/draw-shape-layer/constants.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { ShapeFeatureType } from "../shared/types.js";
+
+//#region src/deckgl/shapes/draw-shape-layer/constants.ts
+/**
+* Mode name for the map-mode integration
+*/
+const DRAW_SHAPE_MODE = "draw-shape";
+/**
+* Identifier for the draw shape layer.
+* Used as the owner for map-mode/cursor and as the default layer ID.
+*/
+const DRAW_SHAPE_LAYER_ID = "draw-shape-layer";
+/**
+* Cursor type to use when drawing shapes
+*/
+const DRAW_CURSOR = "crosshair";
+/**
+* Cursor mapping for each shape type (all use crosshair)
+*/
+const DRAW_CURSOR_MAP = {
+	[ShapeFeatureType.Point]: DRAW_CURSOR,
+	[ShapeFeatureType.LineString]: DRAW_CURSOR,
+	[ShapeFeatureType.Polygon]: DRAW_CURSOR,
+	[ShapeFeatureType.Rectangle]: DRAW_CURSOR,
+	[ShapeFeatureType.Circle]: DRAW_CURSOR,
+	[ShapeFeatureType.Ellipse]: DRAW_CURSOR
+};
+
+//#endregion
+export { DRAW_CURSOR_MAP, DRAW_SHAPE_LAYER_ID, DRAW_SHAPE_MODE };
+//# sourceMappingURL=constants.js.map

package/dist/deckgl/shapes/draw-shape-layer/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["DRAW_CURSOR: CSSCursorType","DRAW_CURSOR_MAP: Record<ShapeFeatureType, CSSCursorType>"],"sources":["../../../../src/deckgl/shapes/draw-shape-layer/constants.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport { ShapeFeatureType } from '../shared/types';\nimport type { CSSCursorType } from '@/map-cursor/types';\n\n/**\n * Mode name for the map-mode integration\n */\nexport const DRAW_SHAPE_MODE = 'draw-shape';\n\n/**\n * Identifier for the draw shape layer.\n * Used as the owner for map-mode/cursor and as the default layer ID.\n */\nexport const DRAW_SHAPE_LAYER_ID = 'draw-shape-layer';\n\n/**\n * Cursor type to use when drawing shapes\n */\nexport const DRAW_CURSOR: CSSCursorType = 'crosshair';\n\n/**\n * Cursor mapping for each shape type (all use crosshair)\n */\nexport const DRAW_CURSOR_MAP: Record<ShapeFeatureType, CSSCursorType> = {\n  [ShapeFeatureType.Point]: DRAW_CURSOR,\n  [ShapeFeatureType.LineString]: DRAW_CURSOR,\n  [ShapeFeatureType.Polygon]: DRAW_CURSOR,\n  [ShapeFeatureType.Rectangle]: DRAW_CURSOR,\n  [ShapeFeatureType.Circle]: DRAW_CURSOR,\n  [ShapeFeatureType.Ellipse]: DRAW_CURSOR,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,kBAAkB;;;;;AAM/B,MAAa,sBAAsB;;;;AAKnC,MAAaA,cAA6B;;;;AAK1C,MAAaC,kBAA2D;EACrE,iBAAiB,QAAQ;EACzB,iBAAiB,aAAa;EAC9B,iBAAiB,UAAU;EAC3B,iBAAiB,YAAY;EAC7B,iBAAiB,SAAS;EAC1B,iBAAiB,UAAU;CAC7B"}

package/dist/deckgl/shapes/draw-shape-layer/events.d.ts

@@ -0,0 +1,92 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { Shape, ShapeFeatureType } from "../shared/types.js";
+import { UniqueId } from "@accelint/core";
+
+//#region src/deckgl/shapes/draw-shape-layer/events.d.ts
+/**
+ * Drawing lifecycle events
+ */
+declare const DrawShapeEvents: {
+  /** Drawing has started for a shape type */
+  readonly drawing: "shapes:drawing";
+  /** Shape has been successfully drawn/created */
+  readonly drawn: "shapes:drawn";
+  /** Drawing was canceled */
+  readonly canceled: "shapes:draw-canceled";
+};
+type DrawShapeEventType = (typeof DrawShapeEvents)[keyof typeof DrawShapeEvents];
+/**
+ * Payload for shapes:drawing event.
+ */
+type ShapeDrawingPayload = {
+  /** The shape type being drawn */
+  shapeType: ShapeFeatureType;
+  /** Map instance ID for multi-map event isolation */
+  mapId: UniqueId;
+};
+/**
+ * Event payload for shapes:drawing
+ * Emitted when drawing starts
+ */
+type ShapeDrawingEvent = {
+  type: 'shapes:drawing';
+  payload: ShapeDrawingPayload;
+  source: UniqueId;
+  target?: UniqueId;
+};
+/**
+ * Payload for shapes:drawn event.
+ */
+type ShapeDrawnPayload = {
+  /** The completed shape */
+  shape: Shape;
+  /** Map instance ID for multi-map event isolation */
+  mapId: UniqueId;
+};
+/**
+ * Event payload for shapes:drawn
+ * Emitted when a shape is successfully created
+ */
+type ShapeDrawnEvent = {
+  type: 'shapes:drawn';
+  payload: ShapeDrawnPayload;
+  source: UniqueId;
+  target?: UniqueId;
+};
+/**
+ * Payload for shapes:draw-canceled event.
+ */
+type ShapeDrawCanceledPayload = {
+  /** The shape type that was being drawn */
+  shapeType: ShapeFeatureType;
+  /** Map instance ID for multi-map event isolation */
+  mapId: UniqueId;
+};
+/**
+ * Event payload for shapes:draw-canceled
+ * Emitted when drawing is canceled
+ */
+type ShapeDrawCanceledEvent = {
+  type: 'shapes:draw-canceled';
+  payload: ShapeDrawCanceledPayload;
+  source: UniqueId;
+  target?: UniqueId;
+};
+/**
+ * Union of all draw shape event types
+ */
+type DrawShapeEvent = ShapeDrawingEvent | ShapeDrawnEvent | ShapeDrawCanceledEvent;
+//#endregion
+export { DrawShapeEvent, DrawShapeEventType, DrawShapeEvents, ShapeDrawCanceledEvent, ShapeDrawCanceledPayload, ShapeDrawingEvent, ShapeDrawingPayload, ShapeDrawnEvent, ShapeDrawnPayload };
+//# sourceMappingURL=events.d.ts.map

package/dist/deckgl/shapes/draw-shape-layer/events.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+//#region src/deckgl/shapes/draw-shape-layer/events.ts
+/**
+* Draw Shape Events
+*
+* Note on event payload structure:
+* These events define explicit payload types rather than using the `Payload<T, P>` helper
+* from @accelint/bus. This is because the `Shape` type contains GeoJSON `Feature` objects
+* from the `geojson` package, which don't satisfy TypeScript's `StructuredCloneable` type
+* constraint used by the bus.
+*
+* The issue: `StructuredCloneable` (from type-fest) requires objects to have an index
+* signature `[key: string]: StructuredCloneable`, but GeoJSON interfaces define strict
+* property types without index signatures. At runtime, GeoJSON data IS structurally
+* cloneable (can be passed through postMessage, stored in IndexedDB, etc.), but
+* TypeScript can't verify this statically.
+*
+* Events that only contain primitive values (like ShapeId, mapId) can use the `Payload`
+* helper directly - see shared/events.ts for examples.
+*
+* When emitting these events via the bus, use type assertions:
+* @example
+* ```ts
+* bus.emit('shapes:drawn', {
+*   type: 'shapes:drawn',
+*   payload: { shape, mapId },
+*   source: componentId,
+* } as unknown as Payload);
+* ```
+*/
+/**
+* Drawing lifecycle events
+*/
+const DrawShapeEvents = {
+	drawing: "shapes:drawing",
+	drawn: "shapes:drawn",
+	canceled: "shapes:draw-canceled"
+};
+
+//#endregion
+export { DrawShapeEvents };
+//# sourceMappingURL=events.js.map

package/dist/deckgl/shapes/draw-shape-layer/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","names":[],"sources":["../../../../src/deckgl/shapes/draw-shape-layer/events.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Draw Shape Events\n *\n * Note on event payload structure:\n * These events define explicit payload types rather than using the `Payload<T, P>` helper\n * from @accelint/bus. This is because the `Shape` type contains GeoJSON `Feature` objects\n * from the `geojson` package, which don't satisfy TypeScript's `StructuredCloneable` type\n * constraint used by the bus.\n *\n * The issue: `StructuredCloneable` (from type-fest) requires objects to have an index\n * signature `[key: string]: StructuredCloneable`, but GeoJSON interfaces define strict\n * property types without index signatures. At runtime, GeoJSON data IS structurally\n * cloneable (can be passed through postMessage, stored in IndexedDB, etc.), but\n * TypeScript can't verify this statically.\n *\n * Events that only contain primitive values (like ShapeId, mapId) can use the `Payload`\n * helper directly - see shared/events.ts for examples.\n *\n * When emitting these events via the bus, use type assertions:\n * @example\n * ```ts\n * bus.emit('shapes:drawn', {\n *   type: 'shapes:drawn',\n *   payload: { shape, mapId },\n *   source: componentId,\n * } as unknown as Payload);\n * ```\n */\n\n'use client';\n\nimport type { UniqueId } from '@accelint/core';\nimport type { Shape, ShapeFeatureType } from '../shared/types';\n\n/**\n * Drawing lifecycle events\n */\nexport const DrawShapeEvents = {\n  /** Drawing has started for a shape type */\n  drawing: 'shapes:drawing',\n  /** Shape has been successfully drawn/created */\n  drawn: 'shapes:drawn',\n  /** Drawing was canceled */\n  canceled: 'shapes:draw-canceled',\n} as const;\n\nexport type DrawShapeEventType =\n  (typeof DrawShapeEvents)[keyof typeof DrawShapeEvents];\n\n/**\n * Payload for shapes:drawing event.\n */\nexport type ShapeDrawingPayload = {\n  /** The shape type being drawn */\n  shapeType: ShapeFeatureType;\n  /** Map instance ID for multi-map event isolation */\n  mapId: UniqueId;\n};\n\n/**\n * Event payload for shapes:drawing\n * Emitted when drawing starts\n */\nexport type ShapeDrawingEvent = {\n  type: 'shapes:drawing';\n  payload: ShapeDrawingPayload;\n  source: UniqueId;\n  target?: UniqueId;\n};\n\n/**\n * Payload for shapes:drawn event.\n */\nexport type ShapeDrawnPayload = {\n  /** The completed shape */\n  shape: Shape;\n  /** Map instance ID for multi-map event isolation */\n  mapId: UniqueId;\n};\n\n/**\n * Event payload for shapes:drawn\n * Emitted when a shape is successfully created\n */\nexport type ShapeDrawnEvent = {\n  type: 'shapes:drawn';\n  payload: ShapeDrawnPayload;\n  source: UniqueId;\n  target?: UniqueId;\n};\n\n/**\n * Payload for shapes:draw-canceled event.\n */\nexport type ShapeDrawCanceledPayload = {\n  /** The shape type that was being drawn */\n  shapeType: ShapeFeatureType;\n  /** Map instance ID for multi-map event isolation */\n  mapId: UniqueId;\n};\n\n/**\n * Event payload for shapes:draw-canceled\n * Emitted when drawing is canceled\n */\nexport type ShapeDrawCanceledEvent = {\n  type: 'shapes:draw-canceled';\n  payload: ShapeDrawCanceledPayload;\n  source: UniqueId;\n  target?: UniqueId;\n};\n\n/**\n * Union of all draw shape event types\n */\nexport type DrawShapeEvent =\n  | ShapeDrawingEvent\n  | ShapeDrawnEvent\n  | ShapeDrawCanceledEvent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,kBAAkB;CAE7B,SAAS;CAET,OAAO;CAEP,UAAU;CACX"}

package/dist/deckgl/shapes/draw-shape-layer/fiber.d.ts

@@ -0,0 +1,11 @@
+//#region src/deckgl/shapes/draw-shape-layer/fiber.d.ts
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        editableGeoJsonLayer: any;
+      }
+    }
+  }
+}
+//# sourceMappingURL=fiber.d.ts.map

package/dist/{maplibre/constants.js → deckgl/shapes/draw-shape-layer/fiber.js}

@@ -11,17 +11,11 @@
  */
 
 
-//#region src/maplibre/constants.ts
-const INITIAL_VIEW_STATE = {
-	longitude: -77.0369,
-	latitude: 38.9072,
-	zoom: 4,
-	minZoom: 1,
-	maxZoom: 22,
-	pitch: 0,
-	bearing: 0
-};
+import { extend } from "@deckgl-fiber-renderer/dom";
+import { EditableGeoJsonLayer } from "@deck.gl-community/editable-layers";
+
+//#region src/deckgl/shapes/draw-shape-layer/fiber.ts
+extend({ EditableGeoJsonLayer });
 
 //#endregion
-export { INITIAL_VIEW_STATE };
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=fiber.js.map

package/dist/deckgl/shapes/draw-shape-layer/fiber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fiber.js","names":[],"sources":["../../../../src/deckgl/shapes/draw-shape-layer/fiber.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { EditableGeoJsonLayer } from '@deck.gl-community/editable-layers';\nimport { extend } from '@deckgl-fiber-renderer/dom';\n\n// Extend the fiber renderer with EditableGeoJsonLayer\nextend({ EditableGeoJsonLayer });\n\n// Note: DrawShapeLayer is a React component, not a deck.gl layer class,\n// so it doesn't need fiber registration. It uses <editableGeoJsonLayer>\n// internally which is registered above.\n\ndeclare global {\n  namespace React {\n    // biome-ignore lint/style/useNamingConvention: Built-in React namespace.\n    namespace JSX {\n      interface IntrinsicElements {\n        // biome-ignore lint/suspicious/noExplicitAny: EditableGeoJsonLayer props are complex and vary by mode\n        editableGeoJsonLayer: any;\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,OAAO,EAAE,sBAAsB,CAAC"}

package/dist/deckgl/shapes/draw-shape-layer/index.d.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { DrawShapeLayerProps } from "./types.js";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/deckgl/shapes/draw-shape-layer/index.d.ts
+
+/**
+ * DrawShapeLayer - A React component for drawing shapes on the map.
+ *
+ * This component wraps the EditableGeoJsonLayer from @deck.gl-community/editable-layers
+ * and integrates with the map-mode and map-cursor systems for proper coordination.
+ *
+ * Key features:
+ * - Renders only when actively drawing (returns null otherwise)
+ * - Uses cached mode instances to prevent deck.gl assertion errors
+ * - Integrates with the drawing store for state management
+ * - Protected drawing mode (rejects mode change requests while drawing)
+ * - Distance/area tooltips during drawing
+ *
+ * @example
+ * ```tsx
+ * // Import the fiber registration for JSX support
+ * import '@accelint/map-toolkit/deckgl/shapes/draw-shape-layer/fiber';
+ *
+ * function Map({ mapId }) {
+ *   return (
+ *     <BaseMap id={mapId}>
+ *       <displayShapeLayer data={shapes} mapId={mapId} />
+ *       <DrawShapeLayer mapId={mapId} />
+ *     </BaseMap>
+ *   );
+ * }
+ * ```
+ */
+declare function DrawShapeLayer({
+  id,
+  mapId,
+  unit
+}: DrawShapeLayerProps): react_jsx_runtime2.JSX.Element | null;
+//#endregion
+export { DrawShapeLayer };
+//# sourceMappingURL=index.d.ts.map

package/dist/deckgl/shapes/draw-shape-layer/index.js

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { MapContext } from "../../base-map/provider.js";
+import { DEFAULT_TENTATIVE_COLORS, EMPTY_FEATURE_COLLECTION } from "../shared/constants.js";
+import { useShiftZoomDisable } from "../shared/hooks/use-shift-zoom-disable.js";
+import { getDefaultEditableLayerProps } from "../shared/utils/layer-config.js";
+import { DRAW_SHAPE_LAYER_ID } from "./constants.js";
+import { getModeInstance, triggerDoubleClickFinish } from "./modes/index.js";
+import { cancelDrawingFromLayer, completeDrawingFromLayer, drawStore } from "./store.js";
+import { useContext, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/deckgl/shapes/draw-shape-layer/index.tsx
+/**
+* DrawShapeLayer - A React component for drawing shapes on the map.
+*
+* This component wraps the EditableGeoJsonLayer from @deck.gl-community/editable-layers
+* and integrates with the map-mode and map-cursor systems for proper coordination.
+*
+* Key features:
+* - Renders only when actively drawing (returns null otherwise)
+* - Uses cached mode instances to prevent deck.gl assertion errors
+* - Integrates with the drawing store for state management
+* - Protected drawing mode (rejects mode change requests while drawing)
+* - Distance/area tooltips during drawing
+*
+* @example
+* ```tsx
+* // Import the fiber registration for JSX support
+* import '@accelint/map-toolkit/deckgl/shapes/draw-shape-layer/fiber';
+*
+* function Map({ mapId }) {
+*   return (
+*     <BaseMap id={mapId}>
+*       <displayShapeLayer data={shapes} mapId={mapId} />
+*       <DrawShapeLayer mapId={mapId} />
+*     </BaseMap>
+*   );
+* }
+* ```
+*/
+function DrawShapeLayer({ id = DRAW_SHAPE_LAYER_ID, mapId, unit }) {
+	const contextId = useContext(MapContext);
+	const actualMapId = mapId ?? contextId;
+	if (!actualMapId) throw new Error("DrawShapeLayer requires either a mapId prop or to be used within a MapProvider");
+	const { state: drawingState } = drawStore.use(actualMapId);
+	const activeShapeType = drawingState?.activeShapeType ?? null;
+	useShiftZoomDisable(actualMapId, activeShapeType === "Rectangle");
+	useEffect(() => {
+		if (!activeShapeType) return;
+		const handleDblClick = () => {
+			triggerDoubleClickFinish(activeShapeType);
+		};
+		document.addEventListener("dblclick", handleDblClick);
+		return () => {
+			document.removeEventListener("dblclick", handleDblClick);
+		};
+	}, [activeShapeType]);
+	if (!activeShapeType) return null;
+	const styleDefaults = drawingState?.styleDefaults ?? null;
+	const mode = getModeInstance(activeShapeType);
+	const handleEdit = ({ updatedData, editType }) => {
+		if (editType === "addFeature") {
+			const feature = updatedData.features[updatedData.features.length - 1];
+			if (feature) completeDrawingFromLayer(actualMapId, feature);
+		} else if (editType === "cancelFeature") cancelDrawingFromLayer(actualMapId);
+	};
+	return /* @__PURE__ */ jsx("editableGeoJsonLayer", {
+		id,
+		data: EMPTY_FEATURE_COLLECTION,
+		mode,
+		selectedFeatureIndexes: [],
+		onEdit: handleEdit,
+		getTentativeFillColor: styleDefaults?.fillColor ?? DEFAULT_TENTATIVE_COLORS.fill,
+		getTentativeLineColor: styleDefaults?.lineColor ?? DEFAULT_TENTATIVE_COLORS.line,
+		...getDefaultEditableLayerProps(unit)
+	});
+}
+
+//#endregion
+export { DrawShapeLayer };
+//# sourceMappingURL=index.js.map

package/dist/deckgl/shapes/draw-shape-layer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/deckgl/shapes/draw-shape-layer/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport { useContext, useEffect } from 'react';\nimport { MapContext } from '../../base-map/provider';\nimport {\n  DEFAULT_TENTATIVE_COLORS,\n  EMPTY_FEATURE_COLLECTION,\n} from '../shared/constants';\nimport { useShiftZoomDisable } from '../shared/hooks/use-shift-zoom-disable';\nimport { getDefaultEditableLayerProps } from '../shared/utils/layer-config';\nimport { DRAW_SHAPE_LAYER_ID } from './constants';\nimport { getModeInstance, triggerDoubleClickFinish } from './modes';\nimport {\n  cancelDrawingFromLayer,\n  completeDrawingFromLayer,\n  drawStore,\n} from './store';\nimport type {\n  EditAction,\n  FeatureCollection,\n} from '@deck.gl-community/editable-layers';\nimport type { DrawShapeLayerProps } from './types';\n\n/**\n * DrawShapeLayer - A React component for drawing shapes on the map.\n *\n * This component wraps the EditableGeoJsonLayer from @deck.gl-community/editable-layers\n * and integrates with the map-mode and map-cursor systems for proper coordination.\n *\n * Key features:\n * - Renders only when actively drawing (returns null otherwise)\n * - Uses cached mode instances to prevent deck.gl assertion errors\n * - Integrates with the drawing store for state management\n * - Protected drawing mode (rejects mode change requests while drawing)\n * - Distance/area tooltips during drawing\n *\n * @example\n * ```tsx\n * // Import the fiber registration for JSX support\n * import '@accelint/map-toolkit/deckgl/shapes/draw-shape-layer/fiber';\n *\n * function Map({ mapId }) {\n *   return (\n *     <BaseMap id={mapId}>\n *       <displayShapeLayer data={shapes} mapId={mapId} />\n *       <DrawShapeLayer mapId={mapId} />\n *     </BaseMap>\n *   );\n * }\n * ```\n */\nexport function DrawShapeLayer({\n  id = DRAW_SHAPE_LAYER_ID,\n  mapId,\n  unit,\n}: DrawShapeLayerProps) {\n  // Get mapId from context if not provided\n  const contextId = useContext(MapContext);\n  const actualMapId = mapId ?? contextId;\n\n  if (!actualMapId) {\n    throw new Error(\n      'DrawShapeLayer requires either a mapId prop or to be used within a MapProvider',\n    );\n  }\n\n  // Subscribe to drawing state using the v2 store API\n  const { state: drawingState } = drawStore.use(actualMapId);\n\n  const activeShapeType = drawingState?.activeShapeType ?? null;\n\n  // Disable zoom while Shift is held during rectangle drawing\n  // This prevents boxZoom (Shift+drag) from interfering with Shift-to-square constraint\n  useShiftZoomDisable(actualMapId, activeShapeType === 'Rectangle');\n\n  // Set up dblclick listener as workaround for deck.gl-community/editable-layers ~9.1\n  // which doesn't register 'dblclick' in EVENT_TYPES\n  // @see https://github.com/visgl/deck.gl-community/pull/225\n  // TODO: Remove this workaround when @deck.gl-community/editable-layers 9.2.0 is released\n  useEffect(() => {\n    if (!activeShapeType) {\n      return;\n    }\n\n    const handleDblClick = () => {\n      triggerDoubleClickFinish(activeShapeType);\n    };\n\n    // Add listener to document to catch dblclick anywhere on the map\n    document.addEventListener('dblclick', handleDblClick);\n\n    return () => {\n      document.removeEventListener('dblclick', handleDblClick);\n    };\n  }, [activeShapeType]);\n\n  // If not drawing, return null (don't render the editable layer)\n  if (!activeShapeType) {\n    return null;\n  }\n\n  const styleDefaults = drawingState?.styleDefaults ?? null;\n\n  // Get the cached mode instance\n  const mode = getModeInstance(activeShapeType);\n\n  // Handle edit events from EditableGeoJsonLayer\n  const handleEdit = ({\n    updatedData,\n    editType,\n  }: EditAction<FeatureCollection>) => {\n    // Only process addFeature (drawing complete) and cancelFeature (ESC pressed)\n    if (editType === 'addFeature') {\n      const feature = updatedData.features[updatedData.features.length - 1];\n      if (feature) {\n        // Type assertion: editable-layers Feature type differs slightly from geojson Feature\n        // but they are structurally compatible for our conversion purposes\n        completeDrawingFromLayer(\n          actualMapId,\n          feature as Parameters<typeof completeDrawingFromLayer>[1],\n        );\n      }\n    } else if (editType === 'cancelFeature') {\n      cancelDrawingFromLayer(actualMapId);\n    }\n    // Ignore other edit types during drawing (tentative updates, etc.)\n  };\n\n  // Get colors from style defaults or use tentative defaults\n  const fillColor = styleDefaults?.fillColor ?? DEFAULT_TENTATIVE_COLORS.fill;\n  const lineColor = styleDefaults?.lineColor ?? DEFAULT_TENTATIVE_COLORS.line;\n\n  return (\n    <editableGeoJsonLayer\n      id={id}\n      data={EMPTY_FEATURE_COLLECTION}\n      mode={mode}\n      selectedFeatureIndexes={[]}\n      onEdit={handleEdit}\n      getTentativeFillColor={fillColor}\n      getTentativeLineColor={lineColor}\n      {...getDefaultEditableLayerProps(unit)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,SAAgB,eAAe,EAC7B,KAAK,qBACL,OACA,QACsB;CAEtB,MAAM,YAAY,WAAW,WAAW;CACxC,MAAM,cAAc,SAAS;AAE7B,KAAI,CAAC,YACH,OAAM,IAAI,MACR,iFACD;CAIH,MAAM,EAAE,OAAO,iBAAiB,UAAU,IAAI,YAAY;CAE1D,MAAM,kBAAkB,cAAc,mBAAmB;AAIzD,qBAAoB,aAAa,oBAAoB,YAAY;AAMjE,iBAAgB;AACd,MAAI,CAAC,gBACH;EAGF,MAAM,uBAAuB;AAC3B,4BAAyB,gBAAgB;;AAI3C,WAAS,iBAAiB,YAAY,eAAe;AAErD,eAAa;AACX,YAAS,oBAAoB,YAAY,eAAe;;IAEzD,CAAC,gBAAgB,CAAC;AAGrB,KAAI,CAAC,gBACH,QAAO;CAGT,MAAM,gBAAgB,cAAc,iBAAiB;CAGrD,MAAM,OAAO,gBAAgB,gBAAgB;CAG7C,MAAM,cAAc,EAClB,aACA,eACmC;AAEnC,MAAI,aAAa,cAAc;GAC7B,MAAM,UAAU,YAAY,SAAS,YAAY,SAAS,SAAS;AACnE,OAAI,QAGF,0BACE,aACA,QACD;aAEM,aAAa,gBACtB,wBAAuB,YAAY;;AASvC,QACE,oBAAC;EACK;EACJ,MAAM;EACA;EACN,wBAAwB,EAAE;EAC1B,QAAQ;EACR,uBAVc,eAAe,aAAa,yBAAyB;EAWnE,uBAVc,eAAe,aAAa,yBAAyB;EAWnE,GAAI,6BAA6B,KAAK;GACtC"}

package/dist/deckgl/shapes/draw-shape-layer/modes/draw-circle-mode-with-tooltip.js

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { formatCircleTooltip } from "../../shared/constants.js";
+import { DEFAULT_DISTANCE_UNITS, getDistanceUnitAbbreviation } from "../../../../shared/units.js";
+import { computeCircleMeasurements } from "../../shared/utils/geometry-measurements.js";
+import { DrawCircleFromCenterMode } from "@deck.gl-community/editable-layers";
+
+//#region src/deckgl/shapes/draw-shape-layer/modes/draw-circle-mode-with-tooltip.ts
+/**
+* Extends DrawCircleFromCenterMode to display diameter and area tooltip.
+*
+* Shows the diameter and area of the circle being drawn based on the radius
+* from center point to cursor position.
+*/
+var DrawCircleModeWithTooltip = class extends DrawCircleFromCenterMode {
+	tooltip = null;
+	handlePointerMove(event, props) {
+		super.handlePointerMove(event, props);
+		const clickSequence = this.getClickSequence();
+		if (!clickSequence.length) {
+			this.tooltip = null;
+			return;
+		}
+		const { mapCoords } = event;
+		const distanceUnits = props.modeConfig?.distanceUnits ?? DEFAULT_DISTANCE_UNITS;
+		const centerPoint = clickSequence[clickSequence.length - 1];
+		const { diameter, area } = computeCircleMeasurements(centerPoint, mapCoords, distanceUnits);
+		this.tooltip = {
+			position: mapCoords,
+			text: formatCircleTooltip(diameter, area, getDistanceUnitAbbreviation(distanceUnits))
+		};
+	}
+	getTooltips() {
+		return this.tooltip ? [this.tooltip] : [];
+	}
+};
+
+//#endregion
+export { DrawCircleModeWithTooltip };
+//# sourceMappingURL=draw-circle-mode-with-tooltip.js.map

package/dist/deckgl/shapes/draw-shape-layer/modes/draw-circle-mode-with-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw-circle-mode-with-tooltip.js","names":[],"sources":["../../../../../src/deckgl/shapes/draw-shape-layer/modes/draw-circle-mode-with-tooltip.ts"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  DrawCircleFromCenterMode,\n  type FeatureCollection,\n  type ModeProps,\n  type PointerMoveEvent,\n  type Tooltip,\n} from '@deck.gl-community/editable-layers';\nimport {\n  DEFAULT_DISTANCE_UNITS,\n  getDistanceUnitAbbreviation,\n} from '@/shared/units';\nimport { formatCircleTooltip } from '../../shared/constants';\nimport { computeCircleMeasurements } from '../../shared/utils/geometry-measurements';\n\n/**\n * Extends DrawCircleFromCenterMode to display diameter and area tooltip.\n *\n * Shows the diameter and area of the circle being drawn based on the radius\n * from center point to cursor position.\n */\nexport class DrawCircleModeWithTooltip extends DrawCircleFromCenterMode {\n  private tooltip: Tooltip | null = null;\n\n  override handlePointerMove(\n    event: PointerMoveEvent,\n    props: ModeProps<FeatureCollection>,\n  ) {\n    super.handlePointerMove(event, props);\n\n    const clickSequence = this.getClickSequence();\n    if (!clickSequence.length) {\n      this.tooltip = null;\n      return;\n    }\n\n    const { mapCoords } = event;\n    const distanceUnits =\n      props.modeConfig?.distanceUnits ?? DEFAULT_DISTANCE_UNITS;\n\n    const centerPoint = clickSequence[clickSequence.length - 1] as [\n      number,\n      number,\n    ];\n    const edgePoint = mapCoords as [number, number];\n\n    const { diameter, area } = computeCircleMeasurements(\n      centerPoint,\n      edgePoint,\n      distanceUnits,\n    );\n    const unitAbbrev = getDistanceUnitAbbreviation(distanceUnits);\n\n    this.tooltip = {\n      position: mapCoords,\n      text: formatCircleTooltip(diameter, area, unitAbbrev),\n    };\n  }\n\n  override getTooltips(): Tooltip[] {\n    return this.tooltip ? [this.tooltip] : [];\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,4BAAb,cAA+C,yBAAyB;CACtE,AAAQ,UAA0B;CAElC,AAAS,kBACP,OACA,OACA;AACA,QAAM,kBAAkB,OAAO,MAAM;EAErC,MAAM,gBAAgB,KAAK,kBAAkB;AAC7C,MAAI,CAAC,cAAc,QAAQ;AACzB,QAAK,UAAU;AACf;;EAGF,MAAM,EAAE,cAAc;EACtB,MAAM,gBACJ,MAAM,YAAY,iBAAiB;EAErC,MAAM,cAAc,cAAc,cAAc,SAAS;EAMzD,MAAM,EAAE,UAAU,SAAS,0BACzB,aAHgB,WAKhB,cACD;AAGD,OAAK,UAAU;GACb,UAAU;GACV,MAAM,oBAAoB,UAAU,MAJnB,4BAA4B,cAAc,CAIN;GACtD;;CAGH,AAAS,cAAyB;AAChC,SAAO,KAAK,UAAU,CAAC,KAAK,QAAQ,GAAG,EAAE"}