@macrostrat/map-interface 1.0.7 → 1.0.8

package/CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.8] - 2024-10-26
+
+- Fix inspector colors with new version of `chroma-js`
+- Introduce dependency on `@macrostrat/color-utils`
+
 ## [1.0.5] - 2024-10-24
 
 - Fix bundling

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Map interface for Macrostrat",
   "main": "dist/main.cjs",
   "module": "dist/module.mjs",
@@ -8,12 +8,12 @@
   "source": "src/index.ts",
   "style": "dist/main.css",
   "dependencies": {
+    "@macrostrat/color-utils": "^1.0.0",
     "@macrostrat/hyper": "^3.0.0",
     "@macrostrat/mapbox-react": "^2.2.3",
     "@macrostrat/mapbox-utils": "^1.3.2",
     "@macrostrat/ui-components": "^4.0.4",
     "@mapbox/tilebelt": "^2.0.0",
-    "chroma-js": "^3.0.0",
     "classnames": "^2.5.1",
     "d3-array": "^3.2.4",
     "d3-format": "^3.1.0",

package/src/dev/map-page.ts

@@ -76,6 +76,8 @@ export function MapInspector({
 
   const [actualStyle, setActualStyle] = useState(style);
 
+  console.log("actualStyle", actualStyle);
+
   useEffect(() => {
     buildInspectorStyle(style, overlayStyle, {
       mapboxToken,

package/src/dev/xray.ts

@@ -1,5 +1,5 @@
 import { getMapboxStyle, mergeStyles } from "@macrostrat/mapbox-utils";
-import chroma from "chroma-js";
+import { asChromaColor, toRGBAString } from "@macrostrat/color-utils";
 import mapboxgl from "mapbox-gl";
 
 interface XRayOptions {
@@ -17,7 +17,7 @@ export async function buildXRayStyle(
     inDarkMode = false,
     color = "rgb(74, 242, 161)",
     mapboxToken,
-    xRaySources
+    xRaySources,
   } = params;
   const style = await getMapboxStyle(baseStyle, { access_token: mapboxToken });
   const sources = xRaySources ?? Object.keys(style.sources);
@@ -41,15 +41,12 @@ export async function buildXRayStyle(
 }
 
 function transformMapboxLayer(layer, color, inDarkMode) {
-  const c = chroma(color);
+  const c = asChromaColor(color);
   const xRayColor = (opacity = 1, darken = 0) => {
     if (!inDarkMode) {
-      return chroma(color)
-        .darken(2 - darken)
-        .alpha(opacity)
-        .css();
+      return toRGBAString(c.darken(2 - darken).alpha(opacity));
     }
-    return c.alpha(opacity).darken(darken).css();
+    return toRGBAString(c.alpha(opacity).darken(darken));
   };
 
   if (layer.type == "background") {
@@ -58,6 +55,8 @@ function transformMapboxLayer(layer, color, inDarkMode) {
 
   let newLayer = { ...layer };
 
+  console.log(xRayColor(0.5));
+
   if (layer.type == "fill") {
     newLayer.paint = {
       "fill-color": xRayColor(0.1),
@@ -93,7 +92,12 @@ export async function buildInspectorStyle(
   overlayStyle: mapboxgl.Style | string | null = null,
   params: InspectorStyleOptions = {}
 ) {
-  const { mapboxToken, xRay = false, xRaySources: _xRaySources, ...rest } = params;
+  const {
+    mapboxToken,
+    xRay = false,
+    xRaySources: _xRaySources,
+    ...rest
+  } = params;
   let xRaySources = _xRaySources;
   let style = await getMapboxStyle(baseStyle, {
     access_token: mapboxToken,
@@ -107,7 +111,6 @@ export async function buildInspectorStyle(
     xRaySources ??= Object.keys(overlay.sources);
   }
 
-
   if (xRay) {
     // If we haven't specified sources, then we'll use all of them
     xRaySources ??= Object.keys(style.sources);