Browse Source

Merge branch 'develop' of github.com:almende/vis into develop

codeClimate
Ludo Stellingwerff 8 years ago
parent
commit
ea26388088
11 changed files with 414 additions and 336 deletions
  1. +3
    -0
      HISTORY.md
  2. +291
    -253
      dist/vis.js
  3. +2
    -2
      docs/data/dataset.html
  4. +51
    -26
      lib/network/modules/LayoutEngine.js
  5. +1
    -1
      lib/network/modules/ManipulationSystem.js
  6. +8
    -5
      lib/network/modules/components/nodes/shapes/Box.js
  7. +11
    -9
      lib/network/modules/components/nodes/shapes/Database.js
  8. +13
    -10
      lib/network/modules/components/nodes/shapes/Ellipse.js
  9. +12
    -11
      lib/network/modules/components/nodes/shapes/Image.js
  10. +11
    -10
      lib/network/modules/components/nodes/util/CircleImageBase.js
  11. +11
    -9
      lib/network/modules/components/nodes/util/ShapeBase.js

+ 3
- 0
HISTORY.md View File

@ -14,6 +14,9 @@ http://visjs.org
- Fixed #1334 (again): Network now ignores scroll when interaction:zoomView is false. - Fixed #1334 (again): Network now ignores scroll when interaction:zoomView is false.
- Fixed #1588: destroy now unsubscribed from the dataset. - Fixed #1588: destroy now unsubscribed from the dataset.
- Fixed #1584: Navigation buttons broken. - 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 ### Timeline

+ 291
- 253
dist/vis.js
File diff suppressed because it is too large
View File


+ 2
- 2
docs/data/dataset.html View File

