generic paper item hover highlight behaviour, + some tweaks

src/components/ConcernementMapItem.vue

@@ -130,7 +130,7 @@ export default {
     },
     hover_elmt: {
       handler (n, o) {
-        // console.log('watch hover_elmt', o, n);
+        // console.log(`watch hover_elmt ${this.id}`, o, n);
         if (n && n.type === 'concernement' && n.id === this.id) {
           this.is_hover = true;
         } else {
@@ -138,20 +138,7 @@ export default {
         }
       },
       deep: true
-    },
-    // '$route':{
-    //   handler (to, from) {
-    //     console.log('watch $route', from, to);
-    //     if (to.name === concernement 
-    //       && (this.map_mode === "terraindevie" || this.map_mode === "action")
-    //       && to.param.id === this.id
-    //       && to.param.eid) {
-    //       this.opened_entite_id = to.param.eid;
-    //     }
-    //   },
-    //   deep: true,
-    //   immediate: true
-    // }
+    }
   },
   methods: {
     ...mapActions(CommonStore,['setHoverElmt']),
@@ -528,12 +515,6 @@ export default {
             item_id: part.id,
             item_type: 'entite'
           }))
-
-          // if (part.id === this.opened_entite_id) {
-          //   this.ctx.fillStyle = "#01ffe2";
-          // } else {
-          //   this.ctx.fillStyle = "#000";
-          // }
         }
       }
       return g;
