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.

- node
- - - - - -
id
label
- - + node
+ + + + + +
id
label
+ +

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