diff --git a/src/routes/edit.vue b/src/routes/edit.vue index dea83e2..8d0fba9 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)" /> @@ -82,10 +82,11 @@ import { uetkService, } from '@/utils'; import { getFeatureCollection } from 'geojsonjs'; -import _ from 'lodash'; import { computed, inject, ref } from 'vue'; import { useRoute } from 'vue-router'; import type { Buffer } from '@/types'; +import _ from 'lodash'; + const $route = useRoute(); const events: any = inject('events'); @@ -262,8 +263,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 ca93b7d..d92ee7a 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,16 @@ 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) { + this._setSelectedFeature(featureWithBuffer); + } else { + this._setSelectedFeature(event.selected[0]); + } }); this._modifySelect.on('modifyend', () => { @@ -69,10 +78,9 @@ 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() }); } - return this; } @@ -105,7 +113,8 @@ export class MapDraw extends Queues { } if (!options?.append) { - this.remove(); + //Remove and deselect previous features. + this.remove(undefined, true); } if (this._enabledBufferSize) { @@ -117,6 +126,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'); @@ -209,9 +220,10 @@ export class MapDraw extends Queues { 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 +425,11 @@ export class MapDraw extends Queues { 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'); + const currentBuffer = this.getProperties(feature, 'bufferSize'); + const bufferSize = previousBuffer || currentBuffer || this._defaultBufferSizeValue; this.setProperties(feature, { bufferSize }); }