centering changes (#239)

* centering changes

`c` now centers on the bounding sphere of current frame if no atoms selected

initiallly center the camera on the bounding sphere on start up

added event.js file to improve code organisation

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Generalising get_center to get center of selected atoms

Now center corresponds to overall center if no atoms are selected and to the center of selected atoms otherwise

Also inverted the if loop in World since the if part was empty

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

zndraw/static/World/World.js

@@ -14,6 +14,7 @@ import {
 import { Selection } from "./systems/select.js";
 
 import { Line3D, Canvas3D } from "./components/draw.js";
+import { centerCamera } from "./systems/events.js";
 
 // These variables are module-scoped: we cannot access them
 // from outside the module
@@ -232,6 +233,11 @@ class World {
    */
   start() {
     loop.start();
+    // center camera if there are particles
+    const particles = this.particles.cache.get(0);
+    if (!(particles === undefined || particles.length === 0)) {
+      centerCamera(this.selection.controls, this.particles);
+    }
   }
 
   /**

zndraw/static/World/components/particles.js

@@ -252,6 +252,16 @@ class ParticlesGroup extends THREE.Group {
       }
     }
   }
+
+  get_center(selection) {
+    let selectedParticles = this.particle_cache;
+    if (selection !== undefined && selection.length > 0) {
+      selectedParticles = this.particle_cache.select(selection);
+    }
+    const center = new THREE.Vector3();
+    center.copy(selectedParticles.getCenter());
+    return center;
+  }
 }
 
 class CellGroup extends THREE.Group {

zndraw/static/World/systems/events.js

@@ -0,0 +1,15 @@
+import * as THREE from "three";
+
+export function centerCamera(controls, particlesGroup) {
+  if (controls.enablePan) {
+    // get the first object that is selected
+    const dummy = new THREE.Vector3();
+    dummy.copy(controls.getCenter(particlesGroup.selection));
+    controls.target.copy(dummy);
+  } else {
+    // follow is currently not working due to instancing
+    // document.getElementById("alertBoxCamera").style.display = "none";
+    // controls.target = controls.target.clone();
+    // controls.enablePan = true;
+  }
+}

zndraw/static/World/systems/select.js

@@ -1,5 +1,6 @@
 import * as THREE from "three";
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
+import { centerCamera } from "./events.js";
 
 let scroll_timer = null;
 
@@ -49,9 +50,9 @@ class Selection {
 
     this._setupKeyboardEvents();
 
-    this.controls.getCenter = () => {
+    this.controls.getCenter = (selection) => {
       const particlesGroup = this.scene.getObjectByName("particlesGroup");
-      return particlesGroup.get_center();
+      return particlesGroup.get_center(selection);
     };
 
     this.socket.on("selection:run", (data) => {
@@ -228,26 +229,7 @@ class Selection {
       if (document.activeElement === document.body) {
         const particlesGroup = this.scene.getObjectByName("particlesGroup");
         if (event.key === "c") {
-          if (this.controls.enablePan) {
-            // get the first object that is selected
-            if (particlesGroup.selection.length > 0) {
-              const matrix = new THREE.Matrix4();
-              const dummy = new THREE.Object3D();
-              particlesGroup.particles_mesh.getMatrixAt(
-                particlesGroup.selection[0],
-                matrix,
-              );
-              matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);
-              this.controls.target.copy(dummy.position);
-              // this.controls.enablePan = false;
-              // document.getElementById("alertBoxCamera").style.display = "block";
-            }
-          } else {
-            // follow is currently not working due to instancing
-            // document.getElementById("alertBoxCamera").style.display = "none";
-            // this.controls.target = this.controls.target.clone();
-            // this.controls.enablePan = true;
-          }
+          centerCamera(this.controls, particlesGroup);
         }
         if (event.key === "x") {
           if (this._drawing) {

zndraw/static/pycom/Cache.js

@@ -1,5 +1,5 @@
 // Interface for the communication with Python to retrieve atoms
-
+import * as THREE from "three";
 class Atom {
   constructor({ position, number, color, id, radius }) {
     this.position = position;
@@ -53,6 +53,34 @@ class Atoms {
       },
     };
   }
+  select(indices) {
+    const selectedPositions = indices.map((index) => this.positions[index]);
+    const selectedNumbers = indices.map((index) => this.numbers[index]);
+    const selectedColors = indices.map((index) => this.colors[index]);
+    const selectedRadii = indices.map((index) => this.radii[index]);
+    const selectedAtoms = new Atoms({
+      positions: selectedPositions,
+      cell: this.cell,
+      numbers: selectedNumbers,
+      colors: selectedColors,
+      radii: selectedRadii,
+      connectivity: this.connectivity,
+      calc: this.calc,
+      pbc: this.pbc,
+    });
+    return selectedAtoms;
+  }
+
+  getCenter() {
+    const sum = this.positions.reduce((acc, position) => {
+      const vec = new THREE.Vector3().fromArray(position);
+      return acc.add(vec);
+    }, new THREE.Vector3());
+
+    const mean = sum.divideScalar(this.positions.length);
+
+    return mean;
+  }
 }
 
 class Cache {