scaling superpositions constraints on concernement opening

src/components/ConcernementMapItem.vue

@@ -107,6 +107,8 @@ export default {
         this.initPaperObjects()
       // }  
     }
+
+    this.setConcernementMapItem(this.id, this);
   },
   // mounted() {
   //   console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas);
@@ -130,7 +132,7 @@ export default {
         // console.log('mapItem watch is_opened', n, this.is_opened);
         if(n){ // opened
           this.openClose(true);
-        }else{ // closed
+        }else if(o) { // closed if was opened
           this.openClose(false);
         }
       },
@@ -180,7 +182,8 @@ export default {
   },
   methods: {
     ...mapActions(CommonStore,['setHoverElmt']),
-    ...mapActions(ConcernementsStore,['openCloseConcernements',
+    ...mapActions(ConcernementsStore,['setConcernementMapItem',
+                                      'openCloseConcernements',
                                       'hideShowConcernement',
                                       'setBesoinPaperId',
                                       'setOpenedDoleanceField',
@@ -369,7 +372,7 @@ export default {
         // INFO https://github.com/liabru/matter-attractors/issues/8        
         // INFO https://github.com/liabru/matter-attractors/blob/master/index.js
         // INFO https://github.com/liabru/matter-attractors/blob/master/build/matter-attractors.js#L180
-        // MatterAttractors.Attractors.gravityConstant = -20;
+        MatterAttractors.Attractors.gravityConstant = -20;
 
         // Create parts of the body : main big circle & entities
         // INFO map a range of numbers to another range of numbers https://stackoverflow.com/a/46462321
@@ -400,37 +403,37 @@ export default {
           collisionFilter: {
             group: -1
           },
-          // plugin: {
-          //   attractors: [
-          //     // // there is a built in helper function for Newtonian gravity!
-          //     // // you can find out how it works in index.js
-          //     MatterAttractors.Attractors.gravity
+          plugin: {
+            attractors: [
+              // // there is a built in helper function for Newtonian gravity!
+              // // you can find out how it works in index.js
+              MatterAttractors.Attractors.gravity
               
-          //     // function(bodyA, bodyB) {
-          //     //   var force = {
-          //     //     x: (bodyA.position.x - bodyB.position.x) * 1e-6,
-          //     //     y: (bodyA.position.y - bodyB.position.y) * 1e-6
-          //     //   }
-          //     //   // apply force to both bodies
-          //     //   Matter.Body.applyForce(bodyA, bodyA.position, force);
-          //     //   Matter.Body.applyForce(bodyB, bodyB.position, Matter.Vector.neg(force));
-          //     // }
-
-          //     // INFO https://github.com/liabru/matter-attractors/blob/master/build/matter-attractors.js#L192
-          //     // function (bodyA, bodyB){
-          //     //   // use Newton's law of gravitation
-          //     //   var bToA = Matter.Vector.sub(bodyB.position, bodyA.position),
-          //     //       distanceSq = Matter.Vector.magnitudeSquared(bToA) || 0.0001,
-          //     //       normal = Matter.Vector.normalise(bToA),
-          //     //       magnitude = -MatterAttractors.Attractors.gravityConstant * (bodyA.mass * bodyB.mass / distanceSq),
-          //     //       force = Matter.Vector.mult(normal, magnitude);
-
-          //     //   // to apply forces to both bodies
-          //     //   Matter.Body.applyForce(bodyA, bodyA.position, Matter.Vector.neg(force));
-          //     //   Matter.Body.applyForce(bodyB, bodyB.position, force);
-          //     // }
-          //   ]
-          // }
+              // function(bodyA, bodyB) {
+              //   var force = {
+              //     x: (bodyA.position.x - bodyB.position.x) * 1e-6,
+              //     y: (bodyA.position.y - bodyB.position.y) * 1e-6
+              //   }
+              //   // apply force to both bodies
+              //   Matter.Body.applyForce(bodyA, bodyA.position, force);
+              //   Matter.Body.applyForce(bodyB, bodyB.position, Matter.Vector.neg(force));
+              // }
+
+              // INFO https://github.com/liabru/matter-attractors/blob/master/build/matter-attractors.js#L192
+              // function (bodyA, bodyB){
+              //   // use Newton's law of gravitation
+              //   var bToA = Matter.Vector.sub(bodyB.position, bodyA.position),
+              //       distanceSq = Matter.Vector.magnitudeSquared(bToA) || 0.0001,
+              //       normal = Matter.Vector.normalise(bToA),
+              //       magnitude = -MatterAttractors.Attractors.gravityConstant * (bodyA.mass * bodyB.mass / distanceSq),
+              //       force = Matter.Vector.mult(normal, magnitude);
+
+              //   // to apply forces to both bodies
+              //   Matter.Body.applyForce(bodyA, bodyA.position, Matter.Vector.neg(force));
+              //   Matter.Body.applyForce(bodyB, bodyB.position, force);
+              // }
+            ]
+          }
         });
         Matter.Body.setPosition(this.body, this.pos);
 
@@ -1123,7 +1126,7 @@ export default {
           if (!this.is_opened) {
             this.paper_main_object.children.entites_superposes.visible = true; // if not opened and has_superpositions draw the entites_superposes points
           } else {
-            this.paper_main_object.children.entites_superposes.visible = false;
+            this.paper_main_object.children.entites_superposes.visible = true;
           }
         } else {
             this.paper_main_object.children.entites_superposes.visible = false;
@@ -1389,15 +1392,32 @@ export default {
             Matter.Body.scale(this.body, obj.s, obj.s)
             this.paper_main_object.scale(obj.s);
 
+            // update superposition constraints
+            if (Object.keys(this.concernement.superposition_constraints).length) {
+              // console.log('concernement superposition_constraints', this.concernement.superposition_constraints);
+              for(let constraint_id in this.concernement.superposition_constraints) {
+                let constraint = this.concernement.superposition_constraints[constraint_id];
+                // console.log('concernement mapitem constraint', constraint);
+                let ab = this.id === constraint.concernementA.id ? 'A' : 'B';
+                let point = constraint[`point${ab}`];
+                // console.log('point', point);
+                // revert to the original point
+                let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
+                let newpoint = Matter.Vector.create(oripoint.x * obj.s, oripoint.y * obj.s)
+                constraint[`point${ab}`] = newpoint;
+              }
+            }
+
             // record new scale
             this.prev_scale = this.scale;
             this.scale = obj.s;
             this.opacity = obj.o;
-            
+            // console.log('tween update obj.s', obj.s);
             this.pos = {x:obj.x, y:obj.y};
             Matter.Body.setPosition(this.body, this.pos);
           })
           .onComplete((obj) => {
+            // console.log('tween complete obj.s', obj.s);
             // record tween one last time
             this.prev_scale = this.scale = obj.s;
             this.opacity = obj.o;
@@ -1416,6 +1436,8 @@ 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
@@ -1446,6 +1468,22 @@ export default {
             Matter.Body.scale(this.body, obj.s, obj.s)
             this.paper_main_object.scale(obj.s);
             
+            // update superposition constraints
+            if (this.concernement.superposition_constraints && Object.keys(this.concernement.superposition_constraints).length) {
+              // console.log('concernement superposition_constraints', this.concernement.superposition_constraints);
+              for(let constraint_id in this.concernement.superposition_constraints) {
+                let constraint = this.concernement.superposition_constraints[constraint_id];
+                // console.log('concernement mapitem constraint', constraint);
+                let ab = this.id === constraint.concernementA.id ? 'A' : 'B';
+                let point = constraint[`point${ab}`];
+                // console.log('point', point);
+                // revert to the original point
+                let oripoint = Matter.Vector.create(point.x / this.scale, point.y / this.scale)
+                let newpoint = Matter.Vector.create(oripoint.x * obj.s, oripoint.y * obj.s)
+                constraint[`point${ab}`] = newpoint;
+              }
+            }
+
             // record new scale
             this.prev_scale = this.scale;
             this.scale = obj.s;
@@ -1476,7 +1514,7 @@ export default {
       }
 
       if (this.opened_concernement) {
-        if (this.opened_concernement.id !== this.id) {
+        if (this.opened_concernement.id !== this.id && this.opened_concernement.superposed_concernements_id.indexOf(this.id) < 0) {
           this.pushAside()
         }
       } else if (this.map_mode === 'proximite' 

src/components/MapConcernements.vue

@@ -233,7 +233,7 @@ export default {
     allSuperpositions: {
       handler (n, o) {
         console.log('concernementMap watch allSuperpositions', o, n);
-        if (n && n.length) {
+        if (this.map_mode === "superposition" && n && n.length) {
           // create constraints with a delay (watch is needed for first page load)
           window.setTimeout(this.setSuperpositionsMatterConstraints, 200);
         }
@@ -243,7 +243,16 @@ export default {
         // }
       },
       deep: true
-    }
+    },
+    // opened_concernement: {
+    //   handler (n, o) {
+    //     console.log('map opened_concernement', this.opened_concernement);
+    //     if (this.map_mode === 'superposition' && n) {
+    //       this.resetSuperpositionsMatterConstraints();
+    //     }
+    //   }, 
+    //   deep: true
+    // }
   },
   methods: {
     ...mapActions(ConcernementsStore,['setMapMode',
@@ -1053,7 +1062,7 @@ export default {
         // get the entite coordinates inside the concernement body
         let pointA = null;
         let concernementA = this.concernementsByID[superposition[0].cid];
-        // console.log('concernementA', concernementA);
+        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);
@@ -1063,7 +1072,7 @@ export default {
         }
         let pointB = null;
         let concernementB = this.concernementsByID[superposition[1].cid];
-        // console.log('concernementB', concernementB);
+        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);
@@ -1081,20 +1090,39 @@ export default {
             pointB: pointB,
             stiffness: 1,
             length: 0,
-            damping: 1
+            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)
+          concernementA.superposition_constraints[c.id] = c;
+          concernementB.superposition_constraints[c.id] = c;
+          // 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(){
       console.log('clearSuperpositionsMatterConstraints', this.superpositions_constraints);
       for(let constraint of this.superpositions_constraints){
+        delete constraint.concernementA.superposition_constraints[constraint.id];
+        delete constraint.concernementB.superposition_constraints[constraint.id];
         Matter.Composite.remove(this.world, constraint, true);
       }
       this.superpositions_constraints = [];
     },
+    // resetSuperpositionsMatterConstraints(){
+    //   this.clearSuperpositionsMatterConstraints();
+    //   this.setSuperpositionsMatterConstraints();
+    // },
     onBeforeEngineUpdate(){
 
     },

src/stores/concernements.js

@@ -92,25 +92,14 @@ export const ConcernementsStore = defineStore({
                   // SUPERPOSITIONS
                   if (entite.entite.superposition.length) {
                     concernement.has_superpositions = true;
+                    concernement.superposition_constraints = {};
+                    concernement.superposed_concernements_id = []; 
                     entite.entite.superposition.forEach(entite_superpose => {
                       // console.log(`superposition eid:${entite.entite.id}, teid:${entite_superpose.id}`);
                       let already_recorded = false;
                       // loop through all already recorded superposition to complete the array instead of create duplicates
+                      // TODO check if target cid and eid are accessible before recording the superposition
                       for(let superposition of this.allSuperpositions) { 
-                        // if (superposition.indexOf(entite_superpose.id) >= 0) {
-                        //   already_recorded = true;
-                        //   if (superposition.indexOf(entite.entite.id) < 0) {
-                        //     superposition.push(entite.entite.id)
-                        //   }
-                        //   break;
-                        // }
-                        // if (superposition.indexOf(entite.entite.id) >= 0) {
-                        //   already_recorded = true;
-                        //   if (superposition.indexOf(entite_superpose.id) < 0) {
-                        //     superposition.push(entite_superpose.id)
-                        //   }
-                        //   break;
-                        // }
                         for(let superposition_item of superposition) {
                           if (superposition_item.eid === entite.entite.id && !superposition_item.cid) {
                             console.log(`already_recorded, eid:${entite.entite.id}, teid:${entite_superpose.id}`, entite.entite.title);
@@ -316,6 +305,9 @@ export const ConcernementsStore = defineStore({
         }
       });
     },
+    setConcernementMapItem (id, o) {
+      this.concernementsByID[id].map_item = o;
+    },
     resetConcernementOpened () {
       this.opened_concernement = null;
       this.openCloseConcernements();

src/views/Concernement.vue

@@ -106,7 +106,7 @@ export default {
 
 <template>
   <section v-if="opened_concernement" class="concernement">
-    <TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action'" :id="id" :eid="eid" :entite="entite"/>
+    <TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action'|| map_mode === 'superposition'" :id="id" :eid="eid" :entite="entite"/>
     <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
     <Doleancer v-if="map_mode === 'doleancer'" :id="id"/>  
     <nav class="close-concernement" @click="closeConcernement">