AframeRelation(Highl./Transp./Con.)Controller working

AframeRelationConnectorController:
    -implemented a function to determine intersections of cylinders with any object (objects of any shape and also its parents) by raycasting
      function calculateBorderPosition(THREE.Vector3 sourceOfRay, THREE.Vector3 targetOfRay, model.entity entity) : returns THREE.Vector3 if intersection was found
      struggles with current aframe RD Bank Model since it consists of 2D shapes where no intersection can be found
    -fixPositionZ made no sense; renamed it to fixPositionY setting the y coordinates of source and target to the lower one of both
    -added colors for connector and endPoints to the controllerConfig
    -objects created in this controller are not contained in the model which may cause errors in other controllers (e.g. hoverController)
    -the config parameter elementShape was removed due to the original RelationConnectorController only implementing the function for circle (assuming circle and square refer to the (related)Entities shape
    
RelationConnectorController:
    -corrected some typos
    
RelationHighlightController:
    -added a controllerConfig
    -corrected some typos
    -changed color(0, 0, 0) to "black" which is aframe compatible
    
RelationTransparencyController:
    -corrected some typos
    -removed unused variable noFadeValue

Author: Aaron Sillus

ui/scripts/RelationConnector/AframeRelationConnectorController.js

@@ -5,25 +5,22 @@ var relationConnectorController = function(){
 
 	var connectors = new Array();
 	var relations = new Array();
-	
-	var loadedMin		= new Map();
-	var loadedMax		= new Map();
-	var loadedPositions = new Map();
-	var loadedDistances = new Map();
 
 	var activated = false;
 
 
 	//config parameters	
 	var controllerConfig = {
+        fixPositionY : false,
 		fixPositionZ : false,
 		showInnerRelations : false,
-		elementShape : "",					//circle, square
 		sourceStartAtParentBorder : false,
 		targetEndAtParentBorder : false,
 		sourceStartAtBorder: false,
 		targetEndAtBorder: false,
 		createEndpoints : false,
+		connectorColor : {r: 1, g: 0, b: 0},
+		endpointColor : {r: 0, g: 0, b: 0}
 	}
 
 
@@ -201,21 +198,55 @@ var relationConnectorController = function(){
 		if( targetPosition === null ){
 			return;
 		}
+
+        if(controllerConfig.sourceStartAtParentBorder){
+        	let sourceParent = entity.belongsTo;
+        	let targetParent = relatedEntity.belongsTo;
+            if(sourceParent != targetParent){
+            	if(controllerConfig.targetEndAtParentBorder) {
+            		targetPosition = canvasManipulator.getCenterOfEntity(targetParent);
+                }
+                let intersection = calculateBorderPosition(targetPosition, canvasManipulator.getCenterOfEntity(sourceParent), sourceParent);
+            	if(intersection != undefined) {
+            		sourcePosition = intersection;
+				} else console.debug("raycasting found no intersection with parent objects surface");
+            }
+        }
+
+        if(controllerConfig.targetEndAtParentBorder){
+        	let targetParent = relatedEntity.belongsTo;
+        	if(targetParent != entity.belongsTo) {
+        		let intersection = calculateBorderPosition(sourcePosition, canvasManipulator.getCenterOfEntity(targetParent), targetParent);
+        		if(intersection != undefined) {
+        			targetPostion = intersection;
+				} else console.debug("raycasting found no intersection with parent objects surface");
+			}
+        }
+
 		if( controllerConfig.sourceStartAtBorder ) {
-			sourcePosition = calculateBorderPosition(targetPosition, sourcePosition, entity);
+			if(controllerConfig.targetEndAtBorder) {
+				targetPosition = canvasManipulator.getCenterOfEntity(relatedEntity);
+			}
+			// getCenterOfEntity again in-case it got overwritten for sourceStartAtParentBorder
+			sourcePosition = calculateBorderPosition(targetPosition, canvasManipulator.getCenterOfEntity(entity), entity);
 		}
 		if( controllerConfig.targetEndAtBorder ) {
-			targetPosition = calculateBorderPosition(sourcePosition, targetPosition, relatedEntity);
+            // getCenterOfEntity again in-case it got overwritten for targetEndAtParentBorder
+			targetPosition = calculateBorderPosition(sourcePosition, canvasManipulator.getCenterOfEntity(relatedEntity), relatedEntity);
 		}
-		
-		var connectorColor = {r:1, g:1, b:0};
+
 		var connectorSize = 0.05;
 
-		//config
-		if(controllerConfig.fixPositionZ) {
-            sourcePosition[z] = controllerConfig.fixPositionZ;
-            targetPosition[z] = controllerConfig.fixPositionZ;
-        }
+        // This function made no sense and doesn't seem to work on x3dom either
+		/*if(controllerConfig.fixPositionZ) {
+            sourcePosition.z = controllerConfig.fixPositionZ;
+            targetPosition.z = controllerConfig.fixPositionZ;
+        }*/
+		// suggestion for city model: draw horizontal cylinders on the lower positions level
+		if(controllerConfig.fixPositionY) {
+			sourcePosition.y = Math.min(sourcePosition.y, targetPosition.y);
+			targetPosition.y = sourcePosition.y;
+		}
 
 
         let deltaX = targetPosition.x - sourcePosition.x;
@@ -225,13 +256,13 @@ var relationConnectorController = function(){
         let distance = sourcePosition.distanceTo(targetPosition);
         let direction = new THREE.Vector3(deltaX, deltaY, deltaZ).normalize();
 
-		//create element
+		//create connector
         var connector = document.createElement("a-cylinder");
 		connector.addEventListener("loaded", function() {
 			let threeMesh = this.object3DMap.mesh;
 
             threeMesh.scale.set(connectorSize, distance, connectorSize);
-            threeMesh.material.color.setRGB(connectorColor.r, connectorColor.g, connectorColor.b);
+            threeMesh.material.color.setRGB(controllerConfig.connectorColor.r, controllerConfig.connectorColor.g, controllerConfig.connectorColor.b);
 			threeMesh.position.set(sourcePosition.x+deltaX/2,
                 sourcePosition.y+deltaY/2,
                 sourcePosition.z+deltaZ/2);
@@ -240,134 +271,76 @@ var relationConnectorController = function(){
             var quaternion = threeMesh.quaternion;
             quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
 		});
+		connector.setAttribute("flat-shading", true);
+		connector.setAttribute("shader", "flat");
 
 
 
 		let scene = document.querySelector("a-scene");
 		scene.appendChild(connector);
 		var connectorElements = [];
 		connectorElements.push(connector);
+
+		// create Endpoints
         if(controllerConfig.createEndpoints) {
         	var size = connectorSize*1.5;
         	var length = size * 6;
-            var sourceEndPoint = document.createElement("a-cylinder");
-            sourceEndPoint.addEventListener("loaded", function() {
+            var sourceEndpoint = document.createElement("a-cylinder");
+            sourceEndpoint.addEventListener("loaded", function() {
                 let threeMesh = this.object3DMap.mesh;
-                threeMesh.material.color.setRGB(connectorColor.r, connectorColor.g, connectorColor.b);
+                threeMesh.material.color.setRGB(controllerConfig.endpointColor);
                 threeMesh.scale.set(size, length, size);
                 threeMesh.position.set(sourcePosition.x, sourcePosition.y, sourcePosition.z);
                 var quaternion = threeMesh.quaternion;
                 quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
             });
-            var targetEndPoint = document.createElement("a-cylinder");
-            targetEndPoint.addEventListener("loaded", function() {
+            sourceEndpoint.setAttribute("flat-shading", true);
+            sourceEndpoint.setAttribute("shader", "flat");
+
+            var targetEndpoint = document.createElement("a-cylinder");
+            targetEndpoint.addEventListener("loaded", function() {
                 let threeMesh = this.object3DMap.mesh;
-                threeMesh.material.color.setRGB(connectorColor.r, connectorColor.g, connectorColor.b);
-                threeMesh.material.needsUpdate = true;
-                console.debug(threeMesh.material);
+                threeMesh.material.color.setRGB(controllerConfig.endpointColor);
                 threeMesh.scale.set(size, length, size);
                 threeMesh.position.set(targetPosition.x, targetPosition.y, targetPosition.z);
                 var quaternion = threeMesh.quaternion;
                 quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction.normalize());
             });
-            scene.appendChild(sourceEndPoint);
-            scene.appendChild(targetEndPoint);
-            connectorElements.push(sourceEndPoint);
-            connectorElements.push(targetEndPoint);
+            targetEndpoint.setAttribute("shader", "flat");
+
+            scene.appendChild(sourceEndpoint);
+            scene.appendChild(targetEndpoint);
+            connectorElements.push(sourceEndpoint);
+            connectorElements.push(targetEndpoint);
 
         }
 		return connectorElements;
 	}
-		
-	function isTargetChildOfSourceParent(target, source){
-		
-		var targetParent = target.belongsTo;		
-		var sourceParent = source.belongsTo;		
-        
-		while(targetParent !== undefined) {
-			
-			if(targetParent == sourceParent){
-				return true;
-			}	
-			
-			targetParent = targetParent.belongsTo;
-		}  		
-		
-		return false;
-	}	
 
-	function calculateBorderPosition(sourcePosition, targetPosition, entity){
+    function isTargetChildOfSourceParent(target, source){
+
+        var targetParent = target.belongsTo;
+        var sourceParent = source.belongsTo;
+
+        while(targetParent !== undefined) {
+
+            if(targetParent == sourceParent){
+                return true;
+            }
+
+            targetParent = targetParent.belongsTo;
+        }
+
+        return false;
+    }
+
+    function calculateBorderPosition(sourceOfRay, targetOfRay, entity){
 		let object = document.getElementById(entity.id);
 		let raycaster = new THREE.Raycaster();
 		raycaster.set(sourcePosition, targetPosition.subVectors(targetPosition, sourcePosition).normalize());
 		let intersection = raycaster.intersectObject(object.object3DMap.mesh);
 		return intersection[0].point;
 	}
-	
-	/*function calculatePositionFromParent(sourcePosition, targetPosition, sourceParent){
-		if(controllerConfig.elementShape == "circle"){
-			return calculateCirclePositionFromParent(sourcePosition, targetPosition, sourceParent);
-		}
-		if(controllerConfig.elementShape == "square"){
-			return calculateSquarePositionFromParent(sourcePosition, targetPosition, sourceParent);
-		}
-		return sourcePosition;
-	}
-	
-	function calculateSquarePositionFromParent(sourcePosition, targetPosition, sourceParent){
-		// To implement...
-	}
-	
-	function calculateCirclePositionFromParent(sourcePosition, targetPosition, sourceParent){
-		//calculation derived from http://www.3d-meier.de/tut6/XPresso53.html
-		
-		var parentPosition = getObjectPosition(sourceParent.id);
-		
-		var parentRadius = loadedDistances.get(sourceParent.id);
-		var parentX = parentPosition[0];
-		var parentY = parentPosition[1];
-			
-		
-		var targetX = targetPosition[0];
-		var targetY = targetPosition[1];
-		
-		var sourceX = sourcePosition[0];
-		var sourceY = sourcePosition[1];
-				
-		var deltaX = targetX - sourceX;	
-		var deltaY = targetY - sourceY;	
-		
-		var a = deltaY / deltaX;
-		var b = (targetY - parentY) - ( a * (targetX - parentX) );
-						
-		var r = parentRadius[0];
-		
-		
-		var AA = 1 + Math.pow(a, 2);
-		var BB = (2 * a * b)
-		var CC = Math.pow(b, 2) - Math.pow(r, 2);
-				
-		var XX = Math.pow(BB, 2) - 4 * AA * CC;
-		 
-		
-		var x1 = (-BB + Math.sqrt( XX, 2 )) / ( 2 * AA );
-		var x2 = (-BB - Math.sqrt( XX, 2 )) / ( 2 * AA );
-		
-		var y1 = a * x1 + b;
-		var y2 = a * x2 + b;		
-		
-		
-		var newSourcePosition;
-		if(  	(targetY > sourceY && targetX < sourceX) ||
-				(targetY < sourceY && targetX < sourceX) ){
-			newSourcePosition	= [x2+parentX, y2+parentY, sourcePosition[2]];			
-		} else {
-			newSourcePosition	= [x1+parentX, y1+parentY, sourcePosition[2]];
-		}
-				
-		return newSourcePosition;
-	}*/
-	
 
 	return {
         initialize		: initialize,

ui/scripts/RelationConnector/RelationConnectorController.js

@@ -23,8 +23,8 @@ var relationConnectorController = function(){
 		targetEndAtParentBorder : false,
 		sourceStartAtBorder: false,
 		targetEndAtBorder: false,
-		createEndpoints : false,
-	}
+		createEndpoints : false
+	};
 
 
 	function initialize(setupConfig){	
@@ -116,7 +116,7 @@ var relationConnectorController = function(){
 
 		removeAllConnectors();
 
-		//get related entites
+		//get related entities
 		sourceEntity = applicationEvent.entities[0];	
 
 		events.log.info.publish({ text: "connector - onRelationsChanged - selected Entity - " + sourceEntity.name});
@@ -145,7 +145,7 @@ var relationConnectorController = function(){
 				return;
 		}
 
-		events.log.info.publish({ text: "connector - onRelationsChanged - related Entites - " + relatedEntities.length});
+		events.log.info.publish({ text: "connector - onRelationsChanged - related Entities - " + relatedEntities.length});
 
 		if(relatedEntities.length == 0) {
 			return;
@@ -160,10 +160,10 @@ var relationConnectorController = function(){
 
 	function createRelatedConnections(){
 
-		var relatedEntitesMap = new Map();
+		var relatedEntitiesMap = new Map();
 
 		relatedEntities.forEach(function(relatedEntity){
-			if(relatedEntitesMap.has(relatedEntity)){
+			if(relatedEntitiesMap.has(relatedEntity)){
 				events.log.info.publish({ text: "connector - onRelationsChanged - multiple relation"});
 				return;
 			}
@@ -202,11 +202,11 @@ var relationConnectorController = function(){
 
 			relations.push(relation);
 
-			relatedEntitesMap.set(relatedEntity, relatedEntity);
+			relatedEntitiesMap.set(relatedEntity, relatedEntity);
 		});
 
 
-		if(relatedEntitesMap.size != 0){
+		if(relatedEntitiesMap.size != 0){
 
 			var applicationEvent = {			
 				sender: relationConnectorController,
@@ -238,7 +238,7 @@ var relationConnectorController = function(){
 			sourcePosition[2] = controllerConfig.fixPositionZ;
 			targetPosition[2] = controllerConfig.fixPositionZ;
 		}
-		
+
 		//create element
 		var transform = document.createElement('Transform');