Revize 6e6b3160

reworked VertexSymbolList to ES6 class, fixed CSS class of a symbol to be always valid

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

@@ -1 +1 @@
 /**
  * Class representing list of symbols displayed next to a vertex to marks its relation to other an other, excluded vertices.
  * @see Vertex
- * @constructor
  */
-function VertexSymbolList() {
-	var rootElement;
-
-	var width = 20;
+class VertexSymbolList {
+	/**
+	 * @constructor
+	 */
+	constructor() {
+		this._width = 20;
+		this._height = 20;
+	}
 
 	/**
-	 * Adds a new symbol to the list.
-	 * @param {array} symbol Symbol to be added to the list.
+	 * Creates a new DOM element representing the list of symbols in memory.
+	 * @public
+	 * @returns {SVGElement} SVG DOM element.
 	 */
-	this.appendChild = function(symbol) {
-		var symbolGroup = DOM.createSvgElement('g', {
-			'class': `neighbour-node-symbol symbol-${symbol[0]}`,
+	render() {
+		this._rootElement = DOM.s('g', {
+			transform: 'translate(0, 30)',
 		});
-		rootElement.appendChild(symbolGroup);
 
-		symbolGroup.appendChild(DOM.createSvgElement('rect', {
-			'x': 0,
-			'y': 0,
-			'width': width,
-			'height': 20,
-			'fill': symbol[1],
-		}));
+		return this._rootElement;
+	}
 
-		var symbolText = DOM.createSvgElement('text', {
-			'x': 6,
-			'y': 15,
-		});
-		symbolText.appendChild(document.createTextNode(symbol[0]));
-		symbolGroup.appendChild(symbolText);
+	/**
+	 * Adds a new symbol to the list.
+	 * @public
+	 * @param {array} symbol Symbol to be added to the list.
+	 */
+	appendChild(symbol) {
+		this._rootElement.appendChild(DOM.s('g', {
+			class: 'neighbour-node-symbol ' + symbol[2],
+		}, [
+			DOM.s('rect', {
+				x: 0,
+				y: 0,
+				width: this._width,
+				height: this._height,
+				fill: symbol[1],
+			}),
+			DOM.s('text', {
+				x: 6,
+				y: 15,
+			}, [
+				DOM.t(symbol[0]),
+			]),
+		]));
 
-		reorderSymbols();
-	};
+		this._reorderSymbols();
+	}
 
 	/**
 	 * Removes a symbol from the list.
+	 * @public
 	 * @param {array} symbol Symbol to be removed from the list.
 	 */
-	this.removeChild = function(symbol) {
-		var symbolGroup = rootElement.querySelector(`.symbol-${symbol[0]}`)
+	removeChild(symbol) {
+		let symbolGroup = this._rootElement.querySelector('.' + symbol[2]);
 
 		symbolGroup.remove();
 
-		reorderSymbols();
-	};
-
-	/**
-	 * Creates a new DOM element representing the list of symbols in memory.
-	 * @param {Element} symbol SVG DOM element.
-	 */
-	this.render = function(symbol) {
-		rootElement = DOM.createSvgElement('g', {
-			'transform': 'translate(0, 30)',
-		});
-
-		return rootElement;
-	};
+		this._reorderSymbols();
+	}
 
 	/**
 	 * Changes the order of symbols displayed in the list. It is used to refresh their position after one is added or removed.
+	 * @private
 	 */
-	function reorderSymbols() {
-		for (var i = 0; i < rootElement.children.length; i++) {
-			var symbolGroup = rootElement.children[i];
+	_reorderSymbols() {
+		for (var i = 0; i < this._rootElement.children.length; i++) {
+			let symbolGroup = this._rootElement.children[i];
 
-			symbolGroup.setAttribute('transform', `translate(${i * width + 1}, 1)`);
+			symbolGroup.setAttribute('transform', `translate(${i * this._width + 1}, 1)`);
 		}
 	}
 }

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

@@ -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 symbolIndex = -1;
-	var colorIndex = -1;
-	var startColorIndex = 0;
-
-	/**
-	* Returns symbol with unique char and color.
-	*/
-	this.getMarkSymbol = function() {
-		if (removeMarkSymbolList.length > 0) {
-			return removeMarkSymbolList.shift();
-		}
-		
-		symbolIndex++;
-		colorIndex++;
-		
-		if (colorIndex === CONST_MARK_COLORS.length) {
-			colorIndex = 0;
-		}
-		
-		if (symbolIndex === CONST_MARK_SYMBOLS.length) {
-			if (startColorIndex === CONST_MARK_COLORS.length) {
-				startColorIndex = 0;
-			}
-			
-			symbolIndex = 0;
-			startColorIndex++;
-			colorIndex = startColorIndex;
-		}
-		
-		return [CONST_MARK_SYMBOLS[symbolIndex], CONST_MARK_COLORS[colorIndex]];
-	};
-
-	/**
-	 * Save removed symbol (char + color) to the list of removes symbols.
-	 *
-	 * @param symbol symbol to be removed
-	 */
-	this.removeSymbol = function(symbol) {
-		removeMarkSymbolList.push(symbol);
-	};
-}

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

@@ +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;
+
+	/**
+	* Returns symbol with unique char and color.
+	*/
+	this.getMarkSymbol = function() {
+		if (removeMarkSymbolList.length > 0) {
+			return removeMarkSymbolList.shift();
+		}
+		
+		symbolIndex++;
+		colorIndex++;
+		
+		if (colorIndex === CONST_MARK_COLORS.length) {
+			colorIndex = 0;
+		}
+		
+		if (symbolIndex === CONST_MARK_SYMBOLS.length) {
+			if (startColorIndex === CONST_MARK_COLORS.length) {
+				startColorIndex = 0;
+			}
+			
+			symbolIndex = 0;
+			startColorIndex++;
+			colorIndex = startColorIndex;
+		}
+		
+		return [CONST_MARK_SYMBOLS[symbolIndex], CONST_MARK_COLORS[colorIndex], 'symbol-' + 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);
+	};
+}

sources/src/main/webapp/showGraph.jsp

@@ -59 +59 @@
 		<script src="js/services/graphLoader.js"></script>
 		<script src="js/services/graphExporter.js"></script>
 		<script src="js/services/loader.js"></script>
+		<script src="js/services/markSymbol.js"></script>
 		<script src="js/services/zoom.js"></script>
 
 		<script src="js/utils/ajax.js"></script>
@@ -70 +71 @@
 		<script src="js/valueObjects/diagram.js"></script>
 		<script src="js/valueObjects/dimensions.js"></script>
 
-		<script src="js/markSymbol.js"></script>
 		<script src="js/constants.js"></script>
 
 		<script src="js/app.js"></script>