#1905 - Refactor Render class: convert raphaelRender.js to TypeScript…

… and add necessary types (#2646)

* #1905 - Refactor Render class: convert raphaelRender.js to TypeScript and add necessary types
* Refactor raphaelRender.js, draw.js to TypeScript and provide correct types
* Fix TS errors after the refactoring

example/package.json

@@ -22,6 +22,7 @@
     "build:remote:analyze": "cross-env MODE=remote run-s prebuild build:react:analyze postbuild",
     "test": "run-s test:prettier test:stylelint test:eslint test:unit",
     "test:eslint": "eslint . --ext .ts,.js,.jsx,.tsx",
+    "test:types": "tsc --noEmit",
     "test:unit": "react-app-rewired test --passWithNoTests --watchAll=false",
     "test:stylelint": "stylelint \"./**/*.{css,less}\" --formatter verbose",
     "test:prettier": "prettier --check \"./**/*.{js,ts,jsx,tsx,json}\"",

packages/ketcher-core/docs/README.md

@@ -469,7 +469,7 @@ limitations under the License.
 
 #### Defined in
 
-[packages/ketcher-core/src/application/editor/shared/constants.js:17](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/editor/shared/constants.js#L17)
+[packages/ketcher-core/src/application/editor/shared/constants.ts:17](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/editor/shared/constants.js#L17)
 
 ___
 

packages/ketcher-core/docs/classes/Render.md

@@ -52,7 +52,7 @@
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:25](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L25)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:25](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L25)
 
 ## Properties
 
@@ -62,7 +62,7 @@
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:32](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L32)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:32](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L32)
 
 ___
 
@@ -72,7 +72,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:35](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L35)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:35](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L35)
 
 ___
 
@@ -82,7 +82,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:204](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L204)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:204](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L204)
 
 ___
 
@@ -92,7 +92,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:200](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L200)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:200](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L200)
 
 ___
 
@@ -102,7 +102,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:36](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L36)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:36](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L36)
 
 ___
 
@@ -112,7 +112,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:33](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L33)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:33](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L33)
 
 ___
 
@@ -122,7 +122,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:34](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L34)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:34](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L34)
 
 ___
 
@@ -132,7 +132,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:31](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L31)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:31](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L31)
 
 ## Methods
 
@@ -153,7 +153,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:61](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L61)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:61](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L61)
 
 ___
 
@@ -173,7 +173,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:76](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L76)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:76](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L76)
 
 ___
 
@@ -187,7 +187,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:72](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L72)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:72](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L72)
 
 ___
 
@@ -208,7 +208,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:43](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L43)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:43](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L43)
 
 ___
 
@@ -228,7 +228,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:39](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L39)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:39](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L39)
 
 ___
 
@@ -249,7 +249,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:47](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L47)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:47](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L47)
 
 ___
 
@@ -269,7 +269,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:167](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L167)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:167](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L167)
 
 ___
 
@@ -289,7 +289,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:92](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L92)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:92](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L92)
 
 ___
 
@@ -309,7 +309,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:86](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L86)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:86](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L86)
 
 ___
 
@@ -329,7 +329,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:149](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L149)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:149](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L149)
 
 ___
 
@@ -350,7 +350,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:120](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L120)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:120](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L120)
 
 ___
 
@@ -370,7 +370,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:158](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L158)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:158](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L158)
 
 ___
 
@@ -390,7 +390,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:102](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L102)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:102](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L102)
 
 ___
 
@@ -411,7 +411,7 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:174](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L174)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:174](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L174)
 
 ___
 
@@ -432,4 +432,4 @@ ___
 
 #### Defined in
 
-[packages/ketcher-core/src/application/render/raphaelRender.js:51](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L51)
+[packages/ketcher-core/src/application/render/raphaelRender.ts:51](https://github.com/epam/ketcher/blob/bf065756/packages/ketcher-core/src/application/render/raphaelRender.js#L51)

packages/ketcher-core/jest.config.js

@@ -10,5 +10,12 @@ module.exports = {
     'domain(.*)$': '<rootDir>/src/domain/$1',
     'infrastructure(.*)$': '<rootDir>/src/infrastructure/$1',
     'utilities(.*)$': '<rootDir>/src/utilities/$1'
+  },
+  globals: {
+    'ts-jest': {
+      diagnostics: {
+        warnOnly: true
+      }
+    }
   }
 }

