#9620 - Refactor: Eliminate // FIXME: technical debt - Typing sub-issue

packages/ketcher-core/jest.config.js

@@ -19,6 +19,7 @@ module.exports = {
     'domain(.*)$': '<rootDir>/src/domain/$1',
     'infrastructure(.*)$': '<rootDir>/src/infrastructure/$1',
     'utilities(.*)$': '<rootDir>/src/utilities/$1',
+    'types(.*)$': '<rootDir>/src/types/$1',
     '^d3$': '<rootDir>/../../node_modules/d3/dist/d3.min.js',
   },
   globals: { ketcher: {} },

packages/ketcher-core/src/application/editor/tools/Bond.ts

@@ -33,20 +33,23 @@ import { Phosphate } from 'domain/entities/Phosphate';
 import { RNABase } from 'domain/entities/RNABase';
 import { Sugar } from 'domain/entities/Sugar';
 import { AttachmentPointName } from 'domain/types';
-// FIXME: If we replace '../shared/coordinates' by 'application/editor' to make it shorter,
-//  we get `Uncaught ReferenceError: Cannot access 'PolymerBond' before initialization`,
-//  which probably due to a circular dependency
-//  because of using uncontrolled `index.ts` files.
-import { Coordinates } from '../shared/coordinates';
 import { AtomRenderer } from 'application/render/renderers/AtomRenderer';
-import { MACROMOLECULES_BOND_TYPES, ToolName } from 'application/editor';
+import {
+  Coordinates,
+  MACROMOLECULES_BOND_TYPES,
+  ToolName,
+} from 'application/editor';
 import { KetMonomerClass } from 'application/formatters';
 import { MonomerToAtomBond } from 'domain/entities/MonomerToAtomBond';
 
 type FlexModeOrSnakeModePolymerBondRenderer =
   | FlexModePolymerBondRenderer
   | SnakeModePolymerBondRenderer;
 
