Revize ba4e8154

create NodeSymbol value object, display Group symbol list on correct position, prevent duplicate symbols in list

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

@@ -229 +229 @@
 				height: this.size.height,
 				x: 1,
 				y: 1,
-				fill: this.symbol[1],
+				fill: this.symbol.color,
 				stroke: 'black',
 				'stroke-width': 1,
 			}),
@@ -252 +252 @@
 				x: 10,
 				y: 60,
 			}, [
-				DOM.t(this.symbol[0]),
+				DOM.t(this.symbol.character),
 			]),
 			// dissolve button
 			DOM.s('g', {
@@ -309 +309 @@
 			// symbol
 			DOM.h('span', {
 				class: 'group-symbol',
-				style: 'background-color: ' + this.symbol[1] + ';',
+				style: 'background-color: ' + this.symbol.color + ';',
 				x: 10,
 				y: 55,
-				innerText: this.symbol[0],
+				innerText: this.symbol.character,
 				onClick: this._onNodeClick.bind(this),
 			}),
 			// name
@@ -330 +330 @@
 				// show symbol button
 				DOM.h('button', {
 					class: 'show-symbol-button button',
-					style: 'background-color: ' + this.symbol[1] + ';',
+					style: 'background-color: ' + this.symbol.color + ';',
 					title: 'Show symbol next to all neighbouring components',
-					innerText: this.symbol[0],
+					innerText: this.symbol.character,
 					onClick: this._onShowNeighbourIconsClick.bind(this),
 				}),
 				// include button

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

@@ -17 +17 @@
 		this.removeFromSidebarList = Utils.noop;
 
 		// components
-		this._symbolListComponent = new NodeSymbolList;
+		this._symbolListComponent = new NodeSymbolList(this);
 		this._relatedArchetypeListComponent = new NodeRelatedArchetypeList(this);
 
 		this._position = null;

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

@@ -5 +5 @@
 class NodeSymbolList {
 	/**
 	 * @constructor
+	 * @param {Node} node Node this symbol list is bound to.
 	 */
-	constructor() {
-		this._symbolList = [];
+	constructor(node) {
+		this._node = node;
+		this._symbolList = new Set;
 
-		this._width = 20;
-		this._height = 20;
+		this._symbolSize = 20;
+	}
+
+	/**
+	 * Adds a new symbol to the list.
+	 * @public
+	 * @param {array} symbol Symbol to be added to the list.
+	 */
+	add(symbol) {
+		this._symbolList.add(symbol);
+
+		this._rerender();
+	}
+
+	/**
+	 * Removes a symbol from the list.
+	 * @public
+	 * @param {array} symbol Symbol to be removed from the list.
+	 */
+	remove(symbol) {
+		this._symbolList.delete(symbol);
+
+		this._rerender();
 	}
 
 	/**
@@ -20 +43 @@
 	 */
 	render() {
 		this._rootElement = DOM.s('g', {
-			transform: 'translate(0, 30)',
+			transform: `translate(0, ${this._node.size.height})`,
 		});
 
 		return this._rootElement;
 	}
 
-	/**
-	 * Adds a new symbol to the list.
-	 * @public
-	 * @param {array} symbol Symbol to be added to the list.
-	 */
-	add(symbol) {
-		this._symbolList.push(symbol);
+	_rerender() {
+		this._rootElement.innerHTML = '';
+
+		this._symbolList.forEach(symbol => {
+			this._rootElement.appendChild(this._renderNodeSymbol(symbol));
+		});
+	}
 
-		this._rootElement.appendChild(DOM.s('g', {
-			class: 'neighbour-node-symbol ' + symbol[2],
+	_renderNodeSymbol(symbol) {
+		return DOM.s('g', {
+			class: 'neighbour-node-symbol ' + symbol.cssClass,
+			transform: `translate(${1 + this._rootElement.childNodes.length * this._symbolSize}, 1)`,
 		}, [
 			DOM.s('rect', {
 				x: 0,
 				y: 0,
-				width: this._width,
-				height: this._height,
-				fill: symbol[1],
+				width: this._symbolSize,
+				height: this._symbolSize,
+				fill: symbol.color,
 			}),
 			DOM.s('text', {
 				x: 6,
 				y: 15,
 			}, [
-				DOM.t(symbol[0]),
+				DOM.t(symbol.character),
 			]),
-		]));
-
-		this._reorderSymbols();
-	}
-
-	/**
-	 * Removes a symbol from the list.
-	 * @public
-	 * @param {array} symbol Symbol to be removed from the list.
-	 */
-	remove(symbol) {
-		this._symbolList.splice(this._symbolList.indexOf(symbol), 1);
-
-		let symbolGroup = this._rootElement.querySelector('.' + symbol[2]);
-
-		symbolGroup.remove();
-
-		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
-	 */
-	_reorderSymbols() {
-		for (var i = 0; i < this._rootElement.children.length; i++) {
-			let symbolGroup = this._rootElement.children[i];
-
-			symbolGroup.setAttribute('transform', `translate(${i * this._width + 1}, 1)`);
-		}
+		]);
 	}
 }

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

@@ -284 +284 @@
 			}, [
 				DOM.h('button', {
 					class: 'show-symbol-button button',
-					style: 'background-color: ' + this.symbol[1] + ';',
+					style: 'background-color: ' + this.symbol.color + ';',
 					title: 'Show symbol next to all neighbouring components',
-					innerText: this.symbol[0],
+					innerText: this.symbol.character,
 					onClick: this._onShowNeighbourIconsClick.bind(this),
 				}),
 				DOM.h('button', {

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

@@ -64 +64 @@
 		}, [
 			DOM.h('span', {
 				class: 'group-symbol',
-				style: 'background-color: ' + node.symbol[1] + ';',
-				innerText: node.symbol[0],
+				style: 'background-color: ' + node.symbol.color + ';',
+				innerText: node.symbol.character,
 			}),
 			DOM.h('span', {
 				class: 'group-name',

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

@@ -38 +38 @@
 			this._colorIndex = this._startColorIndex;
 		}
 		
-		return [
+		return new NodeSymbol(
 			MarkSymbol.CONST_MARK_SYMBOLS[this._symbolIndex],
 			MarkSymbol.CONST_MARK_COLORS[this._colorIndex],
 			'symbol-' + this._index++,
-		];
+		);
 	}
 
 	/**

sources/src/main/webapp/js/valueObjects/nodeSymbol.js

@@ +1 @@
+/**
+ * Class representing a node symbol.
+ */
+class NodeSymbol {
+	/**
+	 * @constructor
+	 * @param {string} character Symbol character.
+	 * @param {string} color Symbol color.
+	 * @param {string} cssClass Symbol CSS class.
+	 */
+	constructor(character, color, cssClass) {
+		this.character = character;
+		this.color = color;
+		this.cssClass = cssClass;
+	}
+}

sources/src/main/webapp/showGraph.jsp

@@ -88 +88 @@
 		<script src="js/valueObjects/coordinates.js"></script>
 		<script src="js/valueObjects/diagram.js"></script>
 		<script src="js/valueObjects/dimensions.js"></script>
+		<script src="js/valueObjects/nodeSymbol.js"></script>
 
 		<script src="js/constants.js"></script>