Implemented data sphere radius setting

js/client/client-state.js

@@ -5,13 +5,13 @@
 class ClientSettings {
     constructor() {
         this._energyScale = 1;
-        this._dataSphereRadius = 1;
+        this._dataSphereRadius = 5;
     }
 
     get energyScale() { return this._energyScale; }
     set energyScale(value) { this._energyScale = value; }
 
-    get energyScale() { return this._energyScale; }
+    get dataSphereRadius() { return this._dataSphereRadius; }
     set dataSphereRadius(value) { this._dataSphereRadius = value; }
 }
 

js/client/utils/shapes/energy-line.js

@@ -24,8 +24,13 @@ class EnergyLine extends TrajectoryLine {
         this._dataGroup = new THREE.Group();
         this._group.add(this._dataGroup);
 
-        this._deltaSphereGroup = new THREE.Group();
-        this._dataGroup.add(this._deltaSphereGroup);
+        // Group for the data spheres.
+        this._dataSphereGroup = new THREE.Group();
+        this._dataGroup.add(this._dataSphereGroup);
+
+        // Group for the point spheres.
+        this._pointSphereGroup = new THREE.Group();
+        this._dataGroup.add(this._pointSphereGroup);
 
         this.highlight(false);
         this.updateLine();
@@ -51,9 +56,14 @@ class EnergyLine extends TrajectoryLine {
 
     removeSpheres() {
 
-        // Remove the spheres.
-        for (let i = this._deltaSphereGroup.children.length - 1; i >= 0; i--) {
-            this._deltaSphereGroup.remove(this._deltaSphereGroup.children[i]);
+        // Remove the data spheres.
+        for (let i = this._dataSphereGroup.children.length - 1; i >= 0; i--) {
+            this._dataSphereGroup.remove(this._dataSphereGroup.children[i]);
+        }
+
+        // Remove the point spheres.
+        for (let i = this._pointSphereGroup.children.length - 1; i >= 0; i--) {
+            this._pointSphereGroup.remove(this._pointSphereGroup.children[i]);
         }
     }
 
@@ -86,31 +96,39 @@ class EnergyLine extends TrajectoryLine {
         // Calculate delta between spheres.
         let delta = length / this._intervals; 
 
+        // Set the scale for the data spheres.
+        let zSphereRadius = 0.5 * delta;
+        let dataSphereRadius = clientSettings.dataSphereRadius * 0.5 / scale;
+        let dataSphereScale = dataSphereRadius / zSphereRadius;
+
+        this._dataSphereGroup.scale.x = dataSphereScale;
+        this._dataSphereGroup.scale.y = dataSphereScale;
+
         // Iterate the points and draw data sphere or point sphere.
         for (let i = 0; i < this._intervals + 1; i++) {
 
             let position = new THREE.Vector3(0, 0, i * delta);
 
-            let sphere;
-
             // Draw a data sphere.
             if (i < this._data.length) {
                 let dataMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, depthTest: true, transparent: false});
                 const color = mapColor(this._data[i], 0, 500);
                 dataMaterial.color.setRGB(color.r, color.g, color.b);
-                sphere = new THREE.Mesh(this.sphereGeometry, dataMaterial);
-                sphere.scale.multiplyScalar(0.5 * delta);
+                let sphere = new THREE.Mesh(this.sphereGeometry, dataMaterial);
+                sphere.scale.multiplyScalar(zSphereRadius);
+                sphere.renderOrder = 4;
+                sphere.position.copy(position);
+                this._dataSphereGroup.add(sphere);
             }
             // Draw a point sphere.
             else {
                 let pointMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, depthTest: true, transparent: false});
-                sphere = new THREE.Mesh(this.sphereGeometry, pointMaterial);
+                let sphere = new THREE.Mesh(this.sphereGeometry, pointMaterial);
                 sphere.scale.multiplyScalar(1 / scale);
+                sphere.renderOrder = 4;
+                sphere.position.copy(position);
+                this._pointSphereGroup.add(sphere);
             }
-            
-            sphere.renderOrder = 4;
-            sphere.position.copy(position);
-            this._deltaSphereGroup.add(sphere);
         }
     }
 
@@ -151,10 +169,12 @@ class EnergyLine extends TrajectoryLine {
 
         // The spheres are always visible in spy mode.
         if (!mode.spyMode) {
-            this._deltaSphereGroup.visible = value;
+            this._dataSphereGroup.visible = value;
+            this._pointSphereGroup.visible = value;
         }
         else {
-            this._deltaSphereGroup.visible = true;
+            this._dataSphereGroup.visible = true;
+            this._pointSphereGroup.visible = true;
         }
     }
 

js/client/views/panels/trajectory-settings-view.js

@@ -29,8 +29,8 @@ class TrajectorySettingsPanelView {
 
     init() {
 
-        // Init energy scale with 1.0.
-        $('#energyScale').val(1.0);
+        // Init energy scale with 1.
+        $('#energyScale').val(1);
 
         // When the view is initialised, we can access to the html elements.
         $("#energyScale").keypress((event) => {
@@ -40,8 +40,8 @@ class TrajectorySettingsPanelView {
             }
         });
 
-        // Init sphere radius with 1.0.
-        $('#dataSphereRadius').val(1.0);
+        // Init sphere radius with 5.
+        $('#dataSphereRadius').val(5);
 
         // When the view is initialised, we can access to the html elements.
         $("#dataSphereRadius").keypress((event) => {