From cd00192618c0350ded0513364576ad1561b57dfd Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Tue, 28 Mar 2023 12:49:49 -0300
Subject: [PATCH] Fix edit geojson shapes

---
 src/components/Map/VMap.global.vue            | 47 +++++++++++++------
 src/components/Map/utils/geojsonOptions.js    | 16 ++++++-
 .../otus/components/Search/OtuSearch.vue      | 17 +++----
 src/modules/otus/services/TaxonWorks.js       |  6 +++
 4 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/src/components/Map/VMap.global.vue b/src/components/Map/VMap.global.vue
index b9586a2..039b579 100644
--- a/src/components/Map/VMap.global.vue
+++ b/src/components/Map/VMap.global.vue
@@ -87,7 +87,9 @@ const emit = defineEmits([
   'geojson:ready',
   'geojson',
   'add:layer',
-  'draw:start'
+  'draw:start',
+  'edit:layer',
+  'drag:layer'
 ])
 
 let mapObject
@@ -167,21 +169,25 @@ onMounted(() => {
     })
 
     mapObject.on('pm:create', (e) => {
-      const fg = L.featureGroup()
-
-      drawnItems.eachLayer((layer) => {
-        if (
-          (layer instanceof L.Path || layer instanceof L.Marker) &&
-          layer.pm
-        ) {
-          fg.addLayer(layer)
-        }
-      })
-
-      emit('geojson', fg.toGeoJSON())
+      emit('geojson', getDrawItemsInGeoJson())
       emit('add:layer', convertGeoJSONWithPointRadius(e.layer))
     })
 
+    /*     drawnItems.on('pm:change', (e) => {
+      emit('geojson', getDrawItemsInGeoJson())
+      emit('edit:layer', convertGeoJSONWithPointRadius(e.layer))
+    }) */
+
+    drawnItems.on('pm:edit', (e) => {
+      emit('geojson', getDrawItemsInGeoJson())
+      emit('edit:layer', convertGeoJSONWithPointRadius(e.layer))
+    })
+
+    drawnItems.on('pm:drag', (e) => {
+      emit('geojson', getDrawItemsInGeoJson())
+      emit('drag:layer', convertGeoJSONWithPointRadius(e.layer))
+    })
+
     mapObject.on('pm:drawstart', (e) => {
       clearDrawLayers()
       emit('draw:start', e)
@@ -192,6 +198,18 @@ onMounted(() => {
   initEvents()
 })
 
+function getDrawItemsInGeoJson() {
+  const fg = L.featureGroup()
+
+  drawnItems.eachLayer((layer) => {
+    if ((layer instanceof L.Path || layer instanceof L.Marker) && layer.pm) {
+      fg.addLayer(layer)
+    }
+  })
+
+  return fg.toGeoJSON()
+}
+
 function clearDrawLayers() {
   drawnItems.clearLayers()
 }
@@ -235,8 +253,7 @@ function setGeoJSON(geojson) {
   if (geojson) {
     L.geoJSON(geojson, {
       ...geojsonDefaultOptions,
-      ...props.geojsonOptions,
-      pmIgnore: true
+      ...props.geojsonOptions
     }).addTo(geoJSONGroup)
 
     const bounds = geoJSONGroup.getBounds()
diff --git a/src/components/Map/utils/geojsonOptions.js b/src/components/Map/utils/geojsonOptions.js
index 1eaece8..07ac671 100644
--- a/src/components/Map/utils/geojsonOptions.js
+++ b/src/components/Map/utils/geojsonOptions.js
@@ -9,6 +9,14 @@ const TYPES = [
   'Georeference'
 ]
 
+const DEFAULT_OPTIONS = {
+  allowEditing: false,
+  allowRemoval: false,
+  allowCutting: false,
+  allowRotation: false,
+  draggable: false
+}
+
 function getRelevantType(base) {
   const types = base.map((b) => b.type)
 
@@ -37,13 +45,19 @@ export default {
       .join('')}
       </ul></div>`
 
+    layer.pm.setOptions(DEFAULT_OPTIONS)
+    layer.pm.disable()
+
     layer.bindPopup(label)
   },
 
   pointToLayer: (feature, latLng) => {
     const type = getRelevantType(feature.properties.base)
+    const marker = L.marker(latLng, { icon: Icons[type] || Icon.Georeference })
+
+    marker.pm.setOptions(DEFAULT_OPTIONS)
 
-    return L.marker(latLng, { icon: Icons[type] || Icon.Georeference })
+    return marker
   },
 
   style: (feature) => {
diff --git a/src/modules/otus/components/Search/OtuSearch.vue b/src/modules/otus/components/Search/OtuSearch.vue
index 8528410..d0ff4f6 100644
--- a/src/modules/otus/components/Search/OtuSearch.vue
+++ b/src/modules/otus/components/Search/OtuSearch.vue
@@ -18,12 +18,10 @@
         :disable-zoom="!!shapes"
         :zoom-bounds="6"
         :geojson="shapes"
+        @add:layer="setLayer"
+        @edit:layer="setLayer"
+        @drag:layer="setLayer"
         @draw:start="() => (geojson = {})"
-        @add:layer="
-          ($event) => {
-            geoJson = JSON.stringify($event.geometry)
-          }
-        "
         :zoom="4"
       />
       <div
@@ -46,7 +44,7 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import { makeAPIRequest } from '@/utils/request'
+import TaxonWorks from '../../services/TaxonWorks'
 import SearchBar from './SearchBar.vue'
 import ListResults from './ListResults.vue'
 
@@ -88,6 +86,10 @@ const handleKeyboard = ({ key }) => {
   }
 }
 
+function setLayer(geojsonLayer) {
+  geoJson.value = JSON.stringify(geojsonLayer.geometry)
+}
+
 function loadOTUs() {
   const payload = {
     geo_json: geoJson.value,
@@ -97,8 +99,7 @@ function loadOTUs() {
 
   isLoading.value = true
 
-  makeAPIRequest
-    .get('/otus.json', { params: payload })
+  TaxonWorks.getOtus(payload)
     .then(({ data }) => {
       list.value = data
       isTableVisible.value = true
diff --git a/src/modules/otus/services/TaxonWorks.js b/src/modules/otus/services/TaxonWorks.js
index 14f8863..aae3ceb 100644
--- a/src/modules/otus/services/TaxonWorks.js
+++ b/src/modules/otus/services/TaxonWorks.js
@@ -11,6 +11,12 @@ export default class TaxonWorks {
     })
   }
 
+  static getOtus(params) {
+    return makeAPIRequest.get(`/otus.json`, {
+      params
+    })
+  }
+
   static getTaxon(id) {
     return makeAPIRequest.get(`/taxon_names/${id}`)
   }