Revize 86350a5b

jsDoc, dropped unused functionality, minor improvements

sources/src/main/webapp/css/main.css

@@ -259 +259 @@
 	flex: 1;
 }
 
-.lollipop--cross > line {
-	stroke: red;
-}
-
-.lollipop--tick > line {
-	stroke: green;
-}
-
 .viewport .edge {
 	stroke: black;
     stroke-width: 1;
 }
 
-.viewport .edge .lollipop {
+.viewport .edge .arrow {
 	fill: white;
     stroke-width: 2;
 }
@@ -295 +287 @@
     stroke-width: 2;
 }
 
-.viewport .edge--highlighted .lollipop {
+.viewport .edge--highlighted .arrow {
 	stroke: red;
 }
 
@@ -341 +333 @@
 	fill: yellow;
 }
 
-.viewport .vertex .interface {
-    fill: white;
-    stroke: black;
-    stroke-width: 1px;
+.viewport .vertex .archetype {
+	dominant-baseline: central;
 }
 
 .context-menu {

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

@@ -19 +19 @@
 		width: 70,
 		height: 70,
 	};
-	var requiredCounter = 0;
-	var providedCounter = 0;
 	var floater = null;
 
 	var pan = false;
@@ -75 +73 @@
 			vertexListComponent.appendChild(vertex);
 		}
 
-		requiredCounter += vertex.getInEdgeList().length;
-		providedCounter += vertex.getOutEdgeList().length;
-
 		vertexList.push(vertex);
 	};
 
@@ -106 +101 @@
 			vertexListComponent.removeChild(vertex);
 		}
 
-		requiredCounter -= vertex.getInEdgeList().length;
-		providedCounter -= vertex.getOutEdgeList().length;
-
 		vertexList.splice(vertexList.indexOf(vertex), 1);
 	};
 	
@@ -265 +257 @@
 
 	/**
 	 * Toggles highlighting of the group to mark it as requirement of some other node.
-	 * @param {boolean} newValue True to highlight the group as required, false to unhighlight.
+	 * @param {boolean} newValue True to highlight, false to unhighlight.
 	 */
 	this.setHighlightedRequired = function(newValue) {
 		highlightedRequired = newValue;
@@ -279 +271 @@
 	
 	/**
 	 * Toggles highlighting of the group to mark it as dependent of some other node.
-	 * @param {boolean} newValue True to highlight the group as provided, false to unhighlight.
+	 * @param {boolean} newValue True to highlight, false to unhighlight.
 	 */
 	this.setHighlightedProvided = function(newValue) {
 		highlightedProvided = newValue;
@@ -457 +449 @@
 		// name
 		var nameText = app.utils.createSvgElement('text', {
 			'class': 'group-name',
-			'x': 0,
+			'x': 20,
 			'y': 15,
 		});
 		nameText.appendChild(document.createTextNode(this.name));
@@ -580 +572 @@
 		});
 		svg.appendChild(group);
 
+		/*
 		// required
 		var required = app.utils.createSvgElement('g', {
 			'class': 'required-counter',
@@ -649 +642 @@
 		});
 		providedCounterText.appendChild(document.createTextNode(providedCounter));
 		provided.appendChild(providedCounterText);
+		*/
 
 		// symbol
 		var symbolText = app.utils.createHtmlElement('span', {
@@ -763 +757 @@
 		}
 	}
 
-	/**
-	 * Highlights the group as a requirement.
-	 */
-	function requiredClick() {
-		this.setHighlighted(!highlighted);
-		this.setHighlightedRequiredNeighbours(highlighted);
-		this.setHighlightedProvidedNeighbours(false);
-
-		highlightRequiredNeighbours.call(this);
-	}
-
-	/**
-	 * Highlights the group as a dependent.
-	 */
-	function providedClick() {
-		this.setHighlighted(!highlighted);
-		this.setHighlightedRequiredNeighbours(false);
-		this.setHighlightedProvidedNeighbours(highlighted);
-
-		highlightProvidedNeighbours.call(this);
-	}
-
 	/**
 	 * Includes the group back to the viewport.
 	 */

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

