refactoring: convertion off entites, besoin, reponse items into symbols for perf optimization DONE

src/assets/main.scss

@@ -268,6 +268,8 @@ body{
           // font-size: 2em;
         }
       }
+      .entite-map-popup,
+      .besoin-map-popup,
       .reponse-map-popup{
         background-color: white;
         padding: 1em;

src/components/ConcernementMapItem.vue

@@ -387,7 +387,7 @@ export default {
         this.addNewPaperSymbolInstance('doleance_icon');
         this.paper_main_object.addChild(this.setPaperDoleanceSteps());
       }
-      console.log(`initPaperObjects ${this.id}`, this.paper_main_object);
+      // console.log(`initPaperObjects ${this.id}`, this.paper_main_object);
 
       this.initPaperEvents()
     },
@@ -397,11 +397,11 @@ export default {
       // instance.pivot = new paper.Point({x:0,y:0});
       instance.position = this.pos;
       instance.scale = this.scale;
-      instance.locked = true;
+      // instance.locked = true;
       this.paper_main_object.addChild(instance);
     },
     setPaperContour(){
-      console.log(`setPaperContour ${this.concernement.id}`);
+      // console.log(`setPaperContour ${this.concernement.id}`);
       let getPaddedRoundedSegments = (b,a,c,d) => {
         const ac  = { x: c.x - a.x, y: c.y - a.y } // get ac vecteur
         const lac = Math.sqrt(Math.pow(ac.x, 2) + Math.pow(ac.y, 2)); // get ac longueur ac
@@ -414,7 +414,7 @@ export default {
         const ma  = { x:a.x - m.x, y: a.y - m.y } // get ma vecteur
         const lma = Math.sqrt(Math.pow(ma.x, 2)+Math.pow(ma.y, 2)) // get longeur m->a
         const vma = { x: ma.x/lma, y: ma.y/lma } // get ma vecteur unitaire
-        console.log(`vma x:${vma.x}, y:${vma.y}`);
+        // console.log(`vma x:${vma.x}, y:${vma.y}`);
         const pad = 4; // exterior padding
         // the final padded point
         const pa  = [
@@ -482,14 +482,15 @@ export default {
         name: 'entites'
       });
       for (let i = 0; i < this.entites.length; i++) {
-        g.addChild(new paper.Path.Circle({
+        // use paper symbol
-          pivot: new paper.Point(this.pos),
+        let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']);
-          center: [this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y],
+        instance.name = 'entite';
-          radius: 0.5, //0.3
+        instance.position = new paper.Point([this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y]);
-          fillColor: '#000',
+        instance.fillColor = '#000';
-          item_id: this.entites[i].entite.id,
+        instance.item_id = this.entites[i].entite.id;
-          item_type: 'entite'
+        instance.item_type = 'entite';
-        }))
+        instance.is_symbol_instance = true;
+        g.addChild(instance)
       }
       return g;
     },
@@ -500,17 +501,14 @@ export default {
       });
       for (let i = 0; i < this.entites.length; i++) {
         if (this.entites[i].entite.agissante) {
-          g.addChild(new paper.Path.Circle({
+          let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']);
-            pivot: new paper.Point(this.pos),
+          instance.name = 'entite';
-            center: [this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y],
+          instance.position = new paper.Point([this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y]);
-            radius: 0.5, //0.3
+          instance.fillColor = '#000';
-            fillColor: '#000',
+          instance.item_id = this.entites[i].entite.id;
-            strokeColor: '#000',
+          instance.item_type = 'entite';
-            strokeWidth: 3,
+          instance.is_symbol_instance = true;
-            item_id: this.entites[i].entite.id,
+          g.addChild(instance)
-            item_type: 'entite'
-          }))
-          
         }
       }
       return g;
@@ -532,16 +530,14 @@ export default {
         let x = Math.cos(center_a*(Math.PI/180)) * br;
         let y = Math.sin(center_a*(Math.PI/180)) * br;
 
-        g.addChild(
+        // use paper symbol
-          new paper.Path({
+        let besoin = new paper.SymbolItem(this.paper_symbol_definitions['besoin']);
-            pivot: new paper.Point(this.pos),
+        besoin.position = new paper.Point([this.pos.x + x, this.pos.y + y]);
-            segments: this.getDiamondSegments(this.pos.x + x, this.pos.y + y, 1),
+        besoin.item_id = this.concernement.besoins[i].id;
-            fillColor: '#000',
+        besoin.item_cid = this.concernement.id;
-            item_id: this.concernement.besoins[i].id,
+        besoin.item_type = 'besoin';
-            item_cid: this.concernement.id,
+        besoin.is_symbol_instance = true;
-            item_type: 'besoin'
+        g.addChild(besoin)
-          })
-        )
 
         let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number
         for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) {
@@ -554,19 +550,15 @@ export default {
               let rx = Math.cos(res_a*(Math.PI/180)) * rr;
               let ry = Math.sin(res_a*(Math.PI/180)) * rr;
 
-              g.addChild(
+              // use paper symbol
-                new paper.Path({
+              let reponse = new paper.SymbolItem(this.paper_symbol_definitions['reponse']);
-                  pivot: new paper.Point(this.pos),
+              reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]);
-                  segments: this.getDiamondSegments(this.pos.x + rx, this.pos.y + ry, 1),
+              reponse.item_id = this.concernement.besoins[i].reponses[j].id;
-                  fillColor: '#eee',
+              reponse.item_bid = this.concernement.besoins[i].id;
-                  strokeColor: "#000",
+              reponse.item_cid = this.concernement.id;
-                  strokeWidth: 1,
+              reponse.item_type = 'reponse';
-                  item_id: this.concernement.besoins[i].reponses[j].id,
+              reponse.is_symbol_instance = true;
-                  item_bid: this.concernement.besoins[i].id,
+              g.addChild(reponse)
-                  item_cid: this.concernement.id,
-                  item_type: 'reponse'
-                })
-              )
             }
           }
         }
