diff --git a/src/mxgraph/handler/mxCellHighlight.ts b/src/mxgraph/handler/mxCellHighlight.ts
index a2939a14f..b361f5205 100644
--- a/src/mxgraph/handler/mxCellHighlight.ts
+++ b/src/mxgraph/handler/mxCellHighlight.ts
@@ -6,7 +6,7 @@
 import mxConstants from '../util/mxConstants';
 import mxEvent from '../util/event/mxEvent';
 import mxRectangle from '../util/datatypes/mxRectangle';
-import mxCellState from "../view/cell/mxCellState";
+import mxCellState from "../util/datatypes/mxCellState";
 import mxGraph from "../view/graph/mxGraph";
 import mxShape from "../shape/mxShape";
 
diff --git a/src/mxgraph/handler/mxEdgeHandler.js b/src/mxgraph/handler/mxEdgeHandler.js
index c216d91eb..eee429425 100644
--- a/src/mxgraph/handler/mxEdgeHandler.js
+++ b/src/mxgraph/handler/mxEdgeHandler.js
@@ -14,7 +14,7 @@ import mxEvent from '../util/event/mxEvent';
 import mxConstraintHandler from './mxConstraintHandler';
 import mxRectangle from '../util/datatypes/mxRectangle';
 import mxClient from '../mxClient';
