Spaces:
Running
Running
; | |
/** | |
@module browser/Progress | |
*/ | |
/** | |
* Expose `Progress`. | |
*/ | |
module.exports = Progress; | |
/** | |
* Initialize a new `Progress` indicator. | |
*/ | |
function Progress() { | |
this.percent = 0; | |
this.size(0); | |
this.fontSize(11); | |
this.font('helvetica, arial, sans-serif'); | |
} | |
/** | |
* Set progress size to `size`. | |
* | |
* @public | |
* @param {number} size | |
* @return {Progress} Progress instance. | |
*/ | |
Progress.prototype.size = function(size) { | |
this._size = size; | |
return this; | |
}; | |
/** | |
* Set text to `text`. | |
* | |
* @public | |
* @param {string} text | |
* @return {Progress} Progress instance. | |
*/ | |
Progress.prototype.text = function(text) { | |
this._text = text; | |
return this; | |
}; | |
/** | |
* Set font size to `size`. | |
* | |
* @public | |
* @param {number} size | |
* @return {Progress} Progress instance. | |
*/ | |
Progress.prototype.fontSize = function(size) { | |
this._fontSize = size; | |
return this; | |
}; | |
/** | |
* Set font to `family`. | |
* | |
* @param {string} family | |
* @return {Progress} Progress instance. | |
*/ | |
Progress.prototype.font = function(family) { | |
this._font = family; | |
return this; | |
}; | |
/** | |
* Update percentage to `n`. | |
* | |
* @param {number} n | |
* @return {Progress} Progress instance. | |
*/ | |
Progress.prototype.update = function(n) { | |
this.percent = n; | |
return this; | |
}; | |
/** | |
* Draw on `ctx`. | |
* | |
* @param {CanvasRenderingContext2d} ctx | |
* @return {Progress} Progress instance. | |
*/ | |
Progress.prototype.draw = function(ctx) { | |
try { | |
var percent = Math.min(this.percent, 100); | |
var size = this._size; | |
var half = size / 2; | |
var x = half; | |
var y = half; | |
var rad = half - 1; | |
var fontSize = this._fontSize; | |
ctx.font = fontSize + 'px ' + this._font; | |
var angle = Math.PI * 2 * (percent / 100); | |
ctx.clearRect(0, 0, size, size); | |
// outer circle | |
ctx.strokeStyle = '#9f9f9f'; | |
ctx.beginPath(); | |
ctx.arc(x, y, rad, 0, angle, false); | |
ctx.stroke(); | |
// inner circle | |
ctx.strokeStyle = '#eee'; | |
ctx.beginPath(); | |
ctx.arc(x, y, rad - 1, 0, angle, true); | |
ctx.stroke(); | |
// text | |
var text = this._text || (percent | 0) + '%'; | |
var w = ctx.measureText(text).width; | |
ctx.fillText(text, x - w / 2 + 1, y + fontSize / 2 - 1); | |
} catch (ignore) { | |
// don't fail if we can't render progress | |
} | |
return this; | |
}; | |