packages/ketcher-core/package.json

@@ -33,6 +33,7 @@
     "start": "cross-env NODE_ENV=development rollup -c -m true -w",
     "test": "run-s test:prettier test:eslint test:unit",
     "test:eslint": "eslint . --ext .ts,.js",
+    "test:types": "tsc --noEmit",
     "test:unit": "jest",
     "test:prettier": "prettier --check \"./**/*.{js,ts,json}\"",
     "prettier:write": "prettier --write \"./**/*.{js,ts,json}\"",

packages/ketcher-core/src/application/editor/shared/utils.js → packages/ketcher-core/src/application/editor/shared/utils.ts

@@ -14,34 +14,35 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { Vec2 } from 'domain/entities'
+import { Struct, Vec2 } from 'domain/entities'
 import { inRange } from 'lodash'
+import { BondAtoms } from 'application/editor/shared/utils.types'
 
 let FRAC = Math.PI / 12 // '15º'
 
-function setFracAngle(angle) {
+function setFracAngle(angle: number): void {
   FRAC = (Math.PI / 180) * angle
 }
 
-function calcAngle(pos0, pos1) {
+function calcAngle(pos0: Vec2, pos1: Vec2): number {
   const v = Vec2.diff(pos1, pos0)
   return Math.atan2(v.y, v.x)
 }
 
-function fracAngle(angle, angle2) {
+function fracAngle(angle, angle2): number {
   if (angle2) angle = calcAngle(angle, angle2)
   return Math.round(angle / FRAC) * FRAC
 }
 
-function calcNewAtomPos(pos0, pos1, ctrlKey) {
-  const v = new Vec2(1, 0).rotate(
+function calcNewAtomPos(pos0: Vec2, pos1: Vec2, ctrlKey: boolean): Vec2 {
+  const vector = new Vec2(1, 0).rotate(
     ctrlKey ? calcAngle(pos0, pos1) : fracAngle(pos0, pos1)
   )
-  v.add_(pos0) // eslint-disable-line no-underscore-dangle
-  return v
+  vector.add_(pos0) // eslint-disable-line no-underscore-dangle
+  return vector
 }
 
-function degrees(angle) {
+function degrees(angle: number): number {
   let degree = Math.round((angle / Math.PI) * 180)
   if (degree > 180) degree -= 360
   else if (degree <= -180) degree += 360
@@ -51,11 +52,18 @@ function degrees(angle) {
 const BONDS_MERGE_ANGLE = 10 // 'º'
 const BONDS_MERGE_SCALE = 0.2
 
-function mergeBondsParams(struct1, bond1, struct2, bond2) {
-  const begin1 = struct1.atoms.get(bond1.begin)
-  const begin2 = struct2.atoms.get(bond2.begin)
-  const end1 = struct1.atoms.get(bond1.end)
-  const end2 = struct2.atoms.get(bond2.end)
+function mergeBondsParams(
+  struct1: Struct,
+  bond1: BondAtoms,
+  struct2: Struct,
+  bond2: BondAtoms
+) {
+  // TODO find a solution to remove not-null assertion from result atoms below
+  // https://github.com/epam/ketcher/issues/2652
+  const begin1 = struct1.atoms.get(bond1.begin)!
+  const begin2 = struct2.atoms.get(bond2.begin)!
+  const end1 = struct1.atoms.get(bond1.end)!
+  const end2 = struct2.atoms.get(bond2.end)!
 
   const angle = calcAngle(begin1.pp, end1.pp) - calcAngle(begin2.pp, end2.pp)
   const mergeAngle = Math.abs(degrees(angle) % 180)

packages/ketcher-core/src/application/editor/shared/utils.types.ts

@@ -0,0 +1,3 @@
+import { Bond } from 'domain/entities'
+
+export type BondAtoms = Pick<Bond, 'begin' | 'end'>