diff --git a/Jakefile.js b/Jakefile.js
index 80a725f8..529abe6a 100644
--- a/Jakefile.js
+++ b/Jakefile.js
@@ -29,6 +29,8 @@ task('default', ['build', 'minify'], function () {
desc('Build the visualization library vis.js');
task('build', {async: true}, function () {
jake.mkdirP(DIST);
+ jake.mkdirP(DIST + '/img');
+
// concatenate and stringify the css files
concat({
src: [
@@ -39,7 +41,10 @@ task('build', {async: true}, function () {
'./src/timeline/component/css/item.css',
'./src/timeline/component/css/timeaxis.css',
'./src/timeline/component/css/currenttime.css',
- './src/timeline/component/css/customtime.css'
+ './src/timeline/component/css/customtime.css',
+
+ './src/graph/css/graph-manipulation.css',
+ './src/graph/css/graph-navigation.css'
],
dest: VIS_CSS,
separator: '\n'
@@ -100,14 +105,10 @@ task('build', {async: true}, function () {
});
// copy images
- wrench.copyDirSyncRecursive('./src/graph/img', DIST+ '/img', {
- forceDelete: true
- });
- wrench.copyDirSyncRecursive('./src/timeline/img', DIST+ '/img/timeline', {
+ wrench.copyDirSyncRecursive('./src/graph/img', DIST + '/img/graph', {
forceDelete: true
});
- // copy css
- wrench.copyDirSyncRecursive('./src/graph/css', DIST+ '/css', {
+ wrench.copyDirSyncRecursive('./src/timeline/img', DIST + '/img/timeline', {
forceDelete: true
});
diff --git a/dist/img/acceptDeleteIcon.png b/dist/img/acceptDeleteIcon.png
deleted file mode 100644
index 02a06285..00000000
Binary files a/dist/img/acceptDeleteIcon.png and /dev/null differ
diff --git a/dist/img/addNodeIcon.png b/dist/img/addNodeIcon.png
deleted file mode 100644
index 6fa30613..00000000
Binary files a/dist/img/addNodeIcon.png and /dev/null differ
diff --git a/dist/img/backIcon.png b/dist/img/backIcon.png
deleted file mode 100644
index e2f99126..00000000
Binary files a/dist/img/backIcon.png and /dev/null differ
diff --git a/dist/img/connectIcon.png b/dist/img/connectIcon.png
deleted file mode 100644
index 4164da1f..00000000
Binary files a/dist/img/connectIcon.png and /dev/null differ
diff --git a/dist/img/deleteIcon.png b/dist/img/deleteIcon.png
deleted file mode 100644
index 54025647..00000000
Binary files a/dist/img/deleteIcon.png and /dev/null differ
diff --git a/dist/img/editIcon.png b/dist/img/editIcon.png
deleted file mode 100644
index 494d0f00..00000000
Binary files a/dist/img/editIcon.png and /dev/null differ
diff --git a/dist/img/minus.png b/dist/img/minus.png
deleted file mode 100644
index 30698076..00000000
Binary files a/dist/img/minus.png and /dev/null differ
diff --git a/dist/img/plus.png b/dist/img/plus.png
deleted file mode 100644
index f7ab2a33..00000000
Binary files a/dist/img/plus.png and /dev/null differ
diff --git a/dist/img/zoomExtends.png b/dist/img/zoomExtends.png
deleted file mode 100644
index 74595c63..00000000
Binary files a/dist/img/zoomExtends.png and /dev/null differ
diff --git a/dist/vis.css b/dist/vis.css
index 64f86eac..6c5a0e44 100644
--- a/dist/vis.css
+++ b/dist/vis.css
@@ -271,3 +271,193 @@
cursor: move;
z-index: 9;
}
+div.graph-manipulationDiv {
+ border-width:0px;
+ border-bottom: 1px;
+ border-style:solid;
+ border-color: #d6d9d8;
+ background: #ffffff; /* Old browsers */
+ background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
+ background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
+
+ width: 600px;
+ height:30px;
+ z-index:10;
+ position:absolute;
+}
+
+div.graph-manipulation-editMode {
+ height:30px;
+ z-index:10;
+ position:absolute;
+ margin-top:20px;
+}
+
+div.graph-manipulation-closeDiv {
+ height:30px;
+ width:30px;
+ z-index:11;
+ position:absolute;
+ margin-top:3px;
+ margin-left:590px;
+ background-position: 0px 0px;
+ background-repeat:no-repeat;
+ background-image: url("img/graph/cross.png");
+ cursor: pointer;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+span.graph-manipulationUI {
+ font-family: verdana;
+ font-size: 12px;
+ -moz-border-radius: 15px;
+ border-radius: 15px;
+ display:inline-block;
+ background-position: 0px 0px;
+ background-repeat:no-repeat;
+ height:24px;
+ margin: -14px 0px 0px 10px;
+ vertical-align:middle;
+ cursor: pointer;
+ padding: 0px 8px 0px 8px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+span.graph-manipulationUI:hover {
+ box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
+}
+
+span.graph-manipulationUI:active {
+ box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
+}
+
+span.graph-manipulationUI.back {
+ background-image: url("img/graph/backIcon.png");
+}
+
+span.graph-manipulationUI.none:hover {
+ box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+ cursor: default;
+}
+span.graph-manipulationUI.none:active {
+ box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+}
+span.graph-manipulationUI.none {
+ padding: 0px 0px 0px 0px;
+}
+span.graph-manipulationUI.notification{
+ margin: 2px;
+ font-weight: bold;
+}
+
+span.graph-manipulationUI.add {
+ background-image: url("img/graph/addNodeIcon.png");
+}
+
+span.graph-manipulationUI.edit {
+ background-image: url("img/graph/editIcon.png");
+}
+
+span.graph-manipulationUI.edit.editmode {
+ background-color: #fcfcfc;
+ border-style:solid;
+ border-width:1px;
+ border-color: #cccccc;
+}
+
+span.graph-manipulationUI.connect {
+ background-image: url("img/graph/connectIcon.png");
+}
+
+span.graph-manipulationUI.delete {
+ background-image: url("img/graph/deleteIcon.png");
+}
+/* top right bottom left */
+span.graph-manipulationLabel {
+ margin: 0px 0px 0px 23px;
+ line-height: 25px;
+}
+div.graph-seperatorLine {
+ display:inline-block;
+ width:1px;
+ height:20px;
+ background-color: #bdbdbd;
+ margin: 5px 7px 0px 15px;
+}
+div.graph-navigation {
+ width:34px;
+ height:34px;
+ z-index:10;
+ -moz-border-radius: 17px;
+ border-radius: 17px;
+ position:absolute;
+ display:inline-block;
+ background-position: 2px 2px;
+ background-repeat:no-repeat;
+ cursor: pointer;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+div.graph-navigation:hover {
+ box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
+}
+
+div.graph-navigation:active {
+ box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
+}
+
+div.graph-navigation.up {
+ background-image: url("img/graph/upArrow.png");
+ margin-top:520px;
+ margin-left:55px;
+}
+div.graph-navigation.down {
+ background-image: url("img/graph/downArrow.png");
+ margin-top:560px;
+ margin-left:55px;
+}
+div.graph-navigation.left {
+ background-image: url("img/graph/leftArrow.png");
+ margin-top:560px;
+ margin-left:15px;
+}
+div.graph-navigation.right {
+ background-image: url("img/graph/rightArrow.png");
+ margin-top:560px;
+ margin-left:95px;
+}
+div.graph-navigation.zoomIn {
+ background-image: url("img/graph/plus.png");
+ margin-top:560px;
+ margin-left:555px;
+}
+div.graph-navigation.zoomOut {
+ background-image: url("img/graph/minus.png");
+ margin-top:560px;
+ margin-left:515px;
+}
+div.graph-navigation.zoomExtends {
+ background-image: url("img/graph/zoomExtends.png");
+ margin-top:520px;
+ margin-left:555px;
+}
diff --git a/examples/graph/20_navigation.html b/examples/graph/20_navigation.html
index 742d85eb..b100a868 100644
--- a/examples/graph/20_navigation.html
+++ b/examples/graph/20_navigation.html
@@ -34,7 +34,7 @@
-
+
+
+
+
-
-
+ };
+ graph = new vis.Graph(container, data, options);
+
+ // add event listeners
+ graph.on('select', function(params) {
+ document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+ });
+
+ graph.on("frameResize", function(params) {console.log(params.width,params.height)});
+
+ function clearPopUp() {
+ var saveButton = document.getElementById('saveButton');
+ var cancelButton = document.getElementById('cancelButton');
+ saveButton.onclick = null;
+ cancelButton.onclick = null;
+ var div = document.getElementById('graph-popUp');
+ div.style.display = 'none';
+
+ }
+
+ function saveData(data,callback) {
+ var idInput = document.getElementById('node-id');
+ var labelInput = document.getElementById('node-label');
+ var div = document.getElementById('graph-popUp');
+ data.id = idInput.value;
+ data.label = labelInput.value;
+ clearPopUp();
+ callback(data);
+
+ }
+ }
+
Editing the dataset
- In this example we have enabled the data manipulation setting. If the dataManipulation option is set to true, the edit button will appear.
- If you prefer to have the toolbar visible initially, you can set the initiallyVisible option to true. The exact method is described in the docs.
-
- The data manipulation allows the user to add nodes, connect them, edit them and delete any selected items. In this example we have created trigger functions
- for the add and edit operations. By settings these trigger functions the user can direct the way the data is manipulated. In this example we have created a simple
- pop-up that allows us to edit some of the properties.
+ In this example we have enabled the data manipulation setting. If the dataManipulation option is set to true, the edit button will appear.
+ If you prefer to have the toolbar visible initially, you can set the initiallyVisible option to true. The exact method is described in the docs.
+
+ The data manipulation allows the user to add nodes, connect them, edit them and delete any selected items. In this example we have created trigger functions
+ for the add and edit operations. By settings these trigger functions the user can direct the way the data is manipulated. In this example we have created a simple
+ pop-up that allows us to edit some of the properties.
diff --git a/src/graph/css/graph-manipulation.css b/src/graph/css/graph-manipulation.css
index 6d0b41ce..4d25df2f 100644
--- a/src/graph/css/graph-manipulation.css
+++ b/src/graph/css/graph-manipulation.css
@@ -34,7 +34,7 @@ div.graph-manipulation-closeDiv {
margin-left:590px;
background-position: 0px 0px;
background-repeat:no-repeat;
- background-image: url("../../dist/img/cross.png");
+ background-image: url("img/graph/cross.png");
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
@@ -74,7 +74,7 @@ span.graph-manipulationUI:active {
}
span.graph-manipulationUI.back {
- background-image: url("../../dist/img/backIcon.png");
+ background-image: url("img/graph/backIcon.png");
}
span.graph-manipulationUI.none:hover {
@@ -93,11 +93,11 @@ span.graph-manipulationUI.notification{
}
span.graph-manipulationUI.add {
- background-image: url("../../dist/img/addNodeIcon.png");
+ background-image: url("img/graph/addNodeIcon.png");
}
span.graph-manipulationUI.edit {
- background-image: url("../../dist/img/editIcon.png");
+ background-image: url("img/graph/editIcon.png");
}
span.graph-manipulationUI.edit.editmode {
@@ -108,11 +108,11 @@ span.graph-manipulationUI.edit.editmode {
}
span.graph-manipulationUI.connect {
- background-image: url("../../dist/img/connectIcon.png");
+ background-image: url("img/graph/connectIcon.png");
}
span.graph-manipulationUI.delete {
- background-image: url("../../dist/img/deleteIcon.png");
+ background-image: url("img/graph/deleteIcon.png");
}
/* top right bottom left */
span.graph-manipulationLabel {
diff --git a/src/graph/css/graph-navigation.css b/src/graph/css/graph-navigation.css
index f72c496a..8c610d4c 100644
--- a/src/graph/css/graph-navigation.css
+++ b/src/graph/css/graph-navigation.css
@@ -26,37 +26,37 @@ div.graph-navigation:active {
}
div.graph-navigation.up {
- background-image: url("../../dist/img/upArrow.png");
+ background-image: url("img/graph/upArrow.png");
margin-top:520px;
margin-left:55px;
}
div.graph-navigation.down {
- background-image: url("../../dist/img/downArrow.png");
+ background-image: url("img/graph/downArrow.png");
margin-top:560px;
margin-left:55px;
}
div.graph-navigation.left {
- background-image: url("../../dist/img/leftArrow.png");
+ background-image: url("img/graph/leftArrow.png");
margin-top:560px;
margin-left:15px;
}
div.graph-navigation.right {
- background-image: url("../../dist/img/rightArrow.png");
+ background-image: url("img/graph/rightArrow.png");
margin-top:560px;
margin-left:95px;
}
div.graph-navigation.zoomIn {
- background-image: url("../../dist/img/plus.png");
+ background-image: url("img/graph/plus.png");
margin-top:560px;
margin-left:555px;
}
div.graph-navigation.zoomOut {
- background-image: url("../../dist/img/minus.png");
+ background-image: url("img/graph/minus.png");
margin-top:560px;
margin-left:515px;
}
div.graph-navigation.zoomExtends {
- background-image: url("../../dist/img/zoomExtends.png");
+ background-image: url("img/graph/zoomExtends.png");
margin-top:520px;
margin-left:555px;
}
\ No newline at end of file