made the first camenbert of doleance

src/components/ConcernementMapItem.vue

@@ -727,7 +727,6 @@ export default {
     setPaperDoleanceBG(){
       var r = this.ray * this.scale * 0.8;  // ray
       var dr = r/2;                         // demi ray
-      var d = r*2;                          // diameter
       var pcr = 2*this.scale;               // petits cercle rayon
 
       // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
@@ -735,9 +734,8 @@ export default {
       // radians = degrees * (pi/180)
       // degrees = radians * (180/pi)
       // Points for 45° axes
-      let m,n;
+      let m = Math.sin(45*(Math.PI/180)) * r;   // x = y for rayon
-      m = Math.sin(45*(Math.PI/180)) * r;   // x = y for rayon
+      let n = Math.sin(45*(Math.PI/180)) * r/2; // x = y for demi rayon
-      n = Math.sin(45*(Math.PI/180)) * r/2; // x = y for demi rayon
       // console.log('m', m);
 
       // points for legende arcs
@@ -753,7 +751,7 @@ export default {
 
       let style = {
         strokeColor: '#fff',
-        strokeWidth: 2
+        strokeWidth: 1
       }
 
       let legende_style = {
@@ -850,26 +848,30 @@ export default {
         }),
         //
         // DIAGONALES
+        // bas droite
         new paper.Path.Line({
           from: [this.pos.x + m, this.pos.y + m],
           to: [this.pos.x + n, this.pos.y + n],
           style: style
         }),
+        // bas gauche
         new paper.Path.Line({
           from: [this.pos.x - m, this.pos.y + m],
           to: [this.pos.x - n, this.pos.y + n],
           style: style
         }),
-        new paper.Path.Line({
+        // // haut droite
-          from: [this.pos.x + m, this.pos.y - m],
+        // new paper.Path.Line({
-          to: [this.pos.x + n, this.pos.y - n],
+        //   from: [this.pos.x + m, this.pos.y - m],
-          style: style
+        //   to: [this.pos.x + n, this.pos.y - n],
-        }),
+        //   style: style
-        new paper.Path.Line({
+        // }),
-          from: [this.pos.x - m, this.pos.y - m],
+        // // haut gauche
-          to: [this.pos.x - n, this.pos.y - n],
+        // new paper.Path.Line({
-          style: style
+        //   from: [this.pos.x - m, this.pos.y - m],
-        }),
+        //   to: [this.pos.x - n, this.pos.y - n],
+        //   style: style
+        // }),
         // fleches
         // haut
         new paper.Path({
@@ -1052,24 +1054,24 @@ export default {
           justification: 'center'
         }),
         // bas
-        new paper.Path.Circle({
+        // new paper.Path.Circle({
-          center: [this.pos.x, this.pos.y + r],
+        //   center: [this.pos.x, this.pos.y + r],
-          radius: 0.5,
+        //   radius: 0.5,
-          style: {
+        //   style: {
-            fillColor: '#000'
+        //     fillColor: '#000'
-          }
+        //   }
-        }),
+        // }),
-        new paper.Path.Line({
+        // new paper.Path.Line({
-          from: [this.pos.x, this.pos.y + r],
+        //   from: [this.pos.x, this.pos.y + r],
-          to: [this.pos.x, this.pos.y + r + 8],
+        //   to: [this.pos.x, this.pos.y + r + 8],
-          style: legende_style
+        //   style: legende_style
-        }),
+        // }),
-        new paper.PointText({
+        // new paper.PointText({
-          point: [this.pos.x, this.pos.y + r + 10],
+        //   point: [this.pos.x, this.pos.y + r + 10],
-          content: "Début du cercle\nLe problème\n(injustice, indignation, plainte...)",
+        //   content: "Début du cercle\nLe problème\n(injustice, indignation, plainte...)",
-          fontSize: fontsize,
+        //   fontSize: fontsize,
-          justification: 'center'
+        //   justification: 'center'
-        }),
+        // }),
         // droite
         new paper.Path.Circle({
           center: [this.pos.x + r, this.pos.y],
@@ -1198,7 +1200,144 @@ export default {
       });
     },
     setPaperDoleanceSteps(){
+      let g = new paper.Group({
+        pivot: new paper.Point(this.pos),
+        name: 'doleance steps'
+      });
+      let doleance = this.concernement.doleances[0];
+      let all_fields = [
+        [
+          'leprobleme',
+          'lenquete',
+          {
+            fieldname: 'groupesinterets',
+            fields: [
+                    'groupe_interets',
+                    'accorder_interets',
+                    'formuler',
+                    ] 
+          }
+        ],
+        [
+          'entite_addresse_doleance',
+          'comment_ennonce_doleance',
+          'aqui_addresse_doleance',
+          {
+            fieldname: 'groupesinterets',
+            fields: [
+                    'entite_adressee',
+                    'doleance_formulee',
+                    'traite_doleance',
+                    'entite_recoit_doleance',
+                    ]
+          }
+        ],
+        [
+          'entites_decisionnaires',
+          'decision_formule',
+          {
+            fieldname: 'mise_en_oeuvre_decision',
+            fields: [
+                    'entite_adresse_decision',
+                    'formule_decision',
+                    'entite_metenoeuvre_decisio',
+                    ]
+          }
+        ],
+        [
+          'entite_adresse_application',
+          'aqui_adresse_decision',
+          'comment_formule_decision',
+          {
+            fieldname: 'receptions_et_applications',
+            fields: [
+                    'applique_decision',
+                    'formule_decision_applic',
+                    'entite_recoit_decision',
+                    ]
+          },
+          'probleme_initial_resolu',
+          'oui_nouvelle_situation',
+          'non_adresse_doleance',
+        ]
+      ];
+      
+      var r = this.ray * this.scale * 0.8;  // ray
+      var dr = r/2;                         // demi ray
+      var pcr = 2*this.scale;               // petits cercle rayon
 
+      // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
+      // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
+      // radians = degrees * (pi/180)
+      // degrees = radians * (180/pi)
+      // Points for 45° axes
+      let m = Math.sin(45*(Math.PI/180)) * r;   // x = y for rayon
+      let n = Math.sin(45*(Math.PI/180)) * r/2; // x = y for demi rayon
+
+      let o = Math.cos(22.5*(Math.PI/180)) * r; // x @ 22.5° for rayon
+      let p = Math.sin(22.5*(Math.PI/180)) * r; // y @ 22.5° for rayon
+      let o_d = Math.cos(22.5*(Math.PI/180)) * r/2; // x @ 22.5° for demi rayon
+      let p_d = Math.sin(22.5*(Math.PI/180)) * r/2; // y @ 22.5° for demi rayon
+
+      let fontsize = 2.1;
+      
+      //
+      // PREMIER QUART
+      //
+      // #1 le problème
+      //
+      g.addChild(new paper.Path.Circle({
+        center: [this.pos.x, this.pos.y + r],
+        radius: 0.5,
+        style: {
+          fillColor: '#fff'
+        }
+      }))
+      g.addChild(new paper.Path.Line({
+        from: [this.pos.x, this.pos.y + r],
+        to: [this.pos.x, this.pos.y + r + 8],
+        strokeColor: '#fff'
+      }))
+      g.addChild(new paper.PointText({
+        point: [this.pos.x, this.pos.y + r + 10],
+        content: doleance['leprobleme'],
+        fontSize: fontsize,
+        fillColor: '#fff',
+        justification: 'center'
+      }))
+
+      //
+      // #2 l'enquete
+      //
+      let enquete = new paper.Group({
+        name: 'enquete'
+      });
+      // camenbert
+      let cam = new paper.Path({
+        strokeColor: '#fff',
+        strokeWidth: 2,
+        fillColor: "rgba(255, 255, 255, 0.4)"
+      });
+      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'
+      }));
+      g.addChild(enquete);
+          
+      return g;
     },
     // PAPER EVENTS
     initPaperEvents(){

src/components/MapConcernements.vue

@@ -5,22 +5,6 @@ import { computed } from 'vue'
 import MapBackground from '@components/MapBackground.vue'
 
 // https://brm.io/matter-js/docs/classes/Engine.html
-// import {
-//   Engine,
-//   // Render,
-//   // World,
-//   Bodies,
-//   // Body,
-//   // Events,
-//   Composite,
-//   // Composites,
-//   // Constraint,
-//   // Vertices,
-//   // Mouse,
-//   // MouseConstraint,
-//   // Query,
-//   // Common
-// } from "matter-js";
 import Matter from "matter-js";
 
 import MatterAttractors from "matter-attractors";
@@ -46,11 +30,10 @@ export default {
       // MATTER
       engine: null,
       world: null,
-      // render: null,
-      // mouse: null,
-      mapPopupData: null,
       // PAPERJS
-      paper: null
+      paper: null,
+      //
+      mapPopupData: null,
     }
   },
   provide() {
@@ -171,7 +154,7 @@ export default {
         <a href="#action" @click="setMapMode('action')"><span class="icon action"></span>  action</a>
       </li>
       <li>
-        <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span>  doléancer</a>
+        <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span>  cercle politique</a>
       </li>
     </ul>
   </nav>