Browse Source

Refactored more code from `graph` to `network`

css_transitions
jos 10 years ago
parent
commit
942de0df42
15 changed files with 194 additions and 249 deletions
  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-bottom: 1px;
border-style:solid;
@ -530,14 +530,14 @@ div.graph-manipulationDiv {
position:absolute;
}
div.graph-manipulation-editMode {
div.network-manipulation-editMode {
height:30px;
z-index:10;
position:absolute;
margin-top:20px;
}
div.graph-manipulation-closeDiv {
div.network-manipulation-closeDiv {
height:30px;
width:30px;
z-index:11;
@ -556,7 +556,7 @@ div.graph-manipulation-closeDiv {
user-select: none;
}
span.graph-manipulationUI {
span.network-manipulationUI {
font-family: verdana;
font-size: 12px;
-moz-border-radius: 15px;
@ -577,68 +577,68 @@ span.graph-manipulationUI {
user-select: none;
}
span.graph-manipulationUI:hover {
span.network-manipulationUI:hover {
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);
}
span.graph-manipulationUI.back {
span.network-manipulationUI.back {
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);
cursor: default;
}
span.graph-manipulationUI.none:active {
span.network-manipulationUI.none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
}
span.graph-manipulationUI.none {
span.network-manipulationUI.none {
padding: 0px 0px 0px 0px;
}
span.graph-manipulationUI.notification{
span.network-manipulationUI.notification{
margin: 2px;
font-weight: bold;
}
span.graph-manipulationUI.add {
span.network-manipulationUI.add {
background-image: url("img/network/addNodeIcon.png");
}
span.graph-manipulationUI.edit {
span.network-manipulationUI.edit {
background-image: url("img/network/editIcon.png");
}
span.graph-manipulationUI.edit.editmode {
span.network-manipulationUI.edit.editmode {
background-color: #fcfcfc;
border-style:solid;
border-width:1px;
border-color: #cccccc;
}
span.graph-manipulationUI.connect {
span.network-manipulationUI.connect {
background-image: url("img/network/connectIcon.png");
}
span.graph-manipulationUI.delete {
span.network-manipulationUI.delete {
background-image: url("img/network/deleteIcon.png");
}
/* top right bottom left */
span.graph-manipulationLabel {
span.network-manipulationLabel {
margin: 0px 0px 0px 23px;
line-height: 25px;
}
div.graph-seperatorLine {
div.network-seperatorLine {
display:inline-block;
width:1px;
height:20px;
background-color: #bdbdbd;
margin: 5px 7px 0px 15px;
}
div.graph-navigation {
div.network-navigation {
width:34px;
height:34px;
z-index:10;
@ -657,49 +657,49 @@ div.graph-navigation {
user-select: none;
}
div.graph-navigation:hover {
div.network-navigation:hover {
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);
}
div.graph-navigation.active {
div.network-navigation.active {
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");
bottom:50px;
left:55px;
}
div.graph-navigation.down {
div.network-navigation.down {
background-image: url("img/network/downArrow.png");
bottom:10px;
left:55px;
}
div.graph-navigation.left {
div.network-navigation.left {
background-image: url("img/network/leftArrow.png");
bottom:10px;
left:15px;
}
div.graph-navigation.right {
div.network-navigation.right {
background-image: url("img/network/rightArrow.png");
bottom:10px;
left:95px;
}
div.graph-navigation.zoomIn {
div.network-navigation.zoomIn {
background-image: url("img/network/plus.png");
bottom:10px;
right:15px;
}
div.graph-navigation.zoomOut {
div.network-navigation.zoomOut {
background-image: url("img/network/minus.png");
bottom:10px;
right:55px;
}
div.graph-navigation.zoomExtends {
div.network-navigation.zoomExtends {
background-image: url("img/network/zoomExtends.png");
bottom:50px;
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
* 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
* @param {int} x Position on the screen in pixels
@ -16117,9 +16093,9 @@ var manipulationMixin = {
*/
_toggleEditMode : function() {
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) {
toolbar.style.display="block";
closeDiv.style.display="block";
@ -16167,49 +16143,49 @@ var manipulationMixin = {
}
// add the icons to the manipulator div
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) {
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) {
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) {
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
var addNodeButton = document.getElementById("graph-manipulate-addNode");
var addNodeButton = document.getElementById("network-manipulate-addNode");
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);
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);
}
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);
}
if (this._selectionIsEmpty() == false) {
var deleteButton = document.getElementById("graph-manipulate-delete");
var deleteButton = document.getElementById("network-manipulate-delete");
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);
this.boundFunction = this._createManipulatorBar.bind(this);
@ -16217,9 +16193,9 @@ var manipulationMixin = {
}
else {
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);
}
},
@ -16240,14 +16216,14 @@ var manipulationMixin = {
// create the toolbar contents
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
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
// 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.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
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
// 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.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
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
// temporarily overload functions
@ -17217,7 +17193,7 @@ var SectorMixin = {
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() {
@ -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.
*
* @private
@ -19067,7 +19043,7 @@ var NavigationMixin = {
_cleanNavigation : function() {
// clean up previosu navigation items
var wrapper = document.getElementById('graph-navigation_wrapper');
var wrapper = document.getElementById('network-navigation_wrapper');
if (wrapper != null) {
this.containerElement.removeChild(wrapper);
}
@ -19090,7 +19066,7 @@ var NavigationMixin = {
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
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.width = this.frame.canvas.clientWidth + "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++) {
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[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
}
@ -19381,8 +19357,8 @@ var networkMixinLoaders = {
// load the manipulator HTML elements. All styling done in css.
if (this.manipulationDiv === undefined) {
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) {
this.manipulationDiv.style.display = "block";
}
@ -19394,8 +19370,8 @@ var networkMixinLoaders = {
if (this.editModeDiv === undefined) {
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) {
this.editModeDiv.style.display = "none";
}
@ -19407,8 +19383,8 @@ var networkMixinLoaders = {
if (this.closeDiv === undefined) {
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.containerElement.insertBefore(this.closeDiv, this.frame);
}
@ -20247,7 +20223,7 @@ Network.prototype._create = function () {
}
this.frame = document.createElement('div');
this.frame.className = 'graph-frame';
this.frame.className = 'network-frame';
this.frame.style.position = 'relative';
this.frame.style.overflow = 'hidden';
@ -21762,11 +21738,11 @@ Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
/**
* @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.
* @param {DataSet | DataView | Array} [data]
* @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);
/**
@ -24317,7 +24293,7 @@ Point2d = function (x, y) {
*
* @param {DataSet} data The google data table
* @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) {
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>
</tr>
<tr>
<td>setSelection([ids])</td>
<td>none</td>
<td>Select or deselect items. Currently selected items will be unselected.
</td>
</tr>
<tr>
<td>setWindow(start, end)</td>
<td>none</td>

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

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

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

@ -1,10 +1,10 @@
/**
* @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.
* @param {DataSet | DataView | Array} [data]
* @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);
/**
@ -2555,7 +2555,7 @@ Point2d = function (x, y) {
*
* @param {DataSet} data The google data table
* @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) {
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.className = 'graph-frame';
this.frame.className = 'network-frame';
this.frame.style.position = 'relative';
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-bottom: 1px;
border-style:solid;
@ -18,14 +18,14 @@ div.graph-manipulationDiv {
position:absolute;
}
div.graph-manipulation-editMode {
div.network-manipulation-editMode {
height:30px;
z-index:10;
position:absolute;
margin-top:20px;
}
div.graph-manipulation-closeDiv {
div.network-manipulation-closeDiv {
height:30px;
width:30px;
z-index:11;
@ -44,7 +44,7 @@ div.graph-manipulation-closeDiv {
user-select: none;
}
span.graph-manipulationUI {
span.network-manipulationUI {
font-family: verdana;
font-size: 12px;
-moz-border-radius: 15px;
@ -65,61 +65,61 @@ span.graph-manipulationUI {
user-select: none;
}
span.graph-manipulationUI:hover {
span.network-manipulationUI:hover {
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);
}
span.graph-manipulationUI.back {
span.network-manipulationUI.back {
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);
cursor: default;
}
span.graph-manipulationUI.none:active {
span.network-manipulationUI.none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
}
span.graph-manipulationUI.none {
span.network-manipulationUI.none {
padding: 0px 0px 0px 0px;
}
span.graph-manipulationUI.notification{
span.network-manipulationUI.notification{
margin: 2px;
font-weight: bold;
}
span.graph-manipulationUI.add {
span.network-manipulationUI.add {
background-image: url("img/network/addNodeIcon.png");
}
span.graph-manipulationUI.edit {
span.network-manipulationUI.edit {
background-image: url("img/network/editIcon.png");
}
span.graph-manipulationUI.edit.editmode {
span.network-manipulationUI.edit.editmode {
background-color: #fcfcfc;
border-style:solid;
border-width:1px;
border-color: #cccccc;
}
span.graph-manipulationUI.connect {
span.network-manipulationUI.connect {
background-image: url("img/network/connectIcon.png");
}
span.graph-manipulationUI.delete {
span.network-manipulationUI.delete {
background-image: url("img/network/deleteIcon.png");
}
/* top right bottom left */
span.graph-manipulationLabel {
span.network-manipulationLabel {
margin: 0px 0px 0px 23px;
line-height: 25px;
}
div.graph-seperatorLine {
div.network-seperatorLine {
display:inline-block;
width:1px;
height:20px;

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

@ -1,4 +1,4 @@
div.graph-navigation {
div.network-navigation {
width:34px;
height:34px;
z-index:10;
@ -17,49 +17,49 @@ div.graph-navigation {
user-select: none;
}
div.graph-navigation:hover {
div.network-navigation:hover {
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);
}
div.graph-navigation.active {
div.network-navigation.active {
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");
bottom:50px;
left:55px;
}
div.graph-navigation.down {
div.network-navigation.down {
background-image: url("img/network/downArrow.png");
bottom:10px;
left:55px;
}
div.graph-navigation.left {
div.network-navigation.left {
background-image: url("img/network/leftArrow.png");
bottom:10px;
left:15px;
}
div.graph-navigation.right {
div.network-navigation.right {
background-image: url("img/network/rightArrow.png");
bottom:10px;
left:95px;
}
div.graph-navigation.zoomIn {
div.network-navigation.zoomIn {
background-image: url("img/network/plus.png");
bottom:10px;
right:15px;
}
div.graph-navigation.zoomOut {
div.network-navigation.zoomOut {
background-image: url("img/network/minus.png");
bottom:10px;
right:55px;
}
div.graph-navigation.zoomExtends {
div.network-navigation.zoomExtends {
background-image: url("img/network/zoomExtends.png");
bottom:50px;
right:15px;

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

@ -9,7 +9,7 @@
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() {
@ -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.
*
* @private

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

@ -37,9 +37,9 @@ var manipulationMixin = {
*/
_toggleEditMode : function() {
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) {
toolbar.style.display="block";
closeDiv.style.display="block";
@ -87,49 +87,49 @@ var manipulationMixin = {
}
// add the icons to the manipulator div
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) {
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) {
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) {
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
var addNodeButton = document.getElementById("graph-manipulate-addNode");
var addNodeButton = document.getElementById("network-manipulate-addNode");
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);
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);
}
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);
}
if (this._selectionIsEmpty() == false) {
var deleteButton = document.getElementById("graph-manipulate-delete");
var deleteButton = document.getElementById("network-manipulate-delete");
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);
this.boundFunction = this._createManipulatorBar.bind(this);
@ -137,9 +137,9 @@ var manipulationMixin = {
}
else {
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);
}
},
@ -160,14 +160,14 @@ var manipulationMixin = {
// create the toolbar contents
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
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
// 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.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
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
// 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.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
var backButton = document.getElementById("graph-manipulate-back");
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
// 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.
if (this.manipulationDiv === undefined) {
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) {
this.manipulationDiv.style.display = "block";
}
@ -127,8 +127,8 @@ var networkMixinLoaders = {
if (this.editModeDiv === undefined) {
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) {
this.editModeDiv.style.display = "none";
}
@ -140,8 +140,8 @@ var networkMixinLoaders = {
if (this.closeDiv === undefined) {
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.containerElement.insertBefore(this.closeDiv, this.frame);
}

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

@ -6,7 +6,7 @@ var NavigationMixin = {
_cleanNavigation : function() {
// clean up previosu navigation items
var wrapper = document.getElementById('graph-navigation_wrapper');
var wrapper = document.getElementById('network-navigation_wrapper');
if (wrapper != null) {
this.containerElement.removeChild(wrapper);
}
@ -29,7 +29,7 @@ var NavigationMixin = {
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
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.width = this.frame.canvas.clientWidth + "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++) {
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[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
* 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
* @param {int} x Position on the screen in pixels

Loading…
Cancel
Save