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
Unified 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> <th>Description</th>
</tr> </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> <tr>
<td>groups</td> <td>groups</td>
<td>Object</td> <td>Object</td>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -21,13 +21,13 @@
} }
#frame td { #frame td {
padding: 10px; padding: 10px;
height: 100%;
} }
#error { #error {
color: red; color: red;
} }
#data { #data {
float: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
@ -37,6 +37,7 @@
float: left; float: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #d3d3d3;
} }
textarea.example { textarea.example {
@ -99,10 +100,7 @@
// create a graph // create a graph
var container = document.getElementById('mygraph'); var container = document.getElementById('mygraph');
var options = {
width: '100%',
height: '100%'
};
var options = {};
graph = new vis.Graph(container, data, options); graph = new vis.Graph(container, data, options);
} }
catch (err) { 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._setTranslation(0, 0);
this._setScale(1); this._setScale(1);
}; };
@ -265,42 +263,6 @@ Graph.prototype._create = function () {
this.containerElement.appendChild(this.frame); 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 * handle on mouse down event
* @private * @private
@ -1045,9 +1007,8 @@ Graph.prototype._getConnectionCount = function(level) {
* or "50%") * or "50%")
* @param {string} height Height in pixels or percentage (for example "400px" * @param {string} height Height in pixels or percentage (for example "400px"
* or "30%") * or "30%")
* @private
*/ */
Graph.prototype._setSize = function(width, height) {
Graph.prototype.setSize = function(width, height) {
this.frame.style.width = width; this.frame.style.width = width;
this.frame.style.height = height; this.frame.style.height = height;
@ -1428,7 +1389,7 @@ Graph.prototype._updateValueRange = function(array) {
* chart will be resized too. * chart will be resized too.
*/ */
Graph.prototype.redraw = function() { Graph.prototype.redraw = function() {
this._setSize(this.width, this.height);
this.setSize(this.width, this.height);
this._redraw(); 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); var graph = dot.parseDOT(data);
assert.deepEqual(graph, { 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._setTranslation(0, 0);
this._setScale(1); this._setScale(1);
}; };
@ -9288,42 +9286,6 @@ Graph.prototype._create = function () {
this.containerElement.appendChild(this.frame); 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 * handle on mouse down event
* @private * @private
@ -10068,9 +10030,8 @@ Graph.prototype._getConnectionCount = function(level) {
* or "50%") * or "50%")
* @param {string} height Height in pixels or percentage (for example "400px" * @param {string} height Height in pixels or percentage (for example "400px"
* or "30%") * or "30%")
* @private
*/ */
Graph.prototype._setSize = function(width, height) {
Graph.prototype.setSize = function(width, height) {
this.frame.style.width = width; this.frame.style.width = width;
this.frame.style.height = height; this.frame.style.height = height;
@ -10451,7 +10412,7 @@ Graph.prototype._updateValueRange = function(array) {
* chart will be resized too. * chart will be resized too.
*/ */
Graph.prototype.redraw = function() { Graph.prototype.redraw = function() {
this._setSize(this.width, this.height);
this.setSize(this.width, this.height);
this._redraw(); this._redraw();
}; };

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


Write Preview
Loading…
Cancel
Save