better responsivness #2416

src/components/MapConcernements.vue

@@ -96,16 +96,25 @@ export default {
   },
   mounted() {
     console.log('map mounted');
+
+    // update the cartouch width reference
+    this.setOriginalCartoucheWidth(this.getCartouchWidth());
+
     this.canvasMap.canvas = this.$refs['canvas-map'];
     this.canvasMap.ctx = this.canvasMap.canvas.getContext('2d');
 
-    let canvas_w = this.canvasMap.canvas.width = this.canvasMap.canvas.parentElement.clientWidth;
+    let canvas_w = this.canvasMap.canvas.width  = this.canvasMap.canvas.parentElement.clientWidth;
     let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight;
     console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`);
 
+
     // PAPER
     this.paper = paper.setup(this.canvasMap.canvas);
-    
+    // this.paper.view.viewSize = new paper.Size(canvas_w, canvas_h);
+    // this resizing is needed for display with pixel ratio more than 1 (retina)
+    this.canvasMap.canvas.setAttribute('width', canvas_w);
+    this.canvasMap.canvas.setAttribute('height', canvas_h);
+
     // symbol defintions
     this.initPaperSymbols();
 
@@ -269,7 +278,8 @@ export default {
                                       'resetConcernementOpened']),
     ...mapActions(CommonStore,['addPaperSymbolDefinition',
                                'setHoverElmt',
-                               'updateMapItemRay']),
+                               'updateMapItemRay',
+                               'setOriginalCartoucheWidth']),
     animate () {
       // if (document.hasFocus()) {
         Matter.Engine.update(this.engine, 1);
@@ -358,6 +368,8 @@ export default {
       // paper.view.viewSize.width = canvas_w;
       // paper.view.viewSize.height = canvas_h;
       this.paper.view.viewSize = new paper.Size(canvas_w, canvas_h);
+      // this.canvasMap.canvas.setAttribute('width', canvas_w);
+      // this.canvasMap.canvas.setAttribute('height', canvas_h);
 
       // apply to matter env
       // this.buildMatterWalls();
@@ -370,7 +382,20 @@ export default {
       // rebuild all the paper symbols with new ray
       this.initPaperSymbols(true)
 
+      // update the cartouch width reference
+      this.setOriginalCartoucheWidth(this.getCartouchWidth());
 
+
+    },
+    getCartouchWidth(){
+      let ww = window.clientWidth;
+      if (ww > 1500) {
+        return 450;
+      } else if (ww > 880) {
+        return 400;
+      } else {
+        return 350;
+      }
     },
     initPaperSymbols(update){
       this.addPaperSymbolDefinition('boussole_bg', this.setPaperBoussoleBGSymbol());
@@ -503,11 +528,11 @@ export default {
         strokeColor: '#fff',
       }))
 
-      let fontsize = 4;
+      let fontsize = 3;
       let fontFamily = "public_sans";
       
       children.push(new paper.PointText({
-        point: [pos.x + 4.5, pos.y - ray - 5],
+        point: [pos.x + 4.5, pos.y - ray],
         content: `entités qui menacent \u2194 entités qui maintiennent`,
         fontSize: fontsize,
         fontFamily: fontFamily,
@@ -516,7 +541,7 @@ export default {
       }))
 
       children.push(new paper.PointText({
-        point: [pos.x - ray - 5, pos.y + 1],
+        point: [pos.x - ray, pos.y + 1],
         content: "axe d'intensité",
         fontSize: fontsize,
         fontFamily: fontFamily,
@@ -525,7 +550,7 @@ export default {
       }))
 
       children.push(new paper.PointText({
-        point: [pos.x + ray + 5, pos.y - 3],
+        point: [pos.x + ray, pos.y - 3],
         content: "situation future\n\u2195\nsituation actuelle",
         fontSize: fontsize,
         fontFamily: fontFamily,
@@ -535,7 +560,7 @@ export default {
 
 
       let t1 = new paper.PointText({
-        point: [pos.x - ray/8*2.3, pos.y - ray/8*2.3],
+        point: [pos.x - ray/8*2.54, pos.y - ray/8*2.54],
         content: "avec prise",
         fontSize: fontsize,
         fontFamily: fontFamily,
@@ -546,7 +571,7 @@ export default {
       children.push(t1)
 
       let t2 = new paper.PointText({
-        point: [pos.x - ray/8*2.95, pos.y - ray/8*2.95],
+        point: [pos.x - ray/8*3.1, pos.y - ray/8*3.1],
         content: "sans prise",
         fontSize: fontsize,
         fontFamily: fontFamily,
@@ -1465,9 +1490,9 @@ export default {
   <div id="map-backgrounds">
     <MapBackground />
   </div>
-  <div id="map-matter">
+  <!-- <div id="map-matter">
     <canvas ref="canvas-engine"></canvas>
-  </div>
+  </div> -->
   <div id="map-concernements">
     <canvas ref="canvas-map"></canvas>
     <slot></slot>