86 sutvarkyti buferio dydzio nusimusima x2

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,13 @@ 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) => {
     selectedFeature.value = {
       ...feature,
       feature: featureObj,
@@ -248,29 +240,31 @@ 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) {
       console.error(err);
     }
   }
-
-  mapLayers.zoomToFeatureCollection(geom);
+  if (query.autoZoom) {
+    mapLayers.zoomToFeatureCollection(geom);
+  }
   mapDraw.value.setFeatures(geom);
   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);

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 { 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 @@
     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,9 @@
     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() });
     }
-
     return this;
   }
 
@@ -105,7 +112,8 @@
       }
 
       if (!options?.append) {
-        this.remove();
+        //Remove and deselect previous features.
+        this.remove(undefined, true);
       }
 
       if (this._enabledBufferSize) {
@@ -117,6 +125,8 @@
       }
 
       this._source.addFeatures(data);
+      // Preselect feature
+      this._setSelectedFeature(data[0]);
       this._triggerCallbacks('change');
     } catch (err) {
       console.error('Cannot read features');
@@ -209,9 +219,10 @@
     return this;
   }
 
-  remove(feature?: Feature) {
-    this._setSelectedFeature();
-
+  remove(feature?: Feature, deselect?: boolean) {
+    if (deselect) {
+      this._setSelectedFeature();
+    }
     if (!feature) {
       this._source.clear();
       this._triggerCallbacks('remove');
@@ -413,8 +424,13 @@
       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;
         this.setProperties(feature, { bufferSize });
       }