Merge pull request #125 from Geoportail-Luxembourg/GSLUX-722-fix-embe…

…dded-mode

GSLUX-722: Fix embedded mode

.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

.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

.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

.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

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

cypress/e2e/permalink/embedded-mode.cy.ts

@@ -0,0 +1,67 @@
+describe('Permalink/State persistor - embedded mode', () => {
+  describe('Initial state, embedded is disabled', () => {
+    describe('when no embedded param in permalink', () => {
+      it('opens full app with all components', () => {
+        cy.visit('/')
+        cy.get('header').should('exist')
+        cy.get('[data-cy="layerPanel"]').should('exist')
+        cy.get('[data-cy="selectedBg"]').should('exist')
+        cy.get('div.ol-full-screen').should('exist')
+        cy.get('div.map-3d-button').should('exist')
+        cy.get('div.location-button').should('exist')
+        cy.get('[data-cy="attributionControl"]').should('exist')
+        cy.get('footer').should('exist')
+      })
+    })
+
+    describe('when embedded param in permalink is false', () => {
+      it('opens full app with all components', () => {
+        cy.visit('/?embedded=false')
+        cy.get('header').should('exist')
+        cy.get('[data-cy="layerPanel"]').should('exist')
+        cy.get('[data-cy="selectedBg"]').should('exist')
+        cy.get('div.ol-full-screen').should('exist')
+        cy.get('div.map-3d-button').should('exist')
+        cy.get('div.location-button').should('exist')
+        cy.get('[data-cy="attributionControl"]').should('exist')
+        cy.get('footer').should('exist')
+      })
+    })
+  })
+
+  describe('Embedded mode is enabled', () => {
+    describe('when embedded is true in permalink', () => {
+      beforeEach(() => {
+        cy.visit('/theme/main?embedded=true')
+      })
+
+      it('shows only the map, the zoom control and the background switcher', () => {
+        cy.get('header').should('not.exist')
+        cy.get('[data-cy="layerPanel"]').should('not.exist')
+        cy.get('[data-cy="selectedBg"]').should('exist')
+        cy.get('div.ol-full-screen').should('not.exist')
+        cy.get('div.map-3d-button').should('not.exist')
+        cy.get('div.location-button').should('not.exist')
+        cy.get('[data-cy="attributionControl"]').should('not.exist')
+        cy.get('footer').should('not.exist')
+      })
+    })
+
+    describe('when embedded is in permalink', () => {
+      beforeEach(() => {
+        cy.visit('/theme/main?embedded=true')
+      })
+
+      it('shows only the map, the zoom control and the background switcher', () => {
+        cy.get('header').should('not.exist')
+        cy.get('[data-cy="layerPanel"]').should('not.exist')
+        cy.get('[data-cy="selectedBg"]').should('exist')
+        cy.get('div.ol-full-screen').should('not.exist')
+        cy.get('div.map-3d-button').should('not.exist')
+        cy.get('div.location-button').should('not.exist')
+        cy.get('[data-cy="attributionControl"]').should('not.exist')
+        cy.get('footer').should('not.exist')
+      })
+    })
+  })
+})

src/App.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, watch } from 'vue'
 import { storeToRefs } from 'pinia'
-// 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 HeaderBar from './components/header/header-bar.vue'
 import FooterBar from './components/footer/footer-bar.vue'
@@ -20,100 +18,102 @@ import SliderComparator from '@/components/slider/slider-comparator.vue'
 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 { useAppStore } from '@/stores/app.store'
 import useMap from '@/composables/map/map.composable'
 import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable'
-import traverseLayer from '@/lib/tools.js'
 
 const appStore = useAppStore()
 const mvtStyleService = useMvtStyles()
+const map = useMap()
 
 // Important, keep order!
 statePersistorMyMapService.bootstrap()
 statePersistorLayersService.bootstrap()
 statePersistorThemeService.bootstrap()
-statePersistorLayersOpenService.bootstrapLayersOpen()
-statePersistorStyleService.bootstrapStyle()
+statePersistorAppService.bootstrap()
+statePersistorStyleService.bootstrap()
 statePersistorBgLayerService.bootstrap()
 mvtStyleService.initBackgroundsConfigs()
 
