Skip to content

Commit

Permalink
feat: first implementation of coordiantes measurement in wave
Browse files Browse the repository at this point in the history
  • Loading branch information
@VsevolodX
VsevolodX committed Jan 20, 2025
1 parent b3e4bd3 commit c15608e
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 4 deletions.
1 change: 1 addition & 0 deletions dist/components/ThreeDEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
Expand Down
33 changes: 31 additions & 2 deletions src/components/ThreeDEditor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export class ThreeDEditor extends React.Component {
measurementsSettings: {
isDistanceShown: false,
isAnglesShown: false,
isCoordinatesShown: false,
measurementLabelsShown: false,
distance: 0,
angle: 0,
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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
*/
Expand Down Expand Up @@ -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",
Expand All @@ -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]",
Expand Down
72 changes: 70 additions & 2 deletions src/mixins/measurement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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();
}
}
Expand Down Expand Up @@ -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 = [];
}
Expand Down Expand Up @@ -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();
}
};

0 comments on commit c15608e

Please sign in to comment.