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

Refactored more code from `graph` to `network`

css_transitions
jos 10 years ago
parent
a5dd92d349
commit
942de0df42
15 changed files with 194 additions and 249 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +29
    -29
      dist/vis.css
  2. +62
    -86
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +8
    -8
      dist/vis.min.js
  5. +0
    -7
      docs/graph2d.html
  6. +3
    -3
      examples/Network/15_dot_language_playground.html
  7. +5
    -5
      src/graph3d/Graph3d.js
  8. +1
    -1
      src/network/Network.js
  9. +18
    -18
      src/network/css/network-manipulation.css
  10. +11
    -11
      src/network/css/network-navigation.css
  11. +2
    -2
      src/network/networkMixins/ClusterMixin.js
  12. +44
    -44
      src/network/networkMixins/ManipulationMixin.js
  13. +6
    -6
      src/network/networkMixins/MixinLoader.js
  14. +4
    -4
      src/network/networkMixins/NavigationMixin.js
  15. +0
    -24
      src/timeline/Graph2d.js

+ 29
- 29
dist/vis.css View File

@ -510,7 +510,7 @@
div.graph-manipulationDiv {
div.network-manipulationDiv {
border-width:0px; border-width:0px;
border-bottom: 1px; border-bottom: 1px;
border-style:solid; border-style:solid;
@ -530,14 +530,14 @@ div.graph-manipulationDiv {
position:absolute; position:absolute;
} }
div.graph-manipulation-editMode {
div.network-manipulation-editMode {
height:30px; height:30px;
z-index:10; z-index:10;
position:absolute; position:absolute;
margin-top:20px; margin-top:20px;
} }
div.graph-manipulation-closeDiv {
div.network-manipulation-closeDiv {
height:30px; height:30px;
width:30px; width:30px;
z-index:11; z-index:11;
@ -556,7 +556,7 @@ div.graph-manipulation-closeDiv {
user-select: none; user-select: none;
} }
span.graph-manipulationUI {
span.network-manipulationUI {
font-family: verdana; font-family: verdana;
font-size: 12px; font-size: 12px;
-moz-border-radius: 15px; -moz-border-radius: 15px;
@ -577,68 +577,68 @@ span.graph-manipulationUI {
user-select: none; user-select: none;
} }
span.graph-manipulationUI:hover {
span.network-manipulationUI:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
} }
span.graph-manipulationUI:active {
span.network-manipulationUI:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
} }
span.graph-manipulationUI.back {
span.network-manipulationUI.back {
background-image: url("img/network/backIcon.png"); background-image: url("img/network/backIcon.png");
} }
span.graph-manipulationUI.none:hover {
span.network-manipulationUI.none:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
cursor: default; cursor: default;
} }
span.graph-manipulationUI.none:active {
span.network-manipulationUI.none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
} }
span.graph-manipulationUI.none {
span.network-manipulationUI.none {
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
} }
span.graph-manipulationUI.notification{
span.network-manipulationUI.notification{
margin: 2px; margin: 2px;
font-weight: bold; font-weight: bold;
} }
span.graph-manipulationUI.add {
span.network-manipulationUI.add {
background-image: url("img/network/addNodeIcon.png"); background-image: url("img/network/addNodeIcon.png");
} }
span.graph-manipulationUI.edit {
span.network-manipulationUI.edit {
background-image: url("img/network/editIcon.png"); background-image: url("img/network/editIcon.png");
} }
span.graph-manipulationUI.edit.editmode {
span.network-manipulationUI.edit.editmode {
background-color: #fcfcfc; background-color: #fcfcfc;
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
border-color: #cccccc; border-color: #cccccc;
} }
span.graph-manipulationUI.connect {
span.network-manipulationUI.connect {
background-image: url("img/network/connectIcon.png"); background-image: url("img/network/connectIcon.png");
} }
span.graph-manipulationUI.delete {
span.network-manipulationUI.delete {
background-image: url("img/network/deleteIcon.png"); background-image: url("img/network/deleteIcon.png");
} }
/* top right bottom left */ /* top right bottom left */
span.graph-manipulationLabel {
span.network-manipulationLabel {
margin: 0px 0px 0px 23px; margin: 0px 0px 0px 23px;
line-height: 25px; line-height: 25px;
} }
div.graph-seperatorLine {
div.network-seperatorLine {
display:inline-block; display:inline-block;
width:1px; width:1px;
height:20px; height:20px;
background-color: #bdbdbd; background-color: #bdbdbd;
margin: 5px 7px 0px 15px; margin: 5px 7px 0px 15px;
} }
div.graph-navigation {
div.network-navigation {
width:34px; width:34px;
height:34px; height:34px;
z-index:10; z-index:10;
@ -657,49 +657,49 @@ div.graph-navigation {
user-select: none; user-select: none;
} }
div.graph-navigation:hover {
div.network-navigation:hover {
box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30); box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
} }
div.graph-navigation:active {
div.network-navigation:active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95); box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
} }
div.graph-navigation.active {
div.network-navigation.active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95); box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
} }
div.graph-navigation.up {
div.network-navigation.up {
background-image: url("img/network/upArrow.png"); background-image: url("img/network/upArrow.png");
bottom:50px; bottom:50px;
left:55px; left:55px;
} }
div.graph-navigation.down {
div.network-navigation.down {
background-image: url("img/network/downArrow.png"); background-image: url("img/network/downArrow.png");
bottom:10px; bottom:10px;
left:55px; left:55px;
} }
div.graph-navigation.left {
div.network-navigation.left {
background-image: url("img/network/leftArrow.png"); background-image: url("img/network/leftArrow.png");
bottom:10px; bottom:10px;
left:15px; left:15px;
} }
div.graph-navigation.right {
div.network-navigation.right {
background-image: url("img/network/rightArrow.png"); background-image: url("img/network/rightArrow.png");
bottom:10px; bottom:10px;
left:95px; left:95px;
} }
div.graph-navigation.zoomIn {
div.network-navigation.zoomIn {
background-image: url("img/network/plus.png"); background-image: url("img/network/plus.png");
bottom:10px; bottom:10px;
right:15px; right:15px;
} }
div.graph-navigation.zoomOut {
div.network-navigation.zoomOut {
background-image: url("img/network/minus.png"); background-image: url("img/network/minus.png");
bottom:10px; bottom:10px;
right:55px; right:55px;
} }
div.graph-navigation.zoomExtends {
div.network-navigation.zoomExtends {
background-image: url("img/network/zoomExtends.png"); background-image: url("img/network/zoomExtends.png");
bottom:50px; bottom:50px;
right:15px; right:15px;

+ 62
- 86
dist/vis.js View File

@ -10812,25 +10812,6 @@ Graph2d.prototype.getItemRange = function() {
}; };
}; };
/**
* Set selected items by their id. Replaces the current selection
* Unknown id's are silently ignored.
* @param {Array} [ids] An array with zero or more id's of the items to be
* selected. If ids is an empty array, all items will be
* unselected.
*/
Graph2d.prototype.setSelection = function(ids) {
this.linegraph && this.linegraph.setSelection(ids);
};
/**
* Get the selected items by their id
* @return {Array} ids The ids of the selected items
*/
Graph2d.prototype.getSelection = function() {
return this.linegraph && this.linegraph.getSelection() || [];
};
/** /**
* Set the visible window. Both parameters are optional, you can change only * Set the visible window. Both parameters are optional, you can change only
* start or only end. Syntax: * start or only end. Syntax:
@ -11005,11 +10986,6 @@ Graph2d.prototype.redraw = function() {
} }
}; };
// TODO: deprecated since version 1.1.0, remove some day
Graph2d.prototype.repaint = function () {
throw new Error('Function repaint is deprecated. Use redraw instead.');
};
/** /**
* Convert a position on screen (pixels) to a datetime * Convert a position on screen (pixels) to a datetime
* @param {int} x Position on the screen in pixels * @param {int} x Position on the screen in pixels
@ -16117,9 +16093,9 @@ var manipulationMixin = {
*/ */
_toggleEditMode : function() { _toggleEditMode : function() {
this.editMode = !this.editMode; this.editMode = !this.editMode;
var toolbar = document.getElementById("graph-manipulationDiv");
var closeDiv = document.getElementById("graph-manipulation-closeDiv");
var editModeDiv = document.getElementById("graph-manipulation-editMode");
var toolbar = document.getElementById("network-manipulationDiv");
var closeDiv = document.getElementById("network-manipulation-closeDiv");
var editModeDiv = document.getElementById("network-manipulation-editMode");
if (this.editMode == true) { if (this.editMode == true) {
toolbar.style.display="block"; toolbar.style.display="block";
closeDiv.style.display="block"; closeDiv.style.display="block";
@ -16167,49 +16143,49 @@ var manipulationMixin = {
} }
// add the icons to the manipulator div // add the icons to the manipulator div
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='graph-manipulationUI add' id='graph-manipulate-addNode'>" +
"<span class='graph-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI connect' id='graph-manipulate-connectNode'>" +
"<span class='graph-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
"<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
this.manipulationDiv.innerHTML += "" + this.manipulationDiv.innerHTML += "" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI edit' id='graph-manipulate-editNode'>" +
"<span class='graph-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
} }
else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) { else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
this.manipulationDiv.innerHTML += "" + this.manipulationDiv.innerHTML += "" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI edit' id='graph-manipulate-editEdge'>" +
"<span class='graph-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
} }
if (this._selectionIsEmpty() == false) { if (this._selectionIsEmpty() == false) {
this.manipulationDiv.innerHTML += "" + this.manipulationDiv.innerHTML += "" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI delete' id='graph-manipulate-delete'>" +
"<span class='graph-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
} }
// bind the icons // bind the icons
var addNodeButton = document.getElementById("graph-manipulate-addNode");
var addNodeButton = document.getElementById("network-manipulate-addNode");
addNodeButton.onclick = this._createAddNodeToolbar.bind(this); addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
var addEdgeButton = document.getElementById("graph-manipulate-connectNode");
var addEdgeButton = document.getElementById("network-manipulate-connectNode");
addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this); addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
var editButton = document.getElementById("graph-manipulate-editNode");
var editButton = document.getElementById("network-manipulate-editNode");
editButton.onclick = this._editNode.bind(this); editButton.onclick = this._editNode.bind(this);
} }
else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) { else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
var editButton = document.getElementById("graph-manipulate-editEdge");
var editButton = document.getElementById("network-manipulate-editEdge");
editButton.onclick = this._createEditEdgeToolbar.bind(this); editButton.onclick = this._createEditEdgeToolbar.bind(this);
} }
if (this._selectionIsEmpty() == false) { if (this._selectionIsEmpty() == false) {
var deleteButton = document.getElementById("graph-manipulate-delete");
var deleteButton = document.getElementById("network-manipulate-delete");
deleteButton.onclick = this._deleteSelected.bind(this); deleteButton.onclick = this._deleteSelected.bind(this);
} }
var closeDiv = document.getElementById("graph-manipulation-closeDiv");
var closeDiv = document.getElementById("network-manipulation-closeDiv");
closeDiv.onclick = this._toggleEditMode.bind(this); closeDiv.onclick = this._toggleEditMode.bind(this);
this.boundFunction = this._createManipulatorBar.bind(this); this.boundFunction = this._createManipulatorBar.bind(this);
@ -16217,9 +16193,9 @@ var manipulationMixin = {
} }
else { else {
this.editModeDiv.innerHTML = "" + this.editModeDiv.innerHTML = "" +
"<span class='graph-manipulationUI edit editmode' id='graph-manipulate-editModeButton'>" +
"<span class='graph-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
var editModeButton = document.getElementById("graph-manipulate-editModeButton");
"<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
var editModeButton = document.getElementById("network-manipulate-editModeButton");
editModeButton.onclick = this._toggleEditMode.bind(this); editModeButton.onclick = this._toggleEditMode.bind(this);
} }
}, },
@ -16240,14 +16216,14 @@ var manipulationMixin = {
// create the toolbar contents // create the toolbar contents
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
"<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
"<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
// bind the icon // bind the icon
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this); backButton.onclick = this._createManipulatorBar.bind(this);
// we use the boundFunction so we can reference it when we unbind it from the "select" event. // we use the boundFunction so we can reference it when we unbind it from the "select" event.
@ -16276,14 +16252,14 @@ var manipulationMixin = {
this.blockConnectingEdgeSelection = true; this.blockConnectingEdgeSelection = true;
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
"<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
"<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
// bind the icon // bind the icon
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this); backButton.onclick = this._createManipulatorBar.bind(this);
// we use the boundFunction so we can reference it when we unbind it from the "select" event. // we use the boundFunction so we can reference it when we unbind it from the "select" event.
@ -16317,14 +16293,14 @@ var manipulationMixin = {
this.edgeBeingEdited._enableControlNodes(); this.edgeBeingEdited._enableControlNodes();
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
"<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
"<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
// bind the icon // bind the icon
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this); backButton.onclick = this._createManipulatorBar.bind(this);
// temporarily overload functions // temporarily overload functions
@ -17217,7 +17193,7 @@ var SectorMixin = {
var ClusterMixin = { var ClusterMixin = {
/** /**
* This is only called in the constructor of the graph object
* This is only called in the constructor of the network object
* *
*/ */
startWithClustering : function() { startWithClustering : function() {
@ -17702,7 +17678,7 @@ var ClusterMixin = {
}, },
/** /**
* This function forces the graph to cluster all nodes with only one connecting edge to their
* This function forces the network to cluster all nodes with only one connecting edge to their
* connected node. * connected node.
* *
* @private * @private
@ -19067,7 +19043,7 @@ var NavigationMixin = {
_cleanNavigation : function() { _cleanNavigation : function() {
// clean up previosu navigation items // clean up previosu navigation items
var wrapper = document.getElementById('graph-navigation_wrapper');
var wrapper = document.getElementById('network-navigation_wrapper');
if (wrapper != null) { if (wrapper != null) {
this.containerElement.removeChild(wrapper); this.containerElement.removeChild(wrapper);
} }
@ -19090,7 +19066,7 @@ var NavigationMixin = {
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent']; var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
this.navigationDivs['wrapper'] = document.createElement('div'); this.navigationDivs['wrapper'] = document.createElement('div');
this.navigationDivs['wrapper'].id = "graph-navigation_wrapper";
this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
this.navigationDivs['wrapper'].style.position = "absolute"; this.navigationDivs['wrapper'].style.position = "absolute";
this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px"; this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px"; this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
@ -19098,8 +19074,8 @@ var NavigationMixin = {
for (var i = 0; i < navigationDivs.length; i++) { for (var i = 0; i < navigationDivs.length; i++) {
this.navigationDivs[navigationDivs[i]] = document.createElement('div'); this.navigationDivs[navigationDivs[i]] = document.createElement('div');
this.navigationDivs[navigationDivs[i]].id = "graph-navigation_" + navigationDivs[i];
this.navigationDivs[navigationDivs[i]].className = "graph-navigation " + navigationDivs[i];
this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]); this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this); this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
} }
@ -19381,8 +19357,8 @@ var networkMixinLoaders = {
// load the manipulator HTML elements. All styling done in css. // load the manipulator HTML elements. All styling done in css.
if (this.manipulationDiv === undefined) { if (this.manipulationDiv === undefined) {
this.manipulationDiv = document.createElement('div'); this.manipulationDiv = document.createElement('div');
this.manipulationDiv.className = 'graph-manipulationDiv';
this.manipulationDiv.id = 'graph-manipulationDiv';
this.manipulationDiv.className = 'network-manipulationDiv';
this.manipulationDiv.id = 'network-manipulationDiv';
if (this.editMode == true) { if (this.editMode == true) {
this.manipulationDiv.style.display = "block"; this.manipulationDiv.style.display = "block";
} }
@ -19394,8 +19370,8 @@ var networkMixinLoaders = {
if (this.editModeDiv === undefined) { if (this.editModeDiv === undefined) {
this.editModeDiv = document.createElement('div'); this.editModeDiv = document.createElement('div');
this.editModeDiv.className = 'graph-manipulation-editMode';
this.editModeDiv.id = 'graph-manipulation-editMode';
this.editModeDiv.className = 'network-manipulation-editMode';
this.editModeDiv.id = 'network-manipulation-editMode';
if (this.editMode == true) { if (this.editMode == true) {
this.editModeDiv.style.display = "none"; this.editModeDiv.style.display = "none";
} }
@ -19407,8 +19383,8 @@ var networkMixinLoaders = {
if (this.closeDiv === undefined) { if (this.closeDiv === undefined) {
this.closeDiv = document.createElement('div'); this.closeDiv = document.createElement('div');
this.closeDiv.className = 'graph-manipulation-closeDiv';
this.closeDiv.id = 'graph-manipulation-closeDiv';
this.closeDiv.className = 'network-manipulation-closeDiv';
this.closeDiv.id = 'network-manipulation-closeDiv';
this.closeDiv.style.display = this.manipulationDiv.style.display; this.closeDiv.style.display = this.manipulationDiv.style.display;
this.containerElement.insertBefore(this.closeDiv, this.frame); this.containerElement.insertBefore(this.closeDiv, this.frame);
} }
@ -20247,7 +20223,7 @@ Network.prototype._create = function () {
} }
this.frame = document.createElement('div'); this.frame = document.createElement('div');
this.frame.className = 'graph-frame';
this.frame.className = 'network-frame';
this.frame.style.position = 'relative'; this.frame.style.position = 'relative';
this.frame.style.overflow = 'hidden'; this.frame.style.overflow = 'hidden';
@ -21762,11 +21738,11 @@ Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
/** /**
* @constructor Graph3d * @constructor Graph3d
* The Graph is a visualization Graphs on a time line
* Graph3d displays data in 3d.
* *
* Graph is developed in javascript as a Google Visualization Chart.
* Graph3d is developed in javascript as a Google Visualization Chart.
* *
* @param {Element} container The DOM element in which the Graph will
* @param {Element} container The DOM element in which the Graph3d will
* be created. Normally a div element. * be created. Normally a div element.
* @param {DataSet | DataView | Array} [data] * @param {DataSet | DataView | Array} [data]
* @param {Object} [options] * @param {Object} [options]
@ -21848,7 +21824,7 @@ function Graph3d(container, data, options) {
} }
} }
// Extend Graph with an Emitter mixin
// Extend Graph3d with an Emitter mixin
Emitter(Graph3d.prototype); Emitter(Graph3d.prototype);
/** /**
@ -24317,7 +24293,7 @@ Point2d = function (x, y) {
* *
* @param {DataSet} data The google data table * @param {DataSet} data The google data table
* @param {Number} column The index of the column to be filtered * @param {Number} column The index of the column to be filtered
* @param {Network} graph The graph
* @param {Graph} graph The graph
*/ */
function Filter (data, column, graph) { function Filter (data, column, graph) {
this.data = data; this.data = data;

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


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


+ 0
- 7
docs/graph2d.html View File

@ -722,13 +722,6 @@ Graph2D.clear({options: true}); // clear options only
</td> </td>
</tr> </tr>
<tr>
<td>setSelection([ids])</td>
<td>none</td>
<td>Select or deselect items. Currently selected items will be unselected.
</td>
</tr>
<tr> <tr>
<td>setWindow(start, end)</td> <td>setWindow(start, end)</td>
<td>none</td> <td>none</td>

+ 3
- 3
examples/Network/15_dot_language_playground.html View File

@ -133,7 +133,7 @@
</script> </script>
<textarea id="example1" class="example"> <textarea id="example1" class="example">
dinetwork {
digraph {
node [shape=circle fontSize=16] node [shape=circle fontSize=16]
edge [length=100, color=gray, fontColor=black] edge [length=100, color=gray, fontColor=black]
@ -151,7 +151,7 @@
</textarea> </textarea>
<textarea id="example2" class="example"> <textarea id="example2" class="example">
dinetwork topology
digraph topology
{ {
node[shape=circle fontSize=12] node[shape=circle fontSize=12]
edge[length=170 fontSize=12] edge[length=170 fontSize=12]
@ -173,7 +173,7 @@
</textarea> </textarea>
<textarea id="example3" class="example"> <textarea id="example3" class="example">
dinetwork G {
digraph G {
// note: not all attributes are recognized and supported by Network // note: not all attributes are recognized and supported by Network
// unrecognized attributes are ignored // unrecognized attributes are ignored

+ 5
- 5
src/graph3d/Graph3d.js View File

@ -1,10 +1,10 @@
/** /**
* @constructor Graph3d * @constructor Graph3d
* The Graph is a visualization Graphs on a time line
* Graph3d displays data in 3d.
* *
* Graph is developed in javascript as a Google Visualization Chart.
* Graph3d is developed in javascript as a Google Visualization Chart.
* *
* @param {Element} container The DOM element in which the Graph will
* @param {Element} container The DOM element in which the Graph3d will
* be created. Normally a div element. * be created. Normally a div element.
* @param {DataSet | DataView | Array} [data] * @param {DataSet | DataView | Array} [data]
* @param {Object} [options] * @param {Object} [options]
@ -86,7 +86,7 @@ function Graph3d(container, data, options) {
} }
} }
// Extend Graph with an Emitter mixin
// Extend Graph3d with an Emitter mixin
Emitter(Graph3d.prototype); Emitter(Graph3d.prototype);
/** /**
@ -2555,7 +2555,7 @@ Point2d = function (x, y) {
* *
* @param {DataSet} data The google data table * @param {DataSet} data The google data table
* @param {Number} column The index of the column to be filtered * @param {Number} column The index of the column to be filtered
* @param {Network} graph The graph
* @param {Graph} graph The graph
*/ */
function Filter (data, column, graph) { function Filter (data, column, graph) {
this.data = data; this.data = data;

+ 1
- 1
src/network/Network.js View File

@ -780,7 +780,7 @@ Network.prototype._create = function () {
} }
this.frame = document.createElement('div'); this.frame = document.createElement('div');
this.frame.className = 'graph-frame';
this.frame.className = 'network-frame';
this.frame.style.position = 'relative'; this.frame.style.position = 'relative';
this.frame.style.overflow = 'hidden'; this.frame.style.overflow = 'hidden';

+ 18
- 18
src/network/css/network-manipulation.css View File

@ -1,4 +1,4 @@
div.graph-manipulationDiv {
div.network-manipulationDiv {
border-width:0px; border-width:0px;
border-bottom: 1px; border-bottom: 1px;
border-style:solid; border-style:solid;
@ -18,14 +18,14 @@ div.graph-manipulationDiv {
position:absolute; position:absolute;
} }
div.graph-manipulation-editMode {
div.network-manipulation-editMode {
height:30px; height:30px;
z-index:10; z-index:10;
position:absolute; position:absolute;
margin-top:20px; margin-top:20px;
} }
div.graph-manipulation-closeDiv {
div.network-manipulation-closeDiv {
height:30px; height:30px;
width:30px; width:30px;
z-index:11; z-index:11;
@ -44,7 +44,7 @@ div.graph-manipulation-closeDiv {
user-select: none; user-select: none;
} }
span.graph-manipulationUI {
span.network-manipulationUI {
font-family: verdana; font-family: verdana;
font-size: 12px; font-size: 12px;
-moz-border-radius: 15px; -moz-border-radius: 15px;
@ -65,61 +65,61 @@ span.graph-manipulationUI {
user-select: none; user-select: none;
} }
span.graph-manipulationUI:hover {
span.network-manipulationUI:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
} }
span.graph-manipulationUI:active {
span.network-manipulationUI:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
} }
span.graph-manipulationUI.back {
span.network-manipulationUI.back {
background-image: url("img/network/backIcon.png"); background-image: url("img/network/backIcon.png");
} }
span.graph-manipulationUI.none:hover {
span.network-manipulationUI.none:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
cursor: default; cursor: default;
} }
span.graph-manipulationUI.none:active {
span.network-manipulationUI.none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
} }
span.graph-manipulationUI.none {
span.network-manipulationUI.none {
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
} }
span.graph-manipulationUI.notification{
span.network-manipulationUI.notification{
margin: 2px; margin: 2px;
font-weight: bold; font-weight: bold;
} }
span.graph-manipulationUI.add {
span.network-manipulationUI.add {
background-image: url("img/network/addNodeIcon.png"); background-image: url("img/network/addNodeIcon.png");
} }
span.graph-manipulationUI.edit {
span.network-manipulationUI.edit {
background-image: url("img/network/editIcon.png"); background-image: url("img/network/editIcon.png");
} }
span.graph-manipulationUI.edit.editmode {
span.network-manipulationUI.edit.editmode {
background-color: #fcfcfc; background-color: #fcfcfc;
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
border-color: #cccccc; border-color: #cccccc;
} }
span.graph-manipulationUI.connect {
span.network-manipulationUI.connect {
background-image: url("img/network/connectIcon.png"); background-image: url("img/network/connectIcon.png");
} }
span.graph-manipulationUI.delete {
span.network-manipulationUI.delete {
background-image: url("img/network/deleteIcon.png"); background-image: url("img/network/deleteIcon.png");
} }
/* top right bottom left */ /* top right bottom left */
span.graph-manipulationLabel {
span.network-manipulationLabel {
margin: 0px 0px 0px 23px; margin: 0px 0px 0px 23px;
line-height: 25px; line-height: 25px;
} }
div.graph-seperatorLine {
div.network-seperatorLine {
display:inline-block; display:inline-block;
width:1px; width:1px;
height:20px; height:20px;

+ 11
- 11
src/network/css/network-navigation.css View File

@ -1,4 +1,4 @@
div.graph-navigation {
div.network-navigation {
width:34px; width:34px;
height:34px; height:34px;
z-index:10; z-index:10;
@ -17,49 +17,49 @@ div.graph-navigation {
user-select: none; user-select: none;
} }
div.graph-navigation:hover {
div.network-navigation:hover {
box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30); box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
} }
div.graph-navigation:active {
div.network-navigation:active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95); box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
} }
div.graph-navigation.active {
div.network-navigation.active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95); box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
} }
div.graph-navigation.up {
div.network-navigation.up {
background-image: url("img/network/upArrow.png"); background-image: url("img/network/upArrow.png");
bottom:50px; bottom:50px;
left:55px; left:55px;
} }
div.graph-navigation.down {
div.network-navigation.down {
background-image: url("img/network/downArrow.png"); background-image: url("img/network/downArrow.png");
bottom:10px; bottom:10px;
left:55px; left:55px;
} }
div.graph-navigation.left {
div.network-navigation.left {
background-image: url("img/network/leftArrow.png"); background-image: url("img/network/leftArrow.png");
bottom:10px; bottom:10px;
left:15px; left:15px;
} }
div.graph-navigation.right {
div.network-navigation.right {
background-image: url("img/network/rightArrow.png"); background-image: url("img/network/rightArrow.png");
bottom:10px; bottom:10px;
left:95px; left:95px;
} }
div.graph-navigation.zoomIn {
div.network-navigation.zoomIn {
background-image: url("img/network/plus.png"); background-image: url("img/network/plus.png");
bottom:10px; bottom:10px;
right:15px; right:15px;
} }
div.graph-navigation.zoomOut {
div.network-navigation.zoomOut {
background-image: url("img/network/minus.png"); background-image: url("img/network/minus.png");
bottom:10px; bottom:10px;
right:55px; right:55px;
} }
div.graph-navigation.zoomExtends {
div.network-navigation.zoomExtends {
background-image: url("img/network/zoomExtends.png"); background-image: url("img/network/zoomExtends.png");
bottom:50px; bottom:50px;
right:15px; right:15px;

+ 2
- 2
src/network/networkMixins/ClusterMixin.js View File

@ -9,7 +9,7 @@
var ClusterMixin = { var ClusterMixin = {
/** /**
* This is only called in the constructor of the graph object
* This is only called in the constructor of the network object
* *
*/ */
startWithClustering : function() { startWithClustering : function() {
@ -494,7 +494,7 @@ var ClusterMixin = {
}, },
/** /**
* This function forces the graph to cluster all nodes with only one connecting edge to their
* This function forces the network to cluster all nodes with only one connecting edge to their
* connected node. * connected node.
* *
* @private * @private

+ 44
- 44
src/network/networkMixins/ManipulationMixin.js View File

@ -37,9 +37,9 @@ var manipulationMixin = {
*/ */
_toggleEditMode : function() { _toggleEditMode : function() {
this.editMode = !this.editMode; this.editMode = !this.editMode;
var toolbar = document.getElementById("graph-manipulationDiv");
var closeDiv = document.getElementById("graph-manipulation-closeDiv");
var editModeDiv = document.getElementById("graph-manipulation-editMode");
var toolbar = document.getElementById("network-manipulationDiv");
var closeDiv = document.getElementById("network-manipulation-closeDiv");
var editModeDiv = document.getElementById("network-manipulation-editMode");
if (this.editMode == true) { if (this.editMode == true) {
toolbar.style.display="block"; toolbar.style.display="block";
closeDiv.style.display="block"; closeDiv.style.display="block";
@ -87,49 +87,49 @@ var manipulationMixin = {
} }
// add the icons to the manipulator div // add the icons to the manipulator div
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='graph-manipulationUI add' id='graph-manipulate-addNode'>" +
"<span class='graph-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI connect' id='graph-manipulate-connectNode'>" +
"<span class='graph-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
"<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
this.manipulationDiv.innerHTML += "" + this.manipulationDiv.innerHTML += "" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI edit' id='graph-manipulate-editNode'>" +
"<span class='graph-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
} }
else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) { else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
this.manipulationDiv.innerHTML += "" + this.manipulationDiv.innerHTML += "" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI edit' id='graph-manipulate-editEdge'>" +
"<span class='graph-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
} }
if (this._selectionIsEmpty() == false) { if (this._selectionIsEmpty() == false) {
this.manipulationDiv.innerHTML += "" + this.manipulationDiv.innerHTML += "" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI delete' id='graph-manipulate-delete'>" +
"<span class='graph-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
"<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
} }
// bind the icons // bind the icons
var addNodeButton = document.getElementById("graph-manipulate-addNode");
var addNodeButton = document.getElementById("network-manipulate-addNode");
addNodeButton.onclick = this._createAddNodeToolbar.bind(this); addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
var addEdgeButton = document.getElementById("graph-manipulate-connectNode");
var addEdgeButton = document.getElementById("network-manipulate-connectNode");
addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this); addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
var editButton = document.getElementById("graph-manipulate-editNode");
var editButton = document.getElementById("network-manipulate-editNode");
editButton.onclick = this._editNode.bind(this); editButton.onclick = this._editNode.bind(this);
} }
else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) { else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
var editButton = document.getElementById("graph-manipulate-editEdge");
var editButton = document.getElementById("network-manipulate-editEdge");
editButton.onclick = this._createEditEdgeToolbar.bind(this); editButton.onclick = this._createEditEdgeToolbar.bind(this);
} }
if (this._selectionIsEmpty() == false) { if (this._selectionIsEmpty() == false) {
var deleteButton = document.getElementById("graph-manipulate-delete");
var deleteButton = document.getElementById("network-manipulate-delete");
deleteButton.onclick = this._deleteSelected.bind(this); deleteButton.onclick = this._deleteSelected.bind(this);
} }
var closeDiv = document.getElementById("graph-manipulation-closeDiv");
var closeDiv = document.getElementById("network-manipulation-closeDiv");
closeDiv.onclick = this._toggleEditMode.bind(this); closeDiv.onclick = this._toggleEditMode.bind(this);
this.boundFunction = this._createManipulatorBar.bind(this); this.boundFunction = this._createManipulatorBar.bind(this);
@ -137,9 +137,9 @@ var manipulationMixin = {
} }
else { else {
this.editModeDiv.innerHTML = "" + this.editModeDiv.innerHTML = "" +
"<span class='graph-manipulationUI edit editmode' id='graph-manipulate-editModeButton'>" +
"<span class='graph-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
var editModeButton = document.getElementById("graph-manipulate-editModeButton");
"<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
var editModeButton = document.getElementById("network-manipulate-editModeButton");
editModeButton.onclick = this._toggleEditMode.bind(this); editModeButton.onclick = this._toggleEditMode.bind(this);
} }
}, },
@ -160,14 +160,14 @@ var manipulationMixin = {
// create the toolbar contents // create the toolbar contents
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
"<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
"<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
// bind the icon // bind the icon
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this); backButton.onclick = this._createManipulatorBar.bind(this);
// we use the boundFunction so we can reference it when we unbind it from the "select" event. // we use the boundFunction so we can reference it when we unbind it from the "select" event.
@ -196,14 +196,14 @@ var manipulationMixin = {
this.blockConnectingEdgeSelection = true; this.blockConnectingEdgeSelection = true;
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
"<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
"<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
// bind the icon // bind the icon
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this); backButton.onclick = this._createManipulatorBar.bind(this);
// we use the boundFunction so we can reference it when we unbind it from the "select" event. // we use the boundFunction so we can reference it when we unbind it from the "select" event.
@ -237,14 +237,14 @@ var manipulationMixin = {
this.edgeBeingEdited._enableControlNodes(); this.edgeBeingEdited._enableControlNodes();
this.manipulationDiv.innerHTML = "" + this.manipulationDiv.innerHTML = "" +
"<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
"<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='graph-seperatorLine'></div>" +
"<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
"<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
// bind the icon // bind the icon
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this); backButton.onclick = this._createManipulatorBar.bind(this);
// temporarily overload functions // temporarily overload functions

+ 6
- 6
src/network/networkMixins/MixinLoader.js View File

@ -114,8 +114,8 @@ var networkMixinLoaders = {
// load the manipulator HTML elements. All styling done in css. // load the manipulator HTML elements. All styling done in css.
if (this.manipulationDiv === undefined) { if (this.manipulationDiv === undefined) {
this.manipulationDiv = document.createElement('div'); this.manipulationDiv = document.createElement('div');
this.manipulationDiv.className = 'graph-manipulationDiv';
this.manipulationDiv.id = 'graph-manipulationDiv';
this.manipulationDiv.className = 'network-manipulationDiv';
this.manipulationDiv.id = 'network-manipulationDiv';
if (this.editMode == true) { if (this.editMode == true) {
this.manipulationDiv.style.display = "block"; this.manipulationDiv.style.display = "block";
} }
@ -127,8 +127,8 @@ var networkMixinLoaders = {
if (this.editModeDiv === undefined) { if (this.editModeDiv === undefined) {
this.editModeDiv = document.createElement('div'); this.editModeDiv = document.createElement('div');
this.editModeDiv.className = 'graph-manipulation-editMode';
this.editModeDiv.id = 'graph-manipulation-editMode';
this.editModeDiv.className = 'network-manipulation-editMode';
this.editModeDiv.id = 'network-manipulation-editMode';
if (this.editMode == true) { if (this.editMode == true) {
this.editModeDiv.style.display = "none"; this.editModeDiv.style.display = "none";
} }
@ -140,8 +140,8 @@ var networkMixinLoaders = {
if (this.closeDiv === undefined) { if (this.closeDiv === undefined) {
this.closeDiv = document.createElement('div'); this.closeDiv = document.createElement('div');
this.closeDiv.className = 'graph-manipulation-closeDiv';
this.closeDiv.id = 'graph-manipulation-closeDiv';
this.closeDiv.className = 'network-manipulation-closeDiv';
this.closeDiv.id = 'network-manipulation-closeDiv';
this.closeDiv.style.display = this.manipulationDiv.style.display; this.closeDiv.style.display = this.manipulationDiv.style.display;
this.containerElement.insertBefore(this.closeDiv, this.frame); this.containerElement.insertBefore(this.closeDiv, this.frame);
} }

+ 4
- 4
src/network/networkMixins/NavigationMixin.js View File

@ -6,7 +6,7 @@ var NavigationMixin = {
_cleanNavigation : function() { _cleanNavigation : function() {
// clean up previosu navigation items // clean up previosu navigation items
var wrapper = document.getElementById('graph-navigation_wrapper');
var wrapper = document.getElementById('network-navigation_wrapper');
if (wrapper != null) { if (wrapper != null) {
this.containerElement.removeChild(wrapper); this.containerElement.removeChild(wrapper);
} }
@ -29,7 +29,7 @@ var NavigationMixin = {
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent']; var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
this.navigationDivs['wrapper'] = document.createElement('div'); this.navigationDivs['wrapper'] = document.createElement('div');
this.navigationDivs['wrapper'].id = "graph-navigation_wrapper";
this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
this.navigationDivs['wrapper'].style.position = "absolute"; this.navigationDivs['wrapper'].style.position = "absolute";
this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px"; this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px"; this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
@ -37,8 +37,8 @@ var NavigationMixin = {
for (var i = 0; i < navigationDivs.length; i++) { for (var i = 0; i < navigationDivs.length; i++) {
this.navigationDivs[navigationDivs[i]] = document.createElement('div'); this.navigationDivs[navigationDivs[i]] = document.createElement('div');
this.navigationDivs[navigationDivs[i]].id = "graph-navigation_" + navigationDivs[i];
this.navigationDivs[navigationDivs[i]].className = "graph-navigation " + navigationDivs[i];
this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]); this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this); this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
} }

+ 0
- 24
src/timeline/Graph2d.js View File

@ -485,25 +485,6 @@ Graph2d.prototype.getItemRange = function() {
}; };
}; };
/**
* Set selected items by their id. Replaces the current selection
* Unknown id's are silently ignored.
* @param {Array} [ids] An array with zero or more id's of the items to be
* selected. If ids is an empty array, all items will be
* unselected.
*/
Graph2d.prototype.setSelection = function(ids) {
this.linegraph && this.linegraph.setSelection(ids);
};
/**
* Get the selected items by their id
* @return {Array} ids The ids of the selected items
*/
Graph2d.prototype.getSelection = function() {
return this.linegraph && this.linegraph.getSelection() || [];
};
/** /**
* Set the visible window. Both parameters are optional, you can change only * Set the visible window. Both parameters are optional, you can change only
* start or only end. Syntax: * start or only end. Syntax:
@ -678,11 +659,6 @@ Graph2d.prototype.redraw = function() {
} }
}; };
// TODO: deprecated since version 1.1.0, remove some day
Graph2d.prototype.repaint = function () {
throw new Error('Function repaint is deprecated. Use redraw instead.');
};
/** /**
* Convert a position on screen (pixels) to a datetime * Convert a position on screen (pixels) to a datetime
* @param {int} x Position on the screen in pixels * @param {int} x Position on the screen in pixels

Write Preview
Loading…
Cancel
Save