update: add connection lines deletion

VsevolodX · VsevolodX · commit 08c4161b7f41 · 2025-03-07T16:32:18.000-08:00
diff --git a/src/mixins/lines/LinesManager.ts b/src/mixins/lines/LinesManager.ts
@@ -1,6 +1,6 @@
 import * as THREE from "three";
 
-import { ATOM_CONNECTION_LINE_NAME } from "../../enums";
+import { ATOM_CONNECTION_LINE_NAME, COLORS } from "../../enums";
 import settings from "../../settings";
 import { BaseTHREEGroupManager } from "../base";
 import { calculateMidpoint, getAtomWorldPosition } from "../threeJsUtils";
@@ -40,6 +40,41 @@ export class LinesManager extends BaseTHREEGroupManager {
         });
     }
 
+    /**
+     * Creates an angle line connecting three atoms
+     */
+    createAngleBetweenAtoms(
+        firstAtom: THREE.Object3D,
+        middleAtom: THREE.Object3D,
+        lastAtom: THREE.Object3D,
+    ): THREE.Line {
+        // Create a line geometry with three points
+        const firstPoint = getAtomWorldPosition(firstAtom);
+        const middlePoint = getAtomWorldPosition(middleAtom);
+        const lastPoint = getAtomWorldPosition(lastAtom);
+
+        const geometry = new THREE.BufferGeometry().setFromPoints([
+            firstPoint,
+            middlePoint,
+            lastPoint,
+        ]);
+
+        const material = new THREE.LineBasicMaterial({ color: settings.colors.amber });
+        const line = new THREE.Line(geometry, material);
+        line.name = ATOM_CONNECTION_LINE_NAME;
+
+        line.userData.atomicIndices = [
+            firstAtom.userData.atomicIndex,
+            middleAtom.userData.atomicIndex,
+            lastAtom.userData.atomicIndex,
+        ];
+
+        line.userData.isAngleLine = true;
+
+        this.THREEGroup.add(line);
+        return line;
+    }
+
     /**
      * Gets the center position of a line
      */
@@ -68,4 +103,41 @@ export class LinesManager extends BaseTHREEGroupManager {
             (child) => child.type === "Line" && child.name === ATOM_CONNECTION_LINE_NAME,
         ) as THREE.Line[];
     }
+
+    setLineAsHovered(line: THREE.Line): void {
+        if (!line.userData.selected) {
+            (line.material as THREE.LineBasicMaterial).color.set(COLORS.GREEN);
+        }
+        line.userData.hovered = true;
+    }
+
+    unsetLineAsHovered(line: THREE.Line): void {
+        if (!line.userData.selected) {
+            (line.material as THREE.LineBasicMaterial).color.set(settings.colors.amber);
+        }
+        line.userData.hovered = false;
+    }
+
+    setLineAsSelected(line: THREE.Line): void {
+        this.deselectAllLines();
+
+        line.userData.selected = true;
+        (line.material as THREE.LineBasicMaterial).color.set(COLORS.GREEN);
+    }
+
+    unsetLineAsSelected(line: THREE.Line): void {
+        line.userData.selected = false;
+        (line.material as THREE.LineBasicMaterial).color.set(
+            line.userData.hovered ? COLORS.GREEN : settings.colors.amber,
+        );
+    }
+
+    deselectAllLines(): void {
+        this.getLines().forEach((line) => {
+            line.userData.selected = false;
+            (line.material as THREE.LineBasicMaterial).color.set(
+                line.userData.hovered ? COLORS.GREEN : settings.colors.amber,
+            );
+        });
+    }
 }
