@dxos/react-ui-geo 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/dist/lib/browser/index.mjs

@@ -15,14 +15,21 @@ import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React, { createContext, useContext } from "react";
 import { raise } from "@dxos/debug";
 import { useControlledState } from "@dxos/react-ui";
+var defaults = {
+  center: {
+    lat: 51,
+    lng: 0
+  },
+  zoom: 4
+};
 var GlobeContext = /* @__PURE__ */ createContext(void 0);
-var GlobeContextProvider = ({ children, size, center: _center, zoom: _zoom, translation: _translation, rotation: _rotation }) => {
+var GlobeContextProvider = ({ children, size, center: centerParam = defaults.center, zoom: zoomParam = defaults.zoom, translation: translationParam, rotation: rotationParam }) => {
   var _effect = _useSignals();
   try {
-    const [center, setCenter] = useControlledState(_center);
-    const [zoom, setZoom] = useControlledState(_zoom);
-    const [translation, setTranslation] = useControlledState(_translation);
-    const [rotation, setRotation] = useControlledState(_rotation);
+    const [center, setCenter] = useControlledState(centerParam);
+    const [zoom, setZoom] = useControlledState(zoomParam);
+    const [translation, setTranslation] = useControlledState(translationParam);
+    const [rotation, setRotation] = useControlledState(rotationParam);
     return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
       value: {
         size,
@@ -376,8 +383,8 @@ var renderLayers = (generator, layers = [], scale, styles) => {
           generator.pointRadius(value * scale);
         } else {
           context[key] = value;
-          fill || (fill = key === "fillStyle");
-          stroke || (stroke = key === "strokeStyle");
+          fill ||= key === "fillStyle";
+          stroke ||= key === "strokeStyle";
         }
       });
     }
@@ -427,6 +434,7 @@ var cancelDrag = (node) => node.on(".drag", null);
 
 // src/hooks/useGlobeZoomHandler.ts
 import { useCallback } from "react";
+var ZOOM_FACTOR = 0.1;
 var useGlobeZoomHandler = (controller) => {
   return useCallback((event) => {
     if (!controller) {
@@ -434,11 +442,15 @@ var useGlobeZoomHandler = (controller) => {
     }
     switch (event) {
       case "zoom-in": {
-        controller.setZoom((zoom) => zoom * 1.1);
+        controller.setZoom((zoom) => {
+          return zoom * (1 + ZOOM_FACTOR);
+        });
         break;
       }
       case "zoom-out": {
-        controller.setZoom((zoom) => zoom * 0.9);
+        controller.setZoom((zoom) => {
+          return zoom * (1 - ZOOM_FACTOR);
+        });
         break;
       }
     }
@@ -621,7 +633,24 @@ var useTour = (controller, points, options = {}) => {
 // src/components/Toolbar/Controls.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2 from "react";
-import { IconButton, Toolbar } from "@dxos/react-ui";
+import { IconButton, Toolbar, useTranslation } from "@dxos/react-ui";
+
+// src/translations.ts
+var translationKey = "react-ui-geo";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "zoom in icon button": "Zoom in",
+        "zoom out icon button": "Zoom out",
+        "start icon button": "Start",
+        "toggle icon button": "Toggle"
+      }
+    }
+  }
+];
+
+// src/components/Toolbar/Controls.tsx
 var controlPositions = {
   topleft: "top-2 left-2",
   topright: "top-2 right-2",
@@ -631,6 +660,7 @@ var controlPositions = {
 var ZoomControls = ({ classNames, onAction }) => {
   var _effect = _useSignals2();
   try {
+    const { t } = useTranslation(translationKey);
     return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
       classNames: [
         "gap-2",
@@ -638,17 +668,13 @@ var ZoomControls = ({ classNames, onAction }) => {
       ]
     }, /* @__PURE__ */ React2.createElement(IconButton, {
       icon: "ph--plus--regular",
-      label: "zoom in",
       iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
+      label: t("zoom in icon button"),
       onClick: () => onAction?.("zoom-in")
     }), /* @__PURE__ */ React2.createElement(IconButton, {
       icon: "ph--minus--regular",
-      label: "zoom out",
       iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
+      label: t("zoom out icon button"),
       onClick: () => onAction?.("zoom-out")
     }));
   } finally {
@@ -658,24 +684,21 @@ var ZoomControls = ({ classNames, onAction }) => {
 var ActionControls = ({ classNames, onAction }) => {
   var _effect = _useSignals2();
   try {
+    const { t } = useTranslation(translationKey);
     return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
       classNames: [
         "gap-2",
         classNames
       ]
     }, /* @__PURE__ */ React2.createElement(IconButton, {
-      icon: "ph--play--regular",
-      label: "start",
+      icon: "ph--path--regular",
       iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
+      label: t("start icon button"),
       onClick: () => onAction?.("start")
     }), /* @__PURE__ */ React2.createElement(IconButton, {
       icon: "ph--globe-hemisphere-west--regular",
-      label: "toggle",
       iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
+      label: t("toggle icon button"),
       onClick: () => onAction?.("toggle")
     }));
   } finally {
@@ -756,18 +779,18 @@ var GlobeRoot = ({ classNames, children, ...props }) => {
     _effect.f();
   }
 };
-var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topology, features, styles: _styles }, forwardRef3) => {
+var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionParam, topology, features, styles: stylesParam }, forwardRef3) => {
   var _effect = _useSignals3();
   try {
     const { themeMode } = useThemeContext();
-    const styles = useMemo2(() => _styles ?? defaultStyles[themeMode], [
-      _styles,
+    const styles = useMemo2(() => stylesParam ?? defaultStyles[themeMode], [
+      stylesParam,
       themeMode
     ]);
     const [canvas, setCanvas] = useState3(null);
     const canvasRef = (canvas2) => setCanvas(canvas2);
-    const projection = useMemo2(() => getProjection(_projection), [
-      _projection
+    const projection = useMemo2(() => getProjection(projectionParam), [
+      projectionParam
     ]);
     const layers = useMemo2(() => {
       return timer(() => createLayers(topology, features, styles));
@@ -859,7 +882,7 @@ var GlobeDebug = ({ position = "topleft" }) => {
   try {
     const { size, zoom, translation, rotation } = useGlobeContext();
     return /* @__PURE__ */ React3.createElement("div", {
-      className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
+      className: mx("z-10 absolute is-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
     }, /* @__PURE__ */ React3.createElement("pre", {
       className: "font-mono text-xs text-green-700"
     }, JSON.stringify({
@@ -934,11 +957,10 @@ import { createContext as createContext2 } from "@radix-ui/react-context";
 import L, { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
 import React4, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState4 } from "react";
 import { createRoot } from "react-dom/client";
-import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
-import { debounce } from "@dxos/async";
+import { MapContainer, Marker, Popup, TileLayer, useMap, useMapEvents } from "react-leaflet";
 import { ThemeProvider, Tooltip } from "@dxos/react-ui";
 import { defaultTx, mx as mx2 } from "@dxos/react-ui-theme";
-var defaults = {
+var defaults2 = {
   center: {
     lat: 51,
     lng: 0
@@ -946,7 +968,7 @@ var defaults = {
   zoom: 4
 };
 var [MapContextProvier, useMapContext] = createContext2("Map");
-var MapRoot = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center = defaults.center, zoom = defaults.zoom, onChange, ...props }, forwardedRef) => {
+var MapRoot = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, onChange, ...props }, forwardedRef) => {
   var _effect = _useSignals4();
   try {
     const [attention, setAttention] = useState4(false);
@@ -960,31 +982,6 @@ var MapRoot = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true,
         mapRef.current?.setZoom(cb(mapRef.current?.getZoom() ?? 0));
       }
     }), []);
-    useEffect5(() => {
-      if (!map) {
-        return;
-      }
-      const handler = debounce(() => {
-        setAttention(true);
-        onChange?.({
-          center: map.getCenter(),
-          zoom: map.getZoom()
-        });
-      }, 100);
-      map.on("move", handler);
-      map.on("zoom", handler);
-      map.on("focus", () => setAttention(true));
-      map.on("blur", () => setAttention(false));
-      return () => {
-        map.off("move");
-        map.off("zoom");
-        map.off("focus");
-        map.off("blur");
-      };
-    }, [
-      map,
-      onChange
-    ]);
     useEffect5(() => {
       if (!map) {
         return;
@@ -999,7 +996,8 @@ var MapRoot = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true,
       attention
     ]);
     return /* @__PURE__ */ React4.createElement(MapContextProvier, {
-      attention
+      attention,
+      onChange
     }, /* @__PURE__ */ React4.createElement(MapContainer, {
       ...props,
       ref: mapRef,
@@ -1009,8 +1007,8 @@ var MapRoot = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true,
       scrollWheelZoom,
       doubleClickZoom,
       touchZoom,
-      center,
-      zoom
+      center: center ?? defaults2.center,
+      zoom: zoom ?? defaults2.zoom
     }));
   } finally {
     _effect.f();
@@ -1021,6 +1019,15 @@ var MapTiles = (_props) => {
   var _effect = _useSignals4();
   try {
     const ref = useRef2(null);
+    const { onChange } = useMapContext(MapTiles.displayName);
+    useMapEvents({
+      zoomstart: (ev) => {
+        onChange?.({
+          center: ev.target.getCenter(),
+          zoom: ev.target.getZoom()
+        });
+      }
+    });
     const { attention } = useMapContext(MapTiles.displayName);
     useEffect5(() => {
       if (ref.current) {
@@ -1051,7 +1058,7 @@ var MapMarkers = ({ selected, markers }) => {
         const bounds = latLngBounds(markers.map((marker) => marker.location));
         map.fitBounds(bounds);
       } else {
-        map.setView(defaults.center, defaults.zoom);
+        map.setView(defaults2.center, defaults2.zoom);
       }
     }, [
       markers
@@ -1180,6 +1187,8 @@ export {
   renderLayers,
   restrictAxis,
   timer,
+  translationKey,
+  translations,
   useDrag,
   useGlobeContext,
   useGlobeZoomHandler,