Backmerge: Macro: #3899 - Attachment points do not disappear when hover is removed from some monomers.

packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts

@@ -113,6 +113,18 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
     }
   }
 
+  public updateAttachmentPoints() {
+    this.hoveredAttachmenPoint = null;
+    if (!this.rootElement) return;
+    if (this.attachmentPoints.length > 0) {
+      this.attachmentPoints.forEach((point) => {
+        point.updateAttachmentPointStyleForHover();
+      });
+    } else {
+      this.drawAttachmentPoints();
+    }
+  }
+
   public redrawAttachmentPointsCoordinates() {
     const chosenAttachmentPointName =
       this.monomer.chosenFirstAttachmentPointForBond;

packages/ketcher-core/src/application/render/renderers/RenderersManager.ts

@@ -324,7 +324,7 @@ export class RenderersManager {
   ) {
     this.hoverDrawingEntity(monomer as DrawingEntity);
     monomer.renderer?.hoverAttachmenPoint(attachmentPointName);
-    monomer.renderer?.redrawAttachmentPoints();
+    monomer.renderer?.updateAttachmentPoints();
   }
 
   public update(modelChanges: Command) {

packages/ketcher-core/src/domain/AttachmentPoint.ts

@@ -11,7 +11,7 @@ import {
   getSearchFunction,
 } from './helpers/attachmentPointCalculations';
 import { editorEvents } from 'application/editor/editorEvents';
-import { AttachmentPointConstructorParams } from './types';
+import { AttachmentPointConstructorParams, AttachmentPointName } from './types';
 
 export class AttachmentPoint {
   static attachmentPointVector = 12;
@@ -188,6 +188,9 @@ export class AttachmentPoint {
         event.attachmentPointName = this.attachmentPointName;
         this.editorEvents.mouseOverAttachmentPoint.dispatch(event);
       })
+      .on('mouseleave', (event) => {
+        this.editorEvents.mouseLeaveAttachmentPoint.dispatch(event);
+      })
       .on('mousedown', (event) => {
         event.attachmentPointName = this.attachmentPointName;
         this.editorEvents.mouseDownAttachmentPoint.dispatch(event);
@@ -197,10 +200,6 @@ export class AttachmentPoint {
         this.editorEvents.mouseUpAttachmentPoint.dispatch(event);
       });
 
-    this.element.on('mouseleave', (event) => {
-      this.editorEvents.mouseLeaveAttachmentPoint.dispatch(event);
-    });
-
     return hoverableAreaElement;
   }
 
@@ -263,6 +262,21 @@ export class AttachmentPoint {
     return attachmentPoint;
   }
 
+  public updateAttachmentPointStyleForHover() {
+    const isAttachmentPointUsed = this.monomer.isAttachmentPointUsed(
+      this.attachmentPointName as AttachmentPointName,
+    );
+    if (isAttachmentPointUsed) {
+      this.attachmentPoint
+        ?.select('line')
+        .style('stroke', AttachmentPoint.colors.fillUsed);
+      this.attachmentPoint
+        ?.select('circle')
+        .style('fill', AttachmentPoint.colors.fillUsed)
+        .attr('stroke', 'white');
+    }
+  }
+
   public rotateToAngle(polymerBond: PolymerBond, flip = false) {
     let angleRadians = 0;
     if (flip) {