paper bg for doleance done!

src/components/ConcernementMapItem.vue

@@ -709,8 +709,6 @@ export default {
       return g;
     },
     setPaperDoleanceBG(){
-      let children = [];
-
       var r = this.ray * this.scale * 0.8;  // ray
       var dr = r/2;                         // demi ray
       var d = r*2;                          // diameter
@@ -739,7 +737,7 @@ export default {
 
       let style = {
         strokeColor: '#fff',
-        strokeWidth: 1
+        strokeWidth: 2
       }
 
       let legende_style = {
@@ -749,208 +747,354 @@ export default {
 
       let fontsize = 2.1;
 
-      // arcs exterieur
-      // haut gauche
-      children.push(new paper.Path.Arc({
-        from: [this.pos.x - r, this.pos.y - pcr],
-        through: [this.pos.x - m, this.pos.y - m],
-        to: [this.pos.x - pcr, this.pos.y - r],
-        style: style
-      }));
-      // haut droite
-      children.push(new paper.Path.Arc({
-        from: [this.pos.x + pcr, this.pos.y - r],
-        through: [this.pos.x + m, this.pos.y - m],
-        to: [this.pos.x + r, this.pos.y - pcr],
-        style: style
-      }));
-      // bas droite
-      children.push(new paper.Path.Arc({
-        from: [this.pos.x + r, this.pos.y + pcr],
-        through: [this.pos.x + m, this.pos.y + m],
-        to: [this.pos.x + pcr, this.pos.y + r],
-        style: style
-      }));
-      // bas gauche
-      children.push(new paper.Path.Arc({
-        from: [this.pos.x - pcr, this.pos.y + r],
-        through: [this.pos.x - m, this.pos.y + m],
-        to: [this.pos.x - r, this.pos.y + pcr],
-        style: style
-      }));
-
-      // legendes
-      // ARC bas gauche 1
-      children.push(new paper.Path.Arc({
-        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'
-      }));
-
-      // 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 - 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'
-      }));
-
-      // ARC haut gauche
-      children.push(new paper.Path.Arc({
-        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 - lar],
-        style: legende_style
-      }));
-      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 - lar],
-        through: [this.pos.x + q, this.pos.y - q],
-        to: [this.pos.x + lar, this.pos.y - pcr],
-        style: legende_style
-      }));
-      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 + 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
-      }));
-      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 + 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
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: dr,
-        style: style
-      }));
-      
-      // petit cercles
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y -r],
-        radius: pcr,
-        style: style
-      }));
-
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y + r],
-        radius: pcr,
-        style: style
-      }));
-
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x + r, this.pos.y],
-        radius: pcr,
-        style: style
-      }));
-
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x -r, this.pos.y],
-        radius: pcr,
-        style: style
-      }));
+      let children = [
+        // ARCS EXTERIEURS
+        // haut gauche
+        new paper.Path.Arc({
+          from: [this.pos.x - r, this.pos.y - pcr],
+          through: [this.pos.x - m, this.pos.y - m],
+          to: [this.pos.x - pcr, this.pos.y - r],
+          style: style
+        }),
+        // haut droite
+        new paper.Path.Arc({
+          from: [this.pos.x + pcr, this.pos.y - r],
+          through: [this.pos.x + m, this.pos.y - m],
+          to: [this.pos.x + r, this.pos.y - pcr],
+          style: style
+        }),
+        // bas droite
+        new paper.Path.Arc({
+          from: [this.pos.x + r, this.pos.y + pcr],
+          through: [this.pos.x + m, this.pos.y + m],
+          to: [this.pos.x + pcr, this.pos.y + r],
+          style: style
+        }),
+        // bas gauche
+        new paper.Path.Arc({
+          from: [this.pos.x - pcr, this.pos.y + r],
+          through: [this.pos.x - m, this.pos.y + m],
+          to: [this.pos.x - r, this.pos.y + pcr],
+          style: style
+        }),
+        //
+        // cercle interieur
+        new paper.Path.Circle({
+          center: [this.pos.x, this.pos.y],
+          radius: dr,
+          style: style
+        }),
+        //
+        // petit cercles
+        new paper.Path.Circle({
+          center: [this.pos.x, this.pos.y -r],
+          radius: pcr,
+          style: style
+        }),
+        new paper.Path.Circle({
+          center: [this.pos.x, this.pos.y + r],
+          radius: pcr,
+          style: style
+        }),
+        new paper.Path.Circle({
+          center: [this.pos.x + r, this.pos.y],
+          radius: pcr,
+          style: style
+        }),
+        new paper.Path.Circle({
+          center: [this.pos.x -r, this.pos.y],
+          radius: pcr,
+          style: style
+        }),
+        //
+        // AXES
+        // vertical haut
+        new paper.Path.Line({
+          from: [this.pos.x, this.pos.y - r + pcr],
+          to: [this.pos.x , this.pos.y - dr],
+          style: style
+        }),
+        // vertical bas
+        new paper.Path.Line({
+          from: [this.pos.x, this.pos.y + r - pcr],
+          to: [this.pos.x , this.pos.y + dr],
+          style: style
+        }),
+        // horizontal gauche
+        new paper.Path.Line({
+          from: [this.pos.x - r + pcr, this.pos.y],
+          to: [this.pos.x - dr, this.pos.y],
+          style: style
+        }),
+        // horizontal droite
+        new paper.Path.Line({
+          from: [this.pos.x + r - pcr, this.pos.y],
+          to: [this.pos.x + dr, this.pos.y],
+          style: style
+        }),
+        //
+        // DIAGONALES
+        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({
+          from: [this.pos.x - m, this.pos.y + m],
+          to: [this.pos.x - n, this.pos.y + n],
+          style: style
+        }),
+        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({
+          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({
+          segments: [
+            [this.pos.x - 2, this.pos.y - dr*1.5 - 2],
+            [this.pos.x, this.pos.y - dr*1.5],
+            [this.pos.x - 2, this.pos.y - dr*1.5 + 2]
+          ],
+          style: style
+        }),
+        // bas
+        new paper.Path({
+          segments: [
+            [this.pos.x + 2, this.pos.y + dr*1.5 - 2],
+            [this.pos.x, this.pos.y + dr*1.5],
+            [this.pos.x + 2, this.pos.y + dr*1.5 + 2]
+          ],
+          style: style
+        }),
+        // gauche
+        new paper.Path({
+          segments: [
+            [this.pos.x - dr*1.5 - 2, this.pos.y + 2],
+            [this.pos.x - dr*1.5, this.pos.y],
+            [this.pos.x - dr*1.5 + 2, this.pos.y + 2]
+          ],
+          style: style
+        }),
+        // droite
+        new paper.Path({
+          segments: [
+            [this.pos.x + dr*1.5 - 2, this.pos.y - 2],
+            [this.pos.x + dr*1.5, this.pos.y],
+            [this.pos.x + dr*1.5 + 2, this.pos.y - 2]
+          ],
+          style: style
+        }),
+        //
+        // LEGENDES
+        //
+        // arc bas gauche 1
+        new paper.Path.Arc({
+          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
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [this.pos.x - p, this.pos.y + o],
+          to: [this.pos.x - p_t, this.pos.y + o_t],
+          style: legende_style
+        }),
+        //text
+        new paper.PointText({
+          point: [this.pos.x - p_t - 1, this.pos.y + o_t],
+          content: "Enquête menée\nsur le terrain de vie",
+          fontSize: fontsize,
+          justification: 'right'
+        }),
+        // arc bas gauche 2
+        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 - lar, this.pos.y + pcr],
+          style: legende_style
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [this.pos.x - o, this.pos.y + p],
+          to: [this.pos.x - o_t, this.pos.y + p_t],
+          style: legende_style
+        }),
+        // texte
+        new paper.PointText({
+          point: [this.pos.x - o_t - 1, this.pos.y + p_t],
+          content: "Construction de groupes d'intérets\navec qui composer la doléance",
+          fontSize: fontsize,
+          justification: 'right'
+        }),
+        // arc haut gauche
+        new paper.Path.Arc({
+          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 - lar],
+          style: legende_style
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [this.pos.x - q, this.pos.y - q],
+          to: [this.pos.x - q_t, this.pos.y - q_t],
+          style: legende_style
+        }),
+        // texte
+        new paper.PointText({
+          point: [this.pos.x - q_t - 1, this.pos.y - q_t],
+          content: "Réception et traitement\nde la doléance",
+          fontSize: fontsize,
+          justification: 'right'
+        }),
+        // arc haut droite
+        new paper.Path.Arc({
+          from: [this.pos.x + pcr, this.pos.y - lar],
+          through: [this.pos.x + q, this.pos.y - q],
+          to: [this.pos.x + lar, this.pos.y - pcr],
+          style: legende_style
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [this.pos.x + q, this.pos.y - q],
+          to: [this.pos.x + q_t, this.pos.y - q_t],
+          style: legende_style
+        }),
+        // texte
+        new paper.PointText({
+          point: [this.pos.x + q_t + 1, this.pos.y - q_t],
+          content: "Mise-en-œuvre\nde la décision",
+          fontSize: fontsize,
+          justification: 'left'
+        }),
+        // arc bas droite 1
+        new paper.Path.Arc({
+          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
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [this.pos.x + o, this.pos.y + p],
+          to: [this.pos.x + o_t, this.pos.y + p_t],
+          style: legende_style
+        }),
+        // texte
+        new paper.PointText({
+          point: [this.pos.x + o_t + 1, this.pos.y + p_t],
+          content: "Réception et application\nde la décision",
+          fontSize: fontsize,
+          justification: 'left'
+        }),
+        // arc bas droite 2
+        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 + lar],
+          style: legende_style
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [this.pos.x + p, this.pos.y + o],
+          to: [this.pos.x + p_t, this.pos.y + o_t],
+          style: legende_style
+        }),
+        // texte
+        new paper.PointText({
+          point: [this.pos.x + p_t + 1, this.pos.y + o_t],
+          content: "Réussite / échec / reprise\ndu cercle politique",
+          fontSize: fontsize,
+          justification: 'left'
+        }),
+        //
+        // legendes petits cercles
+        // haut
+        new paper.Path.Circle({
+          center: [this.pos.x, this.pos.y -r],
+          radius: 0.5,
+          style: {
+            fillColor: '#000'
+          }
+        }),
+        new paper.Path.Line({
+          from: [this.pos.x, this.pos.y -r],
+          to: [this.pos.x, this.pos.y - r - 8],
+          style: legende_style
+        }),
+        new paper.PointText({
+          point: [this.pos.x, this.pos.y - r - 9],
+          content: "Décision",
+          fontSize: fontsize,
+          justification: 'center'
+        }),
+        // bas
+        new paper.Path.Circle({
+          center: [this.pos.x, this.pos.y + r],
+          radius: 0.5,
+          style: {
+            fillColor: '#000'
+          }
+        }),
+        new paper.Path.Line({
+          from: [this.pos.x, this.pos.y + r],
+          to: [this.pos.x, this.pos.y + r + 8],
+          style: legende_style
+        }),
+        new paper.PointText({
+          point: [this.pos.x, this.pos.y + r + 10],
+          content: "Début du cercle\nLe problème\n(injustice, indignation, plainte...)",
+          fontSize: fontsize,
+          justification: 'center'
+        }),
+        // droite
+        new paper.Path.Circle({
+          center: [this.pos.x + r, this.pos.y],
+          radius: 0.5,
+          style: {
+            fillColor: '#000'
+          }
+        }),
+        new paper.Path.Line({
+          from: [this.pos.x + r, this.pos.y],
+          to: [this.pos.x + r + 8, this.pos.y],
+          style: legende_style
+        }),
+        new paper.PointText({
+          point: [this.pos.x + r + 9, this.pos.y - 0.5],
+          content: "Adresse de la décision\nà appliquer",
+          fontSize: fontsize,
+          justification: 'left'
+        }),
+        // gauche
+        new paper.Path.Circle({
+          center: [this.pos.x -r, this.pos.y],
+          radius: 0.5,
+          style: {
+            fillColor: '#000'
+          }
+        }),
+        new paper.Path.Line({
+          from: [this.pos.x - r, this.pos.y],
+          to: [this.pos.x - r - 8, this.pos.y],
+          style: legende_style
+        }),
+        new paper.PointText({
+          point: [this.pos.x - r - 9, this.pos.y + 0.4],
+          content: "Adresse de la doléance",
+          fontSize: fontsize,
+          justification: 'right'
+        }),
+      ];
 
