diff --git a/src/app/components/canvas/canvas.component.ts b/src/app/components/canvas/canvas.component.ts
index a7c1b1b34192d796966d18cd28d97fefbf55f97a..2035e886e543b1b0846c3e043fd0464a1c902f01 100644
--- a/src/app/components/canvas/canvas.component.ts
+++ b/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() {
diff --git a/src/app/components/fixedvar-results/results.component.ts b/src/app/components/fixedvar-results/results.component.ts
index 748816761ac736744c73251c6b23bb3ab1c2afe6..1fae7bd065c9607d14d8e6dac77b6d438f2fa219 100644
--- a/src/app/components/fixedvar-results/results.component.ts
+++ b/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
*/
diff --git a/src/app/components/section-canvas/section-canvas.component.ts b/src/app/components/section-canvas/section-canvas.component.ts
index 94f4c3c5b029739e42f66b1802e4bc0652ea941e..928b98540b36bb4818256c81006d9fa3e11fdd63 100644
--- a/src/app/components/section-canvas/section-canvas.component.ts
+++ b/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();
diff --git a/src/app/components/section-results/section-results.component.ts b/src/app/components/section-results/section-results.component.ts
index ce16f3b7a88bb7ce666e90b02f825438ed7a36a4..e3aeb50834cf1d043ff584296c3fe066686102a5 100644
--- a/src/app/components/section-results/section-results.component.ts
+++ b/src/app/components/section-results/section-results.component.ts
@@ -1,4 +1,4 @@
-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");
}