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

src/components/MapConcernements.vue

@@ -121,26 +121,61 @@ 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});
-          nitem.bringToFront();
-          if (nitem.strokeColor) {
-            nitem.data.prevStrokeColor = nitem.strokeColor.toCSS(true);
-            nitem.strokeColor = "#01ffe2";          
-          } else {
-            nitem.data.prevFillColor = nitem.fillColor.toCSS(true);
-            nitem.fillColor = "#01ffe2";
+          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);
+              nitem.strokeColor = "#01ffe2";          
+            } else {
+              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})
-          if (oitem.data.prevStrokeColor) {
-            oitem.strokeColor = oitem.data.prevStrokeColor;
-          } else {
-            oitem.fillColor = oitem.data.prevFillColor;
+          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 () {