better responsivness #2416

src/components/ConcernementMapItem.vue

@@ -196,6 +196,8 @@ export default {
         // if map_item is open and we change the mad mode, redefined what is displayed in the "boussole"
         if (this.is_open & n !== o) {
           this.setPaperContents();
+          this.resetMapItemPosition();
+          this.resetMapItemScale();
         }
         
         // Clones visibility
@@ -264,7 +266,7 @@ export default {
         console.log(`map_item_ray updated o: ${o}, n: ${n}`);
         this.ray = n;
         this.updateMatterBodyRay();
-        this.updatePaperObjectSize(n,o);
+        this.updatePaperObjectSize();
       },
       deep: true
     }
@@ -644,7 +646,7 @@ export default {
 
       this.initPaperEvents()
     },
-    async updatePaperObjectSize(n,o){
+    async updatePaperObjectSize(){
       await nextTick();
       // INFO we redraw the points with the new ray AND sacle the backgrounds ... would it be simplier to only resize the whole mapitem ???
       // window has been resized
@@ -654,6 +656,7 @@ export default {
       if (this.is_open) {
         // move to the new position
         // INFO we need to change position first for the contours to be redraw in the right place
+        // this.resetMapItemPosition();
         this.pos = this.paper_main_object.position = {
           x: (this.canvas.width - this.cartouch_width) / 2,
           y: this.canvas.height / 2
@@ -2107,14 +2110,14 @@ export default {
     },
     // OPEN / CLOSE (with tween)
     getOpeningAvailableScale(){
-// calcul opened size regarding window size and surounding contents
-        let header = document.querySelector('header#header');
-        let header_height = header.clientHeight;
-        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);
-        return Math.min(s_h, s_w)
+      // calcul opened size regarding window size and surounding contents
+      let header = document.querySelector('header#header');
+      let header_height = header.clientHeight;
+      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);
+      return Math.min(s_h, s_w)
     },
     openClose(open) { // async 
       // await nextTick(); // not working
@@ -2295,6 +2298,29 @@ export default {
       }
       this.tween.easing(Tween.Easing.Quadratic.InOut).start();
     },
+    async resetMapItemPosition(){
+      await nextTick();
+      console.log('resetMapItemPosition');
+      this.pos = this.paper_main_object.position = {
+        x: (this.canvas.width - this.cartouch_width) / 2,
+        y: this.canvas.height / 2
+      };
+      this.constraint.pointA = this.pos;
+      console.log('resetMapItemPosition', this.cartouch_width, this.pos);
+      Matter.Body.setPosition(this.body, this.pos);
+    },
+    async resetMapItemScale(){
+      await nextTick();
+      console.log('resetMapItemScale');
+      let s = this.getOpeningAvailableScale();
+      // revert to the original scale (by reverting the previous scale)
+      this.paper_main_object.scale(1 / this.scale);
+      // then scale again to new scale
+      this.paper_main_object.scale(s);
+      this.prev_scale = this.scale = s;
+
+      // TODO handle superposition scaling
+    },
     // ENGINE UPDATE
     onBeforeEngineUpdate (event) {
 

src/stores/common.js

@@ -27,7 +27,7 @@ export const CommonStore = defineStore({
     },
     setCartoucheWidth (delta) {
       console.log('CommonStore setCartoucheWidth', delta);
-      this.cartouch_width = this.original_cartouch_width * delta; 
+      this.cartouch_width = this.original_cartouch_width * delta + 8 * (delta+1);
     },
     setCartoucheOpened (v) {
       console.log('setCartoucheOpened', v);

src/views/Concernement.vue

@@ -149,6 +149,21 @@ export default {
         }
       },
       deep: true
+    },
+    map_mode: {
+      handler (n, o) {
+        console.log('concernement watch map_mode', o, n);
+        if(n === "proximite" || n === "superposition"){
+          // 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)
+        }
+      },
+      deep: true
     }
 
   },