Browse Source

Merge remote-tracking branch 'origin/v4' into v4

flowchartTest
Alex de Mulder 9 years ago
parent
commit
8a57330192
5 changed files with 60 additions and 54 deletions
  1. +32
    -27
      lib/network/css/network-manipulation.css
  2. +12
    -12
      lib/network/css/network-navigation.css
  3. +1
    -1
      lib/network/modules/Canvas.js
  4. +13
    -13
      lib/network/modules/ManipulationSystem.js
  5. +2
    -1
      lib/network/modules/components/NavigationHandler.js

+ 32
- 27
lib/network/css/network-manipulation.css View File

@ -1,4 +1,4 @@
div.network-manipulationDiv {
div.vis-network div.vis-manipulation {
border-width: 0;
border-bottom: 1px;
border-style:solid;
@ -19,14 +19,16 @@ div.network-manipulationDiv {
height: 30px;
}
div.network-manipulation-editMode {
div.vis-network div.vis-edit-mode {
position:absolute;
left: 0;
top: 15px;
height: 30px;
}
div.network-manipulation-closeDiv {
/* FIXME: shouldn't the vis-close button be a child of the vis-manipulation div? */
div.vis-network div.vis-close {
position:absolute;
right: 0;
top: 0;
@ -45,13 +47,14 @@ div.network-manipulation-closeDiv {
user-select: none;
}
div.network-manipulation-closeDiv:hover {
div.vis-network div.vis-close:hover {
opacity: 0.6;
}
div.network-manipulationUI {
position:relative;
top:-7px;
div.vis-network div.vis-manipulation div.vis-button,
div.vis-network div.vis-edit-mode div.vis-button {
position:relative;
top:-7px;
font-family: verdana;
font-size: 12px;
-moz-border-radius: 15px;
@ -72,72 +75,74 @@ div.network-manipulationUI {
user-select: none;
}
div.network-manipulationUI:hover {
div.vis-network div.vis-manipulation div.vis-button:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
}
div.network-manipulationUI:active {
div.vis-network div.vis-manipulation div.vis-button:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
}
div.network-manipulationUI.back {
div.vis-network div.vis-manipulation div.vis-button.vis-back {
background-image: url("img/network/backIcon.png");
}
div.network-manipulationUI.none:hover {
div.vis-network div.vis-manipulation div.vis-button.vis-none:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
cursor: default;
}
div.network-manipulationUI.none:active {
div.vis-network div.vis-manipulation div.vis-button.vis-none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
}
div.network-manipulationUI.none {
div.vis-network div.vis-manipulation div.vis-button.vis-none {
padding: 0;
}
div.network-manipulationUI.notification{
div.vis-network div.vis-manipulation div.notification {
margin: 2px;
font-weight: bold;
}
div.network-manipulationUI.add {
div.vis-network div.vis-manipulation div.vis-button.vis-add {
background-image: url("img/network/addNodeIcon.png");
}
div.network-manipulationUI.edit {
div.vis-network div.vis-manipulation div.vis-button.vis-edit,
div.vis-network div.vis-edit-mode div.vis-button.vis-edit {
background-image: url("img/network/editIcon.png");
}
div.network-manipulationUI.edit.editmode {
div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode {
background-color: #fcfcfc;
border-style:solid;
border-width:1px;
border-color: #cccccc;
border: 1px solid #cccccc;
}
div.network-manipulationUI.connect {
div.vis-network div.vis-manipulation div.vis-button.vis-connect {
background-image: url("img/network/connectIcon.png");
}
div.network-manipulationUI.delete {
div.vis-network div.vis-manipulation div.vis-button.vis-delete {
background-image: url("img/network/deleteIcon.png");
}
/* top right bottom left */
div.network-manipulationLabel {
margin: 0px 0px 0px 23px;
div.vis-network div.vis-manipulation div.vis-label,
div.vis-network div.vis-edit-mode div.vis-label {
margin: 0 0 0 23px;
line-height: 25px;
}
div.network-seperatorLine {
div.vis-network div.vis-manipulation div.vis-separator-line {
display:inline-block;
width:1px;
height:20px;
background-color: #bdbdbd;
margin: 5px 7px 0px 15px;
margin: 5px 7px 0 15px;
}
/* TODO: is this redundant?
div.network-navigation_wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}
*/

+ 12
- 12
lib/network/css/network-navigation.css View File

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

+ 1
- 1
lib/network/modules/Canvas.js View File

@ -70,7 +70,7 @@ class Canvas {
}
this.frame = document.createElement('div');
this.frame.className = 'vis network-frame';
this.frame.className = 'vis-network';
this.frame.style.position = 'relative';
this.frame.style.overflow = 'hidden';
this.frame.tabIndex = 900; // tab index is required for keycharm to bind keystrokes to the div instead of the window

+ 13
- 13
lib/network/modules/ManipulationSystem.js View File

@ -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)
);
}

+ 2
- 1
lib/network/modules/components/NavigationHandler.js View File

@ -78,11 +78,12 @@ class NavigationHandler {
var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_zoomExtent'];
this.navigationDOM['wrapper'] = document.createElement('div');
this.navigationDOM['wrapper'].className = 'vis-navigation';
this.canvas.frame.appendChild(this.navigationDOM['wrapper']);
for (var i = 0; i < navigationDivs.length; i++) {
this.navigationDOM[navigationDivs[i]] = document.createElement('div');
this.navigationDOM[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
this.navigationDOM[navigationDivs[i]].className = 'vis-button vis-' + navigationDivs[i];
this.navigationDOM['wrapper'].appendChild(this.navigationDOM[navigationDivs[i]]);
var hammer = new Hammer(this.navigationDOM[navigationDivs[i]]);

Loading…
Cancel
Save