Ajout du widget ElevationPath (#325)

src/components.d.ts

@@ -30,6 +30,7 @@ declare module 'vue' {
     DsfrSideMenu: typeof import('@gouvminint/vue-dsfr')['DsfrSideMenu']
     DsfrTabContent: typeof import('@gouvminint/vue-dsfr')['DsfrTabContent']
     DsfrTabs: typeof import('@gouvminint/vue-dsfr')['DsfrTabs']
+    ElevationPath: typeof import('./components/carte/control/ElevationPath.vue')['default']
     FullScreen: typeof import('./components/carte/control/FullScreen.vue')['default']
     GetFeatureInfo: typeof import('./components/carte/control/GetFeatureInfo.vue')['default']
     Isocurve: typeof import('./components/carte/control/Isocurve.vue')['default']

src/components/carte/Controls.vue

@@ -24,6 +24,7 @@ import MeasureLength from './control/MeasureLength.vue'
 import MeasureArea from './control/MeasureArea.vue'
 import MeasureAzimuth from './control/MeasureAzimuth.vue'
 import MousePosition from './control/MousePosition.vue'
+import ElevationPath from './control/ElevationPath.vue'
 import Territories from './control/Territories.vue';
 import GetFeatureInfo from './control/GetFeatureInfo.vue'
 import LayerImport from './control/LayerImport.vue'
@@ -152,6 +153,9 @@ const measureAreaOptions = {
 const measureAzimuthOptions = {
   position: 'top-left'
 }
+const elevationPathOptions = {
+  position: 'bottom-left'
+}
 
 const layerImportOptions = {
   position: 'bottom-left'
@@ -408,11 +412,17 @@ const mousePositionOptions = {
     :analytic="useControls.MousePosition.analytic"
     :mouse-position-options="mousePositionOptions"
   />
+  <ElevationPath
+    v-if="controlOptions"
+    :visibility="props.controlOptions.includes(useControls.ElevationPath.id)"
+    :analytic="useControls.ElevationPath.analytic"
+    :elevation-path-options="elevationPathOptions"
+  />
   <LayerImport
-  v-if="controlOptions"
-  :visibility="props.controlOptions.includes(useControls.LayerImport.id)"
-  :analytic="useControls.LayerImport.analytic"
-  :layer-import-options="layerImportOptions"
+    v-if="controlOptions"
+    :visibility="props.controlOptions.includes(useControls.LayerImport.id)"
+    :analytic="useControls.LayerImport.analytic"
+    :layer-import-options="layerImportOptions"
   />
 </template>
 

src/components/carte/control/ElevationPath.vue

@@ -0,0 +1,72 @@
+<script setup lang="js">
+import { useActionButtonEulerian } from '@/composables/actionEulerian.js';
+import { useLogger } from 'vue-logger-plugin'
+import {
+  ElevationPath
+} from 'geopf-extensions-openlayers'
+
+const props = defineProps({
+  visibility: Boolean,
+  analytic: Boolean,
+  elevationPathOptions: Object
+})
+
+const log = useLogger()
+
+const map = inject('map')
+const elevationPath = ref(new ElevationPath(props.elevationPathOptions))
+
+onMounted(() => {
+  if (props.visibility) {
+    map.addControl(elevationPath.value);
+    /* abonnement au widget 
+    * @fires elevationpath:drawstart
+    * @fires elevationpath:drawend
+    * @fires elevationpath:compute
+    */
+    elevationPath.value.on("elevationpath:drawstart", onDrawStart);
+    elevationPath.value.on("elevationpath:drawend", onDrawEnd);
+    elevationPath.value.on("elevationpath:compute", onCompute);
+    if (props.analytic) {
+      var el = elevationPath.value.element.querySelector("button[id^=GPshowElevationPathPicto-]");
+      useActionButtonEulerian(el);
+    }
+  }
+})
+
+onBeforeUpdate(() => {
+  if (!props.visibility) {
+    map.removeControl(elevationPath.value);
+  }
+})
+
+onUpdated(() => {
+  if (props.visibility) {
+    map.addControl(elevationPath.value);
+    if (props.analytic) {
+      var el = elevationPath.value.element.querySelector("button[id^=GPshowElevationPathPicto-]");
+      useActionButtonEulerian(el);
+    }
+  }
+})
+
+/** 
+ * gestionnaire d'evenement sur les abonnements
+ */
+ const onDrawStart = (e) => {
+  log.debug(e);
+}
+const onDrawEnd = (e) => {
+  log.debug(e);
+}
+const onCompute = (e) => {
+  log.debug(e);
+}
+
+</script>
+
+<template>
+  <!-- TODO ajouter l'emprise du widget pour la gestion des collisions -->
+</template>
+
+<style scoped></style>

src/components/carte/control/Share.vue

@@ -178,7 +178,7 @@ onBeforeMount(() => {
           <DsfrInput
             v-model="iframe"
             placeholder=""
-            isTextarea="true"
+            isTextarea
             label-visible
             readonly
             descriptionId=""

src/components/menu/LeftMenuTool.vue

@@ -38,6 +38,7 @@ function tabIsActive(componentName) {
   <MenuLateralWrapper
     :side="side"
     :visibility="true"
+    id="MenuCatalogueContentClose"
     v-model="is_expanded"
     ref="wrapper">
     <template #content>

src/components/menu/MenuLateralNavButton.vue

@@ -33,12 +33,13 @@ const tabClicked = () => {
 
 
 <template>
-    <DsfrButton :id="id"
-    secondary
-    :class="`${active ? 'active': ''}  'navBarIcon'` && 'navButton'"
-    :icon="icon"
-    :iconOnly="true"
-    @click="tabClicked">
+    <DsfrButton 
+      :id="id"
+      secondary
+      :class="`${active ? 'active': ''}  'navBarIcon'` && 'navButton'"
+      :icon="icon"
+      :iconOnly="true"
+      @click="tabClicked">
     </DsfrButton>
 </template>
 

src/components/menu/MenuLateralWrapper.vue

@@ -16,7 +16,8 @@ import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 const props = defineProps({
   side: String,
-  visibility: Boolean
+  visibility: Boolean,
+  id: String
 })
 
 const icon = "io-close"
@@ -60,14 +61,14 @@ defineExpose({
     <div class="menu-content-list"
     v-show="is_expanded">
       <div class="menu-collapse-icon-wrapper">
-        <DsfrButton :id="id"
+        <DsfrButton 
+          :id="props.id"
           tertiary
           no-outline
           class="menu-collapse-icon"
           @click="closeMenu">
           Fermer
-          <VIcon
-        v-bind="iconProps"/>
+          <VIcon v-bind="iconProps"/>
         </DsfrButton>
       </div>
 

src/components/menu/RightMenuTool.vue

@@ -39,6 +39,7 @@ function tabIsActive(componentName) {
   <MenuLateralWrapper
     :side="side"
     :visibility="true"
+    id="MenuControlContentClose"
     v-model="is_expanded"
     ref="wrapper">
     <template #content>

src/composables/controls.js

@@ -126,6 +126,12 @@ export const useControls = {
     disable: false,
     analytic: true
   },
+  ElevationPath: {
+    id: 'ElevationPath',
+    active: true,
+    disable: false,
+    analytic: false
+  },
   LayerImport: {
     id: 'LayerImport',
     active: true,
@@ -288,6 +294,13 @@ export function useControlsMenuOptions() {
     hint: 'Territoires',
     disabled: useControls.Territories.disable
   },
+  {
+    label: 'Profil altimétrique',
+    id: 'elevationPath',
+    name: useControls.ElevationPath.id,
+    hint: 'Profil altimétrique',
+    disabled: useControls.ElevationPath.disable
+  },
   {
     label: 'Importer des données',
     id: 'layerImport',