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

Removed border and background options for the frame (should be done using css)

css_transitions
josdejong 11 years ago
parent
c099dcb9af
commit
73b5d8b3cd
16 changed files with 186 additions and 257 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -27
      docs/graph.html
  2. +9
    -4
      examples/graph/01_basic_usage.html
  3. +5
    -2
      examples/graph/02_random_nodes.html
  4. +8
    -3
      examples/graph/03_images.html
  5. +5
    -2
      examples/graph/04_shapes.html
  6. +7
    -7
      examples/graph/05_social_network.html
  7. +8
    -3
      examples/graph/06_groups.html
  8. +9
    -4
      examples/graph/08_selections.html
  9. +5
    -2
      examples/graph/15_custom_style.html
  10. +5
    -2
      examples/graph/16_scalable_images.html
  11. +5
    -2
      examples/graph/18_dashed_lines.html
  12. +3
    -5
      examples/graph/20_dot_language_playground.html
  13. +3
    -42
      src/graph/Graph.js
  14. +107
    -106
      test/dotparser.js
  15. +3
    -42
      vis.js
  16. +4
    -4
      vis.min.js

+ 0
- 27
docs/graph.html View File

@ -633,33 +633,6 @@ var options = {
<th>Description</th>
</tr>
<tr>
<td>backgroundColor</td>
<td>String or Object</td>
<td>"white"</td>
<td>The background color for the main area of the chart.
Can be either a simple HTML color string, for example: 'red' or '#00cc00',
or an object with optional properties stroke, strokeWidth, and fill.</td>
</tr>
<tr>
<td>backgroundColor.stroke</td>
<td>String</td>
<td>"#666"</td>
<td>The color of the chart border, as an HTML color string.</td>
</tr>
<tr>
<td>backgroundColor.strokeWidth</td>
<td>Number</td>
<td>1</td>
<td>The border width, in pixels.</td>
</tr>
<tr>
<td>backgroundColor.fill</td>
<td>String</td>
<td>"white"</td>
<td>The chart fill color, as an HTML color string.</td>
</tr>
<tr>
<td>groups</td>
<td>Object</td>

+ 9
- 4
examples/graph/01_basic_usage.html View File

@ -4,6 +4,14 @@
<title>Graph | Basic usage</title>
<script type="text/javascript" src="../../vis.js"></script>
<style type="text/css">
#mygraph {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
@ -34,10 +42,7 @@
nodes: nodes,
edges: edges
};
var options = {
width: '400px',
height: '400px'
};
var options = {};
var graph = new vis.Graph(container, data, options);
</script>

+ 5
- 2
examples/graph/02_random_nodes.html View File

@ -7,6 +7,11 @@
body {
font: 10pt sans;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
@ -70,8 +75,6 @@
edges: edges
};
var options = {
width: '600px',
height: '600px',
edges: {
length: 50
},

+ 8
- 3
examples/graph/03_images.html View File

@ -4,7 +4,14 @@
<title>Graph | Images</title>
<style type="text/css">
body {font: 10pt arial;}
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
@ -61,8 +68,6 @@
edges: edges
};
var options = {
width: '600px',
height: '600px',
stabilize: false // stabilize positions before displaying
};
graph = new vis.Graph(container, data, options);

+ 5
- 2
examples/graph/04_shapes.html View File

@ -7,6 +7,11 @@
body {
font: 10pt arial;
}
#mygraph {
width: 780px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
@ -56,8 +61,6 @@
edges: edges
};
var options = {
width: '780px',
height: '600px',
stabilize: false
};
graph = new vis.Graph(container, data, options);

+ 7
- 7
examples/graph/05_social_network.html View File

@ -7,6 +7,12 @@
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
background: #F3F3F3;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
@ -55,13 +61,7 @@
nodes: nodes,
edges: edges
};
var options = {
width: '600px',
height: '600px',
backgroundColor: {
fill: '#F3F3F3'
}
};
var options = {};
graph = new vis.Graph(container, data, options);
}
</script>

+ 8
- 3
examples/graph/06_groups.html View File

