@lxlib/chart
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.
399 lines (393 loc) • 13.4 kB
JavaScript
import { __decorate, __metadata, __spread } from 'tslib';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, NgZone, ChangeDetectorRef, ViewChild, Input, NgModule } from '@angular/core';
import { InputNumber, LxlibUtilModule } from '@lxlib/util';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
/**
* @fileoverview added by tsickle
* Generated from: water-wave.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var G2WaterWaveComponent = /** @class */ (function () {
// #endregion
function G2WaterWaveComponent(el, renderer, ngZone, cdr) {
this.el = el;
this.renderer = renderer;
this.ngZone = ngZone;
this.cdr = cdr;
this.resize$ = null;
// #region fields
this.delay = 0;
this.color = '#1890FF';
this.height = 160;
}
/**
* @private
* @param {?} type
* @return {?}
*/
G2WaterWaveComponent.prototype.renderChart = /**
* @private
* @param {?} type
* @return {?}
*/
function (type) {
if (!this.resize$)
return;
this.updateRadio();
var _a = this, percent = _a.percent, color = _a.color, node = _a.node;
/** @type {?} */
var data = Math.min(Math.max(percent / 100, 0), 100);
/** @type {?} */
var self = this;
cancelAnimationFrame(this.timer);
/** @type {?} */
var canvas = (/** @type {?} */ (node.nativeElement));
/** @type {?} */
var ctx = (/** @type {?} */ (canvas.getContext('2d')));
/** @type {?} */
var canvasWidth = canvas.width;
/** @type {?} */
var canvasHeight = canvas.height;
/** @type {?} */
var radius = canvasWidth / 2;
/** @type {?} */
var lineWidth = 2;
/** @type {?} */
var cR = radius - lineWidth;
ctx.beginPath();
ctx.lineWidth = lineWidth * 2;
/** @type {?} */
var axisLength = canvasWidth - lineWidth;
/** @type {?} */
var unit = axisLength / 8;
/** @type {?} */
var range = 0.2;
// 振幅
/** @type {?} */
var currRange = range;
/** @type {?} */
var xOffset = lineWidth;
/** @type {?} */
var sp = 0;
// 周期偏移量
/** @type {?} */
var currData = 0;
/** @type {?} */
var waveupsp = 0.005;
// 水波上涨速度
/** @type {?} */
var arcStack = [];
/** @type {?} */
var bR = radius - lineWidth;
/** @type {?} */
var circleOffset = -(Math.PI / 2);
/** @type {?} */
var circleLock = true;
// tslint:disable-next-line:binary-expression-operand-order
for (var i = circleOffset; i < circleOffset + 2 * Math.PI; i += 1 / (8 * Math.PI)) {
arcStack.push([radius + bR * Math.cos(i), radius + bR * Math.sin(i)]);
}
/** @type {?} */
var cStartPoint = (/** @type {?} */ (arcStack.shift()));
ctx.strokeStyle = color;
ctx.moveTo(cStartPoint[0], cStartPoint[1]);
/**
* @return {?}
*/
function drawSin() {
ctx.beginPath();
ctx.save();
/** @type {?} */
var sinStack = [];
for (var i = xOffset; i <= xOffset + axisLength; i += 20 / axisLength) {
/** @type {?} */
var x = sp + (xOffset + i) / unit;
/** @type {?} */
var y = Math.sin(x) * currRange;
/** @type {?} */
var dx = i;
// tslint:disable-next-line:binary-expression-operand-order
/** @type {?} */
var dy = 2 * cR * (1 - currData) + (radius - cR) - unit * y;
ctx.lineTo(dx, dy);
sinStack.push([dx, dy]);
}
/** @type {?} */
var startPoint = (/** @type {?} */ (sinStack.shift()));
ctx.lineTo(xOffset + axisLength, canvasHeight);
ctx.lineTo(xOffset, canvasHeight);
ctx.lineTo(startPoint[0], startPoint[1]);
/** @type {?} */
var gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
gradient.addColorStop(0, '#ffffff');
gradient.addColorStop(1, color);
ctx.fillStyle = gradient;
ctx.fill();
ctx.restore();
}
/**
* @return {?}
*/
function render() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
if (circleLock && type !== 'update') {
if ((/** @type {?} */ (arcStack)).length) {
/** @type {?} */
var temp = (/** @type {?} */ ((/** @type {?} */ (arcStack)).shift()));
ctx.lineTo(temp[0], temp[1]);
ctx.stroke();
}
else {
circleLock = false;
ctx.lineTo(cStartPoint[0], cStartPoint[1]);
ctx.stroke();
arcStack = null;
ctx.globalCompositeOperation = 'destination-over';
ctx.beginPath();
ctx.lineWidth = lineWidth;
// tslint:disable-next-line:binary-expression-operand-order
ctx.arc(radius, radius, bR, 0, 2 * Math.PI, true);
ctx.beginPath();
ctx.save();
// tslint:disable-next-line:binary-expression-operand-order
ctx.arc(radius, radius, radius - 3 * lineWidth, 0, 2 * Math.PI, true);
ctx.restore();
ctx.clip();
ctx.fillStyle = color;
}
}
else {
if (data >= 0.85) {
if (currRange > range / 4) {
/** @type {?} */
var t = range * 0.01;
currRange -= t;
}
}
else if (data <= 0.1) {
if (currRange < range * 1.5) {
/** @type {?} */
var t = range * 0.01;
currRange += t;
}
}
else {
if (currRange <= range) {
/** @type {?} */
var t = range * 0.01;
currRange += t;
}
if (currRange >= range) {
/** @type {?} */
var t = range * 0.01;
currRange -= t;
}
}
if (data - currData > 0) {
currData += waveupsp;
}
if (data - currData < 0) {
currData -= waveupsp;
}
sp += 0.07;
drawSin();
}
self.timer = requestAnimationFrame(render);
}
render();
};
/**
* @private
* @return {?}
*/
G2WaterWaveComponent.prototype.updateRadio = /**
* @private
* @return {?}
*/
function () {
var offsetWidth = this.el.nativeElement.parentNode.offsetWidth;
/** @type {?} */
var radio = offsetWidth < this.height ? offsetWidth / this.height : 1;
this.renderer.setStyle(this.el.nativeElement, 'transform', "scale(" + radio + ")");
};
/**
* @private
* @return {?}
*/
G2WaterWaveComponent.prototype.installResizeEvent = /**
* @private
* @return {?}
*/
function () {
var _this = this;
this.resize$ = fromEvent(window, 'resize')
.pipe(debounceTime(200))
.subscribe((/**
* @return {?}
*/
function () { return _this.updateRadio(); }));
};
/**
* @return {?}
*/
G2WaterWaveComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.installResizeEvent();
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () { return setTimeout((/**
* @return {?}
*/
function () { return _this.renderChart(''); }), _this.delay); }));
};
/**
* @return {?}
*/
G2WaterWaveComponent.prototype.ngOnChanges = /**
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () { return _this.renderChart('update'); }));
this.cdr.detectChanges();
};
/**
* @return {?}
*/
G2WaterWaveComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.timer) {
cancelAnimationFrame(this.timer);
}
(/** @type {?} */ (this.resize$)).unsubscribe();
};
G2WaterWaveComponent.decorators = [
{ type: Component, args: [{
selector: 'g2-water-wave',
exportAs: 'g2WaterWave',
template: "<div [ngStyle]=\"{'height.px': height, 'width.px': height, 'overflow': 'hidden'}\">\n <canvas #container class=\"g2-water-wave__canvas\" width=\"{{height*2}}\" height=\"{{height*2}}\"></canvas>\n</div>\n<div class=\"g2-water-wave__desc\" [ngStyle]=\"{'width.px': height}\">\n <span *ngIf=\"title\" class=\"g2-water-wave__desc-title\">\n <ng-container *nzStringTemplateOutlet=\"title\">{{title}}</ng-container>\n </span>\n <h4 class=\"g2-water-wave__desc-percent\">{{percent}}%</h4>\n</div>\n",
host: { '[class.g2-water-wave]': 'true' },
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
G2WaterWaveComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 },
{ type: NgZone },
{ type: ChangeDetectorRef }
]; };
G2WaterWaveComponent.propDecorators = {
node: [{ type: ViewChild, args: ['container', { static: true },] }],
delay: [{ type: Input }],
title: [{ type: Input }],
color: [{ type: Input }],
height: [{ type: Input }],
percent: [{ type: Input }]
};
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2WaterWaveComponent.prototype, "delay", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2WaterWaveComponent.prototype, "height", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Number)
], G2WaterWaveComponent.prototype, "percent", void 0);
return G2WaterWaveComponent;
}());
if (false) {
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.resize$;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.node;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.timer;
/** @type {?} */
G2WaterWaveComponent.prototype.delay;
/** @type {?} */
G2WaterWaveComponent.prototype.title;
/** @type {?} */
G2WaterWaveComponent.prototype.color;
/** @type {?} */
G2WaterWaveComponent.prototype.height;
/** @type {?} */
G2WaterWaveComponent.prototype.percent;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.el;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.ngZone;
/**
* @type {?}
* @private
*/
G2WaterWaveComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* Generated from: water-wave.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var COMPONENTS = [G2WaterWaveComponent];
var G2WaterWaveModule = /** @class */ (function () {
function G2WaterWaveModule() {
}
G2WaterWaveModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, LxlibUtilModule, NzOutletModule],
declarations: __spread(COMPONENTS),
exports: __spread(COMPONENTS),
},] }
];
return G2WaterWaveModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: water-wave.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { G2WaterWaveComponent, G2WaterWaveModule };
//# sourceMappingURL=water-wave.js.map