Revize 5763d2dd

reworked Viewport to ES6 class

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

@@ -108 +108 @@
 
 		let start = new Coordinates(e.clientX, e.clientY);
 		let minimapViewportPosition = this.viewportPosition;
-		let viewportPosition = app.viewportComponent.getPosition();
+		let viewportPosition = app.viewportComponent.position;
 
 		let that = this;
 
@@ -123 +123 @@
 			that._viewportElement.setAttribute('x', minimapViewportPosition.x - offset.x);
 			that._viewportElement.setAttribute('y', minimapViewportPosition.y - offset.y);
 
-			app.viewportComponent.setPosition(new Coordinates(viewportPosition.x + (1 / that._scale) * offset.x, viewportPosition.y + (1 / that._scale) * offset.y));
+			app.viewportComponent.position = new Coordinates(viewportPosition.x + (1 / that._scale) * offset.x, viewportPosition.y + (1 / that._scale) * offset.y);
 		}
 
 		function mouseUp() {

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

@@ -137 +137 @@
 
 			let found = 0;
 			
-			app.viewportComponent.getNodeList().forEach(node => {
+			let nodeList = app.viewportComponent.nodeList;
+			nodeList.forEach(node => {
 				if (node.name.toLowerCase().includes(term.toLowerCase())) {
 					node.isFound = true;
 					found++;
@@ -150 +151 @@
 		}
 
 		function resetSearch() {
-			app.viewportComponent.getNodeList().forEach(node => {
+			let nodeList = app.viewportComponent.nodeList;
+			nodeList.forEach(node => {
 				node.isFound = false;
 			});
 
@@ -214 +216 @@
 				id: 'mostEdge',
 				title: 'Exclude components with the most count of edges separately.',
 				onClick: () => {
-					let vertexList = app.viewportComponent.getVertexList();
+					let vertexList = app.viewportComponent.vertexList;
 					if (vertexList.length === 0) return;
 
 					// find vertex with most edges
@@ -243 +245 @@
 				id: 'vertexToGroup',
 				title: 'Exclude components with the most count of edges to group.',
 				onClick: () => {
-					let vertexList = app.viewportComponent.getVertexList();
+					let vertexList = app.viewportComponent.vertexList;
 					if (vertexList.length === 0) return;
 
 					// find vertex with most edges

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

@@ -86 +86 @@
 	 */
 	updatePosition() {
 		let bbox = this._rootElement.getBoundingClientRect();
-		let viewportPosition = app.viewportComponent.getPosition();
+		let viewportPosition = app.viewportComponent.position;
 
 		this._position.x = (bbox.left - viewportPosition.x);
 		this._position.y = (bbox.top - viewportPosition.y - app.headerComponent.height - app.navbarComponent.height);

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

@@ -401 +401 @@
 		e.preventDefault();
 
 		let excludedNodeList = app.sidebarComponent.excludedNodeListComponent.getNodeList();
-		let includedGroupList = app.viewportComponent.getGroupList();
+		let includedGroupList = app.viewportComponent.groupList;
 
 		let nodeList = [].concat(excludedNodeList, includedGroupList);
 		if (nodeList.length === 0) return;

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

@@ -1 @@
-/**
- * @constructor
- */
-function Viewport() {
-	/** @prop {VertexContextMenuList} contextMenuComponent */
-	this.contextMenuComponent = null;
-	/** @prop {VertexPopoverComponent} vertexPopoverComponent */
-	this.vertexPopoverComponent = null;
-	/** @prop {EdgePopoverComponent} edgePopoverComponent */
-	this.edgePopoverComponent = null;
-
-	/** @prop {ForceDirected} forceDirected */
-	this.forceDirected = new ForceDirected;
-
-	var rootElement;
-	var innerSvgElement;
-	var edgesContainer;
-	var verticesContainer;
-	var groupsContainer;
-	var definitions;
-
-	var pan = false;
-
-	var edgeList = [];
-	var nodeList = [];
-	var vertexList = [];
-	var groupList = [];
-
-	this.addEdge = function(edge) {
+class Viewport {
+	/**
+	 * @constructor
+	 */
+	constructor() {
+		/** @prop {VertexContextMenuList} contextMenuComponent */
+		this.contextMenuComponent = null;
+		/** @prop {VertexPopoverComponent} vertexPopoverComponent */
+		this.vertexPopoverComponent = null;
+		/** @prop {EdgePopoverComponent} edgePopoverComponent */
+		this.edgePopoverComponent = null;
+
+		/** @prop {ForceDirected} forceDirected */
+		this.forceDirected = new ForceDirected;
+
+		this._edgeList = [];
+		this._nodeList = [];
+		this._vertexList = [];
+		this._groupList = [];
+	}
+
+	addEdge(edge) {
 		if (!(edge instanceof Edge)) {
 			throw new TypeError(edge.toString() + ' is not an instance of Edge');
 		}
 
-		edgeList.push(edge);
+		this._edgeList.push(edge);
 
 		if (edge.from === null || edge.from.isExcluded) return;
 		if (edge.to === null || edge.to.isExcluded) return;
 
-		edgesContainer.appendChild(edge.render());
-	};
+		this._edgesContainer.appendChild(edge.render());
+	}
 
-	this.addNode = function(node) {
+	addNode(node) {
 		if (!(node instanceof Node)) {
 			throw new TypeError(node.toString() + ' is not an instance of Node');
 		}
 
-		nodeList.push(node);
+		this._nodeList.push(node);
 
 		if (node instanceof Vertex) {
-			vertexList.push(node);
-			verticesContainer.appendChild(node.render());
+			this._vertexList.push(node);
+			this._verticesContainer.appendChild(node.render());
 		} else if (node instanceof Group) {
-			groupList.push(node);
-			groupsContainer.appendChild(node.render());
+			this._groupList.push(node);
+			this._groupsContainer.appendChild(node.render());
 		}
-	};
+	}
 
-	this.removeNode = function(node) {
+	removeNode(node) {
 		if (!(node instanceof Node)) {
 			throw new TypeError(node.toString() + ' is not an instance of Node');
 		}
 
-		nodeList.splice(nodeList.indexOf(node), 1);
+		this._nodeList.splice(this._nodeList.indexOf(node), 1);
 
 		if (node instanceof Vertex) {
-			vertexList.splice(vertexList.indexOf(node), 1);
+			this._vertexList.splice(this._vertexList.indexOf(node), 1);
 		} else if (node instanceof Group) {
-			groupList.splice(groupList.indexOf(node), 1);
+			this._groupList.splice(this._groupList.indexOf(node), 1);
 		}
-	};
-	
-	this.getEdgeList = function() {
-		return edgeList;
-	};
-	
-	this.getNodeList = function() {
-		return nodeList;
-	};
-	
-	this.getVertexList = function() {
-		return vertexList;
-	};
+	}
+
+	get edgeList() {
+		return this._edgeList;
+	}
 	
-	this.getGroupList = function() {
-		return groupList;
-	};
+	get nodeList() {
+		return this._nodeList;
+	}
+
+	get vertexList() {
+		return this._vertexList;
+	}
 
-	this.addSvgDefinition = function(id, svgString) {
-		definitions.appendChild(DOM.s('g', {
+	get groupList() {
+		return this._groupList;
+	}
+
+	addSvgDefinition(id, svgString) {
+		this._definitions.appendChild(DOM.s('g', {
 			id,
 			innerHTML: svgString,
 		}));
-	};
+	}
 
-	this.getSize = function() {
+	get size() {
 		return new Dimensions(
-			rootElement.offsetWidth,
-			rootElement.offsetHeight,
+			this._rootElement.offsetWidth,
+			this._rootElement.offsetHeight,
 		);
-	};
+	}
 
-	this.getPosition = function() {
+	get position() {
 		return new Coordinates(
-			+innerSvgElement.getAttribute('x'),
-			+innerSvgElement.getAttribute('y'),
+			+this._innerSvgElement.getAttribute('x'),
+			+this._innerSvgElement.getAttribute('y'),
 		);
-	};
+	}
 
-	this.setPosition = function(coords) {
-		innerSvgElement.setAttribute('x', coords.x);
-		innerSvgElement.setAttribute('y', coords.y);
-	};
+	set position(coords) {
+		this._innerSvgElement.setAttribute('x', coords.x);
+		this._innerSvgElement.setAttribute('y', coords.y);
+	}
 
-	this.center = function() {
-		var sumOfCenters = new Coordinates(0, 0);
-		var bbox = rootElement.getBoundingClientRect();
+	center() {
+		let sumOfCenters = new Coordinates(0, 0);
+		let bbox = this._rootElement.getBoundingClientRect();
 
-		var nodeList = app.viewportComponent.getNodeList();
+		let nodeList = this.nodeList;
 		nodeList.forEach(node => {
-			var center = node.center;
+			let center = node.center;
 
 			sumOfCenters.x += center.x;
 			sumOfCenters.y += center.y;
 		});
 
-		var center = new Coordinates(-1 * sumOfCenters.x / nodeList.length + bbox.width / 2, -1 * sumOfCenters.y / nodeList.length + bbox.height / 2);
+		let center = new Coordinates(
+			-1 * sumOfCenters.x / nodeList.length + (bbox.width / 2),
+			-1 * sumOfCenters.y / nodeList.length + bbox.height / 2,
+		);
 
-		innerSvgElement.setAttribute('x', center.x);
-		innerSvgElement.setAttribute('y', center.y);
+		this._innerSvgElement.setAttribute('x', center.x);
+		this._innerSvgElement.setAttribute('y', center.y);
 
 		app.sidebarComponent.minimapComponent.viewportPosition = center;
-	};
-	
-	this.render = function() {
-		rootElement = DOM.createHtmlElement('div', {
-			'class': 'viewport',
-			'id': 'viewport',
-		});
-		rootElement.addEventListener('wheel', onMouseWheel.bind(this));
-		rootElement.addEventListener('mousedown', onMouseDown.bind(this));
-		rootElement.addEventListener('dblclick', onDoubleClick.bind(this));
-
-		var mainSvg = DOM.createSvgElement('svg', {
-			'xmlns': 'http://www.w3.org/2000/svg',
-			'width': '100%',
-			'height': '100%',
-			'style': 'margin-bottom: -4px;',
-		})
-		rootElement.appendChild(mainSvg);
-		
-		innerSvgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-		innerSvgElement.setAttribute('x', 0);
-		innerSvgElement.setAttribute('y', 0);
-		innerSvgElement.setAttribute('id', 'svg1');
-		innerSvgElement.setAttribute('style', 'overflow: visible;');
-		mainSvg.appendChild(innerSvgElement);
-		
-		var graph = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-		graph.setAttribute('id', 'graph');
-		innerSvgElement.appendChild(graph);
-		
-		edgesContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-		edgesContainer.setAttribute('data-id', 'edges');
-		graph.appendChild(edgesContainer);
-
-		verticesContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-		verticesContainer.setAttribute('data-id', 'vertices');
-		graph.appendChild(verticesContainer);
-
-		groupsContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-		groupsContainer.setAttribute('data-id', 'groups');
-		graph.appendChild(groupsContainer);
+	}
 
-		definitions = DOM.createSvgElement('defs');
-		mainSvg.appendChild(definitions);
+	render() {
+		this.contextMenuComponent = new VertexContextMenuList;
+		this.vertexPopoverComponent = new VertexPopover;
+		this.edgePopoverComponent = new EdgePopover;
 
-		var linearGradient = DOM.createSvgElement('linearGradient', {
-			'id': 'node--highlighted-as-required-provided',
+		// graph canvas
+		const mainSvg = DOM.s('svg', {
+			width: '100%',
+			height: '100%',
+			style: 'margin-bottom: -4px;',
 		});
-		linearGradient.appendChild(DOM.createSvgElement('stop', {
-			'offset': '0%',
-			'stop-color': 'red',
-		}));
-		linearGradient.appendChild(DOM.createSvgElement('stop', {
-			'offset': '100%',
-			'stop-color': '#5896ff',
-		}));
-		definitions.appendChild(linearGradient);
+		
+		this._innerSvgElement = DOM.s('svg', {
+			x: 0,
+			y: 0,
+			id: 'svg1',
+			style: 'overflow: visible;',
+		});
+		mainSvg.appendChild(this._innerSvgElement);
 
-		this.contextMenuComponent = new VertexContextMenuList;
-		rootElement.appendChild(this.contextMenuComponent.render());
+		const graph = DOM.s('g', {
+			id: 'graph',
+		});
+		this._innerSvgElement.appendChild(graph);
 
-		this.vertexPopoverComponent = new VertexPopover;
-		rootElement.appendChild(this.vertexPopoverComponent.render());
+		// graph feature containers
+		this._edgesContainer = DOM.s('g', {
+			'data-id': 'edges',
+		});
+		graph.appendChild(this._edgesContainer);
 
-		this.edgePopoverComponent = new EdgePopover;
-		rootElement.appendChild(this.edgePopoverComponent.render());
+		this._verticesContainer = DOM.s('g', {
+			'data-id': 'vertices',
+		});
+		graph.appendChild(this._verticesContainer);
 
-		return rootElement;
-	};
+		this._groupsContainer = DOM.s('g', {
+			'data-id': 'groups',
+		});
+		graph.appendChild(this._groupsContainer);
+
+		// reusable definitions
+		this._definitions = DOM.s('defs', {}, [
+			// linear gradient
+			DOM.s('linearGradient', {
+				id: 'node--highlighted-as-required-provided',
+			}, [
+				DOM.s('stop', {
+					offset: '0%',
+					'stop-color': 'red',
+				}),
+				DOM.s('stop', {
+					offset: '100%',
+					'stop-color': '#5896ff',
+				}),
+			]),
+		]);
+		mainSvg.appendChild(this._definitions);
+
+		// root
+		this._rootElement = DOM.h('div', {
+			class: 'viewport',
+			id: 'viewport',
+			onWheel: this._onRootWheel.bind(this),
+			onMouseDown: this._onRootMouseDown.bind(this),
+			onDblClick: this._onRootDoubleClick.bind(this),
+		}, [
+			mainSvg,
+			this.contextMenuComponent.render(),
+			this.vertexPopoverComponent.render(),
+			this.edgePopoverComponent.render(),
+		]);
+
+		return this._rootElement;
+	}
 
-	this.reset = function() {
-		edgeList = [];
-		nodeList = [];
-		vertexList = [];
-		groupList = [];
+	reset() {
+		this._edgeList = [];
+		this._nodeList = [];
+		this._vertexList = [];
+		this._groupList = [];
 
-		edgesContainer.innerHTML = '';
-		verticesContainer.innerHTML = '';
-		groupsContainer.innerHTML = '';
-	};
+		this._edgesContainer.innerHTML = '';
+		this._verticesContainer.innerHTML = '';
+		this._groupsContainer.innerHTML = '';
+	}
 
-	function onMouseWheel(e) {
+	_onRootWheel(e) {
 		app.closeFloatingComponents();
 
 		// prevent pinch-to-zoom gesture from zooming the whole page
@@ -225 +229 @@
 		}
 	}
 
-	function onMouseDown(e) {
-		pan = true;
+	_onRootMouseDown(e) {
+		let start = new Coordinates(e.clientX, e.clientY);
+		let viewportPosition = this.position;
 
-		var start = new Coordinates(e.clientX, e.clientY);
-		var position = this.getPosition();
+		let that = this;
 
 		document.body.addEventListener('mousemove', mouseMove);
 		document.body.addEventListener('mouseup', mouseUp);
-		
-		function mouseMove(e) {
-			if (!pan) return;
-
-			e.preventDefault();
 
-			var coords = new Coordinates(position.x - (start.x - e.clientX), position.y - (start.y - e.clientY));
+		function mouseMove(e) {
+			let offset = new Coordinates(start.x - e.clientX, start.y - e.clientY);
 
-			innerSvgElement.setAttribute('x', coords.x);
-			innerSvgElement.setAttribute('y', coords.y);
+			that._innerSvgElement.setAttribute('x', viewportPosition.x - offset.x);
+			that._innerSvgElement.setAttribute('y', viewportPosition.y - offset.y);
 
-			app.sidebarComponent.minimapComponent.viewportPosition = coords;
+			app.sidebarComponent.minimapComponent.viewportPosition = new Coordinates(viewportPosition.x - offset.x, viewportPosition.y - offset.y);
 		}
 
-		function mouseUp(e) {
-			pan = false;
-			
-			start = null;
-			position = null;
-
+		function mouseUp() {
 			document.body.removeEventListener('mousemove', mouseMove);
 			document.body.removeEventListener('mouseup', mouseUp);
-			
+
 			app.redrawEdges();
 		}
 	}
 
-	function onDoubleClick(e) {
+	_onRootDoubleClick(e) {
 		app.closeFloatingComponents();
 
 		app.zoom.zoomIn(new Coordinates(e.offsetX, e.offsetY));

sources/src/main/webapp/js/services/forceDirected.js

@@ -21 +21 @@
 	this.run = function() {
 		var border = canvas / borderRatio;
 
-		var visibleNodes = app.viewportComponent.getNodeList(),
+		var visibleNodes = app.viewportComponent.nodeList,
 			otherVisibleNodes = [];
 
 		for (let i = 0; i < visibleNodes.length; i++) {

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

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