- Fixed #1112, network now works in firefox on unix again.

HISTORY.md

@@ -15,6 +15,7 @@ http://visjs.org
 ### Network
 
 - Fixed #1111, check if edges exist was not correct on update.
+- Fixed #1112, network now works in firefox on unix again.
 
 ## 2015-07-20, version 4.5.1
 

dist/vis.js

@@ -28514,18 +28514,21 @@ return /******/ (function(modules) { // webpackBootstrap
         var borderRadius = 6;
         ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
 
-        //draw dashed border if enabled
-        this.enableBorderDashes(ctx);
         // draw shadow if enabled
         this.enableShadow(ctx);
+        // draw the background
         ctx.fill();
-
-        //disable dashed border for other elements
-        this.disableBorderDashes(ctx);
         // disable shadows for other elements.
         this.disableShadow(ctx);
 
+        //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+        ctx.save();
+        this.enableBorderDashes(ctx);
+        //draw the border
         ctx.stroke();
+        //disable dashed border for other elements
+        this.disableBorderDashes(ctx);
+        ctx.restore();
 
         this.updateBoundingBox(x, y);
         this.labelModule.draw(ctx, x, y, selected);
@@ -28623,14 +28626,24 @@ return /******/ (function(modules) { // webpackBootstrap
       key: 'enableBorderDashes',
       value: function enableBorderDashes(ctx) {
         if (this.options.shapeProperties.borderDashes !== false) {
-          ctx.setLineDash(this.options.shapeProperties.borderDashes);
+          if (ctx.setLineDash !== undefined) {
+            ctx.setLineDash(this.options.shapeProperties.borderDashes);
+          } else {
+            console.warn('setLineDash is not supported in this browser. The dashed borders cannot be used.');
+            this.options.shapeProperties.borderDashes = false;
+          }
         }
       }
     }, {
       key: 'disableBorderDashes',
       value: function disableBorderDashes(ctx) {
-        if (this.options.shapeProperties.borderDashes == false) {
-          ctx.setLineDash([0]);
+        if (this.options.shapeProperties.borderDashes !== false) {
+          if (ctx.setLineDash !== undefined) {
+            ctx.setLineDash([0]);
+          } else {
+            console.warn('setLineDash is not supported in this browser. The dashed borders cannot be used.');
+            this.options.shapeProperties.borderDashes = false;
+          }
         }
       }
     }]);
@@ -28826,18 +28839,21 @@ return /******/ (function(modules) { // webpackBootstrap
         ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
         ctx.circle(x, y, size);
 
-        //draw dashed border if enabled
-        this.enableBorderDashes(ctx);
         // draw shadow if enabled
         this.enableShadow(ctx);
+        // draw the background
         ctx.fill();
-
-        //disable dashed border for other elements
-        this.disableBorderDashes(ctx);
         // disable shadows for other elements.
         this.disableShadow(ctx);
 
+        //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+        ctx.save();
+        this.enableBorderDashes(ctx);
+        //draw the border
         ctx.stroke();
+        //disable dashed border for other elements
+        this.disableBorderDashes(ctx);
+        ctx.restore();
       }
     }, {
       key: '_drawImageAtPosition',
@@ -28848,6 +28864,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
           // draw shadow if enabled
           this.enableShadow(ctx);
+
+          // draw image
           ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
 
           // disable shadows for other elements.
@@ -28948,15 +28966,16 @@ return /******/ (function(modules) { // webpackBootstrap
 
         var size = Math.min(0.5 * this.height, 0.5 * this.width);
 
+        // draw the backgroun circle. IMPORTANT: the stroke in this method is used by the clip method below.
         this._drawRawCircle(ctx, x, y, selected, hover, size);
 
+        // now we draw in the cicle, we save so we can revert the clip operation after drawing.
         ctx.save();
-        ctx.circle(x, y, size);
-        ctx.stroke();
+        // clip is used to use the stroke in drawRawCircle as an area that we can draw in.
         ctx.clip();
-
+        // draw the image
         this._drawImageAtPosition(ctx);
-
+        // restore so we can again draw on the full canvas
         ctx.restore();
 
         this._drawImageLabel(ctx, x, y, selected);
@@ -29051,21 +29070,23 @@ return /******/ (function(modules) { // webpackBootstrap
         ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
         ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height);
 
-        //draw dashed border if enabled
-        this.enableBorderDashes(ctx);
         // draw shadow if enabled
         this.enableShadow(ctx);
+        // draw the background
         ctx.fill();
-
-        //disable dashed border for other elements
-        this.disableBorderDashes(ctx);
         // disable shadows for other elements.
         this.disableShadow(ctx);
 
+        //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+        ctx.save();
+        this.enableBorderDashes(ctx);
+        //draw the border
         ctx.stroke();
+        //disable dashed border for other elements
+        this.disableBorderDashes(ctx);
+        ctx.restore();
 
         this.updateBoundingBox(x, y, ctx, selected);
-
         this.labelModule.draw(ctx, x, y, selected);
       }
     }, {
@@ -29216,18 +29237,21 @@ return /******/ (function(modules) { // webpackBootstrap
         ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
         ctx[shape](x, y, this.options.size);
 
-        //draw dashed border if enabled
-        this.enableBorderDashes(ctx);
         // draw shadow if enabled
         this.enableShadow(ctx);
+        // draw the background
         ctx.fill();
-
-        //disable dashed border for other elements
-        this.disableBorderDashes(ctx);
         // disable shadows for other elements.
         this.disableShadow(ctx);
 
+        //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+        ctx.save();
+        this.enableBorderDashes(ctx);
+        //draw the border
         ctx.stroke();
+        //disable dashed border for other elements
+        this.disableBorderDashes(ctx);
+        ctx.restore();
 
         if (this.options.label !== undefined) {
           var yLabel = y + 0.5 * this.height + 3; // the + 3 is to offset it a bit below the node.
@@ -29380,18 +29404,21 @@ return /******/ (function(modules) { // webpackBootstrap
         ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
         ctx.ellipse(this.left, this.top, this.width, this.height);
 
-        //draw dashed border if enabled
-        this.enableBorderDashes(ctx);
         // draw shadow if enabled
         this.enableShadow(ctx);
+        // draw the background
         ctx.fill();
-
-        //disable dashed border for other elements
-        this.disableBorderDashes(ctx);
         // disable shadows for other elements.
         this.disableShadow(ctx);
 
+        //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+        ctx.save();
+        this.enableBorderDashes(ctx);
+        //draw the border
         ctx.stroke();
+        //disable dashed border for other elements
+        this.disableBorderDashes(ctx);
+        ctx.restore();
 
         this.updateBoundingBox(x, y, ctx, selected);
         this.labelModule.draw(ctx, x, y, selected);
@@ -31395,7 +31422,6 @@ return /******/ (function(modules) { // webpackBootstrap
           ctx.restore();
         } else {
           // unsupporting smooth lines
-
           if (this.from != this.to) {
             // draw line
             ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern);

lib/network/modules/components/edges/util/EdgeBase.js

@@ -97,8 +97,6 @@ class EdgeBase {
       ctx.restore();
     }
     else { // unsupporting smooth lines
-
-
       if (this.from != this.to) {
         // draw line
         ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern);

lib/network/modules/components/nodes/shapes/Box.js

@@ -35,18 +35,21 @@ class Box extends NodeBase {
     let borderRadius = 6;
     ctx.roundRect(this.left, this.top, this.width, this.height, borderRadius);
 
-    //draw dashed border if enabled
-    this.enableBorderDashes(ctx);
     // draw shadow if enabled
     this.enableShadow(ctx);
+    // draw the background
     ctx.fill();
-
-    //disable dashed border for other elements
-    this.disableBorderDashes(ctx);
     // disable shadows for other elements.
     this.disableShadow(ctx);
 
+    //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+    ctx.save();
+    this.enableBorderDashes(ctx);
+    //draw the border
     ctx.stroke();
+    //disable dashed border for other elements
+    this.disableBorderDashes(ctx);
+    ctx.restore();
 
     this.updateBoundingBox(x,y);
     this.labelModule.draw(ctx, x, y, selected);

lib/network/modules/components/nodes/shapes/CircularImage.js

@@ -38,15 +38,16 @@ class CircularImage extends CircleImageBase {
 
     let size = Math.min(0.5*this.height, 0.5*this.width);
 
+    // draw the backgroun circle. IMPORTANT: the stroke in this method is used by the clip method below.
     this._drawRawCircle(ctx, x, y, selected, hover, size);
 
+    // now we draw in the cicle, we save so we can revert the clip operation after drawing.
     ctx.save();
-    ctx.circle(x, y, size);
-    ctx.stroke();
+    // clip is used to use the stroke in drawRawCircle as an area that we can draw in.
     ctx.clip();
-
+    // draw the image
     this._drawImageAtPosition(ctx);
-
+    // restore so we can again draw on the full canvas
     ctx.restore();
 
     this._drawImageLabel(ctx, x, y, selected);

lib/network/modules/components/nodes/shapes/Database.js

@@ -34,21 +34,23 @@ class Database extends NodeBase {
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx.database(x - this.width / 2, y - this.height * 0.5, this.width, this.height);
 
-    //draw dashed border if enabled
-    this.enableBorderDashes(ctx);
     // draw shadow if enabled
     this.enableShadow(ctx);
+    // draw the background
     ctx.fill();
-
-    //disable dashed border for other elements
-    this.disableBorderDashes(ctx);
     // disable shadows for other elements.
     this.disableShadow(ctx);
 
+    //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+    ctx.save();
+    this.enableBorderDashes(ctx);
+    //draw the border
     ctx.stroke();
+    //disable dashed border for other elements
+    this.disableBorderDashes(ctx);
+    ctx.restore();
 
     this.updateBoundingBox(x,y,ctx,selected);
-
     this.labelModule.draw(ctx, x, y, selected);
   }
 

lib/network/modules/components/nodes/shapes/Ellipse.js

@@ -37,18 +37,21 @@ class Ellipse extends NodeBase {
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx.ellipse(this.left, this.top, this.width, this.height);
 
-    //draw dashed border if enabled
-    this.enableBorderDashes(ctx);
     // draw shadow if enabled
     this.enableShadow(ctx);
+    // draw the background
     ctx.fill();
-
-    //disable dashed border for other elements
-    this.disableBorderDashes(ctx);
     // disable shadows for other elements.
     this.disableShadow(ctx);
 
+    //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+    ctx.save();
+    this.enableBorderDashes(ctx);
+    //draw the border
     ctx.stroke();
+    //disable dashed border for other elements
+    this.disableBorderDashes(ctx);
+    ctx.restore();
 
     this.updateBoundingBox(x, y, ctx, selected);
     this.labelModule.draw(ctx, x, y, selected);

lib/network/modules/components/nodes/shapes/Icon.js

@@ -61,7 +61,6 @@ class Icon extends NodeBase {
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
 
-
       // draw shadow if enabled
       this.enableShadow(ctx);
       ctx.fillText(this.options.icon.code, x, y);

lib/network/modules/components/nodes/util/CircleImageBase.js

@@ -63,18 +63,21 @@ class CircleImageBase extends NodeBase {
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx.circle(x, y, size);
 
-    //draw dashed border if enabled
-    this.enableBorderDashes(ctx);
     // draw shadow if enabled
     this.enableShadow(ctx);
+    // draw the background
     ctx.fill();
-
-    //disable dashed border for other elements
-    this.disableBorderDashes(ctx);
     // disable shadows for other elements.
     this.disableShadow(ctx);
 
+    //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+    ctx.save();
+    this.enableBorderDashes(ctx);
+    //draw the border
     ctx.stroke();
+    //disable dashed border for other elements
+    this.disableBorderDashes(ctx);
+    ctx.restore();
   }
 
   _drawImageAtPosition(ctx) {
@@ -84,6 +87,8 @@ class CircleImageBase extends NodeBase {
 
       // draw shadow if enabled
       this.enableShadow(ctx);
+
+      // draw image
       ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
 
       // disable shadows for other elements.

lib/network/modules/components/nodes/util/NodeBase.js

@@ -42,13 +42,25 @@ class NodeBase {
 
   enableBorderDashes(ctx) {
     if (this.options.shapeProperties.borderDashes !== false) {
-      ctx.setLineDash(this.options.shapeProperties.borderDashes);
+      if (ctx.setLineDash !== undefined) {
+        ctx.setLineDash(this.options.shapeProperties.borderDashes);
+      }
+      else {
+        console.warn("setLineDash is not supported in this browser. The dashed borders cannot be used.");
+        this.options.shapeProperties.borderDashes = false;
+      }
     }
   }
 
   disableBorderDashes(ctx) {
-    if (this.options.shapeProperties.borderDashes == false) {
-      ctx.setLineDash([0]);
+    if (this.options.shapeProperties.borderDashes !== false) {
+      if (ctx.setLineDash !== undefined) {
+        ctx.setLineDash([0]);
+      }
+      else {
+        console.warn("setLineDash is not supported in this browser. The dashed borders cannot be used.");
+        this.options.shapeProperties.borderDashes = false;
+      }
     }
   }
 }

lib/network/modules/components/nodes/util/ShapeBase.js

@@ -30,19 +30,21 @@ class ShapeBase extends NodeBase {
     ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
     ctx[shape](x, y, this.options.size);
 
-    //draw dashed border if enabled
-    this.enableBorderDashes(ctx);
     // draw shadow if enabled
     this.enableShadow(ctx);
+    // draw the background
     ctx.fill();
-
-    //disable dashed border for other elements
-    this.disableBorderDashes(ctx);
     // disable shadows for other elements.
     this.disableShadow(ctx);
 
+    //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
+    ctx.save();
+    this.enableBorderDashes(ctx);
+    //draw the border
     ctx.stroke();
-
+    //disable dashed border for other elements
+    this.disableBorderDashes(ctx);
+    ctx.restore();
 
     if (this.options.label !== undefined) {
       let yLabel = y + 0.5 * this.height + 3; // the + 3 is to offset it a bit below the node.