Browse Source

Manual Merge branch 'customize-tooltip-styling' of https://github.com/kannonboy/vis into kannonboy-customize-tooltip-styling

Conflicts:
	docs/graph.html
	src/graph/Graph.js
css_transitions
Alex de Mulder 10 years ago
parent
commit
2c8fb0e44c
9 changed files with 332 additions and 165 deletions
  1. +1
    -0
      .gitignore
  2. +125
    -77
      dist/vis.js
  3. +10
    -10
      dist/vis.min.js
  4. +73
    -3
      docs/graph.html
  5. +24
    -3
      src/graph/Graph.js
  6. +1
    -1
      src/graph/Groups.js
  7. +1
    -58
      src/graph/Node.js
  8. +40
    -13
      src/graph/Popup.js
  9. +57
    -0
      src/util.js

+ 1
- 0
.gitignore View File

@ -1,4 +1,5 @@
.idea .idea
*.iml
node_modules node_modules
.project .project
.settings/.jsdtscope .settings/.jsdtscope

+ 125
- 77
dist/vis.js View File

@ -4,8 +4,8 @@
* *
* A dynamic, browser-based visualization library. * A dynamic, browser-based visualization library.
* *
* @version @@version
* @date @@date
* @version 0.7.3-SNAPSHOT
* @date 2014-04-15
* *
* @license * @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -1012,6 +1012,63 @@ util.GiveHex = function GiveHex(Dec)
return Value; return Value;
} }
/**
* Parse a color property into an object with border, background, and
* highlight colors
* @param {Object | String} color
* @return {Object} colorObject
*/
util.parseColor = function(color) {
var c;
if (util.isString(color)) {
if (util.isValidHex(color)) {
var hsv = util.hexToHSV(color);
var lighterColorHSV = {h:hsv.h,s:hsv.s * 0.45,v:Math.min(1,hsv.v * 1.05)};
var darkerColorHSV = {h:hsv.h,s:Math.min(1,hsv.v * 1.25),v:hsv.v*0.6};
var darkerColorHex = util.HSVToHex(darkerColorHSV.h ,darkerColorHSV.h ,darkerColorHSV.v);
var lighterColorHex = util.HSVToHex(lighterColorHSV.h,lighterColorHSV.s,lighterColorHSV.v);
c = {
background: color,
border:darkerColorHex,
highlight: {
background:lighterColorHex,
border:darkerColorHex
}
};
}
else {
c = {
background:color,
border:color,
highlight: {
background:color,
border:color
}
};
}
}
else {
c = {};
c.background = color.background || 'white';
c.border = color.border || c.background;
if (util.isString(color.highlight)) {
c.highlight = {
border: color.highlight,
background: color.highlight
}
}
else {
c.highlight = {};
c.highlight.background = color.highlight && color.highlight.background || c.background;
c.highlight.border = color.highlight && color.highlight.border || c.border;
}
}
return c;
};
/** /**
* http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php * http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php
* *
@ -9588,7 +9645,7 @@ Node.prototype.setProperties = function(properties, constants) {
if (properties.shape !== undefined) {this.shape = properties.shape;} if (properties.shape !== undefined) {this.shape = properties.shape;}
if (properties.image !== undefined) {this.image = properties.image;} if (properties.image !== undefined) {this.image = properties.image;}
if (properties.radius !== undefined) {this.radius = properties.radius;} if (properties.radius !== undefined) {this.radius = properties.radius;}
if (properties.color !== undefined) {this.color = Node.parseColor(properties.color);}
if (properties.color !== undefined) {this.color = util.parseColor(properties.color);}
if (properties.fontColor !== undefined) {this.fontColor = properties.fontColor;} if (properties.fontColor !== undefined) {this.fontColor = properties.fontColor;}
if (properties.fontSize !== undefined) {this.fontSize = properties.fontSize;} if (properties.fontSize !== undefined) {this.fontSize = properties.fontSize;}
@ -9632,63 +9689,6 @@ Node.prototype.setProperties = function(properties, constants) {
this._reset(); this._reset();
}; };
/**
* Parse a color property into an object with border, background, and
* hightlight colors
* @param {Object | String} color
* @return {Object} colorObject
*/
Node.parseColor = function(color) {
var c;
if (util.isString(color)) {
if (util.isValidHex(color)) {
var hsv = util.hexToHSV(color);
var lighterColorHSV = {h:hsv.h,s:hsv.s * 0.45,v:Math.min(1,hsv.v * 1.05)};
var darkerColorHSV = {h:hsv.h,s:Math.min(1,hsv.v * 1.25),v:hsv.v*0.6};
var darkerColorHex = util.HSVToHex(darkerColorHSV.h ,darkerColorHSV.h ,darkerColorHSV.v);
var lighterColorHex = util.HSVToHex(lighterColorHSV.h,lighterColorHSV.s,lighterColorHSV.v);
c = {
background: color,
border:darkerColorHex,
highlight: {
background:lighterColorHex,
border:darkerColorHex
}
};
}
else {
c = {
background:color,
border:color,
highlight: {
background:color,
border:color
}
};
}
}
else {
c = {};
c.background = color.background || 'white';
c.border = color.border || c.background;
if (util.isString(color.highlight)) {
c.highlight = {
border: color.highlight,
background: color.highlight
}
}
else {
c.highlight = {};
c.highlight.background = color.highlight && color.highlight.background || c.background;
c.highlight.border = color.highlight && color.highlight.border || c.border;
}
}
return c;
};
/** /**
* select this node * select this node
*/ */
@ -11211,14 +11211,39 @@ Edge.prototype.positionBezierNode = function() {
* @param {Number} [x] * @param {Number} [x]
* @param {Number} [y] * @param {Number} [y]
* @param {String} [text] * @param {String} [text]
* @param {Object} [style] An object containing borderColor,
* backgroundColor, etc.
*/ */
function Popup(container, x, y, text) {
function Popup(container, x, y, text, style) {
if (container) { if (container) {
this.container = container; this.container = container;
} }
else { else {
this.container = document.body; this.container = document.body;
} }
// x, y and text are optional, see if a style object was passed in their place
if (style === undefined) {
if (typeof x === "object") {
style = x;
x = undefined;
} else if (typeof text === "object") {
style = text;
text = undefined;
} else {
// for backwards compatibility, in case clients other than Graph are creating Popup directly
style = {
fontColor: 'black',
fontSize: 14, // px
fontFace: 'verdana',
color: {
border: '#666',
background: '#FFFFC6'
}
}
}
}
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
this.padding = 5; this.padding = 5;
@ -11232,18 +11257,20 @@ function Popup(container, x, y, text) {
// create the frame // create the frame
this.frame = document.createElement("div"); this.frame = document.createElement("div");
var style = this.frame.style;
style.position = "absolute";
style.visibility = "hidden";
style.border = "1px solid #666";
style.color = "black";
style.padding = this.padding + "px";
style.backgroundColor = "#FFFFC6";
style.borderRadius = "3px";
style.MozBorderRadius = "3px";
style.WebkitBorderRadius = "3px";
style.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
style.whiteSpace = "nowrap";
var styleAttr = this.frame.style;
styleAttr.position = "absolute";
styleAttr.visibility = "hidden";
styleAttr.border = "1px solid " + style.color.border;
styleAttr.color = style.fontColor;
styleAttr.fontSize = style.fontSize;
styleAttr.fontFamily = style.fontFace;
styleAttr.padding = this.padding + "px";
styleAttr.backgroundColor = style.color.background;
styleAttr.borderRadius = "3px";
styleAttr.MozBorderRadius = "3px";
styleAttr.WebkitBorderRadius = "3px";
styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
styleAttr.whiteSpace = "nowrap";
this.container.appendChild(this.frame); this.container.appendChild(this.frame);
} }
@ -11387,7 +11414,7 @@ Groups.prototype.get = function (groupname) {
Groups.prototype.add = function (groupname, style) { Groups.prototype.add = function (groupname, style) {
this.groups[groupname] = style; this.groups[groupname] = style;
if (style.color) { if (style.color) {
style.color = Node.parseColor(style.color);
style.color = util.parseColor(style.color);
} }
return style; return style;
}; };
@ -16189,6 +16216,16 @@ function Graph (container, data, options) {
editBoundError:"No edit function has been bound to this button.", editBoundError:"No edit function has been bound to this button.",
deleteError:"The function for delete does not support two arguments (data, callback).", deleteError:"The function for delete does not support two arguments (data, callback).",
deleteClusterError:"Clusters cannot be deleted." deleteClusterError:"Clusters cannot be deleted."
},
tooltip: {
delay: 300,
fontColor: 'black',
fontSize: 14, // px
fontFace: 'verdana',
color: {
border: '#666',
background: '#FFFFC6'
}
} }
}; };
this.editMode = this.constants.dataManipulation.initiallyVisible; this.editMode = this.constants.dataManipulation.initiallyVisible;
@ -16680,7 +16717,7 @@ Graph.prototype.setOptions = function (options) {
} }
if (options.nodes.color) { if (options.nodes.color) {
this.constants.nodes.color = Node.parseColor(options.nodes.color);
this.constants.nodes.color = util.parseColor(options.nodes.color);
} }
/* /*
@ -16696,6 +16733,17 @@ Graph.prototype.setOptions = function (options) {
} }
} }
} }
if (options.tooltip) {
for (prop in options.tooltip) {
if (options.tooltip.hasOwnProperty(prop)) {
this.constants.tooltip[prop] = options.tooltip[prop];
}
}
if (options.tooltip.color) {
this.constants.tooltip.color = util.parseColor(options.tooltip.color);
}
}
} }
@ -17139,7 +17187,7 @@ Graph.prototype._onMouseMoveTitle = function (event) {
clearInterval(this.popupTimer); // stop any running calculationTimer clearInterval(this.popupTimer); // stop any running calculationTimer
} }
if (!this.drag.dragging) { if (!this.drag.dragging) {
this.popupTimer = setTimeout(checkShow, 300);
this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
} }
}; };
@ -17196,7 +17244,7 @@ Graph.prototype._checkShowPopup = function (pointer) {
if (this.popupNode != lastPopupNode) { if (this.popupNode != lastPopupNode) {
var me = this; var me = this;
if (!me.popup) { if (!me.popup) {
me.popup = new Popup(me.frame);
me.popup = new Popup(me.frame, me.constants.tooltip);
} }
// adjust a small offset such that the mouse cursor is located in the // adjust a small offset such that the mouse cursor is located in the

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


+ 73
- 3
docs/graph.html View File

@ -60,13 +60,14 @@
<li><a href="#Nodes_configuration">Nodes</a></li> <li><a href="#Nodes_configuration">Nodes</a></li>
<li><a href="#Edges_configuration">Edges</a></li> <li><a href="#Edges_configuration">Edges</a></li>
<li><a href="#Groups_configuration">Groups</a></li> <li><a href="#Groups_configuration">Groups</a></li>
<li><a href="#Physics">Physics</a></li>
<li><a href="#Data_manipulation">Data manipulation</a></li>
<li><a href="#Clustering">Clustering</a></li>
<li><a href="#Physics">Physics</a></li>
<li><a href="#Data_manipulation">Data manipulation</a></li>
<li><a href="#Clustering">Clustering</a></li>
<li><a href="#Navigation_controls">Navigation controls</a></li> <li><a href="#Navigation_controls">Navigation controls</a></li>
<li><a href="#Keyboard_navigation">Keyboard navigation</a></li> <li><a href="#Keyboard_navigation">Keyboard navigation</a></li>
<li><a href="#Hierarchical_layout">Hierarchical layout</a></li> <li><a href="#Hierarchical_layout">Hierarchical layout</a></li>
<li><a href="#Localization">Localization</a></li> <li><a href="#Localization">Localization</a></li>
<li><a href="#Tooltips">Tooltips</a></li>
</ul> </ul>
</li> </li>
<li><a href="#Methods">Methods</a></li> <li><a href="#Methods">Methods</a></li>
@ -1892,6 +1893,75 @@ var options: {
</td> </td>
</tr> </tr>
</table> </table>
<h3 id="Tooltips">Tooltips</h3>
<p>
The behaviour and style of the tooltips used to display node and edge title attributes can be customized.
</p>
<pre class="prettyprint">
// tooltip behaviour and style options
var options: {
tooltip: {
delay: 300,
fontColor: "black",
fontSize: 14, // px
fontFace: "verdana",
color: {
border: "#666",
background: "#FFFFC6"
}
}
}
</pre>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>delay</td>
<td>Number</td>
<td>300</td>
<td>Time in milliseconds a user must hover over a node or edge before a tooltip appears.</td>
</tr>
<tr>
<td>fontColor</td>
<td>String</td>
<td>"black"</td>
<td>Default color for tooltip text.</td>
</tr>
<tr>
<td>fontSize</td>
<td>Number</td>
<td>14</td>
<td>Size in pixels of tooltip text.</td>
</tr>
<tr>
<td>fontFace</td>
<td>String</td>
<td>"verdana"</td>
<td>Font family to used for tooltip text.</td>
</tr>
<tr>
<td>color.background</td>
<td>String</td>
<td>"#FFFFC6"</td>
<td>Background color for the node.</td>
</tr>
<tr>
<td>color.border</td>
<td>String</td>
<td>"#666"</td>
<td>Border color for the node.</td>
</tr>
</table>
<h2 id="Methods">Methods</h2> <h2 id="Methods">Methods</h2>
<p> <p>
Graph supports the following methods. Graph supports the following methods.

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

@ -168,6 +168,16 @@ function Graph (container, data, options) {
editBoundError:"No edit function has been bound to this button.", editBoundError:"No edit function has been bound to this button.",
deleteError:"The function for delete does not support two arguments (data, callback).", deleteError:"The function for delete does not support two arguments (data, callback).",
deleteClusterError:"Clusters cannot be deleted." deleteClusterError:"Clusters cannot be deleted."
},
tooltip: {
delay: 300,
fontColor: 'black',
fontSize: 14, // px
fontFace: 'verdana',
color: {
border: '#666',
background: '#FFFFC6'
}
} }
}; };
this.editMode = this.constants.dataManipulation.initiallyVisible; this.editMode = this.constants.dataManipulation.initiallyVisible;
@ -659,7 +669,7 @@ Graph.prototype.setOptions = function (options) {
} }
if (options.nodes.color) { if (options.nodes.color) {
this.constants.nodes.color = Node.parseColor(options.nodes.color);
this.constants.nodes.color = util.parseColor(options.nodes.color);
} }
/* /*
@ -675,6 +685,17 @@ Graph.prototype.setOptions = function (options) {
} }
} }
} }
if (options.tooltip) {
for (prop in options.tooltip) {
if (options.tooltip.hasOwnProperty(prop)) {
this.constants.tooltip[prop] = options.tooltip[prop];
}
}
if (options.tooltip.color) {
this.constants.tooltip.color = util.parseColor(options.tooltip.color);
}
}
} }
@ -1118,7 +1139,7 @@ Graph.prototype._onMouseMoveTitle = function (event) {
clearInterval(this.popupTimer); // stop any running calculationTimer clearInterval(this.popupTimer); // stop any running calculationTimer
} }
if (!this.drag.dragging) { if (!this.drag.dragging) {
this.popupTimer = setTimeout(checkShow, 300);
this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
} }
}; };
@ -1175,7 +1196,7 @@ Graph.prototype._checkShowPopup = function (pointer) {
if (this.popupNode != lastPopupNode) { if (this.popupNode != lastPopupNode) {
var me = this; var me = this;
if (!me.popup) { if (!me.popup) {
me.popup = new Popup(me.frame);
me.popup = new Popup(me.frame, me.constants.tooltip);
} }
// adjust a small offset such that the mouse cursor is located in the // adjust a small offset such that the mouse cursor is located in the

+ 1
- 1
src/graph/Groups.js View File

@ -74,7 +74,7 @@ Groups.prototype.get = function (groupname) {
Groups.prototype.add = function (groupname, style) { Groups.prototype.add = function (groupname, style) {
this.groups[groupname] = style; this.groups[groupname] = style;
if (style.color) { if (style.color) {
style.color = Node.parseColor(style.color);
style.color = util.parseColor(style.color);
} }
return style; return style;
}; };

+ 1
- 58
src/graph/Node.js View File

@ -177,7 +177,7 @@ Node.prototype.setProperties = function(properties, constants) {
if (properties.shape !== undefined) {this.shape = properties.shape;} if (properties.shape !== undefined) {this.shape = properties.shape;}
if (properties.image !== undefined) {this.image = properties.image;} if (properties.image !== undefined) {this.image = properties.image;}
if (properties.radius !== undefined) {this.radius = properties.radius;} if (properties.radius !== undefined) {this.radius = properties.radius;}
if (properties.color !== undefined) {this.color = Node.parseColor(properties.color);}
if (properties.color !== undefined) {this.color = util.parseColor(properties.color);}
if (properties.fontColor !== undefined) {this.fontColor = properties.fontColor;} if (properties.fontColor !== undefined) {this.fontColor = properties.fontColor;}
if (properties.fontSize !== undefined) {this.fontSize = properties.fontSize;} if (properties.fontSize !== undefined) {this.fontSize = properties.fontSize;}
@ -221,63 +221,6 @@ Node.prototype.setProperties = function(properties, constants) {
this._reset(); this._reset();
}; };
/**
* Parse a color property into an object with border, background, and
* hightlight colors
* @param {Object | String} color
* @return {Object} colorObject
*/
Node.parseColor = function(color) {
var c;
if (util.isString(color)) {
if (util.isValidHex(color)) {
var hsv = util.hexToHSV(color);
var lighterColorHSV = {h:hsv.h,s:hsv.s * 0.45,v:Math.min(1,hsv.v * 1.05)};
var darkerColorHSV = {h:hsv.h,s:Math.min(1,hsv.v * 1.25),v:hsv.v*0.6};
var darkerColorHex = util.HSVToHex(darkerColorHSV.h ,darkerColorHSV.h ,darkerColorHSV.v);
var lighterColorHex = util.HSVToHex(lighterColorHSV.h,lighterColorHSV.s,lighterColorHSV.v);
c = {
background: color,
border:darkerColorHex,
highlight: {
background:lighterColorHex,
border:darkerColorHex
}
};
}
else {
c = {
background:color,
border:color,
highlight: {
background:color,
border:color
}
};
}
}
else {
c = {};
c.background = color.background || 'white';
c.border = color.border || c.background;
if (util.isString(color.highlight)) {
c.highlight = {
border: color.highlight,
background: color.highlight
}
}
else {
c.highlight = {};
c.highlight.background = color.highlight && color.highlight.background || c.background;
c.highlight.border = color.highlight && color.highlight.border || c.border;
}
}
return c;
};
/** /**
* select this node * select this node
*/ */

