Revize a4090428

reworked Vertex, Group and Edge to ES6 classes; Vertex and Group extend newly created Node class

sources/src/main/webapp/css/components/sidebar.css

@@ -194 +194 @@
 	border: 3px solid red;
 }
 
-.sidebar .node--highlighted-required .vertex-name,
-.sidebar .node--highlighted-required .group-name {
+.sidebar .node--highlighted-as-required .vertex-name,
+.sidebar .node--highlighted-as-required .group-name {
 	background: red;
 }
 
-.sidebar .node--highlighted-provided .vertex-name,
-.sidebar .node--highlighted-provided .group-name {
+.sidebar .node--highlighted-as-provided .vertex-name,
+.sidebar .node--highlighted-as-provided .group-name {
 	background: #5896FF;
 }
 
-.sidebar .node--highlighted-required.node--highlighted-provided .vertex-name,
-.sidebar .node--highlighted-required.node--highlighted-provided .group-name {
+.sidebar .node--highlighted-as-required.node--highlighted-as-provided .vertex-name,
+.sidebar .node--highlighted-as-required.node--highlighted-as-provided .group-name {
 	background: linear-gradient(to right, red, #5896FF);
 }
 
-.sidebar .node--highlighted-required .provided-counter .outer-floater,
-.sidebar .node--highlighted-required-neighbours .required-counter .outer-floater,
-.sidebar .node--highlighted-provided .required-counter .outer-floater,
-.sidebar .node--highlighted-provided-neighbours .provided-counter .outer-floater,
-.sidebar .node--highlighted-required .provided-counter .outer-port,
-.sidebar .node--highlighted-required-neighbours .required-counter .outer-port,
-.sidebar .node--highlighted-provided .required-counter .outer-port,
-.sidebar .node--highlighted-provided-neighbours .provided-counter .outer-port {
+.sidebar .node--highlighted-as-required .provided-counter .outer-floater,
+.sidebar .node--highlighted-as-required-neighbours .required-counter .outer-floater,
+.sidebar .node--highlighted-as-provided .required-counter .outer-floater,
+.sidebar .node--highlighted-as-provided-neighbours .provided-counter .outer-floater,
+.sidebar .node--highlighted-as-required .provided-counter .outer-port,
+.sidebar .node--highlighted-as-required-neighbours .required-counter .outer-port,
+.sidebar .node--highlighted-as-provided .required-counter .outer-port,
+.sidebar .node--highlighted-as-provided-neighbours .provided-counter .outer-port {
 	display: block;
 }
 

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

@@ -20 +20 @@
 	stroke: red;
 }
 
-.viewport .edge--highlighted-required {
+.viewport .edge--highlighted-as-required {
 	stroke: red;
     stroke-width: 2;
 }
 
-.viewport .edge--highlighted-provided {
+.viewport .edge--highlighted-as-provided {
 	stroke: #5896FF;
     stroke-width: 2;
 }
@@ -60 +60 @@
 	stroke-width: 3;
 }
 
-.viewport .node--highlighted-required > rect {
+.viewport .node--highlighted-as-required > rect {
 	fill: red;
 }
 
-.viewport .node--highlighted-provided > rect {
+.viewport .node--highlighted-as-provided > rect {
 	fill: #5896FF;
 }
 
-.viewport .node--highlighted-archetype > rect {
+.viewport .node--highlighted-as-archetype > rect {
 	fill: yellowgreen;
 }
 
-.viewport .node--highlighted-required.node--highlighted-provided > rect {
-	fill: url(#node--highlighted-required-provided);
+.viewport .node--highlighted-as-required.node--highlighted-as-provided > rect {
+	fill: url(#node--highlighted-as-required-provided);
 }
 
 .viewport .node--dragged > rect {

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

@@ -1 +1 @@
 /**
  * Class representing an edge of a graph in viewport.
- * @constructor
- * @param {object} props Properties of the edge.
  */
-function Edge(props) {
-	/** @prop {integer} id Unique identifier of the edge. */
-	this.id = props.id;
+class Edge {
+	/**
+	 * @constructor
+	 * @param {object} props Properties of the edge.
+	 */
+	constructor(props) {
+		/** @prop {integer} id Unique identifier of the edge. */
+		this.id = props.id;
+		/** @prop {array} subedgeInfo */
+		this.subedgeInfo = props.subedgeInfo;
 
-	var rootElement;
+		this._isHidden = false;
+		this._isDimmed = false;
+		this._isHighlighted = false;
+		this._isHighlightedAsRequired = false;
+		this._isHighlightedAsProvided = false;
 
-	var hidden = false;
-	var dimmed = false;
-	var highlighted = false;
-	var highlightedRequired = false;
-	var highlightedProvided = false;
+		this._fromNode = null;
+		this._toNode = null;
 
-	var fromNode = null;
-	var toNode = null;
+		this._start = null;
+		this._end = null;
+	}
 
-	var start = new Coordinates(0, 0);
-	var end = new Coordinates(0, 0);
-	
 	/**
 	 * Sets origin vertex of the edge without moving the starting point.
 	 * @param {Vertex} node Vertex that this edge is going from.
 	 */
-	this.setFrom = function(node) {
+	set from(node) {
 		if (!(node instanceof Vertex)) {
-			throw new TypeError(node.toString() + 'is not instance of Vertex');
+			throw new TypeError(node.toString() + ' is not an instance of Vertex');
 		}
 
-		fromNode = node;
+		this._fromNode = node;
+		this._start = node.center;
+	}
 
-		setStart(node.getCenter());
-	};
-	
 	/**
-	 * Returns origin vertex of the edge.
+	 * @returns {Vertex} origin vertex of the edge.
 	 */
-	this.getFrom = function() {
-		return fromNode;
-	};
+	get from() {
+		return this._fromNode;
+	}
 	
 	/**
 	 * Sets target vertex of the edge without moving the ending point.
 	 * @param {Vertex} node Vertex that this edge is going to.
 	 */
-	this.setTo = function(node) {
+	set to(node) {
 		if (!(node instanceof Vertex)) {
-			throw new TypeError(node.toString() + 'is not instance of Vertex');
+			throw new TypeError(node.toString() + ' is not an instance of Vertex');
 		}
 
-		toNode = node;
-
-		setEnd(node.getCenter());
-	};
+		this._toNode = node;
+		this._end = node.center;
+	}
 	
 	/**
-	 * Returns target vertex of the edge.
+	 * @returns {Vertex} target vertex of the edge
 	 */
-	this.getTo = function() {
-		return toNode;
-	};
+	get to() {
+		return this._toNode;
+	}
 	
 	/**
 	 * Moves starting point of the edge to new coordinates and rotates the lollipop.
 	 * @param {Coordinates} coords New starting coordinates of the edge.
 	 */
-	this.moveStart = function(coords) {
-		setStart(coords);
-		
-		var lines = rootElement.querySelectorAll('.line');
-		lines.forEach(function(line) {
-			line.setAttribute('x1', start.x);
-			line.setAttribute('y1', start.y);
+	set start(coords) {
+		if (!(coords instanceof Coordinates)) {
+			throw new TypeError(coords.toString() + ' is not an instance of Coordinates');
+		}
+
+		this._start = coords;
+
+		this._lineElements.forEach(line => {
+			line.setAttribute('x1', this._start.x);
+			line.setAttribute('y1', this._start.y);
 		});
-		
-		// arrow position and rotation
-		var position = getArrowPosition.call(this);
-		var rotation = getArrowRotation.call(this);
 
-		var arrow = rootElement.querySelector('.arrow');
-		arrow.setAttribute('transform', `rotate(${rotation}, ${position.x},${position.y}) translate(${position.x},${position.y})`);
-	};
-	
+		// icon position and rotation
+		let position = this._iconPosition;
+		let rotation = this._iconRotation;
+
+		this._iconElement.setAttribute('transform', `rotate(${rotation}, ${position.x},${position.y}) translate(${position.x},${position.y})`);
+	}
+
 	/**
 	 * Moved ending point of the edge to new coordinates and rotates the arrow.
 	 * @param {Coordinates} coords New ending coordinates of the edge.
 	 */
-	this.moveEnd = function(coords) {
-		setEnd(coords);
-		
-		var lines = rootElement.querySelectorAll('.line');
-		lines.forEach(function(line) {
-			line.setAttribute('x2', end.x);
-			line.setAttribute('y2', end.y);
+	set end(coords) {
+		if (!(coords instanceof Coordinates)) {
+			throw new TypeError(coords.toString() + ' is not an instance of Coordinates');
+		}
+
+		this._end = coords;
+
+		this._lineElements.forEach(line => {
+			line.setAttribute('x2', this._end.x);
+			line.setAttribute('y2', this._end.y);
 		});
 		
-		// arrow position and rotation
-		var position = getArrowPosition.call(this);
-		var rotation = getArrowRotation.call(this);
+		// icon position and rotation
+		let position = this._iconPosition;
+		let rotation = this._iconRotation;
 
-		var arrow = rootElement.querySelector('.arrow');
-		arrow.setAttribute('transform', `rotate(${rotation}, ${position.x},${position.y}) translate(${position.x},${position.y})`);
-	};
+		this._iconElement.setAttribute('transform', `rotate(${rotation}, ${position.x},${position.y}) translate(${position.x},${position.y})`);
+	}
 
 	/**
 	 * Toggles visibility of the edge.
 	 * @param {boolean} newValue True to hide the edge, false to display it.
 	 */
-	this.setHidden = function(newValue) {
-		hidden = newValue;
+	set isHidden(newValue) {
+		this._isHidden = newValue;
 
 		if (newValue) {
-			rootElement.classList.add('hidden');
+			this._rootElement.classList.add('hidden');
 		} else {
-			rootElement.classList.remove('hidden');
+			this._rootElement.classList.remove('hidden');
 		}
-	};
+	}
 
 	/**
 	 * Toggles transparency of the edge.
 	 * @param {boolean} newValue True to set the edge semitransparent, false to display it normally.
 	 */
-	this.setDimmed = function(newValue) {
-		dimmed = newValue;
+	set isDimmed(newValue) {
+		this._isDimmed = newValue;
 
 		if (newValue) {
-			rootElement.classList.add('edge--dimmed');
+			this._rootElement.classList.add('edge--dimmed');
 		} else {
-			rootElement.classList.remove('edge--dimmed');
+			this._rootElement.classList.remove('edge--dimmed');
 		}
-	};
+	}
 
-    /**
-     * @returns true if the edge is currently highlighted (in any way), otherwise false
-     */
-	this.isHighlighted = function () {
-		return highlighted;
-    };
+	/**
+	 * @returns true if the edge is currently highlighted (in any way), otherwise false
+	 */
+	get isHighlighted() {
+		return this._isHighlighted;
+	}
 
 	/**
 	 * Toggles highlighting of the edge.
 	 * @param {boolean} newValue True to highlight the edge, false to unhighlight.
 	 */
-	this.setHighlighted = function(newValue) {
-		highlighted = newValue;
+	set isHighlighted(newValue) {
+		this._isHighlighted = newValue;
 
 		if (newValue) {
-			rootElement.classList.add('edge--highlighted');
+			this._rootElement.classList.add('edge--highlighted');
 		} else {
-			rootElement.classList.remove('edge--highlighted');
+			this._rootElement.classList.remove('edge--highlighted');
 		}
-	};
+	}
 	
 	/**
 	 * Toggles highlighting of the edge between vertex and its requirement.
 	 * @param {boolean} newValue True to highlight the edge as required, false to unhighlight.
 	 */
-	this.setHighlightedRequired = function(newValue) {
-		highlightedRequired = newValue;
+	set isHighlightedAsRequired(newValue) {
+		this._isHighlightedAsRequired = newValue;
 
 		if (newValue) {
-			rootElement.classList.add('edge--highlighted-required');
-			rootElement.classList.remove('edge--highlighted-provided');
+			this._rootElement.classList.add('edge--highlighted-as-required');
+			this._rootElement.classList.remove('edge--highlighted-as-provided');
 
 		} else {
-			rootElement.classList.remove('edge--highlighted-required');
+			this._rootElement.classList.remove('edge--highlighted-as-required');
 		}
-	};
+	}
 	
 	/**
 	 * Toggles highlighting of the edge between vertex and its dependent.
 	 * @param {boolean} newValue True to highlight the edge as provided, false to unhighlight.
 	 */
-	this.setHighlightedProvided = function(newValue) {
-		highlightedProvided = newValue;
+	set isHighlightedAsProvided(newValue) {
+		this._isHighlightedAsProvided = newValue;
 
 		if (newValue) {
-			rootElement.classList.remove('edge--highlighted-required');
-			rootElement.classList.add('edge--highlighted-provided');
+			this._rootElement.classList.remove('edge--highlighted-as-required');
+			this._rootElement.classList.add('edge--highlighted-as-provided');
 
 		} else {
-			rootElement.classList.remove('edge--highlighted-provided');
+			this._rootElement.classList.remove('edge--highlighted-as-provided');
 		}
-	};
-	
+	}
+
 	/**
 	 * Creates a new DOM element representing the edge in memory. Binds user interactions to local handler functions.
 	 * @returns {Element} SVG DOM element.
 	 */
-	this.render = function() {
-		rootElement = DOM.createSvgElement('g', {
-			'class': 'edge',
-			'data-id': props.id,
-			'data-from': props.from,
-			'data-to': props.to,
-		});
+	render() {
+		// icon
+		let position = this._iconPosition;
+		let rotation = this._iconRotation;
 
-		rootElement.appendChild(DOM.createSvgElement('line', {
-			'class': 'line',
-			'x1': start.x,
-			'y1': start.y,
-			'x2': end.x,
-			'y2': end.y,
-			'stroke': 'white',
-			'stroke-width': 5,
-		}));
-		
-		rootElement.appendChild(DOM.createSvgElement('line', {
-			'class': 'line',
-			'x1': start.x,
-			'y1': start.y,
-			'x2': end.x,
-			'y2': end.y,
-		}));
-
-		// arrow position and rotation
-		var position = getArrowPosition.call(this);
-		var rotation = getArrowRotation.call(this);
-		
-		// arrow
-		var arrow = DOM.createSvgElement('g', {
-			'class': 'arrow',
-			'data-edgeId': this.id,
-			'transform': `rotate(${rotation}, ${position.x},${position.y}) translate(${position.x},${position.y})`,
-		});
-		arrow.appendChild(DOM.createSvgElement('polygon', {
-			'points': '0,-10 30,0 0,10',
+		this._iconElement = DOM.s('g', {
+			class: 'arrow',
+			transform: `rotate(${rotation}, ${position.x},${position.y}) translate(${position.x},${position.y})`,
+			onClick: this._onEdgeClick.bind(this),
+		}, [
+			DOM.s('polygon', {
+				points: '0,-10 30,0 0,10',
+			}),
+		]);
+
+		// lines
+		this._lineElements = [
+			DOM.s('line', {
+				class: 'line',
+				x1: this._start.x,
+				y1: this._start.y,
+				x2: this._end.x,
+				y2: this._end.y,
+				stroke: 'white',
+				'stroke-width': 5,
+			}),
+			DOM.s('line', {
+				class: 'line',
+				x1: this._start.x,
+				y1: this._start.y,
+				x2: this._end.x,
+				y2: this._end.y,
+			}),
+		];
 
-		}));
-		arrow.addEventListener('click', click.bind(this));
-		rootElement.appendChild(arrow);
+		// root
+		this._rootElement = DOM.s('g', {
+			class: 'edge',
+			'data-id': this.id,
+			'data-from': this.from.name,
+			'data-to': this.to.name,
+		}, [].concat(this._lineElements, this._iconElement));
 
-		return rootElement;
-	};
+		return this._rootElement;
+	}
 	
 	/**
 	 * Removes the DOM element representing the edge from document.
 	 */
-	this.remove = function() {
-		rootElement.remove();
-	};
+	remove() {
+		this._rootElement.remove();
+	}
 
 	/**
 	 * Exports the edge to a new, plain JS object.
 	 * @returns {Object} exported edge
 	 */
-	this.export = function() {
+	export() {
 		return {
-			subedgeInfo: props.subedgeInfo,
-			from: this.getFrom().id,
-			to: this.getTo().id,
+			subedgeInfo: this.subedgeInfo,
+			from: this.from.id,
+			to: this.to.id,
 			text: '',
 			id: this.id,
 		};
-	};
+	}
 
 	/**
 	 * Edge click interaction. Highlights the edge and vertices related to it. Reveals edge popover.
 	 * @param {Event} e Click event.
 	 */
-	function click(e) {
-		app.viewportComponent.edgePopoverComponent.body = props.subedgeInfo;
+	_onEdgeClick(e) {
+		app.viewportComponent.edgePopoverComponent.body = this.subedgeInfo;
 		app.viewportComponent.edgePopoverComponent.position = new Coordinates(e.clientX, e.clientY);
 		app.viewportComponent.edgePopoverComponent.open();
 
 		// unhighlight other edges
-		app.edgeList.filter(function(edge) {
+		app.edgeList.filter(edge => {
 			return edge !== this;
-		}, this).forEach(function(edge) {
-			edge.setHighlighted(false);
-			edge.getFrom().setHighlighted(false);
-			edge.getTo().setHighlighted(false);
+		}).forEach(edge => {
+			edge.from.isHighlighted = false;
+			edge.to.isHighlighted = false;
+			edge.isHighlighted = false;
 		});
 
 		// highlight this edge
-		this.setHighlighted(!highlighted);
-		this.getFrom().setHighlighted(highlighted);
-		this.getTo().setHighlighted(highlighted);
+		this.from.isHighlighted = !this.isHighlighted;
+		this.to.isHighlighted = !this.isHighlighted;
+		this.isHighlighted = !this.isHighlighted;
 	}
-	
-	/**
-	 * Sets new coordinates of the starting point of the edge.
-	 * @param {Coordinates} coords New starting coordinates of the edge.
-	 */
-	function setStart(coords) {
-		if (!(coords instanceof Coordinates)) {
-			throw new TypeError(coords.toString() + 'is not instance of Coordinates');
-		}
 
-		start = coords;
-	}
-	
 	/**
-	 * Sets new coordinates of the ending point of the edge.
-	 * @param {Coordinates} coords New ending coordinates of the edge.
+	 * @returns {Coordinates} Current position of the icon.
 	 */
-	function setEnd(coords) {
-		if (!(coords instanceof Coordinates)) {
-			throw new TypeError(coords.toString() + 'is not instance of Coordinates');
-		}
-
-		end = coords;
-	}
-	
-	/**
-	 * @returns {Coordinates} Current position of the arrow.
-	 */
-	function getArrowPosition() {
-		// arrow is placed at 2/3 of the distance from start to end
+	get _iconPosition() {
+		// icon is placed at 2/3 of the distance from start to end
 		return new Coordinates(
-			(start.x + 2 * end.x) / 3,
-			(start.y + 2 * end.y) / 3,
+			(this._start.x + 2 * this._end.x) / 3,
+			(this._start.y + 2 * this._end.y) / 3,
 		);
 	}
-	
+
 	/**
-	 * @returns {float} Current rotation of the arrow in degrees.
+	 * @returns {float} Current rotation of the icon in degrees.
 	 */
-	function getArrowRotation() {
-		return -1 * Math.atan2(end.x - start.x, end.y - start.y) * 180 / Math.PI + 90;
+	get _iconRotation() {
+		return -1 * Math.atan2(this._end.x - this._start.x, this._end.y - this._start.y) * 180 / Math.PI + 90;
 	}
 }

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

@@ -39 +39 @@
 			throw new TypeError(edge.toString() + 'is not instance of Edge');
 		}
 
-		edge.moveEnd(this.getPosition());
+		edge.end = this.getPosition();
 		
 		inEdgeList.push(edge);
 	};
@@ -53 +53 @@
 			throw new TypeError(edge.toString() + 'is not instance of Edge');
 		}
 
-		edge.moveStart(this.getPosition());
+		edge.start = this.getPosition();
 		
 		outEdgeList.push(edge);
 	};
@@ -97 +97 @@
 			var edgeOffsetY = 0;
 		}
 
-		var archetypeList = Object.keys(node.getRelatedArchetypeMap()).map(function(archetypeIndex) {
+		var archetypeList = Object.keys(node.relatedArchetypeMap).map(function(archetypeIndex) {
 			return parseInt(archetypeIndex);
 		});
 		var archetypeIconOrder;
 
 		// redraw dependent edges
 		inEdgeList.forEach(function(edge) {
-			archetypeIconOrder = archetypeList.indexOf(edge.getFrom().archetype);
+			archetypeIconOrder = archetypeList.indexOf(edge.from.archetype);
 
-			edge.moveEnd(new Coordinates(
+			edge.end = new Coordinates(
 				position.x / app.zoom.scale,
 				(position.y + edgeOffsetY + archetypeIconOrder * 20) / app.zoom.scale,
-			));
 		}, this);
+			);
 
 		outEdgeList.forEach(function(edge) {
-			archetypeIconOrder = archetypeList.indexOf(edge.getTo().archetype);
+			archetypeIconOrder = archetypeList.indexOf(edge.to.archetype);
 
-			edge.moveStart(new Coordinates(
+			edge.start = new Coordinates(
 				position.x / app.zoom.scale,
 				(position.y + edgeOffsetY + archetypeIconOrder * 20) / app.zoom.scale,
-			));
 		}, this);
+			);
 	};
 
 	/**
@@ -152 +152 @@
 	 * @param {boolean} newValue True to highlight the node as required, otherwise false.
 	 */
 	this.setHighlightedRequired = function(newValue) {
-		node.setHighlightedRequired(newValue);
+		node.isHighlightedAsRequired = newValue;
 	};
 
 	/**
@@ -160 +160 @@
 	 * @param {boolean} newValue True to highlight the node as provided, otherwise false.
 	 */
 	this.setHighlightedProvided = function(newValue) {
-		node.setHighlightedProvided(newValue);
+		node.isHighlightedAsProvided = newValue;
 	};
 }

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

@@ -1 +1 @@
 /**
  * Class representing a group of vertices in graph. A group is composed from one or more vertices.
- * @constructor
- * @param {object} props Properties of the group.
  */
-function Group(props) {
-	/** @prop {integer} id Unique identifier of the group. */
-	this.id = props.hasOwnProperty('id') ? props.id : app.groupList.length + 1;
-	/** @prop {string} name Name of the group. */
-	this.name = props.hasOwnProperty('name') ? props.name : 'Group ' + this.id;
-	/** @prop {array} symbol Symbol of the group. */
-	this.symbol = app.markSymbol.getMarkSymbol();
-
-	var rootElement;
-	var vertexListComponent;
-
-	var position = new Coordinates(0, 0);
-	var size = {
-		width: 70,
-		height: 70,
-	};
-	var floater = null;
-
-	var pan = false;
-	var excluded = false;
-    var iconsDisplayed = false;
-
-	var highlighted = false;
-	var highlightedRequiredNeighbours = false;
-	var highlightedProvidedNeighbours = false;
-	var highlightedArchetypeNeighbours = false;
-	var found = false;
-	var dimmed = false;
-
-	var vertexList = [];
-	var relatedArchetypeMap = {};
+class Group extends Node {
+	/**
+	 * @constructor
+	 * @param {object} props Properties of the group.
+	 */
+	constructor(props) {
+		super(props);
+
+		this._size = new Dimensions(70, 70);
+
+		this._vertexList = [];
+	}
+
+	/**
+	 * @returns {Group} newly created group
+	 */
+	static create() {
+		return new Group({
+			id: app.groupList.length + 1,
+			name: 'Group ' + (app.groupList.length + 1),
+		});
+	}
 
 	/**
 	 * 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.
 	 * @param {Vertex} vertex Vertex to be added to the group.
 	 */
-	this.addVertex = function(vertex) {
+	addVertex(vertex) {
 		if (!(vertex instanceof Vertex)) {
-			throw new TypeError(vertex.toString() + 'is not instance of Vertex');
+			throw new TypeError(vertex.toString() + ' is not an instance of Vertex');
 		}
 
-		if (vertexList.length === 0) {
-			position = vertex.getPosition();
+		if (this._vertexList.length === 0) {
+			this.position = vertex.position;
 		}
 
-		var isIconShown = this.isIconsDisplayed();
-		if(isIconShown) showIconClick.bind(this)(null);
-
-		vertex.removeIcon();
-		vertex.setGroup(this);
-		vertex.setExcluded(this.isExcluded());
-		vertex.remove(this.isExcluded());	// edges of the vertex should be removed from DOM only if group is excluded
+		vertex.group = this;
+		vertex.isExcluded = this.isExcluded;
+		vertex.remove(this.isExcluded);	// edges of the vertex should be removed from DOM only if group is excluded
 
-		vertex.getInEdgeList().forEach(function(edge) {
-			if (this.isExcluded()) {
+		let inEdgeList = vertex.inEdgeList;
+		inEdgeList.forEach(edge => {
+			if (this.isExcluded) {
 				floater.addInEdge(edge);
 			} else {
-				edge.moveEnd(this.getCenter());
+				edge.end = this.center;
 			}
-		}, this);
+		});
 
-		vertex.getOutEdgeList().forEach(function(edge) {
-			if (this.isExcluded()) {
+		let outEdgeList = vertex.outEdgeList;
+		outEdgeList.forEach(edge => {
+			if (this.isExcluded) {
 				floater.addOutEdge(edge);
 			} else {
-				edge.moveStart(this.getCenter());
+				edge.start = this.center;
 			}
-		}, this);
+		});
 
-		var vertexRelatedArchetypeMap = vertex.getRelatedArchetypeMap();
-		for (var archetypeIndex in vertexRelatedArchetypeMap) {
-			if (!relatedArchetypeMap.hasOwnProperty(archetypeIndex)) {
-				relatedArchetypeMap[archetypeIndex] = 0;
+		let vertexRelatedArchetypeMap = vertex.relatedArchetypeMap;
+		for (let archetypeIndex in vertexRelatedArchetypeMap) {
+			if (this.relatedArchetypeMap.hasOwnProperty(archetypeIndex) === false) {
+				this.relatedArchetypeMap[archetypeIndex] = 0;
 			}
-	
-			relatedArchetypeMap[archetypeIndex] += vertexRelatedArchetypeMap[archetypeIndex];
+
+			this.relatedArchetypeMap[archetypeIndex] += vertexRelatedArchetypeMap[archetypeIndex];
 		}
 
-		app.viewportComponent.removeVertex(vertex);
+		app.viewportComponent.removeNode(vertex);
 
-		if (vertexListComponent) {
-			vertexListComponent.appendChild(vertex);
+		if (this._vertexListComponent) {
+			this._vertexListComponent.appendChild(vertex);
 		}
 
-		vertexList.push(vertex);
-        if(isIconShown) showIconClick.bind(this)(null);
-	};
+		this._vertexList.push(vertex);
+	}
 
 	/**
 	 * Removes a vertex from the group. The vertex is returned back to the viewport and its edges are moved to it.
 	 * @param {Vertex} vertex Vertex to be removed from the group.
 	 */
-	this.removeVertex = function(vertex) {
+	removeVertex(vertex) {
 		if (!(vertex instanceof Vertex)) {
-			throw new TypeError(vertex.toString() + 'is not instance of Vertex');
+			throw new TypeError(vertex.toString() + ' is not an instance of Vertex');
 		}
 
-		vertex.setGroup(null);
+		vertex.group = null;
 
-		vertex.getInEdgeList().forEach(function(edge) {
-			edge.moveEnd(this.getCenter());
-		}, vertex);
+		let inEdgeList = vertex.inEdgeList;
+		inEdgeList.forEach(edge => {
+			edge.end = vertex.center;
+		});
 
-		vertex.getOutEdgeList().forEach(function(edge) {
-			edge.moveStart(this.getCenter());
-		}, vertex);
+		let outEdgeList = vertex.outEdgeList;
+		outEdgeList.forEach(edge => {
+			edge.start = vertex.center;
+		});
 
-		var vertexRelatedArchetypeMap = vertex.getRelatedArchetypeMap();
-		for (var archetypeIndex in vertexRelatedArchetypeMap) {
-			relatedArchetypeMap[archetypeIndex] -= vertexRelatedArchetypeMap[archetypeIndex];
+		let vertexRelatedArchetypeMap = vertex.relatedArchetypeMap;
+		for (let archetypeIndex in vertexRelatedArchetypeMap) {
+			this.relatedArchetypeMap[archetypeIndex] -= vertexRelatedArchetypeMap[archetypeIndex];
 		}
 
-		app.viewportComponent.addVertex(vertex);
+		app.viewportComponent.addNode(vertex);
 
-		if (vertexListComponent) {
-			vertexListComponent.removeChild(vertex);
+		if (this._vertexListComponent) {
+			this._vertexListComponent.removeChild(vertex);
 		}
 
-		vertexList.splice(vertexList.indexOf(vertex), 1);
-	};
-	
+		this._vertexList.splice(this._vertexList.indexOf(vertex), 1);
+	}
+
 	/**
-	 * @returns {array<Vertex>} List of vertices added to the group.
+	 * @returns {array<Vertex>} List of vertices added to this group.
 	 */
-	this.getVertexList = function() {
-		return vertexList;
-	};
+	get vertexList() {
+		return this._vertexList;
+	}
+
+	/**
+	 * @returns {integer} Number of vertices added to this group.
+	 */
+	countVertices() {
+		return this._vertexList.length;
+	}
 
 	/**
 	 * @returns {array<Edge>} List of edges going to vertices added to the group.
 	 */
-	this.getInEdgeList = function() {
-		var edgeList = [];
+	get inEdgeList() {
+		let edgeList = [];
 
-		vertexList.forEach(function(vertex) {
-			vertex.getInEdgeList().filter(function(edge) {
+		this._vertexList.forEach(vertex => {
+			let inEdgeList = vertex.inEdgeList;
+			inEdgeList.filter(edge => {
 				return edgeList.indexOf(edge) === -1;
-			}).forEach(function(edge) {
+			}).forEach(edge => {
 				edgeList.push(edge);
 			});
 		});
 
 		return edgeList;
-	};
+	}
 
 	/**
 	 * @returns {array<Edge>} List of edges going from vertices added to the group.
 	 */
-	this.getOutEdgeList = function() {
-		var edgeList = [];
+	get outEdgeList() {
+		let edgeList = [];
 
-		vertexList.forEach(function(vertex) {
-			vertex.getOutEdgeList().filter(function(edge) {
+		this._vertexList.forEach(vertex => {
+			let outEdgeList = vertex.outEdgeList;
+			outEdgeList.filter(edge => {
 				return edgeList.indexOf(edge) === -1;
-			}).forEach(function(edge) {
+			}).forEach(edge => {
 				edgeList.push(edge);
 			});
 		});
 
 		return edgeList;
-	};
-
-	/**
-	 * @returns {array<Edge>} List of all edges related to vertices added to the group.
-	 */
-	this.getEdgeList = function() {
-		// TODO: some edges get duplicated in the resulting array this way
-
-		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.
-	 */
-	this.getPosition = function() {
-		return position;
-	};
-
-	/**
-	 * Updates the current position of the group in graph.
-	 */
-	this.setPosition = function(coords) {
-		if (!(coords instanceof Coordinates)) {
-			throw new TypeError(coords.toString() + 'is not instance of Coordinates');
-		}
-
-		position = coords;
-	};
-
-	/**
-	 * @returns {Coordinates} Centre of the group.
-	 */
-	this.getCenter = function() {
-		return new Coordinates(
-			position.x + size.width / 2,
-			position.y + size.height / 2,
-		);
-	};
-
-	/**
-	 * Moves the group to a new position in graph. Edges related to vertices in the group are moved as well.
-	 * @param {Coordinates} coords Coordinates to be moved to.
-	 */
-	this.move = function(coords) {
-		if (!(coords instanceof Coordinates)) {
-			throw new TypeError(coords.toString() + 'is not instance of Coordinates');
-		}
-
-		rootElement.setAttribute('x', coords.x);
-		rootElement.setAttribute('y', coords.y);
-
-		vertexList.forEach(function(vertex) {
-			vertex.getInEdgeList().forEach(function(edge) {
-				edge.moveEnd(new Coordinates(
-					coords.x + size.width / 2,
-					coords.y + size.height / 2,
-				));
-			});
-
-			vertex.getOutEdgeList().forEach(function(edge) {
-				edge.moveStart(new Coordinates(
-					coords.x + size.width / 2,
-					coords.y + size.height / 2,
-				));
-			});
-		}, this);
-	};
-
-	/**
-	 * Sets the group as found. Highlighting is skipped when the group is excluded.
-	 * @param {boolean} newValue True to mark the group as found, otherwise false.
-	 */
-	this.setFound = function(newValue) {
-		found = newValue;
-
-		if (excluded) return;
-		
-		if (newValue) {
-			rootElement.classList.add('node--found');
-		} else {
-			rootElement.classList.remove('node--found');
-		}
-	};
-
-	/**
-	 * Toggles transparency of the group.
-	 * @param {boolean} newValue True to set the group semitransparent, false to display it normally.
-	 */
-	this.setDimmed = function(newValue) {
-		dimmed = newValue;
-
-		if (excluded) return;
-
-		if (newValue) {
-			rootElement.classList.add('node--dimmed');
-		} else {
-			rootElement.classList.remove('node--dimmed');
-		}
-	};
-
-    /**
-     * @returns {boolean} true if icon in all neighbours should be displayed, false otherwise
-     */
-    this.isIconsDisplayed = function () {
-        return iconsDisplayed;
-    };
-
-	/**
-	 * @returns true if the group is currently highlighted (in any way), otherwise false
-	 */
-	this.isHighlighted = function() {
-		return highlighted;
-	};
-
-	/**
-	 * Toggles highlighting of the group.
-	 * @param {boolean} newValue True to highlight the group, false to unhighlight.
-	 */
-	this.setHighlighted = function(newValue) {
-		highlighted = newValue;
-
-		if (newValue) {
-			rootElement.classList.add('node--highlighted');
-		} else {
-			rootElement.classList.remove('node--highlighted');
-		}
-	};
-
-	/**
-	 * Toggles inner state of the group marking whether highlighting of its requirements is active.
-	 * @param {boolean} newValue True to highlight the neighbours, false to unhighlight.
-	 */
-	this.setHighlightedRequiredNeighbours = function(newValue) {
-		highlightedRequiredNeighbours = newValue;
-	};
-
-	/**
-	 * Toggles inner state of the group marking whether highlighting of its dependents is active.
-	 * @param {boolean} newValue True to highlight the neighbours, false to unhighlight.
-	 */
-	this.setHighlightedProvidedNeighbours = function(newValue) {
-		highlightedProvidedNeighbours = newValue;
-	};
-
-	/**
-	 * Toggles inner state of the group marking whether highlighting of instances of a vertex archetype is active.
-	 * @param {boolean} newValue True to highlight the neighbours, false to unhighlight.
-	 */
-	this.setHighlightedArchetypeNeighbours = function(newValue) {
-		highlightedArchetypeNeighbours = newValue;
-	};
-
-	/**
-	 * Toggles highlighting of the group to mark it as requirement of some other node.
-	 * @param {boolean} newValue True to highlight, false to unhighlight.
-	 */
-	this.setHighlightedRequired = function(newValue) {
-		if (newValue) {
-			rootElement.classList.add('node--highlighted-required');
-		} else {
-			rootElement.classList.remove('node--highlighted-required');
-		}
-	};
-	
-	/**
-	 * Toggles highlighting of the group to mark it as dependent of some other node.
-	 * @param {boolean} newValue True to highlight, false to unhighlight.
-	 */
-	this.setHighlightedProvided = function(newValue) {
-		if (newValue) {
-			rootElement.classList.add('node--highlighted-provided');
-		} else {
-			rootElement.classList.remove('node--highlighted-provided');
-		}
-	};
-	
-	/**
-	 * Toggles highlighting of the group to mark it as instance of archetype related to some other node.
-	 * @param {boolean} newValue True to highlight, false to unhighlight.
-	 */
-	this.setHighlightedArchetype = function(newValue) {
-		if (newValue) {
-			rootElement.classList.add('node--highlighted-archetype');
-		} else {
-			rootElement.classList.remove('node--highlighted-archetype');
-		}
-	};
+	}
 
 	/**
-	 * @returns {boolean} True is the group is currently excluded from the viewport, otherwise false.
+	 * For some reason must be here to work.
+	 * @inheritdoc
 	 */
-	this.isExcluded = function() {
-		return excluded;
-	};
+	get isExcluded() {
+		return super.isExcluded;
+	}
 
 	/**
 	 * Toggles excluded state of the group. If the group is set excluded, a new floating point is created to connect it with 
@@ -371 +176 @@
 	 * Any node is called excluded when it is not visible in the viewport but instead in the sidebar.
 	 * @param {boolean} newValue True to set the group as excluded, otherwise false.
 	 */
-	this.setExcluded = function(newValue) {
-		excluded = newValue;
+	set isExcluded(newValue) {
+		super.isExcluded = newValue;
 
-		vertexList.forEach(function(vertex) {
-			vertex.setExcluded(newValue);
+		this._vertexList.forEach(vertex => {
+			vertex.isExcluded = newValue;
 		});
-
-		if (newValue) {
-			// set floater
-			floater = new FloatingPoint;
-			floater.setNode(this);
-			app.sidebarComponent.addFloater(floater);
-
-		} else {
-			// remove floater
-			app.sidebarComponent.removeFloater(floater);
-			delete floater;
-		}
-	};
-
-	/**
-	 * Excludes the group from the viewport. Removes group DOM element and hides its edges. If showIcon is set to True
-     * display icon in all neighbour vertices.
-     * @param {boolean} showIcon True to display icon in all neighbours, False otherwise
-	 */
-	this.exclude = function(showIcon) {
-		this.setExcluded(true);
-		this.remove(true);
-
-		app.viewportComponent.removeGroup(this);
-
-        if(showIcon){
-            showIconClick.bind(this)(null)
-        }
-	};
+	}
 
 	/**
 	 * Includes the group in the viewport. Afterwards, edges related to the group are moved to the current position of the group.
 	 */
-	this.include = function() {
-		this.removeFromSidebarList();
-
-        if(iconsDisplayed) {
-            showIconClick.bind(this)(null);
-        }
-        	
-        this.setExcluded(false);
-		this.remove(false);
-
-		app.viewportComponent.addGroup(this);
+	include() {
+		super.include();
 
 		// set edges' ends
-		var inEdgeList = this.getInEdgeList();
-		inEdgeList.forEach(function(edge) {
-			edge.moveEnd(this.getCenter());
-		}, this);
-
-		var outEdgeList = this.getOutEdgeList();
-		outEdgeList.forEach(function(edge) {
-			edge.moveStart(this.getCenter());
-		}, this);
-	};
-
-	/**
-	 * Hook function used to remove the group from the sidebar list it is located in before it is moved to the viewport.
-	 */
-	this.removeFromSidebarList = Utils.noop;
-
-	/**
-	 * Creates a new DOM element representing the group in memory. The element being created depends on whether the group
-	 * is excluded at the moment. Binds user interactions to local handler functions.
-	 * @returns {Element} depending on whether the group is excluded.
-	 */
-	this.render = function() {
-		rootElement = excluded ? renderExcluded.call(this) : renderIncluded.call(this);
-
-		this.setHighlighted(highlighted);
-
-		return rootElement;
-	};
-
-	/**
-	 * Removes the DOM element representing the group from document.
-	 * @param {boolean} hideEdges True to hide edges of vertices in the group in the viewport. Edges are (almost) never really
-	 * removed but rather hidden for cases when a node is included back in the viewport.
-	 */
-	this.remove = function(hideEdges) {
-		rootElement.remove();
-
-		// hide edges
-		var inEdgeList = this.getInEdgeList();
-		inEdgeList.filter(function(edge) {
-			return !edge.getFrom().isExcluded();
-		}).forEach(function(edge) {
-			edge.setHidden(hideEdges);
+		let inEdgeList = this.inEdgeList;
+		inEdgeList.forEach(edge => {
+			edge.end = this.center;
 		});
 
-		var outEdgeList = this.getOutEdgeList();
-		outEdgeList.filter(function(edge) {
-			return !edge.getTo().isExcluded();
-		}).forEach(function(edge) {
-			edge.setHidden(hideEdges);
+		let outEdgeList = this.outEdgeList;
+		outEdgeList.forEach(edge => {
+			edge.start = this.center;
 		});
-	};
+	}
 
 	/**
 	 * Exports the group to a new, plain JS object.
 	 * @returns {Object} exported group
 	 */
-	this.export = function() {
-		var verticesId = vertexList.map(function(vertex) {
-			return vertex.id;
-		});
-
+	export() {
 		return {
 			id: this.id,
 			name: this.name,
-			verticesId: verticesId,
+			verticesId: this.vertexList.map(vertex => vertex.id),
 			verticesEdgeFromId: [],	// TODO: what to put in here? ids of vertices which outgoing edges are visible in graph
 			verticesEdgeToId: [],	// TODO: what to put in here? ids of vertices which incoming edges are visible in graph
-			position: position,
+			position: this.position,
 		};
-	};
+	}
 
 	/**
-	 * @returns {Element} SVG DOM element.
+	 * @returns {SVGElement} SVG DOM element.
 	 */
-	function renderIncluded() {
-		rootElement = DOM.createSvgElement('svg', {
-			'class': 'node group',
-			'x': position.x,
-			'y': position.y,
+	_renderIncluded() {
+		this._rootElement = DOM.s('svg', {
+			class: 'node group',
+			x: this.position.x,
+			y: this.position.y,
 			'data-id': this.id,
+			onClick: this._onNodeClick.bind(this),
+			onMouseDown: this._onNodeMouseDown.bind(this),
+		}, [
+			DOM.s('rect', {
+				width: this.size.width,
+				height: this.size.height,
+				x: 1,
+				y: 1,
+				fill: this.symbol[1],
+				stroke: 'black',
+				'stroke-width': 1,
+			}),
+			// name
+			DOM.s('foreignObject', {
+				x: 4,
+				y: 4,
+				width: 46,
+				height: 16,
+				onClick: this._onNameClick.bind(this),
+			}, [
+				DOM.h('span', {
+					class: 'group-name',
+					innerText: this.name,
+				}),
+			]),
+			// symbol
+			DOM.s('text', {
+				class: 'group-symbol',
+				x: 10,
+				y: 60,
+			}, [
+				DOM.t(this.symbol[0]),
+			]),
+			// dissolve button
+			DOM.s('g', {
+				class: 'button dissolve-button',
+				onClick: this._onDissolveClick.bind(this),
+			}, [
+				DOM.s('rect', {
+					rx: 4,
+					ry: 4,
+					x: 54,
+					y: 4,
+					height: 14,
+					width: 14,
+				}),
+				DOM.s('line', {
+					x1: 57,
+					y1: 7,
+					x2: 65,
+					y2: 15,
+				}),
+				DOM.s('line', {
+					x1: 65,
+					y1: 7,
+					x2: 57,
+					y2: 15,
+				}),
+			]),
+		]);
+
+		// symbol list
+		this._symbolListComponent = new NodeSymbolList;
+		this._rootElement.appendChild(this._symbolListComponent.render());
+
+		this._symbolList.forEach(symbol => {
+			this._symbolListComponent.appendChild(symbol);
 		});
-		rootElement.addEventListener('click', click.bind(this));
-		rootElement.addEventListener('mousedown', mouseDown.bind(this));
-
-		rootElement.appendChild(DOM.createSvgElement('rect', {
-			'width': size.width,
-			'height': size.height,
-			'x': 1,
-			'y': 1,
-			'fill': this.symbol[1],
-			'stroke': 'black',
-			'stroke-width': 1,
-		}));
-
-		// name
-		var nameTextInner = DOM.createHtmlElement('span', {
-			'class': 'group-name',
-		});
-		nameTextInner.appendChild(DOM.createTextElement(this.name));
 
-		var nameText = DOM.createSvgElement('foreignObject', {
-			'x': 4,
-			'y': 4,
-			'width': 46,
-			'height': 16,
-		});
-		nameText.appendChild(nameTextInner);
-		nameText.addEventListener('click', nameClick.bind(this));
-		rootElement.appendChild(nameText);
-
-		// symbol
-		var symbolText = DOM.createSvgElement('text', {
-			'class': 'group-symbol',
-			'x': 10,
-			'y': 60,
-		});
-		symbolText.appendChild(document.createTextNode(this.symbol[0]));
-		rootElement.appendChild(symbolText);
-
-		// dissolve button
-		var dissolveButton = DOM.createSvgElement('g', {
-			'class': 'button dissolve-button',
-		});
-		dissolveButton.appendChild(DOM.createSvgElement('rect', {
-			'rx': 4,
-			'ry': 4,
-			'x': 54,
-			'y': 4,
-			'height': 14,
-			'width': 14,
-		}));
-		dissolveButton.appendChild(DOM.createSvgElement('line', {
-			'x1': 57,
-			'y1': 7,
-			'x2': 65,
-			'y2': 15,
-		}));
-		dissolveButton.appendChild(DOM.createSvgElement('line', {
-			'x1': 65,
-			'y1': 7,
-			'x2': 57,
-			'y2': 15,
-		}));
-		dissolveButton.addEventListener('click', dissolveClick.bind(this));
-		rootElement.appendChild(dissolveButton);
-
-		return rootElement;
+		return this._rootElement;
 	}
 
 	/**
-	 * @returns {Element} HTML DOM element.
+	 * @returns {HTMLElement} HTML DOM element.
 	 */
-	function renderExcluded() {
-		rootElement = DOM.createHtmlElement('li', {
-			'class': 'node group',
-			'data-id': this.id,
+	_renderExcluded() {
+		const svg = DOM.s('svg', {
+			xmlns: 'http://www.w3.org/2000/svg',
+			height: 60,
+			width: 46,
 		});
 
-		var svg = DOM.createSvgElement('svg', {
-			'xmlns': 'http://www.w3.org/2000/svg',
-			'height': 60,
-			'width': 46,
-		});
-		rootElement.appendChild(svg);
-
 		// related archetypes
-		var relatedArchetypesGroup = DOM.createSvgElement('g', {
-			'transform': 'translate(10, 15)',
+		const relatedArchetypesGroup = DOM.s('g', {
+			transform: 'translate(10, 15)',
 		});
 		svg.appendChild(relatedArchetypesGroup);
 
-		var archetypeIconOrder = 0;
-		for (var archetypeIndex in relatedArchetypeMap) {
-			var relatedArchetype = DOM.createSvgElement('g', {
-				'class': 'related-archetype',
-				'transform': `translate(0, ${archetypeIconOrder * 20})`,
-			});
-			relatedArchetypesGroup.appendChild(relatedArchetype);
-
-			// counter
-			var relatedArchetypeCounter = DOM.createSvgElement('text');
-			relatedArchetypeCounter.appendChild(DOM.createTextElement(relatedArchetypeMap[archetypeIndex]));
-			relatedArchetype.appendChild(relatedArchetypeCounter);
-
-			// icon
-			var relatedArchetypeIcon = 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
-			relatedArchetype.appendChild(relatedArchetypeIcon);