refactoring: convertion off all static common paper objects (backgrounds & icon) into symbols for perf optimization DONE

src/components/ConcernementMapItem.vue

@@ -32,13 +32,6 @@ import { mapState, mapActions } from 'pinia'
 import { ConcernementsStore } from '@/stores/concernements'
 import { CommonStore } from '@/stores/common'
 
-import iconAction from "@/assets/icons/action.svg"
-import iconDoleancer from "@/assets/icons/doleancer.svg"
-import iconProximite from "@/assets/icons/proximite.svg"
-import iconPuissanceagir from "@/assets/icons/puissancedagir.svg"
-import iconSuperposition from "@/assets/icons/superposition.svg"
-import iconTerraindevie from "@/assets/icons/terraindevie.svg"
-
 export default {
   inject: ['canvasMap', 'matterEngine'],
   data() {
@@ -380,19 +373,18 @@ export default {
       this.addNewPaperSymbolInstance('boussole_bg');
       this.paper_main_object.addChild(this.setPaperContour());
       this.paper_main_object.addChild(this.setPaperEntites());
-      // this.paper_groups.entites = this.setPaperEntites()
 
       if (this.concernement.has_puissancedagir) {
-        this.paper_main_object.addChild(this.setPaperPuissanceagirBG());
-        this.paper_main_object.addChild(this.setPaperPuissanceagirICON());
+        this.addNewPaperSymbolInstance('puissanceagir_bg');
+        this.addNewPaperSymbolInstance('puissanceagir_icon');
         this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins());
       }
       if (this.concernement.has_agissantes) {
         this.paper_main_object.addChild(this.setPaperAgissantes());
       }
       if (this.concernement.has_doleance) {
-        this.paper_main_object.addChild(this.setPaperDoleanceBG());
-        this.paper_main_object.addChild(this.setPaperDoleanceICON());
+        this.addNewPaperSymbolInstance('doleance_bg');
+        this.addNewPaperSymbolInstance('doleance_icon');
         this.paper_main_object.addChild(this.setPaperDoleanceSteps());
       }
       console.log(`initPaperObjects ${this.id}`, this.paper_main_object);
@@ -400,10 +392,12 @@ export default {
       this.initPaperEvents()
     },
     addNewPaperSymbolInstance(name){
-      let instance = new paper.SymbolItem(this.paper_symbol_definitions[name]);
+      let instance = new paper.SymbolItem(this.paper_symbol_definitions[name]); // , {x:0,y:0}
       instance.name = name;
+      // instance.pivot = new paper.Point({x:0,y:0});
       instance.position = this.pos;
       instance.scale = this.scale;
+      instance.locked = true;
       this.paper_main_object.addChild(instance);
     },
     setPaperContour(){
@@ -521,80 +515,6 @@ export default {
       }
       return g;
     },
-    setPaperPuissanceagirBG(){
-      let children = [];
-
-      for (let i = 1; i < 6; i++) {
-        children.push(new paper.Path.Circle({
-          center: [this.pos.x, this.pos.y],
-          radius: ((this.ray*this.scale)/5)*i,
-          strokeWidth: 0.5
-        }));
-      }
-
-      for (let j = 0; j < 4; j++) {
-        let a  = (90 / 4) * j;
-        // diagonale
-        // 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)
-        let x = Math.cos(a*(Math.PI/180)) * this.ray * this.scale;
-        let y = Math.sin(a*(Math.PI/180)) * this.ray * this.scale;
-        
-        children.push(new paper.Path.Line({
-          from: [this.pos.x + x, this.pos.y + y],
-          to: [this.pos.x - x, this.pos.y - y],
-          strokeWidth: 1,
-          dashArray: [5,5]
-        }))
-
-        children.push(new paper.Path.Line({
-          from: [this.pos.x - y, this.pos.y + x],
-          to: [this.pos.x + y, this.pos.y - x],
-          strokeWidth: 1,
-          dashArray: [5,5]
-        }))
-
-      }
-      
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: this.ray*this.scale,
-        strokeWidth: 2,
-        fillColor: `rgba(255,255,255,0.6)`
-      }));
-
-
-      return new paper.Group({
-        children: children,
-        pivot: new paper.Point(this.pos),
-        name: 'puissanceagir_bg',
-        // locked: true,
-        style: {
-          strokeColor: '#fff'
-        }
-      });
-    },
-    setPaperPuissanceagirICON(){
-      let children = [];
-
-      let svgIcon = paper.project.importSVG(iconPuissanceagir);
-      children.push(svgIcon);
-      svgIcon.position = this.pos;
-      
-      return new paper.Group({
-        children: children,
-        pivot: new paper.Point(this.pos),
-        name: 'puissanceagir_icon',
-        locked: true,
-        style: {
-          strokeColor: '#000',
-          strokeWidth: 1,
-          fillColor: null
-        }
-      });
-    },
     setPaperPuissanceagirBesoins(){
       let g = new paper.Group({
         pivot: new paper.Point(this.pos),
@@ -662,443 +582,10 @@ export default {
         [x - r, y],
         [x, y - r]
       ];
-    },
-    setPaperDoleanceBG(){
-      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
-      // console.log('m', m);
-
-      // points for legende arcs
-      var lar = r*1.1;                       // legendes arcs rayon
-      let o = Math.cos(22.5*(Math.PI/180)) * lar; // x @ 22.5° for legende arc 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',
-        strokeWidth: 1
-      }
-      let felchesstyle = {
-        strokeColor: '#fff',
-        strokeWidth: 2
-      }
-
-      let legende_style = {
-        strokeColor: '#000',
-        strokeWidth: 1
-      }
-
-      let fontsize = 4;
-      let fontFamily = "public_sans";
-
-      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
-        // 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
-        }),
-        // // haut 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
-        // }),
-        // // haut 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
-        // }),
-        // 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: felchesstyle
-        }),
-        // 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: felchesstyle
-        }),
-        // 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: felchesstyle
-        }),
-        // 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: felchesstyle
-        }),
-        //
-        // 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,
-          fontFamily: fontFamily,
-          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,
-          fontFamily: fontFamily,
-          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,
-          fontFamily: fontFamily,
-          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,
-          fontFamily: fontFamily,
-          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,
-          fontFamily: fontFamily,
-          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,
-          fontFamily: fontFamily,
-          justification: 'left'
-        }),
-        //
-        // Points Cardinaux
-        //
-        // 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 - 9],
-          style: legende_style
-        }),
-        new paper.PointText({
-          point: [this.pos.x, this.pos.y - r - 11],
-          content: "Décision",
-          fontSize: fontsize,
-          fontFamily: fontFamily,
-          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 + 9],
-          style: legende_style
-        }),
-        new paper.PointText({
-          point: [this.pos.x, this.pos.y + r + 14],
-          content: "Début du cercle\nLe problème\n(injustice, indignation, plainte...)",
-          fontSize: fontsize,
-          fontFamily: fontFamily,
-          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 + 10, this.pos.y - 0.5],
-          content: "Adresse de la décision\nà appliquer",
-          fontSize: fontsize,
-          fontFamily: fontFamily,
-          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 - 10, this.pos.y + 0.4],
-          content: "Adresse de la doléance",
-          fontSize: fontsize,
-          fontFamily: fontFamily,
-          justification: 'right'
-        }),
-      ];
-
-
-      return new paper.Group({
-        children: children,
-        pivot: new paper.Point(this.pos),
-        name: 'doleance_bg',
-        locked: true
-      });
-    },
-    setPaperDoleanceICON(){
-      let children = [];
-
-      let svgIcon = paper.project.importSVG(iconDoleancer);
-      children.push(svgIcon);
-      svgIcon.position = this.pos;
-
-      return new paper.Group({
-        children: children,
-        pivot: new paper.Point(this.pos),
-        name: 'doleance_icon',
-        locked: true,
-        style: {
-          strokeColor: '#000',
-          strokeWidth: 1,
-          fillColor: null
-        }
-      });
-
-
     },
     setPaperDoleanceSteps(){
       let g = new paper.Group({
-        pivot: new paper.Point(this.pos),
+        pivot: new paper.Point({x:0,y:0}),
         name: 'doleance_steps'
       });
       let doleance = this.concernement.doleances[0];
@@ -1161,7 +648,7 @@ export default {
       
       var r = this.ray * this.scale * 0.8;  // ray
       var dr = r/2;                         // demi ray
-      var pcr = 2*this.scale;               // petits cercle rayon
+      // 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

src/components/MapConcernements.vue

@@ -18,6 +18,13 @@ import { CommonStore } from '@/stores/common'
 
 import ConcernementMapPopup from '@components/ConcernementMapPopup.vue';
 
+// import iconTerraindevie from "@/assets/icons/terraindevie.svg"
+// import iconProximite from "@/assets/icons/proximite.svg"
+// import iconSuperposition from "@/assets/icons/superposition.svg"
+import iconPuissanceagir from "@/assets/icons/puissancedagir.svg"
+// import iconAction from "@/assets/icons/action.svg"
+import iconDoleancer from "@/assets/icons/doleancer.svg"
+
 export default {
   data() {
     return {
@@ -150,6 +157,10 @@ export default {
     },
     initPaperSymbols(){
       this.addPaperSymbolDefinition('boussole_bg', this.setPaperBoussoleBGSymbol());
+      this.addPaperSymbolDefinition('puissanceagir_bg', this.setPaperPuissanceagirBGSymbol());
+      this.addPaperSymbolDefinition('puissanceagir_icon', this.setPaperPuissanceagirICONSymbol());
+      this.addPaperSymbolDefinition('doleance_bg', this.setPaperDoleanceBGSymbol());
+      this.addPaperSymbolDefinition('doleance_icon', this.setPaperDoleanceICONSymbol());
     },
     setPaperBoussoleBGSymbol(){
       // BOUSSOLE
@@ -297,6 +308,497 @@ export default {
         locked: true,
       });
 
+    },
+    setPaperPuissanceagirBGSymbol(){
+      let children = [];
+      let ray = 100;
+      let pos = {x:0,y:0};
+
+      // cercles interieur
+      for (let i = 1; i < 6; i++) {
+        children.push(new paper.Path.Circle({
+          center: [pos.x, pos.y],
+          radius: (ray/5)*i,
+          strokeWidth: 0.25
+        }));
+      }
+
+      // rayons
+      for (let j = 0; j < 16; j++) {
+        let a  = (360 / 16) * j;
+        
+        let ext_x = Math.cos(a*(Math.PI/180)) * ray;
+        let ext_y = Math.sin(a*(Math.PI/180)) * ray;
+        let int_x = Math.cos(a*(Math.PI/180)) * 2;
+        let int_y = Math.sin(a*(Math.PI/180)) * 2;
+
+        children.push(new paper.Path.Line({
+          from: [pos.x + ext_x, pos.y + ext_y],
+          to: [pos.x + int_x, pos.y + int_y],
+          strokeWidth: 0.25,
+          dashArray: [0.5,1]
+        }))
+      }
+      
+      // cercle exterieur
+      children.push(new paper.Path.Circle({
+        center: [pos.x, pos.y],
+        radius: ray,
+        strokeWidth: 0.5,
+        fillColor: `rgba(255,255,255,0.6)`
+      }));
+
+
+      return new paper.Group({
+        children: children,
+        pivot: new paper.Point(pos),
+        name: 'puissanceagir_bg',
+        // locked: true,
+        style: {
+          strokeColor: '#fff'
+        }
+      });
+    },
+    setPaperPuissanceagirICONSymbol(){
+      let children = [];
+
+      let svgIcon = paper.project.importSVG(iconPuissanceagir);
+      children.push(svgIcon);
+      svgIcon.position = this.pos;
+      
+      return new paper.Group({
+        children: children,
+        pivot: new paper.Point(this.pos),
+        name: 'puissanceagir_icon',
+        locked: true,
+        style: {
+          strokeColor: '#000',
+          strokeWidth: 0.75,
+          fillColor: null
+        }
+      });
+    },
+    setPaperDoleanceBGSymbol(){
+      let ray = 100;
+      let pos = {x:0,y:0};
+      var r = ray * 0.8;  // ray
+      var dr = r/2;                         // demi ray
+      var pcr = 2;               // 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
+      // console.log('m', m);
+
+      // points for legende arcs
+      var lar = r*1.1;                       // legendes arcs rayon
+      let o = Math.cos(22.5*(Math.PI/180)) * lar; // x @ 22.5° for legende arc 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', strokeWidth: 0.25}
+      let felchesstyle = {strokeColor: '#fff', strokeWidth: 0.5}
+      let legende_style = {strokeColor: '#000', strokeWidth: 0.25}
+      let fontsize = 4;
+      let fontFamily = "public_sans";
+
+      let children = [
+
+        // big global exterior circle to keep center aligned
+        new paper.Path.Circle({
+          center: [0, 0],
+          radius: r*2,
+          style: {
+            strokeColor: 'rgba(255,255,255,0)',
+            strokeWidth: 0.5
+          }
+        }),
+        //
+        // ARCS EXTERIEURS
+        // haut gauche
+        new paper.Path.Arc({
+          from: [- r, -pcr],
+          through: [- m, -m],
+          to: [ -pcr, -r],
+          style: style
+        }),
+        // haut droite
+        new paper.Path.Arc({
+          from: [pcr, -r],
+          through: [m, -m],
+          to: [r, -pcr],
+          style: style
+        }),
+        // bas droite
+        new paper.Path.Arc({
+          from: [r, pcr],
+          through: [m, m],
+          to: [pcr, r],
+          style: style
+        }),
+        // bas gauche
+        new paper.Path.Arc({
+          from: [-pcr, r],
+          through: [-m, m],
+          to: [-r, pcr],
+          style: style
+        }),
+        //
+        // cercle interieur
+        new paper.Path.Circle({
+          center: [0, 0],
+          radius: dr,
+          style: style
+        }),
+        //
+        // petit cercles
+        new paper.Path.Circle({
+          center: [0, -r],
+          radius: pcr,
+          style: style
+        }),
+        new paper.Path.Circle({
+          center: [0, r],
+          radius: pcr,
+          style: style
+        }),
+        new paper.Path.Circle({
+          center: [r, 0],
+          radius: pcr,
+          style: style
+        }),
+        new paper.Path.Circle({
+          center: [-r, 0],
+          radius: pcr,
+          style: style
+        }),
+        //
+        // AXES
+        // vertical haut
+        new paper.Path.Line({
+          from: [0, -r + pcr],
+          to: [0, -dr],
+          style: style
+        }),
+        // vertical bas
+        new paper.Path.Line({
+          from: [0, r - pcr],
+          to: [0, dr],
+          style: style
+        }),
+        // horizontal gauche
+        new paper.Path.Line({
+          from: [-r + pcr, 0],
+          to: [-dr, 0],
+          style: style
+        }),
+        // horizontal droite
+        new paper.Path.Line({
+          from: [r - pcr, 0],
+          to: [dr, 0],
+          style: style
+        }),
+        //
+        // DIAGONALES
+        // bas droite
+        new paper.Path.Line({
+          from: [m, m],
+          to: [n, n],
+          style: style
+        }),
+        // bas gauche
+        new paper.Path.Line({
+          from: [-m, m],
+          to: [-n, n],
+          style: style
+        }),
+        // fleches
+        // haut
+        new paper.Path({
+          segments: [
+            [-2, -dr*1.5 - 2],
+            [0, -dr*1.5],
+            [-2, -dr*1.5 + 2]
+          ],
+          style: felchesstyle
+        }),
+        // bas
+        new paper.Path({
+          segments: [
+            [2, dr*1.5 - 2],
+            [0, dr*1.5],
+            [2, dr*1.5 + 2]
+          ],
+          style: felchesstyle
+        }),
+        // gauche
+        new paper.Path({
+          segments: [
+            [-dr*1.5 - 2, 2],
+            [-dr*1.5, 0],
+            [-dr*1.5 + 2, 2]
+          ],
+          style: felchesstyle
+        }),
+        // droite
+        new paper.Path({
+          segments: [
+            [dr*1.5 - 2, -2],
+            [dr*1.5, 0],
+            [dr*1.5 + 2, -2]
+          ],
+          style: felchesstyle
+        }),
+        //
+        // LEGENDES
+        //
+        // arc bas gauche 1
+        new paper.Path.Arc({
+          from: [-pcr, lar],
+          through: [-p, o],
+          to: [-q + pcr/2, q + pcr/2],
+          style: legende_style
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [-p, o],
+          to: [-p_t, o_t],
+          style: legende_style
+        }),
+        //text
+        new paper.PointText({
+          point: [-p_t - 1, o_t],
+          content: "Enquête menée\nsur le terrain de vie",
+          fontSize: fontsize,
+          fontFamily: fontFamily,
+          justification: 'right'
+        }),
+        // arc bas gauche 2
+        new paper.Path.Arc({
+          from: [-q - pcr/2, q - pcr/2],
+          through: [-o, p],
+          to: [-lar, pcr],
+          style: legende_style
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [-o, p],
+          to: [-o_t, p_t],
+          style: legende_style
+        }),
+        // texte
+        new paper.PointText({
+          point: [-o_t - 1, p_t],
+          content: "Construction de groupes d'intérets\navec qui composer la doléance",
+          fontSize: fontsize,
+          fontFamily: fontFamily,
+          justification: 'right'
+        }),
+        // arc haut gauche
+        new paper.Path.Arc({
+          from: [-lar, -pcr],
+          through: [-q, -q],
+          to: [-pcr, -lar],
+          style: legende_style
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [-q, -q],
+          to: [-q_t, -q_t],
+          style: legende_style
+        }),
+        // texte
+        new paper.PointText({
+          point: [-q_t - 1, -q_t],
+          content: "Réception et traitement\nde la doléance",
+          fontSize: fontsize,
+          fontFamily: fontFamily,
+          justification: 'right'
+        }),
+        // arc haut droite
+        new paper.Path.Arc({
+          from: [pcr, -lar],
+          through: [q, -q],
+          to: [lar, -pcr],
+          style: legende_style
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [q, -q],
+          to: [q_t, -q_t],
+          style: legende_style
+        }),
+        // texte
+        new paper.PointText({
+          point: [q_t + 1, -q_t],
+          content: "Mise-en-œuvre\nde la décision",
+          fontSize: fontsize,
+          fontFamily: fontFamily,
+          justification: 'left'
+        }),
+        // arc bas droite 1
+        new paper.Path.Arc({
+          from: [lar, pcr],
+          through: [o, p],
+          to: [q + pcr/2, q - pcr/2],
+          style: legende_style
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [o, p],
+          to: [o_t, p_t],
+          style: legende_style
+        }),
+        // texte
+        new paper.PointText({
+          point: [o_t + 1, p_t],
+          content: "Réception et application\nde la décision",
+          fontSize: fontsize,
+          fontFamily: fontFamily,
+          justification: 'left'
+        }),
+        // arc bas droite 2
+        new paper.Path.Arc({
+          from: [q - pcr/2, q + pcr/2],
+          through: [p, o],
+          to: [pcr, lar],
+          style: legende_style
+        }),
+        // tiret
+        new paper.Path.Line({
+          from: [p, o],
+          to: [p_t, o_t],
+          style: legende_style
+        }),
+        // texte
+        new paper.PointText({
+          point: [p_t + 1, o_t],
+          content: "Réussite / échec / reprise\ndu cercle politique",
+          fontSize: fontsize,
+          fontFamily: fontFamily,
+          justification: 'left'
+        }),
+        //
+        // Points Cardinaux
+        //
+        // haut
+        new paper.Path.Circle({
+          center: [0, -r],
+          radius: 0.5,
+          style: {
+            fillColor: '#000'
+          }
+        }),
+        new paper.Path.Line({
+          from: [0, -r],
+          to: [0, -r - 9],
+          style: legende_style
+        }),
+        new paper.PointText({
+          point: [0, -r - 11],
+          content: "Décision",
+          fontSize: fontsize,
+          fontFamily: fontFamily,
+          justification: 'center'
+        }),
+        // bas
+        new paper.Path.Circle({
+          center: [0, r],
+          radius: 0.5,
+          style: {
+            fillColor: '#000'
+          }
+        }),
+        new paper.Path.Line({
+          from: [0, r],
+          to: [0, r + 9],
+          style: legende_style
+        }),
+        new paper.PointText({
+          point: [0, r + 14],
+          content: "Début du cercle\nLe problème\n(injustice, indignation, plainte...)",
+          fontSize: fontsize,
+          fontFamily: fontFamily,
+          justification: 'center'
+        }),
+        // droite
+        new paper.Path.Circle({
+          center: [r, 0],
+          radius: 0.5,
+          style: {
+            fillColor: '#000'
+          }
+        }),
+        new paper.Path.Line({
+          from: [r, 0],
+          to: [r + 8, 0],
+          style: legende_style
+        }),
+        new paper.PointText({
+          point: [r + 10, -0.5],
+          content: "Adresse de la décision\nà appliquer",
+          fontSize: fontsize,
+          fontFamily: fontFamily,
+          justification: 'left'
+        }),
+        // gauche
+        new paper.Path.Circle({
+          center: [-r, 0],
+          radius: 0.5,
+          style: {
+            fillColor: '#000'
+          }
+        }),
+        new paper.Path.Line({
+          from: [-r, 0],
+          to: [-r - 8, 0],
+          style: legende_style
+        }),
+        new paper.PointText({
+          point: [-r - 10, 0.4],
+          content: "Adresse de la doléance",
+          fontSize: fontsize,
+          fontFamily: fontFamily,
+          justification: 'right'
+        }),
+      ];
+
+      return new paper.Group({
+        children: children,
+        pivot: new paper.Point(pos),
+        name: 'doleance_bg',
+        // locked: true
+      });
+    },
+    setPaperDoleanceICONSymbol(){
+      let children = [];
+
+      let svgIcon = paper.project.importSVG(iconDoleancer);
+      children.push(svgIcon);
+      svgIcon.position = this.pos;
+
+      return new paper.Group({
+        children: children,
+        pivot: new paper.Point(this.pos),
+        name: 'doleance_icon',
+        locked: true,
+        style: {
+          strokeColor: '#000',
+          strokeWidth: 0.75,
+          fillColor: null
+        }
+      });
+
+
     }
   },
   beforeUpdate () {