From 939a560127cbf1aefb06be509d255278c80d187a Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Wed, 4 Sep 2024 17:34:57 +0200
Subject: [PATCH] Always show schlag parts instead of feature state selection

---
 src/components/TheEntryList.vue |  9 ++----
 src/composables/useSchlag.js    | 57 +++++++++++++++++++--------------
 2 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/src/components/TheEntryList.vue b/src/components/TheEntryList.vue
index 5827f43..487601c 100644
--- a/src/components/TheEntryList.vue
+++ b/src/components/TheEntryList.vue
@@ -70,17 +70,14 @@ import { useDataEntries } from '../composables/useDataEntries.js';
 import { watch } from 'vue';
 
 const { allData, emptyEntry, entry } = useDataEntries();
-const { showSchlagParts } = useSchlag();
+const { showSchlagParts, removeSchlagParts } = useSchlag();
 
-let removeSchlagParts;
 watch(entry, (value) => {
-  if (removeSchlagParts) {
-    removeSchlagParts();
-  }
+  removeSchlagParts();
   if (!value.schlaginfo?.basic?.parts) {
     return;
   }
-  removeSchlagParts = showSchlagParts(value.schlaginfo.basic.parts);
+  showSchlagParts(value.schlaginfo.basic.parts);
 });
 function zoomTo(nr) {
   entry.value = JSON.parse(JSON.stringify(allData.value.saved[nr]));
diff --git a/src/composables/useSchlag.js b/src/composables/useSchlag.js
index 8bce3b7..b78b16f 100644
--- a/src/composables/useSchlag.js
+++ b/src/composables/useSchlag.js
@@ -1,4 +1,4 @@
-import { getSource, setFeatureState } from 'ol-mapbox-style';
+import { getSource } from 'ol-mapbox-style';
 import { createEmpty, extend } from 'ol/extent';
 import { transformExtent } from 'ol/proj';
 import { toGeometry } from 'ol/render/Feature';
@@ -21,7 +21,7 @@ import VectorSource from 'ol/source/Vector.js';
  * @property {string} [fnar_code]
  * @property {string} [kz_bio_oepul_jn]
  * @property {import("ol/extent").Extent} [extent]
- * @property {Array<import('ol/format/GeoJSON').GeoJSONGeometry>} [parts]
+ * @property {Array<import('geojson').Polygon>} [parts]
  */
 
 const geojson = new GeoJSON();
@@ -145,28 +145,36 @@ map.on('pointermove', (event) => {
     allData.value.datawindow === 1 && getSchlagAtPixel(event.pixel) ? 'pointer' : '';
 });
 
-watch(schlagInfo, (value, oldValue) => {
-  if (oldValue && !oldValue.loading) {
-    setFeatureState(map, { source: 'agrargis', id: oldValue.id }, null);
+watch(schlagInfo, (value) => {
+  removeSchlagParts();
+  if (!value) {
+    return;
   }
-  if (value) {
-    if (value.loading) {
-      findSchlag(value.id).then((feature) => {
-        setSchlagInfo(feature);
-      });
-    } else {
-      setFeatureState(map, { source: 'agrargis', id: value.id }, { selected: true });
-    }
+  if (value?.loading) {
+    findSchlag(value.id).then((feature) => {
+      setSchlagInfo(feature);
+    });
+    return;
   }
+  showSchlagParts(value.parts, { zoom: false });
 });
 
+let partsLayer;
+function removeSchlagParts() {
+  if (!partsLayer) {
+    return;
+  }
+  map.removeLayer(partsLayer);
+}
+
 /**
  * @param {Array<import('geojson').Polygon>} parts
- * @returns {() => void} Call this function to remove schlag parts from the map
  */
-function showSchlagParts(parts) {
-  const partsLayer = new VectorLayer({
+function showSchlagParts(parts, options = { zoom: true }) {
+  removeSchlagParts();
+  partsLayer = new VectorLayer({
     source: new VectorSource({
+      overlaps: false,
       features: geojson.readFeatures({
         type: 'FeatureCollection',
         features: parts.map((geometry) => ({
@@ -175,24 +183,25 @@ function showSchlagParts(parts) {
         })),
       }),
     }),
-    opacity: 0.5,
     style: {
-      'fill-color': 'rgb(30, 30, 30)',
+      'fill-color': 'rgba(255, 0, 0, 0.25)',
     },
   });
-  map
-    .getView()
-    .fit(partsLayer.getSource().getExtent(), { duration: 500, padding: [50, 50, 50, 400] });
+  if (options.zoom) {
+    map
+      .getView()
+      .fit(partsLayer.getSource().getExtent(), { duration: 500, padding: [50, 50, 50, 400] });
+  }
   map.addLayer(partsLayer);
-  return () => map.removeLayer(partsLayer);
 }
 
 /**
  * @returns {{
  *   schlagInfo: import('vue').Ref<SchlagInfo>,
- *   showSchlagParts: (parts: Array<import('geojson').Polygon>) => () => void,
+ *   showSchlagParts: (parts: Array<import('geojson').Polygon>) => void,
+ *   removeSchlagParts: () => void,
  * }}
  */
 export function useSchlag() {
-  return { schlagInfo, showSchlagParts };
+  return { schlagInfo, showSchlagParts, removeSchlagParts };
 }