-import mxEdgeStyle from '../view/style/mxEdgeStyle';
+import mxEdgeStyle from '../util/datatypes/style/mxEdgeStyle';
 
 class mxEdgeHandler {
   /**
diff --git a/src/mxgraph/handler/mxElbowEdgeHandler.js b/src/mxgraph/handler/mxElbowEdgeHandler.js
index e3278cf1a..8afca3f07 100644
--- a/src/mxgraph/handler/mxElbowEdgeHandler.js
+++ b/src/mxgraph/handler/mxElbowEdgeHandler.js
@@ -7,7 +7,7 @@ import mxEdgeHandler from './mxEdgeHandler';
 import mxConstants from '../util/mxConstants';
 import mxEvent from '../util/event/mxEvent';
 import mxPoint from '../util/datatypes/mxPoint';
-import mxEdgeStyle from '../view/style/mxEdgeStyle';
+import mxEdgeStyle from '../util/datatypes/style/mxEdgeStyle';
 import mxResources from '../util/mxResources';
 import mxRectangle from '../util/datatypes/mxRectangle';
 import mxUtils from '../util/mxUtils';
diff --git a/src/mxgraph/io/mxStylesheetCodec.js b/src/mxgraph/io/mxStylesheetCodec.js
index ecfd69f1b..481aff5ab 100644
--- a/src/mxgraph/io/mxStylesheetCodec.js
+++ b/src/mxgraph/io/mxStylesheetCodec.js
@@ -4,12 +4,12 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxStylesheet from '../view/style/mxStylesheet';
+import mxStylesheet from '../util/datatypes/style/mxStylesheet';
 import mxUtils from '../util/mxUtils';
 import mxCodecRegistry from './mxCodecRegistry';
 import mxConstants from "../util/mxConstants";
 import mxLog from "../util/gui/mxLog";
-import mxStyleRegistry from "../view/style/mxStyleRegistry";
+import mxStyleRegistry from "../util/datatypes/style/mxStyleRegistry";
 import mxObjectCodec from "./mxObjectCodec";
 
 class mxStylesheetCodec extends mxObjectCodec {
diff --git a/src/mxgraph/shape/mxShape.ts b/src/mxgraph/shape/mxShape.ts
index 897f706cd..5b4c97bf1 100644
--- a/src/mxgraph/shape/mxShape.ts
+++ b/src/mxgraph/shape/mxShape.ts
@@ -10,7 +10,9 @@ import mxPoint from '../util/datatypes/mxPoint';
 import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
 import mxEvent from '../util/event/mxEvent';
 import mxClient from '../mxClient';
-import mxCellState from "../view/cell/mxCellState";
+import mxCellState from "../util/datatypes/mxCellState";
+import mxAbstractCanvas2D from '../util/canvas/mxAbstractCanvas2D';
+import mxStencil from "../shape/node/mxStencil";
 
 const toBool = i => {
   if (i === 0) return false;
@@ -37,14 +39,17 @@ class mxShape {
   endSize: number | null;
   startArrow: FIXME;
   endArrow: FIXME;
-  rotation: string;
   direction: string;
   flipH: boolean;
   flipV: boolean;
   isShadow: boolean;
   isDashed: boolean;
   isRounded: boolean;
-  glass: number;
+  rotation: number;
+  cursor: string;
+  verticalTextRotation: number;
+  oldGradients: any[] | null;
+  glass: boolean;
 
   /**
    * Variable: dialect
@@ -94,7 +99,7 @@ class mxShape {
    *
    * Holds the outermost DOM node that represents this shape.
    */
-  node: HTMLElement | null = null;
+  node: Element | null = null;
 
   /**
    * Variable: state
@@ -277,7 +282,7 @@ class mxShape {
    *
    * Sets the styles to their default values.
    */
-  initStyles(container) {
+  initStyles(container: HTMLElement | null=null) {
     this.strokewidth = 1;
     this.rotation = 0;
     this.opacity = 100;
@@ -302,7 +307,7 @@ class mxShape {
    *
    * Returns 0, or 0.5 if <strokewidth> % 2 == 1.
    */
-  getSvgScreenOffset() {
+  getSvgScreenOffset(): number {
     const sw =
       this.stencil && this.stencil.strokewidth !== 'inherit'
         ? Number(this.stencil.strokewidth)
@@ -325,16 +330,8 @@ class mxShape {
    *
    * container - DOM node that will contain the shape.
    */
-  create(container) {
-    let node = null;
-
-    if (container != null && container.ownerSVGElement != null) {
-      node = this.createSvg(container);
-    } else {
-      node = this.createHtml(container);
-    }
-
-    return node;
+  create(container: Element): Element {
+    return this.createSvg(container);
   }
 
   /**
@@ -342,31 +339,17 @@ class mxShape {
    *
    * Creates and returns the SVG node(s) to represent this shape.
    */
-  createSvg() {
+  createSvg(container: Element): Element {
     return document.createElementNS(mxConstants.NS_SVG, 'g');
   }
 
-  /**
-   * Function: createHtml
-   *
-   * Creates and returns the HTML DOM node(s) to represent
-   * this shape. This implementation falls back to <createVml>
-   * so that the HTML creation is optional.
-   */
-  createHtml() {
-    const node = document.createElement('div');
-    node.style.position = 'absolute';
-
-    return node;
-  }
-
   /**
    * Function: reconfigure
    *
    * Reconfigures this shape. This will update the colors etc in
    * addition to the bounds or points.
    */
-  reconfigure() {
+  reconfigure(): void {
     this.redraw();
   }
 
@@ -375,7 +358,7 @@ class mxShape {
    *
    * Creates and returns the SVG node(s) to represent this shape.
    */
-  redraw() {
+  redraw(): void {
     this.updateBoundsFromPoints();
 
     if (this.visible && this.checkBounds()) {
@@ -394,16 +377,9 @@ class mxShape {
    *
    * Removes all child nodes and resets all CSS.
    */
-  clear() {
-    if (this.node.ownerSVGElement != null) {
-      while (this.node.lastChild != null) {
-        this.node.removeChild(this.node.lastChild);
-      }
-    } else {
-      this.node.style.cssText = `position:absolute;${
-        this.cursor != null ? `cursor:${this.cursor};` : ''
-      }`;
-      this.node.innerHTML = '';
+  clear(): void {
+    while (this.node.lastChild != null) {
+      this.node.removeChild(this.node.lastChild);
     }
   }
 
@@ -412,7 +388,7 @@ class mxShape {
    *
    * Updates the bounds based on the points.
    */
-  updateBoundsFromPoints() {
+  updateBoundsFromPoints(): void {
     const pts = this.points;
 
     if (pts != null && pts.length > 0 && pts[0] != null) {
@@ -440,7 +416,7 @@ class mxShape {
    * given scaled and translated bounds of the shape. This method should not
    * change the rectangle in-place. This implementation returns the given rect.
    */
-  getLabelBounds(rect) {
+  getLabelBounds(rect: mxRectangle): mxRectangle {
     const d = mxUtils.getValue(
       this.style,
       mxConstants.STYLE_DIRECTION,
@@ -487,14 +463,13 @@ class mxShape {
         [flipH, flipV] = [flipV, flipH];
       }
 
-      const r = mxUtils.getDirectedBounds(
-        rect,
-        labelMargins,
-        this.style,
-        flipH,
-        flipV
+      return mxUtils.getDirectedBounds(
+          rect,
+          labelMargins,
+          this.style,
+          flipH,
+          flipV
       );
-      return r;
     }
     return rect;
   }
@@ -506,7 +481,7 @@ class mxShape {
    * computing the label bounds as an <mxRectangle>, where the bottom and right
    * margin are defined in the width and height of the rectangle, respectively.
    */
-  getLabelMargins(rect) {
+  getLabelMargins(rect: mxRectangle | null=null): mxRectangle | null {
     return null;
   }
 
@@ -515,7 +490,7 @@ class mxShape {
    *
    * Returns true if the bounds are not null and all of its variables are numeric.
    */
-  checkBounds() {
+  checkBounds(): boolean {
     return (
       !Number.isNaN(this.scale) &&
       Number.isFinite(this.scale) &&
@@ -535,7 +510,7 @@ class mxShape {
    *
    * Updates the SVG shape.
    */
-  redrawShape() {
+  redrawShape(): void {
     const canvas = this.createCanvas();
 
     if (canvas != null) {
@@ -560,13 +535,8 @@ class mxShape {
    *
    * Creates a new canvas for drawing this shape. May return null.
    */
-  createCanvas() {
-    let canvas = null;
-
-    // LATER: Check if reusing existing DOM nodes improves performance
-    if (this.node.ownerSVGElement != null) {
-      canvas = this.createSvgCanvas();
-    }
+  createCanvas(): mxSvgCanvas2D {
+    let canvas = this.createSvgCanvas();
 
     if (canvas != null && this.outline) {
       canvas.setStrokeWidth(this.strokewidth);
@@ -591,7 +561,7 @@ class mxShape {
    *
    * Creates and returns an <mxSvgCanvas2D> for rendering this shape.
    */
-  createSvgCanvas() {
+  createSvgCanvas(): mxSvgCanvas2D {
     const canvas = new mxSvgCanvas2D(this.node, false);
     canvas.strokeTolerance = this.pointerEvents ? this.svgStrokeTolerance : 0;
     canvas.pointerEventsValue = this.svgPointerEvents;
@@ -611,7 +581,6 @@ class mxShape {
         return Math.round(parseFloat(value));
       };
     }
-
     return canvas;
   }
 
@@ -621,7 +590,7 @@ class mxShape {
    * Destroys the given canvas which was used for drawing. This implementation
    * increments the reference counts on all shared gradients used in the canvas.
    */
-  destroyCanvas(canvas) {
+  destroyCanvas(canvas: mxSvgCanvas2D): void {
     // Manages reference counts
     if (canvas instanceof mxSvgCanvas2D) {
       // Increments ref counts
@@ -643,21 +612,21 @@ class mxShape {
    *
    * Invoked before paint is called.
    */
-  beforePaint(c) {}
+  beforePaint(c: mxSvgCanvas2D): void {}
 
   /**
    * Function: afterPaint
    *
    * Invokes after paint was called.
    */
-  afterPaint(c) {}
+  afterPaint(c: mxSvgCanvas2D): void {}
 
   /**
    * Function: paint
    *
    * Generic rendering code.
    */
-  paint(c) {
+  paint(c: mxSvgCanvas2D): void {
     let strokeDrawn = false;
 
     if (c != null && this.outline) {
@@ -921,11 +890,11 @@ class mxShape {
       );
     } else {
       const f = parseFloat(
-        mxUtils.getValue(
-          this.style,
-          mxConstants.STYLE_ARCSIZE,
-          mxConstants.RECTANGLE_ROUNDING_FACTOR * 100
-        ) / 100
+        String(mxUtils.getValue(
+            this.style,
+            mxConstants.STYLE_ARCSIZE,
+            mxConstants.RECTANGLE_ROUNDING_FACTOR * 100
+        ) / 100)
       );
       r = Math.min(w * f, h * f);
     }
@@ -1495,7 +1464,6 @@ class mxShape {
       if (this.node.parentNode != null) {
         this.node.parentNode.removeChild(this.node);
       }
-
       this.node = null;
     }
 
diff --git a/src/mxgraph/shape/mxText.js b/src/mxgraph/shape/mxText.js
index 5ec8426de..2b9283239 100644
--- a/src/mxgraph/shape/mxText.js
+++ b/src/mxgraph/shape/mxText.js
@@ -11,7 +11,7 @@ import mxPoint from '../util/datatypes/mxPoint';
 import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
 import mxShape from './mxShape';
 import mxRectangle from '../util/datatypes/mxRectangle';
-import mxCellState from "../view/cell/mxCellState";
+import mxCellState from "../util/datatypes/mxCellState";
 
 class mxText extends mxShape {
   /**
diff --git a/src/mxgraph/shape/node/mxImageShape.ts b/src/mxgraph/shape/node/mxImageShape.ts
index e9080708c..ec2b5dd5b 100644
--- a/src/mxgraph/shape/node/mxImageShape.ts
+++ b/src/mxgraph/shape/node/mxImageShape.ts
@@ -9,6 +9,8 @@ import mxConstants from '../../util/mxConstants';
 import mxRectangleShape from './mxRectangleShape';
 import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
 import mxRectangle from '../../util/datatypes/mxRectangle';
+import mxCell from "../../view/cell/mxCell";
+import mxCellState from "../../util/datatypes/mxCellState";
 
 class mxImageShape extends mxRectangleShape {
   // TODO: Document me!!
@@ -41,29 +43,27 @@ class mxImageShape extends mxRectangleShape {
    * fill - String that defines the fill color. This is stored in <fill>.
    * stroke - String that defines the stroke color. This is stored in <stroke>.
    * strokewidth - Optional integer that defines the stroke width. Default is
-   * 0. This is stored in <strokewidth>.
+   * 1. This is stored in <strokewidth>.
    */
   constructor(bounds: mxRectangle,
               image: string,
-              fill: string,
-              stroke: string,
-              strokewidth: number=0) {
+              fill: string='#FFFFFF',
+              stroke: string='#000000',
+              strokewidth: number=1) {
 
     super();
     this.bounds = bounds;
     this.image = image;
     this.fill = fill;
     this.stroke = stroke;
-    this.strokewidth = strokewidth != null ? strokewidth : 1;
+    this.strokewidth = strokewidth;
     this.shadow = false;
   }
 
   /**
    * Function: getSvgScreenOffset
-   *
-   * Disables offset in IE9 for crisper image output.
    */
-  getSvgScreenOffset() {
+  getSvgScreenOffset(): number {
     return 0;
   }
 
@@ -84,7 +84,7 @@ class mxImageShape extends mxRectangleShape {
    *
    * state - <mxCellState> of the corresponding cell.
    */
-  apply(state) {
+  apply(state: mxCellState) {
     super.apply(state);
 
     this.fill = null;
@@ -109,7 +109,7 @@ class mxImageShape extends mxRectangleShape {
    * Returns true if HTML is allowed for this shape. This implementation always
    * returns false.
    */
-  isHtmlAllowed() {
+  isHtmlAllowed(): boolean {
     return !this.preserveImageAspect;
   }
 
@@ -120,7 +120,7 @@ class mxImageShape extends mxRectangleShape {
    * this shape. This implementation falls back to <createVml>
    * so that the HTML creation is optional.
    */
-  createHtml() {
+  createHtml(): HTMLElement {
     const node = document.createElement('div');
     node.style.position = 'absolute';
     return node;
@@ -135,7 +135,7 @@ class mxImageShape extends mxRectangleShape {
               x: number,
               y: number,
               w: number,
-              h: number) {
+              h: number): boolean {
     return false;
   }
 
diff --git a/src/mxgraph/shape/node/mxRectangleShape.ts b/src/mxgraph/shape/node/mxRectangleShape.ts
index 96646095f..da5ee94cf 100644
--- a/src/mxgraph/shape/node/mxRectangleShape.ts
+++ b/src/mxgraph/shape/node/mxRectangleShape.ts
@@ -32,14 +32,14 @@ class mxRectangleShape extends mxShape {
    * 1. This is stored in <strokewidth>.
    */
   constructor(bounds: mxRectangle,
-              fill: string,
-              stroke: string,
-              strokewidth: number) {
+              fill: string='#FFFFFF',
+              stroke: string='#000000',
+              strokewidth: number=1) {
     super();
     this.bounds = bounds;
     this.fill = fill;
     this.stroke = stroke;
-    this.strokewidth = strokewidth != null ? strokewidth : 1;
+    this.strokewidth = strokewidth;
   }
 
   /**
diff --git a/src/mxgraph/view/cell/mxCellState.ts b/src/mxgraph/util/datatypes/mxCellState.ts
similarity index 96%
rename from src/mxgraph/view/cell/mxCellState.ts
rename to src/mxgraph/util/datatypes/mxCellState.ts
index 420bb6f40..624272d55 100644
--- a/src/mxgraph/view/cell/mxCellState.ts
+++ b/src/mxgraph/util/datatypes/mxCellState.ts
@@ -4,11 +4,11 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxPoint from '../../util/datatypes/mxPoint';
-import mxRectangle from '../../util/datatypes/mxRectangle';
-import mxConstants from '../../util/mxConstants';
-import mxCell from "./mxCell";
-import mxGraphView from "../graph/mxGraphView";
+import mxPoint from './mxPoint';
+import mxRectangle from './mxRectangle';
+import mxConstants from '../mxConstants';
+import mxCell from "../../view/cell/mxCell";
+import mxGraphView from "../../view/graph/mxGraphView";
 import mxShape from "../../shape/mxShape";
 import mxText from "../../shape/mxText";
 
@@ -18,6 +18,11 @@ class mxCellState extends mxRectangle {
   paintBounds: mxRectangle;
   boundingBox: mxRectangle;
 
+  // Used by mxCellRenderer's createControl()
+  control: mxShape;
+  // Used by mxCellRenderer's createCellOverlays()
+  overlays: any[];
+
   /**
    * Variable: view
    *
diff --git a/src/mxgraph/view/style/mxEdgeStyle.js b/src/mxgraph/util/datatypes/style/mxEdgeStyle.js
similarity index 99%
rename from src/mxgraph/view/style/mxEdgeStyle.js
rename to src/mxgraph/util/datatypes/style/mxEdgeStyle.js
index 708d80346..b684c4fcc 100644
--- a/src/mxgraph/view/style/mxEdgeStyle.js
+++ b/src/mxgraph/util/datatypes/style/mxEdgeStyle.js
@@ -4,11 +4,11 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxUtils from '../../util/mxUtils';
-import mxPoint from '../../util/datatypes/mxPoint';
-import mxCellState from '../cell/mxCellState';
-import mxConstants from '../../util/mxConstants';
-import mxRectangle from "../../util/datatypes/mxRectangle";
+import mxUtils from '../../mxUtils';
+import mxPoint from '../mxPoint';
+import mxCellState from '../mxCellState';
+import mxConstants from '../../mxConstants';
+import mxRectangle from "../mxRectangle";
 
 const mxEdgeStyle = {
   /**
diff --git a/src/mxgraph/view/style/mxPerimeter.ts b/src/mxgraph/util/datatypes/style/mxPerimeter.ts
similarity index 98%
rename from src/mxgraph/view/style/mxPerimeter.ts
rename to src/mxgraph/util/datatypes/style/mxPerimeter.ts
index b976e88cb..a21aab396 100644
--- a/src/mxgraph/view/style/mxPerimeter.ts
+++ b/src/mxgraph/util/datatypes/style/mxPerimeter.ts
@@ -4,11 +4,11 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxUtils from '../../util/mxUtils';
-import mxPoint from '../../util/datatypes/mxPoint';
-import mxConstants from '../../util/mxConstants';
-import mxRectangle from "../../util/datatypes/mxRectangle";
-import mxCellState from "../cell/mxCellState";
+import mxUtils from '../../mxUtils';
+import mxPoint from '../mxPoint';
+import mxConstants from '../../mxConstants';
+import mxRectangle from "../mxRectangle";
+import mxCellState from "../mxCellState";
 
 const mxPerimeter = {
   /**
diff --git a/src/mxgraph/view/style/mxStyleRegistry.ts b/src/mxgraph/util/datatypes/style/mxStyleRegistry.ts
similarity index 97%
rename from src/mxgraph/view/style/mxStyleRegistry.ts
rename to src/mxgraph/util/datatypes/style/mxStyleRegistry.ts
index 44db68d41..ec50f13f0 100644
--- a/src/mxgraph/view/style/mxStyleRegistry.ts
+++ b/src/mxgraph/util/datatypes/style/mxStyleRegistry.ts
@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxConstants from '../../util/mxConstants';
+import mxConstants from '../../mxConstants';
 import mxEdgeStyle from "./mxEdgeStyle";
 import mxPerimeter from "./mxPerimeter";
 
diff --git a/src/mxgraph/view/style/mxStylesheet.js b/src/mxgraph/util/datatypes/style/mxStylesheet.js
similarity index 98%
rename from src/mxgraph/view/style/mxStylesheet.js
rename to src/mxgraph/util/datatypes/style/mxStylesheet.js
index 0ba877d2f..bd0536d45 100644
--- a/src/mxgraph/view/style/mxStylesheet.js
+++ b/src/mxgraph/util/datatypes/style/mxStylesheet.js
@@ -3,9 +3,9 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxConstants from '../../util/mxConstants';
+import mxConstants from '../../mxConstants';
 import mxPerimeter from './mxPerimeter';
-import mxUtils from '../../util/mxUtils';
+import mxUtils from '../../mxUtils';
 
 class mxStylesheet {
   /**
@@ -243,4 +243,4 @@ class mxStylesheet {
 }
 
 export default mxStylesheet;
-import("../../io/mxStylesheetCodec");
+import("../../../io/mxStylesheetCodec");
diff --git a/src/mxgraph/util/mxGuide.ts b/src/mxgraph/util/mxGuide.ts
index 87f6f9286..a83f83926 100644
--- a/src/mxgraph/util/mxGuide.ts
+++ b/src/mxgraph/util/mxGuide.ts
@@ -7,7 +7,7 @@
 import mxConstants from './mxConstants';
 import mxPoint from "./datatypes/mxPoint";
 import mxPolyline from "../shape/edge/mxPolyline";
-import mxCellState from "../view/cell/mxCellState";
+import mxCellState from "./datatypes/mxCellState";
 import mxShape from "../shape/mxShape";
 import mxRectangle from './datatypes/mxRectangle';
 import mxGraph from '../view/graph/mxGraph';
diff --git a/src/mxgraph/view/cell/mxCellEditor.ts b/src/mxgraph/view/cell/mxCellEditor.ts
index 10973e310..7018fa269 100644
--- a/src/mxgraph/view/cell/mxCellEditor.ts
+++ b/src/mxgraph/view/cell/mxCellEditor.ts
@@ -13,7 +13,7 @@ import mxText from '../../shape/mxText';
 import mxGraph from '../graph/mxGraph';
 import mxCell from './mxCell';
 import mxMouseEvent from '../../util/event/mxMouseEvent';
-import mxCellState from './mxCellState';
+import mxCellState from '../../util/datatypes/mxCellState';
 
 class mxCellEditor {
   // TODO: Document me!
diff --git a/src/mxgraph/view/cell/mxCellRenderer.ts b/src/mxgraph/view/cell/mxCellRenderer.ts
index de8f6e324..d5f9b3447 100644
--- a/src/mxgraph/view/cell/mxCellRenderer.ts
+++ b/src/mxgraph/view/cell/mxCellRenderer.ts
@@ -31,7 +31,7 @@ import mxDictionary from '../../util/datatypes/mxDictionary';
 import mxEventObject from '../../util/event/mxEventObject';
 import mxPoint from '../../util/datatypes/mxPoint';
 import mxShape from '../../shape/mxShape';
-import mxCellState from "./mxCellState";
+import mxCellState from "../../util/datatypes/mxCellState";
 import mxCell from "./mxCell";
 
 class mxCellRenderer {
@@ -49,21 +49,21 @@ class mxCellRenderer {
    *
    * Defines the default shape for edges. Default is <mxConnector>.
    */
-  defaultEdgeShape: mxShape = mxConnector;
+  defaultEdgeShape: typeof mxShape = mxConnector;
 
   /**
    * Variable: defaultVertexShape
    *
    * Defines the default shape for vertices. Default is <mxRectangleShape>.
    */
-  defaultVertexShape: mxShape = mxRectangleShape;
+  defaultVertexShape: typeof mxShape = mxRectangleShape;
 
   /**
    * Variable: defaultTextShape
    *
    * Defines the default shape for labels. Default is <mxText>.
    */
-  defaultTextShape: mxShape = mxText;
+  defaultTextShape: typeof mxShape = mxText;
 
   /**
    * Variable: legacyControlPosition
@@ -220,7 +220,7 @@ class mxCellRenderer {
    *
    * Returns the shape for the given name from <defaultShapes>.
    */
-  getShape(name: string): mxShape {
+  getShape(name: string): typeof mxShape {
     return name != null ? mxCellRenderer.defaultShapes[name] : null;
   }
 
@@ -231,13 +231,11 @@ 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)
         ? this.defaultEdgeShape
         : this.defaultVertexShape;
     }
-
     return ctor;
   }
 
diff --git a/src/mxgraph/view/cell/mxTemporaryCellStates.ts b/src/mxgraph/view/cell/mxTemporaryCellStates.ts
index 0a701c76c..62a187946 100644
--- a/src/mxgraph/view/cell/mxTemporaryCellStates.ts
+++ b/src/mxgraph/view/cell/mxTemporaryCellStates.ts
@@ -12,7 +12,7 @@ import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxDictionary from '../../util/datatypes/mxDictionary';
 import mxGraphView from "../graph/mxGraphView";
 import mxCell from "./mxCell";
-import mxCellState from "./mxCellState";
+import mxCellState from "../../util/datatypes/mxCellState";
 
 class mxTemporaryCellStates {
   oldValidateCellState: Function | null;
diff --git a/src/mxgraph/view/graph/mxGraph.ts b/src/mxgraph/view/graph/mxGraph.ts
index 0de753573..d874e0997 100644
--- a/src/mxgraph/view/graph/mxGraph.ts
+++ b/src/mxgraph/view/graph/mxGraph.ts
@@ -8,7 +8,7 @@ import mxImage from '../../util/image/mxImage';
 import mxEventObject from '../../util/event/mxEventObject';
 import mxEventSource from '../../util/event/mxEventSource';
 import mxEvent from '../../util/event/mxEvent';
-import mxEdgeStyle from '../style/mxEdgeStyle';
+import mxEdgeStyle from '../../util/datatypes/style/mxEdgeStyle';
 import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxPanningManager from '../../util/drag_pan/mxPanningManager';
 import mxTooltipHandler from '../../handler/mxTooltipHandler';
@@ -36,7 +36,7 @@ import mxResources from '../../util/mxResources';
 import mxGeometry from '../../util/datatypes/mxGeometry';
 import mxCell from '../cell/mxCell';
 import mxGraphModel from './mxGraphModel';
-import mxStylesheet from '../style/mxStylesheet';
+import mxStylesheet from '../../util/datatypes/style/mxStylesheet';
 import mxConstants from '../../util/mxConstants';
 import mxMultiplicity from "../connection/mxMultiplicity";
 
@@ -47,7 +47,7 @@ import mxStyleChange from '../../atomic_changes/mxStyleChange';
 import mxTerminalChange from '../../atomic_changes/mxTerminalChange';
 import mxValueChange from '../../atomic_changes/mxValueChange';
 import mxPolyline from '../../shape/edge/mxPolyline';
-import mxCellState from '../cell/mxCellState';
+import mxCellState from '../../util/datatypes/mxCellState';
 
 class mxGraph extends mxEventSource {
   // TODO: Document me!
@@ -12974,7 +12974,7 @@ class mxGraph extends mxEventSource {
    * cell - Optional <mxCell> associated with the gesture.
    */
   fireGestureEvent(evt: mxEventObject,
-                   cell: mxCell): void {
+                   cell: mxCell | null=null): void {
     // Resets double tap event handling when gestures take place
     this.lastTouchTime = 0;
     this.fireEvent(
diff --git a/src/mxgraph/view/graph/mxGraphView.ts b/src/mxgraph/view/graph/mxGraphView.ts
index 767705e5f..35065a12a 100644
--- a/src/mxgraph/view/graph/mxGraphView.ts
+++ b/src/mxgraph/view/graph/mxGraphView.ts
@@ -16,11 +16,11 @@ import mxEvent from '../../util/event/mxEvent';
 import mxUtils from '../../util/mxUtils';
 import mxLog from '../../util/gui/mxLog';
 import mxResources from '../../util/mxResources';
-import mxCellState from '../cell/mxCellState';
+import mxCellState from '../../util/datatypes/mxCellState';
 import mxUndoableEdit from '../../util/undo/mxUndoableEdit';
 import mxImageShape from '../../shape/node/mxImageShape';
 import mxMouseEvent from '../../util/event/mxMouseEvent';
-import mxStyleRegistry from '../style/mxStyleRegistry';
+import mxStyleRegistry from '../../util/datatypes/style/mxStyleRegistry';
 import mxGraph from "./mxGraph";
 import mxCell from '../cell/mxCell';
 import mxImage from '../../util/image/mxImage';
@@ -2497,28 +2497,28 @@ class mxGraphView extends mxEventSource {
         mxEvent.addListener(
           container,
           'gesturestart',
-          mxUtils.bind(this, evt => {
+          evt => {
             graph.fireGestureEvent(evt);
             mxEvent.consume(evt);
-          })
+          }
         );
 
         mxEvent.addListener(
           container,
           'gesturechange',
-          mxUtils.bind(this, evt => {
+          evt => {
             graph.fireGestureEvent(evt);
             mxEvent.consume(evt);
-          })
+          }
         );
 
         mxEvent.addListener(
           container,
           'gestureend',
-          mxUtils.bind(this, evt => {
+          evt => {
             graph.fireGestureEvent(evt);
             mxEvent.consume(evt);
-          })
+          }
         );
       }
 
diff --git a/src/mxgraph/view/graph/mxLayoutManager.ts b/src/mxgraph/view/graph/mxLayoutManager.ts
index c9494b35c..c31b8877f 100644
--- a/src/mxgraph/view/graph/mxLayoutManager.ts
+++ b/src/mxgraph/view/graph/mxLayoutManager.ts
@@ -325,7 +325,7 @@ class mxLayoutManager extends mxEventSource {
    * Executes all layouts which have been scheduled during the
    * changes.
    */
-  getCellsForChange(change) {
+  getCellsForChange(change: ) {
     if (change instanceof mxChildChange) {
       return this.addCellsWithLayout(
         change.child,
@@ -350,7 +350,8 @@ class mxLayoutManager extends mxEventSource {
    *
    * Adds all ancestors of the given cell that have a layout.
    */
-  addCellsWithLayout(cell, result) {
+  addCellsWithLayout(cell: mxCell,
+                     result: mxCell[]=[]): mxCell[] {
     return this.addDescendantsWithLayout(
       cell,
       this.addAncestorsWithLayout(cell, result)
@@ -377,7 +378,6 @@ class mxLayoutManager extends mxEventSource {
         this.addAncestorsWithLayout(model.getParent(cell), result);
       }
     }
-
     return result;
   }
 
@@ -387,7 +387,7 @@ class mxLayoutManager extends mxEventSource {
    * Adds all descendants of the given cell that have a layout.
    */
   addDescendantsWithLayout(cell: mxCell,
-                           result: any[]=[]): any[] {
+                           result: mxCell[]=[]): mxCell[] {
 
     if (cell != null && this.hasLayout(cell)) {
       const model = this.getGraph().getModel();
diff --git a/src/mxgraph/view/graph/mxOutline.ts b/src/mxgraph/view/graph/mxOutline.ts
index 1f89e776f..e244352bd 100644
--- a/src/mxgraph/view/graph/mxOutline.ts
+++ b/src/mxgraph/view/graph/mxOutline.ts
@@ -17,6 +17,21 @@ import mxClient from '../../mxClient';
 import mxImage from '../../util/image/mxImage';
 
 class mxOutline {
+  // TODO: Document me!!
+  sizer: mxRectangleShape;
+  selectionBorder: mxRectangleShape;
+  updateHandler: Function | null;
+  refreshHandler: Function | null;
+  panHandler: Function | null;
+  active: boolean | null;
+  bounds: mxRectangle | null;
+  zoom: number;
+  startX: number;
+  startY: number;
+  dx0: number;
+  dy0: number;
+  index: number;
+
   /**
    * Function: source
    *
@@ -302,7 +317,7 @@ class mxOutline {
    * Returns true if events are handled. This implementation
    * returns <enabled>.
    */
-  isEnabled() {
+  isEnabled(): boolean {
     return this.enabled;
   }
 
@@ -316,7 +331,7 @@ class mxOutline {
    *
    * value - Boolean that specifies the new enabled state.
    */
-  setEnabled(value) {
+  setEnabled(value: boolean): void {
     this.enabled = value;
   }
 
@@ -330,7 +345,7 @@ class mxOutline {
    *
    * value - Boolean that specifies the new enabled state.
    */
-  setZoomEnabled(value) {
+  setZoomEnabled(value: boolean): void {
     this.sizer.node.style.visibility = value ? 'visible' : 'hidden';
   }
 
@@ -339,7 +354,7 @@ class mxOutline {
    *
    * Invokes <update> and revalidate the outline. This method is deprecated.
    */
-  refresh() {
+  refresh(): void {
     this.update(true);
   }
 
@@ -348,23 +363,22 @@ class mxOutline {
    *
    * Creates the shape used as the sizer.
    */
-  createSizer() {
+  createSizer(): mxRectangleShape {
     if (this.sizerImage != null) {
       const sizer = new mxImageShape(
         new mxRectangle(0, 0, this.sizerImage.width, this.sizerImage.height),
         this.sizerImage.src
       );
       sizer.dialect = this.outline.dialect;
-
       return sizer;
     }
+
     const sizer = new mxRectangleShape(
       new mxRectangle(0, 0, this.sizerSize, this.sizerSize),
       mxConstants.OUTLINE_HANDLE_FILLCOLOR,
       mxConstants.OUTLINE_HANDLE_STROKECOLOR
     );
     sizer.dialect = this.outline.dialect;
-
     return sizer;
   }
 
@@ -405,7 +419,7 @@ class mxOutline {
    *
    * Updates the outline.
    */
-  update(revalidate) {
+  update(revalidate: boolean=false) {
     if (
       this.source != null &&
       this.source.container != null &&
@@ -562,18 +576,12 @@ class mxOutline {
       const tol = !mxEvent.isMouseEvent(me.getEvent())
         ? this.source.tolerance
         : 0;
-      const hit =
-        this.source.allowHandleBoundsCheck && tol > 0
-          ? new mxRectangle(
-              me.getGraphX() - tol,
-              me.getGraphY() - tol,
-              2 * tol,
-              2 * tol
-            )
+      const hit = tol > 0
+          ? new mxRectangle(me.getGraphX() - tol, me.getGraphY() - tol, 2 * tol, 2 * tol)
           : null;
       this.zoom =
-        me.isSource(this.sizer) ||
-        (hit != null && mxUtils.intersects(shape.bounds, hit));
+          me.isSource(this.sizer)
+          || (hit != null && mxUtils.intersects(shape.bounds, hit));
       this.startX = me.getX();
       this.startY = me.getY();
       this.active = true;