some css on doleance content, started mouse events

src/assets/main.scss

@@ -82,6 +82,7 @@ body{
   }
 
   #content{
+
     section.concernement{
       background-color: rgba(255, 255, 255, 0.9);
       box-sizing: border-box;
@@ -99,6 +100,12 @@ body{
         font-size: 0.882em;
         padding: 0 0 1em 0;
       }
+
+      ul, li{
+        padding:0; margin:0;
+        list-style: none;
+      }
+
       >header{
         display: flex;
         height: 8rem;
@@ -110,27 +117,35 @@ body{
           // padding: 0 0 1em 0;
           // flex-grow: auto;
         }
-        h3{
-          font-weight: 400;
-          font-size: 1.2em;
-        }
         h2{
           font-weight: 400;
           font-size: 1.512em;
         }
+        h3{
+          font-weight: 400;
+          font-size: 1.2em;
+        }
         
       }
-      section>div{
+      h3{
+        font-weight: 400;
+        font-size: 1.2em;
+      }
+      h4{
+        font-weight: 400;
+        font-size: 1.2em;
+      }
+      h5{
+        font-weight: 400;
+        font-size: 1.1em;
+      }
+      section>div, p{
         font-size: 1em;
         font-weight: 300;
       }
 
       // PUISSANCE D'AGIR
       section.content-besoins{
-        ul, li{
-          padding:0; margin:0;
-          list-style: none;
-        }
         li.besoin{
           position: relative;
           label.mdi:before{
@@ -190,6 +205,23 @@ body{
           margin-bottom: 1em;
         }
       }
+
+      section.content-doleances{
+        
+        
+        label{
+          margin:0;
+          padding:0 0 0.5em 0;
+        }
+        p{
+          margin:0;
+          padding:0 0 0.5em 0;
+        }
+        ul{
+          // padding:0 0 0 1em;
+        }
+
+      }
     }
   }
 

src/components/ConcernementMapItem.vue

@@ -1330,26 +1330,28 @@ export default {
       let cam = 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: 'lenquete'
       });
-
-      cam.add({x: this.pos.x + n, y: this.pos.y + n});
-      cam.lineTo({x: this.pos.x + m , y: this.pos.y + m});
-      cam.arcTo({x: this.pos.x + p, y: this.pos.y + o}, {x: this.pos.x, y: this.pos.y + r});
-      cam.lineTo({x: this.pos.x, y: this.pos.y + dr});
-      cam.arcTo({x: this.pos.x + p_d, y: this.pos.y + o_d}, {x: this.pos.x + n, y: this.pos.y + n});
+      cam.add({x: this.pos.x , y: this.pos.y + dr});
+      cam.lineTo({x: this.pos.x, y: this.pos.y + r});
+      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,
-        fillColor: '#fff',
-        justification: 'center'
-      }));
+      // 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,
+      //   fillColor: '#fff',
+      //   justification: 'center',
+      //   locked: true
+      // }));
       g.addChild(enquete);
       
       //
@@ -1360,27 +1362,31 @@ export default {
       });
       // 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)"
+        fillColor: "rgba(255, 255, 255, 0.4)",
+
       });
-      rescam.add({x: this.pos.x , y: this.pos.y + dr});
-      rescam.lineTo({x: this.pos.x, y: this.pos.y + r});
-      rescam.arcTo({x: this.pos.x - p, y: this.pos.y + o}, {x: this.pos.x - m, y: this.pos.y + m});
-      rescam.lineTo({x: this.pos.x - n, y: this.pos.y + n});
-      rescam.arcTo({x: this.pos.x - p_d, y: this.pos.y + o_d}, {x: this.pos.x , y: this.pos.y + dr});
+      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'
-      }));
+      // 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);
       
 
@@ -1468,22 +1474,32 @@ export default {
         if (this.is_opened) {
           
           // lets define some options regarding the map_mode
-          let paper_group_tohit;
+          let paper_group_tohit, op;
           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);
+          let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point, op);
           // console.log('move result', result);
-          if (result) {
+          if (result && result.item.item_id) {
             // console.log('move has result', result);
             let hover_elmt = {
               type: result.item.item_type,

src/components/MapConcernements.vue

@@ -159,7 +159,7 @@ export default {
     </ul>
   </nav>
   <ConcernementMapPopup
-    v-if="hover_elmt"
+    v-if="hover_elmt && hover_elmt.type !== 'doleance_step'"
     :infos="hover_elmt"
   />  
 </template>

src/views/Concernement.vue

@@ -217,13 +217,13 @@ export default {
           class="doleance">
             <header>
               <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
-              <h4 name="leprobleme">{{ doleance.leprobleme }}</h4>
+              <h3 name="leprobleme">{{ doleance.leprobleme }}</h3>
 
               <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
-              <h3 name="lenquete">{{ doleance.lenquete }}</h3>
+              <h4 name="lenquete">{{ doleance.lenquete }}</h4>
             </header>
             <section class="groupesinterets">
-              <h2>{{ ct_cercle_politique.field_groupes.label }}</h2>
+              <h5>{{ ct_cercle_politique.field_groupes.label }}</h5>
               <ul>
                 <li
                   v-for="groupe in doleance.groupesinterets">
@@ -244,7 +244,7 @@ export default {
               <p name="comment_ennonce_doleance" v-html="doleance.comment_ennonce_doleance" />
               <label for="aqui_addresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label>
               <p name="aqui_addresse_doleance" v-html="doleance.aqui_addresse_doleance" />
-              <h2>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h2>
+              <h5>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h5>
               <ul class="reception_traitement">
                 <li
                   v-for="rec in doleance.reception_traitement">
@@ -264,7 +264,7 @@ export default {
               <p name="entites_decisionnaires" v-html="doleance.entites_decisionnaires" />
               <label for="decision_formule">{{ ct_cercle_politique.field_decision_formulee.label }}</label>
               <p name="decision_formule" v-html="doleance.decision_formule" />
-              <h2>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h2>
+              <h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
               <ul class="mise_en_oeuvre_decision">
                 <li
                   v-for="dec in doleance.mise_en_oeuvre_decision">
@@ -284,7 +284,7 @@ export default {
               <p name="aqui_adresse_decision" v-html="doleance.aqui_adresse_decision" />
               <label for="comment_formule_decision">{{ ct_cercle_politique.field_comment_formule_decision.label }}</label>
               <p name="comment_formule_decision" v-html="doleance.comment_formule_decision" />
-              <h2>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h2>
+              <h5>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h5>
               <ul class="receptions_et_applications">
                 <li
                   v-for="app in doleance.receptions_et_applications">