Revize d276ae6c

added back list of vertices in a Group

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

@@ -12 +12 @@
 	this.symbol = app.markSymbol.getMarkSymbol();
 
 	var rootElement;
+	var vertexListComponent;
 
 	var position = new Coordinates(0, 0);
 	var size = {
@@ -82 +83 @@
 
 		app.viewportComponent.removeVertex(vertex);
 
+		if (vertexListComponent) {
+			vertexListComponent.appendChild(vertex);
+		}
+
 		vertexList.push(vertex);
         if(isIconShown) showIconClick.bind(this)(null);
 	};
@@ -112 +117 @@
 
 		app.viewportComponent.addVertex(vertex);
 
+		if (vertexListComponent) {
+			vertexListComponent.removeChild(vertex);
+		}
+
 		vertexList.splice(vertexList.indexOf(vertex), 1);
 	};
 	
@@ -638 +647 @@
 		nameText.addEventListener('click', nameClick.bind(this));
 		rootElement.appendChild(nameText);
 
+		// vertex list
+		vertexListComponent = new GroupVertexList(this);
+		rootElement.appendChild(vertexListComponent.render());
+
+		vertexList.forEach(function(vertex) {
+			vertexListComponent.appendChild(vertex);
+		}, this);
+
 		// buttons
 		var buttonGroup = app.utils.createHtmlElement('div', {
 			'class': 'button-group',

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

@@ +1 @@
+/**
+ * Class representing a list of vertices added to a group.
+ * @see Group
+ * @constructor
+ * @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.
+	 * @param {vertex} vertex Vertex to be added to this list.
+	 */
+	this.appendChild = function(vertex) {
+		var listItemElement;
+		if (parentalGroup.isExcluded()) {
+			listItemElement = app.utils.createHtmlElement('li', {});
+		} else {
+			listItemElement = app.utils.createSvgElement('text', {
+				'y': listItemCounter * lineHeight,
+			});
+		}
+
+		listItemElement.setAttribute('data-id', vertex.id);
+		listItemElement.appendChild(document.createTextNode(vertex.name));
+		listItemElement.addEventListener('click', listItemClick.bind(vertex));
+
+		rootElement.appendChild(listItemElement);
+
+		listItemCounter++;
+	};
+
+	/**
+	 * Removes a vertex from the list.
+	 * @param {Vertex} vertex Vertex to be removed from this list.
+	 */
+	this.removeChild = function(vertex) {
+		var listItemElement = rootElement.querySelector('[data-id="' + vertex.id + '"]');
+
+		listItemElement.remove();
+	};
+
+	/**
+	 * Creates a new DOM element representing the list in memory.
+	 * @returns {Element} HTML or SVG DOM element depending on whether the group is excluded.
+	 */
+	this.render = function() {
+		if (parentalGroup.isExcluded()) {
+			rootElement = app.utils.createHtmlElement('ul', {});
+		} else {
+			rootElement = app.utils.createSvgElement('g', {
+				'transform': 'translate(70, 30)',
+			});
+		}
+
+		rootElement.setAttribute('class', 'group-vertex-list');
+
+		return rootElement;
+	};
+
+	/**
+	 * Vertex list item click interaction.
+	 * @param {Event} e Click event.
+	 */
+	function listItemClick(e) {
+		e.stopPropagation();
+
+		console.log('TODO: highlight vertex on click');
+	}
+}

sources/src/main/webapp/showGraph.jsp

@@ -26 +26 @@
 		<script src="js/components/edgePopover.js"></script>
 		<script src="js/components/floatingPoint.js"></script>
 		<script src="js/components/group.js"></script>
+		<script src="js/components/groupVertexList.js"></script>
 		<script src="js/components/minimap.js"></script>
 		<script src="js/components/modalWindow.js"></script>
 		<script src="js/components/sidebar.js"></script>