Revize 96013335

detach NodeRelatedArchetypeList to a separate component

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

@@ -60 +60 @@
 		});
 
 		let vertexRelatedArchetypeMap = vertex.relatedArchetypeMap;
-		for (let archetypeIndex in vertexRelatedArchetypeMap) {
-			if (this.relatedArchetypeMap.hasOwnProperty(archetypeIndex) === false) {
-				this.relatedArchetypeMap[archetypeIndex] = 0;
-			}
-
-			this.relatedArchetypeMap[archetypeIndex] += vertexRelatedArchetypeMap[archetypeIndex];
-		}
+		vertexRelatedArchetypeMap.forEach((value, key) => {
+			this._relatedArchetypeListComponent.add(key, value);
+		});
 
 		app.viewportComponent.removeNode(vertex);
 
@@ -99 +95 @@
 		});
 
 		let vertexRelatedArchetypeMap = vertex.relatedArchetypeMap;
-		for (let archetypeIndex in vertexRelatedArchetypeMap) {
-			this.relatedArchetypeMap[archetypeIndex] -= vertexRelatedArchetypeMap[archetypeIndex];
-		}
+		vertexRelatedArchetypeMap.forEach((value, key) => {
+			this._relatedArchetypeListComponent.remove(key, value);
+		});
 
 		app.viewportComponent.addNode(vertex);
 