-      // axes
-      // vertical
-      // haut
-      children.push(new paper.Path.Line({
-        from: [this.pos.x, this.pos.y - r + pcr],
-        to: [this.pos.x , this.pos.y - dr],
-        style: style
-      }));
-      // bas
-      children.push(new paper.Path.Line({
-        from: [this.pos.x, this.pos.y + r - pcr],
-        to: [this.pos.x , this.pos.y + dr],
-        style: style
-      }));
-      
-      // horizontal
-      // gauche
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - r + pcr, this.pos.y],
-        to: [this.pos.x - dr, this.pos.y],
-        style: style
-      }));
-      // droite
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + r - pcr, this.pos.y],
-        to: [this.pos.x + dr, this.pos.y],
-        style: style
-      }));
 
-      // diagonales
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + m, this.pos.y + m],
-        to: [this.pos.x + n, this.pos.y + n],
-        style: style
-      }));
-      //
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - m, this.pos.y + m],
-        to: [this.pos.x - n, this.pos.y + n],
-        style: style
-      }));
-      //
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + m, this.pos.y - m],
-        to: [this.pos.x + n, this.pos.y - n],
-        style: style
-      }));
-      //
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - m, this.pos.y - m],
-        to: [this.pos.x - n, this.pos.y - n],
-        style: style
-      }));
-      
       return new paper.Group({
         children: children,
         pivot: new paper.Point(this.pos),
@@ -1177,7 +1321,7 @@ export default {
           .to({
             s: 7,
             x: (this.canvas.width - 450) / 2,
-            y: this.canvas.height / 2 + 50,
+            y: this.canvas.height / 2 + 30,
             o: 0.8
           }, 800)
           .onUpdate((obj) => {