Revize 70453f8a

excluded Vertex related archetypes highlighting

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

@@ -584 +584 @@
     display: inline-block;
 }
 
-.sidebar .node .required-counter,
-.sidebar .node .provided-counter {
-	fill: white;
-	stroke: #000;
-	stroke-width: 1;
-}
-
-.sidebar .node .required-counter > text,
-.sidebar .node .provided-counter > text {
-	fill: #000;
-	stroke-width: 0;
+.sidebar .node .related-archetype > text {
+	font-size: 0.8em;
 }
 
-.sidebar .node--highlighted-required-neighbours .required-counter .lollipop {
-	fill: red;
+.sidebar .node .related-archetype > g {
+	dominant-baseline: central;
 }
 
-.sidebar .node--highlighted-provided-neighbours .provided-counter .lollipop {
-    fill: #5896ff;
+.sidebar .node .related-archetype > line {
+	stroke: #000;
 }
 
 .sidebar .group {

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

@@ -90 +90 @@
 		position.y = (bbox.top - viewportPosition.y - app.headerHeight);
 
 		if (node instanceof Vertex) {
-			var inEdgeOffsetY = 15;
-			var outEdgeOffsetY = 45;
+			var edgeOffsetY = 10;
 		} else if (node instanceof Group) {
-			var inEdgeOffsetY = 40;
-			var outEdgeOffsetY = 70;
+			var edgeOffsetY = 40;
+		} else {
+			var edgeOffsetY = 0;
 		}
 
+		var archetypeList = Object.keys(node.getRelatedArchetypeMap()).map(function(archetypeIndex) {
+			return parseInt(archetypeIndex);
+		});
+		var archetypeIconOrder;
+
 		// redraw dependent edges
 		inEdgeList.forEach(function(edge) {
+			archetypeIconOrder = archetypeList.indexOf(edge.getFrom().archetype);
+
 			edge.moveEnd(new Coordinates(
 				position.x / app.zoom.scale,
-				(position.y + inEdgeOffsetY) / app.zoom.scale,
+				(position.y + edgeOffsetY + archetypeIconOrder * 20) / app.zoom.scale,
 			));
 		}, this);
 
 		outEdgeList.forEach(function(edge) {
+			archetypeIconOrder = archetypeList.indexOf(edge.getTo().archetype);
+
 			edge.moveStart(new Coordinates(
 				position.x / app.zoom.scale,
-				(position.y + outEdgeOffsetY) / app.zoom.scale,
+				(position.y + edgeOffsetY + archetypeIconOrder * 20) / app.zoom.scale,
 			));
 		}, this);
 	};

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

@@ -32 +32 @@
 	var dimmed = false;
 
 	var vertexList = [];
+	var relatedArchetypeMap = {};
 
 	/**
 	 * Adds a new vertex to the group. The vertex is set as excluded and its DOM element is removed from document. Its edges are moved so that they end at the group.
@@ -151 +152 @@
 		return [].concat(this.getInEdgeList(), this.getOutEdgeList());
 	};
 
+	/**
+	 * @returns {object} Map with archetype indexes as keys and counters of their instances as values.
+	 */
+	this.getRelatedArchetypeMap = function() {
+		return relatedArchetypeMap;
+	};
+
 	/**
 	 * @returns {Coordinates} Current position of the group in graph.
 	 */

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

@@ -506 +506 @@
 		});
 		rootElement.appendChild(relatedArchetypeListContainer);
 
-		var i = 0;
+		var archetypeIconOrder = 0;
 		for (var archetypeIndex in relatedArchetypeMap) {
 			var relatedArchetype = app.utils.createSvgElement('g', {
 				'class': 'related-archetype',
-				'transform': `translate(${i * relatedArchetypeIconWidth}, 8)`,
+				'transform': `translate(${archetypeIconOrder * relatedArchetypeIconWidth}, 8)`,
 			});
 			relatedArchetype.addEventListener('click', relatedArchetypeClick.bind(this, parseInt(archetypeIndex)));
 
@@ -518 +518 @@
 
 			relatedArchetypeListContainer.appendChild(relatedArchetype);
 
-			i++;
+			archetypeIconOrder++;
 		}
 
 		// symbol list
@@ -548 +548 @@
 		});
 		rootElement.appendChild(svg);
 
-		var group = app.dom.createSvgElement('g', {
-			'transform': 'translate(60,10)',
+		// related archetypes
+		var relatedArchetypesGroup = app.dom.createSvgElement('g', {
+			'transform': 'translate(10, 15)',
 		});
-		svg.appendChild(group);
+		svg.appendChild(relatedArchetypesGroup);
 
-		// related
-		var i = 0;
+		var archetypeIconOrder = 0;
 		for (var archetypeIndex in relatedArchetypeMap) {
 			var relatedArchetype = app.dom.createSvgElement('g', {
 				'class': 'related-archetype',
-				'transform': `translate(0, ${i * 20})`,
-		});
-			relatedArchetype.addEventListener('click', relatedArchetypeClick.bind(this, parseInt(archetypeIndex)));
-
-			relatedArchetype.innerHTML = app.archetype.icon[app.archetype.vertex[archetypeIndex].name];
+				'transform': `translate(0, ${archetypeIconOrder * 20})`,
+			});
+			relatedArchetypesGroup.appendChild(relatedArchetype);
 
-			group.appendChild(relatedArchetype);
+			// counter
+			var relatedArchetypeCounter = app.dom.createSvgElement('text', {});
+			relatedArchetypeCounter.appendChild(app.dom.createTextElement(relatedArchetypeMap[archetypeIndex]));
+			relatedArchetype.appendChild(relatedArchetypeCounter);
 
-			i++;
+			// icon
+			var relatedArchetypeIcon = app.dom.createSvgElement('g', {
+				'transform': `translate(15, -10)`,
+			});
+			relatedArchetypeIcon.addEventListener('click', relatedArchetypeClick.bind(this, parseInt(archetypeIndex)));
+			relatedArchetypeIcon.innerHTML = app.archetype.icon[app.archetype.vertex[archetypeIndex].name];
+			relatedArchetype.appendChild(relatedArchetypeIcon);
+
+			// line
+			relatedArchetype.appendChild(app.dom.createSvgElement('line', {
+				'x1': 30,
+				'y1': -5,
+				'x2': 36,
+				'y2': -5,
+			}));
+
+			archetypeIconOrder++;
 		}
 
 		// name