Revize 8ed8cecb

various fixes

sources/src/main/webapp/css/components/header.css

@@ -1 +1 @@
 .header {
 	position: relative;
 	width: 100%;
+	height: 60px;
 	background: -webkit-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
 }
 

sources/src/main/webapp/css/components/navbar.css

@@ -1 +1 @@
 .navbar {
+	height: 43px;
 	background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
 	color: #cceefc;
 }

sources/src/main/webapp/css/components/sidebar.css

@@ -1 +1 @@
 .sidebar {
+    z-index: 0;
 	display: flex;
 	flex-basis: 350px;
 	flex-direction: column;
@@ -18 +19 @@
 	max-width: 100%;
 }
 
-.sidebar-navbar {
-    position: fixed;
-    width: 350px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-
-.sidebar-navbar .button {
-	height: 30px;
-}
-
-.sidebar-navbar .button img {
-	max-height: 20px;
-	margin-top: -4px;
-	margin-right: 5px;
-	vertical-align: -4px;
-}
-
-.sidebar-container {
-	margin-top: 50px;
-	overflow-y: overlay;
-}
-
 .sidebar .node-container {
 	position: relative;
+	overflow-y: overlay;
 }
 
 .sidebar .node-container-title {
 	font-size: 1.2em;
 	padding-left: 0.5em;
 	padding-right: 0.5em;
+	cursor: pointer;
 }
 
 .sidebar .button-group {
 	position: absolute;
-	top: 0;
-	right: 1em;
+    top: 1em;
+	right: 1.5em;
 }
 
 .sidebar .button-group > * {
@@ -94 +74 @@
 .sidebar .excluded-nodes {
     min-height: 20%;
     border-top: 1px solid #7db9e8;
-    overflow-y: auto;
 }
 
 .sidebar .excluded-nodes .button-group {

sources/src/main/webapp/js/components/attribute.js

@@ -25 +25 @@
 		]);
 
 		return this._rootElement;
-	};
+	}
 
 	/**
 	 * @private

sources/src/main/webapp/js/components/groupVertexList.js

@@ -36 +36 @@
 		this._rootElement.setAttribute('class', 'group-vertex-list');
 
 		return this._rootElement;
-	};
+	}
 
 	/**
 	 * Adds a new vertex to the list. Binds user interactions to local handler functions.

sources/src/main/webapp/js/components/navbar.js

@@ -313 +313 @@
 						applyLayoutImg.setAttribute('src', 'images/layout_on.png');
 
 						layouting = true;
-						layoutingInterval = window.setInterval(app.viewportComponent.forceDirected.run, 10);
+						layoutingInterval = window.setInterval(() => app.viewportComponent.forceDirected.run(), 10);
 					}
 				},
 			}, [

sources/src/main/webapp/js/components/node.js

@@ -59 +59 @@
 		this._symbolListComponent.removeChild(symbol);
 	}
 
+	/**
+	 * @returns {string} Unique identifier of a graph node (group or vertex).
+	 */
+	get uniqueId() {
+		let prefix;
+		if (this instanceof Vertex) {
+			prefix = 'vertex-';
+		} else if (this instanceof Group) {
+			prefix = 'group-';
+		} else {
+			prefix = '';
+		}
+
+		return prefix + this.id;
+	}
+
 	/**
 	 * @returns {Coordinates} Current position of the node.
 	 */

sources/src/main/webapp/js/components/sidebar.js

@@ -8 +8 @@
 		/** @prop {SidebarExcludedNodeList} excludedNodeListComponent */
 		this.excludedNodeListComponent = new SidebarExcludedNodeList;
 		/** @prop {Minimap} minimapComponent */
-		this.minimapComponent = new Minimap;
+		this.minimapComponent = new Minimap('#graph');
 		/** @prop {StatusBar} statusBarComponent */
 		this.statusBarComponent = new StatusBar;
 	}