@@ -5 +5 @@
  * @param {Group} parentalGroup Group this vertex list is bound to.
  */
 function GroupVertexList(parentalGroup) {
+	const lineHeight = 18;
+
 	var rootElement;
+	var listItemCounter = 0;
 
 	/**
 	 * Adds a new vertex to the list. Binds user interactions to local handler functions.
@@ -16 +19 @@
 		if (parentalGroup.isExcluded()) {
 			listItemElement = app.utils.createHtmlElement('li', {});
 		} else {
-			listItemElement = app.utils.createSvgElement('text', {});
+			listItemElement = app.utils.createSvgElement('text', {
+				'y': listItemCounter * lineHeight,
+			});
 		}
 
 		listItemElement.setAttribute('data-id', vertex.id);
@@ -24 +29 @@
 		listItemElement.addEventListener('click', listItemClick.bind(vertex));
 
 		rootElement.appendChild(listItemElement);
+
+		listItemCounter++;
 	};
 
 	/**

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

@@ -13 +13 @@
 	/** @prop {array} symbol Symbol of the group. */
 	this.symbol = app.markSymbol.getMarkSymbol();
 
+	const oneCharacterWidth = 8.3;	// approximate width (in pixels) of one character using Consolas at 15px font size
+	const minimumWidth = 200;
+
 	var rootElement;
 	var symbolListComponent;
 
 	var position = new Coordinates(0, 0);
 	var size = {
-		width: Math.max(30 + this.name.length * 8.3, 200),	// 8.3 is approximate width (in pixels) of one character using Consolas at 15px font size
+		width: Math.max(30 + this.name.length * oneCharacterWidth, minimumWidth),
 		height: 30,
 	};
 	var group = null;
@@ -69 +72 @@
 	};
 
 	/**
-	 * @returns {array<Edge>} Array of edges going to the vertex.
+	 * @returns {array<Edge>} Array of edges incoming to the vertex.
 	 */
 	this.getInEdgeList = function() {
 		return inEdgeList;
 	};
 
 	/**
-	 * @returns {array<Edge>} Array of edges going from the vertex.
+	 * @returns {array<Edge>} Array of edges outgoing from the vertex.
 	 */
 	this.getOutEdgeList = function() {
 		return outEdgeList;
@@ -94 +97 @@
 		symbolListComponent.appendChild(symbol);
 	};
 
