#5497 – Refactor (SideChainConnectionBondRenderer): Specify the types

epam · Dec 6, 2024 · a2cc652 · a2cc652
1 parent 1062c3e
commit a2cc652
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 23 deletions.
diff --git a/...e/src/application/render/renderers/PolymerBondRenderer/SideChainConnectionBondRenderer.ts b/...e/src/application/render/renderers/PolymerBondRenderer/SideChainConnectionBondRenderer.ts
@@ -9,10 +9,19 @@ import {
 } from 'domain/entities/canvas-matrix/Connection';
 import { SNAKE_LAYOUT_CELL_WIDTH } from 'domain/entities/DrawingEntitiesManager';
 
-type AppendPathToElementFunction = (
-  element: D3SvgElementSelection<SVGGElement, void>,
+type RendererBodyElement<ThisType> = D3SvgElementSelection<
+  SVGPathElement,
+  ThisType
+>;
+type RendererRootElement<ThisType> = D3SvgElementSelection<
+  SVGGElement,
+  ThisType
+>;
+
+type AppendPathToElementFunction<ThisType> = (
+  element: RendererRootElement<ThisType>,
   cssClassForPath: string,
-) => D3SvgElementSelection<SVGPathElement, void>;
+) => RendererBodyElement<ThisType>;
 
 interface AppendSideConnectionBondParameter {
   readonly cells: readonly Cell[];
@@ -24,8 +33,8 @@ interface AppendSideConnectionBondParameter {
   readonly sideConnectionBondTurnPoint?: number;
 }
 
-interface AppendSideConnectionBondResult {
-  readonly appendPathToElement: AppendPathToElementFunction;
+interface AppendSideConnectionBondResult<ThisType> {
+  readonly appendPathToElement: AppendPathToElementFunction<ThisType>;
   readonly pathDAttributeValue: string;
   readonly sideConnectionBondTurnPointUpdated: number;
 }
@@ -60,12 +69,12 @@ const SMOOTH_CORNER_SIZE = 5;
 //  - a class with static methods.
 //  - a set of functions.
 export class SideChainConnectionBondRenderer {
-  public appendSideConnectionBond({
+  public appendSideConnectionBond<ThisType>({
     cells,
     polymerBond,
     scaledPosition,
     sideConnectionBondTurnPoint,
-  }: AppendSideConnectionBondParameter): AppendSideConnectionBondResult {
+  }: AppendSideConnectionBondParameter): AppendSideConnectionBondResult<ThisType> {
     let sideConnectionBondTurnPointUpdated = sideConnectionBondTurnPoint ?? 0;
 
     const firstCell = cells[0];
@@ -235,12 +244,13 @@ export class SideChainConnectionBondRenderer {
 
     pathDAttributeValue += `L ${endPosition.x},${endPosition.y} `;
 
-    const appendPathToElement: AppendPathToElementFunction = (
-      element: D3SvgElementSelection<SVGGElement, void>,
+    const appendPathToElement: AppendPathToElementFunction<ThisType> = <
+      ThisType,
+    >(
+      element: RendererRootElement<ThisType>,
       cssClassForPath: string,
-    ): D3SvgElementSelection<SVGPathElement, void> => {
-      const pathElement: D3SvgElementSelection<SVGPathElement, void> =
-        element.append('path');
+    ): RendererBodyElement<ThisType> => {
+      const pathElement: RendererBodyElement<ThisType> = element.append('path');
       return pathElement
         .attr('class', cssClassForPath)
         .attr('d', pathDAttributeValue)

diff --git a/...ore/src/application/render/renderers/PolymerBondRenderer/SnakeModeHydrogenBondRenderer.ts b/...ore/src/application/render/renderers/PolymerBondRenderer/SnakeModeHydrogenBondRenderer.ts
@@ -112,7 +112,7 @@ export class SnakeModeHydrogenBondRenderer extends BaseRenderer {
   }
 
   public appendBond(
-    rootElement: D3SvgElementSelection<SVGGElement, void>,
+    rootElement: D3SvgElementSelection<SVGGElement, this>,
   ): void {
     const editor = CoreEditor.provideEditorInstance();
     const matrix = editor.drawingEntitiesManager.canvasMatrix;
@@ -738,7 +738,12 @@ export class SnakeModeHydrogenBondRenderer extends BaseRenderer {
       this.sideConnectionBondTurnPoint = undefined;
     }
     this.rootElement = this.rootElement || this.appendRootElement();
-    this.appendBond(this.rootElement);
+    this.appendBond(
+      this.rootElement as D3SvgElementSelection<
+        SVGGElement,
+        unknown
+      > as D3SvgElementSelection<SVGGElement, this>,
+    );
     this.appendHoverAreaElement();
     this.drawSelection();
   }

diff --git a/...core/src/application/render/renderers/PolymerBondRenderer/SnakeModePolymerBondRenderer.ts b/...core/src/application/render/renderers/PolymerBondRenderer/SnakeModePolymerBondRenderer.ts
@@ -38,8 +38,8 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
 
   // TODO: Specify the type of `selectionElement`.
   // private selectionElement?:
-  //   | D3SvgElementSelection<SVGLineElement, void>
-  //   | D3SvgElementSelection<SVGPathElement, void>;
+  //   | D3SvgElementSelection<SVGLineElement, this>
+  //   | D3SvgElementSelection<SVGPathElement, this>;
   private selectionElement;
 
   private editorEvents: typeof editorEvents;
@@ -112,7 +112,7 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
   }
 
   public appendBond(
-    rootElement: D3SvgElementSelection<SVGGElement, void>,
+    rootElement: D3SvgElementSelection<SVGGElement, this>,
   ): void {
     const editor = CoreEditor.provideEditorInstance();
     const matrix = editor.drawingEntitiesManager.canvasMatrix;
@@ -149,7 +149,7 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
   }
 
   private appendSideConnectionBond(
-    rootElement: D3SvgElementSelection<SVGGElement, void>,
+    rootElement: D3SvgElementSelection<SVGGElement, this>,
     cells: Cell[],
   ): D3SvgElementSelection<SVGPathElement, this> {
     const sideChainConnectionBondRenderer =
@@ -158,7 +158,7 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
       appendPathToElement,
       pathDAttributeValue,
       sideConnectionBondTurnPointUpdated,
-    } = sideChainConnectionBondRenderer.appendSideConnectionBond({
+    } = sideChainConnectionBondRenderer.appendSideConnectionBond<this>({
       cells,
       polymerBond: this.polymerBond,
       scaledPosition: this.scaledPosition,
@@ -544,7 +544,12 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
       this.sideConnectionBondTurnPoint = undefined;
     }
     this.rootElement = this.rootElement || this.appendRootElement();
-    this.appendBond(this.rootElement);
+    this.appendBond(
+      this.rootElement as D3SvgElementSelection<
+        SVGGElement,
+        unknown
+      > as D3SvgElementSelection<SVGGElement, this>,
+    );
     this.appendHoverAreaElement();
     this.drawSelection();
   }
@@ -716,7 +721,7 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
 
       Array.from(allSideConnectionBondsBodyElements).forEach(
         (bondBodyElement) => {
-          bondBodyElement.setAttribute('stroke', '#C0E2E6');
+          bondBodyElement.setAttribute('stroke', '#c0e2e6');
         },
       );
     }
@@ -747,7 +752,7 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
 
           bondBodyElement.setAttribute(
             'stroke',
-            renderer.polymerBond.isSideChainConnection ? '#43B5C0' : '#333333',
+            renderer.polymerBond.isSideChainConnection ? '#43b5c0' : '#333333',
           );
         },
       );
@@ -756,7 +761,7 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer {
     this.bodyElement
       .attr(
         'stroke',
-        this.polymerBond.isSideChainConnection && true ? '#43B5C0' : '#333333',
+        this.polymerBond.isSideChainConnection ? '#43b5c0' : '#333333',
       )
       .attr('pointer-events', 'stroke');