Revize 73ef4efb

Node uses NodeSymbolList to store its currently displayed symbols

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

@@ -219 +219 @@
 	 * @returns {SVGElement} SVG DOM element.
 	 */
 	_renderIncluded() {
+		// root
 		this._rootElement = DOM.s('svg', {
 			class: 'node group',
 			x: this.position.x,
@@ -283 +284 @@
 					y2: 15,
 				}),
 			]),
+			// symbol list
+			this._symbolListComponent.render(),
 		]);
 
-		// symbol list
-		this._symbolListComponent = new NodeSymbolList;
-		this._rootElement.appendChild(this._symbolListComponent.render());
-
-		this._symbolList.forEach(symbol => {
-			this._symbolListComponent.appendChild(symbol);
-		});
-
 		return this._rootElement;
 	}
 

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

@@ -16 +16 @@
 		/** @prop {function} removeFromSidebarList Hook function used to remove the node from the sidebar list it is located in before it is moved to the viewport. */
 		this.removeFromSidebarList = Utils.noop;
 
+		// components
+		this._symbolListComponent = new NodeSymbolList;
+
 		this._position = null;
 		this._size = null;
 		this._proxy = null;
@@ -31 +34 @@
 		this._isArchetypeNeighboursHighlighted = false;
 		this._isNeighbourIconsDisplayed = false;
 
-		this._symbolList = [];
 		this._relatedArchetypeMap = {};
 	}
 
@@ -40 +42 @@
 	 * @param {array} symbol Node symbol to be added.
 	 */
 	addSymbol(symbol) {
-		this._symbolList.push(symbol);
-
 		if (this.isExcluded) return;
 
-		this._symbolListComponent.appendChild(symbol);
+		this._symbolListComponent.add(symbol);
 	}
 
 	/**
@@ -52 +52 @@
 	 * @param {array} symbol Node symbol to be removed.
 	 */
 	removeSymbol(symbol) {
-		this._symbolList.splice(this._symbolList.indexOf(symbol), 1);
-
 		if (this.isExcluded) return;
 
-		this._symbolListComponent.removeChild(symbol);
+		this._symbolListComponent.remove(symbol);
 	}
 
 	/**

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

@@ -7 +7 @@
 	 * @constructor
 	 */
 	constructor() {
+		this._symbolList = [];
+
 		this._width = 20;
 		this._height = 20;
 	}
@@ -29 +31 @@
 	 * @public
 	 * @param {array} symbol Symbol to be added to the list.
 	 */
-	appendChild(symbol) {
+	add(symbol) {
+		this._symbolList.push(symbol);
+
 		this._rootElement.appendChild(DOM.s('g', {
 			class: 'neighbour-node-symbol ' + symbol[2],
 		}, [
@@ -56 +60 @@
 	 * @public
 	 * @param {array} symbol Symbol to be removed from the list.
 	 */
-	removeChild(symbol) {
+	remove(symbol) {
+		this._symbolList.splice(this._symbolList.indexOf(symbol), 1);
+
 		let symbolGroup = this._rootElement.querySelector('.' + symbol[2]);
 
 		symbolGroup.remove();

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

@@ -218 +218 @@
 	 * @returns {SVGElement} SVG DOM element.
 	 */
 	_renderIncluded() {
+		// root
 		this._rootElement = DOM.s('svg', {
 			class: 'node vertex',
 			x: this.position.x,
@@ -250 +251 @@
 			}, [
 				DOM.t(this.name),
 			]),
+			// symbol list
+			this._symbolListComponent.render(),
 		]);
 
-		// symbol list
-		this._symbolListComponent = new NodeSymbolList;
-		this._rootElement.appendChild(this._symbolListComponent.render());
-
-		this._symbolList.forEach(symbol => {
-			this._symbolListComponent.appendChild(symbol);
-		});
-
 		// related archetype icons
 		const relatedArchetypeListContainer = DOM.s('g', {
 			transform: `translate(${this.size.width}, 0)`,