Skip to content

restore 3d state from url on app load #295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Apr 28, 2025
Merged

restore 3d state from url on app load #295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
d328c84
WIP, restore 3d state from url on app load
mxfh Apr 16, 2025
67aabea
WIP refactor app component hooks
mxfh Apr 23, 2025
2c026c5
factor out camera position restoration form URL into app code out of …
mxfh Apr 24, 2025
16ad4a1
remove deleted import
mxfh Apr 24, 2025
cd16a70
change CustomViewer props to include initial view as separate prop
mxfh Apr 24, 2025
f868a9f
WIP add viewer destroyed check, reenable scene styles
mxfh Apr 24, 2025
35fe89b
WIP improve URL refresh behavior, load state from URL only on mount i…
mxfh Apr 25, 2025
74013e4
WIP fix build errors, update mapStyle
mxfh Apr 25, 2025
c0b14f4
WIP fix runtime terrain provider issues
mxfh Apr 25, 2025
f64105a
WIP fix HGK onload behavior
mxfh Apr 25, 2025
b5e9df3
WIP improve HGK loading behavior
mxfh Apr 25, 2025
b345897
WIP remove unneeded timeout
mxfh Apr 25, 2025
302f2bb
WIP improve HGK Terrain Provider loading and display, viewer still ge…
mxfh Apr 28, 2025
3b0ba60
WIP fix HGK, double initialization problem of 3d Viewer, fix mesh loa…
mxfh Apr 28, 2025
0968c79
WIP fix url updating behavior in 2d mode after 3d
mxfh Apr 28, 2025
c8deb50
WIP use proper path for routing on hash replacements
mxfh Apr 28, 2025
fba16cd
force removing 3d params when updating 2D state urls
mxfh Apr 28, 2025
cdb7879
remove log
mxfh Apr 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 18 additions & 213 deletions apps/geoportal/src/app/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
// Built-in Modules
import { useEffect, useState } from "react";
import { useState } from "react";

// 3rd party Modules

import { Button, Modal } from "antd";
import LZString from "lz-string";
import { ErrorBoundary } from "react-error-boundary";
import { useDispatch, useSelector } from "react-redux";
import { useLocation, useSearchParams } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSpinner } from "@fortawesome/free-solid-svg-icons";
// 1st party Modules
Expand All @@ -24,10 +20,7 @@ import { TweakpaneProvider } from "@carma-commons/debug";
import {
CarmaMapContextProvider,
FeatureFlagProvider,
type BackgroundLayer,
type Settings,
} from "@carma-apps/portals";
import type { Layer } from "@carma-mapping/layers";

// Local Modules
import AppErrorFallback from "./components/AppErrorFallback";
Expand All @@ -37,32 +30,18 @@ import MapMeasurement from "./components/map-measure/MapMeasurement";
import TopNavbar from "./components/TopNavbar";
import { ObliqueDataProvider } from "./oblique/components/ObliqueDataContext";

import type { AppDispatch } from "./store";
import {
getBackgroundLayer,
getSelectedMapLayer,
setBackgroundLayer,
setLayers,
setSelectedLuftbildLayer,
setSelectedMapLayer,
setShowFullscreenButton,
setShowHamburgerMenu,
setShowLocatorButton,
setShowMeasurementButton,
} from "./store/slices/mapping";
import { getIfPopupOpend } from "./store/slices/print";

import {
getUIAllowChanges,
getUIMode,
getZenMode,
setUIAllowChanges,
setUIShowLayerButtons,
setUIShowLayerHideButtons,
} from "./store/slices/ui";
import { useAppConfig } from "./hooks/useAppConfig";
import { useManageLayers } from "./hooks/useManageLayers";
import { useSyncToken } from "./hooks/useSyncToken";
import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
import { useCesiumSearchParams } from "./hooks/useCesiumSearchParams";

import { layerMap } from "./config";
import { CESIUM_CONFIG } from "./config/app.config";
import {
CESIUM_CONFIG,
CONFIG_BASE_URL,
MIN_MOBILE_WIDTH,
} from "./config/app.config";
import { featureFlagConfig } from "./config/featureFlags";
import { OBLIQUE_CONFIG, CAMERA_ID_TO_DIRECTION } from "./oblique/config";

Expand All @@ -75,189 +54,15 @@ import "./index.css";
if (typeof global === "undefined") {
window.global = window;
}

type View = {
center: string[];
zoom: string;
};

type Config = {
layers: Layer[];
backgroundLayer: BackgroundLayer & { selectedLayerId: string };
settings?: Settings;
view?: View;
};

