started to create paper contents once concernement opened and not on init (doleance left to do)

src/api/gql/concernementrevisions.fragment.gql

@@ -0,0 +1,22 @@
+fragment ConcernementRevisionsFields on Concernement {
+  id
+  revision_id
+  entites {
+    menacemaintien
+    prise
+    actuelfuture
+    entite {
+      title
+      id
+      agissante
+      proximite {
+        id
+        title
+      }
+      superposition {
+        id
+        title
+      }
+    }
+  }
+}

src/components/ConcernementMapItem.vue

@@ -141,10 +141,13 @@ export default {
     },
     map_mode: {
       handler (n, o) {
-        // console.log('watch map_mode', o, n);
+        console.log('concernementMapItem watch map_mode', o, n);
         if (n === 'terraindevie' && !this.opened_concernement) {
           this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie
         }
+        if (this.is_opened & n !== o) {
+          this.setPaperContents();
+        }
       },
       deep: true
     },
@@ -438,17 +441,17 @@ export default {
       });
 
       // the sub items for one concernement
-      this.addNewPaperSymbolInstance('boussole_bg');
+      // this.addNewPaperSymbolInstance('boussole_bg');
       this.paper_main_object.addChild(this.setPaperContour());
-      this.paper_main_object.addChild(this.setPaperEntites());
+      // this.paper_main_object.addChild(this.setPaperEntites());
 
       if (this.concernement.has_puissancedagir) {
-        this.addNewPaperSymbolInstance('puissanceagir_bg');
+        // this.addNewPaperSymbolInstance('puissanceagir_bg');
         this.addNewPaperSymbolInstance('puissanceagir_icon');
-        this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins());
+        // this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins());
       }
       if (this.concernement.has_agissantes) {
-        this.paper_main_object.addChild(this.setPaperAgissantes());
+        // this.paper_main_object.addChild(this.setPaperAgissantes());
       }
       if (this.concernement.has_doleance) {
         this.addNewPaperSymbolInstance('doleance_bg');
@@ -466,14 +469,48 @@ export default {
 
       this.initPaperEvents()
     },
-    addNewPaperSymbolInstance(name){
+    setPaperContents(){
+      // trigered once opening tween is complete
+      this.clearPaperContents();
+      switch(this.map_mode){
+        case 'terraindevie':
+          this.addNewPaperSymbolInstance('boussole_bg', true);
+          this.paper_main_object.addChild(this.setPaperEntites());
+          break;
+        case 'puissancedagir':
+          this.addNewPaperSymbolInstance('puissanceagir_bg', true);
+          this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins());
+          break;
+        case 'action':
+          this.addNewPaperSymbolInstance('boussole_bg', true);
+          this.paper_main_object.addChild(this.setPaperAgissantes());
+          break;
+      }
+    },
+    clearPaperContents(){
+      let clearable_children = ['boussole_bg', 'entites', 
+                                'puissanceagir_bg','puissanceagir_besoins',
+                                'agissantes'];
+
+      clearable_children.forEach(child_name => {
+        if (this.paper_main_object.children[child_name]) {
+          this.paper_main_object.children[child_name].remove();
+        }
+      });
+    },
+    addNewPaperSymbolInstance(name, back){
       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.scale(this.scale);
       // instance.locked = true;
       this.paper_main_object.addChild(instance);
+      if (back) {
+        this.paper_main_object.children[name].sendToBack();
+      } else {
+        this.paper_main_object.children[name].bringToFront();
+      }
     },
     setPaperContour(){
       // console.log(`setPaperContour ${this.concernement.id}`);
@@ -561,7 +598,8 @@ export default {
         let symbol_name = this.entites[i].entite ? 'entite' : 'entite_hidden';
         let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]);
         instance.name = 'entite';
-        instance.position = new paper.Point([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.scale, this.pos.y + this.entites[i].display.pos.y * this.scale]);
+        instance.scale(this.scale);
         instance.fillColor = '#000';
         instance.item_id = this.entites[i].entite ? this.entites[i].entite.id : null;
         instance.item_type = this.entites[i].entite ? 'entite' : 'hidden_entite';
@@ -579,9 +617,10 @@ export default {
         if (this.entites[i].entite && this.entites[i].entite.agissante) {
           let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action']);
           instance.name = 'entite_action';
-          instance.position = new paper.Point([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.scale, this.pos.y + this.entites[i].display.pos.y * this.scale]);
           instance.fillColor = '#000';
-          instance.scale(0.2);
+          // instance.scale(0.2);
+          instance.scale(this.scale);
           instance.item_id = this.entites[i].entite.id;
           instance.item_type = 'entite_action';
           instance.is_symbol_instance = true;
@@ -610,6 +649,7 @@ export default {
         // use paper symbol
         let besoin = new paper.SymbolItem(this.paper_symbol_definitions['besoin']);
         besoin.position = new paper.Point([this.pos.x + x, this.pos.y + y]);
+        besoin.scale(this.scale);
         besoin.item_id = this.concernement.besoins[i].id;
         besoin.item_cid = this.concernement.id;
         besoin.item_type = 'besoin';
@@ -632,6 +672,7 @@ export default {
               // use paper symbol
               let reponse = new paper.SymbolItem(this.paper_symbol_definitions['reponse']);
               reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]);
+              reponse.scale(this.scale);
               reponse.item_id = this.concernement.besoins[i].reponses[j].id;
               reponse.item_bid = this.concernement.besoins[i].id;
               reponse.item_cid = this.concernement.id;
@@ -953,10 +994,10 @@ export default {
       // backgrounds
       if (this.is_opened) {
         // hide all bgs
-        this.paper_main_object.children.boussole_bg.visible = false;
-        if (this.concernement.has_puissancedagir) {
-          this.paper_main_object.children.puissanceagir_bg.visible = false;
-        }
+        // this.paper_main_object.children.boussole_bg.visible = false;
+        // 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;
         }
@@ -964,12 +1005,12 @@ export default {
         switch (this.map_mode) {
           case 'terraindevie':
           case 'action':
-            this.paper_main_object.children.boussole_bg.visible = true;
+            // this.paper_main_object.children.boussole_bg.visible = true;
             break;
           case 'puissancedagir':
-            if (this.concernement.has_puissancedagir) {
-              this.paper_main_object.children.puissanceagir_bg.visible = true;
-            }
+            // if (this.concernement.has_puissancedagir) {
+            //   this.paper_main_object.children.puissanceagir_bg.visible = true;
+            // }
             break;
           case 'doleancer':
             if (this.concernement.has_doleance) {
@@ -978,24 +1019,24 @@ export default {
             break;
         }
       }else{
-        this.paper_main_object.children.boussole_bg.visible = false;
-        if (this.concernement.has_puissancedagir) {
-          this.paper_main_object.children.puissanceagir_bg.visible = false;
-        }
+        // this.paper_main_object.children.boussole_bg.visible = false;
+        // 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;
         }
       }
 
       // entites
-      if (this.is_opened
-        && this.map_mode !== 'puissancedagir'
-        && this.map_mode !== 'doleancer' 
-        && this.map_mode !== 'action' ) {
-          this.paper_main_object.children.entites.visible = true;
-      } else {
-        this.paper_main_object.children.entites.visible = false;
-      }
+      // if (this.is_opened
+      //   && this.map_mode !== 'puissancedagir'
+      //   && this.map_mode !== 'doleancer' 
+      //   && this.map_mode !== 'action' ) {
+      //     this.paper_main_object.children.entites.visible = true;
+      // } else {
+      //   this.paper_main_object.children.entites.visible = false;
+      // }
 
 
       // puissance d'agir     
@@ -1003,27 +1044,27 @@ export default {
         if (this.map_mode === "puissancedagir") {
           if (!this.is_opened) {
             this.paper_main_object.children.puissanceagir_icon.visible = true; // if not opened and has_puissancedagir draw the puissance d'agir icone
-            this.paper_main_object.children.puissanceagir_besoins.visible = false;
+            // this.paper_main_object.children.puissanceagir_besoins.visible = false;
           } else {
             this.paper_main_object.children.puissanceagir_icon.visible = false;
-            this.paper_main_object.children.puissanceagir_besoins.visible = true;
+            // this.paper_main_object.children.puissanceagir_besoins.visible = true;
             // this.drawBesoins();
           }
         } else {
           this.paper_main_object.children.puissanceagir_icon.visible = false;
-          this.paper_main_object.children.puissanceagir_besoins.visible = false;
+          // this.paper_main_object.children.puissanceagir_besoins.visible = false;
         }
       }
 
-      // agissantes
-      // console.log('this.concernement.has_agissantes', this.concernement.has_agissantes);
-      if (this.concernement.has_agissantes) {
-        if (this.map_mode === "action") {
-          this.paper_main_object.children.agissantes.visible = true;
-        } else {
-          this.paper_main_object.children.agissantes.visible = false;
-        }  
-      }
+      // // agissantes
+      // // console.log('this.concernement.has_agissantes', this.concernement.has_agissantes);
+      // if (this.concernement.has_agissantes) {
+      //   if (this.map_mode === "action") {
+      //     // this.paper_main_object.children.agissantes.visible = true;
+      //   } else {
+      //     // this.paper_main_object.children.agissantes.visible = false;
+      //   }  
+      // }
       
       // doleance     
       if (this.concernement.has_doleance) {
@@ -1234,10 +1275,17 @@ export default {
             this.scale = obj.s;
             this.opacity = obj.o;
             
-            Matter.Body.setPosition(this.body, {x:obj.x, y:obj.y});
             this.pos = {x:obj.x, y:obj.y};
+            Matter.Body.setPosition(this.body, this.pos);
           })
           .onComplete((obj) => {
+            // record tween one last time
+            this.prev_scale = this.scale = obj.s;
+            this.opacity = obj.o;
+            this.pos = {x:obj.x, y:obj.y};
+            Matter.Body.setPosition(this.body, this.pos);
+
+            // fix the concernement position with a constraint
             this.constraint = Matter.Constraint.create({
               pointA: this.pos,
               bodyB: this.body,
@@ -1246,7 +1294,9 @@ export default {
               length: 0
             });
             Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
-            this.prev_scale = this.scale;
+            
+            // 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);
@@ -1274,6 +1324,7 @@ export default {
           })
           .onComplete((obj) => {
             this.prev_scale = this.scale = 1;
+            this.clearPaperContents();
           });
       }
       this.tween.easing(Tween.Easing.Quadratic.InOut).start();

src/components/MapConcernements.vue

@@ -898,13 +898,14 @@ export default {
     setPaperEntiteActionSymbol(){
       let svgIcon = paper.project.importSVG(iconAction);
       svgIcon.strokeColor = '#000';
-      svgIcon.strokeWidth = 0.75;
+      svgIcon.strokeWidth = 0.25;
       svgIcon.fillColor = null;
       svgIcon.position = {x:0, y:0};
+      svgIcon.scale(0.15);
 
       let circle = new paper.Path.Circle({
-        radius: 15,
-        fillColor: 'rgba(255,255,255,0.05)'
+        radius: 3,
+        fillColor: 'rgba(255,255,255,0.01)'
       })
 
       return new paper.Group({