|
|
@ -403,7 +403,7 @@ class ManipulationSystem { |
|
|
|
// load the manipulator HTML elements. All styling done in css.
|
|
|
|
if (this.manipulationDiv === undefined) { |
|
|
|
this.manipulationDiv = document.createElement('div'); |
|
|
|
this.manipulationDiv.className = 'network-manipulationDiv'; |
|
|
|
this.manipulationDiv.className = 'vis-manipulation'; |
|
|
|
if (this.editMode === true) { |
|
|
|
this.manipulationDiv.style.display = "block"; |
|
|
|
} |
|
|
@ -416,7 +416,7 @@ class ManipulationSystem { |
|
|
|
// container for the edit button.
|
|
|
|
if (this.editModeDiv === undefined) { |
|
|
|
this.editModeDiv = document.createElement('div'); |
|
|
|
this.editModeDiv.className = 'network-manipulation-editMode'; |
|
|
|
this.editModeDiv.className = 'vis-edit-mode'; |
|
|
|
if (this.editMode === true) { |
|
|
|
this.editModeDiv.style.display = "none"; |
|
|
|
} |
|
|
@ -430,7 +430,7 @@ class ManipulationSystem { |
|
|
|
// container for the close div button
|
|
|
|
if (this.closeDiv === undefined) { |
|
|
|
this.closeDiv = document.createElement('div'); |
|
|
|
this.closeDiv.className = 'network-manipulation-closeDiv'; |
|
|
|
this.closeDiv.className = 'vis-close'; |
|
|
|
this.closeDiv.style.display = this.manipulationDiv.style.display; |
|
|
|
this.canvas.frame.appendChild(this.closeDiv); |
|
|
|
} |
|
|
@ -472,7 +472,7 @@ class ManipulationSystem { |
|
|
|
|
|
|
|
// create the contents for the editMode button
|
|
|
|
let locale = this.options.locales[this.options.locale]; |
|
|
|
let button = this._createButton('editMode', 'network-manipulationUI edit editmode', locale['edit']); |
|
|
|
let button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale['edit']); |
|
|
|
this.editModeDiv.appendChild(button); |
|
|
|
|
|
|
|
// bind a hammer listener to the button, calling the function toggleEditMode.
|
|
|
@ -558,49 +558,49 @@ class ManipulationSystem { |
|
|
|
*/ |
|
|
|
_createSeperator(index = 1) { |
|
|
|
this.manipulationDOM['seperatorLineDiv' + index] = document.createElement('div'); |
|
|
|
this.manipulationDOM['seperatorLineDiv' + index].className = 'network-seperatorLine'; |
|
|
|
this.manipulationDOM['seperatorLineDiv' + index].className = 'vis-separator-line'; |
|
|
|
this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv' + index]); |
|
|
|
} |
|
|
|
|
|
|
|
// ---------------------- DOM functions for buttons --------------------------//
|
|
|
|
|
|
|
|
_createAddNodeButton(locale) { |
|
|
|
let button = this._createButton('addNode', 'network-manipulationUI add', locale['addNode']); |
|
|
|
let button = this._createButton('addNode', 'vis-button vis-add', locale['addNode']); |
|
|
|
this.manipulationDiv.appendChild(button); |
|
|
|
this._bindHammerToDiv(button, this.addNodeMode.bind(this)); |
|
|
|
} |
|
|
|
|
|
|
|
_createAddEdgeButton(locale) { |
|
|
|
let button = this._createButton('addEdge', 'network-manipulationUI connect', locale['addEdge']); |
|
|
|
let button = this._createButton('addEdge', 'vis-button vis-connect', locale['addEdge']); |
|
|
|
this.manipulationDiv.appendChild(button); |
|
|
|
this._bindHammerToDiv(button, this.addEdgeMode.bind(this)); |
|
|
|
} |
|
|
|
|
|
|
|
_createEditNodeButton(locale) { |
|
|
|
let button = this._createButton('editNode', 'network-manipulationUI edit', locale['editNode']); |
|
|
|
let button = this._createButton('editNode', 'vis-button vis-edit', locale['editNode']); |
|
|
|
this.manipulationDiv.appendChild(button); |
|
|
|
this._bindHammerToDiv(button, this.editNode.bind(this)); |
|
|
|
} |
|
|
|
|
|
|
|
_createEditEdgeButton(locale) { |
|
|
|
let button = this._createButton('editEdge', 'network-manipulationUI edit', locale['editEdge']); |
|
|
|
let button = this._createButton('editEdge', 'vis-button vis-edit', locale['editEdge']); |
|
|
|
this.manipulationDiv.appendChild(button); |
|
|
|
this._bindHammerToDiv(button, this.editEdgeMode.bind(this)); |
|
|
|
} |
|
|
|
|
|
|
|
_createDeleteButton(locale) { |
|
|
|
let button = this._createButton('delete', 'network-manipulationUI delete', locale['del']); |
|
|
|
let button = this._createButton('delete', 'vis-button vis-delete', locale['del']); |
|
|
|
this.manipulationDiv.appendChild(button); |
|
|
|
this._bindHammerToDiv(button, this.deleteSelected.bind(this)); |
|
|
|
} |
|
|
|
|
|
|
|
_createBackButton(locale) { |
|
|
|
let button = this._createButton('back', 'network-manipulationUI back', locale['back']); |
|
|
|
let button = this._createButton('back', 'vis-button vis-back', locale['back']); |
|
|
|
this.manipulationDiv.appendChild(button); |
|
|
|
this._bindHammerToDiv(button, this.showManipulatorToolbar.bind(this)); |
|
|
|
} |
|
|
|
|
|
|
|
_createButton(id, className, label, labelClassName = 'network-manipulationLabel') { |
|
|
|
_createButton(id, className, label, labelClassName = 'vis-label') { |
|
|
|
this.manipulationDOM[id+"Div"] = document.createElement('div'); |
|
|
|
this.manipulationDOM[id+"Div"].className = className; |
|
|
|
this.manipulationDOM[id+"Label"] = document.createElement('div'); |
|
|
@ -612,7 +612,7 @@ class ManipulationSystem { |
|
|
|
|
|
|
|
_createDescription(label) { |
|
|
|
this.manipulationDiv.appendChild( |
|
|
|
this._createButton('description', 'network-manipulationUI none', label) |
|
|
|
this._createButton('description', 'vis-button vis-none', label) |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|