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

package/dist/lib/node/index.cjs

@@ -77,11 +77,12 @@ var import_react6 = require("react");
 var d36 = __toESM(require("d3"));
 var import_react7 = require("react");
 var import_versor2 = __toESM(require("versor"));
+var import_log = require("@dxos/log");
 var import_react8 = __toESM(require("react"));
 var import_react_ui3 = require("@dxos/react-ui");
 var import_leaflet = require("leaflet/dist/leaflet.css");
-var import_leaflet2 = require("leaflet");
-var import_react9 = __toESM(require("react"));
+var import_leaflet2 = __toESM(require("leaflet"));
+var import_react9 = require("react");
 var import_client = require("react-dom/client");
 var import_react_leaflet = require("react-leaflet");
 var import_react_resize_detector2 = require("react-resize-detector");
@@ -407,17 +408,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 {
@@ -464,7 +470,7 @@ var useDrag = (controller, options = {}) => {
     };
   }, [
     controller,
-    options
+    JSON.stringify(options)
   ]);
 };
 var cancelDrag = (node) => node.on(".drag", null);
@@ -555,11 +561,12 @@ var useSpinner = (controller, options = {}) => {
     () => setRunning(false)
   ];
 };
+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] = (0, import_react7.useState)(false);
+  const [running, setRunning] = (0, import_react7.useState)(options.running ?? false);
   (0, import_react7.useEffect)(() => {
     if (!running) {
       selection2.interrupt(TRANSITION_NAME);
@@ -573,10 +580,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;
             }
@@ -614,13 +627,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) {
+          import_log.log.catch(err, void 0, {
+            F: __dxlog_file,
+            L: 112,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+        } finally {
           setRunning(false);
         }
       });
@@ -631,15 +653,12 @@ var useTour = (controller, features, options = {}) => {
     }
   }, [
     controller,
-    running
+    running,
+    JSON.stringify(options)
   ]);
   return [
-    () => {
-      if (!options.disabled) {
-        setRunning(true);
-      }
-    },
-    () => setRunning(false)
+    running,
+    setRunning
   ];
 };
 var controlPositions = {
@@ -697,28 +716,45 @@ var ActionControls = ({ classNames, onAction }) => {
   }));
 };
 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 = {
@@ -746,7 +782,12 @@ var GlobeRoot = ({ classNames, children, ...props }) => {
     ...props
   }, children));
 };
-var GlobeCanvas = /* @__PURE__ */ (0, import_react.forwardRef)(({ projection: _projection, topology, features, styles = defaultStyles }, forwardRef3) => {
+var GlobeCanvas = /* @__PURE__ */ (0, import_react.forwardRef)(({ projection: _projection, topology, features, styles: _styles }, forwardRef3) => {
+  const { themeMode } = (0, import_react_ui.useThemeContext)();
+  const styles = (0, import_react.useMemo)(() => _styles ?? defaultStyles[themeMode], [
+    _styles,
+    themeMode
+  ]);
   const [canvas, setCanvas] = (0, import_react.useState)(null);
   const canvasRef = (canvas2) => setCanvas(canvas2);
   const projection = (0, import_react.useMemo)(() => getProjection(_projection), [
@@ -814,7 +855,7 @@ var GlobeCanvas = /* @__PURE__ */ (0, import_react.forwardRef)(({ projection: _p
           0,
           0
         ]);
-        renderLayers(generator, layers, scale);
+        renderLayers(generator, layers, scale, styles);
       });
     }
   }, [
@@ -884,7 +925,7 @@ var defaults = {
   zoom: 4
 };
 var MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...props }) => {
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_leaflet.MapContainer, {
+  return /* @__PURE__ */ React.createElement(import_react_leaflet.MapContainer, {
     className: (0, import_react_ui_theme2.mx)("relative flex w-full h-full grow bg-baseSurface", classNames),
     attributionControl: false,
     // TODO(burdon): Only if attention.
@@ -895,7 +936,7 @@ var MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...
     ...props
   });
 };
-var MapCanvas = /* @__PURE__ */ (0, import_react9.forwardRef)(({ markers = [], center, zoom, onChange }, forwardedRef) => {
+var MapCanvas = /* @__PURE__ */ (0, import_react9.forwardRef)(({ markers, center, zoom, onChange }, forwardedRef) => {
   const { ref, width, height } = (0, import_react_resize_detector2.useResizeDetector)({
     refreshRate: 200
   });
@@ -955,20 +996,44 @@ var MapCanvas = /* @__PURE__ */ (0, import_react9.forwardRef)(({ markers = [], c
   }, [
     markers
   ]);
-  return /* @__PURE__ */ import_react9.default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     ref,
     className: "flex w-full h-full overflow-hidden bg-baseSurface"
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_leaflet.TileLayer, {
+  }, /* @__PURE__ */ React.createElement(import_react_leaflet.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__ */ import_react9.default.createElement(import_react_leaflet.Marker, {
+  }), markers?.map(({ id, title, location: { lat, lng } }) => {
+    return /* @__PURE__ */ React.createElement(import_react_leaflet.Marker, {
       key: id,
       position: {
         lat,
         lng
-      }
-    }, title && /* @__PURE__ */ import_react9.default.createElement(import_react_leaflet.Popup, null, title));
+      },
+      icon: (
+        // TODO(burdon): Create custom icon from bundled assets.
+        new import_leaflet2.default.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(import_react_leaflet.Popup, null, title));
   }));
 });
 var CustomControl2 = ({ position, children }) => {
@@ -982,9 +1047,9 @@ var CustomControl2 = ({ position, children }) => {
       import_leaflet2.DomEvent.disableClickPropagation(container);
       import_leaflet2.DomEvent.disableScrollPropagation(container);
       const root = (0, import_client.createRoot)(container);
-      root.render(/* @__PURE__ */ import_react9.default.createElement(import_react_ui4.ThemeProvider, {
+      root.render(/* @__PURE__ */ React.createElement(import_react_ui4.ThemeProvider, {
         tx: import_react_ui_theme2.defaultTx
-      }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui4.Tooltip.Provider, null, children)));
+      }, /* @__PURE__ */ React.createElement(import_react_ui4.Tooltip.Provider, null, children)));
       return container;
     };
     control.addTo(map);
@@ -1001,16 +1066,16 @@ var CustomControl2 = ({ position, children }) => {
 var Map = {
   Root: MapRoot,
   Canvas: MapCanvas,
-  Zoom: ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ import_react9.default.createElement(CustomControl2, {
+  Zoom: ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React.createElement(CustomControl2, {
     position,
     ...props
-  }, /* @__PURE__ */ import_react9.default.createElement(ZoomControls, {
+  }, /* @__PURE__ */ React.createElement(ZoomControls, {
     onAction
   })),
-  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ import_react9.default.createElement(CustomControl2, {
+  Action: ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React.createElement(CustomControl2, {
     position,
     ...props
-  }, /* @__PURE__ */ import_react9.default.createElement(ActionControls, {
+  }, /* @__PURE__ */ React.createElement(ActionControls, {
     onAction
   }))
 };