fix z-order

Geoportail-Luxembourg · Nov 15, 2024 · 225c586 · 225c586
1 parent eae429f
commit 225c586
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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,