feat: select feature on map click and sync list

src/components/LoCha/LoCha.vue

@@ -5,7 +5,8 @@ import type { MapGeoJSONFeature } from 'maplibre-gl'
 import LoChaList from '@/components/LoCha/LoChaList.vue'
 import VMap from '@/components/VMap.vue'
 import { useLoCha } from '@/composables/useLoCha'
-import { watchEffect } from 'vue'
+import { useMap } from '@/composables/useMap'
+import { watch, watchEffect } from 'vue'
 
 const props = defineProps<{
   data?: ApiResponse
@@ -21,8 +22,11 @@ const {
   beforeFeatures,
   featureCount,
   linkCount,
+  selectedFeatures,
   selectedLink,
   setLoCha,
+  showLink,
+  getStatus,
 } = useLoCha()
 
 watchEffect(() => {
@@ -31,11 +35,33 @@ watchEffect(() => {
   }
 })
 
+const { setFeatureHighlight } = useMap()
+
+watch(selectedFeatures, (newValue, oldValue) => {
+  if (oldValue) {
+    oldValue.forEach((feature) => {
+      // TODO: use feature.id once API returns a numeric int
+      setFeatureHighlight(feature.properties?.id.toString(), false, true)
+    })
+  }
+
+  if (newValue) {
+    newValue.forEach((feature) => {
+      // TODO: use feature.id once API returns a numeric int
+      setFeatureHighlight(feature.properties?.id.toString(), true, true)
+    })
+  }
+})
+
 function handleMapClick(feature: MapGeoJSONFeature) {
   if (!feature.id)
     throw new Error('Feature ID not found.')
 
-  // TODO...
+  const status = getStatus(feature)
+  // TODO: use feature.id once API returns a numeric int
+  const id = `${feature.properties.objtype[0]}${feature.properties.id}_${feature.properties.version}`
+
+  showLink(id, status)
 }
 </script>
 

src/components/LoCha/LoChaObject.vue

@@ -44,7 +44,8 @@ const title = computed(() => {
 })
 
 const color = computed(() => loChaColors[status.value])
-const { showLink, selectedLink, resetLink } = useLoCha()
+
+const { selectedLink } = useLoCha()
 const style = computed(() => {
   if (!selectedLink.value)
     return
@@ -54,6 +55,7 @@ const style = computed(() => {
   }
 })
 
+const { showLink, resetLink } = useLoCha()
 function handleClick(id?: string) {
   if (!id)
     throw new Error('Object not found')

src/components/VMap.vue

@@ -7,29 +7,11 @@ import 'maplibre-gl/dist/maplibre-gl.css'
 
 const emit = defineEmits<MapEmits>()
 
-const { loCha, selectedFeatures } = useLoCha()
-const { init, handleMapDataUpdate, setFeatureHighlight } = useMap()
+const { loCha } = useLoCha()
+const { init, handleMapDataUpdate } = useMap()
 
 onMounted(() => init(emit))
 
-function updateFeatureHighlight(features: GeoJSON.Feature[] | undefined, state: boolean) {
-  if (!features)
-    return
-
-  features.forEach((f) => {
-    if (!f.id || !f.properties)
-      return
-
-    // TODO: use f.id once API returns a numeric int
-    setFeatureHighlight(f.properties.id.toString(), state)
-  })
-}
-
-watch(selectedFeatures, (newValue, oldValue) => {
-  updateFeatureHighlight(newValue, true)
-  updateFeatureHighlight(oldValue, false)
-})
-
 watch(loCha, (newValue) => {
   if (newValue) {
     handleMapDataUpdate(newValue)

src/composables/useLoCha.ts

@@ -59,6 +59,7 @@ export interface LoCha {
   selectedFeatures: ComputedRef<GeoJSON.Feature[] | undefined>
   setLoCha: (loCha: ApiResponse) => void
   resetLink: () => void
+  getStatus: (feature: GeoJSON.Feature) => Status
 }
 
 // Internal state variables
@@ -124,6 +125,25 @@ export function useLoCha(): LoCha {
     selectedLink.value = undefined
   }
 
+  function getStatus(feature: GeoJSON.Feature): Status {
+    if (!feature.properties)
+      throw new Error(`Feature ${feature.id} has no properties.`)
+
+    if (feature.properties.is_created) {
+      return loChaStatus.create
+    }
+
+    if (feature.properties.is_deleted) {
+      return loChaStatus.delete
+    }
+
+    if (feature.properties.is_before) {
+      return loChaStatus.updateBefore
+    }
+
+    return loChaStatus.updateAfter
+  }
+
   function _getFeature(id: string): GeoJSON.Feature | undefined {
     return loCha.value?.features.find(feature => feature.id?.toString() === id)
   }
@@ -199,5 +219,6 @@ export function useLoCha(): LoCha {
     selectedFeatures,
     setLoCha,
     resetLink,
+    getStatus,
   }
 }

src/composables/useMap.ts

@@ -21,7 +21,7 @@ export interface IMap {
    */
   handleMapDataUpdate: (data: ApiResponse) => void
 
-  setFeatureHighlight: (id: string, state: boolean) => void
+  setFeatureHighlight: (id: string, state: boolean, storeState?: boolean) => void
 }
 
 /**
@@ -169,6 +169,7 @@ const source = ref<GeoJSONSource>()
 
 const hoveredStateId = ref<string>()
 const popup = ref<maplibre.Popup>()
+const highlightedFeatures = ref<Set<string>>(new Set())
 
 /**
  * Provides methods to initialize and manage the map.
@@ -309,17 +310,25 @@ export function useMap(): IMap {
     })
   }
 
-  function setFeatureHighlight(id: string, state: boolean): void {
+  function setFeatureHighlight(id: string, state: boolean, storeState: boolean = false): void {
     if (!map.value)
       throw new Error('Call useMap.init() function first.')
 
-    map.value!.setFeatureState(
-      {
-        source: SOURCE_ID,
-        id,
-      },
-      { hover: state },
-    )
+    if (storeState)
+      highlightedFeatures.value.clear()
+
+    if (!highlightedFeatures.value.has(id)) {
+      map.value!.setFeatureState(
+        {
+          source: SOURCE_ID,
+          id,
+        },
+        { hover: state },
+      )
+    }
+
+    if (storeState && state)
+      highlightedFeatures.value.add(id)
   }
 
   /**

yarn.lock

@@ -1406,6 +1406,7 @@ __metadata:
     vue-tsc: "npm:^2.1.10"
   peerDependencies:
     maplibre-gl: ^4.7.1
+    vue: ^3.5.13
   languageName: unknown
   linkType: soft