created paper contents once concernement opened and not on init, UI should be smoother #2150

src/components/ConcernementMapItem.vue

@@ -454,16 +454,9 @@ export default {
         // this.paper_main_object.addChild(this.setPaperAgissantes());
       }
       if (this.concernement.has_doleance) {
-        this.addNewPaperSymbolInstance('doleance_bg');
+        // this.addNewPaperSymbolInstance('doleance_bg');
         this.addNewPaperSymbolInstance('doleance_icon');
-        let g = new paper.Group({
-          pivot: new paper.Point({x:0,y:0}),
-          name: `doleances`
-        });
-        this.concernement.doleances.forEach((d) => {
-          g.addChild(this.setPaperDoleanceSteps(d))
-        });
-        this.paper_main_object.addChild(g);
+        // this.paper_main_object.addChild(this.setPaperDoleances());
       }
       // console.log(`initPaperObjects ${this.id}`, this.paper_main_object);
 
@@ -485,12 +478,17 @@ export default {
           this.addNewPaperSymbolInstance('boussole_bg', true);
           this.paper_main_object.addChild(this.setPaperAgissantes());
           break;
+        case 'doleancer':
+          this.addNewPaperSymbolInstance('doleance_bg');
+          this.paper_main_object.addChild(this.setPaperDoleances());
+          break;
       }
     },
     clearPaperContents(){
       let clearable_children = ['boussole_bg', 'entites', 
                                 'puissanceagir_bg','puissanceagir_besoins',
-                                'agissantes'];
+                                'agissantes',
+                                'doleance_bg', 'doleances'];
 
       clearable_children.forEach(child_name => {
         if (this.paper_main_object.children[child_name]) {
@@ -687,6 +685,16 @@ export default {
 
       return g;
     },
+    setPaperDoleances(){
+      let g = new paper.Group({
+        pivot: new paper.Point({x:0,y:0}),
+        name: `doleances`
+      });
+      this.concernement.doleances.forEach((d) => {
+        g.addChild(this.setPaperDoleanceSteps(d))
+      });
+      return g;
+    },
     setPaperDoleanceSteps(doleance){
       let g = new paper.Group({
         pivot: new paper.Point({x:0,y:0}),
@@ -922,7 +930,7 @@ export default {
       // adresse de la doleance
       g.addChild(new paper.Path.Circle({
         center: [this.pos.x - r, this.pos.y],
-        radius: 3,
+        radius: 3 * this.scale,
         style: {
           strokeColor: '#fff',
           strokeWidth: 2,
@@ -937,7 +945,7 @@ export default {
       // decision
       g.addChild(new paper.Path.Circle({
         center: [this.pos.x, this.pos.y - r],
-        radius: 3,
+        radius: 3 * this.scale,
         style: {
           strokeColor: '#fff',
           strokeWidth: 2,
@@ -952,7 +960,7 @@ export default {
       // adresse_de_la_decision
       g.addChild(new paper.Path.Circle({
         center: [this.pos.x + r, this.pos.y],
-        radius: 3,
+        radius: 3 * this.scale,
         style: {
           strokeColor: '#fff',
           strokeWidth: 2,
@@ -998,9 +1006,9 @@ export default {
         // if (this.concernement.has_puissancedagir) {
         //   this.paper_main_object.children.puissanceagir_bg.visible = false;
         // }
-        if (this.concernement.has_doleance) {
-          this.paper_main_object.children.doleance_bg.visible = false;
-        }
+        // if (this.concernement.has_doleance) {
+        //   this.paper_main_object.children.doleance_bg.visible = false;
+        // }
         // choose wich one to show, if one
         switch (this.map_mode) {
           case 'terraindevie':
@@ -1013,9 +1021,9 @@ export default {
             // }
             break;
           case 'doleancer':
-            if (this.concernement.has_doleance) {
-              this.paper_main_object.children.doleance_bg.visible = true;
-            }
+            // if (this.concernement.has_doleance) {
+            //   this.paper_main_object.children.doleance_bg.visible = true;
+            // }
             break;
         }
       }else{
@@ -1023,9 +1031,9 @@ export default {
         // if (this.concernement.has_puissancedagir) {
         //   this.paper_main_object.children.puissanceagir_bg.visible = false;
         // }
-        if (this.concernement.has_doleance) {
-          this.paper_main_object.children.doleance_bg.visible = false;
-        }
+        // if (this.concernement.has_doleance) {
+        //   this.paper_main_object.children.doleance_bg.visible = false;
+        // }
       }
 
       // entites
@@ -1071,10 +1079,10 @@ export default {
         if (this.map_mode === "doleancer") {
           if (!this.is_opened) {
             this.paper_main_object.children.doleance_icon.visible = true;
-            this.paper_main_object.children.doleances.visible = false;
+            // this.paper_main_object.children.doleances.visible = false;
           } else {
             this.paper_main_object.children.doleance_icon.visible = false;
-            this.paper_main_object.children.doleances.visible = true;
+            // this.paper_main_object.children.doleances.visible = true;
             // display the right (opened) doleance
             this.concernement.doleances.forEach((d) => {
                 this.paper_main_object.children.doleances.children[`doleance_${d.id}`].visible = d.id === this.concernement.opened_doleance.id;
@@ -1082,7 +1090,7 @@ export default {
           }
         } else {
           this.paper_main_object.children.doleance_icon.visible = false;
-          this.paper_main_object.children.doleances.visible = false;
+          // this.paper_main_object.children.doleances.visible = false;
         }
       }
     
@@ -1133,11 +1141,13 @@ export default {
               paper_group_tohit = this.paper_main_object.children['puissanceagir_besoins'];
               break;
             case "doleancer":
-              paper_group_tohit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance.id}`];
+              if(this.paper_main_object.children['doleances']){
+                paper_group_tohit = this.paper_main_object.children['doleances'].children[`doleance_${this.concernement.opened_doleance.id}`];
+              }
               break;
           }
 
-          let result = paper_group_tohit.hitTest(event.point);
+          let result = paper_group_tohit ? paper_group_tohit.hitTest(event.point) : null;
           // console.log('move result', result);
           if (result && result.item.item_id) {
             // console.log('move has result', result);
@@ -1247,6 +1257,9 @@ export default {
       if (open) {
         // paper bring to front
         this.paper_main_object.bringToFront();
+        // create the paper objects to display (like entite, besoin, etc)
+        this.setPaperContents();
+
         // calcul opened size regarding window size
         // let ch = this.canvas.height;
         // let s = this.canvas.height / (this.ray*2.8)
@@ -1295,8 +1308,6 @@ export default {
             });
             Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
             
-            // create the paper objects to display (like entite, besoin, etc)
-            this.setPaperContents();
           });
           // recreate the matter engine event to get it a the end of the events stack
           Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);

src/components/MapConcernements.vue

@@ -161,28 +161,30 @@ export default {
 
         if (o && o.paper_id && (!n || o.paper_id !== n.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;
-              case 'entite_action':
-                oitem.definition = this.paper_symbol_definitions.entite_action;
-                break;
+          if (oitem) {
+            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;
+                case 'entite_action':
+                  oitem.definition = this.paper_symbol_definitions.entite_action;
+                  break;
+              }
             }
           }
 
@@ -897,11 +899,11 @@ export default {
     },
     setPaperEntiteActionSymbol(){
       let svgIcon = paper.project.importSVG(iconAction);
-      svgIcon.strokeColor = '#000';
       svgIcon.strokeWidth = 0.25;
+      svgIcon.scale(0.15);
+      svgIcon.strokeColor = '#000';
       svgIcon.fillColor = null;
       svgIcon.position = {x:0, y:0};
-      svgIcon.scale(0.15);
 
       let circle = new paper.Path.Circle({
         radius: 3,
@@ -916,12 +918,13 @@ export default {
     setPaperEntiteActionHoverSymbol(){
       let svgIcon = paper.project.importSVG(iconAction);
       svgIcon.strokeColor = '#01ffe2';
-      svgIcon.strokeWidth = 0.75;
+      svgIcon.strokeWidth = 0.25;
+      svgIcon.scale(0.15);
       svgIcon.fillColor = null;
       svgIcon.position = {x:0, y:0};
 
       let circle = new paper.Path.Circle({
-        radius: 15,
+        radius: 3,
         fillColor: 'rgba(255,255,255,0.05)'
       })