@ -104,7 +104,7 @@
Vis.js comes with a flexible DataSet, which can be used to hold and Vis.js comes with a flexible DataSet, which can be used to hold and
manipulate unstructured data and listen for changes in the data. manipulate unstructured data and listen for changes in the data.
The DataSet is key/value based. Data items can be added, updated and The DataSet is key/value based. Data items can be added, updated and
removed from the DatSet, and one can subscribe to changes in the DataSet.
removed from the DataSet, and one can subscribe to changes in the DataSet.
The data in the DataSet can be filtered and ordered, and fields (like The data in the DataSet can be filtered and ordered, and fields (like
dates) can be converted to a specific type. Data can be normalized when dates) can be converted to a specific type. Data can be normalized when
appending it to the DataSet as well. appending it to the DataSet as well.
@ -1020,4 +1020,4 @@ var positiveBalance = dataset.get({
<script src="../js/tipuesearch.config.js"></script> <script src="../js/tipuesearch.config.js"></script>
<script src="../js/tipuesearch.js"></script> <script src="../js/tipuesearch.js"></script>
<!-- controller --> <!-- controller -->
<script src="../js/main.js"></script>
<script src="../js/main.js"></script>

+ 51
- 26
lib/network/modules/LayoutEngine.js View File

@ -148,7 +148,7 @@ class LayoutEngine {
// force all edges into static smooth curves. Only applies to edges that do not use the global options for smooth. // force all edges into static smooth curves. Only applies to edges that do not use the global options for smooth.
this.body.emitter.emit('_forceDisableDynamicCurves', type); this.body.emitter.emit('_forceDisableDynamicCurves', type);
} }
console.log(JSON.stringify(allOptions), JSON.stringify(this.optionsBackup));
return allOptions; return allOptions;
} }
@ -339,6 +339,15 @@ class LayoutEngine {
} }
} }
// fallback for cases where there are nodes but no edges
for (let nodeId in this.body.nodes) {
if (this.body.nodes.hasOwnProperty(nodeId)) {
if (this.hierarchicalLevels[nodeId] === undefined) {
this.hierarchicalLevels[nodeId] = 0;
}
}
}
// check the distribution of the nodes per level. // check the distribution of the nodes per level.
let distribution = this._getDistribution(); let distribution = this._getDistribution();
@ -400,7 +409,7 @@ class LayoutEngine {
} }
} }
} }
return [min, max];
return {min:min, max:max};
}; };
// get the width of all trees // get the width of all trees
@ -751,27 +760,32 @@ class LayoutEngine {
useMap = false; useMap = false;
} }
let level = this.hierarchicalLevels[node.id]; let level = this.hierarchicalLevels[node.id];
let index = this.distributionIndex[node.id];
let position = this._getPositionForHierarchy(node);
let minSpace = 1e9;
let maxSpace = 1e9;
if (index !== 0) {
let prevNode = this.distributionOrdering[level][index - 1];
if ((useMap === true && map[prevNode.id] === undefined) || useMap === false) {
let prevPos = this._getPositionForHierarchy(prevNode);
minSpace = position - prevPos;
if (level !== undefined) {
let index = this.distributionIndex[node.id];
let position = this._getPositionForHierarchy(node);
let minSpace = 1e9;
let maxSpace = 1e9;
if (index !== 0) {
let prevNode = this.distributionOrdering[level][index - 1];
if ((useMap === true && map[prevNode.id] === undefined) || useMap === false) {
let prevPos = this._getPositionForHierarchy(prevNode);
minSpace = position - prevPos;
}
} }
}
if (index != this.distributionOrdering[level].length - 1) {
let nextNode = this.distributionOrdering[level][index + 1];
if ((useMap === true && map[nextNode.id] === undefined) || useMap === false) {
let nextPos = this._getPositionForHierarchy(nextNode);
maxSpace = Math.min(maxSpace, nextPos - position);
if (index != this.distributionOrdering[level].length - 1) {
let nextNode = this.distributionOrdering[level][index + 1];
if ((useMap === true && map[nextNode.id] === undefined) || useMap === false) {
let nextPos = this._getPositionForHierarchy(nextNode);
maxSpace = Math.min(maxSpace, nextPos - position);
}
} }
}
return [minSpace, maxSpace];
return [minSpace, maxSpace];
}
else {
return [0, 0];
}
} }
/** /**
@ -1007,14 +1021,18 @@ class LayoutEngine {
// get the minimum level // get the minimum level
for (let nodeId in this.body.nodes) { for (let nodeId in this.body.nodes) {
if (this.body.nodes.hasOwnProperty(nodeId)) { if (this.body.nodes.hasOwnProperty(nodeId)) {
minLevel = Math.min(this.hierarchicalLevels[nodeId], minLevel);
if (this.hierarchicalLevels[nodeId] !== undefined) {
minLevel = Math.min(this.hierarchicalLevels[nodeId], minLevel);
}
} }
} }
// subtract the minimum from the set so we have a range starting from 0 // subtract the minimum from the set so we have a range starting from 0
for (let nodeId in this.body.nodes) { for (let nodeId in this.body.nodes) {
if (this.body.nodes.hasOwnProperty(nodeId)) { if (this.body.nodes.hasOwnProperty(nodeId)) {
this.hierarchicalLevels[nodeId] -= minLevel;
if (this.hierarchicalLevels[nodeId] !== undefined) {
this.hierarchicalLevels[nodeId] -= minLevel;
}
} }
} }
} }
@ -1057,12 +1075,18 @@ class LayoutEngine {
progress[node.id] = true; progress[node.id] = true;
let childNode; let childNode;
for (let i = 0; i < node.edges.length; i++) { for (let i = 0; i < node.edges.length; i++) {
if (node.edges[i].toId === node.id) {childNode = node.edges[i].from;}
else {childNode = node.edges[i].to;}
if (node.edges[i].connected === true) {
if (node.edges[i].toId === node.id) {
childNode = node.edges[i].from;
}
else {
childNode = node.edges[i].to;
}
if (node.id !== childNode.id) {
callback(node, childNode, node.edges[i]);
crawler(childNode);
if (node.id !== childNode.id) {
callback(node, childNode, node.edges[i]);
crawler(childNode);
}
} }
} }
} }
@ -1259,6 +1283,7 @@ class LayoutEngine {
} }
} }
} }
if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') { if (this.options.hierarchical.direction === 'UD' || this.options.hierarchical.direction === 'DU') {
node.x = position; node.x = position;
} }

+ 1
- 1
lib/network/modules/ManipulationSystem.js View File

@ -642,7 +642,7 @@ class ManipulationSystem {
// remove the manipulation divs // remove the manipulation divs
if (this.manipulationDiv) {this.canvas.frame.removeChild(this.manipulationDiv);} if (this.manipulationDiv) {this.canvas.frame.removeChild(this.manipulationDiv);}
if (this.editModeDiv) {this.canvas.frame.removeChild(this.editModeDiv);} if (this.editModeDiv) {this.canvas.frame.removeChild(this.editModeDiv);}
if (this.closeDiv) {this.canvas.frame.removeChild(this.manipulationDiv);}
if (this.closeDiv) {this.canvas.frame.removeChild(this.closeDiv);}
// set the references to undefined // set the references to undefined
this.manipulationDiv = undefined; this.manipulationDiv = undefined;

+ 8
- 5
lib/network/modules/components/nodes/shapes/Box.js View File

@ -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. //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
ctx.save(); 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.restore();
this.updateBoundingBox(x,y,ctx,selected); this.updateBoundingBox(x,y,ctx,selected);

+ 11
- 9
lib/network/modules/components/nodes/shapes/Database.js View File

@ -23,13 +23,12 @@ class Database extends NodeBase {
this.left = x - this.width / 2; this.left = x - this.width / 2;
this.top = y - this.height / 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 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.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.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); 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. //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
ctx.save(); 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.restore();
this.updateBoundingBox(x,y,ctx,selected); this.updateBoundingBox(x,y,ctx,selected);

+ 13
- 10
lib/network/modules/components/nodes/shapes/Ellipse.js View File

@ -25,15 +25,13 @@ class Ellipse extends NodeBase {
this.left = x - this.width * 0.5; this.left = x - this.width * 0.5;
this.top = y - this.height * 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 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.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.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); 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. //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
ctx.save(); 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.restore();
this.updateBoundingBox(x, y, ctx, selected); this.updateBoundingBox(x, y, ctx, selected);

+ 12
- 11
lib/network/modules/components/nodes/shapes/Image.js View File

@ -18,17 +18,15 @@ class Image extends CircleImageBase {
this.top = y - this.height / 2; this.top = y - this.height / 2;
if (this.options.shapeProperties.useBorderWithImage === true) { 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(); ctx.beginPath();
// setup the line properties. // setup the line properties.
ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border; 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 // set a fillstyle
ctx.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background; 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. //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
ctx.save(); 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.restore();
ctx.closePath(); ctx.closePath();

+ 11
- 10
lib/network/modules/components/nodes/util/CircleImageBase.js View File

@ -66,14 +66,12 @@ class CircleImageBase extends NodeBase {
} }
_drawRawCircle(ctx, x, y, selected, hover, size) { _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 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.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.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
ctx.circle(x, y, size); 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. //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
ctx.save(); 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.restore();
} }

+ 11
- 9
lib/network/modules/components/nodes/util/ShapeBase.js View File

@ -20,13 +20,12 @@ class ShapeBase extends NodeBase {
this.left = x - this.width / 2; this.left = x - this.width / 2;
this.top = y - this.height / 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 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.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.fillStyle = selected ? this.options.color.highlight.background : hover ? this.options.color.hover.background : this.options.color.background;
ctx[shape](x, y, this.options.size); 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. //draw dashed border if enabled, save and restore is required for firefox not to crash on unix.
ctx.save(); 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.restore();
if (this.options.label !== undefined) { if (this.options.label !== undefined) {

Loading…
Cancel
Save