started cercle politique bg legendes

src/components/ConcernementMapItem.vue

@@ -715,7 +715,6 @@ export default {
       var dr = r/2;                         // demi ray
       var d = r*2;                          // diameter
       var pcr = 2*this.scale;               // petits cercle rayon
-      var lr = r*1.1;                       // legendes 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
@@ -728,9 +727,15 @@ export default {
       // console.log('m', m);
 
       // points for legende arcs
-      let o = Math.cos(22.5*(Math.PI/180)) * lr; // x
+      var lar = r*1.1;                       // legendes arcs rayon
-      let p = Math.sin(22.5*(Math.PI/180)) * lr; // y
+      let o = Math.cos(22.5*(Math.PI/180)) * lar; // x @ 22.5° for legende arc rayon
-      let q = Math.sin(45*(Math.PI/180)) * lr;   // x = y for legende rayon
+      let p = Math.sin(22.5*(Math.PI/180)) * lar; // y @ 22.5° for legende arc rayon
+      let q = Math.sin(45*(Math.PI/180)) * lar;   // x = y  @ 45° for legende arc rayon
+
+      var ltr = lar + 4;                       // legendes texts rayon
+      let o_t = Math.cos(22.5*(Math.PI/180)) * ltr; // x @ 22.5° for legende text rayon
+      let p_t = Math.sin(22.5*(Math.PI/180)) * ltr; // y @ 22.5° for legende text rayon
+      let q_t = Math.sin(45*(Math.PI/180)) * ltr;   // x = y  @ 45° for legende text rayon
 
       let style = {
         strokeColor: '#fff',
@@ -742,6 +747,8 @@ export default {
         strokeWidth: 1
       }
 
+      let fontsize = 2.1;
+
       // arcs exterieur
       // haut gauche
       children.push(new paper.Path.Arc({
@@ -772,51 +779,90 @@ export default {
         style: style
       }));
 
-      // arcs legendes
+      // legendes
-      // bas gauche 1
+      // ARC bas gauche 1
       children.push(new paper.Path.Arc({
-        from: [this.pos.x - pcr, this.pos.y + lr],
+        from: [this.pos.x - pcr, this.pos.y + lar],
         through: [this.pos.x - p, this.pos.y + o],
         to: [this.pos.x - q + pcr/2, this.pos.y + q + pcr/2],
         style: legende_style
       }));
+      children.push(new paper.PointText({
+        point: [this.pos.x - p_t, this.pos.y + o_t],
+        content: "Enquête menée\nsur le terrain de vie",
+        fontSize: fontsize,
+        justification: 'right'
+      }));
 
-      // bas gauche 2
+      // ARC bas gauche 2
       children.push(new paper.Path.Arc({
         from: [this.pos.x - q - pcr/2, this.pos.y + q - pcr/2],
         through: [this.pos.x - o, this.pos.y + p],
-        to: [this.pos.x - lr, this.pos.y + pcr],
+        to: [this.pos.x - lar, this.pos.y + pcr],
         style: legende_style
       }));
+      children.push(new paper.PointText({
+        point: [this.pos.x - o_t, this.pos.y + p_t],
+        content: "Construction de groupes d'intérets\navec qui composer la doléance",
+        fontSize: fontsize,
+        justification: 'right'
+      }));
 
-      // haut gauche
+      // ARC haut gauche
       children.push(new paper.Path.Arc({
-        from: [this.pos.x - lr, this.pos.y - pcr],
+        from: [this.pos.x - lar, this.pos.y - pcr],
         through: [this.pos.x - q, this.pos.y - q],
-        to: [this.pos.x - pcr, this.pos.y - lr],
+        to: [this.pos.x - pcr, this.pos.y - lar],
         style: legende_style
       }));
-      // haut droite
+      children.push(new paper.PointText({
+        point: [this.pos.x - q_t, this.pos.y - q_t],
+        content: "Réception et traitement\nde la doléance",
+        fontSize: fontsize,
+        justification: 'right'
+      }));
+
+      // ARC haut droite
       children.push(new paper.Path.Arc({
-        from: [this.pos.x + pcr, this.pos.y - lr],
+        from: [this.pos.x + pcr, this.pos.y - lar],
         through: [this.pos.x + q, this.pos.y - q],
-        to: [this.pos.x + lr, this.pos.y - pcr],
+        to: [this.pos.x + lar, this.pos.y - pcr],
         style: legende_style
       }));
-      // bas droite 1
+      children.push(new paper.PointText({
+        point: [this.pos.x + q_t, this.pos.y - q_t],
+        content: "Mise-en-œuvre\nde la décision",
+        fontSize: fontsize,
+        justification: 'left'
+      }));
+      
+      // ARC bas droite 1
       children.push(new paper.Path.Arc({
-        from: [this.pos.x + lr, this.pos.y + pcr],
+        from: [this.pos.x + lar, this.pos.y + pcr],
         through: [this.pos.x + o, this.pos.y + p],
         to: [this.pos.x + q + pcr/2, this.pos.y + q - pcr/2],
         style: legende_style
       }));
-      // bas droite 2
+      children.push(new paper.PointText({
+        point: [this.pos.x + o_t, this.pos.y + p_t],
+        content: "Réception et application\nde la décision",
+        fontSize: fontsize,
+        justification: 'left'
+      }));
+      
+      // ARC bas droite 2
       children.push(new paper.Path.Arc({
         from: [this.pos.x + q - pcr/2, this.pos.y + q + pcr/2],
         through: [this.pos.x + p, this.pos.y + o],
-        to: [this.pos.x + pcr, this.pos.y + lr],
+        to: [this.pos.x + pcr, this.pos.y + lar],
         style: legende_style
       }));
+      children.push(new paper.PointText({
+        point: [this.pos.x + p_t, this.pos.y + o_t],
+        content: "Réussite / échec / reprise\ndu cercle politique",
+        fontSize: fontsize,
+        justification: 'left'
+      }));
 
 
       // cercle interieur