+ 40
- 13
src/graph/Popup.js View File

@ -4,14 +4,39 @@
* @param {Number} [x] * @param {Number} [x]
* @param {Number} [y] * @param {Number} [y]
* @param {String} [text] * @param {String} [text]
* @param {Object} [style] An object containing borderColor,
* backgroundColor, etc.
*/ */
function Popup(container, x, y, text) {
function Popup(container, x, y, text, style) {
if (container) { if (container) {
this.container = container; this.container = container;
} }
else { else {
this.container = document.body; this.container = document.body;
} }
// x, y and text are optional, see if a style object was passed in their place
if (style === undefined) {
if (typeof x === "object") {
style = x;
x = undefined;
} else if (typeof text === "object") {
style = text;
text = undefined;
} else {
// for backwards compatibility, in case clients other than Graph are creating Popup directly
style = {
fontColor: 'black',
fontSize: 14, // px
fontFace: 'verdana',
color: {
border: '#666',
background: '#FFFFC6'
}
}
}
}
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
this.padding = 5; this.padding = 5;
@ -25,18 +50,20 @@ function Popup(container, x, y, text) {
// create the frame // create the frame
this.frame = document.createElement("div"); this.frame = document.createElement("div");
var style = this.frame.style;
style.position = "absolute";
style.visibility = "hidden";
style.border = "1px solid #666";
style.color = "black";
style.padding = this.padding + "px";
style.backgroundColor = "#FFFFC6";
style.borderRadius = "3px";
style.MozBorderRadius = "3px";
style.WebkitBorderRadius = "3px";
style.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
style.whiteSpace = "nowrap";
var styleAttr = this.frame.style;
styleAttr.position = "absolute";
styleAttr.visibility = "hidden";
styleAttr.border = "1px solid " + style.color.border;
styleAttr.color = style.fontColor;
styleAttr.fontSize = style.fontSize;
styleAttr.fontFamily = style.fontFace;
styleAttr.padding = this.padding + "px";
styleAttr.backgroundColor = style.color.background;
styleAttr.borderRadius = "3px";
styleAttr.MozBorderRadius = "3px";
styleAttr.WebkitBorderRadius = "3px";
styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
styleAttr.whiteSpace = "nowrap";
this.container.appendChild(this.frame); this.container.appendChild(this.frame);
} }

+ 57
- 0
src/util.js View File

@ -702,6 +702,63 @@ util.GiveHex = function GiveHex(Dec)
return Value; return Value;
} }
/**
* Parse a color property into an object with border, background, and
* highlight colors
* @param {Object | String} color
* @return {Object} colorObject
*/
util.parseColor = function(color) {
var c;
if (util.isString(color)) {
if (util.isValidHex(color)) {
var hsv = util.hexToHSV(color);
var lighterColorHSV = {h:hsv.h,s:hsv.s * 0.45,v:Math.min(1,hsv.v * 1.05)};
var darkerColorHSV = {h:hsv.h,s:Math.min(1,hsv.v * 1.25),v:hsv.v*0.6};
var darkerColorHex = util.HSVToHex(darkerColorHSV.h ,darkerColorHSV.h ,darkerColorHSV.v);
var lighterColorHex = util.HSVToHex(lighterColorHSV.h,lighterColorHSV.s,lighterColorHSV.v);
c = {
background: color,
border:darkerColorHex,
highlight: {
background:lighterColorHex,
border:darkerColorHex
}
};
}
else {
c = {
background:color,
border:color,
highlight: {
background:color,
border:color
}
};
}
}
else {
c = {};
c.background = color.background || 'white';
c.border = color.border || c.background;
if (util.isString(color.highlight)) {
c.highlight = {
border: color.highlight,
background: color.highlight
}
}
else {
c.highlight = {};
c.highlight.background = color.highlight && color.highlight.background || c.background;
c.highlight.border = color.highlight && color.highlight.border || c.border;
}
}
return c;
};
/** /**
* http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php * http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php
* *

Loading…
Cancel
Save