Browse Source

changed the dashes options, fixed bug

flowchartTest
Alex de Mulder 9 years ago
parent
commit
867f033078
8 changed files with 1085 additions and 1056 deletions
  1. +1014
    -991
      dist/vis.js
  2. +5
    -6
      examples/network/01_basic_usage.html
  3. +1
    -6
      lib/network/modules/ConfigurationSystem.js
  4. +1
    -4
      lib/network/modules/EdgesHandler.js
  5. +2
    -2
      lib/network/modules/InteractionHandler.js
  6. +37
    -33
      lib/network/modules/components/edges/util/EdgeBase.js
  7. +2
    -2
      lib/network/modules/components/shared/Label.js
  8. +23
    -12
      lib/network/shapes.js

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


+ 5
- 6
examples/network/01_basic_usage.html View File

@ -30,7 +30,7 @@
// create an array with edges
var edges = [
{from: 1, to: 1},
{from: 1, to: 3},
{from: 1, to: 3, dashes:{pattern:[10,15,2,5]}},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
@ -44,11 +44,10 @@
edges: edges
};
var options = {
configure:'edges'
// edges:{
// shadow:true,
// shape:'dot'
// },
configure:'edges',
edges:{
dashes:true,
},
// physics:{stabilization:true}
}
var network = new vis.Network(container, data, options);

+ 1
- 6
lib/network/modules/ConfigurationSystem.js View File

