finished converting most main base modules to typescript+eslint

src/mxgraph/atomic_changes/mxCellAttributeChange.js

@@ -60,5 +60,4 @@ class mxCellAttributeChange {
 }
 
 export default mxCellAttributeChange;
-import("../serialization/mxGenericChangeCodec");
+import('../serialization/mxGenericChangeCodec');
-

src/mxgraph/atomic_changes/mxGeometryChange.js

@@ -34,5 +34,4 @@ class mxGeometryChange {
 }
 
 export default mxGeometryChange;
-import("../serialization/mxGenericChangeCodec");
+import('../serialization/mxGenericChangeCodec');
-

src/mxgraph/atomic_changes/mxTerminalChange.js

@@ -36,5 +36,4 @@ class mxTerminalChange {
 }
 
 export default mxTerminalChange;
-import("../serialization/mxTerminalChangeCodec");
+import('../serialization/mxTerminalChangeCodec');
-

src/mxgraph/handler/mxCellHighlight.ts

@@ -42,6 +42,7 @@ class mxCellHighlight {
       this.repaintHandler = () => {
         // Updates reference to state
         if (this.state != null) {
+          // @ts-ignore
           const tmp = this.graph.view.getState(this.state.cell);
 
           if (tmp == null) {
@@ -71,17 +72,17 @@ class mxCellHighlight {
   }
 
   // TODO: Document me!!
-  highlightColor: string | null;
+  highlightColor: string | null=null;
 
-  strokeWidth: number | null;
+  strokeWidth: number | null=null;
 
-  dashed: boolean | null;
+  dashed: boolean=false;
 
-  opacity: number | null;
+  opacity: number=100;
 
-  repaintHandler: Function | null;
+  repaintHandler: Function | null=null;
 
-  shape: mxShape | null;
+  shape: mxShape | null=null;
 
   /**
    * Variable: keepOnTop
@@ -149,10 +150,14 @@ class mxCellHighlight {
 
     if (
       !this.keepOnTop &&
+        // @ts-ignore
       this.shape.node.parentNode.firstChild !== this.shape.node
     ) {
+      // @ts-ignore
       this.shape.node.parentNode.insertBefore(
+          // @ts-ignore
           this.shape.node,
+          // @ts-ignore
         this.shape.node.parentNode.firstChild
       );
     }
@@ -164,21 +169,21 @@ class mxCellHighlight {
    * Creates and returns the highlight shape for the given state.
    */
   createShape(): mxShape {
-    const shape = this.graph.cellRenderer.createShape(this.state);
+    const shape = <mxShape>(<mxGraph>this.graph).cellRenderer.createShape(<mxCellState>this.state);
 
-    shape.svgStrokeTolerance = this.graph.tolerance;
+    shape.svgStrokeTolerance = (<mxGraph>this.graph).tolerance;
-    shape.points = this.state.absolutePoints;
+    shape.points = (<mxCellState>this.state).absolutePoints;
-    shape.apply(this.state);
+    shape.apply(<mxCellState>this.state);
     shape.stroke = this.highlightColor;
     shape.opacity = this.opacity;
     shape.isDashed = this.dashed;
     shape.isShadow = false;
 
     shape.dialect = mxConstants.DIALECT_SVG;
-    shape.init(this.graph.getView().getOverlayPane());
+    shape.init((<mxGraph>this.graph).getView().getOverlayPane());
     mxEvent.redirectMouseEvents(shape.node, this.graph, this.state);
 
-    if (this.graph.dialect !== mxConstants.DIALECT_SVG) {
+    if ((<mxGraph>this.graph).dialect !== mxConstants.DIALECT_SVG) {
       shape.pointerEvents = false;
     } else {
       shape.svgPointerEvents = 'stroke';
@@ -192,7 +197,7 @@ class mxCellHighlight {
    *
    * Returns the stroke width.
    */
-  getStrokeWidth(state: mxCellState | null = null): number {
+  getStrokeWidth(state: mxCellState | null = null): number | null {
     return this.strokeWidth;
   }
 
@@ -205,6 +210,7 @@ class mxCellHighlight {
     if (this.state != null && this.shape != null) {
       this.shape.scale = this.state.view.scale;
 
+      // @ts-ignore
       if (this.graph.model.isEdge(this.state.cell)) {
         this.shape.strokewidth = this.getStrokeWidth();
         this.shape.points = this.state.absolutePoints;
@@ -219,7 +225,7 @@ class mxCellHighlight {
         this.shape.rotation = Number(
           this.state.style[mxConstants.STYLE_ROTATION] || '0'
         );
-        this.shape.strokewidth = this.getStrokeWidth() / this.state.view.scale;
+        this.shape.strokewidth = <number>this.getStrokeWidth() / this.state.view.scale;
         this.shape.outline = true;
       }
 
@@ -246,7 +252,7 @@ class mxCellHighlight {
    *
    * Marks the <markedState> and fires a <mark> event.
    */
-  highlight(state: mxCellState): void {
+  highlight(state: mxCellState | null=null): void {
     if (this.state !== state) {
       if (this.shape != null) {
         this.shape.destroy();
@@ -268,7 +274,7 @@ class mxCellHighlight {
   isHighlightAt(x: number, y: number): boolean {
     let hit = false;
     if (this.shape != null && document.elementFromPoint != null) {
-      let elt: Node & ParentNode = document.elementFromPoint(x, y);
+      let elt: (Node & ParentNode) | null = document.elementFromPoint(x, y);
 
       while (elt != null) {
         if (elt === this.shape.node) {
@@ -287,9 +293,10 @@ class mxCellHighlight {
    * Destroys the handler and all its resources and DOM nodes.
    */
   destroy(): void {
-    this.graph.getView().removeListener(this.resetHandler);
+    const graph = <mxGraph>this.graph;
-    this.graph.getView().removeListener(this.repaintHandler);
+    graph.getView().removeListener(this.resetHandler);
-    this.graph.getModel().removeListener(this.repaintHandler);
+    graph.getView().removeListener(this.repaintHandler);
+    graph.getModel().removeListener(this.repaintHandler);
 
     if (this.shape != null) {
       this.shape.destroy();

src/mxgraph/shape/edge/mxMarker.js

@@ -16,7 +16,7 @@ class mxMarker {
    *
    * Maps from markers names to functions to paint the markers.
    */
-  static markers: [];
+  static markers = [];
 
   /**
    * Function: addMarker

src/mxgraph/shape/mxActor.ts

@@ -3,9 +3,9 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxShape from './mxShape';
-import mxSvgCanvas2D from "../util/canvas/mxSvgCanvas2D";
 import mxRectangle from 'mxgraph/util/datatypes/mxRectangle';
+import mxShape from './mxShape';
+import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
 
 /**
  * Class: mxActor
@@ -48,10 +48,12 @@ import mxRectangle from 'mxgraph/util/datatypes/mxRectangle';
  * 1. This is stored in <strokewidth>.
  */
 class mxActor extends mxShape {
-  constructor(bounds: mxRectangle | null=null,
+  constructor(
+    bounds: mxRectangle | null = null,
     fill: string | null = null,
     stroke: string | null = null,
-              strokewidth: number=1) {
+    strokewidth: number = 1
+  ) {
     super();
     this.bounds = bounds;
     this.fill = fill;

src/mxgraph/shape/mxShape.ts

@@ -13,6 +13,7 @@ import mxClient from '../mxClient';
 import mxCellState from '../util/datatypes/mxCellState';
 import mxAbstractCanvas2D from '../util/canvas/mxAbstractCanvas2D';
 import mxStencil from './node/mxStencil';
+import mxCellOverlay from "../view/cell/mxCellOverlay";
 
 const toBool = (i: any): boolean => {
   if (i === 0) return false;
@@ -99,7 +100,7 @@ class mxShape {
    *
    * container - DOM node that will contain the shape.
    */
-  init(container: SVGElement | null = null) {
+  init(container: HTMLElement | SVGElement | null = null) {
     if (this.node == null) {
       this.node = this.create(container);
 
@@ -125,14 +126,23 @@ class mxShape {
   }
 
   // TODO: Document me!!
+
+  // Assigned in mxCellRenderer
+  preserveImageAspect: boolean=false;
+  overlay: mxCellOverlay | null=null;
+  indicator: mxShape | null=null;
+  indicatorShape: typeof mxShape | null=null;
+
+  // Assigned in mxCellHighlight
+  opacity: number | null=100;
+  isDashed: boolean=false;
+
   fill: string | null = null;
 
   gradient: string | null = null;
 
   gradientDirection: string | null = null;
 
-  opacity: number | null = null;
-
   fillOpacity: number | null = null;
 
   strokeOpacity: number | null = null;
@@ -159,8 +169,6 @@ class mxShape {
 
   isShadow: boolean = false;
 
-  isDashed: boolean = false;
-
   isRounded: boolean = false;
 
   rotation: number | null = null;
@@ -214,7 +222,7 @@ class mxShape {
    *
    * Holds the array of <mxPoints> that specify the points of this shape.
    */
-  points: mxPoint[] | null = null;
+  points: (mxPoint | null)[] | null = null;
 
   /**
    * Variable: node
@@ -349,7 +357,7 @@ class mxShape {
    *
    * container - DOM node that will contain the shape.
    */
-  create(container: SVGElement | null): SVGGElement {
+  create(container: SVGElement | HTMLElement | null): SVGGElement {
     return document.createElementNS("http://www.w3.org/2000/svg", "g");
   }
 
@@ -709,6 +717,7 @@ class mxShape {
 
         for (let i = 0; i < this.points.length; i += 1) {
           if (this.points[i] != null) {
+            // @ts-ignore
             pts.push(new mxPoint(this.points[i].x / s, this.points[i].y / s));
           }
         }

src/mxgraph/shape/mxText.ts

@@ -72,7 +72,7 @@ class mxText extends mxShape {
     value: string,
     bounds: mxRectangle,
     align: string=mxConstants.ALIGN_CENTER,
-    valign: string=mxConstants.ALIGN_MIDDLE,
+    valign: string | null=mxConstants.ALIGN_MIDDLE,
     color: string='black',
     family: string=mxConstants.DEFAULT_FONTFAMILY,
     size: number=mxConstants.DEFAULT_FONTSIZE,
@@ -89,9 +89,11 @@ class mxText extends mxShape {
     clipped: boolean=false,
     overflow: string='visible',
     labelPadding: number=0,
-    textDirection
+    textDirection: string=mxConstants.DEFAULT_TEXT_DIRECTION
   ) {
     super();
+    valign = valign != null ? valign : mxConstants.ALIGN_MIDDLE;
+
     this.value = value;
     this.bounds = bounds;
     this.color = color;
@@ -118,7 +120,7 @@ class mxText extends mxShape {
   }
 
   // TODO: Document me!
-  value: string;
+  value: string | HTMLElement | SVGGElement | null;
   bounds: mxRectangle;
   align: string=mxConstants.ALIGN_CENTER;
   valign: string=mxConstants.ALIGN_MIDDLE;
@@ -138,8 +140,8 @@ class mxText extends mxShape {
   clipped: boolean=false;
   overflow: string='visible';
   labelPadding: number=0;
-  textDirection;
+  textDirection: string=mxConstants.DEFAULT_TEXT_DIRECTION;
-  margin: mxRectangle | null=null;
+  margin: mxPoint | null=null;
   unrotatedBoundingBox: mxRectangle | null=null;
   flipH: boolean=false;
   flipV: boolean=false;
@@ -213,7 +215,7 @@ class mxText extends mxShape {
    *
    * Contains the last rendered text value. Used for caching.
    */
-  lastValue: string | null = null;
+  lastValue: string | HTMLElement | SVGGElement | null = null;
 
   /**
    * Variable: cacheEnabled
@@ -298,10 +300,10 @@ class mxText extends mxShape {
       // Handles trailing newlines to make sure they are visible in rendering output
       val =
         !mxUtils.isNode(this.value) && this.replaceLinefeeds && fmt === 'html'
-          ? val.replace(/\n/g, '<br/>')
+          ? (<string>val).replace(/\n/g, '<br/>')
           : val;
 
-      let dir = this.textDirection;
+      let dir: string | null = this.textDirection;
 
       if (dir === mxConstants.TEXT_DIRECTION_AUTO && !realHtml) {
         dir = this.getAutoDirection();
@@ -346,6 +348,7 @@ class mxText extends mxShape {
       (mxUtils.isNode(this.value) ||
         this.dialect === mxConstants.DIALECT_STRICTHTML)
     ) {
+      // @ts-ignore
       if (this.node.nodeName === 'DIV') {
         this.redrawHtmlShape();
         this.updateBoundingBox();
@@ -393,8 +396,8 @@ class mxText extends mxShape {
     this.spacingBottom = 2;
     this.spacingLeft = 2;
     this.horizontal = true;
-    delete this.background;
+    this.background = null;
-    delete this.border;
+    this.border = null;
     this.textDirection = mxConstants.DEFAULT_TEXT_DIRECTION;
     this.margin = null;
   }
@@ -502,8 +505,8 @@ class mxText extends mxShape {
       this.updateMargin();
     }
 
-    this.flipV = null;
+    this.flipV = false;
-    this.flipH = null;
+    this.flipH = false;
   }
 
   /**
@@ -517,7 +520,7 @@ class mxText extends mxShape {
   getAutoDirection() {
     // Looks for strong (directional) characters
     const tmp = /[A-Za-z\u05d0-\u065f\u066a-\u06ef\u06fa-\u07ff\ufb1d-\ufdff\ufe70-\ufefc]/.exec(
-      this.value
+      <string>this.value
     );
 
     // Returns the direction defined by the character
@@ -537,9 +540,11 @@ class mxText extends mxShape {
     if (result != null) {
       // Rendered with no foreignObject
       if (result.ownerSVGElement == null) {
+        // @ts-ignore
         result = this.node.firstChild.firstChild;
       } else {
         // Innermost DIV that contains the actual content
+        // @ts-ignore
         result = result.firstChild.firstChild.firstChild.firstChild.firstChild;
       }
     }
@@ -591,12 +596,16 @@ class mxText extends mxShape {
         node.firstChild.firstChild.nodeName === 'foreignObject'
       ) {
         // Uses second inner DIV for font metrics
+        // @ts-ignore
         node = node.firstChild.firstChild.firstChild.firstChild;
+        // @ts-ignore
         oh = node.offsetHeight * this.scale;
 
         if (this.overflow === 'width') {
+          // @ts-ignore
           ow = this.boundingBox.width;
         } else {
+          // @ts-ignore
           ow = node.offsetWidth * this.scale;
         }
       } else {
@@ -632,12 +641,14 @@ class mxText extends mxShape {
     }
 
     if (this.boundingBox != null) {
+      const margin = <mxRectangle>this.margin;
+
       if (rot !== 0) {
         // Accounts for pre-rotated x and y
         const bbox = <mxRectangle>mxUtils.getBoundingBox(
           new mxRectangle(
-            this.margin.x * this.boundingBox.width,
+            margin.x * this.boundingBox.width,
-            this.margin.y * this.boundingBox.height,
+            margin.y * this.boundingBox.height,
             this.boundingBox.width,
             this.boundingBox.height
           ),
@@ -647,17 +658,17 @@ class mxText extends mxShape {
 
         this.unrotatedBoundingBox = mxRectangle.fromRectangle(this.boundingBox);
         this.unrotatedBoundingBox.x +=
-          this.margin.x * this.unrotatedBoundingBox.width;
+          margin.x * this.unrotatedBoundingBox.width;
         this.unrotatedBoundingBox.y +=
-          this.margin.y * this.unrotatedBoundingBox.height;
+          margin.y * this.unrotatedBoundingBox.height;
 
         this.boundingBox.x += bbox.x;
         this.boundingBox.y += bbox.y;
         this.boundingBox.width = bbox.width;
         this.boundingBox.height = bbox.height;
       } else {
-        this.boundingBox.x += this.margin.x * this.boundingBox.width;
+        this.boundingBox.x += margin.x * this.boundingBox.width;
-        this.boundingBox.y += this.margin.y * this.boundingBox.height;
+        this.boundingBox.y += margin.y * this.boundingBox.height;
         this.unrotatedBoundingBox = null;
       }
     }
@@ -693,6 +704,7 @@ class mxText extends mxShape {
     return (
       !this.horizontal &&
       this.state != null &&
+      // @ts-ignore
       this.state.view.graph.model.isVertex(this.state.cell)
     );
   }
@@ -702,7 +714,11 @@ class mxText extends mxShape {
    *
    * Sets the state of the canvas for drawing the shape.
    */
-  configureCanvas(c, x, y, w, h) {
+  configureCanvas(c: mxSvgCanvas2D,
+                  x: number,
+                  y: number,
+                  w: number,
+                  h: number) {
     super.configureCanvas(c, x, y, w, h);
 
     c.setFontColor(this.color);
@@ -796,6 +812,8 @@ class mxText extends mxShape {
       `position: absolute; left: ${Math.round(this.bounds.x)}px; ` +
       `top: ${Math.round(this.bounds.y)}px; pointer-events: none; `;
     const block = this.getTextCss();
+    const margin = <mxPoint>this.margin;
+    const node = <SVGGElement>this.node;
 
     mxSvgCanvas2D.createCss(
       w + 2,
@@ -810,13 +828,20 @@ class mxText extends mxShape {
       flex,
       block,
       this.scale,
-      (dx, dy, flex, item, block, ofl) => {
+      (
+          dx: number,
+          dy: number,
+          flex: string,
+          item: string,
+          block: string,
+          ofl: string
+      ) => {
         const r = this.getTextRotation();
         let tr =
           (this.scale !== 1 ? `scale(${this.scale}) ` : '') +
           (r !== 0 ? `rotate(${r}deg) ` : '') +
-          (this.margin.x !== 0 || this.margin.y !== 0
+          (margin.x !== 0 || margin.y !== 0
-            ? `translate(${this.margin.x * 100}%,${this.margin.y * 100}%)`
+            ? `translate(${margin.x * 100}%,${margin.y * 100}%)`
             : '');
 
         if (tr !== '') {
@@ -834,22 +859,25 @@ class mxText extends mxShape {
           }
         }
 
-        if (this.opacity < 100) {
+        if (<number>this.opacity < 100) {
-          block += `opacity: ${this.opacity / 100}; `;
+          block += `opacity: ${<number>this.opacity / 100}; `;
         }
 
-        this.node.setAttribute('style', flex);
+        node.setAttribute('style', flex);
 
         const html = mxUtils.isNode(this.value)
+            // @ts-ignore
           ? this.value.outerHTML
           : this.getHtmlValue();
 
-        if (this.node.firstChild == null) {
+        if (node.firstChild == null) {
-          this.node.innerHTML = `<div><div>${html}</div></div>`;
+          node.innerHTML = `<div><div>${html}</div></div>`;
         }
 
-        this.node.firstChild.firstChild.setAttribute('style', block);
+        // @ts-ignore
-        this.node.firstChild.setAttribute('style', item);
+        node.firstChild.firstChild.setAttribute('style', block);
+        // @ts-ignore
+        node.firstChild.setAttribute('style', item);
       }
     );
   }
@@ -859,8 +887,9 @@ class mxText extends mxShape {
    *
    * Sets the inner HTML of the given element to the <value>.
    */
-  updateInnerHtml(elt) {
+  updateInnerHtml(elt: HTMLElement) {
     if (mxUtils.isNode(this.value)) {
+      // @ts-ignore
       elt.innerHTML = this.value.outerHTML;
     } else {
       let val = this.value;
@@ -885,9 +914,11 @@ class mxText extends mxShape {
    * Updates the HTML node(s) to reflect the latest bounds and scale.
    */
   updateValue() {
+    const node = <SVGGElement>this.node;
+
     if (mxUtils.isNode(this.value)) {
-      this.node.innerHTML = '';
+      node.innerHTML = '';
-      this.node.appendChild(this.value);
+      node.appendChild(<HTMLElement | SVGGElement>this.value);
     } else {
       let val = this.value;
 
@@ -909,11 +940,11 @@ class mxText extends mxShape {
 
       if (this.overflow === 'fill' || this.overflow === 'width') {
         if (bg != null) {
-          this.node.style.backgroundColor = bg;
+          node.style.backgroundColor = bg;
         }
 
         if (bd != null) {
-          this.node.style.border = `1px solid ${bd}`;
+          node.style.border = `1px solid ${bd}`;
         }
       } else {
         let css = '';
@@ -937,10 +968,10 @@ class mxText extends mxShape {
           `padding-bottom:1px;padding-right:1px;line-height:${lh}">${val}</div>`;
       }
 
-      this.node.innerHTML = val;
+      node.innerHTML = val;
 
       // Sets text direction
-      const divs = this.node.getElementsByTagName('div');
+      const divs = node.getElementsByTagName('div');
 
       if (divs.length > 0) {
         let dir = this.textDirection;
@@ -969,9 +1000,10 @@ class mxText extends mxShape {
    *
    * Updates the HTML node(s) to reflect the latest bounds and scale.
    */
-  updateFont(node) {
+  updateFont(node: HTMLElement | SVGGElement) {
     const { style } = node;
 
+    // @ts-ignore
     style.lineHeight = mxConstants.ABSOLUTE_LINE_HEIGHT
       ? `${this.size * mxConstants.LINE_HEIGHT}px`
       : mxConstants.LINE_HEIGHT;
@@ -1061,6 +1093,7 @@ class mxText extends mxShape {
           sizeDiv.firstChild != null &&
           sizeDiv.firstChild.nodeName === 'DIV'
         ) {
+          // @ts-ignore
           sizeDiv = sizeDiv.firstChild;
 
           if (node.style.wordWrap === 'break-word') {
@@ -1072,7 +1105,7 @@ class mxText extends mxShape {
 
         // Workaround for text measuring in hidden containers
         if (tmp === 0) {
-          const prev = node.parentNode;
+          const prev = <HTMLElement>node.parentNode;
           node.style.visibility = 'hidden';
           document.body.appendChild(node);
           tmp = sizeDiv.offsetWidth;

src/mxgraph/shape/mxTriangle.ts

@@ -9,7 +9,7 @@ import mxActor from './mxActor';
 import mxUtils from '../util/mxUtils';
 import mxConstants from '../util/mxConstants';
 import mxAbstractCanvas2D from '../util/canvas/mxAbstractCanvas2D';
-import mxSvgCanvas2D from "../util/canvas/mxSvgCanvas2D";
+import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
 
 class mxTriangle extends mxActor {
   /**

src/mxgraph/shape/node/mxCloud.ts

@@ -5,7 +5,7 @@
  */
 import mxActor from '../mxActor';
 import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
-import mxRectangle from "../../util/datatypes/mxRectangle";
+import mxRectangle from '../../util/datatypes/mxRectangle';
 
 /**
  * Class: mxCloud
@@ -29,10 +29,12 @@ import mxRectangle from "../../util/datatypes/mxRectangle";
  * 1. This is stored in <strokewidth>.
  */
 class mxCloud extends mxActor {
-  constructor(bounds: mxRectangle,
+  constructor(
+    bounds: mxRectangle,
     fill: string,
     stroke: string,
-              strokewidth: number=1) {
+    strokewidth: number = 1
+  ) {
     super();
     this.bounds = bounds;
     this.fill = fill;

src/mxgraph/shape/node/mxCylinder.ts

@@ -7,8 +7,8 @@ import mxShape from '../mxShape';
 import mxConstants from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
 import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
-import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
+import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
-import mxRectangle from "../../util/datatypes/mxRectangle";
+import mxRectangle from '../../util/datatypes/mxRectangle';
 
 /**
  * Class: mxCylinder
@@ -33,10 +33,12 @@ import mxRectangle from "../../util/datatypes/mxRectangle";
  * 1. This is stored in <strokewidth>.
  */
 class mxCylinder extends mxShape {
-  constructor(bounds: mxRectangle,
+  constructor(
+    bounds: mxRectangle,
     fill: string,
     stroke: string,
-              strokewidth: number=1) {
+    strokewidth: number = 1
+  ) {
     super();
     this.bounds = bounds;
     this.fill = fill;
@@ -93,10 +95,7 @@ class mxCylinder extends mxShape {
    *
    * Returns the cylinder size.
    */
-  getCylinderSize(x: number,
+  getCylinderSize(x: number, y: number, w: number, h: number): number {
-                  y: number,
-                  w: number,
-                  h: number): number {
     return Math.min(this.maxHeight, Math.round(h / 5));
   }
 

src/mxgraph/shape/node/mxDoubleEllipse.ts

@@ -9,7 +9,7 @@ import mxShape from '../mxShape';
 import mxConstants from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
 import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
-import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
+import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
 
 /**
  * Class: mxDoubleEllipse
@@ -55,10 +55,12 @@ import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
 class mxDoubleEllipse extends mxShape {
   strokewidth: number;
 
-  constructor(bounds: mxRectangle,
+  constructor(
+    bounds: mxRectangle,
     fill: string,
     stroke: string,
-              strokewidth: number=1) {
+    strokewidth: number = 1
+  ) {
     super();
     this.bounds = bounds;
     this.fill = fill;

src/mxgraph/shape/node/mxEllipse.ts

@@ -5,8 +5,8 @@
  */
 import mxShape from '../mxShape';
 import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
-import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
+import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
-import mxRectangle from "../../util/datatypes/mxRectangle";
+import mxRectangle from '../../util/datatypes/mxRectangle';
 
 /**
  * Class: mxEllipse
@@ -29,10 +29,12 @@ import mxRectangle from "../../util/datatypes/mxRectangle";
  * 1. This is stored in <strokewidth>.
  */
 class mxEllipse extends mxShape {
-  constructor(bounds: mxRectangle,
+  constructor(
+    bounds: mxRectangle,
     fill: string,
     stroke: string,
-              strokewidth: number=1) {
+    strokewidth: number = 1
+  ) {
     super();
     this.bounds = bounds;
     this.fill = fill;

src/mxgraph/shape/node/mxHexagon.ts

@@ -8,7 +8,7 @@ import mxPoint from '../../util/datatypes/mxPoint';
 import mxUtils from '../../util/mxUtils';
 import mxConstants from '../../util/mxConstants';
 import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
-import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
+import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
 
 /**
  * Class: mxHexagon
@@ -29,13 +29,7 @@ class mxHexagon extends mxActor {
    *
    * Draws the path for this shape.
    */
-  redrawPath(
+  redrawPath(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number) {
-    c: mxSvgCanvas2D,
-    x: number,
-    y: number,
-    w: number,
-    h: number
-  ) {
     const arcSize =
       mxUtils.getValue(
         this.style,

src/mxgraph/shape/node/mxImageShape.ts

@@ -9,7 +9,8 @@ import mxConstants from '../../util/mxConstants';
 import mxRectangleShape from './mxRectangleShape';
 import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxCellState from '../../util/datatypes/mxCellState';
-import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
+import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
+import mxCellOverlay from '../../view/cell/mxCellOverlay';
 
 /**
  * Class: mxImageShape
@@ -54,6 +55,9 @@ class mxImageShape extends mxRectangleShape {
 
   image: string;
 
+  // Used in mxCellRenderer
+  overlay: mxCellOverlay | null = null;
+
   /**
    * Variable: preserveImageAspect
    *

src/mxgraph/shape/node/mxRectangleShape.ts

@@ -9,7 +9,7 @@ import mxUtils from '../../util/mxUtils';
 import mxShape from '../mxShape';
 import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
 import mxRectangle from '../../util/datatypes/mxRectangle';
-import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
+import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
 
 /**
  * Class: mxRectangleShape

src/mxgraph/shape/node/mxRhombus.ts

@@ -9,7 +9,7 @@ import mxUtils from '../../util/mxUtils';
 import mxConstants from '../../util/mxConstants';
 import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
-import mxSvgCanvas2D from "../../util/canvas/mxSvgCanvas2D";
+import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
 
 /**
  * Class: mxRhombus

src/mxgraph/util/datatypes/mxCellState.ts

@@ -12,8 +12,12 @@ import mxGraphView from '../../view/graph/mxGraphView';
 import mxShape from '../../shape/mxShape';
 import mxText from '../../shape/mxText';
 import mxGraph from "../../view/graph/mxGraph";
+import mxDictionary from "./mxDictionary";
 
 class mxCellState extends mxRectangle {
+  // referenced in mxCellRenderer
+  node: any;
+
   // TODO: Document me!!
   cellBounds: mxRectangle | null = null;
 
@@ -25,7 +29,7 @@ class mxCellState extends mxRectangle {
   control: mxShape | null = null;
 
   // Used by mxCellRenderer's createCellOverlays()
-  overlays: any[] | null = null;
+  overlays: mxDictionary | null = null;
 
   /**
    * Variable: view

src/mxgraph/util/datatypes/mxPoint.js

@@ -5,7 +5,6 @@
  */
 
 import mxUtils from '../mxUtils';
-import mxConstants from '../mxConstants';
 
 class mxPoint {
   /**
@@ -33,11 +32,9 @@ class mxPoint {
    * coordinates are given, then the default values for <x> and <y> are used.
    */
   constructor(x, y) {
-    if (x !== mxConstants.DO_NOTHING) {
     this.x = x != null ? x : 0;
     this.y = y != null ? y : 0;
   }
-  }
 
   get x() {
     return this._x || 0;

src/mxgraph/util/datatypes/mxRectangle.js

@@ -16,7 +16,6 @@
  */
 
 import mxPoint from './mxPoint';
-import mxConstants from '../mxConstants';
 
 class mxRectangle extends mxPoint {
   /**
@@ -36,12 +35,10 @@ class mxRectangle extends mxPoint {
   constructor(x, y, width, height) {
     super(x, y, width, height);
 
-    if (x !== mxConstants.DO_NOTHING) {
     // replace super of mxPoint
     this.width = width != null ? width : 0;
     this.height = height != null ? height : 0;
   }
-  }
 
   /**
    * Function: fromRectangle
@@ -176,19 +173,4 @@ class mxRectangle extends mxPoint {
   }
 }
 
-// HACK: Prevent dependency problems with mxConstants
-//       importing mxRectangle and vice-versa
-mxConstants.PAGE_FORMAT_A4_PORTRAIT = new mxRectangle(
-  ...mxConstants.PAGE_FORMAT_A4_PORTRAIT
-);
-mxConstants.PAGE_FORMAT_A4_LANDSCAPE = new mxRectangle(
-  ...mxConstants.PAGE_FORMAT_A4_LANDSCAPE
-);
-mxConstants.PAGE_FORMAT_LETTER_PORTRAIT = new mxRectangle(
-  ...mxConstants.PAGE_FORMAT_LETTER_PORTRAIT
-);
-mxConstants.PAGE_FORMAT_LETTER_LANDSCAPE = new mxRectangle(
-  ...mxConstants.PAGE_FORMAT_LETTER_LANDSCAPE
-);
-
 export default mxRectangle;

src/mxgraph/util/mxConstants.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
+import mxRectangle from './datatypes/mxRectangle';
 
 const mxConstants = {
   DO_NOTHING: {},
@@ -670,7 +671,7 @@ const mxConstants = {
    * Defines the rectangle for the A4 portrait page format. The dimensions
    * of this page format are 826x1169 pixels.
    */
-  PAGE_FORMAT_A4_PORTRAIT: [0, 0, 827, 1169],
+  PAGE_FORMAT_A4_PORTRAIT: new mxRectangle(0, 0, 827, 1169),
 
   /**
    * Variable: PAGE_FORMAT_A4_PORTRAIT
@@ -678,7 +679,7 @@ const mxConstants = {
    * Defines the rectangle for the A4 portrait page format. The dimensions
    * of this page format are 826x1169 pixels.
    */
-  PAGE_FORMAT_A4_LANDSCAPE: [0, 0, 1169, 827],
+  PAGE_FORMAT_A4_LANDSCAPE: new mxRectangle(0, 0, 1169, 827),
 
   /**
    * Variable: PAGE_FORMAT_LETTER_PORTRAIT
@@ -686,7 +687,7 @@ const mxConstants = {
    * Defines the rectangle for the Letter portrait page format. The
    * dimensions of this page format are 850x1100 pixels.
    */
-  PAGE_FORMAT_LETTER_PORTRAIT: [0, 0, 850, 1100],
+  PAGE_FORMAT_LETTER_PORTRAIT: new mxRectangle(0, 0, 850, 1100),
 
   /**
    * Variable: PAGE_FORMAT_LETTER_PORTRAIT
@@ -694,7 +695,7 @@ const mxConstants = {
    * Defines the rectangle for the Letter portrait page format. The dimensions
    * of this page format are 850x1100 pixels.
    */
-  PAGE_FORMAT_LETTER_LANDSCAPE: [0, 0, 1100, 850],
+  PAGE_FORMAT_LETTER_LANDSCAPE: new mxRectangle(0, 0, 1100, 850),
 
   /**
    * Variable: NONE

src/mxgraph/view/cell/mxCell.ts

@@ -460,8 +460,7 @@ class mxCell {
    * isSource - Boolean that specifies if the source or target terminal
    * should be set.
    */
-  setTerminal(terminal: mxCell | null,
+  setTerminal(terminal: mxCell | null, isSource: boolean): mxCell | null {
-              isSource: boolean): mxCell | null {
     if (isSource) {
       this.source = terminal;
     } else {
@@ -519,9 +518,7 @@ class mxCell {
    * index - Optional integer that specifies the index at which the child
    * should be inserted into the child array.
    */
-  insert(child: mxCell | null=null,
+  insert(child: mxCell | null = null, index: number | null = null) {
-         index: number | null=null) {
-    
     if (child != null) {
       if (index == null) {
         index = this.getChildCount();
@@ -626,9 +623,7 @@ class mxCell {
    * edge - <mxCell> to be inserted into the edge array.
    * isOutgoing - Boolean that specifies if the edge is outgoing.
    */
-  insertEdge(edge: mxCell | null,
+  insertEdge(edge: mxCell | null, isOutgoing: boolean) {
-             isOutgoing: boolean) {
-
     if (edge != null) {
       edge.removeFromTerminal(isOutgoing);
       edge.setTerminal(this, isOutgoing);
@@ -658,9 +653,7 @@ class mxCell {
    * edge - <mxCell> to be removed from the edge array.
    * isOutgoing - Boolean that specifies if the edge is outgoing.
    */
-  removeEdge(edge: mxCell | null,
+  removeEdge(edge: mxCell | null, isOutgoing: boolean = false): mxCell | null {
-             isOutgoing: boolean=false): mxCell | null {
-
     if (edge != null) {
       if (edge.getTerminal(!isOutgoing) !== this && this.edges != null) {
         const index = this.getEdgeIndex(edge);
@@ -703,11 +696,13 @@ class mxCell {
    */
   hasAttribute(name: string): boolean {
     const userObject = this.getValue();
-    return userObject != null &&
+    return (
+      userObject != null &&
       (userObject.nodeType === mxConstants.NODETYPE_ELEMENT &&
       userObject.hasAttribute
         ? userObject.hasAttribute(name)
-          : userObject.getAttribute(name) != null);
+        : userObject.getAttribute(name) != null)
+    );
   }
 
   /**
@@ -722,9 +717,7 @@ class mxCell {
    * defaultValue - Optional default value to use if the attribute has no
    * value.
    */
-  getAttribute(name: string,
+  getAttribute(name: string, defaultValue: any): any {
-               defaultValue: any): any {
-
     const userObject = this.getValue();
     const val =
       userObject != null && userObject.nodeType === mxConstants.NODETYPE_ELEMENT
@@ -743,9 +736,7 @@ class mxCell {
    * name - Name of the attribute whose value should be set.
    * value - New value of the attribute.
    */
-  setAttribute(name: string,
+  setAttribute(name: string, value: any): void {
-               value: any): void {
-
     const userObject = this.getValue();
     if (
       userObject != null &&

src/mxgraph/view/cell/mxCellEditor.ts

@@ -189,7 +189,7 @@ class mxCellEditor {
    *
    * Reference to the event that was used to start editing.
    */
-  trigger: mxMouseEvent | null = null;
+  trigger: mxMouseEvent | MouseEvent | null = null;
 
   /**
    * Variable: modified
@@ -778,7 +778,7 @@ class mxCellEditor {
    * cell - <mxCell> to start editing.
    * trigger - Optional mouse event that triggered the editor.
    */
-  startEditing(cell: mxCell, trigger: mxMouseEvent | null = null): void {
+  startEditing(cell: mxCell, trigger: mxMouseEvent | MouseEvent | null = null): void {
     this.stopEditing(true);
     this.align = null;
 

src/mxgraph/view/cell/mxCellRenderer.ts

@@ -34,8 +34,41 @@ import mxShape from '../../shape/mxShape';
 import mxCellState from '../../util/datatypes/mxCellState';
 import mxCell from './mxCell';
 import mxGraphModel from "../graph/mxGraphModel";
+import mxCellOverlay from "./mxCellOverlay";
 
+/**
+ * Class: mxCellRenderer
+ *
+ * Renders cells into a document object model. The <defaultShapes> is a global
+ * map of shapename, constructor pairs that is used in all instances. You can
+ * get a list of all available shape names using the following code.
+ *
+ * In general the cell renderer is in charge of creating, redrawing and
+ * destroying the shape and label associated with a cell state, as well as
+ * some other graphical objects, namely controls and overlays. The shape
+ * hieararchy in the display (ie. the hierarchy in which the DOM nodes
+ * appear in the document) does not reflect the cell hierarchy. The shapes
+ * are a (flat) sequence of shapes and labels inside the draw pane of the
+ * graph view, with some exceptions, namely the HTML labels being placed
+ * directly inside the graph container for certain browsers.
+ *
+ * (code)
+ * mxLog.show();
+ * for (var i in mxCellRenderer.defaultShapes)
+ * {
+ *   mxLog.debug(i);
+ * }
+ * (end)
+ *
+ * Constructor: mxCellRenderer
+ *
+ * Constructs a new cell renderer with the following built-in shapes:
+ * arrow, rectangle, ellipse, rhombus, image, line, label, cylinder,
+ * swimlane, connector, actor and cloud.
+ */
 class mxCellRenderer {
+  constructor() {}
+
   /**
    * Variable: defaultShapes
    *
@@ -43,7 +76,7 @@ class mxCellRenderer {
    * known to all instances of this class. For adding new shapes you should
    * use the static <mxCellRenderer.registerShape> function.
    */
-  static defaultShapes = {};
+  static defaultShapes: { [key: string]: typeof mxShape; } = {};
 
   /**
    * Variable: defaultEdgeShape
@@ -104,38 +137,6 @@ class mxCellRenderer {
    */
   forceControlClickHandler: boolean = false;
 
-  /**
-   * Class: mxCellRenderer
-   *
-   * Renders cells into a document object model. The <defaultShapes> is a global
-   * map of shapename, constructor pairs that is used in all instances. You can
-   * get a list of all available shape names using the following code.
-   *
-   * In general the cell renderer is in charge of creating, redrawing and
-   * destroying the shape and label associated with a cell state, as well as
-   * some other graphical objects, namely controls and overlays. The shape
-   * hieararchy in the display (ie. the hierarchy in which the DOM nodes
-   * appear in the document) does not reflect the cell hierarchy. The shapes
-   * are a (flat) sequence of shapes and labels inside the draw pane of the
-   * graph view, with some exceptions, namely the HTML labels being placed
-   * directly inside the graph container for certain browsers.
-   *
-   * (code)
-   * mxLog.show();
-   * for (var i in mxCellRenderer.defaultShapes)
-   * {
-   *   mxLog.debug(i);
-   * }
-   * (end)
-   *
-   * Constructor: mxCellRenderer
-   *
-   * Constructs a new cell renderer with the following built-in shapes:
-   * arrow, rectangle, ellipse, rhombus, image, line, label, cylinder,
-   * swimlane, connector, actor and cloud.
-   */
-  constructor() {}
-
   /**
    * Function: registerShape
    *
@@ -153,7 +154,7 @@ class mxCellRenderer {
    * key - String representing the shape name.
    * shape - Constructor of the <mxShape> subclass.
    */
-  static registerShape = (key, shape) => {
+  static registerShape(key: string, shape: typeof mxShape) {
     mxCellRenderer.defaultShapes[key] = shape;
   };
 
@@ -168,9 +169,9 @@ class mxCellRenderer {
    * state - <mxCellState> for which the shape should be initialized.
    */
   initializeShape(state: mxCellState) {
-    state.shape.dialect = state.view.graph.dialect;
+    (<mxShape>state.shape).dialect = state.view.graph.dialect;
     this.configureShape(state);
-    state.shape.init(state.view.getDrawPane());
+    (<mxShape>state.shape).init(state.view.getDrawPane());
   }
 
   /**
@@ -182,7 +183,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the shape should be created.
    */
-  createShape(state: mxCellState): mxShape {
+  createShape(state: mxCellState): mxShape | null {
     let shape = null;
 
     if (state.style != null) {
@@ -210,9 +211,10 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the indicator shape should be created.
    */
-  createIndicatorShape(state: mxCellState): mxShape {
+  createIndicatorShape(state: mxCellState): void {
+    // @ts-ignore
     state.shape.indicatorShape = this.getShape(
-      state.view.graph.getIndicatorShape(state)
+      <string>state.view.graph.getIndicatorShape(state)
     );
   }
 
@@ -222,6 +224,7 @@ class mxCellRenderer {
    * Returns the shape for the given name from <defaultShapes>.
    */
   getShape(name: string): typeof mxShape {
+    // @ts-ignore
     return name != null ? mxCellRenderer.defaultShapes[name] : null;
   }
 
@@ -233,9 +236,9 @@ class mxCellRenderer {
   getShapeConstructor(state: mxCellState) {
     let ctor = this.getShape(state.style[mxConstants.STYLE_SHAPE]);
     if (ctor == null) {
-      ctor = state.view.graph.getModel().isEdge(state.cell)
+      ctor = <typeof mxShape>(state.view.graph.getModel().isEdge(state.cell)
         ? this.defaultEdgeShape
-        : this.defaultVertexShape;
+        : this.defaultVertexShape);
     }
     return ctor;
   }
@@ -250,18 +253,14 @@ class mxCellRenderer {
    * state - <mxCellState> for which the shape should be configured.
    */
   configureShape(state: mxCellState) {
-    state.shape.apply(state);
+    const shape = <any>state.shape;
-    state.shape.image = state.view.graph.getImage(state);
+    shape.apply(state);
-    state.shape.indicatorColor = state.view.graph.getIndicatorColor(state);
+    shape.image = state.view.graph.getImage(state);
-    state.shape.indicatorStrokeColor =
+    shape.indicatorColor = state.view.graph.getIndicatorColor(state);
-      state.style[mxConstants.STYLE_INDICATOR_STROKECOLOR];
+    shape.indicatorStrokeColor = state.style[mxConstants.STYLE_INDICATOR_STROKECOLOR];
-    state.shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(
+    shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(state);
-      state
+    shape.indicatorDirection = state.style[mxConstants.STYLE_INDICATOR_DIRECTION];
-    );
+    shape.indicatorImage = state.view.graph.getIndicatorImage(state);
-    state.shape.indicatorDirection =
-      state.style[mxConstants.STYLE_INDICATOR_DIRECTION];
-    state.shape.indicatorImage = state.view.graph.getIndicatorImage(state);
-
     this.postConfigureShape(state);
   }
 
@@ -319,50 +318,59 @@ class mxCellRenderer {
    * Resolves special keywords 'inherit', 'indicated' and 'swimlane' and sets
    * the respective color on the shape.
    */
-  resolveColor(state, field, key) {
+  resolveColor(state: mxCellState, field: string, key: string) {
     const shape =
       key === mxConstants.STYLE_FONTCOLOR ? state.text : state.shape;
 
     if (shape != null) {
       const { graph } = state.view;
+      // @ts-ignore
       const value = shape[field];
       let referenced = null;
 
       if (value === 'inherit') {
+        // @ts-ignore
         referenced = graph.model.getParent(state.cell);
       } else if (value === 'swimlane') {
+        // @ts-ignore
         shape[field] =
           key === mxConstants.STYLE_STROKECOLOR ||
           key === mxConstants.STYLE_FONTCOLOR
             ? '#000000'
             : '#ffffff';
 
+        // @ts-ignore
         if (graph.model.getTerminal(state.cell, false) != null) {
+          // @ts-ignore
           referenced = graph.model.getTerminal(state.cell, false);
         } else {
           referenced = state.cell;
         }
 
-        referenced = graph.getSwimlane(referenced);
+        referenced = graph.getSwimlane(<mxCell>referenced);
         key = graph.swimlaneIndicatorColorAttribute;
       } else if (value === 'indicated' && state.shape != null) {
+        // @ts-ignore
         shape[field] = state.shape.indicatorColor;
       } else if (
         key !== mxConstants.STYLE_FILLCOLOR &&
         value === mxConstants.STYLE_FILLCOLOR &&
         state.shape != null
       ) {
+        // @ts-ignore
         shape[field] = state.style[mxConstants.STYLE_FILLCOLOR];
       } else if (
         key !== mxConstants.STYLE_STROKECOLOR &&
         value === mxConstants.STYLE_STROKECOLOR &&
         state.shape != null
       ) {
+        // @ts-ignore
         shape[field] = state.style[mxConstants.STYLE_STROKECOLOR];
       }
 
       if (referenced != null) {
         const rstate = graph.getView().getState(referenced);
+        // @ts-ignore
         shape[field] = null;
 
         if (rstate != null) {
@@ -370,8 +378,10 @@ class mxCellRenderer {
             key === mxConstants.STYLE_FONTCOLOR ? rstate.text : rstate.shape;
 
           if (rshape != null && field !== 'indicatorColor') {
+            // @ts-ignore
             shape[field] = rshape[field];
           } else {
+            // @ts-ignore
             shape[field] = rstate.style[key];
           }
         }
@@ -401,7 +411,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the label should be created.
    */
-  createLabel(state, value) {
+  createLabel(state: mxCellState, value: any) {
     const { graph } = state.view;
     const isEdge = graph.getModel().isEdge(state.cell);
 
@@ -450,7 +460,7 @@ class mxCellRenderer {
       // getCellAt for the subsequent mouseMoves and the final mouseUp.
       let forceGetCell = false;
 
-      const getState = evt => {
+      const getState = (evt: Event | mxMouseEvent) => {
         let result = state;
 
         if (mxClient.IS_TOUCH || forceGetCell) {
@@ -460,7 +470,7 @@ class mxCellRenderer {
           // Dispatches the drop event to the graph which
           // consumes and executes the source function
           const pt = mxUtils.convertPoint(graph.container, x, y);
-          result = graph.view.getState(graph.getCellAt(pt.x, pt.y));
+          result = <mxCellState>graph.view.getState(graph.getCellAt(pt.x, pt.y));
         }
         return result;
       };
@@ -468,7 +478,7 @@ class mxCellRenderer {
       // TODO: Add handling for special touch device gestures
       mxEvent.addGestureListeners(
         state.text.node,
-        evt => {
+        (evt: mxMouseEvent) => {
           if (this.isLabelEvent(state, evt)) {
             graph.fireMouseEvent(
               mxEvent.MOUSE_DOWN,
@@ -479,7 +489,7 @@ class mxCellRenderer {
               mxEvent.getSource(evt).nodeName === 'IMG';
           }
         },
-        evt => {
+        (evt: mxMouseEvent) => {
           if (this.isLabelEvent(state, evt)) {
             graph.fireMouseEvent(
               mxEvent.MOUSE_MOVE,
@@ -487,7 +497,7 @@ class mxCellRenderer {
             );
           }
         },
-        evt => {
+        (evt: mxMouseEvent) => {
           if (this.isLabelEvent(state, evt)) {
             graph.fireMouseEvent(
               mxEvent.MOUSE_UP,
@@ -500,7 +510,7 @@ class mxCellRenderer {
 
       // Uses double click timeout in mxGraph for quirks mode
       if (graph.nativeDblClickEnabled) {
-        mxEvent.addListener(state.text.node, 'dblclick', evt => {
+        mxEvent.addListener(state.text.node, 'dblclick', (evt: MouseEvent) => {
           if (this.isLabelEvent(state, evt)) {
             graph.dblClick(evt, state.cell);
             mxEvent.consume(evt);
@@ -519,7 +529,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> whose label should be initialized.
    */
-  initializeLabel(state, shape) {
+  initializeLabel(state: mxCellState, shape: mxShape) {
     if (
       mxClient.IS_SVG &&
       mxClient.NO_FO &&
@@ -555,6 +565,7 @@ class mxCellRenderer {
         if (shape == null) {
           const tmp = new mxImageShape(
             new mxRectangle(),
+              // @ts-ignore
             overlays[i].image.src
           );
           tmp.dialect = state.view.graph.dialect;
@@ -564,6 +575,7 @@ class mxCellRenderer {
           this.installCellOverlayListeners(state, overlays[i], tmp);
 
           if (overlays[i].cursor != null) {
+            // @ts-ignore
             tmp.node.style.cursor = overlays[i].cursor;
           }
 
@@ -576,7 +588,7 @@ class mxCellRenderer {
 
     // Removes unused
     if (state.overlays != null) {
-      state.overlays.visit((id, shape) => {
+      state.overlays.visit((id: any, shape: { destroy: () => void; }) => {
         shape.destroy();
       });
     }
@@ -593,7 +605,7 @@ class mxCellRenderer {
    * state - <mxCellState> for which the overlay should be created.
    * overlay - <mxImageShape> that represents the overlay.
    */
-  initializeOverlay(state, overlay) {
+  initializeOverlay(state: mxCellState, overlay: mxImageShape): void {
     overlay.init(state.view.getOverlayPane());
   }
 
@@ -603,10 +615,12 @@ class mxCellRenderer {
    * Installs the listeners for the given <mxCellState>, <mxCellOverlay> and
    * <mxShape> that represents the overlay.
    */
-  installCellOverlayListeners(state, overlay, shape) {
+  installCellOverlayListeners(state: mxCellState,
+                              overlay: mxCellOverlay,
+                              shape: mxShape) {
     const { graph } = state.view;
 
-    mxEvent.addListener(shape.node, 'click', function(evt) {
+    mxEvent.addListener(shape.node, 'click', (evt: Event) => {
       if (graph.isEditing()) {
         graph.stopEditing(!graph.isInvokesStopCellEditing());
       }
@@ -618,16 +632,16 @@ class mxCellRenderer {
 
     mxEvent.addGestureListeners(
       shape.node,
-      function(evt) {
+      (evt: Event) => {
         mxEvent.consume(evt);
       },
-      function(evt) {
+      (evt: Event) => {
         graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt, state));
       }
     );
 
     if (mxClient.IS_TOUCH) {
-      mxEvent.addListener(shape.node, 'touchend', function(evt) {
+      mxEvent.addListener(shape.node, 'touchend', (evt: Event) => {
         overlay.fireEvent(
           new mxEventObject(mxEvent.CLICK, 'event', evt, 'cell', state.cell)
         );
@@ -680,10 +694,10 @@ class mxCellRenderer {
   createControlClickHandler(state: mxCellState): Function {
     const { graph } = state.view;
 
-    return evt => {
+    return (evt: mxEventObject) => {
       if (this.forceControlClickHandler || graph.isEnabled()) {
         const collapse = !graph.isCellCollapsed(state.cell);
-        graph.foldCells(collapse, false, [state.cell], null, evt);
+        graph.foldCells(collapse, false, [state.cell], false, evt);
         mxEvent.consume(evt);
       }
     };
@@ -701,7 +715,11 @@ class mxCellRenderer {
    * handleEvents - Boolean indicating if mousedown and mousemove should fire events via the graph.
    * clickHandler - Optional function to implement clicks on the control.
    */
-  initControl(state, control, handleEvents, clickHandler) {
+  initControl(state: mxCellState,
+              control: mxShape,
+              handleEvents: boolean,
+              clickHandler: Function) {
+
     const { graph } = state.view;
 
     // In the special case where the label is in HTML and the display is SVG the image
@@ -715,16 +733,18 @@ class mxCellRenderer {
     if (isForceHtml) {
       control.dialect = mxConstants.DIALECT_PREFERHTML;
       control.init(graph.container);
+      // @ts-ignore
       control.node.style.zIndex = 1;
     } else {
       control.init(state.view.getOverlayPane());
     }
 
-    const node = control.innerNode || control.node;
+    const node = control.node;
 
     // Workaround for missing click event on iOS is to check tolerance below
     if (clickHandler != null && !mxClient.IS_IOS) {
       if (graph.isEnabled()) {
+        // @ts-ignore
         node.style.cursor = 'pointer';
       }
 
@@ -732,11 +752,11 @@ class mxCellRenderer {
     }
 
     if (handleEvents) {
-      let first = null;
+      let first: mxPoint | null = null;
 
       mxEvent.addGestureListeners(
         node,
-        function(evt) {
+        (evt: Event) => {
           first = new mxPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt));
           graph.fireMouseEvent(
             mxEvent.MOUSE_DOWN,
@@ -744,13 +764,13 @@ class mxCellRenderer {
           );
           mxEvent.consume(evt);
         },
-        function(evt) {
+        (evt: Event) => {
           graph.fireMouseEvent(
             mxEvent.MOUSE_MOVE,
             new mxMouseEvent(evt, state)
           );
         },
-        function(evt) {
+        (evt: Event) => {
           graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt, state));
           mxEvent.consume(evt);
         }
@@ -758,6 +778,7 @@ class mxCellRenderer {
 
       // Uses capture phase for event interception to stop bubble phase
       if (clickHandler != null && mxClient.IS_IOS) {
+        // @ts-ignore
         node.addEventListener(
           'touchend',
           evt => {
@@ -792,7 +813,7 @@ class mxCellRenderer {
    * state - <mxCellState> whose shape fired the event.
    * evt - Mouse event which was fired.
    */
-  isShapeEvent(state, evt) {
+  isShapeEvent(state: mxCellState, evt: mxMouseEvent | MouseEvent) {
     return true;
   }
 
@@ -807,7 +828,7 @@ class mxCellRenderer {
    * state - <mxCellState> whose label fired the event.
    * evt - Mouse event which was fired.
    */
-  isLabelEvent(state, evt) {
+  isLabelEvent(state: mxCellState, evt: mxMouseEvent | MouseEvent) {
     return true;
   }
 
@@ -826,7 +847,7 @@ class mxCellRenderer {
     // Workaround for touch devices routing all events for a mouse
     // gesture (down, move, up) via the initial DOM node. Same for
     // HTML images in all IE versions (VML images are working).
-    const getState = evt => {
+    const getState = (evt: Event) => {
       let result = state;
 
       if (
@@ -840,15 +861,16 @@ class mxCellRenderer {
         // Dispatches the drop event to the graph which
         // consumes and executes the source function
         const pt = mxUtils.convertPoint(graph.container, x, y);
-        result = graph.view.getState(graph.getCellAt(pt.x, pt.y));
+        result = <mxCellState>graph.view.getState(graph.getCellAt(pt.x, pt.y));
       }
 
       return result;
     };
 
     mxEvent.addGestureListeners(
+        // @ts-ignore
       state.shape.node,
-      evt => {
+      (evt: MouseEvent) => {
         if (this.isShapeEvent(state, evt)) {
           graph.fireMouseEvent(
             mxEvent.MOUSE_DOWN,
@@ -856,15 +878,15 @@ class mxCellRenderer {
           );
         }
       },
-      mxUtils.bind(this, evt => {
+      (evt: MouseEvent) => {
         if (this.isShapeEvent(state, evt)) {
           graph.fireMouseEvent(
             mxEvent.MOUSE_MOVE,
             new mxMouseEvent(evt, getState(evt))
           );
         }
-      }),
+      },
-      evt => {
+      (evt: MouseEvent) => {
         if (this.isShapeEvent(state, evt)) {
           graph.fireMouseEvent(
             mxEvent.MOUSE_UP,
@@ -876,6 +898,7 @@ class mxCellRenderer {
 
     // Uses double click timeout in mxGraph for quirks mode
     if (graph.nativeDblClickEnabled) {
+      // @ts-ignore
       mxEvent.addListener(state.shape.node, 'dblclick', evt => {
         if (this.isShapeEvent(state, evt)) {
           graph.dblClick(evt, state.cell);
@@ -894,7 +917,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> whose label should be redrawn.
    */
-  redrawLabel(state, forced) {
+  redrawLabel(state: mxCellState, forced: boolean) {
     const { graph } = state.view;
     const value = this.getLabelValue(state);
     const wrapping = graph.isWrapping(state.cell);
@@ -946,7 +969,7 @@ class mxCellRenderer {
         state.text.apply(state);
 
         // Special case where value is obtained via hook in graph
-        state.text.valign = graph.getVerticalAlign(state);
+        state.text.valign = <string>graph.getVerticalAlign(state);
       }
 
       const bounds = this.getLabelBounds(state);
@@ -956,9 +979,9 @@ class mxCellRenderer {
       if (
         forced ||
         state.text.value !== value ||
-        state.text.isWrapping !== wrapping ||
+        state.text.wrap !== wrapping ||
         state.text.overflow !== overflow ||
-        state.text.isClipping !== clipping ||
+        state.text.clipped !== clipping ||
         state.text.scale !== nextScale ||
         state.text.dialect !== dialect ||
         state.text.bounds == null ||
@@ -973,8 +996,10 @@ class mxCellRenderer {
         state.text.overflow = overflow;
 
         // Preserves visible state
+        // @ts-ignore
         const vis = state.text.node.style.visibility;
         this.redrawLabelShape(state.text);
+        // @ts-ignore
         state.text.node.style.visibility = vis;
       }
     }
@@ -990,8 +1015,8 @@ class mxCellRenderer {
    * state - <mxCellState> whose label should be checked.
    * shape - <mxText> shape to be checked.
    */
-  isTextShapeInvalid(state: mxCellState, shape) {
+  isTextShapeInvalid(state: mxCellState, shape: mxText): boolean {
-    function check(property, stylename, defaultValue) {
+    function check(property: string, stylename: string, defaultValue: any) {
       let result = false;
 
       // Workaround for spacing added to directional spacing
@@ -1002,9 +1027,11 @@ class mxCellRenderer {
         stylename === 'spacingLeft'
       ) {
         result =
-          parseFloat(shape[property]) - parseFloat(shape.spacing) !==
+            // @ts-ignore
+          parseFloat(String(shape[property])) - parseFloat(String(shape.spacing)) !==
           (state.style[stylename] || defaultValue);
       } else {
+        // @ts-ignore
         result = shape[property] !== (state.style[stylename] || defaultValue);
       }
 
@@ -1032,8 +1059,8 @@ class mxCellRenderer {
       check('spacingBottom', mxConstants.STYLE_SPACING_BOTTOM, 0) ||
       check('spacingLeft', mxConstants.STYLE_SPACING_LEFT, 0) ||
       check('horizontal', mxConstants.STYLE_HORIZONTAL, true) ||
-      check('background', mxConstants.STYLE_LABEL_BACKGROUNDCOLOR) ||
+      check('background', mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, null) ||
-      check('border', mxConstants.STYLE_LABEL_BORDERCOLOR) ||
+      check('border', mxConstants.STYLE_LABEL_BORDERCOLOR, null) ||
       check('opacity', mxConstants.STYLE_TEXT_OPACITY, 100) ||
       check(
         'textDirection',
@@ -1088,6 +1115,7 @@ class mxCellRenderer {
     );
 
     if (isEdge) {
+      // @ts-ignore
       const spacing = state.text.getSpacing();
       bounds.x += spacing.x * scale;
       bounds.y += spacing.y * scale;
@@ -1100,6 +1128,7 @@ class mxCellRenderer {
       }
     } else {
       // Inverts label position
+      // @ts-ignore
       if (state.text.isPaintBoundsInverted()) {
         const tmp = bounds.x;
         bounds.x = bounds.y;
@@ -1114,6 +1143,7 @@ class mxCellRenderer {
       bounds.height = Math.max(1, state.height);
     }
 
+    // @ts-ignore
     if (state.text.isPaintBoundsInverted()) {
       // Rotates around center of state
       const t = (state.width - state.height) / 2;
@@ -1174,7 +1204,9 @@ class mxCellRenderer {
    * bounds - <mxRectangle> the rectangle to be rotated.
    */
   rotateLabelBounds(state: mxCellState, bounds: mxRectangle) {
+    // @ts-ignore
     bounds.y -= state.text.margin.y * bounds.height;
+    // @ts-ignore
     bounds.x -= state.text.margin.x * bounds.width;
 
     if (
@@ -1183,6 +1215,7 @@ class mxCellRenderer {
         state.style[mxConstants.STYLE_OVERFLOW] !== 'width')
     ) {
       const s = state.view.scale;
+      // @ts-ignore
       const spacing = state.text.getSpacing();
       bounds.x += spacing.x * s;
       bounds.y += spacing.y * s;
@@ -1207,6 +1240,7 @@ class mxCellRenderer {
         0,
         bounds.width -
           (hpos === mxConstants.ALIGN_CENTER && lw == null
+              // @ts-ignore
             ? state.text.spacingLeft * s + state.text.spacingRight * s
             : 0)
       );
@@ -1214,17 +1248,20 @@ class mxCellRenderer {
         0,
         bounds.height -
           (vpos === mxConstants.ALIGN_MIDDLE
+              // @ts-ignore
             ? state.text.spacingTop * s + state.text.spacingBottom * s
             : 0)
       );
     }
 
+    // @ts-ignore
     const theta = state.text.getTextRotation();
 
     // Only needed if rotated around another center
     if (
       theta !== 0 &&
       state != null &&
+        // @ts-ignore
       state.view.graph.model.isVertex(state.cell)
     ) {
       const cx = state.getCenterX();
@@ -1254,7 +1291,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> whose overlays should be redrawn.
    */
-  redrawCellOverlays(state, forced) {
+  redrawCellOverlays(state: mxCellState, forced: boolean=false) {
     this.createCellOverlays(state);
 
     if (state.overlays != null) {
@@ -1266,7 +1303,8 @@ class mxCellRenderer {
       const cos = Math.cos(rad);
       const sin = Math.sin(rad);
 
-      state.overlays.visit((id, shape) => {
+      state.overlays.visit((id: string, shape: mxShape) => {
+        // @ts-ignore
         const bounds = shape.overlay.getBounds(state);
 
         if (!state.view.graph.getModel().isEdge(state.cell)) {
@@ -1311,19 +1349,22 @@ class mxCellRenderer {
    *
    * state - <mxCellState> whose control should be redrawn.
    */
-  redrawControl(state, forced) {
+  redrawControl(state: mxCellState, forced: boolean=false) {
     const image = state.view.graph.getFoldingImage(state);
 
     if (state.control != null && image != null) {
       const bounds = this.getControlBounds(state, image.width, image.height);
+
       const r = this.legacyControlPosition
         ? mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0)
+          // @ts-ignore
         : state.shape.getTextRotation();
       const s = state.view.scale;
 
       if (
         forced ||
         state.control.scale !== s ||
+          // @ts-ignore
         !state.control.bounds.equals(bounds) ||
         state.control.rotation !== r
       ) {
@@ -1342,7 +1383,7 @@ class mxCellRenderer {
    * Returns the bounds to be used to draw the control (folding icon) of the
    * given state.
    */
-  getControlBounds(state, w, h) {
+  getControlBounds(state: mxCellState, w: number, h: number): mxRectangle | null {
     if (state.control != null) {
       const s = state.view.scale;
       let cx = state.getCenterX();
@@ -1411,60 +1452,77 @@ class mxCellRenderer {
    * htmlNode - Node in the graph container after which the shapes should be inserted that
    * will not go into the <drawPane> (eg. HTML labels without foreignObjects).
    */
-  insertStateAfter(state, node, htmlNode) {
+  insertStateAfter(state: mxCellState,
+                   node: HTMLElement | SVGElement | null,
+                   htmlNode: HTMLElement | SVGElement | null) {
+
     const shapes = this.getShapesForState(state);
 
     for (let i = 0; i < shapes.length; i += 1) {
+      // @ts-ignore
       if (shapes[i] != null && shapes[i].node != null) {
         const html =
+            // @ts-ignore
           shapes[i].node.parentNode !== state.view.getDrawPane() &&
+            // @ts-ignore
           shapes[i].node.parentNode !== state.view.getOverlayPane();
         const temp = html ? htmlNode : node;
 
+        // @ts-ignore
         if (temp != null && temp.nextSibling !== shapes[i].node) {
           if (temp.nextSibling == null) {
+            // @ts-ignore
             temp.parentNode.appendChild(shapes[i].node);
           } else {
+            // @ts-ignore
             temp.parentNode.insertBefore(shapes[i].node, temp.nextSibling);
           }
         } else if (temp == null) {
           // Special case: First HTML node should be first sibling after canvas
-          if (shapes[i].node.parentNode === state.view.graph.container) {
+          // @ts-ignore
+          const shapeNode: HTMLElement = <HTMLElement>shapes[i].node;
+
+          if (shapeNode.parentNode === state.view.graph.container) {
             let { canvas } = state.view;
 
             while (
               canvas != null &&
               canvas.parentNode !== state.view.graph.container
             ) {
+              // @ts-ignore
               canvas = canvas.parentNode;
             }
 
             if (canvas != null && canvas.nextSibling != null) {
-              if (canvas.nextSibling !== shapes[i].node) {
+              if (canvas.nextSibling !== shapeNode) {
-                shapes[i].node.parentNode.insertBefore(
+                // @ts-ignore
-                  shapes[i].node,
+                shapeNode.parentNode.insertBefore(
+                    shapeNode,
                   canvas.nextSibling
                 );
               }
             } else {
-              shapes[i].node.parentNode.appendChild(shapes[i].node);
+              // @ts-ignore
+              shapeNode.parentNode.appendChild(shapeNode);
             }
           } else if (
-            shapes[i].node.parentNode != null &&
+              shapeNode.parentNode != null &&
-            shapes[i].node.parentNode.firstChild != null &&
+              shapeNode.parentNode.firstChild != null &&
-            shapes[i].node.parentNode.firstChild != shapes[i].node
+              shapeNode.parentNode.firstChild != shapeNode
           ) {
             // Inserts the node as the first child of the parent to implement the order
-            shapes[i].node.parentNode.insertBefore(
+            shapeNode.parentNode.insertBefore(
-              shapes[i].node,
+                shapeNode,
-              shapes[i].node.parentNode.firstChild
+                shapeNode.parentNode.firstChild
             );
           }
         }
 
         if (html) {
+          // @ts-ignore
           htmlNode = shapes[i].node;
         } else {
+          // @ts-ignore
           node = shapes[i].node;
         }
       }
@@ -1567,6 +1625,7 @@ class mxCellRenderer {
         this.installListeners(state);
 
         // Forces a refresh of the handler if one exists
+        // @ts-ignore
         state.view.graph.selectionCellsHandler.updateHandler(state);
       }
     } else if (
@@ -1578,6 +1637,7 @@ class mxCellRenderer {
       state.shape.resetStyles();
       this.configureShape(state);
       // LATER: Ignore update for realtime to fix reset of current gesture
+      // @ts-ignore
       state.view.graph.selectionCellsHandler.updateHandler(state);
       force = true;
     }
@@ -1586,7 +1646,7 @@ class mxCellRenderer {
     if (
       state.shape != null &&
       state.shape.indicatorShape !=
-        this.getShape(state.view.graph.getIndicatorShape(state))
+        this.getShape(<string>state.view.graph.getIndicatorShape(state))
     ) {
       if (state.shape.indicator != null) {
         state.shape.indicator.destroy();
@@ -1680,7 +1740,7 @@ class mxCellRenderer {
       }
 
       if (state.overlays != null) {
-        state.overlays.visit((id, shape) => {
+        state.overlays.visit((id: string, shape: mxShape) => {
           shape.destroy();
         });
 
@@ -1699,14 +1759,20 @@ class mxCellRenderer {
 }
 
 // Adds default shapes into the default shapes array
+// @ts-ignore
 mxCellRenderer.registerShape(mxConstants.SHAPE_RECTANGLE, mxRectangleShape);
+// @ts-ignore
 mxCellRenderer.registerShape(mxConstants.SHAPE_ELLIPSE, mxEllipse);
+// @ts-ignore
 mxCellRenderer.registerShape(mxConstants.SHAPE_RHOMBUS, mxRhombus);
+// @ts-ignore
 mxCellRenderer.registerShape(mxConstants.SHAPE_CYLINDER, mxCylinder);
 mxCellRenderer.registerShape(mxConstants.SHAPE_CONNECTOR, mxConnector);
+// @ts-ignore
 mxCellRenderer.registerShape(mxConstants.SHAPE_ACTOR, mxActor);
 mxCellRenderer.registerShape(mxConstants.SHAPE_TRIANGLE, mxTriangle);
 mxCellRenderer.registerShape(mxConstants.SHAPE_HEXAGON, mxHexagon);
+// @ts-ignore
 mxCellRenderer.registerShape(mxConstants.SHAPE_CLOUD, mxCloud);
 mxCellRenderer.registerShape(mxConstants.SHAPE_LINE, mxLine);
 mxCellRenderer.registerShape(mxConstants.SHAPE_ARROW, mxArrow);
@@ -1714,8 +1780,10 @@ mxCellRenderer.registerShape(
   mxConstants.SHAPE_ARROW_CONNECTOR,
   mxArrowConnector
 );
+// @ts-ignore
 mxCellRenderer.registerShape(mxConstants.SHAPE_DOUBLE_ELLIPSE, mxDoubleEllipse);
 mxCellRenderer.registerShape(mxConstants.SHAPE_SWIMLANE, mxSwimlane);
+// @ts-ignore
 mxCellRenderer.registerShape(mxConstants.SHAPE_IMAGE, mxImageShape);
 mxCellRenderer.registerShape(mxConstants.SHAPE_LABEL, mxLabel);
 

src/mxgraph/view/connection/mxConnectionConstraint.ts

@@ -61,11 +61,13 @@ class mxConnectionConstraint {
    * perimeter - Optional boolean that specifies if the fixed point should be
    * projected onto the perimeter of the terminal. Default is true.
    */
-  constructor(point: mxPoint | null=null,
+  constructor(
+    point: mxPoint | null = null,
     perimeter: boolean = true,
     name: string | null = null,
     dx: number | null = null,
-              dy: number | null=null) {
+    dy: number | null = null
+  ) {
     this.point = point;
     this.perimeter = perimeter != null ? perimeter : true;
     this.name = name;

src/mxgraph/view/graph/mxGraph.ts

@@ -9094,6 +9094,7 @@ class mxGraph extends mxEventSource {
             // @ts-ignore
             (node === shape.node || node.parentNode === shape.node)
           ) {
+            // @ts-ignore
               tip = shape.overlay.toString();
           }
         });
@@ -9423,7 +9424,7 @@ class mxGraph extends mxEventSource {
    *
    * state - <mxCellState> whose indicator shape should be returned.
    */
-  getIndicatorShape(state: mxCellState): mxShape | null {
+  getIndicatorShape(state: mxCellState): string | null {
     return state != null && state.style != null
       ? state.style[mxConstants.STYLE_INDICATOR_SHAPE]
       : null;
@@ -11090,7 +11091,7 @@ class mxGraph extends mxEventSource {
    *
    * cell - <mxCell> for which the ancestor swimlane should be returned.
    */
-  getSwimlane(cell: mxCell): mxCell | null {
+  getSwimlane(cell: mxCell | null=null): mxCell | null {
     while (cell != null && !this.isSwimlane(cell)) {
       cell = <mxCell>this.getModel().getParent(cell);
     }

src/mxgraph/view/graph/mxGraphView.ts

@@ -31,7 +31,63 @@ import mxGeometry from "../../util/datatypes/mxGeometry";
 import mxConnectionConstraint from "../connection/mxConnectionConstraint";
 import mxPopupMenuHandler from "../../handler/mxPopupMenuHandler";
 
+/**
+ * Class: mxGraphView
+ *
+ * Extends <mxEventSource> to implement a view for a graph. This class is in
+ * charge of computing the absolute coordinates for the relative child
+ * geometries, the points for perimeters and edge styles and keeping them
+ * cached in <mxCellStates> for faster retrieval. The states are updated
+ * whenever the model or the view state (translate, scale) changes. The scale
+ * and translate are honoured in the bounds.
+ *
+ * Event: mxEvent.UNDO
+ *
+ * Fires after the root was changed in <setCurrentRoot>. The <code>edit</code>
+ * property contains the <mxUndoableEdit> which contains the
+ * <mxCurrentRootChange>.
+ *
+ * Event: mxEvent.SCALE_AND_TRANSLATE
+ *
+ * Fires after the scale and translate have been changed in <scaleAndTranslate>.
+ * The <code>scale</code>, <code>previousScale</code>, <code>translate</code>
+ * and <code>previousTranslate</code> properties contain the new and previous
+ * scale and translate, respectively.
+ *
+ * Event: mxEvent.SCALE
+ *
+ * Fires after the scale was changed in <setScale>. The <code>scale</code> and
+ * <code>previousScale</code> properties contain the new and previous scale.
+ *
+ * Event: mxEvent.TRANSLATE
+ *
+ * Fires after the translate was changed in <setTranslate>. The
+ * <code>translate</code> and <code>previousTranslate</code> properties contain
+ * the new and previous value for translate.
+ *
+ * Event: mxEvent.DOWN and mxEvent.UP
+ *
+ * Fire if the current root is changed by executing an <mxCurrentRootChange>.
+ * The event name depends on the location of the root in the cell hierarchy
+ * with respect to the current root. The <code>root</code> and
+ * <code>previous</code> properties contain the new and previous root,
+ * respectively.
+ *
+ * Constructor: mxGraphView
+ *
+ * Constructs a new view for the given <mxGraph>.
+ *
+ * Parameters:
+ *
+ * graph - Reference to the enclosing <mxGraph>.
+ */
 class mxGraphView extends mxEventSource {
+  constructor(graph: mxGraph) {
+    super();
+
+    this.graph = graph;
+  }
+
   // TODO: Document me!
   backgroundImage: mxImageShape | null=null;
 
@@ -138,89 +194,31 @@ class mxGraphView extends mxEventSource {
    *
    * During validation, this contains the last DOM node that was processed.
    */
-  lastNode: HTMLElement | null = null;
+  lastNode: HTMLElement | SVGElement | null = null;
 
   /**
    * Variable: lastHtmlNode
    *
    * During validation, this contains the last HTML DOM node that was processed.
    */
-  lastHtmlNode: HTMLElement | null = null;
+  lastHtmlNode: HTMLElement | SVGElement | null = null;
 
   /**
    * Variable: lastForegroundNode
    *
    * During validation, this contains the last edge's DOM node that was processed.
    */
-  lastForegroundNode: HTMLElement | null = null;
+  lastForegroundNode: HTMLElement | SVGElement | null = null;
 
   /**
    * Variable: lastForegroundHtmlNode
    *
    * During validation, this contains the last edge HTML DOM node that was processed.
    */
-  lastForegroundHtmlNode: HTMLElement | null = null;
+  lastForegroundHtmlNode: HTMLElement | SVGElement | null = null;
 
   /**
-   * Class: mxGraphView
+   * Function: getGraphBounds
-   *
-   * Extends <mxEventSource> to implement a view for a graph. This class is in
-   * charge of computing the absolute coordinates for the relative child
-   * geometries, the points for perimeters and edge styles and keeping them
-   * cached in <mxCellStates> for faster retrieval. The states are updated
-   * whenever the model or the view state (translate, scale) changes. The scale
-   * and translate are honoured in the bounds.
-   *
-   * Event: mxEvent.UNDO
-   *
-   * Fires after the root was changed in <setCurrentRoot>. The <code>edit</code>
-   * property contains the <mxUndoableEdit> which contains the
-   * <mxCurrentRootChange>.
-   *
-   * Event: mxEvent.SCALE_AND_TRANSLATE
-   *
-   * Fires after the scale and translate have been changed in <scaleAndTranslate>.
-   * The <code>scale</code>, <code>previousScale</code>, <code>translate</code>
-   * and <code>previousTranslate</code> properties contain the new and previous
-   * scale and translate, respectively.
-   *
-   * Event: mxEvent.SCALE
-   *
-   * Fires after the scale was changed in <setScale>. The <code>scale</code> and
-   * <code>previousScale</code> properties contain the new and previous scale.
-   *
-   * Event: mxEvent.TRANSLATE
-   *
-   * Fires after the translate was changed in <setTranslate>. The
-   * <code>translate</code> and <code>previousTranslate</code> properties contain
-   * the new and previous value for translate.
-   *
-   * Event: mxEvent.DOWN and mxEvent.UP
-   *
-   * Fire if the current root is changed by executing an <mxCurrentRootChange>.
-   * The event name depends on the location of the root in the cell hierarchy
-   * with respect to the current root. The <code>root</code> and
-   * <code>previous</code> properties contain the new and previous root,
-   * respectively.
-   *
-   * Constructor: mxGraphView
-   *
-   * Constructs a new view for the given <mxGraph>.
-   *
-   * Parameters:
-   *
-   * graph - Reference to the enclosing <mxGraph>.
-   */
-  constructor(graph: mxGraph) {
-    super();
-
-    this.graph = graph;
-  }
-
-  // Backwards compatibility getters/setters
-
-  /**
-   * Function: get graphBounds
    *
    * Returns the <mxRectangle> that caches the scales and translated bounds of the current view.
    */
@@ -238,7 +236,7 @@ class mxGraphView extends mxEventSource {
   }
 
   /**
-   * Function: get scale
+   * Function: getScale
    *
    * Returns the <scale>. Default is 1 (100%).
    */
@@ -663,11 +661,6 @@ class mxGraphView extends mxEventSource {
     mxLog.leave('mxGraphView.validate', t0);
   }
 
-  // TODO: Document me!!
-  get emptyBounds() {
-    return this.getEmptyBounds();
-  }
-
   /**
    * Function: getEmptyBounds
    *
@@ -858,11 +851,6 @@ class mxGraphView extends mxEventSource {
     }
   }
 
-  // TODO: Document me!!
-  get backgroundPageBounds(): mxRectangle {
-    return this.getBackgroundPageBounds();
-  }
-
   /**
    * Function: getBackgroundPageBounds
    *

src/mxgraph/view/graph/mxOutline.ts

@@ -602,7 +602,8 @@ class mxOutline {
           : null;
       this.zoom =
         me.isSource(this.sizer) ||
-        (hit != null && mxUtils.intersects(shape.bounds, hit));
+          // @ts-ignore
+        (hit != null && mxUtils.intersects(this.sizer.bounds, hit));
       this.startX = me.getX();
       this.startY = me.getY();
       this.active = true;

src/pages/PageTabs.js

@@ -41,7 +41,12 @@ const PageTabs = ({ curPageURL, children }) => {
       }}
     >
       <h1>mxGraph Reloaded Examples</h1>
-      <div style={{textAlign: "right"}}>See also the <a href="https://github.com/mcyph/mxgraph" style={{color: "blue"}}>GitHub repo</a></div>
+      <div style={{ textAlign: 'right' }}>
+        See also the{' '}
+        <a href="https://github.com/mcyph/mxgraph" style={{ color: 'blue' }}>
+          GitHub repo
+        </a>
+      </div>
       <ul className="pagetabs">{tabs}</ul>
       {children}
     </div>

src/pages/backgrounds/ExtendCanvas.js

@@ -84,9 +84,7 @@ class ExtendCanvas extends React.Component {
        * page count.
        */
       getPageLayout() {
-        const size = this.pageVisible
+        const size = this.pageVisible ? this.getPageSize() : scrollTileSize;
-            ? this.getPageSize()
-            : scrollTileSize;
         const bounds = this.getGraphBounds();
 
         if (bounds.width === 0 || bounds.height === 0) {
@@ -172,7 +170,7 @@ class ExtendCanvas extends React.Component {
     }
 
     // Creates the graph inside the given container
-    const graph = this.graph = new MyCustomGraph(this.el);
+    const graph = (this.graph = new MyCustomGraph(this.el));
     graph.panningHandler.ignoreCell = true;
     graph.setPanning(true);
 

src/pages/backgrounds/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Grid from './Grid';
 import Preview from '../Previews';
 import ExtendCanvas from './ExtendCanvas';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Backgrounds() {
   return (

src/pages/basic/HelloWorld.js

@@ -34,7 +34,7 @@ class HelloWorld extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     // Create a sample graph in the DOM node with the specified ID.
@@ -69,7 +69,7 @@ class HelloWorld extends React.Component {
         target: vertex2,
       });
     });
-  };
+  }
 }
 
 export default HelloWorld;

src/pages/basic/index.js

@@ -1,9 +1,15 @@
 import React from 'react';
-import HelloWorld from "./HelloWorld";
+import HelloWorld from './HelloWorld';
-import Preview from "../Previews";
+import Preview from '../Previews';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Basic() {
-  {/* <Preview sourceKey="Template" content={<Template />} /> */}
+  {
-  return <PageTabs curPageURL="/basic"><Preview sourceKey="HelloWorld" content={<HelloWorld />} /></PageTabs>;
+    /* <Preview sourceKey="Template" content={<Template />} /> */
+  }
+  return (
+    <PageTabs curPageURL="/basic">
+      <Preview sourceKey="HelloWorld" content={<HelloWorld />} />
+    </PageTabs>
+  );
 }

src/pages/connections/Anchors.js

@@ -12,8 +12,8 @@ import mxConnectionConstraint from '../../mxgraph/view/connection/mxConnectionCo
 import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
 import mxPolyline from '../../mxgraph/shape/edge/mxPolyline';
 import mxCellState from '../../mxgraph/util/datatypes/mxCellState';
-import mxGeometry from "../../mxgraph/util/datatypes/mxGeometry";
+import mxGeometry from '../../mxgraph/util/datatypes/mxGeometry';
-import mxConnectionHandler from "../../mxgraph/handler/mxConnectionHandler";
+import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
 
 class Anchors extends React.Component {
   constructor(props) {
@@ -41,7 +41,7 @@ class Anchors extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     // Disables the built-in context menu

src/pages/connections/FixedPoints.js

@@ -40,7 +40,7 @@ class FixedPoints extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     // Snaps to fixed points
@@ -259,7 +259,7 @@ class FixedPoints extends React.Component {
           return result;
       };
       */
-  };
+  }
 }
 
 export default FixedPoints;

src/pages/connections/index.js

@@ -6,7 +6,7 @@ import FixedPoints from './FixedPoints';
 import HelloPort from './HelloPort';
 import Orthogonal from './Orthogonal';
 import PortRefs from './PortRefs';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Connections() {
   return (

src/pages/dnd_copypaste/DragSource.js

@@ -35,7 +35,7 @@ class DragSource extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     class MyCustomGuide extends mxGuide {
@@ -183,7 +183,7 @@ class DragSource extends React.Component {
 
     // Restores original drag icon while outside of graph
     ds.createDragElement = mxDragSource.prototype.createDragElement;
-  };
+  }
 
   // NOTE: To enable cross-document DnD (eg. between frames),
   // the following methods need to be overridden:

src/pages/dnd_copypaste/index.js

@@ -3,7 +3,7 @@ import Preview from '../Previews';
 import Clipboard from './Clipboard';
 import DragSource from './DragSource';
 import Drop from './Drop';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _DnDCopyPaste() {
   return (

src/pages/editing/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import Preview from "../Previews";
+import Preview from '../Previews';
-import Editing from "./Editing";
+import Editing from './Editing';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Editing() {
-  return <PageTabs curPageURL="/editing"><Preview sourceKey="Editing" content={<Editing />} /></PageTabs>;
+  return (
+    <PageTabs curPageURL="/editing">
+      <Preview sourceKey="Editing" content={<Editing />} />
+    </PageTabs>
+  );
 }

src/pages/effects/Animation.js

@@ -33,7 +33,7 @@ class Animation extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     const graph = new mxGraph(this.el);
@@ -88,7 +88,7 @@ class Animation extends React.Component {
     state.shape.node
       .getElementsByTagName('path')[1]
       .setAttribute('class', 'flow');
-  };
+  }
 }
 
 export default Animation;

src/pages/effects/index.js

@@ -3,7 +3,7 @@ import Animation from './Animation';
 import Preview from '../Previews';
 import Morph from './Morph';
 import Overlays from './Overlays';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function Effects() {
   return (

src/pages/events/Boundary.js

@@ -37,7 +37,7 @@ class Boundary extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     // Disables the built-in context menu
@@ -231,7 +231,7 @@ class Boundary extends React.Component {
       v3.geometry.offset = new mxPoint(-10, -10);
       v3.geometry.relative = true;
     });
-  };
+  }
 }
 
 export default Boundary;

src/pages/events/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Boundary from './Boundary';
 import Preview from '../Previews';
-import Events from "./Events";
+import Events from './Events';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Events() {
   return (

src/pages/icons_images/Control.js

@@ -42,7 +42,7 @@ class Control extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     // Specifies the URL and size of the new control
@@ -197,7 +197,7 @@ class Control extends React.Component {
         graph.zoomOut();
       })
     );
-  };
+  }
 }
 
 export default Control;

src/pages/icons_images/FixedIcon.js

@@ -37,7 +37,7 @@ class FixedIcon extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     // Overrides the image bounds code to change the position
@@ -95,7 +95,7 @@ class FixedIcon extends React.Component {
       // Updates the display
       graph.getModel().endUpdate();
     }
-  };
+  }
 }
 
 export default FixedIcon;

src/pages/icons_images/index.js

@@ -7,7 +7,7 @@ import HoverIcons from './HoverIcons';
 import Images from './Images';
 import Indicators from './Indicators';
 import Markers from './Markers';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Backgrounds() {
   return (

src/pages/index.js

@@ -1,8 +1,8 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import styles from '../styles/Home.module.css';
-import PageTabs from "./PageTabs";
+import PageTabs from './PageTabs';
-import Basic from "./basic";
+import Basic from './basic';
 
 export default function Home() {
   return <Basic />;

src/pages/labels/index.js

@@ -5,7 +5,7 @@ import Perimeter from './Perimeter';
 import SecondLabel from './SecondLabel';
 import Wrapping from './Wrapping';
 import Labels from './Labels';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Labels() {
   return (

src/pages/layout/Constituent.js

@@ -34,7 +34,7 @@ class Constituent extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     // Disables the built-in context menu

src/pages/layout/Folding.js

@@ -36,7 +36,7 @@ class Folding extends React.Component {
         />
       </>
     );
-  };
+  }
 
   componentDidMount() {
     // Enables crisp rendering of rectangles in SVG
@@ -151,7 +151,7 @@ class Folding extends React.Component {
       // Updates the display
       graph.getModel().endUpdate();
     }
-  };
+  }
 }
 
 export default Folding;

src/pages/layout/index.js

@@ -11,7 +11,7 @@ import OrgChart from './OrgChart';
 import RadialTreeLayout from './RadialTreeLayout';
 import SwimLanes from './SwimLanes';
 import Tree from './Tree';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Layout() {
   return (

src/pages/misc/index.js

@@ -7,7 +7,7 @@ import Permissions from './Permissions';
 import Thread from './Thread';
 import Validation from './Validation';
 import Visibility from './Visibility';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Misc() {
   return (

src/pages/printing/index.js

@@ -1,8 +1,10 @@
 import React from 'react';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Printing() {
   return (
-    <PageTabs curPageURL="/printing">{/* <Preview sourceKey="PageBreaks" content={<PageBreaks />} /> */}</PageTabs>
+    <PageTabs curPageURL="/printing">
+      {/* <Preview sourceKey="PageBreaks" content={<PageBreaks />} /> */}
+    </PageTabs>
   );
 }

src/pages/shapes_stencils/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import Preview from '../Previews';
 import Shape from './Shape';
-import Stencils from "./Stencils";
+import Stencils from './Stencils';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _ShapesStencils() {
   return (

src/pages/styles/HoverStyle.js

@@ -7,7 +7,7 @@ import React from 'react';
 import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxUtils from "../../mxgraph/util/mxUtils";
+import mxUtils from '../../mxgraph/util/mxUtils';
 
 class HoverStyle extends React.Component {
   constructor(props) {

src/pages/styles/index.js

@@ -3,7 +3,7 @@ import Preview from '../Previews';
 import DynamicStyle from './DynamicStyle';
 import HoverStyle from './HoverStyle';
 import Stylesheet from './Stylesheet';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Styles() {
   return (

src/pages/toolbars/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Preview from '../Previews';
 import DynamicToolbar from './DynamicToolbar';
 import Toolbar from './Toolbar';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Toolbars() {
   return (

src/pages/windows/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import Windows from "./Windows";
+import Windows from './Windows';
-import Preview from "../Previews";
+import Preview from '../Previews';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _Windows() {
-  return <PageTabs curPageURL="/windows"><Preview sourceKey="Windows" content={<Windows />} /></PageTabs>;
+  return (
+    <PageTabs curPageURL="/windows">
+      <Preview sourceKey="Windows" content={<Windows />} />
+    </PageTabs>
+  );
 }

src/pages/xml_json/index.js

@@ -3,7 +3,7 @@ import Preview from '../Previews';
 import JsonData from './JsonData';
 import Resources from './Resources';
 import UserObject from './UserObject';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _XMLJSON() {
   return (

src/pages/zoom_offpage/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Preview from '../Previews';
 import LOD from './LOD';
 import OffPage from './OffPage';
-import PageTabs from "../PageTabs";
+import PageTabs from '../PageTabs';
 
 export default function _ZoomOffpage() {
   return (

src/public/editors/js/app.js

@@ -4,50 +4,38 @@
  * Defines the startup sequence of the application.
  */
 {
-
   /**
    * Constructs a new application (returns an mxEditor instance)
    */
-	function createEditor(config)
+  function createEditor(config) {
-	{
     let editor = null;
 
-		let hideSplash = function()
+    const hideSplash = function() {
-		{
       // Fades-out the splash screen
-			let splash = document.getElementById('splash');
+      const splash = document.getElementById('splash');
 
-			if (splash != null)
+      if (splash != null) {
-			{
+        try {
-				try
-				{
           mxEvent.release(splash);
           mxEffects.fadeOut(splash, 100, true);
-				}
+        } catch (e) {
-				catch (e)
-				{
           splash.parentNode.removeChild(splash);
         }
       }
     };
 
-		try
+    try {
-		{
+      if (!mxClient.isBrowserSupported()) {
-			if (!mxClient.isBrowserSupported())
-			{
         mxUtils.error('Browser is not supported!', 200, false);
-			}
+      } else {
-			else
-			{
         mxObjectCodec.allowEval = true;
-				let node = mxUtils.load(config).getDocumentElement();
+        const node = mxUtils.load(config).getDocumentElement();
         editor = new mxEditor(node);
         mxObjectCodec.allowEval = false;
 
         // Adds active border for panning inside the container
-				editor.graph.createPanningManager = function()
+        editor.graph.createPanningManager = function() {
-				{
+          const pm = new mxPanningManager(this);
-					let pm = new mxPanningManager(this);
           pm.border = 30;
 
           return pm;
@@ -57,10 +45,9 @@
         editor.graph.timerAutoScroll = true;
 
         // Updates the window title after opening new files
-				let title = document.title;
+        const { title } = document;
-				let funct = function(sender)
+        const funct = function(sender) {
-				{
+          document.title = `${title} - ${sender.getTitle()}`;
-					document.title = title + ' - ' + sender.getTitle();
         };
 
         editor.addListener(mxEvent.OPEN, funct);
@@ -71,22 +58,19 @@
         funct(editor);
 
         // Displays version in statusbar
-				editor.setStatus('mxGraph '+mxClient.VERSION);
+        editor.setStatus(`mxGraph ${mxClient.VERSION}`);
 
         // Shows the application
         hideSplash();
       }
-		}
+    } catch (e) {
-		catch (e)
-		{
       hideSplash();
 
       // Shows an error message if the editor cannot start
-			mxUtils.alert('Cannot start application: ' + e.message);
+      mxUtils.alert(`Cannot start application: ${e.message}`);
       throw e; // for debugging
     }
 
     return editor;
   }
-
 }

src/tsconfig.json

@@ -6,6 +6,7 @@
     "esModuleInterop": true,
     "isolatedModules": true,
     "jsx": "react-native",
+    "module": "es2020",
     "lib": ["es2020", "dom"],
     "moduleResolution": "node",
     "noEmit": true,