puissance agir hover events both ways (map <-> cartouche) are done

src/assets/main.scss

@@ -226,9 +226,9 @@ body{
             }
             >header{
               padding: 0 0 0 0;
+              cursor: pointer;
               >label{
                 padding:0.3em 0 0.5em 0;
-                cursor: pointer;
                 svg{
                   width:0.7em; height:0.7em;
                 }

src/components/ConcernementMapItem.vue

@@ -163,6 +163,7 @@ export default {
     ...mapActions(CommonStore,['setHoverElmt']),
     ...mapActions(ConcernementsStore,['openCloseConcernements']),
     ...mapActions(ConcernementsStore,['hideShowConcernement']),
+    ...mapActions(ConcernementsStore,['setBesoinPaperId']),
     // getResponsiveRay(){
     //   return Math.min(this.canvas.width, this.canvas.height) * 0.08;
     // },
@@ -600,6 +601,8 @@ export default {
         besoin.item_cid = this.concernement.id;
         besoin.item_type = 'besoin';
         besoin.is_symbol_instance = true;
+        console.log(`paper besoin id:${besoin.id}`);
+        this.setBesoinPaperId(besoin.id, this.id, this.concernement.besoins[i].id);
         g.addChild(besoin)
 
         let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
@@ -621,6 +624,7 @@ export default {
               reponse.item_cid = this.concernement.id;
               reponse.item_type = 'reponse';
               reponse.is_symbol_instance = true;
+              this.setBesoinPaperId(reponse.id, this.id, this.concernement.besoins[i].id, this.concernement.besoins[i].reponses[j].id);
               g.addChild(reponse)
             }
           }
@@ -1035,9 +1039,13 @@ export default {
               id: result.item.item_id
             }; 
             switch (result.item.item_type) {
+              case "besoin":
+                new_hover_elmt.no_popup = true;
+                break;
               case "reponse":
                 new_hover_elmt.bid = result.item.item_bid;
                 new_hover_elmt.cid = result.item.item_cid;
+                new_hover_elmt.no_popup = true;
                 break;
             }
             if (!this.hover_elmt || new_hover_elmt.paper_id !== this.hover_elmt.paper_id) {
@@ -1336,7 +1344,7 @@ export default {
         let fa = Math.exp(fa_minf + fa_scale*(dist-minp)*-1);
         this.body.frictionAir = fa;
         
-        console.log(`bringToCenter dist:${dist}, x_force:${x_force}, friction air:${fa}`);        
+        // console.log(`bringToCenter dist:${dist}, x_force:${x_force}, friction air:${fa}`);        
       } else { // in the ceneter zone let items floats freely
         let fa = 0.01;
         let velocity = Matter.Body.getVelocity(this.body);
@@ -1347,7 +1355,7 @@ export default {
           let velocity_range = [50, 1000];
           let fa_range = [0,3];
           fa = fa_range[0] + (velocityx - velocity_range[0]) * (fa_range[1] - fa_range[0]) / (velocity_range[1] - velocity_range[0]);
-          console.log(`bringToCenter velocityx:${velocityx}, fa:${fa}, velocity`, velocity);
+          // console.log(`bringToCenter velocityx:${velocityx}, fa:${fa}, velocity`, velocity);
         } else {
           console.warn(`bringToCenter no velocity`, velocity);
         }

src/components/MapConcernements.vue

@@ -153,7 +153,7 @@ export default {
           }
         }
 
-        if (o && o.paper_id) {
+        if (o && o.paper_id && (!n || o.paper_id !== n.paper_id)) {
           let oitem = paper.project.getItem({id: o.paper_id})
           console.log('watch hover_element oitem', oitem);
           if (!oitem.is_symbol_instance) { // not symbol instance
@@ -969,7 +969,7 @@ export default {
     </ul>
   </nav>
   <ConcernementMapPopup
-    v-if="hover_elmt && hover_elmt.type !== 'doleance_step'"
+    v-if="hover_elmt && hover_elmt.type !== 'doleance_step' && !hover_elmt.no_popup"
     :infos="hover_elmt"
   />  
 </template>

src/components/contents/PuissanceAgir.vue

@@ -39,14 +39,28 @@ export default {
   },
   created () {
     console.log(`puissance d'agir content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
+  },
+  mounted() {
+    
   },
   methods: {
+    ...mapActions(CommonStore,['setHoverElmt']),
     onClickBesoin(id){
       console.log("onClickBesoin", id);
       this.opened_besoin_id = id === this.opened_besoin_id ? null : id;
     },
     besoinClass(id){
       return this.opened_besoin_id === id ? "opened" : "";
+    },
+    onHoverItem(type, pid, bid, rid){
+      console.log(`onHoverItem type:${type}, paper_id:${pid} bid:${bid}, rid:${rid}`);
+      this.setHoverElmt({
+        type: type,
+        paper_id: pid,
+        id: rid ? rid : bid,
+        bid: rid ? bid : null,
+        no_popup: true
+      });
     }
   },
   components: {
@@ -74,6 +88,7 @@ export default {
           class="besoin"
           :id="besoin.id"
           :class="besoinClass(besoin.id)"
+          @mouseover="onHoverItem('besoin', besoin.paper_id, besoin.id)"
         >
           <svg-icon
             type="mdi" 
@@ -81,12 +96,11 @@ export default {
             class="open-btn"
             @click="onClickBesoin(besoin.id)"
             ></svg-icon>
-          <header>
+          <header @click="onClickBesoin(besoin.id)">
             <label 
               :class="{ 'hover': hover_elmt 
                               && (hover_elmt.type === 'besoin' || hover_elmt.type === 'reponse') 
                               && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
-              @click="onClickBesoin(besoin.id)"
               >
               <svg-icon
                 type="mdi" 
@@ -102,6 +116,7 @@ export default {
               :key="reponse.id"
               class="reponse"
               :id="reponse.id"
+              @mouseover.stop="onHoverItem('reponse', reponse.paper_id, besoin.id, reponse.id)"
             >
               <label 
               :class="{ 'hover': hover_elmt 

src/stores/concernements.js

@@ -238,6 +238,26 @@ export const ConcernementsStore = defineStore({
     },
     setOpenedEntityId(id){
       this.opened_entite_id = id;
+    },
+    setBesoinPaperId(paper_id, cid, bid, rid){
+      this.concernements.forEach((c, i) => {
+        if(c.id === cid){
+          this.concernements[i].besoins.forEach((b,j) => {
+            if(b.id === bid) {
+              if (!rid) {
+                this.concernements[i].besoins[j].paper_id = this.concernementsByID[cid].besoins[j].paper_id = paper_id;
+                
+              } else {
+                this.concernements[i].besoins[j].reponses.forEach((r,k) => {
+                  if (r.id === rid) {
+                    this.concernements[i].besoins[j].reponses[k].paper_id = this.concernementsByID[cid].besoins[j].reponses[k].paper_id = paper_id;
+                  }
+                })
+              }
+            }
+          })
+        }
+      })
     }
   }
 })