ngx-pluto
Version:
182 lines • 12.9 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
*/
var NpSolidLoading = /** @class */ (function () {
function NpSolidLoading() {
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 {?}
*/
NpSolidLoading.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @return {?}
*/
NpSolidLoading.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.draw();
};
/**
* @return {?}
*/
NpSolidLoading.prototype.startAnimate = /**
* @return {?}
*/
function () {
this.speedUp = true;
this.speed = 0.1;
this.currentAngle = 0.0;
};
/**
* @return {?}
*/
NpSolidLoading.prototype.endAnimate = /**
* @return {?}
*/
function () {
this.speedUp = false;
};
/**
* @return {?}
*/
NpSolidLoading.prototype._animatedDidEnd = /**
* @return {?}
*/
function () {
this.animatedDidEnd.emit();
};
/**
* @return {?}
*/
NpSolidLoading.prototype.draw = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var ctx = this.canvasElement.nativeElement.getContext('2d');
ctx.clearRect(0, 0, this.size, this.size);
ctx.lineWidth = this.thickness;
ctx.lineCap = 'round';
/** @type {?} */
var arcs = [];
/** @type {?} */
var angle = this.currentAngle;
/** @type {?} */
var emptySep = 0.1 * Math.PI;
/** @type {?} */
var sep = (2 * Math.PI - this.colors.length * emptySep) / this.colors.length;
this.colors.forEach((/**
* @param {?} item
* @param {?} idx
* @return {?}
*/
function (item, idx) {
arcs.push({
color: item,
start: angle,
to: angle + sep,
});
angle = angle + sep + emptySep;
}));
arcs.forEach((/**
* @param {?} item
* @return {?}
*/
function (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 {?}
*/
function () { 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 = function () { return []; };
NpSolidLoading.propDecorators = {
label: [{ type: Input }],
size: [{ type: Input }],
thickness: [{ type: Input }],
colors: [{ type: Input }],
animatedDidEnd: [{ type: Output }],
canvasElement: [{ type: ViewChild, args: ['canvasElement',] }]
};
return NpSolidLoading;
}());
export { NpSolidLoading };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29saWQtbG9hZGluZy5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1wbHV0by8iLCJzb3VyY2VzIjpbImxpYi9sb2FkaW5nL3NvbGlkLWxvYWRpbmcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQThDLEtBQUssRUFBaUYsTUFBTSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBTXpOO0lBb0JFO1FBYmdCLFVBQUssR0FBRyxZQUFZLENBQUM7UUFDckIsU0FBSSxHQUFHLEdBQUcsQ0FBQztRQUNYLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFDZixXQUFNLEdBQUcsQ0FBQyxTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsQ0FBQyxDQUFDO1FBRTFDLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUU3QyxVQUFLLEdBQUcsR0FBRyxDQUFDO1FBQ1osaUJBQVksR0FBRyxDQUFDLENBQUM7UUFDakIsWUFBTyxHQUFHLElBQUksQ0FBQztJQU12QixDQUFDOzs7O0lBR0QsaUNBQVE7OztJQUFSO0lBQ0EsQ0FBQzs7OztJQUVELHdDQUFlOzs7SUFBZjtRQUNFLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNkLENBQUM7Ozs7SUFFRCxxQ0FBWTs7O0lBQVo7UUFDRSxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNwQixJQUFJLENBQUMsS0FBSyxHQUFHLEdBQUcsQ0FBQztRQUNqQixJQUFJLENBQUMsWUFBWSxHQUFHLEdBQUcsQ0FBQztJQUMxQixDQUFDOzs7O0lBRUQsbUNBQVU7OztJQUFWO1FBQ0UsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQzs7OztJQUVELHdDQUFlOzs7SUFBZjtRQUNFLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDN0IsQ0FBQzs7OztJQUVELDZCQUFJOzs7SUFBSjtRQUFB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ekIsK0JBQXFDOztJQUNyQyw4QkFBMkI7O0lBQzNCLG1DQUErQjs7SUFDL0IsZ0NBQTJEOztJQUUzRCx3Q0FBcUQ7Ozs7O0lBRXJELCtCQUFvQjs7Ozs7SUFDcEIsc0NBQXlCOzs7OztJQUN6QixpQ0FBdUI7O0lBRXZCLHVDQUFzRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgVmlld0VuY2Fwc3VsYXRpb24sIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBJbnB1dCwgT25Jbml0LCBmb3J3YXJkUmVmLCBDaGFuZ2VEZXRlY3RvclJlZiwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzLCBIb3N0TGlzdGVuZXIsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBWaWV3Q2hpbGQsIEVsZW1lbnRSZWYgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiwgTkdfVkFMSURBVE9SUywgQ29udHJvbFZhbHVlQWNjZXNzb3IsIFZhbGlkYXRvciwgVmFsaWRhdGlvbkVycm9ycywgQWJzdHJhY3RDb250cm9sIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XHJcblxyXG4vKipcclxuICogQGlnbm9yZVxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6IGBucC1zb2xpZC1sb2FkaW5nYCxcclxuICB0ZW1wbGF0ZVVybDogJ3NvbGlkLWxvYWRpbmcuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJ3NvbGlkLWxvYWRpbmcuc2NzcyddXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgTnBTb2xpZExvYWRpbmcgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCgpIHB1YmxpYyBsYWJlbCA9ICdsb2FkaW5nLi4uJztcclxuICBASW5wdXQoKSBwdWJsaWMgc2l6ZSA9IDE1NjtcclxuICBASW5wdXQoKSBwdWJsaWMgdGhpY2tuZXNzID0gMTY7XHJcbiAgQElucHV0KCkgcHVibGljIGNvbG9ycyA9IFsnIzM3QzRDQScsICcjNTE4OURBJywgJyNGQjg5MzMnXTtcclxuXHJcbiAgQE91dHB1dCgpIHB1YmxpYyBhbmltYXRlZERpZEVuZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgcHJpdmF0ZSBzcGVlZCA9IDAuMDtcclxuICBwcml2YXRlIGN1cnJlbnRBbmdsZSA9IDA7XHJcbiAgcHJpdmF0ZSBzcGVlZFVwID0gdHJ1ZTtcclxuXHJcbiAgQFZpZXdDaGlsZCgnY2FudmFzRWxlbWVudCcpIGNhbnZhc0VsZW1lbnQ6IEVsZW1lbnRSZWY7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkge1xyXG5cclxuICB9XHJcblxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuICAgIHRoaXMuZHJhdygpO1xyXG4gIH1cclxuXHJcbiAgc3RhcnRBbmltYXRlKCkge1xyXG4gICAgdGhpcy5zcGVlZFVwID0gdHJ1ZTtcclxuICAgIHRoaXMuc3BlZWQgPSAwLjE7XHJcbiAgICB0aGlzLmN1cnJlbnRBbmdsZSA9IDAuMDtcclxuICB9XHJcblxyXG4gIGVuZEFuaW1hdGUoKSB7XHJcbiAgICB0aGlzLnNwZWVkVXAgPSBmYWxzZTtcclxuICB9XHJcblxyXG4gIF9hbmltYXRlZERpZEVuZCgpIHtcclxuICAgIHRoaXMuYW5pbWF0ZWREaWRFbmQuZW1pdCgpO1xyXG4gIH1cclxuXHJcbiAgZHJhdygpIHtcclxuXHJcbiAgICBjb25zdCBjdHggPSB0aGlzLmNhbnZhc0VsZW1lbnQubmF0aXZlRWxlbWVudC5nZXRDb250ZXh0KCcyZCcpO1xyXG4gICAgY3R4LmNsZWFyUmVjdCgwLCAwLCB0aGlzLnNpemUsIHRoaXMuc2l6ZSk7XHJcblxyXG4gICAgY3R4LmxpbmVXaWR0aCA9IHRoaXMudGhpY2tuZXNzO1xyXG4gICAgY3R4LmxpbmVDYXAgPSAncm91bmQnO1xyXG5cclxuICAgIGxldCBhcmNzID0gW107XHJcbiAgICBsZXQgYW5nbGUgPSB0aGlzLmN1cnJlbnRBbmdsZTtcclxuICAgIGxldCBlbXB0eVNlcCA9IDAuMSAqIE1hdGguUEk7XHJcbiAgICBsZXQgc2VwID0gKDIgKiBNYXRoLlBJIC0gdGhpcy5jb2xvcnMubGVuZ3RoICogZW1wdHlTZXApIC8gdGhpcy5jb2xvcnMubGVuZ3RoO1xyXG5cclxuICAgIHRoaXMuY29sb3JzLmZvckVhY2goKGl0ZW0sIGlkeCkgPT4ge1xyXG4gICAgICBhcmNzLnB1c2goe1xyXG4gICAgICAgIGNvbG9yOiBpdGVtLFxyXG4gICAgICAgIHN0YXJ0OiBhbmdsZSxcclxuICAgICAgICB0bzogYW5nbGUgKyBzZXAsXHJcbiAgICAgIH0pO1xyXG4gICAgICBhbmdsZSA9IGFuZ2xlICsgc2VwICsgZW1wdHlTZXA7XHJcbiAgICB9KTtcclxuXHJcbiAgICBhcmNzLmZvckVhY2goaXRlbSA9PiB7XHJcbiAgICAgIGN0eC5iZWdpblBhdGgoKTtcclxuICAgICAgY3R4LnN0cm9rZVN0eWxlID0gaXRlbS5jb2xvcjtcclxuICAgICAgY3R4LmFyYyh0aGlzLnNpemUgLyAyLjAsIHRoaXMuc2l6ZSAvIDIuMCwgdGhpcy5zaXplIC8gMi4wIC0gdGhpcy50aGlja25lc3MgLyAyLjAsIGl0ZW0uc3RhcnQsIGl0ZW0udG8pO1xyXG4gICAgICBjdHguc3Ryb2tlKCk7XHJcbiAgICB9KTtcclxuXHJcbiAgICBpZiAodGhpcy5zcGVlZFVwKSB7XHJcbiAgICAgIGlmICh0aGlzLnNwZWVkIDwgMC4yKSB7XHJcbiAgICAgICAgdGhpcy5zcGVlZCArPSAwLjAwNTtcclxuICAgICAgICBpZiAodGhpcy5zcGVlZCA+IDAuMikge1xyXG4gICAgICAgICAgdGhpcy5zcGVlZCA9IDAuMjtcclxuICAgICAgICB9XHJcbiAgICAgIH1cclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHRoaXMuc3BlZWQgLT0gMC4wMDU7XHJcbiAgICAgIGlmICh0aGlzLnNwZWVkIDw9IDApIHtcclxuICAgICAgICB0aGlzLnNwZWVkID0gMDtcclxuICAgICAgICB0aGlzLmN1cnJlbnRBbmdsZSA9IDA7XHJcbiAgICAgICAgdGhpcy5fYW5pbWF0ZWREaWRFbmQoKTtcclxuICAgICAgICByZXR1cm47XHJcbiAgICAgIH1cclxuICAgIH1cclxuICAgIHRoaXMuY3VycmVudEFuZ2xlICs9IHRoaXMuc3BlZWQ7XHJcblxyXG4gICAgd2luZG93LnJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB0aGlzLmRyYXcoKSk7XHJcbiAgfVxyXG59XHJcblxyXG5cclxuIl19