-const { layersOpen, myMapsOpen, styleEditorOpen } = storeToRefs(appStore)
+const { embedded, layersOpen, myMapsOpen, styleEditorOpen } =
+  storeToRefs(appStore)
 
 watch(layersOpen, timeoutResizeMap)
 watch(styleEditorOpen, timeoutResizeMap)
 watch(myMapsOpen, timeoutResizeMap)
 
-onMounted(() => window.addEventListener('resize', resizeMap))
-onUnmounted(() => window.removeEventListener('resize', resizeMap))
-
 function timeoutResizeMap() {
-  setTimeout(() => resizeMap(), 50)
+  setTimeout(() => map.resize(), 50)
 }
 
-function resizeMap() {
-  // 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
-}
+onMounted(() => window.addEventListener('resize', map.resize))
+onUnmounted(() => window.removeEventListener('resize', map.resize))
 </script>
 
 <template>
   <div class="h-screen flex flex-col overflow-hidden">
-    <header-bar />
-
-    <main class="flex grow">
-      <!-- Layer panel -->
-      <div
-        v-if="layersOpen && !styleEditorOpen"
-        class="w-full sm:w-80 bg-secondary z-10"
-      >
-        <layer-panel />
-      </div>
-
-      <!-- Style editor -->
-      <div v-if="styleEditorOpen" class="w-full sm:w-80 bg-secondary z-10">
-        <style-panel />
-      </div>
-
-      <!-- MyMaps panel -->
-      <div v-if="myMapsOpen" class="w-full sm:w-80 bg-secondary z-10">
-        <my-maps-panel />
-      </div>
-
-      <!-- Map container and slider comparator -->
-      <div class="map-wrapper grow bg-blue-100 relative">
-        <map-container :v4_standalone="true" />
-        <slider-comparator class="absolute top-0" />
-        <remote-layers />
-        <layer-metadata />
-      </div>
-
-      <!-- Background selector -->
-      <div class="absolute right-1 top-16">
-        <background-selector />
-      </div>
-    </main>
-
-    <footer-bar class="fixed bottom-5 sm:static z-20" />
-    <alert-notifications />
+    <!-- ----------------------------- -->
+    <!-- Template for full app display -->
+    <!-- ----------------------------- -->
+    <template v-if="!embedded">
+      <header-bar />
+
+      <main class="flex grow">
+        <!-- Layer panel -->
+        <div
+          v-if="layersOpen && !styleEditorOpen"
+          class="w-full sm:w-80 bg-secondary z-10"
+        >
+          <layer-panel />
+        </div>
+
+        <!-- Style editor -->
+        <div v-if="styleEditorOpen" class="w-full sm:w-80 bg-secondary z-10">
+          <style-panel />
+        </div>
+
+        <!-- MyMaps panel -->
+        <div v-if="myMapsOpen" class="w-full sm:w-80 bg-secondary z-10">
+          <my-maps-panel />
+        </div>
+
+        <!-- Map container and slider comparator -->
+        <div class="map-wrapper grow bg-blue-100 relative">
+          <map-container :v4_standalone="true" />
+          <slider-comparator class="absolute top-0" />
+          <remote-layers />
+          <layer-metadata />
+        </div>
+
+        <!-- Background selector -->
+        <div class="absolute right-1 top-16">
+          <background-selector />
+        </div>
+      </main>
+
+      <footer-bar class="fixed bottom-5 sm:static z-20" />
+      <alert-notifications />
+    </template>
+
+    <!-- ----------------------------- -->
+    <!-- Template for embedded mode    -->
+    <!-- ----------------------------- -->
+    <template v-else>
+      <main class="flex grow">
+        <!-- Map container and slider comparator -->
+        <div class="map-wrapper grow bg-blue-100 relative">
+          <map-container :v4_standalone="true" />
+        </div>
+
+        <!-- Background selector -->
+        <div class="absolute right-1 top-2">
+          <background-selector />
+        </div>
+      </main>
+    </template>
   </div>
 </template>

src/bundle/lib.css

@@ -353,7 +353,6 @@
   img,
   svg,
   video,
-  canvas,
   audio,
   iframe,
   embed,

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,