ngx-pluto
Version:
161 lines • 12.1 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from "@angular/core";
/**
* @ignore
*/
export class NpSolidLoading {
constructor() {
this.label = 'loading...';
this.size = 156;
this.thickness = 16;
this.colors = ['#37C4CA', '#5189DA', '#FB8933'];
this.animatedDidEnd = new EventEmitter();
this.speed = 0.0;
this.currentAngle = 0;
this.speedUp = true;
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.draw();
}
/**
* @return {?}
*/
startAnimate() {
this.speedUp = true;
this.speed = 0.1;
this.currentAngle = 0.0;
}
/**
* @return {?}
*/
endAnimate() {
this.speedUp = false;
}
/**
* @return {?}
*/
_animatedDidEnd() {
this.animatedDidEnd.emit();
}
/**
* @return {?}
*/
draw() {
/** @type {?} */
const ctx = this.canvasElement.nativeElement.getContext('2d');
ctx.clearRect(0, 0, this.size, this.size);
ctx.lineWidth = this.thickness;
ctx.lineCap = 'round';
/** @type {?} */
let arcs = [];
/** @type {?} */
let angle = this.currentAngle;
/** @type {?} */
let emptySep = 0.1 * Math.PI;
/** @type {?} */
let sep = (2 * Math.PI - this.colors.length * emptySep) / this.colors.length;
this.colors.forEach((/**
* @param {?} item
* @param {?} idx
* @return {?}
*/
(item, idx) => {
arcs.push({
color: item,
start: angle,
to: angle + sep,
});
angle = angle + sep + emptySep;
}));
arcs.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
ctx.beginPath();
ctx.strokeStyle = item.color;
ctx.arc(this.size / 2.0, this.size / 2.0, this.size / 2.0 - this.thickness / 2.0, item.start, item.to);
ctx.stroke();
}));
if (this.speedUp) {
if (this.speed < 0.2) {
this.speed += 0.005;
if (this.speed > 0.2) {
this.speed = 0.2;
}
}
}
else {
this.speed -= 0.005;
if (this.speed <= 0) {
this.speed = 0;
this.currentAngle = 0;
this._animatedDidEnd();
return;
}
}
this.currentAngle += this.speed;
window.requestAnimationFrame((/**
* @return {?}
*/
() => this.draw()));
}
}
NpSolidLoading.decorators = [
{ type: Component, args: [{
selector: `np-solid-loading`,
template: "<div class=\"np-solid-loading-wrapper\">\r\n <canvas #canvasElement [width]=\"size\" [height]=\"size\"></canvas>\r\n <div class=\"loading-label\">{{label}}</div>\r\n</div>\r\n",
styles: [":host{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.np-solid-loading-wrapper{position:relative}.np-solid-loading-wrapper .loading-label{font-size:12px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}"]
}] }
];
/** @nocollapse */
NpSolidLoading.ctorParameters = () => [];
NpSolidLoading.propDecorators = {
label: [{ type: Input }],
size: [{ type: Input }],
thickness: [{ type: Input }],
colors: [{ type: Input }],
animatedDidEnd: [{ type: Output }],
canvasElement: [{ type: ViewChild, args: ['canvasElement',] }]
};
if (false) {
/** @type {?} */
NpSolidLoading.prototype.label;
/** @type {?} */
NpSolidLoading.prototype.size;
/** @type {?} */
NpSolidLoading.prototype.thickness;
/** @type {?} */
NpSolidLoading.prototype.colors;
/** @type {?} */
NpSolidLoading.prototype.animatedDidEnd;
/**
* @type {?}
* @private
*/
NpSolidLoading.prototype.speed;
/**
* @type {?}
* @private
*/
NpSolidLoading.prototype.currentAngle;
/**
* @type {?}
* @private
*/
NpSolidLoading.prototype.speedUp;
/** @type {?} */
NpSolidLoading.prototype.canvasElement;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29saWQtbG9hZGluZy5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1wbHV0by8iLCJzb3VyY2VzIjpbImxpYi9sb2FkaW5nL3NvbGlkLWxvYWRpbmcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQThDLEtBQUssRUFBaUYsTUFBTSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBWXpOLE1BQU0sT0FBTyxjQUFjO0lBY3pCO1FBYmdCLFVBQUssR0FBRyxZQUFZLENBQUM7UUFDckIsU0FBSSxHQUFHLEdBQUcsQ0FBQztRQUNYLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFDZixXQUFNLEdBQUcsQ0FBQyxTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsQ0FBQyxDQUFDO1FBRTFDLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUU3QyxVQUFLLEdBQUcsR0FBRyxDQUFDO1FBQ1osaUJBQVksR0FBRyxDQUFDLENBQUM7UUFDakIsWUFBTyxHQUFHLElBQUksQ0FBQztJQU12QixDQUFDOzs7O0lBR0QsUUFBUTtJQUNSLENBQUM7Ozs7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ2QsQ0FBQzs7OztJQUVELFlBQVk7UUFDVixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNwQixJQUFJLENBQUMsS0FBSyxHQUFHLEdBQUcsQ0FBQztRQUNqQixJQUFJLENBQUMsWUFBWSxHQUFHLEdBQUcsQ0FBQztJQUMxQixDQUFDOzs7O0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7Ozs7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM3QixDQUFDOzs7O0lBRUQsSUFBSTs7Y0FFSSxHQUFHLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxh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QkFBb0I7Ozs7O0lBQ3BCLHNDQUF5Qjs7Ozs7SUFDekIsaUNBQXVCOztJQUV2Qix1Q0FBc0QiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uLCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgSW5wdXQsIE9uSW5pdCwgZm9yd2FyZFJlZiwgQ2hhbmdlRGV0ZWN0b3JSZWYsIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcywgSG9zdExpc3RlbmVyLCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgVmlld0NoaWxkLCBFbGVtZW50UmVmIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IsIE5HX1ZBTElEQVRPUlMsIENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBWYWxpZGF0b3IsIFZhbGlkYXRpb25FcnJvcnMsIEFic3RyYWN0Q29udHJvbCB9IGZyb20gXCJAYW5ndWxhci9mb3Jtc1wiO1xyXG5cclxuLyoqXHJcbiAqIEBpZ25vcmVcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiBgbnAtc29saWQtbG9hZGluZ2AsXHJcbiAgdGVtcGxhdGVVcmw6ICdzb2xpZC1sb2FkaW5nLmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWydzb2xpZC1sb2FkaW5nLnNjc3MnXVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIE5wU29saWRMb2FkaW5nIGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKSBwdWJsaWMgbGFiZWwgPSAnbG9hZGluZy4uLic7XHJcbiAgQElucHV0KCkgcHVibGljIHNpemUgPSAxNTY7XHJcbiAgQElucHV0KCkgcHVibGljIHRoaWNrbmVzcyA9IDE2O1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBjb2xvcnMgPSBbJyMzN0M0Q0EnLCAnIzUxODlEQScsICcjRkI4OTMzJ107XHJcblxyXG4gIEBPdXRwdXQoKSBwdWJsaWMgYW5pbWF0ZWREaWRFbmQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gIHByaXZhdGUgc3BlZWQgPSAwLjA7XHJcbiAgcHJpdmF0ZSBjdXJyZW50QW5nbGUgPSAwO1xyXG4gIHByaXZhdGUgc3BlZWRVcCA9IHRydWU7XHJcblxyXG4gIEBWaWV3Q2hpbGQoJ2NhbnZhc0VsZW1lbnQnKSBjYW52YXNFbGVtZW50OiBFbGVtZW50UmVmO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuXHJcbiAgfVxyXG5cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICB0aGlzLmRyYXcoKTtcclxuICB9XHJcblxyXG4gIHN0YXJ0QW5pbWF0ZSgpIHtcclxuICAgIHRoaXMuc3BlZWRVcCA9IHRydWU7XHJcbiAgICB0aGlzLnNwZWVkID0gMC4xO1xyXG4gICAgdGhpcy5jdXJyZW50QW5nbGUgPSAwLjA7XHJcbiAgfVxyXG5cclxuICBlbmRBbmltYXRlKCkge1xyXG4gICAgdGhpcy5zcGVlZFVwID0gZmFsc2U7XHJcbiAgfVxyXG5cclxuICBfYW5pbWF0ZWREaWRFbmQoKSB7XHJcbiAgICB0aGlzLmFuaW1hdGVkRGlkRW5kLmVtaXQoKTtcclxuICB9XHJcblxyXG4gIGRyYXcoKSB7XHJcblxyXG4gICAgY29uc3QgY3R4ID0gdGhpcy5jYW52YXNFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuZ2V0Q29udGV4dCgnMmQnKTtcclxuICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgdGhpcy5zaXplLCB0aGlzLnNpemUpO1xyXG5cclxuICAgIGN0eC5saW5lV2lkdGggPSB0aGlzLnRoaWNrbmVzcztcclxuICAgIGN0eC5saW5lQ2FwID0gJ3JvdW5kJztcclxuXHJcbiAgICBsZXQgYXJjcyA9IFtdO1xyXG4gICAgbGV0IGFuZ2xlID0gdGhpcy5jdXJyZW50QW5nbGU7XHJcbiAgICBsZXQgZW1wdHlTZXAgPSAwLjEgKiBNYXRoLlBJO1xyXG4gICAgbGV0IHNlcCA9ICgyICogTWF0aC5QSSAtIHRoaXMuY29sb3JzLmxlbmd0aCAqIGVtcHR5U2VwKSAvIHRoaXMuY29sb3JzLmxlbmd0aDtcclxuXHJcbiAgICB0aGlzLmNvbG9ycy5mb3JFYWNoKChpdGVtLCBpZHgpID0+IHtcclxuICAgICAgYXJjcy5wdXNoKHtcclxuICAgICAgICBjb2xvcjogaXRlbSxcclxuICAgICAgICBzdGFydDogYW5nbGUsXHJcbiAgICAgICAgdG86IGFuZ2xlICsgc2VwLFxyXG4gICAgICB9KTtcclxuICAgICAgYW5nbGUgPSBhbmdsZSArIHNlcCArIGVtcHR5U2VwO1xyXG4gICAgfSk7XHJcblxyXG4gICAgYXJjcy5mb3JFYWNoKGl0ZW0gPT4ge1xyXG4gICAgICBjdHguYmVnaW5QYXRoKCk7XHJcbiAgICAgIGN0eC5zdHJva2VTdHlsZSA9IGl0ZW0uY29sb3I7XHJcbiAgICAgIGN0eC5hcmModGhpcy5zaXplIC8gMi4wLCB0aGlzLnNpemUgLyAyLjAsIHRoaXMuc2l6ZSAvIDIuMCAtIHRoaXMudGhpY2tuZXNzIC8gMi4wLCBpdGVtLnN0YXJ0LCBpdGVtLnRvKTtcclxuICAgICAgY3R4LnN0cm9rZSgpO1xyXG4gICAgfSk7XHJcblxyXG4gICAgaWYgKHRoaXMuc3BlZWRVcCkge1xyXG4gICAgICBpZiAodGhpcy5zcGVlZCA8IDAuMikge1xyXG4gICAgICAgIHRoaXMuc3BlZWQgKz0gMC4wMDU7XHJcbiAgICAgICAgaWYgKHRoaXMuc3BlZWQgPiAwLjIpIHtcclxuICAgICAgICAgIHRoaXMuc3BlZWQgPSAwLjI7XHJcbiAgICAgICAgfVxyXG4gICAgICB9XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLnNwZWVkIC09IDAuMDA1O1xyXG4gICAgICBpZiAodGhpcy5zcGVlZCA8PSAwKSB7XHJcbiAgICAgICAgdGhpcy5zcGVlZCA9IDA7XHJcbiAgICAgICAgdGhpcy5jdXJyZW50QW5nbGUgPSAwO1xyXG4gICAgICAgIHRoaXMuX2FuaW1hdGVkRGlkRW5kKCk7XHJcbiAgICAgICAgcmV0dXJuO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICB0aGlzLmN1cnJlbnRBbmdsZSArPSB0aGlzLnNwZWVkO1xyXG5cclxuICAgIHdpbmRvdy5yZXF1ZXN0QW5pbWF0aW9uRnJhbWUoKCkgPT4gdGhpcy5kcmF3KCkpO1xyXG4gIH1cclxufVxyXG5cclxuXHJcbiJdfQ==