Revize ed458068

reworked FloatingPoint to ES6 class NodeProxy

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

@@ -1 @@
-/**
- * Class representing a floating point connecting a node present in the viewport with a node excluded to the sidebar. Position 
- * of a floating point is changed every time when graph is moved or zoomed, node is moved in viewport or sidebar is scrolled.
- * @constructor
- */
-function FloatingPoint() {
-	var rootElement;
-
-	var node;
-	var position = new Coordinates(0, 0);
-
-	var inEdgeList = [];
-	var outEdgeList = [];
-
-	/**
-	 * Sets a DOM element in sidebar that this floating point is bound to. It is used to calculate floating point position
-	 * when sidebar is scrolled.
-	 * @param {Element} newValue DOM element in sidebar the floating point is bound to.
-	 */
-	this.setElement = function(newValue) {
-		rootElement = newValue;
-	};
-
-	/**
-	 * Sets a graph node (vertex or group) that this floating point is bound to. This node is then highlighted when the other
-	 * node of the edge is clicked.
-	 * @param {(Vertex|Group)} newValue Graph node the floating point is bound to.
-	 */
-	this.setNode = function(newValue) {
-		node = newValue;
-	};
-	
-	/**
-	 * Adds a new edge ending in this floating point. Its ending point is moved to the current position of the floating point.
-	 * @param {Edge} edge Edge going to the floating point.
-	 */
-	this.addInEdge = function(edge) {
-		if (!(edge instanceof Edge)) {
-			throw new TypeError(edge.toString() + 'is not instance of Edge');
-		}
-
-		edge.end = this.getPosition();
-		
-		inEdgeList.push(edge);
-	};
-	
-	/**
-	 * Adds a new edge starting in this floating point. Its starting point is moved to the current position of the floating point.
-	 * @param {Edge} edge Edge going from the floating point.
-	 */
-	this.addOutEdge = function(edge) {
-		if (!(edge instanceof Edge)) {
-			throw new TypeError(edge.toString() + 'is not instance of Edge');
-		}
-
-		edge.start = this.getPosition();
-		
-		outEdgeList.push(edge);
-	};
-
-	/**
-	 * @returns {array<Edge>} Array of edges going to the floating point.
-	 */
-	this.getInEdgeList = function() {
-		return inEdgeList;
-	};
-
-	/**
-	 * @returns {array<Edge>} Array of edges going from the floating point.
-	 */
-	this.getOutEdgeList = function() {
-		return outEdgeList;
-	};
-
-	/**
-	 * @returns {Coordinates} Current position of the floating point.
-	 */
-	this.getPosition = function() {
-		return position;
-	};
-
-	/**
-	 * Updates the current position of vertices related to the floating point.
-	 */
-	this.setPosition = function() {
-		var bbox = rootElement.getBoundingClientRect();
-		var viewportPosition = app.viewportComponent.getPosition();
-
-		position.x = (bbox.left - viewportPosition.x);
-		position.y = (bbox.top - viewportPosition.y - app.headerComponent.height - app.navbarComponent.height);
-
-		if (node instanceof Vertex) {
-			var edgeOffsetY = 10;
-		} else if (node instanceof Group) {
-			var edgeOffsetY = 35;
-		} else {
-			var edgeOffsetY = 0;
-		}
-
-		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.from.archetype);
-
-			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.to.archetype);
-
-			edge.start = new Coordinates(
-				position.x / app.zoom.scale,
-				(position.y + edgeOffsetY + archetypeIconOrder * 20) / app.zoom.scale,
-		}, this);
-			);
-	};
-
-	/**
-	 * @returns {Coordinates} Centre of this floating point.
-	 */
-	this.getCenter = function() {
-		return position;
-	};
-
-	/**
-	 * Always returns false as floating points may never be excluded. It is here for FloatingPoint to be compatible with API of Vertex.
-	 * @see Vertex
-	 * @returns {boolean} Always false.
-	 */
-	this.isExcluded = function() {
-		return false;
-	};
-
-	/**
-	 * Does nothing as floating points may never be dimmed. It is here for FloatingPoint to be compatible with API of Vertex.
-	 * @see Vertex
-	 * @param {boolean} newValue Anything.
-	 */
-	this.setDimmed = function(newValue) {
-		// do nothing
-	};
-
-	/**
-	 * Toggles highlighting of the depedent node.
-	 * @param {boolean} newValue True to highlight the node as required, otherwise false.
-	 */
-	this.setHighlightedRequired = function(newValue) {
-		node.isHighlightedAsRequired = newValue;
-	};
-
-	/**
-	 * Toggles highlighting of the depedent node.
-	 * @param {boolean} newValue True to highlight the node as provided, otherwise false.
-	 */
-	this.setHighlightedProvided = function(newValue) {
-		node.isHighlightedAsProvided = newValue;
-	};
-}

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

