@accelint/map-toolkit 0.4.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @accelint/map-toolkit
 
+## 0.6.0
+
+### Minor Changes
+
+- 7c62ee3: Add display shapes layer to map-toolkit
+- cebdbe7: Expose styleUrl in BaseMap props, update BASE_MAP_STYLE constant to DARK_BASE_MAP_STYLE and provide LIGHT_BASE_MAP_STYLE constant
+
+### Patch Changes
+
+- a7d3a1e: Fix bad build by updating configs
+- aa296da: Update the shape labels and point icon behavior to match designs
+- Updated dependencies [308023f]
+  - @accelint/geo@0.5.0
+
+## 0.5.0
+
+### Minor Changes
+
+- dde1386: Introduced a new camera feature in map-toolkit:
+  Added camera state management, types, events, documentation, and Storybook stories.
+  Added tests for camera state logic.
+  Created a new postcss config for map-toolkit.
+  Updated deckgl base map to integrate camera controls.
+- 62da9ee: Add saved viewports library
+- b0a37a0: Add events to disable/enable panning and zoom via event bus.
+
+### Patch Changes
+
+- 208b48d: With the changes to the basemap we now are explicitly rendering a `<MapLibre>` component and attatching a ref manually as opposed to calling the previous hook. The underlying api changes so we have to account for that in the MapControls component
+
 ## 0.4.1
 
 ### Patch Changes

package/README.md

@@ -50,6 +50,9 @@ import { /* components */ } from '@accelint/map-toolkit/maplibre';
 
 // React/Fiber components
 import { /* components */ } from '@accelint/map-toolkit/deckgl/fiber';