@@ -574,15 +566,6 @@ export default {
 
       return g;
     },
-    getDiamondSegments(x,y,r){
-      return [
-        [x, y - r],
-        [x + r, y],
-        [x, y + r],
-        [x - r, y],
-        [x, y - r]
-      ];
-    },
     setPaperDoleanceSteps(){
       let g = new paper.Group({
         pivot: new paper.Point({x:0,y:0}),

src/components/MapConcernements.vue

@@ -121,10 +121,12 @@ export default {
   watch: {
     hover_elmt: {
       handler (n, o) {
-        // console.log(`watch hover_elmt map`, o, n);
+        console.log(`watch hover_elmt map: o, n`, o, n);
         // over highlight effect on paper items
         if (n && n.paper_id) {
           let nitem = paper.project.getItem({id: n.paper_id});
+          console.log('watch hover_element nitem', nitem.definition);
+          if (!nitem.is_symbol_instance) { // not symbol instance
             nitem.bringToFront();
             if (nitem.strokeColor) {
               nitem.data.prevStrokeColor = nitem.strokeColor.toCSS(true);
@@ -133,14 +135,47 @@ export default {
               nitem.data.prevFillColor = nitem.fillColor.toCSS(true);
               nitem.fillColor = "#01ffe2";
             }
+            
+          } else { // is a symbol instanceof, then swap
+            console.log(`symbol instance n.type:${n.type}, nitem`, nitem);
+            switch (n.type) {
+              case 'entite':
+                nitem.definition = this.paper_symbol_definitions.entite_hover;
+                break;
+              case 'besoin':
+                nitem.definition = this.paper_symbol_definitions.besoin_hover;
+                break;
+              case 'reponse':
+                nitem.definition = this.paper_symbol_definitions.reponse_hover;
+                break;
             }
+          }
+        }
+
         if (o && o.paper_id) {
           let oitem = paper.project.getItem({id: o.paper_id})
+          console.log('watch hover_element oitem', oitem);
+          if (!oitem.is_symbol_instance) { // not symbol instance
             if (oitem.data.prevStrokeColor) {
               oitem.strokeColor = oitem.data.prevStrokeColor;
             } else {
               oitem.fillColor = oitem.data.prevFillColor;
             }            
+          } else { // is a symbol instanceof, then swap
+            console.log(`symbol instance o.type:${o.type}, oitem`, oitem);
+            switch (o.type) {
+              case 'entite':
+                oitem.definition = this.paper_symbol_definitions.entite;
+                break;
+              case 'besoin':
+                oitem.definition = this.paper_symbol_definitions.besoin;
+                break;
+              case 'reponse':
+                oitem.definition = this.paper_symbol_definitions.reponse;
+                break;
+            }
+          }
+
         }
       },
       deep: true
@@ -161,6 +196,13 @@ export default {
       this.addPaperSymbolDefinition('puissanceagir_icon', this.setPaperPuissanceagirICONSymbol());
       this.addPaperSymbolDefinition('doleance_bg', this.setPaperDoleanceBGSymbol());
       this.addPaperSymbolDefinition('doleance_icon', this.setPaperDoleanceICONSymbol());
+      //
+      this.addPaperSymbolDefinition('entite', this.setPaperEntiteSymbol());
+      this.addPaperSymbolDefinition('entite_hover', this.setPaperEntiteHoverSymbol());
+      this.addPaperSymbolDefinition('besoin', this.setPaperBesoinSymbol());
+      this.addPaperSymbolDefinition('besoin_hover', this.setPaperBesoinHoverSymbol());
+      this.addPaperSymbolDefinition('reponse', this.setPaperReponseSymbol());
+      this.addPaperSymbolDefinition('reponse_hover', this.setPaperReponseHoverSymbol());
     },
     setPaperBoussoleBGSymbol(){
       // BOUSSOLE
@@ -305,7 +347,7 @@ export default {
         children: children,
         pivot: new paper.Point(pos),
         name: 'boussole_bg',
-        locked: true,
+        // locked: true,
       });
 
     },
@@ -799,6 +841,58 @@ export default {
       });
 
 
+    },
+    setPaperEntiteSymbol(){
+      return new paper.Path.Circle({
+        pivot: new paper.Point({x:0,y:0}),
+        center: [0,0],
+        radius: 0.5, //0.3
+        fillColor: '#000',
+        strokeColor: 'rgba(255,255,255,0.05)',
+        strokeWidth:2
+      })
+    },
+    setPaperEntiteHoverSymbol(){
+      return new paper.Path.Circle({
+        pivot: new paper.Point({x:0,y:0}),
+        center: [0,0],
+        radius: 0.5,
+        fillColor: '#01ffe2',
+        strokeColor: 'rgba(255,255,255,0.05)',
+        strokeWidth:2
+      })
+    },
+    setPaperBesoinSymbol(){
+      return new paper.Path({
+        pivot: new paper.Point(this.pos),
+        segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
+        fillColor: '#000'
+      })
+    },
+    setPaperBesoinHoverSymbol(){
+      return new paper.Path({
+        pivot: new paper.Point(this.pos),
+        segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
+        fillColor: '#01ffe2'
+      })
+    },
+    setPaperReponseSymbol(){
+      return new paper.Path({
+        pivot: new paper.Point(this.pos),
+        segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
+        fillColor: '#eee',
+        strokeColor: "#000",
+        strokeWidth: 0.25,
+      })
+    },
+    setPaperReponseHoverSymbol(){
+      return new paper.Path({
+        pivot: new paper.Point(this.pos),
+        segments: [[0, -1],[1, 0],[0, 1],[-1, 0],[0, -1]],
+        fillColor: '#eee',
+        strokeColor: "#01ffe2",
+        strokeWidth: 0.25,
+      })
     }
   },
   beforeUpdate () {