2
0
Files
guilloche-generator/src/app/app.component.ts

74 lines
1.6 KiB
TypeScript

import { ConfigForm } from './forms/config.form';
import { Component, OnInit, HostListener } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { environment as env } from '../environments/environment';
import { Param } from './models/param.model';
import { Config } from './models/config.model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
public canvasParam: Param;
public config: any | null;
public configForm: FormGroup;
@HostListener('mousewheel', ['$event'])
private onWheelUp(event) {
const delta = Math.sign(event.deltaY);
const step = 0.01;
if (delta > 0) {
if (this.config.scale === 1 - step) {
return;
}
this.config.scale += step;
} else {
if (this.config.scale === step) {
return;
}
this.config.scale -= step;
}
this.config.scale = Math.round(this.config.scale * 100) / 100;
this.configForm.reset({...this.config});
this.updateGraphs();
}
constructor() {
this.canvasParam = {
colors: {
start: '#cc0045',
end: '#0067cc'
},
points: 3,
margin: {
x: 0.2,
y: 0.4
},
stroke: {
width: 2
},
spread: 20,
showGrid: false
};
this.config = env.formDefaults;
this.configForm = ConfigForm;
}
ngOnInit() {
this.configForm.reset({...this.config});
}
public updateGraphs() {
this.config = {...this.configForm.value};
}
}