refactoring: converting all static commun paper objects (like backgrounds) into symbols for perf optimization

src/components/ConcernementMapItem.vue

@@ -74,7 +74,8 @@ export default {
     ...mapState(ConcernementsStore,['opened_concernement']),
     ...mapState(ConcernementsStore,['opened_entite_id']),
     ...mapState(CommonStore,['hover_elmt']),
-    ...mapState(CommonStore,['cartouch_width'])
+    ...mapState(CommonStore,['cartouch_width']),
+    ...mapState(CommonStore,['paper_symbol_definitions'])
   },
   created () {
     // console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
@@ -369,11 +370,14 @@ export default {
     },
     // PAPER OBJECTS
     initPaperObjects(){
+      // the main paper group containing all paper graphical items for one concernement
       this.paper_main_object = new paper.Group({
         pivot: new paper.Point(this.pos),
         cid: this.id
       });
-      this.paper_main_object.addChild(this.setPaperBoussoleBG());
+
+      // the sub items for one concernement
+      this.addNewPaperSymbolInstance('boussole_bg');
       this.paper_main_object.addChild(this.setPaperContour());
       this.paper_main_object.addChild(this.setPaperEntites());
       // this.paper_groups.entites = this.setPaperEntites()
@@ -395,165 +399,12 @@ export default {
 
       this.initPaperEvents()
     },
-    setPaperBoussoleBG(){
+    addNewPaperSymbolInstance(name){
-      // BOUSSOLE
+      let instance = new paper.SymbolItem(this.paper_symbol_definitions[name]);
-      let children = [];
+      instance.name = name;
-      let ray = this.ray*0.92*this.scale;
+      instance.position = this.pos;
-
+      instance.scale = this.scale;
-      // // // exterieur circle
+      this.paper_main_object.addChild(instance);
-      // children.push(new paper.Path.Circle({
-      //   center: [this.pos.x, this.pos.y],
-      //   radius: ray,
-      //   strokeWidth: 2
-      // }));
-
-      // // interieur circle
-      // children.push(new paper.Path.Circle({
-      //   center: [this.pos.x, this.pos.y],
-      //   radius: this.ray/2*this.scale,
-      //   strokeWidth: 2
-      // }));
-
-      // cercles pointillés
-      for (let i = 1; i < 9; i++) {
-        let sw = i === 4 || i === 8 ? 2 : 1;
-        let da = i === 4 || i === 8 ? null : [5,5];
-        children.push(new paper.Path.Circle({
-          center: [this.pos.x, this.pos.y],
-          radius: ray/8*i,
-          strokeColor: '#fff',
-          strokeWidth: sw,
-          dashArray: da
-        }));
-        
-      }
-
-      // axes
-      // vertical
-      children.push(new paper.Path.Line({
-        from: [this.pos.x, this.pos.y - ray],
-        to: [this.pos.x, this.pos.y + ray],
-        strokeColor: '#fff',
-        strokeWidth: 2
-      }));
-      // horizontal
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - ray, this.pos.y],
-        to: [this.pos.x + ray, this.pos.y],
-        strokeColor: '#fff',
-        strokeWidth: 2
-      }))
-      
-      // fleches
-      // haute
-      children.push(new paper.Path({
-        segments: [
-          [this.pos.x - (8*this.scale), this.pos.y - ray + (8*this.scale)],
-          [this.pos.x, this.pos.y - ray],
-          [this.pos.x + (8*this.scale), this.pos.y - ray + (8*this.scale)],
-        ],
-        strokeWidth: 2,
-        strokeColor: '#fff',
-      }));
-      // milieu
-      children.push(new paper.Path({
-        segments: [
-        [this.pos.x - (8*this.scale), this.pos.y + (8*this.scale)],
-        [this.pos.x, this.pos.y],
-        [this.pos.x + (8*this.scale), this.pos.y + (8*this.scale)],
-        ],
-        strokeWidth: 2,
-        strokeColor: '#fff',
-      }));
-
-
-      // MOINS - PLUS
-      // PLUS
-      // horizontal
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + ray - (5 * this.scale), this.pos.y - ray],
-        to: [this.pos.x + ray + (5 * this.scale), this.pos.y - ray],
-        strokeWidth: 8,
-        strokeColor: '#fff',
-      }))
-      // vertical
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + ray, this.pos.y - ray - (5 * this.scale)],
-        to: [this.pos.x + ray, this.pos.y - ray + (5 * this.scale)],
-        strokeWidth: 8,
-        strokeColor: '#fff',
-      }))
-      
-      // MOINS
-      // horizontal
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - ray - (5 * this.scale), this.pos.y - ray],
-        to: [this.pos.x - ray + (5 * this.scale), this.pos.y - ray],
-        strokeWidth: 8,
-        strokeColor: '#fff',
-      }))
-
-      let fontsize = 4;
-      let fontFamily = "public_sans";
-      
-      children.push(new paper.PointText({
-        point: [this.pos.x + 4.5, this.pos.y - ray - 5],
-        content: `entités qui menacent \u2194 entités qui maintiennent`,
-        fontSize: fontsize,
-        fontFamily: fontFamily,
-        justification: 'center',
-        fillColor: '#000',
-      }))
-
-      children.push(new paper.PointText({
-        point: [this.pos.x - ray - 5, this.pos.y + 1],
-        content: "axe d'intensité",
-        fontSize: fontsize,
-        fontFamily: fontFamily,
-        justification: 'right',
-        fillColor: '#000',
-      }))
-
-      children.push(new paper.PointText({
-        point: [this.pos.x + ray + 5, this.pos.y - 3],
-        content: "situation future\n\u2195\nsituation actuelle",
-        fontSize: fontsize,
-        fontFamily: fontFamily,
-        justification: 'left',
-        fillColor: '#000',
-      }))
-
-
-      let t1 = new paper.PointText({
-        point: [this.pos.x - ray/8*2.3, this.pos.y - ray/8*2.3],
-        content: "avec prise",
-        fontSize: fontsize,
-        fontFamily: fontFamily,
-        justification: 'center',
-        fillColor: '#000',
-      })
-      t1.rotate(-45)
-      children.push(t1)
-
-      let t2 = new paper.PointText({
-        point: [this.pos.x - ray/8*2.95, this.pos.y - ray/8*2.95],
-        content: "sans prise",
-        fontSize: fontsize,
-        fontFamily: fontFamily,
-        justification: 'center',
-        fillColor: '#000',
-      })
-      t2.rotate(-45)
-      children.push(t2)
-
-
-      return new paper.Group({
-        children: children,
-        pivot: new paper.Point(this.pos),
-        name: 'boussole_bg',
-        locked: true,
-      });
-
     },
     setPaperContour(){
       console.log(`setPaperContour ${this.concernement.id}`);
@@ -588,111 +439,6 @@ export default {
         const vnao  = { x: vma.y, y: -vma.x }     // get the ma normal vector Out
         const hao   = [ vnao.x*hlo, vnao.y*hlo ]; // get the handleOut point
 
-        // - / - / - / - / - / - / - / - / - / - / - / - / - / - / - /
-        if (d) {
-          let debug = new paper.Group({
-            pivot: new paper.Point(this.pos),
-            name: 'debug'
-          });
-          // B
-          debug.addChild(new paper.PointText({
-            point: [this.pos.x + b.x, this.pos.y + b.y],
-            content: "b",
-            fontSize: 10,
-            justification: 'center',
-            fillColor: 'red'
-          }))
-          // A
-          debug.addChild(new paper.PointText({
-            point: [this.pos.x + a.x, this.pos.y + a.y],
-            content: "a",
-            fontSize: 10,
-            justification: 'center',
-            fillColor: 'red'
-          }))
-          // C
-          debug.addChild(new paper.PointText({
-            point: [this.pos.x + c.x, this.pos.y + c.y],
-            content: "c",
-            fontSize: 10,
-            justification: 'center',
-            fillColor: 'red'
-          }))
-          // N
-          debug.addChild(new paper.PointText({
-            point: [this.pos.x + n.x, this.pos.y + n.y],
-            content: "n",
-            fontSize: 10,
-            justification: 'center',
-            fillColor: 'red'
-          }))
-          // M
-          debug.addChild(new paper.PointText({
-            point: [this.pos.x + m.x, this.pos.y + m.y],
-            content: "m",
-            fontSize: 10,
-            justification: 'center',
-            fillColor: 'red'
-          }))
-          // BA
-          debug.addChild(new paper.Path.Line({
-            from: [this.pos.x + b.x, this.pos.y + b.y],
-            to: [this.pos.x + a.x, this.pos.y + a.y],
-            strokeWidth: 4,
-            strokeColor: 'green',
-            // dashArray: [5,5]
-          }))
-          // CA
-          debug.addChild(new paper.Path.Line({
-            from: [this.pos.x + c.x, this.pos.y + c.y],
-            to: [this.pos.x + a.x, this.pos.y + a.y],
-            strokeWidth: 4,
-            strokeColor: 'green',
-            // dashArray: [5,5]
-          }))
-          // NA
-          debug.addChild(new paper.Path.Line({
-            from: [this.pos.x + n.x, this.pos.y + n.y],
-            to: [this.pos.x + a.x, this.pos.y + a.y],
-            strokeWidth: 2,
-            strokeColor: 'blue',
-            // dashArray: [5,5]
-          }))
-          // NC
-          debug.addChild(new paper.Path.Line({
-            from: [this.pos.x + n.x, this.pos.y + n.y],
-            to: [this.pos.x + c.x, this.pos.y + c.y],
-            strokeWidth: 2,
-            strokeColor: 'orange',
-            // dashArray: [5,5]
-          }))
-          // // MA
-          // debug.addChild(new paper.Path.Line({
-          //   from: [this.pos.x + m.x, this.pos.y + m.y],
-          //   to: [this.pos.x + a.x, this.pos.y + a.y],
-          //   strokeWidth: 1,
-          //   strokeColor: 'red',
-          //   // dashArray: [5,5]
-          // }))
-          // // NC
-          // debug.addChild(new paper.Path.Line({
-          //   from: [this.pos.x + n.x, this.pos.y + n.y],
-          //   to: [this.pos.x + c.x, this.pos.y + c.y],
-          //   strokeWidth: 1,
-          //   strokeColor: 'green',
-            // dashArray: [5,5]
-          // }))
-          this.paper_main_object.addChild(debug)
-          
-        }
-        // - / - / - / - / - / - / - / - / - / - / - / - / - / - / - /
-        // return new paper.Segment({
-        //   point: [
-        //     this.pos.x+(a.x)*this.scale,
-        //     this.pos.y+(a.y)*this.scale
-        //   ]
-        // })
-
         return new paper.Segment({
           point: pa,
           handleIn: hai,

src/components/MapConcernements.vue

@@ -49,7 +49,8 @@ export default {
     ...mapState(ConcernementsStore,['concernements']),
     ...mapState(ConcernementsStore,['concernementsByID']),
     // ...mapState(ConcernementsStore,['opened_concernement']),
-    ...mapState(CommonStore,['hover_elmt'])
+    ...mapState(CommonStore,['hover_elmt']),
+    ...mapState(CommonStore,['paper_symbol_definitions'])
   },
   created() {
     // MATTER
@@ -73,8 +74,13 @@ export default {
     let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
     console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
 
+    // PAPER
     this.paper = paper.setup(this.canvasMap.canvas);
-    // // use the paper.view click to get back if no items is clicked
+    
+    // symbol defintions
+    this.initPaperSymbols();
+
+    // use the paper.view click to get back if no items is clicked
     this.paper.view.onClick = function(event) {
       console.log("view onClick", this, event.target);
       if(event.target._id === "paper-view-0") {
@@ -135,13 +141,163 @@ export default {
   },
   methods: {
     ...mapActions(ConcernementsStore,['setMapMode']),
-    ...mapActions(ConcernementsStore,['openCloseConcernements']),
     ...mapActions(ConcernementsStore,['resetConcernementOpened']),
-    ...mapActions(CommonStore,['setHoverElmt']),
+    // ...mapActions(ConcernementsStore,['openCloseConcernements']),
+    ...mapActions(CommonStore,['addPaperSymbolDefinition']),
     animate () {
       Matter.Engine.update(this.engine, 1);
       window.requestAnimationFrame(this.animate);
     },
+    initPaperSymbols(){
+      this.addPaperSymbolDefinition('boussole_bg', this.setPaperBoussoleBGSymbol());
+    },
+    setPaperBoussoleBGSymbol(){
+      // BOUSSOLE
+      let children = [];
+      let ray = 100;
+      let pos = {x:0, y:0};
+
+      // cercles pointillés
+      for (let i = 1; i < 9; i++) {
+        let sw = i === 4 || i === 8 ? 0.5 : 0.25;
+        let da = i === 4 || i === 8 ? null : [5,5];
+        children.push(new paper.Path.Circle({
+          center: [pos.x, pos.y],
+          radius: ray/8*i,
+          strokeColor: '#fff',
+          strokeWidth: sw,
+          dashArray: da
+        }));
+        
+      }
+
+      // axes
+      // vertical
+      children.push(new paper.Path.Line({
+        from: [pos.x, pos.y - ray],
+        to: [pos.x, pos.y + ray],
+        strokeColor: '#fff',
+        strokeWidth: 0.5
+      }));
+      // horizontal
+      children.push(new paper.Path.Line({
+        from: [pos.x - ray, pos.y],
+        to: [pos.x + ray, pos.y],
+        strokeColor: '#fff',
+        strokeWidth: 0.5
+      }))
+      
+      // fleches
+      // haute
+      children.push(new paper.Path({
+        segments: [
+          [pos.x - 8, pos.y - ray + 8],
+          [pos.x, pos.y - ray],
+          [pos.x + 8, pos.y - ray + 8],
+        ],
+        strokeWidth: 0.5,
+        strokeColor: '#fff',
+      }));
+      // milieu
+      children.push(new paper.Path({
+        segments: [
+        [pos.x - 8, pos.y + 8],
+        [pos.x, pos.y],
+        [pos.x + 8, pos.y + 8],
+        ],
+        strokeWidth: 0.5,
+        strokeColor: '#fff',
+      }));
+
+
+      // MOINS - PLUS
+      // PLUS
+      // horizontal
+      children.push(new paper.Path.Line({
+        from: [pos.x + ray - 5, pos.y - ray],
+        to: [pos.x + ray + 5, pos.y - ray],
+        strokeWidth: 2,
+        strokeColor: '#fff',
+      }))
+      // vertical
+      children.push(new paper.Path.Line({
+        from: [pos.x + ray, pos.y - ray - 5],
+        to: [pos.x + ray, pos.y - ray + 5],
+        strokeWidth: 2,
+        strokeColor: '#fff',
+      }))
+      
+      // MOINS
+      // horizontal
+      children.push(new paper.Path.Line({
+        from: [pos.x - ray - 5, pos.y - ray],
+        to: [pos.x - ray + 5, pos.y - ray],
+        strokeWidth: 2,
+        strokeColor: '#fff',
+      }))
+
+      let fontsize = 4;
+      let fontFamily = "public_sans";
+      
+      children.push(new paper.PointText({
+        point: [pos.x + 4.5, pos.y - ray - 5],
+        content: `entités qui menacent \u2194 entités qui maintiennent`,
+        fontSize: fontsize,
+        fontFamily: fontFamily,
+        justification: 'center',
+        fillColor: '#000',
+      }))
+
+      children.push(new paper.PointText({
+        point: [pos.x - ray - 5, pos.y + 1],
+        content: "axe d'intensité",
+        fontSize: fontsize,
+        fontFamily: fontFamily,
+        justification: 'right',
+        fillColor: '#000',
+      }))
+
+      children.push(new paper.PointText({
+        point: [pos.x + ray + 5, pos.y - 3],
+        content: "situation future\n\u2195\nsituation actuelle",
+        fontSize: fontsize,
+        fontFamily: fontFamily,
+        justification: 'left',
+        fillColor: '#000',
+      }))
+
+
+      let t1 = new paper.PointText({
+        point: [pos.x - ray/8*2.3, pos.y - ray/8*2.3],
+        content: "avec prise",
+        fontSize: fontsize,
+        fontFamily: fontFamily,
+        justification: 'center',
+        fillColor: '#000',
+      })
+      t1.rotate(-45)
+      children.push(t1)
+
+      let t2 = new paper.PointText({
+        point: [pos.x - ray/8*2.95, pos.y - ray/8*2.95],
+        content: "sans prise",
+        fontSize: fontsize,
+        fontFamily: fontFamily,
+        justification: 'center',
+        fillColor: '#000',
+      })
+      t2.rotate(-45)
+      children.push(t2)
+
+
+      return new paper.Group({
+        children: children,
+        pivot: new paper.Point(pos),
+        name: 'boussole_bg',
+        locked: true,
+      });
+
+    }
   },
   beforeUpdate () {
   },

src/stores/common.js

@@ -1,10 +1,13 @@
 import { defineStore } from 'pinia'
 
+import paper from 'paper';
+
 export const CommonStore = defineStore({
   id: 'common',
   state: () => ({
     hover_elmt: null,
-    cartouch_width: 450
+    cartouch_width: 450,
+    paper_symbol_definitions: {}
   }),
   getters: {
     
@@ -14,6 +17,12 @@ export const CommonStore = defineStore({
       // console.log(`setHoverElmt`, elmt);
       // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer
       this.hover_elmt = elmt;
+    },
+    addPaperSymbolDefinition(name, path) {
+      console.log(`addPaperSymbolDefinition ${name}`, path);
+      // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer
+      this.paper_symbol_definitions[name] = new paper.SymbolDefinition(path);
     }
+
   }
 })