Revize ba4eea92

reusing Vertex archetype icons in order to decrease number of DOM nodes

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

@@ -609 +609 @@
 			relatedArchetype.appendChild(relatedArchetypeCounter);
 
 			// icon
-			var relatedArchetypeIcon = app.dom.createSvgElement('g', {
+			var relatedArchetypeIcon = app.dom.createSvgElement('use', {
+				'href': '#vertexArchetypeIcon-' + app.archetype.vertex[archetypeIndex].name,
 				'class': 'archetype-icon',
 				'transform': `translate(15, -10)`,
 			});
 			relatedArchetypeIcon.addEventListener('click', relatedArchetypeClick.bind(this, parseInt(archetypeIndex))); // TODO when icon == null can not click on item
-			relatedArchetypeIcon.innerHTML = app.archetype.vertex[archetypeIndex].icon;
 			relatedArchetype.appendChild(relatedArchetypeIcon);
 
 			// line

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

@@ -521 +521 @@
 		}));
 
 		// archetype icon
-		var archetypeIcon = app.dom.createSvgElement('g', {
+		var archetypeIcon = app.dom.createSvgElement('use', {
+			'href': '#vertexArchetypeIcon-' + app.archetype.vertex[this.archetype].name,
 			'class': 'archetype-icon',
 			'transform': 'translate(8, 8)',
 		});
 		archetypeIcon.addEventListener('click', archetypeClick.bind(this)); // TODO when icon == null can not click on item
 
-		archetypeIcon.innerHTML = app.archetype.vertex[this.archetype].icon;
-
 		rootElement.appendChild(archetypeIcon);
 
 		// name
@@ -548 +547 @@
 
 		var archetypeIconOrder = 0;
 		for (var archetypeIndex in relatedArchetypeMap) {
-			var relatedArchetype = app.utils.createSvgElement('g', {
+			var relatedArchetypeIcon = app.utils.createSvgElement('use', {
+				'href': '#vertexArchetypeIcon-' + app.archetype.vertex[archetypeIndex].name,
 				'class': 'archetype-icon',
 				'transform': `translate(${archetypeIconOrder * relatedArchetypeIconWidth}, 8)`,
 			});
-			relatedArchetype.addEventListener('click', relatedArchetypeClick.bind(this, parseInt(archetypeIndex))); // TODO when icon == null can not click on item
-
-			relatedArchetype.innerHTML = app.archetype.vertex[archetypeIndex].icon;
+			relatedArchetypeIcon.addEventListener('click', relatedArchetypeClick.bind(this, parseInt(archetypeIndex))); // TODO when icon == null can not click on item
 
-			relatedArchetypeListContainer.appendChild(relatedArchetype);
+			relatedArchetypeListContainer.appendChild(relatedArchetypeIcon);
 
 			archetypeIconOrder++;
 		}
@@ -608 +606 @@
 			relatedArchetype.appendChild(relatedArchetypeCounter);
 
 			// icon
-			var relatedArchetypeIcon = app.dom.createSvgElement('g', {
+			var relatedArchetypeIcon = app.dom.createSvgElement('use', {
+				'href': '#vertexArchetypeIcon-' + app.archetype.vertex[archetypeIndex].name,
 				'class': 'archetype-icon',
 				'transform': `translate(15, -10)`,
 			});
 			relatedArchetypeIcon.addEventListener('click', relatedArchetypeClick.bind(this, parseInt(archetypeIndex))); // TODO when icon == null can not click on item
-			relatedArchetypeIcon.innerHTML = app.archetype.vertex[archetypeIndex].icon;
 			relatedArchetype.appendChild(relatedArchetypeIcon);
 
 			// line

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

@@ -17 +17 @@
 	var edgesContainer;
 	var verticesContainer;
 	var groupsContainer;
+	var definitions;
 
 	var pan = false;
 
@@ -94 +95 @@
 		return groupList;
 	};
 
+	this.addSvgDefinition = function(id, svgString) {
+		var g = app.dom.createSvgElement('g', {
+			'id': id,
+		});
+		g.innerHTML = svgString;
+		definitions.appendChild(g);
+	};
+
 	this.getSize = function() {
 		return {
 			'width': rootElement.offsetWidth,
@@ -173 +182 @@
 		groupsContainer.setAttribute('data-id', 'groups');
 		graph.appendChild(groupsContainer);
 
-		var defs = app.utils.createSvgElement('defs', {});
-		mainSvg.appendChild(defs);
+		definitions = app.utils.createSvgElement('defs', {});
+		mainSvg.appendChild(definitions);
 
 		var linearGradient = app.utils.createSvgElement('linearGradient', {
 			'id': 'node--highlighted-required-provided',
@@ -187 +196 @@
 			'offset': '100%',
 			'stop-color': '#5896ff',
 		}));
-		defs.appendChild(linearGradient);
+		definitions.appendChild(linearGradient);
 
 		this.contextMenuComponent = new VertexContextMenuList;
 		rootElement.appendChild(this.contextMenuComponent.render());

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

@@ -22 +22 @@
 		app.attributeTypeList = data.attributeTypes;
 		app.possibleEnumValues = data.possibleEnumValues;
 
+		app.archetype.vertex.filter(function(vertexArchetype) {
+			return app.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) {