@accelint/map-toolkit 0.5.0 → 1.0.0

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/{node_modules/.pnpm/@math.gl_web-mercator@4.1.0/node_modules/@math.gl/web-mercator/dist/get-bounds.js → deckgl/shapes/draw-shape-layer/fiber.js}

@@ -11,10 +11,11 @@
  */
 
 
-import "./web-mercator-utils.js";
+import { extend } from "@deckgl-fiber-renderer/dom";
+import { EditableGeoJsonLayer } from "@deck.gl-community/editable-layers";
 
-//#region ../../node_modules/.pnpm/@math.gl+web-mercator@4.1.0/node_modules/@math.gl/web-mercator/dist/get-bounds.js
-const DEGREES_TO_RADIANS = Math.PI / 180;
+//#region src/deckgl/shapes/draw-shape-layer/fiber.ts
+extend({ EditableGeoJsonLayer });
 
 //#endregion
-//# sourceMappingURL=get-bounds.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"}

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

@@ -0,0 +1,73 @@
+/*
+ * 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 { formatDistanceTooltip, formatEllipseTooltip } from "../../shared/constants.js";
+import { DEFAULT_DISTANCE_UNITS, getDistanceUnitAbbreviation } from "../../../../shared/units.js";
+import { DrawEllipseUsingThreePointsMode } from "@deck.gl-community/editable-layers";
+import { distance } from "@turf/turf";
+
+//#region src/deckgl/shapes/draw-shape-layer/modes/draw-ellipse-mode-with-tooltip.ts
+/**
+* Extends DrawEllipseUsingThreePointsMode to display contextual tooltips.
+*
+* Drawing process (3 clicks):
+* 1. First click: Sets the first endpoint of the major axis
+* 2. Second click: Sets the second endpoint of the major axis
+*    - While moving to second click, shows distance tooltip (like line/polygon)
+* 3. Third click: Sets the minor axis radius
+*    - While moving to third click, shows area tooltip (like circle)
+*
+* The ellipse center is the midpoint between the first two clicks.
+* The Y semi-axis is half the distance between clicks 1 and 2.
+* The X semi-axis is the distance from center to click 3.
+*/
+var DrawEllipseModeWithTooltip = class extends DrawEllipseUsingThreePointsMode {
+	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 unitAbbrev = getDistanceUnitAbbreviation(distanceUnits);
+		const tooltipPosition = mapCoords;
+		if (clickSequence.length === 1) {
+			const firstPoint = clickSequence[0];
+			this.tooltip = {
+				position: tooltipPosition,
+				text: formatDistanceTooltip(distance(firstPoint, mapCoords, { units: distanceUnits }), unitAbbrev)
+			};
+		} else if (clickSequence.length === 2) {
+			const click1 = clickSequence[0];
+			const click2 = clickSequence[1];
+			const cursorPos = mapCoords;
+			const center = [(click1[0] + click2[0]) / 2, (click1[1] + click2[1]) / 2];
+			const ySemiAxis = distance(click1, click2, { units: distanceUnits }) / 2;
+			const xSemiAxis = distance(center, cursorPos, { units: distanceUnits });
+			this.tooltip = {
+				position: tooltipPosition,
+				text: formatEllipseTooltip(Math.max(xSemiAxis, ySemiAxis) * 2, Math.min(xSemiAxis, ySemiAxis) * 2, Math.PI * xSemiAxis * ySemiAxis, unitAbbrev)
+			};
+		}
+	}
+	getTooltips() {
+		return this.tooltip ? [this.tooltip] : [];
+	}
+};
+
+//#endregion
+export { DrawEllipseModeWithTooltip };
+//# sourceMappingURL=draw-ellipse-mode-with-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"draw-ellipse-mode-with-tooltip.js","names":["center: [number, number]"],"sources":["../../../../../src/deckgl/shapes/draw-shape-layer/modes/draw-ellipse-mode-with-tooltip.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 {\n  DrawEllipseUsingThreePointsMode,\n  type FeatureCollection,\n  type ModeProps,\n  type PointerMoveEvent,\n  type Tooltip,\n} from '@deck.gl-community/editable-layers';\nimport { type Coord, distance } from '@turf/turf';\nimport {\n  DEFAULT_DISTANCE_UNITS,\n  getDistanceUnitAbbreviation,\n} from '@/shared/units';\nimport {\n  formatDistanceTooltip,\n  formatEllipseTooltip,\n} from '../../shared/constants';\n\n/**\n * Extends DrawEllipseUsingThreePointsMode to display contextual tooltips.\n *\n * Drawing process (3 clicks):\n * 1. First click: Sets the first endpoint of the major axis\n * 2. Second click: Sets the second endpoint of the major axis\n *    - While moving to second click, shows distance tooltip (like line/polygon)\n * 3. Third click: Sets the minor axis radius\n *    - While moving to third click, shows area tooltip (like circle)\n *\n * The ellipse center is the midpoint between the first two clicks.\n * The Y semi-axis is half the distance between clicks 1 and 2.\n * The X semi-axis is the distance from center to click 3.\n */\nexport class DrawEllipseModeWithTooltip extends DrawEllipseUsingThreePointsMode {\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    const unitAbbrev = getDistanceUnitAbbreviation(distanceUnits);\n    const tooltipPosition = mapCoords;\n\n    if (clickSequence.length === 1) {\n      // First segment: show distance from first click to cursor (like line/polygon)\n      const firstPoint = clickSequence[0] as Coord;\n      const currentPoint = mapCoords as Coord;\n\n      const dist = distance(firstPoint, currentPoint, { units: distanceUnits });\n\n      this.tooltip = {\n        position: tooltipPosition,\n        text: formatDistanceTooltip(dist, unitAbbrev),\n      };\n    } else if (clickSequence.length === 2) {\n      // Second segment: show dimensions and area (like rectangle)\n      // The ellipse will have:\n      // - center at midpoint of click1 and click2\n      // - ySemiAxis = distance(click1, click2) / 2\n      // - xSemiAxis = distance(center, cursor)\n      const click1 = clickSequence[0] as [number, number];\n      const click2 = clickSequence[1] as [number, number];\n      const cursorPos = mapCoords as [number, number];\n\n      // Calculate center (midpoint)\n      const center: [number, number] = [\n        (click1[0] + click2[0]) / 2,\n        (click1[1] + click2[1]) / 2,\n      ];\n\n      // Calculate semi-axes\n      const ySemiAxis = distance(click1, click2, { units: distanceUnits }) / 2;\n      const xSemiAxis = distance(center, cursorPos, { units: distanceUnits });\n\n      // Full axes (diameter equivalent)\n      const majorAxis = Math.max(xSemiAxis, ySemiAxis) * 2;\n      const minorAxis = Math.min(xSemiAxis, ySemiAxis) * 2;\n\n      // Ellipse area = π × a × b\n      const ellipseArea = Math.PI * xSemiAxis * ySemiAxis;\n\n      this.tooltip = {\n        position: tooltipPosition,\n        text: formatEllipseTooltip(\n          majorAxis,\n          minorAxis,\n          ellipseArea,\n          unitAbbrev,\n        ),\n      };\n    }\n  }\n\n  override getTooltips(): Tooltip[] {\n    return this.tooltip ? [this.tooltip] : [];\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,IAAa,6BAAb,cAAgD,gCAAgC;CAC9E,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;EACrC,MAAM,aAAa,4BAA4B,cAAc;EAC7D,MAAM,kBAAkB;AAExB,MAAI,cAAc,WAAW,GAAG;GAE9B,MAAM,aAAa,cAAc;AAKjC,QAAK,UAAU;IACb,UAAU;IACV,MAAM,sBAJK,SAAS,YAFD,WAE2B,EAAE,OAAO,eAAe,CAAC,EAIrC,WAAW;IAC9C;aACQ,cAAc,WAAW,GAAG;GAMrC,MAAM,SAAS,cAAc;GAC7B,MAAM,SAAS,cAAc;GAC7B,MAAM,YAAY;GAGlB,MAAMA,SAA2B,EAC9B,OAAO,KAAK,OAAO,MAAM,IACzB,OAAO,KAAK,OAAO,MAAM,EAC3B;GAGD,MAAM,YAAY,SAAS,QAAQ,QAAQ,EAAE,OAAO,eAAe,CAAC,GAAG;GACvE,MAAM,YAAY,SAAS,QAAQ,WAAW,EAAE,OAAO,eAAe,CAAC;AASvE,QAAK,UAAU;IACb,UAAU;IACV,MAAM,qBARU,KAAK,IAAI,WAAW,UAAU,GAAG,GACjC,KAAK,IAAI,WAAW,UAAU,GAAG,GAG/B,KAAK,KAAK,YAAY,WAQtC,WACD;IACF;;;CAIL,AAAS,cAAyB;AAChC,SAAO,KAAK,UAAU,CAAC,KAAK,QAAQ,GAAG,EAAE"}

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

