From 37a2c8ef37b169f2c4322384c87b91f95a708216 Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Mon, 22 Jul 2024 15:42:56 +0200 Subject: [PATCH 01/12] fix: remove style on canvas --- src/bundle/lib.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/bundle/lib.css b/src/bundle/lib.css index b9b786ef..4e9a4aab 100644 --- a/src/bundle/lib.css +++ b/src/bundle/lib.css @@ -353,7 +353,6 @@ img, svg, video, - canvas, audio, iframe, embed, From 6822450ce733476ff2b8172d51c59e5dfc5836ae Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Tue, 23 Jul 2024 10:23:27 +0200 Subject: [PATCH 02/12] fix: embedded mode --- src/App.vue | 38 ++++--------------- src/bundle/lib.ts | 4 +- src/components/map/map-container.vue | 15 +++++++- src/composables/map/map.composable.ts | 25 ++++++++++++ src/composables/map/ol.composable.ts | 2 +- ...vice.ts => state-persistor-app.service.ts} | 31 +++++++++++---- .../state-persistor-bgstyle.service.ts | 10 ++--- .../state-persistor/state-persistor.model.ts | 1 + src/stores/app.store.ts | 2 + 9 files changed, 82 insertions(+), 46 deletions(-) rename src/services/state-persistor/{state-persistor-layersopen.service.ts => state-persistor-app.service.ts} (60%) diff --git a/src/App.vue b/src/App.vue index b6704ae1..e9808063 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,8 +1,6 @@ +@/services/state-persistor/state-persistor-app.service \ No newline at end of file diff --git a/src/bundle/lib.ts b/src/bundle/lib.ts index 89eabf03..69cbf968 100644 --- a/src/bundle/lib.ts +++ b/src/bundle/lib.ts @@ -36,7 +36,7 @@ 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' import { statePersistorThemeService } from '@/services/state-persistor/state-persistor-theme.service' -import { statePersistorLayersOpenService } from '@/services/state-persistor/state-persistor-layersopen.service' +import { statePersistorAppService } from '@/services/state-persistor/state-persistor-app.service' import { statePersistorStyleService } from '@/services/state-persistor/state-persistor-bgstyle.service' import { statePersistorMyMapService } from '@/services/state-persistor/state-persistor-mymap.service' import { proxyUrlHelper } from '@/services/proxyurl/proxyurl.helper' @@ -137,7 +137,7 @@ export { statePersistorBgLayerService, statePersistorLayersService, statePersistorThemeService, - statePersistorLayersOpenService, + statePersistorAppService, statePersistorStyleService, statePersistorMyMapService, themeSelectorService, diff --git a/src/components/map/map-container.vue b/src/components/map/map-container.vue index 2fbb5d2b..b9993fb8 100644 --- a/src/components/map/map-container.vue +++ b/src/components/map/map-container.vue @@ -1,6 +1,8 @@ diff --git a/src/composables/map/map.composable.ts b/src/composables/map/map.composable.ts index 44d96f46..e35d79cf 100644 --- a/src/composables/map/map.composable.ts +++ b/src/composables/map/map.composable.ts @@ -2,6 +2,9 @@ import { ShallowRef, shallowRef } from 'vue' import OlMap from 'ol/Map' import OlView from 'ol/View' +// for the time moment legacy mapbox is used instead of maplibre, but the naming "maplibre" is kept +import MapLibreLayer from '@/lib/ol-mapbox-layer' +import traverseLayer from '@/lib/tools.js' import type { Layer, LayerComparison, @@ -160,6 +163,27 @@ export default function useMap() { return null } + function resize() { + // Update all canvas size when layer panel is opened/closed + const map = useMap().getOlMap() + + // Update ol layers' canvas size + map.updateSize() + + // And trigger update MapLibre layers' canvas size + // the utility function traverseLayer is used as a workaround until OL is updated to 6.15 + // then the function getAllLayers below (added in OL v.6.10.0) can be used + // map.getAllLayers().forEach(layer => { + traverseLayer(map.getLayerGroup(), [], (layer: any) => { + if (layer instanceof MapLibreLayer) { + ;(layer as MapLibreLayer).getMapLibreMap().resize() + } + return true + }) + + // TODO: Add slide effect and do this update after slide animation ends + } + return { olMap, getOlMap, @@ -172,5 +196,6 @@ export default function useMap() { getRemovedLayers, getMutatedLayers, getMutationType, + resize } } diff --git a/src/composables/map/ol.composable.ts b/src/composables/map/ol.composable.ts index 54437fa9..381ad189 100644 --- a/src/composables/map/ol.composable.ts +++ b/src/composables/map/ol.composable.ts @@ -142,7 +142,7 @@ export default function useOpenLayers() { } } if (oldBgLayerId && oldBgLayerId !== bgLayer?.id) { - statePersistorStyleService.restoreStyle(true) + statePersistorStyleService.restore(true) } } diff --git a/src/services/state-persistor/state-persistor-layersopen.service.ts b/src/services/state-persistor/state-persistor-app.service.ts similarity index 60% rename from src/services/state-persistor/state-persistor-layersopen.service.ts rename to src/services/state-persistor/state-persistor-app.service.ts index e9ffbe3f..da48bbc3 100644 --- a/src/services/state-persistor/state-persistor-layersopen.service.ts +++ b/src/services/state-persistor/state-persistor-app.service.ts @@ -2,21 +2,25 @@ import { watch, watchEffect, WatchStopHandle } from 'vue' import { storeToRefs } from 'pinia' import { useAppStore } from '@/stores/app.store' -import { SP_KEY_LAYERS_OPEN } from './state-persistor.model' +import { SP_KEY_EMBEDDED, SP_KEY_LAYERS_OPEN } from './state-persistor.model' import { storageHelper } from './storage/storage.helper' -class StatePersistorLayersOpenService { - bootstrapLayersOpen() { - this.restoreLayersOpen() +class StatePersistorAppService { + bootstrap() { + this.restore() let stop: WatchStopHandle // eslint-disable-next-line prefer-const stop = watchEffect(() => { - this.persistLayersOpen() + this.persist() stop && stop() // test if exists, for HMR support }) } + persist() { + this.persistLayersOpen() + } + persistLayersOpen() { const appStore = useAppStore() const { layersOpen } = storeToRefs(appStore) @@ -32,6 +36,19 @@ class StatePersistorLayersOpenService { ) } + restore() { + this.restoreLayersOpen() + this.restoreEmbeddedMode() // NB. don't persist embbeded mode, only do restore + } + + restoreEmbeddedMode() { + const embbeded = ( + (storageHelper.getValue(SP_KEY_EMBEDDED) !== 'false') + ) + const { embedded } = storeToRefs(useAppStore()) + embedded.value = embbeded + } + restoreLayersOpen() { const layersOpen = ( (storageHelper.getValue(SP_KEY_LAYERS_OPEN) !== 'false') @@ -41,5 +58,5 @@ class StatePersistorLayersOpenService { } } -export const statePersistorLayersOpenService = - new StatePersistorLayersOpenService() +export const statePersistorAppService = + new StatePersistorAppService() diff --git a/src/services/state-persistor/state-persistor-bgstyle.service.ts b/src/services/state-persistor/state-persistor-bgstyle.service.ts index ab9b15fe..2148e157 100644 --- a/src/services/state-persistor/state-persistor-bgstyle.service.ts +++ b/src/services/state-persistor/state-persistor-bgstyle.service.ts @@ -10,22 +10,22 @@ import { StyleItem } from '@/composables/mvt-styles/mvt-styles.model' class StatePersistorStyleService { styleWatcher: WatchStopHandle - bootstrapStyle() { + bootstrap() { const styleStore = useStyleStore() let stop: WatchStopHandle let activatePersistance: boolean = false // eslint-disable-next-line prefer-const stop = watchEffect(() => { if (styleStore.bgVectorSources) { - this.restoreStyle(false) - if (activatePersistance) this.persistStyle() + this.restore(false) + if (activatePersistance) this.persist() activatePersistance = true stop && stop() // test if exists, for HMR support } }) } - persistStyle() { + persist() { const styleStore = useStyleStore() const { bgStyle } = storeToRefs(styleStore) @@ -54,7 +54,7 @@ class StatePersistorStyleService { } } - restoreStyle(localStorageOnly: boolean) { + restore(localStorageOnly: boolean) { const styleStore = useStyleStore() styleStore.setStyle(null) const mapStore = useMapStore() diff --git a/src/services/state-persistor/state-persistor.model.ts b/src/services/state-persistor/state-persistor.model.ts index 5fa0fa62..13d59763 100644 --- a/src/services/state-persistor/state-persistor.model.ts +++ b/src/services/state-persistor/state-persistor.model.ts @@ -5,6 +5,7 @@ export const SP_KEY_ADDRESS = 'address' export const SP_KEY_APPLOGIN = 'applogin' // TODO: export const SP_KEY_LOCALFORAGE = 'localforage' // TODO: export const SP_KEY_DEBUG = 'debug' // TODO: +export const SP_KEY_EMBEDDED = 'embedded' // Embedded Map mode (no header, no toolbar) export const SP_KEY_EMBEDDED_SERVER = 'embeddedserver' export const SP_KEY_EMBEDDED_SERVER_PROTOCOL = 'embeddedserverprotocol' export const SP_KEY_FID = 'fid' // TODO: diff --git a/src/stores/app.store.ts b/src/stores/app.store.ts index 9b7118d0..9500833e 100644 --- a/src/stores/app.store.ts +++ b/src/stores/app.store.ts @@ -11,6 +11,7 @@ export const DEFAULT_MYMAPS_OPENED = false export const useAppStore = defineStore( 'app', () => { + const embedded = ref(false) const lang = ref(DEFAULT_LANG) const layersOpen = ref(DEFAULT_LAYER_PANEL_OPENED) const myLayersTabOpen = ref(DEFAULT_MY_LAYERS_TAB_OPENED) @@ -72,6 +73,7 @@ export const useAppStore = defineStore( } return { + embedded, lang, layersOpen, myLayersTabOpen, From 184a28f19a1c1c85e3b1cf08c466af4f9fe4ff2e Mon Sep 17 00:00:00 2001 From: AlitaBernachot Date: Mon, 29 Jul 2024 15:39:05 +0200 Subject: [PATCH 03/12] fix: add cond for ms timer if mode lib --- .env | 5 ++++- .env.development | 22 +++++++++++++++++++ .env.e2e | 22 +++++++++++++++++++ .env.staging | 10 +++++++++ README.md | 9 ++++++++ src/App.vue | 1 - src/components/map/map-container.vue | 12 +++++++--- src/composables/map/map.composable.ts | 5 +++-- .../state-persistor-app.service.ts | 3 +-- .../state-persistor-map.service.ts | 2 +- 10 files changed, 81 insertions(+), 10 deletions(-) create mode 100644 .env.development create mode 100644 .env.e2e diff --git a/.env b/.env index 49446b99..87554036 100644 --- a/.env +++ b/.env @@ -15,5 +15,8 @@ VITE_MVTSTYLES_PATH_DELETE="/deletepermalinkstyle" VITE_OFFLINE_GUTTER=96 # View -VITE_DEFAULT_VIEW_ZOOM=9 +VITE_DEFAULT_VIEW_ZOOM=8 VITE_DEFAULT_MAX_EXTENT=[2.6, 47.7, 8.6, 51] + +# Mode lib in v3 +VITE_MODE_LIB=true diff --git a/.env.development b/.env.development new file mode 100644 index 00000000..704521a1 --- /dev/null +++ b/.env.development @@ -0,0 +1,22 @@ +# Proxy urls +VITE_USE_PROXYURL=true +VITE_PROXYURL_WMS="https://map.geoportail.lu/ogcproxywms" +VITE_PROXYURL_REMOTE="https://map.geoportail.lu/httpsproxy" + +# Urls for vectortiles +VITE_VECTORTILES_URL="https://vectortiles.geoportail.lu" + +# Paths for MVT styles +VITE_MVTSTYLES_PATH_GET="/getpermalinkstyle" +VITE_MVTSTYLES_PATH_UPLOAD="/uploadpermalinkstyle" +VITE_MVTSTYLES_PATH_DELETE="/deletepermalinkstyle" + +# Offline +VITE_OFFLINE_GUTTER=96 + +# View +VITE_DEFAULT_VIEW_ZOOM=8 +VITE_DEFAULT_MAX_EXTENT=[2.6, 47.7, 8.6, 51] + +# Mode lib in v3 +VITE_MODE_LIB=false \ No newline at end of file diff --git a/.env.e2e b/.env.e2e new file mode 100644 index 00000000..f8e00008 --- /dev/null +++ b/.env.e2e @@ -0,0 +1,22 @@ +# Proxy urls +VITE_USE_PROXYURL=true +VITE_PROXYURL_WMS="https://map.geoportail.lu/ogcproxywms" +VITE_PROXYURL_REMOTE="https://map.geoportail.lu/httpsproxy" + +# Urls for vectortiles +VITE_VECTORTILES_URL="https://vectortiles.geoportail.lu" + +# Paths for MVT styles +VITE_MVTSTYLES_PATH_GET="/getpermalinkstyle" +VITE_MVTSTYLES_PATH_UPLOAD="/uploadpermalinkstyle" +VITE_MVTSTYLES_PATH_DELETE="/deletepermalinkstyle" + +# Offline +VITE_OFFLINE_GUTTER=96 + +# View +VITE_DEFAULT_VIEW_ZOOM=8 +VITE_DEFAULT_MAX_EXTENT=[2.6, 47.7, 8.6, 51] + +# Mode lib in v3 +VITE_MODE_LIB=false diff --git a/.env.staging b/.env.staging index af95510b..34b459d5 100644 --- a/.env.staging +++ b/.env.staging @@ -10,3 +10,13 @@ VITE_VECTORTILES_URL="https://vectortiles-staging.geoportail.lu" VITE_MVTSTYLES_PATH_GET="https://migration.geoportail.lu/getvtstyle" VITE_MVTSTYLES_PATH_UPLOAD="https://migration.geoportail.lu/uploadvtstyle" VITE_MVTSTYLES_PATH_DELETE="https://migration.geoportail.lu/deletevtstyle" + +# Offline +VITE_OFFLINE_GUTTER=96 + +# View +VITE_DEFAULT_VIEW_ZOOM=8 +VITE_DEFAULT_MAX_EXTENT=[2.6, 47.7, 8.6, 51] + +# Mode lib in v3 +VITE_MODE_LIB=true \ No newline at end of file diff --git a/README.md b/README.md index 9c15d8a7..883a16f1 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,15 @@ $ npm run start A `.prettierignore` file is used by prettier and lint to exclude some files (such as the built bundle, the lib files, or the fixtures, ...). +## ⚙️ .env files and modes + +- `.env` used for production mode, for now, production mode is available only for building the lib (to be included in v3, on production or on migration platform) +- `.env.development` used for development mode, v4 pure standalone app +- `.env.e2e` use for e2e mode, v4 pure standalone app but for e2e testing +- `.env.staging` used for development, staging mode, used while the lib is build in dev mode (include v4 in v3 as a lib and test locally on `http://localhost:8080/dev/main.html`) + +⚠️ It's important to note that `NODE_ENV` (`process.env.NODE_ENV`) and modes are two different concepts. See: https://vitejs.dev/guide/env-and-mode + ## 💉 Test ### Unit testing diff --git a/src/App.vue b/src/App.vue index e9808063..d814ea81 100644 --- a/src/App.vue +++ b/src/App.vue @@ -94,4 +94,3 @@ onUnmounted(() => window.removeEventListener('resize', map.resize)) -@/services/state-persistor/state-persistor-app.service \ No newline at end of file diff --git a/src/components/map/map-container.vue b/src/components/map/map-container.vue index b9993fb8..6ece0d1d 100644 --- a/src/components/map/map-container.vue +++ b/src/components/map/map-container.vue @@ -1,5 +1,5 @@