diff --git a/lib/network/Network.js b/lib/network/Network.js index 22a0646f..3b1a72b3 100644 --- a/lib/network/Network.js +++ b/lib/network/Network.js @@ -1267,16 +1267,6 @@ Network.prototype.setSize = function(width, height) { this.frame.canvas.width = this.frame.canvas.clientWidth; this.frame.canvas.height = this.frame.canvas.clientHeight; - if (this.manipulationDiv !== undefined) { - this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px"; - } - if (this.navigationDivs !== undefined) { - if (this.navigationDivs['wrapper'] !== undefined) { - this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px"; - this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px"; - } - } - this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height}); }; diff --git a/lib/network/css/network-manipulation.css b/lib/network/css/network-manipulation.css index dbd297f9..afa5e40f 100644 --- a/lib/network/css/network-manipulation.css +++ b/lib/network/css/network-manipulation.css @@ -1,129 +1,134 @@ div.network-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 */ + border-width: 0; + 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; - position:absolute; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 30px; } div.network-manipulation-editMode { - height:30px; - z-index:10; - position:absolute; - margin-top:20px; + position:absolute; + left: 0; + top: 0; + height: 30px; + margin-top:20px; } div.network-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/network/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; + position:absolute; + left: 0; + top: 0; + width: 30px; + height: 30px; + + margin-top: 3px; + margin-left: 590px; + background-position: 0px 0px; + background-repeat: no-repeat; + background-image: url("img/network/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.network-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; + 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.network-manipulationUI:hover { - box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20); + box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20); } span.network-manipulationUI:active { - box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50); + box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50); } span.network-manipulationUI.back { - background-image: url("img/network/backIcon.png"); + background-image: url("img/network/backIcon.png"); } span.network-manipulationUI.none:hover { - box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); - cursor: default; + box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); + cursor: default; } span.network-manipulationUI.none:active { - box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); + box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); } span.network-manipulationUI.none { - padding: 0px 0px 0px 0px; + padding: 0px 0px 0px 0px; } span.network-manipulationUI.notification{ - margin: 2px; - font-weight: bold; + margin: 2px; + font-weight: bold; } span.network-manipulationUI.add { - background-image: url("img/network/addNodeIcon.png"); + background-image: url("img/network/addNodeIcon.png"); } span.network-manipulationUI.edit { - background-image: url("img/network/editIcon.png"); + background-image: url("img/network/editIcon.png"); } span.network-manipulationUI.edit.editmode { - background-color: #fcfcfc; - border-style:solid; - border-width:1px; - border-color: #cccccc; + background-color: #fcfcfc; + border-style:solid; + border-width:1px; + border-color: #cccccc; } span.network-manipulationUI.connect { - background-image: url("img/network/connectIcon.png"); + background-image: url("img/network/connectIcon.png"); } span.network-manipulationUI.delete { - background-image: url("img/network/deleteIcon.png"); + background-image: url("img/network/deleteIcon.png"); } /* top right bottom left */ span.network-manipulationLabel { - margin: 0px 0px 0px 23px; - line-height: 25px; + margin: 0px 0px 0px 23px; + line-height: 25px; } div.network-seperatorLine { - display:inline-block; - width:1px; - height:20px; - background-color: #bdbdbd; - margin: 5px 7px 0px 15px; + display:inline-block; + width:1px; + height:20px; + background-color: #bdbdbd; + margin: 5px 7px 0px 15px; } div.network-navigation_wrapper { diff --git a/lib/network/mixins/MixinLoader.js b/lib/network/mixins/MixinLoader.js index f6970030..46b0224f 100644 --- a/lib/network/mixins/MixinLoader.js +++ b/lib/network/mixins/MixinLoader.js @@ -123,7 +123,7 @@ exports._loadManipulationSystem = function () { else { this.manipulationDiv.style.display = "none"; } - this.containerElement.insertBefore(this.manipulationDiv, this.frame); + this.frame.appendChild(this.manipulationDiv); } if (this.editModeDiv === undefined) { @@ -136,7 +136,7 @@ exports._loadManipulationSystem = function () { else { this.editModeDiv.style.display = "block"; } - this.containerElement.insertBefore(this.editModeDiv, this.frame); + this.frame.appendChild(this.editModeDiv); } if (this.closeDiv === undefined) { @@ -144,7 +144,7 @@ exports._loadManipulationSystem = function () { this.closeDiv.className = 'network-manipulation-closeDiv'; this.closeDiv.id = 'network-manipulation-closeDiv'; this.closeDiv.style.display = this.manipulationDiv.style.display; - this.containerElement.insertBefore(this.closeDiv, this.frame); + this.frame.appendChild(this.closeDiv); } // load the manipulation functions diff --git a/lib/network/mixins/NavigationMixin.js b/lib/network/mixins/NavigationMixin.js index 9db75aa2..6eb34616 100644 --- a/lib/network/mixins/NavigationMixin.js +++ b/lib/network/mixins/NavigationMixin.js @@ -27,7 +27,7 @@ exports._loadNavigationElements = function() { this.navigationDivs['wrapper'] = document.createElement('div'); this.navigationDivs['wrapper'].id = 'network-navigation_wrapper'; - this.frame.appendChild(this.navigationDivs['wrapper'],this.frame); + this.frame.appendChild(this.navigationDivs['wrapper']); var me = this; for (var i = 0; i < navigationDivs.length; i++) {