From f7fde7cae267a40e2bcab693925bc269a389a734 Mon Sep 17 00:00:00 2001 From: Moritz Kirmse Date: Fri, 15 Nov 2024 13:34:06 +0100 Subject: [PATCH] some architectural bugfixes: - move setRadius from composable useEdit to service to prevent creation of multiple listeners (useEdit, must remain singleton) - fix selection, deselection of features between edit modes --- src/components/draw/feature-item.vue | 2 +- src/components/draw/feature-measurements.vue | 10 +++++-- .../draw/draw-interaction.composable.ts | 1 + .../draw/draw-select.composable.ts | 28 +++++++++++++------ src/composables/draw/edit.composable.ts | 22 ++++----------- src/services/draw/draw.helper.ts | 18 ++++++++++++ src/stores/draw.store.ts | 9 ++++-- 7 files changed, 59 insertions(+), 31 deletions(-) diff --git a/src/components/draw/feature-item.vue b/src/components/draw/feature-item.vue index 0e88a7a9..47a2859d 100644 --- a/src/components/draw/feature-item.vue +++ b/src/components/draw/feature-item.vue @@ -44,7 +44,7 @@ function onToggleEditFeature() { } function onClickDelete() { - emit('clickDelete', props.feature.id) + emit('clickDelete', getUid(props.feature)) } function onResetInfo(prevLabel: string, prevDescription: string) { diff --git a/src/components/draw/feature-measurements.vue b/src/components/draw/feature-measurements.vue index 9c8c9a0f..6de35703 100644 --- a/src/components/draw/feature-measurements.vue +++ b/src/components/draw/feature-measurements.vue @@ -18,14 +18,17 @@ import { getDebouncedElevation, getElevation, } from './feature-measurements-helper' -import useEdit from '@/composables/draw/edit.composable' +import { useDrawStore } from '@/stores/draw.store' +import { setRadius } from '@/services/draw/draw.helper' defineProps<{ isEditingFeature?: boolean }>() const { t } = useTranslation() -const mapProjection: Projection = useMap().getOlMap().getView().getProjection() +const drawStore = useDrawStore() +const map = useMap().getOlMap() +const mapProjection: Projection = map.getView().getProjection() const feature = ref(inject('feature')) const featureType = ref(feature.value?.featureType || '') @@ -87,7 +90,8 @@ watchEffect(() => { function onClickValidateRadius(radius: number) { if (feature.value) { - useEdit().setRadius(feature.value as DrawnFeature, Number(radius)) + /* useEdit().setRadius(feature.value as DrawnFeature, Number(radius))*/ + setRadius(feature.value as DrawnFeature, Number(radius), map, drawStore) } } diff --git a/src/composables/draw/draw-interaction.composable.ts b/src/composables/draw/draw-interaction.composable.ts index 5454b13d..d45eff81 100644 --- a/src/composables/draw/draw-interaction.composable.ts +++ b/src/composables/draw/draw-interaction.composable.ts @@ -20,6 +20,7 @@ export default function useDrawInteraction(options: Options) { function onDrawEnd(event: DrawEvent) { drawTooltip.remove() addFeature(event.feature) + event.stopPropagation() } return { diff --git a/src/composables/draw/draw-select.composable.ts b/src/composables/draw/draw-select.composable.ts index 250ecfe5..3ef231d2 100644 --- a/src/composables/draw/draw-select.composable.ts +++ b/src/composables/draw/draw-select.composable.ts @@ -11,14 +11,20 @@ import { useAppStore } from '@/stores/app.store' export default function useDrawSelect() { const map = useMap().getOlMap() const appStore = useAppStore() - const { activeFeatureId, editingFeatureId, drawnFeatures } = storeToRefs( - useDrawStore() - ) + const { + drawStateActive, + editStateActive, + activeFeatureId, + editingFeatureId, + drawnFeatures, + } = storeToRefs(useDrawStore()) listen(map, 'click', event => handleClick(event)) watch(activeFeatureId, (newId, oldId) => { - editingFeatureId.value = undefined + if (editingFeatureId.value !== newId) { + editingFeatureId.value = undefined + } drawnFeatures.value .filter(f => getUid(f) == oldId) .forEach(oldFeature => { @@ -37,8 +43,14 @@ export default function useDrawSelect() { const handleClick = function (event: any) { const pixel = event.pixel + if ( + drawStateActive.value !== undefined || + editStateActive.value !== undefined + ) { + return true + } activeFeatureId.value = undefined - const feature = map.forEachFeatureAtPixel( + const featureFound = map.forEachFeatureAtPixel( pixel, feature => { const featureMatch = olArray.includes(drawnFeatures.value, feature) @@ -46,7 +58,7 @@ export default function useDrawSelect() { appStore.toggleMyMapsOpen(true) activeFeatureId.value = getUid(feature) - return + return true } }, { @@ -54,8 +66,8 @@ export default function useDrawSelect() { } ) - if (feature) { - return + if (featureFound) { + return false } } } diff --git a/src/composables/draw/edit.composable.ts b/src/composables/draw/edit.composable.ts index 53343135..f10e8f56 100644 --- a/src/composables/draw/edit.composable.ts +++ b/src/composables/draw/edit.composable.ts @@ -11,8 +11,6 @@ import { useDrawStore } from '@/stores/draw.store' import useMap from '../map/map.composable' import { EditStateActive } from '@/stores/draw.store.model' -import { Circle } from 'ol/geom' -import { setCircleRadius } from '@/services/common/measurement.utils' const DEFAULT_DRAW_EDIT_ZINDEX = 1001 const FEATURE_EDIT_LAYER_TYPE = 'featureEditLayer' @@ -46,9 +44,11 @@ export default function useEdit() { watch(editingFeatureId, editingFeatureId => { if (!editingFeatureId) { setEditActiveState(undefined) - editSource.getFeatures().forEach(feature => { - ;(feature as DrawnFeature).editable = false - feature.changed() + drawnFeatures.value.forEach(feature => { + if ((feature as DrawnFeature).editable) { + ;(feature as DrawnFeature).editable = false + feature.changed() + } }) } editSource.clear() @@ -86,15 +86,5 @@ export default function useEdit() { }) } - function setRadius(feature: DrawnFeature, radius: number) { - const geometry = feature.getGeometry() - if (geometry?.getType() === 'Circle') { - setCircleRadius(geometry as Circle, radius, map) - updateDrawnFeature(feature) - } - } - - return { - setRadius, - } + return {} } diff --git a/src/services/draw/draw.helper.ts b/src/services/draw/draw.helper.ts index d28c9f5e..63ee213e 100644 --- a/src/services/draw/draw.helper.ts +++ b/src/services/draw/draw.helper.ts @@ -1,3 +1,8 @@ +import { setCircleRadius } from '@/services/common/measurement.utils' +import { DrawnFeature } from '@/services/draw/drawn-feature' +import { Circle } from 'ol/geom' +import { Map } from 'ol' + export const SYMBOLS_URL = import.meta.env.VITE_SYMBOLS_URL export const SYMBOL_ICONS_URL = import.meta.env.VITE_SYMBOL_ICONS_URL @@ -14,3 +19,16 @@ export async function getPublicSymbols(mySymbolsOnly = false) { const json = await response.json() return json.results } + +export function setRadius( + feature: DrawnFeature, + radius: number, + map: Map, + store: any +) { + const geometry = feature.getGeometry() + if (geometry?.getType() === 'Circle') { + setCircleRadius(geometry as Circle, radius, map) + store.updateDrawnFeature(feature) + } +} diff --git a/src/stores/draw.store.ts b/src/stores/draw.store.ts index 8e80e6ad..24c68e52 100644 --- a/src/stores/draw.store.ts +++ b/src/stores/draw.store.ts @@ -72,11 +72,14 @@ export const useDrawStore = defineStore('draw', () => { drawnFeatures.value = features } - function removeFeature(featureId: number) { + function removeFeature(featureId: String | undefined) { drawnFeatures.value = drawnFeatures.value.filter( - feature => feature.id !== featureId + feature => getUid(feature) !== featureId ) - editingFeatureId.value = undefined + if (activeFeatureId.value === featureId) { + activeFeatureId.value = undefined + editingFeatureId.value = undefined + } } return {