fixed agissantes icons size #2190

src/components/ConcernementMapItem.vue

@@ -51,6 +51,8 @@ export default {
       prev_scale: 1,
       opacity: 0,
       tween: null,
+      is_opening: false,
+      is_closing: false,
       body: null,
       body_parts: [],
       constraint: null,
@@ -148,6 +150,9 @@ export default {
         if (this.is_opened & n !== o) {
           this.setPaperContents();
         }
+        if (n !== o) {
+          this.handlePaperVisibilityOnMapMode()
+        }
       },
       deep: true
     },
@@ -448,7 +453,7 @@ export default {
       }
       if (this.concernement.has_agissantes) {
         // TODO icons
-        // this.paper_main_object.addChild(this.setPaperAgissantes());
+        this.paper_main_object.addChild(this.setPaperAgissantesIcons());
       }
       if (this.concernement.has_doleance) {
         this.addNewPaperSymbolInstance('doleance_icon');
@@ -621,6 +626,27 @@ export default {
       }
       return g;
     },
+    setPaperAgissantesIcons(){
+      let g = new paper.Group({
+        pivot: new paper.Point(this.pos),
+        name: 'agissantes_icons'
+      });
+      for (let i = 0; i < this.entites.length; i++) {
+        if (this.entites[i].entite && this.entites[i].entite.agissante) {
+          let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action_icon']);
+          instance.name = 'entite_action';
+          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(this.scale);
+          instance.item_id = this.entites[i].entite.id;
+          instance.item_type = 'entite_action';
+          instance.is_symbol_instance = true;
+          g.addChild(instance)
+        }
+      }
+      return g;
+    },
     setPaperPuissanceagirBesoins(){
       let g = new paper.Group({
         pivot: new paper.Point(this.pos),
@@ -970,7 +996,37 @@ export default {
       return g;
     },
     // PAPER VISIBILITY
-    handlePaperVisibility(){
+    handlePaperVisibilityOnBeforeOpen(){
+      // agissantes
+      if (this.concernement.has_agissantes && this.map_mode === "action") {
+        if (!this.is_opened) {
+          this.paper_main_object.children.agissantes_icons.visible = true;
+        } else {
+          this.paper_main_object.children.agissantes_icons.visible = false;
+        }
+      }
+    },
+    handlePaperVisibilityOnOpened(){
+      
+
+    },
+    handlePaperVisibilityOnBeforeClose(){
+      
+    },
+    handlePaperVisibilityOnClosed(){
+      // agissantes
+      if (this.concernement.has_agissantes && this.map_mode === "action") {
+        if (!this.is_opened) {
+          this.paper_main_object.children.agissantes_icons.visible = true;
+        } else {
+          this.paper_main_object.children.agissantes_icons.visible = false;
+        }
+      }
+    },
+    handlePaperVisibilityOnMapMode(){
+
+    },
+    handlePaperVisibilityOnAfterEnginUpdate(){
       // contours focused
       if (!this.isFocused()){
         this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)";
@@ -1006,18 +1062,16 @@ export default {
           this.paper_main_object.children.puissanceagir_icon.visible = false;
         }
       }
-
-      // TODO icons
-      // // 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
+      if (this.concernement.has_agissantes) {
+        if (this.map_mode !== "action") {
+          this.paper_main_object.children.agissantes_icons.visible = false;
+        } else if(!this.is_opened && !this.is_closing){
+          this.paper_main_object.children.agissantes_icons.visible = true;
+        }
+      }
+
       // doleance     
       if (this.concernement.has_doleance) {
         if (this.map_mode === "doleancer") {
@@ -1196,10 +1250,12 @@ export default {
         this.tween.stop();
       }
       if (open) {
+        this.is_opening = true;
         // paper bring to front
         this.paper_main_object.bringToFront();
         // create the paper objects to display (like entite, besoin, etc)
         this.setPaperContents();
+        this.handlePaperVisibilityOnBeforeOpen();
 
         // calcul opened size regarding window size
         // let ch = this.canvas.height;
@@ -1238,6 +1294,8 @@ export default {
             this.opacity = obj.o;
             this.pos = {x:obj.x, y:obj.y};
             Matter.Body.setPosition(this.body, this.pos);
+            
+            this.handlePaperVisibilityOnOpened();
 
             // fix the concernement position with a constraint
             this.constraint = Matter.Constraint.create({
@@ -1249,15 +1307,21 @@ export default {
             });
             Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
             
+            this.is_opening = false;
           });
           // recreate the matter engine event to get it a the end of the events stack
           Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
           Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
       } else {
         // closing
+        this.is_closing = true;
+
         if(this.constraint){
           Matter.Composite.remove(this.matterEngine.world, this.constraint);
         }
+
+        this.handlePaperVisibilityOnBeforeClose();
+
         this.tween = new Tween.Tween({s: this.scale, o: 1})
           .to({s: 1, o: 0}, 500)
           .onUpdate((obj) => {
@@ -1276,7 +1340,9 @@ export default {
           })
           .onComplete((obj) => {
             this.prev_scale = this.scale = 1;
+            this.handlePaperVisibilityOnClosed();
             this.clearPaperContents();
+            this.is_closing = false;
           });
       }
       this.tween.easing(Tween.Easing.Quadratic.InOut).start();
@@ -1619,7 +1685,7 @@ export default {
 
       this.paper_main_object.position = this.pos = this.body.position;
 
-      this.handlePaperVisibility()
+      this.handlePaperVisibilityOnAfterEnginUpdate()
     },
   },
   render() {

src/components/MapConcernements.vue

@@ -212,6 +212,7 @@ export default {
       this.addPaperSymbolDefinition('entite', this.setPaperEntiteSymbol());
       this.addPaperSymbolDefinition('entite_hidden', this.setPaperHiddenEntiteSymbol());
       this.addPaperSymbolDefinition('entite_hover', this.setPaperEntiteHoverSymbol());
+      this.addPaperSymbolDefinition('entite_action_icon', this.setPaperEntiteActionIconSymbol());
       this.addPaperSymbolDefinition('entite_action', this.setPaperEntiteActionSymbol());
       this.addPaperSymbolDefinition('entite_action_hover', this.setPaperEntiteActionHoverSymbol());
       this.addPaperSymbolDefinition('besoin', this.setPaperBesoinSymbol());
@@ -897,6 +898,24 @@ export default {
         strokeWidth:2
       })
     },
+    setPaperEntiteActionIconSymbol(){
+      let svgIcon = paper.project.importSVG(iconAction);
+      svgIcon.strokeWidth = 0.8;
+      svgIcon.scale(0.6);
+      svgIcon.strokeColor = '#000';
+      svgIcon.fillColor = null;
+      svgIcon.position = {x:0, y:0};
+
+      // let circle = new paper.Path.Circle({
+      //   radius: 3,
+      //   fillColor: 'rgba(255,255,255,0.01)'
+      // })
+
+      return new paper.Group({
+        children: [svgIcon],
+        name: 'action_icon'
+      });
+    },
     setPaperEntiteActionSymbol(){
       let svgIcon = paper.project.importSVG(iconAction);
       svgIcon.strokeWidth = 0.25;