@rio-cloud/rio-uikit 2.3.0-beta.3 → 2.4.0

package/components/map/components/MapContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapContext.js","sources":["../../../../src/components/map/components/MapContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { MapApi, MapIncidents, MapLayer, MapType } from '../utils/mapTypes';\nimport { MAP_TYPE_DEFAULT } from './constants';\n\nexport type MapContextType = {\n    api: MapApi;\n    language: string;\n    enableWebGL: boolean;\n    enableMarkerIconCache: boolean;\n    baseLayer: MapType;\n    activeLayers: MapLayer[];\n    showCluster: boolean;\n    devicePixelRatio: number;\n    onMapTypeChange?: (type: MapType) => void;\n    onMapLayerChange?: (layer: MapLayer) => void;\n    onShowClusterChange?: (showCluster: boolean) => void;\n    mapSettingsTooltip?: string | React.ReactNode;\n    hideMapLayerSettings?: boolean;\n    hideClusterSettings?: boolean;\n    onIncidentsChange: (incidentsResult: MapIncidents) => void;\n};\n\nexport const defaultMapContext: MapContextType = {\n    api: {},\n    language: 'en',\n    enableWebGL: true,\n    enableMarkerIconCache: true,\n    baseLayer: MAP_TYPE_DEFAULT,\n    activeLayers: [],\n    showCluster: true,\n    devicePixelRatio: 1,\n    onIncidentsChange: () => {},\n};\n\nexport const MapContext = createContext<MapContextType>(defaultMapContext);\n\nexport const useMapContext = () => useContext(MapContext);\n"],"names":["defaultMapContext","MAP_TYPE_DEFAULT","MapContext","createContext","useMapContext","useContext"],"mappings":";;AAuBO,MAAMA,IAAoC;AAAA,EAC7C,KAAK,CAAA;AAAA,EACL,UAAU;AAAA,EACV,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,WAAWC;AAAA,EACX,cAAc,CAAA;AAAA,EACd,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,mBAAmB,MAAM;AAAA,EAAC;AAC9B,GAEaC,IAAaC,EAA8BH,CAAiB,GAE5DI,IAAgB,MAAMC,EAAWH,CAAU;"}
+{"version":3,"file":"MapContext.js","sources":["../../../../src/components/map/components/MapContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { MapApi, MapIncidents, MapLayer, MapType } from '../utils/mapTypes';\nimport { MAP_TYPE_DEFAULT } from './constants';\nimport { defaultMapViewportHistory, type MapViewportHistory } from '../hooks/useMapViewportHistory';\n\nexport type MapContextType = {\n    api: MapApi;\n    language: string;\n    enableWebGL: boolean;\n    enableMarkerIconCache: boolean;\n    enableFractionalZoom: boolean;\n    isZoomInteractionActive: boolean;\n    baseLayer: MapType;\n    activeLayers: MapLayer[];\n    showCluster: boolean;\n    devicePixelRatio: number;\n    onMapTypeChange?: (type: MapType) => void;\n    onMapLayerChange?: (layer: MapLayer) => void;\n    onShowClusterChange?: (showCluster: boolean) => void;\n    mapSettingsTooltip?: string | React.ReactNode;\n    hideMapLayerSettings?: boolean;\n    hideClusterSettings?: boolean;\n    viewportHistory: MapViewportHistory;\n    onIncidentsChange: (incidentsResult: MapIncidents) => void;\n};\n\nexport const defaultMapContext: MapContextType = {\n    api: {},\n    language: 'en',\n    enableWebGL: true,\n    enableMarkerIconCache: true,\n    enableFractionalZoom: false,\n    isZoomInteractionActive: false,\n    baseLayer: MAP_TYPE_DEFAULT,\n    activeLayers: [],\n    showCluster: true,\n    devicePixelRatio: 1,\n    viewportHistory: defaultMapViewportHistory,\n    onIncidentsChange: () => {},\n};\n\nexport const MapContext = createContext<MapContextType>(defaultMapContext);\n\nexport const useMapContext = () => useContext(MapContext);\n"],"names":["defaultMapContext","MAP_TYPE_DEFAULT","defaultMapViewportHistory","MapContext","createContext","useMapContext","useContext"],"mappings":";;;AA2BO,MAAMA,IAAoC;AAAA,EAC7C,KAAK,CAAA;AAAA,EACL,UAAU;AAAA,EACV,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,yBAAyB;AAAA,EACzB,WAAWC;AAAA,EACX,cAAc,CAAA;AAAA,EACd,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,iBAAiBC;AAAA,EACjB,mBAAmB,MAAM;AAAA,EAAC;AAC9B,GAEaC,IAAaC,EAA8BJ,CAAiB,GAE5DK,IAAgB,MAAMC,EAAWH,CAAU;"}

package/components/map/components/MapPosition.d.ts

@@ -1,5 +1,5 @@
 import { MapApi, MapProps } from '../utils/mapTypes';
