applied matter constraints to superposed concernements clones

src/App.vue

@@ -33,18 +33,23 @@ export default {
       // loop through all superposition grouped by concernements couples
       for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_byid)){
         // if one concernement couple has more than one superposition
-        if (superpositions.length > 1) {
+        let superpositions_ids = Object.keys(superpositions);
+        if (superpositions_ids.length > 1) {
           // loop through these superpositions for one concernement couple starting with the second
-          for (let i = 1; i < superpositions.length; i++) {
-            let superposition_id = `${superpositions[i][0].cid}-${superpositions[i][0].eid}--${superpositions[i][1].cid}-${superpositions[i][1].eid}`
+          let i = 0;
+          for(let [superposition_id, superposition] of Object.entries(superpositions)){
+            i++
+            if (i === 1) {
+              continue;
+            }
             // first concernement of the couple
             clones.push({
-              concernement: this.concernementsByID[superpositions[i][0].cid],
+              concernement: this.concernementsByID[superposition[0].cid],
               superposition_id: superposition_id
             })
             // second concernement of the couple
             clones.push({
-              concernement: this.concernementsByID[superpositions[i][1].cid],
+              concernement: this.concernementsByID[superposition[1].cid],
               superposition_id: superposition_id
             })
           }

src/components/ConcernementMapItem.vue

@@ -76,7 +76,7 @@ export default {
                             'paper_symbol_definitions'])
   },
   created () {
-    // console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
+    console.log(`ConcernementsMapItem ${this.concernement.id} created`, this.canvasMap, this.matterEngine);
     this.id = this.concernement.id
     // this.entites = this.concernement.entites
     this.entites = this.concernement.revisions_byid[this.concernement.revision_id].entites;
@@ -408,7 +408,7 @@ export default {
         this.body = Matter.Body.create({
           parts: this.body_parts,
           item_type: 'concernement',
-          id: this.concernement.id,
+          id: this.superposition_id ? `${this.concernement.id}_${this.superposition_id}` : this.concernement.id,
           frictionAir: 0,
           // mass: Math.pow(3, this.entites.length),
           // mass: 10,
@@ -476,7 +476,7 @@ export default {
         pivot: new paper.Point(this.pos),
         name: this.superposition_id ? `clone_${this.id}.${this.superposition_id}` : `main_${this.id}`,
         cid: this.id,
-        superosition_id: this.superposition_id
+        superposition_id: this.superposition_id
       });
 
       // the sub items for one concernement

src/components/MapConcernements.vue

@@ -2,6 +2,7 @@
 
 // import { mapActions, mapState } from 'pinia'
 import { computed } from 'vue'
+import { nextTick } from 'vue'
 import MapBackground from '@components/MapBackground.vue'
 
 // https://brm.io/matter-js/docs/classes/Engine.html
@@ -61,7 +62,8 @@ export default {
                                     'opened_concernement',
                                     'opened_entite_id',
                                     'opened_recit',
-                                    'allSuperpositions'
+                                    'allSuperpositions',
+                                    'allSuperpositions_byid'
                                   ]),
     ...mapState(CommonStore,['map_item_ray',
                              'hover_elmt',
@@ -1045,72 +1047,90 @@ export default {
         strokeWidth: 0.25,
       })
     },
-    setSuperpositionsMatterConstraints(){
+    async setSuperpositionsMatterConstraints(){
+      await nextTick();
       console.log('setSuperpositionsMatterConstraints this.allSuperpositions', this.allSuperpositions);
       // let allBodies = Matter.Composite.allBodies(this.world);
       // console.log('allBodies', allBodies);
       // let allComposites = Matter.Composite.allComposites(this.world); 
       // console.log('allComposites', allComposites);
 
-      for(let superposition of this.allSuperpositions){
-        // console.log('superposition', superposition[0].cid, superposition[1].cid);
-        // get the concernement matter bodies with id
-        let bodyA = Matter.Composite.get(this.world, superposition[0].cid, 'body');
-        let bodyB = Matter.Composite.get(this.world, superposition[1].cid, 'body');
-        // console.log('bodyA, bodyB', bodyA, bodyB);
-
-        // get the entite coordinates inside the concernement body
-        let pointA = null;
-        let concernementA = this.concernementsByID[superposition[0].cid];
-        console.log('concernementA', concernementA);
-        for(let entiteA of concernementA.revisions_byid[concernementA.active_revision].entites){
-          if (entiteA.entite && entiteA.entite.id === superposition[0].eid && entiteA.display) {
-            // console.log('entiteA', entiteA);
-            pointA = Matter.Vector.create(entiteA.display.pos.x, entiteA.display.pos.y);
-            break;
-          }
-        }
-        let pointB = null;
-        let concernementB = this.concernementsByID[superposition[1].cid];
-        console.log('concernementB', concernementB);
-        for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){
-          if (entiteB.entite && entiteB.entite.id === superposition[1].eid && entiteB.display) {
-            // console.log('entiteB', entiteB);
-            pointB = Matter.Vector.create(entiteB.display.pos.x, entiteB.display.pos.y); 
-            break;
+      // loop through all supperposition couple
+      for(let [couple_id, superpositions] of Object.entries(this.allSuperpositions_byid)){
+        // if couple has only one superposition, use regular mapItems
+        let superpositions_ids = Object.keys(superpositions);
+        let i = 0;
+        for(let [superposition_id, superposition] of Object.entries(superpositions)){
+          i++;
+          // console.log('superposition', superposition[0].cid, superposition[1].cid);
+          let matter_bodyA_id, matter_bodyB_id;
+          if (superpositions_ids.length === 1 || i === 1) {
+            matter_bodyA_id = superposition[0].cid
+            matter_bodyB_id = superposition[1].cid
+          } else {
+            matter_bodyA_id = `${superposition[0].cid}_${superposition_id}`
+            matter_bodyB_id = `${superposition[1].cid}_${superposition_id}`
+          }  
+          
+          // get the concernement matter bodies with id
+          let bodyA = Matter.Composite.get(this.world, matter_bodyA_id, 'body');
+          let bodyB = Matter.Composite.get(this.world, matter_bodyB_id, 'body');
+          console.log('bodyA, bodyB', bodyA, bodyB);
+            
+          // get the entite coordinates inside the concernement body
+          let pointA = null;
+          let concernementA = this.concernementsByID[superposition[0].cid];
+          console.log('concernementA', concernementA);
+          for(let entiteA of concernementA.revisions_byid[concernementA.active_revision].entites){
+            if (entiteA.entite && entiteA.entite.id === superposition[0].eid && entiteA.display) {
+              // console.log('entiteA', entiteA);
+              pointA = Matter.Vector.create(entiteA.display.pos.x, entiteA.display.pos.y);
+              break;
+            }
           }
-        }
-        
-        // console.log(`pointA:`, pointA,` pointB:`, pointB);
-        if (bodyA && bodyB && pointA && pointB) {
-          let c = Matter.Constraint.create({
-            bodyA: bodyA,
-            pointA: pointA,
-            bodyB: bodyB,
-            pointB: pointB,
-            stiffness: 1,
-            length: 0,
-            damping: 1,
-            concernementA: concernementA,
-            concernementB: concernementB
-          });
-          this.superpositions_constraints.push(c);
-          Matter.Composite.add(this.world, c);
-          // keep a link the constraint into the concernement object (useful for tweening the constraint pointA & pointB in concernementMapItem)
-          // TODO this two lines make the all thing very slow 
-          // concernementA.superposition_constraints[c.id] = c;
-          // concernementB.superposition_constraints[c.id] = c;
-          concernementA.superposition_constraints_id.push(c.id);
-          concernementB.superposition_constraints_id.push(c.id);
-          // record all superposed concernements for each concernement
-          if (concernementA.superposed_concernements_id.indexOf(concernementB.id) < 0) {
-            concernementA.superposed_concernements_id.push(concernementB.id);
+          let pointB = null;
+          let concernementB = this.concernementsByID[superposition[1].cid];
+          console.log('concernementB', concernementB);
+          for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){
+            if (entiteB.entite && entiteB.entite.id === superposition[1].eid && entiteB.display) {
+              // console.log('entiteB', entiteB);
+              pointB = Matter.Vector.create(entiteB.display.pos.x, entiteB.display.pos.y); 
+              break;
+            }
           }
-          if (concernementB.superposed_concernements_id.indexOf(concernementA.id) < 0) {
-            concernementB.superposed_concernements_id.push(concernementA.id);
+          
+          // console.log(`pointA:`, pointA,` pointB:`, pointB);
+          if (bodyA && bodyB && pointA && pointB) {
+            let c = Matter.Constraint.create({
+              bodyA: bodyA,
+              pointA: pointA,
+              bodyB: bodyB,
+              pointB: pointB,
+              stiffness: 1,
+              length: 0,
+              damping: 1,
+              concernementA: concernementA,
+              concernementB: concernementB
+            });
+            this.superpositions_constraints.push(c);
+            Matter.Composite.add(this.world, c);
+            // keep a link the constraint into the concernement object (useful for tweening the constraint pointA & pointB in concernementMapItem)
+            // TODO this two lines make the all thing very slow 
+            // concernementA.superposition_constraints[c.id] = c;
+            // concernementB.superposition_constraints[c.id] = c;
+            concernementA.superposition_constraints_id.push(c.id);
+            concernementB.superposition_constraints_id.push(c.id);
+            // record all superposed concernements for each concernement
+            if (concernementA.superposed_concernements_id.indexOf(concernementB.id) < 0) {
+              concernementA.superposed_concernements_id.push(concernementB.id);
+            }
+            if (concernementB.superposed_concernements_id.indexOf(concernementA.id) < 0) {
+              concernementB.superposed_concernements_id.push(concernementA.id);
+            }
+
           }
+        } 
 
-        }
       }
     },
     clearSuperpositionsMatterConstraints(){

src/stores/concernements.js

@@ -173,11 +173,12 @@ export const ConcernementsStore = defineStore({
             
             // Handle multiple superpositions accross two concernements
             for(let superposition of this.allSuperpositions){
-              let superposition_id = `${superposition[0].cid}-${superposition[1].cid}`
-              if (!this.allSuperpositions_byid[superposition_id]) {
-                this.allSuperpositions_byid[superposition_id] = [];
+              let superposition_couple_id = `${superposition[0].cid}-${superposition[1].cid}`;
+              let superposition_id = `${superposition[0].cid}-${superposition[0].eid}--${superposition[1].cid}-${superposition[1].eid}`
+              if (!this.allSuperpositions_byid[superposition_couple_id]) {
+                this.allSuperpositions_byid[superposition_couple_id] = {};
               }
-              this.allSuperpositions_byid[superposition_id].push(superposition);
+              this.allSuperpositions_byid[superposition_couple_id][superposition_id] = superposition;
             }
             console.log('this.allSuperpositions_byid', this.allSuperpositions_byid);