From 5beeca1236e6e3487714a131d75b6d0b75a4b085 Mon Sep 17 00:00:00 2001 From: AlexDM0 Date: Tue, 21 Jul 2015 18:17:40 +0200 Subject: [PATCH] - Fixed #1112, network now works in firefox on unix again. --- HISTORY.md | 1 + dist/vis.js | 94 ++++++++++++------- .../modules/components/edges/util/EdgeBase.js | 2 - .../modules/components/nodes/shapes/Box.js | 13 ++- .../components/nodes/shapes/CircularImage.js | 9 +- .../components/nodes/shapes/Database.js | 14 +-- .../components/nodes/shapes/Ellipse.js | 13 ++- .../modules/components/nodes/shapes/Icon.js | 1 - .../components/nodes/util/CircleImageBase.js | 15 ++- .../modules/components/nodes/util/NodeBase.js | 18 +++- .../components/nodes/util/ShapeBase.js | 14 +-- 11 files changed, 123 insertions(+), 71 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index b92f4c98..d43085ae 100644 --- a/HISTORY.md +++ b/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 diff --git a/dist/vis.js b/dist/vis.js index 40db0e45..eb6cc37d 100644 --- a/dist/vis.js +++ b/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); diff --git a/lib/network/modules/components/edges/util/EdgeBase.js b/lib/network/modules/components/edges/util/EdgeBase.js index 447fef7d..06d446aa 100644 --- a/lib/network/modules/components/edges/util/EdgeBase.js +++ b/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); diff --git a/lib/network/modules/components/nodes/shapes/Box.js b/lib/network/modules/components/nodes/shapes/Box.js index fe9810f3..30326562 100644 --- a/lib/network/modules/components/nodes/shapes/Box.js +++ b/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); diff --git a/lib/network/modules/components/nodes/shapes/CircularImage.js b/lib/network/modules/components/nodes/shapes/CircularImage.js index 82fb7c8f..7b4121c0 100644 --- a/lib/network/modules/components/nodes/shapes/CircularImage.js +++ b/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); diff --git a/lib/network/modules/components/nodes/shapes/Database.js b/lib/network/modules/components/nodes/shapes/Database.js index 11e3552c..8ab35d5c 100644 --- a/lib/network/modules/components/nodes/shapes/Database.js +++ b/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); } diff --git a/lib/network/modules/components/nodes/shapes/Ellipse.js b/lib/network/modules/components/nodes/shapes/Ellipse.js index 2d486e6e..0265b1fe 100644 --- a/lib/network/modules/components/nodes/shapes/Ellipse.js +++ b/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); diff --git a/lib/network/modules/components/nodes/shapes/Icon.js b/lib/network/modules/components/nodes/shapes/Icon.js index 193044f8..183b0772 100644 --- a/lib/network/modules/components/nodes/shapes/Icon.js +++ b/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); diff --git a/lib/network/modules/components/nodes/util/CircleImageBase.js b/lib/network/modules/components/nodes/util/CircleImageBase.js index 4d941388..caba5706 100644 --- a/lib/network/modules/components/nodes/util/CircleImageBase.js +++ b/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. diff --git a/lib/network/modules/components/nodes/util/NodeBase.js b/lib/network/modules/components/nodes/util/NodeBase.js index 78a2d9e4..8c86dd65 100644 --- a/lib/network/modules/components/nodes/util/NodeBase.js +++ b/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; + } } } } diff --git a/lib/network/modules/components/nodes/util/ShapeBase.js b/lib/network/modules/components/nodes/util/ShapeBase.js index dc99032c..62901f0c 100644 --- a/lib/network/modules/components/nodes/util/ShapeBase.js +++ b/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.