Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-20 06:58:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(dashboard): add logic for temperature dragger

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-07 19:54:49 +03:00
parent ce8055ca84
commit 2ed871ff20
13 changed files with 262 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
View file

@ -16,15 +16,20 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
@Input() fillColors: string|string[] = '#2ec6ff';
@Input() disableArcColor: string = '#999999';
@Input() bottomAngle: number = 90;
@Input() arcThickness: number = 6; // CSS pixels
@Input() knobRadius: number = 10; // CSS pixels
@Input() arcThickness: number = 20; // CSS pixels
@Input() knobRadius: number = 15; // CSS pixels
value: number = 0.5;
value: number = 50;
@Output('valueChange') valueChange = new EventEmitter<Number>();
@Input('value') set setValue(value) {
this.value = value;
}
@Input() min: number = 0; // min output value
@Input() max: number = 100; // max output value
@Output() power = new EventEmitter<boolean>();
@HostListener('mouseup', ['$event'])
onMouseUp(event) {
this.recalculateValue(event);
@ -41,6 +46,9 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
this.invalidate();
}
off: boolean = false;
oldValue: number;
scaleFactor: number = 1;
bottomAngleRad = 0;
radius: number = 100;
@ -64,6 +72,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
private init = false;
constructor() {
this.oldValue = this.value;
}
ngAfterViewInit(): void {
@ -79,7 +88,23 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
mouseDown(event) {
this.isMouseDown = true;
this.recalculateValue(event);
if (!this.off) {
this.recalculateValue(event);
}
}
switchPower() {
this.off = !this.off;
this.power.emit(!this.off);
if (this.off) {
this.oldValue = this.value;
this.value = this.min;
} else {
this.value = this.oldValue;
}
this.invalidatePinPosition();
}
private invalidate(): void {
@ -254,7 +279,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
}
private invalidateNonSelectedArc() {
const angle = this.bottomAngleRad / 2 + (1 - this.value) * (2 * Math.PI - this.bottomAngleRad);
const angle = this.bottomAngleRad / 2 + (1 - this.getValuePercentage()) * (2 * Math.PI - this.bottomAngleRad);
this.styles.nonSelectedArc = {
color: this.disableArcColor,
d: `M ${this.radius},${this.radius}
@ -269,7 +294,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
private invalidatePinPosition() {
const radiusOffset = this.thickness / 2;
const curveRadius = this.radius - radiusOffset;
const actualAngle = (2 * Math.PI - this.bottomAngleRad) * this.value + this.bottomAngleRad / 2;
const actualAngle = (2 * Math.PI - this.bottomAngleRad) * this.getValuePercentage() + this.bottomAngleRad / 2;
this.styles.knobPosition = {
x: curveRadius * (1 - Math.sin(actualAngle)) + radiusOffset,
y: curveRadius * (1 + Math.cos(actualAngle)) + radiusOffset,
@ -298,6 +323,8 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
value = (actualAngle - this.bottomAngleRad / 2) / (2 * Math.PI - this.bottomAngleRad);
}
value = value * (this.max - this.min) + this.min;
if (this.value !== value) {
this.value = value;
this.valueChange.emit(this.value);
@ -306,6 +333,10 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
}
}
private getValuePercentage() {
return (this.value - this.min) / (this.max - this.min);
}
private static toRad(angle) {
return Math.PI * angle / 180;
}