fixing and cleaning

src/App.vue

@@ -54,12 +54,14 @@ export default {
 
   <div id="main-content">
     <MapConcernements>
-      <ConcernementMapItem
+      <template v-for="(concernement,index) in concernements">
-        v-for="(concernement,index) in concernements"
+        <ConcernementMapItem
-        :key="index"
+          v-if="concernement.visible"
-        :concernement="concernement"
+          :key="index"
-        :is_opened="concernement.opened"
+          :concernement="concernement"
-      />
+          :is_opened="concernement.opened"
+        />
+      </template>
     </MapConcernements>
     <div id="content">
       <RouterView />

src/assets/main.scss

@@ -196,6 +196,7 @@ body{
   #map-popup{
     position: absolute;
     z-index: 10;
+    pointer-events: none;
     // outline: 1px solid red;
     // top:0;
     // left: 0;
@@ -218,6 +219,16 @@ body{
           }
         }
       }
+      .reponse-map-popup{
+        >div{
+          margin-bottom: 0.5em;
+          label{
+            display: block;
+            font-weight: 100;
+            font-size: 0.882em;
+          }
+        }
+      }
       h1, div{
         font-size: 1em;
         font-weight: 400;

src/components/ConcernementMapItem.vue

@@ -38,7 +38,6 @@ export default {
     return {
       id: null,
       entities: null,
-      // opened_entite_id: null,
       canvas: null,
       ctx: null,
       pos : {
@@ -55,7 +54,7 @@ export default {
       body: null,
       body_parts: [],
       constraint: null,
-      isHover: false,
+      is_hover: false,
       //
       paper_objects: {}
     }
@@ -88,6 +87,8 @@ export default {
       if (this.canvasMap) {
         this.initCanvasMap()
       }  
+    } else {
+      this.hideShowConcernement(this.concernement.id, false);
     }
 
   },
@@ -121,8 +122,8 @@ export default {
     map_mode: {
       handler (n, o) {
         console.log('watch map_mode', o, n);
-        if (n === 'terraindevie') {
+        if (n === 'terraindevie' && !this.opened) {
-          this.applyShuffleForces();
+          this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie
         }
       },
       deep: true
@@ -131,17 +132,31 @@ export default {
       handler (n, o) {
         // console.log('watch hover_elmt', o, n);
         if (n && n.type === 'concernement' && n.id === this.id) {
-          this.isHover = true;
+          this.is_hover = true;
         } else {
-          this.isHover = false;
+          this.is_hover = false;
         }
       },
       deep: true
-    }
+    },
+    // '$route':{
+    //   handler (to, from) {
+    //     console.log('watch $route', from, to);
+    //     if (to.name === concernement 
+    //       && (this.map_mode === "terraindevie" || this.map_mode === "action")
+    //       && to.param.id === this.id
+    //       && to.param.eid) {
+    //       this.opened_entite_id = to.param.eid;
+    //     }
+    //   },
+    //   deep: true,
+    //   immediate: true
+    // }
   },
   methods: {
     ...mapActions(CommonStore,['setHoverElmt']),
     ...mapActions(ConcernementsStore,['openCloseConcernements']),
+    ...mapActions(ConcernementsStore,['hideShowConcernement']),
     parsePoints (){
       // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
       for (let i = 0; i < this.entites.length; i++) {
@@ -386,7 +401,7 @@ export default {
         this.paper_objects.addChild(this.setPaperDoleanceICON());
         this.paper_objects.addChild(this.setPaperDoleanceSteps());
       }
-      console.log('initPaperObjects', this.paper_objects);
+      console.log(`initPaperObjects ${this.id}`, this.paper_objects);
 
       this.initPaperEvents()
     },
@@ -572,7 +587,7 @@ export default {
         children: children,
         pivot: new paper.Point(this.pos),
         name: 'puissanceagir_bg',
-        locked: true,
+        // locked: true,
         style: {
           strokeColor: '#fff'
         }
@@ -702,7 +717,8 @@ export default {
             fillColor: '#000',
             strokeColor: '#000',
             strokeWidth: 2,
-            eid: part.id
+            item_id: part.id,
+            item_type: 'entite'
           }))
         }
       }
@@ -1188,7 +1204,7 @@ export default {
     initPaperEvents(){
 
       this.paper_objects.onMouseEnter = function(event){
-        if (!this.is_opened) {
+        if (!this.opened && this.isFocused()) { // only if no concernement is opened and is this focused
           this.setHoverElmt({
             type: 'concernement',
             id: this.id
@@ -1197,7 +1213,15 @@ export default {
         }
       }.bind(this);
       
+      this.paper_objects.onMouseLeave = function(event){
+        if (!this.opened && this.isFocused()) { // only if no concernement is opened
+          this.resetHoverElmt();
+          document.body.style.cursor = "auto";
+        }
+      }.bind(this);
+
       this.paper_objects.onMouseMove = function(event){
+        // console.log(`onmousemove ${this.id}`);
         // TODO besoins & actions & doleances
         if (this.is_opened) {
           
@@ -1216,19 +1240,15 @@ export default {
           }
 
           let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point);
-
+          // console.log('move result', result);
           if (result) {
-            console.log('move result', result);
+            // console.log('move has result', result);
             let hover_elmt = {
               type: result.item.item_type,
               id: result.item.item_id
             }; 
-            switch (this.map_mode) {
+            switch (result.item.item_type) {
-              // case "terraindevie":
+              case "reponse":
-              //   break;
-              // case "action":
-              //   break;
-              case "puissancedagir":
                 hover_elmt.bid = result.item.item_bid;
                 hover_elmt.cid = result.item.item_cid;
                 break;
@@ -1236,46 +1256,42 @@ export default {
             this.setHoverElmt(hover_elmt);
             document.body.style.cursor = "pointer";
           } else {
+            // console.log('move no result');
             this.resetHoverElmt();
             document.body.style.cursor = "auto";
           }
         }
       }.bind(this);
       
-      this.paper_objects.onMouseLeave = function(event){
-        if (!this.is_opened) {
-          this.resetHoverElmt();
-          document.body.style.cursor = "auto";
-        }
-      }.bind(this);
-
       this.paper_objects.onClick = function(event){
         console.log('paper concernement onClick');
         if (!this.is_opened) {
-          // open/close all concernements
+          if (!this.opened) {
-          this.openCloseConcernements(this.id)
+            console.log(`Open me ${this.id}`);
-            // push route (keep the hash for map_mode)
+            // open/close all concernements
-          this.$router.push({
+            this.openCloseConcernements(this.id)
-            name: 'concernement',
+              // push route (keep the hash for map_mode)
-            hash: `#${this.map_mode}`,
+            this.$router.push({
-            params: {id: this.id}
+              name: 'concernement',
-          });
+              hash: `#${this.map_mode}`,
-          // reset the mousehover
+              params: {id: this.id}
-          this.resetHoverElmt();
+            });
+            // reset the mousehover
+            this.resetHoverElmt();
+          }
         } else {
           // lets define some options regarding the map_mode
+          // debugger;
           let op;
           switch (this.map_mode) {
             case "terraindevie":
               op = {
                 pg: 'entites',  // paper group to hittest
-                // id: 'eid'       // id prop on paper item
               }
               break;
             case "action":
               op = {
                 pg: 'agissantes', // paper group to hittest
-                // id: 'eid'         // id prop on paper item
               }
               break;
           }
@@ -1294,7 +1310,7 @@ export default {
             this.$router.push({
               name: 'concernement',
               hash: `#${this.map_mode}`,
-              params: {id: this.opened.id}
+              params: {id: this.id}
             });
             // reset the mousehover
             this.resetHoverElmt();
@@ -1304,6 +1320,7 @@ export default {
 
     },
     resetHoverElmt(){
+      // console.log('resetHoverElmt');
       setTimeout(()=>{
         this.setHoverElmt(null);
       }, 100);
@@ -1382,39 +1399,64 @@ export default {
       }
       this.tween.easing(Tween.Easing.Quadratic.InOut).start();
     },
+    // ENGINE UPDATE
     onBeforeEngineUpdate (event) {
+      // update the opening/closing tweening
       if (this.tween) {
         this.tween.update();
       }
-      if (this.map_mode === 'action' || this.map_mode === 'puissancedagir'){
+
-        this.applyFocusForces();
+      if (this.opened) {
-        // TODO apply a little force to check the map when returning to terrain de vie
+        if (this.opened.id !== this.id) {
+          this.pushAside()
+        }
+      } else {
+        // apply focus forces : move unfocused on the sides and focused on the center
+        if (this.map_mode === 'action' 
+          || this.map_mode === 'puissancedagir'
+          || this.map_mode === 'doleancer'){
+          this.applyFocusForces(); //
+        }  
       }
+      
+
+      // reset all matter rotation forces otherwise items will spin when colide 
       Matter.Body.setAngle(this.body, 0);
       Matter.Body.setAngularSpeed(this.body, 0);
     },
     applyFocusForces(){
-      // map_mode action
-      var dist, dir, ori_pos;
-      var x_force = 0;
       if(!this.isFocused()) {
-        // does not has actions -> take a side
+        this.pushAside()
-        // apply a force in direction of one side or an other depending of the start position
-        // the force is exponentialy proportional to the distance from the side
-        dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side
-        dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side
-        ori_pos = {x:this.canvas.width/2, y:this.body.position.y};
-        x_force = Math.pow(dist/700,10) * dir;
       }else{
-        // has action, get to the centre
+        this.bringToCenter()
-        dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre
-        dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
-        ori_pos = dir < 0 ? {x:this.canvas.width, y:this.body.position.y} : {x:0, y:this.body.position.y}
-        x_force = Math.pow(dist/800,10) * dir;
-        
-        this.body.frictionAir = 0.05;
       }
-      // x_force = (dist > 200 ? Math.pow(dist/700,10) : 0) * dir
+    },
+    pushAside(){
+      // apply a force in direction of one side or an other depending of the start position
+      // the force is exponentialy proportional to the distance from the side
+      let dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side
+      let dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side
+      let ori_pos = {x:this.canvas.width/2, y:this.body.position.y};
+      let x_force = Math.pow(dist/700,10) * dir;
+      
+      Matter.Body.applyForce(
+        this.body, 
+        ori_pos, 
+        {
+          x: x_force,
+          y: 0
+        }
+      );
+    },
+    bringToCenter(){
+      // bring to the centre
+      let dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre
+      let dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side
+      let ori_pos = dir < 0 ? {x:this.canvas.width, y:this.body.position.y} : {x:0, y:this.body.position.y}
+      let x_force = Math.pow(dist/800,10) * dir;
+      
+      this.body.frictionAir = 0.05;
+
       Matter.Body.applyForce(
         this.body, 
         ori_pos, 
@@ -1434,14 +1476,14 @@ export default {
     },
     onAfterEngineUpdate (event) {
       // respawn element if outside screen
-      if(this.pos.x < 0
+      // if(this.pos.x < 0
-        || this.pos.x > this.canvas.width
+      //   || this.pos.x > this.canvas.width
-        || this.pos.y < 0
+      //   || this.pos.y < 0
-        || this.pos.y > this.canvas.height){
+      //   || this.pos.y > this.canvas.height){
-          this.pos = this.getRandomPos()
+      //     this.pos = this.getRandomPos()
-          Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
+      //     Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
-          this.setInitBodyVelocity();
+      //     this.setInitBodyVelocity();
-        }
+      //   }
       
       this.paper_objects.position = this.pos = this.body.position;
 
@@ -1455,7 +1497,7 @@ export default {
         this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.3)";
       }else{
         this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.8)";
-        if (this.isHover) {
+        if (this.is_hover) {
           this.paper_objects.children['contours'].strokeColor = "#01ffe2";
         }else{
           this.paper_objects.children['contours'].strokeColor = "#000";
@@ -1512,10 +1554,26 @@ export default {
         && this.map_mode !== 'doleancer' 
         && this.map_mode !== 'action' ) {
           this.paper_objects.children.entites.visible = true;
+          if (this.opened_entite_id) {
+            // console.log('this.paper_objects.children.entites', this.paper_objects.children.entites);
+            this.paper_objects.children.entites.children.forEach((entite) => {
+              // console.log('entite', entite);
+              if (entite.item_id === this.opened_entite_id) {
+                entite.style.fillColor = '#01ffe2';
+              } else {
+                entite.style.fillColor = '#000';
+              }
+            });
+          } else {
+            this.paper_objects.children.entites.children.forEach((entite) => {
+              entite.style.fillColor = '#000';
+            })
+          }
       } else {
         this.paper_objects.children.entites.visible = false;
       }
 
+
       // puissance d'agir     
       if (this.concernement.has_puissancedagir) {
         if (this.map_mode === "puissancedagir") {

src/components/ConcernementMapPopup.vue

@@ -29,7 +29,8 @@ export default {
     } else if (this.infos.type === 'reponse') {
       for (let i = 0; i < this.allBesoinsById[this.infos.bid].reponses.length; i++) {
         if (this.allBesoinsById[this.infos.bid].reponses[i].id === this.infos.id) {
-          this.reponse = this.allBesoinsById[this.infos.bid].reponses[i][this.infos.field];
+          this.reponse = this.allBesoinsById[this.infos.bid].reponses[i];
+          break;
         }
       }
     }
@@ -53,7 +54,7 @@ export default {
         } else if(n.type === 'entite') {
           this.entite = this.allEntitesById[this.infos.id];
         } else if (n.type === 'besoin') {
-          
+          this.besoin = this.allBesoinsById[this.infos.id];      
         } else if (n.type === 'reponse') {
           
         } 
@@ -122,7 +123,10 @@ export default {
         <div v-html="besoin.description"></div>
       </section>
       <section v-if="infos.type === 'reponse'" class="reponse-map-popup">
-        <div v-html="reponse"></div>
+          <div v-if="reponse.qui"><label>Qui</label><p v-html="reponse.qui"/></div>
+          <div v-if="reponse.quoi"><label>Quoi</label><p v-html="reponse.quoi"/></div>
+          <div v-if="reponse.ou"><label>Où</label><p v-html="reponse.ou"/></div>
+          <div v-if="reponse.avec"><label>Avec</label><p v-html="reponse.avec"/></div>
       </section>
     </div>
   </div>

src/components/MapConcernements.vue

@@ -91,8 +91,17 @@ export default {
     console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
 
     this.paper = paper.setup(this.canvasMap.canvas);
-    // console.log('this.canvasMap.paper', this.canvasMap.paper);
+    // // use the paper.view click to get back if no items is clicked
-    this.canvasMap.canvas.addEventListener('click', this.onCanvasClick); 
+    this.paper.view.onClick = function(event) {
+      console.log("view onClick", this, event.target);
+      if(event.target._id === "paper-view-0") {
+        this.resetConcernementOpened();
+        this.$router.push({
+          name: 'home',
+          hash: `#${this.map_mode}`
+        });
+      }
+    }.bind(this);
 
     // MATTER
     let wall_w = 100;
@@ -122,17 +131,6 @@ export default {
       Matter.Engine.update(this.engine, 1);
       window.requestAnimationFrame(this.animate);
     },
-    onCanvasClick(event){
-      // console.log('onCanvasClick');
-      // use the canvas click to get back if no items is mousover
-      if (!this.hover_elmt) {
-        this.resetConcernementOpened();
-        this.$router.push({
-          name: 'home',
-          hash: `#${this.map_mode}`
-        });
-      }
-    }
   },
   beforeUpdate () {
   },

src/stores/common.js

@@ -10,7 +10,7 @@ export const CommonStore = defineStore({
   },
   actions: {
     setHoverElmt(elmt) {
-      console.log(`setHoverElmt`, elmt);
+      // console.log(`setHoverElmt`, elmt);
       // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer
       this.hover_elmt = elmt;
     }

src/stores/concernements.js

@@ -53,6 +53,8 @@ export const ConcernementsStore = defineStore({
             
             this.concernements = [];
             allconcernements.forEach(concernement => {
+              concernement.visible = true;
+
               concernement.entites_byid = {};
               concernement.entitesagissantes_byid = {};
               concernement.has_agissantes = false;
@@ -134,6 +136,14 @@ export const ConcernementsStore = defineStore({
         })
 
     },
+    hideShowConcernement (id, state) {
+      console.log(`disableConcernement id: ${id}`);
+      this.concernements.forEach((c, i) => {
+        if (c.id === id) {
+          this.concernements[i].visible = this.concernementsByID[id].visible = state;  
+        }
+      })
+    },
     openCloseConcernements (id) {
       console.log(`openCloseConcernements id: ${id}`);
       var state;