From 5c30180324a3622901d6268ad948d979d391b2f9 Mon Sep 17 00:00:00 2001
From: Ilya Asiyuk <ilya_asiyuk@epam.com>
Date: Tue, 28 May 2024 12:37:03 +0400
Subject: [PATCH] #4697 - Macro: Highlight connection point (change mouse
 cursor) on mouse hover

---
 .../PolymerBondRenderer.test.ts.snap              |  8 ++++++++
 .../application/render/renderers/BaseRenderer.ts  |  5 +++++
 .../render/renderers/PolymerBondRenderer.ts       | 15 +++++++++++++++
 .../ketcher-core/src/domain/AttachmentPoint.ts    |  1 +
 4 files changed, 29 insertions(+)

diff --git a/packages/ketcher-core/__tests__/application/render/renderers/__snapshots__/PolymerBondRenderer.test.ts.snap b/packages/ketcher-core/__tests__/application/render/renderers/__snapshots__/PolymerBondRenderer.test.ts.snap
index 1982e52173..d3e029ee7b 100644
--- a/packages/ketcher-core/__tests__/application/render/renderers/__snapshots__/PolymerBondRenderer.test.ts.snap
+++ b/packages/ketcher-core/__tests__/application/render/renderers/__snapshots__/PolymerBondRenderer.test.ts.snap
@@ -39,6 +39,14 @@ exports[`Polymer Bond Renderer should render bond 1`] = `
         y1="400"
         y2="4000"
       />
+      <circle
+        cursor="pointer"
+        cx="3600"
+        cy="4000"
+        fill="transparent"
+        r="1"
+        stroke-width="10"
+      />
     </g>
   </g>
 </svg>
diff --git a/packages/ketcher-core/src/application/render/renderers/BaseRenderer.ts b/packages/ketcher-core/src/application/render/renderers/BaseRenderer.ts
index a0678b820a..aaa4458856 100644
--- a/packages/ketcher-core/src/application/render/renderers/BaseRenderer.ts
+++ b/packages/ketcher-core/src/application/render/renderers/BaseRenderer.ts
@@ -28,6 +28,11 @@ export abstract class BaseRenderer implements IBaseRenderer {
     void
   >;
 
+  protected hoverCircleAreaElement?: D3SvgElementSelection<
+    SVGGElement | SVGCircleElement,
+    void
+  >;
+
   protected canvasWrapper: D3SvgElementSelection<SVGSVGElement, void>;
 
   protected canvas: D3SvgElementSelection<SVGSVGElement, void>;
diff --git a/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer.ts b/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer.ts
index c56b2ecbad..671097019b 100644
--- a/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer.ts
+++ b/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer.ts
@@ -569,6 +569,10 @@ export class PolymerBondRenderer extends BaseRenderer {
       .attr('x2', this.scaledPosition.endPosition.x)
       .attr('y2', this.scaledPosition.endPosition.y);
 
+    this.hoverCircleAreaElement
+      ?.attr('cx', this.scaledPosition.endPosition.x)
+      .attr('cy', this.scaledPosition.endPosition.y);
+
     this.selectionElement
       ?.attr('x2', this.scaledPosition.endPosition.x)
       ?.attr('y2', this.scaledPosition.endPosition.y);
@@ -632,6 +636,17 @@ export class PolymerBondRenderer extends BaseRenderer {
         .attr('x2', this.scaledPosition.endPosition.x)
         .attr('y2', this.scaledPosition.endPosition.y)
         .attr('stroke-width', '10');
+
+      (<D3SvgElementSelection<SVGCircleElement, void> | undefined>(
+        this.hoverCircleAreaElement
+      )) = this.rootElement
+        ?.append('circle')
+        .attr('cursor', 'pointer')
+        .attr('r', '1')
+        .attr('fill', 'transparent')
+        .attr('stroke-width', '10')
+        .attr('cx', this.scaledPosition.endPosition.x)
+        .attr('cy', this.scaledPosition.endPosition.y);
     }
   }
 
diff --git a/packages/ketcher-core/src/domain/AttachmentPoint.ts b/packages/ketcher-core/src/domain/AttachmentPoint.ts
index 1e5a816c05..851580d860 100644
--- a/packages/ketcher-core/src/domain/AttachmentPoint.ts
+++ b/packages/ketcher-core/src/domain/AttachmentPoint.ts
@@ -110,6 +110,7 @@ export class AttachmentPoint {
       .insert('g', ':first-child')
       .data([this])
       .style('pointer-events', 'none')
+      .style('cursor', 'pointer')
       .attr('class', 'dynamic-element');
 
     const attachmentPointElement = this.attachmentPoint.append('g');