Revize 552a1fea

static util methods are used everywhere

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

@@ -15 +15 @@
 	var rootElement;
 
 	this.render = function() {
-		rootElement = app.utils.createHtmlElement('li', {});
+		rootElement = DOM.createHtmlElement('li');
 
-		rootElement.appendChild(app.dom.createTextElement(this.name + ': '));
+		rootElement.appendChild(DOM.createTextElement(this.name + ': '));
 		rootElement.appendChild(renderValue.call(this));
 
 		return rootElement;
@@ -26 +26 @@
 	function renderValue() {
 		switch (this.name) {
 			case 'URL':
-				return app.dom.htmlStringToElement(`<a href="${this.value}" target="_blank">${this.value}</a>`);
+				return DOM.htmlStringToElement(`<a href="${this.value}" target="_blank">${this.value}</a>`);
 			case 'Size':
-				return app.dom.createTextElement(formatValue.call(this) + ' B');
+				return DOM.createTextElement(formatValue.call(this) + ' B');
 			case 'Estimate':
 			case 'Spent':
-				return app.dom.createTextElement(formatValue.call(this) + ' h');
+				return DOM.createTextElement(formatValue.call(this) + ' h');
 			case 'Progress':
-				return app.dom.createTextElement(formatValue.call(this) + '%');
+				return DOM.createTextElement(formatValue.call(this) + '%');
 			default:
-				return app.dom.createTextElement(formatValue.call(this));
+				return DOM.createTextElement(formatValue.call(this));
 		}
 	}
 

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

@@ -191 +191 @@
 	 * @returns {Element} SVG DOM element.
 	 */
 	this.render = function() {
-		rootElement = app.utils.createSvgElement('g', {
+		rootElement = DOM.createSvgElement('g', {
 			'class': 'edge',
 			'data-id': props.id,
 			'data-from': props.from,
 			'data-to': props.to,
 		});
 
-		rootElement.appendChild(app.utils.createSvgElement('line', {
+		rootElement.appendChild(DOM.createSvgElement('line', {
 			'class': 'line',
 			'x1': start.x,
 			'y1': start.y,
@@ -208 +208 @@
 			'stroke-width': 5,
 		}));
 		
-		rootElement.appendChild(app.utils.createSvgElement('line', {
+		rootElement.appendChild(DOM.createSvgElement('line', {
 			'class': 'line',
 			'x1': start.x,
 			'y1': start.y,
@@ -221 +221 @@
 		var rotation = getArrowRotation.call(this);
 		
 		// arrow
-		var arrow = app.utils.createSvgElement('g', {
+		var arrow = DOM.createSvgElement('g', {
 			'class': 'arrow',
 			'data-edgeId': this.id,
 			'transform': `rotate(${rotation}, ${position.x},${position.y}) translate(${position.x},${position.y})`,
 		});
-		arrow.appendChild(app.utils.createSvgElement('polygon', {
+		arrow.appendChild(DOM.createSvgElement('polygon', {
 			'points': '0,-10 30,0 0,10',
 
 		}));

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

@@ -17 +17 @@
 		subedgeInfoList.filter(function(subedgeInfo) {
 			return subedgeInfo.attributes.length > 0;
 		}).forEach(function(subedgeInfo) {
-			var listItem = app.dom.createHtmlElement('li', {});
-			listItem.appendChild(app.dom.createTextElement(app.archetype.edge[subedgeInfo.archetype].name));
+			var listItem = DOM.createHtmlElement('li');
+			listItem.appendChild(DOM.createTextElement(app.archetype.edge[subedgeInfo.archetype].name));
 
-			var sublist = app.dom.createHtmlElement('ul', {});
+			var sublist = DOM.createHtmlElement('ul');
 			listItem.appendChild(sublist);
 
 			detailsListElement.appendChild(listItem);
@@ -61 +61 @@
 	 * @returns {Element} HTML DOM element.
 	 */
 	this.render = function() {
-		rootElement = app.utils.createHtmlElement('div', {
+		rootElement = DOM.createHtmlElement('div', {
 			'class': 'popover edge-popover hidden',
 		});
-		rootElement.addEventListener('wheel', app.utils.stopPropagation);
-		rootElement.addEventListener('mousedown', app.utils.stopPropagation);
+		rootElement.addEventListener('wheel', Utils.stopPropagation);
+		rootElement.addEventListener('mousedown', Utils.stopPropagation);
 		rootElement.addEventListener('mouseleave', this.close.bind(this));
 
-		var popoverTitle = app.utils.createHtmlElement('span', {
+		var popoverTitle = DOM.createHtmlElement('span', {
 			'class': 'popover-title',
 		});
 		popoverTitle.appendChild(document.createTextNode('Edge details'));
 		rootElement.appendChild(popoverTitle);
 
-		var popoverContent = app.utils.createHtmlElement('div', {
+		var popoverContent = DOM.createHtmlElement('div', {
 			'class': 'popover-content',
 		});
 		rootElement.appendChild(popoverContent);
 
-		detailsListElement = app.utils.createHtmlElement('ul', {});
+		detailsListElement = DOM.createHtmlElement('ul');
 		popoverContent.appendChild(detailsListElement);
 
 		return rootElement;

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

@@ -437 +437 @@
 	/**
 	 * Hook function used to remove the group from the sidebar list it is located in before it is moved to the viewport.
 	 */
-	this.removeFromSidebarList = app.utils.noop;
+	this.removeFromSidebarList = Utils.noop;
 
 	/**
 	 * Creates a new DOM element representing the group in memory. The element being created depends on whether the group
@@ -499 +499 @@
 	 * @returns {Element} SVG DOM element.
 	 */
 	function renderIncluded() {
-		rootElement = app.utils.createSvgElement('svg', {
+		rootElement = DOM.createSvgElement('svg', {
 			'class': 'node group',
 			'x': position.x,
 			'y': position.y,
@@ -508 +508 @@
 		rootElement.addEventListener('click', click.bind(this));
 		rootElement.addEventListener('mousedown', mouseDown.bind(this));
 
-		rootElement.appendChild(app.utils.createSvgElement('rect', {
+		rootElement.appendChild(DOM.createSvgElement('rect', {
 			'width': size.width,
 			'height': size.height,
 			'x': 1,
@@ -519 +519 @@
 		}));
 
 		// name
-		var nameTextInner = app.dom.createHtmlElement('span', {
+		var nameTextInner = DOM.createHtmlElement('span', {
 			'class': 'group-name',
 		});
-		nameTextInner.appendChild(app.dom.createTextElement(this.name));
+		nameTextInner.appendChild(DOM.createTextElement(this.name));
 
-		var nameText = app.utils.createSvgElement('foreignObject', {
+		var nameText = DOM.createSvgElement('foreignObject', {
 			'x': 4,
 			'y': 4,
 			'width': 46,
@@ -535 +535 @@
 		rootElement.appendChild(nameText);
 
 		// symbol
-		var symbolText = app.utils.createSvgElement('text', {
+		var symbolText = DOM.createSvgElement('text', {
 			'class': 'group-symbol',
 			'x': 10,
 			'y': 60,
@@ -544 +544 @@
 		rootElement.appendChild(symbolText);
 
 		// dissolve button
-		var dissolveButton = app.utils.createSvgElement('g', {
+		var dissolveButton = DOM.createSvgElement('g', {
 			'class': 'button dissolve-button',
 		});
-		dissolveButton.appendChild(app.utils.createSvgElement('rect', {
+		dissolveButton.appendChild(DOM.createSvgElement('rect', {
 			'rx': 4,
 			'ry': 4,
 			'x': 54,
@@ -555 +555 @@
 			'height': 14,
 			'width': 14,
 		}));
-		dissolveButton.appendChild(app.utils.createSvgElement('line', {
+		dissolveButton.appendChild(DOM.createSvgElement('line', {
 			'x1': 57,
 			'y1': 7,
 			'x2': 65,
 			'y2': 15,
 		}));
-		dissolveButton.appendChild(app.utils.createSvgElement('line', {
+		dissolveButton.appendChild(DOM.createSvgElement('line', {
 			'x1': 65,
 			'y1': 7,
 			'x2': 57,
@@ -577 +577 @@
 	 * @returns {Element} HTML DOM element.
 	 */
 	function renderExcluded() {
-		rootElement = app.utils.createHtmlElement('li', {
+		rootElement = DOM.createHtmlElement('li', {
 			'class': 'node group',
 			'data-id': this.id,
 		});
 
-		var svg = app.utils.createSvgElement('svg', {
+		var svg = DOM.createSvgElement('svg', {
 			'xmlns': 'http://www.w3.org/2000/svg',
 			'height': 60,
 			'width': 46,
@@ -590 +590 @@
 		rootElement.appendChild(svg);
 
 		// related archetypes
-		var relatedArchetypesGroup = app.dom.createSvgElement('g', {
+		var relatedArchetypesGroup = DOM.createSvgElement('g', {
 			'transform': 'translate(10, 15)',
 		});
 		svg.appendChild(relatedArchetypesGroup);
 
 		var archetypeIconOrder = 0;
 		for (var archetypeIndex in relatedArchetypeMap) {
-			var relatedArchetype = app.dom.createSvgElement('g', {
+			var relatedArchetype = DOM.createSvgElement('g', {
 				'class': 'related-archetype',
 				'transform': `translate(0, ${archetypeIconOrder * 20})`,
 			});
 			relatedArchetypesGroup.appendChild(relatedArchetype);
 
 			// counter
-			var relatedArchetypeCounter = app.dom.createSvgElement('text', {});
-			relatedArchetypeCounter.appendChild(app.dom.createTextElement(relatedArchetypeMap[archetypeIndex]));
+			var relatedArchetypeCounter = DOM.createSvgElement('text');
+			relatedArchetypeCounter.appendChild(DOM.createTextElement(relatedArchetypeMap[archetypeIndex]));
 			relatedArchetype.appendChild(relatedArchetypeCounter);
 
 			// icon
-			var relatedArchetypeIcon = app.dom.createSvgElement('use', {
+			var relatedArchetypeIcon = DOM.createSvgElement('use', {
 				'href': '#vertexArchetypeIcon-' + app.archetype.vertex[archetypeIndex].name,
 				'class': 'archetype-icon',
 				'transform': `translate(15, -10)`,
@@ -618 +618 @@
 			relatedArchetype.appendChild(relatedArchetypeIcon);
 
 			// line
-			relatedArchetype.appendChild(app.dom.createSvgElement('line', {
+			relatedArchetype.appendChild(DOM.createSvgElement('line', {
 				'x1': 30,
 				'y1': -5,
 				'x2': 36,
@@ -629 +629 @@
 		}
 
 		// symbol
-		var symbolText = app.utils.createHtmlElement('span', {
+		var symbolText = DOM.createHtmlElement('span', {
 			'class': 'group-symbol',
 			'style': 'background-color: ' + this.symbol[1] + ';',
 			'x': 10,
@@ -640 +640 @@
 		rootElement.appendChild(symbolText);
 
 		// name
-		var nameText = app.utils.createHtmlElement('span', {
+		var nameText = DOM.createHtmlElement('span', {
 			'class': 'group-name',
 		});
 		nameText.appendChild(document.createTextNode(this.name));
@@ -656 +656 @@
 		}, this);
 
 		// buttons
-		var buttonGroup = app.utils.createHtmlElement('div', {
+		var buttonGroup = DOM.createHtmlElement('div', {
 			'class': 'button-group',
 		});
 		rootElement.appendChild(buttonGroup);
 
         // show symbol button
-        var showSymbolButton = app.utils.createHtmlElement('button', {
+        var showSymbolButton = DOM.createHtmlElement('button', {
             'class': 'show-symbol-button button',
             'style': 'background-color: ' + this.symbol[1] + ';',
             'title': 'Show symbol next to all neighbouring components',
@@ -672 +672 @@
         buttonGroup.appendChild(showSymbolButton);
 
 		// include button
-		var includeButton = app.utils.createHtmlElement('button', {
+		var includeButton = DOM.createHtmlElement('button', {
 			'class': 'include-button button',
 			'title': 'Display group in viewport',
 		});
-		includeButton.appendChild(app.utils.createHtmlElement('img', {
+		includeButton.appendChild(DOM.createHtmlElement('img', {
 			'src': 'images/button_cancel.png',
 			'alt': 'Icon of "display group in viewport" action',
 		}));

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

@@ -17 +17 @@
 	this.appendChild = function(vertex) {
 		var listItemElement;
 		if (parentalGroup.isExcluded()) {
-			listItemElement = app.utils.createHtmlElement('li', {});
+			listItemElement = DOM.createHtmlElement('li');
 		} else {
-			listItemElement = app.utils.createSvgElement('text', {
+			listItemElement = DOM.createSvgElement('text', {
 				'y': listItemCounter * lineHeight,
 			});
 		}
@@ -49 +49 @@
 	 */
 	this.render = function() {
 		if (parentalGroup.isExcluded()) {
-			rootElement = app.utils.createHtmlElement('ul', {});
+			rootElement = DOM.createHtmlElement('ul');
 		} else {
-			rootElement = app.utils.createSvgElement('g', {
+			rootElement = DOM.createSvgElement('g', {
 				'transform': 'translate(70, 30)',
 			});
 		}

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

@@ -44 +44 @@
 	 * @returns {Element} HTML DOM element.
 	 */
 	this.render = function() {
-		rootElement = app.utils.createSvgElement('svg', {
+		rootElement = DOM.createSvgElement('svg', {
 			'class': 'minimap',
 			'id': 'minimapComponent',
 			'viewBox': `-100 -50 ${width} ${height}`,
 		});
 		rootElement.addEventListener('mousedown', onRootMouseDown.bind(this));
 
-		var graphElement = app.dom.createSvgElement('use', {
+		var graphElement = DOM.createSvgElement('use', {
 			'transform': `scale(${scale})`,
 		});
 		graphElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', useElement);
 		rootElement.appendChild(graphElement);
 
-		viewportElement = app.dom.createSvgElement('rect', {
+		viewportElement = DOM.createSvgElement('rect', {
 			'class': 'minimap-viewport',
 		});
 		viewportElement.addEventListener('mousedown', onViewportMouseDown.bind(this));

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

@@ -12 +12 @@
 	this.open = function() {
 		rootElement.classList.remove('hidden');
 
-		diagramForm.appendChild(app.dom.createHtmlElement('div', { class: 'err_msg' }));
-		diagramForm.appendChild(app.dom.htmlStringToElement(`<table><tbody><tr><td><label for="diagramName">Diagram name:</label></td><td><input type="text" name="diagramName" value="${app.diagram !== null ? app.diagram.name : ''}" id="diagramName" required></td></tr><tr><td><label for="diagramPublic">Is public:</label></td><td><input type="checkbox" name="diagramPublic" value="1" id="diagramPublic" ${app.diagram !== null && app.diagram.public ? 'checked' : ''}></td></tr><tr><td></td><td><button type="submit" class="button">Save</button></td></tr></tbody></table>`));
+		diagramForm.appendChild(DOM.createHtmlElement('div', { class: 'err_msg' }));
+		diagramForm.appendChild(DOM.htmlStringToElement(`<table><tbody><tr><td><label for="diagramName">Diagram name:</label></td><td><input type="text" name="diagramName" value="${app.diagram !== null ? app.diagram.name : ''}" id="diagramName" required></td></tr><tr><td><label for="diagramPublic">Is public:</label></td><td><input type="checkbox" name="diagramPublic" value="1" id="diagramPublic" ${app.diagram !== null && app.diagram.public ? 'checked' : ''}></td></tr><tr><td></td><td><button type="submit" class="button">Save</button></td></tr></tbody></table>`));
 
 		diagramForm.diagramName.focus();
 	};
@@ -32 +32 @@
 	 * @returns {Element} HTML DOM element.
 	 */
 	this.render = function() {
-		rootElement = app.utils.createHtmlElement('div', {
+		rootElement = DOM.createHtmlElement('div', {
 			'class': 'modal hidden',
 		});
 		rootElement.addEventListener('click', this.close);
 
-		var modalContent = app.utils.createHtmlElement('div', {
+		var modalContent = DOM.createHtmlElement('div', {
 			'class': 'modal-content',
 		});
-		modalContent.addEventListener('click', app.utils.stopPropagation);
+		modalContent.addEventListener('click', Utils.stopPropagation);
 		rootElement.appendChild(modalContent);
 
-		var closeButton = app.utils.createHtmlElement('button', {
+		var closeButton = DOM.createHtmlElement('button', {
 			'class': 'close-button button',
 		});
-		closeButton.appendChild(app.utils.createTextElement('×'));
+		closeButton.appendChild(DOM.createTextElement('×'));
 		closeButton.addEventListener('click', closeButtonClick.bind(this));
 		modalContent.appendChild(closeButton);
 
-		diagramForm = app.dom.createHtmlElement('form', {});
+		diagramForm = DOM.createHtmlElement('form');
 		diagramForm.addEventListener('submit', saveDiagram.bind(this));
 		modalContent.appendChild(diagramForm);
 

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

@@ -35 +35 @@
 	};
 
 	this.render = function() {
-		rootElement = app.utils.createHtmlElement('div', {
+		rootElement = DOM.createHtmlElement('div', {
 			'class': 'sidebar',
 			'id': 'sidebar',
 		});
 
-		var sidebarNav = app.utils.createHtmlElement('nav', {
+		var sidebarNav = DOM.createHtmlElement('nav', {
 			'class': 'sidebar-navbar',
 			'id': 'uploadMenu',
 		});
 		rootElement.appendChild(sidebarNav);
 
 		// unconnected
-		var unconnectedButton = app.utils.createHtmlElement('button', {
+		var unconnectedButton = DOM.createHtmlElement('button', {
 			'class': 'button',
 			'id': 'unconnectedButton',
 			'title': 'Unconnected vertices',
 		});
-		unconnectedButton.appendChild(app.dom.createHtmlElement('img', {
+		unconnectedButton.appendChild(DOM.createHtmlElement('img', {
 			'src': 'images/tochange/unconnected.gif',
 			'alt': 'Icon of "toggle unconnected vertices list" action',
 		}));
-		unconnectedButton.appendChild(app.dom.createTextElement('Unconnected vertices'));
+		unconnectedButton.appendChild(DOM.createTextElement('Unconnected vertices'));
 		unconnectedButton.addEventListener('click', function() {
 			document.getElementById('unconnectedNodeListComponent').classList.toggle('hidden');
 			app.redrawEdges();
@@ -64 +64 @@
 		sidebarNav.appendChild(unconnectedButton);
 		
 
-		var sidebarContainer = app.utils.createHtmlElement('div', {
+		var sidebarContainer = DOM.createHtmlElement('div', {
 			'class': 'sidebar-container',
 		});
 		rootElement.appendChild(sidebarContainer);
@@ -83 +83 @@
 		rootElement.appendChild(this.excludedNodeListComponent.render());
 
 
-		var sidebarBottom = app.utils.createHtmlElement('div', {
+		var sidebarBottom = DOM.createHtmlElement('div', {
 			'class': 'sidebar-bottom',
 		});
 		rootElement.appendChild(sidebarBottom);

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

@@ -39 +39 @@
 		}
 
 		// unset remove hook
-		node.removeFromSidebarList = app.utils.noop;
+		node.removeFromSidebarList = Utils.noop;
 
 		nodeList.splice(nodeList.indexOf(node), 1);
 		node.remove(false);
@@ -50 +50 @@
 	};
 
 	this.render = function() {
-		rootElement = app.utils.createHtmlElement('div', {
+		rootElement = DOM.createHtmlElement('div', {
 			'id': props.id,
 			'class': 'node-container excluded-nodes ' + (props.class ? props.class : ''),
 		});
@@ -59 +59 @@
 		});
 
 		// title
-		rootElement.appendChild(app.dom.htmlStringToElement('<h2 class="node-container-title">Excluded components</h2>'));
+		rootElement.appendChild(DOM.htmlStringToElement('<h2 class="node-container-title">Excluded components</h2>'));
 
 		// buttons
-		buttonGroup = app.utils.createHtmlElement('div', {
+		buttonGroup = DOM.createHtmlElement('div', {
 			'class': 'button-group hidden',
 		});
 		rootElement.appendChild(buttonGroup);
 
 		// include all button
-		var includeAllButton = app.utils.createHtmlElement('button', {
+		var includeAllButton = DOM.createHtmlElement('button', {
 			'class': 'include-all-button button',
 			'title': 'Display all excluded nodes in viewport',
 		});
-		includeAllButton.appendChild(app.utils.createHtmlElement('img', {
+		includeAllButton.appendChild(DOM.createHtmlElement('img', {
 			'src': 'images/button_cancel.png',
 			'alt': 'Icon of "display all excluded nodes in viewport" action',
 		}));
@@ -80 +80 @@
 		buttonGroup.appendChild(includeAllButton);
 
 		// sorting options
-		sortListElement = app.utils.createHtmlElement('ul', {
+		sortListElement = DOM.createHtmlElement('ul', {
 			'class': 'sort-list hidden',
 		});
 		rootElement.appendChild(sortListElement);
 
-		var sortByNameAscListItem = app.utils.createHtmlElement('li', {
+		var sortByNameAscListItem = DOM.createHtmlElement('li', {
 			'class': 'sort-asc',
 		});
-		sortByNameAscListItem.appendChild(app.utils.createTextElement('name'));
+		sortByNameAscListItem.appendChild(DOM.createTextElement('name'));
 		sortByNameAscListItem.addEventListener('click', sortByName.bind(this, 1));
 		sortListElement.appendChild(sortByNameAscListItem);
 
-		var sortByNameDescListItem = app.utils.createHtmlElement('li', {
+		var sortByNameDescListItem = DOM.createHtmlElement('li', {
 			'class': 'sort-desc',
 		});
-		sortByNameDescListItem.appendChild(app.utils.createTextElement('name'));
+		sortByNameDescListItem.appendChild(DOM.createTextElement('name'));
 		sortByNameDescListItem.addEventListener('click', sortByName.bind(this, -1));
 		sortListElement.appendChild(sortByNameDescListItem);
 
-		var sortByCountAscListItem = app.utils.createHtmlElement('li', {
+		var sortByCountAscListItem = DOM.createHtmlElement('li', {
 			'class': 'sort-asc',
 		});
-		sortByCountAscListItem.appendChild(app.utils.createTextElement('#components'));
+		sortByCountAscListItem.appendChild(DOM.createTextElement('#components'));
 		sortByCountAscListItem.addEventListener('click', sortByCount.bind(this, 1));
 		sortListElement.appendChild(sortByCountAscListItem);
 
-		var sortByCountDescListItem = app.utils.createHtmlElement('li', {
+		var sortByCountDescListItem = DOM.createHtmlElement('li', {
 			'class': 'sort-desc',
 		});
-		sortByCountDescListItem.appendChild(app.utils.createTextElement('#components'));
+		sortByCountDescListItem.appendChild(DOM.createTextElement('#components'));
 		sortByCountDescListItem.addEventListener('click', sortByCount.bind(this, -1));
 		sortListElement.appendChild(sortByCountDescListItem);
 
 		// list
-		nodeListElement = app.utils.createHtmlElement('ul', {
+		nodeListElement = DOM.createHtmlElement('ul', {
 			'class': 'node-list',
 		});
 		rootElement.appendChild(nodeListElement);

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

@@ -36 +36 @@
 		}
 
 		// unset remove hook
-		node.removeFromSidebarList = app.utils.noop;
+		node.removeFromSidebarList = Utils.noop;
 
 		nodeList.splice(nodeList.indexOf(node), 1);
 
@@ -46 +46 @@
 	};
 
 	this.render = function() {
-		rootElement = app.utils.createHtmlElement('div', {
+		rootElement = DOM.createHtmlElement('div', {
 			'id': props.id,
 			'class': 'node-container unconnected-nodes ' + (props.class ? props.class : ''),
 		});
@@ -55 +55 @@
 		});
 
 		// title
-		rootElement.appendChild(app.dom.htmlStringToElement('<h2 class="node-container-title">Unconnected vertices</h2>'));
+		rootElement.appendChild(DOM.htmlStringToElement('<h2 class="node-container-title">Unconnected vertices</h2>'));
 
 		// buttons
-		buttonGroup = app.utils.createHtmlElement('div', {
+		buttonGroup = DOM.createHtmlElement('div', {
 			'class': 'button-group',
 		});
 		rootElement.appendChild(buttonGroup);
 
 		// include all button
-		var includeAllButton = app.utils.createHtmlElement('button', {
+		var includeAllButton = DOM.createHtmlElement('button', {
 			'class': 'include-all-button button',
 			'title': 'Display all unconnected nodes in viewport',
 		});
-		includeAllButton.appendChild(app.utils.createHtmlElement('img', {
+		includeAllButton.appendChild(DOM.createHtmlElement('img', {
 			'src': 'images/unconnected/uncon_left.png',
 			'alt': 'Icon of "display all unconnected nodes in viewport" action',
 		}));
@@ -76 +76 @@
 		buttonGroup.appendChild(includeAllButton);
 
 		// exclude all button
-		var excludeAllButton = app.utils.createHtmlElement('button', {
+		var excludeAllButton = DOM.createHtmlElement('button', {
 			'class': 'exclude-all-button button',
 			'title': 'Display all unconnected nodes in sidebar',
 		});
-		excludeAllButton.appendChild(app.utils.createHtmlElement('img', {
+		excludeAllButton.appendChild(DOM.createHtmlElement('img', {
 			'src': 'images/unconnected/uncon_right.png',
 			'alt': 'Icon of "display all unconnected nodes in sidebar" action',
 		}));
@@ -88 +88 @@
 		buttonGroup.appendChild(excludeAllButton);
 
 		// list
-		nodeListElement = app.utils.createHtmlElement('ul', {
+		nodeListElement = DOM.createHtmlElement('ul', {
 			'class': 'node-list',
 		});
 		rootElement.appendChild(nodeListElement);

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

@@ -12 +12 @@
 	 */
 	this.setComponentCount = function(componentCount) {
 		componentCounterElement.innerHTML = '';
-		componentCounterElement.appendChild(app.utils.createTextElement('loaded components: ' + componentCount));
+		componentCounterElement.appendChild(DOM.createTextElement('loaded components: ' + componentCount));
 	};
 
 	/**
@@ -20 +20 @@
 	 * @returns {Element} HTML DOM element.
 	 */
 	this.render = function() {
-		rootElement = app.utils.createHtmlElement('nav', {
+		rootElement = DOM.createHtmlElement('nav', {
 			'class': 'status-bar',
 		});
 
-		componentCounterElement = app.utils.createHtmlElement('span', {
+		componentCounterElement = DOM.createHtmlElement('span', {
 			'class': 'component-counter',
 		});
 		rootElement.appendChild(componentCounterElement);
 
-		minimapToggleElement = app.dom.createHtmlElement('span', {
+		minimapToggleElement = DOM.createHtmlElement('span', {
 			'class': 'link',
 		});
-		minimapToggleElement.appendChild(app.dom.createTextElement('toggle minimap'));
+		minimapToggleElement.appendChild(DOM.createTextElement('toggle minimap'));
 		minimapToggleElement.addEventListener('click', toggleMinimap.bind(this));
 		rootElement.appendChild(minimapToggleElement);
 

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

@@ -438 +438 @@
 	/**
 	 * Hook function used to remove the vertex from the sidebar list it is located in before it is moved to the viewport.
 	 */
-	this.removeFromSidebarList = app.utils.noop;
+	this.removeFromSidebarList = Utils.noop;
 
 	/**
 	 * @returns {boolean} True if the vertex is not connected to any other nodes.
@@ -501 +501 @@
 	 * @returns {Element} SVG DOM element.
 	 */
 	function renderIncluded() {
-		rootElement = app.utils.createSvgElement('svg', {
+		rootElement = DOM.createSvgElement('svg', {
 			'class': 'node vertex',
 			'x': position.x,
 			'y': position.y,
@@ -509 +509 @@
 			'data-name': this.name,
 		});
 		rootElement.addEventListener('click', click.bind(this));
-		rootElement.addEventListener('dblclick', app.utils.stopPropagation);
+		rootElement.addEventListener('dblclick', Utils.stopPropagation);
 		rootElement.addEventListener('contextmenu', contextMenu.bind(this));
 		rootElement.addEventListener('mousedown', mouseDown.bind(this));
 		
-		rootElement.appendChild(app.utils.createSvgElement('rect', {
+		rootElement.appendChild(DOM.createSvgElement('rect', {
 			'height': size.height,
 			'width': size.width + this.countRelatedArchetypes() * relatedArchetypeIconWidth,
 			'x': 1,
@@ -521 +521 @@
 		}));
 
 		// archetype icon
-		var archetypeIcon = app.dom.createSvgElement('use', {
+		var archetypeIcon = DOM.createSvgElement('use', {
 			'href': '#vertexArchetypeIcon-' + app.archetype.vertex[this.archetype].name,
 			'class': 'archetype-icon',
 			'transform': 'translate(8, 8)',
@@ -531 +531 @@
 		rootElement.appendChild(archetypeIcon);
 
 		// name
-		var nameText = app.utils.createSvgElement('text', {
+		var nameText = DOM.createSvgElement('text', {
 			'fill': 'black',
 			'x': 25,
 			'y': 20,
@@ -540 +540 @@
 		rootElement.appendChild(nameText);
 
 		// related archetype icons
-		var relatedArchetypeListContainer = app.dom.createSvgElement('g', {
+		var relatedArchetypeListContainer = DOM.createSvgElement('g', {
 			'transform': `translate(${size.width}, 0)`,
 		});
 		rootElement.appendChild(relatedArchetypeListContainer);
 
 		var archetypeIconOrder = 0;
 		for (var archetypeIndex in relatedArchetypeMap) {
-			var relatedArchetypeIcon = app.utils.createSvgElement('use', {
+			var relatedArchetypeIcon = DOM.createSvgElement('use', {
 				'href': '#vertexArchetypeIcon-' + app.archetype.vertex[archetypeIndex].name,
 				'class': 'archetype-icon',
 				'transform': `translate(${archetypeIconOrder * relatedArchetypeIconWidth}, 8)`,
@@ -574 +574 @@
 	 * @returns {Element} HTML DOM element.
 	 */
 	function renderExcluded() {
-		rootElement = app.dom.createHtmlElement('li', {
+		rootElement = DOM.createHtmlElement('li', {
 			'class': 'node vertex',
 			'data-id': this.id,
 		});
 
-		var svg = app.dom.createSvgElement('svg', {
+		var svg = DOM.createSvgElement('svg', {
 			'xmlns': 'http://www.w3.org/2000/svg',
 			'height': 60,
 			'width': 46,
@@ -587 +587 @@
 		rootElement.appendChild(svg);
 
 		// related archetypes
-		var relatedArchetypesGroup = app.dom.createSvgElement('g', {
+		var relatedArchetypesGroup = DOM.createSvgElement('g', {
 			'transform': 'translate(10, 15)',
 		});
 		svg.appendChild(relatedArchetypesGroup);
 
 		var archetypeIconOrder = 0;
 		for (var archetypeIndex in relatedArchetypeMap) {
-			var relatedArchetype = app.dom.createSvgElement('g', {
+			var relatedArchetype = DOM.createSvgElement('g', {
 				'class': 'related-archetype',
 				'transform': `translate(0, ${archetypeIconOrder * 20})`,
 			});
 			relatedArchetypesGroup.appendChild(relatedArchetype);
 
 			// counter
-			var relatedArchetypeCounter = app.dom.createSvgElement('text', {});
-			relatedArchetypeCounter.appendChild(app.dom.createTextElement(relatedArchetypeMap[archetypeIndex]));
+			var relatedArchetypeCounter = DOM.createSvgElement('text');
+			relatedArchetypeCounter.appendChild(DOM.createTextElement(relatedArchetypeMap[archetypeIndex]));
 			relatedArchetype.appendChild(relatedArchetypeCounter);
 
 			// icon
-			var relatedArchetypeIcon = app.dom.createSvgElement('use', {
+			var relatedArchetypeIcon = DOM.createSvgElement('use', {
 				'href': '#vertexArchetypeIcon-' + app.archetype.vertex[archetypeIndex].name,
 				'class': 'archetype-icon',
 				'transform': `translate(15, -10)`,
@@ -615 +615 @@
 			relatedArchetype.appendChild(relatedArchetypeIcon);
 
 			// line
-			relatedArchetype.appendChild(app.dom.createSvgElement('line', {
+			relatedArchetype.appendChild(DOM.createSvgElement('line', {
 				'x1': 30,
 				'y1': -5,
 				'x2': 36,
@@ -626 +626 @@
 		}
 
 		// name
-		var nameText = app.utils.createHtmlElement('div', {
+		var nameText = DOM.createHtmlElement('div', {
 			'class': 'vertex-name',
 			'title': this.name,
 		});
@@ -635 +635 @@
 		rootElement.appendChild(nameText);
 
 		// buttons
-		var buttonGroup = app.utils.createHtmlElement('div', {
+		var buttonGroup = DOM.createHtmlElement('div', {
 			'class': 'button-group',
 		});
 		rootElement.appendChild(buttonGroup);
 
 		// show symbol button
-		var showSymbolButton = app.utils.createHtmlElement('button', {
+		var showSymbolButton = DOM.createHtmlElement('button', {
 			'class': 'show-symbol-button button',
 			'style': 'background-color: ' + this.symbol[1] + ';',
 			'title': 'Show symbol next to all neighbouring components',
@@ -651 +651 @@
 		buttonGroup.appendChild(showSymbolButton);
 
 		// include button
-		var includeButton = app.utils.createHtmlElement('button', {
+		var includeButton = DOM.createHtmlElement('button', {
 			'class': 'include-button button',
 			'title': 'Display node in viewport',
 		});
-		includeButton.appendChild(app.utils.createHtmlElement('img', {
+		includeButton.appendChild(DOM.createHtmlElement('img', {
 			'src': 'images/button_cancel.png',
 			'alt': 'Icon of "Icon of "display node in viewport" action" action',
 		}));

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

@@ -36 +36 @@
 			throw new Error('Vertex is already a member of some group.');
 		}
 
-		var nodeListItemElement = app.utils.createHtmlElement('li', {
+		var nodeListItemElement = DOM.createHtmlElement('li', {
 			'title': node.name,
 		});
 		nodeListItemElement.addEventListener('click', nodeListItemClick.bind(node));
 		listElement.appendChild(nodeListItemElement);
 
-		var nodeSymbolText = app.utils.createHtmlElement('span', {
+		var nodeSymbolText = DOM.createHtmlElement('span', {
 			'class': 'group-symbol',
 			'style': 'background-color: ' + node.symbol[1] + ';',
 		});
 		nodeSymbolText.appendChild(document.createTextNode(node.symbol[0]));
 		nodeListItemElement.appendChild(nodeSymbolText);
 
-		var nodeNameText = app.utils.createHtmlElement('span', {
+		var nodeNameText = DOM.createHtmlElement('span', {
 			'class': 'group-name',
 		});
 		nodeNameText.appendChild(document.createTextNode(node.name));
@@ -77 +77 @@
 	 * @returns {Element} HTML DOM element.
 	 */
 	this.render = function() {
-		rootElement = app.utils.createHtmlElement('div', {
+		rootElement = DOM.createHtmlElement('div', {
 			'class': 'context-menu hidden',
 		});
-		rootElement.addEventListener('mousedown', app.utils.stopPropagation);
+		rootElement.addEventListener('mousedown', Utils.stopPropagation);
 
-		listElement = app.utils.createHtmlElement('ul', {});
+		listElement = DOM.createHtmlElement('ul');
 		rootElement.appendChild(listElement);
 
 		return rootElement;

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

@@ -53 +53 @@
 	 * @returns {Element} HTML DOM element.
 	 */
 	this.render = function() {
-		rootElement = app.utils.createHtmlElement('div', {
+		rootElement = DOM.createHtmlElement('div', {
 			'class': 'popover vertex-popover hidden',
 		});
-		rootElement.addEventListener('wheel', app.utils.stopPropagation);
-		rootElement.addEventListener('mousedown', app.utils.stopPropagation);
+		rootElement.addEventListener('wheel', Utils.stopPropagation);
+		rootElement.addEventListener('mousedown', Utils.stopPropagation);
 		rootElement.addEventListener('mouseleave', this.close.bind(this));
 
-		popoverTitle = app.utils.createHtmlElement('span', {
+		popoverTitle = DOM.createHtmlElement('span', {
 			'class': 'popover-title',
 		});
 		rootElement.appendChild(popoverTitle);
 
-		var popoverContent = app.utils.createHtmlElement('div', {
+		var popoverContent = DOM.createHtmlElement('div', {
 			'class': 'popover-content',
 		});
 		rootElement.appendChild(popoverContent);
 
-		detailsListElement = app.utils.createHtmlElement('ul', {});
+		detailsListElement = DOM.createHtmlElement('ul');
 		popoverContent.appendChild(detailsListElement);
 
 		return rootElement;

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

@@ -13 +13 @@
 	 * @param {array} symbol Symbol to be added to the list.
 	 */
 	this.appendChild = function(symbol) {
-		var symbolGroup = app.utils.createSvgElement('g', {
+		var symbolGroup = DOM.createSvgElement('g', {
 			'class': `neighbour-node-symbol symbol-${symbol[0]}`,
 		});
 		rootElement.appendChild(symbolGroup);
 
-		symbolGroup.appendChild(app.utils.createSvgElement('rect', {
+		symbolGroup.appendChild(DOM.createSvgElement('rect', {
 			'x': 0,
 			'y': 0,
 			'width': width,
@@ -26 +26 @@
 			'fill': symbol[1],
 		}));
 
-		var symbolText = app.utils.createSvgElement('text', {
+		var symbolText = DOM.createSvgElement('text', {
 			'x': 6,
 			'y': 15,
 		});
@@ -53 +53 @@
 	 * @param {Element} symbol SVG DOM element.
 	 */
 	this.render = function(symbol) {
-		rootElement = app.utils.createSvgElement('g', {
+		rootElement = DOM.createSvgElement('g', {
 			'transform': 'translate(0, 30)',
 		});
 

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

@@ -96 +96 @@
 	};
 
 	this.addSvgDefinition = function(id, svgString) {
-		var g = app.dom.createSvgElement('g', {
+		var g = DOM.createSvgElement('g', {
 			'id': id,
 		});
 		g.innerHTML = svgString;
@@ -143 +143 @@
 	};
 	
 	this.render = function() {
-		rootElement = app.utils.createHtmlElement('div', {
+		rootElement = DOM.createHtmlElement('div', {
 			'class': 'viewport',
 			'id': 'viewport',
 		});
@@ -151 +151 @@
 		rootElement.addEventListener('mousedown', onMouseDown.bind(this));
 		rootElement.addEventListener('dblclick', onDoubleClick.bind(this));
 
-		var mainSvg = app.utils.createSvgElement('svg', {
+		var mainSvg = DOM.createSvgElement('svg', {
 			'xmlns': 'http://www.w3.org/2000/svg',
 			'width': '100%',
 			'height': '100%',
@@ -182 +182 @@
 		groupsContainer.setAttribute('data-id', 'groups');
 		graph.appendChild(groupsContainer);
 
-		definitions = app.utils.createSvgElement('defs', {});
+		definitions = DOM.createSvgElement('defs');
 		mainSvg.appendChild(definitions);
 
-		var linearGradient = app.utils.createSvgElement('linearGradient', {
+		var linearGradient = DOM.createSvgElement('linearGradient', {
 			'id': 'node--highlighted-required-provided',
 		});
-		linearGradient.appendChild(app.utils.createSvgElement('stop', {
+		linearGradient.appendChild(DOM.createSvgElement('stop', {
 			'offset': '0%',
 			'stop-color': 'red',
 		}));
-		linearGradient.appendChild(app.utils.createSvgElement('stop', {
+		linearGradient.appendChild(DOM.createSvgElement('stop', {
 			'offset': '100%',
 			'stop-color': '#5896ff',
 		}));

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

@@ -28 +28 @@
 			j = 0;
 
 		for (i = 0; i < visibleNodes.length; i++) {
-			forceField[app.utils.getUniqueId(visibleNodes[i])] = [0, 0];
+			forceField[Utils.getUniqueId(visibleNodes[i])] = [0, 0];
 		}
 
 		// calculate repulsive force
@@ -56 +56 @@
 				var distance = Math.sqrt(sum);
 
 				if (distance !== 0) {
-					forceField[app.utils.getUniqueId(currNode)][0] += Math.floor(x * (repulsiveStrength / distance));
-					forceField[app.utils.getUniqueId(currNode)][1] += Math.floor(y * (repulsiveStrength / distance));
+					forceField[Utils.getUniqueId(currNode)][0] += Math.floor(x * (repulsiveStrength / distance));
+					forceField[Utils.getUniqueId(currNode)][1] += Math.floor(y * (repulsiveStrength / distance));
 				}
 			}
 		}
@@ -79 +79 @@
 				var sum = Math.pow(x, 2) + Math.pow(y, 2);
 				var distance = Math.sqrt(sum);
 
-				forceField[app.utils.getUniqueId(currNode)][0] += Math.round(-1 * x * (distance / attractiveStrength));
-				forceField[app.utils.getUniqueId(currNode)][1] += Math.round(-1 * y * (distance / attractiveStrength));
+				forceField[Utils.getUniqueId(currNode)][0] += Math.round(-1 * x * (distance / attractiveStrength));
+				forceField[Utils.getUniqueId(currNode)][1] += Math.round(-1 * y * (distance / attractiveStrength));
 			}
 
 			for (j = 0; j < currNode.getOutEdgeList().length; j++) {
@@ -96 +96 @@
 				var sum = Math.pow(x, 2) + Math.pow(y, 2);
 				var distance = Math.sqrt(sum);
 
-				forceField[app.utils.getUniqueId(currNode)][0] += Math.round(-1 * x * (distance / attractiveStrength));
-				forceField[app.utils.getUniqueId(currNode)][1] += Math.round(-1 * y * (distance / attractiveStrength));
+				forceField[Utils.getUniqueId(currNode)][0] += Math.round(-1 * x * (distance / attractiveStrength));
+				forceField[Utils.getUniqueId(currNode)][1] += Math.round(-1 * y * (distance / attractiveStrength));
 			}
 		}
 
@@ -139 +139 @@
 			}
 
 			// force dampening
-			var forceX = Math.floor(forceField[app.utils.getUniqueId(currNode)][0] / dampeningEffect),
-				forceY = Math.floor(forceField[app.utils.getUniqueId(currNode)][1] / dampeningEffect);
+			var forceX = Math.floor(forceField[Utils.getUniqueId(currNode)][0] / dampeningEffect),
+				forceY = Math.floor(forceField[Utils.getUniqueId(currNode)][1] / dampeningEffect);
 
 			// adding a random effect
 			/*

sources/src/main/webapp/js/graphExporter.js

@@ -26 +26 @@
 		var excludedNodeList = app.sidebarComponent.excludedNodeListComponent.getNodeList();
 		var sideBar = excludedNodeList.map(function(node) {
 			return {
-				id: app.utils.getUniqueId(node),
+				id: Utils.getUniqueId(node),
                 isIconsDisplayed: node.isIconsDisplayed(),
 			};
 		});
@@ -36 +36 @@
         });
 
         // when edge is highlighted another vertex can not be highlighted
-        if (app.utils.isUndefined(highlightedEdge)) {
+        if (Utils.isUndefined(highlightedEdge)) {
             var highlightedVertex = app.nodeList.find(function (vertex) {
                 return vertex.isHighlighted()
             });
@@ -51 +51 @@
 			possibleEnumValues: app.possibleEnumValues,
 			groups: groups,
 			sideBar: sideBar,
-            highlightedVertex: app.utils.getUniqueId(highlightedVertex),
-			highlightedEdge: app.utils.isUndefined(highlightedEdge) ? '' : highlightedEdge.id,
+            highlightedVertex: Utils.getUniqueId(highlightedVertex),
+			highlightedEdge: Utils.isUndefined(highlightedEdge) ? '' : highlightedEdge.id,
 		};
 	}
 

sources/src/main/webapp/js/graphLoader.js

@@ -9 +9 @@
 	 * @throws {InvalidArgumentError} Thrown when either graph data are incomplete.
 	 */
 	this.run  = function(data) {
-		if (app.utils.isUndefined(data.vertices) || app.utils.isUndefined(data.edges)) {
+		if (Utils.isUndefined(data.vertices) || Utils.isUndefined(data.edges)) {
 			throw new InvalidArgumentError('Invalid data.');
 		}
 
@@ -23 +23 @@
 		app.possibleEnumValues = data.possibleEnumValues;
 
 		app.archetype.vertex.filter(function(vertexArchetype) {
-			return app.utils.isDefined(vertexArchetype.icon);
+			return Utils.isDefined(vertexArchetype.icon);
 		}).forEach(function(vertexArchetype) {
 			app.viewportComponent.addSvgDefinition('vertexArchetypeIcon-' + vertexArchetype.name, vertexArchetype.icon);
 		});
 
         var highlightedNodeId;
         var highlightedNodeType;
-        if (app.utils.isDefined(data.highlightedVertex) && data.highlightedVertex.length > 0) {
+        if (Utils.isDefined(data.highlightedVertex) && data.highlightedVertex.length > 0) {
             var highlightedNodeAttr = data.highlightedVertex.split("-");
             if (highlightedNodeAttr.length === 2) {
                 highlightedNodeType = highlightedNodeAttr[0];
                 highlightedNodeId = parseInt(highlightedNodeAttr[1], 10);
             }
         }
-        if (app.utils.isDefined(data.highlightedEdge) && data.highlightedEdge.length > 0) {
+        if (Utils.isDefined(data.highlightedEdge) && data.highlightedEdge.length > 0) {
             var highlightedEdgeId = parseInt(data.highlightedEdge, 10);
         }
 
@@ -55 +55 @@
 
 			var position = component.position;
 
-			if (position === null || app.utils.isUndefined(position)) {
+			if (position === null || Utils.isUndefined(position)) {
                 // set random
                 vertex.setPosition(new Coordinates(
                     Math.floor(Math.random() * canvasSize),
@@ -127 +127 @@
 
 			// position
 			var position = component.position;
-			if (position === null || app.utils.isUndefined(position)) {
+			if (position === null || Utils.isUndefined(position)) {
                 // set random
                 group.setPosition(new Coordinates(
                     Math.floor(Math.random() * canvasSize),
@@ -172 +172 @@
 				return idArr[0] === prefix && node.id === idArr[1];
 			});
 
-			if (app.utils.isDefined(node)) {
+			if (Utils.isDefined(node)) {
 				node.exclude(excludedNode.isIconsDisplayed);
 
 				app.sidebarComponent.excludedNodeListComponent.add(node);
@@ -185 +185 @@
 		// update status bar
 		app.sidebarComponent.statusBarComponent.setComponentCount(data.vertices.length);
 
-		if (app.utils.isDefined(highlightedEdge)) {
+		if (Utils.isDefined(highlightedEdge)) {
             highlightedEdge.setHighlighted(true);
             highlightedEdge.getFrom().setHighlighted(true);
             highlightedEdge.getTo().setHighlighted(true);
         }
-		if (app.utils.isDefined(highlightedNode)) highlightedNode.setHighlightedWithNeighbours(true);
+		if (Utils.isDefined(highlightedNode)) highlightedNode.setHighlightedWithNeighbours(true);
 	};
 
 }