+
+// React util function
+import { createSavedViewport } from '@accelint/map-toolkit/deckgl/saved-viewports';
 ```
 
 For detailed examples and interactive demos, see the [Storybook documentation](https://map-toolkit.accelint.io/?path=/docs/deckgl-symbol-layer--docs).

package/catalog-info.yaml

@@ -12,13 +12,14 @@ metadata:
     Dependencies:
 
     accelint_biome-config@1.0.2, accelint_bus@3.0.2, accelint_core@0.5.2,
-    accelint_design-foundation@2.0.0, accelint_design-toolkit@9.0.0,
-    accelint_geo@0.4.1, accelint_typescript-config@0.1.4,
+    accelint_design-foundation@2.0.0, accelint_design-toolkit@9.1.1,
+    accelint_geo@0.4.2, accelint_postcss-tailwind-css-modules@1.0.1,
+    accelint_smeegl@0.3.4, accelint_typescript-config@0.1.4,
     accelint_vitest-config@0.1.6
   annotations:
     backstage.io/edit-url: https://github.com/gohypergiant/standard-toolkit/blob/main/packages/map-toolkit/catalog-info.yaml
     backstage.io/techdocs-ref: dir:.
-    package/version: 0.4.1
+    package/version: 0.6.0
     github.com/project-slug: gohypergiant/standard-toolkit
   links:
     - url: https://github.com/gohypergiant/standard-toolkit/tree/main/packages/map-toolkit
@@ -41,5 +42,7 @@ spec:
     - component:accelint_design-foundation
     - component:accelint_design-toolkit
     - component:accelint_geo
+    - component:accelint_postcss-tailwind-css-modules
+    - component:accelint_smeegl
     - component:accelint_typescript-config
     - component:accelint_vitest-config

package/dist/camera/events.d.ts

@@ -0,0 +1,15 @@
+//#region src/camera/events.d.ts
+declare const CameraEventNamespace = "camera";
+declare const CameraEventTypes: {
+  readonly setView: "camera:setView";
+  readonly setProjection: "camera:setProjection";
+  readonly setZoom: "camera:setZoom";
+  readonly setRotation: "camera:setRotation";
+  readonly setPitch: "camera:setPitch";
+  readonly setCenter: "camera:setCenter";
+  readonly fitBounds: "camera:fitBounds";
+  readonly reset: "camera:reset";
+};
+//#endregion
+export { CameraEventNamespace, CameraEventTypes };
+//# sourceMappingURL=events.d.ts.map

package/dist/camera/events.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+//#region src/camera/events.ts
+const CameraEventNamespace = "camera";
+const CameraEventTypes = {
+	setView: `${CameraEventNamespace}:setView`,
+	setProjection: `${CameraEventNamespace}:setProjection`,
+	setZoom: `${CameraEventNamespace}:setZoom`,
+	setRotation: `${CameraEventNamespace}:setRotation`,
+	setPitch: `${CameraEventNamespace}:setPitch`,
+	setCenter: `${CameraEventNamespace}:setCenter`,
+	fitBounds: `${CameraEventNamespace}:fitBounds`,
+	reset: `${CameraEventNamespace}:reset`
+};
+
+//#endregion
+export { CameraEventNamespace, CameraEventTypes };
+//# sourceMappingURL=events.js.map

package/dist/camera/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","names":[],"sources":["../../src/camera/events.ts"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport const CameraEventNamespace = 'camera';\n\nexport const CameraEventTypes = {\n  setView: `${CameraEventNamespace}:setView`,\n  setProjection: `${CameraEventNamespace}:setProjection`,\n  setZoom: `${CameraEventNamespace}:setZoom`,\n  setRotation: `${CameraEventNamespace}:setRotation`,\n  setPitch: `${CameraEventNamespace}:setPitch`,\n  setCenter: `${CameraEventNamespace}:setCenter`,\n  fitBounds: `${CameraEventNamespace}:fitBounds`,\n  reset: `${CameraEventNamespace}:reset`,\n} as const;\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAa,uBAAuB;AAEpC,MAAa,mBAAmB;CAC9B,SAAS,GAAG,qBAAqB;CACjC,eAAe,GAAG,qBAAqB;CACvC,SAAS,GAAG,qBAAqB;CACjC,aAAa,GAAG,qBAAqB;CACrC,UAAU,GAAG,qBAAqB;CAClC,WAAW,GAAG,qBAAqB;CACnC,WAAW,GAAG,qBAAqB;CACnC,OAAO,GAAG,qBAAqB;CAChC"}

package/dist/camera/index.d.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { CameraEventNamespace, CameraEventTypes } from "./events.js";
+import { CameraState, UseCameraStateProps, clearCameraState, useCameraState } from "./use-camera-state.js";
+import { CameraEvent, CameraFitBoundsEvent, CameraResetEvent, CameraSetCenterEvent, CameraSetPitchEvent, CameraSetProjectionEvent, CameraSetRotationEvent, CameraSetViewEvent, CameraSetZoomEvent, ProjectionType, ViewType } from "./types.js";
+export { type CameraEvent, CameraEventNamespace, CameraEventTypes, type CameraFitBoundsEvent, type CameraResetEvent, type CameraSetCenterEvent, type CameraSetPitchEvent, type CameraSetProjectionEvent, type CameraSetRotationEvent, type CameraSetViewEvent, type CameraSetZoomEvent, type CameraState, type ProjectionType, type UseCameraStateProps, type ViewType, clearCameraState, useCameraState };

package/dist/camera/index.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import { CameraEventNamespace, CameraEventTypes } from "./events.js";
+import { clearCameraState, useCameraState } from "./use-camera-state.js";
+
+export { CameraEventNamespace, CameraEventTypes, clearCameraState, useCameraState };

package/dist/camera/types.d.ts

@@ -0,0 +1,84 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { CameraEventTypes } from "./events.js";
+import { Bounds } from "../deckgl/base-map/types.js";
+import { Payload } from "@accelint/bus";
+import { UniqueId } from "@accelint/core/utility/uuid";
+
+//#region src/camera/types.d.ts
+type ProjectionType = 'mercator' | 'globe';
+type ViewType = '2D' | '2.5D' | '3D';
+type CameraSetCenterPayload = {
+  /** Identifier of the camera */
+  id: UniqueId;
+  /** Latitude of the target coordinate */
+  latitude: number;
+  /** Longitude of the target coordinate */
+  longitude: number;
+  /** Optional zoom level */
+  zoom?: number;
+  /** Optional heading angle */
+  heading?: number;
+  /** Optional pitch angle */
+  pitch?: number;
+};
+type CameraFitBoundsPayload = {
+  /** Identifier of the camera */
+  id: UniqueId;
+  /** Bounds of the area to fit [minLon, minLat, maxLon, maxLat] */
+  bounds: Bounds;
+  /** Viewport width in pixels */
+  width: number;
+  /** Viewport height in pixels */
+  height: number;
+  /** Optional padding in pixels */
+  padding?: number;
+  /** Optional heading angle */
+  heading?: number;
+  /** Optional pitch angle */
+  pitch?: number;
+};
+type CameraResetPayload = {
+  /** Identifier of the camera */
+  id: UniqueId;
+  zoom?: boolean;
+  pitch?: boolean;
+  rotation?: boolean;
+};
+type CameraSetCenterEvent = Payload<typeof CameraEventTypes.setCenter, CameraSetCenterPayload>;
+type CameraFitBoundsEvent = Payload<typeof CameraEventTypes.fitBounds, CameraFitBoundsPayload>;
+type CameraSetProjectionEvent = Payload<typeof CameraEventTypes.setProjection, {
+  id: UniqueId;
+  projection: ProjectionType;
+}>;
+type CameraSetViewEvent = Payload<typeof CameraEventTypes.setView, {
+  id: UniqueId;
+  view: ViewType;
+}>;
+type CameraSetZoomEvent = Payload<typeof CameraEventTypes.setZoom, {
+  id: UniqueId;
+  zoom: number;
+}>;
+type CameraSetRotationEvent = Payload<typeof CameraEventTypes.setRotation, {
+  id: UniqueId;
+  rotation: number;
+}>;
+type CameraSetPitchEvent = Payload<typeof CameraEventTypes.setPitch, {
+  id: UniqueId;
+  pitch: number;
+}>;
+type CameraResetEvent = Payload<typeof CameraEventTypes.reset, CameraResetPayload>;
+type CameraEvent = CameraSetCenterEvent | CameraFitBoundsEvent | CameraSetProjectionEvent | CameraSetViewEvent | CameraSetZoomEvent | CameraSetRotationEvent | CameraSetPitchEvent | CameraResetEvent;
+//#endregion
+export { CameraEvent, CameraFitBoundsEvent, CameraFitBoundsPayload, CameraResetEvent, CameraResetPayload, CameraSetCenterEvent, CameraSetCenterPayload, CameraSetPitchEvent, CameraSetProjectionEvent, CameraSetRotationEvent, CameraSetViewEvent, CameraSetZoomEvent, ProjectionType, ViewType };
+//# sourceMappingURL=types.d.ts.map

package/dist/{decorators/deckgl.d.ts → camera/types.js}

@@ -10,10 +10,3 @@
  * governing permissions and limitations under the License.
  */
 
-import { Decorator } from "@storybook/react-vite";
-
-//#region src/decorators/deckgl.d.ts
-declare const withDeckGL: () => Decorator;
-//#endregion
-export { withDeckGL };
-//# sourceMappingURL=deckgl.d.ts.map

package/dist/camera/use-camera-state.d.ts

@@ -0,0 +1,153 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { useSyncExternalStore } from "react";
+import { UniqueId } from "@accelint/core";
+
+//#region src/camera/use-camera-state.d.ts
+type CameraState2D = {
+  latitude: number;
+  longitude: number;
+  zoom: number;
+  pitch: 0;
+  rotation: number;
+  projection: 'mercator';
+  view: '2D';
+};
+type CameraState3D = {
+  latitude: number;
+  longitude: number;
+  zoom: number;
+  pitch: 0;
+  rotation: number;
+  projection: 'globe';
+  view: '3D';
+};
+type CameraState2Point5D = {
+  latitude: number;
+  longitude: number;
+  zoom: number;
+  pitch: number;
+  rotation: number;
+  projection: 'mercator';
+  view: '2.5D';
+};
+type CameraState = CameraState2D | CameraState3D | CameraState2Point5D;
+type UseCameraStateProps = {
+  instanceId: UniqueId;
+  initialCameraState?: Partial<CameraState>;
+  subscribe?: Parameters<typeof useSyncExternalStore<CameraState>>[0];
+  getSnapshot?: Parameters<typeof useSyncExternalStore<CameraState>>[1];
+  getServerSnapshot?: Parameters<typeof useSyncExternalStore<CameraState>>[2];
+};
+/**
+ * Updates the camera state for a given map instance and notifies subscribers.
+ *
+ * @param instanceId - The unique identifier for the map
+ * @param state - The new state to set, will be merged with existing state
+ *
+ * @example
+ * ```tsx
+ * // Update camera state manually
+ * setCameraState('my-map-instance', {
+ *   latitude: 37.7749,
+ *   longitude: -122.4194,
+ *   zoom: 10,
+ *   pitch: 30,
+ *   rotation: 0,
+ *   projection: 'mercator',
+ * });
+ * ```
+ */
+declare function setCameraState(instanceId: UniqueId, state: Partial<CameraState>): void;
+/**
+ * Hook to access camera state actions.
+ *
+ * This hook uses `useSyncExternalStore` to subscribe to camera state changes,
+ * providing concurrent-safe mode state updates. Uses a fan-out pattern where
+ * a single bus listener per map instance notifies N React component subscribers.
+ *
+ * A thin wrapper around [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore).
+ *
+ * @param instanceId - Unique identifier for the camera to track
+ * @param initialCameraState - Optional initial camera state to set
+ * @param subscribe - Optional custom subscription function
+ * @param getSnapshot - Optional custom snapshot getter
+ * @param getServerSnapshot - Optional server-side snapshot getter
+ * @returns Current camera state including latitude, longitude, zoom, pitch, rotation, projection
+ *
+ * @example
+ * ```tsx
+ * function MapInfo({ instanceId }) {
+ *   const { latitude, longitude, zoom } = useCameraState({
+ *     instanceId
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       Lat: {latitude?.toFixed(2)}, Lon: {longitude?.toFixed(2)}, Zoom: {zoom}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom subscribe/getSnapshot for advanced use cases
+ * function CustomMapInfo() {
+ *   const customSubscribe = (onStoreChange) => {
+ *     // Custom subscription logic
+ *     return () => { // cleanup }
+ *   }
+ *
+ *   const customGetSnapshot = () => {
+ *     // Custom snapshot logic
+ *     return { latitude: 0, longitude: 0, zoom: 1 };
+ *   };
+ *
+ *   const viewState = useCameraState({
+ *     instanceId: 'some-uuid',
+ *     subscribe: customSubscribe,
+ *     getSnapshot: customGetSnapshot,
+ *   });
+ *
+ *   return <div>Custom camera state</div>;
+ * }
+ * ```
+ */
+declare function useCameraState({
+  instanceId,
+  initialCameraState,
+  subscribe,
+  getSnapshot,
+  getServerSnapshot
+}: UseCameraStateProps): {
+  cameraState: CameraState;
+  setCameraState: typeof setCameraState;
+};
+/**
+ * Manually clear camera state for a specific instanceId.
+ * This is typically not needed as cleanup happens automatically when all subscribers unmount.
+ * Use this only in advanced scenarios where manual cleanup is required.
+ *
+ * @param instanceId - The unique identifier for the camera to clear
+ *
+ * @example
+ * ```tsx
+ * // Manual cleanup (rarely needed)
+ * clearCameraState('my-map-instance');
+ * ```
+ */
+declare function clearCameraState(instanceId: UniqueId): void;
+//#endregion
+export { CameraState, UseCameraStateProps, clearCameraState, useCameraState };
+//# sourceMappingURL=use-camera-state.d.ts.map