From e0c38bd3d17c36272841277b324e589c19f51beb Mon Sep 17 00:00:00 2001
From: Starla Huang <starla_huang@epam.com>
Date: Sat, 2 Dec 2023 00:08:26 +0800
Subject: [PATCH] #3601 enhance according to comments

---
 .../render/renderers/BaseMonomerRenderer.ts   | 34 +++++++++------
 .../src/domain/AttachmentPoint.ts             | 43 ++++++++-----------
 .../ketcher-core/src/domain/types/monomers.ts | 16 ++++++-
 3 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts b/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts
index 7eeb3e422f..819f4e66a0 100644
--- a/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts
+++ b/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts
@@ -13,7 +13,10 @@ import {
 import { AttachmentPoint } from 'domain/AttachmentPoint';
 import Coordinates from 'application/editor/shared/coordinates';
 import { Vec2 } from 'domain/entities';
-import { AttachmentPointName } from 'domain/types';
+import {
+  AttachmentPointConstructorParams,
+  AttachmentPointName,
+} from 'domain/types';
 
 export abstract class BaseMonomerRenderer extends BaseRenderer {
   private editorEvents: typeof editorEvents;
@@ -207,21 +210,24 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
     if (!this.monomer.isAttachmentPointUsed(AttachmentPointName)) {
       rotation = attachmentPointNumberToAngle[AttachmentPointName];
     }
-
-    const attPointInstance = new AttachmentPoint(
-      this.rootElement as D3SvgElementSelection<SVGGElement, void>,
-      this.monomer,
-      this.monomerSize.width,
-      this.monomerSize.height,
-      this.canvasWrapper,
-      AttachmentPointName,
-      this.monomer.isAttachmentPointUsed(AttachmentPointName),
-      this.monomer.isAttachmentPointPotentiallyUsed(AttachmentPointName) ||
+    const attachmentPointParams: AttachmentPointConstructorParams = {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      rootElement: this.rootElement!,
+      monomer: this.monomer,
+      bodyWidth: this.monomerSize.width,
+      bodyHeight: this.monomerSize.height,
+      canvas: this.canvasWrapper,
+      attachmentPointName: AttachmentPointName,
+      isUsed: this.monomer.isAttachmentPointUsed(AttachmentPointName),
+      isPotentiallyUsed:
+        this.monomer.isAttachmentPointPotentiallyUsed(AttachmentPointName) ||
         (this.hoveredAttachmenPoint === AttachmentPointName &&
           !updateAttachmentPoints),
-      customAngle || rotation,
-      this.isSnakeBondForAttachmentPoint(AttachmentPointName),
-    );
+      angle: customAngle || rotation,
+      isSnake: !!this.isSnakeBondForAttachmentPoint(AttachmentPointName),
+    };
+
+    const attPointInstance = new AttachmentPoint(attachmentPointParams);
     return attPointInstance;
   }
 
diff --git a/packages/ketcher-core/src/domain/AttachmentPoint.ts b/packages/ketcher-core/src/domain/AttachmentPoint.ts
index 609abec5d6..7d538ce6e4 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 { AttachmentPointName } from './types';
+import { AttachmentPointConstructorParams, AttachmentPointName } from './types';
 
 export class AttachmentPoint {
   static attachmentPointVector = 12;
@@ -52,35 +52,28 @@ export class AttachmentPoint {
   private isSnake;
   private editorEvents: typeof editorEvents;
 
-  constructor(
-    rootElement: D3SvgElementSelection<SVGGElement, void>,
-    monomer,
-    bodyWidth,
-    bodyHeight,
-    canvas,
-    attachmentPointName,
-    isUsed,
-    isPotentiallyUsed,
-    angle = 0,
-    isSnake,
-  ) {
-    this.rootElement = rootElement;
-    this.monomer = monomer;
-    this.bodyWidth = bodyWidth;
-    this.bodyHeight = bodyHeight;
-    this.canvasOffset = canvas.node().getBoundingClientRect();
-    this.attachmentPointName = attachmentPointName;
-    this.centerOFMonomer = monomer.renderer.center;
-    this.isSnake = isSnake;
-    this.isUsed = isUsed;
-    this.initialAngle = angle;
+  constructor(constructorParams: AttachmentPointConstructorParams) {
+    this.rootElement = constructorParams.rootElement;
+    this.monomer = constructorParams.monomer;
+    this.bodyWidth = constructorParams.bodyWidth;
+    this.bodyHeight = constructorParams.bodyHeight;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    this.canvasOffset = constructorParams.canvas
+      .node()!
+      .getBoundingClientRect();
+    this.attachmentPointName = constructorParams.attachmentPointName;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    this.centerOFMonomer = constructorParams.monomer.renderer!.center;
+    this.isSnake = constructorParams.isSnake;
+    this.isUsed = constructorParams.isUsed;
+    this.initialAngle = constructorParams.angle;
     this.editorEvents = editorEvents;
     this.attachmentPoint = null;
 
-    if (isPotentiallyUsed) {
+    if (constructorParams.isPotentiallyUsed) {
       this.fill = AttachmentPoint.colors.fillPotentially;
       this.stroke = AttachmentPoint.colors.strokePotentially;
-    } else if (isUsed) {
+    } else if (constructorParams.isUsed) {
       this.fill = AttachmentPoint.colors.fillUsed;
       this.stroke = AttachmentPoint.colors.strokeUsed;
     } else {
diff --git a/packages/ketcher-core/src/domain/types/monomers.ts b/packages/ketcher-core/src/domain/types/monomers.ts
index 2107e4021f..9c454fe54d 100644
--- a/packages/ketcher-core/src/domain/types/monomers.ts
+++ b/packages/ketcher-core/src/domain/types/monomers.ts
@@ -1,5 +1,6 @@
-import { Struct } from 'domain/entities';
+import { BaseMonomer, Struct } from 'domain/entities';
 import { IKetAttachmentPoint } from 'application/formatters/types/ket';
+import { D3SvgElementSelection } from 'application/render/types';
 
 export type MonomerColorScheme = {
   regular: string;
@@ -51,3 +52,16 @@ export const attachmentPointNames = [
 ];
 
 export type LeavingGroup = 'O' | 'OH' | 'H';
+
+export type AttachmentPointConstructorParams = {
+  rootElement: D3SvgElementSelection<SVGGElement, void>;
+  monomer: BaseMonomer;
+  bodyWidth: number;
+  bodyHeight: number;
+  canvas: D3SvgElementSelection<SVGSVGElement, void>;
+  attachmentPointName: AttachmentPointName;
+  isUsed: boolean;
+  isPotentiallyUsed: boolean;
+  angle: number;
+  isSnake: boolean;
+};