demo 20-4-2026

lib/selectingEngine.ts

@@ -14,9 +14,17 @@ export function initSelect(
         "countries-fill",
         "countries-line",
         "routes-line",
+        "routes-path-arrow-fill",
+        "routes-path-arrow-line",
+        "routes-path-hit",
         "places-circle",
         "places-symbol",
     ] as const;
+    const FEATURE_STATE_SOURCES = [
+        "countries",
+        "places",
+        "path-arrow-shapes",
+    ] as const;
     const selectedIds = new Set<number | string>();
     const hasContextActions = Boolean(onDelete || onEdit);
     let contextMenu: HTMLDivElement | null = null;
@@ -25,9 +33,7 @@ export function initSelect(
     // Bỏ highlight feature-state của toàn bộ đối tượng đang chọn.
     function clearSelection() {
         if (!selectedIds.size) return;
-        selectedIds.forEach((id) => {
-            map.setFeatureState({ source: "countries", id }, { selected: false });
-        });
+        selectedIds.forEach((id) => setSelectionStateForId(id, false));
         selectedIds.clear();
         onSelectId?.(null);
     }
@@ -43,13 +49,13 @@ export function initSelect(
 
         if (additive && selectedIds.has(id)) {
             // Alt + click on an already selected feature removes it from the selection
-            map.setFeatureState({ source: "countries", id }, { selected: false });
+            setSelectionStateForId(id, false);
             selectedIds.delete(id);
             onSelectId?.(selectedIds.size === 1 ? Array.from(selectedIds)[0] : null);
             return;
         }
 
-        map.setFeatureState({ source: "countries", id }, { selected: true });
+        setSelectionStateForId(id, true);
         selectedIds.add(id);
         onSelectId?.(selectedIds.size === 1 ? id : null);
     }
@@ -125,6 +131,13 @@ export function initSelect(
         return SELECTABLE_LAYERS.filter((layerId) => Boolean(map.getLayer(layerId)));
     }
 
+    function setSelectionStateForId(id: string | number, selected: boolean) {
+        for (const source of FEATURE_STATE_SOURCES) {
+            if (!map.getSource(source)) continue;
+            map.setFeatureState({ source, id }, { selected });
+        }
+    }
+
     map.on("click", onClick);
     map.on("mousemove", onMove);
     if (hasContextActions) {
@@ -192,7 +205,12 @@ export function initSelect(
         const selectedCount = selectedIds.size || 1;
         let hasMenuItems = false;
 
-        if (selectedCount === 1 && clickedFeature.geometry?.type === "Polygon" && onEdit) {
+        if (
+            selectedCount === 1 &&
+            clickedFeature.source === "countries" &&
+            clickedFeature.geometry?.type === "Polygon" &&
+            onEdit
+        ) {
             const single = clickedFeature;
             menu.appendChild(createItem("Chỉnh sửa", () => onEdit(single)));
             hasMenuItems = true;