+type MouseEventWithAttachmentPoint = MouseEvent & {
+  attachmentPointName: AttachmentPointName;
+};
+
 class PolymerBond implements BaseTool {
   private bondRenderer?: FlexModeOrSnakeModePolymerBondRenderer;
   private isBondConnectionModalOpen = false;
@@ -69,12 +72,12 @@ class PolymerBond implements BaseTool {
     return this.bondType === MACROMOLECULES_BOND_TYPES.HYDROGEN;
   }
 
-  public mouseDownAttachmentPoint(event) {
+  public mouseDownAttachmentPoint(event: MouseEventWithAttachmentPoint): void {
     if (this.isHydrogenBond) {
       return;
     }
 
-    const selectedRenderer = event.target.__data__;
+    const selectedRenderer = event.target?.__data__;
     if (
       selectedRenderer instanceof AttachmentPoint &&
       !selectedRenderer.monomer.isAttachmentPointUsed(event.attachmentPointName)
@@ -99,8 +102,8 @@ class PolymerBond implements BaseTool {
     }
   }
 
-  public mousedown(event) {
-    const selectedRenderer = event.target.__data__;
+  public mousedown(event: MouseEvent) {
+    const selectedRenderer = event.target?.__data__;
     if (
       selectedRenderer instanceof BaseMonomerRenderer ||
       selectedRenderer instanceof AttachmentPoint
@@ -138,11 +141,11 @@ class PolymerBond implements BaseTool {
     }
   }
 
-  // FIXME: Specify the types.
-  public mouseLeavePolymerBond(event): void {
-    const renderer: FlexModeOrSnakeModePolymerBondRenderer =
-      event.target.__data__;
-    if (this.bondRenderer || !renderer.polymerBond) return;
+  public mouseLeavePolymerBond(event: MouseEvent): void {
+    const renderer = event.target?.__data__ as
+      | FlexModeOrSnakeModePolymerBondRenderer
+      | undefined;
+    if (this.bondRenderer || !renderer?.polymerBond) return;
 
     const modelChanges =
       this.editor.drawingEntitiesManager.hidePolymerBondInformation(
@@ -151,22 +154,24 @@ class PolymerBond implements BaseTool {
     this.editor.renderersContainer.update(modelChanges);
   }
 
-  // FIXME: Specify the types.
-  public mouseOverPolymerBond(event) {
+  public mouseOverPolymerBond(event: MouseEvent) {
     if (this.bondRenderer) return;
 
-    const renderer: FlexModeOrSnakeModePolymerBondRenderer =
-      event.target.__data__;
+    const renderer = event.target?.__data__ as
+      | FlexModeOrSnakeModePolymerBondRenderer
+      | undefined;
+    if (!renderer) return;
     const modelChanges =
       this.editor.drawingEntitiesManager.showPolymerBondInformation(
         renderer.polymerBond,
       );
     this.editor.renderersContainer.update(modelChanges);
   }
 
-  public mouseOverMonomer(event) {
-    const renderer: BaseMonomerRenderer = event.target.__data__;
-    let modelChanges;
+  public mouseOverMonomer(event: MouseEvent) {
+    const renderer = event.target?.__data__ as BaseMonomerRenderer | undefined;
+    if (!renderer) return;
+    let modelChanges: Command;
 
     if (this.bondRenderer) {
       // Don't need to do anything if we hover over the first monomer of the bond
@@ -194,13 +199,13 @@ class PolymerBond implements BaseTool {
     this.editor.renderersContainer.update(modelChanges);
   }
 
-  public mouseOverAttachmentPoint(event) {
+  public mouseOverAttachmentPoint(event: MouseEventWithAttachmentPoint) {
     if (this.isHydrogenBond) {
       return;
     }
 
-    const renderer: AttachmentPoint = event.target.__data__;
-    let modelChanges;
+    const renderer = event.target?.__data__ as unknown as AttachmentPoint;
+    let modelChanges: Command;
 
     if (renderer.monomer.isAttachmentPointUsed(event.attachmentPointName)) {
       return;
@@ -234,19 +239,22 @@ class PolymerBond implements BaseTool {
     this.editor.renderersContainer.update(modelChanges);
   }
 
-  public mouseLeaveMonomer(event) {
-    const eventToElementData = event.toElement?.__data__;
-    const eventFromElementData = event.fromElement?.__data__;
+  public mouseLeaveMonomer(event: MouseEvent) {
+    const eventToElementData = event.relatedTarget?.__data__;
+    const eventFromElementData = event.target?.__data__ as
+      | BaseMonomerRenderer
+      | undefined;
     if (
       eventToElementData instanceof AttachmentPoint &&
-      eventToElementData.monomer === eventFromElementData.monomer
+      eventToElementData.monomer === eventFromElementData?.monomer
     ) {
       eventToElementData.monomer.removePotentialBonds();
 
       return;
     }
 
-    const renderer: BaseMonomerRenderer = event.target.__data__;
+    const renderer = event.target?.__data__ as BaseMonomerRenderer | undefined;
+    if (!renderer) return;
 
     if (
       renderer !== this.bondRenderer?.polymerBond?.firstMonomer?.renderer &&
@@ -262,11 +270,13 @@ class PolymerBond implements BaseTool {
     }
   }
 
-  public mouseLeaveAttachmentPoint(event) {
+  public mouseLeaveAttachmentPoint(event: MouseEvent) {
     if (this.isBondConnectionModalOpen) {
       return;
     }
-    const attachmentPointRenderer: AttachmentPoint = event.target.__data__;
+    const attachmentPointRenderer = event.target
+      ?.__data__ as unknown as AttachmentPoint;
+    if (!attachmentPointRenderer) return;
     if (
       attachmentPointRenderer.monomer.renderer !==
       this.bondRenderer?.polymerBond?.firstMonomer?.renderer
@@ -280,8 +290,9 @@ class PolymerBond implements BaseTool {
     }
   }
 
-  public mouseUpAttachmentPoint(event) {
-    const renderer = event.target.__data__ as AttachmentPoint;
+  public mouseUpAttachmentPoint(event: MouseEventWithAttachmentPoint) {
+    const renderer = event.target?.__data__ as unknown as AttachmentPoint;
+    if (!renderer) return;
     const isFirstMonomerHovered =
       renderer.monomer.renderer ===
       this.bondRenderer?.polymerBond?.firstMonomer?.renderer;
@@ -409,16 +420,16 @@ class PolymerBond implements BaseTool {
     this.editor.renderersContainer.update(modelChanges);
   }
 
-  public mouseUpMonomer(event) {
-    const renderer = event.target.__data__;
+  public mouseUpMonomer(event: MouseEvent) {
+    const renderer = event.target?.__data__ as BaseMonomerRenderer | undefined;
     const isFirstMonomerHovered =
       renderer === this.bondRenderer?.polymerBond?.firstMonomer?.renderer;
 
-    if (this.bondRenderer && !isFirstMonomerHovered) {
+    if (this.bondRenderer && renderer?.monomer && !isFirstMonomerHovered) {
       const firstMonomer = this.bondRenderer?.polymerBond?.firstMonomer;
-      const secondMonomer = renderer.monomer;
+      const secondMonomer = renderer?.monomer;
 
-      for (const attachmentPoint in secondMonomer.attachmentPointsToBonds) {
+      for (const attachmentPoint in secondMonomer?.attachmentPointsToBonds) {
         const bond = secondMonomer.attachmentPointsToBonds[attachmentPoint];
         if (!bond) {
           continue;
@@ -463,12 +474,13 @@ class PolymerBond implements BaseTool {
     }
   }
 
-  public mouseUpAtom(event) {
+  public mouseUpAtom(event: MouseEvent) {
     if (!this.bondRenderer || this.isHydrogenBond) {
       return;
     }
 
-    const atomRenderer = event.target.__data__ as AtomRenderer;
+    const atomRenderer = event.target?.__data__ as AtomRenderer | undefined;
+    if (!atomRenderer) return;
     const monomer = this.bondRenderer?.polymerBond.firstMonomer;
 
     if (!this.isHydrogenBond && !monomer.chosenFirstAttachmentPointForBond) {

packages/ketcher-core/src/application/render/renderers/RenderersManager.ts

@@ -22,7 +22,7 @@ import { Command } from 'domain/entities/Command';
 import { DrawingEntity } from 'domain/entities/DrawingEntity';
 import { ChainsCollection } from 'domain/entities/monomer-chains/ChainsCollection';
 import { PolymerBond } from 'domain/entities/PolymerBond';
-import { AttachmentPointName } from 'domain/types';
+import { AttachmentPointName, EditorTheme } from 'domain/types';
 import { AmbiguousMonomer } from 'domain/entities/AmbiguousMonomer';
 import { AmbiguousMonomerRenderer } from 'application/render/renderers/AmbiguousMonomerRenderer';
 import { Atom } from 'domain/entities/CoreAtom';
@@ -45,14 +45,15 @@ import { isMonomerSgroupWithAttachmentPoints } from '../../../utilities/monomers
 import { Scale } from 'domain/helpers';
 import { provideEditorSettings } from 'application/editor/editorSettings';
 import ZoomTool from 'application/editor/tools/Zoom';
+import { Loop } from '../view-model/Loop';
+import { DeepPartial } from 'types';
 
 type FlexModeOrSnakeModePolymerBondRenderer =
   | FlexModePolymerBondRenderer
   | SnakeModePolymerBondRenderer;
 
 export class RenderersManager {
-  // FIXME: Specify the types.
-  private readonly theme;
+  private readonly theme: DeepPartial<EditorTheme>;
   public monomers: Map<number, BaseMonomerRenderer | AmbiguousMonomerRenderer> =
     new Map();
 
@@ -67,7 +68,7 @@ export class RenderersManager {
 
   private needRecalculateMonomersEnumeration = false;
 
-  constructor({ theme }) {
+  constructor({ theme }: { theme: DeepPartial<EditorTheme> }) {
     this.theme = theme;
   }
 
@@ -110,7 +111,7 @@ export class RenderersManager {
     monomer: BaseMonomer | AmbiguousMonomer,
     callback?: () => void,
   ) {
-    let monomerRenderer;
+    let monomerRenderer: BaseMonomerRenderer | AmbiguousMonomerRenderer;
 
     if (monomer instanceof AmbiguousMonomer) {
       monomerRenderer = new AmbiguousMonomerRenderer(monomer);
@@ -288,7 +289,6 @@ export class RenderersManager {
     this.needRecalculateMonomersEnumeration = false;
   }
 
-  // FIXME: Specify the types.
   public finishPolymerBondCreation(polymerBond: PolymerBond) {
     assert(polymerBond.secondMonomer);
 
@@ -319,7 +319,10 @@ export class RenderersManager {
     secondMonomer?.renderer?.redrawHover();
   }
 
-  public hoverMonomer(monomer: BaseMonomer, needRedrawAttachmentPoints) {
+  public hoverMonomer(
+    monomer: BaseMonomer,
+    needRedrawAttachmentPoints: boolean,
+  ) {
     this.hoverDrawingEntity(monomer as DrawingEntity);
     if (needRedrawAttachmentPoints) {
       monomer.renderer?.redrawAttachmentPoints();
@@ -519,7 +522,7 @@ export class RenderersManager {
     });
   }
 
-  private calculateDashedPolygonPath(loop) {
+  private calculateDashedPolygonPath(loop: Loop) {
     const editorSettings = provideEditorSettings();
     let pathStr = '';
 
@@ -557,7 +560,7 @@ export class RenderersManager {
     return pathStr;
   }
 
-  private calculateLoopCenterAndRadius(loop) {
+  private calculateLoopCenterAndRadius(loop: Loop) {
     const editorSettings = provideEditorSettings();
 
     let center = new Vec2(0, 0);

packages/ketcher-core/src/domain/types/index.ts

@@ -1,2 +1,3 @@
 export * from './monomers';
 export * from './entities';
+export * from './theme';