Merge pull request #62 from Mikhus/v2.0.5

Merge release 2.0.5 into master

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "canvas-gauges",
-    "version": "2.0.4",
+    "version": "2.0.5",
     "homepage": "https://github.com/Mikhus/canvas-gauges",
     "authors": [
         "Mykhailo Stadnyk <mikhus@gmail.com>"

lib/LinearGauge.js

@@ -842,7 +842,7 @@ function needleStyle(context, options, length, isRight) {
  * @param {number} length
  * @param {boolean} [isRight]
  */
-function drawLinearLineNeedle(context, options, sX, sY, eX, eY, length, 
+function drawLinearLineNeedle(context, options, sX, sY, eX, eY, length,
                               isRight)
 {
     context.lineWidth = options.needleWidth;
@@ -1023,53 +1023,59 @@ export default class LinearGauge extends BaseGauge {
      * @returns {LinearGauge}
      */
     draw() {
-        let canvas = this.canvas;
-        let [x, y, w, h] = [
-            -canvas.drawX,
-            -canvas.drawY,
-            canvas.drawWidth,
-            canvas.drawHeight
-        ];
-        let options = this.options;
+        try {
+            let canvas = this.canvas;
+            let [x, y, w, h] = [
+                -canvas.drawX,
+                -canvas.drawY,
+                canvas.drawWidth,
+                canvas.drawHeight
+            ];
+            let options = this.options;
 
-        if (!canvas.elementClone.initialized) {
-            let context = canvas.contextClone;
+            if (!canvas.elementClone.initialized) {
+                let context = canvas.contextClone;
 
-            // clear the cache
-            context.clearRect(x, y, w, h);
-            context.save();
+                // clear the cache
+                context.clearRect(x, y, w, h);
+                context.save();
 
-            this.drawBox = drawLinearPlate(context, options, x, y, w, h);
+                this.drawBox = drawLinearPlate(context, options, x, y, w, h);
 
-            drawLinearBar(context, options, ...this.drawBox);
+                drawLinearBar(context, options, ...this.drawBox);
 
-            canvas.context.barDimensions = context.barDimensions;
+                canvas.context.barDimensions = context.barDimensions;
 
-            drawLinearBarHighlights(context, options);
-            drawLinearMinorTicks(context, options);
-            drawLinearMajorTicks(context, options);
-            drawLinearMajorTicksNumbers(context, options);
-            drawLinearTitle(context, options);
-            drawLinearUnits(context, options);
+                drawLinearBarHighlights(context, options);
+                drawLinearMinorTicks(context, options);
+                drawLinearMajorTicks(context, options);
+                drawLinearMajorTicksNumbers(context, options);
+                drawLinearTitle(context, options);
+                drawLinearUnits(context, options);
 
-            canvas.elementClone.initialized = true;
-        }
+                canvas.elementClone.initialized = true;
+            }
 
-        this.canvas.commit();
+            this.canvas.commit();
 
-        // clear the canvas
-        canvas.context.clearRect(x, y, w, h);
-        canvas.context.save();
+            // clear the canvas
+            canvas.context.clearRect(x, y, w, h);
+            canvas.context.save();
 
-        canvas.context.drawImage(canvas.elementClone, x, y, w, h);
-        canvas.context.save();
+            canvas.context.drawImage(canvas.elementClone, x, y, w, h);
+            canvas.context.save();
 
-        drawLinearBarProgress(canvas.context, options, ...this.drawBox);
-        drawLinearBarNeedle(canvas.context, options);
-        drawLinearValueBox(canvas.context, options, options.animatedValue ?
+            drawLinearBarProgress(canvas.context, options, ...this.drawBox);
+            drawLinearBarNeedle(canvas.context, options);
+            drawLinearValueBox(canvas.context, options, options.animatedValue ?
                 this.options.value : this.value, ...this.drawBox);
 
-        super.draw();
+            super.draw();
+        }
+
+        catch (err) {
+            drawings.verifyError(err);
+        }
 
         return this;
     }

lib/RadialGauge.js

@@ -276,7 +276,7 @@ function drawRadialMajorTicks(context, options) {
     let i, colors;
     let s = options.majorTicks.length;
     let pixelRatio = SmartCanvas.pixelRatio;
-    
+
     context.lineWidth = 2 * pixelRatio;
     context.save();
 
@@ -293,7 +293,7 @@ function drawRadialMajorTicks(context, options) {
 
     i = 0;
     for (; i < s; ++i) {
-        context.strokeStyle = colors[i];        
+        context.strokeStyle = colors[i];
         context.rotate(drawings.radians(radialNextAngle(options, i, s)));
 
         context.beginPath();
@@ -614,93 +614,99 @@ export default class RadialGauge extends BaseGauge {
      * @returns {RadialGauge}
      */
     draw() {
-        let canvas = this.canvas;
-        let [x, y, w, h] = [
-            -canvas.drawX,
-            -canvas.drawY,
-            canvas.drawWidth,
-            canvas.drawHeight
-        ];
-        let options = this.options;
-
-        if (options.animationTarget === 'needle') {
-            if (!canvas.elementClone.initialized) {
-                let context = canvas.contextClone;
-
-                // clear the cache
-                context.clearRect(x, y, w, h);
-                context.save();
-
-                drawRadialPlate(context, options);
-                drawRadialHighlights(context, options);
-                drawRadialMinorTicks(context, options);
-                drawRadialMajorTicks(context, options);
-                drawRadialNumbers(context, options);
-                drawRadialTitle(context, options);
-                drawRadialUnits(context, options);
-
-                canvas.elementClone.initialized = true;
+        try {
+            let canvas = this.canvas;
+            let [x, y, w, h] = [
+                -canvas.drawX,
+                -canvas.drawY,
+                canvas.drawWidth,
+                canvas.drawHeight
+            ];
+            let options = this.options;
+
+            if (options.animationTarget === 'needle') {
+                if (!canvas.elementClone.initialized) {
+                    let context = canvas.contextClone;
+
+                    // clear the cache
+                    context.clearRect(x, y, w, h);
+                    context.save();
+
+                    drawRadialPlate(context, options);
+                    drawRadialHighlights(context, options);
+                    drawRadialMinorTicks(context, options);
+                    drawRadialMajorTicks(context, options);
+                    drawRadialNumbers(context, options);
+                    drawRadialTitle(context, options);
+                    drawRadialUnits(context, options);
+
+                    canvas.elementClone.initialized = true;
+                }
+
+                this.canvas.commit();
+
+                // clear the canvas
+                canvas.context.clearRect(x, y, w, h);
+                canvas.context.save();
+
+                canvas.context.drawImage(canvas.elementClone, x, y, w, h);
+                canvas.context.save();
+
+                drawRadialValueBox(canvas.context, options, options.animatedValue ?
+                    this.options.value : this.value);
+                drawRadialNeedle(canvas.context, options);
             }
 
-            this.canvas.commit();
-
-            // clear the canvas
-            canvas.context.clearRect(x, y, w, h);
-            canvas.context.save();
-
-            canvas.context.drawImage(canvas.elementClone, x, y, w, h);
-            canvas.context.save();
-
-            drawRadialValueBox(canvas.context, options, options.animatedValue ?
-                this.options.value : this.value);
-            drawRadialNeedle(canvas.context, options);
-        }
-
-        else {
-            let plateValueAngle = -drawings.radians((
+            else {
+                let plateValueAngle = -drawings.radians((
                 (options.value - options.minValue) /
                 (options.maxValue - options.minValue) * options.ticksAngle));
 
-            // clear the canvas
-            canvas.context.clearRect(x, y, w, h);
-            canvas.context.save();
+                // clear the canvas
+                canvas.context.clearRect(x, y, w, h);
+                canvas.context.save();
+
+                drawRadialPlate(canvas.context, options);
 
-            drawRadialPlate(canvas.context, options);
+                canvas.context.rotate(plateValueAngle);
 
-            canvas.context.rotate(plateValueAngle);
+                // animated
+                drawRadialHighlights(canvas.context, options);
+                drawRadialMinorTicks(canvas.context, options);
+                drawRadialMajorTicks(canvas.context, options);
+                drawRadialNumbers(canvas.context, options);
 
-            // animated
-            drawRadialHighlights(canvas.context, options);
-            drawRadialMinorTicks(canvas.context, options);
-            drawRadialMajorTicks(canvas.context, options);
-            drawRadialNumbers(canvas.context, options);
+                // non-animated
+                canvas.context.rotate(-plateValueAngle);
+                canvas.context.save();
 
-            // non-animated
-            canvas.context.rotate(-plateValueAngle);
-            canvas.context.save();
+                if (!canvas.elementClone.initialized) {
+                    let context = canvas.contextClone;
 
-            if (!canvas.elementClone.initialized) {
-                let context = canvas.contextClone;
+                    // clear the cache
+                    context.clearRect(x, y, w, h);
+                    context.save();
 
-                // clear the cache
-                context.clearRect(x, y, w, h);
-                context.save();
+                    drawRadialTitle(context, options);
+                    drawRadialUnits(context, options);
+                    drawRadialNeedle(context, options);
 
-                drawRadialTitle(context, options);
-                drawRadialUnits(context, options);
-                drawRadialNeedle(context, options);
+                    canvas.elementClone.initialized = true;
+                }
 
-                canvas.elementClone.initialized = true;
+                canvas.context.drawImage(canvas.elementClone, x, y, w, h);
             }
 
-            canvas.context.drawImage(canvas.elementClone, x, y, w, h);
-        }
+            // value box animations
+            drawRadialValueBox(canvas.context, options, options.animatedValue ?
+                this.options.value : this.value);
 
-        // value box animations
-        drawRadialValueBox(canvas.context, options, options.animatedValue ?
-            this.options.value : this.value);
+            super.draw();
+        }
 
-        super.draw();
+        catch (err) {
+           drawings.verifyError(err);
+        }
 
         return this;
     }

lib/drawings.js

@@ -30,6 +30,23 @@
  * @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 */
 /**
  * Draws rounded corners rectangle
@@ -306,7 +323,8 @@ const drawings = {
     radialPoint: radialPoint,
     linearGradient: linearGradient,
     drawNeedleShadow: drawNeedleShadow,
-    drawValueBox: drawValueBox
+    drawValueBox: drawValueBox,
+    verifyError: verifyError
 };
 
 export default drawings;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-gauges",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Minimalistic HTML5 Canvas Gauges",
   "main": "gauge.min.js",
   "directories": {