+	/**
+	 * Removes symbol from the list of symbols displayed next to the vertex.
+	 * @param {array} symbol Node symbol to be removed.
+	 */
 	this.removeSymbol = function(symbol) {
 		symbolList.splice(symbolList.indexOf(symbol), 1);
 
@@ -115 +122 @@
 
 	/**
 	 * Updates the current position of the vertex in graph.
+	 * @param {Coordinates} New position of the vertex.
 	 */
 	this.setPosition = function(coords) {
 		if (!(coords instanceof Coordinates)) {
@@ -125 +133 @@
 	};
 
 	/**
-	 * @returns {Coordinates} Centre of the group.
+	 * @returns {Coordinates} Centre of the vertex.
 	 */
 	this.getCenter = function() {
 		return new Coordinates(
@@ -162 +170 @@
 	};
 
 	/**
-	 * @returns {Group} Group this vertex is part of. If the vertex stands alone, null is returned.
+	 * @returns {Group} Group this vertex is currently part of. If the vertex stands alone, null is returned.
 	 */
 	this.getGroup = function() {
 		return group;
@@ -220 +228 @@
 
 	/**
 	 * Toggles highlighting of the vertex.
-	 * @param {boolean} newValue True to highlight the vertex, otherwise false.
+	 * @param {boolean} newValue True to highlight the vertex, false to unhighlight.
 	 */
 	this.setHighlighted = function(newValue) {
 		highlighted = newValue;
@@ -234 +242 @@
 
 	/**
 	 * Toggles highlighting of the vertex to mark it as requirement of some other node.
-	 * @param {boolean} newValue True to highlight the vertex as required, false to unhighlight.
+	 * @param {boolean} newValue True to highlight, false to unhighlight.
 	 */
 	this.setHighlightedRequired = function(newValue) {
 		highlightedRequired = newValue;
@@ -252 +260 @@
 	
 	/**
 	 * Toggles highlighting of the vertex to mark it as dependent of some other node.
-	 * @param {boolean} newValue True to highlight the vertex as provided, false to unhighlight.
+	 * @param {boolean} newValue True to highlight, false to unhighlight.
 	 */
 	this.setHighlightedProvided = function(newValue) {
 		highlightedProvided = newValue;
@@ -436 +444 @@
 			'y': 1,
 		}));
 
-		// archetype
-		var archetype = app.utils.createSvgElement('g', {
+		// archetype icon
+		var archetypeIcon = app.dom.createSvgElement('g', {
 			'class': 'archetype',
-			'data-vertexId': this.id,
 			'transform': 'translate(7, 6)',
 		});
-		archetype.addEventListener('click', archetypeClick.bind(this));
+		archetypeIcon.addEventListener('click', archetypeClick.bind(this));
 
-		archetype.innerHTML = app.archetype.icon[this.archetype.name];
+		archetypeIcon.innerHTML = app.archetype.icon[app.archetype.vertex[this.archetype].name];
 
-		rootElement.appendChild(archetype);
+		rootElement.appendChild(archetypeIcon);
 
 		// name
 		var nameText = app.utils.createSvgElement('text', {
@@ -472 +479 @@
 	 * @returns {Element} HTML DOM element.
 	 */
 	function renderExcluded() {
-		rootElement = app.utils.createHtmlElement('li', {
+		rootElement = app.dom.createHtmlElement('li', {
 			'class': 'node vertex',
 			'data-id': this.id,
 		});
 
-		var svg = app.utils.createSvgElement('svg', {
+		var svg = app.dom.createSvgElement('svg', {
 			'xmlns': 'http://www.w3.org/2000/svg',
 			'height': 60,
 			'width': 46,
 		});
 		rootElement.appendChild(svg);
 
-		var group = app.utils.createSvgElement('g', {
+		var group = app.dom.createSvgElement('g', {
 			'transform': 'translate(60,10)',
 		});
 		svg.appendChild(group);
@@ -598 +605 @@
 		showSymbolButton.addEventListener('click', showIconClick.bind(this));
 		buttonGroup.appendChild(showSymbolButton);
 
-		// to change button
-		var toChangeButton = app.utils.createHtmlElement('button', {
-			'class': 'change-button button',
-			'title': 'Set component for change',
-		});
-		toChangeButton.appendChild(app.utils.createHtmlElement('img', {
-			'src': 'images/tochange/tochange-trans.gif',
-			'alt': 'Icon of "set component for change" action',
-		}));
-		toChangeButton.addEventListener('click', addToChange.bind(this));
-		buttonGroup.appendChild(toChangeButton);
-
 		// include button
 		var includeButton = app.utils.createHtmlElement('button', {
 			'class': 'include-button button',
@@ -643 +638 @@
 	 * Vertex click interaction. Based on whether the vertex is excluded and currently selected mouse mode (move, exclude),
 	 * the vertex is either highlighted or moved within the graph.
 	 */
-	function click() {
+	function click(e) {
+		e.stopPropagation();
+
 		if (excluded) {
 			this.setHighlighted(!highlighted);
 			this.setHighlightedRequiredNeighbours(highlighted);
@@ -739 +736 @@
 		}, this);
 	}
 
-	/**
-	 * Adds the vertex to the list of components to be changed.
-	 * @param {Event} e Click event.
-	 */
-	function addToChange(e) {
-		app.sidebarComponent.addToChange(this);
-	}
-
 	/**
 	 * Includes the group back to the viewport.
 	 */
@@ -902 +891 @@
 	}
 
 	/**
-	 * Highlights only neighbours the vertex that are required.
+	 * Highlights only neighbours of the vertex that are required.
 	 */
 	function highlightRequiredNeighbours() {
 		if (highlighted) {
@@ -922 +911 @@
 	}
 
 	/**
-	 * Highlights only neighbours the vertex that are provided.
+	 * Highlights only neighbours of the vertex that are provided.
 	 */
 	function highlightProvidedNeighbours() {
 		if (highlighted) {