diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 8cb4035..20003d3 100644 --- a/src/components/ConcernementMapItem.vue +++ b/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) { diff --git a/src/stores/common.js b/src/stores/common.js index 83fa854..754f1be 100644 --- a/src/stores/common.js +++ b/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); diff --git a/src/views/Concernement.vue b/src/views/Concernement.vue index a63bbb4..4aa5a7a 100644 --- a/src/views/Concernement.vue +++ b/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 } },