123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- import { __awaiter, __generator } from "tslib";
- import deepEqual from 'fast-deep-equal';
- import { Component, getValueFromProps } from '../_util/simply';
- import { ProgressBarDefaultProps } from './props';
- import { createCanvasContext } from '../_util/jsapi/create-canvas-context';
- import { getSystemInfo } from '../_util/jsapi/get-system-info';
- var animationFrameDuration = 16;
- Component(ProgressBarDefaultProps, {
- requestAnimationFrame: function (fn, duration) {
- if (duration === void 0) { duration = animationFrameDuration; }
- setTimeout(fn, duration);
- },
- getDrawColor: function () {
- var _a = getValueFromProps(this, [
- 'strokeColor',
- 'trailColor',
- ]), strokeColor = _a[0], trailColor = _a[1];
- var drawColor = {
- strokeColor: strokeColor || '#1677ff',
- trailColor: trailColor || '#F5F5F5',
- };
- return drawColor;
- },
- getCanvasContext: function () {
- return __awaiter(this, void 0, void 0, function () {
- var systemInfo, pixelRatio, width, _a;
- return __generator(this, function (_b) {
- switch (_b.label) {
- case 0:
- if (this.ctx)
- return [2 /*return*/];
- return [4 /*yield*/, getSystemInfo()];
- case 1:
- systemInfo = _b.sent();
- pixelRatio = systemInfo.pixelRatio;
- width = getValueFromProps(this, 'width');
- _a = this;
- return [4 /*yield*/, createCanvasContext([this.canvasId, this])];
- case 2:
- _a.ctx = _b.sent();
- this.ctx.imageSmoothingEnabled = true;
- this.ctx.imageSmoothingQuality = 'high';
- this.setData({
- canvasWidth: width * pixelRatio,
- });
- return [2 /*return*/];
- }
- });
- });
- },
- clearCanvas: function () {
- var ctx = this.ctx;
- var canvasWidth = this.data.canvasWidth;
- ctx.clearRect(0, 0, canvasWidth, canvasWidth);
- },
- updateCanvasProgress: function (prev) {
- return __awaiter(this, void 0, void 0, function () {
- var drawColor, curRad, targetRad, direction, draw;
- var _this = this;
- return __generator(this, function (_a) {
- switch (_a.label) {
- case 0:
- drawColor = this.getDrawColor();
- return [4 /*yield*/, this.getCanvasContext()];
- case 1:
- _a.sent();
- curRad = Math.floor((prev / 100) * 360);
- targetRad = Math.floor((this.data.curProgress / 100) * 360);
- direction = curRad < targetRad ? 1 : -1;
- draw = function () {
- if (curRad == targetRad)
- return;
- var _a = getValueFromProps(_this, [
- 'speed',
- 'animation',
- ]), speed = _a[0], animation = _a[1];
- curRad = direction * speed + curRad;
- if (direction == -1) {
- curRad = Math.max(curRad, targetRad);
- }
- else {
- curRad = Math.min(curRad, targetRad);
- }
- _this.clearCanvas();
- _this.drawOrbit(drawColor.trailColor);
- _this.drawProgress(drawColor.strokeColor, curRad);
- _this.ctx.draw(true);
- _this.requestAnimationFrame(draw, animation ? animationFrameDuration : 0);
- };
- draw();
- return [2 /*return*/];
- }
- });
- });
- },
- drawProgress: function (color, rad) {
- var ctx = this.ctx;
- var canvasWidth = this.data.canvasWidth;
- var strokeWidth = Number(getValueFromProps(this, 'strokeWidth'));
- ctx.beginPath();
- ctx.strokeStyle = color;
- ctx.lineWidth = strokeWidth;
- ctx.setLineCap('round');
- ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2 - strokeWidth, -Math.PI / 2, -Math.PI / 2 + (rad / 360) * 2 * Math.PI, false);
- ctx.stroke();
- },
- drawOrbit: function (color) {
- var ctx = this.ctx;
- var canvasWidth = this.data.canvasWidth;
- var strokeWidth = Number(getValueFromProps(this, 'strokeWidth'));
- ctx.beginPath();
- ctx.strokeStyle = color;
- ctx.lineWidth = strokeWidth;
- ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2 - strokeWidth, 0, Math.PI * 2, false);
- ctx.stroke();
- },
- calProgress: function () {
- var _a = getValueFromProps(this, ['percent', 'type']), p = _a[0], type = _a[1];
- var percent = +p;
- if (isNaN(percent)) {
- return this.setData({ curProgress: 0 });
- }
- var prevProgress = this.data.curProgress;
- if (percent === prevProgress) {
- return;
- }
- this.setData({
- curProgress: percent > 100 ? 100 : percent < 0 ? 0 : percent,
- });
- if (type === 'circle') {
- this.setCanvasId();
- this.updateCanvasProgress(prevProgress);
- }
- },
- setCanvasId: function () {
- this.canvasId = this.$id
- ? "ant-progress-canvas-".concat(this.$id)
- : "ant-progress-canvas";
- },
- }, {
- curProgress: 0,
- canvasWidth: 100,
- }, undefined, {
- ctx: null,
- drawColor: null,
- canvas: null,
- didMount: function () {
- this.calProgress();
- },
- didUpdate: function (prevProps) {
- if (deepEqual(this.props, prevProps))
- return;
- this.calProgress();
- },
- });
|