Skip to content

Commit b3e4bd3

Browse files
VsevolodXVsevolodX
committed
update: trigger wave gif func
1 parent c0d1701 commit b3e4bd3

File tree

5 files changed

+104
-22
lines changed

5 files changed

+104
-22
lines changed

‎dist/components/ThreeDEditor.d.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export class ThreeDEditor extends React.Component<any, any, any> {
1414
measurementsSettings: {
1515
isDistanceShown: boolean;
1616
isAnglesShown: boolean;
17+
isCoordinatesShown: boolean;
1718
measurementLabelsShown: boolean;
1819
distance: number;
1920
angle: number;
@@ -52,14 +53,15 @@ export class ThreeDEditor extends React.Component<any, any, any> {
5253
handleChemicalConnectivityFactorChange(e: any): void;
5354
handleToggleDistanceShown(): void;
5455
handleToggleAnglesShown(): void;
56+
handleToggleCoordinatesShown(): void;
5557
handleSetState(newState: any): void;
5658
handleDeleteConnection(): void;
5759
handleResetMeasurements(): void;
5860
offMeasurementParam(param: any): void;
5961
onMeasurementParam(param: any, offParam: any): void;
6062
addHotKeyListener(): void;
6163
removeHotKeyListener(): void;
62-
handleStartGifRecording: (downloadPath: any, rotationSpeed?: number, frameDuration?: number) => void;
64+
handleStartGifRecording(downloadPath: any, rotationSpeed?: number, frameDuration?: number): void;
6365
handleMessage: (event: any) => void;
6466
doWaveFunc(funcStr: any): void;
6567
handleSetCameraToFitCell(): void;
@@ -139,7 +141,7 @@ export class ThreeDEditor extends React.Component<any, any, any> {
139141
title: string;
140142
content: string;
141143
leftIcon: import("react/jsx-runtime").JSX.Element;
142-
onClick: (downloadPath: any, rotationSpeed?: number, frameDuration?: number) => void;
144+
onClick: () => void;
143145
actions?: undefined;
144146
paperPlacement?: undefined;
145147
} | {
@@ -208,7 +210,7 @@ export class ThreeDEditor extends React.Component<any, any, any> {
208210
title: string;
209211
content: string;
210212
leftIcon: import("react/jsx-runtime").JSX.Element;
211-
onClick: (downloadPath: any, rotationSpeed?: number, frameDuration?: number) => void;
213+
onClick: () => void;
212214
actions?: undefined;
213215
paperPlacement?: undefined;
214216
} | {

‎dist/components/ThreeDEditor.js

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export class ThreeDEditor extends React.Component {
178178
};
179179
this.getMeasurementsActions = () => {
180180
const { measurementsSettings } = this.state;
181-
const { isDistanceShown, isAnglesShown } = measurementsSettings;
181+
const { isDistanceShown, isAnglesShown, isCoordinatesShown } = measurementsSettings;
182182
return [
183183
{
184184
id: "Distances",
@@ -196,6 +196,14 @@ export class ThreeDEditor extends React.Component {
196196
onClick: this.handleToggleAnglesShown,
197197
shouldMenuStayOpened: true,
198198
},
199+
{
200+
id: "Coordinates",
201+
content: "Coordinates [C]",
202+
rightIcon: this.getCheckmark(isCoordinatesShown),
203+
leftIcon: _jsx(GpsFixed, {}),
204+
onClick: this.handleToggleCoordinatesShown,
205+
shouldMenuStayOpened: true,
206+
},
199207
{
200208
id: "Delete",
201209
content: "Delete connection [X]",
@@ -239,7 +247,7 @@ export class ThreeDEditor extends React.Component {
239247
title: "Auto Rotate GIF",
240248
content: "Auto Rotate GIF",
241249
leftIcon: _jsx(PictureInPicture, {}),
242-
onClick: this.handleStartGifRecording,
250+
onClick: () => this.handleStartGifRecording(),
243251
},
244252
{
245253
id: "Screenshot",
@@ -262,17 +270,6 @@ export class ThreeDEditor extends React.Component {
262270
const { viewerSettings } = this.state;
263271
return (_jsx(ParametersMenu, { viewerSettings: viewerSettings, handleSphereRadiusChange: this.handleSphereRadiusChange, handleCellRepetitionsChange: this.handleCellRepetitionsChange, handleChemicalConnectivityFactorChange: this.handleChemicalConnectivityFactorChange }));
264272
};
265-
this.handleStartGifRecording = (downloadPath, rotationSpeed = 60, frameDuration = 0.05) => {
266-
this.WaveComponent.wave
267-
.takeGifScreenshot({
268-
rotationSpeed,
269-
frameDuration,
270-
downloadPath,
271-
})
272-
.then((result) => {
273-
console.log("Recorded gif", result);
274-
});
275-
};
276273
this.handleMessage = (event) => {
277274
if (event.data && event.data.material) {
278275
try {
@@ -307,6 +304,7 @@ export class ThreeDEditor extends React.Component {
307304
measurementsSettings: {
308305
isDistanceShown: false,
309306
isAnglesShown: false,
307+
isCoordinatesShown: false,
310308
measurementLabelsShown: false,
311309
distance: 0,
312310
angle: 0,
@@ -352,6 +350,7 @@ export class ThreeDEditor extends React.Component {
352350
this.handleChemicalConnectivityFactorChange.bind(this);
353351
this.handleToggleDistanceShown = this.handleToggleDistanceShown.bind(this);
354352
this.handleToggleAnglesShown = this.handleToggleAnglesShown.bind(this);
353+
this.handleToggleCoordinatesShown = this.handleToggleCoordinatesShown.bind(this);
355354
this.handleSetState = this.handleSetState.bind(this);
356355
this.handleDeleteConnection = this.handleDeleteConnection.bind(this);
357356
this.handleResetMeasurements = this.handleResetMeasurements.bind(this);
@@ -463,14 +462,14 @@ export class ThreeDEditor extends React.Component {
463462
const { isThreejsEditorModalShown } = this.state;
464463
this.setState({ isThreejsEditorModalShown: !isThreejsEditorModalShown });
465464
}
466-
// TODO: reset the colors for other buttons in the panel on call to the function below
467465
handleResetViewer() {
468466
const { measurementsSettings } = this.state;
469467
this.setState({
470468
measurementsSettings: {
471469
...measurementsSettings,
472470
isDistanceShown: false,
473471
isAnglesShown: false,
472+
isCoordinatesShown: false,
474473
},
475474
});
476475
this.WaveComponent.initViewer();
@@ -558,6 +557,22 @@ export class ThreeDEditor extends React.Component {
558557
this.offMeasurementParam("isAnglesShown");
559558
}
560559
}
560+
handleToggleCoordinatesShown() {
561+
const { measurementsSettings } = this.state;
562+
const { isCoordinatesShown, isDistanceShown, isAnglesShown } = measurementsSettings;
563+
if (isDistanceShown) {
564+
this.offMeasurementParam("isDistanceShown");
565+
}
566+
if (isAnglesShown) {
567+
this.offMeasurementParam("isAnglesShown");
568+
}
569+
if (!isCoordinatesShown) {
570+
this.onMeasurementParam("isCoordinatesShown", "isDistanceShown");
571+
}
572+
else {
573+
this.offMeasurementParam("isCoordinatesShown");
574+
}
575+
}
561576
/**
562577
* Returns a cover div to cover the area and prevent user interaction with component
563578
*/
@@ -634,6 +649,17 @@ export class ThreeDEditor extends React.Component {
634649
}
635650
return toolbarConfig;
636651
}
652+
handleStartGifRecording(downloadPath, rotationSpeed = 60, frameDuration = 0.05) {
653+
this.WaveComponent.wave
654+
.takeGifScreenshot({
655+
downloadPath,
656+
rotationSpeed,
657+
frameDuration,
658+
})
659+
.then((result) => {
660+
console.log("Recorded gif", result);
661+
});
662+
}
637663
onThreejsEditorModalHide(material) {
638664
let { isThreejsEditorModalShown } = this.state;
639665
isThreejsEditorModalShown = !isThreejsEditorModalShown;

‎dist/mixins/measurement.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,12 @@ export function MeasurementMixin(superclass: any): {
184184
* @atoms - 3 atoms between which angle should be calculated.
185185
*/
186186
calculateAngleBetweenAtoms(atoms: any): string;
187+
/**
188+
* Function that draws coordinate text.
189+
* @param {THREE.Vector3} position - position of the atom
190+
* @param {Object} atom - the atom object
191+
*/
192+
drawCoordinateText(position: THREE.Vector3, atom: Object): void;
187193
};
188194
[x: string]: any;
189195
};

‎dist/mixins/measurement.js

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,9 @@ export const MeasurementMixin = (superclass) => class extends superclass {
252252
}
253253
if (intersectItem.type === "Mesh") {
254254
const isAlreadySelected = intersectItem.userData.selected;
255+
// Get atom position and draw coordinates if enabled
256+
const position = new THREE.Vector3().setFromMatrixPosition(intersectItem.matrixWorld);
257+
this.drawCoordinateText(position, intersectItem);
255258
if (this.measurementSettings.isDistanceShown)
256259
this.addIfLastNotSame(intersectItem);
257260
if (this.measurementSettings.isAnglesShown)
@@ -289,7 +292,13 @@ export const MeasurementMixin = (superclass) => class extends superclass {
289292
getIntersectedObjects(event) {
290293
this.checkMouseCoordinates(event);
291294
const atomGroup = this.getAtomGroups();
292-
const searchedIntersects = [...atomGroup];
295+
const searchedIntersects = [];
296+
// Always include atoms if any measurement type is enabled
297+
if (this.measurementSettings.isDistanceShown ||
298+
this.measurementSettings.isAnglesShown ||
299+
this.measurementSettings.isCoordinatesShown) {
300+
searchedIntersects.push(...atomGroup);
301+
}
293302
if (this.measurementSettings.isDistanceShown) {
294303
searchedIntersects.push(...this.atomConnections.children);
295304
}
@@ -441,6 +450,11 @@ export const MeasurementMixin = (superclass) => class extends superclass {
441450
atom.userData.selected = false;
442451
this.selectedAtoms.pop();
443452
atom.material.emissive.setHex(atom.currentHex);
453+
// Remove coordinate label if it exists
454+
if (atom.userData.coordinateLabel) {
455+
this.measurementLabels.remove(atom.userData.coordinateLabel);
456+
atom.userData.coordinateLabel = null;
457+
}
444458
this.render();
445459
}
446460
}
@@ -519,6 +533,11 @@ export const MeasurementMixin = (superclass) => class extends superclass {
519533
this.selectedAtoms.forEach((atom) => {
520534
atom.userData.selected = false;
521535
atom.material.emissive.setHex(atom.currentHex);
536+
// Remove coordinate labels
537+
if (atom.userData.coordinateLabel) {
538+
this.measurementLabels.remove(atom.userData.coordinateLabel);
539+
atom.userData.coordinateLabel = null;
540+
}
522541
});
523542
this.selectedAtoms = [];
524543
}
@@ -560,4 +579,33 @@ export const MeasurementMixin = (superclass) => class extends superclass {
560579
const angle = (ab ** 2 + bc ** 2 - ac ** 2) / (2 * ab * bc);
561580
return this.radiansToDegrees(Math.acos(angle)).toFixed(2);
562581
}
582+
/**
583+
* Function that draws coordinate text.
584+
* @param {THREE.Vector3} position - position of the atom
585+
* @param {Object} atom - the atom object
586+
*/
587+
drawCoordinateText(position, atom) {
588+
// Remove existing coordinate label if it exists
589+
if (atom.userData.coordinateLabel) {
590+
this.measurementLabels.remove(atom.userData.coordinateLabel);
591+
}
592+
// Only show coordinates if coordinate measurement is enabled
593+
if (!this.measurementSettings.isCoordinatesShown) {
594+
return;
595+
}
596+
const label = this.createLabelSprite(`(${position.x.toFixed(3)}, ${position.y.toFixed(3)}, ${position.z.toFixed(3)})`, `coordinates-for-${atom.uuid}`);
597+
// Position the label up and to the right of the atom
598+
const labelPosition = position.clone();
599+
labelPosition.y += 0.0;
600+
labelPosition.x += 0.0;
601+
label.position.copy(labelPosition);
602+
label.visible = true;
603+
label.scale.set(1.0, 1.0, 1.0);
604+
label.lookAt(this.camera.position);
605+
// Store reference to label in atom's userData
606+
atom.userData.coordinateLabel = label;
607+
this.measurementLabels.add(label);
608+
this.scene.add(this.measurementLabels);
609+
this.render();
610+
}
563611
};

‎src/components/ThreeDEditor.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -607,7 +607,7 @@ export class ThreeDEditor extends React.Component {
607607
title: "Auto Rotate GIF",
608608
content: "Auto Rotate GIF",
609609
leftIcon: <PictureInPicture />,
610-
onClick: this.handleStartGifRecording,
610+
onClick: () => this.handleStartGifRecording(),
611611
},
612612
{
613613
id: "Screenshot",
@@ -688,17 +688,17 @@ export class ThreeDEditor extends React.Component {
688688
return toolbarConfig;
689689
}
690690

691-
handleStartGifRecording = (downloadPath, rotationSpeed = 60, frameDuration = 0.05) => {
691+
handleStartGifRecording(downloadPath, rotationSpeed = 60, frameDuration = 0.05) {
692692
this.WaveComponent.wave
693693
.takeGifScreenshot({
694+
downloadPath,
694695
rotationSpeed,
695696
frameDuration,
696-
downloadPath,
697697
})
698698
.then((result) => {
699699
console.log("Recorded gif", result);
700700
});
701-
};
701+
}
702702

703703
onThreejsEditorModalHide(material) {
704704
let { isThreejsEditorModalShown } = this.state;

0 commit comments

Comments
 (0)