jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Renamed options for dashed lines in Graph

css_transitions
josdejong 11 years ago
parent
f1fc98035b
commit
5dbd9f0135
7 changed files with 151 additions and 107 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +63
    -41
      docs/graph.html
  2. +11
    -11
      examples/graph/13_dashed_lines.html
  3. +13
    -11
      src/graph/Edge.js
  4. +19
    -10
      src/graph/Graph.js
  5. +4
    -4
      src/graph/Node.js
  6. +37
    -26
      vis.js
  7. +4
    -4
      vis.min.js

+ 63
- 41
docs/graph.html View File

@ -448,26 +448,37 @@ var edges = [
</tr> </tr>
<tr> <tr>
<td>altdashlength</td>
<td>number</td>
<td>color</td>
<td>string</td>
<td>no</td> <td>no</td>
<td>Length of the alternated dash in pixels on a dashed line.
Specifying <code>altdashlength</code> allows for creating
a dashed line with a dash-dot style, for example when
<code>dashlength=10</code> and <code>altdashlength=5</code>.
See also the option <code>dashlength</code>.
Only applicable when the line style is <code>dash-line</code>.</td>
<td>A HTML color for the edge.</td>
</tr> </tr>
<tr> <tr>
<td>color</td>
<td>string</td>
<td>dash</td>
<td>Object</td>
<td>no</td> <td>no</td>
<td>A HTML color for the edge.</td>
<td>
Object containing properties for dashed lines.
Available properties: <code>length</code>, <code>gap</code>,
<code>altLength</code>.
</td>
</tr>
<tr>
<td>dash.altLength</td>
<td>number</td>
<td>no</td>
<td>Length of the alternated dash in pixels on a dashed line.
Specifying <code>dash.altLength</code> allows for creating
a dashed line with a dash-dot style, for example when
<code>dash.length=10</code> and <code>dash.altLength=5</code>.
See also the option <code>dahs.length</code>.
Only applicable when the line style is <code>dash-line</code>.</td>
</tr> </tr>
<tr> <tr>
<td>dashlength</td>
<td>dash.length</td>
<td>number</td> <td>number</td>
<td>no</td> <td>no</td>
<td>Length of a dash in pixels on a dashed line. <td>Length of a dash in pixels on a dashed line.
@ -475,7 +486,7 @@ var edges = [
</tr> </tr>
<tr> <tr>
<td>dashgap</td>
<td>dash.gap</td>
<td>number</td> <td>number</td>
<td>no</td> <td>no</td>
<td>Length of a gap in pixels on a dashed line. <td>Length of a gap in pixels on a dashed line.
@ -635,55 +646,48 @@ var options = {
</tr> </tr>
<tr> <tr>
<td>groups</td>
<td>Object</td>
<td>none</td>
<td>It is possible to specify custom styles for groups.
Each node assigned a group gets the specified style.
See <a href="#Groups">Groups</a> for an overview of the available styles
and an example.
</td>
<td>edges.color</td>
<td>String</td>
<td>"#2B7CE9"</td>
<td>The default color of a edge.</td>
</tr> </tr>
<tr> <tr>
<td>height</td>
<td>String</td>
<td>"400px"</td>
<td>The height of the graph in pixels or as a percentage.</td>
<td>edges.dash</td>
<td>Object</td>
<td>Object</td>
<td>
Object containing default properties for dashed lines.
Available properties: <code>length</code>, <code>gap</code>,
<code>altLength</code>.
</td>
</tr> </tr>
<tr> <tr>
<td>edges.altdashlength</td>
<td>edges.dash.altLength</td>
<td>number</td> <td>number</td>
<td>none</td> <td>none</td>
<td>Length of the alternated dash in pixels on a dashed line.
Specifying <code>altdashlength</code> allows for creating
<td>Default length of the alternated dash in pixels on a dashed line.
Specifying <code>dash.altLength</code> allows for creating
a dashed line with a dash-dot style, for example when a dashed line with a dash-dot style, for example when
<code>dashlength=10</code> and <code>altdashlength=5</code>.
See also the option <code>dashlength</code>.
<code>dash.length=10</code> and <code>dash.altLength=5</code>.
See also the option <code>dahs.length</code>.
Only applicable when the line style is <code>dash-line</code>.</td> Only applicable when the line style is <code>dash-line</code>.</td>
</tr> </tr>
<tr> <tr>
<td>edges.color</td>
<td>String</td>
<td>"#2B7CE9"</td>
<td>The default color of a edge.</td>
</tr>
<tr>
<td>edges.dashlength</td>
<td>edges.dash.length</td>
<td>number</td> <td>number</td>
<td>10</td> <td>10</td>
<td>Length of a dash in pixels on a dashed line.
<td>Default length of a dash in pixels on a dashed line.
Only applicable when the line style is <code>dash-line</code>.</td> Only applicable when the line style is <code>dash-line</code>.</td>
</tr> </tr>
<tr> <tr>
<td>edges.dashgap</td>
<td>edges.dash.gap</td>
<td>number</td> <td>number</td>
<td>5</td> <td>5</td>
<td>Length of a gap in pixels on a dashed line.
<td>Default length of a gap in pixels on a dashed line.
Only applicable when the line style is <code>dash-line</code>.</td> Only applicable when the line style is <code>dash-line</code>.</td>
</tr> </tr>
@ -708,6 +712,24 @@ var options = {
<td>The default width of a edge.</td> <td>The default width of a edge.</td>
</tr> </tr>
<tr>
<td>groups</td>
<td>Object</td>
<td>none</td>
<td>It is possible to specify custom styles for groups.
Each node assigned a group gets the specified style.
See <a href="#Groups">Groups</a> for an overview of the available styles
and an example.
</td>
</tr>
<tr>
<td>height</td>
<td>String</td>
<td>"400px"</td>
<td>The height of the graph in pixels or as a percentage.</td>
</tr>
<tr> <tr>
<td>nodes.color</td> <td>nodes.color</td>
<td>String | Object</td> <td>String | Object</td>

+ 11
- 11
examples/graph/13_dashed_lines.html View File

@ -20,19 +20,19 @@
// Called on page load // Called on page load
function draw() { function draw() {
var nodes = [ var nodes = [
{id: 1, label: "dashed\nline\nexamples"},
{id: 2, label: "default"},
{id: 3, label: "dashlength: 20\ndashgap: 20"},
{id: 4, label: "dashlength: 20\ndashgap: 5"},
{id: 5, label: "dashlength: 5\ndashgap: 20"},
{id: 6, label: "dashlength: 20\ndashgap: 5\naltdashlength: 5"}
{id: 1, label: 'dashed\nline\nexamples'},
{id: 2, label: 'default'},
{id: 3, label: 'dash.length: 20\ndash.gap: 20'},
{id: 4, label: 'dash.length: 20\ndash.gap: 5'},
{id: 5, label: 'dash.length: 5\ndash.gap: 20'},
{id: 6, label: 'dash.length: 20\ndash.gap: 5\ndash.altLength: 5'}
]; ];
var edges = [ var edges = [
{from: 1, to: 2, style: "dash-line"},
{from: 1, to: 3, style: "dash-line", dashlength: 20, dashgap: 20},
{from: 1, to: 4, style: "dash-line", dashlength: 20, dashgap: 5},
{from: 1, to: 5, style: "dash-line", dashlength: 5, dashgap: 20},
{from: 1, to: 6, style: "dash-line", dashlength: 20, dashgap: 5, altdashlength: 5}
{from: 1, to: 2, style: 'dash-line'},
{from: 1, to: 3, style: 'dash-line', dash: {length: 20, gap: 20}},
{from: 1, to: 4, style: 'dash-line', dash: {length: 20, gap: 5}},
{from: 1, to: 5, style: 'dash-line', dash: {length: 5, gap: 20}},
{from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
]; ];
// create the graph // create the graph

+ 13
- 11
src/graph/Edge.js View File

@ -34,9 +34,7 @@ function Edge (properties, graph, constants) {
// Added to support dashed lines // Added to support dashed lines
// David Jordan // David Jordan
// 2012-08-08 // 2012-08-08
this.dashlength = constants.edges.dashlength;
this.dashgap = constants.edges.dashgap;
this.altdashlength = constants.edges.altdashlength;
this.dash = util.extend({}, constants.edges.dash); // contains properties length, gaph, altLength
this.stiffness = undefined; // depends on the length of the edge this.stiffness = undefined; // depends on the length of the edge
this.color = constants.edges.color; this.color = constants.edges.color;
@ -78,10 +76,12 @@ Edge.prototype.setProperties = function(properties, constants) {
// Added to support dashed lines // Added to support dashed lines
// David Jordan // David Jordan
// 2012-08-08 // 2012-08-08
if (properties.dashlength != undefined) {this.dashlength = properties.dashlength;}
if (properties.dashgap != undefined) {this.dashgap = properties.dashgap;}
if (properties.altdashlength != undefined) {this.altdashlength = properties.altdashlength;}
if (properties.dash) {
if (properties.dash.length != undefined) {this.dash.length = properties.dash.length;}
if (properties.dash.gap != undefined) {this.dash.gap = properties.dash.gap;}
if (properties.dash.altLength != undefined) {this.dash.altLength = properties.dash.altLength;}
}
if (properties.color != undefined) {this.color = properties.color;} if (properties.color != undefined) {this.color = properties.color;}
if (!this.from) { if (!this.from) {
@ -302,13 +302,15 @@ Edge.prototype._drawDashLine = function(ctx) {
// draw dashed line // draw dashed line
ctx.beginPath(); ctx.beginPath();
ctx.lineCap = 'round'; ctx.lineCap = 'round';
if (this.altdashlength != undefined) //If an alt dash value has been set add to the array this value
if (this.dash.altLength != undefined) //If an alt dash value has been set add to the array this value
{ {
ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap,this.altdashlength,this.dashgap]);
ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
[this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
} }
else if (this.dashlength != undefined && this.dashgap != undefined) //If a dash and gap value has been set add to the array this value
else if (this.dash.length != undefined && this.dash.gap != undefined) //If a dash and gap value has been set add to the array this value
{ {
ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap]);
ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
[this.dash.length,this.dash.gap]);
} }
else //If all else fails draw a line else //If all else fails draw a line
{ {

+ 19
- 10
src/graph/Graph.js View File

@ -57,8 +57,11 @@ function Graph (container, data, options) {
fontFace: 'arial', fontFace: 'arial',
//distance: 100, //px //distance: 100, //px
length: 100, // px length: 100, // px
dashlength: 10,
dashgap: 5
dash: {
length: 10,
gap: 5,
altLength: undefined
}
}, },
minForce: 0.05, minForce: 0.05,
minVelocity: 0.02, // px/s minVelocity: 0.02, // px/s
@ -167,14 +170,16 @@ Graph.prototype.setOptions = function (options) {
// Added to support dashed lines // Added to support dashed lines
// David Jordan // David Jordan
// 2012-08-08 // 2012-08-08
if (options.edges.dashlength != undefined) {
this.constants.edges.dashlength = options.edges.dashlength;
}
if (options.edges.dashgap != undefined) {
this.constants.edges.dashgap = options.edges.dashgap;
}
if (options.edges.altdashlength != undefined) {
this.constants.edges.altdashlength = options.edges.altdashlength;
if (options.edges.dash) {
if (options.edges.dash.length != undefined) {
this.constants.edges.dash.length = options.edges.dash.length;
}
if (options.edges.dash.gap != undefined) {
this.constants.edges.dash.gap = options.edges.dash.gap;
}
if (options.edges.dash.altLength != undefined) {
this.constants.edges.dash.altLength = options.edges.dash.altLength;
}
} }
} }
@ -185,6 +190,10 @@ Graph.prototype.setOptions = function (options) {
} }
} }
if (options.nodes.color) {
this.constants.nodes.color = Node.parseColor(options.nodes.color);
}
/* /*
if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin; if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax; if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;

+ 4
- 4
src/graph/Node.js View File

@ -196,8 +196,8 @@ Node.parseColor = function(color) {
} }
else { else {
c = {}; c = {};
c.background = color.background || 'white';
c.border = color.border || c.background;
c.background = color.background || 'white';
c.border = color.border || c.background;
if (util.isString(color.highlight)) { if (util.isString(color.highlight)) {
c.highlight = { c.highlight = {
border: color.highlight, border: color.highlight,
@ -206,8 +206,8 @@ Node.parseColor = function(color) {
} }
else { else {
c.highlight = {}; c.highlight = {};
c.highlight.background = color.highlight && color.highlight.background || c.border;
c.highlight.border = color.highlight && color.highlight.border || c.highlight.background;
c.highlight.background = color.highlight && color.highlight.background || c.background;
c.highlight.border = color.highlight && color.highlight.border || c.border;
} }
} }
return c; return c;

+ 37
- 26
vis.js View File

@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version 0.0.8 * @version 0.0.8
* @date 2013-06-06
* @date 2013-06-07
* *
* @license * @license
* Copyright (C) 2011-2013 Almende B.V, http://almende.com * Copyright (C) 2011-2013 Almende B.V, http://almende.com
@ -7784,8 +7784,8 @@ Node.parseColor = function(color) {
} }
else { else {
c = {}; c = {};
c.background = color.background || 'white';
c.border = color.border || c.background;
c.background = color.background || 'white';
c.border = color.border || c.background;
if (util.isString(color.highlight)) { if (util.isString(color.highlight)) {
c.highlight = { c.highlight = {
border: color.highlight, border: color.highlight,
@ -7794,8 +7794,8 @@ Node.parseColor = function(color) {
} }
else { else {
c.highlight = {}; c.highlight = {};
c.highlight.background = color.highlight && color.highlight.background || c.border;
c.highlight.border = color.highlight && color.highlight.border || c.highlight.background;
c.highlight.background = color.highlight && color.highlight.background || c.background;
c.highlight.border = color.highlight && color.highlight.border || c.border;
} }
} }
return c; return c;
@ -8302,9 +8302,7 @@ function Edge (properties, graph, constants) {
// Added to support dashed lines // Added to support dashed lines
// David Jordan // David Jordan
// 2012-08-08 // 2012-08-08
this.dashlength = constants.edges.dashlength;
this.dashgap = constants.edges.dashgap;
this.altdashlength = constants.edges.altdashlength;
this.dash = util.extend({}, constants.edges.dash); // contains properties length, gaph, altLength
this.stiffness = undefined; // depends on the length of the edge this.stiffness = undefined; // depends on the length of the edge
this.color = constants.edges.color; this.color = constants.edges.color;
@ -8346,10 +8344,12 @@ Edge.prototype.setProperties = function(properties, constants) {
// Added to support dashed lines // Added to support dashed lines
// David Jordan // David Jordan
// 2012-08-08 // 2012-08-08
if (properties.dashlength != undefined) {this.dashlength = properties.dashlength;}
if (properties.dashgap != undefined) {this.dashgap = properties.dashgap;}
if (properties.altdashlength != undefined) {this.altdashlength = properties.altdashlength;}
if (properties.dash) {
if (properties.dash.length != undefined) {this.dash.length = properties.dash.length;}
if (properties.dash.gap != undefined) {this.dash.gap = properties.dash.gap;}
if (properties.dash.altLength != undefined) {this.dash.altLength = properties.dash.altLength;}
}
if (properties.color != undefined) {this.color = properties.color;} if (properties.color != undefined) {this.color = properties.color;}
if (!this.from) { if (!this.from) {
@ -8570,13 +8570,15 @@ Edge.prototype._drawDashLine = function(ctx) {
// draw dashed line // draw dashed line
ctx.beginPath(); ctx.beginPath();
ctx.lineCap = 'round'; ctx.lineCap = 'round';
if (this.altdashlength != undefined) //If an alt dash value has been set add to the array this value
if (this.dash.altLength != undefined) //If an alt dash value has been set add to the array this value
{ {
ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap,this.altdashlength,this.dashgap]);
ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
[this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
} }
else if (this.dashlength != undefined && this.dashgap != undefined) //If a dash and gap value has been set add to the array this value
else if (this.dash.length != undefined && this.dash.gap != undefined) //If a dash and gap value has been set add to the array this value
{ {
ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dashlength,this.dashgap]);
ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
[this.dash.length,this.dash.gap]);
} }
else //If all else fails draw a line else //If all else fails draw a line
{ {
@ -9114,8 +9116,11 @@ function Graph (container, data, options) {
fontFace: 'arial', fontFace: 'arial',
//distance: 100, //px //distance: 100, //px
length: 100, // px length: 100, // px
dashlength: 10,
dashgap: 5
dash: {
length: 10,
gap: 5,
altLength: undefined
}
}, },
minForce: 0.05, minForce: 0.05,
minVelocity: 0.02, // px/s minVelocity: 0.02, // px/s
@ -9224,14 +9229,16 @@ Graph.prototype.setOptions = function (options) {
// Added to support dashed lines // Added to support dashed lines
// David Jordan // David Jordan
// 2012-08-08 // 2012-08-08
if (options.edges.dashlength != undefined) {
this.constants.edges.dashlength = options.edges.dashlength;
}
if (options.edges.dashgap != undefined) {
this.constants.edges.dashgap = options.edges.dashgap;
}
if (options.edges.altdashlength != undefined) {
this.constants.edges.altdashlength = options.edges.altdashlength;
if (options.edges.dash) {
if (options.edges.dash.length != undefined) {
this.constants.edges.dash.length = options.edges.dash.length;
}
if (options.edges.dash.gap != undefined) {
this.constants.edges.dash.gap = options.edges.dash.gap;
}
if (options.edges.dash.altLength != undefined) {
this.constants.edges.dash.altLength = options.edges.dash.altLength;
}
} }
} }
@ -9242,6 +9249,10 @@ Graph.prototype.setOptions = function (options) {
} }
} }
if (options.nodes.color) {
this.constants.nodes.color = Node.parseColor(options.nodes.color);
}
/* /*
if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin; if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax; if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;

+ 4
- 4
vis.min.js
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save