diff --git a/src/bundle/lib.ts b/src/bundle/lib.ts index b80f7d53..d268897e 100644 --- a/src/bundle/lib.ts +++ b/src/bundle/lib.ts @@ -19,9 +19,11 @@ import FooterBar from '@/components/footer/footer-bar.vue' import LayerPanel from '@/components/layer-panel/layer-panel.vue' import SliderComparator from '@/components/slider/slider-comparator.vue' import useMap from '@/composables/map/map.composable' +import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable' import useOpenLayers from '@/composables/map/ol.composable' import { useAppStore } from '@/stores/app.store' import { useMapStore } from '@/stores/map.store' +import { useStyleStore } from '@/stores/style.store' import { useThemeStore } from '@/stores/config.store' import { statePersistorBgLayerService } from '@/services/state-persistor/state-persistor-layer-background.service' import { statePersistorLayersService } from '@/services/state-persistor/state-persistor-layers.service' @@ -95,9 +97,11 @@ export { LayerPanel, SliderComparator, useMap, + useMvtStyles, useOpenLayers, useAppStore, useMapStore, + useStyleStore, useThemeStore, statePersistorBgLayerService, statePersistorLayersService, diff --git a/src/composables/map/ol.composable.ts b/src/composables/map/ol.composable.ts index bb40ce33..7bc395c6 100644 --- a/src/composables/map/ol.composable.ts +++ b/src/composables/map/ol.composable.ts @@ -234,7 +234,10 @@ export default function useOpenLayers() { layersCache.set(id, layer) } - function getLayerFromCache(layer: Layer): BaseLayer { + function getLayerFromCache( + layer: Layer | undefined | null + ): BaseLayer | null { + if (layer === null || layer === undefined) return null const id = layer.id const cachedLayer = layersCache.get(id) @@ -268,6 +271,7 @@ export default function useOpenLayers() { .getArray() .findIndex(layer => layer.getZIndex() === DEFAULT_BGZINDEX) + const oldBgLayerId = mapLayers.getArray()[currentBgLayerPos]?.get('id') let bgBaseLayer: BaseLayer | undefined = undefined if (bgLayer) { if (isLayerCached(bgLayer)) { @@ -299,7 +303,9 @@ export default function useOpenLayers() { olMap.addLayer(bgBaseLayer) } } - statePersistorStyleService.restoreStyle(true) + if (oldBgLayerId !== bgLayer?.id) { + statePersistorStyleService.restoreStyle(true) + } } return { diff --git a/src/composables/map/ol.synchronizer.ts b/src/composables/map/ol.synchronizer.ts index 2e181dcb..f0ef8b81 100644 --- a/src/composables/map/ol.synchronizer.ts +++ b/src/composables/map/ol.synchronizer.ts @@ -88,12 +88,28 @@ export class OlSynchronizer { watch(appliedStyle, (style: StyleSpecification) => { if (styleStore.bgStyle === null && !styleStore.isExpertStyleActive) { styleService - .unregisterStyle(styleStore.styleId) - .then((styleStore.styleId = null)) + .unregisterStyle(styleStore.styleSerial, styleStore.registerUrls) + .then((styleStore.styleSerial = null)) } else { styleService - .registerStyle(style, styleStore.styleId) - .then(id => (styleStore.styleId = id)) + .registerStyle(style, styleStore.styleSerial, styleStore.registerUrls) + .then(serial => { + styleStore.styleSerial = serial + const id = mapStore?.bgLayer?.id + if (mapStore?.bgLayer && id !== undefined && serial !== undefined) { + openLayers.applyOnBgLayer(map, bgLayer => { + bgLayer.set( + 'xyz_custom', + styleService.getDefaultMapBoxStyleXYZ(serial) + ) + }) + openLayers.setBgLayer( + map, + mapStore?.bgLayer, + styleStore.bgVectorSources + ) + } + }) } openLayers.applyOnBgLayer(map, bgLayer => styleService.applyConsolidatedStyle(bgLayer, style) diff --git a/src/composables/mvt-styles/mvt-styles.composable.ts b/src/composables/mvt-styles/mvt-styles.composable.ts index 614835d4..a7c5c27d 100644 --- a/src/composables/mvt-styles/mvt-styles.composable.ts +++ b/src/composables/mvt-styles/mvt-styles.composable.ts @@ -4,9 +4,11 @@ import { stylePropertyTypeList, StyleCapabilities, BgLayerDef, + VectorSourceDict, VectorStyleDict, StyleSpecification, } from '@/composables/mvt-styles/mvt-styles.model' +import { useStyleStore } from '@/stores/style.store' import type { Layer } from '@/stores/map.store.model' import { bgConfigFixture } from '@/__fixtures__/background.config.fixture' import BaseLayer from 'ol/layer/Base' @@ -32,6 +34,26 @@ export default function useMvtStyles() { return isValidUUIDv4Regex.test(serial) } + const styleStore = useStyleStore() + function setCustomStyleSerial( + bgLayer: Layer | undefined | null, + serial: string + ) { + if (bgLayer === null || bgLayer === undefined) return + const newVectorSources: VectorSourceDict = new Map() + styleStore.bgVectorSources.forEach((vectorSource, key) => { + if (key === bgLayer.id) { + const newVectorSource = Object.assign({}, vectorSource, { + xyz_custom: serial, + }) + newVectorSources.set(key, newVectorSource) + } else { + newVectorSources.set(key, vectorSource) + } + }) + styleStore.setBgVectorSources(newVectorSources) + } + function setConfigForLayer( label: string, keyword: string, @@ -199,21 +221,24 @@ export default function useMvtStyles() { return baseStyle } - const getvtstyleUrl_ = '/getvtstyle' - const uploadvtstyleUrl_ = '/uploadvtstyle' - const deletevtstyleUrl_ = '/deletevtstyle' - - function unregisterStyle(styleId: String | null) { + function unregisterStyle( + styleId: String | null, + registerUrls: Map + ) { if (styleId === null) { return Promise.resolve() } else { - const url = `${deletevtstyleUrl_}?id=${styleId}` + const url = `${registerUrls.get('delete')}?id=${styleId}` return fetch(url).catch(() => '') } } - function registerStyle(style: StyleSpecification, oldStyleId: String | null) { - return unregisterStyle(oldStyleId).then(() => { + function registerStyle( + style: StyleSpecification, + oldStyleId: String | null, + registerUrls: Map + ) { + return unregisterStyle(oldStyleId, registerUrls).then(() => { const formData = new FormData() const data = JSON.stringify(style) const blob = new Blob([data], { type: 'application/json' }) @@ -222,7 +247,7 @@ export default function useMvtStyles() { method: 'POST', body: formData, } - return fetch(uploadvtstyleUrl_, options) + return fetch(registerUrls.get('upload') || '', options) .then(response => response.json()) .then(result => { return result.id @@ -289,16 +314,17 @@ export default function useMvtStyles() { return { getDefaultMapBoxStyleUrl, + getDefaultMapBoxStyleXYZ, setConfigForLayer, getRoadStyleFromSimpleStyle, applyDefaultStyle, applyConsolidatedStyle, getVectorId, + setCustomStyleSerial, unregisterStyle, registerStyle, checkSelection, isLayerStyleEditable, getStyleCapabilitiesFromLayer, - getvtstyleUrl_, } } diff --git a/src/stores/app.store.ts.orig b/src/stores/app.store.ts.orig new file mode 100644 index 00000000..a7c82905 --- /dev/null +++ b/src/stores/app.store.ts.orig @@ -0,0 +1,90 @@ +import { Ref, ref } from 'vue' +import { acceptHMRUpdate, defineStore } from 'pinia' + +export const DEFAULT_LANG = 'fr' +export const DEFAULT_LAYER_PANEL_OPENED = true +export const DEFAULT_MY_LAYERS_TAB_OPENED = false +export const DEFAULT_THEME_GRID_OPENED = false + +export const useAppStore = defineStore( + 'app', + () => { + const lang = ref(DEFAULT_LANG) + const layersOpen = ref(DEFAULT_LAYER_PANEL_OPENED) +<<<<<<< HEAD + const myLayersTabOpen = ref(DEFAULT_MY_LAYERS_TAB_OPENED) + const themeGridOpen = ref(DEFAULT_THEME_GRID_OPENED) +======= +>>>>>>> feat(state-persistor): add use case for default bg selection when mapId exists + const mapId: Ref = ref() + const remoteLayersOpen = ref() + const styleEditorOpen = ref(false) + + function setLang(language: string) { + lang.value = language + } + + function setLayersOpen(open: boolean) { + layersOpen.value = open + + if (!open) { + themeGridOpen.value = false + myLayersTabOpen.value = false + } + } + + function setMyLayersTabOpen(open: boolean) { + myLayersTabOpen.value = open + + if (open) { + themeGridOpen.value = false + } + } + + function setThemeGridOpen(open: boolean) { + themeGridOpen.value = open + } + + function setRemoteLayersOpen(open: boolean) { + remoteLayersOpen.value = open + } + + function setMapId(id: string | undefined) { + mapId.value = id + } + + function openStyleEditorPanel() { + styleEditorOpen.value = true + } + + function closeStyleEditorPanel() { + styleEditorOpen.value = false + } + + return { + lang, + layersOpen, +<<<<<<< HEAD + myLayersTabOpen, + themeGridOpen, +======= +>>>>>>> feat(state-persistor): add use case for default bg selection when mapId exists + mapId, + styleEditorOpen, + remoteLayersOpen, + setLang, + setLayersOpen, + setMyLayersTabOpen, + setThemeGridOpen, + setRemoteLayersOpen, + setMapId, + openStyleEditorPanel, + closeStyleEditorPanel, + } + }, + {} +) + +if (import.meta.hot) { + import.meta.hot.accept(acceptHMRUpdate(useAppStore, import.meta.hot)) +} diff --git a/src/stores/style.store.ts b/src/stores/style.store.ts index e43f3abb..56074f3b 100644 --- a/src/stores/style.store.ts +++ b/src/stores/style.store.ts @@ -22,9 +22,16 @@ export const useStyleStore = defineStore( new Map() ) const isExpertStyleActive: ShallowRef = shallowRef(false) - const styleId: ShallowRef = shallowRef(null) + const styleSerial: ShallowRef = shallowRef(null) const appliedStyle: ShallowRef = shallowRef() + const registerUrls: ShallowRef> = shallowRef( + new Map([ + ['get', '/getvtstyle'], + ['upload', '/uploadvtstyle'], + ['delete', '/deletevtstyle'], + ]) + ) const promises: Promise<{ id: LayerId; config: IMvtConfig }>[] = [] bgConfigFixture().bg_layers.forEach(bgLayer => { @@ -46,6 +53,14 @@ export const useStyleStore = defineStore( bgVectorSources.value = vectorDict }) + function setRegisterUrl(key: string, url: string) { + registerUrls.value.set(key, url) + } + + function setBgVectorSources(vectorDict: VectorSourceDict) { + bgVectorSources.value = vectorDict + } + function removeBaseStyle(id: LayerId) { const styleDict: VectorStyleDict = new Map() bgVectorBaseStyles.value.forEach((style, key) => { @@ -89,11 +104,14 @@ export const useStyleStore = defineStore( appliedStyle, removeBaseStyle, setBaseStyle, + setBgVectorSources, + setRegisterUrl, setSimpleStyle, setStyle, disableExpertStyle, enableExpertStyle, - styleId, + styleSerial, + registerUrls, } }, {}