add route for add merged layer3d (#14)

src/layer/abstract/Layer1d.js

@@ -207,7 +207,10 @@ Layer1d.prototype = Object.assign(Object.create(Layer.prototype), {
 			relativeElements.push(this.aggregationHandler.getElement());
 		}
 
-		return relativeElements;
+		return {
+			isOpen: this.isOpen,
+			elementList: relativeElements
+		};
 
 	},
 

src/layer/abstract/Layer2d.js

@@ -281,7 +281,11 @@ Layer2d.prototype = Object.assign(Object.create(Layer.prototype), {
 			}
 		}
 
-		return relativeElements;
+		return {
+			isOpen: this.isOpen,
+			elementList: relativeElements
+		};
+
 	},
 
 	// override this function to load user's layer config for layer2d object

src/layer/abstract/Layer3d.js

@@ -265,14 +265,18 @@ Layer3d.prototype = Object.assign(Object.create(Layer.prototype), {
 
 				if (this.isOpen) {
 					relativeElements.push(this.segregationHandlers[request.index].getElement());
+
 				} else {
 					relativeElements.push(this.aggregationHandler.getElement());
 				}
 
 			}
 		}
 
-		return relativeElements;
+		return {
+			isOpen: this.isOpen,
+			elementList: relativeElements
+		};
 
 	},
 

src/layer/merge/MergeLineGroupController.js

@@ -0,0 +1,158 @@
+import {LineGroupGeometry} from "../../elements/LineGroupGeometry";
+import { BasicMaterialOpacity } from "../../utils/Constant";
+
+function MergeLineGroupController() {
+
+	this.straightLineGroup = undefined;
+	this.curveLineGroup = undefined;
+
+	this.createBasicLineElement();
+
+}
+
+MergeLineGroupController.prototype = {
+
+	createBasicLineElement: function() {
+
+		let lineMat = new THREE.LineBasicMaterial( {
+			color: 0xffffff,
+			opacity: BasicMaterialOpacity,
+			transparent:true,
+			vertexColors: THREE.VertexColors
+		} );
+
+		let straightLineGeo = new THREE.Geometry();
+		straightLineGeo.dynamic = true;
+		this.straightLineGroup = new THREE.Line(straightLineGeo, lineMat);
+
+		let curveLineGeo = new THREE.Geometry();
+		curveLineGeo.dynamic = true;
+		this.curveLineGroup = new THREE.Line(curveLineGeo, lineMat);
+
+	},
+
+	getLineGroupParameters: function(selectedElement) {
+
+		this.scene.updateMatrixWorld();
+
+		let straightLineColors = [];
+		let straightLineVertices = [];
+
+		let curveLineColors = [];
+		let curveLineVertices = [];
+
+		let relatedElements = this.getRelativeElements(selectedElement);
+
+		let straightElements = relatedElements.straight;
+		let curveElements = relatedElements.curve;
+
+		let startPosition = selectedElement.getWorldPosition().sub(this.neuralGroup.getWorldPosition());
+
+		for (let i = 0; i < straightElements.length; i++) {
+
+			straightLineColors.push(new THREE.Color(this.color));
+			straightLineColors.push(new THREE.Color(this.color));
+
+			straightLineVertices.push(straightElements[i].getWorldPosition().sub(this.neuralGroup.getWorldPosition()));
+			straightLineVertices.push(startPosition);
+
+		}
+
+		let forward = true;
+
+		for (let i = 0; i < curveElements.length; i++) {
+
+			let startPos = startPosition;
+			let firstControlPointPos = startPos.clone().add(new THREE.Vector3(4 * this.width, 0, 0));
+
+			let endPos = curveElements[i].getWorldPosition().sub(this.neuralGroup.getWorldPosition());
+			let secondControlPointPos = endPos.clone().add(new THREE.Vector3(4 * this.width, 0, 0));
+
+			let curve = new THREE.CubicBezierCurve3(
+				startPos,
+				firstControlPointPos,
+				secondControlPointPos,
+				endPos
+			);
+
+			let points = curve.getPoints( 50 );
+
+			if (forward) {
+
+				for (let i = 0; i < points.length; i++) {
+
+					curveLineVertices.push(points[i]);
+					curveLineColors.push(new THREE.Color(this.color));
+
+				}
+
+			} else {
+
+				for (let i = this.points.length - 1; i >= 0; i--) {
+
+					curveLineVertices.push(points[i]);
+					curveLineColors.push(new THREE.Color(this.color));
+
+				}
+
+			}
+
+			forward = !forward;
+		}
+
+		return {
+
+			straight: {
+				lineColors: straightLineColors,
+				lineVertices: straightLineVertices
+			},
+
+			curve: {
+				lineColors: curveLineColors,
+				lineVertices: curveLineVertices
+			}
+
+		}
+
+	},
+
+	initLineGroup: function(selectedElement) {
+
+		let lineGroupParameters = this.getLineGroupParameters(selectedElement);
+		let straightParameters = lineGroupParameters.straight;
+		let curveParameters = lineGroupParameters.curve;
+
+		let straightGroupGeometryHandler = new LineGroupGeometry(
+			straightParameters.lineVertices,
+			straightParameters.lineColors
+		);
+
+		this.straightLineGroup.geometry = straightGroupGeometryHandler.getElement();
+		this.straightLineGroup.material.needsUpdate = true;
+
+		this.neuralGroup.add(this.straightLineGroup);
+
+		let curveGroupGeometryHandler = new LineGroupGeometry(
+			curveParameters.lineVertices,
+			curveParameters.lineColors
+		);
+		this.curveLineGroup.geometry = curveGroupGeometryHandler.getElement();
+		this.curveLineGroup.material.needsUpdate = true;
+
+		this.neuralGroup.add(this.curveLineGroup);
+
+	},
+
+	disposeLineGroup: function() {
+
+		this.straightLineGroup.geometry.dispose();
+		this.neuralGroup.remove(this.straightLineGroup);
+
+		this.curveLineGroup.geometry.dispose();
+		this.neuralGroup.remove(this.curveLineGroup);
+
+	}
+
+};
+
+export { MergeLineGroupController };

