Ajout des composants FullScreen et OverMapView (#236)

* Ajout des composants FullScreen et OverMapView (en position absolue)
* Modification des positions des boutons
* Ajout des Modes disable / active sur le menu des contrôles

src/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     DsfrNavigation: typeof import('@gouvminint/vue-dsfr')['DsfrNavigation']
     DsfrRadioButtonSet: typeof import('@gouvminint/vue-dsfr')['DsfrRadioButtonSet']
     DsfrSideMenu: typeof import('@gouvminint/vue-dsfr')['DsfrSideMenu']
+    FullScreen: typeof import('./components/carte/control/FullScreen.vue')['default']
     Isocurve: typeof import('./components/carte/control/Isocurve.vue')['default']
     Layer: typeof import('./components/carte/Layer/Layer.vue')['default']
     LayerManager: typeof import('./components/carte/Layer/LayerManager.vue')['default']

src/components/carte/Control.vue

@@ -51,9 +51,9 @@ const searchEngineOptions = {
 
 const overviewMapOptions = {
   className: 'ol-overviewmap ol-custom-overviewmap',
-  collapseLabel: '\u00BB',
-  label: '\u00AB',
-  collapsed: false,
+  collapseLabel: '',
+  label: '',
+  collapsed: true,
   layers : [
     new TileLayer({
       source: new OSM(),
@@ -62,18 +62,24 @@ const overviewMapOptions = {
 }
 
 const zoomOptions = {
-  position : "bottom-left",
+  position : "bottom-right",
 }
 
 const attributionsOptions = {}
 
 // FIXME exception
 const isocurveOptions = {
-  position : "top-left"
+  position : "bottom-right"
 }
 
 const reverseGeocodeOptions = {
-  position : "top-left"
+  position : "bottom-right"
+}
+
+const fullscreenOptions = {
+  className: "ol-custom-full-screen",
+  label : "",
+  labelActive : ""
 }
 
 </script>
@@ -111,6 +117,10 @@ const reverseGeocodeOptions = {
     :visibility="props.controlOptions.includes(useControls.OverviewMap.id)"
     :overview-map-options="overviewMapOptions"
   />
+  <FullScreen
+    :visibility="props.controlOptions.includes(useControls.FullScreen.id)"
+    :fullscreen-options="fullscreenOptions"
+  />
 </template>
 
 <style>
@@ -120,4 +130,7 @@ const reverseGeocodeOptions = {
   .position-container-top-right {
     border-style: unset;
   }
+  .position-container-top-right {
+    top: 90px;
+  }
 </style>

src/components/carte/control/FullScreen.vue

@@ -0,0 +1,50 @@
+<script setup lang="js">
+
+import FullScreen from 'ol/control/FullScreen'
+
+const props = defineProps({
+  visibility: Boolean,
+  fullscreenOptions: Object
+})
+
+const map = inject('map')
+const fullscreen = ref(new FullScreen(props.fullscreenOptions)) 
+
+onMounted(() => {
+  if (props.visibility) {
+    map.addControl(fullscreen.value)
+  }
+})
+
+onBeforeUpdate(() => {
+  if (props.visibility) {
+    map.addControl(fullscreen.value)
+  }
+  else {
+    map.removeControl(fullscreen.value)
+  }
+})
+
+</script>
+
+<template></template>
+
+<style>
+  #map .ol-custom-full-screen {
+    bottom: 54px;
+    left: 5px;
+  }
+
+  /* surcharge en mode dsfr */
+  .ol-custom-full-screen button {
+    height: 40px;
+    width: 40px;
+    background-color: #000091;
+    background-image: url("../../../assets/fullscreen.svg");
+    background-position: center center;
+    background-repeat: no-repeat;
+  }
+  .ol-custom-full-screen button:hover {
+    background-color: #1212ff;
+  }
+</style>

src/components/carte/control/LayerSwitcher.vue

@@ -97,6 +97,6 @@ const onChangeVisibilityLayer = (e) => {
 <style>
   div[id^="GPlayerSwitcher-"] {
     top: 85px;
-    right: 50px;
+    right: 5px;
   }
 </style>

src/components/carte/control/OverviewMap.vue

@@ -43,9 +43,20 @@ onBeforeUpdate(() => {
 
 <style>
   #map .ol-custom-overviewmap {
-    bottom: 30px;
-    left: auto;
-    right: 50px;
-    top: auto;
+    bottom: 10px;
+    left: 5px;
+  }
+
+  /* surcharge en mode dsfr */
+  .ol-custom-overviewmap button {
+    height: 40px;
+    width: 40px;
+    background-color: #000091;
+    background-image: url("../../../assets/map.svg");
+    background-position: center center;
+    background-repeat: no-repeat;
+  }
+  .ol-custom-overviewmap button:hover {
+    background-color: #1212ff;
   }
 </style>

src/components/menu/MenuControl.vue

@@ -23,63 +23,70 @@ const options = [
     id: 'searchEngine',
     name: useControls.SearchEngine.id,
     hint: 'Barre de recherche sur la carte',
-    disabled: !useControls.SearchEngine.active
+    disabled: useControls.SearchEngine.disable
   },
   {
     label: 'Mini carte',
     id: 'overview',
     name: useControls.OverviewMap.id,
     hint: 'Petite carte pour se repérer',
-    disabled: !useControls.OverviewMap.active
+    disabled: useControls.OverviewMap.disable
   },
   {
     label: 'Scale Line',
     id: 'route',
     name: useControls.ScaleLine.id,
     hint: 'Echelle',
-    disabled: !useControls.ScaleLine.active
+    disabled: useControls.ScaleLine.disable
   },
   {
     label: 'Gestionnaire de couches',
     id: 'layerSwitcher',
     name: useControls.LayerSwitcher.id,
     hint: 'Gestionnaire de couches',
-    disabled: !useControls.LayerSwitcher.active
+    disabled: useControls.LayerSwitcher.disable
   },
   {
     label: 'Geocodage inverse',
     id: 'reverseGeocode',
     name: useControls.ReverseGeocode.id,
     hint: 'Geocodage inverse',
-    disabled: !useControls.ReverseGeocode.active
+    disabled: useControls.ReverseGeocode.disable
   },
   {
     label: 'Calcul d\'isochrone',
     id: 'isocurve',
     name: useControls.Isocurve.id,
     hint: 'Calcul d\'isochrone',
-    disabled: !useControls.Isocurve.active
+    disabled: useControls.Isocurve.disable
   },
   {
     label: 'Zoom',
     id: 'zoom',
     name: useControls.Zoom.id,
     hint: 'Zoom',
-    disabled: !useControls.Zoom.active
+    disabled: useControls.Zoom.disable
   },
   {
     label: 'Attributions',
     id: 'attributions',
     name: useControls.Attributions.id,
     hint: 'Attributions',
-    disabled: !useControls.Attributions.active
+    disabled: useControls.Attributions.disable
   },
   {
     label: 'Rotation de la carte',
     id: 'rotate',
     name: useControls.Rotate.id,
     hint: 'Rotation de la carte',
-    disabled: !useControls.Rotate.active
+    disabled: useControls.Rotate.disable
+  },
+  {
+    label: 'Plein écran',
+    id: 'fullscreen',
+    name: useControls.FullScreen.id,
+    hint: 'Plein écran',
+    disabled: useControls.FullScreen.disable
   },
 ].filter(opt => Object.keys(useControls).includes(opt.name))
 

src/components/menu/MenuLateralWrapper.vue

@@ -68,7 +68,7 @@ defineExpose({
 <style scoped lang="scss">
 .left {
   .menu-logo-list {
-left: 40px;
+left: 7px;
   }
   &.is_expanded {
   .menu-logo-list {
@@ -78,7 +78,7 @@ left: 40px;
 }
 .right {
   .menu-logo-list {
-  right: 77px;
+  right: 47px;
   }
   &.is_expanded {
     .menu-logo-list {
@@ -124,7 +124,7 @@ left: 40px;
   flex-direction: column;
   display: flex;
   row-gap: 20px;
-  margin-top: 150px;
+  margin-top: 10px;
   width: 0;
   position: absolute;
 }

src/composables/controls.ts

@@ -1,38 +1,54 @@
+import type { disable } from "ol/rotationconstraint";
+
 export const useControls = {
   OverviewMap: {
     id: 'OverviewMap',
-    active: true
+    active: true,
+    disable: false
   },
   SearchEngine: {
     id: 'SearchEngine',
-    active: true
+    active: true,
+    disable: false,
   },
   ScaleLine: {
     id: 'ScaleLine',
-    active: true
+    active: true,
+    disable: false
   },
   LayerSwitcher: {
     id: 'LayerSwitcher',
-    active: true
+    active: true,
+    disable: false
   },
   Isocurve: {
     id: 'Isocurve',
-    active: false
+    active: false,
+    disable: true
   },
   ReverseGeocode: {
     id: 'ReverseGeocode',
-    active: false
+    active: false,
+    disable: false
   },
   Zoom: {
     id: 'Zoom',
-    active: true
+    active: true,
+    disable: false
   },
   Attributions: {
     id: 'Attributions',
-    active: false
+    active: false,
+    disable: true
   },
   Rotate: {
     id: 'Rotate',
-    active: false
+    active: false,
+    disable: true
+  },
+  FullScreen: {
+    id: 'FullScreen',
+    active: true,
+    disable: false
   },
 }