#5686 - Bonds between micro and macro structures couldn't be selected…

… and deleted in Macro mode
epam · Oct 15, 2024 · 9ad100b · 9ad100b
1 parent 54bc78f
commit 9ad100b
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 5 deletions.
diff --git a/packages/ketcher-core/src/application/render/renderers/BondRenderer.ts b/packages/ketcher-core/src/application/render/renderers/BondRenderer.ts
@@ -199,10 +199,11 @@ export class BondRenderer extends BaseRenderer {
   private appendRootElement() {
     return this.canvas
       .append('g')
+      .data([this])
       .attr(
         'transform',
         `translate(${this.scaledPosition.startPosition.x}, ${this.scaledPosition.startPosition.y})`,
-      );
+      ) as never as D3SvgElementSelection<SVGGElement, void>;
   }
 
   getSelectionPoints() {
@@ -646,6 +647,7 @@ export class BondRenderer extends BaseRenderer {
   public remove() {
     super.remove();
     this.removeHover();
+    this.removeSelection();
   }
 
   public move() {

diff --git a/packages/ketcher-core/src/application/render/renderers/MonomerToAtomBondRenderer.ts b/packages/ketcher-core/src/application/render/renderers/MonomerToAtomBondRenderer.ts
@@ -4,6 +4,10 @@ import { Scale } from 'domain/helpers';
 import { MonomerToAtomBond } from 'domain/entities/MonomerToAtomBond';
 
 export class MonomerToAtomBondRenderer extends BaseRenderer {
+  private selectionElement:
+    | D3SvgElementSelection<SVGLineElement, void>
+    | undefined;
+
   constructor(public monomerToAtomBond: MonomerToAtomBond) {
     super(monomerToAtomBond);
     this.monomerToAtomBond.setRenderer(this);
@@ -29,10 +33,11 @@ export class MonomerToAtomBondRenderer extends BaseRenderer {
   show() {
     this.rootElement = this.canvas
       .insert('g', `.monomer`)
+      .data([this])
       .attr(
         'transform',
         `translate(${this.scaledPosition.startPosition.x}, ${this.scaledPosition.startPosition.y})`,
-      );
+      ) as never as D3SvgElementSelection<SVGGElement, void>;
 
     this.rootElement
       ?.append('line')
@@ -48,15 +53,60 @@ export class MonomerToAtomBondRenderer extends BaseRenderer {
       )
       .attr('stroke', '#333333')
       .attr('stroke-width', 1);
+    this.appendHover();
   }
 
   protected appendHover(): D3SvgElementSelection<SVGUseElement, void> | void {
-    return undefined;
+    this.rootElement
+      ?.append('line')
+      .attr('x1', 0)
+      .attr('y1', 0)
+      .attr(
+        'x2',
+        this.scaledPosition.endPosition.x - this.scaledPosition.startPosition.x,
+      )
+      .attr(
+        'y2',
+        this.scaledPosition.endPosition.y - this.scaledPosition.startPosition.y,
+      )
+      .attr('stroke', 'transparent')
+      .attr('stroke-width', 10);
   }
 
   protected appendHoverAreaElement(): void {}
 
-  drawSelection(): void {}
+  public drawSelection() {
+    if (!this.rootElement) {
+      return;
+    }
+    if (this.monomerToAtomBond.selected) {
+      this.appendSelection();
+    } else {
+      this.removeSelection();
+    }
+  }
+
+  public appendSelection(): void {
+    this.selectionElement = this.rootElement
+      ?.insert('line', ':first-child')
+      .attr('x1', 0)
+      .attr('y1', 0)
+      .attr(
+        'x2',
+        this.scaledPosition.endPosition.x - this.scaledPosition.startPosition.x,
+      )
+      .attr(
+        'y2',
+        this.scaledPosition.endPosition.y - this.scaledPosition.startPosition.y,
+      )
+      .attr('stroke', '#57ff8f')
+      .attr('stroke-width', 10);
+  }
+
+  public removeSelection() {
+    this.selectionElement?.remove();
+    this.selectionElement = undefined;
+  }
 
   public move() {
     if (!this.rootElement) {
@@ -67,7 +117,10 @@ export class MonomerToAtomBondRenderer extends BaseRenderer {
     this.show();
   }
 
-  protected removeHover(): void {}
+  protected removeHover(): void {
+    this.hoverElement?.remove();
+    this.hoverElement = undefined;
+  }
 
   public moveSelection(): void {}
 }
diff --git a/packages/ketcher-core/src/domain/entities/DrawingEntitiesManager.ts b/packages/ketcher-core/src/domain/entities/DrawingEntitiesManager.ts
@@ -2233,6 +2233,7 @@ export class DrawingEntitiesManager {
   ) {
     if (_monomerToAtomBond) {
       this.monomerToAtomBonds.set(_monomerToAtomBond.id, _monomerToAtomBond);
+      monomer.setBond(attachmentPoint, _monomerToAtomBond);
 
       return _monomerToAtomBond;
     }