@@ -0,0 +1,87 @@
+/*
+ * 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 { formatDistanceTooltip } from "../../shared/constants.js";
+import { DEFAULT_DISTANCE_UNITS, getDistanceUnitAbbreviation } from "../../../../shared/units.js";
+import { DrawLineStringMode } from "@deck.gl-community/editable-layers";
+import { distance } from "@turf/turf";
+
+//#region src/deckgl/shapes/draw-shape-layer/modes/draw-line-string-mode-with-tooltip.ts
+/**
+* Extends DrawLineStringMode to display distance tooltip between points.
+*
+* Shows the distance from the last clicked point to the current cursor position
+* while drawing a line string.
+*
+* Includes a workaround for the double-click to finish issue in @deck.gl-community/editable-layers ~9.1.
+* This will be fixed in a future version (PR #225).
+*/
+var DrawLineStringModeWithTooltip = class extends DrawLineStringMode {
+	tooltip = null;
+	lastModeProps = null;
+	/**
+	* Finish drawing the line string.
+	* Extracted to share between double-click workaround and parent class logic.
+	*/
+	finishDrawing(props) {
+		const clickSequence = this.getClickSequence();
+		if (clickSequence.length <= 1) return;
+		const lineStringToAdd = {
+			type: "LineString",
+			coordinates: [...clickSequence]
+		};
+		this.resetClickSequence();
+		this.tooltip = null;
+		this.lastModeProps = null;
+		const editAction = this.getAddFeatureAction(lineStringToAdd, props.data);
+		if (editAction) props.onEdit(editAction);
+	}
+	/**
+	* Handle double-click to finish drawing.
+	* This is called externally via a DOM event listener as a workaround for
+	* @deck.gl-community/editable-layers ~9.1 which doesn't register 'dblclick' in EVENT_TYPES.
+	* @see https://github.com/visgl/deck.gl-community/pull/225
+	*/
+	handleDoubleClick() {
+		if (this.lastModeProps) this.finishDrawing(this.lastModeProps);
+	}
+	/**
+	* Override handleClick to store props for double-click workaround.
+	*/
+	handleClick(event, props) {
+		this.lastModeProps = props;
+		super.handleClick(event, props);
+	}
+	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 lastPoint = clickSequence[clickSequence.length - 1];
+		this.tooltip = {
+			position: mapCoords,
+			text: formatDistanceTooltip(distance(lastPoint, mapCoords, { units: distanceUnits }), getDistanceUnitAbbreviation(distanceUnits))
+		};
+	}
+	getTooltips() {
+		return this.tooltip ? [this.tooltip] : [];
+	}
+};
+
+//#endregion
+export { DrawLineStringModeWithTooltip };
+//# sourceMappingURL=draw-line-string-mode-with-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"draw-line-string-mode-with-tooltip.js","names":[],"sources":["../../../../../src/deckgl/shapes/draw-shape-layer/modes/draw-line-string-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  type ClickEvent,\n  DrawLineStringMode,\n  type FeatureCollection,\n  type ModeProps,\n  type PointerMoveEvent,\n  type Tooltip,\n} from '@deck.gl-community/editable-layers';\nimport { type Coord, distance } from '@turf/turf';\nimport {\n  DEFAULT_DISTANCE_UNITS,\n  getDistanceUnitAbbreviation,\n} from '@/shared/units';\nimport { formatDistanceTooltip } from '../../shared/constants';\n\n/**\n * Extends DrawLineStringMode to display distance tooltip between points.\n *\n * Shows the distance from the last clicked point to the current cursor position\n * while drawing a line string.\n *\n * Includes a workaround for the double-click to finish issue in @deck.gl-community/editable-layers ~9.1.\n * This will be fixed in a future version (PR #225).\n */\nexport class DrawLineStringModeWithTooltip extends DrawLineStringMode {\n  private tooltip: Tooltip | null = null;\n  private lastModeProps: ModeProps<FeatureCollection> | null = null;\n\n  /**\n   * Finish drawing the line string.\n   * Extracted to share between double-click workaround and parent class logic.\n   */\n  private finishDrawing(props: ModeProps<FeatureCollection>): void {\n    const clickSequence = this.getClickSequence();\n    if (clickSequence.length <= 1) {\n      return;\n    }\n\n    const lineStringToAdd = {\n      type: 'LineString' as const,\n      coordinates: [...clickSequence],\n    };\n\n    this.resetClickSequence();\n    this.tooltip = null;\n    this.lastModeProps = null;\n\n    const editAction = this.getAddFeatureAction(lineStringToAdd, props.data);\n    if (editAction) {\n      props.onEdit(editAction);\n    }\n  }\n\n  /**\n   * Handle double-click to finish drawing.\n   * This is called externally via a DOM event listener as a workaround for\n   * @deck.gl-community/editable-layers ~9.1 which doesn't register 'dblclick' in EVENT_TYPES.\n   * @see https://github.com/visgl/deck.gl-community/pull/225\n   */\n  handleDoubleClick(): void {\n    if (this.lastModeProps) {\n      this.finishDrawing(this.lastModeProps);\n    }\n  }\n\n  /**\n   * Override handleClick to store props for double-click workaround.\n   */\n  override handleClick(\n    event: ClickEvent,\n    props: ModeProps<FeatureCollection>,\n  ): void {\n    // Store props so handleDoubleClick can access them\n    this.lastModeProps = props;\n    super.handleClick(event, props);\n  }\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 lastPoint = clickSequence[clickSequence.length - 1] as Coord;\n    const currentPoint = mapCoords as Coord;\n\n    const dist = distance(lastPoint, currentPoint, { units: distanceUnits });\n    const unitAbbrev = getDistanceUnitAbbreviation(distanceUnits);\n\n    this.tooltip = {\n      position: mapCoords,\n      text: formatDistanceTooltip(dist, unitAbbrev),\n    };\n  }\n\n  override getTooltips(): Tooltip[] {\n    return this.tooltip ? [this.tooltip] : [];\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAa,gCAAb,cAAmD,mBAAmB;CACpE,AAAQ,UAA0B;CAClC,AAAQ,gBAAqD;;;;;CAM7D,AAAQ,cAAc,OAA2C;EAC/D,MAAM,gBAAgB,KAAK,kBAAkB;AAC7C,MAAI,cAAc,UAAU,EAC1B;EAGF,MAAM,kBAAkB;GACtB,MAAM;GACN,aAAa,CAAC,GAAG,cAAc;GAChC;AAED,OAAK,oBAAoB;AACzB,OAAK,UAAU;AACf,OAAK,gBAAgB;EAErB,MAAM,aAAa,KAAK,oBAAoB,iBAAiB,MAAM,KAAK;AACxE,MAAI,WACF,OAAM,OAAO,WAAW;;;;;;;;CAU5B,oBAA0B;AACxB,MAAI,KAAK,cACP,MAAK,cAAc,KAAK,cAAc;;;;;CAO1C,AAAS,YACP,OACA,OACM;AAEN,OAAK,gBAAgB;AACrB,QAAM,YAAY,OAAO,MAAM;;CAGjC,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,YAAY,cAAc,cAAc,SAAS;AAMvD,OAAK,UAAU;GACb,UAAU;GACV,MAAM,sBALK,SAAS,WAFD,WAE0B,EAAE,OAAO,eAAe,CAAC,EACrD,4BAA4B,cAAc,CAId;GAC9C;;CAGH,AAAS,cAAyB;AAChC,SAAO,KAAK,UAAU,CAAC,KAAK,QAAQ,GAAG,EAAE"}

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