@ -88,12 +88,7 @@ class ConfigurationSystem {
inherit: ['from','to','both',true, false],
opacity: [1, 0, 1, 0.05]
},
dashes: {
enabled: false,
length: [5, 0, 50, 1],
gap: [5, 0, 50, 1],
altLength: [5, 0, 50, 1]
},
dashes: false,
font: {
color: ['color','#343434'],
size: [14, 0, 100, 1], // px

+ 1
- 4
lib/network/modules/EdgesHandler.js View File

@ -36,10 +36,7 @@ class EdgesHandler {
},
dashes:{
enabled: false,
preset: 'dotted',
length: 10,
gap: 5,
altLength: undefined
pattern:[5,5]
},
font: {
color: '#343434',

+ 2
- 2
lib/network/modules/InteractionHandler.js View File

@ -217,7 +217,7 @@ class InteractionHandler {
this.drag.translation = util.extend({},this.body.view.translation); // copy the object
this.drag.nodeId = undefined;
this.selectionHandler._generateClickEvent('dragStart',pointer);
this.selectionHandler._generateClickEvent('dragStart',this.drag.pointer);
if (node !== undefined && this.options.dragNodes === true) {
this.drag.nodeId = node.id;
@ -324,7 +324,7 @@ class InteractionHandler {
else {
this.body.emitter.emit('_requestRedraw');
}
this.selectionHandler._generateClickEvent('dragEnd',pointer);
this.selectionHandler._generateClickEvent('dragEnd',this.getPointer(event.center));
}

+ 37
- 33
lib/network/modules/components/edges/util/EdgeBase.js View File

@ -27,45 +27,57 @@ class EdgeBase {
// set style
ctx.strokeStyle = this.getColor(ctx);
ctx.lineWidth = this.getLineWidth(selected, hover);
let via = undefined;
if (this.options.dashes.enabled === true) {
via = this._drawDashedLine(ctx);
}
else {
via = this._drawLine(ctx);
}
return via;
}
_drawLine(ctx) {
let via = undefined;
if (this.from != this.to) {
// draw line
if (this.options.dashes.enabled === true) {
via = this._drawDashedLine(ctx);
}
else {
via = this._line(ctx);
}
via = this._line(ctx);
}
else {
let [x,y,radius] = this._getCircleData(ctx);
this._circle(ctx, x, y, radius);
}
return via;
}
_drawDashedLine(ctx) {
let via = undefined;
ctx.lineCap = 'round';
let pattern = [5,5];
if (this.options.dashes.pattern !== undefined) {
if (Array.isArray(this.options.dashes.pattern) === true) {
pattern = this.options.dashes.pattern;
}
}
// only firefox and chrome support this method, else we use the legacy one.
if (ctx.setLineDash !== undefined && this.options.dashes.altLength === undefined) {
ctx.save();
// configure the dash pattern
let pattern = [0];
if (this.options.dashes.length !== undefined && this.options.dashes.gap !== undefined) {
pattern = [this.options.dashes.length, this.options.dashes.gap];
}
else {
pattern = [5, 5];
}
// set dash settings for chrome or firefox
ctx.setLineDash(pattern);
ctx.lineDashOffset = 0;
// draw the line
via = this._line(ctx);
if (this.from != this.to) {
// draw line
via = this._line(ctx);
}
else {
let [x,y,radius] = this._getCircleData(ctx);
this._circle(ctx, x, y, radius);
}
// restore the dash settings.
ctx.setLineDash([0]);
@ -73,23 +85,15 @@ class EdgeBase {
ctx.restore();
}
else { // unsupporting smooth lines
// draw dashes line
ctx.beginPath();
ctx.lineCap = 'round';
if (this.options.dashes.altLength !== undefined) //If an alt dash value has been set add to the array this value
{
ctx.dashesLine(this.from.x, this.from.y, this.to.x, this.to.y,
[this.options.dashes.length, this.options.dashes.gap, this.options.dashes.altLength, this.options.dashes.gap]);
}
else if (this.options.dashes.length !== undefined && this.options.dashes.gap !== undefined) //If a dash and gap value has been set add to the array this value
{
ctx.dashesLine(this.from.x, this.from.y, this.to.x, this.to.y,
[this.options.dashes.length, this.options.dashes.gap]);
if (this.from != this.to) {
// draw line
ctx.dashedLine(this.from.x, this.from.y, this.to.x, this.to.y, pattern);
}
else //If all else fails draw a line
{
ctx.moveTo(this.from.x, this.from.y);
ctx.lineTo(this.to.x, this.to.y);
else {
let [x,y,radius] = this._getCircleData(ctx);
this._circle(ctx, x, y, radius);
}
// draw shadow if enabled
this.enableShadow(ctx);

+ 2
- 2
lib/network/modules/components/shared/Label.js View File

@ -32,8 +32,8 @@ class Label {
static parseOptions(parentOptions, newOptions) {
if (typeof newOptions.font === 'string') {
let newOptionsArray = newOptions.font.split(" ");
parentOptions.size = newOptionsArray[0].replace("px",'');
parentOptions.face = newOptionsArray[1];
parentOptions.size = newOptionsArray[0].replace("px",'');
parentOptions.face = newOptionsArray[1];
parentOptions.color = newOptionsArray[2];
}
else if (typeof newOptions.font === 'object') {

+ 23
- 12
lib/network/shapes.js View File

@ -236,27 +236,38 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
* @author David Jordan
* @date 2012-08-08
*/
CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, dashArray) {
if (!dashArray) dashArray = [10, 5];
if (dashLength === 0) dashLength = 0.001; // Hack for Safari
var dashCount = dashArray.length;
CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, pattern) {
this.beginPath();
this.moveTo(x, y);
var dx = (x2 - x), dy = (y2 - y);
var patternLength = pattern.length;
var dx = (x2 - x);
var dy = (y2 - y);
var slope = dy / dx;
var distRemaining = Math.sqrt(dx * dx + dy * dy);
var dashIndex = 0, draw = true;
var patternIndex = 0;
var draw = true;
var xStep = 0;
var dashLength = pattern[0];
while (distRemaining >= 0.1) {
var dashLength = dashArray[dashIndex++ % dashCount];
if (dashLength > distRemaining) dashLength = distRemaining;
var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
if (dx < 0) xStep = -xStep;
dashLength = pattern[patternIndex++ % patternLength];
if (dashLength > distRemaining) {
dashLength = distRemaining;
}
xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
xStep = dx < 0 ? -xStep : xStep;
x += xStep;
y += slope * xStep;
this[draw ? 'lineTo' : 'moveTo'](x, y);
if (draw === true) {this.lineTo(x,y);}
else {this.moveTo(x,y);}
distRemaining -= dashLength;
draw = !draw;
}
};
// TODO: add diamond shape
}

Loading…
Cancel
Save