@@ -18 +18 @@
 			class: 'sidebar',
 			id: 'sidebar',
 		}, [
-			DOM.h('nav', {
-				class: 'sidebar-navbar',
-				id: 'uploadMenu',
-			}, [
-				// toggle unconnected list button
-				DOM.h('button', {
-					class: 'button',
-					id: 'unconnectedButton',
-					title: 'Unconnected nodes',
-					innerText: 'Unconnected nodes',
-					onClick: () => {
-						this.unconnectedNodeListComponent.toggle();
-						app.redrawEdges();
-					},
-				}, [
-					DOM.h('img', {
-						src: 'images/tochange/unconnected.gif',
-						alt: 'Icon of "toggle unconnected nodes list" action',
-					}),
-				]),
-			]),
-			DOM.h('div', {
-				class: 'sidebar-container',
-			}, [
-				this.unconnectedNodeListComponent.render(),
-			]),
+			this.unconnectedNodeListComponent.render(),
 			this.excludedNodeListComponent.render(),
 			DOM.h('div', {
 				class: 'sidebar-bottom',

sources/src/main/webapp/js/components/sidebarExcludedNodeList.js

@@ -10 +10 @@
 		super({
 			title: 'Excluded nodes',
 			class: 'node-container excluded-nodes',
-			id: '',	// TODO: remove as soon as Sidebar is reworked
+			id: 'excludedNodeListComponent',
 		});
 	}
 

sources/src/main/webapp/js/components/sidebarNodeList.js

@@ -79 +79 @@
 		this._nodeListElement = DOM.h('ul', {
 			class: 'node-list',
 		});
+		
+		// content
+		const containerContent = DOM.h('div', {
+			class: 'node-container-content',
+			hidden: 'hidden',
+		}, [
+			this._buttonGroupElement,
+			this._sortOptionsElement,
+			this._nodeListElement,
+		]);
 
 		// root
 		this._rootElement = DOM.h('div', {
@@ -90 +100 @@
 			DOM.h('h2', {
 				class: 'node-container-title',
 				innerText: this._properties.title,
+				onClick: () => {
+					if (containerContent.hasAttribute('hidden')) {
+						containerContent.removeAttribute('hidden');
+					} else {
+						containerContent.setAttribute('hidden', 'hidden');
+					}
+
+					app.redrawEdges();
+				},
 			}),
-			this._buttonGroupElement,
-			this._sortOptionsElement,
-			this._nodeListElement,
+			// content
+			containerContent,
 		]);
 
 		return this._rootElement;
@@ -115 +133 @@
 	}
 
 	_sortByCount(sortOrder) {
-		nodeList.sort((a, b) => {
-			var aCount = (a instanceof Group) ? a.countVertices : 1;
-			var bCount = (b instanceof Group) ? b.countVertices : 1;
+		this._nodeList.sort((a, b) => {
+			var aCount = (a instanceof Group) ? a.countVertices() : 1;
+			var bCount = (b instanceof Group) ? b.countVertices() : 1;
 
 			return sortOrder * (aCount - bCount);
 		});

sources/src/main/webapp/js/components/sidebarUnconnectedNodeList.js

@@ -7 +7 @@
 			title: 'Unconnected vertices',
 			class: 'node-container unconnected-nodes',
 			id: 'unconnectedNodeListComponent',
-			hidden: 'hidden',
 		});
 	}
 

sources/src/main/webapp/js/components/statusBar.js

@@ -41 +41 @@
 	 */
 	reset() {
 		this._componentCounterElement.innerText = '';
-	};
+	}
 
 	/**
 	 * @private

sources/src/main/webapp/js/components/vertexContextMenuList.js

@@ -27 +27 @@
 		]);
 
 		return this._rootElement;
-	};
+	}
 
 	/**
 	 * Sets a vertex that this context menu is bound to. The vertex is then added to a group.

sources/src/main/webapp/js/services/forceDirected.js

@@ -1 @@
-/**
- * @constructor
- */
-function ForceDirected() {
-
-	var forceField = {};
-	var canvas = 0;
-
-	// parametry layoutu
-	var inumber = 30; // pocet iteraci; default 300
-	var inumberClick = 20; // pocet iteraci u tlacitka
-	var repulsiveStrength = 400; // odpudiva sila (prima umera); default 450
-	var attractiveStrength = 510; // pritazliva sila (neprima umera, nesmi byt 0); default 110
-	var dampeningEffect = 1000; // tlumeni sily (nesmi byt 0); default 200
-	var borderRatio = 1; // hranice layoutu (cislo kterym se deli velikost canvasu)
-	// tahle funkce se mi nelibi, je treba to vyresit jinak, nici to layout (nechat na 1)
+class ForceDirected {
+	/**
+	 * @constructor
+	 */
+	constructor() {
+		this._forceField = {};
+		this._canvas = 0;
+
+		// parametry layoutu
+		this._repulsiveStrength = 400; // odpudiva sila (prima umera); default 450
+		this._attractiveStrength = 510; // pritazliva sila (neprima umera, nesmi byt 0); default 110
+		this._dampeningEffect = 1000; // tlumeni sily (nesmi byt 0); default 200
+		this._borderRatio = 1; // hranice layoutu (cislo kterym se deli velikost canvasu)
+		// tahle funkce se mi nelibi, je treba to vyresit jinak, nici to layout (nechat na 1)
+	}
 
 	/**
 	 * Force directed layout for visible components.
 	 */
-	this.run = function() {
-		var border = canvas / borderRatio;
+	run() {
+		var border = this._canvas / this._borderRatio;
 
-		var visibleNodes = app.viewportComponent.nodeList,
-			otherVisibleNodes = [];
+		var visibleNodes = app.viewportComponent.nodeList;
+		var otherVisibleNodes = [];
 
 		for (let i = 0; i < visibleNodes.length; i++) {
-			forceField[Utils.getUniqueId(visibleNodes[i])] = [0, 0];
+			this._forceField[visibleNodes[i].uniqueId] = [0, 0];
 		}
 
 		// calculate repulsive force
@@ -53 +52 @@
 				var distance = Math.sqrt(sum);
 
 				if (distance !== 0) {
-					forceField[Utils.getUniqueId(currNode)][0] += Math.floor(x * (repulsiveStrength / distance));
-					forceField[Utils.getUniqueId(currNode)][1] += Math.floor(y * (repulsiveStrength / distance));
+					this._forceField[currNode.uniqueId][0] += Math.floor(x * (this._repulsiveStrength / distance));
+					this._forceField[currNode.uniqueId][1] += Math.floor(y * (this._repulsiveStrength / distance));
 				}
 			}
 		}
 
 		// calculate attractive forces
-		for (let i = 0; i < visibleNodes.length; i++){
+		for (let i = 0; i < visibleNodes.length; i++) {
 			let currNode = visibleNodes[i];
 
 			let inEdgeList = currNode.inEdgeList;
@@ -77 +76 @@
 				var sum = Math.pow(x, 2) + Math.pow(y, 2);
 				var distance = Math.sqrt(sum);
 
-				forceField[Utils.getUniqueId(currNode)][0] += Math.round(-1 * x * (distance / attractiveStrength));
-				forceField[Utils.getUniqueId(currNode)][1] += Math.round(-1 * y * (distance / attractiveStrength));
+				this._forceField[currNode.uniqueId][0] += Math.round(-1 * x * (distance / this._attractiveStrength));
+				this._forceField[currNode.uniqueId][1] += Math.round(-1 * y * (distance / this._attractiveStrength));
 			}
 
 			let outEdgeList = currNode.outEdgeList;
@@ -95 +94 @@
 				var sum = Math.pow(x, 2) + Math.pow(y, 2);
 				var distance = Math.sqrt(sum);
 
-				forceField[Utils.getUniqueId(currNode)][0] += Math.round(-1 * x * (distance / attractiveStrength));
-				forceField[Utils.getUniqueId(currNode)][1] += Math.round(-1 * y * (distance / attractiveStrength));
+				this._forceField[currNode.uniqueId][0] += Math.round(-1 * x * (distance / this._attractiveStrength));
+				this._forceField[currNode.uniqueId][1] += Math.round(-1 * y * (distance / this._attractiveStrength));
 			}
 		}
 
@@ -104 +103 @@
 		for (let i = 0; i < visibleNodes.length; i++){
 			var currNode = visibleNodes[i],
 
-				halfCan = canvas / 2,
+				halfCan = this._canvas / 2,
 
 				deltaX = currNode.position.x - halfCan,
 				deltaY = currNode.position.y - halfCan;
@@ -112 +111 @@
 			// tohle drzi layout uprostred, chtelo by to vymyslet nejak lip, docela ho to kurvi
 			/*
 			 if (deltaX > 0) {
-			 currNode.x = Math.min(currNode.position.x, (canvas/2)+border);
+			 currNode.x = Math.min(currNode.position.x, (this._canvas/2)+border);
 			 } else {
-			 currNode.x = Math.max(currNode.position.x, (canvas/2)-border);
+			 currNode.x = Math.max(currNode.position.x, (this._canvas/2)-border);
 			 }
 			 if (deltaY > 0) {
-			 currNode.y = Math.min(currNode.position.y, (canvas/2)+border);
+			 currNode.y = Math.min(currNode.position.y, (this._canvas/2)+border);
 			 } else {
-			 currNode.y = Math.max(currNode.position.y, (canvas/2)-border);
+			 currNode.y = Math.max(currNode.position.y, (this._canvas/2)-border);
 			 }
 			 */
 
@@ -138 +137 @@
 			}
 
 			// force dampening
-			var forceX = Math.floor(forceField[Utils.getUniqueId(currNode)][0] / dampeningEffect),
-				forceY = Math.floor(forceField[Utils.getUniqueId(currNode)][1] / dampeningEffect);
+			var forceX = Math.floor(this._forceField[currNode.uniqueId][0] / this._dampeningEffect),
+				forceY = Math.floor(this._forceField[currNode.uniqueId][1] / this._dampeningEffect);
 
 			// adding a random effect
 			/*
@@ -159 +158 @@
 				currNode.move(coords);
 			}
 		}
-	};
-}
+	}
+}

sources/src/main/webapp/js/services/markSymbol.js

@@ -1 +1 @@
 /**
 * This class represents creation of symbols.
- * @constructor
 */
-function MarkSymbol() {
-	var CONST_MARK_SYMBOLS = ["☺", "☻", "♥", "♦", "♣", "♠", "♫", "☼", "►", "◄",
-	"▲", "▼", "■", "▬", "░", "▒", "↕", "↑", "↓", "→", "←", "↔", "╣", "╩", "╠",
-	"╚", "╝", "║", "╔", "╦", "═", "╬", "╗", "┴", "┬", "∟", "┌", "├", "┤",
-	"⌂", "+", "-", "*", "÷", "×", "=", "±", "Ø", "~", "«", "»", "¤", "¶", "§",
-	"‼", "!", "#", "$", "%", "&", "@", "A", "B", "C", "D", "E", "F", "G", "H",
-	"I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W",
-	"X", "Y", "Z",   "©", "®", "α", "β", "γ", "δ", "ε", "ζ", "η", "θ", "ι", "κ",
-	"λ", "μ", "ν", "ξ", "π", "ρ", "σ", "τ", "υ", "φ", "χ", "ψ", "ω", "Ω", "Φ",
-	"Σ", "Λ", "Δ", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-	
-	var CONST_MARK_COLORS = ["#DC143C", "#B23AEE", "#63B8FF", "#3D9140", "#B3EE3A",
-	"#FFD700", "#B7B7B7", "#FF8000"];
-
-	var removeMarkSymbolList = [];
-	var index = 0;
-	var symbolIndex = -1;
-	var colorIndex = -1;
-	var startColorIndex = 0;
+class MarkSymbol {
+	/**
+	 * @constructor
+	 */
+	constructor() {
+		this._removedSymbolList = [];
+		this._index = 0;
+		this._symbolIndex = -1;
+		this._colorIndex = -1;
+		this._startColorIndex = 0;
+	}
 
 	/**
 	* Returns symbol with unique char and color.
 	*/
-	this.getMarkSymbol = function() {
-		if (removeMarkSymbolList.length > 0) {
-			return removeMarkSymbolList.shift();
+	getMarkSymbol() {
+		if (this._removedSymbolList.length > 0) {
+			return this._removedSymbolList.shift();
 		}
 		
-		symbolIndex++;
-		colorIndex++;
+		this._symbolIndex++;
+		this._colorIndex++;
 		
-		if (colorIndex === CONST_MARK_COLORS.length) {
-			colorIndex = 0;
+		if (this._colorIndex === MarkSymbol.CONST_MARK_COLORS.length) {
+			this._colorIndex = 0;
 		}
 		
-		if (symbolIndex === CONST_MARK_SYMBOLS.length) {
-			if (startColorIndex === CONST_MARK_COLORS.length) {
-				startColorIndex = 0;
+		if (this._symbolIndex === MarkSymbol.CONST_MARK_SYMBOLS.length) {
+			if (this._startColorIndex === MarkSymbol.CONST_MARK_COLORS.length) {
+				this._startColorIndex = 0;
 			}
-			
-			symbolIndex = 0;
-			startColorIndex++;
-			colorIndex = startColorIndex;
+
+			this._symbolIndex = 0;
+			this._startColorIndex++;
+			this._colorIndex = this._startColorIndex;
 		}
 		
-		return [CONST_MARK_SYMBOLS[symbolIndex], CONST_MARK_COLORS[colorIndex], 'symbol-' + index++];
-	};
+		return [
+			MarkSymbol.CONST_MARK_SYMBOLS[this._symbolIndex],
+			MarkSymbol.CONST_MARK_COLORS[this._colorIndex],
+			'symbol-' + this._index++,
+		];
+	}
 
 	/**
 	 * Save removed symbol (char + color) to the list of removes symbols.
 	 *
 	 * @param symbol symbol to be removed
 	 */
-	this.removeSymbol = function(symbol) {
-		removeMarkSymbolList.push(symbol);
-	};
+	removeSymbol(symbol) {
+		this._removedSymbolList.push(symbol);
+	}
 }
+
+MarkSymbol.CONST_MARK_SYMBOLS = [
+	"☺", "☻", "♥", "♦", "♣", "♠", "♫", "☼", "►", "◄", "▲", "▼", "■", "▬",
+	"░", "▒", "↕", "↑", "↓", "→", "←", "↔", "╣", "╩", "╠", "╚", "╝", "║",
+	"╔", "╦", "═", "╬", "╗", "┴", "┬", "∟", "┌", "├", "┤", "⌂", "+", "-",
+	"*", "÷", "×", "=", "±", "Ø", "~", "«", "»", "¤", "¶", "§", "‼", "!",
+	"#", "$", "%", "&", "@", "A", "B", "C", "D", "E", "F", "G", "H", "I",
+	"J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W",
+	"X", "Y", "Z", "©", "®", "α", "β", "γ", "δ", "ε", "ζ", "η", "θ", "ι",
+	"κ", "λ", "μ", "ν", "ξ", "π", "ρ", "σ", "τ", "υ", "φ", "χ", "ψ", "ω",
+	"Ω", "Φ", "Σ", "Λ", "Δ", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
+];
+
+MarkSymbol.CONST_MARK_COLORS = [
+	"#DC143C", "#B23AEE", "#63B8FF", "#3D9140", "#B3EE3A",
+	"#FFD700", "#B7B7B7", "#FF8000",
+];

sources/src/main/webapp/js/services/zoom.js

@@ -1 @@
-/**
- * @constructor
- * @param {float} defaultScale Default zoom scale.
- */
-function Zoom(defaultScale) {
-	/** @prop {float} scale Current zoom scale. */
-	this.scale = defaultScale || 1;
-	
-	var steps = [ 0.1, 0.25, 0.4, 0.55, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.45, 1.6, 1.75, 1.9, 2.5, 3.5, 5 ];
-	var step = steps.indexOf(this.scale);
-	
+class Zoom {
+	/**
+	 * @param {float} scale Default zoom scale.
+	 */
+	constructor(scale = 1) {
+		this.scale = scale;
+
+		this._steps = [ 0.1, 0.25, 0.4, 0.55, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.45, 1.6, 1.75, 1.9, 2.5, 3.5, 5 ];
+		this._step = this._steps.indexOf(this.scale);
+	}
+
 	/**
 	 * Zoom in. If the current scale is maximal, it does nothing.
 	 */
-	this.zoomIn = function() {
-		if (step === steps.length - 1) return;
+	zoomIn() {
+		if (this._step === this._steps.length - 1) return;
 
-		if (step === 0) {
+		if (this._step === 0) {
 			document.querySelector('#zoomOut').classList.remove('disabled');
 			document.querySelector('#zoomOut img').src = 'images/zoom_out.png';
 		}
 
-		step++;
-		zoomChanged.call(this);
+		this._step++;
+		this._onChange();
 
-		if (step === steps.length - 1) {
+		if (this._step === this._steps.length - 1) {
 			document.querySelector('#zoomIn').classList.add('disabled');
 			document.querySelector('#zoomIn img').src = 'images/zoom_in_disabled.png';
 		}
-	};
+	}
 	
 	/**
 	 * Zoom out. If the current scale is minimal, it does nothing.
 	 */
-	this.zoomOut = function() {
-		if (step === 0) return;
+	zoomOut() {
+		if (this._step === 0) return;
 
-		if (step === steps.length - 1) {
+		if (this._step === this._steps.length - 1) {
 			document.querySelector('#zoomIn').classList.remove('disabled');
 			document.querySelector('#zoomIn img').src = 'images/zoom_in.png';
 		}
 
-		step--;
-		zoomChanged.call(this);
+		this._step--;
+		this._onChange();
 
-		if (step === 0) {
+		if (this._step === 0) {
 			document.querySelector('#zoomOut').classList.add('disabled');
 			document.querySelector('#zoomOut img').src = 'images/zoom_out_disabled.png';
 		}
-	};
+	}
 	
 	/**
 	 * Change current zoom scale according to currently selected step.
 	 */
-	function zoomChanged() {
-		this.scale = steps[step];
+	_onChange() {
+		this.scale = this._steps[this._step];
 		
 		document.getElementById('zoomValue').innerText = Math.round(this.scale * 100) + '%';
 		document.getElementById('graph').setAttribute('transform', 'scale(' + this.scale + ')');
 
 		// TODO: zoom to mouse position / center
-		
+
 		app.redrawEdges();
 	}
 }

sources/src/main/webapp/js/utils/utils.js

@@ -56 +56 @@
 
 		return false;
 	}
-
-    /**
-     * @param {(Vertex|Group)} node Graph node.
-     * @returns {string} Unique identifier of a graph node (group or vertex).
-     */
-    static getUniqueId(node) {
-    	if (Utils.isUndefined(node)) return '';
-
-    	var prefix;
-        if (node instanceof Vertex) {
-            prefix = 'vertex-';
-        } else if (node instanceof Group) {
-            prefix = 'group-';
-        } else {
-            prefix = '';
-        }
-
-        return prefix + node.id;
-    }
 }