concernement's entitées are now matter body parts AND mouseoverable & clickable

src/App.vue

@@ -23,12 +23,40 @@ export default {
   computed: {
     ...mapState(UserStore,['isloggedin']),
     ...mapState(ConcernementsStore,['concernements']),
-    ...mapState(ConcernementsStore,['concernementsByID'])
+    ...mapState(ConcernementsStore,['concernementsByID']),
+    ...mapState(ConcernementsStore,['opened'])
   },
   methods: {
     ...mapActions(ConcernementsStore,['loadConcernements']),
     ...mapActions(ConcernementsStore,['loadContentTypeDefinition']),
-    ...mapActions(UserStore,['checkUser'])
+    ...mapActions(UserStore,['checkUser']),
+    // sortedConcernements () {
+    //   if (this.concernements.length) {
+    //     let cs = this.concernements;
+    //     cs.sort(function(a, b) {
+    //       if (a.opened && !b.opened) {
+    //         return 1;
+    //       }
+    //       if (!a.opened && b.opened) {
+    //         return -1;
+    //       }
+    //       return 0;
+    //     });
+    //     return cs;
+    //     // Object.keys(this.concernementsByID).forEach((id, i) => {
+    //     //   console.log(id);
+    //     //   if (!this.concernementsByID[id].opened) {
+    //     //     console.log('not opened');
+    //     //     cs[id] = this.concernementsByID[id];
+    //     //   }
+          
+    //     // });
+    //     // console.log('filtered concernements', cs);
+    //     // return cs;
+    //   } else {
+    //     return null
+    //   }
+    // }
   },
   components: {
     MapConcernements,
@@ -54,11 +82,16 @@ export default {
   <div id="main-content">
     <MapConcernements>
       <ConcernementMapItem
-        v-for="(concernement,id) in concernementsByID"
-        :key="id"
+        v-for="(concernement,index) in concernements"
+        :key="index"
         :concernement="concernement"
         :opened="concernement.opened"
       />
+      <!-- <ConcernementMapItem
+        v-if="opened"
+        :concernement="opened"
+        :opened="opened.opened"
+      /> -->
     </MapConcernements>
     <div id="content">
       <RouterView />

src/components/ConcernementMapItem.vue

@@ -128,7 +128,7 @@ export default {
           //   item_type: 'entite',
           //   id: this.entites[i].id  
           // }))
-          parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 2, {
+          parts.push(Matter.Bodies.circle(this.entites[i].display.pos.x, this.entites[i].display.pos.y, 0.8, {
             item_type: 'entite',
             id: this.entites[i].entite.id,
             isSensor: true
@@ -292,6 +292,9 @@ export default {
             });
             Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
           });
+          // 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
         if(this.constraint){
@@ -334,11 +337,6 @@ export default {
 
       this.pos = this.body.position;
 
-      // this.ctx.clearRect(
-      //   this.pos.x - this.ray*this.scale, this.pos.y - this.ray*this.scale,
-      //   this.ray*this.scale*2, this.ray*this.scale*2
-      // );
-
       if (this.opened) {
         // BOUSSOLE
         // exterieur circle
@@ -413,30 +411,26 @@ export default {
 
       if (this.opened) {
         // place all entities points
-        for (let i = 0; i < this.entites.length; i++) {
-          let entite = this.entites[i];
-          // console.log('entite', entite);
-          this.ctx.beginPath();
-          this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 5, 0, 2 * Math.PI, false);
-          this.ctx.strokeStyle = "#F00";
-          this.ctx.stroke();
-        }
-        // OR
+        // using entities array
+        // for (let i = 0; i < this.entites.length; i++) {
+        //   let entite = this.entites[i];
+        //   // console.log('entite', entite);
+        //   this.ctx.beginPath();
+        //   this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 5, 0, 2 * Math.PI, false);
+        //   this.ctx.strokeStyle = "#F00";
+        //   this.ctx.stroke();
+        // }
+
+        // OR using entitées matter bodies
         for (let i = 0; i < this.body.parts.length; i++) {
-          // let entite = this.entites[i];
-          if (this.body.parts[i].item_type === 'entity') {
+          if (this.body.parts[i].item_type === 'entite') {
             let part = this.body.parts[i];
-            // console.log('part', part);
-            // console.log(`part pos x:${part.position.x} y:${part.position.y} || entity pos  x:${this.pos.x+this.entites_byid[part.id].display.pos.x*this.scale} y:${this.pos.y+this.entites_byid[part.id].display.pos.y*this.scale}`);
             this.ctx.beginPath();
-            // this.ctx.arc(this.pos.x+entite.display.pos.x*this.scale, this.pos.y+entite.display.pos.y*this.scale, 2, 0, 2 * Math.PI, false);
-            this.ctx.arc(this.body.parts[i].position.x, this.body.parts[i].position.y, 2*this.scale, 0, 2 * Math.PI, false);
-            this.ctx.strokeStyle = "#000";
-            this.ctx.stroke();
-            
+            this.ctx.arc(this.body.parts[i].position.x, this.body.parts[i].position.y, 0.3*this.scale, 0, 2 * Math.PI, false);
+            this.ctx.fillStyle = "#000";
+            this.ctx.fill();
           }
-        } 
-
+        }
       }
 
       // concernement id @center

src/components/MapConcernements.vue

@@ -105,7 +105,7 @@ export default {
     this.animate()
   },
   methods: {
-    ...mapActions(ConcernementsStore,['openCloseConcernement']),
+    ...mapActions(ConcernementsStore,['openCloseConcernements']),
     ...mapActions(ConcernementsStore,['resetConcernementOpened']),
     animate () {
       this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height)
@@ -115,7 +115,6 @@ export default {
     },
     onMouseMove (e) {
       // check concernement item mouse over
-      // const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position)
       let query;
       if (this.opened) {
         // if a concernement is opened we query the opened concernement's parts (aka entitées bodies)
@@ -168,9 +167,8 @@ export default {
         clickedIDs.push(elmt.id);
       });
       // open/close all concernements
-      this.concernements.forEach((concernement, index) => {
-        this.openCloseConcernement(concernement.id, clickedIDs.indexOf(concernement.id) !== -1)
-      });
+      this.openCloseConcernements(clickedIDs)
+
       // if no concernement opened retrun to home (closing concernement contents opened)
       // and reset the opened state in concernement store
       if (!clickedIDs.length) {

src/stores/concernements.js

@@ -83,13 +83,16 @@ export const ConcernementsStore = defineStore({
         })
 
     },
-    openCloseConcernement (id, state) {
-      // console.log('openCloseConcernement', id, state);
-      this.concernementsByID[id].opened = state;
-      if (state) {
-        this.opened = this.concernementsByID[id];
-        this.router.push({name: 'concernement', params: {id: id}});
-      }
+    openCloseConcernements (ids) {
+      var state;
+      this.concernements.forEach((c, i) => {
+        state = ids.indexOf(c.id) !== -1;
+        this.concernements[i].opened = this.concernementsByID[c.id].opened = state;
+        if (state) {
+          this.opened = c;
+          this.router.push({name: 'concernement', params: {id: c.id}});
+        }
+      });
     },
     resetConcernementOpened () {
       this.opened = null;