superpositions clone bug fixe #2303

src/App.vue

@@ -132,8 +132,9 @@ export default {
       </transition>
       <template v-if="mapitems.length > 0">
         <template v-for="(mapitem,index) in mapitems">
+          <!--  && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone) -->
           <ConcernementMapItem
-            v-if="mapitem.concernement.visible && ((map_mode === 'superposition' && mapitem.clone) || !mapitem.clone)"
+            v-if="mapitem.concernement.visible"
             :key="mapitem.id"
             :mapitem="mapitem"
           />

src/components/ConcernementMapItem.vue

@@ -42,6 +42,7 @@ export default {
       prev_scale: 1,
       opacity: 0,
       tween: null,
+      is_visible: true,
       is_open: false,
       is_opening: false,
       is_closing: false,
@@ -54,7 +55,8 @@ export default {
       paper_main_object: {},
       paper_groups: {},
       //
-      doleance_transition: false
+      doleance_transition: false,
+      //
     }
   },
   props: ['mapitem'],
@@ -112,9 +114,19 @@ export default {
       this.initMatterBody()
       //
       this.initPaperObjects()
+      //
+      if(this.mapitem.clone){
+        if(this.map_mode === 'superposition'){
+          this.handleMapitemVisibility(true);
+        }else{
+          this.handleMapitemVisibility(false);
+        }
+      }
     }
 
     // this.setConcernementMapItem(this.cid, this);
+    // this.setConcernementScale(this.cid, this.scale);
+    this.mapitem.scale = this.scale;
   },
   // mounted() {
   //   console.log(`ConcernementsMapItem ${this.concernement.id} mounted`, this.canvasMap.canvas);
@@ -151,9 +163,9 @@ export default {
           this.applyShuffleForces();
         } else {
           if(this.cid === n.id && this.id === n.opened_mapitem_id){
-            this.is_open = true;
+            this.is_open = this.mapitem.is_open = true;
           }else{
-            this.is_open = false;
+            this.is_open = this.mapitem.is_open = false;
           }
         }
       },
@@ -182,6 +194,29 @@ export default {
         if (n !== o) {
           this.handlePaperVisibilityOnMapMode()
         }
+        if(this.mapitem.clone){
+          let state = false;
+          if(n === 'superposition'){
+            // superposition mapemode all clones are visible
+            state = true;
+          }else{
+            if(this.opened_concernement){
+              if(this.mapitem.is_open){
+                state = true;
+              }else{
+                let opened_mapitem_id = this.opened_concernement.opened_mapitem_id;
+                if(this.opened_concernement.superposed_mapitem_id_by_mapitem_id[opened_mapitem_id].indexOf(this.mapitem.id) !== -1){
+                  state = true;
+                }
+              }
+            }
+          }
+          if(state){
+            this.handleMapitemVisibility(true);
+          }else{
+            this.handleMapitemVisibility(false);
+          }
+        }
       },
       deep: true
     },
@@ -229,7 +264,9 @@ export default {
                                       'setActiveRevision',
                                       'setBesoinPaperId',
                                       'setOpenedDoleanceField',
-                                      'setOpenedRecit']),
+                                      'setOpenedRecit',
+                                      // 'setConcernementScale',
+                                    ]),
     
     // getResponsiveRay(){
     //   return Math.min(this.canvas.width, this.canvas.height) * 0.08;
@@ -516,9 +553,9 @@ export default {
       });
 
       // fadein intro
-      if(!this.mapitem.clone){
+      // if(!this.mapitem.clone){
         this.paper_main_object.opacity = (1 + Math.random())*0.001;
-      }
+      // }
 
       // the sub items for one concernement
       this.paper_main_object.addChild(this.setPaperContour());
