Revize a6602c4c

dropped expanded Group view

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

@@ -457 +457 @@
 	stroke: #000;
 }
 
-.viewport .group .expand-button > line {
-	stroke: #000;
-	stroke-width: 2;
-}
-
-.viewport .group .compress-button > line {
-	stroke: #000;
-	stroke-width: 2;
-}
-
 .viewport .group .dissolve-button > line {
 	stroke: #ca0000;
 	stroke-width: 2;
 }
 
-.viewport .group:not(.group--expanded) .compress-button {
-	display: none;
-}
-
-.viewport .group:not(.group--expanded) .group-vertex-list {
-	display: none;
-}
-
-.viewport .group:not(.group--expanded) .group-viewport {
-    display: none;
-}
-
-.viewport .group--expanded .expand-button {
-	display: none;
-}
-
-.viewport .group--expanded .compress-button {
-	display: block;
-}
-
-.viewport .group--expanded > rect {
-	width: 220px;
-}
-
 /**
  * SIDEBAR
  */

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 = {
@@ -83 +82 @@
 
 		app.viewportComponent.removeVertex(vertex);
 
-		if (rootElement) {
-			vertexListComponent.appendChild(vertex);
-		}
-
 		vertexList.push(vertex);
         if(isIconShown) showIconClick.bind(this)(null);
 	};
@@ -117 +112 @@
 
 		app.viewportComponent.addVertex(vertex);
 
-		if (rootElement) {
-			vertexListComponent.removeChild(vertex);
-		}
-
 		vertexList.splice(vertexList.indexOf(vertex), 1);
 	};
 	
@@ -521 +512 @@
 		// name
 		var nameText = app.utils.createSvgElement('text', {
 			'class': 'group-name',
-			'x': 20,
+			'x': 5,
 			'y': 15,
 		});
 		nameText.appendChild(document.createTextNode(this.name));
@@ -537 +528 @@
 		symbolText.appendChild(document.createTextNode(this.symbol[0]));
 		rootElement.appendChild(symbolText);
 
-		// expand button
-		var expandButton = app.utils.createSvgElement('g', {
-			'class': 'button expand-button',
-		});
-		expandButton.appendChild(app.utils.createSvgElement('rect', {
-			'rx': 4,
-			'ry': 4,
-			'x': 4,
-			'y': 4,
-			'height': 14,
-			'width': 14,
-		}));
-		expandButton.appendChild(app.utils.createSvgElement('line', {
-			'x1': 11,
-			'y1': 6,
-			'x2': 11,
-			'y2': 16,
-		}));
-		expandButton.appendChild(app.utils.createSvgElement('line', {
-			'x1': 6,
-			'y1': 11,
-			'x2': 16,
-			'y2': 11,
-		}));
-		expandButton.addEventListener('click', expandClick.bind(this));
-		rootElement.appendChild(expandButton);
-
-		// compress button
-		var compressButton = app.utils.createSvgElement('g', {
-			'class': 'button compress-button',
-		});
-		compressButton.appendChild(app.utils.createSvgElement('rect', {
-			'rx': 4,
-			'ry': 4,
-			'x': 4,
-			'y': 4,
-			'height': 14,
-			'width': 14,
-		}));
-		compressButton.appendChild(app.utils.createSvgElement('line', {
-			'x1': 6,
-			'y1': 11,
-			'x2': 16,
-			'y2': 11,
-		}));
-		compressButton.addEventListener('click', compressClick.bind(this));
-		rootElement.appendChild(compressButton);
-
 		// dissolve button
 		var dissolveButton = app.utils.createSvgElement('g', {
 			'class': 'button dissolve-button',
@@ -612 +555 @@
 		dissolveButton.addEventListener('click', dissolveClick.bind(this));
 		rootElement.appendChild(dissolveButton);
 
-		// vertex list
-		vertexListComponent = new GroupVertexList(this);
-		rootElement.appendChild(vertexListComponent.render());
-
-		vertexList.forEach(function(vertex) {
-			vertexListComponent.appendChild(vertex);
-		}, this);
-
 		return rootElement;
 	}
 
@@ -697 +632 @@
 		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',
@@ -849 +776 @@
 		this.include.call(this);
 	}
 
-	/**
-	 * Sets the group as expanded so that its vertices are listed too.
-	 * @param {Event} e Click event.
-	 */
-	function expandClick(e) {
-		e.stopPropagation();
-
-		rootElement.classList.add('group--expanded');
-	}
-
-	/**
-	 * Sets the group as compress so that its vertices are not explicitly listed.
-	 * @param {Event} e Click event.
-	 */
-	function compressClick(e) {
-		e.stopPropagation();
-
-		rootElement.classList.remove('group--expanded');
-	}
-
 	/**
 	 * Dissolves the group so that its vertices are displayed separately again. The group itself is destroyed.
 	 * @param {Event} e Click event.

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>