Merge pull request #407 from IGNF/feature/menu-tierce

Feature/menu tierce

package.json

@@ -42,9 +42,8 @@
     "@gouvminint/vue-dsfr": "^5.14.2",
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",
-    "html2canvas": "^1.4.1",
-    "jspdf": "^2.5.2",
     "geopf-extensions-openlayers": "./geopf-extensions-openlayers-1.0.0-beta.1-296.tgz",
+    "jspdf": "^2.5.2",
     "ol": "8.2.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

src/components.d.ts

@@ -57,13 +57,15 @@ declare module 'vue' {
     MenuControl: typeof import('./components/menu/MenuControl.vue')['default']
     MenuLateralNavButton: typeof import('./components/menu/MenuLateralNavButton.vue')['default']
     MenuLateralWrapper: typeof import('./components/menu/MenuLateralWrapper.vue')['default']
+    MenuTierce: typeof import('./components/menu/MenuTierce.vue')['default']
     ModalConsent: typeof import('./components/modals/ModalConsent.vue')['default']
     ModalInformation: typeof import('./components/modals/ModalInformation.vue')['default']
     ModalTheme: typeof import('./components/modals/ModalTheme.vue')['default']
     MousePosition: typeof import('./components/carte/control/MousePosition.vue')['default']
     OverviewMap: typeof import('./components/carte/control/OverviewMap.vue')['default']
     Patience: typeof import('./components/utils/Patience.vue')['default']
     Print: typeof import('./components/carte/control/Print.vue')['default']
+    PrintModal: typeof import('./components/carte/control/PrintModal.vue')['default']
     ReverseGeocode: typeof import('./components/carte/control/ReverseGeocode.vue')['default']
     RightMenuTool: typeof import('./components/menu/RightMenuTool.vue')['default']
     Route: typeof import('./components/carte/control/Route.vue')['default']
@@ -72,6 +74,7 @@ declare module 'vue' {
     ScaleLine: typeof import('./components/carte/control/ScaleLine.vue')['default']
     SearchEngine: typeof import('./components/carte/control/SearchEngine.vue')['default']
     Share: typeof import('./components/carte/control/Share.vue')['default']
+    ShareModal: typeof import('./components/carte/control/ShareModal.vue')['default']
     StoreData: typeof import('./components/StoreData.vue')['default']
     Territories: typeof import('./components/carte/control/Territories.vue')['default']
     VIcon: typeof import('oh-vue-icons')['OhVueIcon']

src/components/CartoAndTools.vue

@@ -2,16 +2,29 @@
 import Carto from '@/components/carte/Carto.vue'
 import LeftMenuTool from '@/components/menu/LeftMenuTool.vue'
 import RightMenuTool from '@/components/menu/RightMenuTool.vue'
-import MenuCatalogue from '@/components/menu/catalogue/MenuCatalogue.vue'
-import MenuControl from '@/components/menu/MenuControl.vue';
+import ModalTheme from '@/components/modals/ModalTheme.vue'
+import ShareModal from '@/components/carte/control/ShareModal.vue'
+import PrintModal from "@/components/carte/control/PrintModal.vue";
 
-import { useControls } from '@/composables/controls'
 import { useDataStore } from "@/stores/dataStore"
 import { useMapStore } from "@/stores/mapStore"
 
 
 const mapStore = useMapStore();
 const dataStore = useDataStore();
+ 
+const refModalTheme = ref(null)
+const modalShareRef = ref(null)
+const refPrintModal = ref(null)
+const onModalShareOpen = () => {
+  modalShareRef.value.onModalShareOpen()
+}
+const onModalThemeOpen = () => {
+  refModalTheme.value.openModalTheme()
+}
+const onModalPrintOpen = () => {
+  refPrintModal.value.onModalPrintOpen()
+}
 
 // INFO
 // Les listes sont initialisées via le mapStore, et 
@@ -45,44 +58,40 @@ const selectedControls = computed(() => {
   return controls;
 });
 
-provide("selectedLayers", selectedLayers);
+const cartoRef = ref(null)
 
+provide("selectedLayers", selectedLayers);
 </script>
 
 <template>
   <div id="map-and-tools-container">
 
     <!-- Le catalogue est dans le menu gauche -->
-    <LeftMenuTool>
-      <!-- 
-        On transmet la liste complète des couches du catalogue
-        ainsi que la liste des couches sélectionnées
-      -->
-      <MenuCatalogue
-        :selected-layers="selectedLayers"
-        :layers="dataStore.getLayers()"/>
-    </LeftMenuTool>
+    <LeftMenuTool
+      @on-modal-share-open="onModalShareOpen"
+      @on-modal-print-open="onModalPrintOpen"
+      @on-modal-theme-open="onModalThemeOpen"
+    />
 
     <!-- Module cartographique : 
      - liste des couches selectionnées
      - liste des controles selectionnés
     -->
     <Carto
+      ref="cartoRef"
       :selected-layers="selectedLayers"
       :selected-controls="selectedControls"/>
 
     <!-- Le menu des contrôles est dans le menu droite -->
-    <RightMenuTool>
-      <!-- On transmet la liste des contrôles selectionnés : 
-        >>> les controles du mapStore sont reactifs, donc dès que le 
-        >>> composant MenuControl modifie une valeur, il modifie le 
-        >>> mapStore des controles, ce qui repercute la selection sur 
-        >>> la méthode computed()
-      -->
-      <MenuControl 
-        :selected-controls="selectedControls"/>
-    </RightMenuTool>
-
+    <RightMenuTool
+      :selected-layers="selectedLayers"
+      :selected-controls="selectedControls"
+    />
+    <div class="modal-container">
+  <ModalTheme ref="refModalTheme" />
+  <PrintModal ref="refPrintModal" />
+  <ShareModal ref="modalShareRef"/>
+</div>
   </div>
 </template>
 

src/components/carte/Controls.vue

@@ -11,6 +11,8 @@
 </script>
 
 <script setup lang="js">
+import IconGeolocationSVG from "../../assets/geolocation.svg";
+
 import SearchEngine from './control/SearchEngine.vue';
 import ScaleLine from './control/ScaleLine.vue';
 import OverviewMap from './control/OverviewMap.vue';
@@ -34,10 +36,9 @@ import Print from './control/Print.vue'
 import Share from './control/Share.vue';
 
 // Icone pour le marker du widget SearcEngine
-import IconGeolocationSVG from "../../assets/geolocation.svg";
 
 import { useDataStore } from '@/stores/dataStore';
-import { useControls } from '@/composables/controls';
+import { useControls, useControlsExtensionPosition } from '@/composables/controls';
 import { useLogger } from 'vue-logger-plugin';
 
 const props = defineProps({
@@ -68,8 +69,12 @@ log.debug(props.controlOptions);
 
 // liste des options pour les contrôles;
 
-const shareOptions = {};
-const printOptions = {};
+const shareOptions = {
+  position: useControlsExtensionPosition().shareOptions
+};
+const printOptions = {
+  position: useControlsExtensionPosition().printOptions
+};
 
 const searchEngineOptions = {
   id: "1",
@@ -95,7 +100,7 @@ const searchEngineOptions = {
 const layerSwitcherOptions = {
   options: {
     id: "2",
-    position : "top-right",
+    position : useControlsExtensionPosition().layerSwitcherOptions,
     collapsed: true,
     panel: true,
     counter: true
@@ -104,7 +109,7 @@ const layerSwitcherOptions = {
 
 const legendsOptions = {
   id: "3",
-  position: "top-right",
+  position: useControlsExtensionPosition().legendsOptions,
   panel: true,
   auto: true,
   draggable: false
@@ -118,7 +123,7 @@ const scaleLineOptions = {
 
 const territoriesOptions = {
   id: "5",
-  position: 'bottom-left',
+  position: useControlsExtensionPosition().territoriesOptions,
   panel : true,
   title : "Sélectionner un territoire",
   auto : false, // chargement auto des territoires par defaut
@@ -130,28 +135,27 @@ const territoriesOptions = {
 // actif par défaut
 const getFeatureInfoOptions = {
   id: "6",
-  position: 'bottom-left',
-  collapsed: false
+  position: useControlsExtensionPosition().getFeatureInfoOptions
 };
 
 const overviewMapOptions = {
   id: "7",
-  position: 'bottom-left'
+  position: useControlsExtensionPosition().overviewMapOptions
 };
 
 const fullscreenOptions = {
   id: "8",
-  position: 'bottom-right'
+  position: useControlsExtensionPosition().fullscreenOptions
 };
 
 const zoomOptions = {
+  position: useControlsExtensionPosition().zoomOptions,
   id: "9",
-  position: 'bottom-right',
 };
 
 const controlListOptions = {
+  position: useControlsExtensionPosition().controlListOptions,
   id: "10",
-  position: 'top-right',
   gutter: false,
   controlCatalogElement: document.getElementById('MenuControl'),
 }
@@ -165,49 +169,49 @@ const drawingOptions = {
 
 const reverseGeocodeOptions = {
   id: "12",
-  position: 'top-right',
+  position: useControlsExtensionPosition().reverseGeocodeOptions,
   gutter: false,
   listable: true,
 };
 
 const isocurveOptions = {
+  position: useControlsExtensionPosition().isocurveOptions,
   id: "13",
-  position: 'top-right',
   gutter: false,
   listable: true,
 };
 
 const routeOptions = {
+  position: useControlsExtensionPosition().routeOptions,
   id: "14",
-  position: 'top-right',
   gutter: false,
   listable: true,
 };
 
 const measureLengthOptions = {
   id: "15",
-  position: 'top-right',
+  position: useControlsExtensionPosition().measureLengthOptions,
   gutter: false,
   listable: true,
 };
 
 const measureAreaOptions = {
+  position: useControlsExtensionPosition().measureAreaOptions,
   id: "16",
-  position: 'top-right',
   gutter: false,
   listable: true,
 };
 
 const measureAzimuthOptions = {
-  id: "17",
-  position: 'top-right',
+  position: useControlsExtensionPosition().measureAzimuthOptions,
   gutter: false,
   listable: true,
+  id: "17",
 };
 
 const mousePositionOptions = {
+  position: useControlsExtensionPosition().mousePositionOptions,
   id: "18",
-  position: 'top-right',
   gutter: false,
   listable: true,
   // On ajoute les systemes UTM pour les territoires
@@ -351,14 +355,14 @@ const mousePositionOptions = {
 
 const elevationPathOptions = {
   id: "19",
-  position: 'top-right',
+  position: useControlsExtensionPosition().elevationPathOptions,
   gutter: false,
   listable: true,
 };
 
 const layerImportOptions = {
   id: "20",
-  position: 'top-right',
+  position: useControlsExtensionPosition().layerImportOptions,
   gutter: false,
   listable: true,
 };
@@ -369,17 +373,17 @@ const layerImportOptions = {
 >>> sinon, visibility:false
 -->
 <template>
-  <Share
+  <!-- <Share
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.Share.id)"
-    :share-options="shareOptions"
-  />
-  <Print
+    :share-options="useControlsExtensionPosition()().shareOptions"
+  /> -->
+  <!-- <Print
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.Print.id)"
     :print-options="printOptions"
     :map-id="mapId"
-  />
+  /> -->
   <LayerSwitcher
     v-if="controlOptions"
     :visibility="props.controlOptions.includes(useControls.LayerSwitcher.id)"
@@ -703,7 +707,7 @@ const layerImportOptions = {
 
   .position-container-top-right,
   .position-container-top-left {
-    top: 98px;
+    top: 99px;
   }
 }
 @media (max-width: 576px) {
@@ -737,16 +741,6 @@ const layerImportOptions = {
   .ol-scale-line {
     transform: translateX(-50px);
   }
-
-  #print-button-position {
-    display: none;
-  }
-}
-
-@media (max-height: 576px) {
-  #print-button-position {
-    display: none;
-  }
 }
 
 @media (max-width: 627px) and (min-width: 576px){

src/components/carte/Map.vue

@@ -14,6 +14,8 @@ import { CRS } from 'geopf-extensions-openlayers'
 
 import Map from 'ol/Map'
 import { useMapStore } from "@/stores/mapStore"
+import { mainMap } from "@/composables/keys"
+
 const mapStore = useMapStore()
 
 const props = defineProps({
@@ -46,6 +48,8 @@ onMounted(() => {
   if (canvas.length) {
     canvas[0].tabIndex = 0
   }
+  if (props.mapId == mainMap)
+    mapStore.setMap(map)
 })
 
 /**

src/components/carte/control/LayerImport.vue

@@ -51,4 +51,11 @@ onUpdated(() => {
   <!-- TODO ajouter l'emprise du widget pour la gestion des collisions -->
 </template>
 
-<style scoped></style>
+<style>
+button[id^=GPshowImportPicto-] {
+  display: none;
+}
+dialog[id^=GPcontrolListPanel-] button[id^=GPshowImportPicto-]{
+  display: block;
+}
+</style>