we can now zoom in the opened terrain de vie

src/assets/main.scss

@@ -610,7 +610,8 @@ body{
         }
         section.sliders{
           padding: 1em 0 0.5em;
-          section.historique{
+          section.historique,
+          section.details{
             >label{
               padding:0;
             }

src/components/ConcernementMapItem.vue

@@ -40,6 +40,7 @@ export default {
       salientPoints: [],
       scale: 1,
       prev_scale: 1,
+      details_zoom_scale: 1,
       opacity: 0,
       tween: null,
       is_visible: true,
@@ -68,7 +69,8 @@ export default {
                                     'allSuperpositions_clustered',
                                     'allMapItems_byid',
                                     'opened_concernement',
-                                    'opened_entite_id']),
+                                    'opened_entite_id',
+                                    'detailsZoomValue']),
     ...mapState(CommonStore,['hover_elmt',
                             'map_item_ray',
                             'cartouch_width',
@@ -269,6 +271,15 @@ export default {
         this.updatePaperObjectSize();
       },
       deep: true
+    },
+    detailsZoomValue: {
+      handler (n, o) {
+        if (this.is_open) {
+          console.log('map_item detailsZoomValue watch', n);
+          this.updateDetailsZoomScale()
+        }
+      },
+      deep: true
     }
   },
   methods: {
@@ -689,6 +700,18 @@ export default {
       this.paper_main_object.addChild(this.setPaperContour());
 
     },
+    updateDetailsZoomScale(){
+      // revert to the original scale (by reverting the previous scale)
+      this.paper_main_object.scale(1 / this.details_zoom_scale);
+      // compute the zoom scale
+      this.details_zoom_scale = this.scale * this.detailsZoomValue;
+      // then scale again to new scale
+      this.paper_main_object.scale(this.details_zoom_scale);
+      // // handle superposition scaling
+      // this.resetSuperpositionsConstraintsScaling(s);
+
+      // this.prev_scale = this.scale = s;
+    },
     /*
     * called by openClose() function
     */
@@ -2156,6 +2179,7 @@ export default {
             // record new scale
             this.prev_scale = this.scale;
             this.scale = this.mapitem.scale = obj.s;
+            this.details_zoom_scale = this.scale * this.detailsZoomValue;
             this.opacity = obj.o;
             // console.log('tween update obj.s', obj.s);
             this.pos = {x:obj.x, y:obj.y};
@@ -2165,6 +2189,7 @@ export default {
             // console.log('tween complete obj.s', obj.s);
             // record tween one last time
             this.prev_scale = this.scale = obj.s;
+            this.details_zoom_scale = this.scale * this.detailsZoomValue;
             this.mapitem.scale = this.scale;
             this.opacity = obj.o;
             this.pos = {x:obj.x, y:obj.y};
@@ -2258,11 +2283,13 @@ export default {
             this.prev_scale = this.scale;
             this.scale = obj.s;
             this.mapitem.scale = this.scale;
+            this.details_zoom_scale = this.scale * this.detailsZoomValue;
             this.opacity = obj.o;
           })
           .onComplete((obj) => {
             this.prev_scale = this.scale = 1;
             this.mapitem.scale = this.scale;
+            this.details_zoom_scale = this.scale * this.detailsZoomValue;
             this.handlePaperVisibilityOnClosed();
             this.clearPaperContents();
             this.is_closing = false;
@@ -2324,6 +2351,7 @@ export default {
       this.resetSuperpositionsConstraintsScaling(s);
       // record the new scale
       this.prev_scale = this.scale = s;
+      this.details_zoom_scale = this.scale * this.detailsZoomValue;
     },
     // ENGINE UPDATE
     onBeforeEngineUpdate (event) {

src/components/contents/TerrainDeVie.vue

@@ -29,6 +29,8 @@ export default {
       entite: null,
       history_value: 0,
       history_slider_ops: null,
+      details_value: 0,
+      details_slider_ops: null,
       infos_opened: false,
       chevronright_path: mdiChevronRight,
       chevrondown_path: mdiChevronDown,
@@ -103,6 +105,16 @@ export default {
       this.history_slider_ops = null;
     }
 
+    // details
+    this.details_slider_ops = {
+      min: 1,
+      max: 4,
+      interval: 0.05,
+      'hide-label': true,
+      tooltip: 'none',
+      dotSize:10,
+    } 
+
   },
   // mounted(){
   //   console.log('terrain de vie mounted', this);
@@ -118,6 +130,13 @@ export default {
       },
       deep: true
     },
+    details_value: {
+      handler (n, o) {
+        // console.log(`TerrainDeVie watch history_value o:${o}, n:${n}`);
+        this.setDetailsZoomValue(n);
+      },
+      deep: true
+    },
     cid: {
       handler (n,o) {
         console.log(`TerrainDeVie watch cid o:${o}, n:${n}`);
@@ -140,7 +159,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(ConcernementsStore, ['setActiveRevision']), // 'loadConcernementsRevisions'
+    ...mapActions(ConcernementsStore, ['setActiveRevision', 'setDetailsZoomValue']), // 'loadConcernementsRevisions'
     onClickInfos(){
       this.infos_opened = !this.infos_opened;
     },
@@ -237,6 +256,15 @@ export default {
             v-bind="history_slider_ops"
           ></vue-slider>
         </section>
+        <section class="details" v-if="details_slider_ops">
+          <label>Details</label>
+          <!-- <h3>{{ details_value }}</h3> -->
+          <vue-slider
+            ref="details_slider"
+            v-model="details_value"
+            v-bind="details_slider_ops"
+          ></vue-slider>
+        </section>
       </section>
     </template>
   </CartoucheLayout> 

src/stores/concernements.js

@@ -38,6 +38,7 @@ export const ConcernementsStore = defineStore({
     p_mise_en_oeuvre_decision: {},
     p_reception_application_decision: {},
     concernements_loaded: false,
+    detailsZoomValue: 1,
   }),
   getters: {
     
@@ -441,6 +442,9 @@ export const ConcernementsStore = defineStore({
     setActiveRevision (cid, rid) {
       // console.log(`setActiveRevision, cid:${cid}, rid:${rid}`);
       this.concernementsByID[cid].active_revision = rid;
+    },
+    setDetailsZoomValue (z) {
+      this.detailsZoomValue = z;
     }
 
   }