Fix/00459 measurements touch bug snapping v2

.vscode/settings.json

@@ -20,9 +20,13 @@
     "dist/**": true,
     "node_modules/**": true
   },
-  "cSpell.words": [
-    "alkis",
-    "flur",
-    "landparcel"
-  ]
+  "cSpell.language": "en,de",
+  "cSpell.customDictionaries": {
+    "carma-project": {
+      "name": "CARMA Project Dictionary",
+      "path": "./.vscode/carma-project-dictionary.txt",
+      "addWords": true
+    }
+  },
+  "debug.javascript.autoAttachFilter": "onlyWithFlag"
 }

apps/geoportal/project.json

@@ -12,12 +12,24 @@
       "options": {
         "outputPath": "dist/apps/geoportal"
       },
+      "inputs": [
+        "production",
+        "^production",
+        {
+          "externalDependencies": ["vite"]
+        }
+      ],
       "configurations": {
         "development": {
           "mode": "development"
         },
         "production": {
           "mode": "production"
+        },
+        "preview": {
+          "mode": "development",
+          "sourcemap": true,
+          "minify": false
         }
       }
     },
@@ -52,6 +64,9 @@
         },
         "production": {
           "buildTarget": "geoportal:build:production"
+        },
+        "preview": {
+          "buildTarget": "geoportal:build:preview"
         }
       }
     },
@@ -60,8 +75,53 @@
       "options": {
         "command": "NODE_OPTIONS='--max-old-space-size=16384' vite preview --host localhost --port 4300",
         "cwd": "apps/geoportal"
+      }
+    },
+    "preview:build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "npx nx run geoportal:build:preview",
+          "NODE_OPTIONS='--max-old-space-size=16384' vite preview --host localhost --port 4300"
+        ],
+        "cwd": "apps/geoportal",
+        "parallel": false
+      }
+    },
+    "build:preview": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/geoportal",
+        "mode": "development",
+        "sourcemap": true,
+        "minify": false
       },
