feat: first implementation of coordiantes measurement in wave

Author: VsevolodX

dist/components/ThreeDEditor.js

@@ -560,6 +560,7 @@ export class ThreeDEditor extends React.Component {
     handleToggleCoordinatesShown() {
         const { measurementsSettings } = this.state;
         const { isCoordinatesShown, isDistanceShown, isAnglesShown } = measurementsSettings;
+        // TODO: avoid repetition of exclusive toggling logic
         if (isDistanceShown) {
             this.offMeasurementParam("isDistanceShown");
         }

src/components/ThreeDEditor.jsx

@@ -58,6 +58,7 @@ export class ThreeDEditor extends React.Component {
             measurementsSettings: {
                 isDistanceShown: false,
                 isAnglesShown: false,
+                isCoordinatesShown: false,
                 measurementLabelsShown: false,
                 distance: 0,
                 angle: 0,
@@ -103,6 +104,7 @@ export class ThreeDEditor extends React.Component {
             this.handleChemicalConnectivityFactorChange.bind(this);
         this.handleToggleDistanceShown = this.handleToggleDistanceShown.bind(this);
         this.handleToggleAnglesShown = this.handleToggleAnglesShown.bind(this);
+        this.handleToggleCoordinatesShown = this.handleToggleCoordinatesShown.bind(this);
         this.handleSetState = this.handleSetState.bind(this);
         this.handleDeleteConnection = this.handleDeleteConnection.bind(this);
         this.handleResetMeasurements = this.handleResetMeasurements.bind(this);
@@ -290,14 +292,14 @@ export class ThreeDEditor extends React.Component {
         this.setState({ isThreejsEditorModalShown: !isThreejsEditorModalShown });
     }
 
-    // TODO: reset the colors for other buttons in the panel on call to the function below
     handleResetViewer() {
         const { measurementsSettings } = this.state;
         this.setState({
             measurementsSettings: {
                 ...measurementsSettings,
                 isDistanceShown: false,
                 isAnglesShown: false,
+                isCoordinatesShown: false,
             },
         });
         this.WaveComponent.initViewer();
@@ -396,6 +398,25 @@ export class ThreeDEditor extends React.Component {
         }
     }
 
+    handleToggleCoordinatesShown() {
+        const { measurementsSettings } = this.state;
+        const { isCoordinatesShown, isDistanceShown, isAnglesShown } = measurementsSettings;
+
+        // TODO: avoid repetition of exclusive toggling logic
+        if (isDistanceShown) {
+            this.offMeasurementParam("isDistanceShown");
+        }
+        if (isAnglesShown) {
+            this.offMeasurementParam("isAnglesShown");
+        }
+
+        if (!isCoordinatesShown) {
+            this.onMeasurementParam("isCoordinatesShown", "isDistanceShown");
+        } else {
+            this.offMeasurementParam("isCoordinatesShown");
+        }
+    }
+
     /**
      * Returns a cover div to cover the area and prevent user interaction with component
      */
@@ -545,7 +566,7 @@ export class ThreeDEditor extends React.Component {
 
     getMeasurementsActions = () => {
         const { measurementsSettings } = this.state;
-        const { isDistanceShown, isAnglesShown } = measurementsSettings;
+        const { isDistanceShown, isAnglesShown, isCoordinatesShown } = measurementsSettings;
         return [
             {
                 id: "Distances",
@@ -563,6 +584,14 @@ export class ThreeDEditor extends React.Component {
                 onClick: this.handleToggleAnglesShown,
                 shouldMenuStayOpened: true,
             },
+            {
+                id: "Coordinates",
+                content: "Coordinates [C]",
+                rightIcon: this.getCheckmark(isCoordinatesShown),
+                leftIcon: <GpsFixed />,
+                onClick: this.handleToggleCoordinatesShown,
+                shouldMenuStayOpened: true,
+            },
             {
                 id: "Delete",
                 content: "Delete connection [X]",

src/mixins/measurement.js

@@ -306,6 +306,13 @@ export const MeasurementMixin = (superclass) =>
 
                 if (intersectItem.type === "Mesh") {
                     const isAlreadySelected = intersectItem.userData.selected;
+
+                    // Get atom position and draw coordinates if enabled
+                    const position = new THREE.Vector3().setFromMatrixPosition(
+                        intersectItem.matrixWorld,
+                    );
+                    this.drawCoordinateText(position, intersectItem);
+
                     if (this.measurementSettings.isDistanceShown)
                         this.addIfLastNotSame(intersectItem);
                     if (this.measurementSettings.isAnglesShown)
@@ -347,7 +354,17 @@ export const MeasurementMixin = (superclass) =>
         getIntersectedObjects(event) {
             this.checkMouseCoordinates(event);
             const atomGroup = this.getAtomGroups();
-            const searchedIntersects = [...atomGroup];
+            const searchedIntersects = [];
+
+            // Always include atoms if any measurement type is enabled
+            if (
+                this.measurementSettings.isDistanceShown ||
+                this.measurementSettings.isAnglesShown ||
+                this.measurementSettings.isCoordinatesShown
+            ) {
+                searchedIntersects.push(...atomGroup);
+            }
+
             if (this.measurementSettings.isDistanceShown) {
                 searchedIntersects.push(...this.atomConnections.children);
             }
@@ -544,6 +561,13 @@ export const MeasurementMixin = (superclass) =>
                 atom.userData.selected = false;
                 this.selectedAtoms.pop();
                 atom.material.emissive.setHex(atom.currentHex);
+
+                // Remove coordinate label if it exists
+                if (atom.userData.coordinateLabel) {
+                    this.measurementLabels.remove(atom.userData.coordinateLabel);
+                    atom.userData.coordinateLabel = null;
+                }
+
                 this.render();
             }
         }
@@ -627,11 +651,16 @@ export const MeasurementMixin = (superclass) =>
                     this.deleteConnection();
                 });
             }
-
             if (this.selectedAtoms.length) {
                 this.selectedAtoms.forEach((atom) => {
                     atom.userData.selected = false;
                     atom.material.emissive.setHex(atom.currentHex);
+
+                    // Remove coordinate labels
+                    if (atom.userData.coordinateLabel) {
+                        this.measurementLabels.remove(atom.userData.coordinateLabel);
+                        atom.userData.coordinateLabel = null;
+                    }
                 });
                 this.selectedAtoms = [];
             }
@@ -683,4 +712,43 @@ export const MeasurementMixin = (superclass) =>
 
             return this.radiansToDegrees(Math.acos(angle)).toFixed(2);
         }
+
+        /**
+         * Function that draws coordinate text.
+         * @param {THREE.Vector3} position - position of the atom
+         * @param {Object} atom - the atom object
+         */
+        drawCoordinateText(position, atom) {
+            // Remove existing coordinate label if it exists
+            if (atom.userData.coordinateLabel) {
+                this.measurementLabels.remove(atom.userData.coordinateLabel);
+            }
+
+            // Only show coordinates if coordinate measurement is enabled
+            if (!this.measurementSettings.isCoordinatesShown) {
+                return;
+            }
+
+            const label = this.createLabelSprite(
+                `(${position.x.toFixed(3)}, ${position.y.toFixed(3)}, ${position.z.toFixed(3)})`,
+                `coordinates-for-${atom.uuid}`,
+            );
+
+            // Position the label up and to the right of the atom
+            const labelPosition = position.clone();
+            labelPosition.y += 0.0;
+            labelPosition.x += 0.0;
+
+            label.position.copy(labelPosition);
+            label.visible = true;
+            label.scale.set(1.0, 1.0, 1.0);
+            label.lookAt(this.camera.position);
+
+            // Store reference to label in atom's userData
+            atom.userData.coordinateLabel = label;
+
+            this.measurementLabels.add(label);
+            this.scene.add(this.measurementLabels);
+            this.render();
+        }
     };