improved mapitem opening scaling regarding surounding contents

ex: double cartouche for superpositions

src/components/ConcernementMapItem.vue

@@ -1,5 +1,8 @@
 <script>
 
+
+import { nextTick } from 'vue'
+
 import Matter from "matter-js";
 import MatterAttractors from "matter-attractors";
 // Matter.use(MatterAttractors);
@@ -1162,9 +1165,9 @@ export default {
     handlePaperVisibilityOnAfterEnginUpdate(){
       // contours focused
       if (!this.isFocused()){
-        this.paper_main_object.children['contours'].fillColor = this.mapitem.clone ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)";
+        this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)"; //this.mapitem.clone ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)";
       }else{
-        this.paper_main_object.children['contours'].fillColor = this.mapitem.clone ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)";
+        this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.4)"; //this.mapitem.clone ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)";
         if (this.is_hover) {
           this.paper_main_object.children['contours'].strokeColor = "#01ffe2";
           this.paper_main_object.children['contours'].strokeWidth = 2;
@@ -1371,7 +1374,7 @@ export default {
         }
       }.bind(this);
       
-      this.paper_main_object.onClick = function(event){
+      this.paper_main_object.onClick = async function(event){
         console.log('paper concernement onClick');
         
         // prevent hover map item mouse event if cartouch is opened
@@ -1381,19 +1384,19 @@ export default {
           console.log('mapitem is NOT opened');
           if (!this.opened_concernement) { // si aucun concernement n'est ouvert
             console.log(`Open me ${this.id}`);
-            // open/close all concernements
+            // push route (keep the hash for map_mode)
-            this.openCloseConcernements(this.cid, this.id)
+            // wait for routing to be finished before opening the mapItem
-              // push route (keep the hash for map_mode)
+            await this.$router.push({
-            this.$router.push({
               name: 'concernement',
               params: {cid: this.cid},
               query: {
                 mapitemid: this.id,
-                // TODO when mapitem not a clone, there is no superposition_id prop
                 superposition_id: this.mapitem.superposition_ids[0]
               },
               hash: `#${this.map_mode}`
             });
+            // open/close all concernements
+            this.openCloseConcernements(this.cid, this.id)
             // reset the mousehover
             this.resetHoverElmt();
           }
@@ -1457,7 +1460,8 @@ export default {
       }, 100);
     },
     // OPEN / CLOSE (with tween)
-    openClose(open) {
+    openClose(open) { // async 
+      // await nextTick(); // not working
       console.log(`ConcernementsMapItem ${this.id} openClose: ${open}`);
       if (this.tween) {
         this.tween.stop();
@@ -1468,10 +1472,14 @@ export default {
         this.setPaperContents();
         this.handlePaperVisibilityOnBeforeOpen();
 
-        // calcul opened size regarding window size
+        // calcul opened size regarding window size and surounding contents
-        // let ch = this.canvas.height;
+        let header = document.querySelector('header#header');
-        // let s = this.canvas.height / (this.ray*2.8)
+        let header_height = header.clientHeight;
-        let s = Math.min(this.canvas.height, this.canvas.width - this.cartouch_width) / (this.ray*2.8)
+        let map_nav = document.querySelector('nav#map-nav');
+        let map_nav_height = map_nav.clientHeight;
+        let s_h = (this.canvas.height - header_height - map_nav_height) / (this.ray*2*1.15);
+        let s_w = (this.canvas.width - this.cartouch_width) / (this.ray*2*1.7);
+        let s = Math.min(s_h, s_w)
         
         // create once the opening tweening
         this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0})
@@ -1693,14 +1701,14 @@ export default {
         ? (this.canvas.width - this.cartouch_width) / 2
         : this.canvas.width / 2;
       // get the direction to the closest side
-      let dir = 
+      let dir = this.map_mode === 'superposition' 
-        this.pos.x < pseudo_center_x 
-        || (this.map_mode === 'superposition' 
           && this.concernement.superposition_constraints_id
           && this.concernement.superposition_constraints_id[this.id]
-          && this.concernement.superposition_constraints_id[this.id].length) // go to the left if has superposition constraint applied
+          && this.concernement.superposition_constraints_id[this.id].length // go to the right if has superposition constraint applied
-        ? -1 // to the left
+        ? 1 // to the right
-        : -1; // to the right
+        : this.pos.x > pseudo_center_x // else
+          ? 1   // to the right 
+          : -1; // to the left
       // max and min item position
       let minp = 0;
       let maxp = dir < 0 

src/components/MapConcernements.vue

@@ -274,7 +274,9 @@ export default {
     ...mapActions(CommonStore,['addPaperSymbolDefinition',
                                'setHoverElmt']),
     animate () {
-      Matter.Engine.update(this.engine, 1);
+      // if (document.hasFocus()) {
+        Matter.Engine.update(this.engine, 1);
+      // }
       window.requestAnimationFrame(this.animate);
     },
     initPaperSymbols(){
@@ -1060,7 +1062,7 @@ export default {
       })
     },
     async setSuperpositionsMatterConstraints(){
-      await nextTick(); // wait for dom to be upadted before applying consraint
+      await nextTick(); // wait for dom to be upadted before applying constraint
       console.log('setSuperpositionsMatterConstraints this.allSuperpositions', this.allSuperpositions);
       
       // loop through all supperposition couple

src/stores/common.js

@@ -7,6 +7,7 @@ export const CommonStore = defineStore({
   state: () => ({
     hover_elmt: null,
     map_item_ray: Math.min(window.innerWidth, window.innerHeight) * 0.08,
+    original_cartouch_width: 450,
     cartouch_width: 450,
     cartouch_is_opened: false,
     paper_symbol_definitions: {}
@@ -20,6 +21,10 @@ export const CommonStore = defineStore({
       // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer
       this.hover_elmt = elmt;
     },
+    setCartoucheWidth (delta) {
+      console.log('CommonStore setCartoucheWidth', delta);
+      this.cartouch_width = this.original_cartouch_width * delta; 
+    },
     setCartoucheOpened (v) {
       this.cartouch_is_opened = v;
     },

src/views/Concernement.vue

@@ -21,6 +21,7 @@ export default {
   data(){
     return {
       entite: null,
+      superposition_id: null,
       opened_besoin_id: null,
       arrowup_path: mdiArrowUp
     }
@@ -30,15 +31,15 @@ export default {
                                     'opened_concernement',
                                     'concernements_loaded',
                                     'allSuperpositions_byid']),
-    // ...mapState(CommonStore,['hover_elmt']),
+    ...mapState(CommonStore,['cartouch_width']),
-    superposition_id () {
+    // superposition_id () {
-      console.log('superposition_id computed');
+    //   console.log('superposition_id computed');
-      if(this.$route.query.superposition_id){
+    //   if(this.$route.query.superposition_id){
-        return this.$route.query.superposition_id
+    //     return this.$route.query.superposition_id
-      } else {
+    //   } else {
-        return null;
+    //     return null;
-      }
+    //   }
-    },
+    // },
     superposition () {
       console.log('superposition computed', this.superposition_id);
       if(this.superposition_id){
@@ -80,6 +81,18 @@ export default {
     console.log(`Concernement view created, id: ${this.cid}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
     console.log('Concernement view created, allSuperpositions_byid', this.allSuperpositions_byid);
     console.log("superposition", this.superposition);
+
+    if(this.map_mode === "superposition" && this.$route.query.superposition_id){
+      this.superposition_id = this.$route.query.superposition_id;
+      // as we have two content to show multiply the cartouch with by 2
+      // necessary for mapitem opening scale and position
+      this.setCartoucheWidth(2)
+    }else{
+      // as we have one content to show multiply the cartouch with by 1
+      // necessary for mapitem opening scale and position
+      this.setCartoucheWidth(1)
+    }
+
     // when we arrived directly to the url, load the entite
     // this.eid provided by route params
     if (!this.entity && this.eid) {
@@ -114,6 +127,7 @@ export default {
                                       'setOpenedEntityId',
                                       'setMapMode',
                                       'resetConcernementOpened']),
+    ...mapActions(CommonStore,['setCartoucheWidth']),
     openEntity(){
       this.setOpenedEntityId(parseInt(this.eid))
       this.loadEntite()