@@ -295 +291 @@
 	 * @returns {HTMLElement} HTML DOM element.
 	 */
 	_renderExcluded() {
-		const svg = DOM.s('svg', {
-			xmlns: 'http://www.w3.org/2000/svg',
-			height: 60,
-			width: 46,
-		});
-
-		// related archetypes
-		const relatedArchetypesGroup = DOM.s('g', {
-			transform: 'translate(10, 15)',
-		});
-		svg.appendChild(relatedArchetypesGroup);
-
-		let archetypeIconOrder = 0;
-		for (let archetypeIndex in this.relatedArchetypeMap) {
-			relatedArchetypesGroup.appendChild(DOM.s('g', {
-				class: 'related-archetype',
-				transform: `translate(0, ${archetypeIconOrder * 20})`,
-			}, [
-				// counter
-				DOM.s('text', {}, [
-					DOM.t(this.relatedArchetypeMap[archetypeIndex]),
-				]),
-				// icon
-				DOM.s('use', {
-					href: '#vertexArchetypeIcon-' + app.archetype.vertex[archetypeIndex].name,
-					class: 'archetype-icon',
-					transform: `translate(15, -10)`,
-					onClick: this._onRelatedArchetypeIconClick.bind(this, parseInt(archetypeIndex)), // TODO when icon == null can not click on item
-				}),
-				// line
-				DOM.s('line', {
-					x1: 30,
-					y1: -5,
-					x2: 36,
-					y2: -5,
-				}),
-			]));
-
-			archetypeIconOrder++;
-		}
-
 		// vertex list
 		this._vertexListComponent = new GroupVertexList(this);
 
@@ -344 +299 @@
 			class: 'node group',
 			'data-id': this.id,
 		}, [
-			svg,
+			// related archetypes
+			DOM.s('svg', {
+				height: this._relatedArchetypeListComponent.size.height,
+				width: 46,
+			}, [
+				this._relatedArchetypeListComponent.render(),
+			]),
 			// symbol
 			DOM.h('span', {
 				class: 'group-symbol',

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

@@ -18 +18 @@
 
 		// components
 		this._symbolListComponent = new NodeSymbolList;
+		this._relatedArchetypeListComponent = new NodeRelatedArchetypeList(this);
 
 		this._position = null;
 		this._size = null;
@@ -33 +34 @@
 		this._isProvidedNeighboursHighlighted = false;
 		this._isArchetypeNeighboursHighlighted = false;
 		this._isNeighbourIconsDisplayed = false;
-
-		this._relatedArchetypeMap = {};
 	}
 
 	/**
@@ -142 +141 @@
 	 * @returns {object} Map with archetype indexes as keys and counters of their instances as values.
 	 */
 	get relatedArchetypeMap() {
-		return this._relatedArchetypeMap;
+		return this._relatedArchetypeListComponent.map;
 	}
 
 	/**
@@ -508 +507 @@
 	 * @param {integer} archetypeIndex Index of the vertex archetype.
 	 * @param {MouseEvent} e Click event.
 	 */
-	_onRelatedArchetypeIconClick(archetypeIndex, e) {
+	onRelatedArchetypeIconClick(archetypeIndex, e) {
 		e.stopPropagation();
 
 		this.isArchetypeNeighboursHighlighted = !this.isHighlighted;

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

@@ -100 +100 @@
 			edgeOffsetY = 0;
 		}
 
-		let archetypeList = Object.keys(this._node.relatedArchetypeMap).map(archetypeIndex => parseInt(archetypeIndex));
+		let archetypeList = Array.from(this._node.relatedArchetypeMap.keys());
 		let archetypeIconOrder;
 
 		// redraw dependent edges

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

@@ +1 @@
+/**
+ * Class representing list of related archetypes displayed next to a node to mark its relation to another, excluded node.
+ * @see Node
+ */
+class NodeRelatedArchetypeList {
+	/**
+	 * @constructor
+	 */
+	constructor(node) {
+		this._node = node;
+		this._map = new Map;
+		this._iconSize = 20;
+	}
+
+	get map() {
+		return this._map;
+	}
+
+	get size() {
+		return new Dimensions(
+			this._node.isExcluded === true ? this._iconSize : (this._map.size * this._iconSize),
+			this._node.isExcluded === true ? (this._map.size * this._iconSize) : this._iconSize,
+		);
+	}
+
+	add(key, value = 1) {
+		let currentValue;
+		if (this._map.has(key) === true) {
+			currentValue = this._map.get(key);
+		} else {
+			currentValue = 0;
+		}
+
+		this._map.set(key, currentValue + value);
+		
+		this._renderIcons();
+	}
+
+	remove(key, value = 1) {
+		let currentValue;
+		if (this._map.has(key) === true) {
+			currentValue = this._map.get(key);
+		} else {
+			currentValue = 0;
+		}
+
+		this._map.set(key, currentValue - value);
+
+		this._renderIcons();
+	}
+
+	render() {
+		if (this._node.isExcluded === true) {
+			this._rootElement = DOM.s('g', {
+				transform: 'translate(10, 15)',
+			});
+		} else {
+			this._rootElement = DOM.s('g', {
+				transform: `translate(${this._node.size.width}, 0)`,
+			});
+		}
+
+		this._renderIcons();
+
+		return this._rootElement;
+	}
+	
+	_renderIcons() {
+		if (Utils.isUndefined(this._rootElement)) return;
+		
+		this._rootElement.innerHTML = '';
+
+		let iconOrder = 0;
+		this._map.forEach((value, key) => {
+			if (this._node.isExcluded === true) {
+				this._rootElement.appendChild(DOM.s('g', {
+					class: 'related-archetype',
+					transform: `translate(0, ${iconOrder * this._iconSize})`,
+				}, [
+					// counter
+					DOM.s('text', {}, [
+						DOM.t(value),
+					]),
+					// icon
+					DOM.s('use', {
+						href: '#vertexArchetypeIcon-' + app.archetype.vertex[key].name,
+						class: 'archetype-icon',
+						transform: `translate(15, -10)`,
+						onClick: this._node.onRelatedArchetypeIconClick.bind(this._node, key), // TODO: when icon == null can not click on item
+					}),
+					// line
+					DOM.s('line', {
+						x1: 30,
+						y1: -5,
+						x2: 36,
+						y2: -5,
+					}),
+				]));
+			} else {
+				this._rootElement.appendChild(DOM.s('use', {
+					href: '#vertexArchetypeIcon-' + app.archetype.vertex[key].name,
+					class: 'archetype-icon',
+					transform: `translate(${iconOrder * this._iconSize}, 8)`,
+					onClick: this._node.onRelatedArchetypeIconClick.bind(this._node, key), // TODO: when icon == null can not click on item
+				}));
+			}
+
+			iconOrder++;
+		});
+	}
+}

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

@@ -12 +12 @@
 		// constants
 		this._oneCharacterWidth = 8.3;	// approximate width (in pixels) of one character using Consolas at 15px font size
 		this._minimumWidth = 200;
-		this._relatedArchetypeIconWidth = 20;
 
 		// properties
 		/** @prop {integer} archetype Identifier of the vertex archetype. */
@@ -107 +106 @@
 	 * @param {integer} archetypeIndex Index of the vertex archetype.
 	 */
 	incrementRelatedArchetype(archetypeIndex) {
-		if (this.relatedArchetypeMap.hasOwnProperty(archetypeIndex) === false) {
-			this.relatedArchetypeMap[archetypeIndex] = 0;
-		}
-
-		this.relatedArchetypeMap[archetypeIndex]++;
+		this._relatedArchetypeListComponent.add(archetypeIndex);
 	}
 
 	/**
@@ -231 +226 @@
 			onMouseDown: this._onNodeMouseDown.bind(this),
 		}, [
 			DOM.s('rect', {
-				width: this.size.width + Object.keys(this.relatedArchetypeMap).length * this._relatedArchetypeIconWidth,
+				width: this.size.width + this._relatedArchetypeListComponent.size.width,
 				height: this.size.height,
 				x: 1,
 				y: 1,
@@ -253 +248 @@
 			]),
 			// symbol list
 			this._symbolListComponent.render(),
+			// related archetype list
+			this._relatedArchetypeListComponent.render(),
 		]);
 
-		// related archetype icons
-		const relatedArchetypeListContainer = DOM.s('g', {
-			transform: `translate(${this.size.width}, 0)`,
-		});
-		this._rootElement.appendChild(relatedArchetypeListContainer);
-
-		let archetypeIconOrder = 0;
-		for (let archetypeIndex in this.relatedArchetypeMap) {
-			relatedArchetypeListContainer.appendChild(DOM.s('use', {
-				href: '#vertexArchetypeIcon-' + app.archetype.vertex[archetypeIndex].name,
-				class: 'archetype-icon',
-				transform: `translate(${archetypeIconOrder * this._relatedArchetypeIconWidth}, 8)`,
-				onClick: this._onRelatedArchetypeIconClick.bind(this, parseInt(archetypeIndex)), // TODO when icon == null can not click on item
-			}));
-
-			archetypeIconOrder++;
-		}
-
 		return this._rootElement;
 	}
 
@@ -280 +259 @@
 	 * @returns {HTMLElement} HTML DOM element.
 	 */
 	_renderExcluded() {
-		const svg = DOM.s('svg', {
-			xmlns: 'http://www.w3.org/2000/svg',
-			height: 60,
-			width: 46,
-		});
-
-		// related archetypes
-		const relatedArchetypesGroup = DOM.s('g', {
-			transform: 'translate(10, 15)',
-		});
-		svg.appendChild(relatedArchetypesGroup);
-
-		let archetypeIconOrder = 0;
-		for (let archetypeIndex in this.relatedArchetypeMap) {
-			relatedArchetypesGroup.appendChild(DOM.s('g', {
-				class: 'related-archetype',
-				transform: `translate(0, ${archetypeIconOrder * 20})`,
-			}, [
-				// counter
-				DOM.s('text', {}, [
-					DOM.t(this.relatedArchetypeMap[archetypeIndex]),
-				]),
-				// icon
-				DOM.s('use', {
-					href: '#vertexArchetypeIcon-' + app.archetype.vertex[archetypeIndex].name,
-					class: 'archetype-icon',
-					transform: `translate(15, -10)`,
-					onClick: this._onRelatedArchetypeIconClick.bind(this, parseInt(archetypeIndex)), // TODO when icon == null can not click on item
-				}),
-				// line
-				DOM.s('line', {
-					x1: 30,
-					y1: -5,
-					x2: 36,
-					y2: -5,
-				}),
-			]));
-
-			archetypeIconOrder++;
-		}
-
 		// root
 		this._rootElement = DOM.h('li', {
 			class: 'node vertex',
 			'data-id': this.id,
 		}, [
-			svg,
+			// related archetypes
+			DOM.s('svg', {
+				height: this._relatedArchetypeListComponent.size.height,
+				width: 46,
+			}, [
+				this._relatedArchetypeListComponent.render(),
+			]),
 			// name
 			DOM.h('div', {
 				class: 'vertex-name',

sources/src/main/webapp/showGraph.jsp

@@ -50 +50 @@
 		<script src="js/components/loginPopup.js"></script>
 		<script src="js/components/minimap.js"></script>
 		<script src="js/components/navbar.js"></script>
+		<script src="js/components/nodeRelatedArchetypeList.js"></script>
 		<script src="js/components/nodeSymbolList.js"></script>
 		<script src="js/components/registerPopup.js"></script>
 		<script src="js/components/saveDiagramModalWindow.js"></script>