Update after review

visgl · Dec 20, 2023 · fac359b · fac359b
1 parent aa5821c
commit fac359b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 63 deletions.
diff --git a/src/pages/debug-app/debug-app.tsx b/src/pages/debug-app/debug-app.tsx
@@ -38,7 +38,11 @@ import ColorMap, {
   makeRGBObjectFromColor,
 } from "../../utils/debug/colors-map";
 import { initStats, sumTilesetsStats } from "../../utils/stats";
-import { parseTilesetUrlParams } from "../../utils/url-utils";
+import {
+  parseTilesetUrlParams,
+  urlParamsToViewState,
+  viewStateToUrlParams,
+} from "../../utils/url-utils";
 import { validateTile } from "../../utils/debug/tile-debug";
 import {
   BottomToolsPanelWrapper,
@@ -189,17 +193,7 @@ export const DebugApp = () => {
     dispatch(setDragMode(DragMode.pan));
     dispatch(setDebugOptions({ minimap: true }));
 
-    const search = new URLSearchParams(window.location.search);
-    const urlViewStateParams = {};
-    for (const viewStateParam of search) {
-      if (
-        Object.keys(viewState.main).includes(viewStateParam[0]) &&
-        !isNaN(parseFloat(viewStateParam[1]))
-      ) {
-        urlViewStateParams[viewStateParam[0]] = parseFloat(viewStateParam[1]);
-      }
-    }
-    setStateUrlViewStateParams(urlViewStateParams);
+    urlParamsToViewState(viewState, setStateUrlViewStateParams);
 
     return () => {
       dispatch(resetDebugOptions());
@@ -717,24 +711,6 @@ export const DebugApp = () => {
     }));
   }, []);
 
-  const updateSearchParams = () => {
-    const search = Object.fromEntries(
-      new URLSearchParams(window.location.search)
-    );
-    const { longitude, latitude, pitch, bearing, zoom } = viewState.main;
-    setSearchParams(
-      {
-        ...search,
-        longitude,
-        latitude,
-        pitch,
-        bearing,
-        zoom,
-      },
-      { replace: true }
-    );
-  };
-
   const onInteractionStateChange = (
     interactionStateChange: InteractionStateChange
   ) => {
@@ -747,7 +723,7 @@ export const DebugApp = () => {
       !isPanning &&
       !isRotating
     ) {
-      updateSearchParams();
+      viewStateToUrlParams(viewState, setSearchParams);
     }
   };
 

diff --git a/src/pages/viewer-app/viewer-app.tsx b/src/pages/viewer-app/viewer-app.tsx
@@ -14,7 +14,11 @@ import { Tileset3D } from "@loaders.gl/tiles";
 import { DeckGlWrapper } from "../../components/deck-gl-wrapper/deck-gl-wrapper";
 import { AttributesPanel } from "../../components/attributes-panel/attributes-panel";
 import { initStats, sumTilesetsStats } from "../../utils/stats";
-import { parseTilesetUrlParams } from "../../utils/url-utils";
+import {
+  parseTilesetUrlParams,
+  urlParamsToViewState,
+  viewStateToUrlParams,
+} from "../../utils/url-utils";
 import {
   FeatureAttributes,
   Sublayer,
@@ -158,17 +162,7 @@ export const ViewerApp = () => {
     dispatch(setColorsByAttrubute(null));
     dispatch(setDragMode(DragMode.pan));
 
-    const search = new URLSearchParams(window.location.search);
-    const urlViewStateParams = {};
-    for (const viewStateParam of search) {
-      if (
-        Object.keys(viewState.main).includes(viewStateParam[0]) &&
-        !isNaN(parseFloat(viewStateParam[1]))
-      ) {
-        urlViewStateParams[viewStateParam[0]] = parseFloat(viewStateParam[1]);
-      }
-    }
-    setStateUrlViewStateParams(urlViewStateParams);
+    urlParamsToViewState(viewState, setStateUrlViewStateParams);
 
     return () => {
       dispatch(setInitialBaseMaps());
@@ -570,24 +564,6 @@ export const ViewerApp = () => {
     }));
   }, []);
 
-  const updateSearchParams = () => {
-    const search = Object.fromEntries(
-      new URLSearchParams(window.location.search)
-    );
-    const { longitude, latitude, pitch, bearing, zoom } = viewState.main;
-    setSearchParams(
-      {
-        ...search,
-        longitude,
-        latitude,
-        pitch,
-        bearing,
-        zoom,
-      },
-      { replace: true }
-    );
-  };
-
   const onInteractionStateChange = (
     interactionStateChange: InteractionStateChange
   ) => {
@@ -600,7 +576,7 @@ export const ViewerApp = () => {
       !isPanning &&
       !isRotating
     ) {
-      updateSearchParams();
+      viewStateToUrlParams(viewState, setSearchParams);
     }
   };
 

diff --git a/src/utils/url-utils.ts b/src/utils/url-utils.ts
@@ -7,7 +7,7 @@ export const parseTilesetFromUrl = () => {
 
 export const parseTilesetUrlParams = (url, options) => {
   if (!url) {
-    return { ...options, tilesetUrl: '', token: '', metadataUrl: '' }
+    return { ...options, tilesetUrl: "", token: "", metadataUrl: "" };
   }
 
   const parsedUrl = new URL(url);
@@ -57,3 +57,35 @@ const prepareTilesetUrl = (parsedUrl) => {
     .concat("layers/0");
   return `${parsedUrl.origin}${replacedPathName}${parsedUrl.search}`;
 };
+
+export const viewStateToUrlParams = (viewState, setSearchParams) => {
+  const search = Object.fromEntries(
+    new URLSearchParams(window.location.search)
+  );
+  const { longitude, latitude, pitch, bearing, zoom } = viewState.main;
+  setSearchParams(
+    {
+      ...search,
+      longitude,
+      latitude,
+      pitch,
+      bearing,
+      zoom,
+    },
+    { replace: true }
+  );
+};
+
+export const urlParamsToViewState = (viewState, setStateUrlViewStateParams) => {
+  const search = new URLSearchParams(window.location.search);
+  const urlViewStateParams = {};
+  for (const viewStateParam of search) {
+    if (
+      Object.keys(viewState.main).includes(viewStateParam[0]) &&
+      !isNaN(parseFloat(viewStateParam[1]))
+    ) {
+      urlViewStateParams[viewStateParam[0]] = parseFloat(viewStateParam[1]);
+    }
+  }
+  setStateUrlViewStateParams(urlViewStateParams);
+};