we can now dragg the zoomed mapitem in the opened terrain de vie

src/components/ConcernementMapItem.vue

@@ -40,7 +40,10 @@ export default {
       salientPoints: [],
       scale: 1,
       prev_scale: 1,
+      //
       details_zoom_scale: 1,
+      is_dragging: false,
+      //
       opacity: 0,
       tween: null,
       is_visible: true,
@@ -58,6 +61,7 @@ export default {
       //
       doleance_transition: false,
       //
+
     }
   },
   props: ['mapitem'],
@@ -192,7 +196,14 @@ export default {
         
         // apply a little force to check the map when returning to terrain de vie
         if (n === 'terraindevie' && !this.opened_concernement) {
-          this.applyShuffleForces(); 
+          this.applyShuffleForces();
+        }
+        
+        if (this.is_open && n !== "terraindevie"){
+          console.log('concernementMapItem watch map_mode CALLING setDetailsZoomValue');
+          this.setDetailsZoomValue(1);
+          // we have to call updateDetailsZoomScale() right now, can't wait for wath f° which will append after the map_item contents redrawing
+          this.updateDetailsZoomScale();
         }
         
         // if map_item is open and we change the mad mode, redefined what is displayed in the "boussole"
@@ -201,7 +212,7 @@ export default {
           this.resetMapItemPosition();
           this.resetMapItemScale();
         }
-        
+
         // Clones visibility
         if(this.mapitem.clone){
           let is_visible = false;
@@ -274,7 +285,7 @@ export default {
     },
     detailsZoomValue: {
       handler (n, o) {
-        if (this.is_open) {
+        if (this.is_open && this.map_mode === "terraindevie") {
           console.log('map_item detailsZoomValue watch', n);
           this.updateDetailsZoomScale()
         }
@@ -285,19 +296,14 @@ export default {
   methods: {
     ...mapActions(CommonStore,['setHoverElmt']),
     ...mapActions(ConcernementsStore,['openCloseConcernements',
-                                      // 'setConcernementMapItem',
                                       'hideShowConcernement',
                                       'setOpenedEntiteId',
                                       'setActiveRevision',
                                       'setBesoinPaperId',
                                       'setOpenedDoleanceField',
                                       'setOpenedRecit',
-                                      // 'setConcernementScale',
+                                      'setDetailsZoomValue',
                                     ]),
-    
-    // getResponsiveRay(){
-    //   return Math.min(this.canvas.width, this.canvas.height) * 0.08;
-    // },
     parseEntityPointsValues (){
       // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
       for (let r = 0; r < this.concernement.revisions.length; r++) { // loop through all revisions
@@ -506,7 +512,9 @@ export default {
           mass: mass,
           restitution: 0.06,
           collisionFilter: {
-            group: -1
+            group: -1,
+            category: 0x0002,
+            mask: 0x0001
           },
           plugin: {
             attractors: [
@@ -701,6 +709,7 @@ export default {
 
     },
     updateDetailsZoomScale(){
+      console.log(`updateDetailsZoomScale ${this.detailsZoomValue}`);
       // revert to the original scale (by reverting the previous scale)
       this.paper_main_object.scale(1 / this.details_zoom_scale);
       // compute the zoom scale
@@ -711,11 +720,19 @@ export default {
       // this.resetSuperpositionsConstraintsScaling(s);
 
       // this.prev_scale = this.scale = s;
+
+      // allow to go through walls if zoomed in
+      if (this.detailsZoomValue > 1) {
+        this.body.collisionFilter.mask = 0x0004;
+      } else {
+        this.body.collisionFilter.mask = 0x0001;
+      }
     },
     /*
     * called by openClose() function
     */
     setPaperContents(){
+      console.log('setPaperContents');
       // trigered once opening tween is complete
       // trigered once mapmode changed
       this.clearPaperContents();
@@ -984,7 +1001,7 @@ export default {
       return g;
     },
     setPaperEntitesProximiteReferences(){
-      // console.log('_ _ _ _ setPaperEntitesProximiteReferences')
+      console.log('setPaperEntitesProximiteReferences')
       let g = new paper.Group({
         pivot: new paper.Point(this.pos),
         name: 'entites_proximites_references'
@@ -1094,7 +1111,7 @@ export default {
                 x: entite_ref_pos.x+seg.point[0]*scaledown,
                 y: entite_ref_pos.y+seg.point[1]*scaledown
               }
-              console.log('paddedSegPoint', paddedSegPoint);
+              // console.log('paddedSegPoint', paddedSegPoint);
               paper_segments.push(new paper.Segment({
                 point: paddedSegPoint,
                 handleIn: seg.handleIn,
@@ -1146,7 +1163,7 @@ export default {
               y: ent.display.ray * Math.sin(ent.display.alpha * (Math.PI/180))
             })
           })
-          console.log('points', points);
+          // console.log('points', points);
 
           let gen_scaledown = 0.16;
           // scaledown = 1;
@@ -1191,7 +1208,7 @@ export default {
       
       for (let i = 0; i < this.concernement.revisions_byid[this.concernement.revision_id].entites.length; i++) {
         let entite = this.concernement.revisions_byid[this.concernement.revision_id].entites[i];
-        console.log('agissantes', entite);
+        // console.log('agissantes', entite);
         if (entite.entite && entite.entite.agissante) {
           let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action']);
           instance.name = 'entite_action';
@@ -2044,6 +2061,13 @@ export default {
           }
         } else { // si ce concernement est ouvert
           console.log('mapitem is opened');
+
+          // do not click if we were dragging
+          if (this.is_dragging) {
+            this.is_dragging = false;
+            return;
+          }
+
           // lets define some options regarding the map_mode
           let group_to_hit = null;
           switch (this.map_mode) {
@@ -2124,6 +2148,28 @@ export default {
         }
       }.bind(this);
 
+      /*
+      * works i correlation with updateDetailsZoomScale()
+      */
+      this.paper_main_object.onMouseDrag = async function(event){
+        if (this.is_open && this.map_mode === 'terraindevie') {
+          event.stopPropagation();
+          event.preventDefault();
+          
+          console.log('paper concernement onMouseDrag', event.delta);
+          if (this.detailsZoomValue > 1) {
+            let x = this.pos.x + event.delta.x;
+            let y = this.pos.y + event.delta.y;
+
+            this.pos = this.paper_main_object.position = this.constraint.pointA = {x: x, y: y};
+            Matter.Body.setPosition(this.body, this.pos);
+            
+            this.is_dragging = true;
+          }
+          event.stop();
+          return false;
+        }
+      }.bind(this);
     },
     resetHoverElmt(){
       // console.log('resetHoverElmt');
@@ -2292,6 +2338,8 @@ export default {
             this.details_zoom_scale = this.scale * this.detailsZoomValue;
             this.handlePaperVisibilityOnClosed();
             this.clearPaperContents();
+            // reset the zoom value
+            this.setDetailsZoomValue(1);
             this.is_closing = false;
           });
       }
@@ -2596,7 +2644,7 @@ export default {
         //   ? {x:this.canvas.width, y:this.body.position.y} 
         //   : {x:0, y:this.body.position.y};
         // let x_force = Math.pow(dist/800,10) * dir;
-        console.log(`applyShuffleForces dir:${dir}, maxp:${maxp}, dist:${dist}, x_velocity:${x_velocity}, y_velocity:${y_velocity}`);
+        // console.log(`applyShuffleForces dir:${dir}, maxp:${maxp}, dist:${dist}, x_velocity:${x_velocity}, y_velocity:${y_velocity}`);
         Matter.Body.setVelocity(this.body, {x: x_velocity, y: y_velocity});
       } else { // if in center zone real shuffle velocity
         // x_velocity = -50 + Math.random()*100;
@@ -2712,19 +2760,22 @@ export default {
 
     },
     checkOverflow() {
-      // respawn element if outside screen
-      let pad = 1;
-      let circleray = this.body.circleRadius+pad*1.1;
-      let respawn = false;
-      if(this.pos.x <= pad){ this.pos.x = circleray; respawn=true;}
-      if(this.pos.x >= this.canvas.width-pad){ this.pos.x = this.canvas.width - circleray; respawn=true;}
-      if(this.pos.y <= pad){ this.pos.y = circleray; respawn=true;}
-      if(this.pos.y >= this.canvas.height-pad){ this.pos.y = this.canvas.height - circleray; respawn=true;}
-      if (respawn) {
-        // this.pos = respawn_pos;
-        Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
-        // this.setInitBodyVelocity();
-        Matter.Body.setVelocity(this.body, {x:0,y:0});
+      // respawn element if not opened and outside screen
+      if (!this.is_open) {
+        let pad = 1;
+        let circleray = this.body.circleRadius+pad*1.1;
+        let respawn = false;
+        if(this.pos.x <= pad){                    this.pos.x = circleray;                       respawn=true;}
+        if(this.pos.x >= this.canvas.width-pad){  this.pos.x = this.canvas.width - circleray;   respawn=true;}
+        if(this.pos.y <= pad){                    this.pos.y = circleray;                       respawn=true;}
+        if(this.pos.y >= this.canvas.height-pad){ this.pos.y = this.canvas.height - circleray;  respawn=true;}
+        if (respawn) {
+          console.log('respawning');
+          // this.pos = respawn_pos;
+          Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
+          // this.setInitBodyVelocity();
+          Matter.Body.setVelocity(this.body, {x:0,y:0});
+        }
       }
       
     },
@@ -2750,11 +2801,6 @@ export default {
       // END DEBUG
       
     },
-    // onWindowResize(event){
-    //   // console.log('mapitem onWindowResize', event, this);
-      
-
-    // },
     debugDrawMatterBodyCircle(){
       if (this.paper_main_object.children['debug_circle']) {
         this.paper_main_object.children['debug_circle'].remove();

src/components/contents/TerrainDeVie.vue

@@ -42,7 +42,8 @@ export default {
                                     'opened_concernement',
                                     'concernementsByID',
                                     'ct_concernement',
-                                    'ct_entite']),
+                                    'ct_entite',
+                                    'detailsZoomValue']),
     ...mapState(UserStore,['name']),
     created(){
       let d = new Date(this.concernement.created); 
@@ -137,6 +138,13 @@ export default {
       },
       deep: true
     },
+    detailsZoomValue:  {
+      handler (n, o) {
+        // console.log(`TerrainDeVie watch history_value o:${o}, n:${n}`);
+        this.details_value = n;
+      },
+      deep: true
+    },
     cid: {
       handler (n,o) {
         console.log(`TerrainDeVie watch cid o:${o}, n:${n}`);
@@ -246,7 +254,7 @@ export default {
           </div>
       </section>
       
-      <section class="sliders"  v-if="history_slider_ops">
+      <section class="sliders"  v-if="history_slider_ops || details_slider_ops">
         <section class="historique" v-if="history_slider_ops">
           <label>Historique</label>
           <!-- <h3>{{ history_value }}</h3> -->
@@ -256,7 +264,7 @@ export default {
             v-bind="history_slider_ops"
           ></vue-slider>
         </section>
-        <section class="details" v-if="details_slider_ops">
+        <section class="details" v-if="details_slider_ops && map_mode === 'terraindevie'">
           <label>Details</label>
           <!-- <h3>{{ details_value }}</h3> -->
           <vue-slider

src/stores/concernements.js

@@ -444,6 +444,7 @@ export const ConcernementsStore = defineStore({
       this.concernementsByID[cid].active_revision = rid;
     },
     setDetailsZoomValue (z) {
+      console.log(`concernement store setDetailsZoomValue ${z}`);
       this.detailsZoomValue = z;
     }