refactor

components/Map.tsx

@@ -5,13 +5,13 @@ import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 import { getRasterTileTemplateUrl, getVectorTileTemplateUrl } from "@/api/tiles";
-import { initDrawing } from "@/lib/drawingEngine";
-import { initSelect } from "@/lib/selectingEngine";
-import { initPoint } from "@/lib/pointEngine";
-import { initLine } from "@/lib/lineEngine";
-import { initPath } from "@/lib/pathEngine";
-import { initCircle } from "@/lib/circleEngine";
-import { createEditingEngine } from "@/lib/editingEngine";
+import { initDrawing } from "@/lib/engine/drawingEngine";
+import { initSelect } from "@/lib/engine/selectingEngine";
+import { initPoint } from "@/lib/engine/pointEngine";
+import { initLine } from "@/lib/engine/lineEngine";
+import { initPath } from "@/lib/engine/pathEngine";
+import { initCircle } from "@/lib/engine/circleEngine";
+import { createEditingEngine } from "@/lib/engine/editingEngine";
 import { Feature, FeatureCollection, Geometry } from "@/lib/useEditorState";
 import { BACKGROUND_LAYER_OPTIONS, BackgroundLayerVisibility } from "@/lib/backgroundLayers";
 
@@ -31,6 +31,12 @@ type MapProps = {
     fitBoundsKey?: string | number | null;
 };
 
+type EngineBinding = {
+    cleanup: () => void;
+    cancel?: () => void;
+    clearSelection?: () => void;
+};
+
 const DEFAULT_POINT_ICON_ID = "point-icon-default";
 const POINT_ICON_URL = "/point.png";
 const PATH_ARROW_ICON_ID = "path-arrow-icon";
@@ -148,14 +154,28 @@ export default function Map({
     const editingEngineRef = useRef<ReturnType<typeof createEditingEngine> | null>(null);
     const fitBoundsAppliedRef = useRef(false);
     const mapCleanupFnsRef = useRef<Array<() => void>>([]);
+    const engineBindingsRef = useRef<Partial<Record<MapProps["mode"], EngineBinding>>>({});
+    const previousModeRef = useRef<MapProps["mode"]>(mode);
 
     useEffect(() => {
         modeRef.current = mode;
     }, [mode]);
 
     useEffect(() => {
+        const previousMode = previousModeRef.current;
+        if (previousMode !== mode) {
+            engineBindingsRef.current[previousMode]?.cancel?.();
+            previousModeRef.current = mode;
+        }
+
         const map = mapRef.current;
         if (!map || !map.isStyleLoaded()) return;
+        if (mode !== "draw") {
+            (map.getSource("draw-preview") as maplibregl.GeoJSONSource | undefined)?.setData({
+                type: "FeatureCollection",
+                features: [],
+            });
+        }
         if (mode !== "add-line") {
             (map.getSource("draw-line-preview") as maplibregl.GeoJSONSource | undefined)?.setData({
                 type: "FeatureCollection",
@@ -184,6 +204,12 @@ export default function Map({
         selectedFeatureIdRef.current = selectedFeatureId;
     }, [selectedFeatureId]);
 
+    useEffect(() => {
+        if (mode !== "select" || selectedFeatureId === null) {
+            editingEngineRef.current?.clearEditing();
+        }
+    }, [mode, selectedFeatureId]);
+
     useEffect(() => {
         fitBoundsAppliedRef.current = false;
     }, [fitBoundsKey]);
@@ -791,7 +817,7 @@ export default function Map({
             addPointSymbolLayer(map);
 
             // init drawing
-            const cleanup = initDrawing(
+            const drawingEngine = initDrawing(
                 map,
                 () => modeRef.current,
                 (geometry: Geometry) => {
@@ -813,7 +839,7 @@ export default function Map({
                 }
             );
 
-            const cleanupSelect = initSelect(
+            const selectEngine = initSelect(
                 map,
                 () => modeRef.current,
                 allowGeometryEditing
@@ -852,7 +878,7 @@ export default function Map({
                 }
             );
 
-            const cleanupLine = initLine(
+            const lineEngine = initLine(
                 map,
                 () => modeRef.current,
                 (geometry: Geometry) => {
@@ -874,7 +900,7 @@ export default function Map({
                 }
             );
 
-            const cleanupPath = initPath(
+            const pathEngine = initPath(
                 map,
                 () => modeRef.current,
                 (geometry: Geometry) => {
@@ -896,7 +922,7 @@ export default function Map({
                 }
             );
 
-            const cleanupCircle = initCircle(
+            const circleEngine = initCircle(
                 map,
                 () => modeRef.current,
                 (geometry: Geometry) => {
@@ -918,13 +944,21 @@ export default function Map({
                 }
             );
 
+            engineBindingsRef.current = {
+                draw: drawingEngine,
+                select: selectEngine,
+                "add-line": lineEngine,
+                "add-path": pathEngine,
+                "add-circle": circleEngine,
+            };
+
             mapCleanupFnsRef.current = [
-                cleanupCircle,
-                cleanupPath,
-                cleanupLine,
+                circleEngine.cleanup,
+                pathEngine.cleanup,
+                lineEngine.cleanup,
                 cleanupPoint,
-                cleanupSelect,
-                cleanup,
+                selectEngine.cleanup,
+                drawingEngine.cleanup,
                 () => map.off("zoom", syncZoomLevel),
             ];
 
@@ -941,6 +975,7 @@ export default function Map({
                 cleanupFn();
             }
             mapCleanupFnsRef.current = [];
+            engineBindingsRef.current = {};
             if (mapRef.current === map) {
                 mapRef.current = null;
             }