-      "dependsOn": ["build"]
+      "inputs": [
+        "production",
+        "^production",
+        {
+          "externalDependencies": ["vite"]
+        }
+      ]
+    },
+    "watch:preview": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "NODE_OPTIONS='--max-old-space-size=16384' vite build --watch --mode development --sourcemap --minify false",
+        "cwd": "apps/geoportal"
+      }
+    },
+    "dev:preview": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "NODE_OPTIONS='--max-old-space-size=16384' vite build --watch --mode development --sourcemap --minify false",
+          "sleep 5 && NODE_OPTIONS='--max-old-space-size=16384' vite preview --host localhost --port 4300"
+        ],
+        "cwd": "apps/geoportal",
+        "parallel": true
+      }
     },
     "test": {
       "executor": "@nx/vite:test",

apps/geoportal/src/app/App.tsx

@@ -27,10 +27,7 @@ import {
 } from "@carma-providers/feature-flag";
 import { HashStateProvider } from "@carma-providers/hash-state";
 import { useCesiumDevConsoleTrigger } from "@carma-mapping/engines/cesium";
-import {
-  MapMeasurementsProvider,
-  MEASUREMENT_MODE,
-} from "@carma-commons/measurements";
+import { MapMeasurementsProvider } from "@carma-commons/measurements";
 
 // Local Modules
 import AppErrorFallback from "./components/AppErrorFallback";
@@ -65,13 +62,7 @@ const MEASUREMENTS_BASE_CONFIG = {
 };
 
 import { getCustomFeatureFlags } from "./store/slices/layers";
-import {
-  getShowLoginModal,
-  getUIMode,
-  setShowLoginModal,
-  setUIMode,
-  UIMode,
-} from "./store/slices/ui";
+import { getShowLoginModal, setShowLoginModal } from "./store/slices/ui";
 
 // Side-Effect Imports
 import "bootstrap/dist/css/bootstrap.min.css";
@@ -87,39 +78,6 @@ function CesiumDevConsoleIntegration() {
   return null;
 }
 
-function MeasurementsWrapper({
-  children,
-  baseConfig,
-  externalMode,
-  setModeExternal,
-}: {
-  children: React.ReactNode;
-  baseConfig: typeof MEASUREMENTS_BASE_CONFIG;
-  externalMode: MEASUREMENT_MODE;
-  setModeExternal: (mode: MEASUREMENT_MODE) => void;
-}) {
-  const flags = useFeatureFlags();
-
-  // Memoize config to prevent recreation on every render
-  const config = useMemo(
-    () => ({
-      ...baseConfig,
-      snappingEnabled: flags.isSnappingEnabled ?? baseConfig.snappingEnabled,
-    }),
-    [flags.isSnappingEnabled]
-  );
-
-  return (
-    <MapMeasurementsProvider
-      externalMode={externalMode}
-      setModeExternal={setModeExternal}
-      config={config}
-    >
-      {children}
-    </MapMeasurementsProvider>
-  );
-}
-
 function App({ published }: { published?: boolean }) {
   const dispatch = useDispatch();
   const showLoginModal = useSelector(getShowLoginModal);
@@ -128,18 +86,6 @@ function App({ published }: { published?: boolean }) {
   const syncToken = useSyncToken();
   useKeyboardShortcuts();
   const customFeatureFlags = useSelector(getCustomFeatureFlags);
-  const uiMode = useSelector(getUIMode);
-  const mode =
-    uiMode === UIMode.MEASUREMENT
-      ? MEASUREMENT_MODE.MEASUREMENT
-      : MEASUREMENT_MODE.DEFAULT;
-  const handleSetMode = (newMode: MEASUREMENT_MODE) => {
-    const newUIMode =
-      newMode === MEASUREMENT_MODE.MEASUREMENT
-        ? UIMode.MEASUREMENT
-        : UIMode.DEFAULT;
-    dispatch(setUIMode(newUIMode));
-  };
 
   // Memoize config objects to prevent recreation on every render
   const featureFlagsMergedConfig = useMemo(
@@ -174,11 +120,7 @@ function App({ published }: { published?: boolean }) {
                 config={OBLIQUE_CONFIG}
                 fallbackDirectionConfig={CAMERA_ID_TO_DIRECTION}
               >
-                <MeasurementsWrapper
-                  externalMode={mode}
-                  setModeExternal={handleSetMode}
-                  baseConfig={MEASUREMENTS_BASE_CONFIG}
-                >
+                <MapMeasurementsProvider config={MEASUREMENTS_BASE_CONFIG}>
                   <ErrorBoundary FallbackComponent={AppErrorFallback}>
                     <div className={TAILWIND_CLASSNAMES_FULLSCREEN_FIXED}>
                       {isLoadingConfig && (
@@ -220,7 +162,7 @@ function App({ published }: { published?: boolean }) {
                       </Modal>
                     </div>
                   </ErrorBoundary>
-                </MeasurementsWrapper>
+                </MapMeasurementsProvider>
               </ObliqueProvider>
             </CarmaMapProviderWrapper>
           </MapFrameworkSwitcherProvider>

apps/geoportal/src/app/components/GeoportalMap/GeoportalMap.tsx

@@ -41,7 +41,10 @@ import { getCollabedHelpComponentConfig as getCollabedHelpElementsConfig } from
 
 import { ENDPOINT, isAreaType } from "@carma-commons/resources";
 import type { FeatureInfo } from "@carma/types";
-import { Measurements } from "@carma-commons/measurements";
+import {
+  useMeasurements,
+  InfoBoxMeasurement,
+} from "@carma-commons/measurements";
 
 import {
   useOverlayHelper,
@@ -67,7 +70,6 @@ import { useFeatureFlags } from "@carma-providers/feature-flag";
 import { useHashState } from "@carma-providers/hash-state";
 
 import FeatureInfoBox from "../feature-info/FeatureInfoBox.tsx";
-import { InfoBoxMeasurement } from "@carma-commons/measurements";
 import PrintPreview from "../map-print/PrintPreview.tsx";
 
 import versionData from "../../../version.json";
@@ -78,7 +80,7 @@ import { addCssToOverlayHelperItem } from "../../helper/overlayHelper.ts";
 
 import useLeafletZoomControls from "../../hooks/leaflet/useLeafletZoomControls.ts";
 import { useDispatchSachdatenInfoText } from "../../hooks/useDispatchSachdatenInfoText.ts";
-import { useFeatureInfoModeCursorStyle } from "../../hooks/useFeatureInfoModeCursorStyle.ts";
+import { useMapCursorStyle } from "../../hooks/useMapCursorStyle.ts";
 import { useObliqueInitializer } from "../../oblique/hooks/useObliqueInitializer.ts";
 import { useGeoportalFrameworkSwitcher } from "./controls/use-geoportal-framework-switcher.ts";
 
@@ -140,6 +142,19 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
   const container3dMapRef = useRef<HTMLDivElement>(null);
   // Store MapLibre maps outside Redux to avoid serialization issues
   const maplibreMapsRef = useRef<Map<string, any>>(new Map());
+  const [tick, setTick] = useState(0);
+
+  useEffect(() => {
+    // Monkey-patch the set method to trigger re-renders
+    const originalSet = maplibreMapsRef.current.set.bind(
+      maplibreMapsRef.current
+    );
+    maplibreMapsRef.current.set = (key, value) => {
+      const res = originalSet(key, value);
+      setTick((t) => t + 1);
+      return res;
+    };
+  }, []);
 
   // State and Selectors
   const backgroundLayer = useSelector(getBackgroundLayer);
@@ -157,9 +172,13 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
   const markerAsset = models[CESIUM_CONFIG.markerKey]; //
   const markerAnchorHeight = CESIUM_CONFIG.markerAnchorHeight ?? 10;
   const layers = useSelector(getLayers);
-  const maplibreMaps = layers
-    .filter((l) => l.layerType === "vector" && l.visible)
-    .map((l) => maplibreMapsRef.current.get(l.id));
+  const maplibreMaps = useMemo(
+    () =>
+      layers
+        .filter((l) => l.layerType === "vector" && l.visible)
+        .map((l) => maplibreMapsRef.current.get(l.id)),
+    [layers, tick]
+  );
   const uiMode = useSelector(getUIMode);
   const isModeMeasurement = uiMode === UIMode.MEASUREMENT;
   const isModeFeatureInfo = uiMode === UIMode.FEATURE_INFO;
@@ -333,8 +352,6 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
 
   const { gazData } = useGazData();
 
-  useFeatureInfoModeCursorStyle();
-
   const onComplete = useCallback(
     (selection: SelectionItem) => {
       if (layers.filter((l) => l.layerType === "vector").length === 0) return;
@@ -456,6 +473,10 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [backgroundLayer]);
 
+  useMeasurements(maplibreMaps);
+
+  useMapCursorStyle();
+
   useEffect(() => {
     const leaflet = getLeafletMap();
     if (uiMode !== UIMode.FEATURE_INFO && marker !== undefined && leaflet) {
@@ -599,8 +620,6 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
     ]
   );
 
-  // TODO Move out Controls to own component
-
   console.debug(
     "RENDER: [GEOPORTAL] MAP",
     rerenderCountRef.current,
@@ -806,7 +825,6 @@ export const GeoportalMap = ({ height, width, allow3d }: MapProps) => {
 
           {useCreateCismapLayers(layers, createLayerOptions)}
           <PrintPreview />
-          <Measurements snappingLayers={maplibreMaps} />
         </TopicMapComponent>
       </div>
       {allow3d && cesiumCanInitializeRef.current && (