function App({ published }: { published?: boolean }) {
const dispatch: AppDispatch = useDispatch();
const [searchParams, setSearchParams] = useSearchParams();
const allowUiChanges = useSelector(getUIAllowChanges);
const uiMode = useSelector(getUIMode);
const zenMode = useSelector(getZenMode);
const location = useLocation();
const backgroundLayer = useSelector(getBackgroundLayer);
const selectedMapLayer = useSelector(getSelectedMapLayer);

const [syncToken, setSyncToken] = useState(null);
const [loadingConfig, setLoadingConfig] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(true);
const isMobile = window.innerWidth < 600;
const ifPopupPrintOpened = useSelector(getIfPopupOpend);

const configBaseUrl =
"https://ceepr.cismet.de/config/wuppertal/_dev_geoportal/";

useEffect(() => {
console.debug(
" [GEOPORTAL|ROUTER] App Route changed to:",
location.pathname
);
}, [location]);

useEffect(() => {
if (searchParams.get("sync")) {
setSyncToken(searchParams.get("sync"));
}

if (searchParams.get("config")) {
setLoadingConfig(true);
const config = searchParams.get("config");

fetch(configBaseUrl + config)
.then((response) => {
return response.json();
})
.then((newConfig: Config) => {
dispatch(setLayers(newConfig.layers));
const selectedMapLayerId = newConfig.backgroundLayer.selectedLayerId;
const selectedBackgroundLayer: BackgroundLayer = {
title: layerMap[selectedMapLayerId].title,
id: selectedMapLayerId,
opacity: newConfig.backgroundLayer.opacity,
description: layerMap[selectedMapLayerId].description,
inhalt: layerMap[selectedMapLayerId].inhalt,
eignung: layerMap[selectedMapLayerId].eignung,
visible: newConfig.backgroundLayer.visible,
layerType: "wmts",
props: {
name: "",
url: layerMap[selectedMapLayerId].url,
},
layers: layerMap[selectedMapLayerId].layers,
};
dispatch(
setBackgroundLayer({
...selectedBackgroundLayer,
id: newConfig.backgroundLayer.id,
})
);
if (newConfig.backgroundLayer.id === "luftbild") {
dispatch(setSelectedLuftbildLayer(selectedBackgroundLayer));
} else {
dispatch(setSelectedMapLayer(selectedBackgroundLayer));
}
searchParams.delete("config");
setSearchParams(searchParams);
})
.finally(() => {
setLoadingConfig(false);
});
}

if (searchParams.get("data")) {
const data = searchParams.get("data");
const newConfig: Config = JSON.parse(
LZString.decompressFromEncodedURIComponent(data)
);
dispatch(setLayers(newConfig.layers));
dispatch(setBackgroundLayer(newConfig.backgroundLayer));
if (newConfig.settings) {
dispatch(setUIShowLayerButtons(newConfig.settings.showLayerButtons));
dispatch(setShowFullscreenButton(newConfig.settings.showFullscreen));
dispatch(setShowLocatorButton(newConfig.settings.showLocator));
dispatch(setShowMeasurementButton(newConfig.settings.showMeasurement));
}
searchParams.delete("data");
setSearchParams(searchParams);
}
}, [searchParams]);

useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
if (e.shiftKey) {
dispatch(setUIShowLayerHideButtons(true));
}

// if (e.key === "Escape") {
// if (uiMode === "print" && !ifPopupPrintOpened) {
// dispatch(setUIMode("default"));
// }
// dispatch(changeIfPopupOpend(false));
// }
};

const onKeyUp = (e: KeyboardEvent) => {
if (allowUiChanges) {
dispatch(setUIShowLayerHideButtons(false));
}
};

document.addEventListener("keydown", onKeyDown);
document.addEventListener("keyup", onKeyUp);
window.addEventListener("blur", onKeyUp);

return () => {
document.removeEventListener("keydown", onKeyDown);
document.removeEventListener("keyup", onKeyUp);
window.removeEventListener("blur", onKeyUp);
};
}, [allowUiChanges]);

useEffect(() => {
const backgroundLayerId = backgroundLayer.id;
const selectedMapLayerId = selectedMapLayer.id;

const getId = () => {
return backgroundLayerId === "luftbild"
? backgroundLayerId
: selectedMapLayerId;
};
dispatch(
setBackgroundLayer({
title: layerMap[getId()].title,
id: backgroundLayerId,
opacity: backgroundLayer.opacity,
description: layerMap[getId()].description,
inhalt: layerMap[getId()].inhalt,
eignung: layerMap[getId()].eignung,
visible: backgroundLayer.visible,
layerType: "wmts",
props: {
name: "",
url: layerMap[getId()].url,
},
layers: layerMap[getId()].layers,
})
);
const isMobile = window.innerWidth < MIN_MOBILE_WIDTH;

dispatch(
setSelectedMapLayer({
title: layerMap[selectedMapLayerId].title,
id: selectedMapLayerId,
opacity: 1.0,
description: ``,
inhalt: layerMap[selectedMapLayerId].inhalt,
eignung: layerMap[selectedMapLayerId].eignung,
visible: selectedMapLayer.visible,
layerType: "wmts",
props: {
name: "",
url: layerMap[selectedMapLayerId].url,
},
layers: layerMap[selectedMapLayerId].layers,
})
);
}, []);
const isLoadingConfig = useAppConfig(CONFIG_BASE_URL, layerMap);
useManageLayers(layerMap);
useCesiumSearchParams();
const syncToken = useSyncToken();
useKeyboardShortcuts();

const content = (
<FeatureFlagProvider config={featureFlagConfig}>
Expand All @@ -277,7 +82,7 @@ function App({ published }: { published?: boolean }) {
className="flex flex-col w-full "
style={{ height: "100dvh" }}
>
{loadingConfig && (
{isLoadingConfig && (
<div
id="loading"
className="absolute flex flex-col items-center text-white justify-center h-screen w-full bg-black/50 z-[9999999999999]"
Expand Down
Loading