Skip to content
Snippets Groups Projects

Resolve "Section paramétrée - profil de section: option axes orthonormés"

Merged Resolve "Section paramétrée - profil de section: option axes orthonormés"
497-section-parametree-profil-de-section-option-axes-orthonormes into devel
1 unresolved thread
Merged David Dorchies requested to merge 497-section-parametree-profil-de-section-option-axes-orthonormes into devel
1 unresolved thread
Viewing commit 698e52e0
Prev Next
Show latest version
1 file
+ 149
− 112
Compare changes
  • Side-by-side
  • Inline
src/app/components/section-canvas/section-canvas.component.ts
+ 149
− 112
@@ -28,16 +28,24 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
};
/*
* l'origine des coordonnées en m est par ex pour la section rectangulaire
* le coin en bas (radier) à gauche de la section
* notes :
* - l'origine des coordonnées en m est par ex pour la section rectangulaire le coin en bas (radier) à gauche de la section
* - canal : partie physique, sans les niveaux d'eau
* - section : canal + niveaux d'eau
* - rendu : section + texte + pointillés en haut
* - W : dimension horizontale, H : dimension verticale
* _ _m : valeur en mètres, _pix : valeur en pixels
*/
/** marges gauche/droite pour le texte (pixels) */
private readonly _textMargin = 90;
/** largeur gauche/droite du texte (pixels) */
private readonly _textWidth = 110;
/** marge basse (pixels) */
private readonly _bottomMargin = 5;
/** marge haute pour les pointillés (pixels) */
private readonly _topDashMargin = 30;
/** largeur des repères des niveaux sur le bord de la section (pixels) */
private readonly _levelMark = 5;
@@ -45,6 +53,10 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
private _scaleX: number;
private _scaleY: number;
/** origine (pixels) */
private _origX: number;
private _origY: number;
private _section: acSection;
private _result: Result;
@@ -55,24 +67,24 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
private _size: number;
/**
* taille horizontale de rendu de la section (sans le texte) à l'intérieur du canvas suivant le flag de respect de l'échelle (pixels)
* taille horizontale de la section (m)
*/
private _renderSectionX: number;
private _Wsect_m: number;
/**
* taille verticale de rendu de la section à l'intérieur du canvas suivant le flag de respect de l'échelle (pixels)
* taille verticale de la section (m)
*/
private _renderSectionY: number;
private _Hsect_m: number;
/**
* taille horizontale de la section (m)
* taille horizontale de la section (pixels)
*/
private _sectionWidth: number;
private _Wsect_pix: number;
/**
* taille verticale de la section en comptant les tirants (m)
* taille verticale de la section (pixels)
*/
private _sectionHeight: number;
private _Hsect_pix: number;
// tirants
private _levels: Object[] = [];
@@ -97,7 +109,6 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
@Input()
public set section(s: acSection) {
this._section = s;
this.computeSectionWidth();
}
@Input()
@@ -111,10 +122,13 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
}
// respect du rapport abscisses/ordonnées
public useRealAspectRatio: boolean = false;
private _useRealAspectRatio: boolean = false;
// redessine le canvas chaque fois qu'une entrée change
public ngOnChanges() {
this.computeSectionWidth();
this.computeSectionHeight();
this.computeTransform();
setTimeout(() => {
this.draw();
}, 10);
@@ -124,39 +138,121 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
this._context2d = this._calcCanvas.nativeElement.getContext("2d");
}
public reset() {
this._levels = [];
this.clear();
}
/**
* calcul des tailles horizontale et verticale de la zone de rendu de la section à l'intérieur du canvas (pixels)
* calcul des tailles horizontale et verticale de la zone de rendu (pixels)
* @returns true si le rendu touche le haut et le bas du canvas
*/
private computeRenderSize() {
if (this.useRealAspectRatio) {
if (this._sectionWidth > this._sectionHeight) {
this._renderSectionX = this._size - 2 * (this._textMargin + this._levelMark)
this._renderSectionY = (this._size - this._bottomMargin) * this._sectionHeight / this._sectionWidth;
private computeRenderSize(): boolean {
let res: boolean;
if (this._useRealAspectRatio) {
// largeur en pixels pour la représentation de la section
const a = this.width - 2 * (this._textWidth + this._levelMark);
// calcul des rapports largeur/hauteur pour le canvas et la section
const rlim = a / this.height;
const rsect = this._Wsect_m / this._Hsect_m;
if (rsect <= rlim) {
this._Hsect_pix = this.height - this._bottomMargin - this._topDashMargin;
this._Wsect_pix = this._Hsect_pix * rsect;
res = true;
}
else {
this._renderSectionX = this._size * this._sectionWidth / this._sectionHeight;
this._renderSectionY = this._size - this._bottomMargin;;
this._Wsect_pix = a;
this._Hsect_pix = this._Wsect_pix / rsect;
res = false;
}
} else {
this._renderSectionX = this._size - 2 * (this._textMargin + this._levelMark)
this._renderSectionY = this._size - this._bottomMargin;
this._Wsect_pix = this.width - 2 * (this._textWidth + this._levelMark)
this._Hsect_pix = this.height - this._bottomMargin - this._topDashMargin;
res = true;
}
return res;
}
/**
* calcul du coef pour passer de m -> pixels
* et de l'origine du rendu
*/
private computeTransform() {
const b = this.computeRenderSize();
// échelle m -> pix
this._scaleX = this._Wsect_pix / this._Wsect_m;
this._scaleY = this._Hsect_pix / this._Hsect_m;
// origine
this._origX = (this._size - this._Wsect_pix) / 2;
this._origY = b ? this._bottomMargin : (this._size - this._Hsect_pix) / 2;
}
/**
* convertit une abscisse en m en pixels
*/
private Xm2pix(x: number) {
return this._origX + x * this._scaleX;
}
/**
* convertit une ordonnée en m en pixels
*/
private Ym2pix(y: number) {
return this._size - this._origY - y * this._scaleY;
}
public get useRealAspectRatio(): boolean {
return this._useRealAspectRatio;
}
public setUseRealAspectRatio(b: boolean) {
this.useRealAspectRatio = b;
this._useRealAspectRatio = b;
this.computeTransform();
this.draw();
}
private setLevels() {
this._levels = [];
// traduction des symboles des variables calculées
const re = this._result.resultElement;
if (re !== undefined) {
for (const k in re.values) {
if (k !== re.vCalcSymbol) {
//const lbl = k.toUpperCase();
const er = re.getValue(k);
// this._resultElement.addExtraResult(lbl, er);
if (this.isSectionLevel(k)) {
this.addLevel(er, k + " = " + this.formattedValue(er), SectionCanvasComponent.labelColors[k]);
}
}
}
}
// ajout du tirant d'eau saisi
const valY = this._result.sourceNub.getParameter("Y").singleValue;
this.addLevel(valY, "Y = " + this.formattedValue(valY), SectionCanvasComponent.labelColors["Y"]);
this.sortLevels();
}
private addLevel(val: number, label: string, rgb: {}) {
this._levels.push({ val, label, rgb });
}
private sortLevels() {
this._levels.sort((a, b) => {
if (a["val"] < b["val"]) {
return -1;
}
if (a["val"] > b["val"]) {
return 1;
}
return 0;
});
}
// max des niveaux à représenter
private getMaxLevel(): number {
// max de la cote de berge et des niveaux (qui sont triés)
@@ -193,33 +289,8 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
}
public draw() {
// console.log(">> redrawing at size", this._size);
if (this._context2d && this._section) {
this.reset();
// traduction des symboles des variables calculées
const re = this._result.resultElement;
if (re !== undefined) {
for (const k in re.values) {
if (k !== re.vCalcSymbol) {
//const lbl = k.toUpperCase();
const er = re.getValue(k);
// this._resultElement.addExtraResult(lbl, er);
if (this.isSectionLevel(k)) {
this.addLevel(er, k + " = " + this.formattedValue(er), SectionCanvasComponent.labelColors[k]);
}
}
}
}
// ajout du tirant d'eau saisi
const valY = this._result.sourceNub.getParameter("Y").singleValue;
this.addLevel(valY, "Y = " + this.formattedValue(valY), SectionCanvasComponent.labelColors["Y"]);
this.computeSectionHeight();
this.computeRenderSize();
this.computeScale();
this.clear();
setTimeout(() => { // à cause du changement de taille du canvas dans updateCanvasSize()
this.drawFrame();
this.drawSection();
@@ -234,19 +305,22 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
* yb : cote de berge
* maxHeight : valeur maxi des cotes
*/
private drawTopDashLines(xmin: number, xmax: number, yb: number, maxHeight: number) {
private drawTopDashLines(xmin: number, xmax: number, yb: number) {
this.setLineWidth(2);
this.setLineDash([5]);
this.setStrokeColor(128, 128, 128);
this.drawSectionLine(xmin, yb, xmin, maxHeight);
this.drawSectionLine(xmax, yb, xmax, maxHeight);
const x1 = this.Xm2pix(xmin);
const ybp = this.Ym2pix(yb);
this.drawLine(x1, ybp, x1, 0);
const x2 = this.Xm2pix(xmax);
this.drawLine(x2, ybp, x2, 0);
}
private computeSectionHeight() {
this.sortLevels();
this.setLevels();
// hauteur totale de la section
this._sectionHeight = this.getMaxLevel() * 1.1;
this._Hsect_m = this.getMaxLevel();
}
private computeSectionWidthTrapez() {
@@ -257,7 +331,7 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
const lp: number = prms.Fruit.v * prms.YB.v;
// largeur totale de la section
this._sectionWidth = lp * 2 + prms.LargeurFond.v;
this._Wsect_m = lp * 2 + prms.LargeurFond.v;
}
private drawSectionTrapez() {
@@ -276,11 +350,11 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
this.setLineWidth(5);
this.drawSectionLine(0, yb, lp, 0);
this.drawSectionLine(lp, 0, lp + prms.LargeurFond.v, 0);
this.drawSectionLine(lp + prms.LargeurFond.v, 0, this._sectionWidth, yb);
this.drawSectionLine(lp + prms.LargeurFond.v, 0, this._Wsect_m, yb);
// pointillés du haut
this.drawTopDashLines(0, this._sectionWidth, yb, this._sectionHeight);
this.drawTopDashLines(0, this._Wsect_m, yb);
}
private computeSectionWidthRect() {
@@ -288,7 +362,7 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
const prms: ParamsSectionRectang = <ParamsSectionRectang>sect.prms;
// largeur totale de la section
this._sectionWidth = prms.LargeurBerge.v;
this._Wsect_m = prms.LargeurBerge.v;
}
private drawSectionRect() {
@@ -304,12 +378,12 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
this.setStrokeColor(0, 0, 0);
this.setLineWidth(5);
this.drawSectionLine(0, yb, 0, 0);
this.drawSectionLine(0, 0, this._sectionWidth, 0);
this.drawSectionLine(this._sectionWidth, 0, this._sectionWidth, yb);
this.drawSectionLine(0, 0, this._Wsect_m, 0);
this.drawSectionLine(this._Wsect_m, 0, this._Wsect_m, yb);
// pointillés du haut
this.drawTopDashLines(0, this._sectionWidth, yb, this._sectionHeight);
this.drawTopDashLines(0, this._Wsect_m, yb);
}
private computeSectionWidthCirc() {
@@ -330,7 +404,7 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
}
// largeur totale de la section
this._sectionWidth = yb < r ? B.vCalc : D;
this._Wsect_m = yb < r ? B.vCalc : D;
}
private drawSectionCirc() {
@@ -356,7 +430,7 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
this.setStrokeColor(0, 0, 0);
this.setLineWidth(5);
const wx: number = this._sectionWidth / 2;
const wx: number = this._Wsect_m / 2;
const alpha: Result = sect.CalcSection("Alpha", yb);
if (!alpha.ok) {
throw alpha;
@@ -369,7 +443,7 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
// pointillés du haut
const w: number = yb > r ? (D - B.vCalc) / 2 : 0;
this.drawTopDashLines(w, this._sectionWidth - w, yb, this._sectionHeight);
this.drawTopDashLines(w, this._Wsect_m - w, yb);
} catch (e) {
const res: Result = e as Result;
this.drawText("error : " + res.log.toString(), 0, 0);
@@ -384,7 +458,7 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
const B: number = prms.LargeurBerge.v;
// largeur totale de la section
this._sectionWidth = B;
this._Wsect_m = B;
}
private drawSectionPara() {
@@ -414,7 +488,7 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
this._context2d.stroke();
// pointillés du haut
this.drawTopDashLines(0, this._sectionWidth, yb, this._sectionHeight);
this.drawTopDashLines(0, this._Wsect_m, yb);
}
private drawSectionEllipse(x: number, y: number, rX: number, rY: number, rot: number, start: number, end: number) {
@@ -459,43 +533,6 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
throw new Error("SectionCanvasComponent.drawSection() : type de section non pris en charge");
}
private computeScale() {
this._scaleX = this._renderSectionX / this._sectionWidth;
this._scaleY = this._renderSectionY / this._sectionHeight;
}
/**
* convertit une abscisse en m en pixels
*/
private Xm2pix(x: number) {
// origine X de la section dans le canvas
const origX = (this._size - this._renderSectionX) / 2;
return origX + x * this._scaleX;
}
/**
* convertit une ordonnée en m en pixels
*/
private Ym2pix(y: number) {
// origine Y de la section dans le canvas
const origY = (this._size - this._renderSectionY) / 2;
return this._size - this._bottomMargin - origY - y * this._scaleY;
}
private sortLevels() {
this._levels.sort((a, b) => {
if (a["val"] < b["val"]) {
return -1;
}
if (a["val"] > b["val"]) {
return 1;
}
return 0;
});
}
private drawLevels() {
let left = true;
@@ -506,13 +543,13 @@ export class SectionCanvasComponent extends ResultsComponentDirective implements
const y = l["val"];
const col = l["rgb"];
this.setStrokeColor(col["r"], col["g"], col["b"]);
this.drawSectionLine(0, y, this._sectionWidth, y);
this.drawSectionLine(0, y, this._Wsect_m, y);
this.setFillColor(col["r"], col["g"], col["b"]);
if (left) {
this.drawText(l["label"], 0, y, "right");
} else {
this.drawText(l["label"], this._sectionWidth, y, "left");
this.drawText(l["label"], this._Wsect_m, y, "left");
}
left = !left;
}