#4697 - Macro: Highlight connection point (change mouse cursor) on mo…

…use hover
epam · May 28, 2024 · 5c30180 · 5c30180
1 parent 52ace78
commit 5c30180
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/...ore/__tests__/application/render/renderers/__snapshots__/PolymerBondRenderer.test.ts.snap b/...ore/__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
@@ -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
@@ -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
@@ -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');