@dxos/react-ui-geo 0.7.5-labs.f5080a1 → 0.7.5-main.b19bfc8

package/dist/lib/browser/index.mjs

@@ -4,22 +4,22 @@ import {
 
 // packages/ui/react-ui-geo/src/components/Globe/Globe.tsx
 import * as d37 from "d3";
-import React3, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo, useRef, useState as useState3 } from "react";
+import React4, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo, useRef, useState as useState3 } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { useDynamicRef } from "@dxos/react-ui";
+import { useDynamicRef, useThemeContext } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-geo/src/hooks/context.tsx
-import React, { createContext, useContext } from "react";
+import React2, { createContext, useContext } from "react";
 import { raise } from "@dxos/debug";
-import { useControlledValue } from "@dxos/react-ui";
+import { useControlledState } from "@dxos/react-ui";
 var GlobeContext = /* @__PURE__ */ createContext(void 0);
 var GlobeContextProvider = ({ children, size, center: _center, scale: _scale, translation: _translation, rotation: _rotation }) => {
-  const [center, setCenter] = useControlledValue(_center);
-  const [scale, setScale] = useControlledValue(_scale);
-  const [translation, setTranslation] = useControlledValue(_translation);
-  const [rotation, setRotation] = useControlledValue(_rotation);
-  return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
+  const [center, setCenter] = useControlledState(_center);
+  const [scale, setScale] = useControlledState(_scale);
+  const [translation, setTranslation] = useControlledState(_translation);
+  const [rotation, setRotation] = useControlledState(_rotation);
+  return /* @__PURE__ */ React2.createElement(GlobeContext.Provider, {
     value: {
       size,
       center,
@@ -349,17 +349,22 @@ var createLayers = (topology, features, styles) => {
   }
   return layers;
 };
-var renderLayers = (generator, layers = [], scale) => {
+var renderLayers = (generator, layers = [], scale, styles) => {
   const context = generator.context();
   const { canvas: { width, height } } = context;
   context.reset();
-  context.clearRect(0, 0, width, height);
-  layers.forEach(({ path, styles }) => {
+  if (styles.background) {
+    context.fillStyle = styles.background.fillStyle;
+    context.fillRect(0, 0, width, height);
+  } else {
+    context.clearRect(0, 0, width, height);
+  }
+  layers.forEach(({ path, styles: styles2 }) => {
     context.save();
     let fill = false;
     let stroke = false;
-    if (styles) {
-      Object.entries(styles).forEach(([key, value]) => {
+    if (styles2) {
+      Object.entries(styles2).forEach(([key, value]) => {
         if (key === "pointRadius") {
           generator.pointRadius(value * scale);
         } else {
@@ -408,7 +413,7 @@ var useDrag = (controller, options = {}) => {
     };
   }, [
     controller,
-    options
+    JSON.stringify(options)
   ]);
 };
 var cancelDrag = (node) => node.on(".drag", null);
@@ -514,11 +519,13 @@ var useSpinner = (controller, options = {}) => {
 import * as d36 from "d3";
 import { useEffect as useEffect3, useState as useState2 } from "react";
 import versor2 from "versor";
+import { log } from "@dxos/log";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-geo/src/hooks/useTour.ts";
 var TRANSITION_NAME = "globe-tour";
 var defaultDuration = 1500;
-var useTour = (controller, features, options = {}) => {
+var useTour = (controller, points, options = {}) => {
   const selection2 = d36.selection();
-  const [running, setRunning] = useState2(false);
+  const [running, setRunning] = useState2(options.running ?? false);
   useEffect3(() => {
     if (!running) {
       selection2.interrupt(TRANSITION_NAME);
@@ -532,10 +539,16 @@ var useTour = (controller, features, options = {}) => {
           alpha: false
         });
         const path = d36.geoPath(projection, context).pointRadius(2);
-        const tilt = 0;
+        const tilt = options.tilt ?? 0;
         let last;
         try {
-          for (const next of features.points) {
+          const p = [
+            ...points
+          ];
+          if (options.loop) {
+            p.push(p[0]);
+          }
+          for (const next of p) {
             if (!running) {
               break;
             }
@@ -573,13 +586,22 @@ var useTour = (controller, features, options = {}) => {
                 context.fill();
               }
               context.restore();
-              projection.rotate(iv(t2));
-              setRotation(projection.rotate());
+              if (options.autoRotate) {
+                projection.rotate(iv(t2));
+                setRotation(projection.rotate());
+              }
             });
             await transition2.end();
             last = next;
           }
         } catch (err) {
+          log.catch(err, void 0, {
+            F: __dxlog_file,
+            L: 112,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+        } finally {
           setRunning(false);
         }
       });
@@ -590,20 +612,17 @@ var useTour = (controller, features, options = {}) => {
     }
   }, [
     controller,
-    running
+    running,
+    JSON.stringify(options)
   ]);
   return [
-    () => {
-      if (!options.disabled) {
-        setRunning(true);
-      }
-    },
-    () => setRunning(false)
+    running,
+    setRunning
   ];
 };
 
 // packages/ui/react-ui-geo/src/components/Toolbar/Controls.tsx
-import React2 from "react";
+import React3 from "react";
 import { IconButton, Toolbar } from "@dxos/react-ui";
 var controlPositions = {
   topleft: "top-2 left-2",
@@ -612,12 +631,12 @@ var controlPositions = {
   bottomright: "bottom-2 right-2"
 };
 var ZoomControls = ({ classNames, onAction }) => {
-  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+  return /* @__PURE__ */ React3.createElement(Toolbar.Root, {
     classNames: [
       "gap-1",
       classNames
     ]
-  }, /* @__PURE__ */ React2.createElement(IconButton, {
+  }, /* @__PURE__ */ React3.createElement(IconButton, {
     //
     icon: "ph--plus--regular",
     label: "zoom in",
@@ -625,7 +644,7 @@ var ZoomControls = ({ classNames, onAction }) => {
     size: 5,
     classNames: "px-0 aspect-square",
     onClick: () => onAction?.("zoom-in")
-  }), /* @__PURE__ */ React2.createElement(IconButton, {
+  }), /* @__PURE__ */ React3.createElement(IconButton, {
     //
     icon: "ph--minus--regular",
     label: "zoom out",
@@ -636,12 +655,12 @@ var ZoomControls = ({ classNames, onAction }) => {
   }));
 };
 var ActionControls = ({ classNames, onAction }) => {
-  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+  return /* @__PURE__ */ React3.createElement(Toolbar.Root, {
     classNames: [
       "gap-1",
       classNames
     ]
-  }, /* @__PURE__ */ React2.createElement(IconButton, {
+  }, /* @__PURE__ */ React3.createElement(IconButton, {
     //
     icon: "ph--play--regular",
     label: "start",
@@ -649,7 +668,7 @@ var ActionControls = ({ classNames, onAction }) => {
     size: 5,
     classNames: "px-0 aspect-square",
     onClick: () => onAction?.("start")
-  }), /* @__PURE__ */ React2.createElement(IconButton, {
+  }), /* @__PURE__ */ React3.createElement(IconButton, {
     //
     icon: "ph--globe-hemisphere-west--regular",
     label: "toggle",
@@ -662,28 +681,45 @@ var ActionControls = ({ classNames, onAction }) => {
 
 // packages/ui/react-ui-geo/src/components/Globe/Globe.tsx
 var defaultStyles = {
-  background: {
-    fillStyle: "#111111"
-  },
-  water: {
-    fillStyle: "#123E6A"
-  },
-  hex: {
-    strokeStyle: "green",
-    fillStyle: "gray",
-    pointRadius: 1
-  },
-  land: {
-    fillStyle: "#032153"
-  },
-  line: {
-    strokeStyle: "#111111"
+  light: {
+    background: {
+      fillStyle: "#EEE"
+    },
+    water: {
+      fillStyle: "#555"
+    },
+    land: {
+      fillStyle: "#999"
+    },
+    line: {
+      strokeStyle: "darkred"
+    },
+    point: {
+      fillStyle: "#111111",
+      strokeStyle: "#111111",
+      strokeWidth: 1,
+      pointRadius: 0.5
+    }
   },
-  point: {
-    fillStyle: "#111111",
-    strokeStyle: "#111111",
-    strokeWidth: 1,
-    pointRadius: 0.5
+  dark: {
+    background: {
+      fillStyle: "#111111"
+    },
+    water: {
+      fillStyle: "#123E6A"
+    },
+    land: {
+      fillStyle: "#032153"
+    },
+    line: {
+      strokeStyle: "#111111"
+    },
+    point: {
+      fillStyle: "#111111",
+      strokeStyle: "#111111",
+      strokeWidth: 1,
+      pointRadius: 0.5
+    }
   }
 };
 var projectionMap = {
@@ -700,10 +736,10 @@ var getProjection = (type = "orthographic") => {
 };
 var GlobeRoot = ({ classNames, children, ...props }) => {
   const { ref, width, height } = useResizeDetector();
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     ref,
     className: mx("relative flex grow overflow-hidden", classNames)
-  }, /* @__PURE__ */ React3.createElement(GlobeContextProvider, {
+  }, /* @__PURE__ */ React4.createElement(GlobeContextProvider, {
     size: {
       width,
       height
@@ -711,7 +747,12 @@ var GlobeRoot = ({ classNames, children, ...props }) => {
     ...props
   }, children));
 };
-var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topology, features, styles = defaultStyles }, forwardRef3) => {
+var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topology, features, styles: _styles }, forwardRef3) => {
+  const { themeMode } = useThemeContext();
+  const styles = useMemo(() => _styles ?? defaultStyles[themeMode], [
+    _styles,
+    themeMode
+  ]);
   const [canvas, setCanvas] = useState3(null);
   const canvasRef = (canvas2) => setCanvas(canvas2);
   const projection = useMemo(() => getProjection(_projection), [
@@ -779,7 +820,7 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topolog
           0,
           0
         ]);
-        renderLayers(generator, layers, scale);
+        renderLayers(generator, layers, scale, styles);
       });
     }
   }, [
@@ -793,7 +834,7 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topolog
   if (!size.width || !size.height) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement("canvas", {
+  return /* @__PURE__ */ React4.createElement("canvas", {
     ref: canvasRef,
     width: size.width,
     height: size.height
@@ -801,9 +842,9 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topolog
 });
 var GlobeDebug = ({ position = "topleft" }) => {
   const { size, scale, translation, rotation } = useGlobeContext();
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
-  }, /* @__PURE__ */ React3.createElement("pre", {
+  }, /* @__PURE__ */ React4.createElement("pre", {
     className: "font-mono text-xs text-green-700"
   }, JSON.stringify({
     size,
@@ -813,28 +854,28 @@ var GlobeDebug = ({ position = "topleft" }) => {
   }, null, 2)));
 };
 var GlobePanel = ({ position, classNames, children }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     className: mx("z-10 absolute overflow-hidden", controlPositions[position], classNames)
   }, children);
 };
 var CustomControl = ({ position, children }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     className: mx("z-10 absolute overflow-hidden", controlPositions[position])
   }, children);
 };
 var Globe = {
   Root: GlobeRoot,
   Canvas: GlobeCanvas,
-  Zoom: ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl, {
+  Zoom: ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl, {
     position,
     ...props
-  }, /* @__PURE__ */ React3.createElement(ZoomControls, {
+  }, /* @__PURE__ */ React4.createElement(ZoomControls, {
     onAction
   })),
-  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl, {
+  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl, {
     position,
     ...props
-  }, /* @__PURE__ */ React3.createElement(ActionControls, {
+  }, /* @__PURE__ */ React4.createElement(ActionControls, {
     onAction
   })),
   Debug: GlobeDebug,
@@ -843,13 +884,13 @@ var Globe = {
 
 // packages/ui/react-ui-geo/src/components/Map/Map.tsx
 import "leaflet/dist/leaflet.css";
-import { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
-import React4, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2 } from "react";
+import L, { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
+import { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2 } from "react";
 import { createRoot } from "react-dom/client";
 import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
 import { useResizeDetector as useResizeDetector2 } from "react-resize-detector";
 import { debounce } from "@dxos/async";
-import { Tooltip, ThemeProvider } from "@dxos/react-ui";
+import { ThemeProvider, Tooltip } from "@dxos/react-ui";
 import { defaultTx, mx as mx2 } from "@dxos/react-ui-theme";
 var defaults = {
   // TODO(burdon): Guess location.
@@ -860,7 +901,7 @@ var defaults = {
   zoom: 4
 };
 var MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...props }) => {
-  return /* @__PURE__ */ React4.createElement(MapContainer, {
+  return /* @__PURE__ */ React.createElement(MapContainer, {
     className: mx2("relative flex w-full h-full grow bg-baseSurface", classNames),
     attributionControl: false,
     // TODO(burdon): Only if attention.
@@ -871,7 +912,7 @@ var MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...
     ...props
   });
 };
-var MapCanvas = /* @__PURE__ */ forwardRef2(({ markers = [], center, zoom, onChange }, forwardedRef) => {
+var MapCanvas = /* @__PURE__ */ forwardRef2(({ markers, center, zoom, onChange }, forwardedRef) => {
   const { ref, width, height } = useResizeDetector2({
     refreshRate: 200
   });
@@ -931,20 +972,44 @@ var MapCanvas = /* @__PURE__ */ forwardRef2(({ markers = [], center, zoom, onCha
   }, [
     markers
   ]);
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     ref,
     className: "flex w-full h-full overflow-hidden bg-baseSurface"
-  }, /* @__PURE__ */ React4.createElement(TileLayer, {
+  }, /* @__PURE__ */ React.createElement(TileLayer, {
     className: "dark:filter dark:grayscale dark:invert",
     url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-  }), markers.map(({ id, title, location: { lat, lng } }) => {
-    return /* @__PURE__ */ React4.createElement(Marker, {
+  }), markers?.map(({ id, title, location: { lat, lng } }) => {
+    return /* @__PURE__ */ React.createElement(Marker, {
       key: id,
       position: {
         lat,
         lng
-      }
-    }, title && /* @__PURE__ */ React4.createElement(Popup, null, title));
+      },
+      icon: (
+        // TODO(burdon): Create custom icon from bundled assets.
+        new L.Icon({
+          iconUrl: "https://dxos.network/marker-icon.png",
+          iconRetinaUrl: "https://dxos.network/marker-icon-2x.png",
+          shadowUrl: "https://dxos.network/marker-shadow.png",
+          iconSize: [
+            25,
+            41
+          ],
+          iconAnchor: [
+            12,
+            41
+          ],
+          popupAnchor: [
+            1,
+            -34
+          ],
+          shadowSize: [
+            41,
+            41
+          ]
+        })
+      )
+    }, title && /* @__PURE__ */ React.createElement(Popup, null, title));
   }));
 });
 var CustomControl2 = ({ position, children }) => {
@@ -958,9 +1023,9 @@ var CustomControl2 = ({ position, children }) => {
       DomEvent.disableClickPropagation(container);
       DomEvent.disableScrollPropagation(container);
       const root = createRoot(container);
-      root.render(/* @__PURE__ */ React4.createElement(ThemeProvider, {
+      root.render(/* @__PURE__ */ React.createElement(ThemeProvider, {
         tx: defaultTx
-      }, /* @__PURE__ */ React4.createElement(Tooltip.Provider, null, children)));
+      }, /* @__PURE__ */ React.createElement(Tooltip.Provider, null, children)));
       return container;
     };
     control.addTo(map);
@@ -977,16 +1042,16 @@ var CustomControl2 = ({ position, children }) => {
 var Map = {
   Root: MapRoot,
   Canvas: MapCanvas,
-  Zoom: ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl2, {
+  Zoom: ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React.createElement(CustomControl2, {
     position,
     ...props
-  }, /* @__PURE__ */ React4.createElement(ZoomControls, {
+  }, /* @__PURE__ */ React.createElement(ZoomControls, {
     onAction
   })),
-  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl2, {
+  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React.createElement(CustomControl2, {
     position,
     ...props
-  }, /* @__PURE__ */ React4.createElement(ActionControls, {
+  }, /* @__PURE__ */ React.createElement(ActionControls, {
     onAction
   }))
 };