diff --git a/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts b/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts index a11441b27b..7fdb373877 100644 --- a/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts +++ b/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; diff --git a/packages/ketcher-core/src/application/render/renderers/RenderersManager.ts b/packages/ketcher-core/src/application/render/renderers/RenderersManager.ts index 7f79281d96..54ed9a0a1b 100644 --- a/packages/ketcher-core/src/application/render/renderers/RenderersManager.ts +++ b/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) { diff --git a/packages/ketcher-core/src/domain/AttachmentPoint.ts b/packages/ketcher-core/src/domain/AttachmentPoint.ts index 36c8d20dbd..f7226df393 100644 --- a/packages/ketcher-core/src/domain/AttachmentPoint.ts +++ b/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) {