@@ -0,0 +1,88 @@
+/*
+ * 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 { formatDistanceTooltip } from "../../shared/constants.js";
+import { DEFAULT_DISTANCE_UNITS, getDistanceUnitAbbreviation } from "../../../../shared/units.js";
+import { DrawPolygonMode } from "@deck.gl-community/editable-layers";
+import { distance } from "@turf/turf";
+
+//#region src/deckgl/shapes/draw-shape-layer/modes/draw-polygon-mode-with-tooltip.ts
+/**
+* Extends DrawPolygonMode to display distance tooltip between points.
+*
+* Shows the distance from the last clicked point to the current cursor position
+* while drawing a polygon.
+*
+* Includes a workaround for the double-click to finish issue in @deck.gl-community/editable-layers ~9.1.
+* This will be fixed in a future version (PR #225).
+*/
+var DrawPolygonModeWithTooltip = class extends DrawPolygonMode {
+	tooltip = null;
+	lastModeProps = null;
+	/**
+	* Finish drawing the polygon.
+	* Extracted to share between double-click workaround and parent class logic.
+	*/
+	finishDrawing(props) {
+		const clickSequence = this.getClickSequence();
+		const firstPoint = clickSequence[0];
+		if (clickSequence.length <= 2 || !firstPoint) return;
+		const polygonToAdd = {
+			type: "Polygon",
+			coordinates: [[...clickSequence, firstPoint]]
+		};
+		this.resetClickSequence();
+		this.tooltip = null;
+		this.lastModeProps = null;
+		const editAction = this.getAddFeatureOrBooleanPolygonAction(polygonToAdd, props);
+		if (editAction) props.onEdit(editAction);
+	}
+	/**
+	* Handle double-click to finish drawing.
+	* This is called externally via a DOM event listener as a workaround for
+	* @deck.gl-community/editable-layers ~9.1 which doesn't register 'dblclick' in EVENT_TYPES.
+	* @see https://github.com/visgl/deck.gl-community/pull/225
+	*/
+	handleDoubleClick() {
+		if (this.lastModeProps) this.finishDrawing(this.lastModeProps);
+	}
+	/**
+	* Override handleClick to store props for double-click workaround.
+	*/
+	handleClick(event, props) {
+		this.lastModeProps = props;
+		super.handleClick(event, props);
+	}
+	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 lastPoint = clickSequence[clickSequence.length - 1];
+		this.tooltip = {
+			position: mapCoords,
+			text: formatDistanceTooltip(distance(lastPoint, mapCoords, { units: distanceUnits }), getDistanceUnitAbbreviation(distanceUnits))
+		};
+	}
+	getTooltips() {
+		return this.tooltip ? [this.tooltip] : [];
+	}
+};
+
+//#endregion
+export { DrawPolygonModeWithTooltip };
+//# sourceMappingURL=draw-polygon-mode-with-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"draw-polygon-mode-with-tooltip.js","names":[],"sources":["../../../../../src/deckgl/shapes/draw-shape-layer/modes/draw-polygon-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  type ClickEvent,\n  DrawPolygonMode,\n  type FeatureCollection,\n  type ModeProps,\n  type PointerMoveEvent,\n  type Tooltip,\n} from '@deck.gl-community/editable-layers';\nimport { type Coord, distance } from '@turf/turf';\nimport {\n  DEFAULT_DISTANCE_UNITS,\n  getDistanceUnitAbbreviation,\n} from '@/shared/units';\nimport { formatDistanceTooltip } from '../../shared/constants';\n\n/**\n * Extends DrawPolygonMode to display distance tooltip between points.\n *\n * Shows the distance from the last clicked point to the current cursor position\n * while drawing a polygon.\n *\n * Includes a workaround for the double-click to finish issue in @deck.gl-community/editable-layers ~9.1.\n * This will be fixed in a future version (PR #225).\n */\nexport class DrawPolygonModeWithTooltip extends DrawPolygonMode {\n  private tooltip: Tooltip | null = null;\n  private lastModeProps: ModeProps<FeatureCollection> | null = null;\n\n  /**\n   * Finish drawing the polygon.\n   * Extracted to share between double-click workaround and parent class logic.\n   */\n  private finishDrawing(props: ModeProps<FeatureCollection>): void {\n    const clickSequence = this.getClickSequence();\n    const firstPoint = clickSequence[0];\n    if (clickSequence.length <= 2 || !firstPoint) {\n      return;\n    }\n\n    const polygonToAdd = {\n      type: 'Polygon' as const,\n      coordinates: [[...clickSequence, firstPoint]],\n    };\n\n    this.resetClickSequence();\n    this.tooltip = null;\n    this.lastModeProps = null;\n\n    const editAction = this.getAddFeatureOrBooleanPolygonAction(\n      polygonToAdd,\n      props,\n    );\n    if (editAction) {\n      props.onEdit(editAction);\n    }\n  }\n\n  /**\n   * Handle double-click to finish drawing.\n   * This is called externally via a DOM event listener as a workaround for\n   * @deck.gl-community/editable-layers ~9.1 which doesn't register 'dblclick' in EVENT_TYPES.\n   * @see https://github.com/visgl/deck.gl-community/pull/225\n   */\n  handleDoubleClick(): void {\n    if (this.lastModeProps) {\n      this.finishDrawing(this.lastModeProps);\n    }\n  }\n\n  /**\n   * Override handleClick to store props for double-click workaround.\n   */\n  override handleClick(\n    event: ClickEvent,\n    props: ModeProps<FeatureCollection>,\n  ): void {\n    // Store props so handleDoubleClick can access them\n    this.lastModeProps = props;\n    super.handleClick(event, props);\n  }\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 lastPoint = clickSequence[clickSequence.length - 1] as Coord;\n    const currentPoint = mapCoords as Coord;\n\n    const dist = distance(lastPoint, currentPoint, { units: distanceUnits });\n    const unitAbbrev = getDistanceUnitAbbreviation(distanceUnits);\n\n    this.tooltip = {\n      position: mapCoords,\n      text: formatDistanceTooltip(dist, unitAbbrev),\n    };\n  }\n\n  override getTooltips(): Tooltip[] {\n    return this.tooltip ? [this.tooltip] : [];\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAa,6BAAb,cAAgD,gBAAgB;CAC9D,AAAQ,UAA0B;CAClC,AAAQ,gBAAqD;;;;;CAM7D,AAAQ,cAAc,OAA2C;EAC/D,MAAM,gBAAgB,KAAK,kBAAkB;EAC7C,MAAM,aAAa,cAAc;AACjC,MAAI,cAAc,UAAU,KAAK,CAAC,WAChC;EAGF,MAAM,eAAe;GACnB,MAAM;GACN,aAAa,CAAC,CAAC,GAAG,eAAe,WAAW,CAAC;GAC9C;AAED,OAAK,oBAAoB;AACzB,OAAK,UAAU;AACf,OAAK,gBAAgB;EAErB,MAAM,aAAa,KAAK,oCACtB,cACA,MACD;AACD,MAAI,WACF,OAAM,OAAO,WAAW;;;;;;;;CAU5B,oBAA0B;AACxB,MAAI,KAAK,cACP,MAAK,cAAc,KAAK,cAAc;;;;;CAO1C,AAAS,YACP,OACA,OACM;AAEN,OAAK,gBAAgB;AACrB,QAAM,YAAY,OAAO,MAAM;;CAGjC,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,YAAY,cAAc,cAAc,SAAS;AAMvD,OAAK,UAAU;GACb,UAAU;GACV,MAAM,sBALK,SAAS,WAFD,WAE0B,EAAE,OAAO,eAAe,CAAC,EACrD,4BAA4B,cAAc,CAId;GAC9C;;CAGH,AAAS,cAAyB;AAChC,SAAO,KAAK,UAAU,CAAC,KAAK,QAAQ,GAAG,EAAE"}