-export type MapPositionProps = Pick<MapProps, 'boundingBox' | 'center' | 'zoomAnimation'> & {
+export type MapPositionProps = Pick<MapProps, 'boundingBox' | 'center' | 'zoom' | 'zoomAnimation'> & {
     api: MapApi;
 };
 declare const MapPosition: (props: MapPositionProps) => null;

package/components/map/components/MapPosition.js

@@ -1,19 +1,26 @@
-import { useEffect as r } from "react";
-const c = (s) => {
-  const { api: t, boundingBox: n, center: e, zoomAnimation: i = !1 } = s;
-  return r(() => {
-    if (t && n) {
-      const { top: o, left: a, bottom: l, right: f } = n;
-      t.map?.getViewModel().setLookAtData({ bounds: new H.geo.Rect(o, a, l, f) }, i);
+import { useRef as f, useEffect as h } from "react";
+import { useMapContext as P } from "./MapContext.js";
+const C = 1e-6, Z = 1e-3, N = (b) => {
+  const { api: o, boundingBox: a, center: t, zoom: e, zoomAnimation: r = !1 } = b, { enableFractionalZoom: g } = P(), p = f(), c = f(t), d = f(e);
+  return h(() => {
+    if (o && a) {
+      const { top: n, left: i, bottom: l, right: u } = a;
+      o.map?.getViewModel().setLookAtData({ bounds: new H.geo.Rect(n, i, l, u) }, r);
     }
-  }, [n]), r(() => {
-    if (!(t && e))
+  }, [a]), h(() => {
+    const n = o.map;
+    if (!(n && (t || e !== void 0)))
       return;
-    const o = t.utils?.getCenter();
-    o && (o.lat !== e.lat || o.lng !== e.lng) && t.utils?.setCenter(e, i);
-  }, [e]), null;
+    const i = p.current !== n, l = t?.lat !== c.current?.lat || t?.lng !== c.current?.lng, u = e !== d.current;
+    if (!(i || l || u))
+      return;
+    const s = {}, m = o.utils?.getCenter();
+    t && m && (Math.abs(m.lat - t.lat) > C || Math.abs(m.lng - t.lng) > C) && (s.position = t);
+    const M = g ? o.utils?.getPreciseZoom() : o.utils?.getZoom();
+    e !== void 0 && M !== void 0 && Math.abs(M - e) > Z && (s.zoom = e), Object.keys(s).length > 0 && n.getViewModel().setLookAtData(s, r), p.current = n, c.current = t, d.current = e;
+  }, [o, t, e, r, g]), null;
 };
 export {
-  c as default
+  N as default
 };
 //# sourceMappingURL=MapPosition.js.map

package/components/map/components/MapPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapPosition.js","sources":["../../../../src/components/map/components/MapPosition.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport type { MapApi, MapProps } from '../utils/mapTypes';\n\nexport type MapPositionProps = Pick<MapProps, 'boundingBox' | 'center' | 'zoomAnimation'> & {\n    api: MapApi;\n};\n\nconst MapPosition = (props: MapPositionProps) => {\n    const { api, boundingBox, center, zoomAnimation = false } = props;\n\n    // Update BoundingBox from outside\n    useEffect(() => {\n        if (api && boundingBox) {\n            const { top, left, bottom, right } = boundingBox;\n            api.map?.getViewModel().setLookAtData({ bounds: new H.geo.Rect(top, left, bottom, right) }, zoomAnimation);\n        }\n    }, [boundingBox]);\n\n    // Update Lat & Lng from outside if value is different\n    useEffect(() => {\n        if (!(api && center)) {\n            return;\n        }\n\n        const currentMapCenter = api.utils?.getCenter();\n        if (currentMapCenter) {\n            if (currentMapCenter.lat !== center.lat || currentMapCenter.lng !== center.lng) {\n                api.utils?.setCenter(center, zoomAnimation);\n            }\n        }\n    }, [center]);\n\n    return null;\n};\n\nexport default MapPosition;\n"],"names":["MapPosition","props","api","boundingBox","center","zoomAnimation","useEffect","top","left","bottom","right","currentMapCenter"],"mappings":";AAQA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,KAAAC,GAAK,aAAAC,GAAa,QAAAC,GAAQ,eAAAC,IAAgB,OAAUJ;AAG5D,SAAAK,EAAU,MAAM;AACZ,QAAIJ,KAAOC,GAAa;AACpB,YAAM,EAAE,KAAAI,GAAK,MAAAC,GAAM,QAAAC,GAAQ,OAAAC,MAAUP;AACrC,MAAAD,EAAI,KAAK,aAAA,EAAe,cAAc,EAAE,QAAQ,IAAI,EAAE,IAAI,KAAKK,GAAKC,GAAMC,GAAQC,CAAK,EAAA,GAAKL,CAAa;AAAA,IAC7G;AAAA,EACJ,GAAG,CAACF,CAAW,CAAC,GAGhBG,EAAU,MAAM;AACZ,QAAI,EAAEJ,KAAOE;AACT;AAGJ,UAAMO,IAAmBT,EAAI,OAAO,UAAA;AACpC,IAAIS,MACIA,EAAiB,QAAQP,EAAO,OAAOO,EAAiB,QAAQP,EAAO,QACvEF,EAAI,OAAO,UAAUE,GAAQC,CAAa;AAAA,EAGtD,GAAG,CAACD,CAAM,CAAC,GAEJ;AACX;"}
+{"version":3,"file":"MapPosition.js","sources":["../../../../src/components/map/components/MapPosition.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { MapApi, MapProps } from '../utils/mapTypes';\nimport { useMapContext } from './MapContext';\n\nconst CENTER_SYNC_EPSILON = 0.000001;\nconst ZOOM_SYNC_EPSILON = 0.001;\n\n// Keeps externally controlled viewport props in sync with HERE.\n// `center` and `zoom` may change together, but either value must also work independently.\nexport type MapPositionProps = Pick<MapProps, 'boundingBox' | 'center' | 'zoom' | 'zoomAnimation'> & {\n    api: MapApi;\n};\n\nconst MapPosition = (props: MapPositionProps) => {\n    const { api, boundingBox, center, zoom, zoomAnimation = false } = props;\n    const { enableFractionalZoom } = useMapContext();\n    const lastProcessedMapRef = useRef<H.Map>();\n    const lastProcessedCenterRef = useRef(center);\n    const lastProcessedZoomRef = useRef(zoom);\n\n    // Update BoundingBox from outside\n    useEffect(() => {\n        if (api && boundingBox) {\n            const { top, left, bottom, right } = boundingBox;\n            api.map?.getViewModel().setLookAtData({ bounds: new H.geo.Rect(top, left, bottom, right) }, zoomAnimation);\n        }\n    }, [boundingBox]);\n\n    // Update viewport from outside if center or zoom value is different.\n    // If only zoom changed, HERE receives only `{ zoom }`; if only center changed, only `{ position }`.\n    // If both changed in the same render, they are applied atomically to avoid animated zooming around the old center.\n    useEffect(() => {\n        const map = api.map;\n\n        if (!(map && (center || zoom !== undefined))) {\n            return;\n        }\n\n        const hasMapChanged = lastProcessedMapRef.current !== map;\n        const hasCenterChanged =\n            center?.lat !== lastProcessedCenterRef.current?.lat || center?.lng !== lastProcessedCenterRef.current?.lng;\n        const hasZoomChanged = zoom !== lastProcessedZoomRef.current;\n\n        if (!(hasMapChanged || hasCenterChanged || hasZoomChanged)) {\n            return;\n        }\n\n        const lookAtData: H.map.ViewModel.ILookAtData = {};\n\n        const currentMapCenter = api.utils?.getCenter();\n        if (\n            center &&\n            currentMapCenter &&\n            (Math.abs(currentMapCenter.lat - center.lat) > CENTER_SYNC_EPSILON ||\n                Math.abs(currentMapCenter.lng - center.lng) > CENTER_SYNC_EPSILON)\n        ) {\n            lookAtData.position = center;\n        }\n\n        const currentMapZoom = enableFractionalZoom ? api.utils?.getPreciseZoom() : api.utils?.getZoom();\n        if (zoom !== undefined && currentMapZoom !== undefined && Math.abs(currentMapZoom - zoom) > ZOOM_SYNC_EPSILON) {\n            lookAtData.zoom = zoom;\n        }\n\n        if (Object.keys(lookAtData).length > 0) {\n            map.getViewModel().setLookAtData(lookAtData, zoomAnimation);\n        }\n\n        lastProcessedMapRef.current = map;\n        lastProcessedCenterRef.current = center;\n        lastProcessedZoomRef.current = zoom;\n    }, [api, center, zoom, zoomAnimation, enableFractionalZoom]);\n\n    return null;\n};\n\nexport default MapPosition;\n"],"names":["CENTER_SYNC_EPSILON","ZOOM_SYNC_EPSILON","MapPosition","props","api","boundingBox","center","zoom","zoomAnimation","enableFractionalZoom","useMapContext","lastProcessedMapRef","useRef","lastProcessedCenterRef","lastProcessedZoomRef","useEffect","top","left","bottom","right","map","hasMapChanged","hasCenterChanged","hasZoomChanged","lookAtData","currentMapCenter","currentMapZoom"],"mappings":";;AAKA,MAAMA,IAAsB,MACtBC,IAAoB,MAQpBC,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,KAAAC,GAAK,aAAAC,GAAa,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,IAAgB,OAAUL,GAC5D,EAAE,sBAAAM,EAAA,IAAyBC,EAAA,GAC3BC,IAAsBC,EAAA,GACtBC,IAAyBD,EAAON,CAAM,GACtCQ,IAAuBF,EAAOL,CAAI;AAGxC,SAAAQ,EAAU,MAAM;AACZ,QAAIX,KAAOC,GAAa;AACpB,YAAM,EAAE,KAAAW,GAAK,MAAAC,GAAM,QAAAC,GAAQ,OAAAC,MAAUd;AACrC,MAAAD,EAAI,KAAK,aAAA,EAAe,cAAc,EAAE,QAAQ,IAAI,EAAE,IAAI,KAAKY,GAAKC,GAAMC,GAAQC,CAAK,EAAA,GAAKX,CAAa;AAAA,IAC7G;AAAA,EACJ,GAAG,CAACH,CAAW,CAAC,GAKhBU,EAAU,MAAM;AACZ,UAAMK,IAAMhB,EAAI;AAEhB,QAAI,EAAEgB,MAAQd,KAAUC,MAAS;AAC7B;AAGJ,UAAMc,IAAgBV,EAAoB,YAAYS,GAChDE,IACFhB,GAAQ,QAAQO,EAAuB,SAAS,OAAOP,GAAQ,QAAQO,EAAuB,SAAS,KACrGU,IAAiBhB,MAASO,EAAqB;AAErD,QAAI,EAAEO,KAAiBC,KAAoBC;AACvC;AAGJ,UAAMC,IAA0C,CAAA,GAE1CC,IAAmBrB,EAAI,OAAO,UAAA;AACpC,IACIE,KACAmB,MACC,KAAK,IAAIA,EAAiB,MAAMnB,EAAO,GAAG,IAAIN,KAC3C,KAAK,IAAIyB,EAAiB,MAAMnB,EAAO,GAAG,IAAIN,OAElDwB,EAAW,WAAWlB;AAG1B,UAAMoB,IAAiBjB,IAAuBL,EAAI,OAAO,mBAAmBA,EAAI,OAAO,QAAA;AACvF,IAAIG,MAAS,UAAamB,MAAmB,UAAa,KAAK,IAAIA,IAAiBnB,CAAI,IAAIN,MACxFuB,EAAW,OAAOjB,IAGlB,OAAO,KAAKiB,CAAU,EAAE,SAAS,KACjCJ,EAAI,aAAA,EAAe,cAAcI,GAAYhB,CAAa,GAG9DG,EAAoB,UAAUS,GAC9BP,EAAuB,UAAUP,GACjCQ,EAAqB,UAAUP;AAAA,EACnC,GAAG,CAACH,GAAKE,GAAQC,GAAMC,GAAeC,CAAoB,CAAC,GAEpD;AACX;"}

package/components/map/components/features/MapZoom.d.ts

@@ -1,5 +1,4 @@
 export type MapZoomProps = {
-    zoom?: number;
     hideZoomButtons: boolean;
     zoomAnimation: boolean;
     onZoomIn: (zoom: number) => void;

package/components/map/components/features/MapZoom.js

@@ -1,25 +1,17 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useEffect as f } from "react";
-import a from "./settings/ZoomButtons.js";
-import { useMapContext as p } from "../MapContext.js";
-const I = (r) => {
-  const { zoom: n, hideZoomButtons: s, zoomAnimation: m, onZoomIn: u, onZoomOut: Z } = r, { api: o } = p();
-  f(() => {
-    if (!o)
-      return;
-    const e = o.utils?.getZoom();
-    n && e !== n && o.utils?.setZoom(n, m);
-  }, [n]);
-  const i = () => {
-    const t = (o?.utils?.getZoom() ?? 0) + 1;
-    u(t), o?.utils?.setZoom(t, m);
-  }, c = () => {
-    const t = (o?.utils?.getZoom() ?? 0) - 1;
-    Z(t), o?.utils?.setZoom(t, m);
+import { jsx as i } from "react/jsx-runtime";
+import l from "./settings/ZoomButtons.js";
+import { useMapContext as a } from "../MapContext.js";
+const h = (m) => {
+  const { hideZoomButtons: s, zoomAnimation: n, onZoomIn: e, onZoomOut: r } = m, { api: t } = a(), Z = () => {
+    const o = (t?.utils?.getZoom() ?? 0) + 1;
+    e(o), t?.utils?.setZoom(o, n);
+  }, u = () => {
+    const o = (t?.utils?.getZoom() ?? 0) - 1;
+    r(o), t?.utils?.setZoom(o, n);
   };
-  return s ? null : /* @__PURE__ */ l(a, { onZoomIn: i, onZoomOut: c });
+  return s ? null : /* @__PURE__ */ i(l, { onZoomIn: Z, onZoomOut: u });
 };
 export {
-  I as default
+  h as default
 };
 //# sourceMappingURL=MapZoom.js.map

package/components/map/components/features/MapZoom.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapZoom.js","sources":["../../../../../src/components/map/components/features/MapZoom.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport ZoomButtons from './settings/ZoomButtons';\nimport { useMapContext } from '../MapContext';\n\nexport type MapZoomProps = {\n    zoom?: number;\n    hideZoomButtons: boolean;\n    zoomAnimation: boolean;\n    onZoomIn: (zoom: number) => void;\n    onZoomOut: (zoom: number) => void;\n};\n\nconst MapZoom = (props: MapZoomProps) => {\n    const { zoom, hideZoomButtons, zoomAnimation, onZoomIn, onZoomOut } = props;\n\n    const { api } = useMapContext();\n\n    // Update Zoom from outside if value is different\n    useEffect(() => {\n        if (!api) {\n            return;\n        }\n\n        const currentMapZoom = api.utils?.getZoom();\n\n        if (zoom && currentMapZoom !== zoom) {\n            api.utils?.setZoom(zoom, zoomAnimation);\n        }\n    }, [zoom]);\n\n    const handleZoomIn = () => {\n        const currentZoom = api?.utils?.getZoom() ?? 0;\n        const newZoom = currentZoom + 1;\n\n        onZoomIn(newZoom);\n        api?.utils?.setZoom(newZoom, zoomAnimation);\n    };\n\n    const handleZoomOut = () => {\n        const currentZoom = api?.utils?.getZoom() ?? 0;\n        const newZoom = currentZoom - 1;\n\n        onZoomOut(newZoom);\n        api?.utils?.setZoom(newZoom, zoomAnimation);\n    };\n\n    if (hideZoomButtons) {\n        return null;\n    }\n\n    return <ZoomButtons onZoomIn={handleZoomIn} onZoomOut={handleZoomOut} />;\n};\n\nexport default MapZoom;\n"],"names":["MapZoom","props","zoom","hideZoomButtons","zoomAnimation","onZoomIn","onZoomOut","api","useMapContext","useEffect","currentMapZoom","handleZoomIn","newZoom","handleZoomOut","jsx","ZoomButtons"],"mappings":";;;;AAaA,MAAMA,IAAU,CAACC,MAAwB;AACrC,QAAM,EAAE,MAAAC,GAAM,iBAAAC,GAAiB,eAAAC,GAAe,UAAAC,GAAU,WAAAC,MAAcL,GAEhE,EAAE,KAAAM,EAAA,IAAQC,EAAA;AAGhB,EAAAC,EAAU,MAAM;AACZ,QAAI,CAACF;AACD;AAGJ,UAAMG,IAAiBH,EAAI,OAAO,QAAA;AAElC,IAAIL,KAAQQ,MAAmBR,KAC3BK,EAAI,OAAO,QAAQL,GAAME,CAAa;AAAA,EAE9C,GAAG,CAACF,CAAI,CAAC;AAET,QAAMS,IAAe,MAAM;AAEvB,UAAMC,KADcL,GAAK,OAAO,QAAA,KAAa,KACf;AAE9B,IAAAF,EAASO,CAAO,GAChBL,GAAK,OAAO,QAAQK,GAASR,CAAa;AAAA,EAC9C,GAEMS,IAAgB,MAAM;AAExB,UAAMD,KADcL,GAAK,OAAO,QAAA,KAAa,KACf;AAE9B,IAAAD,EAAUM,CAAO,GACjBL,GAAK,OAAO,QAAQK,GAASR,CAAa;AAAA,EAC9C;AAEA,SAAID,IACO,OAGJ,gBAAAW,EAACC,GAAA,EAAY,UAAUJ,GAAc,WAAWE,GAAe;AAC1E;"}
+{"version":3,"file":"MapZoom.js","sources":["../../../../../src/components/map/components/features/MapZoom.tsx"],"sourcesContent":["import ZoomButtons from './settings/ZoomButtons';\nimport { useMapContext } from '../MapContext';\n\nexport type MapZoomProps = {\n    hideZoomButtons: boolean;\n    zoomAnimation: boolean;\n    onZoomIn: (zoom: number) => void;\n    onZoomOut: (zoom: number) => void;\n};\n\nconst MapZoom = (props: MapZoomProps) => {\n    const { hideZoomButtons, zoomAnimation, onZoomIn, onZoomOut } = props;\n\n    const { api } = useMapContext();\n\n    const handleZoomIn = () => {\n        const currentZoom = api?.utils?.getZoom() ?? 0;\n        const newZoom = currentZoom + 1;\n\n        onZoomIn(newZoom);\n        api?.utils?.setZoom(newZoom, zoomAnimation);\n    };\n\n    const handleZoomOut = () => {\n        const currentZoom = api?.utils?.getZoom() ?? 0;\n        const newZoom = currentZoom - 1;\n\n        onZoomOut(newZoom);\n        api?.utils?.setZoom(newZoom, zoomAnimation);\n    };\n\n    if (hideZoomButtons) {\n        return null;\n    }\n\n    return <ZoomButtons onZoomIn={handleZoomIn} onZoomOut={handleZoomOut} />;\n};\n\nexport default MapZoom;\n"],"names":["MapZoom","props","hideZoomButtons","zoomAnimation","onZoomIn","onZoomOut","api","useMapContext","handleZoomIn","newZoom","handleZoomOut","jsx","ZoomButtons"],"mappings":";;;AAUA,MAAMA,IAAU,CAACC,MAAwB;AACrC,QAAM,EAAE,iBAAAC,GAAiB,eAAAC,GAAe,UAAAC,GAAU,WAAAC,MAAcJ,GAE1D,EAAE,KAAAK,EAAA,IAAQC,EAAA,GAEVC,IAAe,MAAM;AAEvB,UAAMC,KADcH,GAAK,OAAO,QAAA,KAAa,KACf;AAE9B,IAAAF,EAASK,CAAO,GAChBH,GAAK,OAAO,QAAQG,GAASN,CAAa;AAAA,EAC9C,GAEMO,IAAgB,MAAM;AAExB,UAAMD,KADcH,GAAK,OAAO,QAAA,KAAa,KACf;AAE9B,IAAAD,EAAUI,CAAO,GACjBH,GAAK,OAAO,QAAQG,GAASN,CAAa;AAAA,EAC9C;AAEA,SAAID,IACO,OAGJ,gBAAAS,EAACC,GAAA,EAAY,UAAUJ,GAAc,WAAWE,GAAe;AAC1E;"}

package/components/map/components/features/settings/MapSettingsTile.d.ts

@@ -1,13 +1,40 @@
 import { default as React } from 'react';
 export type MapSettingsTileProps = {
+    /**
+     * Callback fired when the settings tile opens or closes.
+     */
     onToggle?: (newState: boolean) => void;
+    /**
+     * Tooltip shown while the settings tile is closed.
+     */
     tooltip?: React.ReactNode;
+    /**
+     * Custom panel rendered below the settings tile when it is open.
+     */
     panel?: React.ReactNode;
+    /**
+     * Dropdown menu items rendered when the settings tile is open.
+     */
     items?: JSX.Element[] | undefined;
+    /**
+     * Icon shown when the tile is active.
+     */
     activeIcon?: JSX.Element | undefined;
+    /**
+     * Icon shown when the tile is inactive.
+     */
     inactiveIcon?: JSX.Element | undefined;
+    /**
+     * Controls whether the active or inactive icon is shown.
+     */
     isActive?: boolean;
+    /**
+     * Additional class name for the clickable settings button.
+     */
     buttonClassName?: string;
+    /**
+     * Additional class name for the settings tile wrapper.
+     */
     className?: string;
 };
 declare const MapSettingsTile: (props: MapSettingsTileProps) => import("react/jsx-runtime").JSX.Element;

package/components/map/components/features/settings/MapSettingsTile.js

@@ -1,9 +1,9 @@
-import { jsxs as c, Fragment as L, jsx as i } from "react/jsx-runtime";
+import { jsxs as p, Fragment as L, jsx as i } from "react/jsx-runtime";
 import I, { useState as T } from "react";
 import { AnimatePresence as M, motion as O } from "motion/react";
 import { noop as j } from "es-toolkit/function";
 import { usePopper as U } from "react-popper";
-import p from "../../../../../utils/classNames.js";
+import s from "../../../../../utils/classNames.js";
 import B from "../../../../overlay/OverlayTrigger.js";
 import S from "../../../../tooltip/Tooltip.js";
 import F, { useClickOutsideWithRef as q } from "../../../../../hooks/useClickOutside.js";
@@ -30,10 +30,10 @@ const K = 800, Q = 100, n = {
     inactiveIcon: f,
     isActive: v = !1,
     panel: u,
-    items: s,
+    items: a,
     className: C,
     buttonClassName: w,
-    tooltip: a,
+    tooltip: l,
     ...x
   } = m, [e, h] = T(!1), P = () => {
     const t = !e;
@@ -52,20 +52,20 @@ const K = 800, Q = 100, n = {
     ] : []
   });
   q(y, (t) => {
-    const r = t.target instanceof Node ? t.target : null;
-    r && N?.contains(r) || e && (h(!1), o(!1));
+    const c = t.target instanceof Node ? t.target : null;
+    c && N?.contains(c) || e && (h(!1), o(!1));
   });
-  const D = p("MapSettingsTile", C), W = p("MapSettingsButton", e && "active", w), A = p(
+  const D = s("MapSettingsTile", C), W = s("MapSettingsButton", e && "active", w), A = s(
     "MapSettingsTileIcon",
     "hover-scale-110",
     v ? "display-block" : "display-none",
     d?.props.className || ""
-  ), H = p(
+  ), H = s(
     "MapSettingsTileIcon",
     "hover-scale-110",
     v ? "display-none" : "display-block",
     f?.props.className || ""
-  ), l = /* @__PURE__ */ c("div", { className: W, onClick: P, children: [
+  ), r = /* @__PURE__ */ p("div", { className: W, onClick: P, children: [
     d && I.cloneElement(d, {
       className: A
     }),
@@ -73,9 +73,9 @@ const K = 800, Q = 100, n = {
       className: H
     })
   ] });
-  return /* @__PURE__ */ c("div", { className: D, ref: g, ...x, children: [
-    !s && /* @__PURE__ */ c(L, { children: [
-      a && !e ? b(l, a) : l,
+  return /* @__PURE__ */ p("div", { className: D, ref: g, ...x, children: [
+    !a && /* @__PURE__ */ p(L, { children: [
+      l && !e ? b(r, l) : r,
       /* @__PURE__ */ i("div", { className: "overflow-hidden", children: /* @__PURE__ */ i(M, { children: e && u && /* @__PURE__ */ i(
         O.div,
         {
@@ -87,12 +87,12 @@ const K = 800, Q = 100, n = {
         }
       ) }) })
     ] }),
-    s && /* @__PURE__ */ c("div", { className: "MapSettingsTile-inner position-relative", ref: _, children: [
-      a && !e ? b(l, a) : l,
-      /* @__PURE__ */ i(M, { children: e && s && /* @__PURE__ */ i(
+    a && /* @__PURE__ */ p("div", { className: "MapSettingsTile-inner position-relative", ref: _, children: [
+      l && !e ? b(r, l) : r,
+      /* @__PURE__ */ i(M, { children: e && a && /* @__PURE__ */ i(
         O.div,
         {
-          className: "dropdown",
+          className: s("dropdown", e && "open"),
           initial: n.initial,
           animate: n.animate,
           exit: n.exit,
@@ -104,7 +104,7 @@ const K = 800, Q = 100, n = {
               ref: R,
               style: { ...k.popper, minWidth: "180px" },
               ...E.popper,
-              children: s?.map((t, r) => t.type.isMapSettingsDropdownHeader ? t : /* @__PURE__ */ i(G, { value: t }, r))
+              children: a?.map((t, c) => t.type.isMapSettingsDropdownHeader ? t : /* @__PURE__ */ i(G, { value: t }, c))
             }
           )
         }

package/components/map/components/features/settings/MapSettingsTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapSettingsTile.js","sources":["../../../../../../src/components/map/components/features/settings/MapSettingsTile.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, motion, type Transition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { usePopper } from 'react-popper';\n\nimport classNames from '../../../../../utils/classNames';\nimport OverlayTrigger from '../../../../overlay/OverlayTrigger';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport useClickOutside, { useClickOutsideWithRef } from '../../../../../hooks/useClickOutside';\nimport MenuItemList from '../../../../menuItems/MenuItemList';\nimport MenuItem from '../../../../menuItems/MenuItem';\nimport { isMobileScreen } from '../../../../../utils/deviceUtils';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;\n\nconst tileAnimation = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 10 },\n    transition: { duration: 0.08, ease: 'easeOut' } as Transition,\n};\n\nconst getComponentWithTooltip = (component: React.ReactNode, tooltip: React.ReactNode) => (\n    <OverlayTrigger\n        placement={Tooltip.TOP}\n        delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n        overlay={\n            <Tooltip id='tooltip' width='auto'>\n                {tooltip}\n            </Tooltip>\n        }\n    >\n        {component}\n    </OverlayTrigger>\n);\n\nexport type MapSettingsTileProps = {\n    onToggle?: (newState: boolean) => void;\n    tooltip?: React.ReactNode;\n    panel?: React.ReactNode;\n    items?: JSX.Element[] | undefined;\n    activeIcon?: JSX.Element | undefined;\n    inactiveIcon?: JSX.Element | undefined;\n    isActive?: boolean;\n    buttonClassName?: string;\n    className?: string;\n};\n\nconst MapSettingsTile = (props: MapSettingsTileProps) => {\n    const {\n        onToggle = noop,\n        activeIcon,\n        inactiveIcon,\n        isActive = false,\n        panel,\n        items,\n        className,\n        buttonClassName,\n        tooltip,\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleToggle = () => {\n        const newState = !isOpen;\n        setIsOpen(newState);\n        onToggle(newState);\n\n        buttonRef.current.blur();\n    };\n\n    const handleClosePanel = () => {\n        if (isOpen && panel) {\n            setIsOpen(false);\n            onToggle(false);\n            buttonRef.current.blur();\n        }\n    };\n\n    const buttonRef = useClickOutside(handleClosePanel);\n\n    const [toggleRef, setToggleRef] = useState<HTMLDivElement | null>(null);\n    const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n\n    const { styles, attributes } = usePopper(toggleRef, refDropdownMenu, {\n        placement: 'top-end',\n        modifiers:\n            isOpen && isMobileScreen()\n                ? [\n                      {\n                          name: 'offset',\n                          options: {\n                              offset: [-60, -60],\n                          },\n                      },\n                  ]\n                : [],\n    });\n\n    useClickOutsideWithRef(refDropdownMenu, (event: MouseEvent | TouchEvent) => {\n        const target = event.target instanceof Node ? event.target : null;\n\n        if (target && toggleRef?.contains(target)) {\n            return;\n        }\n\n        if (isOpen) {\n            setIsOpen(false);\n            onToggle(false);\n        }\n    });\n\n    const wrapperClasses = classNames('MapSettingsTile', className);\n\n    const buttonClasses = classNames('MapSettingsButton', isOpen && 'active', buttonClassName);\n\n    const activeIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-block' : 'display-none',\n        activeIcon?.props.className || ''\n    );\n\n    const inactiveIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-none' : 'display-block',\n        inactiveIcon?.props.className || ''\n    );\n\n    const button = (\n        <div className={buttonClasses} onClick={handleToggle}>\n            {activeIcon &&\n                React.cloneElement(activeIcon, {\n                    className: activeIconClassNames,\n                })}\n            {inactiveIcon &&\n                React.cloneElement(inactiveIcon, {\n                    className: inactiveIconClassNames,\n                })}\n        </div>\n    );\n\n    return (\n        <div className={wrapperClasses} ref={buttonRef} {...remainingProps}>\n            {/* backwards compatible way of still showing a panel without labels */}\n            {!items && (\n                <>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    <div className='overflow-hidden'>\n                        <AnimatePresence>\n                            {isOpen && panel && (\n                                <motion.div\n                                    initial={tileAnimation.initial}\n                                    animate={tileAnimation.animate}\n                                    exit={tileAnimation.exit}\n                                    transition={tileAnimation.transition}\n                                >\n                                    {panel}\n                                </motion.div>\n                            )}\n                        </AnimatePresence>\n                    </div>\n                </>\n            )}\n            {/* new way of showing a dropdown without labels */}\n            {items && (\n                <div className='MapSettingsTile-inner position-relative' ref={setToggleRef}>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    <AnimatePresence>\n                        {isOpen && items && (\n                            <motion.div\n                                className='dropdown'\n                                initial={tileAnimation.initial}\n                                animate={tileAnimation.animate}\n                                exit={tileAnimation.exit}\n                                transition={tileAnimation.transition}\n                            >\n                                <MenuItemList\n                                    className='margin-bottom-5 shadow-smooth border-none'\n                                    ref={setRefDropdownMenu}\n                                    style={{ ...styles.popper, minWidth: '180px' }}\n                                    {...attributes.popper}\n                                >\n                                    {items?.map((item, index) => {\n                                        if (item.type.isMapSettingsDropdownHeader) {\n                                            return item;\n                                        }\n                                        return <MenuItem key={index} value={item} />;\n                                    })}\n                                </MenuItemList>\n                            </motion.div>\n                        )}\n                    </AnimatePresence>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default MapSettingsTile;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","tileAnimation","getComponentWithTooltip","component","tooltip","jsx","OverlayTrigger","Tooltip","MapSettingsTile","props","onToggle","noop","activeIcon","inactiveIcon","isActive","panel","items","className","buttonClassName","remainingProps","isOpen","setIsOpen","useState","handleToggle","newState","buttonRef","useClickOutside","toggleRef","setToggleRef","refDropdownMenu","setRefDropdownMenu","styles","attributes","usePopper","isMobileScreen","useClickOutsideWithRef","event","target","wrapperClasses","classNames","buttonClasses","activeIconClassNames","inactiveIconClassNames","button","jsxs","React","Fragment","AnimatePresence","motion","MenuItemList","item","index","MenuItem"],"mappings":"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"}
+{"version":3,"file":"MapSettingsTile.js","sources":["../../../../../../src/components/map/components/features/settings/MapSettingsTile.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, motion, type Transition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { usePopper } from 'react-popper';\n\nimport classNames from '../../../../../utils/classNames';\nimport OverlayTrigger from '../../../../overlay/OverlayTrigger';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport useClickOutside, { useClickOutsideWithRef } from '../../../../../hooks/useClickOutside';\nimport MenuItemList from '../../../../menuItems/MenuItemList';\nimport MenuItem from '../../../../menuItems/MenuItem';\nimport { isMobileScreen } from '../../../../../utils/deviceUtils';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;\n\nconst tileAnimation = {\n    initial: { opacity: 0, y: 10 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 10 },\n    transition: { duration: 0.08, ease: 'easeOut' } as Transition,\n};\n\nconst getComponentWithTooltip = (component: React.ReactNode, tooltip: React.ReactNode) => (\n    <OverlayTrigger\n        placement={Tooltip.TOP}\n        delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n        overlay={\n            <Tooltip id='tooltip' width='auto'>\n                {tooltip}\n            </Tooltip>\n        }\n    >\n        {component}\n    </OverlayTrigger>\n);\n\nexport type MapSettingsTileProps = {\n    /**\n     * Callback fired when the settings tile opens or closes.\n     */\n    onToggle?: (newState: boolean) => void;\n\n    /**\n     * Tooltip shown while the settings tile is closed.\n     */\n    tooltip?: React.ReactNode;\n\n    /**\n     * Custom panel rendered below the settings tile when it is open.\n     */\n    panel?: React.ReactNode;\n\n    /**\n     * Dropdown menu items rendered when the settings tile is open.\n     */\n    items?: JSX.Element[] | undefined;\n\n    /**\n     * Icon shown when the tile is active.\n     */\n    activeIcon?: JSX.Element | undefined;\n\n    /**\n     * Icon shown when the tile is inactive.\n     */\n    inactiveIcon?: JSX.Element | undefined;\n\n    /**\n     * Controls whether the active or inactive icon is shown.\n     */\n    isActive?: boolean;\n\n    /**\n     * Additional class name for the clickable settings button.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Additional class name for the settings tile wrapper.\n     */\n    className?: string;\n};\n\nconst MapSettingsTile = (props: MapSettingsTileProps) => {\n    const {\n        onToggle = noop,\n        activeIcon,\n        inactiveIcon,\n        isActive = false,\n        panel,\n        items,\n        className,\n        buttonClassName,\n        tooltip,\n        ...remainingProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const handleToggle = () => {\n        const newState = !isOpen;\n        setIsOpen(newState);\n        onToggle(newState);\n\n        buttonRef.current.blur();\n    };\n\n    const handleClosePanel = () => {\n        if (isOpen && panel) {\n            setIsOpen(false);\n            onToggle(false);\n            buttonRef.current.blur();\n        }\n    };\n\n    const buttonRef = useClickOutside(handleClosePanel);\n\n    const [toggleRef, setToggleRef] = useState<HTMLDivElement | null>(null);\n    const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement | null>(null);\n\n    const { styles, attributes } = usePopper(toggleRef, refDropdownMenu, {\n        placement: 'top-end',\n        modifiers:\n            isOpen && isMobileScreen()\n                ? [\n                      {\n                          name: 'offset',\n                          options: {\n                              offset: [-60, -60],\n                          },\n                      },\n                  ]\n                : [],\n    });\n\n    useClickOutsideWithRef(refDropdownMenu, (event: MouseEvent | TouchEvent) => {\n        const target = event.target instanceof Node ? event.target : null;\n\n        if (target && toggleRef?.contains(target)) {\n            return;\n        }\n\n        if (isOpen) {\n            setIsOpen(false);\n            onToggle(false);\n        }\n    });\n\n    const wrapperClasses = classNames('MapSettingsTile', className);\n\n    const buttonClasses = classNames('MapSettingsButton', isOpen && 'active', buttonClassName);\n\n    const activeIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-block' : 'display-none',\n        activeIcon?.props.className || ''\n    );\n\n    const inactiveIconClassNames = classNames(\n        'MapSettingsTileIcon',\n        'hover-scale-110',\n        isActive ? 'display-none' : 'display-block',\n        inactiveIcon?.props.className || ''\n    );\n\n    const button = (\n        <div className={buttonClasses} onClick={handleToggle}>\n            {activeIcon &&\n                React.cloneElement(activeIcon, {\n                    className: activeIconClassNames,\n                })}\n            {inactiveIcon &&\n                React.cloneElement(inactiveIcon, {\n                    className: inactiveIconClassNames,\n                })}\n        </div>\n    );\n\n    return (\n        <div className={wrapperClasses} ref={buttonRef} {...remainingProps}>\n            {/* backwards compatible way of still showing a panel without labels */}\n            {!items && (\n                <>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    <div className='overflow-hidden'>\n                        <AnimatePresence>\n                            {isOpen && panel && (\n                                <motion.div\n                                    initial={tileAnimation.initial}\n                                    animate={tileAnimation.animate}\n                                    exit={tileAnimation.exit}\n                                    transition={tileAnimation.transition}\n                                >\n                                    {panel}\n                                </motion.div>\n                            )}\n                        </AnimatePresence>\n                    </div>\n                </>\n            )}\n            {/* new way of showing a dropdown without labels */}\n            {items && (\n                <div className='MapSettingsTile-inner position-relative' ref={setToggleRef}>\n                    {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n                    <AnimatePresence>\n                        {isOpen && items && (\n                            <motion.div\n                                className={classNames('dropdown', isOpen && 'open')}\n                                initial={tileAnimation.initial}\n                                animate={tileAnimation.animate}\n                                exit={tileAnimation.exit}\n                                transition={tileAnimation.transition}\n                            >\n                                <MenuItemList\n                                    className='margin-bottom-5 shadow-smooth border-none'\n                                    ref={setRefDropdownMenu}\n                                    style={{ ...styles.popper, minWidth: '180px' }}\n                                    {...attributes.popper}\n                                >\n                                    {items?.map((item, index) => {\n                                        if (item.type.isMapSettingsDropdownHeader) {\n                                            return item;\n                                        }\n                                        return <MenuItem key={index} value={item} />;\n                                    })}\n                                </MenuItemList>\n                            </motion.div>\n                        )}\n                    </AnimatePresence>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default MapSettingsTile;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","tileAnimation","getComponentWithTooltip","component","tooltip","jsx","OverlayTrigger","Tooltip","MapSettingsTile","props","onToggle","noop","activeIcon","inactiveIcon","isActive","panel","items","className","buttonClassName","remainingProps","isOpen","setIsOpen","useState","handleToggle","newState","buttonRef","useClickOutside","toggleRef","setToggleRef","refDropdownMenu","setRefDropdownMenu","styles","attributes","usePopper","isMobileScreen","useClickOutsideWithRef","event","target","wrapperClasses","classNames","buttonClasses","activeIconClassNames","inactiveIconClassNames","button","jsxs","React","Fragment","AnimatePresence","motion","MenuItemList","item","index","MenuItem"],"mappings":"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"}

package/components/map/components/features/settings/buttons/MapPreviousViewportButton.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { default as MapSettingsTile } from '../MapSettingsTile';
+export type MapPreviousViewportButtonProps = Omit<React.ComponentProps<typeof MapSettingsTile>, 'activeIcon' | 'inactiveIcon' | 'isActive' | 'onToggle'> & {
+    /**
+     * Callback fired after the map viewport history jumps back to the previous viewport.
+     */
+    onGoBack?: () => void;
+};
+declare const MapPreviousViewportButton: (props: MapPreviousViewportButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MapPreviousViewportButton;

package/components/map/components/features/settings/buttons/MapPreviousViewportButton.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import c from "../MapSettingsTile.js";
+import { useMapContext as s } from "../../../MapContext.js";
+import { MapIcon as p } from "../../../../icons/MapIcon.js";
+const g = (t) => {
+  const { onGoBack: r, ...e } = t, { viewportHistory: a } = s(), { canGoBack: n, goBack: i } = a;
+  return n ? /* @__PURE__ */ o(
+    c,
+    {
+      className: "MapPreviousViewportButton",
+      isActive: !0,
+      activeIcon: /* @__PURE__ */ o(p, { name: "rioglyph-arrow-left", className: "MapPreviousViewportButtonIcon text-color-gray" }),
+      onToggle: () => {
+        i(), r?.();
+      },
+      ...e
+    }
+  ) : null;
+};
+export {
+  g as default
+};
+//# sourceMappingURL=MapPreviousViewportButton.js.map

package/components/map/components/features/settings/buttons/MapPreviousViewportButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapPreviousViewportButton.js","sources":["../../../../../../../src/components/map/components/features/settings/buttons/MapPreviousViewportButton.tsx"],"sourcesContent":["import type React from 'react';\n\nimport MapSettingsTile from '../MapSettingsTile';\nimport { useMapContext } from '../../../MapContext';\nimport { MapIcon } from '../../../../icons/MapIcon';\n\nexport type MapPreviousViewportButtonProps = Omit<\n    React.ComponentProps<typeof MapSettingsTile>,\n    'activeIcon' | 'inactiveIcon' | 'isActive' | 'onToggle'\n> & {\n    /**\n     * Callback fired after the map viewport history jumps back to the previous viewport.\n     */\n    onGoBack?: () => void;\n};\n\nconst MapPreviousViewportButton = (props: MapPreviousViewportButtonProps) => {\n    const { onGoBack, ...remainingProps } = props;\n    const { viewportHistory } = useMapContext();\n    const { canGoBack, goBack } = viewportHistory;\n\n    if (!canGoBack) {\n        return null;\n    }\n\n    const handleGoBack = () => {\n        goBack();\n        onGoBack?.();\n    };\n\n    return (\n        <MapSettingsTile\n            className='MapPreviousViewportButton'\n            isActive\n            activeIcon={\n                <MapIcon name='rioglyph-arrow-left' className='MapPreviousViewportButtonIcon text-color-gray' />\n            }\n            onToggle={handleGoBack}\n            {...remainingProps}\n        />\n    );\n};\n\nexport default MapPreviousViewportButton;\n"],"names":["MapPreviousViewportButton","props","onGoBack","remainingProps","viewportHistory","useMapContext","canGoBack","goBack","jsx","MapSettingsTile","MapIcon"],"mappings":";;;;AAgBA,MAAMA,IAA4B,CAACC,MAA0C;AACzE,QAAM,EAAE,UAAAC,GAAU,GAAGC,EAAA,IAAmBF,GAClC,EAAE,iBAAAG,EAAA,IAAoBC,EAAA,GACtB,EAAE,WAAAC,GAAW,QAAAC,EAAA,IAAWH;AAE9B,SAAKE,IAUD,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,UAAQ;AAAA,MACR,YACI,gBAAAD,EAACE,GAAA,EAAQ,MAAK,uBAAsB,WAAU,iDAAgD;AAAA,MAElG,UAZa,MAAM;AACvB,QAAAH,EAAA,GACAL,IAAA;AAAA,MACJ;AAAA,MAUS,GAAGC;AAAA,IAAA;AAAA,EAAA,IAhBD;AAmBf;"}

package/components/map/hooks/useMapViewportHistory.d.ts

@@ -0,0 +1,19 @@
+import { MapApi, Position } from '../utils/mapTypes';
+export type MapViewport = {
+    center: Position;
+    zoom: number;
+};
+export type MapViewportHistory = {
+    entries: MapViewport[];
+    canGoBack: boolean;
+    goBack: () => void;
+};
+export type UseMapViewportHistoryOptions = {
+    maxEntries?: number;
+    centerDistanceThresholdMeters?: number;
+    zoomThreshold?: number;
+    zoomAnimation?: boolean;
+    controlledViewport?: MapViewport;
+};
+export declare const defaultMapViewportHistory: MapViewportHistory;
+export declare const useMapViewportHistory: (api: MapApi | undefined, { maxEntries, centerDistanceThresholdMeters, zoomThreshold, zoomAnimation, controlledViewport, }?: UseMapViewportHistoryOptions) => MapViewportHistory;

package/components/map/hooks/useMapViewportHistory.js

@@ -0,0 +1,116 @@
+import { useState as d, useRef as D, useCallback as T, useEffect as _ } from "react";
+const V = 5, A = 100, p = 0.1, H = 180, k = 6371e3, y = {
+  entries: [],
+  canGoBack: !1,
+  goBack: () => {
+  }
+}, R = (e) => e * Math.PI / 180, C = (e, n) => {
+  const o = R(n.lat - e.lat), u = R(n.lng - e.lng), l = R(e.lat), s = R(n.lat), a = Math.sin(o / 2) ** 2 + Math.cos(l) * Math.cos(s) * Math.sin(u / 2) ** 2;
+  return 2 * k * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}, f = (e) => {
+  const n = e.getCenter(), { zoom: o = 0 } = e.getViewModel().getLookAtData();
+  return {
+    center: {
+      lat: n.lat,
+      lng: n.lng
+    },
+    zoom: o
+  };
+}, z = (e, n, o, u) => {
+  if (!(e && n))
+    return !1;
+  const l = C(e.center, n.center), s = Math.abs(e.zoom - n.zoom);
+  return l >= o || s >= u;
+}, I = (e, n) => e?.center.lat === n?.center.lat && e?.center.lng === n?.center.lng && e?.zoom === n?.zoom, B = (e, {
+  maxEntries: n = V,
+  centerDistanceThresholdMeters: o = A,
+  zoomThreshold: u = p,
+  zoomAnimation: l = !1,
+  controlledViewport: s
+} = {}) => {
+  const [a, M] = d({
+    entries: [],
+    currentViewport: s,
+    isRestoring: !1
+  }), m = D(), g = D(), w = T(
+    (t, c) => z(t, c, o, u),
+    [o, u]
+  ), h = T(
+    (t, c) => {
+      const r = t[0];
+      return r && !w(c, r) ? t : [c, ...t].slice(0, n);
+    },
+    [w, n]
+  ), i = T(
+    (t, { replace: c = !1 } = {}) => {
+      M((r) => {
+        if (c)
+          return {
+            ...r,
+            currentViewport: t,
+            isRestoring: !1
+          };
+        if (r.isRestoring)
+          return {
+            ...r,
+            currentViewport: t,
+            isRestoring: !1
+          };
+        const { currentViewport: E } = r;
+        return E ? I(E, t) ? r : w(E, t) ? {
+          ...r,
+          entries: h(r.entries, E),
+          currentViewport: t
+        } : {
+          ...r,
+          currentViewport: t
+        } : {
+          ...r,
+          currentViewport: t
+        };
+      });
+    },
+    [h, w]
+  ), L = T(() => {
+    const t = e?.map, c = a.entries[0];
+    t && c && (window.clearTimeout(m.current), window.clearTimeout(g.current), M((r) => ({
+      ...r,
+      entries: r.entries.slice(1),
+      currentViewport: c,
+      isRestoring: !0
+    })), t.getViewModel().setLookAtData(
+      {
+        position: c.center,
+        zoom: c.zoom
+      },
+      l
+    ), m.current = window.setTimeout(() => {
+      i(f(t), { replace: !0 }), m.current = void 0;
+    }, 750));
+  }, [e?.map, i, a.entries, l]);
+  return _(() => {
+    s && i(s);
+  }, [i, s]), _(() => {
+    const t = e?.map;
+    if (!t)
+      return;
+    i(f(t), { replace: !0 });
+    const c = () => {
+      window.clearTimeout(g.current), g.current = window.setTimeout(() => {
+        g.current = void 0, i(f(t));
+      }, H);
+    };
+    return t.addEventListener("mapviewchangeend", c), () => {
+      t.removeEventListener("mapviewchangeend", c), window.clearTimeout(m.current), window.clearTimeout(g.current), m.current = void 0, g.current = void 0;
+    };
+  }, [e?.map, i]), {
+    entries: a.entries,
+    canGoBack: a.entries.length > 0,
+    goBack: L
+  };
+};
+export {
+  y as defaultMapViewportHistory,
+  B as useMapViewportHistory
+};
+//# sourceMappingURL=useMapViewportHistory.js.map

package/components/map/hooks/useMapViewportHistory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMapViewportHistory.js","sources":["../../../../src/components/map/hooks/useMapViewportHistory.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { MapApi, Position } from '../utils/mapTypes';\n\nexport type MapViewport = {\n    center: Position;\n    zoom: number;\n};\n\nexport type MapViewportHistory = {\n    entries: MapViewport[];\n    canGoBack: boolean;\n    goBack: () => void;\n};\n\nexport type UseMapViewportHistoryOptions = {\n    maxEntries?: number;\n    centerDistanceThresholdMeters?: number;\n    zoomThreshold?: number;\n    zoomAnimation?: boolean;\n    controlledViewport?: MapViewport;\n};\n\nconst DEFAULT_MAX_ENTRIES = 5;\n\nconst DEFAULT_CENTER_DISTANCE_THRESHOLD_METERS = 100;\nconst DEFAULT_ZOOM_THRESHOLD = 0.1;\nconst VIEWPORT_CHANGE_SETTLE_DELAY_MS = 180;\nconst EARTH_RADIUS_METERS = 6371000;\n\nexport const defaultMapViewportHistory: MapViewportHistory = {\n    entries: [],\n    canGoBack: false,\n    goBack: () => {},\n};\n\nconst toRadians = (degrees: number) => (degrees * Math.PI) / 180;\n\nconst getDistanceMeters = (first: Position, second: Position) => {\n    const latDistance = toRadians(second.lat - first.lat);\n    const lngDistance = toRadians(second.lng - first.lng);\n    const firstLat = toRadians(first.lat);\n    const secondLat = toRadians(second.lat);\n\n    const haversine =\n        Math.sin(latDistance / 2) ** 2 + Math.cos(firstLat) * Math.cos(secondLat) * Math.sin(lngDistance / 2) ** 2;\n\n    return 2 * EARTH_RADIUS_METERS * Math.atan2(Math.sqrt(haversine), Math.sqrt(1 - haversine));\n};\n\nconst getViewport = (map: H.Map): MapViewport => {\n    const center = map.getCenter();\n    const { zoom = 0 } = map.getViewModel().getLookAtData();\n\n    return {\n        center: {\n            lat: center.lat,\n            lng: center.lng,\n        },\n        zoom,\n    };\n};\n\nconst hasRelevantViewportChange = (\n    first: MapViewport | undefined,\n    second: MapViewport | undefined,\n    centerDistanceThresholdMeters: number,\n    zoomThreshold: number\n) => {\n    if (!(first && second)) {\n        return false;\n    }\n\n    const centerDistance = getDistanceMeters(first.center, second.center);\n    const zoomDistance = Math.abs(first.zoom - second.zoom);\n\n    return centerDistance >= centerDistanceThresholdMeters || zoomDistance >= zoomThreshold;\n};\n\nconst hasSameViewport = (first: MapViewport | undefined, second: MapViewport | undefined) =>\n    first?.center.lat === second?.center.lat &&\n    first?.center.lng === second?.center.lng &&\n    first?.zoom === second?.zoom;\n\ntype MapViewportHistoryState = {\n    entries: MapViewport[];\n    currentViewport?: MapViewport;\n    isRestoring: boolean;\n};\n\nexport const useMapViewportHistory = (\n    api: MapApi | undefined,\n    {\n        maxEntries = DEFAULT_MAX_ENTRIES,\n        centerDistanceThresholdMeters = DEFAULT_CENTER_DISTANCE_THRESHOLD_METERS,\n        zoomThreshold = DEFAULT_ZOOM_THRESHOLD,\n        zoomAnimation = false,\n        controlledViewport,\n    }: UseMapViewportHistoryOptions = {}\n): MapViewportHistory => {\n    const [state, setState] = useState<MapViewportHistoryState>({\n        entries: [],\n        currentViewport: controlledViewport,\n        isRestoring: false,\n    });\n    const restoreFallbackTimeoutRef = useRef<number>();\n    const commitHistoryTimeoutRef = useRef<number>();\n\n    const isRelevantChange = useCallback(\n        (first: MapViewport | undefined, second: MapViewport | undefined) =>\n            hasRelevantViewportChange(first, second, centerDistanceThresholdMeters, zoomThreshold),\n        [centerDistanceThresholdMeters, zoomThreshold]\n    );\n\n    const getEntriesWithViewport = useCallback(\n        (entries: MapViewport[], viewport: MapViewport) => {\n            const latestEntry = entries[0];\n\n            if (latestEntry && !isRelevantChange(viewport, latestEntry)) {\n                return entries;\n            }\n\n            return [viewport, ...entries].slice(0, maxEntries);\n        },\n        [isRelevantChange, maxEntries]\n    );\n\n    const commitViewport = useCallback(\n        (nextViewport: MapViewport, { replace = false } = {}) => {\n            setState(previousState => {\n                if (replace) {\n                    return {\n                        ...previousState,\n                        currentViewport: nextViewport,\n                        isRestoring: false,\n                    };\n                }\n\n                if (previousState.isRestoring) {\n                    return {\n                        ...previousState,\n                        currentViewport: nextViewport,\n                        isRestoring: false,\n                    };\n                }\n\n                const { currentViewport } = previousState;\n\n                if (!currentViewport) {\n                    return {\n                        ...previousState,\n                        currentViewport: nextViewport,\n                    };\n                }\n\n                if (hasSameViewport(currentViewport, nextViewport)) {\n                    return previousState;\n                }\n\n                if (!isRelevantChange(currentViewport, nextViewport)) {\n                    return {\n                        ...previousState,\n                        currentViewport: nextViewport,\n                    };\n                }\n\n                return {\n                    ...previousState,\n                    entries: getEntriesWithViewport(previousState.entries, currentViewport),\n                    currentViewport: nextViewport,\n                };\n            });\n        },\n        [getEntriesWithViewport, isRelevantChange]\n    );\n\n    const goBack = useCallback(() => {\n        const map = api?.map;\n        const targetViewport = state.entries[0];\n\n        if (!(map && targetViewport)) {\n            return;\n        }\n\n        window.clearTimeout(restoreFallbackTimeoutRef.current);\n        window.clearTimeout(commitHistoryTimeoutRef.current);\n        setState(previousState => ({\n            ...previousState,\n            entries: previousState.entries.slice(1),\n            currentViewport: targetViewport,\n            isRestoring: true,\n        }));\n\n        map.getViewModel().setLookAtData(\n            {\n                position: targetViewport.center,\n                zoom: targetViewport.zoom,\n            },\n            zoomAnimation\n        );\n\n        restoreFallbackTimeoutRef.current = window.setTimeout(() => {\n            commitViewport(getViewport(map), { replace: true });\n            restoreFallbackTimeoutRef.current = undefined;\n        }, 750);\n    }, [api?.map, commitViewport, state.entries, zoomAnimation]);\n\n    useEffect(() => {\n        if (controlledViewport) {\n            commitViewport(controlledViewport);\n        }\n    }, [commitViewport, controlledViewport]);\n\n    useEffect(() => {\n        const map = api?.map;\n\n        if (!map) {\n            return;\n        }\n\n        commitViewport(getViewport(map), { replace: true });\n\n        const handleMapViewChangeEnd = () => {\n            window.clearTimeout(commitHistoryTimeoutRef.current);\n\n            commitHistoryTimeoutRef.current = window.setTimeout(() => {\n                commitHistoryTimeoutRef.current = undefined;\n                commitViewport(getViewport(map));\n            }, VIEWPORT_CHANGE_SETTLE_DELAY_MS);\n        };\n\n        map.addEventListener('mapviewchangeend', handleMapViewChangeEnd as EventListener);\n\n        return () => {\n            map.removeEventListener('mapviewchangeend', handleMapViewChangeEnd as EventListener);\n            window.clearTimeout(restoreFallbackTimeoutRef.current);\n            window.clearTimeout(commitHistoryTimeoutRef.current);\n            restoreFallbackTimeoutRef.current = undefined;\n            commitHistoryTimeoutRef.current = undefined;\n        };\n    }, [api?.map, commitViewport]);\n\n    return {\n        entries: state.entries,\n        canGoBack: state.entries.length > 0,\n        goBack,\n    };\n};\n"],"names":["DEFAULT_MAX_ENTRIES","DEFAULT_CENTER_DISTANCE_THRESHOLD_METERS","DEFAULT_ZOOM_THRESHOLD","VIEWPORT_CHANGE_SETTLE_DELAY_MS","EARTH_RADIUS_METERS","defaultMapViewportHistory","toRadians","degrees","getDistanceMeters","first","second","latDistance","lngDistance","firstLat","secondLat","haversine","getViewport","map","center","zoom","hasRelevantViewportChange","centerDistanceThresholdMeters","zoomThreshold","centerDistance","zoomDistance","hasSameViewport","useMapViewportHistory","api","maxEntries","zoomAnimation","controlledViewport","state","setState","useState","restoreFallbackTimeoutRef","useRef","commitHistoryTimeoutRef","isRelevantChange","useCallback","getEntriesWithViewport","entries","viewport","latestEntry","commitViewport","nextViewport","replace","previousState","currentViewport","goBack","targetViewport","useEffect","handleMapViewChangeEnd"],"mappings":"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"}

package/components/map/icons/MapIcon.d.ts

@@ -1,5 +1,6 @@
 export type MapIconProps = {
     name?: string;
+    pairName?: string;
     height?: number;
     width?: number;
     className?: string;