superpositions on map are ok

src/components/MapConcernements.vue

@@ -42,6 +42,8 @@ export default {
       paper: null,
       //
       mapPopupData: null,
+      //
+      superpositions_constraints: []
     }
   },
   provide() {
@@ -58,7 +60,8 @@ export default {
                                     'concernementsByID',
                                     'opened_concernement',
                                     'opened_entite_id',
-                                    'opened_recit'
+                                    'opened_recit',
+                                    'allSuperpositions'
                                   ]),
     ...mapState(CommonStore,['map_item_ray',
                              'hover_elmt',
@@ -72,13 +75,22 @@ export default {
       timing: {
         //timestamp: 0.5,
         timeScale: 0.5
-      }
+      },
+      // constraintIterations: 20,
+      // positionIterations: 20,
+      // velocityIterations: 20
     }
     this.engine = Matter.Engine.create(engineOptions);
     this.engine.gravity.scale = 0;
     this.world = this.engine.world;
+
+
+    // listen for afterUpdate event from Matter.Engine object
+    Matter.Events.on(this.engine, "beforeUpdate", this.onBeforeEngineUpdate);
+    Matter.Events.on(this.engine, "afterUpdate", this.onAfterEngineUpdate);
   },
   mounted() {
+    console.log('map mounted');
     this.canvasMap.canvas = this.$refs['canvas-map'];
     this.canvasMap.ctx = this.canvasMap.canvas.getContext('2d');
 
@@ -111,6 +123,7 @@ export default {
         this.setHoverElmt(null);
       }
     }.bind(this);
+
     // MATTER
     let wall_w = 1000;
     Matter.Composite.add(this.world, [
@@ -203,6 +216,33 @@ export default {
         }
       },
       deep: true
+    },
+    map_mode: {
+      handler (n, o) {
+        console.log('concernementMap watch map_mode', o, n);
+        if (n === 'superposition' && !this.opened_concernement) {
+          // create constraints
+          this.setSuperpositionsMatterConstraints();
+        }else{
+          // destroy constraints
+          this.clearSuperpositionsMatterConstraints();
+        }
+      },
+      deep: true
+    },
+    allSuperpositions: {
+      handler (n, o) {
+        console.log('concernementMap watch allSuperpositions', o, n);
+        if (n && n.length) {
+          // create constraints with a delay (watch is needed for first page load)
+          window.setTimeout(this.setSuperpositionsMatterConstraints, 200);
+        }
+        // else{
+        //   // destroy constraints
+        //   this.clearSuperpositionsMatterConstraints();
+        // }
+      },
+      deep: true
     }
   },
   methods: {
@@ -995,6 +1035,98 @@ export default {
         strokeColor: "#01ffe2",
         strokeWidth: 0.25,
       })
+    },
+    setSuperpositionsMatterConstraints(){
+      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;
+          }
+        }
+        
+        // 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
+          });
+          this.superpositions_constraints.push(c);
+          Matter.Composite.add(this.world, c);
+        }
+      }
+    },
+    clearSuperpositionsMatterConstraints(){
+      console.log('clearSuperpositionsMatterConstraints', this.superpositions_constraints);
+      for(let constraint of this.superpositions_constraints){
+        Matter.Composite.remove(this.world, constraint, true);
+      }
+      this.superpositions_constraints = [];
+    },
+    onBeforeEngineUpdate(){
+
+    },
+    onAfterEngineUpdate(){
+
+      // // START OF DEBUGGING
+      // // draw lines of constraints for debuging
+      // let constraints_lines = this.paper.project.getItem({name: 'constraints_lines', class: paper.Group});
+      // if (constraints_lines) {
+      //   constraints_lines.removeChildren();
+      // }else{
+      //   constraints_lines = new paper.Group({
+      //     pivot: new paper.Point({x:0,y:0}),
+      //     name: 'constraints_lines',
+      //   });
+      // }
+      // let all_constrains = Matter.Composite.allConstraints(this.world);
+      // let children = [];
+      // for(let constraint of all_constrains){
+      //   // console.log('constrain', constraint);
+      //   let pointAWorld = Matter.Constraint.pointAWorld(constraint);
+      //   let pointBWorld = Matter.Constraint.pointBWorld(constraint);
+      //   // console.log('pointAWorld, pointBWorld', pointAWorld, pointBWorld);
+      //   children.push(new paper.Path.Line({
+      //     from: [pointAWorld.x, pointAWorld.y],
+      //     to: [pointBWorld.x, pointBWorld.y],
+      //     strokeColor: '#f00',
+      //     strokeWidth: 1
+      //   }));
+      // }
+      // constraints_lines.addChildren(children);
+      // // END OF DEBUGGING
     }
   },
   beforeUpdate () {