#5497 – Refactor (SnakeModePolymerBondRenderer.ts): Specify the types…

…, refactor the calculation of `endOfPathPart`
epam · Sep 12, 2024 · c3d208e · c3d208e
1 parent aaf6402
commit c3d208e
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 44 deletions.
diff --git a/...core/src/application/render/renderers/PolymerBondRenderer/SnakeModePolymerBondRenderer.ts b/...core/src/application/render/renderers/PolymerBondRenderer/SnakeModePolymerBondRenderer.ts
@@ -1,10 +1,19 @@
 import { editorEvents } from 'application/editor/editorEvents';
 import { CoreEditor } from 'application/editor/internal';
 import { Coordinates } from 'application/editor/shared/coordinates';
+import {
+  BaseMonomerRenderer,
+  BaseSequenceItemRenderer,
+} from 'application/render';
 import { D3SvgElementSelection } from 'application/render/types';
 import assert from 'assert';
-import { Vec2 } from 'domain/entities';
-import { Connection } from 'domain/entities/canvas-matrix/Connection';
+import { BaseMonomer, Vec2 } from 'domain/entities';
+import { Cell } from 'domain/entities/canvas-matrix/Cell';
+import {
+  Connection,
+  DirectionInDegrees,
+  DirectionOfLastCell,
+} from 'domain/entities/canvas-matrix/Connection';
 import { SNAKE_LAYOUT_CELL_WIDTH } from 'domain/entities/DrawingEntitiesManager';
 import { DrawingEntity } from 'domain/entities/DrawingEntity';
 import { PolymerBond } from 'domain/entities/PolymerBond';
@@ -137,33 +146,41 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
     return this.bodyElement;
   }
 
-  // TODO: Specify the types.
   private drawPartOfSideConnection(
     isHorizontal: boolean,
-    connection,
-    cell,
-    direction,
+    connection: Connection,
+    cell: Cell,
+    direction: DirectionInDegrees,
   ): string {
     const sin = Math.sin((direction * Math.PI) / 180);
     const cos = Math.cos((direction * Math.PI) / 180);
     const xOffset = (SNAKE_LAYOUT_CELL_WIDTH / 2) * cos;
     const yOffset = (CELL_HEIGHT / 2) * sin;
-    const maxXOffset = cell.connections.reduce((max, connection) => {
-      return max > connection.offset ? max : connection.offset;
-    }, 0);
-    const maxYOffset = cell.connections.reduce((max, connection) => {
-      const connectionYOffset = connection.yOffset || 0;
-      return max > connectionYOffset ? max : connectionYOffset;
-    }, 0);
-
-    let endOfPathPart = isHorizontal
-      ? this.sideConnectionBondTurnPoint ||
-        cell.monomer.renderer?.scaledMonomerPosition.x +
-          cell.monomer.renderer?.monomerSize.width / 2 +
-          xOffset
-      : cell.monomer.renderer?.scaledMonomerPosition.y +
-        cell.monomer.renderer?.monomerSize.height / 2 +
-        yOffset;
+    const maxXOffset = cell.connections.reduce(
+      (max: number, connection: Connection): number => {
+        return max > connection.offset ? max : connection.offset;
+      },
+      0,
+    );
+    const maxYOffset = cell.connections.reduce(
+      (max: number, connection: Connection): number => {
+        const connectionYOffset = connection.yOffset || 0;
+        return max > connectionYOffset ? max : connectionYOffset;
+      },
+      0,
+    );
+
+    let endOfPathPart: number;
+    if (isHorizontal && this.sideConnectionBondTurnPoint) {
+      endOfPathPart = this.sideConnectionBondTurnPoint;
+    } else {
+      const { monomerSize, scaledMonomerPosition } = (
+        cell.monomer as BaseMonomer
+      ).renderer as BaseMonomerRenderer | BaseSequenceItemRenderer;
+      endOfPathPart = isHorizontal
+        ? scaledMonomerPosition.x + monomerSize.width / 2 + xOffset
+        : scaledMonomerPosition.y + monomerSize.height / 2 + yOffset;
+    }
 
     this.sideConnectionBondTurnPoint = endOfPathPart;
 
@@ -192,9 +209,11 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
     }
 
     const firstCell = cells[0];
