public/guilloche-generator
2
0
Fork 0
Code Pull Requests Activity

added new config param for snapping graphs to top and bottom line

Browse Source
This commit is contained in:
Michael Czechowski
2018-09-02 20:11:18 +02:00
parent ba5bce55fc
commit 3ad2c950e6
2 changed files with 43 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
projects/nls-guilloche/src/nls/components/graphs.component.ts
View File

@@ -72,8 +72,9 @@ export class NlsGraphsComponent implements OnChanges, OnInit {
} }
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
this.config.autoHeight = true;
this.updateCanvas(); this.updateCanvas();
this.updateMatrix(); this.matrix = this.calcMatrix();
if (changes.config) { if (changes.config) {
// Config changes must not trigger any other events // Config changes must not trigger any other events
@@ -157,29 +158,50 @@ export class NlsGraphsComponent implements OnChanges, OnInit {
this.canvasService.adjustToWindow(); this.canvasService.adjustToWindow();
} }
private updateMatrix() { private calcMatrix() {
const totalArea = Math.abs(this.canvas.getBoundingClientRect().width * this.canvas.getBoundingClientRect().height); const canvasWidth = this.canvas.getBoundingClientRect().width;
const totalCenter = this.math.centerOfArea(this.canvas.getBoundingClientRect().width, this.canvas.getBoundingClientRect().height); const canvasHeight = this.canvas.getBoundingClientRect().height;
const totalArea = Math.abs(canvasWidth * canvasHeight);
const totalCenter = this.math.centerOfArea(canvasWidth, canvasHeight);
const baseArea = Math.abs(this.config.width * this.config.height); const baseArea = Math.abs(this.config.width * this.config.height);
const baseScale = Math.pow(totalArea / baseArea * this.config.scale, 0.5); const baseScale = Math.pow(totalArea / baseArea * this.config.scale, 0.5);
const baseWidthScaled = baseScale * this.config.width; const baseWidthScaled = baseScale * this.config.width;
const baseHeightScaled = baseScale * this.config.height; const baseHeightScaled = baseScale * this.config.height;
const baseCenter = this.math.centerOfArea(baseWidthScaled, baseHeightScaled); const baseCenter = this.math.centerOfArea(
baseWidthScaled,
baseHeightScaled
);
this.matrix = { if (this.config.autoHeight) {
start: { return {
x: totalCenter.x - baseCenter.x, start: {
y: totalCenter.y + baseCenter.y x: totalCenter.x - baseCenter.x,
}, y: canvasHeight
end: { },
x: totalCenter.x + baseCenter.x, end: {
y: totalCenter.y - baseCenter.y x: totalCenter.x + baseCenter.x,
}, y: 0
width: baseWidthScaled, },
height: baseHeightScaled, width: canvasWidth,
center: totalCenter height: canvasHeight,
}; center: totalCenter
};
} else {
return {
start: {
x: totalCenter.x - baseCenter.x,
y: totalCenter.y + baseCenter.y
},
end: {
x: totalCenter.x + baseCenter.x,
y: totalCenter.y - baseCenter.y
},
width: baseWidthScaled,
height: baseHeightScaled,
center: totalCenter
};
}
} }
private genVectorPoint(point: Point, vector: number) { private genVectorPoint(point: Point, vector: number) {

3
projects/nls-guilloche/src/nls/models/config.model.ts
View File

@@ -39,9 +39,10 @@ export interface Config {
amount: number; amount: number;
spacing: number spacing: number
}; };
date?: Date;
nodes: any; nodes: any;
stroke: any; stroke: any;
overlap: any; overlap: any;
scale: any; scale: any;
date?: Date;
autoHeight?: boolean;
} }