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

removed div ids from manipulation

v3_develop
Alex de Mulder 10 years ago
parent
1043ef0887
commit
1f6dd0bbf7
3 changed files with 296 additions and 134 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +148
    -67
      dist/vis.js
  2. +148
    -64
      lib/network/mixins/ManipulationMixin.js
  3. +0
    -3
      lib/network/mixins/MixinLoader.js

+ 148
- 67
dist/vis.js View File

@ -28256,7 +28256,6 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.manipulationDiv === undefined) {
this.manipulationDiv = document.createElement('div');
this.manipulationDiv.className = 'network-manipulationDiv';
this.manipulationDiv.id = 'network-manipulationDiv';
if (this.editMode == true) {
this.manipulationDiv.style.display = "block";
}
@ -28269,7 +28268,6 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.editModeDiv === undefined) {
this.editModeDiv = document.createElement('div');
this.editModeDiv.className = 'network-manipulation-editMode';
this.editModeDiv.id = 'network-manipulation-editMode';
if (this.editMode == true) {
this.editModeDiv.style.display = "none";
}
@ -28282,7 +28280,6 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.closeDiv === undefined) {
this.closeDiv = document.createElement('div');
this.closeDiv.className = 'network-manipulation-closeDiv';
this.closeDiv.id = 'network-manipulation-closeDiv';
this.closeDiv.style.display = this.manipulationDiv.style.display;
this.frame.appendChild(this.closeDiv);
}
@ -32113,6 +32110,7 @@ return /******/ (function(modules) { // webpackBootstrap
while (this.manipulationDiv.hasChildNodes()) {
this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
}
this.manipulationDOM = {};
this._manipulationReleaseOverload = function () {};
delete this.sectors['support']['nodes']['targetNode'];
@ -32142,9 +32140,9 @@ return /******/ (function(modules) { // webpackBootstrap
*/
exports._toggleEditMode = function() {
this.editMode = !this.editMode;
var toolbar = document.getElementById("network-manipulationDiv");
var closeDiv = document.getElementById("network-manipulation-closeDiv");
var editModeDiv = document.getElementById("network-manipulation-editMode");
var toolbar = this.manipulationDiv;
var closeDiv = this.closeDiv;
var editModeDiv = this.editModeDiv;
if (this.editMode == true) {
toolbar.style.display="block";
closeDiv.style.display="block";
@ -32189,68 +32187,110 @@ return /******/ (function(modules) { // webpackBootstrap
// reset global variables
this.blockConnectingEdgeSelection = false;
this.forceAppendSelection = false;
this.manipulationDOM = {};
if (this.editMode == true) {
while (this.manipulationDiv.hasChildNodes()) {
this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
}
// add the icons to the manipulator div
this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
"<span class='network-manipulationLabel'>"+locale['addNode'] +"</span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
"<span class='network-manipulationLabel'>"+locale['addEdge'] +"</span></span>";
this.manipulationDOM['addNodeSpan'] = document.createElement('span');
this.manipulationDOM['addNodeSpan'].className = 'network-manipulationUI add';
this.manipulationDOM['addNodeLabelSpan'] = document.createElement('span');
this.manipulationDOM['addNodeLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['addNodeLabelSpan'].innerHTML = locale['addNode'];
this.manipulationDOM['addNodeSpan'].appendChild(this.manipulationDOM['addNodeLabelSpan']);
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
this.manipulationDOM['addEdgeSpan'] = document.createElement('span');
this.manipulationDOM['addEdgeSpan'].className = 'network-manipulationUI connect';
this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('span');
this.manipulationDOM['addEdgeLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['addEdgeLabelSpan'].innerHTML = locale['addEdge'];
this.manipulationDOM['addEdgeSpan'].appendChild(this.manipulationDOM['addEdgeLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['addNodeSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
this.manipulationDiv.appendChild(this.manipulationDOM['addEdgeSpan']);
if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
this.manipulationDiv.innerHTML += "" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
"<span class='network-manipulationLabel'>"+locale['editNode'] +"</span></span>";
this.manipulationDOM['seperatorLineDiv2'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv2'].className = 'network-seperatorLine';
this.manipulationDOM['editNodeSpan'] = document.createElement('span');
this.manipulationDOM['editNodeSpan'].className = 'network-manipulationUI edit';
this.manipulationDOM['editNodeLabelSpan'] = document.createElement('span');
this.manipulationDOM['editNodeLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['editNodeLabelSpan'].innerHTML = locale['editNode'];
this.manipulationDOM['editNodeSpan'].appendChild(this.manipulationDOM['editNodeLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv2']);
this.manipulationDiv.appendChild(this.manipulationDOM['editNodeSpan']);
}
else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
this.manipulationDiv.innerHTML += "" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
"<span class='network-manipulationLabel'>"+locale['editEdge'] +"</span></span>";
this.manipulationDOM['seperatorLineDiv3'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv3'].className = 'network-seperatorLine';
this.manipulationDOM['editEdgeSpan'] = document.createElement('span');
this.manipulationDOM['editEdgeSpan'].className = 'network-manipulationUI edit';
this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('span');
this.manipulationDOM['editEdgeLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['editEdgeLabelSpan'].innerHTML = locale['editEdge'];
this.manipulationDOM['editEdgeSpan'].appendChild(this.manipulationDOM['editEdgeLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv3']);
this.manipulationDiv.appendChild(this.manipulationDOM['editEdgeSpan']);
}
if (this._selectionIsEmpty() == false) {
this.manipulationDiv.innerHTML += "" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
"<span class='network-manipulationLabel'>"+locale['del'] +"</span></span>";
this.manipulationDOM['seperatorLineDiv4'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv4'].className = 'network-seperatorLine';
this.manipulationDOM['deleteSpan'] = document.createElement('span');
this.manipulationDOM['deleteSpan'].className = 'network-manipulationUI delete';
this.manipulationDOM['deleteLabelSpan'] = document.createElement('span');
this.manipulationDOM['deleteLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['deleteLabelSpan'].innerHTML = locale['del'];
this.manipulationDOM['deleteSpan'].appendChild(this.manipulationDOM['deleteLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv4']);
this.manipulationDiv.appendChild(this.manipulationDOM['deleteSpan']);
}
// bind the icons
var addNodeButton = document.getElementById("network-manipulate-addNode");
addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
var addEdgeButton = document.getElementById("network-manipulate-connectNode");
addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
this.manipulationDOM['addNodeSpan'].onclick = this._createAddNodeToolbar.bind(this);
this.manipulationDOM['addEdgeSpan'].onclick = this._createAddEdgeToolbar.bind(this);
if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
var editButton = document.getElementById("network-manipulate-editNode");
editButton.onclick = this._editNode.bind(this);
this.manipulationDOM['editNodeSpan'].onclick = this._editNode.bind(this);
}
else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
var editButton = document.getElementById("network-manipulate-editEdge");
editButton.onclick = this._createEditEdgeToolbar.bind(this);
this.manipulationDOM['editEdgeSpan'].onclick = this._createEditEdgeToolbar.bind(this);
}
if (this._selectionIsEmpty() == false) {
var deleteButton = document.getElementById("network-manipulate-delete");
deleteButton.onclick = this._deleteSelected.bind(this);
this.manipulationDOM['deleteSpan'].onclick = this._deleteSelected.bind(this);
}
var closeDiv = document.getElementById("network-manipulation-closeDiv");
closeDiv.onclick = this._toggleEditMode.bind(this);
this.closeDiv.onclick = this._toggleEditMode.bind(this);
this.boundFunction = this._createManipulatorBar.bind(this);
this.on('select', this.boundFunction);
}
else {
this.editModeDiv.innerHTML = "" +
"<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
"<span class='network-manipulationLabel'>" + locale['edit'] + "</span></span>";
var editModeButton = document.getElementById("network-manipulate-editModeButton");
editModeButton.onclick = this._toggleEditMode.bind(this);
while (this.editModeDiv.hasChildNodes()) {
this.editModeDiv.removeChild(this.editModeDiv.firstChild);
}
this.manipulationDOM['editModeSpan'] = document.createElement('span');
this.manipulationDOM['editModeSpan'].className = 'network-manipulationUI edit editmode';
this.manipulationDOM['editModeLabelSpan'] = document.createElement('span');
this.manipulationDOM['editModeLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['editModeLabelSpan'].innerHTML = locale['edit'];
this.manipulationDOM['editModeSpan'].appendChild(this.manipulationDOM['editModeLabelSpan']);
this.editModeDiv.appendChild(this.manipulationDOM['editModeSpan']);
this.manipulationDOM['editModeSpan'].onclick = this._toggleEditMode.bind(this);
}
};
@ -32270,17 +32310,30 @@ return /******/ (function(modules) { // webpackBootstrap
var locale = this.constants.locales[this.constants.locale];
// create the toolbar contents
this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['addDescription'] + "</span></span>";
this.manipulationDOM = {};
this.manipulationDOM['backSpan'] = document.createElement('span');
this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
this.manipulationDOM['backLabelSpan'] = document.createElement('span');
this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
this.manipulationDOM['descriptionSpan'] = document.createElement('span');
this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['addDescription'];
this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
// bind the icon
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
// we use the boundFunction so we can reference it when we unbind it from the "select" event.
this.boundFunction = this._addNode.bind(this);
@ -32309,16 +32362,30 @@ return /******/ (function(modules) { // webpackBootstrap
this.forceAppendSelection = false;
this.blockConnectingEdgeSelection = true;
this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['edgeDescription'] + "</span></span>";
this.manipulationDOM = {};
this.manipulationDOM['backSpan'] = document.createElement('span');
this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
this.manipulationDOM['backLabelSpan'] = document.createElement('span');
this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
this.manipulationDOM['descriptionSpan'] = document.createElement('span');
this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['edgeDescription'];
this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
// bind the icon
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
// we use the boundFunction so we can reference it when we unbind it from the "select" event.
this.boundFunction = this._handleConnect.bind(this);
@ -32357,16 +32424,30 @@ return /******/ (function(modules) { // webpackBootstrap
var locale = this.constants.locales[this.constants.locale];
this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['editEdgeDescription'] + "</span></span>";
this.manipulationDOM = {};
this.manipulationDOM['backSpan'] = document.createElement('span');
this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
this.manipulationDOM['backLabelSpan'] = document.createElement('span');
this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
this.manipulationDOM['descriptionSpan'] = document.createElement('span');
this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['editEdgeDescription'];
this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
// bind the icon
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
// temporarily overload functions
this.cachedFunctions["_handleTouch"] = this._handleTouch;

+ 148
- 64
lib/network/mixins/ManipulationMixin.js View File

@ -11,6 +11,7 @@ exports._clearManipulatorBar = function() {
while (this.manipulationDiv.hasChildNodes()) {
this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
}
this.manipulationDOM = {};
this._manipulationReleaseOverload = function () {};
delete this.sectors['support']['nodes']['targetNode'];
@ -40,9 +41,9 @@ exports._restoreOverloadedFunctions = function() {
*/
exports._toggleEditMode = function() {
this.editMode = !this.editMode;
var toolbar = document.getElementById("network-manipulationDiv");
var closeDiv = document.getElementById("network-manipulation-closeDiv");
var editModeDiv = document.getElementById("network-manipulation-editMode");
var toolbar = this.manipulationDiv;
var closeDiv = this.closeDiv;
var editModeDiv = this.editModeDiv;
if (this.editMode == true) {
toolbar.style.display="block";
closeDiv.style.display="block";
@ -87,68 +88,110 @@ exports._createManipulatorBar = function() {
// reset global variables
this.blockConnectingEdgeSelection = false;
this.forceAppendSelection = false;
this.manipulationDOM = {};
if (this.editMode == true) {
while (this.manipulationDiv.hasChildNodes()) {
this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
}
// add the icons to the manipulator div
this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
"<span class='network-manipulationLabel'>"+locale['addNode'] +"</span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
"<span class='network-manipulationLabel'>"+locale['addEdge'] +"</span></span>";
this.manipulationDOM['addNodeSpan'] = document.createElement('span');
this.manipulationDOM['addNodeSpan'].className = 'network-manipulationUI add';
this.manipulationDOM['addNodeLabelSpan'] = document.createElement('span');
this.manipulationDOM['addNodeLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['addNodeLabelSpan'].innerHTML = locale['addNode'];
this.manipulationDOM['addNodeSpan'].appendChild(this.manipulationDOM['addNodeLabelSpan']);
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
this.manipulationDOM['addEdgeSpan'] = document.createElement('span');
this.manipulationDOM['addEdgeSpan'].className = 'network-manipulationUI connect';
this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('span');
this.manipulationDOM['addEdgeLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['addEdgeLabelSpan'].innerHTML = locale['addEdge'];
this.manipulationDOM['addEdgeSpan'].appendChild(this.manipulationDOM['addEdgeLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['addNodeSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
this.manipulationDiv.appendChild(this.manipulationDOM['addEdgeSpan']);
if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
this.manipulationDiv.innerHTML += "" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
"<span class='network-manipulationLabel'>"+locale['editNode'] +"</span></span>";
this.manipulationDOM['seperatorLineDiv2'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv2'].className = 'network-seperatorLine';
this.manipulationDOM['editNodeSpan'] = document.createElement('span');
this.manipulationDOM['editNodeSpan'].className = 'network-manipulationUI edit';
this.manipulationDOM['editNodeLabelSpan'] = document.createElement('span');
this.manipulationDOM['editNodeLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['editNodeLabelSpan'].innerHTML = locale['editNode'];
this.manipulationDOM['editNodeSpan'].appendChild(this.manipulationDOM['editNodeLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv2']);
this.manipulationDiv.appendChild(this.manipulationDOM['editNodeSpan']);
}
else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
this.manipulationDiv.innerHTML += "" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
"<span class='network-manipulationLabel'>"+locale['editEdge'] +"</span></span>";
this.manipulationDOM['seperatorLineDiv3'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv3'].className = 'network-seperatorLine';
this.manipulationDOM['editEdgeSpan'] = document.createElement('span');
this.manipulationDOM['editEdgeSpan'].className = 'network-manipulationUI edit';
this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('span');
this.manipulationDOM['editEdgeLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['editEdgeLabelSpan'].innerHTML = locale['editEdge'];
this.manipulationDOM['editEdgeSpan'].appendChild(this.manipulationDOM['editEdgeLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv3']);
this.manipulationDiv.appendChild(this.manipulationDOM['editEdgeSpan']);
}
if (this._selectionIsEmpty() == false) {
this.manipulationDiv.innerHTML += "" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
"<span class='network-manipulationLabel'>"+locale['del'] +"</span></span>";
this.manipulationDOM['seperatorLineDiv4'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv4'].className = 'network-seperatorLine';
this.manipulationDOM['deleteSpan'] = document.createElement('span');
this.manipulationDOM['deleteSpan'].className = 'network-manipulationUI delete';
this.manipulationDOM['deleteLabelSpan'] = document.createElement('span');
this.manipulationDOM['deleteLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['deleteLabelSpan'].innerHTML = locale['del'];
this.manipulationDOM['deleteSpan'].appendChild(this.manipulationDOM['deleteLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv4']);
this.manipulationDiv.appendChild(this.manipulationDOM['deleteSpan']);
}
// bind the icons
var addNodeButton = document.getElementById("network-manipulate-addNode");
addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
var addEdgeButton = document.getElementById("network-manipulate-connectNode");
addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
this.manipulationDOM['addNodeSpan'].onclick = this._createAddNodeToolbar.bind(this);
this.manipulationDOM['addEdgeSpan'].onclick = this._createAddEdgeToolbar.bind(this);
if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
var editButton = document.getElementById("network-manipulate-editNode");
editButton.onclick = this._editNode.bind(this);
this.manipulationDOM['editNodeSpan'].onclick = this._editNode.bind(this);
}
else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
var editButton = document.getElementById("network-manipulate-editEdge");
editButton.onclick = this._createEditEdgeToolbar.bind(this);
this.manipulationDOM['editEdgeSpan'].onclick = this._createEditEdgeToolbar.bind(this);
}
if (this._selectionIsEmpty() == false) {
var deleteButton = document.getElementById("network-manipulate-delete");
deleteButton.onclick = this._deleteSelected.bind(this);
this.manipulationDOM['deleteSpan'].onclick = this._deleteSelected.bind(this);
}
var closeDiv = document.getElementById("network-manipulation-closeDiv");
closeDiv.onclick = this._toggleEditMode.bind(this);
this.closeDiv.onclick = this._toggleEditMode.bind(this);
this.boundFunction = this._createManipulatorBar.bind(this);
this.on('select', this.boundFunction);
}
else {
this.editModeDiv.innerHTML = "" +
"<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
"<span class='network-manipulationLabel'>" + locale['edit'] + "</span></span>";
var editModeButton = document.getElementById("network-manipulate-editModeButton");
editModeButton.onclick = this._toggleEditMode.bind(this);
while (this.editModeDiv.hasChildNodes()) {
this.editModeDiv.removeChild(this.editModeDiv.firstChild);
}
this.manipulationDOM['editModeSpan'] = document.createElement('span');
this.manipulationDOM['editModeSpan'].className = 'network-manipulationUI edit editmode';
this.manipulationDOM['editModeLabelSpan'] = document.createElement('span');
this.manipulationDOM['editModeLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['editModeLabelSpan'].innerHTML = locale['edit'];
this.manipulationDOM['editModeSpan'].appendChild(this.manipulationDOM['editModeLabelSpan']);
this.editModeDiv.appendChild(this.manipulationDOM['editModeSpan']);
this.manipulationDOM['editModeSpan'].onclick = this._toggleEditMode.bind(this);
}
};
@ -168,17 +211,30 @@ exports._createAddNodeToolbar = function() {
var locale = this.constants.locales[this.constants.locale];
// create the toolbar contents
this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['addDescription'] + "</span></span>";
this.manipulationDOM = {};
this.manipulationDOM['backSpan'] = document.createElement('span');
this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
this.manipulationDOM['backLabelSpan'] = document.createElement('span');
this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
this.manipulationDOM['descriptionSpan'] = document.createElement('span');
this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['addDescription'];
this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
// bind the icon
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
// we use the boundFunction so we can reference it when we unbind it from the "select" event.
this.boundFunction = this._addNode.bind(this);
@ -207,16 +263,30 @@ exports._createAddEdgeToolbar = function() {
this.forceAppendSelection = false;
this.blockConnectingEdgeSelection = true;
this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['edgeDescription'] + "</span></span>";
this.manipulationDOM = {};
this.manipulationDOM['backSpan'] = document.createElement('span');
this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
this.manipulationDOM['backLabelSpan'] = document.createElement('span');
this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
this.manipulationDOM['descriptionSpan'] = document.createElement('span');
this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['edgeDescription'];
this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
// bind the icon
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
// we use the boundFunction so we can reference it when we unbind it from the "select" event.
this.boundFunction = this._handleConnect.bind(this);
@ -255,16 +325,30 @@ exports._createEditEdgeToolbar = function() {
var locale = this.constants.locales[this.constants.locale];
this.manipulationDiv.innerHTML = "" +
"<span class='network-manipulationUI back' id='network-manipulate-back'>" +
"<span class='network-manipulationLabel'>" + locale['back'] + " </span></span>" +
"<div class='network-seperatorLine'></div>" +
"<span class='network-manipulationUI none' id='network-manipulate-back'>" +
"<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + locale['editEdgeDescription'] + "</span></span>";
this.manipulationDOM = {};
this.manipulationDOM['backSpan'] = document.createElement('span');
this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
this.manipulationDOM['backLabelSpan'] = document.createElement('span');
this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
this.manipulationDOM['descriptionSpan'] = document.createElement('span');
this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['editEdgeDescription'];
this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
// bind the icon
var backButton = document.getElementById("network-manipulate-back");
backButton.onclick = this._createManipulatorBar.bind(this);
this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
// temporarily overload functions
this.cachedFunctions["_handleTouch"] = this._handleTouch;

+ 0
- 3
lib/network/mixins/MixinLoader.js View File

@ -116,7 +116,6 @@ exports._loadManipulationSystem = function () {
if (this.manipulationDiv === undefined) {
this.manipulationDiv = document.createElement('div');
this.manipulationDiv.className = 'network-manipulationDiv';
this.manipulationDiv.id = 'network-manipulationDiv';
if (this.editMode == true) {
this.manipulationDiv.style.display = "block";
}
@ -129,7 +128,6 @@ exports._loadManipulationSystem = function () {
if (this.editModeDiv === undefined) {
this.editModeDiv = document.createElement('div');
this.editModeDiv.className = 'network-manipulation-editMode';
this.editModeDiv.id = 'network-manipulation-editMode';
if (this.editMode == true) {
this.editModeDiv.style.display = "none";
}
@ -142,7 +140,6 @@ exports._loadManipulationSystem = function () {
if (this.closeDiv === undefined) {
this.closeDiv = document.createElement('div');
this.closeDiv.className = 'network-manipulation-closeDiv';
this.closeDiv.id = 'network-manipulation-closeDiv';
this.closeDiv.style.display = this.manipulationDiv.style.display;
this.frame.appendChild(this.closeDiv);
}

Write Preview
Loading…
Cancel
Save