-    const firstCellConnection = firstCell.connections.find((connection) => {
-      return connection.polymerBond === this.polymerBond;
-    }) as Connection;
+    const firstCellConnection = firstCell.connections.find(
+      (connection: Connection): boolean => {
+        return connection.polymerBond === this.polymerBond;
+      },
+    ) as Connection;
     const isVerticalConnection = firstCellConnection.isVertical;
     const isStraightVerticalConnection =
       cells.length === 2 && isVerticalConnection;
@@ -218,9 +237,8 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
 
     const cos = Math.cos((xDirection * Math.PI) / 180);
 
-    // TODO: Specify the types.
-    let previousConnection;
-    let previousCell;
+    let previousConnection: Connection;
+    let previousCell: Cell;
 
     const horizontalPartIntersectionsOffset = firstCellConnection.offset;
 
@@ -265,21 +283,26 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
 
     let maxHorizontalOffset = 0;
 
-    cells.forEach((cell, cellIndex) => {
-      const cellConnection = cell.connections.find((connection) => {
-        return connection.polymerBond === this.polymerBond;
-      }) as Connection;
+    cells.forEach((cell: Cell, cellIndex: number): void => {
+      const cellConnection = cell.connections.find(
+        (connection: Connection): boolean => {
+          return connection.polymerBond === this.polymerBond;
+        },
+      ) as Connection;
       const isLastCell = cellIndex === cells.length - 1;
       const _xDirection = this.sideConnectionBondTurnPoint
         ? endPosition.x < this.sideConnectionBondTurnPoint
           ? 180
           : 0
         : xDirection;
-      const maxXOffset = cell.connections.reduce((max, connection) => {
-        return connection.isVertical || max > connection.offset
-          ? max
-          : connection.offset;
-      }, 0);
+      const maxXOffset = cell.connections.reduce(
+        (max: number, connection: Connection): number => {
+          return connection.isVertical || max > connection.offset
+            ? max
+            : connection.offset;
+        },
+        0,
+      );
 
       maxHorizontalOffset =
         maxHorizontalOffset > maxXOffset ? maxHorizontalOffset : maxXOffset;
@@ -289,10 +312,7 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
           return;
         }
 
-        const directionObject = cellConnection.direction as {
-          x: number;
-          y: number;
-        };
+        const directionObject = cellConnection.direction as DirectionOfLastCell;
         const yDirection = isVerticalConnection ? 90 : directionObject.y;
         const sin = Math.sin((yDirection * Math.PI) / 180);
         const cos = Math.cos((_xDirection * Math.PI) / 180);
@@ -332,7 +352,10 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
           isHorizontal,
           previousConnection,
           previousCell,
-          isHorizontal ? xDirection : previousConnection.direction,
+          // FIXME? Check. Is it correct to use `as DirectionInDegrees` here?
+          isHorizontal
+            ? xDirection
+            : (previousConnection.direction as DirectionInDegrees),
         );
       }
       previousCell = cell;

diff --git a/packages/ketcher-core/src/domain/entities/canvas-matrix/Connection.ts b/packages/ketcher-core/src/domain/entities/canvas-matrix/Connection.ts
@@ -1,8 +1,8 @@
 import { PolymerBond } from 'domain/entities/PolymerBond';
 import { SubChainNode } from 'domain/entities';
 
-type DirectionInDegrees = 0 | 90 | 180 | 270;
-type DirectionOfLastCell = { readonly x: number; readonly y: number };
+export type DirectionInDegrees = 0 | 90 | 180 | 270;
+export type DirectionOfLastCell = { readonly x: number; readonly y: number };
 
 export class Connection {
   constructor(