nonlinear-canvas-gauges
Version:
Modification of canvas-gauges. Rendering nonlinear scale.
498 lines (431 loc) • 13.2 kB
JavaScript
/*!
* The MIT License (MIT)
*
* Copyright (c) 2016 Mykhailo Stadnyk <mikhus@gmail.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
/**
* @access private
* @typedef {CanvasRenderingContext2D|{max: number, maxRadius: number, barDimensions: object}} Canvas2DContext
*/
/* istanbul ignore next: private, not testable */
/**
* Examines if a given error is something to throw or to ignore
*
* @param {Error} err
*/
export function verifyError(err) {
// there is some unpredictable error in FF in some circumstances
// which we found simply safe to ignore than to fight with it
// noinspection JSUnresolvedVariable
if (err instanceof DOMException && err.result === 0x8053000b) {
return; // ignore it
}
throw err;
}
/* istanbul ignore next: private, not testable */
/**
* Prepares major ticks data
*
* @access private
* @param {GenericOptions|{ tickSide: string }} options
* @return {[boolean, boolean]}
*/
export function prepareTicks(options) {
if (!(options.majorTicks instanceof Array)) {
options.majorTicks = options.majorTicks ? [options.majorTicks] : [];
}
if (!options.majorTicks.length) {
options.majorTicks.push(
drawings.formatMajorTickNumber(options.minValue, options)
);
options.majorTicks.push(
drawings.formatMajorTickNumber(options.maxValue, options)
);
}
return [options.tickSide !== "right", options.tickSide !== "left"];
}
/* istanbul ignore next: private, not testable */
/**
* Draws rounded corners rectangle
*
* @param {Canvas2DContext} context
* @param {number} x
* @param {number} y
* @param {number} w
* @param {number} h
* @param {number} r
*/
export function roundRect(context, x, y, w, h, r) {
context.beginPath();
context.moveTo(x + r, y);
context.lineTo(x + w - r, y);
context.quadraticCurveTo(x + w, y, x + w, y + r);
context.lineTo(x + w, y + h - r);
context.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
context.lineTo(x + r, y + h);
context.quadraticCurveTo(x, y + h, x, y + h - r);
context.lineTo(x, y + r);
context.quadraticCurveTo(x, y, x + r, y);
context.closePath();
}
/* istanbul ignore next: private, not testable */
/**
* Pads a given value with leading zeros using the given options
*
* @param {number} val
* @param {RadialGaugeOptions|{valueInt: number, valueDec: number}} options
* @returns {string}
*/
export function padValue(val, options) {
let dec = options.valueDec;
let int = options.valueInt;
let i = 0;
let s, strVal, n;
val = parseFloat(val);
n = val < 0;
val = Math.abs(val);
if (dec > 0) {
strVal = val
.toFixed(dec)
.toString()
.split(".");
s = int - strVal[0].length;
for (; i < s; ++i) {
strVal[0] = "0" + strVal[0];
}
strVal = (n ? "-" : "") + strVal[0] + "." + strVal[1];
} else {
strVal = Math.round(val).toString();
s = int - strVal.length;
for (; i < s; ++i) {
strVal = "0" + strVal;
}
strVal = (n ? "-" : "") + strVal;
}
return strVal;
}
/* istanbul ignore next: private, not testable */
/**
* Formats a number for display on the dial's plate using the majorTicksFormat
* config option.
*
* @param {number} num number to format
* @param {object} options
* @returns {string} formatted number
*/
export function formatMajorTickNumber(num, options) {
let right,
hasDec = false;
// First, force the correct number of digits right of the decimal.
if (options.majorTicksDec === 0) {
right = Math.round(num).toString();
} else {
right = num.toFixed(options.majorTicksDec);
}
// Second, force the correct number of digits left of the decimal.
if (options.majorTicksInt > 1) {
// Does this number have a decimal?
hasDec = ~right.indexOf(".");
// Is this number a negative number?
if (~right.indexOf("-")) {
return (
"-" +
[
options.majorTicksInt +
options.majorTicksDec +
2 +
(hasDec ? 1 : 0) -
right.length
].join("0") +
right.replace("-", "")
);
} else {
return (
[
options.majorTicksInt +
options.majorTicksDec +
1 +
(hasDec ? 1 : 0) -
right.length
].join("0") + right
);
}
}
return right;
}
/* istanbul ignore next: private, not testable */
/**
* Transforms degrees to radians
*
* @param {number} degrees
* @returns {number}
*/
export function radians(degrees) {
return (degrees * Math.PI) / 180;
}
/* istanbul ignore next: private, not testable */
/**
* Calculates and returns radial point coordinates
*
* @param {number} radius
* @param {number} angle
* @returns {{x: number, y: number}}
*/
export function radialPoint(radius, angle) {
return { x: -radius * Math.sin(angle), y: radius * Math.cos(angle) };
}
/* istanbul ignore next: private, not testable */
/**
* Creates and returns linear gradient canvas object
*
* @param {Canvas2DContext} context
* @param {string} colorFrom
* @param {string} colorTo
* @param {number} length
* @param {boolean} [isVertical]
* @param {number} [from]
* @returns {CanvasGradient}
*/
export function linearGradient(
context,
colorFrom,
colorTo,
length,
isVertical = true,
from = 0
) {
let grad = context.createLinearGradient(
isVertical ? 0 : from,
isVertical ? from : 0,
isVertical ? 0 : length,
isVertical ? length : 0
);
grad.addColorStop(0, colorFrom);
grad.addColorStop(1, colorTo);
return grad;
}
/* istanbul ignore next: private, not testable */
/**
* Draws the shadow if it was not drawn
*
* @param {Canvas2DContext} context
* @param {GenericOptions} options
* @param {boolean} shadowDrawn
* @return {boolean}
*/
export function drawShadow(context, options, shadowDrawn = false) {
if (shadowDrawn) {
context.restore();
return true;
}
context.save();
let w = options.borderShadowWidth;
if (w) {
context.shadowBlur = w;
context.shadowColor = options.colorBorderShadow;
}
return true;
}
/* istanbul ignore next: private, not testable */
/**
* Draws gauge needle shadow
*
* @access private
* @param {Canvas2DContext} context
* @param {RadialGaugeOptions} options
*/
export function drawNeedleShadow(context, options) {
if (!options.needleShadow) return;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.shadowBlur = 10;
context.shadowColor = options.colorNeedleShadowDown;
}
/* istanbul ignore next: private, not testable */
/**
* Constructs font styles for canvas fonts
*
* @param {GenericOptions} options
* @param {string} target
* @param {number} baseSize
*/
export function font(options, target, baseSize) {
return (
options["font" + target + "Style"] +
" " +
options["font" + target + "Weight"] +
" " +
options["font" + target + "Size"] * baseSize +
"px " +
options["font" + target]
);
}
/* istanbul ignore next: private, not testable */
/**
* Resets some context settings
*
* @param {Canvas2DContext} context
*/
function reset(context) {
context.shadowOffsetX = null;
context.shadowOffsetY = null;
context.shadowBlur = null;
context.shadowColor = "";
context.strokeStyle = null;
context.lineWidth = 0;
context.save();
}
/* istanbul ignore next: private, not testable */
/**
* Declares to drow value text shadow if configured
*
* @param context
* @param options
* @param offset
* @param blur
*/
function drawValueTextShadow(context, options, offset, blur) {
if (options.valueTextShadow) {
context.shadowOffsetX = offset;
context.shadowOffsetY = offset;
context.shadowBlur = blur;
context.shadowColor = options.colorValueTextShadow;
}
}
/* istanbul ignore next: private, not testable */
/**
* Draws value box at given position
*
* @param {Canvas2DContext} context
* @param {GenericOptions} options
* @param {number|string} value
* @param {number} x
* @param {number} y
* @param {number} max
*/
export function drawValueBox(context, options, value, x, y, max) {
if (!options.valueBox) return;
reset(context);
let addLength = options.valueDec ? 1 + options.valueDec : 0;
let maxValueWidth = "9".repeat(
Math.max.apply(
null,
[String(parseInt(value)).length + addLength].concat(
options.majorTicks.map(
val => String(parseInt(val, 10)).length + addLength
)
)
)
);
let text = options.valueText || padValue(value, options);
let tunit = max / 200;
let runit = max / 100;
let offset = 0.4 * runit;
let blur = 1.2 * runit;
context.font = font(options, "Value", tunit);
drawValueTextShadow(context, options, offset, blur);
let tw = context.measureText(
options.valueText
? text
: "-" + padValue(Number(maxValueWidth), options)
).width;
reset(context);
let th = parseFloat(options.fontValueSize) * tunit + offset + blur;
let sw = runit * parseFloat(options.valueBoxStroke);
let bmax = max * 2 - sw * 2;
let bw = tw + 10 * runit;
let bh = 1.1 * th + offset + blur;
let br = runit * options.valueBoxBorderRadius;
let obw = ((parseFloat(options.valueBoxWidth) || 0) / 100) * bmax;
obw > bw && (bw = obw);
bw > bmax && (bw = bmax);
let bx = x - bw / 2;
let by = y - bh / 2;
let gy = y - 5.75 * runit;
context.beginPath();
if (br) roundRect(context, bx, by, bw, bh, br);
else context.rect(bx, by, bw, bh);
if (sw) {
let grd = context.createRadialGradient(
x,
gy,
runit * 10,
x,
gy,
runit * 20
);
grd.addColorStop(0, options.colorValueBoxRect);
grd.addColorStop(1, options.colorValueBoxRectEnd);
context.strokeStyle = grd;
context.lineWidth = sw;
context.stroke();
}
if (options.colorValueBoxShadow) {
context.shadowBlur = 1.2 * runit;
context.shadowColor = options.colorValueBoxShadow;
}
if (options.colorValueBoxBackground) {
context.fillStyle = options.colorValueBoxBackground;
context.fill();
}
context.closePath();
context.restore();
drawValueTextShadow(context, options, offset, blur);
context.fillStyle = options.colorValueText;
context.textAlign = "center";
context.textBaseline = "alphabetic";
context.fillText(text, bx + bw / 2, y + bh / 2 - th / 3);
context.restore();
}
/* istanbul ignore next: private, not testable */
/**
* Returns normalized value
*
* @param {GenericOptions} options
* @return {{normal: number, indented: number}}
*/
export function normalizedValue(options) {
let value = options.value;
let min = options.minValue;
let max = options.maxValue;
let dt = (max - min) * 0.01;
return {
normal: value < min ? min : value > max ? max : value,
indented: value < min ? min - dt : value > max ? max + dt : value
};
}
const drawings = {
roundRect: roundRect,
padValue: padValue,
formatMajorTickNumber: formatMajorTickNumber,
radians: radians,
radialPoint: radialPoint,
linearGradient: linearGradient,
drawNeedleShadow: drawNeedleShadow,
drawValueBox: drawValueBox,
verifyError: verifyError,
prepareTicks: prepareTicks,
drawShadow: drawShadow,
font: font,
normalizedValue: normalizedValue
};
export default drawings;
module.exports = drawings;