|
|
@ -1,6 +1,7 @@ |
|
|
|
var util = require('../../util'); |
|
|
|
var Node = require('../Node'); |
|
|
|
var Edge = require('../Edge'); |
|
|
|
var Hammer = require('../../module/hammer'); |
|
|
|
|
|
|
|
/** |
|
|
|
* clears the toolbar div element of children |
|
|
@ -11,6 +12,8 @@ exports._clearManipulatorBar = function() { |
|
|
|
this._recursiveDOMDelete(this.manipulationDiv); |
|
|
|
this.manipulationDOM = {}; |
|
|
|
|
|
|
|
this._cleanManipulatorHammers(); |
|
|
|
|
|
|
|
this._manipulationReleaseOverload = function () {}; |
|
|
|
delete this.sectors['support']['nodes']['targetNode']; |
|
|
|
delete this.sectors['support']['nodes']['targetViaNode']; |
|
|
@ -18,6 +21,17 @@ exports._clearManipulatorBar = function() { |
|
|
|
this.freezeSimulationEnabled = false; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
exports._cleanManipulatorHammers = function() { |
|
|
|
// clean hammer bindings
|
|
|
|
if (this.manipulationHammers.length != 0) { |
|
|
|
for (var i = 0; i < this.manipulationHammers.length; i++) { |
|
|
|
this.manipulationHammers[i].dispose(); |
|
|
|
} |
|
|
|
this.manipulationHammers = []; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* Manipulation UI temporarily overloads certain functions to extend or replace them. To be able to restore |
|
|
|
* these functions to their original functionality, we saved them in this.cachedFunctions. |
|
|
@ -48,13 +62,12 @@ exports._toggleEditMode = function() { |
|
|
|
toolbar.style.display="block"; |
|
|
|
closeDiv.style.display="block"; |
|
|
|
editModeDiv.style.display="none"; |
|
|
|
closeDiv.onclick = this._toggleEditMode.bind(this); |
|
|
|
this._bindHammerToDiv(closeDiv,'_toggleEditMode'); |
|
|
|
} |
|
|
|
else { |
|
|
|
toolbar.style.display="none"; |
|
|
|
closeDiv.style.display="none"; |
|
|
|
editModeDiv.style.display="block"; |
|
|
|
closeDiv.onclick = null; |
|
|
|
} |
|
|
|
this._createManipulatorBar() |
|
|
|
}; |
|
|
@ -70,6 +83,8 @@ exports._createManipulatorBar = function() { |
|
|
|
this.off('select', this.boundFunction); |
|
|
|
} |
|
|
|
|
|
|
|
this._cleanManipulatorHammers(); |
|
|
|
|
|
|
|
var locale = this.constants.locales[this.constants.locale]; |
|
|
|
|
|
|
|
if (this.edgeBeingEdited !== undefined) { |
|
|
@ -96,9 +111,10 @@ exports._createManipulatorBar = function() { |
|
|
|
this.manipulationDiv.removeChild(this.manipulationDiv.firstChild); |
|
|
|
} |
|
|
|
|
|
|
|
this.manipulationDOM['addNodeSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['addNodeSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['addNodeSpan'].className = 'network-manipulationUI add'; |
|
|
|
this.manipulationDOM['addNodeLabelSpan'] = document.createElement('span'); |
|
|
|
|
|
|
|
this.manipulationDOM['addNodeLabelSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['addNodeLabelSpan'].className = 'network-manipulationLabel'; |
|
|
|
this.manipulationDOM['addNodeLabelSpan'].innerHTML = locale['addNode']; |
|
|
|
this.manipulationDOM['addNodeSpan'].appendChild(this.manipulationDOM['addNodeLabelSpan']); |
|
|
@ -106,9 +122,9 @@ exports._createManipulatorBar = function() { |
|
|
|
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; |
|
|
|
|
|
|
|
this.manipulationDOM['addEdgeSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['addEdgeSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['addEdgeSpan'].className = 'network-manipulationUI connect'; |
|
|
|
this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['addEdgeLabelSpan'].className = 'network-manipulationLabel'; |
|
|
|
this.manipulationDOM['addEdgeLabelSpan'].innerHTML = locale['addEdge']; |
|
|
|
this.manipulationDOM['addEdgeSpan'].appendChild(this.manipulationDOM['addEdgeLabelSpan']); |
|
|
@ -121,9 +137,9 @@ exports._createManipulatorBar = function() { |
|
|
|
this.manipulationDOM['seperatorLineDiv2'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['seperatorLineDiv2'].className = 'network-seperatorLine'; |
|
|
|
|
|
|
|
this.manipulationDOM['editNodeSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['editNodeSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['editNodeSpan'].className = 'network-manipulationUI edit'; |
|
|
|
this.manipulationDOM['editNodeLabelSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['editNodeLabelSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['editNodeLabelSpan'].className = 'network-manipulationLabel'; |
|
|
|
this.manipulationDOM['editNodeLabelSpan'].innerHTML = locale['editNode']; |
|
|
|
this.manipulationDOM['editNodeSpan'].appendChild(this.manipulationDOM['editNodeLabelSpan']); |
|
|
@ -135,9 +151,9 @@ exports._createManipulatorBar = function() { |
|
|
|
this.manipulationDOM['seperatorLineDiv3'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['seperatorLineDiv3'].className = 'network-seperatorLine'; |
|
|
|
|
|
|
|
this.manipulationDOM['editEdgeSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['editEdgeSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['editEdgeSpan'].className = 'network-manipulationUI edit'; |
|
|
|
this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['editEdgeLabelSpan'].className = 'network-manipulationLabel'; |
|
|
|
this.manipulationDOM['editEdgeLabelSpan'].innerHTML = locale['editEdge']; |
|
|
|
this.manipulationDOM['editEdgeSpan'].appendChild(this.manipulationDOM['editEdgeLabelSpan']); |
|
|
@ -149,9 +165,9 @@ exports._createManipulatorBar = function() { |
|
|
|
this.manipulationDOM['seperatorLineDiv4'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['seperatorLineDiv4'].className = 'network-seperatorLine'; |
|
|
|
|
|
|
|
this.manipulationDOM['deleteSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['deleteSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['deleteSpan'].className = 'network-manipulationUI delete'; |
|
|
|
this.manipulationDOM['deleteLabelSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['deleteLabelSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['deleteLabelSpan'].className = 'network-manipulationLabel'; |
|
|
|
this.manipulationDOM['deleteLabelSpan'].innerHTML = locale['del']; |
|
|
|
this.manipulationDOM['deleteSpan'].appendChild(this.manipulationDOM['deleteLabelSpan']); |
|
|
@ -160,20 +176,20 @@ exports._createManipulatorBar = function() { |
|
|
|
this.manipulationDiv.appendChild(this.manipulationDOM['deleteSpan']); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// bind the icons
|
|
|
|
this.manipulationDOM['addNodeSpan'].onclick = this._createAddNodeToolbar.bind(this); |
|
|
|
this.manipulationDOM['addEdgeSpan'].onclick = this._createAddEdgeToolbar.bind(this); |
|
|
|
this._bindHammerToDiv(this.manipulationDOM['addNodeSpan'],'_createAddNodeToolbar'); |
|
|
|
this._bindHammerToDiv(this.manipulationDOM['addEdgeSpan'],'_createAddEdgeToolbar'); |
|
|
|
this._bindHammerToDiv(this.closeDiv,'_toggleEditMode'); |
|
|
|
|
|
|
|
if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) { |
|
|
|
this.manipulationDOM['editNodeSpan'].onclick = this._editNode.bind(this); |
|
|
|
this._bindHammerToDiv(this.manipulationDOM['editNodeSpan'],'_editNode'); |
|
|
|
} |
|
|
|
else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) { |
|
|
|
this.manipulationDOM['editEdgeSpan'].onclick = this._createEditEdgeToolbar.bind(this); |
|
|
|
this._bindHammerToDiv(this.manipulationDOM['editEdgeSpan'],'_createEditEdgeToolbar'); |
|
|
|
} |
|
|
|
if (this._selectionIsEmpty() == false) { |
|
|
|
this.manipulationDOM['deleteSpan'].onclick = this._deleteSelected.bind(this); |
|
|
|
this._bindHammerToDiv(this.manipulationDOM['deleteSpan'],'_deleteSelected'); |
|
|
|
} |
|
|
|
this.closeDiv.onclick = this._toggleEditMode.bind(this); |
|
|
|
|
|
|
|
var me = this; |
|
|
|
this.boundFunction = me._createManipulatorBar; |
|
|
@ -184,20 +200,26 @@ exports._createManipulatorBar = function() { |
|
|
|
this.editModeDiv.removeChild(this.editModeDiv.firstChild); |
|
|
|
} |
|
|
|
|
|
|
|
this.manipulationDOM['editModeSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['editModeSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['editModeSpan'].className = 'network-manipulationUI edit editmode'; |
|
|
|
this.manipulationDOM['editModeLabelSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['editModeLabelSpan'] = document.createElement('div'); |
|
|
|
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); |
|
|
|
this._bindHammerToDiv(this.manipulationDOM['editModeSpan'],'_toggleEditMode'); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
exports._bindHammerToDiv = function(domElement, funct) { |
|
|
|
var hammer = Hammer(domElement, {prevent_default: true}); |
|
|
|
hammer.on('touch', this[funct].bind(this)); |
|
|
|
this.manipulationHammers.push(hammer); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* Create the toolbar for adding Nodes |
|
|
@ -214,9 +236,9 @@ exports._createAddNodeToolbar = function() { |
|
|
|
var locale = this.constants.locales[this.constants.locale]; |
|
|
|
|
|
|
|
this.manipulationDOM = {}; |
|
|
|
this.manipulationDOM['backSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['backSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['backSpan'].className = 'network-manipulationUI back'; |
|
|
|
this.manipulationDOM['backLabelSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['backLabelSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel'; |
|
|
|
this.manipulationDOM['backLabelSpan'].innerHTML = locale['back']; |
|
|
|
this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']); |
|
|
@ -224,9 +246,9 @@ exports._createAddNodeToolbar = function() { |
|
|
|
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; |
|
|
|
|
|
|
|
this.manipulationDOM['descriptionSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['descriptionSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none'; |
|
|
|
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel'; |
|
|
|
this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['addDescription']; |
|
|
|
this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']); |
|
|
@ -236,7 +258,7 @@ exports._createAddNodeToolbar = function() { |
|
|
|
this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']); |
|
|
|
|
|
|
|
// bind the icon
|
|
|
|
this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this); |
|
|
|
this._bindHammerToDiv(this.manipulationDOM['backSpan'],'_createManipulatorBar'); |
|
|
|
|
|
|
|
// we use the boundFunction so we can reference it when we unbind it from the "select" event.
|
|
|
|
var me = this; |
|
|
@ -267,9 +289,9 @@ exports._createAddEdgeToolbar = function() { |
|
|
|
this.blockConnectingEdgeSelection = true; |
|
|
|
|
|
|
|
this.manipulationDOM = {}; |
|
|
|
this.manipulationDOM['backSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['backSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['backSpan'].className = 'network-manipulationUI back'; |
|
|
|
this.manipulationDOM['backLabelSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['backLabelSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel'; |
|
|
|
this.manipulationDOM['backLabelSpan'].innerHTML = locale['back']; |
|
|
|
this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']); |
|
|
@ -277,9 +299,9 @@ exports._createAddEdgeToolbar = function() { |
|
|
|
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; |
|
|
|
|
|
|
|
this.manipulationDOM['descriptionSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['descriptionSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none'; |
|
|
|
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel'; |
|
|
|
this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['edgeDescription']; |
|
|
|
this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']); |
|
|
@ -289,7 +311,7 @@ exports._createAddEdgeToolbar = function() { |
|
|
|
this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']); |
|
|
|
|
|
|
|
// bind the icon
|
|
|
|
this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this); |
|
|
|
this._bindHammerToDiv(this.manipulationDOM['backSpan'],'_createManipulatorBar'); |
|
|
|
|
|
|
|
// we use the boundFunction so we can reference it when we unbind it from the "select" event.
|
|
|
|
var me = this; |
|
|
@ -332,9 +354,9 @@ exports._createEditEdgeToolbar = function() { |
|
|
|
var locale = this.constants.locales[this.constants.locale]; |
|
|
|
|
|
|
|
this.manipulationDOM = {}; |
|
|
|
this.manipulationDOM['backSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['backSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['backSpan'].className = 'network-manipulationUI back'; |
|
|
|
this.manipulationDOM['backLabelSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['backLabelSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel'; |
|
|
|
this.manipulationDOM['backLabelSpan'].innerHTML = locale['back']; |
|
|
|
this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']); |
|
|
@ -342,9 +364,9 @@ exports._createEditEdgeToolbar = function() { |
|
|
|
this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine'; |
|
|
|
|
|
|
|
this.manipulationDOM['descriptionSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['descriptionSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none'; |
|
|
|
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span'); |
|
|
|
this.manipulationDOM['descriptionLabelSpan'] = document.createElement('div'); |
|
|
|
this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel'; |
|
|
|
this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['editEdgeDescription']; |
|
|
|
this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']); |
|
|
@ -354,7 +376,7 @@ exports._createEditEdgeToolbar = function() { |
|
|
|
this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']); |
|
|
|
|
|
|
|
// bind the icon
|
|
|
|
this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this); |
|
|
|
this._bindHammerToDiv(this.manipulationDOM['backSpan'],'_createManipulatorBar'); |
|
|
|
|
|
|
|
// temporarily overload functions
|
|
|
|
this.cachedFunctions["_handleTouch"] = this._handleTouch; |
|
|
|