Merge pull request #193 from Geoportail-Luxembourg/GITLAB-44-profile_…

…geometry

Link a profile to a feature because you can create multiple graphs wi…

src/bundle/components/profile_v3/profile-infos_v3.vue

@@ -1,22 +1,29 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
-
 import FeatureElevationProfile from '@/components/feature-elevation-profile/feature-elevation-profile.vue'
 import { useProfileInfosv3Store } from '@/bundle/stores/profile-infos_v3.store'
 
-defineProps<{
-  featureId: number
-}>()
+const props = defineProps({
+  featureid: {
+    type: String,
+    default: '',
+  },
+})
 
 const profilev3Store = useProfileInfosv3Store()
-const { feature_v3, activePositioning_v3 } = storeToRefs(profilev3Store)
-const activateProfile = computed(
-  () =>
-    feature_v3.value &&
-    (feature_v3.value.getGeometry()?.getType() === 'LineString' ||
-      feature_v3.value.getGeometry()?.getType() === 'MultiLineString')
-)
+const { activePositioning_v3 } = storeToRefs(profilev3Store)
+const { getFeature } = profilev3Store
+
+const activateProfile = computed(() => {
+  return (
+    props.featureid &&
+    getFeature(props.featureid) &&
+    (getFeature(props.featureid).getGeometry()?.getType() === 'LineString' ||
+      getFeature(props.featureid).getGeometry()?.getType() ===
+        'MultiLineString')
+  )
+})
 
 /**
  * This component is a wrapper to use original <feature-elevation-profile> in v3
@@ -28,7 +35,7 @@ const activateProfile = computed(
 <template>
   <feature-elevation-profile
     v-if="activateProfile"
-    :feature="feature_v3"
+    :feature="getFeature(props.featureid)"
     :enableExportCSV="true"
     :activatePositioning="activePositioning_v3"
   />

src/bundle/lib.ts

@@ -108,6 +108,36 @@ export default function useLuxLib(options: LuxLibOptions) {
   app.use(VueDOMPurifyHTML)
   app.use(formatMeasureDirective)
 
+  const createElementInstanceProp = (component, app = null) => {
+    return defineCustomElement(
+      {
+        props: component.props || {},
+        setup: props => {
+          const inst = getCurrentInstance()!
+          if (app) {
+            if (inst) {
+              Object.assign(inst.appContext, app._context)
+              Object.assign(inst.provides, app._context.provides)
+            }
+          }
+          if (inst) {
+            const vueEmit = inst.emit // Sauvegarder la fonction emit originale de Vue
+            inst.emit = (event, ...args) => {
+              vueEmit(event, ...args) // Émettre l'événement dans Vue
+              const ceEvent = new CustomEvent(event, { detail: args }) // Créer un CustomEvent
+              inst.vnode.el?.dispatchEvent(ceEvent) // Dispatch l'événement sur le web component
+            }
+          }
+          return () => h(component, props) // Passer les props au composant
+        },
+        render() {
+          return null // Le rendu est géré dans setup
+        },
+      },
+      { shadowRoot: false }
+    )
+  }
+
   const createElementInstance = (component = {}, app = null) => {
     return defineCustomElement(
       {
@@ -126,6 +156,7 @@ export default function useLuxLib(options: LuxLibOptions) {
   return {
     app,
     createElementInstance,
+    createElementInstanceProp,
   }
 }
 

src/bundle/stores/profile-infos_v3.store.ts

@@ -1,4 +1,4 @@
-import { Ref, ref } from 'vue'
+import { ref } from 'vue'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { Map } from 'ol'
 
@@ -18,7 +18,8 @@ export const useProfileInfosv3Store = defineStore(
      * Emulate a DrawnFeature with feature coming from v3
      * @deprecated this property is meant to be removed when Drawing and Measures in v4 are fully operational
      */
-    const feature_v3: Ref<DrawnFeature | undefined> = ref(undefined)
+    //const feature_v3: Ref<DrawnFeature | undefined> = ref(undefined)
+    const features_v3 = ref<{ [id: string]: DrawnFeature }>({})
 
     /**
      * Activate or deactivate positioning for infos, deactivation is need for eg.
@@ -30,19 +31,43 @@ export const useProfileInfosv3Store = defineStore(
     function setProfileData(
       map: Map,
       feature: DrawnFeature,
-      profileData: ProfileData
+      profileData: ProfileData,
+      id: string
     ) {
-      feature_v3.value = undefined
       feature['map'] = map // Needed by CSV Exporter
       feature['label'] = feature['label'] ?? 'mnt' // Needed by CSV Exporter (= fileName)
       feature['getProfile'] = () => Promise.resolve(profileData)
-      feature_v3.value = feature
+      features_v3.value[id] = feature
+    }
+
+    /**
+     * Add a feature.
+     */
+    const addFeature = (feature: DrawnFeature, id: string | undefined) => {
+      features_v3.value[id] = feature
+    }
+
+    /**
+     * get a specific feature.
+     */
+    const getFeature = (id: string | undefined): DrawnFeature => {
+      return features_v3.value[id]
+    }
+
+    /**
+     * Remove a feature.
+     */
+    const removeFeature = (id: string | undefined) => {
+      delete features_v3.value[id]
     }
 
     return {
-      feature_v3,
+      features_v3,
       activePositioning_v3,
       setProfileData,
+      addFeature,
+      removeFeature,
+      getFeature,
     }
   },
   {}