Fix #115 - make SectionParametree canvas responsive (or almost)

src/app/components/canvas/canvas.component.ts

@@ -9,8 +9,6 @@ import { Component, Input, ViewChild, ElementRef, AfterViewInit } from "@angular
     `
 })
 export class CalcCanvasComponent implements AfterViewInit {
-    private _width = 300;
-    private _height = 200;
 
     public get width(): number {
         return this._calcCanvas.nativeElement.width;
@@ -18,7 +16,6 @@ export class CalcCanvasComponent implements AfterViewInit {
 
     @Input()
     public set width(w: number) {
-        this._width = w;
         this._calcCanvas.nativeElement.width = w;
     }
 
@@ -28,7 +25,6 @@ export class CalcCanvasComponent implements AfterViewInit {
 
     @Input()
     public set height(h: number) {
-        this._height = h;
         this._calcCanvas.nativeElement.height = h;
     }
 
@@ -39,11 +35,6 @@ export class CalcCanvasComponent implements AfterViewInit {
 
     ngAfterViewInit() { // wait for the view to init before using the element
         this._context2d = this._calcCanvas.nativeElement.getContext("2d");
-
-        // this._context2d.fillStyle = 'blue';
-        // this._context2d.fillRect(10, 10, 350, 350);
-
-        // this.drawRect(0, 0, this._width, this._height);
     }
 
     public clear() {

src/app/components/fixedvar-results/results.component.ts

@@ -13,31 +13,39 @@ export class ResultsComponent {
     /** max number of decimals for auto-adjusting charts axis graduations */
     public static CHARTS_AXIS_PRECISION = 10;
 
+    public constructor() {
+        const sf = <Screenfull>screenfull;
+    }
+
     /** tracks the fullscreen state */
     public get isFullscreen() {
-        // return (document["fullscreenElement"] !== null);
         const sf = <Screenfull>screenfull;
         if (sf.enabled) {
             return sf.isFullscreen;
         }
     }
 
-    public setFullscreen(element) {
-        // element.requestFullscreen();
+    public setFullscreen(element): Promise<void> {
         const sf = <Screenfull>screenfull;
         if (sf.enabled) {
-            sf.request(element);
+            return sf.request(element).then(() => {
+                this.fullscreenChange(true);
+            });
         }
     }
 
-    public exitFullscreen() {
-        // document.exitFullscreen();
+    public exitFullscreen(): Promise<void> {
         const sf = <Screenfull>screenfull;
         if (sf.enabled) {
-            sf.exit();
+            return sf.exit().then(() => {
+                this.fullscreenChange(false);
+            });
         }
     }
 
+    /** called when fullscreen state changes */
+    public fullscreenChange(isFullscreen: boolean) { }
+
     /**
      * 14 distinct colors @see https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors
      */

src/app/components/section-canvas/section-canvas.component.ts

@@ -16,24 +16,20 @@ import { CalcCanvasComponent } from "../canvas/canvas.component";
     `
 })
 export class SectionCanvasComponent {
-    /**
-     * taille (pixels) du canvas (c'est un carré)
-     */
-    private _size = 400;
 
-    /**
-     * marges gauche/droite pour le texte (pixels)
-     */
+    /** default square size, supposed to match device size (computed at contruct time) */
+    public originalSize: number;
+
+    /** taille (pixels) du canvas (c'est un carré) */
+    public size = 400;
+
+    /** marges gauche/droite pour le texte (pixels) */
     private _textMargin = 90;
 
-    /**
-     * marge basse (pixels)
-     */
+    /** marge basse (pixels) */
     private _bottomMargin = 5;
 
-    /**
-     * facteurs d'échelle (coordonnées en m <-> coordonnées en pixels)
-     */
+    /** facteurs d'échelle (coordonnées en m <-> coordonnées en pixels) */
     private _scaleX: number;
     private _scaleY: number;
 
@@ -59,12 +55,8 @@ export class SectionCanvasComponent {
     }
 
     private computeScale(maxWidth: number, maxHeight: number) {
-        this._scaleX = (this._size - 2 * this._textMargin) / maxWidth;
-        this._scaleY = (this._size - this._bottomMargin) / maxHeight;
-    }
-
-    public get size() {
-        return this._size;
+        this._scaleX = (this.size - 2 * this._textMargin) / maxWidth;
+        this._scaleY = (this.size - this._bottomMargin) / maxHeight;
     }
 
     /**
@@ -78,7 +70,7 @@ export class SectionCanvasComponent {
      * convertit une ordonnée en m en pixels
      */
     private Ym2pix(y: number) {
-        return this._size - this._bottomMargin - y * this._scaleY;
+        return this.size - this._bottomMargin - y * this._scaleY;
     }
 
     public addLevel(val: number, label: string, rgb: {}) {
@@ -351,7 +343,8 @@ export class SectionCanvasComponent {
         this._calcCanvas.drawRect(0, 0, this._calcCanvas.width, this._calcCanvas.height);
     }
 
-    private draw() {
+    public draw() {
+        // console.log(">> redrawing at size", this.size);
         this.sortLevels();
         this.drawFrame();
         const maxWidth = this.drawSection();

src/app/components/section-results/section-results.component.ts

-import { Component, ViewChild, DoCheck } from "@angular/core";
+import { Component, ViewChild, DoCheck, ElementRef } from "@angular/core";
 
 import { ResultElement } from "jalhyd";
 
@@ -18,7 +18,8 @@ import { I18nService } from "../../services/internationalisation.service";
 export class SectionResultsComponent extends ResultsComponent implements DoCheck {
 
     constructor(
-        private intlService: I18nService
+        private intlService: I18nService,
+        private element: ElementRef,
     ) {
         super();
     }
@@ -55,6 +56,9 @@ export class SectionResultsComponent extends ResultsComponent implements DoCheck
         "Yco": { r: 255, g: 0, b: 255 },
     };
 
+    /** hardcoded bullet-proof default canvas size **/
+    private previousContainerSize = 400;
+
     /**  résultats non mis en forme */
     private _results: SectionResults;
 
@@ -97,10 +101,19 @@ export class SectionResultsComponent extends ResultsComponent implements DoCheck
     }
 
     private updateResults() {
+        console.log("UPDATE RESULTS");
         if (this._results && this._sectionCanvas) {
 
             this._resultElement = new ResultElement();
 
+            // compute canvas optimal size the first time
+            if (this._sectionCanvas.originalSize === undefined) {
+                const container = this.element.nativeElement.querySelector(".section-results-container");
+                const size = Math.min(container.offsetWidth, container.offsetHeight);
+                this._sectionCanvas.originalSize = size - 17; // 417 - 17 = 400
+                this._sectionCanvas.size = this._sectionCanvas.originalSize;
+            }
+
             // traduction des symboles des variables calculées
             const re = this._results.result.resultElement;
             for (const k in re.values) {
@@ -115,7 +128,11 @@ export class SectionResultsComponent extends ResultsComponent implements DoCheck
                 }
             }
 
-            this._sectionCanvas.section = this._results.section;
+            // wait just a little to draw, in case this._sectionCanvas.size was changed above (1st run)
+            setTimeout(() => {
+                this._sectionCanvas.section = this._results.section;
+            }, 100);
+
             return true;
         }
         return false;
@@ -133,6 +150,31 @@ export class SectionResultsComponent extends ResultsComponent implements DoCheck
         }); // defaults to image/png
     }
 
+    /** redraw canvas on fullscreen state change (scale drawing) */
+    public fullscreenChange(isFullscreen: boolean) {
+        this._sectionCanvas.size = this.getContainerSize(! isFullscreen);
+        this.previousContainerSize = this._sectionCanvas.size;
+        setTimeout(() => {
+            this._sectionCanvas.draw();
+        }, 100);
+    }
+
+    private getContainerSize(useOriginalSize: boolean = false): number {
+        const container = this.element.nativeElement.querySelector(".section-results-container");
+        let size: number;
+        if (container) {
+            size = Math.min(container.offsetWidth, container.offsetHeight);
+        } else {
+            size = this.previousContainerSize;
+        }
+        // when going back from fullscreen mode, container size tends to be
+        // too high for whatever reason; use originalSize on this purpose
+        if (useOriginalSize) {
+            size = Math.min(size, this._sectionCanvas.originalSize);
+        }
+        return size;
+    }
+
     public get uitextExportImageTitle() {
         return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_EXPORT_IMAGE");
     }