fixes to SVG canvas and made typescript compile

src/mxgraph/util/canvas/mxSvgCanvas2D.js

@@ -169,7 +169,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
    *
    * Or set the respective attribute in the SVG element directly.
    *
-   * Constructor: D
+   * Constructor: mxSvgCanvas2D
    *
    * Constructs a new SVG canvas.
    *
@@ -1332,7 +1332,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
   ) {
     const s = this.state.scale;
 
-    D.createCss(
+    mxSvgCanvas2D.createCss(
       w + 2,
       h,
       align,
@@ -1564,7 +1564,7 @@ class mxSvgCanvas2D extends mxAbstractCanvas2D {
       tmp = `${id}-${++counter}`;
     }
 
-    clip = this.createElement('clipPath');
+    const clip = this.createElement('clipPath');
     clip.setAttribute('id', tmp);
 
     const rect = this.createElement('rect');

src/mxgraph/view/graph/mxGraph.ts

@@ -1712,7 +1712,7 @@ class mxGraph extends mxEventSource {
   batchUpdate(fn: Function): void {
     (<mxGraphModel>this.getModel()).beginUpdate();
     try {
-      fn();
+      fn()
     } finally {
       (<mxGraphModel>this.getModel()).endUpdate();
     }

src/package-lock.json

@@ -376,12 +376,41 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "@types/node": {
+      "version": "14.14.37",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz",
+      "integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw==",
+      "dev": true
+    },
     "@types/normalize-package-data": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
       "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz",
+      "integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==",
+      "dev": true
+    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -1069,6 +1098,12 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+      "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==",
+      "dev": true
+    },
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -3898,6 +3933,12 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz",
       "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg=="
     },
+    "typescript": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
+      "integrity": "sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==",
+      "dev": true
+    },
     "unbox-primitive": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.0.tgz",

src/package.json

@@ -15,6 +15,8 @@
   },
   "devDependencies": {
     "@ijsto/eslint-config": "^3.0.1",
+    "@types/node": "^14.14.37",
+    "@types/react": "^17.0.3",
     "babel-eslint": "^9.0.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -25,6 +27,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^1.7.0",
-    "prettier": "^1.19.1"
+    "prettier": "^1.19.1",
+    "typescript": "^4.2.4"
   }
 }

src/pages/backgrounds/ExtendCanvas.js

@@ -4,12 +4,12 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxRectangle from '../../mxgraph/util/mxRectangle';
+import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
 import mxUtils from '../../mxgraph/util/mxUtils';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
 
 class ExtendCanvas extends React.Component {
   constructor(props) {

src/tsconfig.json

@@ -5,20 +5,29 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "isolatedModules": true,
-    "jsx": "react-native",
+    "jsx": "preserve",
     "module": "es2020",
-    "lib": ["es2020", "dom"],
+    "lib": [
+      "es2020",
+      "dom"
+    ],
     "moduleResolution": "node",
     "noEmit": true,
     "strict": true,
     "target": "es2020",
     "resolveJsonModule": true, // Required for JSON files
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
   },
   "exclude": [
     "node_modules",
     "e2e",
     "**/*.json", // Don't try and check JSON files
-    "**/*.spec.ts",
+    "**/*.spec.ts"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
   ]
 }