@@ -713,10 +694,10 @@ export default {
           let part = this.body.parts[i];
           g.addChild(new paper.Path.Circle({
             center: [part.position.x, part.position.y],
-            radius: 0.5, //0.3
+            radius: 0.3, //0.3
             fillColor: '#000',
             strokeColor: '#000',
-            strokeWidth: 2,
+            strokeWidth: 3,
             item_id: part.id,
             item_type: 'entite'
           }))
@@ -1323,9 +1304,6 @@ export default {
       //
       // l'enquete
       //
-      let enquete = new paper.Group({
-        name: 'enquete'
-      });
       // camenbert
       let cam = new paper.Path({
         strokeColor: '#fff',
@@ -1339,57 +1317,49 @@ export default {
       cam.arcTo({x: this.pos.x - p, y: this.pos.y + o}, {x: this.pos.x - m, y: this.pos.y + m});
       cam.lineTo({x: this.pos.x - n, y: this.pos.y + n});
       cam.arcTo({x: this.pos.x - p_d, y: this.pos.y + o_d}, {x: this.pos.x , y: this.pos.y + dr});
-      enquete.addChild(cam)
       // texte
       // enquete.addChild(new paper.PointText({
-      //   point: {
-      //     x:this.pos.x + Math.sin(22.5*(Math.PI/180)) * r*0.75,
-      //     y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
-      //   },
-      //   content: doleance['lenquete'],
-      //   fontSize: fontsize,
+        //   point: {
+          //     x:this.pos.x + Math.sin(22.5*(Math.PI/180)) * r*0.75,
+          //     y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
+          //   },
+          //   content: doleance['lenquete'],
+          //   fontSize: fontsize,
       //   fillColor: '#fff',
       //   justification: 'center',
       //   locked: true
       // }));
-      g.addChild(enquete);
+      g.addChild(cam);
       
       //
       // probleme_initial_resolu
       //
-      let resolution = new paper.Group({
-        name: 'resolution'
-      });
       // camenbert
       let rescam = new paper.Path({
-        name: 'resolution',
-        item_type: 'doleance_step',
-        item_id: 'probleme_initial_resolu',
         strokeColor: '#fff',
         strokeWidth: 2,
         fillColor: "rgba(255, 255, 255, 0.4)",
-
+        closed: true,
+        item_type: 'doleance_step',
+        item_id: 'probleme_initial_resolu',
       });
       rescam.add({x: this.pos.x + n, y: this.pos.y + n});
       rescam.lineTo({x: this.pos.x + m , y: this.pos.y + m});
       rescam.arcTo({x: this.pos.x + p, y: this.pos.y + o}, {x: this.pos.x, y: this.pos.y + r});
       rescam.lineTo({x: this.pos.x, y: this.pos.y + dr});
       rescam.arcTo({x: this.pos.x + p_d, y: this.pos.y + o_d}, {x: this.pos.x + n, y: this.pos.y + n});
-      resolution.addChild(rescam)
       // texte
       // resolution.addChild(new paper.PointText({
-      //   point: {
-      //     x:this.pos.x - Math.sin(22.5*(Math.PI/180)) * r*0.75,
-      //     y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
-      //   },
-      //   content: doleance['probleme_initial_resolu'] ? doleance['oui_nouvelle_situation'] : doleance['non_adresse_doleance'],
-      //   fontSize: fontsize,
-      //   fillColor: '#fff',
-      //   justification: 'center'
-      // }));
-      g.addChild(resolution);
-      
-
+        //   point: {
+          //     x:this.pos.x - Math.sin(22.5*(Math.PI/180)) * r*0.75,
+          //     y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
+          //   },
+          //   content: doleance['probleme_initial_resolu'] ? doleance['oui_nouvelle_situation'] : doleance['non_adresse_doleance'],
+          //   fontSize: fontsize,
+          //   fillColor: '#fff',
+          //   justification: 'center'
+          // }));
+      g.addChild(rescam)
       
       //
       // MULTIPLE FIELDS
@@ -1403,10 +1373,12 @@ export default {
 
       multiple_fields.forEach((mf, j) => {
         for (let i = 0, l = doleance[mf.field_name].length, a = mf.arc/l; i < l; i++) {
-          let gi = new paper.Group({
-            item_type: mf.field_name,
-            item_index: i
-          });
+          // let gi = new paper.Group({
+          //   item_type: 'doleance_step',
+          //   item_id: 'lenquete',
+          //   item_field: mf.field_name,
+          //   item_index: i
+          // });
           //camenbert
           let x1=  this.pos.x + Math.sin((mf.decalage- a*i)*(Math.PI/180)) * dr,
               y1=  this.pos.y + Math.cos((mf.decalage- a*i)*(Math.PI/180)) * dr;
@@ -1425,24 +1397,28 @@ export default {
           let p = new paper.Path({
             strokeColor: '#fff',
             strokeWidth: 2,
-            fillColor: "rgba(255, 255, 255, 0.4)"
+            fillColor: "rgba(255, 255, 255, 0.4)",
+            item_type: 'doleance_step',
+            item_id: `${mf.field_name}-${i}`,
+            item_field: mf.field_name
           });
           p.add([x1,y1]);
           p.lineTo([x2,y2]);
           p.arcTo([x3t,y3t], [x3,y3]);
           p.lineTo([x4,y4]);
           p.arcTo([x4t,y4t], [x1,y1]);
-          gi.addChild(p);
-          // text
-          gi.addChild(new paper.PointText({
-            point: {x:x5,y:y5},
-            content: `${j}-${i}`,
-            fontSize: fontsize,
-            fillColor: '#fff',
-            justification: 'center'
-          }))
+          g.addChild(p);
+          // gi.addChild(p);
+          // // text
+          // gi.addChild(new paper.PointText({
+          //   point: {x:x5,y:y5},
+          //   content: `${j}-${i}`,
+          //   fontSize: fontsize,
+          //   fillColor: '#fff',
+          //   justification: 'center'
+          // }))
 
-          g.addChild(gi)
+          // g.addChild(gi)
         }
       });
 
@@ -1474,44 +1450,41 @@ export default {
         if (this.is_opened) {
           
           // lets define some options regarding the map_mode
-          let paper_group_tohit, op;
+          let paper_group_tohit;
           switch (this.map_mode) {
             case "terraindevie":
               paper_group_tohit = 'entites';
-              op = {};
               break;
             case "action":
               paper_group_tohit = 'agissantes';
-              op = {};
               break;
             case "puissancedagir":
               paper_group_tohit = 'puissanceagir_besoins';
-              op = {};
               break;
             case "doleancer":
               paper_group_tohit = 'doleance_steps';
-              op = {
-                // class: paper.Path
-                fill: true
-              };
               break;
           }
 
-          let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point, op);
+          let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point);
           // console.log('move result', result);
           if (result && result.item.item_id) {
             // console.log('move has result', result);
-            let hover_elmt = {
+            let new_hover_elmt = {
+              paper_id: result.item.id,
               type: result.item.item_type,
               id: result.item.item_id
             }; 
             switch (result.item.item_type) {
               case "reponse":
-                hover_elmt.bid = result.item.item_bid;
-                hover_elmt.cid = result.item.item_cid;
+                new_hover_elmt.bid = result.item.item_bid;
+                new_hover_elmt.cid = result.item.item_cid;
                 break;
             }
-            this.setHoverElmt(hover_elmt);
+            if (!this.hover_elmt || new_hover_elmt.paper_id !== this.hover_elmt.paper_id) {
+              // console.log(`before setHoverElmt ${this.id}`);
+              this.setHoverElmt(new_hover_elmt);
+            }
             document.body.style.cursor = "pointer";
           } else {
             // console.log('move no result');
@@ -1540,7 +1513,7 @@ export default {
         } else {
           // lets define some options regarding the map_mode
           // debugger;
-          let op;
+          let op = {pg: null};
           switch (this.map_mode) {
             case "terraindevie":
               op = {
@@ -1553,25 +1526,26 @@ export default {
               }
               break;
           }
-
-          let result = this.paper_objects.children[op.pg].hitTest(event.point);
-          // console.log('click result', result);
-          if (result) {
-            // we have clicked on an entite
-            this.$router.push({
-              name: 'concernement',
-              hash: `#${this.map_mode}`,
-              params: {id: this.opened.id, eid: result.item.item_id}
-            });
-          } else {
-            // otherwise we close the entite and come back to the concernement
-            this.$router.push({
-              name: 'concernement',
-              hash: `#${this.map_mode}`,
-              params: {id: this.id}
-            });
-            // reset the mousehover
-            this.resetHoverElmt();
+          if (op.pg) {
+            let result = this.paper_objects.children[op.pg].hitTest(event.point);
+            // console.log('click result', result);
+            if (result) {
+              // we have clicked on an entite
+              this.$router.push({
+                name: 'concernement',
+                hash: `#${this.map_mode}`,
+                params: {id: this.opened.id, eid: result.item.item_id}
+              });
+            } else {
+              // otherwise we close the entite and come back to the concernement
+              this.$router.push({
+                name: 'concernement',
+                hash: `#${this.map_mode}`,
+                params: {id: this.id}
+              });
+              // reset the mousehover
+              this.resetHoverElmt();
+            }
           }
         }
       }.bind(this);
@@ -1812,21 +1786,21 @@ export default {
         && this.map_mode !== 'doleancer' 
         && this.map_mode !== 'action' ) {
           this.paper_objects.children.entites.visible = true;
-          if (this.opened_entite_id) {
-            // console.log('this.paper_objects.children.entites', this.paper_objects.children.entites);
-            this.paper_objects.children.entites.children.forEach((entite) => {
-              // console.log('entite', entite);
-              if (entite.item_id === this.opened_entite_id) {
-                entite.style.fillColor = '#01ffe2';
-              } else {
-                entite.style.fillColor = '#000';
-              }
-            });
-          } else {
-            this.paper_objects.children.entites.children.forEach((entite) => {
-              entite.style.fillColor = '#000';
-            })
-          }
+          // if (this.opened_entite_id) {
+          //   // console.log('this.paper_objects.children.entites', this.paper_objects.children.entites);
+          //   this.paper_objects.children.entites.children.forEach((entite) => {
+          //     // console.log('entite', entite);
+          //     if (entite.item_id === this.opened_entite_id) {
+          //       entite.style.fillColor = '#01ffe2';
+          //     } else {
+          //       entite.style.fillColor = '#000';
+          //     }
+          //   });
+          // } else {
+          //   this.paper_objects.children.entites.children.forEach((entite) => {
+          //     entite.style.fillColor = '#000';
+          //   })
+          // }
       } else {
         this.paper_objects.children.entites.visible = false;
       }

src/components/ConcernementMapPopup.vue

@@ -94,6 +94,13 @@ export default {
           this.dom.style.top = `${e.clientY+2}px`;
           break;
       }
+    },
+    truncate( str, n, useWordBoundary ){
+      if (str.length <= n) { return str; }
+      const subString = str.slice(0, n-1); // the original check
+      return (useWordBoundary 
+        ? subString.slice(0, subString.lastIndexOf(" ")) 
+        : subString) + " &hellip;";
     }
   },
   components: {
@@ -123,10 +130,10 @@ export default {
         <div v-html="besoin.description"></div>
       </section>
       <section v-if="infos.type === 'reponse'" class="reponse-map-popup">
-          <div v-if="reponse.qui"><label>Qui</label><p v-html="reponse.qui"/></div>
-          <div v-if="reponse.quoi"><label>Quoi</label><p v-html="reponse.quoi"/></div>
-          <div v-if="reponse.ou"><label>Où</label><p v-html="reponse.ou"/></div>
-          <div v-if="reponse.avec"><label>Avec</label><p v-html="reponse.avec"/></div>
+          <div v-if="reponse.qui"><label>Qui</label><p v-html="truncate(reponse.qui, 100, true)"/></div>
+          <div v-if="reponse.quoi"><label>Quoi</label><p v-html="truncate(reponse.quoi, 100, true)"/></div>
+          <div v-if="reponse.ou"><label>Où</label><p v-html="truncate(reponse.ou, 100, true)"/></div>
+          <div v-if="reponse.avec"><label>Avec</label><p v-html="truncate(reponse.avec, 100, true)"/></div>
       </section>
     </div>
   </div>

src/components/MapConcernements.vue

@@ -105,6 +105,34 @@ export default {
 
     this.animate()
   },
+  watch: {
+    hover_elmt: {
+      handler (n, o) {
+        // console.log(`watch hover_elmt map`, o, n);
+        // over highlight effect on paper items
+        if (n && n.paper_id) {
+          let nitem = paper.project.getItem({id: n.paper_id});
+          nitem.bringToFront();
+          if (nitem.strokeColor) {
+            nitem.data.prevStrokeColor = nitem.strokeColor.toCSS(true);
+            nitem.strokeColor = "#01ffe2";          
+          } else {
+            nitem.data.prevFillColor = nitem.fillColor.toCSS(true);
+            nitem.fillColor = "#01ffe2";
+          }
+        }
+        if (o && o.paper_id) {
+          let oitem = paper.project.getItem({id: o.paper_id})
+          if (oitem.data.prevStrokeColor) {
+            oitem.strokeColor = oitem.data.prevStrokeColor;
+          } else {
+            oitem.fillColor = oitem.data.prevFillColor;
+          }
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
     ...mapActions(ConcernementsStore,['setMapMode']),
     ...mapActions(ConcernementsStore,['openCloseConcernements']),