register correctly custom styles and set xyz URL

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,

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 {

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)

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<string, string>
+  ) {
     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<string, string>
+  ) {
+    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_,
   }
 }

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<string | undefined> = 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))
+}

src/stores/style.store.ts

@@ -22,9 +22,16 @@ export const useStyleStore = defineStore(
       new Map()
     )
     const isExpertStyleActive: ShallowRef<boolean> = shallowRef(false)
-    const styleId: ShallowRef<String | null> = shallowRef(null)
+    const styleSerial: ShallowRef<String | null> = shallowRef(null)
     const appliedStyle: ShallowRef<StyleSpecification | undefined> =
       shallowRef()
+    const registerUrls: ShallowRef<Map<string, string>> = 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,
     }
   },
   {}