src/layer/merge/MergedLayer.js

@@ -1,9 +1,12 @@
 import { CloseButton } from "../../elements/CloseButton";
 import { LineGroupGeometry } from "../../elements/LineGroupGeometry";
 import { BasicMaterialOpacity } from "../../utils/Constant";
+import { MergeLineGroupController } from "./MergeLineGroupController";
 
 function MergedLayer(config) {
 
+	MergeLineGroupController.call(this);
+
 	this.scene = undefined;
 	this.layerIndex = undefined;
 	this.center = undefined;
@@ -49,17 +52,6 @@ function MergedLayer(config) {
 	this.nextHookHandler = undefined;
 	this.lastHookHandler = undefined;
 
-	// store the line group system element
-	let lineMat = new THREE.LineBasicMaterial( {
-		color: 0xffffff,
-		opacity: BasicMaterialOpacity,
-		transparent:true,
-		vertexColors: THREE.VertexColors
-	} );
-	let lineGeom = new THREE.Geometry();
-	lineGeom.dynamic = true;
-	this.lineGroup = new THREE.Line(lineGeom, lineMat);
-
 	// handler for element showing text
 	this.textElementHandler = undefined;
 
@@ -83,7 +75,7 @@ function MergedLayer(config) {
 
 }
 
-MergedLayer.prototype = {
+MergedLayer.prototype = Object.assign(Object.create(MergeLineGroupController.prototype), {
 
 	loadBasicLayerConfig: function(config) {
 
@@ -158,58 +150,8 @@ MergedLayer.prototype = {
 		this.neuralGroup.remove(this.closeButtonHandler.getElement());
 		this.closeButtonHandler = undefined;
 
-	},
-
-	getLineGroupParameters: function(selectedElement) {
-
-		this.scene.updateMatrixWorld();
-
-		let lineColors = [];
-		let lineVertices = [];
-
-		let relatedElements = this.getRelativeElements(selectedElement);
-
-		let startPosition = selectedElement.getWorldPosition().sub(this.neuralGroup.getWorldPosition());
-
-		for (let i = 0; i < relatedElements.length; i++) {
-
-			lineColors.push(new THREE.Color(this.color));
-			lineColors.push(new THREE.Color(this.color));
-
-			lineVertices.push(relatedElements[i].getWorldPosition().sub(this.neuralGroup.getWorldPosition()));
-			lineVertices.push(startPosition);
-
-		}
-
-		return {
-			lineColors: lineColors,
-			lineVertices: lineVertices
-		}
-
-	},
-
-	initLineGroup: function(selectedElement) {
-
-		let lineGroupParameters = this.getLineGroupParameters(selectedElement);
-
-		let lineGroupGeometryHandler = new LineGroupGeometry(
-			lineGroupParameters.lineVertices,
-			lineGroupParameters.lineColors
-		);
-		this.lineGroup.geometry = lineGroupGeometryHandler.getElement();
-		this.lineGroup.material.needsUpdate = true;
-
-		this.neuralGroup.add(this.lineGroup);
-
-	},
-
-	disposeLineGroup: function() {
-
-		this.lineGroup.geometry.dispose();
-		this.neuralGroup.remove(this.lineGroup);
-
 	}
 
-};
+});
 
 export { MergedLayer };

src/layer/merge/MergedLayer3d.js

@@ -385,6 +385,88 @@ MergedLayer3d.prototype = Object.assign(Object.create(MergedLayer.prototype), {
 			this.textElementHandler = undefined;
 		}
 
+	},
+
+	getRelativeElements: function(selectedElement) {
+
+		let curveElements = [];
+		let straightElements = [];
+
+		if (selectedElement.elementType === "aggregationElement") {
+
+			let request = {
+				all: true
+			};
+
+			for (let i = 0; i < this.mergedElements.length; i++) {
+				let relativeResult = this.mergedElements[i].provideRelativeElements(request);
+				let relativeElements = relativeResult.elementList;
+				if (this.mergedElements[i].layerIndex === this.layerIndex - 1) {
+
+					// console.log("get last layer.");
+					// console.log(relativeElements);
+
+					for (let j = 0; j < relativeElements.length; j++) {
+						straightElements.push(relativeElements[j]);
+					}
+
+				} else {
+
+					if (relativeResult.isOpen) {
+						for (let j = 0; j < relativeElements.length; j++) {
+							straightElements.push(relativeElements[j]);
+						}
+					} else {
+						for (let j = 0; j < relativeElements.length; j++) {
+							curveElements.push(relativeElements[j]);
+						}
+					}
+
+				}
+			}
+
+		} else if (selectedElement.elementType === "featureMap") {
+
+			let fmIndex = selectedElement.fmIndex;
+			let request = {
+				index: fmIndex
+			};
+
+			for (let i = 0; i < this.mergedElements.length; i++) {
+				let relativeResult = this.mergedElements[i].provideRelativeElements(request);
+				let relativeElements = relativeResult.elementList;
+
+				if (this.mergedElements[i].layerIndex === this.layerIndex - 1) {
+
+					// console.log("get last layer");
+
+					for (let j = 0; j < relativeElements.length; j++) {
+						straightElements.push(relativeElements[j]);
+					}
+
+				} else {
+
+					if (relativeResult.isOpen) {
+						for (let j = 0; j < relativeElements.length; j++) {
+							straightElements.push(relativeElements[j]);
+						}
+					} else {
+						for (let j = 0; j < relativeElements.length; j++) {
+							curveElements.push(relativeElements[j]);
+						}
+					}
+
+				}
+
+			}
+
+		}
+
+		return {
+			straight: straightElements,
+			curve: curveElements
+		};
+
 	}
 
 });