diff --git a/HISTORY.md b/HISTORY.md index 0545624d..9a28ac26 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -16,6 +16,7 @@ http://visjs.org - Fixed #1584: Navigation buttons broken. - Fixed #1596: correct clean up of manipulation dom elements. - Fixed #1594: bug in hierarchical layout. +- Fixed #1597: Allow zero borders and addressed scaling artifacts. ### Timeline diff --git a/dist/vis.js b/dist/vis.js index a27be191..e31564d9 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -5,7 +5,7 @@ * A dynamic, browser-based visualization library. * * @version 4.12.1-SNAPSHOT - * @date 2016-01-22 + * @date 2016-01-23 * * @license * Copyright (C) 2011-2016 Almende B.V, http://almende.com @@ -29869,11 +29869,14 @@ return /******/ (function(modules) { // webpackBootstrap //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); + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + 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); @@ -30189,14 +30192,12 @@ return /******/ (function(modules) { // webpackBootstrap }, { key: '_drawRawCircle', value: function _drawRawCircle(ctx, x, y, selected, hover, size) { - var borderWidth = this.options.borderWidth; + var neutralborderWidth = this.options.borderWidth; var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; + var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale; + ctx.lineWidth = Math.min(this.width, borderWidth); ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; - - ctx.lineWidth = selected ? selectionLineWidth : borderWidth; - ctx.lineWidth *= this.networkScaleInv; - ctx.lineWidth = Math.min(this.width, ctx.lineWidth); ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background; ctx.circle(x, y, size); @@ -30209,11 +30210,14 @@ return /******/ (function(modules) { // webpackBootstrap //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); + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + this.enableBorderDashes(ctx); + //draw the border + ctx.stroke(); + //disable dashed border for other elements + this.disableBorderDashes(ctx); + } ctx.restore(); } }, { @@ -30420,13 +30424,12 @@ return /******/ (function(modules) { // webpackBootstrap this.left = x - this.width / 2; this.top = y - this.height / 2; - var borderWidth = this.options.borderWidth; + var neutralborderWidth = this.options.borderWidth; var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; + var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale; + ctx.lineWidth = Math.min(this.width, borderWidth); ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; - ctx.lineWidth = this.selected ? selectionLineWidth : borderWidth; - ctx.lineWidth *= this.networkScaleInv; - ctx.lineWidth = Math.min(this.width, ctx.lineWidth); 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); @@ -30440,11 +30443,14 @@ return /******/ (function(modules) { // webpackBootstrap //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); + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + 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); @@ -30583,13 +30589,12 @@ return /******/ (function(modules) { // webpackBootstrap this.left = x - this.width / 2; this.top = y - this.height / 2; - var borderWidth = this.options.borderWidth; + var neutralborderWidth = this.options.borderWidth; var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; + var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale; + ctx.lineWidth = Math.min(this.width, borderWidth); ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; - ctx.lineWidth = selected ? selectionLineWidth : borderWidth; - ctx.lineWidth /= this.body.view.scale; - ctx.lineWidth = Math.min(this.width, ctx.lineWidth); 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); @@ -30602,11 +30607,14 @@ return /******/ (function(modules) { // webpackBootstrap //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); + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + this.enableBorderDashes(ctx); + //draw the border + ctx.stroke(); + //disable dashed border for other elements + this.disableBorderDashes(ctx); + } ctx.restore(); if (this.options.label !== undefined) { @@ -30749,15 +30757,13 @@ return /******/ (function(modules) { // webpackBootstrap this.left = x - this.width * 0.5; this.top = y - this.height * 0.5; - var borderWidth = this.options.borderWidth; + var neutralborderWidth = this.options.borderWidth; var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; + var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale; + ctx.lineWidth = Math.min(this.width, borderWidth); ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; - ctx.lineWidth = selected ? selectionLineWidth : borderWidth; - ctx.lineWidth /= this.body.view.scale; - ctx.lineWidth = Math.min(this.width, ctx.lineWidth); - 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); @@ -30770,11 +30776,16 @@ return /******/ (function(modules) { // webpackBootstrap //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); + + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + 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); @@ -30973,17 +30984,15 @@ return /******/ (function(modules) { // webpackBootstrap this.top = y - this.height / 2; if (this.options.shapeProperties.useBorderWithImage === true) { - var borderWidth = this.options.borderWidth; - + var neutralborderWidth = this.options.borderWidth; var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; + var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale; + ctx.lineWidth = Math.min(this.width, borderWidth); ctx.beginPath(); // setup the line properties. ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; - ctx.lineWidth = selected ? selectionLineWidth : borderWidth; - ctx.lineWidth /= this.body.view.scale; - ctx.lineWidth = Math.min(this.width, ctx.lineWidth); // set a fillstyle ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background; @@ -30994,11 +31003,14 @@ return /******/ (function(modules) { // webpackBootstrap //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); + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + this.enableBorderDashes(ctx); + //draw the border + ctx.stroke(); + //disable dashed border for other elements + this.disableBorderDashes(ctx); + } ctx.restore(); ctx.closePath(); diff --git a/examples/network/basicUsage.html b/examples/network/basicUsage.html index 278b938e..662c9e68 100644 --- a/examples/network/basicUsage.html +++ b/examples/network/basicUsage.html @@ -46,7 +46,7 @@ nodes: nodes, edges: edges }; - var options = {}; + var options = {nodes:{borderWidth:0}}; var network = new vis.Network(container, data, options); diff --git a/lib/network/modules/components/nodes/shapes/Box.js b/lib/network/modules/components/nodes/shapes/Box.js index f03b02a8..d2d15740 100644 --- a/lib/network/modules/components/nodes/shapes/Box.js +++ b/lib/network/modules/components/nodes/shapes/Box.js @@ -44,11 +44,14 @@ class Box extends NodeBase { //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); + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + 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); diff --git a/lib/network/modules/components/nodes/shapes/Database.js b/lib/network/modules/components/nodes/shapes/Database.js index 3cd1a3c3..dabc02ff 100644 --- a/lib/network/modules/components/nodes/shapes/Database.js +++ b/lib/network/modules/components/nodes/shapes/Database.js @@ -23,13 +23,12 @@ class Database extends NodeBase { this.left = x - this.width / 2; this.top = y - this.height / 2; - var borderWidth = this.options.borderWidth; + var neutralborderWidth = this.options.borderWidth; var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; + var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale; + ctx.lineWidth = Math.min(this.width, borderWidth); ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; - ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth); - ctx.lineWidth *= this.networkScaleInv; - ctx.lineWidth = Math.min(this.width, ctx.lineWidth); 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); @@ -43,11 +42,14 @@ class Database extends NodeBase { //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); + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + 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); diff --git a/lib/network/modules/components/nodes/shapes/Ellipse.js b/lib/network/modules/components/nodes/shapes/Ellipse.js index 0265b1fe..b4d0a28a 100644 --- a/lib/network/modules/components/nodes/shapes/Ellipse.js +++ b/lib/network/modules/components/nodes/shapes/Ellipse.js @@ -25,15 +25,13 @@ class Ellipse extends NodeBase { this.left = x - this.width * 0.5; this.top = y - this.height * 0.5; - var borderWidth = this.options.borderWidth; + var neutralborderWidth = this.options.borderWidth; var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; + var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale; + ctx.lineWidth = Math.min(this.width, borderWidth); ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; - ctx.lineWidth = (selected ? selectionLineWidth : borderWidth); - ctx.lineWidth /= this.body.view.scale; - ctx.lineWidth = Math.min(this.width, ctx.lineWidth); - 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); @@ -46,11 +44,16 @@ class Ellipse extends NodeBase { //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); + + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + 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); diff --git a/lib/network/modules/components/nodes/shapes/Image.js b/lib/network/modules/components/nodes/shapes/Image.js index 4d812c0f..1a0e8aec 100644 --- a/lib/network/modules/components/nodes/shapes/Image.js +++ b/lib/network/modules/components/nodes/shapes/Image.js @@ -18,17 +18,15 @@ class Image extends CircleImageBase { this.top = y - this.height / 2; if (this.options.shapeProperties.useBorderWithImage === true) { - let borderWidth = this.options.borderWidth; - - let selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; + var neutralborderWidth = this.options.borderWidth; + var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; + var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale; + ctx.lineWidth = Math.min(this.width, borderWidth); ctx.beginPath(); // setup the line properties. ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; - ctx.lineWidth = (selected ? selectionLineWidth : borderWidth); - ctx.lineWidth /= this.body.view.scale; - ctx.lineWidth = Math.min(this.width, ctx.lineWidth); // set a fillstyle ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background; @@ -42,11 +40,14 @@ class Image extends CircleImageBase { //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); + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + this.enableBorderDashes(ctx); + //draw the border + ctx.stroke(); + //disable dashed border for other elements + this.disableBorderDashes(ctx); + } ctx.restore(); ctx.closePath(); diff --git a/lib/network/modules/components/nodes/util/CircleImageBase.js b/lib/network/modules/components/nodes/util/CircleImageBase.js index e4d9f803..ab0cf97f 100644 --- a/lib/network/modules/components/nodes/util/CircleImageBase.js +++ b/lib/network/modules/components/nodes/util/CircleImageBase.js @@ -66,14 +66,12 @@ class CircleImageBase extends NodeBase { } _drawRawCircle(ctx, x, y, selected, hover, size) { - var borderWidth = this.options.borderWidth; + var neutralborderWidth = this.options.borderWidth; var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; + var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale; + ctx.lineWidth = Math.min(this.width, borderWidth); ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; - - ctx.lineWidth = (selected ? selectionLineWidth : borderWidth); - ctx.lineWidth *= this.networkScaleInv; - ctx.lineWidth = Math.min(this.width, ctx.lineWidth); ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background; ctx.circle(x, y, size); @@ -86,11 +84,14 @@ class CircleImageBase extends NodeBase { //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); + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + this.enableBorderDashes(ctx); + //draw the border + ctx.stroke(); + //disable dashed border for other elements + this.disableBorderDashes(ctx); + } ctx.restore(); } diff --git a/lib/network/modules/components/nodes/util/ShapeBase.js b/lib/network/modules/components/nodes/util/ShapeBase.js index 62901f0c..d9e2cce2 100644 --- a/lib/network/modules/components/nodes/util/ShapeBase.js +++ b/lib/network/modules/components/nodes/util/ShapeBase.js @@ -20,13 +20,12 @@ class ShapeBase extends NodeBase { this.left = x - this.width / 2; this.top = y - this.height / 2; - var borderWidth = this.options.borderWidth; + var neutralborderWidth = this.options.borderWidth; var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth; + var borderWidth = (selected ? selectionLineWidth : neutralborderWidth) / this.body.view.scale; + ctx.lineWidth = Math.min(this.width, borderWidth); ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; - ctx.lineWidth = (selected ? selectionLineWidth : borderWidth); - ctx.lineWidth /= this.body.view.scale; - ctx.lineWidth = Math.min(this.width, ctx.lineWidth); 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); @@ -39,11 +38,14 @@ class ShapeBase extends NodeBase { //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); + // if borders are zero width, they will be drawn with width 1 by default. This prevents that + if (borderWidth > 0) { + this.enableBorderDashes(ctx); + //draw the border + ctx.stroke(); + //disable dashed border for other elements + this.disableBorderDashes(ctx); + } ctx.restore(); if (this.options.label !== undefined) {