@obliczeniowo/elementary
Version:
Library made in Angular version 20
192 lines (186 loc) • 9.58 kB
JavaScript
import * as i0 from '@angular/core';
import { input, model, effect, ViewChild, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DrawingSvgInterface, TextAlign } from '@obliczeniowo/elementary/drawing';
import { ColorHSV, ColorRGB, Point2D } from '@obliczeniowo/elementary/classes';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class ArchProgressComponent {
renderer;
size = input(100);
value = model(0);
svg;
dc;
color = ColorHSV.createColorHSVfromRGB(new ColorRGB(0, 100, 255)).convertToRGB();
constructor(renderer) {
this.renderer = renderer;
effect(() => {
this.color = ColorHSV.createColorHSVfromRGB(new ColorRGB(0, 100, 255))
.addHue((150 * this.value()) / 100)
.convertToRGB();
this.draw();
});
}
onChange = (value) => { };
onTouched = () => { };
registerOnValidatorChange(fn) {
this.onChange = fn;
}
writeValue(set) {
this.value.set(set || 0);
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
ngAfterViewInit() {
if (this.svg) {
this.dc = new DrawingSvgInterface(this.svg.nativeElement, this.renderer);
this.draw();
}
}
draw() {
if (this.dc) {
const center = new Point2D(25, 25);
const value = this.value();
this.dc.clear();
this.dc.drawCircle(center, 22, 5, 'var(--arch-progress-secondary-color)');
this.dc.drawArch(center, 22, 22, 0, (Math.PI * 2 * value) / 100, 5, this.color.toString());
this.dc.setTextAlign(TextAlign.CENTER);
this.dc.setFontSize(15);
this.dc.drawText(`${value.toFixed()}`, center.add(new Point2D(0, 5)), this.color.toString(), 0);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ArchProgressComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: ArchProgressComponent, isStandalone: false, selector: "obl-arch-progress", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: ArchProgressComponent,
},
], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true }], ngImport: i0, template: "<svg [attr.width]=\"size()\" [attr.height]=\"size()\" viewBox=\"0 0 50 50\" #svg></svg>", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ArchProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-arch-progress', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: ArchProgressComponent,
},
], standalone: false, template: "<svg [attr.width]=\"size()\" [attr.height]=\"size()\" viewBox=\"0 0 50 50\" #svg></svg>" }]
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { svg: [{
type: ViewChild,
args: ['svg']
}] } });
class TwoArchProgressComponent {
renderer;
size = input(100);
first = model(0);
second = model(0);
svg;
dc;
firstColor = ColorHSV.createColorHSVfromRGB(new ColorRGB(0, 100, 255)).convertToRGB();
secondColor = ColorHSV.createColorHSVfromRGB(new ColorRGB(0, 100, 255)).convertToRGB();
constructor(renderer) {
this.renderer = renderer;
effect(() => {
this.firstColor = ColorHSV.createColorHSVfromRGB(new ColorRGB(0, 100, 255))
.addHue((150 * this.first()) / 100)
.convertToRGB();
this.draw();
});
effect(() => {
this.secondColor = ColorHSV.createColorHSVfromRGB(new ColorRGB(0, 100, 255))
.addHue((150 * this.second()) / 100)
.convertToRGB();
this.draw();
});
}
onChange = (value) => { };
onTouched = () => { };
registerOnValidatorChange(fn) {
this.onChange = fn;
}
writeValue(set) {
this.first.set(set?.first || 0);
this.second.set(set?.second || 0);
}
registerOnChange(onChange) {
this.onChange = onChange;
}
registerOnTouched(onTouched) {
this.onTouched = onTouched;
}
ngAfterViewInit() {
if (this.svg) {
this.dc = new DrawingSvgInterface(this.svg.nativeElement, this.renderer);
this.draw();
}
}
draw() {
if (this.dc) {
const center = new Point2D(25, 25);
this.dc.clear();
this.dc.drawCircle(center, 19, 2, 'var(--arch-progress-secondary-color)');
this.dc.drawCircle(center, 22, 2, 'var(--arch-progress-secondary-color)');
this.dc.drawArch(center, 19, 19, 0, (Math.PI * 2 * this.first()) / 100, 2, this.firstColor.toString());
this.dc.drawArch(center, 22, 22, 0, (Math.PI * 2 * this.second()) / 100, 2, this.secondColor.toString());
this.dc.setTextAlign(TextAlign.CENTER);
this.dc.setFontSize(15);
this.dc.drawText(`${this.second().toFixed()}`, center.add(new Point2D(2, -2)), this.secondColor.toString(), 0);
this.dc.setFontSize(10);
this.dc.drawText(`${this.first().toFixed()}`, center.add(new Point2D(-4, 12)), this.firstColor.toString(), 0);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TwoArchProgressComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: TwoArchProgressComponent, isStandalone: false, selector: "obl-two-arch-progress", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, second: { classPropertyName: "second", publicName: "second", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { first: "firstChange", second: "secondChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: TwoArchProgressComponent,
},
], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true }], ngImport: i0, template: "<svg\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n viewBox=\"0 0 50 50\"\n #svg\n></svg>\n", styles: [""] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: TwoArchProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-two-arch-progress', providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: TwoArchProgressComponent,
},
], standalone: false, template: "<svg\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n viewBox=\"0 0 50 50\"\n #svg\n></svg>\n" }]
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { svg: [{
type: ViewChild,
args: ['svg']
}] } });
class ArchProgressModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ArchProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: ArchProgressModule, declarations: [ArchProgressComponent,
TwoArchProgressComponent], imports: [CommonModule], exports: [ArchProgressComponent,
TwoArchProgressComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ArchProgressModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ArchProgressModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ArchProgressComponent,
TwoArchProgressComponent
],
imports: [
CommonModule
],
exports: [
ArchProgressComponent,
TwoArchProgressComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ArchProgressComponent, ArchProgressModule, TwoArchProgressComponent };
//# sourceMappingURL=obliczeniowo-elementary-arch-progress.mjs.map