diff --git a/src/mixins/listeners/mixins.ts b/src/mixins/listeners/mixins.ts
@@ -33,7 +33,7 @@ export const RaycasterMixinWithListeners = <T extends Constructor>(superclass: T
 
         pointer: THREE.Vector2 = new THREE.Vector2();
 
-        intersectedAtom: THREE.Object3D | null = null;
+        intersectedObject: THREE.Object3D | null = null;
 
         initRaycaster() {
             this.raycaster = new THREE.Raycaster();
diff --git a/src/mixins/measurements/all.ts b/src/mixins/measurements/all.ts
@@ -137,4 +137,18 @@ export const AllMeasurementsMixin = (superclass: any) =>
         resetAllMeasurements() {
             this.measurementManagers.forEach((manager) => manager.resetMeasurements());
         }
+
+
+deleteConnection() {
+    const activeManager = this.getActiveMeasurementManager();
+    if (activeManager && activeManager.currentSelectedLine) {
+        activeManager.deleteSelectedLine();
+        this.render();
+        
+        // Update state if needed
+        if (activeManager.updateState) {
+            activeManager.updateState(activeManager.getSettings());
+        }
+    }
+}
     };
diff --git a/src/mixins/measurements/angle.ts b/src/mixins/measurements/angle.ts
@@ -3,7 +3,6 @@ import * as THREE from "three";
 import { MEASUREMENT_MODES_ENUM } from "../../enums";
 import { AngleLabelsManager } from "../labels/angle";
 import { LabelsManagerConstructor } from "../labels/base";
-import { LinesManager } from "../lines/LinesManager";
 import { calculateAngleBetweenAtoms, calculateAngleLabelPosition } from "../threeJsUtils";
 import { BaseMeasurementManager } from "./base";
 
@@ -12,8 +11,6 @@ export class AnglesMeasurementManager extends BaseMeasurementManager<AngleLabels
 
     override LabelsManagerCls: LabelsManagerConstructor<AngleLabelsManager> = AngleLabelsManager;
 
-    linesManager: LinesManager;
-
     constructor(
         waveStructureGroup: THREE.Group,
         waveCamera: THREE.Camera,
@@ -23,7 +20,6 @@ export class AnglesMeasurementManager extends BaseMeasurementManager<AngleLabels
         const groupName = MEASUREMENT_MODES_ENUM.ANGLE;
         super(waveStructureGroup, waveCamera, wave, groupName, updateState);
         this.labelsManager = this.getLabelsManagerInstance();
-        this.linesManager = new LinesManager(waveStructureGroup, waveCamera, wave, groupName);
     }
 
     // @ts-ignore
@@ -76,9 +72,12 @@ export class AnglesMeasurementManager extends BaseMeasurementManager<AngleLabels
 
         triplets.forEach((triplet) => {
             if (triplet.length === 3) {
-                const line1 = this.linesManager.createLineBetweenAtoms(triplet[0], triplet[1]);
-                const line2 = this.linesManager.createLineBetweenAtoms(triplet[1], triplet[2]);
-                lines.push(line1, line2);
+                const angleLine = this.linesManager.createAngleBetweenAtoms(
+                    triplet[0],
+                    triplet[1],
+                    triplet[2],
+                );
+                lines.push(angleLine);
             }
         });
 
diff --git a/src/mixins/measurements/base.ts b/src/mixins/measurements/base.ts
@@ -3,11 +3,13 @@ import * as THREE from "three";
 import { MEASUREMENT_MODES_ENUM } from "../../enums";
 import { BaseTHREEGroupManager } from "../base";
 import { BaseLabelsManager, LabelsManagerConstructor } from "../labels/base";
+import { LinesManager } from "../lines/LinesManager";
 import { RaycasterMixinWithListeners } from "../listeners/mixins";
 import {
     getObjectCoordinateAsArray,
     highlightAtom,
     isIntersectionObjectAnAtom,
+    isObjectAnAtom,
     setAtomAsHovered,
     setColorForAtom,
     unsetAtomAsHovered,
@@ -32,8 +34,12 @@ export class BaseMeasurementManager<T extends BaseLabelsManager> extends BaseMan
 
     labelsManager: any;
 
+    linesManager: LinesManager;
+
     updateState: any;
 
+    currentSelectedLine: THREE.Line | null = null;
+
     constructor(
         waveStructureGroup: THREE.Group,
         waveCamera: THREE.Camera,
@@ -44,8 +50,9 @@ export class BaseMeasurementManager<T extends BaseLabelsManager> extends BaseMan
         super(waveStructureGroup, waveCamera, wave, groupName + "-measurement-group");
         this.initRaycaster();
         this.selectedAtoms = [];
-        this.intersectedAtom = null;
+        this.intersectedObject = null;
         this.canvas = wave.renderer.domElement;
+        this.linesManager = new LinesManager(waveStructureGroup, waveCamera, wave, groupName);
         this.updateState = updateState;
     }
 
@@ -93,21 +100,24 @@ export class BaseMeasurementManager<T extends BaseLabelsManager> extends BaseMan
         );
     }
 
