@dxos/react-ui-geo 0.7.5-labs.e27f9b9 → 0.7.5-labs.f400bbc

package/dist/lib/browser/index.mjs

@@ -6,19 +6,19 @@ import {
 import * as d37 from "d3";
 import React3, { 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 { 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);
+  const [center, setCenter] = useControlledState(_center);
+  const [scale, setScale] = useControlledState(_scale);
+  const [translation, setTranslation] = useControlledState(_translation);
+  const [rotation, setRotation] = useControlledState(_rotation);
   return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
     value: {
       size,
@@ -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,15 +612,12 @@ var useTour = (controller, features, options = {}) => {
     }
   }, [
     controller,
-    running
+    running,
+    JSON.stringify(options)
   ]);
   return [
-    () => {
-      if (!options.disabled) {
-        setRunning(true);
-      }
-    },
-    () => setRunning(false)
+    running,
+    setRunning
   ];
 };
 
@@ -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 = {
@@ -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);
       });
     }
   }, [
@@ -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 L, { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
 import React4, { 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.
@@ -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
   });
@@ -937,13 +978,37 @@ var MapCanvas = /* @__PURE__ */ forwardRef2(({ markers = [], center, zoom, onCha
   }, /* @__PURE__ */ React4.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 } }) => {
+  }), markers?.map(({ id, title, location: { lat, lng } }) => {
     return /* @__PURE__ */ React4.createElement(Marker, {
       key: id,
       position: {
         lat,
         lng
-      }
+      },
+      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__ */ React4.createElement(Popup, null, title));
   }));
 });