Revize 91f0dca6

reworked Minimap to ES6 class

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

@@ -1 +1 @@
 /**
  * Class representing minimap of the viewport displayed in sidebar. It is used to have a quick overview of the current viewport layout.
- * @constructor
  */
-function Minimap() {
-	var rootElement;
-	var viewportElement;
+class Minimap {
+	/**
+	 * @constructor
+	 * @param {string} useElement ID of SVG element to display in minimap.
+	 * @param {float} scale Ratio to scale down the displayed element.
+	 */
+	constructor(useElement, scale = 0.1) {
+		this._width = 350;
+		this._height = 200;
+		this._useElement = useElement;
+		this._scale = scale;
+	}
+
+	/**
+	 * Creates a new DOM element representing the minimap in memory.
+	 * @public
+	 * @returns {SVGElement} SVG DOM element.
+	 */
+	render() {
+		this._viewportElement = DOM.s('rect', {
+			class: 'minimap-viewport',
+			onMouseDown: this._onViewportMouseDown.bind(this),
+		});
 
-	var width = 350;
-	var height = 200;
-	var scale = 0.1;
-	var useElement = '#graph';
+		this._rootElement = DOM.s('svg', {
+			class: 'minimap',
+			id: 'minimapComponent',
+			viewBox: `-100 -50 ${this._width} ${this._height}`,
+			onMouseDown: this._onRootMouseDown.bind(this),
+		}, [
+			DOM.s('use', {
+				transform: `scale(${this._scale})`,
+				href: this._useElement,
+			}),
+			this._viewportElement,
+		]);
+
+		return this._rootElement;
+	}
 
 	/**
 	 * Resizes the minimap viewport using current viewport size and minimap scale.
+	 * @public
 	 * @param {Dimensions} dimensions Object holding current dimensions of the viewport component.
 	 */
-	this.setViewportSize = function(dimensions) {
-		viewportElement.setAttribute('width', dimensions.width * scale);
-		viewportElement.setAttribute('height', dimensions.height * scale);
-	};
+	set viewportSize(dimensions) {
+		this._viewportElement.setAttribute('width', dimensions.width * this._scale);
+		this._viewportElement.setAttribute('height', dimensions.height * this._scale);
+	}
 
 	/**
+	 * @public
 	 * @returns {Coordinates} Current coordinates of the viewport.
 	 */
-	this.getViewportPosition = function() {
+	get viewportPosition() {
 		return new Coordinates(
-			+viewportElement.getAttribute('x'),
-			+viewportElement.getAttribute('y'),
+			+this._viewportElement.getAttribute('x'),
+			+this._viewportElement.getAttribute('y'),
 		);
-	};
+	}
 
 	/**
 	 * Moves the minimap viewport to a new position based on current viewport position and minimap scale.
+	 * @public
 	 * @param {Coordinates} coords Coordinates of the viewport.
 	 */
-	this.setViewportPosition = function(coords) {
-		viewportElement.setAttribute('x', coords.x * -1 * scale);
-		viewportElement.setAttribute('y', coords.y * -1 * scale);
-	};
+	set viewportPosition(coords) {
+		this._viewportElement.setAttribute('x', coords.x * -1 * this._scale);
+		this._viewportElement.setAttribute('y', coords.y * -1 * this._scale);
+	}
 
 	/**
-	 * Creates a new DOM element representing the minimap in memory.
-	 * @returns {Element} HTML DOM element.
+	 * @private
 	 */
-	this.render = function() {
-		rootElement = DOM.createSvgElement('svg', {
-			'class': 'minimap',
-			'id': 'minimapComponent',
-			'viewBox': `-100 -50 ${width} ${height}`,
-		});
-		rootElement.addEventListener('mousedown', onRootMouseDown.bind(this));
-
-		var graphElement = DOM.createSvgElement('use', {
-			'transform': `scale(${scale})`,
-		});
-		graphElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', useElement);
-		rootElement.appendChild(graphElement);
-
-		viewportElement = DOM.createSvgElement('rect', {
-			'class': 'minimap-viewport',
-		});
-		viewportElement.addEventListener('mousedown', onViewportMouseDown.bind(this));
-		rootElement.appendChild(viewportElement);
+	_onRootMouseDown(e) {
+		let start = new Coordinates(e.clientX, e.clientY);
 
-		return rootElement;
-	};
+		let viewBox = this._rootElement.getAttribute('viewBox').split(' ');
+		let minimapRootPosition = new Coordinates(parseInt(viewBox[0]), parseInt(viewBox[1]));
 
-	function onRootMouseDown(e) {
-		var start = new Coordinates(e.clientX, e.clientY);
-
-		var viewBox = rootElement.getAttribute('viewBox').split(' ');
-		var minimapRootPosition = new Coordinates(parseInt(viewBox[0]), parseInt(viewBox[1]));
+		let that = this;
 
 		document.body.addEventListener('mousemove', mouseMove);
 		document.body.addEventListener('mouseup', mouseUp);
@@ -78 +89 @@
 		function mouseMove(e) {
 			e.preventDefault();
 
-			var offset = new Coordinates(start.x - e.clientX, start.y - e.clientY);
+			let offset = new Coordinates(start.x - e.clientX, start.y - e.clientY);
 
-			rootElement.setAttribute('viewBox', `${minimapRootPosition.x + offset.x} ${minimapRootPosition.y + offset.y} ${width} ${height}`);
+			that._rootElement.setAttribute('viewBox', `${minimapRootPosition.x + offset.x} ${minimapRootPosition.y + offset.y} ${that._width} ${that._height}`);
 		}
 
-		function mouseUp(e) {
-			start = null;
-
+		function mouseUp() {
 			document.body.removeEventListener('mousemove', mouseMove);
 			document.body.removeEventListener('mouseup', mouseUp);
 		}
 	}
 
-	function onViewportMouseDown(e) {
+	/**
+	 * @private
+	 */
+	_onViewportMouseDown(e) {
 		e.stopPropagation();
 
-		var start = new Coordinates(e.clientX, e.clientY);
-		var minimapViewportPosition = this.getViewportPosition();
-		var viewportPosition = app.viewportComponent.getPosition();
+		let start = new Coordinates(e.clientX, e.clientY);
+		let minimapViewportPosition = this.viewportPosition;
+		let viewportPosition = app.viewportComponent.getPosition();
+
+		let that = this;
 
 		document.body.addEventListener('mousemove', mouseMove);
 		document.body.addEventListener('mouseup', mouseUp);
@@ -104 +118 @@
 		function mouseMove(e) {
 			e.preventDefault();
 
-			var offset = new Coordinates(start.x - e.clientX, start.y - e.clientY);
+			let offset = new Coordinates(start.x - e.clientX, start.y - e.clientY);
 
-			viewportElement.setAttribute('x', minimapViewportPosition.x - offset.x);
-			viewportElement.setAttribute('y', minimapViewportPosition.y - offset.y);
+			that._viewportElement.setAttribute('x', minimapViewportPosition.x - offset.x);
+			that._viewportElement.setAttribute('y', minimapViewportPosition.y - offset.y);
 
-			app.viewportComponent.setPosition(new Coordinates(viewportPosition.x + (1 / scale) * offset.x, viewportPosition.y + (1 / scale) * offset.y));
+			app.viewportComponent.setPosition(new Coordinates(viewportPosition.x + (1 / that._scale) * offset.x, viewportPosition.y + (1 / that._scale) * offset.y));
 		}
 
-		function mouseUp(e) {
-			start = null;
-			minimapViewportPosition = null;
-			viewportPosition = null;
-
+		function mouseUp() {
 			document.body.removeEventListener('mousemove', mouseMove);
 			document.body.removeEventListener('mouseup', mouseUp);
 			

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

@@ -89 +89 @@
 		rootElement.appendChild(sidebarBottom);
 
 		// minimap
-		this.minimapComponent = new Minimap;
+		this.minimapComponent = new Minimap('#graph');
 		sidebarBottom.appendChild(this.minimapComponent.render());
 
 		// status bar

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

@@ -139 +139 @@
 		innerSvgElement.setAttribute('x', center.x);
 		innerSvgElement.setAttribute('y', center.y);
 
-		app.sidebarComponent.minimapComponent.setViewportPosition(center);
+		app.sidebarComponent.minimapComponent.viewportPosition = center;
 	};
 	
 	this.render = function() {
@@ -255 +255 @@
 			innerSvgElement.setAttribute('x', coords.x);
 			innerSvgElement.setAttribute('y', coords.y);
 
-			app.sidebarComponent.minimapComponent.setViewportPosition(coords);
+			app.sidebarComponent.minimapComponent.viewportPosition = coords;
 		}
 
 		function mouseUp(e) {

sources/src/main/webapp/js/showGraphApp.js

@@ -111 +111 @@
 		]));
 		appElement.appendChild(this.modalWindowComponent.render());
 
-		this.sidebarComponent.minimapComponent.setViewportSize(this.viewportComponent.getSize());
+		this.sidebarComponent.minimapComponent.viewportSize = this.viewportComponent.getSize();
 
 		// diagram
 		document.addEventListener(DiagramUpdatedEvent.name, e => {
@@ -133 +133 @@
 		// window resize
 		window.addEventListener('resize', e => {
 			this.redrawEdges();
-			this.sidebarComponent.minimapComponent.setViewportSize(this.viewportComponent.getSize());
+			this.sidebarComponent.minimapComponent.viewportSize = this.viewportComponent.getSize();
 		});
 	}