Feature/00777 add excalidraw to geoportal addon

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

@@ -64,6 +64,7 @@ import useLeafletZoomControls from "../../../hooks/leaflet/useLeafletZoomControl
 import { useDispatchSachdatenInfoText } from "../../../hooks/useDispatchSachdatenInfoText.ts";
 import { useFeatureInfoModeCursorStyle } from "../../../hooks/useFeatureInfoModeCursorStyle.ts";
 import { useHighlightModeSync } from "../../../hooks/useHighlightModeSync.ts";
+import { useAnnotationModeSync } from "../../../hooks/useAnnotationModeSync";
 import { useMapStyleReduxSync } from "../../../hooks/useMapStyleReduxSync";
 import { useTourRefCollabLabels } from "../../../hooks/useTourRefCollabLabels.tsx";
 import { useWindowSize } from "../../../hooks/useWindowSize.ts";
@@ -258,6 +259,7 @@ const MapWrapper = () => {
   useDispatchSachdatenInfoText();
   useMapStyleReduxSync();
   useHighlightModeSync();
+  useAnnotationModeSync();
 
   const tourRefLabels = useTourRefCollabLabels();
   const { gazData } = useGazData();

apps/geoportal/src/app/components/layers/LayerWrapper.tsx

@@ -60,6 +60,7 @@ import InteractionView from "./InteractionView";
 import { shouldShowAdhocLayerInLayerList } from "../../helper/adhoc-feature-utils";
 import { useDynamicStylingSync } from "../../hooks/useDynamicStylingSync";
 import { useHighlightLayerButton } from "../../hooks/useHighlightLayerButton";
+import { useAnnotationLayerButton } from "../../hooks/useAnnotationLayerButton";
 import { useComparingLayerButton } from "../../hooks/useComparingLayerButton";
 import { useTimeSliderLayerButton } from "../../hooks/useTimeSliderLayerButton";
 import { useComparingSelectionReset } from "../../hooks/useComparingSelectionReset";
@@ -75,6 +76,7 @@ const LayerWrapper = () => {
   const dispatch: AppDispatch = useDispatch();
   useDynamicStylingSync();
   useHighlightLayerButton();
+  useAnnotationLayerButton();
   useComparingLayerButton();
   useTimeSliderLayerButton();
   useComparingSelectionReset();

apps/geoportal/src/app/constants/fachzwillinge/addons.ts

@@ -55,6 +55,22 @@ export const addonsFachzwilling: FachzwillingRoute = {
       },
     },
     { kind: "vectorHighlightControl" },
+    // annotation layer over the map, pinned to the ground so it pans and scales
+    // with the camera. The control switches who gets the pointer.
+    {
+      kind: "annotationOverlay",
+      config: {
+        hideMenu: true,
+        hideZoom: false,
+        hideTools: true,
+        hideHelp: true,
+        hideLibrary: true,
+        hideHistory: true,
+        hideWhenOff: true,
+        storageKey: "carma.geoportal.addons.annotations",
+      },
+    },
+    { kind: "annotationControl" },
     {
       kind: "libreTerrain",
       config: { appKey: "geoportal", show: "while3dLayersActive" },

apps/geoportal/src/app/hooks/useAnnotationLayerButton.tsx

@@ -0,0 +1,38 @@
+import { useDispatch, useSelector } from "react-redux";
+
+import {
+  ANNOTATION_LAYER_ID,
+  ANNOTATION_TOOLS_INTERACTION_ID,
+  useAnnotationLayerRow,
+} from "@carma-mapping/addons";
+
+import {
+  appendLayer,
+  getLayers,
+  removeLayer,
+  updateLayer,
+  setActiveInteractionButtonID,
+  setActiveInteractionLayerID,
+} from "../store/slices/mapping";
+
+export { ANNOTATION_LAYER_ID };
+
+export function useAnnotationLayerButton() {
+  const dispatch = useDispatch();
+  const layers = useSelector(getLayers);
+
+  useAnnotationLayerRow({
+    hasRow: layers.some((layer) => layer.id === ANNOTATION_LAYER_ID),
+    onAdd: (layer) => {
+      dispatch(appendLayer(layer));
+      dispatch(setActiveInteractionLayerID(layer.id));
+      dispatch(setActiveInteractionButtonID(ANNOTATION_TOOLS_INTERACTION_ID));
+    },
+    onUpdate: (layer) => dispatch(updateLayer(layer)),
+    onRemove: (id) => {
+      dispatch(removeLayer(id));
+      dispatch(setActiveInteractionLayerID(null));
+      dispatch(setActiveInteractionButtonID(null));
+    },
+  });
+}

apps/geoportal/src/app/hooks/useAnnotationModeSync.ts

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { useAddonState } from "@carma-mapping/addons";
+
+import { getUIMode, setUIMode, UIMode } from "../store/slices/ui";
+
+/**
+ * Keeps the annotation exclusive with the app's other map modes, the way
+ * `useHighlightModeSync` does for the highlighting: measurement, feature info
+ * and print run through `UIMode`, the highlighting through its own channel, so
+ * both have to be watched.
+ */
+export const useAnnotationModeSync = () => {
+  const dispatch = useDispatch();
+  const uiMode = useSelector(getUIMode);
+  const [annotationMode, setAnnotationMode] = useAddonState("annotationMode");
+  const [highlightMode, setHighlightMode] = useAddonState("highlightMode");
+  const isAnnotating = annotationMode?.isOn ?? false;
+  const isHighlighting = highlightMode?.isOn ?? false;
+
+  const previousUIMode = useRef(uiMode);
+  useEffect(() => {
+    const otherModeStarted =
+      previousUIMode.current !== uiMode && uiMode !== UIMode.DEFAULT;
+    previousUIMode.current = uiMode;
+    if (otherModeStarted) {
+      setAnnotationMode((previous) => ({ ...(previous ?? {}), isOn: false }));
+    }
+  }, [uiMode, setAnnotationMode]);
+
+  const previousIsHighlighting = useRef(isHighlighting);
+  useEffect(() => {
+    const highlightingStarted =
+      !previousIsHighlighting.current && isHighlighting;
+    previousIsHighlighting.current = isHighlighting;
+    if (highlightingStarted) {
+      setAnnotationMode((previous) => ({ ...(previous ?? {}), isOn: false }));
+    }
+  }, [isHighlighting, setAnnotationMode]);
+
+  const previousIsAnnotating = useRef(isAnnotating);
+  useEffect(() => {
+    const annotatingStarted = !previousIsAnnotating.current && isAnnotating;
+    previousIsAnnotating.current = isAnnotating;
+    if (annotatingStarted) {
+      dispatch(setUIMode(UIMode.DEFAULT));
+      setHighlightMode({ isOn: false });
+    }
+  }, [isAnnotating, dispatch, setHighlightMode]);
+};

apps/geoportal/vite.config.mts

@@ -10,6 +10,11 @@ export default defineConfig({
   root: __dirname,
   cacheDir: "../../node_modules/.vite/apps/geoportal",
 
+  // @excalidraw/excalidraw's entry reads process.env, which the browser has not
+  define: {
+    "process.env.IS_PREACT": JSON.stringify("true"),
+  },
+
   server: {
     port: 4200,
     host: true,

libraries/mapping/addons/src/addons/Annotation/AnnotationControl.tsx

@@ -0,0 +1,50 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPencil } from "@fortawesome/free-solid-svg-icons";
+import { Tooltip } from "antd";
+
+import {
+  Control,
+  ControlButtonStyler,
+  type Positions,
+} from "@carma-mapping/map-controls-layout";
+
+import type { AddonComponentProps } from "../../lib/registry";
+import { useAnnotationActions } from "./annotation-actions";
+
+/** geoportal's topleft column: measurement is 60, highlighting 70, terrain 80 */
+const DEFAULT_CONTROL_POSITION: Positions = "topleft";
+const DEFAULT_CONTROL_ORDER = 90;
+
+/** active-control blue */
+const ACTIVE_COLOR = "#1677ff";
+
+/** the sketch layer's on/off button; separate so a route can drive the mode itself */
+export const AnnotationControl = ({
+  config,
+  libreMap,
+}: AddonComponentProps<"annotationControl">) => {
+  const { position = DEFAULT_CONTROL_POSITION, order = DEFAULT_CONTROL_ORDER } =
+    config ?? {};
+
+  const { isOn, toggle } = useAnnotationActions();
+
+  if (!libreMap) {
+    return null;
+  }
+
+  return (
+    <Control position={position} order={order}>
+      <Tooltip
+        title={isOn ? "Zeichnen ausschalten" : "Zeichnen einschalten"}
+        placement="right"
+      >
+        <ControlButtonStyler onClick={toggle} dataTestId="annotation-control">
+          <FontAwesomeIcon
+            icon={faPencil}
+            style={isOn ? { color: ACTIVE_COLOR } : undefined}
+          />
+        </ControlButtonStyler>
+      </Tooltip>
+    </Control>
+  );
+};

libraries/mapping/addons/src/addons/Annotation/AnnotationInteractionPanel.tsx

@@ -0,0 +1,62 @@
+import { useMemo } from "react";
+
+import { useAnnotationActions } from "./annotation-actions";
+import {
+  AnnotationShapeToolbar,
+  type AnnotationDrawingEntry,
+} from "./AnnotationShapeToolbar";
+import { DEFAULT_SHAPES } from "./shape-tools";
+
+export const AnnotationInteractionPanel = () => {
+  const {
+    isOn,
+    isLocked,
+    shape,
+    setShape,
+    undo,
+    redo,
+    toggleLock,
+    groups,
+    activeId,
+    pickGroup,
+    zoomToGroup,
+    deleteGroup,
+  } = useAnnotationActions();
+
+  // the drawing held ready for the next stroke is not one yet, so it has no pill
+  const drawings = useMemo<AnnotationDrawingEntry[]>(
+    () =>
+      groups
+        .filter((group) => group.coverage)
+        .map((group, index) => ({
+          id: group.id,
+          // only the first one is spelled out, the rest read as a numbered list
+          label: index === 0 ? `Zeichnung 1` : `${index + 1}`,
+          name: `Zeichnung ${index + 1}`,
+          // locked means nothing is being edited, so nothing is picked out
+          active: !isLocked && group.id === activeId,
+        })),
+    [activeId, groups, isLocked]
+  );
+
+  if (!isOn) {
+    return null;
+  }
+
+  // locked: only the drawing list, the lock and the new-drawing button stay
+  return (
+    <AnnotationShapeToolbar
+      shapes={isLocked ? [] : DEFAULT_SHAPES}
+      shape={shape}
+      onShapeChange={setShape}
+      drawings={drawings}
+      onPickDrawing={pickGroup}
+      onZoomDrawing={zoomToGroup}
+      onDeleteDrawing={deleteGroup}
+      isLocked={isLocked}
+      onToggleLock={toggleLock}
+      onUndo={isLocked ? undefined : undo}
+      onRedo={isLocked ? undefined : redo}
+    />
+  );
+};