reduced matter restitution, map item's ray is now responsive #2150

src/components/ConcernementMapItem.vue

@@ -67,6 +67,7 @@ export default {
     ...mapState(ConcernementsStore,['opened_concernement']),
     ...mapState(ConcernementsStore,['opened_entite_id']),
     ...mapState(CommonStore,['hover_elmt']),
+    ...mapState(CommonStore,['map_item_ray']),
     ...mapState(CommonStore,['cartouch_width']),
     ...mapState(CommonStore,['paper_symbol_definitions'])
   },
@@ -80,13 +81,26 @@ export default {
     if(this.entites.length < 3){
       this.hideShowConcernement(this.concernement.id, false);
     } else{
+      // record canvas and ctx for rendering (drawing)
+      this.canvas = this.canvasMap.canvas
+      this.ctx = this.canvasMap.ctx
+      
+      // define the ray regarding the width and height of screen
+      this.ray = this.map_item_ray;
+      console.log(`this.ray: ${this.ray}`);
+      // 
       this.parsePoints()
       // this.getSalientPoints()
       this.getJarvisEnvelopeConvexe()
 
-      if (this.canvasMap) {
-        this.initCanvasMap()
-      }  
+      // if (this.canvasMap) {
+        // define init position of the item
+        this.pos = this.getRandomPos();
+        //
+        this.initMatterBody()
+        //
+        this.initPaperObjects()
+      // }  
     }
   },
   // mounted() {
@@ -149,6 +163,9 @@ export default {
     ...mapActions(CommonStore,['setHoverElmt']),
     ...mapActions(ConcernementsStore,['openCloseConcernements']),
     ...mapActions(ConcernementsStore,['hideShowConcernement']),
+    // getResponsiveRay(){
+    //   return Math.min(this.canvas.width, this.canvas.height) * 0.08;
+    // },
     parsePoints (){
       // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
       for (let i = 0; i < this.entites.length; i++) {
@@ -289,20 +306,6 @@ export default {
       } while (p != l);
 
     },
-    initCanvasMap (){
-      // console.log(`ConcernementsMapItem ${this.concernement.id} initCanvasMap`);
-      // record canvas and ctx for rendering (drawing)
-      this.canvas = this.canvasMap.canvas
-      this.ctx = this.canvasMap.ctx
-      // this.paper = this.canvasMap.paper
-
-      // define init position of the item
-      this.pos = this.getRandomPos();
-      //
-      this.initMatterBody()
-      //
-      this.initPaperObjects()
-    },
     getRandomPos(){
       let pad = 200;
       // if (this.concernement.id === 56) {
@@ -365,7 +368,7 @@ export default {
           // mass: Math.pow(3, this.entites.length),
           // mass: 10,
           mass: mass,
-          restitution: 0.15,
+          restitution: 0.06,
           collisionFilter: {
             group: -1
           },
@@ -1123,7 +1126,8 @@ export default {
         this.paper_main_object.bringToFront();
         // calcul opened size regarding window size
         // let ch = this.canvas.height;
-        let s = this.canvas.height / (this.ray*2.8)
+        // let s = this.canvas.height / (this.ray*2.8)
+        let s = Math.min(this.canvas.height, this.canvas.width - this.cartouch_width) / (this.ray*2.8)
         
 
         // opening tweening

src/components/MapConcernements.vue

@@ -56,6 +56,7 @@ export default {
     ...mapState(ConcernementsStore,['concernements']),
     ...mapState(ConcernementsStore,['concernementsByID']),
     ...mapState(ConcernementsStore,['opened_concernement']),
+    ...mapState(CommonStore,['map_item_ray']),
     ...mapState(CommonStore,['hover_elmt']),
     ...mapState(CommonStore,['paper_symbol_definitions'])
   },
@@ -207,7 +208,7 @@ export default {
     setPaperBoussoleBGSymbol(){
       // BOUSSOLE
       let children = [];
-      let ray = 100;
+      let ray = this.map_item_ray;
       let pos = {x:0, y:0};
 
       // cercles pointillés
@@ -353,7 +354,7 @@ export default {
     },
     setPaperPuissanceagirBGSymbol(){
       let children = [];
-      let ray = 100;
+      let ray = this.map_item_ray;
       let pos = {x:0,y:0};
 
       // cercles interieur
@@ -421,7 +422,7 @@ export default {
       });
     },
     setPaperDoleanceBGSymbol(){
-      let ray = 100;
+      let ray = this.map_item_ray;
       let pos = {x:0,y:0};
       var r = ray * 0.8;  // ray
       var dr = r/2;                         // demi ray

src/stores/common.js

@@ -6,6 +6,7 @@ export const CommonStore = defineStore({
   id: 'common',
   state: () => ({
     hover_elmt: null,
+    map_item_ray: Math.min(window.innerWidth, window.innerHeight) * 0.08,
     cartouch_width: 450,
     paper_symbol_definitions: {}
   }),