@accelint/map-toolkit 1.3.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -0
- package/catalog-info.yaml +3 -3
- package/dist/camera/store.js +1 -1
- package/dist/camera/store.js.map +1 -1
- package/dist/cursor-coordinates/use-cursor-coordinates.js.map +1 -1
- package/dist/deckgl/base-map/index.d.ts +2 -2
- package/dist/deckgl/base-map/index.js +24 -7
- package/dist/deckgl/base-map/index.js.map +1 -1
- package/dist/deckgl/base-map/provider.d.ts +2 -2
- package/dist/deckgl/base-map/provider.js +2 -4
- package/dist/deckgl/base-map/provider.js.map +1 -1
- package/dist/deckgl/index.js +3 -3
- package/dist/deckgl/shapes/display-shape-layer/index.js +1 -1
- package/dist/deckgl/shapes/display-shape-layer/store.js +7 -1
- package/dist/deckgl/shapes/display-shape-layer/store.js.map +1 -1
- package/dist/deckgl/shapes/draw-shape-layer/index.d.ts +2 -2
- package/dist/deckgl/shapes/draw-shape-layer/index.js +3 -3
- package/dist/deckgl/shapes/draw-shape-layer/modes/draw-circle-mode-with-tooltip.js +7 -7
- package/dist/deckgl/shapes/draw-shape-layer/modes/draw-circle-mode-with-tooltip.js.map +1 -1
- package/dist/deckgl/shapes/draw-shape-layer/modes/draw-ellipse-mode-with-tooltip.js +2 -2
- package/dist/deckgl/shapes/draw-shape-layer/modes/draw-line-string-mode-with-tooltip.js +2 -2
- package/dist/deckgl/shapes/draw-shape-layer/modes/draw-polygon-mode-with-tooltip.js +2 -2
- package/dist/deckgl/shapes/draw-shape-layer/modes/draw-rectangle-mode-with-tooltip.js +2 -2
- package/dist/deckgl/shapes/draw-shape-layer/store.js +37 -3
- package/dist/deckgl/shapes/draw-shape-layer/store.js.map +1 -1
- package/dist/deckgl/shapes/draw-shape-layer/use-draw-shape.js +1 -1
- package/dist/deckgl/shapes/draw-shape-layer/utils/feature-conversion.js +1 -1
- package/dist/deckgl/shapes/edit-shape-layer/constants.js +2 -1
- package/dist/deckgl/shapes/edit-shape-layer/constants.js.map +1 -1
- package/dist/deckgl/shapes/edit-shape-layer/index.d.ts +2 -2
- package/dist/deckgl/shapes/edit-shape-layer/index.js +30 -12
- package/dist/deckgl/shapes/edit-shape-layer/index.js.map +1 -1
- package/dist/deckgl/shapes/edit-shape-layer/modes/bounding-transform-mode.js +1 -1
- package/dist/deckgl/shapes/edit-shape-layer/modes/circle-transform-mode.js +6 -6
- package/dist/deckgl/shapes/edit-shape-layer/modes/circle-transform-mode.js.map +1 -1
- package/dist/deckgl/shapes/edit-shape-layer/modes/index.js +10 -4
- package/dist/deckgl/shapes/edit-shape-layer/modes/index.js.map +1 -1
- package/dist/deckgl/shapes/edit-shape-layer/modes/point-translate-mode.js +129 -0
- package/dist/deckgl/shapes/edit-shape-layer/modes/point-translate-mode.js.map +1 -0
- package/dist/deckgl/shapes/edit-shape-layer/modes/rotate-mode-with-snap.js +1 -1
- package/dist/deckgl/shapes/edit-shape-layer/store.js +19 -4
- package/dist/deckgl/shapes/edit-shape-layer/store.js.map +1 -1
- package/dist/deckgl/shapes/edit-shape-layer/types.d.ts +4 -3
- package/dist/deckgl/shapes/edit-shape-layer/use-edit-shape.js +1 -1
- package/dist/deckgl/shapes/index.js +4 -4
- package/dist/deckgl/shapes/shared/constants.js +5 -5
- package/dist/deckgl/shapes/shared/constants.js.map +1 -1
- package/dist/deckgl/shapes/shared/utils/layer-config.js +1 -1
- package/dist/hotkey-manager/dist/react/use-hotkey.js +39 -0
- package/dist/hotkey-manager/dist/react/use-hotkey.js.map +1 -0
- package/dist/shared/cleanup.d.ts +58 -0
- package/dist/shared/cleanup.js +93 -0
- package/dist/shared/cleanup.js.map +1 -0
- package/dist/shared/create-map-store.d.ts +12 -0
- package/dist/shared/create-map-store.js +8 -3
- package/dist/shared/create-map-store.js.map +1 -1
- package/dist/viewport/viewport-size.d.ts +2 -2
- package/package.json +10 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
# @accelint/map-toolkit
|
|
2
2
|
|
|
3
|
+
## 1.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- cae932c: Update circle tooltip to show radius instead of diameter in draw and edit modes.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 9419d41: Fix infinite render loop in BaseMap when navigating in React Strict Mode. The camera store's `createMapStore` now properly handles initial state timing by directly updating existing instances when `setInitialState` is called after the instance already exists, which can occur during React Strict Mode's double-mount behavior.
|
|
12
|
+
- Updated dependencies [ed09ea6]
|
|
13
|
+
- @accelint/logger@1.0.0
|
|
14
|
+
|
|
15
|
+
## 1.4.0
|
|
16
|
+
|
|
17
|
+
### Minor Changes
|
|
18
|
+
|
|
19
|
+
- 89914b0: Add Enter key hotkey to save shape edits. Pressing Enter while editing a shape now saves the changes and emits the existing `shapes:updated` event, providing an alternative to clicking the Save button.
|
|
20
|
+
- 7503e7e: Add click-to-place editing for Point shapes in EditShapeLayer.
|
|
21
|
+
|
|
22
|
+
Point shapes now use a new `point-translate` edit mode that supports two ways to reposition:
|
|
23
|
+
- **Click anywhere on the map** to instantly move the point to that location
|
|
24
|
+
- **Drag the point directly** for traditional drag behavior
|
|
25
|
+
|
|
26
|
+
This improves UX for points which previously required precise clicking on a very small target area.
|
|
27
|
+
|
|
28
|
+
### Patch Changes
|
|
29
|
+
|
|
30
|
+
- 6cb6e17: Enable antialiasing for maplibre to smooth out lines
|
|
31
|
+
- Updated dependencies [58bc0db]
|
|
32
|
+
- @accelint/geo@0.6.0
|
|
33
|
+
|
|
3
34
|
## 1.3.0
|
|
4
35
|
|
|
5
36
|
### Minor Changes
|
package/catalog-info.yaml
CHANGED
|
@@ -12,14 +12,14 @@ metadata:
|
|
|
12
12
|
Dependencies:
|
|
13
13
|
|
|
14
14
|
accelint_biome-config@1.1.0, accelint_bus@3.0.2, accelint_core@0.5.2,
|
|
15
|
-
accelint_design-foundation@
|
|
16
|
-
accelint_geo@0.
|
|
15
|
+
accelint_design-foundation@3.0.0, accelint_design-toolkit@9.7.0,
|
|
16
|
+
accelint_geo@0.6.0, accelint_logger@1.0.0,
|
|
17
17
|
accelint_postcss-tailwind-css-modules@1.0.1, accelint_smeegl@0.3.5,
|
|
18
18
|
accelint_typescript-config@0.1.4, accelint_vitest-config@0.1.6
|
|
19
19
|
annotations:
|
|
20
20
|
backstage.io/edit-url: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/map-toolkit/catalog-info.yaml
|
|
21
21
|
backstage.io/techdocs-ref: dir:.
|
|
22
|
-
package/version: 1.
|
|
22
|
+
package/version: 1.5.0
|
|
23
23
|
github.com/project-slug: gohypergiant/standard-toolkit
|
|
24
24
|
links:
|
|
25
25
|
- url: https://github.com/gohypergiant/standard-toolkit/tree/main/packages/map-toolkit
|
package/dist/camera/store.js
CHANGED
|
@@ -289,7 +289,7 @@ function initializeCameraState(mapId, initialState) {
|
|
|
289
289
|
initializedInstances.add(mapId);
|
|
290
290
|
if (initialState) initialStateCache.set(mapId, initialState);
|
|
291
291
|
const builtState = buildCameraState(initialState);
|
|
292
|
-
cameraStore.
|
|
292
|
+
cameraStore.setInitialState(mapId, builtState);
|
|
293
293
|
}
|
|
294
294
|
/**
|
|
295
295
|
* Hook to subscribe to camera state changes for a specific map.
|
package/dist/camera/store.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"store.js","names":["DEFAULT_CAMERA_STATE: CameraState"],"sources":["../../src/camera/store.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\n/**\n * Camera Store\n *\n * Manages camera state (position, zoom, pitch, rotation, projection, view) per map instance.\n * State is updated via bus events or direct actions.\n *\n * @example\n * ```tsx\n * import { cameraStore } from '@accelint/map-toolkit/camera';\n *\n * function MapInfo({ mapId }) {\n * const { state } = cameraStore.use(mapId);\n * return (\n * <div>\n * Lat: {state.latitude.toFixed(2)}, Lon: {state.longitude.toFixed(2)}\n * </div>\n * );\n * }\n * ```\n */\n\nimport { Broadcast } from '@accelint/bus';\nimport { fitBounds } from '@math.gl/web-mercator';\nimport { createMapStore } from '../shared/create-map-store';\nimport { CameraEventTypes } from './events';\nimport type { UniqueId } from '@accelint/core';\nimport type { CameraEvent, ProjectionType, ViewType } from './types';\n\nconst cameraBus = Broadcast.getInstance<CameraEvent>();\n\n/**\n * Camera state for 2D view\n */\ntype CameraState2D = {\n latitude: number;\n longitude: number;\n zoom: number;\n pitch: 0;\n rotation: number;\n projection: 'mercator';\n view: '2D';\n};\n\n/**\n * Camera state for 3D view\n */\ntype CameraState3D = {\n latitude: number;\n longitude: number;\n zoom: number;\n pitch: 0;\n rotation: number;\n projection: 'globe';\n view: '3D';\n};\n\n/**\n * Camera state for 2.5D view\n */\ntype CameraState2Point5D = {\n latitude: number;\n longitude: number;\n zoom: number;\n pitch: number;\n rotation: number;\n projection: 'mercator';\n view: '2.5D';\n};\n\n/**\n * Union type for all camera states\n */\nexport type CameraState = CameraState2D | CameraState3D | CameraState2Point5D;\n\n/**\n * Actions for camera management\n */\ntype CameraActions = {\n /** Update camera state directly */\n setCameraState: (state: Partial<CameraState>) => void;\n};\n\n/**\n * Storage for initial camera state per instance.\n * Used for reset operations to restore to initial values.\n *\n * @internal These caches live outside the store factory because reset operations\n * need access to the original initial values. They are cleaned up via `onCleanup`\n * hook when the store instance is destroyed, and via `clearCameraState()` for\n * manual cleanup. Do NOT use `cameraStore.clear()` directly in tests - use\n * `clearCameraState()` instead to ensure proper cleanup.\n */\nconst initialStateCache = new Map<UniqueId, CameraStateInput>();\n\n/**\n * Track which instances have been initialized.\n * @internal See note on initialStateCache about cleanup.\n */\nconst initializedInstances = new Set<UniqueId>();\n\n/**\n * Input type for building camera state - simpler than union type\n */\ntype CameraStateInput = {\n latitude?: number;\n longitude?: number;\n zoom?: number;\n pitch?: number;\n rotation?: number;\n projection?: ProjectionType;\n view?: ViewType;\n};\n\n/**\n * Build a complete camera state from partial input.\n * Returns the appropriate discriminated union variant based on view/projection.\n *\n * This function ensures type-safe camera states by constructing the correct\n * discriminated union variant (2D, 2.5D, or 3D) based on view and projection\n * settings, applying appropriate defaults and constraints.\n *\n * @param partial - Optional partial camera state input\n * @returns Complete camera state matching one of the discriminated union variants\n *\n * @example\n * ```typescript\n * // Build 2D state (default)\n * const state2D = buildCameraState({\n * latitude: 40.7128,\n * longitude: -74.0060,\n * zoom: 10,\n * });\n * // Result: { ..., view: '2D', projection: 'mercator', pitch: 0 }\n *\n * // Build 2.5D state\n * const state2Point5D = buildCameraState({\n * latitude: 37.7749,\n * longitude: -122.4194,\n * zoom: 12,\n * view: '2.5D',\n * });\n * // Result: { ..., view: '2.5D', projection: 'mercator', pitch: 45 }\n *\n * // Build 3D state\n * const state3D = buildCameraState({\n * view: '3D',\n * zoom: 2,\n * });\n * // Result: { ..., view: '3D', projection: 'globe', pitch: 0, rotation: 0 }\n * ```\n */\nfunction buildCameraState(partial?: CameraStateInput): CameraState {\n const latitude = partial?.latitude ?? 0;\n const longitude = partial?.longitude ?? 0;\n const zoom = partial?.zoom ?? 0;\n const rotation = partial?.rotation ?? 0;\n\n // Determine which variant to build based on view/projection\n const is3D = partial?.view === '3D' || partial?.projection === 'globe';\n const is2Point5D = partial?.view === '2.5D';\n\n if (is3D) {\n // 3D view: globe projection, no pitch, no rotation\n return {\n latitude,\n longitude,\n zoom,\n pitch: 0,\n rotation: 0,\n projection: 'globe',\n view: '3D',\n } satisfies CameraState3D;\n }\n\n if (is2Point5D) {\n // 2.5D view: mercator projection, variable pitch\n return {\n latitude,\n longitude,\n zoom,\n pitch: partial?.pitch ?? 45,\n rotation,\n projection: 'mercator',\n view: '2.5D',\n } satisfies CameraState2Point5D;\n }\n\n // Default: 2D view, mercator projection, no pitch\n return {\n latitude,\n longitude,\n zoom,\n pitch: 0,\n rotation,\n projection: 'mercator',\n view: '2D',\n } satisfies CameraState2D;\n}\n\n/**\n * Default camera state\n */\nconst DEFAULT_CAMERA_STATE: CameraState = {\n latitude: 0,\n longitude: 0,\n zoom: 0,\n pitch: 0,\n rotation: 0,\n projection: 'mercator',\n view: '2D',\n};\n\n/**\n * Camera store instance\n */\nexport const cameraStore = createMapStore<CameraState, CameraActions>({\n defaultState: DEFAULT_CAMERA_STATE,\n\n actions: (_mapId, { get, replace }) => ({\n setCameraState: (updates: Partial<CameraState>) => {\n const currentState = get();\n // Use buildCameraState to ensure proper discriminated union type\n replace(buildCameraState({ ...currentState, ...updates }));\n },\n }),\n\n bus: (mapId, { get, replace }) => {\n const unsubReset = cameraBus.on(CameraEventTypes.reset, ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n const initialState = initialStateCache.get(mapId);\n const newState = buildCameraState({\n latitude: state.latitude,\n longitude: state.longitude,\n projection: state.projection,\n view: state.view,\n zoom: payload.zoom === false ? state.zoom : (initialState?.zoom ?? 0),\n pitch:\n payload.pitch === false ? state.pitch : (initialState?.pitch ?? 0),\n rotation:\n payload.rotation === false\n ? state.rotation\n : (initialState?.rotation ?? 0),\n });\n\n replace(newState);\n });\n\n const unsubSetCenter = cameraBus.on(\n CameraEventTypes.setCenter,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n replace(\n buildCameraState({\n ...state,\n latitude: payload.latitude,\n longitude: payload.longitude,\n zoom: payload.zoom ?? state.zoom,\n rotation: payload.heading ?? state.rotation,\n pitch: payload.pitch ?? state.pitch,\n }),\n );\n },\n );\n\n const unsubFitBounds = cameraBus.on(\n CameraEventTypes.fitBounds,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n const { longitude, latitude, zoom } = fitBounds({\n width: payload.width,\n height: payload.height,\n bounds: [\n [payload.bounds[0], payload.bounds[1]],\n [payload.bounds[2], payload.bounds[3]],\n ],\n padding: payload.padding,\n });\n\n replace(\n buildCameraState({\n ...state,\n latitude,\n longitude,\n zoom,\n rotation: payload.heading ?? state.rotation,\n pitch: payload.pitch ?? state.pitch,\n }),\n );\n },\n );\n\n const unsubSetProjection = cameraBus.on(\n CameraEventTypes.setProjection,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n const newState = { ...state };\n newState.projection = payload.projection;\n if (payload.projection === 'globe') {\n newState.view = '3D';\n } else {\n newState.view = '2D';\n newState.pitch = 0;\n }\n replace(newState);\n },\n );\n\n const unsubSetView = cameraBus.on(\n CameraEventTypes.setView,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n const newState = { ...state };\n newState.view = payload.view;\n if (payload.view === '3D') {\n newState.projection = 'globe';\n newState.pitch = 0;\n } else {\n newState.projection = 'mercator';\n }\n\n if (payload.view === '2.5D') {\n newState.pitch = 45;\n }\n replace(newState);\n },\n );\n\n const unsubSetZoom = cameraBus.on(\n CameraEventTypes.setZoom,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n replace({ ...state, zoom: payload.zoom });\n },\n );\n\n const unsubSetRotation = cameraBus.on(\n CameraEventTypes.setRotation,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n if (state.view !== '3D') {\n replace({ ...state, rotation: payload.rotation });\n }\n },\n );\n\n const unsubSetPitch = cameraBus.on(\n CameraEventTypes.setPitch,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n if (state.view === '2.5D') {\n replace({ ...state, pitch: payload.pitch });\n }\n },\n );\n\n return () => {\n unsubReset();\n unsubSetCenter();\n unsubFitBounds();\n unsubSetProjection();\n unsubSetView();\n unsubSetZoom();\n unsubSetRotation();\n unsubSetPitch();\n };\n },\n\n onCleanup: (mapId) => {\n initializedInstances.delete(mapId);\n initialStateCache.delete(mapId);\n },\n});\n\n// =============================================================================\n// Convenience exports\n// =============================================================================\n\n/**\n * Initialize camera state for a map instance with optional initial values.\n * Should be called before using the camera store for a given mapId.\n *\n * @param mapId - Unique identifier for the map instance\n * @param initialState - Optional initial camera state\n * @returns void\n *\n * @example\n * ```typescript\n * import { uuid } from '@accelint/core';\n * import { initializeCameraState } from '@accelint/map-toolkit/camera';\n *\n * const mapId = uuid();\n *\n * // Initialize with default state\n * initializeCameraState(mapId);\n *\n * // Initialize with custom state\n * initializeCameraState(mapId, {\n * latitude: 37.7749,\n * longitude: -122.4194,\n * zoom: 10,\n * view: '2.5D',\n * pitch: 45,\n * });\n * ```\n */\nexport function initializeCameraState(\n mapId: UniqueId,\n initialState?: CameraStateInput,\n): void {\n if (initializedInstances.has(mapId)) {\n return; // Already initialized\n }\n\n initializedInstances.add(mapId);\n if (initialState) {\n initialStateCache.set(mapId, initialState);\n }\n const builtState = buildCameraState(initialState);\n cameraStore.set(mapId, builtState);\n}\n\n/**\n * Hook to subscribe to camera state changes for a specific map.\n *\n * @param mapId - Unique identifier for the map instance\n * @param initialCameraState - Optional initial camera state (only used on first call)\n * @returns Camera state and setCameraState action\n *\n * @example\n * ```tsx\n * function MapInfo({ mapId }) {\n * const { cameraState, setCameraState } = useMapCamera(mapId);\n * return (\n * <div>\n * Lat: {cameraState.latitude.toFixed(2)}, Lon: {cameraState.longitude.toFixed(2)}\n * </div>\n * );\n * }\n * ```\n */\nexport function useMapCamera(\n mapId: UniqueId,\n initialCameraState?: CameraStateInput,\n): {\n cameraState: CameraState;\n setCameraState: (state: Partial<CameraState>) => void;\n} {\n // Initialize on first use if initial state provided\n if (initialCameraState && !initializedInstances.has(mapId)) {\n initializeCameraState(mapId, initialCameraState);\n }\n\n const { state, setCameraState } = cameraStore.use(mapId);\n\n return { cameraState: state, setCameraState };\n}\n\n/**\n * Manually clear camera state for a specific map instance.\n *\n * Removes all cached state including initial values and subscription tracking.\n * Useful for cleanup when dynamically destroying map instances.\n *\n * @param mapId - The unique identifier for the map instance to clear\n * @returns void\n *\n * @example\n * ```typescript\n * import { clearCameraState } from '@accelint/map-toolkit/camera';\n *\n * // Clean up when removing a map\n * function removeMap(mapId: UniqueId) {\n * clearCameraState(mapId);\n * // ... remove map component\n * }\n * ```\n *\n * @example\n * ```typescript\n * import { clearCameraState } from '@accelint/map-toolkit/camera';\n * import { afterEach } from 'vitest';\n *\n * // Clean up in tests\n * afterEach(() => {\n * clearCameraState('test-map-id');\n * });\n * ```\n */\nexport function clearCameraState(mapId: UniqueId): void {\n initializedInstances.delete(mapId);\n initialStateCache.delete(mapId);\n cameraStore.clear(mapId);\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"store.js","names":["DEFAULT_CAMERA_STATE: CameraState"],"sources":["../../src/camera/store.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\n/**\n * Camera Store\n *\n * Manages camera state (position, zoom, pitch, rotation, projection, view) per map instance.\n * State is updated via bus events or direct actions.\n *\n * @example\n * ```tsx\n * import { cameraStore } from '@accelint/map-toolkit/camera';\n *\n * function MapInfo({ mapId }) {\n * const { state } = cameraStore.use(mapId);\n * return (\n * <div>\n * Lat: {state.latitude.toFixed(2)}, Lon: {state.longitude.toFixed(2)}\n * </div>\n * );\n * }\n * ```\n */\n\nimport { Broadcast } from '@accelint/bus';\nimport { fitBounds } from '@math.gl/web-mercator';\nimport { createMapStore } from '../shared/create-map-store';\nimport { CameraEventTypes } from './events';\nimport type { UniqueId } from '@accelint/core';\nimport type { CameraEvent, ProjectionType, ViewType } from './types';\n\nconst cameraBus = Broadcast.getInstance<CameraEvent>();\n\n/**\n * Camera state for 2D view\n */\ntype CameraState2D = {\n latitude: number;\n longitude: number;\n zoom: number;\n pitch: 0;\n rotation: number;\n projection: 'mercator';\n view: '2D';\n};\n\n/**\n * Camera state for 3D view\n */\ntype CameraState3D = {\n latitude: number;\n longitude: number;\n zoom: number;\n pitch: 0;\n rotation: number;\n projection: 'globe';\n view: '3D';\n};\n\n/**\n * Camera state for 2.5D view\n */\ntype CameraState2Point5D = {\n latitude: number;\n longitude: number;\n zoom: number;\n pitch: number;\n rotation: number;\n projection: 'mercator';\n view: '2.5D';\n};\n\n/**\n * Union type for all camera states\n */\nexport type CameraState = CameraState2D | CameraState3D | CameraState2Point5D;\n\n/**\n * Actions for camera management\n */\ntype CameraActions = {\n /** Update camera state directly */\n setCameraState: (state: Partial<CameraState>) => void;\n};\n\n/**\n * Storage for initial camera state per instance.\n * Used for reset operations to restore to initial values.\n *\n * @internal These caches live outside the store factory because reset operations\n * need access to the original initial values. They are cleaned up via `onCleanup`\n * hook when the store instance is destroyed, and via `clearCameraState()` for\n * manual cleanup. Do NOT use `cameraStore.clear()` directly in tests - use\n * `clearCameraState()` instead to ensure proper cleanup.\n */\nconst initialStateCache = new Map<UniqueId, CameraStateInput>();\n\n/**\n * Track which instances have been initialized.\n * @internal See note on initialStateCache about cleanup.\n */\nconst initializedInstances = new Set<UniqueId>();\n\n/**\n * Input type for building camera state - simpler than union type\n */\ntype CameraStateInput = {\n latitude?: number;\n longitude?: number;\n zoom?: number;\n pitch?: number;\n rotation?: number;\n projection?: ProjectionType;\n view?: ViewType;\n};\n\n/**\n * Build a complete camera state from partial input.\n * Returns the appropriate discriminated union variant based on view/projection.\n *\n * This function ensures type-safe camera states by constructing the correct\n * discriminated union variant (2D, 2.5D, or 3D) based on view and projection\n * settings, applying appropriate defaults and constraints.\n *\n * @param partial - Optional partial camera state input\n * @returns Complete camera state matching one of the discriminated union variants\n *\n * @example\n * ```typescript\n * // Build 2D state (default)\n * const state2D = buildCameraState({\n * latitude: 40.7128,\n * longitude: -74.0060,\n * zoom: 10,\n * });\n * // Result: { ..., view: '2D', projection: 'mercator', pitch: 0 }\n *\n * // Build 2.5D state\n * const state2Point5D = buildCameraState({\n * latitude: 37.7749,\n * longitude: -122.4194,\n * zoom: 12,\n * view: '2.5D',\n * });\n * // Result: { ..., view: '2.5D', projection: 'mercator', pitch: 45 }\n *\n * // Build 3D state\n * const state3D = buildCameraState({\n * view: '3D',\n * zoom: 2,\n * });\n * // Result: { ..., view: '3D', projection: 'globe', pitch: 0, rotation: 0 }\n * ```\n */\nfunction buildCameraState(partial?: CameraStateInput): CameraState {\n const latitude = partial?.latitude ?? 0;\n const longitude = partial?.longitude ?? 0;\n const zoom = partial?.zoom ?? 0;\n const rotation = partial?.rotation ?? 0;\n\n // Determine which variant to build based on view/projection\n const is3D = partial?.view === '3D' || partial?.projection === 'globe';\n const is2Point5D = partial?.view === '2.5D';\n\n if (is3D) {\n // 3D view: globe projection, no pitch, no rotation\n return {\n latitude,\n longitude,\n zoom,\n pitch: 0,\n rotation: 0,\n projection: 'globe',\n view: '3D',\n } satisfies CameraState3D;\n }\n\n if (is2Point5D) {\n // 2.5D view: mercator projection, variable pitch\n return {\n latitude,\n longitude,\n zoom,\n pitch: partial?.pitch ?? 45,\n rotation,\n projection: 'mercator',\n view: '2.5D',\n } satisfies CameraState2Point5D;\n }\n\n // Default: 2D view, mercator projection, no pitch\n return {\n latitude,\n longitude,\n zoom,\n pitch: 0,\n rotation,\n projection: 'mercator',\n view: '2D',\n } satisfies CameraState2D;\n}\n\n/**\n * Default camera state\n */\nconst DEFAULT_CAMERA_STATE: CameraState = {\n latitude: 0,\n longitude: 0,\n zoom: 0,\n pitch: 0,\n rotation: 0,\n projection: 'mercator',\n view: '2D',\n};\n\n/**\n * Camera store instance\n */\nexport const cameraStore = createMapStore<CameraState, CameraActions>({\n defaultState: DEFAULT_CAMERA_STATE,\n\n actions: (_mapId, { get, replace }) => ({\n setCameraState: (updates: Partial<CameraState>) => {\n const currentState = get();\n // Use buildCameraState to ensure proper discriminated union type\n replace(buildCameraState({ ...currentState, ...updates }));\n },\n }),\n\n bus: (mapId, { get, replace }) => {\n const unsubReset = cameraBus.on(CameraEventTypes.reset, ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n const initialState = initialStateCache.get(mapId);\n const newState = buildCameraState({\n latitude: state.latitude,\n longitude: state.longitude,\n projection: state.projection,\n view: state.view,\n zoom: payload.zoom === false ? state.zoom : (initialState?.zoom ?? 0),\n pitch:\n payload.pitch === false ? state.pitch : (initialState?.pitch ?? 0),\n rotation:\n payload.rotation === false\n ? state.rotation\n : (initialState?.rotation ?? 0),\n });\n\n replace(newState);\n });\n\n const unsubSetCenter = cameraBus.on(\n CameraEventTypes.setCenter,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n replace(\n buildCameraState({\n ...state,\n latitude: payload.latitude,\n longitude: payload.longitude,\n zoom: payload.zoom ?? state.zoom,\n rotation: payload.heading ?? state.rotation,\n pitch: payload.pitch ?? state.pitch,\n }),\n );\n },\n );\n\n const unsubFitBounds = cameraBus.on(\n CameraEventTypes.fitBounds,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n const { longitude, latitude, zoom } = fitBounds({\n width: payload.width,\n height: payload.height,\n bounds: [\n [payload.bounds[0], payload.bounds[1]],\n [payload.bounds[2], payload.bounds[3]],\n ],\n padding: payload.padding,\n });\n\n replace(\n buildCameraState({\n ...state,\n latitude,\n longitude,\n zoom,\n rotation: payload.heading ?? state.rotation,\n pitch: payload.pitch ?? state.pitch,\n }),\n );\n },\n );\n\n const unsubSetProjection = cameraBus.on(\n CameraEventTypes.setProjection,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n const newState = { ...state };\n newState.projection = payload.projection;\n if (payload.projection === 'globe') {\n newState.view = '3D';\n } else {\n newState.view = '2D';\n newState.pitch = 0;\n }\n replace(newState);\n },\n );\n\n const unsubSetView = cameraBus.on(\n CameraEventTypes.setView,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n const newState = { ...state };\n newState.view = payload.view;\n if (payload.view === '3D') {\n newState.projection = 'globe';\n newState.pitch = 0;\n } else {\n newState.projection = 'mercator';\n }\n\n if (payload.view === '2.5D') {\n newState.pitch = 45;\n }\n replace(newState);\n },\n );\n\n const unsubSetZoom = cameraBus.on(\n CameraEventTypes.setZoom,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n replace({ ...state, zoom: payload.zoom });\n },\n );\n\n const unsubSetRotation = cameraBus.on(\n CameraEventTypes.setRotation,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n if (state.view !== '3D') {\n replace({ ...state, rotation: payload.rotation });\n }\n },\n );\n\n const unsubSetPitch = cameraBus.on(\n CameraEventTypes.setPitch,\n ({ payload }) => {\n if (payload.id !== mapId) {\n return;\n }\n\n const state = get();\n if (state.view === '2.5D') {\n replace({ ...state, pitch: payload.pitch });\n }\n },\n );\n\n return () => {\n unsubReset();\n unsubSetCenter();\n unsubFitBounds();\n unsubSetProjection();\n unsubSetView();\n unsubSetZoom();\n unsubSetRotation();\n unsubSetPitch();\n };\n },\n\n onCleanup: (mapId) => {\n initializedInstances.delete(mapId);\n initialStateCache.delete(mapId);\n },\n});\n\n// =============================================================================\n// Convenience exports\n// =============================================================================\n\n/**\n * Initialize camera state for a map instance with optional initial values.\n * Should be called before using the camera store for a given mapId.\n *\n * @param mapId - Unique identifier for the map instance\n * @param initialState - Optional initial camera state\n * @returns void\n *\n * @example\n * ```typescript\n * import { uuid } from '@accelint/core';\n * import { initializeCameraState } from '@accelint/map-toolkit/camera';\n *\n * const mapId = uuid();\n *\n * // Initialize with default state\n * initializeCameraState(mapId);\n *\n * // Initialize with custom state\n * initializeCameraState(mapId, {\n * latitude: 37.7749,\n * longitude: -122.4194,\n * zoom: 10,\n * view: '2.5D',\n * pitch: 45,\n * });\n * ```\n */\nexport function initializeCameraState(\n mapId: UniqueId,\n initialState?: CameraStateInput,\n): void {\n if (initializedInstances.has(mapId)) {\n return; // Already initialized\n }\n\n initializedInstances.add(mapId);\n if (initialState) {\n initialStateCache.set(mapId, initialState);\n }\n const builtState = buildCameraState(initialState);\n // Set initial state BEFORE getInstance is called by useSyncExternalStore\n // This ensures any code path that creates the instance uses this state\n cameraStore.setInitialState(mapId, builtState);\n}\n\n/**\n * Hook to subscribe to camera state changes for a specific map.\n *\n * @param mapId - Unique identifier for the map instance\n * @param initialCameraState - Optional initial camera state (only used on first call)\n * @returns Camera state and setCameraState action\n *\n * @example\n * ```tsx\n * function MapInfo({ mapId }) {\n * const { cameraState, setCameraState } = useMapCamera(mapId);\n * return (\n * <div>\n * Lat: {cameraState.latitude.toFixed(2)}, Lon: {cameraState.longitude.toFixed(2)}\n * </div>\n * );\n * }\n * ```\n */\nexport function useMapCamera(\n mapId: UniqueId,\n initialCameraState?: CameraStateInput,\n): {\n cameraState: CameraState;\n setCameraState: (state: Partial<CameraState>) => void;\n} {\n // Initialize BEFORE subscribing to ensure first render has correct state.\n // This prevents MapLibre from rendering at default (0,0,0) and firing onMove\n // events that would overwrite the initialized state.\n // This is safe because initializeCameraState is idempotent (checks initializedInstances first).\n if (initialCameraState && !initializedInstances.has(mapId)) {\n initializeCameraState(mapId, initialCameraState);\n }\n\n const { state, setCameraState } = cameraStore.use(mapId);\n\n return { cameraState: state, setCameraState };\n}\n\n/**\n * Manually clear camera state for a specific map instance.\n *\n * Removes all cached state including initial values and subscription tracking.\n * Useful for cleanup when dynamically destroying map instances.\n *\n * @param mapId - The unique identifier for the map instance to clear\n * @returns void\n *\n * @example\n * ```typescript\n * import { clearCameraState } from '@accelint/map-toolkit/camera';\n *\n * // Clean up when removing a map\n * function removeMap(mapId: UniqueId) {\n * clearCameraState(mapId);\n * // ... remove map component\n * }\n * ```\n *\n * @example\n * ```typescript\n * import { clearCameraState } from '@accelint/map-toolkit/camera';\n * import { afterEach } from 'vitest';\n *\n * // Clean up in tests\n * afterEach(() => {\n * clearCameraState('test-map-id');\n * });\n * ```\n */\nexport function clearCameraState(mapId: UniqueId): void {\n initializedInstances.delete(mapId);\n initialStateCache.delete(mapId);\n cameraStore.clear(mapId);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,YAAY,UAAU,aAA0B;;;;;;;;;;;AAgEtD,MAAM,oCAAoB,IAAI,KAAiC;;;;;AAM/D,MAAM,uCAAuB,IAAI,KAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDhD,SAAS,iBAAiB,SAAyC;CACjE,MAAM,WAAW,SAAS,YAAY;CACtC,MAAM,YAAY,SAAS,aAAa;CACxC,MAAM,OAAO,SAAS,QAAQ;CAC9B,MAAM,WAAW,SAAS,YAAY;CAGtC,MAAM,OAAO,SAAS,SAAS,QAAQ,SAAS,eAAe;CAC/D,MAAM,aAAa,SAAS,SAAS;AAErC,KAAI,KAEF,QAAO;EACL;EACA;EACA;EACA,OAAO;EACP,UAAU;EACV,YAAY;EACZ,MAAM;EACP;AAGH,KAAI,WAEF,QAAO;EACL;EACA;EACA;EACA,OAAO,SAAS,SAAS;EACzB;EACA,YAAY;EACZ,MAAM;EACP;AAIH,QAAO;EACL;EACA;EACA;EACA,OAAO;EACP;EACA,YAAY;EACZ,MAAM;EACP;;;;;AAMH,MAAMA,uBAAoC;CACxC,UAAU;CACV,WAAW;CACX,MAAM;CACN,OAAO;CACP,UAAU;CACV,YAAY;CACZ,MAAM;CACP;;;;AAKD,MAAa,cAAc,eAA2C;CACpE,cAAc;CAEd,UAAU,QAAQ,EAAE,KAAK,eAAe,EACtC,iBAAiB,YAAkC;AAGjD,UAAQ,iBAAiB;GAAE,GAFN,KAAK;GAEkB,GAAG;GAAS,CAAC,CAAC;IAE7D;CAED,MAAM,OAAO,EAAE,KAAK,cAAc;EAChC,MAAM,aAAa,UAAU,GAAG,iBAAiB,QAAQ,EAAE,cAAc;AACvE,OAAI,QAAQ,OAAO,MACjB;GAGF,MAAM,QAAQ,KAAK;GACnB,MAAM,eAAe,kBAAkB,IAAI,MAAM;AAejD,WAdiB,iBAAiB;IAChC,UAAU,MAAM;IAChB,WAAW,MAAM;IACjB,YAAY,MAAM;IAClB,MAAM,MAAM;IACZ,MAAM,QAAQ,SAAS,QAAQ,MAAM,OAAQ,cAAc,QAAQ;IACnE,OACE,QAAQ,UAAU,QAAQ,MAAM,QAAS,cAAc,SAAS;IAClE,UACE,QAAQ,aAAa,QACjB,MAAM,WACL,cAAc,YAAY;IAClC,CAAC,CAEe;IACjB;EAEF,MAAM,iBAAiB,UAAU,GAC/B,iBAAiB,YAChB,EAAE,cAAc;AACf,OAAI,QAAQ,OAAO,MACjB;GAGF,MAAM,QAAQ,KAAK;AACnB,WACE,iBAAiB;IACf,GAAG;IACH,UAAU,QAAQ;IAClB,WAAW,QAAQ;IACnB,MAAM,QAAQ,QAAQ,MAAM;IAC5B,UAAU,QAAQ,WAAW,MAAM;IACnC,OAAO,QAAQ,SAAS,MAAM;IAC/B,CAAC,CACH;IAEJ;EAED,MAAM,iBAAiB,UAAU,GAC/B,iBAAiB,YAChB,EAAE,cAAc;AACf,OAAI,QAAQ,OAAO,MACjB;GAGF,MAAM,QAAQ,KAAK;GACnB,MAAM,EAAE,WAAW,UAAU,SAAS,UAAU;IAC9C,OAAO,QAAQ;IACf,QAAQ,QAAQ;IAChB,QAAQ,CACN,CAAC,QAAQ,OAAO,IAAI,QAAQ,OAAO,GAAG,EACtC,CAAC,QAAQ,OAAO,IAAI,QAAQ,OAAO,GAAG,CACvC;IACD,SAAS,QAAQ;IAClB,CAAC;AAEF,WACE,iBAAiB;IACf,GAAG;IACH;IACA;IACA;IACA,UAAU,QAAQ,WAAW,MAAM;IACnC,OAAO,QAAQ,SAAS,MAAM;IAC/B,CAAC,CACH;IAEJ;EAED,MAAM,qBAAqB,UAAU,GACnC,iBAAiB,gBAChB,EAAE,cAAc;AACf,OAAI,QAAQ,OAAO,MACjB;GAIF,MAAM,WAAW,EAAE,GADL,KAAK,EACU;AAC7B,YAAS,aAAa,QAAQ;AAC9B,OAAI,QAAQ,eAAe,QACzB,UAAS,OAAO;QACX;AACL,aAAS,OAAO;AAChB,aAAS,QAAQ;;AAEnB,WAAQ,SAAS;IAEpB;EAED,MAAM,eAAe,UAAU,GAC7B,iBAAiB,UAChB,EAAE,cAAc;AACf,OAAI,QAAQ,OAAO,MACjB;GAIF,MAAM,WAAW,EAAE,GADL,KAAK,EACU;AAC7B,YAAS,OAAO,QAAQ;AACxB,OAAI,QAAQ,SAAS,MAAM;AACzB,aAAS,aAAa;AACtB,aAAS,QAAQ;SAEjB,UAAS,aAAa;AAGxB,OAAI,QAAQ,SAAS,OACnB,UAAS,QAAQ;AAEnB,WAAQ,SAAS;IAEpB;EAED,MAAM,eAAe,UAAU,GAC7B,iBAAiB,UAChB,EAAE,cAAc;AACf,OAAI,QAAQ,OAAO,MACjB;AAIF,WAAQ;IAAE,GADI,KAAK;IACC,MAAM,QAAQ;IAAM,CAAC;IAE5C;EAED,MAAM,mBAAmB,UAAU,GACjC,iBAAiB,cAChB,EAAE,cAAc;AACf,OAAI,QAAQ,OAAO,MACjB;GAGF,MAAM,QAAQ,KAAK;AACnB,OAAI,MAAM,SAAS,KACjB,SAAQ;IAAE,GAAG;IAAO,UAAU,QAAQ;IAAU,CAAC;IAGtD;EAED,MAAM,gBAAgB,UAAU,GAC9B,iBAAiB,WAChB,EAAE,cAAc;AACf,OAAI,QAAQ,OAAO,MACjB;GAGF,MAAM,QAAQ,KAAK;AACnB,OAAI,MAAM,SAAS,OACjB,SAAQ;IAAE,GAAG;IAAO,OAAO,QAAQ;IAAO,CAAC;IAGhD;AAED,eAAa;AACX,eAAY;AACZ,mBAAgB;AAChB,mBAAgB;AAChB,uBAAoB;AACpB,iBAAc;AACd,iBAAc;AACd,qBAAkB;AAClB,kBAAe;;;CAInB,YAAY,UAAU;AACpB,uBAAqB,OAAO,MAAM;AAClC,oBAAkB,OAAO,MAAM;;CAElC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,SAAgB,sBACd,OACA,cACM;AACN,KAAI,qBAAqB,IAAI,MAAM,CACjC;AAGF,sBAAqB,IAAI,MAAM;AAC/B,KAAI,aACF,mBAAkB,IAAI,OAAO,aAAa;CAE5C,MAAM,aAAa,iBAAiB,aAAa;AAGjD,aAAY,gBAAgB,OAAO,WAAW;;;;;;;;;;;;;;;;;;;;;AAsBhD,SAAgB,aACd,OACA,oBAIA;AAKA,KAAI,sBAAsB,CAAC,qBAAqB,IAAI,MAAM,CACxD,uBAAsB,OAAO,mBAAmB;CAGlD,MAAM,EAAE,OAAO,mBAAmB,YAAY,IAAI,MAAM;AAExD,QAAO;EAAE,aAAa;EAAO;EAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkC/C,SAAgB,iBAAiB,OAAuB;AACtD,sBAAqB,OAAO,MAAM;AAClC,mBAAkB,OAAO,MAAM;AAC/B,aAAY,MAAM,MAAM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-cursor-coordinates.js","names":["latLon: [number, number]"],"sources":["../../src/cursor-coordinates/use-cursor-coordinates.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'use client';\n\nimport type { UniqueId } from '@accelint/core';\nimport {\n coordinateSystems,\n createCoordinate,\n formatDecimalDegrees,\n formatDegreesDecimalMinutes,\n formatDegreesMinutesSeconds,\n} from '@accelint/geo';\nimport { getLogger } from '@accelint/logger';\nimport 'client-only';\nimport { useContext, useMemo } from 'react';\nimport { MapContext } from '../deckgl/base-map/provider';\nimport {\n DEFAULT_LATLON_COORDS,\n DEFAULT_MGRS_UTM_COORDS,\n LONGITUDE_RANGE,\n MAX_LONGITUDE,\n} from './constants';\nimport { cursorCoordinateStore } from './store';\nimport type {\n CoordinateFormatTypes,\n RawCoordinate,\n UseCursorCoordinatesOptions,\n UseCursorCoordinatesReturn,\n} from './types';\n\nconst logger = getLogger({\n enabled:\n process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test',\n level: 'warn',\n prefix: '[CursorCoordinates]',\n pretty: true,\n});\n\n/**\n * Normalizes longitude to -180 to 180 range.\n * Handles wraparound including multi-revolution values.\n *\n * @param lon - Longitude value in degrees\n * @returns Normalized longitude between -180 and 180\n */\nfunction normalizeLongitude(lon: number): number {\n return (\n ((((lon + MAX_LONGITUDE) % LONGITUDE_RANGE) + LONGITUDE_RANGE) %\n LONGITUDE_RANGE) -\n MAX_LONGITUDE\n );\n}\n\n/**\n * Builds a RawCoordinate object from a coordinate tuple.\n *\n * @param coord - Coordinate tuple [longitude, latitude] or null\n * @returns RawCoordinate object or null\n */\nfunction buildRawCoordinate(coord: [number, number] | null): RawCoordinate {\n if (!coord) {\n return null;\n }\n\n const normalizedLon = normalizeLongitude(coord[0]);\n\n return {\n longitude: normalizedLon,\n latitude: coord[1],\n };\n}\n\n/**\n * Formats a coordinate using the specified format.\n * Uses @accelint/geo formatters which match CoordinateField precision:\n * - DD: 6 decimal places\n * - DDM: 4 decimal places for minutes\n * - DMS: 2 decimal places for seconds\n *\n * @param coord - Coordinate tuple [longitude, latitude]\n * @param format - Coordinate format type\n * @returns Formatted coordinate string\n * *\n * @remarks\n * **UTM/MGRS Limitations:** UTM and MGRS coordinate systems are only valid between 80°S and 84°N.\n * Coordinates outside this range (e.g., polar regions) will return the default placeholder `--, --`.\n * Other formats (DD, DDM, DMS) work correctly at all latitudes.\n */\nfunction formatCoordinate(\n coord: [number, number],\n format: CoordinateFormatTypes,\n): string {\n // Normalize longitude and convert to [lat, lon] for geo formatters\n const normalizedLon = normalizeLongitude(coord[0]);\n const latLon: [number, number] = [coord[1], normalizedLon];\n\n switch (format) {\n case 'dd':\n return formatDecimalDegrees(latLon, {\n withOrdinal: true,\n separator: ' / ',\n prefix: '',\n suffix: '',\n });\n case 'ddm':\n return formatDegreesDecimalMinutes(latLon, {\n withOrdinal: true,\n separator: ' / ',\n prefix: '',\n suffix: '',\n });\n case 'dms':\n return formatDegreesMinutesSeconds(latLon, {\n withOrdinal: true,\n separator: ' / ',\n prefix: '',\n suffix: '',\n });\n case 'mgrs':\n case 'utm': {\n // UTM and MGRS are only valid between 80°S and 84°N\n // Use createCoordinate for grid-based formats\n // Input format: \"lon E / lat N\" for LONLAT (matching geo package DD tests)\n // Limit to 10 decimal places (geo parser max) and avoid floating point precision issues\n const lat = latLon[0];\n const lon = latLon[1];\n\n // Check if coordinate is within valid UTM/MGRS range\n if (lat < -80 || lat > 84) {\n return DEFAULT_MGRS_UTM_COORDS;\n }\n\n const latOrdinal = lat >= 0 ? 'N' : 'S';\n const lonOrdinal = lon >= 0 ? 'E' : 'W';\n // Use LONLAT format: longitude first, then latitude\n // toFixed(10) ensures we stay within the parser's regex limits\n const formattedInput = `${Math.abs(lon).toFixed(10)} ${lonOrdinal} / ${Math.abs(lat).toFixed(10)} ${latOrdinal}`;\n\n const geoCoord = createCoordinate(\n coordinateSystems.dd,\n 'LONLAT',\n )(formattedInput);\n\n // Validate the coordinate was created successfully\n if (!geoCoord.valid) {\n logger.error(\n `Failed to create coordinate for ${format}: ${geoCoord.errors.join(', ')}`,\n );\n return DEFAULT_MGRS_UTM_COORDS;\n }\n\n return geoCoord[format]();\n }\n }\n}\n\n/**\n * React hook that tracks and formats the cursor hover position coordinates on a map.\n *\n * Subscribes to map hover events via the event bus and converts coordinates to various\n * geographic formats (Decimal Degrees, DMS, MGRS, UTM, etc.). The hook automatically\n * filters events to only process those from the specified map instance.\n *\n * Uses the shared store factory for efficient state management and automatic cleanup.\n *\n * @param id - Optional map instance ID. If not provided, attempts to use the ID from MapProvider context.\n * @param options - Optional configuration options\n * @returns Object containing the formatted coordinate string, raw coordinate, format setter, and current format\n * @throws {Error} When no id is provided and hook is used outside MapProvider context\n *\n * @remarks\n * **UTM/MGRS Limitations:** UTM and MGRS coordinate systems are only valid between 80°S and 84°N.\n * Coordinates outside this range (e.g., polar regions) will display the default placeholder `--, --`.\n * Other formats (DD, DDM, DMS) work correctly at all latitudes.\n *\n * @example\n * Basic usage:\n * ```tsx\n * import { uuid } from '@accelint/core';\n * import { useCursorCoordinates } from '@accelint/map-toolkit/cursor-coordinates';\n *\n * const MAP_ID = uuid();\n *\n * function CoordinateDisplay() {\n * const { formattedCoord, setFormat } = useCursorCoordinates(MAP_ID);\n *\n * return (\n * <div>\n * <select onChange={(e) => setFormat(e.target.value as CoordinateFormatTypes)}>\n * <option value=\"dd\">Decimal Degrees</option>\n * <option value=\"ddm\">Degrees Decimal Minutes</option>\n * <option value=\"dms\">Degrees Minutes Seconds</option>\n * <option value=\"mgrs\">MGRS</option>\n * <option value=\"utm\">UTM</option>\n * </select>\n * <div>{formattedCoord}</div>\n * </div>\n * );\n * }\n * ```\n *\n * @example\n * With custom formatter:\n * ```tsx\n * function CustomCoordinateDisplay() {\n * const { formattedCoord, rawCoord } = useCursorCoordinates(MAP_ID, {\n * formatter: (coord) =>\n * `Lat: ${coord.latitude.toFixed(6)}° Lng: ${coord.longitude.toFixed(6)}°`,\n * });\n *\n * return <div>{formattedCoord}</div>;\n * }\n * ```\n *\n * @example\n * Accessing raw coordinates:\n * ```tsx\n * function RawCoordinateDisplay() {\n * const { rawCoord, currentFormat } = useCursorCoordinates(MAP_ID);\n *\n * if (!rawCoord) {\n * return <div>Move cursor over map</div>;\n * }\n *\n * return (\n * <div>\n * <div>Longitude: {rawCoord.longitude}</div>\n * <div>Latitude: {rawCoord.latitude}</div>\n * <div>Format: {currentFormat}</div>\n * </div>\n * );\n * }\n * ```\n */\nexport function useCursorCoordinates(\n id?: UniqueId,\n options?: UseCursorCoordinatesOptions,\n): UseCursorCoordinatesReturn {\n const contextId = useContext(MapContext);\n const actualId = id ?? contextId;\n\n if (!actualId) {\n throw new Error(\n 'useCursorCoordinates requires either an id parameter or to be used within a MapProvider',\n );\n }\n\n const customFormatter = options?.formatter;\n\n // Use the store hook to get state and actions\n const { state, setFormat } = cursorCoordinateStore.use(actualId);\n\n // Build raw coordinate object\n const rawCoord = useMemo(\n () => buildRawCoordinate(state.coordinate),\n [state.coordinate],\n );\n\n // Compute formatted coordinate string\n const formattedCoord = useMemo(() => {\n // Return default coords based on current format.\n const getDefaultCoords = () =>\n state.format === 'mgrs' || state.format === 'utm'\n ? DEFAULT_MGRS_UTM_COORDS\n : DEFAULT_LATLON_COORDS;\n\n if (!(rawCoord && state.coordinate)) {\n return getDefaultCoords();\n }\n\n // Use custom formatter if provided\n if (customFormatter) {\n try {\n return customFormatter(rawCoord);\n } catch (error) {\n logger.error(\n `Custom formatter failed: ${error instanceof Error ? error.message : String(error)}`,\n );\n return getDefaultCoords();\n }\n }\n\n // Use built-in formatter\n return formatCoordinate(state.coordinate, state.format);\n }, [rawCoord, customFormatter, state.format, state.coordinate]);\n\n // Memoize the return value to prevent unnecessary re-renders\n return useMemo(\n () => ({\n formattedCoord,\n setFormat,\n rawCoord,\n currentFormat: state.format,\n }),\n [formattedCoord, setFormat, rawCoord, state.format],\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,SAAS,UAAU;CACvB,SACE,QAAQ,IAAI,aAAa,gBAAgB,QAAQ,IAAI,aAAa;CACpE,OAAO;CACP,QAAQ;CACR,QAAQ;CACT,CAAC;;;;;;;;AASF,SAAS,mBAAmB,KAAqB;AAC/C,UACM,MAAM,iBAAiB,kBAAmB,mBAC5C,kBACF;;;;;;;;AAUJ,SAAS,mBAAmB,OAA+C;AACzE,KAAI,CAAC,MACH,QAAO;AAKT,QAAO;EACL,WAHoB,mBAAmB,MAAM,GAAG;EAIhD,UAAU,MAAM;EACjB;;;;;;;;;;;;;;;;;;AAmBH,SAAS,iBACP,OACA,QACQ;CAER,MAAM,gBAAgB,mBAAmB,MAAM,GAAG;CAClD,MAAMA,SAA2B,CAAC,MAAM,IAAI,cAAc;AAE1D,SAAQ,QAAR;EACE,KAAK,KACH,QAAO,qBAAqB,QAAQ;GAClC,aAAa;GACb,WAAW;GACX,QAAQ;GACR,QAAQ;GACT,CAAC;EACJ,KAAK,MACH,QAAO,4BAA4B,QAAQ;GACzC,aAAa;GACb,WAAW;GACX,QAAQ;GACR,QAAQ;GACT,CAAC;EACJ,KAAK,MACH,QAAO,4BAA4B,QAAQ;GACzC,aAAa;GACb,WAAW;GACX,QAAQ;GACR,QAAQ;GACT,CAAC;EACJ,KAAK;EACL,KAAK,OAAO;GAKV,MAAM,MAAM,OAAO;GACnB,MAAM,MAAM,OAAO;AAGnB,OAAI,MAAM,OAAO,MAAM,GACrB,QAAO;GAGT,MAAM,aAAa,OAAO,IAAI,MAAM;GACpC,MAAM,aAAa,OAAO,IAAI,MAAM;GAGpC,MAAM,iBAAiB,GAAG,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG;GAEpG,MAAM,WAAW,iBACf,kBAAkB,IAClB,SACD,CAAC,eAAe;AAGjB,OAAI,CAAC,SAAS,OAAO;AACnB,WAAO,MACL,mCAAmC,OAAO,IAAI,SAAS,OAAO,KAAK,KAAK,GACzE;AACD,WAAO;;AAGT,UAAO,SAAS,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmF/B,SAAgB,qBACd,IACA,SAC4B;CAC5B,MAAM,YAAY,WAAW,WAAW;CACxC,MAAM,WAAW,MAAM;AAEvB,KAAI,CAAC,SACH,OAAM,IAAI,MACR,0FACD;CAGH,MAAM,kBAAkB,SAAS;CAGjC,MAAM,EAAE,OAAO,cAAc,sBAAsB,IAAI,SAAS;CAGhE,MAAM,WAAW,cACT,mBAAmB,MAAM,WAAW,EAC1C,CAAC,MAAM,WAAW,CACnB;CAGD,MAAM,iBAAiB,cAAc;EAEnC,MAAM,yBACJ,MAAM,WAAW,UAAU,MAAM,WAAW,QACxC,0BACA;AAEN,MAAI,EAAE,YAAY,MAAM,YACtB,QAAO,kBAAkB;AAI3B,MAAI,gBACF,KAAI;AACF,UAAO,gBAAgB,SAAS;WACzB,OAAO;AACd,UAAO,MACL,4BAA4B,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,GACnF;AACD,UAAO,kBAAkB;;AAK7B,SAAO,iBAAiB,MAAM,YAAY,MAAM,OAAO;IACtD;EAAC;EAAU;EAAiB,MAAM;EAAQ,MAAM;EAAW,CAAC;AAG/D,QAAO,eACE;EACL;EACA;EACA;EACA,eAAe,MAAM;EACtB,GACD;EAAC;EAAgB;EAAW;EAAU,MAAM;EAAO,CACpD"}
|
|
1
|
+
{"version":3,"file":"use-cursor-coordinates.js","names":["latLon: [number, number]"],"sources":["../../src/cursor-coordinates/use-cursor-coordinates.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'use client';\n\nimport {\n coordinateSystems,\n createCoordinate,\n formatDecimalDegrees,\n formatDegreesDecimalMinutes,\n formatDegreesMinutesSeconds,\n} from '@accelint/geo';\nimport { getLogger } from '@accelint/logger';\nimport type { UniqueId } from '@accelint/core';\nimport 'client-only';\nimport { useContext, useMemo } from 'react';\nimport { MapContext } from '../deckgl/base-map/provider';\nimport {\n DEFAULT_LATLON_COORDS,\n DEFAULT_MGRS_UTM_COORDS,\n LONGITUDE_RANGE,\n MAX_LONGITUDE,\n} from './constants';\nimport { cursorCoordinateStore } from './store';\nimport type {\n CoordinateFormatTypes,\n RawCoordinate,\n UseCursorCoordinatesOptions,\n UseCursorCoordinatesReturn,\n} from './types';\n\nconst logger = getLogger({\n enabled:\n process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test',\n level: 'warn',\n prefix: '[CursorCoordinates]',\n pretty: true,\n});\n\n/**\n * Normalizes longitude to -180 to 180 range.\n * Handles wraparound including multi-revolution values.\n *\n * @param lon - Longitude value in degrees\n * @returns Normalized longitude between -180 and 180\n */\nfunction normalizeLongitude(lon: number): number {\n return (\n ((((lon + MAX_LONGITUDE) % LONGITUDE_RANGE) + LONGITUDE_RANGE) %\n LONGITUDE_RANGE) -\n MAX_LONGITUDE\n );\n}\n\n/**\n * Builds a RawCoordinate object from a coordinate tuple.\n *\n * @param coord - Coordinate tuple [longitude, latitude] or null\n * @returns RawCoordinate object or null\n */\nfunction buildRawCoordinate(coord: [number, number] | null): RawCoordinate {\n if (!coord) {\n return null;\n }\n\n const normalizedLon = normalizeLongitude(coord[0]);\n\n return {\n longitude: normalizedLon,\n latitude: coord[1],\n };\n}\n\n/**\n * Formats a coordinate using the specified format.\n * Uses @accelint/geo formatters which match CoordinateField precision:\n * - DD: 6 decimal places\n * - DDM: 4 decimal places for minutes\n * - DMS: 2 decimal places for seconds\n *\n * @param coord - Coordinate tuple [longitude, latitude]\n * @param format - Coordinate format type\n * @returns Formatted coordinate string\n * *\n * @remarks\n * **UTM/MGRS Limitations:** UTM and MGRS coordinate systems are only valid between 80°S and 84°N.\n * Coordinates outside this range (e.g., polar regions) will return the default placeholder `--, --`.\n * Other formats (DD, DDM, DMS) work correctly at all latitudes.\n */\nfunction formatCoordinate(\n coord: [number, number],\n format: CoordinateFormatTypes,\n): string {\n // Normalize longitude and convert to [lat, lon] for geo formatters\n const normalizedLon = normalizeLongitude(coord[0]);\n const latLon: [number, number] = [coord[1], normalizedLon];\n\n switch (format) {\n case 'dd':\n return formatDecimalDegrees(latLon, {\n withOrdinal: true,\n separator: ' / ',\n prefix: '',\n suffix: '',\n });\n case 'ddm':\n return formatDegreesDecimalMinutes(latLon, {\n withOrdinal: true,\n separator: ' / ',\n prefix: '',\n suffix: '',\n });\n case 'dms':\n return formatDegreesMinutesSeconds(latLon, {\n withOrdinal: true,\n separator: ' / ',\n prefix: '',\n suffix: '',\n });\n case 'mgrs':\n case 'utm': {\n // UTM and MGRS are only valid between 80°S and 84°N\n // Use createCoordinate for grid-based formats\n // Input format: \"lon E / lat N\" for LONLAT (matching geo package DD tests)\n // Limit to 10 decimal places (geo parser max) and avoid floating point precision issues\n const lat = latLon[0];\n const lon = latLon[1];\n\n // Check if coordinate is within valid UTM/MGRS range\n if (lat < -80 || lat > 84) {\n return DEFAULT_MGRS_UTM_COORDS;\n }\n\n const latOrdinal = lat >= 0 ? 'N' : 'S';\n const lonOrdinal = lon >= 0 ? 'E' : 'W';\n // Use LONLAT format: longitude first, then latitude\n // toFixed(10) ensures we stay within the parser's regex limits\n const formattedInput = `${Math.abs(lon).toFixed(10)} ${lonOrdinal} / ${Math.abs(lat).toFixed(10)} ${latOrdinal}`;\n\n const geoCoord = createCoordinate(\n coordinateSystems.dd,\n 'LONLAT',\n )(formattedInput);\n\n // Validate the coordinate was created successfully\n if (!geoCoord.valid) {\n logger.error(\n `Failed to create coordinate for ${format}: ${geoCoord.errors.join(', ')}`,\n );\n return DEFAULT_MGRS_UTM_COORDS;\n }\n\n return geoCoord[format]();\n }\n }\n}\n\n/**\n * React hook that tracks and formats the cursor hover position coordinates on a map.\n *\n * Subscribes to map hover events via the event bus and converts coordinates to various\n * geographic formats (Decimal Degrees, DMS, MGRS, UTM, etc.). The hook automatically\n * filters events to only process those from the specified map instance.\n *\n * Uses the shared store factory for efficient state management and automatic cleanup.\n *\n * @param id - Optional map instance ID. If not provided, attempts to use the ID from MapProvider context.\n * @param options - Optional configuration options\n * @returns Object containing the formatted coordinate string, raw coordinate, format setter, and current format\n * @throws {Error} When no id is provided and hook is used outside MapProvider context\n *\n * @remarks\n * **UTM/MGRS Limitations:** UTM and MGRS coordinate systems are only valid between 80°S and 84°N.\n * Coordinates outside this range (e.g., polar regions) will display the default placeholder `--, --`.\n * Other formats (DD, DDM, DMS) work correctly at all latitudes.\n *\n * @example\n * Basic usage:\n * ```tsx\n * import { uuid } from '@accelint/core';\n * import { useCursorCoordinates } from '@accelint/map-toolkit/cursor-coordinates';\n *\n * const MAP_ID = uuid();\n *\n * function CoordinateDisplay() {\n * const { formattedCoord, setFormat } = useCursorCoordinates(MAP_ID);\n *\n * return (\n * <div>\n * <select onChange={(e) => setFormat(e.target.value as CoordinateFormatTypes)}>\n * <option value=\"dd\">Decimal Degrees</option>\n * <option value=\"ddm\">Degrees Decimal Minutes</option>\n * <option value=\"dms\">Degrees Minutes Seconds</option>\n * <option value=\"mgrs\">MGRS</option>\n * <option value=\"utm\">UTM</option>\n * </select>\n * <div>{formattedCoord}</div>\n * </div>\n * );\n * }\n * ```\n *\n * @example\n * With custom formatter:\n * ```tsx\n * function CustomCoordinateDisplay() {\n * const { formattedCoord, rawCoord } = useCursorCoordinates(MAP_ID, {\n * formatter: (coord) =>\n * `Lat: ${coord.latitude.toFixed(6)}° Lng: ${coord.longitude.toFixed(6)}°`,\n * });\n *\n * return <div>{formattedCoord}</div>;\n * }\n * ```\n *\n * @example\n * Accessing raw coordinates:\n * ```tsx\n * function RawCoordinateDisplay() {\n * const { rawCoord, currentFormat } = useCursorCoordinates(MAP_ID);\n *\n * if (!rawCoord) {\n * return <div>Move cursor over map</div>;\n * }\n *\n * return (\n * <div>\n * <div>Longitude: {rawCoord.longitude}</div>\n * <div>Latitude: {rawCoord.latitude}</div>\n * <div>Format: {currentFormat}</div>\n * </div>\n * );\n * }\n * ```\n */\nexport function useCursorCoordinates(\n id?: UniqueId,\n options?: UseCursorCoordinatesOptions,\n): UseCursorCoordinatesReturn {\n const contextId = useContext(MapContext);\n const actualId = id ?? contextId;\n\n if (!actualId) {\n throw new Error(\n 'useCursorCoordinates requires either an id parameter or to be used within a MapProvider',\n );\n }\n\n const customFormatter = options?.formatter;\n\n // Use the store hook to get state and actions\n const { state, setFormat } = cursorCoordinateStore.use(actualId);\n\n // Build raw coordinate object\n const rawCoord = useMemo(\n () => buildRawCoordinate(state.coordinate),\n [state.coordinate],\n );\n\n // Compute formatted coordinate string\n const formattedCoord = useMemo(() => {\n // Return default coords based on current format.\n const getDefaultCoords = () =>\n state.format === 'mgrs' || state.format === 'utm'\n ? DEFAULT_MGRS_UTM_COORDS\n : DEFAULT_LATLON_COORDS;\n\n if (!(rawCoord && state.coordinate)) {\n return getDefaultCoords();\n }\n\n // Use custom formatter if provided\n if (customFormatter) {\n try {\n return customFormatter(rawCoord);\n } catch (error) {\n logger.error(\n `Custom formatter failed: ${error instanceof Error ? error.message : String(error)}`,\n );\n return getDefaultCoords();\n }\n }\n\n // Use built-in formatter\n return formatCoordinate(state.coordinate, state.format);\n }, [rawCoord, customFormatter, state.format, state.coordinate]);\n\n // Memoize the return value to prevent unnecessary re-renders\n return useMemo(\n () => ({\n formattedCoord,\n setFormat,\n rawCoord,\n currentFormat: state.format,\n }),\n [formattedCoord, setFormat, rawCoord, state.format],\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,SAAS,UAAU;CACvB,SACE,QAAQ,IAAI,aAAa,gBAAgB,QAAQ,IAAI,aAAa;CACpE,OAAO;CACP,QAAQ;CACR,QAAQ;CACT,CAAC;;;;;;;;AASF,SAAS,mBAAmB,KAAqB;AAC/C,UACM,MAAM,iBAAiB,kBAAmB,mBAC5C,kBACF;;;;;;;;AAUJ,SAAS,mBAAmB,OAA+C;AACzE,KAAI,CAAC,MACH,QAAO;AAKT,QAAO;EACL,WAHoB,mBAAmB,MAAM,GAAG;EAIhD,UAAU,MAAM;EACjB;;;;;;;;;;;;;;;;;;AAmBH,SAAS,iBACP,OACA,QACQ;CAER,MAAM,gBAAgB,mBAAmB,MAAM,GAAG;CAClD,MAAMA,SAA2B,CAAC,MAAM,IAAI,cAAc;AAE1D,SAAQ,QAAR;EACE,KAAK,KACH,QAAO,qBAAqB,QAAQ;GAClC,aAAa;GACb,WAAW;GACX,QAAQ;GACR,QAAQ;GACT,CAAC;EACJ,KAAK,MACH,QAAO,4BAA4B,QAAQ;GACzC,aAAa;GACb,WAAW;GACX,QAAQ;GACR,QAAQ;GACT,CAAC;EACJ,KAAK,MACH,QAAO,4BAA4B,QAAQ;GACzC,aAAa;GACb,WAAW;GACX,QAAQ;GACR,QAAQ;GACT,CAAC;EACJ,KAAK;EACL,KAAK,OAAO;GAKV,MAAM,MAAM,OAAO;GACnB,MAAM,MAAM,OAAO;AAGnB,OAAI,MAAM,OAAO,MAAM,GACrB,QAAO;GAGT,MAAM,aAAa,OAAO,IAAI,MAAM;GACpC,MAAM,aAAa,OAAO,IAAI,MAAM;GAGpC,MAAM,iBAAiB,GAAG,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG;GAEpG,MAAM,WAAW,iBACf,kBAAkB,IAClB,SACD,CAAC,eAAe;AAGjB,OAAI,CAAC,SAAS,OAAO;AACnB,WAAO,MACL,mCAAmC,OAAO,IAAI,SAAS,OAAO,KAAK,KAAK,GACzE;AACD,WAAO;;AAGT,UAAO,SAAS,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmF/B,SAAgB,qBACd,IACA,SAC4B;CAC5B,MAAM,YAAY,WAAW,WAAW;CACxC,MAAM,WAAW,MAAM;AAEvB,KAAI,CAAC,SACH,OAAM,IAAI,MACR,0FACD;CAGH,MAAM,kBAAkB,SAAS;CAGjC,MAAM,EAAE,OAAO,cAAc,sBAAsB,IAAI,SAAS;CAGhE,MAAM,WAAW,cACT,mBAAmB,MAAM,WAAW,EAC1C,CAAC,MAAM,WAAW,CACnB;CAGD,MAAM,iBAAiB,cAAc;EAEnC,MAAM,yBACJ,MAAM,WAAW,UAAU,MAAM,WAAW,QACxC,0BACA;AAEN,MAAI,EAAE,YAAY,MAAM,YACtB,QAAO,kBAAkB;AAI3B,MAAI,gBACF,KAAI;AACF,UAAO,gBAAgB,SAAS;WACzB,OAAO;AACd,UAAO,MACL,4BAA4B,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,GACnF;AACD,UAAO,kBAAkB;;AAK7B,SAAO,iBAAiB,MAAM,YAAY,MAAM,OAAO;IACtD;EAAC;EAAU;EAAiB,MAAM;EAAQ,MAAM;EAAW,CAAC;AAG/D,QAAO,eACE;EACL;EACA;EACA;EACA,eAAe,MAAM;EACtB,GACD;EAAC;EAAgB;EAAW;EAAU,MAAM;EAAO,CACpD"}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import { BaseMapProps } from "./types.js";
|
|
14
|
-
import * as
|
|
14
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
15
15
|
|
|
16
16
|
//#region src/deckgl/base-map/index.d.ts
|
|
17
17
|
|
|
@@ -106,7 +106,7 @@ declare function BaseMap({
|
|
|
106
106
|
onViewStateChange,
|
|
107
107
|
pickingRadius,
|
|
108
108
|
...rest
|
|
109
|
-
}: BaseMapProps):
|
|
109
|
+
}: BaseMapProps): react_jsx_runtime0.JSX.Element;
|
|
110
110
|
//#endregion
|
|
111
111
|
export { BaseMap };
|
|
112
112
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
import { useMapCamera } from "../../camera/store.js";
|
|
17
17
|
import { MapEvents } from "./events.js";
|
|
18
18
|
import { getCursor } from "../../map-cursor/store.js";
|
|
19
|
+
import { getMapGeneration } from "../../shared/cleanup.js";
|
|
19
20
|
import { MapProvider } from "./provider.js";
|
|
20
21
|
import { DEFAULT_VIEW_STATE } from "../../shared/constants.js";
|
|
21
22
|
import { DARK_BASE_MAP_STYLE, PARAMETERS, PICKING_RADIUS } from "./constants.js";
|
|
@@ -27,6 +28,14 @@ import { Deckgl, useDeckgl } from "@deckgl-fiber-renderer/dom";
|
|
|
27
28
|
import { Map, useControl } from "react-map-gl/maplibre";
|
|
28
29
|
|
|
29
30
|
//#region src/deckgl/base-map/index.tsx
|
|
31
|
+
const CANVAS_CONTEXT_ATTRIBUTES = {
|
|
32
|
+
antialias: true,
|
|
33
|
+
powerPreference: "high-performance",
|
|
34
|
+
preserveDrawingBuffer: false,
|
|
35
|
+
failIfMajorPerformanceCaveat: false,
|
|
36
|
+
desynchronized: false,
|
|
37
|
+
contextType: "webgl2"
|
|
38
|
+
};
|
|
30
39
|
/**
|
|
31
40
|
* Serializes PickingInfo for event bus transmission.
|
|
32
41
|
* Omits viewport, layer, and sourceLayer (contain functions) but preserves layer IDs.
|
|
@@ -135,6 +144,7 @@ function AddDeckglControl() {
|
|
|
135
144
|
* ```
|
|
136
145
|
*/
|
|
137
146
|
function BaseMap({ id, className, children, controller = true, enableControlEvents = true, interleaved = true, parameters = {}, styleUrl = DARK_BASE_MAP_STYLE, useDevicePixels = false, widgets: widgetsProp = [], defaultView = "2D", initialViewState, onClick, onHover, onViewStateChange, pickingRadius, ...rest }) {
|
|
147
|
+
const mapGeneration = getMapGeneration(id);
|
|
138
148
|
const deckglInstance = useDeckgl();
|
|
139
149
|
const container = useId();
|
|
140
150
|
const mapRef = useRef(null);
|
|
@@ -148,7 +158,7 @@ function BaseMap({ id, className, children, controller = true, enableControlEven
|
|
|
148
158
|
...deckglInstance?._deck?._getViewState(),
|
|
149
159
|
...cameraState,
|
|
150
160
|
bearing: cameraState.rotation
|
|
151
|
-
}), [cameraState
|
|
161
|
+
}), [cameraState]);
|
|
152
162
|
const mapOptions = useMemo(() => ({
|
|
153
163
|
container,
|
|
154
164
|
zoom: viewState.zoom,
|
|
@@ -162,7 +172,8 @@ function BaseMap({ id, className, children, controller = true, enableControlEven
|
|
|
162
172
|
rollEnabled: false,
|
|
163
173
|
attributionControl: { compact: true },
|
|
164
174
|
projection: cameraState.projection,
|
|
165
|
-
maxPitch: cameraState.view === "2D" ? 0 : 85
|
|
175
|
+
maxPitch: cameraState.view === "2D" ? 0 : 85,
|
|
176
|
+
canvasContextAttributes: CANVAS_CONTEXT_ATTRIBUTES
|
|
166
177
|
}), [
|
|
167
178
|
viewState,
|
|
168
179
|
container,
|
|
@@ -203,7 +214,9 @@ function BaseMap({ id, className, children, controller = true, enableControlEven
|
|
|
203
214
|
const handleViewStateChange = useEffectEvent((params) => {
|
|
204
215
|
onViewStateChange?.(params);
|
|
205
216
|
const { viewId, viewState: { latitude, longitude, zoom } } = params;
|
|
206
|
-
const
|
|
217
|
+
const viewports = deckglInstance._deck?.getViewports();
|
|
218
|
+
if (!viewports) return;
|
|
219
|
+
const viewport = viewports.find((vp) => vp.id === viewId);
|
|
207
220
|
if (!viewport) return;
|
|
208
221
|
emitViewport({
|
|
209
222
|
id,
|
|
@@ -218,7 +231,8 @@ function BaseMap({ id, className, children, controller = true, enableControlEven
|
|
|
218
231
|
const handleResize = useEffectEvent((params) => {
|
|
219
232
|
if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
|
|
220
233
|
resizeTimeoutRef.current = setTimeout(() => {
|
|
221
|
-
const viewports = deckglInstance._deck
|
|
234
|
+
const viewports = deckglInstance._deck?.getViewports();
|
|
235
|
+
if (!viewports) return;
|
|
222
236
|
for (const vp of viewports) handleViewStateChange({
|
|
223
237
|
viewId: vp.id,
|
|
224
238
|
viewState: {
|
|
@@ -234,7 +248,8 @@ function BaseMap({ id, className, children, controller = true, enableControlEven
|
|
|
234
248
|
}, 200);
|
|
235
249
|
});
|
|
236
250
|
const handleLoad = useEffectEvent(() => {
|
|
237
|
-
const viewports = deckglInstance._deck
|
|
251
|
+
const viewports = deckglInstance._deck?.getViewports();
|
|
252
|
+
if (!viewports) return;
|
|
238
253
|
for (const vp of viewports) handleViewStateChange({
|
|
239
254
|
viewId: vp.id,
|
|
240
255
|
viewState: {
|
|
@@ -257,7 +272,9 @@ function BaseMap({ id, className, children, controller = true, enableControlEven
|
|
|
257
272
|
}), /* @__PURE__ */ jsx(MapProvider, {
|
|
258
273
|
id,
|
|
259
274
|
children: /* @__PURE__ */ jsx(Map, {
|
|
260
|
-
onMove: (evt) =>
|
|
275
|
+
onMove: (evt) => {
|
|
276
|
+
setCameraState(evt.viewState);
|
|
277
|
+
},
|
|
261
278
|
mapStyle: styleUrl,
|
|
262
279
|
ref: mapRef,
|
|
263
280
|
...mapOptions,
|
|
@@ -279,7 +296,7 @@ function BaseMap({ id, className, children, controller = true, enableControlEven
|
|
|
279
296
|
},
|
|
280
297
|
children: [/* @__PURE__ */ jsx(AddDeckglControl, {}), children]
|
|
281
298
|
})
|
|
282
|
-
})
|
|
299
|
+
}, mapGeneration)
|
|
283
300
|
})]
|
|
284
301
|
});
|
|
285
302
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["MapLibre"],"sources":["../../../src/deckgl/base-map/index.tsx"],"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\n'use client';\n\nimport { useEffectEvent, useEmit } from '@accelint/bus/react';\nimport type { PickingInfo, ViewStateChangeParameters } from '@deck.gl/core';\nimport { Deckgl, useDeckgl } from '@deckgl-fiber-renderer/dom';\nimport 'client-only';\nimport type { IControl } from 'maplibre-gl';\nimport type { MjolnirGestureEvent, MjolnirPointerEvent } from 'mjolnir.js';\nimport { useCallback, useId, useMemo, useRef } from 'react';\nimport {\n Map as MapLibre,\n type MapRef,\n useControl,\n type ViewState,\n} from 'react-map-gl/maplibre';\nimport { useMapCamera } from '../../camera';\nimport { getCursor } from '../../map-cursor/store';\nimport { DEFAULT_VIEW_STATE } from '../../shared/constants';\nimport { DARK_BASE_MAP_STYLE, PARAMETERS, PICKING_RADIUS } from './constants';\nimport { MapControls } from './controls';\nimport { MapEvents } from './events';\nimport { MapProvider } from './provider';\nimport type {\n BaseMapProps,\n MapClickEvent,\n MapHoverEvent,\n MapViewportEvent,\n SerializablePickingInfo,\n} from './types';\n\n/**\n * Serializes PickingInfo for event bus transmission.\n * Omits viewport, layer, and sourceLayer (contain functions) but preserves layer IDs.\n *\n * @param info - The PickingInfo object from Deck.gl\n * @returns Serializable picking info with layer IDs extracted\n */\nfunction serializePickingInfo(info: PickingInfo): SerializablePickingInfo {\n const { viewport, layer, sourceLayer, ...infoRest } = info;\n return {\n layerId: layer?.id,\n sourceLayerId: sourceLayer?.id,\n ...infoRest,\n };\n}\n\n/**\n * Strips non-serializable properties from MjolnirGestureEvent for event bus transmission.\n * Removes functions, DOM elements, and PointerEvent objects that cannot be cloned.\n *\n * @param event - The MjolnirGestureEvent from Deck.gl\n * @returns Serializable gesture event with non-cloneable properties removed\n */\nfunction serializeMjolnirEvent(\n event: MjolnirGestureEvent,\n): Omit<\n MjolnirGestureEvent,\n | 'stopPropagation'\n | 'preventDefault'\n | 'stopImmediatePropagation'\n | 'srcEvent'\n | 'rootElement'\n | 'target'\n | 'changedPointers'\n | 'pointers'\n>;\n/**\n * Strips non-serializable properties from MjolnirPointerEvent for event bus transmission.\n * Removes functions and DOM elements that cannot be cloned.\n *\n * @param event - The MjolnirPointerEvent from Deck.gl\n * @returns Serializable pointer event with non-cloneable properties removed\n */\nfunction serializeMjolnirEvent(\n event: MjolnirPointerEvent,\n): Omit<\n MjolnirPointerEvent,\n | 'stopPropagation'\n | 'preventDefault'\n | 'stopImmediatePropagation'\n | 'srcEvent'\n | 'rootElement'\n | 'target'\n>;\nfunction serializeMjolnirEvent(\n event: MjolnirGestureEvent | MjolnirPointerEvent,\n) {\n const {\n stopImmediatePropagation,\n stopPropagation,\n preventDefault,\n srcEvent,\n rootElement,\n target,\n ...rest\n } = event;\n\n // Remove pointer arrays if present (only on MjolnirGestureEvent)\n if ('changedPointers' in rest) {\n const { changedPointers, pointers, ...gestureRest } = rest;\n return gestureRest;\n }\n\n return rest;\n}\n\n/**\n * Internal component that registers the Deck.gl instance as a MapLibre control.\n * Enables the Deck.gl canvas to render within the MapLibre GL map container.\n *\n * @returns null (headless component)\n */\nfunction AddDeckglControl() {\n const deckglInstance = useDeckgl();\n useControl(() => deckglInstance as IControl);\n\n return null;\n}\n\n/**\n * A React component that provides a Deck.gl-powered base map with MapLibre GL integration.\n *\n * This component serves as the foundation for building interactive map applications with\n * support for click and hover events through a centralized event bus. It integrates\n * Deck.gl for 3D visualizations with MapLibre GL for the base map tiles.\n *\n * **Map Mode Integration**: BaseMap automatically creates a `MapProvider` internally,\n * which sets up the map mode state management for this instance.\n * - **Children**: Only Deck.gl layer components can be rendered as children. Custom Deck.gl\n * layers can use `useMapMode()` without parameters to access context.\n * - **Siblings**: UI components (buttons, toolbars, etc.) must be rendered as siblings\n * and pass `id` to `useMapMode(id)`.\n *\n * **Event Bus**: Click and hover events are emitted through the event bus with the `id`\n * included in the payload, allowing multiple map instances to coexist without interference.\n *\n * @param props - Component props including id (required), className, onClick, onHover, and all Deck.gl props\n * @returns A map component with Deck.gl and MapLibre GL integration\n *\n * @example\n * Basic usage with id (recommended: module-level constant):\n * ```tsx\n * import { BaseMap } from '@accelint/map-toolkit/deckgl';\n * import { View } from '@deckgl-fiber-renderer/dom';\n * import { uuid } from '@accelint/core';\n *\n * // Create id at module level for stability and easy sharing\n * const MAIN_MAP_ID = uuid();\n *\n * export function MapView() {\n * return (\n * <BaseMap className=\"w-full h-full\" id={MAIN_MAP_ID}>\n * <View id=\"main\" controller />\n * </BaseMap>\n * );\n * }\n * ```\n *\n * @example\n * With map mode and event handlers (module-level constant for sharing):\n * ```tsx\n * import { BaseMap } from '@accelint/map-toolkit/deckgl';\n * import { useMapMode } from '@accelint/map-toolkit/map-mode';\n * import { uuid } from '@accelint/core';\n * import type { PickingInfo } from '@deck.gl/core';\n * import type { MjolnirGestureEvent } from 'mjolnir.js';\n *\n * // Module-level constant - stable and shareable across all components\n * const MAIN_MAP_ID = uuid();\n *\n * function Toolbar() {\n * // Access map mode using the shared id\n * const { mode, requestModeChange } = useMapMode(MAIN_MAP_ID);\n * return <div>Current mode: {mode}</div>;\n * }\n *\n * export function InteractiveMap() {\n * const handleClick = (info: PickingInfo, event: MjolnirGestureEvent) => {\n * console.log('Clicked:', info.object);\n * };\n *\n * return (\n * <div className=\"relative w-full h-full\">\n * <BaseMap className=\"absolute inset-0\" id={MAIN_MAP_ID} onClick={handleClick}>\n * <View id=\"main\" controller />\n * </BaseMap>\n * <Toolbar />\n * </div>\n * );\n * }\n * ```\n */\nexport function BaseMap({\n id,\n className,\n children,\n controller = true,\n enableControlEvents = true,\n interleaved = true,\n parameters = {},\n styleUrl = DARK_BASE_MAP_STYLE,\n useDevicePixels = false,\n widgets: widgetsProp = [],\n defaultView = '2D',\n initialViewState,\n onClick,\n onHover,\n onViewStateChange,\n pickingRadius,\n ...rest\n}: BaseMapProps) {\n const deckglInstance = useDeckgl();\n const container = useId();\n const mapRef = useRef<MapRef>(null);\n\n const { cameraState, setCameraState } = useMapCamera(id, {\n view: defaultView,\n zoom: initialViewState?.zoom ?? DEFAULT_VIEW_STATE.zoom,\n latitude: initialViewState?.latitude ?? DEFAULT_VIEW_STATE.latitude,\n longitude: initialViewState?.longitude ?? DEFAULT_VIEW_STATE.longitude,\n });\n\n const viewState = useMemo<ViewState>(\n () => ({\n // @ts-expect-error squirrelly deckglInstance typing\n ...(deckglInstance?._deck?._getViewState() as ViewState),\n ...cameraState,\n bearing: cameraState.rotation,\n }),\n // @ts-expect-error squirrelly deckglInstance typing\n [cameraState, deckglInstance?._deck?._getViewState],\n );\n\n // Memoize MapLibre options to avoid creating new object on every render\n const mapOptions = useMemo(\n () => ({\n container,\n zoom: viewState.zoom,\n pitch: viewState.pitch,\n bearing: viewState.bearing,\n latitude: viewState.latitude,\n longitude: viewState.longitude,\n doubleClickZoom: false,\n dragRotate: false,\n pitchWithRotate: false,\n rollEnabled: false,\n attributionControl: { compact: true },\n projection: cameraState.projection,\n maxPitch: cameraState.view === '2D' ? 0 : 85,\n }),\n [viewState, container, cameraState.projection, cameraState.view],\n );\n\n const emitClick = useEmit<MapClickEvent>(MapEvents.click);\n const emitHover = useEmit<MapHoverEvent>(MapEvents.hover);\n const emitViewport = useEmit<MapViewportEvent>(MapEvents.viewport);\n\n const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n const handleClick = useCallback(\n (info: PickingInfo, event: MjolnirGestureEvent) => {\n // send full pickingInfo and event to user-defined onClick\n onClick?.(info, event);\n\n emitClick({\n info: serializePickingInfo(info),\n event: serializeMjolnirEvent(event),\n id,\n });\n },\n [emitClick, id, onClick],\n );\n\n const handleHover = useCallback(\n (info: PickingInfo, event: MjolnirPointerEvent) => {\n // send full pickingInfo and event to user-defined onHover\n onHover?.(info, event);\n\n emitHover({\n info: serializePickingInfo(info),\n event: serializeMjolnirEvent(event),\n id,\n });\n },\n [emitHover, id, onHover],\n );\n\n const handleGetCursor = useCallback(() => {\n return getCursor(id);\n }, [id]);\n\n const handleViewStateChange = useEffectEvent(\n (params: ViewStateChangeParameters) => {\n onViewStateChange?.(params);\n\n const {\n viewId,\n viewState: { latitude, longitude, zoom },\n } = params;\n\n // @ts-expect-error squirrelly deckglInstance typing\n const viewport = deckglInstance._deck\n .getViewports()\n // @ts-expect-error squirrelly deckglInstance typing\n ?.find((vp) => vp.id === viewId);\n\n if (!viewport) {\n return;\n }\n\n emitViewport({\n id,\n bounds: viewport?.getBounds(),\n latitude,\n longitude,\n zoom,\n width: viewport?.width ?? 0,\n height: viewport?.height ?? 0,\n });\n },\n );\n\n const handleResize = useEffectEvent((params) => {\n // Clear existing timeout\n if (resizeTimeoutRef.current) {\n clearTimeout(resizeTimeoutRef.current);\n }\n\n // Debounce\n resizeTimeoutRef.current = setTimeout(() => {\n // @ts-expect-error squirrelly deckglInstance typing\n const viewports = deckglInstance._deck.getViewports() ?? [];\n for (const vp of viewports) {\n handleViewStateChange({\n viewId: vp.id,\n viewState: {\n latitude: vp.latitude,\n longitude: vp.longitude,\n zoom: vp.zoom,\n id: vp.id,\n bounds: vp.getBounds(),\n width: params.width,\n height: params.height,\n },\n } as ViewStateChangeParameters);\n }\n }, 200);\n });\n\n const handleLoad = useEffectEvent(() => {\n //--- force update viewport state once all viewports initialized ---\n // @ts-expect-error squirrelly deckglInstance typing\n const viewports = deckglInstance._deck.getViewports() ?? [];\n for (const vp of viewports) {\n handleViewStateChange({\n viewId: vp.id,\n viewState: {\n latitude: vp.latitude,\n longitude: vp.longitude,\n zoom: vp.zoom,\n id: vp.id,\n bounds: vp.getBounds(),\n width: vp.width,\n height: vp.height,\n },\n } as ViewStateChangeParameters);\n }\n });\n\n return (\n <div id={container} className={className}>\n {enableControlEvents && <MapControls id={id} mapRef={mapRef} />}\n <MapProvider id={id}>\n <MapLibre\n onMove={(evt) => setCameraState(evt.viewState)}\n mapStyle={styleUrl}\n ref={mapRef}\n {...mapOptions}\n >\n <Deckgl\n {...rest}\n controller={controller}\n interleaved={interleaved}\n getCursor={handleGetCursor}\n useDevicePixels={useDevicePixels}\n onClick={handleClick}\n pickingRadius={pickingRadius ?? PICKING_RADIUS}\n onHover={handleHover}\n onLoad={handleLoad}\n onResize={handleResize}\n onViewStateChange={handleViewStateChange}\n // @ts-expect-error - DeckglProps parameters type is overly strict for WebGL parameter spreading.\n // The merged object is valid at runtime but TypeScript cannot verify all possible parameter combinations.\n parameters={{ ...PARAMETERS, ...parameters }}\n >\n <AddDeckglControl />\n {children}\n </Deckgl>\n </MapLibre>\n </MapProvider>\n </div>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["CANVAS_CONTEXT_ATTRIBUTES: WebGLContextAttributesWithType","MapLibre"],"sources":["../../../src/deckgl/base-map/index.tsx"],"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\n'use client';\n\nimport { useEffectEvent, useEmit } from '@accelint/bus/react';\nimport { Deckgl, useDeckgl } from '@deckgl-fiber-renderer/dom';\nimport type { PickingInfo, ViewStateChangeParameters } from '@deck.gl/core';\nimport 'client-only';\nimport { useCallback, useId, useMemo, useRef } from 'react';\nimport {\n Map as MapLibre,\n type MapRef,\n useControl,\n type ViewState,\n} from 'react-map-gl/maplibre';\nimport { useMapCamera } from '../../camera';\nimport { getCursor } from '../../map-cursor/store';\nimport { getMapGeneration } from '../../shared/cleanup';\nimport { DEFAULT_VIEW_STATE } from '../../shared/constants';\nimport { DARK_BASE_MAP_STYLE, PARAMETERS, PICKING_RADIUS } from './constants';\nimport { MapControls } from './controls';\nimport { MapEvents } from './events';\nimport { MapProvider } from './provider';\nimport type { IControl, WebGLContextAttributesWithType } from 'maplibre-gl';\nimport type { MjolnirGestureEvent, MjolnirPointerEvent } from 'mjolnir.js';\nimport type {\n BaseMapProps,\n MapClickEvent,\n MapHoverEvent,\n MapViewportEvent,\n SerializablePickingInfo,\n} from './types';\n\nconst CANVAS_CONTEXT_ATTRIBUTES: WebGLContextAttributesWithType = {\n antialias: true,\n powerPreference: 'high-performance',\n preserveDrawingBuffer: false,\n failIfMajorPerformanceCaveat: false,\n desynchronized: false,\n contextType: 'webgl2',\n} as const;\n\n/**\n * Serializes PickingInfo for event bus transmission.\n * Omits viewport, layer, and sourceLayer (contain functions) but preserves layer IDs.\n *\n * @param info - The PickingInfo object from Deck.gl\n * @returns Serializable picking info with layer IDs extracted\n */\nfunction serializePickingInfo(info: PickingInfo): SerializablePickingInfo {\n const { viewport, layer, sourceLayer, ...infoRest } = info;\n return {\n layerId: layer?.id,\n sourceLayerId: sourceLayer?.id,\n ...infoRest,\n };\n}\n\n/**\n * Strips non-serializable properties from MjolnirGestureEvent for event bus transmission.\n * Removes functions, DOM elements, and PointerEvent objects that cannot be cloned.\n *\n * @param event - The MjolnirGestureEvent from Deck.gl\n * @returns Serializable gesture event with non-cloneable properties removed\n */\nfunction serializeMjolnirEvent(\n event: MjolnirGestureEvent,\n): Omit<\n MjolnirGestureEvent,\n | 'stopPropagation'\n | 'preventDefault'\n | 'stopImmediatePropagation'\n | 'srcEvent'\n | 'rootElement'\n | 'target'\n | 'changedPointers'\n | 'pointers'\n>;\n/**\n * Strips non-serializable properties from MjolnirPointerEvent for event bus transmission.\n * Removes functions and DOM elements that cannot be cloned.\n *\n * @param event - The MjolnirPointerEvent from Deck.gl\n * @returns Serializable pointer event with non-cloneable properties removed\n */\nfunction serializeMjolnirEvent(\n event: MjolnirPointerEvent,\n): Omit<\n MjolnirPointerEvent,\n | 'stopPropagation'\n | 'preventDefault'\n | 'stopImmediatePropagation'\n | 'srcEvent'\n | 'rootElement'\n | 'target'\n>;\nfunction serializeMjolnirEvent(\n event: MjolnirGestureEvent | MjolnirPointerEvent,\n) {\n const {\n stopImmediatePropagation,\n stopPropagation,\n preventDefault,\n srcEvent,\n rootElement,\n target,\n ...rest\n } = event;\n\n // Remove pointer arrays if present (only on MjolnirGestureEvent)\n if ('changedPointers' in rest) {\n const { changedPointers, pointers, ...gestureRest } = rest;\n return gestureRest;\n }\n\n return rest;\n}\n\n/**\n * Internal component that registers the Deck.gl instance as a MapLibre control.\n * Enables the Deck.gl canvas to render within the MapLibre GL map container.\n *\n * @returns null (headless component)\n */\nfunction AddDeckglControl() {\n const deckglInstance = useDeckgl();\n useControl(() => deckglInstance as IControl);\n\n return null;\n}\n\n/**\n * A React component that provides a Deck.gl-powered base map with MapLibre GL integration.\n *\n * This component serves as the foundation for building interactive map applications with\n * support for click and hover events through a centralized event bus. It integrates\n * Deck.gl for 3D visualizations with MapLibre GL for the base map tiles.\n *\n * **Map Mode Integration**: BaseMap automatically creates a `MapProvider` internally,\n * which sets up the map mode state management for this instance.\n * - **Children**: Only Deck.gl layer components can be rendered as children. Custom Deck.gl\n * layers can use `useMapMode()` without parameters to access context.\n * - **Siblings**: UI components (buttons, toolbars, etc.) must be rendered as siblings\n * and pass `id` to `useMapMode(id)`.\n *\n * **Event Bus**: Click and hover events are emitted through the event bus with the `id`\n * included in the payload, allowing multiple map instances to coexist without interference.\n *\n * @param props - Component props including id (required), className, onClick, onHover, and all Deck.gl props\n * @returns A map component with Deck.gl and MapLibre GL integration\n *\n * @example\n * Basic usage with id (recommended: module-level constant):\n * ```tsx\n * import { BaseMap } from '@accelint/map-toolkit/deckgl';\n * import { View } from '@deckgl-fiber-renderer/dom';\n * import { uuid } from '@accelint/core';\n *\n * // Create id at module level for stability and easy sharing\n * const MAIN_MAP_ID = uuid();\n *\n * export function MapView() {\n * return (\n * <BaseMap className=\"w-full h-full\" id={MAIN_MAP_ID}>\n * <View id=\"main\" controller />\n * </BaseMap>\n * );\n * }\n * ```\n *\n * @example\n * With map mode and event handlers (module-level constant for sharing):\n * ```tsx\n * import { BaseMap } from '@accelint/map-toolkit/deckgl';\n * import { useMapMode } from '@accelint/map-toolkit/map-mode';\n * import { uuid } from '@accelint/core';\n * import type { PickingInfo } from '@deck.gl/core';\n * import type { MjolnirGestureEvent } from 'mjolnir.js';\n *\n * // Module-level constant - stable and shareable across all components\n * const MAIN_MAP_ID = uuid();\n *\n * function Toolbar() {\n * // Access map mode using the shared id\n * const { mode, requestModeChange } = useMapMode(MAIN_MAP_ID);\n * return <div>Current mode: {mode}</div>;\n * }\n *\n * export function InteractiveMap() {\n * const handleClick = (info: PickingInfo, event: MjolnirGestureEvent) => {\n * console.log('Clicked:', info.object);\n * };\n *\n * return (\n * <div className=\"relative w-full h-full\">\n * <BaseMap className=\"absolute inset-0\" id={MAIN_MAP_ID} onClick={handleClick}>\n * <View id=\"main\" controller />\n * </BaseMap>\n * <Toolbar />\n * </div>\n * );\n * }\n * ```\n */\nexport function BaseMap({\n id,\n className,\n children,\n controller = true,\n enableControlEvents = true,\n interleaved = true,\n parameters = {},\n styleUrl = DARK_BASE_MAP_STYLE,\n useDevicePixels = false,\n widgets: widgetsProp = [],\n defaultView = '2D',\n initialViewState,\n onClick,\n onHover,\n onViewStateChange,\n pickingRadius,\n ...rest\n}: BaseMapProps) {\n const mapGeneration = getMapGeneration(id);\n const deckglInstance = useDeckgl();\n const container = useId();\n const mapRef = useRef<MapRef>(null);\n\n const { cameraState, setCameraState } = useMapCamera(id, {\n view: defaultView,\n zoom: initialViewState?.zoom ?? DEFAULT_VIEW_STATE.zoom,\n latitude: initialViewState?.latitude ?? DEFAULT_VIEW_STATE.latitude,\n longitude: initialViewState?.longitude ?? DEFAULT_VIEW_STATE.longitude,\n });\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: we only need to recompute when cameraState changes.\n const viewState = useMemo<ViewState>(\n () => ({\n // @ts-expect-error squirrelly deckglInstance typing\n ...(deckglInstance?._deck?._getViewState() as ViewState),\n ...cameraState,\n bearing: cameraState.rotation,\n }),\n [cameraState],\n );\n\n // Memoize MapLibre options to avoid creating new object on every render\n const mapOptions = useMemo(\n () => ({\n container,\n zoom: viewState.zoom,\n pitch: viewState.pitch,\n bearing: viewState.bearing,\n latitude: viewState.latitude,\n longitude: viewState.longitude,\n doubleClickZoom: false,\n dragRotate: false,\n pitchWithRotate: false,\n rollEnabled: false,\n attributionControl: { compact: true },\n projection: cameraState.projection,\n maxPitch: cameraState.view === '2D' ? 0 : 85,\n canvasContextAttributes: CANVAS_CONTEXT_ATTRIBUTES,\n }),\n [viewState, container, cameraState.projection, cameraState.view],\n );\n\n const emitClick = useEmit<MapClickEvent>(MapEvents.click);\n const emitHover = useEmit<MapHoverEvent>(MapEvents.hover);\n const emitViewport = useEmit<MapViewportEvent>(MapEvents.viewport);\n\n const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n const handleClick = useCallback(\n (info: PickingInfo, event: MjolnirGestureEvent) => {\n // send full pickingInfo and event to user-defined onClick\n onClick?.(info, event);\n\n emitClick({\n info: serializePickingInfo(info),\n event: serializeMjolnirEvent(event),\n id,\n });\n },\n [emitClick, id, onClick],\n );\n\n const handleHover = useCallback(\n (info: PickingInfo, event: MjolnirPointerEvent) => {\n // send full pickingInfo and event to user-defined onHover\n onHover?.(info, event);\n\n emitHover({\n info: serializePickingInfo(info),\n event: serializeMjolnirEvent(event),\n id,\n });\n },\n [emitHover, id, onHover],\n );\n\n const handleGetCursor = useCallback(() => {\n return getCursor(id);\n }, [id]);\n\n const handleViewStateChange = useEffectEvent(\n (params: ViewStateChangeParameters) => {\n onViewStateChange?.(params);\n\n const {\n viewId,\n viewState: { latitude, longitude, zoom },\n } = params;\n\n // @ts-expect-error squirrelly deckglInstance typing\n const viewports = deckglInstance._deck?.getViewports();\n if (!viewports) {\n return;\n }\n\n // @ts-expect-error squirrelly deckglInstance typing\n const viewport = viewports.find((vp) => vp.id === viewId);\n\n if (!viewport) {\n return;\n }\n\n emitViewport({\n id,\n bounds: viewport?.getBounds(),\n latitude,\n longitude,\n zoom,\n width: viewport?.width ?? 0,\n height: viewport?.height ?? 0,\n });\n },\n );\n\n const handleResize = useEffectEvent((params) => {\n // Clear existing timeout\n if (resizeTimeoutRef.current) {\n clearTimeout(resizeTimeoutRef.current);\n }\n\n // Debounce\n resizeTimeoutRef.current = setTimeout(() => {\n // @ts-expect-error squirrelly deckglInstance typing\n const viewports = deckglInstance._deck?.getViewports();\n if (!viewports) {\n return;\n }\n for (const vp of viewports) {\n handleViewStateChange({\n viewId: vp.id,\n viewState: {\n latitude: vp.latitude,\n longitude: vp.longitude,\n zoom: vp.zoom,\n id: vp.id,\n bounds: vp.getBounds(),\n width: params.width,\n height: params.height,\n },\n } as ViewStateChangeParameters);\n }\n }, 200);\n });\n\n const handleLoad = useEffectEvent(() => {\n //--- force update viewport state once all viewports initialized ---\n // @ts-expect-error squirrelly deckglInstance typing\n const viewports = deckglInstance._deck?.getViewports();\n if (!viewports) {\n return;\n }\n for (const vp of viewports) {\n handleViewStateChange({\n viewId: vp.id,\n viewState: {\n latitude: vp.latitude,\n longitude: vp.longitude,\n zoom: vp.zoom,\n id: vp.id,\n bounds: vp.getBounds(),\n width: vp.width,\n height: vp.height,\n },\n } as ViewStateChangeParameters);\n }\n });\n\n return (\n <div id={container} className={className}>\n {enableControlEvents && <MapControls id={id} mapRef={mapRef} />}\n <MapProvider id={id}>\n <MapLibre\n key={mapGeneration}\n onMove={(evt) => {\n setCameraState(evt.viewState);\n }}\n mapStyle={styleUrl}\n ref={mapRef}\n {...mapOptions}\n >\n <Deckgl\n {...rest}\n controller={controller}\n interleaved={interleaved}\n getCursor={handleGetCursor}\n useDevicePixels={useDevicePixels}\n onClick={handleClick}\n pickingRadius={pickingRadius ?? PICKING_RADIUS}\n onHover={handleHover}\n onLoad={handleLoad}\n onResize={handleResize}\n onViewStateChange={handleViewStateChange}\n // @ts-expect-error - DeckglProps parameters type is overly strict for WebGL parameter spreading.\n // The merged object is valid at runtime but TypeScript cannot verify all possible parameter combinations.\n parameters={{ ...PARAMETERS, ...parameters }}\n >\n <AddDeckglControl />\n {children}\n </Deckgl>\n </MapLibre>\n </MapProvider>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,4BAA4D;CAChE,WAAW;CACX,iBAAiB;CACjB,uBAAuB;CACvB,8BAA8B;CAC9B,gBAAgB;CAChB,aAAa;CACd;;;;;;;;AASD,SAAS,qBAAqB,MAA4C;CACxE,MAAM,EAAE,UAAU,OAAO,aAAa,GAAG,aAAa;AACtD,QAAO;EACL,SAAS,OAAO;EAChB,eAAe,aAAa;EAC5B,GAAG;EACJ;;AAyCH,SAAS,sBACP,OACA;CACA,MAAM,EACJ,0BACA,iBACA,gBACA,UACA,aACA,QACA,GAAG,SACD;AAGJ,KAAI,qBAAqB,MAAM;EAC7B,MAAM,EAAE,iBAAiB,UAAU,GAAG,gBAAgB;AACtD,SAAO;;AAGT,QAAO;;;;;;;;AAST,SAAS,mBAAmB;CAC1B,MAAM,iBAAiB,WAAW;AAClC,kBAAiB,eAA2B;AAE5C,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4ET,SAAgB,QAAQ,EACtB,IACA,WACA,UACA,aAAa,MACb,sBAAsB,MACtB,cAAc,MACd,aAAa,EAAE,EACf,WAAW,qBACX,kBAAkB,OAClB,SAAS,cAAc,EAAE,EACzB,cAAc,MACd,kBACA,SACA,SACA,mBACA,eACA,GAAG,QACY;CACf,MAAM,gBAAgB,iBAAiB,GAAG;CAC1C,MAAM,iBAAiB,WAAW;CAClC,MAAM,YAAY,OAAO;CACzB,MAAM,SAAS,OAAe,KAAK;CAEnC,MAAM,EAAE,aAAa,mBAAmB,aAAa,IAAI;EACvD,MAAM;EACN,MAAM,kBAAkB,QAAQ,mBAAmB;EACnD,UAAU,kBAAkB,YAAY,mBAAmB;EAC3D,WAAW,kBAAkB,aAAa,mBAAmB;EAC9D,CAAC;CAGF,MAAM,YAAY,eACT;EAEL,GAAI,gBAAgB,OAAO,eAAe;EAC1C,GAAG;EACH,SAAS,YAAY;EACtB,GACD,CAAC,YAAY,CACd;CAGD,MAAM,aAAa,eACV;EACL;EACA,MAAM,UAAU;EAChB,OAAO,UAAU;EACjB,SAAS,UAAU;EACnB,UAAU,UAAU;EACpB,WAAW,UAAU;EACrB,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;EACjB,aAAa;EACb,oBAAoB,EAAE,SAAS,MAAM;EACrC,YAAY,YAAY;EACxB,UAAU,YAAY,SAAS,OAAO,IAAI;EAC1C,yBAAyB;EAC1B,GACD;EAAC;EAAW;EAAW,YAAY;EAAY,YAAY;EAAK,CACjE;CAED,MAAM,YAAY,QAAuB,UAAU,MAAM;CACzD,MAAM,YAAY,QAAuB,UAAU,MAAM;CACzD,MAAM,eAAe,QAA0B,UAAU,SAAS;CAElE,MAAM,mBAAmB,OAA8B,KAAK;CAE5D,MAAM,cAAc,aACjB,MAAmB,UAA+B;AAEjD,YAAU,MAAM,MAAM;AAEtB,YAAU;GACR,MAAM,qBAAqB,KAAK;GAChC,OAAO,sBAAsB,MAAM;GACnC;GACD,CAAC;IAEJ;EAAC;EAAW;EAAI;EAAQ,CACzB;CAED,MAAM,cAAc,aACjB,MAAmB,UAA+B;AAEjD,YAAU,MAAM,MAAM;AAEtB,YAAU;GACR,MAAM,qBAAqB,KAAK;GAChC,OAAO,sBAAsB,MAAM;GACnC;GACD,CAAC;IAEJ;EAAC;EAAW;EAAI;EAAQ,CACzB;CAED,MAAM,kBAAkB,kBAAkB;AACxC,SAAO,UAAU,GAAG;IACnB,CAAC,GAAG,CAAC;CAER,MAAM,wBAAwB,gBAC3B,WAAsC;AACrC,sBAAoB,OAAO;EAE3B,MAAM,EACJ,QACA,WAAW,EAAE,UAAU,WAAW,WAChC;EAGJ,MAAM,YAAY,eAAe,OAAO,cAAc;AACtD,MAAI,CAAC,UACH;EAIF,MAAM,WAAW,UAAU,MAAM,OAAO,GAAG,OAAO,OAAO;AAEzD,MAAI,CAAC,SACH;AAGF,eAAa;GACX;GACA,QAAQ,UAAU,WAAW;GAC7B;GACA;GACA;GACA,OAAO,UAAU,SAAS;GAC1B,QAAQ,UAAU,UAAU;GAC7B,CAAC;GAEL;CAED,MAAM,eAAe,gBAAgB,WAAW;AAE9C,MAAI,iBAAiB,QACnB,cAAa,iBAAiB,QAAQ;AAIxC,mBAAiB,UAAU,iBAAiB;GAE1C,MAAM,YAAY,eAAe,OAAO,cAAc;AACtD,OAAI,CAAC,UACH;AAEF,QAAK,MAAM,MAAM,UACf,uBAAsB;IACpB,QAAQ,GAAG;IACX,WAAW;KACT,UAAU,GAAG;KACb,WAAW,GAAG;KACd,MAAM,GAAG;KACT,IAAI,GAAG;KACP,QAAQ,GAAG,WAAW;KACtB,OAAO,OAAO;KACd,QAAQ,OAAO;KAChB;IACF,CAA8B;KAEhC,IAAI;GACP;CAEF,MAAM,aAAa,qBAAqB;EAGtC,MAAM,YAAY,eAAe,OAAO,cAAc;AACtD,MAAI,CAAC,UACH;AAEF,OAAK,MAAM,MAAM,UACf,uBAAsB;GACpB,QAAQ,GAAG;GACX,WAAW;IACT,UAAU,GAAG;IACb,WAAW,GAAG;IACd,MAAM,GAAG;IACT,IAAI,GAAG;IACP,QAAQ,GAAG,WAAW;IACtB,OAAO,GAAG;IACV,QAAQ,GAAG;IACZ;GACF,CAA8B;GAEjC;AAEF,QACE,qBAAC;EAAI,IAAI;EAAsB;aAC5B,uBAAuB,oBAAC;GAAgB;GAAY;IAAU,EAC/D,oBAAC;GAAgB;aACf,oBAACC;IAEC,SAAS,QAAQ;AACf,oBAAe,IAAI,UAAU;;IAE/B,UAAU;IACV,KAAK;IACL,GAAI;cAEJ,qBAAC;KACC,GAAI;KACQ;KACC;KACb,WAAW;KACM;KACjB,SAAS;KACT,eAAe,iBAAiB;KAChC,SAAS;KACT,QAAQ;KACR,UAAU;KACV,mBAAmB;KAGnB,YAAY;MAAE,GAAG;MAAY,GAAG;MAAY;gBAE5C,oBAAC,qBAAmB,EACnB;MACM;MA1BJ,cA2BI;IACC;GACV"}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
import { ReactNode } from "react";
|
|
14
14
|
import { UniqueId } from "@accelint/core";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
16
16
|
|
|
17
17
|
//#region src/deckgl/base-map/provider.d.ts
|
|
18
18
|
/**
|
|
@@ -139,7 +139,7 @@ type MapProviderProps = {
|
|
|
139
139
|
declare function MapProvider({
|
|
140
140
|
children,
|
|
141
141
|
id
|
|
142
|
-
}: MapProviderProps):
|
|
142
|
+
}: MapProviderProps): react_jsx_runtime0.JSX.Element;
|
|
143
143
|
//#endregion
|
|
144
144
|
export { MapContext, MapProvider, MapProviderProps };
|
|
145
145
|
//# sourceMappingURL=provider.d.ts.map
|
|
@@ -13,8 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
'use client';
|
|
15
15
|
|
|
16
|
-
import {
|
|
17
|
-
import { clearMapModeState } from "../../map-mode/store.js";
|
|
16
|
+
import { clearAllMapStores } from "../../shared/cleanup.js";
|
|
18
17
|
import { createContext, useEffect } from "react";
|
|
19
18
|
import { jsx } from "react/jsx-runtime";
|
|
20
19
|
|
|
@@ -114,8 +113,7 @@ const MapContext = createContext(null);
|
|
|
114
113
|
function MapProvider({ children, id }) {
|
|
115
114
|
useEffect(() => {
|
|
116
115
|
return () => {
|
|
117
|
-
|
|
118
|
-
clearCursorState(id);
|
|
116
|
+
clearAllMapStores(id);
|
|
119
117
|
};
|
|
120
118
|
}, [id]);
|
|
121
119
|
return /* @__PURE__ */ jsx(MapContext.Provider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"provider.js","names":[],"sources":["../../../src/deckgl/base-map/provider.tsx"],"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\n'use client';\n\nimport 'client-only';\nimport { createContext, type ReactNode, useEffect } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"provider.js","names":[],"sources":["../../../src/deckgl/base-map/provider.tsx"],"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\n'use client';\n\nimport 'client-only';\nimport { createContext, type ReactNode, useEffect } from 'react';\nimport { clearAllMapStores } from '../../shared/cleanup';\nimport type { UniqueId } from '@accelint/core';\n\n/**\n * React context for map ID.\n * Use the `useMapMode` hook to access the map mode state.\n */\nexport const MapContext = createContext<UniqueId | null>(null);\n\n/**\n * Props for the MapProvider component.\n */\nexport type MapProviderProps = {\n /** Child components that will have access to map mode context */\n children: ReactNode;\n /**\n * Unique identifier for this map instance.\n *\n * Used to isolate mode changes between different map instances (e.g., main map vs minimap).\n * This is required and should be provided by the parent component (typically BaseMap).\n *\n * @example\n * ```tsx\n * // Multiple independent map instances\n * const mainMapId = uuid();\n * const minimapId = uuid();\n *\n * <MapProvider id={mainMapId}>\n * // Map layers and components\n * </MapProvider>\n *\n * <MapProvider id={minimapId}>\n * // Minimap layers and components\n * </MapProvider>\n * ```\n */\n id: UniqueId;\n};\n\n/**\n * Provider component for managing map modes with ownership and authorization.\n *\n * **Note**: This provider is used internally by `BaseMap` and should not be used directly.\n * Consumers should pass the `id` prop to `BaseMap`, which will create this provider automatically.\n *\n * This component uses a hybrid architecture combining React Context (for map instance identity)\n * with module-level state management (for map mode state). The provider:\n * - Provides a unique `id` via Context\n * - Cleans up map mode state when unmounted\n * - Allows components to subscribe to mode changes via `useMapMode` hook (which uses `useSyncExternalStore`)\n *\n * The module-level state management system implements a state machine for map modes where\n * components can request mode changes with ownership. When a mode is owned by a component,\n * other components must request authorization to change to a different mode. The system handles:\n *\n * - Automatic mode changes when no ownership conflicts exist\n * - Authorization flow when switching between owned modes\n * - Per-mode ownership tracking that persists throughout the session\n * - Pending request management (one pending request per requester)\n * - Auto-acceptance of first pending request when mode owner returns to default\n * - Auto-rejection of other pending requests when one is approved\n * - Event emission through a centralized event bus\n * - Instance isolation for multiple map scenarios (main map + minimap)\n * - Always initializes in 'default' mode\n *\n * ## Instance Isolation\n *\n * Each MapProvider instance operates independently. Mode changes in one instance\n * do not affect other instances, even when multiple maps are rendered on the same page.\n * This enables scenarios like:\n * - Main map in \"drawing\" mode while minimap stays in \"view\" mode\n * - Multiple independent map views with different interaction modes\n *\n * Events are scoped to specific instances using the `id` prop. The event bus\n * filters events to ensure each provider only responds to events for its own instance.\n *\n * ## Pending Request Behavior\n *\n * - Pending requests are stored by requester ID (not mode owner)\n * - Each requester can have only one pending request at a time\n * - New requests from the same requester auto-replace previous requests\n * - Pending requests persist when mode owner switches between their own modes\n * - When any request is approved, all other pending requests are auto-rejected\n * - When mode owner returns to default mode:\n * - If first pending request is for default mode, all pending requests are rejected (already in requested mode)\n * - If first pending request is for a different mode, that request is auto-approved and others are rejected\n *\n * ## Instance ID Stability and Lifecycle\n *\n * The provider's cleanup mechanism (via `useEffect`) ensures proper state management:\n * - Map mode state is cleaned up when the provider unmounts\n * - Changing the `id` prop will trigger cleanup of the old state via the effect dependency\n * - State is lazily initialized on first subscription (no manual creation needed)\n *\n * While the `id` prop should typically remain stable (created as a module-level constant\n * or with `useState`), changing it will work correctly due to the cleanup mechanism.\n *\n * @param props - Provider props including children and required id\n * @returns Provider component that wraps children with map instance identity context\n *\n * @example\n * Internal usage within BaseMap:\n * ```tsx\n * // BaseMap automatically creates the provider\n * function BaseMap({ id, children, ...props }: BaseMapProps) {\n * return (\n * <div>\n * <MapProvider id={id}>\n * <Deckgl {...props}>\n * {children}\n * </Deckgl>\n * </MapProvider>\n * </div>\n * );\n * }\n * ```\n *\n * @example\n * With authorization handling - use id in event payloads:\n * ```tsx\n * useOn(MapModeEvents.changeAuthorization, (event) => {\n * const { authId, id } = event.payload;\n * emitDecision({ authId, approved: true, owner: 'tool', id });\n * });\n * ```\n */\nexport function MapProvider({ children, id }: MapProviderProps) {\n // Cleanup when component unmounts\n // State is created automatically on first subscription in useMapMode/useMapCursor/useMapCamera\n useEffect(() => {\n return () => {\n clearAllMapStores(id);\n };\n }, [id]);\n\n return <MapContext.Provider value={id}>{children}</MapContext.Provider>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,aAAa,cAA+B,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuH9D,SAAgB,YAAY,EAAE,UAAU,MAAwB;AAG9D,iBAAgB;AACd,eAAa;AACX,qBAAkB,GAAG;;IAEtB,CAAC,GAAG,CAAC;AAER,QAAO,oBAAC,WAAW;EAAS,OAAO;EAAK;GAA+B"}
|
package/dist/deckgl/index.js
CHANGED
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
import { MapEvents, MapEventsNamespace } from "./base-map/events.js";
|
|
15
|
+
import { ShapeEvents } from "./shapes/shared/events.js";
|
|
16
|
+
import { ShapeFeatureType } from "./shapes/shared/types.js";
|
|
17
|
+
import { DASH_ARRAYS, DEFAULT_COLORS, DEFAULT_STYLE_PROPERTIES, LINE_PATTERNS, LINE_WIDTHS, SHAPE_LAYER_IDS } from "./shapes/shared/constants.js";
|
|
15
18
|
import { DARK_BASE_MAP_STYLE, LIGHT_BASE_MAP_STYLE, PARAMETERS } from "./base-map/constants.js";
|
|
16
19
|
import { BaseMap } from "./base-map/index.js";
|
|
17
20
|
import { createSavedViewport } from "./saved-viewports/index.js";
|
|
18
|
-
import { DASH_ARRAYS, DEFAULT_COLORS, DEFAULT_STYLE_PROPERTIES, LINE_PATTERNS, LINE_WIDTHS, SHAPE_LAYER_IDS } from "./shapes/shared/constants.js";
|
|
19
|
-
import { ShapeEvents } from "./shapes/shared/events.js";
|
|
20
|
-
import { ShapeFeatureType } from "./shapes/shared/types.js";
|
|
21
21
|
import { DisplayShapeLayer } from "./shapes/display-shape-layer/index.js";
|
|
22
22
|
import { SymbolLayer } from "./symbol-layer/index.js";
|
|
23
23
|
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
|
|
14
14
|
'use client';
|
|
15
15
|
|
|
16
|
-
import { DASH_ARRAYS, SHAPE_LAYER_IDS } from "../shared/constants.js";
|
|
17
16
|
import { ShapeEvents } from "../shared/events.js";
|
|
17
|
+
import { DASH_ARRAYS, SHAPE_LAYER_IDS } from "../shared/constants.js";
|
|
18
18
|
import { getDashArray, getFillColor, getLineColor } from "../shared/utils/style-utils.js";
|
|
19
19
|
import { COFFIN_CORNERS, DEFAULT_DISPLAY_PROPS, MAP_INTERACTION } from "./constants.js";
|
|
20
20
|
import { createShapeLabelLayer } from "./shape-label-layer.js";
|
|
@@ -96,7 +96,13 @@ const shapeSelectionStore = createMapStore({
|
|
|
96
96
|
* ```
|
|
97
97
|
*/
|
|
98
98
|
const useSelectShape = shapeSelectionStore.use;
|
|
99
|
+
/**
|
|
100
|
+
* Clear selection state (for tests/cleanup)
|
|
101
|
+
*/
|
|
102
|
+
function clearSelectionState(mapId) {
|
|
103
|
+
shapeSelectionStore.clear(mapId);
|
|
104
|
+
}
|
|
99
105
|
|
|
100
106
|
//#endregion
|
|
101
|
-
export { shapeSelectionStore };
|
|
107
|
+
export { clearSelectionState, shapeSelectionStore };
|
|
102
108
|
//# sourceMappingURL=store.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"store.js","names":[],"sources":["../../../../src/deckgl/shapes/display-shape-layer/store.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\n/**\n * Shape Selection Store\n *\n * Manages shape selection state per map instance.\n *\n * @example\n * ```tsx\n * import { shapeSelectionStore } from '@accelint/map-toolkit/deckgl/shapes';\n *\n * function ShapePanel({ mapId }) {\n * const { state, setSelectedId, clearSelection } = shapeSelectionStore.use(mapId);\n *\n * return (\n * <div>\n * <p>Selected: {state.selectedId ?? 'none'}</p>\n * <button onClick={() => setSelectedId('shape-1')}>Select Shape 1</button>\n * <button onClick={clearSelection}>Clear</button>\n * </div>\n * );\n * }\n *\n * // Or with selector for specific values:\n * function SelectedIndicator({ mapId }) {\n * const selectedId = shapeSelectionStore.useSelector(\n * mapId,\n * (s) => s.selectedId\n * );\n * return selectedId ? <Badge>Selected</Badge> : null;\n * }\n * ```\n */\n\nimport { Broadcast } from '@accelint/bus';\nimport { createMapStore } from '@/shared/create-map-store';\nimport { MapEvents } from '../../base-map/events';\nimport { ShapeEvents } from '../shared/events';\nimport type { UniqueId } from '@accelint/core';\nimport type { MapClickEvent, MapEventType } from '../../base-map/types';\nimport type { ShapeEvent } from '../shared/events';\nimport type { ShapeId } from '../shared/types';\n\n/**\n * State shape for shape selection\n */\ntype ShapeSelectionState = {\n selectedId: ShapeId | undefined;\n};\n\n/**\n * Actions for shape selection\n */\ntype ShapeSelectionActions = {\n /** Set the selected shape ID (emits appropriate events) */\n setSelectedId: (id: ShapeId | undefined) => void;\n /** Clear the current selection */\n clearSelection: () => void;\n};\n\nconst shapeBus = Broadcast.getInstance<ShapeEvent>();\nconst mapBus = Broadcast.getInstance<MapEventType>();\n\n/**\n * Shape selection store\n */\nexport const shapeSelectionStore = createMapStore<\n ShapeSelectionState,\n ShapeSelectionActions\n>({\n defaultState: { selectedId: undefined },\n\n actions: (mapId, { get }) => ({\n setSelectedId: (id: ShapeId | undefined) => {\n const currentId = get().selectedId;\n\n if (id === undefined && currentId !== undefined) {\n // Emit deselection event\n shapeBus.emit(ShapeEvents.deselected, { mapId });\n } else if (id !== undefined && currentId !== id) {\n // Emit selection event\n shapeBus.emit(ShapeEvents.selected, { shapeId: id, mapId });\n }\n },\n\n clearSelection: () => {\n shapeBus.emit(ShapeEvents.deselected, { mapId });\n },\n }),\n\n bus: (mapId, { get, set }) => {\n // Listen for shape selection events\n const unsubSelected = shapeBus.on(ShapeEvents.selected, (event) => {\n if (event.payload.mapId !== mapId) {\n return;\n }\n if (get().selectedId !== event.payload.shapeId) {\n set({ selectedId: event.payload.shapeId });\n }\n });\n\n // Listen for shape deselection events\n const unsubDeselected = shapeBus.on(ShapeEvents.deselected, (event) => {\n if (event.payload.mapId !== mapId) {\n return;\n }\n if (get().selectedId !== undefined) {\n set({ selectedId: undefined });\n }\n });\n\n // Listen for map clicks to detect clicks on empty space\n const unsubClick = mapBus.on(MapEvents.click, (event: MapClickEvent) => {\n // Deselect if clicked on empty space (index === -1)\n if (\n get().selectedId !== undefined &&\n event.payload.id === mapId &&\n event.payload.info.index === -1\n ) {\n shapeBus.emit(ShapeEvents.deselected, { mapId });\n }\n });\n\n return () => {\n unsubSelected();\n unsubDeselected();\n unsubClick();\n };\n },\n});\n\n// =============================================================================\n// Convenience exports for common patterns\n// =============================================================================\n\n/**\n * Hook for shape selection - primary API\n *\n * @example\n * ```tsx\n * const { state, setSelectedId, clearSelection } = useSelectShape(mapId);\n * ```\n */\nexport const useSelectShape = shapeSelectionStore.use;\n\n/**\n * Hook to get just the selected ID\n *\n * @example\n * ```tsx\n * const selectedId = useSelectedShapeId(mapId);\n * ```\n */\nexport function useSelectedShapeId(mapId: UniqueId): ShapeId | undefined {\n return shapeSelectionStore.useSelector(mapId, (s) => s.selectedId);\n}\n\n/**\n * Get selected shape ID imperatively (non-reactive)\n */\nexport function getSelectedShapeId(mapId: UniqueId): ShapeId | undefined {\n return shapeSelectionStore.get(mapId).selectedId;\n}\n\n/**\n * Clear selection state (for tests/cleanup)\n */\nexport function clearSelectionState(mapId: UniqueId): void {\n shapeSelectionStore.clear(mapId);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,MAAM,WAAW,UAAU,aAAyB;AACpD,MAAM,SAAS,UAAU,aAA2B;;;;AAKpD,MAAa,sBAAsB,eAGjC;CACA,cAAc,EAAE,YAAY,QAAW;CAEvC,UAAU,OAAO,EAAE,WAAW;EAC5B,gBAAgB,OAA4B;GAC1C,MAAM,YAAY,KAAK,CAAC;AAExB,OAAI,OAAO,UAAa,cAAc,OAEpC,UAAS,KAAK,YAAY,YAAY,EAAE,OAAO,CAAC;YACvC,OAAO,UAAa,cAAc,GAE3C,UAAS,KAAK,YAAY,UAAU;IAAE,SAAS;IAAI;IAAO,CAAC;;EAI/D,sBAAsB;AACpB,YAAS,KAAK,YAAY,YAAY,EAAE,OAAO,CAAC;;EAEnD;CAED,MAAM,OAAO,EAAE,KAAK,UAAU;EAE5B,MAAM,gBAAgB,SAAS,GAAG,YAAY,WAAW,UAAU;AACjE,OAAI,MAAM,QAAQ,UAAU,MAC1B;AAEF,OAAI,KAAK,CAAC,eAAe,MAAM,QAAQ,QACrC,KAAI,EAAE,YAAY,MAAM,QAAQ,SAAS,CAAC;IAE5C;EAGF,MAAM,kBAAkB,SAAS,GAAG,YAAY,aAAa,UAAU;AACrE,OAAI,MAAM,QAAQ,UAAU,MAC1B;AAEF,OAAI,KAAK,CAAC,eAAe,OACvB,KAAI,EAAE,YAAY,QAAW,CAAC;IAEhC;EAGF,MAAM,aAAa,OAAO,GAAG,UAAU,QAAQ,UAAyB;AAEtE,OACE,KAAK,CAAC,eAAe,UACrB,MAAM,QAAQ,OAAO,SACrB,MAAM,QAAQ,KAAK,UAAU,GAE7B,UAAS,KAAK,YAAY,YAAY,EAAE,OAAO,CAAC;IAElD;AAEF,eAAa;AACX,kBAAe;AACf,oBAAiB;AACjB,eAAY;;;CAGjB,CAAC;;;;;;;;;AAcF,MAAa,iBAAiB,oBAAoB"}
|
|
1
|
+
{"version":3,"file":"store.js","names":[],"sources":["../../../../src/deckgl/shapes/display-shape-layer/store.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\n/**\n * Shape Selection Store\n *\n * Manages shape selection state per map instance.\n *\n * @example\n * ```tsx\n * import { shapeSelectionStore } from '@accelint/map-toolkit/deckgl/shapes';\n *\n * function ShapePanel({ mapId }) {\n * const { state, setSelectedId, clearSelection } = shapeSelectionStore.use(mapId);\n *\n * return (\n * <div>\n * <p>Selected: {state.selectedId ?? 'none'}</p>\n * <button onClick={() => setSelectedId('shape-1')}>Select Shape 1</button>\n * <button onClick={clearSelection}>Clear</button>\n * </div>\n * );\n * }\n *\n * // Or with selector for specific values:\n * function SelectedIndicator({ mapId }) {\n * const selectedId = shapeSelectionStore.useSelector(\n * mapId,\n * (s) => s.selectedId\n * );\n * return selectedId ? <Badge>Selected</Badge> : null;\n * }\n * ```\n */\n\nimport { Broadcast } from '@accelint/bus';\nimport { createMapStore } from '@/shared/create-map-store';\nimport { MapEvents } from '../../base-map/events';\nimport { ShapeEvents } from '../shared/events';\nimport type { UniqueId } from '@accelint/core';\nimport type { MapClickEvent, MapEventType } from '../../base-map/types';\nimport type { ShapeEvent } from '../shared/events';\nimport type { ShapeId } from '../shared/types';\n\n/**\n * State shape for shape selection\n */\ntype ShapeSelectionState = {\n selectedId: ShapeId | undefined;\n};\n\n/**\n * Actions for shape selection\n */\ntype ShapeSelectionActions = {\n /** Set the selected shape ID (emits appropriate events) */\n setSelectedId: (id: ShapeId | undefined) => void;\n /** Clear the current selection */\n clearSelection: () => void;\n};\n\nconst shapeBus = Broadcast.getInstance<ShapeEvent>();\nconst mapBus = Broadcast.getInstance<MapEventType>();\n\n/**\n * Shape selection store\n */\nexport const shapeSelectionStore = createMapStore<\n ShapeSelectionState,\n ShapeSelectionActions\n>({\n defaultState: { selectedId: undefined },\n\n actions: (mapId, { get }) => ({\n setSelectedId: (id: ShapeId | undefined) => {\n const currentId = get().selectedId;\n\n if (id === undefined && currentId !== undefined) {\n // Emit deselection event\n shapeBus.emit(ShapeEvents.deselected, { mapId });\n } else if (id !== undefined && currentId !== id) {\n // Emit selection event\n shapeBus.emit(ShapeEvents.selected, { shapeId: id, mapId });\n }\n },\n\n clearSelection: () => {\n shapeBus.emit(ShapeEvents.deselected, { mapId });\n },\n }),\n\n bus: (mapId, { get, set }) => {\n // Listen for shape selection events\n const unsubSelected = shapeBus.on(ShapeEvents.selected, (event) => {\n if (event.payload.mapId !== mapId) {\n return;\n }\n if (get().selectedId !== event.payload.shapeId) {\n set({ selectedId: event.payload.shapeId });\n }\n });\n\n // Listen for shape deselection events\n const unsubDeselected = shapeBus.on(ShapeEvents.deselected, (event) => {\n if (event.payload.mapId !== mapId) {\n return;\n }\n if (get().selectedId !== undefined) {\n set({ selectedId: undefined });\n }\n });\n\n // Listen for map clicks to detect clicks on empty space\n const unsubClick = mapBus.on(MapEvents.click, (event: MapClickEvent) => {\n // Deselect if clicked on empty space (index === -1)\n if (\n get().selectedId !== undefined &&\n event.payload.id === mapId &&\n event.payload.info.index === -1\n ) {\n shapeBus.emit(ShapeEvents.deselected, { mapId });\n }\n });\n\n return () => {\n unsubSelected();\n unsubDeselected();\n unsubClick();\n };\n },\n});\n\n// =============================================================================\n// Convenience exports for common patterns\n// =============================================================================\n\n/**\n * Hook for shape selection - primary API\n *\n * @example\n * ```tsx\n * const { state, setSelectedId, clearSelection } = useSelectShape(mapId);\n * ```\n */\nexport const useSelectShape = shapeSelectionStore.use;\n\n/**\n * Hook to get just the selected ID\n *\n * @example\n * ```tsx\n * const selectedId = useSelectedShapeId(mapId);\n * ```\n */\nexport function useSelectedShapeId(mapId: UniqueId): ShapeId | undefined {\n return shapeSelectionStore.useSelector(mapId, (s) => s.selectedId);\n}\n\n/**\n * Get selected shape ID imperatively (non-reactive)\n */\nexport function getSelectedShapeId(mapId: UniqueId): ShapeId | undefined {\n return shapeSelectionStore.get(mapId).selectedId;\n}\n\n/**\n * Clear selection state (for tests/cleanup)\n */\nexport function clearSelectionState(mapId: UniqueId): void {\n shapeSelectionStore.clear(mapId);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,MAAM,WAAW,UAAU,aAAyB;AACpD,MAAM,SAAS,UAAU,aAA2B;;;;AAKpD,MAAa,sBAAsB,eAGjC;CACA,cAAc,EAAE,YAAY,QAAW;CAEvC,UAAU,OAAO,EAAE,WAAW;EAC5B,gBAAgB,OAA4B;GAC1C,MAAM,YAAY,KAAK,CAAC;AAExB,OAAI,OAAO,UAAa,cAAc,OAEpC,UAAS,KAAK,YAAY,YAAY,EAAE,OAAO,CAAC;YACvC,OAAO,UAAa,cAAc,GAE3C,UAAS,KAAK,YAAY,UAAU;IAAE,SAAS;IAAI;IAAO,CAAC;;EAI/D,sBAAsB;AACpB,YAAS,KAAK,YAAY,YAAY,EAAE,OAAO,CAAC;;EAEnD;CAED,MAAM,OAAO,EAAE,KAAK,UAAU;EAE5B,MAAM,gBAAgB,SAAS,GAAG,YAAY,WAAW,UAAU;AACjE,OAAI,MAAM,QAAQ,UAAU,MAC1B;AAEF,OAAI,KAAK,CAAC,eAAe,MAAM,QAAQ,QACrC,KAAI,EAAE,YAAY,MAAM,QAAQ,SAAS,CAAC;IAE5C;EAGF,MAAM,kBAAkB,SAAS,GAAG,YAAY,aAAa,UAAU;AACrE,OAAI,MAAM,QAAQ,UAAU,MAC1B;AAEF,OAAI,KAAK,CAAC,eAAe,OACvB,KAAI,EAAE,YAAY,QAAW,CAAC;IAEhC;EAGF,MAAM,aAAa,OAAO,GAAG,UAAU,QAAQ,UAAyB;AAEtE,OACE,KAAK,CAAC,eAAe,UACrB,MAAM,QAAQ,OAAO,SACrB,MAAM,QAAQ,KAAK,UAAU,GAE7B,UAAS,KAAK,YAAY,YAAY,EAAE,OAAO,CAAC;IAElD;AAEF,eAAa;AACX,kBAAe;AACf,oBAAiB;AACjB,eAAY;;;CAGjB,CAAC;;;;;;;;;AAcF,MAAa,iBAAiB,oBAAoB;;;;AAwBlD,SAAgB,oBAAoB,OAAuB;AACzD,qBAAoB,MAAM,MAAM"}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import { DrawShapeLayerProps } from "./types.js";
|
|
14
|
-
import * as
|
|
14
|
+
import * as react_jsx_runtime2 from "react/jsx-runtime";
|
|
15
15
|
|
|
16
16
|
//#region src/deckgl/shapes/draw-shape-layer/index.d.ts
|
|
17
17
|
|
|
@@ -47,7 +47,7 @@ declare function DrawShapeLayer({
|
|
|
47
47
|
id,
|
|
48
48
|
mapId,
|
|
49
49
|
unit
|
|
50
|
-
}: DrawShapeLayerProps):
|
|
50
|
+
}: DrawShapeLayerProps): react_jsx_runtime2.JSX.Element | null;
|
|
51
51
|
//#endregion
|
|
52
52
|
export { DrawShapeLayer };
|
|
53
53
|
//# sourceMappingURL=index.d.ts.map
|