@ -4,7 +4,14 @@
<title>Graph | Groups</title>
<style>
body {font: 10pt arial;}
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
@ -124,8 +131,6 @@
edges: edges
};
var options = {
width: '600px',
height: '600px',
stabilize: false,
nodes: {
shape: 'dot'

+ 9
- 4
examples/graph/08_selections.html View File

@ -4,6 +4,14 @@
<title>Graph | Selections</title>
<script type="text/javascript" src="../../vis.js"></script>
<style type="text/css">
#mygraph {
width: 400px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
@ -35,10 +43,7 @@
nodes: nodes,
edges: edges
};
var options = {
width: '400px',
height: '400px'
};
var options = {};
graph = new vis.Graph(container, data, options);
// add event listener

+ 5
- 2
examples/graph/15_custom_style.html View File

@ -7,6 +7,11 @@
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
@ -54,8 +59,6 @@
// specify options
options = {
width: '600px',
height: '600px',
stabilize: false,
edges: {
length: 120,

+ 5
- 2
examples/graph/16_scalable_images.html View File

@ -7,6 +7,11 @@
body {
font: 10pt arial;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
@ -59,8 +64,6 @@
edges: edges
};
var options = {
width: '600px',
height: '600px',
nodes: {
widthMin: 20, // min width in pixels
widthMax: 100 // max width in pixels

+ 5
- 2
examples/graph/18_dashed_lines.html View File

@ -7,6 +7,11 @@
body {
font: 10pt sans;
}
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script>
@ -37,8 +42,6 @@
edges: edges
};
var options = {
width: '600px',
height: '600px',
edges: {
length: 200
},

+ 3
- 5
examples/graph/20_dot_language_playground.html View File

@ -21,13 +21,13 @@
}
#frame td {
padding: 10px;
height: 100%;
}
#error {
color: red;
}
#data {
float: left;
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
@ -37,6 +37,7 @@
float: left;
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
}
textarea.example {
@ -99,10 +100,7 @@
// create a graph
var container = document.getElementById('mygraph');
var options = {
width: '100%',
height: '100%'
};
var options = {};
graph = new vis.Graph(container, data, options);
}
catch (err) {

+ 3
- 42
src/graph/Graph.js View File

@ -199,11 +199,9 @@ Graph.prototype.setOptions = function (options) {
}
}
}
this._setBackgroundColor(options.backgroundColor);
}
this._setSize(this.width, this.height);
this.setSize(this.width, this.height);
this._setTranslation(0, 0);
this._setScale(1);
};
@ -265,42 +263,6 @@ Graph.prototype._create = function () {
this.containerElement.appendChild(this.frame);
};
/**
* Set the background and border styling for the graph
* @param {String | Object} backgroundColor
* @private
*/
Graph.prototype._setBackgroundColor = function(backgroundColor) {
var fill = "white";
var stroke = "lightgray";
var strokeWidth = 1;
if (typeof(backgroundColor) == "string") {
fill = backgroundColor;
stroke = "none";
strokeWidth = 0;
}
else if (typeof(backgroundColor) == "object") {
if (backgroundColor.fill != undefined) fill = backgroundColor.fill;
if (backgroundColor.stroke != undefined) stroke = backgroundColor.stroke;
if (backgroundColor.strokeWidth != undefined) strokeWidth = backgroundColor.strokeWidth;
}
else if (backgroundColor == undefined) {
// use use defaults
}
else {
throw "Unsupported type of backgroundColor";
}
this.frame.style.boxSizing = 'border-box';
this.frame.style.MozBoxSizing = 'border-box';
this.frame.style.backgroundColor = fill;
this.frame.style.borderColor = stroke;
this.frame.style.borderWidth = strokeWidth + "px";
this.frame.style.borderStyle = "solid";
};
/**
* handle on mouse down event
* @private
@ -1045,9 +1007,8 @@ Graph.prototype._getConnectionCount = function(level) {
* or "50%")
* @param {string} height Height in pixels or percentage (for example "400px"
* or "30%")
* @private
*/
Graph.prototype._setSize = function(width, height) {
Graph.prototype.setSize = function(width, height) {
this.frame.style.width = width;
this.frame.style.height = height;
@ -1428,7 +1389,7 @@ Graph.prototype._updateValueRange = function(array) {
* chart will be resized too.
*/
Graph.prototype.redraw = function() {
this._setSize(this.width, this.height);
this.setSize(this.width, this.height);
this._redraw();
};

+ 107
- 106
test/dotparser.js View File

@ -8,115 +8,116 @@ fs.readFile('test/dot.txt', function (err, data) {
var graph = dot.parseDOT(data);
assert.deepEqual(graph, {
"type": "digraph",
"id": "test_graph",
"attr": {
"rankdir": "LR",
"size": "8,5",
"font": "arial",
"attr1": "another\" attr"
},
"nodes": {
"6": {
"id": "6",
"attr": {
"shape": "circle"
}
},
"node1": {
"id": "node1",
"attr": {
"shape": "doublecircle"
}
},
"node2": {
"id": "node2",
"attr": {
"shape": "doublecircle"
}
},
"node3": {
"id": "node3",
"attr": {
"shape": "doublecircle"
}
},
"node4": {
"id": "node4",
"attr": {
"color": "red",
"shape": "circle"
}
},
"node5": {
"id": "node5",
"attr": {
"color": "blue",
"shape": "circle",
"width": 3
}
}
},
"edges": [
{
"from": "node1",
"to": "node1",
"type": "->",
"attr": {
"label": "a",
"length": 170,
"fontSize": 12
}
},
{
"from": "node2",
"to": "node3",
"type": "->",
"attr": {
"label": "b",
"length": 170,
"fontSize": 12
}
},
{
"from": "node1",
"to": "node4",
"type": "--",
"attr": {
"label": "c",
"length": 170,
"fontSize": 12
}
},
{
"from": "node3",
"to": "node4",
"type": "->",
"attr": {
"label": "d",
"length": 170,
"fontSize": 12
}
"type": "digraph",
"id": "test_graph",
"attr": {
"rankdir": "LR",
"size": "8,5",
"font": "arial",
"attr1": "another\" attr"
},
{
"from": "node4",
"to": "node5",
"type": "->",
"attr": {
"length": 170,
"fontSize": 12
"nodes": {
"6": {
"id": "6",
"attr": {
"shape": "circle"
}
},
"node1": {
"id": "node1",
"attr": {
"shape": "doublecircle"
}
},
"node2": {
"id": "node2",
"attr": {
"shape": "doublecircle"
}
},
"node3": {
"id": "node3",
"attr": {
"shape": "doublecircle"
}
},
"node4": {
"id": "node4",
"attr": {
"shape": "diamond",
"color": "red"
}
},
"node5": {
"id": "node5",
"attr": {
"shape": "square",
"color": "blue",
"width": 3
}
}
},
{
"from": "node5",
"to": "6",
"type": "->",
"attr": {
"length": 170,
"fontSize": 12
"edges": [
{
"from": "node1",
"to": "node1",
"type": "->",
"attr": {
"length": 170,
"fontSize": 12,
"label": "a"
}
},
{
"from": "node2",
"to": "node3",
"type": "->",
"attr": {
"length": 170,
"fontSize": 12,
"label": "b"
}
},
{
"from": "node1",
"to": "node4",
"type": "--",
"attr": {
"length": 170,
"fontSize": 12,
"label": "c"
}
},
{
"from": "node3",
"to": "node4",
"type": "->",
"attr": {
"length": 170,
"fontSize": 12,
"label": "d"
}
},
{
"from": "node4",
"to": "node5",
"type": "->",
"attr": {
"length": 170,
"fontSize": 12
}
},
{
"from": "node5",
"to": "6",
"type": "->",
"attr": {
"length": 170,
"fontSize": 12
}
}
}
]
});
]
}
);
});

+ 3
- 42
vis.js View File

@ -9222,11 +9222,9 @@ Graph.prototype.setOptions = function (options) {
}
}
}
this._setBackgroundColor(options.backgroundColor);
}
this._setSize(this.width, this.height);
this.setSize(this.width, this.height);
this._setTranslation(0, 0);
this._setScale(1);
};
@ -9288,42 +9286,6 @@ Graph.prototype._create = function () {
this.containerElement.appendChild(this.frame);
};
/**
* Set the background and border styling for the graph
* @param {String | Object} backgroundColor
* @private
*/
Graph.prototype._setBackgroundColor = function(backgroundColor) {
var fill = "white";
var stroke = "lightgray";
var strokeWidth = 1;
if (typeof(backgroundColor) == "string") {
fill = backgroundColor;
stroke = "none";
strokeWidth = 0;
}
else if (typeof(backgroundColor) == "object") {
if (backgroundColor.fill != undefined) fill = backgroundColor.fill;
if (backgroundColor.stroke != undefined) stroke = backgroundColor.stroke;
if (backgroundColor.strokeWidth != undefined) strokeWidth = backgroundColor.strokeWidth;
}
else if (backgroundColor == undefined) {
// use use defaults
}
else {
throw "Unsupported type of backgroundColor";
}
this.frame.style.boxSizing = 'border-box';
this.frame.style.MozBoxSizing = 'border-box';
this.frame.style.backgroundColor = fill;
this.frame.style.borderColor = stroke;
this.frame.style.borderWidth = strokeWidth + "px";
this.frame.style.borderStyle = "solid";
};
/**
* handle on mouse down event
* @private
@ -10068,9 +10030,8 @@ Graph.prototype._getConnectionCount = function(level) {
* or "50%")
* @param {string} height Height in pixels or percentage (for example "400px"
* or "30%")
* @private
*/
Graph.prototype._setSize = function(width, height) {
Graph.prototype.setSize = function(width, height) {
this.frame.style.width = width;
this.frame.style.height = height;
@ -10451,7 +10412,7 @@ Graph.prototype._updateValueRange = function(array) {
* chart will be resized too.
*/
Graph.prototype.redraw = function() {
this._setSize(this.width, this.height);
this.setSize(this.width, this.height);
this._redraw();
};

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


Write Preview
Loading…
Cancel
Save