From a37c3c4cd84cce16645e61307c2c790645c7064c Mon Sep 17 00:00:00 2001
From: Dovile <dovile.maminskaite@am.lt>
Date: Fri, 7 Jun 2024 09:57:27 +0300
Subject: [PATCH 1/5] An updated draw, select and remove logic to preserve
 buffer size.

---
 src/routes/edit.vue   | 70 ++++++++++++++++++++-----------------------
 src/utils/map/draw.ts | 49 +++++++++++++++++++++++-------
 2 files changed, 71 insertions(+), 48 deletions(-)

diff --git a/src/routes/edit.vue b/src/routes/edit.vue
index c6d5728..ba7f23a 100644
--- a/src/routes/edit.vue
+++ b/src/routes/edit.vue
@@ -25,7 +25,7 @@
               type="danger"
               class="shadow"
               icon="remove"
-              @click="mapDraw.remove(selectedFeature?.feature)"
+              @click="mapDraw.remove(selectedFeature?.feature, true)"
             />
           </UiButtonRow>
         </template>
@@ -57,7 +57,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useFiltersStore } from "@/stores/filters";
+import { useFiltersStore } from '@/stores/filters';
 import {
   convertFeatureCollectionProjection,
   geoportalForests,
@@ -79,32 +79,24 @@ import {
   searchGeoportal,
   stvkService,
   uetkService,
-} from "@/utils";
-import { getFeatureCollection } from "geojsonjs";
-import _ from "lodash";
-import { computed, inject, ref } from "vue";
-import { useRoute } from "vue-router";
+} from '@/utils';
+import { getFeatureCollection } from 'geojsonjs';
+import _ from 'lodash';
+import { computed, inject, ref } from 'vue';
+import { useRoute } from 'vue-router';
 const $route = useRoute();