@@ -712,7 +749,7 @@ export default {
         segments: paper_segments,
         fillColor: 'rgba(255,255,255,0.4)',
         // selected: true,
-        strokeColor: '#fff',
+        strokeColor: this.mapitem.clone ? '#f00' : '#fff',
         strokeWidth: 1,
         pivot: new paper.Point(this.pos),
         cid: this.cid
@@ -1406,6 +1443,11 @@ export default {
 
       return g;
     },
+    // mapitem visibility
+    handleMapitemVisibility(state){
+      this.is_visible = state;
+      this.paper_main_object.visible = this.is_visible;
+    },
     // PAPER VISIBILITY
     handlePaperVisibilityOnBeforeOpen(){
       // // agissantes
@@ -1467,9 +1509,9 @@ export default {
     handlePaperVisibilityOnAfterEnginUpdate(){
       // contours focused
       if (!this.isFocused()){
-        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)";
+        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 = "rgba(255,255,255,0.4)"; //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;
@@ -2011,6 +2053,7 @@ export default {
             // record new scale
             this.prev_scale = this.scale;
             this.scale = obj.s;
+            this.mapitem.scale = this.scale;
             this.opacity = obj.o;
             // console.log('tween update obj.s', obj.s);
             this.pos = {x:obj.x, y:obj.y};
@@ -2020,6 +2063,7 @@ export default {
             // console.log('tween complete obj.s', obj.s);
             // record tween one last time
             this.prev_scale = this.scale = obj.s;
+            this.mapitem.scale = this.scale;
             this.opacity = obj.o;
             this.pos = {x:obj.x, y:obj.y};
             Matter.Body.setPosition(this.body, this.pos);
@@ -2111,10 +2155,12 @@ export default {
             // record new scale
             this.prev_scale = this.scale;
             this.scale = obj.s;
+            this.mapitem.scale = this.scale;
             this.opacity = obj.o;
           })
           .onComplete((obj) => {
             this.prev_scale = this.scale = 1;
+            this.mapitem.scale = this.scale;
             this.handlePaperVisibilityOnClosed();
             this.clearPaperContents();
             this.is_closing = false;
@@ -2140,12 +2186,14 @@ export default {
 
           // BUT NOT push aside mapitems superposed to this item
           // opened_mapitem <-- superposed_mapitems
-          if (this.opened_concernement.superposed_mapitem_id_by_mapitem_id
-              && this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id])
-            { // if opened mapitem has superposed mapitems
-            let superposed_ids = this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id]
-            if (superposed_ids.indexOf(this.id) >= 0) { //this mapitem is directly superposed to the opened mapitem
-              pushaside = false;
+          if (this.map_mode === 'superposition') {
+            if (this.opened_concernement.superposed_mapitem_id_by_mapitem_id
+                && this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id])
+              { // if opened mapitem has superposed mapitems
+              let superposed_ids = this.opened_concernement.superposed_mapitem_id_by_mapitem_id[this.opened_concernement.opened_mapitem_id]
+              if (superposed_ids.indexOf(this.id) >= 0) { //this mapitem is directly superposed to the opened mapitem
+                pushaside = false;
+              }
             }
           }
 
@@ -2477,15 +2525,17 @@ export default {
     },
     respawn() {
       // respawn element if outside screen
-      if(this.pos.x <= 0
-        || this.pos.x >= this.canvas.width
-        || this.pos.y <= 0
-        || this.pos.y >= this.canvas.height){
-          this.pos = this.getRandomPos()
-          Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
-          // this.setInitBodyVelocity();
-          Matter.Body.setVelocity(this.body, {x:0,y:0});
-        }
+      let respanw = false;
+      if(this.pos.x <= 0){ this.pos.x = 50; respanw=true;}
+      if(this.pos.x >= this.canvas.width){ this.pos.x = this.canvas.width - 50; respanw=true;}
+      if(this.pos.y <= 0){ this.pos.y = 50; respanw=true;}
+      if(this.pos.y >= this.canvas.height){ this.pos.y = this.canvas.height - 50; respanw=true;}
+      if (respanw) {
+        // this.pos = respanw_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});
+      }
       
     },
     onAfterEngineUpdate (event) {
@@ -2494,13 +2544,13 @@ export default {
       this.paper_main_object.position = this.pos = this.body.position;
 
       // fadein intro
-      if(!this.mapitem.clone){
+      // if(!this.mapitem.clone){
         if (this.paper_main_object.opacity < 9) {
           this.paper_main_object.opacity = this.paper_main_object.opacity * 1.1;
         } else{
           this.paper_main_object.opacity = 1;
         }
-      }
+      // }
 
       this.handlePaperVisibilityOnAfterEnginUpdate()
 

src/components/MapConcernements.vue

@@ -64,7 +64,8 @@ export default {
                                     'opened_recit',
                                     'allSuperpositions',
                                     // 'allSuperpositions_bycids',
-                                    'allSuperpositions_clustered'
+                                    'allSuperpositions_clustered',
+                                    'allMapItems_byid'
                                   ]),
     ...mapState(CommonStore,['map_item_ray',
                              'hover_elmt',
@@ -224,7 +225,7 @@ export default {
     map_mode: {
       handler (n, o) {
         console.log('concernementMap watch map_mode o n', o, n);
-        if (n === 'superposition' && !this.opened_concernement) {
+        if (n === 'superposition') { // && !this.opened_concernement
           // create constraints
           this.setSuperpositionsMatterConstraints();
         }else{
@@ -1148,7 +1149,7 @@ export default {
     },
     async setSuperpositionsMatterConstraints(){
       await nextTick(); // wait for dom to be upadted before applying constraint
-      // console.log('setSuperpositionsMatterConstraints this.allSuperpositions_clustered', this.allSuperpositions_clustered);
+      console.log('setSuperpositionsMatterConstraints this.allSuperpositions_clustered', this.allSuperpositions_clustered);
       
       // loop through all supperposition couple
       for(let [cluster_index, cluster] of Object.entries(this.allSuperpositions_clustered)){
@@ -1168,6 +1169,12 @@ export default {
           let mapitemB_id = `${cid_eid_B.cid}___${cluster_index}` 
           // console.log(`mapitemA_id: ${mapitemA_id}, mapitemB_id: ${mapitemB_id}`);
           
+          let mapitemA = this.allMapItems_byid[mapitemA_id];
+          let mapitemB = this.allMapItems_byid[mapitemB_id];
+          console.log('mapitemA', mapitemA);
+          console.log('mapitemB', mapitemB);
+
+
           // get the concernement matter bodies with id
           let bodyA = Matter.Composite.get(this.world, mapitemA_id, 'body'); // matter body id is the same as mapitem_id
           let bodyB = Matter.Composite.get(this.world, mapitemB_id, 'body'); // matter body id is the same as mapitem_id
@@ -1178,7 +1185,9 @@ export default {
           for(let entiteA of concernementA.revisions_byid[concernementA.active_revision].entites){
             if (entiteA.entite && entiteA.entite.id === cid_eid_A.eid && entiteA.display) {
               // console.log('entiteA', entiteA);
-              pointA = Matter.Vector.create(entiteA.display.pos.x, entiteA.display.pos.y);
+              let scale = mapitemA.scale;
+              console.log(`mapitemA.scale ${concernementA.id}`, scale);
+              pointA = Matter.Vector.create(entiteA.display.pos.x * scale, entiteA.display.pos.y * scale);
               break;
             }
           }
@@ -1186,7 +1195,9 @@ export default {
           for(let entiteB of concernementB.revisions_byid[concernementB.active_revision].entites){
             if (entiteB.entite && entiteB.entite.id === cid_eid_B.eid && entiteB.display) {
               // console.log('entiteB', entiteB);
-              pointB = Matter.Vector.create(entiteB.display.pos.x, entiteB.display.pos.y); 
+              let scale = mapitemB.scale;
+              console.log(`mapitemB.scale ${concernementB.id}`, scale);
+              pointB = Matter.Vector.create(entiteB.display.pos.x * scale, entiteB.display.pos.y * scale); 
               break;
             }
           }

src/stores/concernements.js

@@ -388,6 +388,10 @@ export const ConcernementsStore = defineStore({
       this.opened_concernement = null;
       this.openCloseConcernements();
     },
+    // setConcernementScale(cid, scale){
+    //   console.log(`setConcernementScale ${cid} ${scale}`);
+    //   this.concernementsByID[cid].scale = scale;
+    // },
     setOpenedEntiteId(id){
       this.opened_entite_id = id;
     },