From 225c58645eb5d0c85b7009fb990dd5c3ca6eea33 Mon Sep 17 00:00:00 2001
From: Moritz Kirmse <moritz.kirmse@camptocamp.com>
Date: Fri, 15 Nov 2024 15:50:03 +0100
Subject: [PATCH] fix z-order

---
 src/components/draw/draw-panel-features.vue            | 10 +++++++++-
 .../state-persistor/state-persistor-features.mapper.ts |  4 ++--
 src/stores/draw.store.ts                               |  7 +++++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/draw/draw-panel-features.vue b/src/components/draw/draw-panel-features.vue
index 49d28657..bc303ad2 100644
--- a/src/components/draw/draw-panel-features.vue
+++ b/src/components/draw/draw-panel-features.vue
@@ -28,8 +28,15 @@ function onToggleFeatureEdit(featureId: String, isEditing: boolean) {
   // TODO: continue...
 }
 
+function sortFunction(elements: HTMLCollection) {
+  const featureIds = [...elements].map(val => val.id)
+  drawStore.reorderFeatures(featureIds)
+}
+
 onMounted(() => {
-  useSortable(<HTMLElement>document.querySelector('.sortable-features'))
+  useSortable(<HTMLElement>document.querySelector('.sortable-features'), {
+    onSort: sortFunction,
+  })
 })
 </script>
 
@@ -38,6 +45,7 @@ onMounted(() => {
     <li
       class="lux-drawing-item"
       v-for="(feature, index) in features"
+      :id="`f-${getUid(feature)}`"
       :key="index"
     >
       <FeatureItem
diff --git a/src/services/state-persistor/state-persistor-features.mapper.ts b/src/services/state-persistor/state-persistor-features.mapper.ts
index 398bb688..ce1ad72f 100644
--- a/src/services/state-persistor/state-persistor-features.mapper.ts
+++ b/src/services/state-persistor/state-persistor-features.mapper.ts
@@ -16,9 +16,9 @@ class StorageFeaturesMapper {
     if (!features) return ''
     const featuresToEncode = features
       .filter(feature => !feature.map_id)
+      .sort((a, b) => a.display_order - b.display_order)
       .map(feature => {
-        const newFeature = new DrawnFeature(feature) //create new instance to avoid converting ol feature to polygon
-        // newFeature.set('name', newFeature.label) //is this still needed?
+        const newFeature = new DrawnFeature(feature) // create new instance to avoid converting ol feature to polygon
         return convertCircleFeatureToPolygon(newFeature)
       })
     return featuresToEncode.length > 0
diff --git a/src/stores/draw.store.ts b/src/stores/draw.store.ts
index 24c68e52..102acbfd 100644
--- a/src/stores/draw.store.ts
+++ b/src/stores/draw.store.ts
@@ -82,6 +82,12 @@ export const useDrawStore = defineStore('draw', () => {
     }
   }
 
+  function reorderFeatures(featuresId: String[]) {
+    drawnFeatures.value = drawnFeatures.value.map(f =>
+      Object.assign(f, { display_order: featuresId.indexOf(`f-${getUid(f)}`) })
+    )
+  }
+
   return {
     activeFeatureId,
     editingFeatureId,
@@ -90,6 +96,7 @@ export const useDrawStore = defineStore('draw', () => {
     drawnFeatures,
     featureEditionDocked,
     removeFeature,
+    reorderFeatures,
     toggleDrawActiveState,
     setDrawActiveState,
     setEditActiveState,