-    setIntersectedAtom(intersectItem: THREE.Object3D | null) {
-        if (this.intersectedAtom !== intersectItem) {
-            this.intersectedAtom = intersectItem;
+    setIntersectedAtom(intersectItem: THREE.Object3D) {
+        if (this.intersectedObject !== intersectItem && isObjectAnAtom(intersectItem)) {
+            this.intersectedObject = intersectItem;
         }
     }
 
     isIntersectedAtomSelected() {
-        if (!this.intersectedAtom) return false;
+        if (!this.intersectedObject) return false;
         return this.selectedAtoms.some(
-            (atom) => atom.userData.atomicIndex === this.intersectedAtom?.userData.atomicIndex,
+            (atom) => atom.userData.atomicIndex === this.intersectedObject?.userData.atomicIndex,
         );
     }
 
     getIntersections() {
-        return this.raycaster.intersectObjects([...this.wave.getAtomGroups()], true);
+        return this.raycaster.intersectObjects(
+            [...this.wave.getAtomGroups(), ...this.linesManager.getLines()],
+            true,
+        );
     }
 
     toggleAtomSelection(atomObject: THREE.Object3D) {
@@ -118,6 +128,17 @@ export class BaseMeasurementManager<T extends BaseLabelsManager> extends BaseMan
         }
     }
 
+    toggleLineSelection(line: THREE.Line) {
+        console.log("toggleLineSelection", line);
+        console.log("selected line", this.currentSelectedLine);
+
+        if (line.userData.selected) {
+            this.handleLineDeselection(line);
+        } else {
+            this.handleLineSelection(line);
+        }
+    }
+
     refillSelectedAtoms(): void {
         const validAtoms: THREE.Object3D[] = [];
 
@@ -144,12 +165,17 @@ export class BaseMeasurementManager<T extends BaseLabelsManager> extends BaseMan
         if (!this.isActive) return;
         this.checkMouseCoordinates(event, this.waveCamera);
         const intersects = this.getIntersections();
+        console.log("INTERSECTS", intersects);
 
         intersects.forEach((object: THREE.Intersection<THREE.Object3D<THREE.Object3DEventMap>>) => {
             if (isIntersectionObjectAnAtom(object)) {
                 const atom = object.object;
                 this.toggleAtomSelection(atom);
             }
+            if (object.object.type === "Line") {
+                console.log("LINE", object.object);
+                this.toggleLineSelection(object.object);
+            }
         });
         this.copyValuesToClipboard();
     }
@@ -159,17 +185,17 @@ export class BaseMeasurementManager<T extends BaseLabelsManager> extends BaseMan
         this.checkMouseCoordinates(event, this.waveCamera);
         const intersects = this.getIntersections();
 
-        intersects.forEach((object: THREE.Intersection<THREE.Object3D<THREE.Object3DEventMap>>) => {
+        intersects.forEach((object: THREE.Intersection<THREE.Object3D | THREE.Line>) => {
             if (isIntersectionObjectAnAtom(object)) {
                 this.setIntersectedAtom(object.object);
                 setAtomAsHovered(object.object);
             }
         });
 
-        if (!intersects.length && this.intersectedAtom) {
+        if (!intersects.length && this.intersectedObject) {
             const isSelected = this.isIntersectedAtomSelected();
-            if (this.intersectedAtom && !isSelected) {
-                unsetAtomAsHovered(this.intersectedAtom);
+            if (this.intersectedObject && !isSelected && isObjectAnAtom(this.intersectedObject)) {
+                unsetAtomAsHovered(this.intersectedObject);
             }
             this.setIntersectedAtom(null);
         }
@@ -243,4 +269,38 @@ export class BaseMeasurementManager<T extends BaseLabelsManager> extends BaseMan
         this.THREEGroup.clear();
         this.labelsManager.THREEGroup.clear();
     }
+
+    handleLineSelection(line: THREE.Line): void {
+        this.linesManager.setLineAsSelected(line);
+        this.currentSelectedLine = line;
+    }
+
+    handleLineDeselection(line: THREE.Line): void {
+        this.linesManager.unsetLineAsSelected(line);
+        this.currentSelectedLine = null;
+    }
+
+    removeAtomsFromSelectionByIndices(atomicIndices: number[]): void {
+        this.selectedAtoms = this.selectedAtoms.filter(
+            (atom) => !atomicIndices.includes(atom.userData.atomicIndex),
+        );
+
+        atomicIndices.forEach((index) => {
+            const atom = this.getAtomObjectByAtomicIndex(index);
+            if (atom) {
+                atom.userData.selected = false;
+                setColorForAtom(atom);
+            }
+        });
+    }
+
+    deleteSelectedLine(): void {
+        if (this.currentSelectedLine) {
+            const atomicIndices = this.currentSelectedLine.userData.atomicIndices || [];
+            this.linesManager.removeLine(this.currentSelectedLine);
+            this.removeAtomsFromSelectionByIndices(atomicIndices);
+            this.currentSelectedLine = null;
+            this.createMeasurements();
+        }
+    }
 }
diff --git a/src/mixins/measurements/distance.ts b/src/mixins/measurements/distance.ts
@@ -13,10 +13,6 @@ export class DistancesMeasurementManager extends BaseMeasurementManager<Distance
     override LabelsManagerCls: LabelsManagerConstructor<DistanceLabelsManager> =
         DistanceLabelsManager;
 
-    currentSelectedLine: THREE.Line | null = null;
-
-    linesManager: LinesManager;
-
     constructor(
         waveStructureGroup: THREE.Group,
         waveCamera: THREE.Camera,
@@ -32,7 +28,6 @@ export class DistancesMeasurementManager extends BaseMeasurementManager<Distance
             groupName,
         );
         this.currentSelectedLine = null;
-        this.linesManager = new LinesManager(waveStructureGroup, waveCamera, wave, groupName);
     }
 
     // @ts-ignore
diff --git a/src/mixins/threeJsUtils.ts b/src/mixins/threeJsUtils.ts
@@ -164,3 +164,7 @@ export function unsetAtomAsHovered(atom: THREE.Object3D): void {
     atomObject.userData.hovered = false;
     setColorForAtom(atom);
 }
+
+export function isObjectAnAtom(object: THREE.Object3D): object is AtomObject {
+    return object instanceof THREE.Mesh;
+}

Original file line number	Diff line number	Diff line change
`@@ -164,3 +164,7 @@ export function unsetAtomAsHovered(atom: THREE.Object3D): void {`
`164`	`164`	`atomObject.userData.hovered = false;`
`165`	`165`	`setColorForAtom(atom);`
`166`	`166`	`}`
	`167`	`+`
	`168`	`+export function isObjectAnAtom(object: THREE.Object3D): object is AtomObject {`
	`169`	`+ return object instanceof THREE.Mesh;`
	`170`	`+}`