-const events: any = inject("events");
-
-const mapLayers: any = inject("mapLayers");
-const postMessage: any = inject("postMessage");
-
-const query = parseRouteParams($route.query, [
-  "multi",
-  "buffer",
-  "preview",
-  "types",
-  "autoZoom",
-]);
+const events: any = inject('events');
+
+const mapLayers: any = inject('mapLayers');
+const postMessage: any = inject('postMessage');
+
+const query = parseRouteParams($route.query, ['multi', 'buffer', 'preview', 'types', 'autoZoom']);
 const isPreview = !!query.preview;
 
 const activeDrawType = computed(() => mapDraw.value.activeType);
 const selectedFeature = ref({} as any);
 const showBufferChangeBox = computed(
-  () =>
-    !!query.buffer &&
-    ["Point", "LineString"].includes(selectedFeature.value?.geometry?.type)
+  () => !!query.buffer && ['Point', 'LineString'].includes(selectedFeature.value?.geometry?.type),
 );
 
 const toggleLayers = [
@@ -124,13 +116,13 @@ const toggleLayers = [
 
 const mapDraw = computed(() => mapLayers.getDraw());
 const defaultDrawElements = [
-  { icon: "point", type: "Point", name: "Taškas", el: "point" },
-  { icon: "line", type: "LineString", name: "Linija", el: "line" },
-  { icon: "polygon", type: "Polygon", name: "Plotas", el: "polygon" },
+  { icon: 'point', type: 'Point', name: 'Taškas', el: 'point' },
+  { icon: 'line', type: 'LineString', name: 'Linija', el: 'line' },
+  { icon: 'polygon', type: 'Polygon', name: 'Plotas', el: 'polygon' },
 ];
 
 const drawTypes = computed(() => {
-  let types = ["point", "line", "polygon"];
+  let types = ['point', 'line', 'polygon'];
   if (query.types) {
     if (Array.isArray(query.types)) {
       types = query.types;
@@ -158,7 +150,7 @@ const bufferSizes: any = {
   xl: { min: 1000, max: 10000, step: 1000 },
 };
 
-const bufferSizeKey = query.buffer && bufferSizes[query.buffer] ? query.buffer : "xs";
+const bufferSizeKey = query.buffer && bufferSizes[query.buffer] ? query.buffer : 'xs';
 
 const bufferSizeLabel = computed(() => {
   const text = `Buferio dydis`;
@@ -181,7 +173,7 @@ const featureBufferSize = computed({
   get(): number | undefined {
     if (!selectedFeature.value?.feature) return;
     const bufferSize = Number(
-      mapDraw.value.getProperties(selectedFeature.value?.feature, "bufferSize")
+      mapDraw.value.getProperties(selectedFeature.value?.feature, 'bufferSize'),
     );
     return bufferSize || bufferSizes[bufferSizeKey].min;
   },
@@ -231,13 +223,14 @@ mapDraw.value
   .setMulti(!!query.multi)
   .enableBufferSize(!!query.buffer, bufferSizes[bufferSizeKey].min)
   .enableContinuousDraw(enableContinuousDraw)
-  .on(["change", "remove"], ({ features, featuresJSON }: any) => {
-    postMessage("data", features);
+  .on(['change', 'remove'], ({ features, featuresJSON }: any) => {
+    postMessage('data', features);
     if (!!query.autoZoom && !!featuresJSON?.features?.length) {
       mapLayers.zoomToFeatureCollection(featuresJSON);
     }
   })
-  .on("select", ({ featureObj, feature }: any) => {
+  .on('select', ({ featureObj, feature }: any) => {
+    // console.log('select !!!', featureObj, feature);
     selectedFeature.value = {
       ...feature,
       feature: featureObj,
@@ -248,10 +241,11 @@ if (enableContinuousDraw) {
   toggleDrawType(drawTypes.value[0].type);
 }
 
-events.on("geom", (data: any) => {
+events.on('geom', (data: any) => {
+  console.log('on geom', data);
   let geom = data.geom || data;
 
-  if (typeof geom === "string") {
+  if (typeof geom === 'string') {
     try {
       geom = JSON.parse(geom);
     } catch (err) {
@@ -264,13 +258,13 @@ events.on("geom", (data: any) => {
   if (!isPreview) mapDraw.value.edit();
 });
 
-events.on("address", (data: any) => {
+events.on('address', (data: any) => {
   const address = data.address || data;
 
   // now supports only street + building number + city (e.g. Gedimino pr. 12, Vilnius)
   // TODO: update this part to support every address (including municipality, etc)
-  searchGeoportal(address, [{ type: "adresas", weight: 2 }], {
-    fields: ["VARDAS^5"],
+  searchGeoportal(address, [{ type: 'adresas', weight: 2 }], {
+    fields: ['VARDAS^5'],
   }).then((data: any) => {
     const firstHit = data?.rows?.[0];
 
@@ -279,11 +273,11 @@ events.on("address", (data: any) => {
     // convert WGS (coordinates) to LKS (freature collection)
     const featureCollection = convertFeatureCollectionProjection(
       getFeatureCollection({
-        type: "Point",
+        type: 'Point',
         coordinates: [firstHit.x, firstHit.y],
       }),
       projection4326,
-      projection
+      projection,
     );
 
     mapLayers.zoomToFeatureCollection(featureCollection);
diff --git a/src/utils/map/draw.ts b/src/utils/map/draw.ts
index ca93b7d..ec52480 100644
--- a/src/utils/map/draw.ts
+++ b/src/utils/map/draw.ts
@@ -1,5 +1,4 @@
 import type { Feature, Map } from 'ol';
-import type Layer from 'ol/layer/Layer';
 import VectorSource from 'ol/source/Vector';
 import { Draw, Modify, Snap, Interaction, Select } from 'ol/interaction';
 import type { Type as DrawType } from 'ol/geom/Geometry';
@@ -12,6 +11,7 @@ import { GeometryType, getFeatures, parse } from 'geojsonjs';
 import { getLayerStyles } from '../layers';
 import { convertFeaturesToPoints } from './utils';
 import type { GenericObject } from '@/types';
+import type { Layer } from 'ol-mapbox-style/dist/util';
 
 type CallbackType = 'change' | 'select' | 'remove';
 
@@ -57,7 +57,15 @@ export class MapDraw extends Queues {
     this._setup();
 
     this._select.on('select', (event) => {
-      this._setSelectedFeature(event.selected?.[0]);
+      const features = this._select.getFeatures().getArray();
+
+      const featureWithBuffer = features.find(
+        (feature) => !!feature.getProperties()?.['bufferSize'],
+      );
+      if (featureWithBuffer) {
+        console.log('Features selected: ', featureWithBuffer?.getProperties()?.['bufferSize']);
+        this._setSelectedFeature(featureWithBuffer);
+      }
     });
 
     this._modifySelect.on('modifyend', () => {
@@ -69,10 +77,21 @@ export class MapDraw extends Queues {
     this.map = map;
     this._processQueue();
 
-    if (map) {
-      this._applyStyles({ projection: map.getView().getProjection().getCode() });
+    if (this.map) {
+      this._applyStyles({ projection: this.map.getView().getProjection().getCode() });
+      // this.map.on('pointermove', (e) => {
+      //   const features = this.map?.getFeaturesAtPixel(e.pixel, {
+      //     layerFilter: (layer) => layer == this._layer,
+      //   });
+      //
+      //   if (features?.length) {
+      //     console.log('Features found', features.length);
+      //     this._draw?.setActive(false);
+      //   } else {
+      //     this._draw?.setActive(true);
+      //   }
+      // });
     }
-
     return this;
   }
 
@@ -209,9 +228,12 @@ export class MapDraw extends Queues {
     return this;
   }
 
-  remove(feature?: Feature) {
-    this._setSelectedFeature();
-
+  remove(feature?: Feature, deselect?: boolean) {
+    if (deselect) {
+      // Deselect a feature only if remove is triggered by remove button click.
+      // Otherwise, it can remain selected to preserve buffer size.
+      this._setSelectedFeature();
+    }
     if (!feature) {
       this._source.clear();
       this._triggerCallbacks('remove');
@@ -409,12 +431,19 @@ export class MapDraw extends Queues {
     });
 
     this._draw?.on('drawend', (event) => {
+      console.log('drawend');
       const { feature } = event;
       if (!feature) return;
 
       if (this._enabledBufferSize) {
-        const bufferSize =
-          this.getProperties(feature, 'bufferSize') || this._defaultBufferSizeValue;
+        const features = this._select.getFeatures().getArray();
+        const previousFeature = features.find((f) => f.getProperties()?.['bufferSize']);
+        const previousBuffer = previousFeature
+          ? this.getProperties(previousFeature, 'bufferSize')
+          : undefined;
+        const currentBuffer = feature ? this.getProperties(feature, 'bufferSize') : undefined;
+        const bufferSize = previousBuffer || currentBuffer || this._defaultBufferSizeValue;
+        console.log('bufferSize', previousBuffer, currentBuffer, bufferSize);
         this.setProperties(feature, { bufferSize });
       }
 

From 9cbd47521cacad0b688ecea41339ba78d2b63f20 Mon Sep 17 00:00:00 2001
From: Dovile <dovile.maminskaite@am.lt>
Date: Mon, 10 Jun 2024 11:36:56 +0300
Subject: [PATCH 2/5] buffer size fix.

---
 src/routes/edit.vue   |  6 +++---
 src/utils/map/draw.ts | 21 ++++-----------------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/src/routes/edit.vue b/src/routes/edit.vue
index ba7f23a..fe79273 100644
--- a/src/routes/edit.vue
+++ b/src/routes/edit.vue
@@ -230,7 +230,6 @@ mapDraw.value
     }
   })
   .on('select', ({ featureObj, feature }: any) => {
-    // console.log('select !!!', featureObj, feature);
     selectedFeature.value = {
       ...feature,
       feature: featureObj,
@@ -252,8 +251,9 @@ events.on('geom', (data: any) => {
       console.error(err);
     }
   }
-
-  mapLayers.zoomToFeatureCollection(geom);
+  if (query.autoZoom) {
+    mapLayers.zoomToFeatureCollection(geom);
+  }
   mapDraw.value.setFeatures(geom);
   if (!isPreview) mapDraw.value.edit();
 });
diff --git a/src/utils/map/draw.ts b/src/utils/map/draw.ts
index ec52480..b75c7ba 100644
--- a/src/utils/map/draw.ts
+++ b/src/utils/map/draw.ts
@@ -79,18 +79,6 @@ export class MapDraw extends Queues {
 
     if (this.map) {
       this._applyStyles({ projection: this.map.getView().getProjection().getCode() });
-      // this.map.on('pointermove', (e) => {
-      //   const features = this.map?.getFeaturesAtPixel(e.pixel, {
-      //     layerFilter: (layer) => layer == this._layer,
-      //   });
-      //
-      //   if (features?.length) {
-      //     console.log('Features found', features.length);
-      //     this._draw?.setActive(false);
-      //   } else {
-      //     this._draw?.setActive(true);
-      //   }
-      // });
     }
     return this;
   }
@@ -124,7 +112,8 @@ export class MapDraw extends Queues {
       }
 
       if (!options?.append) {
-        this.remove();
+        //Remove and deselect previous features.
+        this.remove(undefined, true);
       }
 
       if (this._enabledBufferSize) {
@@ -136,6 +125,8 @@ export class MapDraw extends Queues {
       }
 
       this._source.addFeatures(data);
+      // Preselect feature
+      this._setSelectedFeature(data[0]);
       this._triggerCallbacks('change');
     } catch (err) {
       console.error('Cannot read features');
@@ -230,8 +221,6 @@ export class MapDraw extends Queues {
 
   remove(feature?: Feature, deselect?: boolean) {
     if (deselect) {
-      // Deselect a feature only if remove is triggered by remove button click.
-      // Otherwise, it can remain selected to preserve buffer size.
       this._setSelectedFeature();
     }
     if (!feature) {
@@ -431,7 +420,6 @@ export class MapDraw extends Queues {
     });
 
     this._draw?.on('drawend', (event) => {
-      console.log('drawend');
       const { feature } = event;
       if (!feature) return;
 
@@ -443,7 +431,6 @@ export class MapDraw extends Queues {
           : undefined;
         const currentBuffer = feature ? this.getProperties(feature, 'bufferSize') : undefined;
         const bufferSize = previousBuffer || currentBuffer || this._defaultBufferSizeValue;
-        console.log('bufferSize', previousBuffer, currentBuffer, bufferSize);
         this.setProperties(feature, { bufferSize });
       }
 

From 54b7019031457313aa998007145b0dd67a4f6cd3 Mon Sep 17 00:00:00 2001
From: Dovile <dovile.maminskaite@am.lt>
Date: Mon, 10 Jun 2024 11:45:53 +0300
Subject: [PATCH 3/5] select feature without buffer

---
 src/utils/map/draw.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/utils/map/draw.ts b/src/utils/map/draw.ts
index b75c7ba..e22513c 100644
--- a/src/utils/map/draw.ts
+++ b/src/utils/map/draw.ts
@@ -63,8 +63,9 @@ export class MapDraw extends Queues {
         (feature) => !!feature.getProperties()?.['bufferSize'],
       );
       if (featureWithBuffer) {
-        console.log('Features selected: ', featureWithBuffer?.getProperties()?.['bufferSize']);
         this._setSelectedFeature(featureWithBuffer);
+      } else {
+        this._setSelectedFeature(event.selected[0]);
       }
     });
 

From 3b341044fea69fc0a3da5543e58160431055460f Mon Sep 17 00:00:00 2001
From: Dovile <dovile.maminskaite@am.lt>
Date: Mon, 10 Jun 2024 11:50:03 +0300
Subject: [PATCH 4/5] useless condition

---
 src/utils/map/draw.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/utils/map/draw.ts b/src/utils/map/draw.ts
index e22513c..f47c20f 100644
--- a/src/utils/map/draw.ts
+++ b/src/utils/map/draw.ts
@@ -427,10 +427,8 @@ export class MapDraw extends Queues {
       if (this._enabledBufferSize) {
         const features = this._select.getFeatures().getArray();
         const previousFeature = features.find((f) => f.getProperties()?.['bufferSize']);
-        const previousBuffer = previousFeature
-          ? this.getProperties(previousFeature, 'bufferSize')
-          : undefined;
-        const currentBuffer = feature ? this.getProperties(feature, 'bufferSize') : undefined;
+        const previousBuffer = previousFeature && this.getProperties(previousFeature, 'bufferSize');
+        const currentBuffer = feature && this.getProperties(feature, 'bufferSize');
         const bufferSize = previousBuffer || currentBuffer || this._defaultBufferSizeValue;
         this.setProperties(feature, { bufferSize });
       }

From 65da104c39e6cf804eea2410b86cee2090c35c49 Mon Sep 17 00:00:00 2001
From: Dovile <dovile.maminskaite@am.lt>
Date: Mon, 10 Jun 2024 20:54:38 +0300
Subject: [PATCH 5/5] minor fix

---
 src/utils/map/draw.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/map/draw.ts b/src/utils/map/draw.ts
index f47c20f..d92ee7a 100644
--- a/src/utils/map/draw.ts
+++ b/src/utils/map/draw.ts
@@ -428,7 +428,7 @@ export class MapDraw extends Queues {
         const features = this._select.getFeatures().getArray();
         const previousFeature = features.find((f) => f.getProperties()?.['bufferSize']);
         const previousBuffer = previousFeature && this.getProperties(previousFeature, 'bufferSize');
-        const currentBuffer = feature && this.getProperties(feature, 'bufferSize');
+        const currentBuffer = this.getProperties(feature, 'bufferSize');
         const bufferSize = previousBuffer || currentBuffer || this._defaultBufferSizeValue;
         this.setProperties(feature, { bufferSize });
       }