@@ -396 +396 @@
 		]);
 
 		// set floater
-		this._proxy.setElement(this._rootElement);
+		this._proxy.element = this._rootElement;
 
 		// set edges' ends
 		let inEdgeList = this.inEdgeList;

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

@@ -279 +279 @@
 
 		if (newValue) {
 			// set floater
-			this._proxy = new FloatingPoint;
-			this._proxy.setNode(this);
+			this._proxy = new NodeProxy(this);
 			app.sidebarComponent.addFloater(this._proxy);
 
 		} else {

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

@@ +1 @@
+/**
+ * Class representing a proxy node connecting a node present in the viewport with a node excluded to the sidebar. Position 
+ * of a proxy is changed every time when graph is moved or zoomed, the node is moved in viewport or sidebar is scrolled.
+ */
+class NodeProxy {
+	/**
+	 * @constructor
+	 * @param {Node} node Node that this proxy is bound to.
+	 */
+	constructor(node) {
+		if (!(node instanceof Node)) {
+			throw new TypeError(node.toString() + ' is not an instance of Node');
+		}
+
+		this._node = node;
+
+		this._position = new Coordinates(0, 0);
+
+		this._inEdgeList = [];
+		this._outEdgeList = [];
+	}
+
+	/**
+	 * Sets a DOM element in sidebar that this proxy is bound to. It is used to calculate proxy position when sidebar is scrolled.
+	 * @param {Element} newValue DOM element in sidebar the proxy is bound to.
+	 */
+	set element(newValue) {
+		if (!(newValue instanceof Element)) {
+			throw new TypeError(newValue.toString() + ' is not an instance of Element');
+		}
+
+		this._rootElement = newValue;
+	}
+
+	/**
+	 * Adds a new edge ending in this proxy. Its ending point is moved to the current position of the proxy.
+	 * @param {Edge} edge Edge going to this proxy.
+	 */
+	addInEdge(edge) {
+		if (!(edge instanceof Edge)) {
+			throw new TypeError(edge.toString() + ' is not an instance of Edge');
+		}
+
+		edge.end = this.position;
+
+		this._inEdgeList.push(edge);
+	}
+	
+	/**
+	 * Adds a new edge starting in this proxy. Its starting point is moved to the current position of the proxy.
+	 * @param {Edge} edge Edge going from this proxy.
+	 */
+	addOutEdge(edge) {
+		if (!(edge instanceof Edge)) {
+			throw new TypeError(edge.toString() + ' is not an instance of Edge');
+		}
+
+		edge.start = this.position;
+		
+		this._outEdgeList.push(edge);
+	}
+
+	/**
+	 * @returns {array<Edge>} Array of edges going to the proxy.
+	 */
+	get inEdgeList() {
+		return this._inEdgeList;
+	}
+
+	/**
+	 * @returns {array<Edge>} Array of edges going from this proxy.
+	 */
+	get outEdgeList() {
+		return this._outEdgeList;
+	}
+
+	/**
+	 * @returns {Coordinates} Current position of this proxy.
+	 */
+	get position() {
+		return this._position;
+	}
+
+	/**
+	 * Updates the current position of vertices related to this proxy.
+	 */
+	updatePosition() {
+		let bbox = this._rootElement.getBoundingClientRect();
+		let viewportPosition = app.viewportComponent.getPosition();
+
+		this._position.x = (bbox.left - viewportPosition.x);
+		this._position.y = (bbox.top - viewportPosition.y - app.headerComponent.height - app.navbarComponent.height);
+
+		let edgeOffsetY;
+		if (this._node instanceof Vertex) {
+			edgeOffsetY = 10;
+		} else if (this._node instanceof Group) {
+			edgeOffsetY = 35;
+		} else {
+			edgeOffsetY = 0;
+		}
+
+		let archetypeList = Object.keys(this._node.relatedArchetypeMap).map(archetypeIndex => parseInt(archetypeIndex));
+		let archetypeIconOrder;
+
+		// redraw dependent edges
+		let inEdgeList = this.inEdgeList;
+		inEdgeList.forEach(edge => {
+			archetypeIconOrder = archetypeList.indexOf(edge.from.archetype);
+
+			edge.end = new Coordinates(
+				this._position.x / app.zoom.scale,
+				(this._position.y + edgeOffsetY + archetypeIconOrder * 20) / app.zoom.scale,
+			);
+		});
+
+		let outEdgeList = this.outEdgeList;
+		outEdgeList.forEach(edge => {
+			archetypeIconOrder = archetypeList.indexOf(edge.to.archetype);
+
+			edge.start = new Coordinates(
+				this._position.x / app.zoom.scale,
+				(this._position.y + edgeOffsetY + archetypeIconOrder * 20) / app.zoom.scale,
+			);
+		});
+	}
+
+	/**
+	 * @returns {Coordinates} Centre of this proxy.
+	 */
+	get center() {
+		return this._position;
+	}
+
+	/**
+	 * Always returns false as proxies may never be excluded. It is here for NodeProxy to be compatible with API of Node.
+	 * @see Node
+	 * @returns {boolean} Always false.
+	 */
+	get isExcluded() {
+		return false;
+	}
+
+	/**
+	 * Does nothing as proxies may never be dimmed. It is here for NodeProxy to be compatible with API of Node.
+	 * @see Node
+	 * @param {boolean} newValue Anything.
+	 */
+	set isDimmed(newValue) {
+		// do nothing
+	}
+
+	/**
+	 * Toggles highlighting of the depedent node.
+	 * @param {boolean} newValue True to highlight the node as required, otherwise false.
+	 */
+	set isHighlightedAsRequired(newValue) {
+		this._node.isHighlightedAsRequired = newValue;
+	}
+
+	/**
+	 * Toggles highlighting of the depedent node.
+	 * @param {boolean} newValue True to highlight the node as provided, otherwise false.
+	 */
+	set isHighlightedAsProvided(newValue) {
+		this._node.isHighlightedAsProvided = newValue;
+	}
+}

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

@@ -21 +21 @@
 
 	this.refreshFloaters = function() {
 		floaterList.forEach(floater => {
-			floater.setPosition();
+			floater.updatePosition();
 		});
 	};
 

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

@@ -364 +364 @@
 		]);
 
 		// set floater element
-		this._proxy.setElement(this._rootElement);
+		this._proxy.element = this._rootElement;
 
 		// set edges' ends
 		let inEdgeList = this.inEdgeList;

sources/src/main/webapp/showGraph.jsp

@@ -38 +38 @@
 		<script src="js/components/generic/popover.js"></script>
 		<script src="js/components/generic/popup.js"></script>
 		<script src="js/components/node.js"></script>
+		<script src="js/components/nodeProxy.js"></script>
 		<script src="js/components/attribute.js"></script>
 		<script src="js/components/edge.js"></script>
 		<script src="js/components/edgePopover.js"></script>
-		<script src="js/components/floatingPoint.js"></script>
 		<script src="js/components/group.js"></script>
 		<script src="js/components/groupVertexList.js"></script>
 		<script src="js/components/header.js"></script>