reorganize directory structure and converting to typescript

src/.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "@ijsto"
+  "extends": "@ijsto",
+  "rules": {
+    "newIsCap": false
+  }
 }

src/mxgraph/atomic_changes/mxCellAttributeChange.js

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

src/mxgraph/atomic_changes/mxChildChange.js

@@ -93,5 +93,5 @@ class mxChildChange {
 }
 
 export default mxChildChange;
-import("../../io/mxChildChangeCodec");
+import("../io/mxChildChangeCodec");
 

src/mxgraph/atomic_changes/mxCollapseChange.js

@@ -34,5 +34,5 @@ class mxCollapseChange {
 }
 
 export default mxCollapseChange;
-import("../../io/mxGenericChangeCodec");
+import("../io/mxGenericChangeCodec");
 

src/mxgraph/atomic_changes/mxGeometryChange.js

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

src/mxgraph/atomic_changes/mxRootChange.js

@@ -28,5 +28,5 @@ class mxRootChange {
 }
 
 export default mxRootChange;
-import("../../io/mxRootChangeCodec");
+import("../io/mxRootChangeCodec");
 

src/mxgraph/atomic_changes/mxStyleChange.js

@@ -31,5 +31,5 @@ class mxStyleChange {
 }
 
 export default mxStyleChange;
-import("../../io/mxGenericChangeCodec");
+import("../io/mxGenericChangeCodec");
 

src/mxgraph/atomic_changes/mxTerminalChange.js

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

src/mxgraph/atomic_changes/mxValueChange.js

@@ -31,5 +31,5 @@ class mxValueChange {
 }
 
 export default mxValueChange;
-import("../../io/mxGenericChangeCodec");
+import("../io/mxGenericChangeCodec");
 

src/mxgraph/atomic_changes/mxVisibleChange.js

@@ -34,5 +34,5 @@ class mxVisibleChange {
 }
 
 export default mxVisibleChange;
-import("../../io/mxGenericChangeCodec");
+import("../io/mxGenericChangeCodec");
 

src/mxgraph/editor/mxDefaultToolbar.js

@@ -6,7 +6,7 @@
 
 import mxClient from '../mxClient';
 import mxToolbar from '../util/gui/mxToolbar';
-import mxGeometry from '../model/mxGeometry';
+import mxGeometry from '../util/datatypes/mxGeometry';
 import mxUtils from '../util/mxUtils';
 import mxEvent from '../util/event/mxEvent';
 

src/mxgraph/editor/mxEditor.js

@@ -18,17 +18,17 @@ import mxCodec from '../io/mxCodec';
 import mxWindow from '../util/gui/mxWindow';
 import mxForm from '../util/gui/mxForm';
 import mxOutline from '../view/graph/mxOutline';
-import mxCell from '../model/mxCell';
+import mxCell from '../view/cell/mxCell';
-import mxGeometry from '../model/mxGeometry';
+import mxGeometry from '../util/datatypes/mxGeometry';
 import mxConstants from '../util/mxConstants';
 import mxGraph from '../view/graph/mxGraph';
 import mxSwimlaneManager from '../view/graph/mxSwimlaneManager';
 import mxLayoutManager from '../view/graph/mxLayoutManager';
 import mxRubberband from '../handler/mxRubberband';
 import mxEvent from '../util/event/mxEvent';
-import mxRootChange from '../model/atomic_changes/mxRootChange';
+import mxRootChange from '../atomic_changes/mxRootChange';
-import mxValueChange from '../model/atomic_changes/mxValueChange';
+import mxValueChange from '../atomic_changes/mxValueChange';
-import mxCellAttributeChange from '../model/atomic_changes/mxCellAttributeChange';
+import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange';
 import mxPrintPreview from '../view/graph/mxPrintPreview';
 import mxClipboard from '../util/storage/mxClipboard';
 import mxLog from '../util/gui/mxLog';

src/mxgraph/handler/mxCellHighlight.ts

@@ -6,29 +6,40 @@
 import mxConstants from '../util/mxConstants';
 import mxEvent from '../util/event/mxEvent';
 import mxRectangle from '../util/datatypes/mxRectangle';
+import mxCellState from "../view/cell/mxCellState";
+import mxGraph from "../view/graph/mxGraph";
+import mxShape from "../shape/mxShape";
 
 class mxCellHighlight {
+  // TODO: Document me!!
+  highlightColor: string | null;
+  strokeWidth: number | null;
+  dashed: boolean | null;
+  opacity: number | null;
+  repaintHandler: Function | null;
+  shape: mxShape | null;
+
   /**
    * Variable: keepOnTop
    *
    * Specifies if the highlights should appear on top of everything
    * else in the overlay pane. Default is false.
    */
-  keepOnTop = false;
+  keepOnTop: boolean = false;
 
   /**
    * Variable: graph
    *
    * Reference to the enclosing <mxGraph>.
    */
-  graph = null;
+  graph: mxGraph | null = null;
 
   /**
    * Variable: state
    *
    * Reference to the <mxCellState>.
    */
-  state = null;
+  state: mxCellState | null = null;
 
   /**
    * Variable: spacing
@@ -36,7 +47,7 @@ class mxCellHighlight {
    * Specifies the spacing between the highlight for vertices and the vertex.
    * Default is 2.
    */
-  spacing = 2;
+  spacing: number = 2;
 
   /**
    * Variable: resetHandler
@@ -44,7 +55,7 @@ class mxCellHighlight {
    * Holds the handler that automatically invokes reset if the highlight
    * should be hidden.
    */
-  resetHandler = null;
+  resetHandler: Function | null = null;
 
   /**
    * Class: mxCellHighlight
@@ -60,16 +71,16 @@ class mxCellHighlight {
    *
    * Constructs a cell highlight.
    */
-  constructor(graph, highlightColor, strokeWidth, dashed) {
+  constructor(graph: mxGraph | null=null,
+              highlightColor: string=mxConstants.DEFAULT_VALID_COLOR,
+              strokeWidth: number=mxConstants.HIGHLIGHT_STROKEWIDTH,
+              dashed: boolean=false) {
+
     if (graph != null) {
       this.graph = graph;
-      this.highlightColor =
+      this.highlightColor = highlightColor;
-        highlightColor != null
+      this.strokeWidth = strokeWidth;
-          ? highlightColor
+      this.dashed = dashed;
-          : mxConstants.DEFAULT_VALID_COLOR;
-      this.strokeWidth =
-        strokeWidth != null ? strokeWidth : mxConstants.HIGHLIGHT_STROKEWIDTH;
-      this.dashed = dashed != null ? dashed : false;
       this.opacity = mxConstants.HIGHLIGHT_OPACITY;
 
       // Updates the marker if the graph changes
@@ -113,7 +124,7 @@ class mxCellHighlight {
    *
    * color - String that represents the new highlight color.
    */
-  setHighlightColor(color) {
+  setHighlightColor(color: string): void {
     this.highlightColor = color;
 
     if (this.shape != null) {
@@ -126,7 +137,7 @@ class mxCellHighlight {
    *
    * Creates and returns the highlight shape for the given state.
    */
-  drawHighlight() {
+  drawHighlight(): void {
     this.shape = this.createShape();
     this.repaint();
 
@@ -146,7 +157,7 @@ class mxCellHighlight {
    *
    * Creates and returns the highlight shape for the given state.
    */
-  createShape() {
+  createShape(): mxShape {
     const shape = this.graph.cellRenderer.createShape(this.state);
 
     shape.svgStrokeTolerance = this.graph.tolerance;
@@ -175,7 +186,7 @@ class mxCellHighlight {
    *
    * Returns the stroke width.
    */
-  getStrokeWidth(state) {
+  getStrokeWidth(state: mxCellState | null=null): number {
     return this.strokeWidth;
   }
 
@@ -184,7 +195,7 @@ class mxCellHighlight {
    *
    * Updates the highlight after a change of the model or view.
    */
-  repaint() {
+  repaint(): void {
     if (this.state != null && this.shape != null) {
       this.shape.scale = this.state.view.scale;
 
@@ -220,7 +231,7 @@ class mxCellHighlight {
    *
    * Resets the state of the cell marker.
    */
-  hide() {
+  hide(): void {
     this.highlight(null);
   }
 
@@ -229,7 +240,7 @@ class mxCellHighlight {
    *
    * Marks the <markedState> and fires a <mark> event.
    */
-  highlight(state) {
+  highlight(state: mxCellState): void {
     if (this.state !== state) {
       if (this.shape != null) {
         this.shape.destroy();
@@ -237,7 +248,6 @@ class mxCellHighlight {
       }
 
       this.state = state;
-
       if (this.state != null) {
         this.drawHighlight();
       }
@@ -249,22 +259,21 @@ class mxCellHighlight {
    *
    * Returns true if this highlight is at the given position.
    */
-  isHighlightAt(x, y) {
+  isHighlightAt(x: number,
-    let hit = false;
+                y: number): boolean {
 
+    let hit = false;
     if (this.shape != null && document.elementFromPoint != null) {
-      let elt = document.elementFromPoint(x, y);
+      let elt: Node & ParentNode = document.elementFromPoint(x, y);
 
       while (elt != null) {
         if (elt === this.shape.node) {
           hit = true;
           break;
         }
-
         elt = elt.parentNode;
       }
     }
-
     return hit;
   }
 
@@ -273,7 +282,7 @@ class mxCellHighlight {
    *
    * Destroys the handler and all its resources and DOM nodes.
    */
-  destroy() {
+  destroy(): void {
     this.graph.getView().removeListener(this.resetHandler);
     this.graph.getView().removeListener(this.repaintHandler);
     this.graph.getModel().removeListener(this.repaintHandler);

src/mxgraph/handler/mxConnectionHandler.js

@@ -2,8 +2,8 @@
  * Copyright (c) 2006-2016, JGraph Ltd
  * Copyright (c) 2006-2016, Gaudenz Alder
  */
-import mxGeometry from '../model/mxGeometry';
+import mxGeometry from '../util/datatypes/mxGeometry';
-import mxCell from '../model/mxCell';
+import mxCell from '../view/cell/mxCell';
 import mxPoint from '../util/datatypes/mxPoint';
 import mxEventObject from '../util/event/mxEventObject';
 import mxEvent from '../util/event/mxEvent';

src/mxgraph/io/mxCellCodec.js

@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxCell from '../model/mxCell';
+import mxCell from '../view/cell/mxCell';
 import mxObjectCodec from './mxObjectCodec';
 import mxCodecRegistry from './mxCodecRegistry';
 import mxUtils from "../util/mxUtils";

src/mxgraph/io/mxChildChangeCodec.js

@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxChildChange from '../model/atomic_changes/mxChildChange';
+import mxChildChange from '../atomic_changes/mxChildChange';
 import mxObjectCodec from './mxObjectCodec';
 import mxCodecRegistry from './mxCodecRegistry';
 import mxUtils from '../util/mxUtils';

src/mxgraph/io/mxCodec.js

@@ -5,10 +5,10 @@
  */
 
 import mxUtils from '../util/mxUtils';
-import mxCellPath from '../model/mxCellPath';
+import mxCellPath from '../view/cell/mxCellPath';
 import mxCodecRegistry from "./mxCodecRegistry";
 import mxConstants from "../util/mxConstants";
-import mxCell from "../model/mxCell";
+import mxCell from "../view/cell/mxCell";
 import mxLog from "../util/gui/mxLog";
 
 class mxCodec {

src/mxgraph/io/mxGenericChangeCodec.js

@@ -5,12 +5,12 @@
  */
 
 import mxObjectCodec from './mxObjectCodec';
-import mxValueChange from '../model/atomic_changes/mxValueChange';
+import mxValueChange from '../atomic_changes/mxValueChange';
-import mxStyleChange from '../model/atomic_changes/mxStyleChange';
+import mxStyleChange from '../atomic_changes/mxStyleChange';
-import mxGeometryChange from '../model/atomic_changes/mxGeometryChange';
+import mxGeometryChange from '../atomic_changes/mxGeometryChange';
-import mxCollapseChange from '../model/atomic_changes/mxCollapseChange';
+import mxCollapseChange from '../atomic_changes/mxCollapseChange';
-import mxVisibleChange from '../model/atomic_changes/mxVisibleChange';
+import mxVisibleChange from '../atomic_changes/mxVisibleChange';
-import mxCellAttributeChange from '../model/atomic_changes/mxCellAttributeChange';
+import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange';
 import mxCodecRegistry from './mxCodecRegistry';
 import mxUtils from "../util/mxUtils";
 

src/mxgraph/io/mxModelCodec.js

@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxGraphModel from '../model/mxGraphModel';
+import mxGraphModel from '../view/graph/mxGraphModel';
 import mxObjectCodec from './mxObjectCodec';
 import mxCodecRegistry from './mxCodecRegistry';
 

src/mxgraph/io/mxObjectCodec.js

@@ -6,7 +6,7 @@
 
 import mxObjectIdentity from "../util/datatypes/mxObjectIdentity";
 import mxLog from "../util/gui/mxLog";
-import mxGeometry from "../model/mxGeometry";
+import mxGeometry from "../util/datatypes/mxGeometry";
 import mxPoint from "../util/datatypes/mxPoint";
 import mxConstants from "../util/mxConstants";
 import mxUtils from "../util/mxUtils";

src/mxgraph/io/mxRootChangeCodec.js

@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxRootChange from '../model/atomic_changes/mxRootChange';
+import mxRootChange from '../atomic_changes/mxRootChange';
 import mxCodecRegistry from './mxCodecRegistry';
 import mxConstants from "../util/mxConstants";
 import mxObjectCodec from "./mxObjectCodec";

src/mxgraph/io/mxTerminalChangeCodec.js

@@ -5,7 +5,7 @@
  */
 
 import mxObjectCodec from './mxObjectCodec';
-import mxTerminalChange from '../model/atomic_changes/mxTerminalChange';
+import mxTerminalChange from '../atomic_changes/mxTerminalChange';
 import mxCodecRegistry from "./mxCodecRegistry";
 
 class mxTerminalChangeCodec extends mxObjectCodec {

src/mxgraph/layout/hierarchical/model/mxSwimlaneModel.js

@@ -6,7 +6,7 @@
 import mxUtils from '../../../util/mxUtils';
 import mxGraphHierarchyNode from './mxGraphHierarchyNode';
 import mxGraphHierarchyEdge from './mxGraphHierarchyEdge';
-import mxCellPath from '../../../model/mxCellPath';
+import mxCellPath from '../../../view/cell/mxCellPath';
 
 class mxSwimlaneModel {
   /**

src/mxgraph/layout/hierarchical/stage/mxSwimlaneOrdering.js

@@ -5,7 +5,7 @@
  */
 import mxHierarchicalLayoutStage from './mxHierarchicalLayoutStage';
 import mxUtils from '../../../util/mxUtils';
-import mxCellPath from '../../../model/mxCellPath';
+import mxCellPath from '../../../view/cell/mxCellPath';
 
 class mxSwimlaneOrdering extends mxHierarchicalLayoutStage {
   /**

src/mxgraph/layout/mxCompactTreeLayout.js

@@ -7,7 +7,7 @@
 import mxDictionary from '../util/datatypes/mxDictionary';
 import mxPoint from '../util/datatypes/mxPoint';
 import mxGraphLayout from './mxGraphLayout';
-import mxCellPath from "../model/mxCellPath";
+import mxCellPath from "../view/cell/mxCellPath";
 import mxRectangle from "../util/datatypes/mxRectangle";
 import mxUtils from "../util/mxUtils";
 import WeightedCellSorter from "./WeightedCellSorter";

src/mxgraph/layout/mxGraphLayout.js

@@ -6,7 +6,7 @@
 
 import mxDictionary from '../util/datatypes/mxDictionary';
 import mxRectangle from '../util/datatypes/mxRectangle';
-import mxGeometry from '../model/mxGeometry';
+import mxGeometry from '../util/datatypes/mxGeometry';
 import mxPoint from '../util/datatypes/mxPoint';
 import mxConstants from '../util/mxConstants';
 

src/mxgraph/shape/mxShape.ts

@@ -10,6 +10,7 @@ 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";
 
 const toBool = i => {
   if (i === 0) return false;
@@ -22,69 +23,92 @@ const toBool = i => {
 };
 
 class mxShape {
+  // TODO: Document me!!
+  fill: string | null;
+  gradient: string | null;
+  gradientDirection: string | null;
+  opacity: number | null;
+  fillOpacity: number | null;
+  strokeOpacity: number | null;
+  stroke: string | null;
+  strokewidth: number | null;
+  spacing: number | null;
+  startSize: number | null;
+  endSize: number | null;
+  startArrow: FIXME;
+  endArrow: FIXME;
+  rotation: string;
+  direction: string;
+  flipH: boolean;
+  flipV: boolean;
+  isShadow: boolean;
+  isDashed: boolean;
+  isRounded: boolean;
+  glass: number;
+
   /**
    * Variable: dialect
    *
    * Holds the dialect in which the shape is to be painted.
    * This can be one of the DIALECT constants in <mxConstants>.
    */
-  dialect = null;
+  dialect: string | null = null;
 
   /**
    * Variable: scale
    *
    * Holds the scale in which the shape is being painted.
    */
-  scale = 1;
+  scale: number = 1;
 
   /**
    * Variable: antiAlias
    *
    * Rendering hint for configuring the canvas.
    */
-  antiAlias = true;
+  antiAlias: boolean = true;
 
   /**
    * Variable: minSvgStrokeWidth
    *
    * Minimum stroke width for SVG output.
    */
-  minSvgStrokeWidth = 1;
+  minSvgStrokeWidth: number = 1;
 
   /**
    * Variable: bounds
    *
    * Holds the <mxRectangle> that specifies the bounds of this shape.
    */
-  bounds = null;
+  bounds: mxRectangle | null = null;
 
   /**
    * Variable: points
    *
    * Holds the array of <mxPoints> that specify the points of this shape.
    */
-  points = null;
+  points: mxPoint[] | null = null;
 
   /**
    * Variable: node
    *
    * Holds the outermost DOM node that represents this shape.
    */
-  node = null;
+  node: HTMLElement | null = null;
 
   /**
    * Variable: state
    *
    * Optional reference to the corresponding <mxCellState>.
    */
-  state = null;
+  state: mxCellState | null = null;
 
   /**
    * Variable: style
    *
    * Optional reference to the style of the corresponding <mxCellState>.
    */
-  style = null;
+  style: FIXME = null;
 
   /**
    * Variable: boundingBox
@@ -92,14 +116,14 @@ class mxShape {
    * Contains the bounding box of the shape, that is, the smallest rectangle
    * that includes all pixels of the shape.
    */
-  boundingBox = null;
+  boundingBox: mxRectangle | null = null;
 
   /**
    * Variable: stencil
    *
    * Holds the <mxStencil> that defines the shape.
    */
-  stencil = null;
+  stencil: mxStencil | null = null;
 
   /**
    * Variable: svgStrokeTolerance
@@ -107,21 +131,21 @@ class mxShape {
    * Event-tolerance for SVG strokes (in px). Default is 8. This is only passed
    * to the canvas in <createSvgCanvas> if <pointerEvents> is true.
    */
-  svgStrokeTolerance = 8;
+  svgStrokeTolerance: number = 8;
 
   /**
    * Variable: pointerEvents
    *
    * Specifies if pointer events should be handled. Default is true.
    */
-  pointerEvents = true;
+  pointerEvents: boolean = true;
 
   /**
    * Variable: svgPointerEvents
    *
-   * Specifies if pointer events should be handled. Default is true.
+   * Specifies if pointer events should be handled. Default is 'all', meaning they will be.
    */
-  svgPointerEvents = 'all';
+  svgPointerEvents: string = 'all';
 
   /**
    * Variable: shapePointerEvents
@@ -129,7 +153,7 @@ class mxShape {
    * Specifies if pointer events outside of shape should be handled. Default
    * is false.
    */
-  shapePointerEvents = false;
+  shapePointerEvents: boolean = false;
 
   /**
    * Variable: stencilPointerEvents
@@ -137,7 +161,7 @@ class mxShape {
    * Specifies if pointer events outside of stencils should be handled. Default
    * is false. Set this to true for backwards compatibility with the 1.x branch.
    */
-  stencilPointerEvents = false;
+  stencilPointerEvents: boolean = false;
 
   /**
    * Variable: outline
@@ -147,14 +171,14 @@ class mxShape {
    * not be painted for outlines. Default is false. This should be set before
    * calling <apply>.
    */
-  outline = false;
+  outline: boolean = false;
 
   /**
    * Variable: visible
    *
    * Specifies if the shape is visible. Default is true.
    */
-  visible = true;
+  visible: boolean = true;
 
   /**
    * Variable: useSvgBoundingBox
@@ -162,7 +186,7 @@ class mxShape {
    * Allows to use the SVG bounding box in SVG. Default is false for performance
    * reasons.
    */
-  useSvgBoundingBox = true;
+  useSvgBoundingBox: boolean = true;
 
   /**
    * Class: mxShape
@@ -222,7 +246,7 @@ class mxShape {
    *
    * Constructs a new shape.
    */
-  constructor(stencil) {
+  constructor(stencil: mxStencil) {
     if (stencil !== mxConstants.DO_NOTHING) {
       this.stencil = stencil;
     }
@@ -238,7 +262,7 @@ class mxShape {
    *
    * container - DOM node that will contain the shape.
    */
-  init(container) {
+  init(container: HTMLElement | null=null) {
     if (this.node == null) {
       this.node = this.create(container);
 
@@ -357,13 +381,7 @@ class mxShape {
     if (this.visible && this.checkBounds()) {
       this.node.style.visibility = 'visible';
       this.clear();
-
+      this.redrawShape();
-      if (this.node.nodeName === 'DIV') {
-        this.redrawHtmlShape();
-      } else {
-        this.redrawShape();
-      }
-
       this.updateBoundingBox();
     } else {
       this.node.style.visibility = 'hidden';
@@ -565,7 +583,6 @@ class mxShape {
       canvas.setDashed = () => {};
       canvas.text = () => {};
     }
-
     return canvas;
   }
 
@@ -598,137 +615,6 @@ class mxShape {
     return canvas;
   }
 
-  /**
-   * Function: redrawHtml
-   *
-   * Allow optimization by replacing VML with HTML.
-   */
-  redrawHtmlShape() {
-    // LATER: Refactor methods
-    this.updateHtmlBounds(this.node);
-    this.updateHtmlFilters(this.node);
-    this.updateHtmlColors(this.node);
-  }
-
-  /**
-   * Function: updateHtmlFilters
-   *
-   * Allow optimization by replacing VML with HTML.
-   */
-  updateHtmlFilters(node) {
-    let f = '';
-
-    if (this.opacity < 100) {
-      f += `alpha(opacity=${this.opacity})`;
-    }
-
-    if (this.isShadow) {
-      // FIXME: Cannot implement shadow transparency with filter
-      f +=
-        `${'progid:DXImageTransform.Microsoft.dropShadow (' +
-          "OffX='"}${Math.round(mxConstants.SHADOW_OFFSET_X * this.scale)}', ` +
-        `OffY='${Math.round(mxConstants.SHADOW_OFFSET_Y * this.scale)}', ` +
-        `Color='${mxConstants.VML_SHADOWCOLOR}')`;
-    }
-
-    if (
-      this.fill != null &&
-      this.fill !== mxConstants.NONE &&
-      this.gradient &&
-      this.gradient !== mxConstants.NONE
-    ) {
-      let start = this.fill;
-      let end = this.gradient;
-      let type = '0';
-
-      const lookup = { east: 0, south: 1, west: 2, north: 3 };
-      let dir = this.direction != null ? lookup[this.direction] : 0;
-
-      if (this.gradientDirection != null) {
-        dir = mxUtils.mod(dir + lookup[this.gradientDirection] - 1, 4);
-      }
-
-      if (dir === 1) {
-        type = '1';
-        const tmp = start;
-        start = end;
-        end = tmp;
-      } else if (dir === 2) {
-        const tmp = start;
-        start = end;
-        end = tmp;
-      } else if (dir === 3) {
-        type = '1';
-      }
-
-      f += `${'progid:DXImageTransform.Microsoft.gradient(' +
-        "startColorStr='"}${start}', endColorStr='${end}', gradientType='${type}')`;
-    }
-
-    node.style.filter = f;
-  }
-
-  /**
-   * Function: updateHtmlColors
-   *
-   * Allow optimization by replacing VML with HTML.
-   */
-  updateHtmlColors(node) {
-    let color = this.stroke;
-
-    if (color != null && color !== mxConstants.NONE) {
-      node.style.borderColor = color;
-
-      if (this.isDashed) {
-        node.style.borderStyle = 'dashed';
-      } else if (this.strokewidth > 0) {
-        node.style.borderStyle = 'solid';
-      }
-
-      node.style.borderWidth = `${Math.max(
-        1,
-        Math.ceil(this.strokewidth * this.scale)
-      )}px`;
-    } else {
-      node.style.borderWidth = '0px';
-    }
-
-    color = this.outline ? null : this.fill;
-
-    if (color != null && color !== mxConstants.NONE) {
-      node.style.backgroundColor = color;
-      node.style.backgroundImage = 'none';
-    } else if (this.pointerEvents) {
-      node.style.backgroundColor = 'transparent';
-    } else if (document.documentMode === 8) {
-      mxUtils.addTransparentBackgroundFilter(node);
-    } else {
-      this.setTransparentBackgroundImage(node);
-    }
-  }
-
-  /**
-   * Function: updateHtmlBounds
-   *
-   * Allow optimization by replacing VML with HTML.
-   */
-  updateHtmlBounds(node) {
-    let sw =
-      document.documentMode >= 9 ? 0 : Math.ceil(this.strokewidth * this.scale);
-    node.style.borderWidth = `${Math.max(1, sw)}px`;
-    node.style.overflow = 'hidden';
-
-    node.style.left = `${Math.round(this.bounds.x - sw / 2)}px`;
-    node.style.top = `${Math.round(this.bounds.y - sw / 2)}px`;
-
-    if (document.compatMode === 'CSS1Compat') {
-      sw = -sw;
-    }
-
-    node.style.width = `${Math.round(Math.max(0, this.bounds.width + sw))}px`;
-    node.style.height = `${Math.round(Math.max(0, this.bounds.height + sw))}px`;
-  }
-
   /**
    * Function: destroyCanvas
    *
@@ -1373,13 +1259,11 @@ class mxShape {
    *
    * cursor - The cursor to be used.
    */
-  setCursor(cursor) {
+  setCursor(cursor: string | null=null) {
     if (cursor == null) {
       cursor = '';
     }
-
     this.cursor = cursor;
-
     if (this.node != null) {
       this.node.style.cursor = cursor;
     }
@@ -1390,7 +1274,7 @@ class mxShape {
    *
    * Returns the current cursor.
    */
-  getCursor() {
+  getCursor(): string {
     return this.cursor;
   }
 
@@ -1399,7 +1283,11 @@ class mxShape {
    *
    * Hook for subclassers.
    */
-  isRoundable() {
+  isRoundable(c: mxAbstractCanvas2D,
+              x: number,
+              y: number,
+              w: number,
+              h: number): boolean {
     return false;
   }
 
@@ -1457,7 +1345,6 @@ class mxShape {
    */
   createBoundingBox() {
     const bb = this.bounds.clone();
-
     if (
       (this.stencil != null &&
         (this.direction === mxConstants.DIRECTION_NORTH ||
@@ -1466,7 +1353,6 @@ class mxShape {
     ) {
       bb.rotate90();
     }
-
     return bb;
   }
 

src/mxgraph/shape/node/mxCloud.ts

@@ -4,6 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 import mxActor from '../mxActor';
+import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
 
 class mxCloud extends mxActor {
   /**
@@ -40,7 +41,12 @@ class mxCloud extends mxActor {
    *
    * Draws the path for this shape.
    */
-  redrawPath(c, x, y, w, h) {
+  redrawPath(c: mxAbstractCanvas2D,
+             x: number,
+             y: number,
+             w: number,
+             h: number) {
+
     c.moveTo(0.25 * w, 0.25 * h);
     c.curveTo(0.05 * w, 0.25 * h, 0, 0.5 * h, 0.16 * w, 0.55 * h);
     c.curveTo(0, 0.66 * h, 0.18 * w, 0.9 * h, 0.31 * w, 0.8 * h);

src/mxgraph/shape/node/mxCylinder.ts

@@ -6,6 +6,7 @@
 import mxShape from '../mxShape';
 import mxConstants from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
+import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
 
 class mxCylinder extends mxShape {
   /**
@@ -58,7 +59,11 @@ class mxCylinder extends mxShape {
    *
    * Redirects to redrawPath for subclasses to work.
    */
-  paintVertexShape(c, x, y, w, h) {
+  paintVertexShape(c: mxAbstractCanvas2D,
+                   x: number,
+                   y: number,
+                   w: number,
+                   h: number) {
     c.translate(x, y);
     c.begin();
     this.redrawPath(c, x, y, w, h, false);
@@ -90,7 +95,12 @@ class mxCylinder extends mxShape {
    *
    * Draws the path for this shape.
    */
-  redrawPath(c, x, y, w, h, isForeground) {
+  redrawPath(c: mxAbstractCanvas2D,
+             x: number,
+             y: number,
+             w: number,
+             h: number,
+             isForeground: boolean=false) {
     const dy = this.getCylinderSize(x, y, w, h);
 
     if (

src/mxgraph/shape/node/mxDoubleEllipse.ts

@@ -8,6 +8,7 @@ import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxShape from '../mxShape';
 import mxConstants from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
+import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
 
 class mxDoubleEllipse extends mxShape {
   /**
@@ -64,7 +65,12 @@ class mxDoubleEllipse extends mxShape {
    *
    * Paints the background.
    */
-  paintBackground(c, x, y, w, h) {
+  paintBackground(c: mxAbstractCanvas2D,
+                  x: number,
+                  y: number,
+                  w: number,
+                  h: number) {
+
     c.ellipse(x, y, w, h);
     c.fillAndStroke();
   }
@@ -74,7 +80,12 @@ class mxDoubleEllipse extends mxShape {
    *
    * Paints the foreground.
    */
-  paintForeground(c, x, y, w, h) {
+  paintForeground(c: mxAbstractCanvas2D,
+                  x: number,
+                  y: number,
+                  w: number,
+                  h: number) {
+
     if (!this.outline) {
       const margin = mxUtils.getValue(
         this.style,

src/mxgraph/shape/node/mxEllipse.ts

@@ -4,6 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 import mxShape from '../mxShape';
+import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
 
 class mxEllipse extends mxShape {
   /**
@@ -39,7 +40,11 @@ class mxEllipse extends mxShape {
    *
    * Paints the ellipse shape.
    */
-  paintVertexShape(c, x, y, w, h) {
+  paintVertexShape(c: mxAbstractCanvas2D,
+                   x: number,
+                   y: number,
+                   w: number,
+                   h: number) {
     c.ellipse(x, y, w, h);
     c.fillAndStroke();
   }

src/mxgraph/shape/node/mxHexagon.ts

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

src/mxgraph/shape/node/mxImageShape.ts

@@ -7,8 +7,14 @@
 import mxUtils from '../../util/mxUtils';
 import mxConstants from '../../util/mxConstants';
 import mxRectangleShape from './mxRectangleShape';
+import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
+import mxRectangle from '../../util/datatypes/mxRectangle';
 
 class mxImageShape extends mxRectangleShape {
+  // TODO: Document me!!
+  shadow: boolean;
+  image: string;
+
   /**
    * Variable: preserveImageAspect
    *
@@ -37,7 +43,12 @@ class mxImageShape extends mxRectangleShape {
    * strokewidth - Optional integer that defines the stroke width. Default is
    * 0. This is stored in <strokewidth>.
    */
-  constructor(bounds, image, fill, stroke, strokewidth) {
+  constructor(bounds: mxRectangle,
+              image: string,
+              fill: string,
+              stroke: string,
+              strokewidth: number=0) {
+
     super();
     this.bounds = bounds;
     this.image = image;
@@ -112,7 +123,6 @@ class mxImageShape extends mxRectangleShape {
   createHtml() {
     const node = document.createElement('div');
     node.style.position = 'absolute';
-
     return node;
   }
 
@@ -121,7 +131,11 @@ class mxImageShape extends mxRectangleShape {
    *
    * Disables inherited roundable support.
    */
-  isRoundable(c, x, y, w, h) {
+  isRoundable(c: mxAbstractCanvas2D,
+              x: number,
+              y: number,
+              w: number,
+              h: number) {
     return false;
   }
 
@@ -130,7 +144,11 @@ class mxImageShape extends mxRectangleShape {
    *
    * Generic background painting implementation.
    */
-  paintVertexShape(c, x, y, w, h) {
+  paintVertexShape(c: mxAbstractCanvas2D,
+                   x: number,
+                   y: number,
+                   w: number,
+                   h: number) {
     if (this.image != null) {
       const fill = mxUtils.getValue(
         this.style,

src/mxgraph/shape/node/mxRectangleShape.ts

@@ -7,6 +7,8 @@
 import mxConstants from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
 import mxShape from '../mxShape';
+import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
+import mxRectangle from '../../util/datatypes/mxRectangle';
 
 class mxRectangleShape extends mxShape {
   /**
@@ -29,7 +31,10 @@ class mxRectangleShape extends mxShape {
    * strokewidth - Optional integer that defines the stroke width. Default is
    * 1. This is stored in <strokewidth>.
    */
-  constructor(bounds, fill, stroke, strokewidth) {
+  constructor(bounds: mxRectangle,
+              fill: string,
+              stroke: string,
+              strokewidth: number) {
     super();
     this.bounds = bounds;
     this.fill = fill;
@@ -42,7 +47,7 @@ class mxRectangleShape extends mxShape {
    *
    * Returns true for non-rounded, non-rotated shapes with no glass gradient.
    */
-  isHtmlAllowed() {
+  isHtmlAllowed(): boolean {
     let events = true;
 
     if (this.style != null) {
@@ -64,7 +69,11 @@ class mxRectangleShape extends mxShape {
    *
    * Generic background painting implementation.
    */
-  paintBackground(c, x, y, w, h) {
+  paintBackground(c: mxAbstractCanvas2D,
+                  x: number,
+                  y: number,
+                  w: number,
+                  h: number): void {
     let events = true;
 
     if (this.style != null) {
@@ -124,7 +133,11 @@ class mxRectangleShape extends mxShape {
    *
    * Adds roundable support.
    */
-  isRoundable(c, x, y, w, h) {
+  isRoundable(c: mxAbstractCanvas2D,
+              x: number,
+              y: number,
+              w: number,
+              h: number): boolean {
     return true;
   }
 
@@ -133,7 +146,11 @@ class mxRectangleShape extends mxShape {
    *
    * Generic background painting implementation.
    */
-  paintForeground(c, x, y, w, h) {
+  paintForeground(c: mxAbstractCanvas2D,
+                  x: number,
+                  y: number,
+                  w: number,
+                  h: number): void {
     if (
       this.glass &&
       !this.outline &&

src/mxgraph/shape/node/mxRhombus.ts

@@ -7,6 +7,8 @@ import mxShape from '../mxShape';
 import mxPoint from '../../util/datatypes/mxPoint';
 import mxUtils from "../../util/mxUtils";
 import mxConstants from "../../util/mxConstants";
+import mxRectangle from "../../util/datatypes/mxRectangle";
+import mxAbstractCanvas2D from "../../util/canvas/mxAbstractCanvas2D";
 
 class mxRhombus extends mxShape {
   /**
@@ -29,12 +31,15 @@ class mxRhombus extends mxShape {
    * strokewidth - Optional integer that defines the stroke width. Default is
    * 1. This is stored in <strokewidth>.
    */
-  constructor(bounds, fill, stroke, strokewidth) {
+  constructor(bounds: mxRectangle,
+              fill: string,
+              stroke: string,
+              strokewidth: number=1) {
     super();
     this.bounds = bounds;
     this.fill = fill;
     this.stroke = stroke;
-    this.strokewidth = strokewidth != null ? strokewidth : 1;
+    this.strokewidth = strokewidth;
   }
 
   /**
@@ -42,7 +47,7 @@ class mxRhombus extends mxShape {
    *
    * Adds roundable support.
    */
-  isRoundable() {
+  isRoundable(): boolean {
     return true;
   }
 
@@ -51,7 +56,12 @@ class mxRhombus extends mxShape {
    *
    * Generic painting implementation.
    */
-  paintVertexShape(c, x, y, w, h) {
+  paintVertexShape(c: mxAbstractCanvas2D,
+                   x: number,
+                   y: number,
+                   w: number,
+                   h: number) {
+
     const hw = w / 2;
     const hh = h / 2;
 

src/mxgraph/shape/node/mxStencil.js

@@ -4,12 +4,12 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxConnectionConstraint from '../view/connection/mxConnectionConstraint';
+import mxConnectionConstraint from '../../view/connection/mxConnectionConstraint';
-import mxRectangle from '../util/datatypes/mxRectangle';
+import mxRectangle from '../../util/datatypes/mxRectangle';
-import mxShape from './mxShape';
+import mxShape from '../mxShape';
-import mxResources from "../util/mxResources";
+import mxResources from "../../util/mxResources";
-import mxUtils from "../util/mxUtils";
+import mxUtils from "../../util/mxUtils";
-import mxConstants from "../util/mxConstants";
+import mxConstants from "../../util/mxConstants";
 import mxStencilRegistry from "./mxStencilRegistry";
 
 class mxStencil extends mxShape {

src/mxgraph/util/datatypes/mxGeometry.js

@@ -4,9 +4,9 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxPoint from '../util/datatypes/mxPoint';
+import mxPoint from './mxPoint';
-import mxRectangle from '../util/datatypes/mxRectangle';
+import mxRectangle from './mxRectangle';
-import mxUtils from '../util/mxUtils';
+import mxUtils from '../mxUtils';
 
 class mxGeometry extends mxRectangle {
   /**

src/mxgraph/util/mxUtils.js

@@ -10,7 +10,7 @@ import mxConstants from './mxConstants';
 import mxObjectIdentity from './datatypes/mxObjectIdentity';
 import mxPoint from './datatypes/mxPoint';
 import mxDictionary from './datatypes/mxDictionary';
-import mxCellPath from '../model/mxCellPath';
+import mxCellPath from '../view/cell/mxCellPath';
 import mxRectangle from './datatypes/mxRectangle';
 import mxTemporaryCellStates from '../view/cell/mxTemporaryCellStates';
 import mxCodec from '../io/mxCodec';

src/mxgraph/view/cell/mxCell.ts

@@ -4,34 +4,40 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxUtils from '../util/mxUtils';
+import mxUtils from '../../util/mxUtils';
-import mxConstants from '../util/mxConstants';
+import mxConstants from '../../util/mxConstants';
+import mxGeometry from "../../util/datatypes/mxGeometry";
+import mxCellOverlay from "./mxCellOverlay";
 
 class mxCell {
   // TODO: Document me!
   // used by invalidate() of mxGraphView
   invalidating: boolean = false;
+  onInit: Function | null = null;
+
+  // used by addCellOverlay() of mxGraph
+  overlays: mxCellOverlay[] | null = null;
 
   /**
    * Variable: id
    *
    * Holds the Id. Default is null.
    */
-  id = null;
+  id: number | null = null;
 
   /**
    * Variable: value
    *
    * Holds the user object. Default is null.
    */
-  value = null;
+  value: any = null;
 
   /**
    * Variable: geometry
    *
    * Holds the <mxGeometry>. Default is null.
    */
-  geometry = null;
+  geometry: mxGeometry | null = null;
 
   /**
    * Variable: style
@@ -39,77 +45,77 @@ class mxCell {
    * Holds the style as a string of the form [(stylename|key=value);]. Default is
    * null.
    */
-  style = null;
+  style: string | null = null;
 
   /**
    * Variable: vertex
    *
    * Specifies whether the cell is a vertex. Default is false.
    */
-  vertex = false;
+  vertex: boolean = false;
 
   /**
    * Variable: edge
    *
    * Specifies whether the cell is an edge. Default is false.
    */
-  edge = false;
+  edge: boolean = false;
 
   /**
    * Variable: connectable
    *
    * Specifies whether the cell is connectable. Default is true.
    */
-  connectable = true;
+  connectable: boolean = true;
 
   /**
    * Variable: visible
    *
    * Specifies whether the cell is visible. Default is true.
    */
-  visible = true;
+  visible: boolean = true;
 
   /**
    * Variable: collapsed
    *
    * Specifies whether the cell is collapsed. Default is false.
    */
-  collapsed = false;
+  collapsed: boolean = false;
 
   /**
    * Variable: parent
    *
    * Reference to the parent cell.
    */
-  parent = null;
+  parent: mxCell | null = null;
 
   /**
    * Variable: source
    *
    * Reference to the source terminal.
    */
-  source = null;
+  source: mxCell | null = null;
 
   /**
    * Variable: target
    *
    * Reference to the target terminal.
    */
-  target = null;
+  target: mxCell | null = null;
 
   /**
    * Variable: children
    *
    * Holds the child cells.
    */
-  children = null;
+  children: mxCell[] | null = null;
 
   /**
    * Variable: edges
    *
    * Holds the edges.
    */
-  edges = null;
+  edges: mxCell[] | null = null;
 
   /**
    * Variable: mxTransient
@@ -120,7 +126,7 @@ class mxCell {
    * to mark transient fields since transient modifiers are not supported by
    * the language.
    */
-  mxTransient = [
+  mxTransient: string[] = [
     'id',
     'value',
     'parent',
@@ -192,7 +198,12 @@ class mxCell {
    * geometry - Optional <mxGeometry> that specifies the geometry.
    * style - Optional formatted string that defines the style.
    */
-  constructor(value, geometry, style) {
+  //onInit: Function | null;
+
+  constructor(value: any=null,
+              geometry: mxGeometry=null,
+              style: string=null) {
+
     this.value = value;
     this.setGeometry(geometry);
     this.setStyle(style);
@@ -207,7 +218,7 @@ class mxCell {
    *
    * Returns the Id of the cell as a string.
    */
-  getId() {
+  getId(): number {
     return this.id;
   }
 
@@ -216,7 +227,7 @@ class mxCell {
    *
    * Sets the Id of the cell to the given string.
    */
-  setId(id) {
+  setId(id: number): void {
     this.id = id;
   }
 
@@ -226,7 +237,7 @@ class mxCell {
    * Returns the user object of the cell. The user
    * object is stored in <value>.
    */
-  getValue() {
+  getValue(): any {
     return this.value;
   }
 
@@ -236,7 +247,7 @@ class mxCell {
    * Sets the user object of the cell. The user object
    * is stored in <value>.
    */
-  setValue(value) {
+  setValue(value: number): void {
     this.value = value;
   }
 
@@ -248,10 +259,9 @@ class mxCell {
    * replaces the user object with the given value and
    * returns the old user object.
    */
-  valueChanged(newValue) {
+  valueChanged(newValue: any): any {
     const previous = this.getValue();
     this.setValue(newValue);
-
     return previous;
   }
 
@@ -260,7 +270,7 @@ class mxCell {
    *
    * Returns the <mxGeometry> that describes the <geometry>.
    */
-  getGeometry() {
+  getGeometry(): mxGeometry | null {
     return this.geometry;
   }
 
@@ -269,7 +279,7 @@ class mxCell {
    *
    * Sets the <mxGeometry> to be used as the <geometry>.
    */
-  setGeometry(geometry) {
+  setGeometry(geometry: mxGeometry): void {
     this.geometry = geometry;
   }
 
@@ -278,7 +288,7 @@ class mxCell {
    *
    * Returns a string that describes the <style>.
    */
-  getStyle() {
+  getStyle(): string {
     return this.style;
   }
 
@@ -287,7 +297,7 @@ class mxCell {
    *
    * Sets the string to be used as the <style>.
    */
-  setStyle(style) {
+  setStyle(style: string): void {
     this.style = style;
   }
 
@@ -296,7 +306,7 @@ class mxCell {
    *
    * Returns true if the cell is a vertex.
    */
-  isVertex() {
+  isVertex(): boolean {
     return !!this.vertex;
   }
 
@@ -310,7 +320,7 @@ class mxCell {
    *
    * vertex - Boolean that specifies if the cell is a vertex.
    */
-  setVertex(vertex) {
+  setVertex(vertex: boolean) {
     this.vertex = vertex;
   }
 
@@ -319,7 +329,7 @@ class mxCell {
    *
    * Returns true if the cell is an edge.
    */
-  isEdge() {
+  isEdge(): boolean {
     return !!this.edge;
   }
 
@@ -342,7 +352,7 @@ class mxCell {
    *
    * Returns true if the cell is connectable.
    */
-  isConnectable() {
+  isConnectable(): boolean {
     return !!this.connectable;
   }
 
@@ -355,7 +365,7 @@ class mxCell {
    *
    * connectable - Boolean that specifies the new connectable state.
    */
-  setConnectable(connectable) {
+  setConnectable(connectable: boolean) {
     this.connectable = connectable;
   }
 
@@ -364,7 +374,7 @@ class mxCell {
    *
    * Returns true if the cell is visibile.
    */
-  isVisible() {
+  isVisible(): boolean {
     return !!this.visible;
   }
 
@@ -377,7 +387,7 @@ class mxCell {
    *
    * visible - Boolean that specifies the new visible state.
    */
-  setVisible(visible) {
+  setVisible(visible: boolean): void {
     this.visible = visible;
   }
 
@@ -386,7 +396,7 @@ class mxCell {
    *
    * Returns true if the cell is collapsed.
    */
-  isCollapsed() {
+  isCollapsed(): boolean {
     return !!this.collapsed;
   }
 
@@ -399,7 +409,7 @@ class mxCell {
    *
    * collapsed - Boolean that specifies the new collapsed state.
    */
-  setCollapsed(collapsed) {
+  setCollapsed(collapsed: boolean): void {
     this.collapsed = collapsed;
   }
 
@@ -408,7 +418,7 @@ class mxCell {
    *
    * Returns the cell's parent.
    */
-  getParent() {
+  getParent(): mxCell | null {
     return this.parent;
   }
 
@@ -421,7 +431,7 @@ class mxCell {
    *
    * parent - <mxCell> that represents the new parent.
    */
-  setParent(parent) {
+  setParent(parent: mxCell): void {
     this.parent = parent;
   }
 
@@ -435,7 +445,7 @@ class mxCell {
    * source - Boolean that specifies if the source terminal should be
    * returned.
    */
-  getTerminal(source) {
+  getTerminal(source: boolean=false): mxCell | null {
     return source ? this.source : this.target;
   }
 
@@ -528,7 +538,6 @@ class mxCell {
         this.children.splice(index, 0, child);
       }
     }
-
     return child;
   }
 
@@ -544,7 +553,7 @@ class mxCell {
    * index - Integer that specifies the index of the child to be
    * removed.
    */
-  remove(index) {
+  remove(index: number): mxCell | null {
     let child = null;
     if (this.children != null && index >= 0) {
       child = this.getChildAt(index);
@@ -627,11 +636,9 @@ class mxCell {
         if (this.edges == null) {
           this.edges = [];
         }
-
         this.edges.push(edge);
       }
     }
-
     return edge;
   }
 
@@ -674,7 +681,6 @@ class mxCell {
    */
   removeFromTerminal(isSource) {
     const terminal = this.getTerminal(isSource);
-
     if (terminal != null) {
       terminal.removeEdge(this, isSource);
     }
@@ -692,7 +698,6 @@ class mxCell {
    */
   hasAttribute(name) {
     const userObject = this.getValue();
-
     return userObject != null &&
       userObject.nodeType === mxConstants.NODETYPE_ELEMENT &&
       userObject.hasAttribute
@@ -714,12 +719,10 @@ class mxCell {
    */
   getAttribute(name, defaultValue) {
     const userObject = this.getValue();
-
     const val =
       userObject != null && userObject.nodeType === mxConstants.NODETYPE_ELEMENT
         ? userObject.getAttribute(name)
         : null;
-
     return val != null ? val : defaultValue;
   }
 
@@ -733,9 +736,10 @@ class mxCell {
    * name - Name of the attribute whose value should be set.
    * value - New value of the attribute.
    */
-  setAttribute(name, value) {
+  setAttribute(name: string,
-    const userObject = this.getValue();
+               value: any): void {
 
+    const userObject = this.getValue();
     if (
       userObject != null &&
       userObject.nodeType === mxConstants.NODETYPE_ELEMENT
@@ -751,10 +755,9 @@ class mxCell {
    * the user object. All fields in <mxTransient> are ignored
    * during the cloning.
    */
-  clone() {
+  clone(): mxCell {
     const clone = mxUtils.clone(this, this.mxTransient);
     clone.setValue(this.cloneValue());
-
     return clone;
   }
 
@@ -763,9 +766,8 @@ class mxCell {
    *
    * Returns a clone of the cell's user object.
    */
-  cloneValue() {
+  cloneValue(): any {
     let value = this.getValue();
-
     if (value != null) {
       if (typeof value.clone === 'function') {
         value = value.clone();
@@ -773,10 +775,9 @@ class mxCell {
         value = value.cloneNode(true);
       }
     }
-
     return value;
   }
 }
 
 export default mxCell;
-import("../io/mxCellCodec");
+import("../../io/mxCellCodec");

src/mxgraph/view/cell/mxCellEditor.ts

@@ -11,7 +11,7 @@ import mxClient from '../../mxClient';
 import mxConstants from '../../util/mxConstants';
 import mxText from '../../shape/mxText';
 import mxGraph from '../graph/mxGraph';
-import mxCell from '../../model/mxCell';
+import mxCell from './mxCell';
 import mxMouseEvent from '../../util/event/mxMouseEvent';
 import mxCellState from './mxCellState';
 
@@ -341,7 +341,7 @@ class mxCellEditor {
    *
    * Returns the current editing value.
    */
-  getCurrentValue(state) {
+  getCurrentValue(state: mxCellState) {
     return mxUtils.extractTextWithWhitespace(this.textarea.childNodes);
   }
 

src/mxgraph/view/cell/mxCellOverlay.ts

@@ -164,7 +164,7 @@ class mxCellOverlay extends mxEventSource {
    * state - <mxCellState> that represents the current state of the
    * associated cell.
    */
-  getBounds(state) {
+  getBounds(state: mxCellState) {
     const isEdge = state.view.graph.getModel().isEdge(state.cell);
     const s = state.view.scale;
     let pt = null;

src/mxgraph/view/cell/mxCellRenderer.ts

@@ -3,34 +3,36 @@
  * Copyright (c) 2006-2017, Gaudenz Alder
  */
 
-import mxRectangleShape from '../../shape/mxRectangleShape';
+import mxRectangleShape from '../../shape/node/mxRectangleShape';
-import mxEllipse from '../../shape/mxEllipse';
+import mxEllipse from '../../shape/node/mxEllipse';
-import mxRhombus from '../../shape/mxRhombus';
+import mxRhombus from '../../shape/node/mxRhombus';
-import mxCylinder from '../../shape/mxCylinder';
+import mxCylinder from '../../shape/node/mxCylinder';
-import mxConnector from '../../shape/mxConnector';
+import mxConnector from '../../shape/edge/mxConnector';
 import mxActor from '../../shape/mxActor';
 import mxTriangle from '../../shape/mxTriangle';
-import mxHexagon from '../../shape/mxHexagon';
+import mxHexagon from '../../shape/node/mxHexagon';
-import mxCloud from '../../shape/mxCloud';
+import mxCloud from '../../shape/node/mxCloud';
-import mxLine from '../../shape/mxLine';
+import mxLine from '../../shape/edge/mxLine';
-import mxArrow from '../../shape/mxArrow';
+import mxArrow from '../../shape/edge/mxArrow';
-import mxArrowConnector from '../../shape/mxArrowConnector';
+import mxArrowConnector from '../../shape/edge/mxArrowConnector';
-import mxDoubleEllipse from '../../shape/mxDoubleEllipse';
+import mxDoubleEllipse from '../../shape/node/mxDoubleEllipse';
 import mxSwimlane from '../../shape/mxSwimlane';
-import mxImageShape from '../../shape/mxImageShape';
+import mxImageShape from '../../shape/node/mxImageShape';
 import mxLabel from '../../shape/mxLabel';
 import mxText from '../../shape/mxText';
 import mxConstants from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
-import mxRectangle from '../../util/mxRectangle';
+import mxRectangle from '../../util/datatypes/mxRectangle';
-import mxStencilRegistry from '../../shape/mxStencilRegistry';
+import mxStencilRegistry from '../../shape/node/mxStencilRegistry';
-import mxEvent from '../../util/mxEvent';
+import mxEvent from '../../util/event/mxEvent';
 import mxClient from '../../mxClient';
-import mxMouseEvent from '../../util/mxMouseEvent';
+import mxMouseEvent from '../../util/event/mxMouseEvent';
-import mxDictionary from '../../util/mxDictionary';
+import mxDictionary from '../../util/datatypes/mxDictionary';
-import mxEventObject from '../../util/mxEventObject';
+import mxEventObject from '../../util/event/mxEventObject';
-import mxPoint from '../../util/mxPoint';
+import mxPoint from '../../util/datatypes/mxPoint';
 import mxShape from '../../shape/mxShape';
+import mxCellState from "./mxCellState";
+import mxCell from "./mxCell";
 
 class mxCellRenderer {
   /**
@@ -47,21 +49,21 @@ class mxCellRenderer {
    *
    * Defines the default shape for edges. Default is <mxConnector>.
    */
-  defaultEdgeShape = mxConnector;
+  defaultEdgeShape: mxShape = mxConnector;
 
   /**
    * Variable: defaultVertexShape
    *
    * Defines the default shape for vertices. Default is <mxRectangleShape>.
    */
-  defaultVertexShape = mxRectangleShape;
+  defaultVertexShape: mxShape = mxRectangleShape;
 
   /**
    * Variable: defaultTextShape
    *
    * Defines the default shape for labels. Default is <mxText>.
    */
-  defaultTextShape = mxText;
+  defaultTextShape: mxShape = mxText;
 
   /**
    * Variable: legacyControlPosition
@@ -69,7 +71,7 @@ class mxCellRenderer {
    * Specifies if the folding icon should ignore the horizontal
    * orientation of a swimlane. Default is true.
    */
-  legacyControlPosition = true;
+  legacyControlPosition: boolean = true;
 
   /**
    * Variable: legacySpacing
@@ -77,21 +79,21 @@ class mxCellRenderer {
    * Specifies if spacing and label position should be ignored if overflow is
    * fill or width. Default is true for backwards compatiblity.
    */
-  legacySpacing = true;
+  legacySpacing: boolean = true;
 
   /**
    * Variable: antiAlias
    *
    * Anti-aliasing option for new shapes. Default is true.
    */
-  antiAlias = true;
+  antiAlias: boolean = true;
 
   /**
    * Variable: minSvgStrokeWidth
    *
    * Minimum stroke width for SVG output.
    */
-  minSvgStrokeWidth = 1;
+  minSvgStrokeWidth: number = 1;
 
   /**
    * Variable: forceControlClickHandler
@@ -99,7 +101,7 @@ class mxCellRenderer {
    * Specifies if the enabled state of the graph should be ignored in the control
    * click handler (to allow folding in disabled graphs). Default is false.
    */
-  forceControlClickHandler = false;
+  forceControlClickHandler: boolean = false;
 
   /**
    * Class: mxCellRenderer
@@ -164,7 +166,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the shape should be initialized.
    */
-  initializeShape(state) {
+  initializeShape(state: mxCellState) {
     state.shape.dialect = state.view.graph.dialect;
     this.configureShape(state);
     state.shape.init(state.view.getDrawPane());
@@ -179,7 +181,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the shape should be created.
    */
-  createShape(state) {
+  createShape(state: mxCellState): mxShape {
     let shape = null;
 
     if (state.style != null) {
@@ -188,7 +190,6 @@ class mxCellRenderer {
       const stencil = mxStencilRegistry.getStencil(
         state.style[mxConstants.STYLE_SHAPE]
       );
-
       if (stencil != null) {
         shape = new mxShape(stencil);
       } else {
@@ -196,7 +197,6 @@ class mxCellRenderer {
         shape = new ctor();
       }
     }
-
     return shape;
   }
 
@@ -209,7 +209,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the indicator shape should be created.
    */
-  createIndicatorShape(state) {
+  createIndicatorShape(state: mxCellState): mxShape {
     state.shape.indicatorShape = this.getShape(
       state.view.graph.getIndicatorShape(state)
     );
@@ -220,7 +220,7 @@ class mxCellRenderer {
    *
    * Returns the shape for the given name from <defaultShapes>.
    */
-  getShape(name) {
+  getShape(name: string): mxShape {
     return name != null ? mxCellRenderer.defaultShapes[name] : null;
   }
 
@@ -229,7 +229,7 @@ class mxCellRenderer {
    *
    * Returns the constructor to be used for creating the shape.
    */
-  getShapeConstructor(state) {
+  getShapeConstructor(state: mxCellState) {
     let ctor = this.getShape(state.style[mxConstants.STYLE_SHAPE]);
 
     if (ctor == null) {
@@ -250,7 +250,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the shape should be configured.
    */
-  configureShape(state) {
+  configureShape(state: mxCellState) {
     state.shape.apply(state);
     state.shape.image = state.view.graph.getImage(state);
     state.shape.indicatorColor = state.view.graph.getIndicatorColor(state);
@@ -274,7 +274,7 @@ class mxCellRenderer {
    * This implementation resolves these keywords on the fill, stroke
    * and gradient color keys.
    */
-  postConfigureShape(state) {
+  postConfigureShape(state: mxCellState) {
     if (state.shape != null) {
       this.resolveColor(
         state,
@@ -294,7 +294,7 @@ class mxCellRenderer {
    * Checks if the style of the given <mxCellState> contains 'inherit',
    * 'indicated' or 'swimlane' for colors that support those keywords.
    */
-  checkPlaceholderStyles(state) {
+  checkPlaceholderStyles(state: mxCellState) {
     // LATER: Check if the color has actually changed
     if (state.style != null) {
       const values = ['inherit', 'swimlane', 'indicated'];
@@ -311,7 +311,6 @@ class mxCellRenderer {
         }
       }
     }
-
     return false;
   }
 
@@ -389,7 +388,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the label should be created.
    */
-  getLabelValue(state) {
+  getLabelValue(state: mxCellState) {
     return state.view.graph.getLabel(state.cell);
   }
 
@@ -540,7 +539,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the overlay should be created.
    */
-  createCellOverlays(state) {
+  createCellOverlays(state: mxCellState) {
     const { graph } = state.view;
     const overlays = graph.getCellOverlays(state.cell);
     let dict = null;
@@ -580,7 +579,6 @@ class mxCellRenderer {
         shape.destroy();
       });
     }
-
     state.overlays = dict;
   }
 
@@ -645,7 +643,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the control should be created.
    */
-  createControl(state) {
+  createControl(state: mxCellState) {
     const { graph } = state.view;
     const image = graph.getFoldingImage(state);
 
@@ -678,16 +676,16 @@ class mxCellRenderer {
    *
    * state - <mxCellState> whose control click handler should be returned.
    */
-  createControlClickHandler(state) {
+  createControlClickHandler(state: mxCellState): Function {
     const { graph } = state.view;
 
-    return mxUtils.bind(this, function(evt) {
+    return evt => {
       if (this.forceControlClickHandler || graph.isEnabled()) {
         const collapse = !graph.isCellCollapsed(state.cell);
         graph.foldCells(collapse, false, [state.cell], null, evt);
         mxEvent.consume(evt);
       }
-    });
+    };
   }
 
   /**
@@ -702,7 +700,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,
+              control,
+              handleEvents,
+              clickHandler) {
+
     const { graph } = state.view;
 
     // In the special case where the label is in HTML and the display is SVG the image
@@ -821,7 +823,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the event listeners should be isntalled.
    */
-  installListeners(state) {
+  installListeners(state: mxCellState) {
     const { graph } = state.view;
 
     // Workaround for touch devices routing all events for a mouse
@@ -849,14 +851,14 @@ class mxCellRenderer {
 
     mxEvent.addGestureListeners(
       state.shape.node,
-      mxUtils.bind(this, evt => {
+      evt => {
         if (this.isShapeEvent(state, evt)) {
           graph.fireMouseEvent(
             mxEvent.MOUSE_DOWN,
             new mxMouseEvent(evt, state)
           );
         }
-      }),
+      },
       mxUtils.bind(this, evt => {
         if (this.isShapeEvent(state, evt)) {
           graph.fireMouseEvent(
@@ -865,14 +867,14 @@ class mxCellRenderer {
           );
         }
       }),
-      mxUtils.bind(this, evt => {
+      evt => {
         if (this.isShapeEvent(state, evt)) {
           graph.fireMouseEvent(
             mxEvent.MOUSE_UP,
             new mxMouseEvent(evt, getState(evt))
           );
         }
-      })
+      }
     );
 
     // Uses double click timeout in mxGraph for quirks mode
@@ -880,12 +882,12 @@ class mxCellRenderer {
       mxEvent.addListener(
         state.shape.node,
         'dblclick',
-        mxUtils.bind(this, evt => {
+        evt => {
           if (this.isShapeEvent(state, evt)) {
             graph.dblClick(evt, state.cell);
             mxEvent.consume(evt);
           }
-        })
+        }
       );
     }
   }
@@ -995,7 +997,7 @@ class mxCellRenderer {
    * state - <mxCellState> whose label should be checked.
    * shape - <mxText> shape to be checked.
    */
-  isTextShapeInvalid(state, shape) {
+  isTextShapeInvalid(state: mxCellState, shape) {
     function check(property, stylename, defaultValue) {
       let result = false;
 
@@ -1057,7 +1059,7 @@ class mxCellRenderer {
    *
    * shape - <mxText> shape to be redrawn.
    */
-  redrawLabelShape(shape) {
+  redrawLabelShape(shape: mxShape): void {
     shape.redraw();
   }
 
@@ -1070,7 +1072,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> whose label scale should be returned.
    */
-  getTextScale(state) {
+  getTextScale(state: mxCellState): number {
     return state.view.scale;
   }
 
@@ -1083,7 +1085,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> whose label bounds should be returned.
    */
-  getLabelBounds(state) {
+  getLabelBounds(state: mxCellState): mxRectangle {
     const { graph } = state.view;
     const { scale } = state.view;
     const isEdge = graph.getModel().isEdge(state.cell);
@@ -1160,7 +1162,6 @@ class mxCellRenderer {
     if (lw != null) {
       bounds.width = parseFloat(lw) * scale;
     }
-
     if (!isEdge) {
       this.rotateLabelBounds(state, bounds);
     }
@@ -1179,7 +1180,9 @@ class mxCellRenderer {
    * state - <mxCellState> whose label bounds should be rotated.
    * bounds - <mxRectangle> the rectangle to be rotated.
    */
-  rotateLabelBounds(state, bounds) {
+  rotateLabelBounds(state: mxCellState,
+                    bounds: mxRectangle) {
+
     bounds.y -= state.text.margin.y * bounds.height;
     bounds.x -= state.text.margin.x * bounds.width;
 
@@ -1489,7 +1492,9 @@ class mxCellRenderer {
    *
    * state - <mxCellState> whose shapes should be returned.
    */
-  getShapesForState(state) {
+  getShapesForState(state: mxCellState): [mxShape | null,
+                                          mxText | null,
+                                          mxShape | null] {
     return [state.shape, state.text, state.control];
   }
 
@@ -1509,10 +1514,13 @@ class mxCellRenderer {
    * be drawn into the DOM. If this is false then redraw and/or reconfigure
    * will not be called on the shape.
    */
-  redraw(state, force, rendering) {
+  redraw(state: mxCellState,
+         force: boolean=false,
+         rendering: boolean=true): void {
+
     const shapeChanged = this.redrawShape(state, force, rendering);
 
-    if (state.shape != null && (rendering == null || rendering)) {
+    if (state.shape != null && rendering) {
       this.redrawLabel(state, shapeChanged);
       this.redrawCellOverlays(state, shapeChanged);
       this.redrawControl(state, shapeChanged);
@@ -1528,7 +1536,10 @@ class mxCellRenderer {
    *
    * state - <mxCellState> whose label should be redrawn.
    */
-  redrawShape(state, force, rendering) {
+  redrawShape(state: mxCellState,
+              force: boolean=false,
+              rendering: boolean=true): boolean {
+
     const { model } = state.view.graph;
     let shapeChanged = false;
 
@@ -1638,7 +1649,7 @@ class mxCellRenderer {
    *
    * Invokes redraw on the shape of the given state.
    */
-  doRedrawShape(state) {
+  doRedrawShape(state: mxCellState) {
     state.shape.redraw();
   }
 
@@ -1666,7 +1677,7 @@ class mxCellRenderer {
    *
    * state - <mxCellState> for which the shapes should be destroyed.
    */
-  destroy(state) {
+  destroy(state: mxCellState) {
     if (state.shape != null) {
       if (state.text != null) {
         state.text.destroy();

src/mxgraph/view/cell/mxCellState.ts

@@ -7,21 +7,30 @@
 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 mxShape from "../../shape/mxShape";
+import mxText from "../../shape/mxText";
 
 class mxCellState extends mxRectangle {
+  // TODO: Document me!!
+  cellBounds: mxRectangle;
+  paintBounds: mxRectangle;
+  boundingBox: mxRectangle;
+
   /**
    * Variable: view
    *
    * Reference to the enclosing <mxGraphView>.
    */
-  view = null;
+  view: mxGraphView | null = null;
 
   /**
    * Variable: cell
    *
    * Reference to the <mxCell> that is represented by this state.
    */
-  cell = null;
+  cell: mxCell | null = null;
 
   /**
    * Variable: style
@@ -29,21 +38,21 @@ class mxCellState extends mxRectangle {
    * Contains an array of key, value pairs that represent the style of the
    * cell.
    */
-  style = null;
+  style: any | null = null;   // TODO: Important - make the style type more strictly typed to allow for typescript checking of individual properties!!!
 
   /**
    * Variable: invalidStyle
    *
    * Specifies if the style is invalid. Default is false.
    */
-  invalidStyle = false;
+  invalidStyle: boolean = false;
 
   /**
    * Variable: invalid
    *
    * Specifies if the state is invalid. Default is true.
    */
-  invalid = true;
+  invalid: boolean = true;
 
   /**
    * Variable: origin
@@ -51,7 +60,7 @@ class mxCellState extends mxRectangle {
    * <mxPoint> that holds the origin for all child cells. Default is a new
    * empty <mxPoint>.
    */
-  origin = null;
+  origin: mxPoint | null = null;
 
   /**
    * Variable: absolutePoints
@@ -59,7 +68,7 @@ class mxCellState extends mxRectangle {
    * Holds an array of <mxPoints> that represent the absolute points of an
    * edge.
    */
-  absolutePoints = null;
+  absolutePoints: mxPoint[] | null = null;
 
   /**
    * Variable: absoluteOffset
@@ -68,35 +77,35 @@ class mxCellState extends mxRectangle {
    * absolute coordinates of the label position. For vertices, this is the
    * offset of the label relative to the top, left corner of the vertex.
    */
-  absoluteOffset = null;
+  absoluteOffset: mxPoint | null = null;
 
   /**
    * Variable: visibleSourceState
    *
    * Caches the visible source terminal state.
    */
-  visibleSourceState = null;
+  visibleSourceState: mxCellState | null = null;
 
   /**
    * Variable: visibleTargetState
    *
    * Caches the visible target terminal state.
    */
-  visibleTargetState = null;
+  visibleTargetState: mxCellState | null = null;
 
   /**
    * Variable: terminalDistance
    *
    * Caches the distance between the end points for an edge.
    */
-  terminalDistance = 0;
+  terminalDistance: number = 0;
 
   /**
    * Variable: length
    *
    * Caches the length of an edge.
    */
-  length = 0;
+  length: number = 0;
 
   /**
    * Variable: segments
@@ -104,14 +113,14 @@ class mxCellState extends mxRectangle {
    * Array of numbers that represent the cached length of each segment of the
    * edge.
    */
-  segments = null;
+  segments: number[] | null = null;
 
   /**
    * Variable: shape
    *
    * Holds the <mxShape> that represents the cell graphically.
    */
-  shape = null;
+  shape: mxShape | null = null;
 
   /**
    * Variable: text
@@ -119,21 +128,21 @@ class mxCellState extends mxRectangle {
    * Holds the <mxText> that represents the label of the cell. Thi smay be
    * null if the cell has no label.
    */
-  text = null;
+  text: mxText | null = null;
 
   /**
    * Variable: unscaledWidth
    *
    * Holds the unscaled width of the state.
    */
-  unscaledWidth = null;
+  unscaledWidth: number | null = null;
 
   /**
    * Variable: unscaledHeight
    *
    * Holds the unscaled height of the state.
    */
-  unscaledHeight = null;
+  unscaledHeight: number | null = null;
 
   /**
    * Class: mxCellState
@@ -160,7 +169,9 @@ class mxCellState extends mxRectangle {
    * cell - <mxCell> that this state represents.
    * style - Array of key, value pairs that constitute the style.
    */
-  constructor(view, cell, style) {
+  constructor(view: mxGraphView,
+              cell: mxCell,
+              style: {}) {
     super(mxConstants.DO_NOTHING);
 
     this.view = view;
@@ -182,13 +193,10 @@ class mxCellState extends mxRectangle {
    * border - Optional border to be added around the perimeter bounds.
    * bounds - Optional <mxRectangle> to be used as the initial bounds.
    */
-  getPerimeterBounds(border, bounds) {
+  getPerimeterBounds(border: number=0,
-    border = border || 0;
+                     bounds: mxRectangle=new mxRectangle(
-    bounds =
+                         this.x, this.y, this.width, this.height
-      bounds != null
+                     )): mxRectangle {
-        ? bounds
-        : new mxRectangle(this.x, this.y, this.width, this.height);
-
     if (
       this.shape != null &&
       this.shape.stencil != null &&
@@ -211,7 +219,6 @@ class mxCellState extends mxRectangle {
     if (border !== 0) {
       bounds.grow(border);
     }
-
     return bounds;
   }
 
@@ -226,7 +233,8 @@ class mxCellState extends mxRectangle {
    * isSource - Boolean that specifies if the first or last point should
    * be assigned.
    */
-  setAbsoluteTerminalPoint(point, isSource) {
+  setAbsoluteTerminalPoint(point: mxPoint,
+                           isSource: boolean=false): void {
     if (isSource) {
       if (this.absolutePoints == null) {
         this.absolutePoints = [];
@@ -253,11 +261,10 @@ class mxCellState extends mxRectangle {
    *
    * Sets the given cursor on the shape and text shape.
    */
-  setCursor(cursor) {
+  setCursor(cursor: string): void {
     if (this.shape != null) {
       this.shape.setCursor(cursor);
     }
-
     if (this.text != null) {
       this.text.setCursor(cursor);
     }
@@ -273,9 +280,8 @@ class mxCellState extends mxRectangle {
    * source - Boolean that specifies if the source or target cell should be
    * returned.
    */
-  getVisibleTerminal(source) {
+  getVisibleTerminal(source: boolean=false): mxCell | null {
     const tmp = this.getVisibleTerminalState(source);
-
     return tmp != null ? tmp.cell : null;
   }
 
@@ -289,7 +295,7 @@ class mxCellState extends mxRectangle {
    * source - Boolean that specifies if the source or target state should be
    * returned.
    */
-  getVisibleTerminalState(source) {
+  getVisibleTerminalState(source: boolean=false): mxCellState | null {
     return source ? this.visibleSourceState : this.visibleTargetState;
   }
 
@@ -303,7 +309,8 @@ class mxCellState extends mxRectangle {
    * terminalState - <mxCellState> that represents the terminal.
    * source - Boolean that specifies if the source or target state should be set.
    */
-  setVisibleTerminalState(terminalState, source) {
+  setVisibleTerminalState(terminalState: mxCellState,
+                          source: boolean=false): void {
     if (source) {
       this.visibleSourceState = terminalState;
     } else {
@@ -316,7 +323,7 @@ class mxCellState extends mxRectangle {
    *
    * Returns the unscaled, untranslated bounds.
    */
-  getCellBounds() {
+  getCellBounds(): mxRectangle {
     return this.cellBounds;
   }
 
@@ -327,7 +334,7 @@ class mxCellState extends mxRectangle {
    * <getCellBounds> but with a 90 degree rotation if the shape's
    * isPaintBoundsInverted returns true.
    */
-  getPaintBounds() {
+  getPaintBounds(): mxRectangle {
     return this.paintBounds;
   }
 
@@ -336,7 +343,7 @@ class mxCellState extends mxRectangle {
    *
    * Updates the cellBounds and paintBounds.
    */
-  updateCachedBounds() {
+  updateCachedBounds(): void {
     const tr = this.view.translate;
     const s = this.view.scale;
     this.cellBounds = new mxRectangle(
@@ -357,7 +364,7 @@ class mxCellState extends mxRectangle {
    *
    * Copies all fields from the given state to this state.
    */
-  setState(state) {
+  setState(state: mxCellState): void {
     this.view = state.view;
     this.cell = state.cell;
     this.style = state.style;
@@ -381,7 +388,7 @@ class mxCellState extends mxRectangle {
    *
    * Returns a clone of this <mxPoint>.
    */
-  clone() {
+  clone(): mxCellState {
     const clone = new mxCellState(this.view, this.cell, this.style);
 
     // Clones the absolute points
@@ -423,7 +430,7 @@ class mxCellState extends mxRectangle {
    *
    * Destroys the state and all associated resources.
    */
-  destroy() {
+  destroy(): void {
     this.view.graph.cellRenderer.destroy(this);
   }
 }

src/mxgraph/view/cell/mxTemporaryCellStates.ts

@@ -11,34 +11,30 @@
 import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxDictionary from '../../util/datatypes/mxDictionary';
 import mxGraphView from "../graph/mxGraphView";
-import mxCell from "../../model/mxCell";
+import mxCell from "./mxCell";
+import mxCellState from "./mxCellState";
 
 class mxTemporaryCellStates {
+  oldValidateCellState: Function | null;
+  oldDoRedrawShape: Function | null;
+
   /**
    * Variable: view
-   *
-   * Holds the width of the rectangle. Default is 0.
    */
   view: mxGraphView | null = null;
 
   /**
    * Variable: oldStates
-   *
-   * Holds the height of the rectangle. Default is 0.
    */
-  oldStates: number = 0;
+  oldStates: mxCellState | null = null;
 
   /**
    * Variable: oldBounds
-   *
-   * Holds the height of the rectangle. Default is 0.
    */
-  oldBounds: number = 0;
+  oldBounds: mxRectangle | null = null;
 
   /**
    * Variable: oldScale
-   *
-   * Holds the height of the rectangle. Default is 0.
    */
   oldScale: number = 0;
 
@@ -117,7 +113,7 @@ class mxTemporaryCellStates {
    *
    * Returns the top, left corner as a new <mxPoint>.
    */
-  destroy() {
+  destroy(): void {
     this.view.setScale(this.oldScale);
     this.view.setStates(this.oldStates);
     this.view.setGraphBounds(this.oldBounds);

src/mxgraph/view/graph/mxCurrentRootChange.ts

@@ -1,9 +1,9 @@
 import mxGraphView from "./mxGraphView";
 import mxEventObject from "../../util/event/mxEventObject";
 import mxPoint from "../../util/datatypes/mxPoint";
-import mxCell from "../../model/mxCell";
+import mxCell from "../cell/mxCell";
 import mxEvent from "../../util/event/mxEvent";
-import mxGraphModel from "../../model/mxGraphModel";
+import mxGraphModel from "./mxGraphModel";
 
 class mxCurrentRootChange {
   view: mxGraphView;

src/mxgraph/view/graph/mxGraph.ts

@@ -33,19 +33,19 @@ import mxEdgeSegmentHandler from '../../handler/mxEdgeSegmentHandler';
 import mxElbowEdgeHandler from '../../handler/mxElbowEdgeHandler';
 import mxMouseEvent from '../../util/event/mxMouseEvent';
 import mxResources from '../../util/mxResources';
-import mxGeometry from '../../model/mxGeometry';
+import mxGeometry from '../../util/datatypes/mxGeometry';
-import mxCell from '../../model/mxCell';
+import mxCell from '../cell/mxCell';
-import mxGraphModel from '../../model/mxGraphModel';
+import mxGraphModel from './mxGraphModel';
 import mxStylesheet from '../style/mxStylesheet';
 import mxConstants from '../../util/mxConstants';
 import mxMultiplicity from "../connection/mxMultiplicity";
 
-import mxChildChange from '../../model/atomic_changes/mxChildChange';
+import mxChildChange from '../../atomic_changes/mxChildChange';
-import mxGeometryChange from '../../model/atomic_changes/mxGeometryChange';
+import mxGeometryChange from '../../atomic_changes/mxGeometryChange';
-import mxRootChange from '../../model/atomic_changes/mxRootChange';
+import mxRootChange from '../../atomic_changes/mxRootChange';
-import mxStyleChange from '../../model/atomic_changes/mxStyleChange';
+import mxStyleChange from '../../atomic_changes/mxStyleChange';
-import mxTerminalChange from '../../model/atomic_changes/mxTerminalChange';
+import mxTerminalChange from '../../atomic_changes/mxTerminalChange';
-import mxValueChange from '../../model/atomic_changes/mxValueChange';
+import mxValueChange from '../../atomic_changes/mxValueChange';
 import mxPolyline from '../../shape/edge/mxPolyline';
 import mxCellState from '../cell/mxCellState';
 
@@ -60,6 +60,21 @@ class mxGraph extends mxEventSource {
   connectionHandler: mxConnectionHandler | null = null;
   graphHandler: mxGraphHandler | null = null;
   graphModelChangeListener: Function | null = null;
+  shiftPreview1: HTMLElement | null;
+  shiftPreview2: HTMLElement | null;
+  panningManager: mxPanningManager | null;
+  lastTouchEvent: mxMouseEvent | null;
+  doubleClickCounter: number | null;
+  lastTouchCell: mxCell | null;
+  fireDoubleClick: boolean | null;
+  tapAndHoldThread: number | null;
+  lastMouseX: number;
+  lastMouseY: number;
+  isMouseTrigger: boolean;
+  ignoreMouseEvents: boolean;
+  mouseMoveRedirect: Function;
+  mouseUpRedirect: Function;
+  lastEvent: any; // FIXME: Check if this can be more specific - DOM events or mxEventObjects!
 
   /**
    * Variable: mouseListeners
@@ -2146,16 +2161,15 @@ class mxGraph extends mxEventSource {
    * cell - <mxCell> to add the overlay for.
    * overlay - <mxCellOverlay> to be added for the cell.
    */
-  addCellOverlay(cell, overlay) {
+  addCellOverlay(cell: mxCell,
+                 overlay: mxCellOverlay): mxCellOverlay {
     if (cell.overlays == null) {
       cell.overlays = [];
     }
-
     cell.overlays.push(overlay);
 
+    // Immediately update the cell display if the state exists
     const state = this.view.getState(cell);
-
-    // Immediately updates the cell display if the state exists
     if (state != null) {
       this.cellRenderer.redraw(state);
     }
@@ -2163,7 +2177,6 @@ class mxGraph extends mxEventSource {
     this.fireEvent(
       new mxEventObject(mxEvent.ADD_OVERLAY, 'cell', cell, 'overlay', overlay)
     );
-
     return overlay;
   }
 
@@ -2412,7 +2425,8 @@ class mxGraph extends mxEventSource {
    * cell - <mxCell> for which the initial editing value should be returned.
    * evt - Optional mouse event that triggered the editor.
    */
-  getEditingValue(cell, evt) {
+  getEditingValue(cell: mxCell,
+                  evt: mxEventObject): string {
     return this.convertValueToString(cell);
   }
 
@@ -2424,9 +2438,9 @@ class mxGraph extends mxEventSource {
    * Parameters:
    *
    * cancel - Boolean that specifies if the current editing value
-   * should be stored.
+   * shouldn't be stored.
    */
-  stopEditing(cancel) {
+  stopEditing(cancel: boolean=false): void {
     this.cellEditor.stopEditing(cancel);
     this.fireEvent(
       new mxEventObject(mxEvent.EDITING_STOPPED, 'cancel', cancel)
@@ -2447,8 +2461,8 @@ class mxGraph extends mxEventSource {
    * evt - Optional event that triggered the change.
    */
   labelChanged(cell: mxCell,
-               value,
+               value: any,
-               evt: mxEvent) {
+               evt: mxEventObject): mxCell {
 
     this.model.beginUpdate();
     try {
@@ -2466,7 +2480,6 @@ class mxGraph extends mxEventSource {
     } finally {
       this.model.endUpdate();
     }
-
     return cell;
   }
 
@@ -2501,11 +2514,13 @@ class mxGraph extends mxEventSource {
    * value - New label to be assigned.
    * autoSize - Boolean that specifies if <cellSizeUpdated> should be called.
    */
-  cellLabelChanged(cell, value, autoSize) {
+  cellLabelChanged(cell: mxCell,
+                   value: any,
+                   autoSize: boolean=false) {
+
     this.model.beginUpdate();
     try {
       this.model.setValue(cell, value);
-
       if (autoSize) {
         this.cellSizeUpdated(cell, false);
       }
@@ -2702,7 +2717,9 @@ class mxGraph extends mxEventSource {
    * evt - Mouseevent that represents the doubleclick.
    * cell - Optional <mxCell> under the mousepointer.
    */
-  dblClick(evt, cell) {
+  dblClick(evt: mxMouseEvent,
+           cell: mxCell | null=null): void {
+
     const mxe = new mxEventObject(
       mxEvent.DOUBLE_CLICK,
       'event',
@@ -2736,7 +2753,7 @@ class mxGraph extends mxEventSource {
    * me - <mxMouseEvent> that represents the touch event.
    * state - Optional <mxCellState> that is associated with the event.
    */
-  tapAndHold(me) {
+  tapAndHold(me: mxMouseEvent): void {
     const evt = me.getEvent();
     const mxe = new mxEventObject(
       mxEvent.TAP_AND_HOLD,
@@ -2795,13 +2812,16 @@ class mxGraph extends mxEventSource {
    * Scrolls the graph to the given point, extending the graph container if
    * specified.
    */
-  scrollPointToVisible(x, y, extend, border) {
+  scrollPointToVisible(x: number,
+                       y: number,
+                       extend: boolean,
+                       border: number=20) {
+
     if (
       !this.timerAutoScroll &&
       (this.ignoreScrollbars || mxUtils.hasScrollbars(this.container))
     ) {
       const c = this.container;
-      border = border != null ? border : 20;
 
       if (
         x >= c.scrollLeft &&
@@ -2878,7 +2898,6 @@ class mxGraph extends mxEventSource {
       if (this.panningManager == null) {
         this.panningManager = this.createPanningManager();
       }
-
       this.panningManager.panTo(x + this.panDx, y + this.panDy);
     }
   }
@@ -3311,7 +3330,7 @@ class mxGraph extends mxEventSource {
    * cell - <mxCell> whose style should be returned as an array.
    * ignoreState - Optional boolean that specifies if the cell state should be ignored.
    */
-  getCurrentCellStyle(cell, ignoreState) {
+  getCurrentCellStyle(cell, ignoreState: boolean=false) {
     const state = ignoreState ? null : this.view.getState(cell);
 
     return state != null ? state.style : this.getCellStyle(cell);
@@ -4708,13 +4727,13 @@ class mxGraph extends mxEventSource {
    * <mxEvent.CELLS_ADDED> while the transaction is in progress.
    */
   cellsAdded(
-    cells,
+    cells: mxCell[] | null=null,
-    parent,
+    parent: mxCell | null=null,
-    index,
+    index: number | null=null,
-    source,
+    source: mxCell | null=null,
-    target,
+    target: mxCell | null=null,
-    absolute,
+    absolute: boolean=false,
-    constrain,
+    constrain: boolean=false,
     extend
   ) {
     if (cells != null && parent != null && index != null) {
@@ -4802,18 +4821,12 @@ class mxGraph extends mxEventSource {
         this.fireEvent(
           new mxEventObject(
             mxEvent.CELLS_ADDED,
-            'cells',
+            'cells', cells,
-            cells,
+            'parent', parent,
-            'parent',
+            'index', index,
-            parent,
+            'source', source,
-            'index',
+            'target', target,
-            index,
+            'absolute', absolute
-            'source',
-            source,
-            'target',
-            target,
-            'absolute',
-            absolute
           )
         );
       } finally {
@@ -4833,8 +4846,8 @@ class mxGraph extends mxEventSource {
    * recurse - Optional boolean which specifies if all descendants should be
    * autosized. Default is true.
    */
-  autoSizeCell(cell, recurse) {
+  autoSizeCell(cell: mxCell,
-    recurse = recurse != null ? recurse : true;
+               recurse: boolean=true) {
 
     if (recurse) {
       const childCount = this.model.getChildCount(cell);
@@ -5451,8 +5464,8 @@ class mxGraph extends mxEventSource {
    *
    * cell - <mxCell> whose size should be updated.
    */
-  updateCellSize(cell, ignoreChildren) {
+  updateCellSize(cell: mxCell,
-    ignoreChildren = ignoreChildren != null ? ignoreChildren : false;
+                 ignoreChildren: boolean=false) {
 
     this.model.beginUpdate();
     try {
@@ -5460,16 +5473,13 @@ class mxGraph extends mxEventSource {
       this.fireEvent(
         new mxEventObject(
           mxEvent.UPDATE_CELL_SIZE,
-          'cell',
+          'cell', cell,
-          cell,
+          'ignoreChildren', ignoreChildren
-          'ignoreChildren',
-          ignoreChildren
         )
       );
     } finally {
       this.model.endUpdate();
     }
-
     return cell;
   }
 
@@ -6413,8 +6423,8 @@ class mxGraph extends mxEventSource {
    * cells - <mxCell> which should be constrained.
    * sizeFirst - Specifies if the size should be changed first. Default is true.
    */
-  constrainChild(cell, sizeFirst) {
+  constrainChild(cell: mxCell,
-    sizeFirst = sizeFirst != null ? sizeFirst : true;
+                 sizeFirst: boolean=true) {
 
     if (cell != null) {
       let geo = this.getCellGeometry(cell);
@@ -7669,11 +7679,10 @@ class mxGraph extends mxEventSource {
    *
    * value - Numeric value to be snapped to the grid.
    */
-  snap(value) {
+  snap(value: number): number {
     if (this.gridEnabled) {
       value = Math.round(value / this.gridSize) * this.gridSize;
     }
-
     return value;
   }
 
@@ -7682,7 +7691,12 @@ class mxGraph extends mxEventSource {
    *
    * Snaps the given delta with the given scaled bounds.
    */
-  snapDelta(delta, bounds, ignoreGrid, ignoreHorizontal, ignoreVertical) {
+  snapDelta(delta,
+            bounds,
+            ignoreGrid,
+            ignoreHorizontal,
+            ignoreVertical) {
+
     const t = this.view.translate;
     const s = this.view.scale;
 
@@ -7731,7 +7745,6 @@ class mxGraph extends mxEventSource {
         }
       }
     }
-
     return delta;
   }
 
@@ -7890,7 +7903,8 @@ class mxGraph extends mxEventSource {
    * Zooms the graph to the given scale with an optional boolean center
    * argument, which is passd to <zoom>.
    */
-  zoomTo(scale, center) {
+  zoomTo(scale: number,
+         center: boolean=false) {
     this.zoom(scale / this.view.scale, center);
   }
 
@@ -7962,8 +7976,9 @@ class mxGraph extends mxEventSource {
    * argument that keeps the graph scrolled to the center. If the center argument
    * is omitted, then <centerZoom> will be used as its value.
    */
-  zoom(factor, center) {
+  zoom(factor: number,
-    center = center != null ? center : this.centerZoom;
+       center: boolean=this.centerZoom): void {
+
     const scale = Math.round(this.view.scale * factor * 100) / 100;
     const state = this.view.getState(this.getSelectionCell());
     factor = scale / this.view.scale;
@@ -8050,7 +8065,7 @@ class mxGraph extends mxEventSource {
    * rect - The un-scaled and un-translated rectangluar region that should be just visible
    * after the operation
    */
-  zoomToRect(rect) {
+  zoomToRect(rect: mxRectangle): void {
     const scaleX = this.container.clientWidth / rect.width;
     const scaleY = this.container.clientHeight / rect.height;
     const aspectFactor = scaleX / scaleY;
@@ -8370,7 +8385,7 @@ class mxGraph extends mxEventSource {
    *
    * state - <mxCellState> that represents a potential loop.
    */
-  isLoop(state) {
+  isLoop(state: mxCellState) {
     const src = state.getVisibleTerminalState(true);
     const trg = state.getVisibleTerminalState(false);
 
@@ -8773,7 +8788,7 @@ class mxGraph extends mxEventSource {
    * Returns the <mxImage> used to display the collapsed state of
    * the specified cell state. This returns null for all edges.
    */
-  getFoldingImage(state) {
+  getFoldingImage(state: mxCellState) {
     if (
       state != null &&
       this.foldingEnabled &&
@@ -9150,7 +9165,9 @@ class mxGraph extends mxEventSource {
    * swimlane - <mxCell> whose start size should be returned.
    * ignoreState - Optional boolean that specifies if cell state should be ignored.
    */
-  getStartSize(swimlane, ignoreState) {
+  getStartSize(swimlane: mxCell,
+               ignoreState: boolean=false) {
+
     const result = new mxRectangle();
     const style = this.getCurrentCellStyle(swimlane, ignoreState);
     const size = parseInt(
@@ -9264,7 +9281,7 @@ class mxGraph extends mxEventSource {
    *
    * state - <mxCellState> whose image URL should be returned.
    */
-  getImage(state) {
+  getImage(state: mxCellState) {
     return state != null && state.style != null
       ? state.style[mxConstants.STYLE_IMAGE]
       : null;
@@ -9279,7 +9296,7 @@ class mxGraph extends mxEventSource {
    *
    * state - <mxCellState> to check.
    */
-  isTransparentState(state) {
+  isTransparentState(state: mxCellState) {
     let result = false;
     if (state != null) {
       const stroke = mxUtils.getValue(
@@ -9312,7 +9329,7 @@ class mxGraph extends mxEventSource {
    * state - <mxCellState> whose vertical alignment should be
    * returned.
    */
-  getVerticalAlign(state) {
+  getVerticalAlign(state: mxCellState) {
     return state != null && state.style != null
       ? state.style[mxConstants.STYLE_VERTICAL_ALIGN] ||
           mxConstants.ALIGN_MIDDLE
@@ -9331,7 +9348,7 @@ class mxGraph extends mxEventSource {
    * state - <mxCellState> whose indicator color should be
    * returned.
    */
-  getIndicatorColor(state) {
+  getIndicatorColor(state: mxCellState) {
     return state != null && state.style != null
       ? state.style[mxConstants.STYLE_INDICATOR_COLOR]
       : null;
@@ -9349,7 +9366,7 @@ class mxGraph extends mxEventSource {
    * state - <mxCellState> whose indicator gradient color should be
    * returned.
    */
-  getIndicatorGradientColor(state) {
+  getIndicatorGradientColor(state: mxCellState) {
     return state != null && state.style != null
       ? state.style[mxConstants.STYLE_INDICATOR_GRADIENTCOLOR]
       : null;
@@ -9366,7 +9383,7 @@ class mxGraph extends mxEventSource {
    *
    * state - <mxCellState> whose indicator shape should be returned.
    */
-  getIndicatorShape(state) {
+  getIndicatorShape(state: mxCellState) {
     return state != null && state.style != null
       ? state.style[mxConstants.STYLE_INDICATOR_SHAPE]
       : null;
@@ -9383,7 +9400,7 @@ class mxGraph extends mxEventSource {
    *
    * state - <mxCellState> whose indicator image should be returned.
    */
-  getIndicatorImage(state) {
+  getIndicatorImage(state: mxCellState) {
     return state != null && state.style != null
       ? state.style[mxConstants.STYLE_INDICATOR_IMAGE]
       : null;
@@ -9423,7 +9440,7 @@ class mxGraph extends mxEventSource {
    * cell - <mxCell> to be checked.
    * ignoreState - Optional boolean that specifies if the cell state should be ignored.
    */
-  isSwimlane(cell, ignoreState) {
+  isSwimlane(cell, ignoreState: boolean=false) {
     if (
       cell != null &&
       this.model.getParent(cell) !== this.model.getRoot() &&
@@ -9576,7 +9593,8 @@ class mxGraph extends mxEventSource {
    *
    * cell - <mxCell> whose locked state should be returned.
    */
-  isCellsLocked() {
+  isCellsLocked(): boolean {
+    // FIXME: Clarify the parameters!!! ========================================================================================
     return this.cellsLocked;
   }
 
@@ -9590,7 +9608,7 @@ class mxGraph extends mxEventSource {
    *
    * value - Boolean that defines the new value for <cellsLocked>.
    */
-  setCellsLocked(value) {
+  setCellsLocked(value: boolean) {
     this.cellsLocked = value;
   }
 
@@ -9631,7 +9649,7 @@ class mxGraph extends mxEventSource {
    * Returns <cellsCloneable>, that is, if the graph allows cloning of cells
    * by using control-drag.
    */
-  isCellsCloneable() {
+  isCellsCloneable(): boolean {
     return this.cellsCloneable;
   }
 
@@ -9646,7 +9664,7 @@ class mxGraph extends mxEventSource {
    *
    * value - Boolean indicating if the graph should be cloneable.
    */
-  setCellsCloneable(value) {
+  setCellsCloneable(value): void {
     this.cellsCloneable = value;
   }
 
@@ -9655,7 +9673,7 @@ class mxGraph extends mxEventSource {
    *
    * Returns the cells which may be exported in the given array of cells.
    */
-  getExportableCells(cells: mxCell[]) {
+  getExportableCells(cells: mxCell[]): mxCell[] {
     return this.model.filterCells(
       cells,
       mxUtils.bind(this, cell => {
@@ -9674,7 +9692,7 @@ class mxGraph extends mxEventSource {
    *
    * cell - <mxCell> that represents the cell to be exported.
    */
-  canExportCell(cell: mxCell) {
+  canExportCell(cell: mxCell | null=null): boolean {
     return this.exportEnabled;
   }
 
@@ -9683,7 +9701,7 @@ class mxGraph extends mxEventSource {
    *
    * Returns the cells which may be imported in the given array of cells.
    */
-  getImportableCells(cells: mxCell[]) {
+  getImportableCells(cells: mxCell[]): mxCell[] {
     return this.model.filterCells(
       cells,
       mxUtils.bind(this, cell => {
@@ -9702,7 +9720,7 @@ class mxGraph extends mxEventSource {
    *
    * cell - <mxCell> that represents the cell to be imported.
    */
-  canImportCell(cell: mxCell) {
+  canImportCell(cell: mxCell | null=null): boolean {
     return this.importEnabled;
   }
 
@@ -10698,7 +10716,7 @@ class mxGraph extends mxEventSource {
    *
    * state - <mxCellState> that is being resized.
    */
-  isRecursiveResize(state) {
+  isRecursiveResize(state: mxCellState) {
     return this.recursiveResize;
   }
 
@@ -10933,7 +10951,11 @@ class mxGraph extends mxEventSource {
    * cell - <mxCell> that is under the mousepointer.
    * clone - Optional boolean to indicate of cells will be cloned.
    */
-  getDropTarget(cells, evt, cell, clone) {
+  getDropTarget(cells: mxCell[],
+                evt: mxMouseEvent,
+                cell: mxCell | null=null,
+                clone: boolean=false): mxCell | null {
+
     if (!this.isSwimlaneNesting()) {
       for (let i = 0; i < cells.length; i += 1) {
         if (this.isSwimlane(cells[i])) {
@@ -10976,9 +10998,8 @@ class mxGraph extends mxEventSource {
     }
 
     // Checks if parent is dropped into child if not cloning
-    if (clone == null || !clone) {
+    if (!clone) {
       let parent = cell;
-
       while (parent != null && mxUtils.indexOf(cells, parent) < 0) {
         parent = this.model.getParent(parent);
       }
@@ -11010,7 +11031,6 @@ class mxGraph extends mxEventSource {
         parent = this.model.getChildAt(root, 0);
       }
     }
-
     return parent;
   }
 
@@ -11020,7 +11040,7 @@ class mxGraph extends mxEventSource {
    * Sets the <defaultParent> to the given cell. Set this to null to return
    * the first child of the root in getDefaultParent.
    */
-  setDefaultParent(cell: mxCell) {
+  setDefaultParent(cell: mxCell): void {
     this.defaultParent = cell;
   }
 
@@ -11034,11 +11054,10 @@ class mxGraph extends mxEventSource {
    *
    * cell - <mxCell> for which the ancestor swimlane should be returned.
    */
-  getSwimlane(cell: mxCell) {
+  getSwimlane(cell: mxCell): void {
     while (cell != null && !this.isSwimlane(cell)) {
       cell = this.model.getParent(cell);
     }
-
     return cell;
   }
 
@@ -11055,7 +11074,10 @@ class mxGraph extends mxEventSource {
    * parent - <mxCell> that should be used as the root of the recursion.
    * Default is <defaultParent>.
    */
-  getSwimlaneAt(x, y, parent) {
+  getSwimlaneAt(x: number,
+                y: number,
+                parent) {
+
     if (parent == null) {
       parent = this.getCurrentRoot();
 
@@ -11086,7 +11108,6 @@ class mxGraph extends mxEventSource {
         }
       }
     }
-
     return null;
   }
 
@@ -11372,11 +11393,12 @@ class mxGraph extends mxEventSource {
    * need be an ancestral parent, true, or the direct parent, false.
    * Default is false
    */
-  getEdges(cell, parent, incoming, outgoing, includeLoops, recurse) {
+  getEdges(cell: mxCell,
-    incoming = incoming != null ? incoming : true;
+           parent,
-    outgoing = outgoing != null ? outgoing : true;
+           incoming: boolean=true,
-    includeLoops = includeLoops != null ? includeLoops : true;
+           outgoing: boolean=true,
-    recurse = recurse != null ? recurse : false;
+           includeLoops: boolean=true,
+           recurse: boolean=false) {
 
     let edges = [];
     const isCollapsed = this.isCellCollapsed(cell);
@@ -11437,7 +11459,10 @@ class mxGraph extends mxEventSource {
    * parent - <mxCell> the possible parent cell
    * recurse - boolean whether or not to recurse the child ancestors
    */
-  isValidAncestor(cell, parent, recurse) {
+  isValidAncestor(cell: mxCell,
+                  parent: mxCell,
+                  recurse: boolean=false): boolean {
+
     return recurse
       ? this.model.isAncestor(parent, cell)
       : this.model.getParent(cell) == parent;
@@ -12355,7 +12380,7 @@ class mxGraph extends mxEventSource {
    *
    * state - <mxCellState> to create the handler for.
    */
-  createEdgeSegmentHandler(state) {
+  createEdgeSegmentHandler(state: mxCellState) {
     return new mxEdgeSegmentHandler(state);
   }
 
@@ -12368,7 +12393,7 @@ class mxGraph extends mxEventSource {
    *
    * state - <mxCellState> to create the handler for.
    */
-  createElbowEdgeHandler(state) {
+  createElbowEdgeHandler(state: mxCellState) {
     return new mxElbowEdgeHandler(state);
   }
 
@@ -12519,18 +12544,18 @@ class mxGraph extends mxEventSource {
     ) {
       this.eventSource = me.getSource();
 
-      this.mouseMoveRedirect = mxUtils.bind(this, evt => {
+      this.mouseMoveRedirect = evt => {
         this.fireMouseEvent(
           mxEvent.MOUSE_MOVE,
           new mxMouseEvent(evt, this.getStateForTouchEvent(evt))
         );
-      });
+      };
-      this.mouseUpRedirect = mxUtils.bind(this, evt => {
+      this.mouseUpRedirect = evt => {
         this.fireMouseEvent(
           mxEvent.MOUSE_UP,
           new mxMouseEvent(evt, this.getStateForTouchEvent(evt))
         );
-      });
+      };
 
       mxEvent.addGestureListeners(
         this.eventSource,
@@ -12651,7 +12676,7 @@ class mxGraph extends mxEventSource {
    *
    * <mxCellState> - State whose event source should be returned.
    */
-  getEventState(state) {
+  getEventState(state: mxCellState) {
     return state;
   }
 
@@ -12669,12 +12694,14 @@ class mxGraph extends mxEventSource {
    * me - <mxMouseEvent> to be fired.
    * sender - Optional sender argument. Default is this.
    */
-  fireMouseEvent(evtName, me, sender) {
+  fireMouseEvent(evtName: string,
+                 me: mxMouseEvent,
+                 sender: any=this) {
+
     if (this.isEventSourceIgnored(evtName, me)) {
       if (this.tooltipHandler != null) {
         this.tooltipHandler.hide();
       }
-
       return;
     }
 

src/mxgraph/view/graph/mxGraphModel.js

@@ -3,25 +3,25 @@
  * Copyright (c) 2006-2018, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxEventSource from '../util/event/mxEventSource';
+import mxEventSource from '../../util/event/mxEventSource';
-import mxUndoableEdit from '../util/undo/mxUndoableEdit';
+import mxUndoableEdit from '../../util/undo/mxUndoableEdit';
-import mxCellPath from './mxCellPath';
+import mxCellPath from '../cell/mxCellPath';
-import mxDictionary from '../util/datatypes/mxDictionary';
+import mxDictionary from '../../util/datatypes/mxDictionary';
-import mxObjectIdentity from '../util/datatypes/mxObjectIdentity';
+import mxObjectIdentity from '../../util/datatypes/mxObjectIdentity';
-import mxCell from './mxCell';
+import mxCell from '../cell/mxCell';
-import mxUtils from '../util/mxUtils';
+import mxUtils from '../../util/mxUtils';
-import mxEventObject from '../util/event/mxEventObject';
+import mxEventObject from '../../util/event/mxEventObject';
-import mxEvent from '../util/event/mxEvent';
+import mxEvent from '../../util/event/mxEvent';
-import mxPoint from '../util/datatypes/mxPoint';
+import mxPoint from '../../util/datatypes/mxPoint';
 
-import mxChildChange from './atomic_changes/mxChildChange';
+import mxChildChange from '../../atomic_changes/mxChildChange';
-import mxCollapseChange from './atomic_changes/mxCollapseChange';
+import mxCollapseChange from '../../atomic_changes/mxCollapseChange';
-import mxGeometryChange from './atomic_changes/mxGeometryChange';
+import mxGeometryChange from '../../atomic_changes/mxGeometryChange';
-import mxRootChange from './atomic_changes/mxRootChange';
+import mxRootChange from '../../atomic_changes/mxRootChange';
-import mxStyleChange from './atomic_changes/mxStyleChange';
+import mxStyleChange from '../../atomic_changes/mxStyleChange';
-import mxTerminalChange from './atomic_changes/mxTerminalChange';
+import mxTerminalChange from '../../atomic_changes/mxTerminalChange';
-import mxValueChange from './atomic_changes/mxValueChange';
+import mxValueChange from '../../atomic_changes/mxValueChange';
-import mxVisibleChange from './atomic_changes/mxVisibleChange';
+import mxVisibleChange from '../../atomic_changes/mxVisibleChange';
 
 class mxGraphModel extends mxEventSource {
   /**
@@ -458,16 +458,14 @@ class mxGraphModel extends mxEventSource {
    *
    * cell - Optional <mxCell> that specifies the child.
    */
-  getRoot(cell) {
+  getRoot(cell: mxCell | null=null): mxCell {
     let root = cell || this.root;
-
     if (cell != null) {
       while (cell != null) {
         root = cell;
         cell = this.getParent(cell);
       }
     }
-
     return root;
   }
 
@@ -587,7 +585,7 @@ class mxGraphModel extends mxEventSource {
    *
    * cell - <mxCell> whose parent should be returned.
    */
-  getParent(cell) {
+  getParent(cell: mxCell): mxCell {
     return cell != null ? cell.getParent() : null;
   }
 
@@ -2165,5 +2163,5 @@ class mxGraphModel extends mxEventSource {
 // Atomic changes
 //
 export default mxGraphModel;
-import("../io/mxModelCodec");
+import("../../io/mxModelCodec");
 

src/mxgraph/view/graph/mxGraphSelectionModel.ts

@@ -11,7 +11,8 @@ import mxClient from '../../mxClient';
 import mxUtils from '../../util/mxUtils';
 import mxSelectionChange from './mxSelectionChange';
 import mxEvent from '../../util/event/mxEvent';
-import mxCell from "../../model/mxCell";
+import mxCell from "../cell/mxCell";
+import mxGraph from "./mxGraph";
 
 class mxGraphSelectionModel extends mxEventSource {
   /**
@@ -21,7 +22,7 @@ class mxGraphSelectionModel extends mxEventSource {
    * If the resource for this key does not exist then the value is used as
    * the status message. Default is 'done'.
    */
-  doneResource = mxClient.language !== 'none' ? 'done' : '';
+  doneResource: string = mxClient.language !== 'none' ? 'done' : '';
 
   /**
    * Variable: updatingSelectionResource
@@ -30,7 +31,7 @@ class mxGraphSelectionModel extends mxEventSource {
    * being updated. If the resource for this key does not exist then the
    * value is used as the status message. Default is 'updatingSelection'.
    */
-  updatingSelectionResource =
+  updatingSelectionResource: string =
     mxClient.language !== 'none' ? 'updatingSelection' : '';
 
   /**
@@ -38,7 +39,7 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * Reference to the enclosing <mxGraph>.
    */
-  graph = null;
+  graph: mxGraph | null = null;
 
   /**
    * Variable: singleSelection
@@ -46,7 +47,7 @@ class mxGraphSelectionModel extends mxEventSource {
    * Specifies if only one selected item at a time is allowed.
    * Default is false.
    */
-  singleSelection = false;
+  singleSelection: boolean = false;
 
   /**
    * Class: mxGraphSelectionModel
@@ -87,7 +88,7 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * graph - Reference to the enclosing <mxGraph>.
    */
-  constructor(graph) {
+  constructor(graph: mxGraph) {
     super();
 
     this.graph = graph;
@@ -99,7 +100,7 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * Returns <singleSelection> as a boolean.
    */
-  isSingleSelection() {
+  isSingleSelection(): boolean {
     return this.singleSelection;
   }
 
@@ -113,7 +114,7 @@ class mxGraphSelectionModel extends mxEventSource {
    * singleSelection - Boolean that specifies the new value for
    * <singleSelection>.
    */
-  setSingleSelection(singleSelection) {
+  setSingleSelection(singleSelection: boolean): void {
     this.singleSelection = singleSelection;
   }
 
@@ -122,11 +123,10 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * Returns true if the given <mxCell> is selected.
    */
-  isSelected(cell) {
+  isSelected(cell: mxCell): boolean {
     if (cell != null) {
       return mxUtils.indexOf(this.cells, cell) >= 0;
     }
-
     return false;
   }
 
@@ -135,7 +135,7 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * Returns true if no cells are currently selected.
    */
-  isEmpty() {
+  isEmpty(): boolean {
     return this.cells.length === 0;
   }
 
@@ -145,7 +145,7 @@ class mxGraphSelectionModel extends mxEventSource {
    * Clears the selection and fires a <change> event if the selection was not
    * empty.
    */
-  clear() {
+  clear(): void {
     this.changeSelection(null, this.cells);
   }
 
@@ -158,7 +158,7 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * cell - <mxCell> to be selected.
    */
-  setCell(cell) {
+  setCell(cell: mxCell): void {
     if (cell != null) {
       this.setCells([cell]);
     }
@@ -173,20 +173,18 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * cells - Array of <mxCells> to be selected.
    */
-  setCells(cells) {
+  setCells(cells: mxCell[]): void {
     if (cells != null) {
       if (this.singleSelection) {
         cells = [this.getFirstSelectableCell(cells)];
       }
 
       const tmp = [];
-
       for (let i = 0; i < cells.length; i += 1) {
         if (this.graph.isCellSelectable(cells[i])) {
           tmp.push(cells[i]);
         }
       }
-
       this.changeSelection(tmp, this.cells);
     }
   }
@@ -196,7 +194,7 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * Returns the first selectable cell in the given array of cells.
    */
-  getFirstSelectableCell(cells) {
+  getFirstSelectableCell(cells: mxCell[]): mxCell | null {
     if (cells != null) {
       for (let i = 0; i < cells.length; i += 1) {
         if (this.graph.isCellSelectable(cells[i])) {
@@ -204,7 +202,6 @@ class mxGraphSelectionModel extends mxEventSource {
         }
       }
     }
-
     return null;
   }
 
@@ -217,7 +214,7 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * cell - <mxCell> to add to the selection.
    */
-  addCell(cell) {
+  addCell(cell: mxCell | null=null): void {
     if (cell != null) {
       this.addCells([cell]);
     }
@@ -233,17 +230,15 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * cells - Array of <mxCells> to add to the selection.
    */
-  addCells(cells) {
+  addCells(cells: mxCell[]): void {
     if (cells != null) {
       let remove = null;
-
       if (this.singleSelection) {
         remove = this.cells;
         cells = [this.getFirstSelectableCell(cells)];
       }
 
       const tmp = [];
-
       for (let i = 0; i < cells.length; i += 1) {
         if (
           !this.isSelected(cells[i]) &&
@@ -267,7 +262,7 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * cell - <mxCell> to remove from the selection.
    */
-  removeCell(cell) {
+  removeCell(cell: mxCell | null=null): void {
     if (cell != null) {
       this.removeCells([cell]);
     }
@@ -276,16 +271,14 @@ class mxGraphSelectionModel extends mxEventSource {
   /**
    * Function: removeCells
    */
-  removeCells(cells) {
+  removeCells(cells: mxCell[] | null=null): void {
     if (cells != null) {
       const tmp = [];
-
       for (let i = 0; i < cells.length; i += 1) {
         if (this.isSelected(cells[i])) {
           tmp.push(cells[i]);
         }
       }
-
       this.changeSelection(null, tmp);
     }
   }
@@ -301,7 +294,7 @@ class mxGraphSelectionModel extends mxEventSource {
    * remove - Array of <mxCell> to remove from the selection.
    */
   changeSelection(added: mxCell[],
-                  removed: mxCell[]) {
+                  removed: mxCell[]): void {
     if (
       (added != null && added.length > 0 && added[0] != null) ||
       (removed != null && removed.length > 0 && removed[0] != null)
@@ -324,7 +317,7 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * cell - <mxCell> to add to the selection.
    */
-  cellAdded(cell) {
+  cellAdded(cell: mxCell): void {
     if (cell != null && !this.isSelected(cell)) {
       this.cells.push(cell);
     }
@@ -340,10 +333,9 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * cell - <mxCell> to remove from the selection.
    */
-  cellRemoved(cell) {
+  cellRemoved(cell: mxCell): void {
     if (cell != null) {
       const index = mxUtils.indexOf(this.cells, cell);
-
       if (index >= 0) {
         this.cells.splice(index, 1);
       }

src/mxgraph/view/graph/mxGraphView.ts

@@ -22,10 +22,11 @@ import mxImageShape from '../../shape/node/mxImageShape';
 import mxMouseEvent from '../../util/event/mxMouseEvent';
 import mxStyleRegistry from '../style/mxStyleRegistry';
 import mxGraph from "./mxGraph";
-import mxCell from '../../model/mxCell';
+import mxCell from '../cell/mxCell';
 import mxImage from '../../util/image/mxImage';
 import mxCurrentRootChange from "./mxCurrentRootChange";
-import mxGraphModel from '../../model/mxGraphModel';
+import mxGraphModel from './mxGraphModel';
+import mxShape from '../../shape/mxShape';
 
 const validateBool = x => {
   if (x === true || x === false) {
@@ -45,6 +46,10 @@ const validateString = x => {
 }
 
 class mxGraphView extends mxEventSource {
+  // TODO: Document me!
+  backgroundImage: mxImageShape | null;
+  backgroundPageShape: mxShape | null;
+
   EMPTY_POINT = new mxPoint();
 
   _canvas: HTMLElement;
@@ -492,7 +497,7 @@ class mxGraphView extends mxEventSource {
    *
    * cells - Array of <mxCells> whose bounds should be returned.
    */
-  getBounds(cells: [mxCell]): [mxRectangle] {
+  getBounds(cells: mxCell[]): mxRectangle {
     let result = null;
 
     if (cells != null && cells.length > 0) {
@@ -713,7 +718,7 @@ class mxGraphView extends mxEventSource {
    * cell - Optional <mxCell> to be used as the root of the validation.
    * Default is <currentRoot> or the root of the model.
    */
-  validate(cell) {
+  validate(cell: mxCell | null=null) {
     const t0 = mxLog.enter('mxGraphView.validate');
     window.status =
       mxResources.get(this.updatingDocumentResource) ||
@@ -1007,8 +1012,8 @@ class mxGraphView extends mxEventSource {
    * visible - Optional boolean indicating if the cell should be visible. Default
    * is true.
    */
-  validateCell(cell, visible) {
+  validateCell(cell: mxCell,
-    visible = visible != null ? visible : true;
+               visible: boolean=true) {
 
     if (cell != null) {
       visible = visible && this.graph.isCellVisible(cell);
@@ -1029,7 +1034,6 @@ class mxGraphView extends mxEventSource {
         }
       }
     }
-
     return cell;
   }
 
@@ -1100,7 +1104,6 @@ class mxGraphView extends mxEventSource {
         }
       }
     }
-
     return state;
   }
 
@@ -1113,7 +1116,7 @@ class mxGraphView extends mxEventSource {
    *
    * state - <mxCellState> to be updated.
    */
-  updateCellState(state) {
+  updateCellState(state: mxCellState) {
     state.absoluteOffset.x = 0;
     state.absoluteOffset.y = 0;
     state.origin.x = 0;
@@ -1277,7 +1280,7 @@ class mxGraphView extends mxEventSource {
    *
    * state - <mxCellState> whose absolute offset should be updated.
    */
-  updateVertexLabelOffset(state) {
+  updateVertexLabelOffset(state: mxCellState) {
     const h = mxUtils.getValue(
       state.style,
       mxConstants.STYLE_LABEL_POSITION,
@@ -1363,7 +1366,7 @@ class mxGraphView extends mxEventSource {
    *
    * state - <mxCellState> that represents the cell state.
    */
-  stateValidated(state) {
+  stateValidated(state: mxCellState) {
     const fg =
       (this.graph.getModel().isEdge(state.cell) &&
         this.graph.keepEdgesInForeground) ||
@@ -1482,7 +1485,7 @@ class mxGraphView extends mxEventSource {
    *
    * edge - <mxCellState> whose bounds should be updated.
    */
-  updateBoundsFromStencil(state) {
+  updateBoundsFromStencil(state: mxCellState) {
     let previous = null;
 
     if (
@@ -1854,7 +1857,7 @@ class mxGraphView extends mxEventSource {
    *
    * Returns the x-coordinate of the center point for automatic routing.
    */
-  getRoutingCenterX(state) {
+  getRoutingCenterX(state: mxCellState) {
     const f =
       state.style != null
         ? parseFloat(state.style[mxConstants.STYLE_ROUTING_CENTER_X]) || 0
@@ -1867,7 +1870,7 @@ class mxGraphView extends mxEventSource {
    *
    * Returns the y-coordinate of the center point for automatic routing.
    */
-  getRoutingCenterY(state) {
+  getRoutingCenterY(state: mxCellState) {
     const f =
       state.style != null
         ? parseFloat(state.style[mxConstants.STYLE_ROUTING_CENTER_Y]) || 0
@@ -1933,7 +1936,7 @@ class mxGraphView extends mxEventSource {
    *
    * Returns the perimeter function for the given state.
    */
-  getPerimeterFunction(state) {
+  getPerimeterFunction(state: mxCellState) {
     let perimeter = state.style[mxConstants.STYLE_PERIMETER];
 
     // Converts string values to objects
@@ -2031,7 +2034,7 @@ class mxGraphView extends mxEventSource {
    *
    * state - <mxCellState> whose bounds should be updated.
    */
-  updateEdgeBounds(state) {
+  updateEdgeBounds(state: mxCellState) {
     const points = state.absolutePoints;
     const p0 = points[0];
     const pe = points[points.length - 1];
@@ -2268,7 +2271,7 @@ class mxGraphView extends mxEventSource {
    *
    * state - <mxCellState> whose absolute offset should be updated.
    */
-  updateEdgeLabelOffset(state) {
+  updateEdgeLabelOffset(state: mxCellState) {
     const points = state.absolutePoints;
 
     state.absoluteOffset.x = state.getCenterX();

src/mxgraph/view/graph/mxLayoutManager.ts

@@ -7,13 +7,14 @@
 import mxEventSource from '../../util/event/mxEventSource';
 import mxEvent from '../../util/event/mxEvent';
 import mxUtils from '../../util/mxUtils';
-import mxRootChange from '../../model/atomic_changes/mxRootChange';
+import mxRootChange from '../../atomic_changes/mxRootChange';
-import mxChildChange from '../../model/atomic_changes/mxChildChange';
+import mxChildChange from '../../atomic_changes/mxChildChange';
-import mxTerminalChange from '../../model/atomic_changes/mxTerminalChange';
+import mxTerminalChange from '../../atomic_changes/mxTerminalChange';
-import mxGeometryChange from '../../model/atomic_changes/mxGeometryChange';
+import mxGeometryChange from '../../atomic_changes/mxGeometryChange';
-import mxVisibleChange from '../../model/atomic_changes/mxVisibleChange';
+import mxVisibleChange from '../../atomic_changes/mxVisibleChange';
-import mxStyleChange from '../../model/atomic_changes/mxStyleChange';
+import mxStyleChange from '../../atomic_changes/mxStyleChange';
 import mxEventObject from '../../util/event/mxEventObject';
+import mxCell from "../cell/mxCell";
 
 class mxLayoutManager extends mxEventSource {
   /**
@@ -361,8 +362,8 @@ class mxLayoutManager extends mxEventSource {
    *
    * Adds all ancestors of the given cell that have a layout.
    */
-  addAncestorsWithLayout(cell, result) {
+  addAncestorsWithLayout(cell: mxCell,
-    result = result != null ? result : [];
+                         result: mxCell[]=[]): mxCell[] {
 
     if (cell != null) {
       const layout = this.hasLayout(cell);
@@ -385,8 +386,8 @@ class mxLayoutManager extends mxEventSource {
    *
    * Adds all descendants of the given cell that have a layout.
    */
-  addDescendantsWithLayout(cell, result) {
+  addDescendantsWithLayout(cell: mxCell,
-    result = result != null ? result : [];
+                           result: any[]=[]): any[] {
 
     if (cell != null && this.hasLayout(cell)) {
       const model = this.getGraph().getModel();
@@ -400,7 +401,6 @@ class mxLayoutManager extends mxEventSource {
         }
       }
     }
-
     return result;
   }
 
@@ -412,7 +412,7 @@ class mxLayoutManager extends mxEventSource {
    * <mxEvent.BEGIN_UPDATE>, in the second phase layouts for parent cells are
    * executed before layouts for child cells with <mxEvent.END_UPDATE>.
    */
-  executeLayoutForCells(cells) {
+  executeLayoutForCells(cells: mxCell[]): void {
     const sorted = mxUtils.sortCells(cells, false);
     this.layoutCells(sorted, true);
     this.layoutCells(sorted.reverse(), false);
@@ -423,7 +423,9 @@ class mxLayoutManager extends mxEventSource {
    *
    * Executes all layouts which have been scheduled during the changes.
    */
-  layoutCells(cells, bubble) {
+  layoutCells(cells: mxCell[],
+              bubble: boolean=false): void {
+
     if (cells.length > 0) {
       // Invokes the layouts while removing duplicates
       const model = this.getGraph().getModel();
@@ -451,12 +453,12 @@ class mxLayoutManager extends mxEventSource {
    *
    * Executes the given layout on the given parent.
    */
-  executeLayout(cell, bubble) {
+  executeLayout(cell: mxCell,
+                bubble: boolean=false): void {
     const layout = this.getLayout(
       cell,
       bubble ? mxEvent.BEGIN_UPDATE : mxEvent.END_UPDATE
     );
-
     if (layout != null) {
       layout.execute(cell);
     }
@@ -467,7 +469,7 @@ class mxLayoutManager extends mxEventSource {
    *
    * Removes all handlers from the <graph> and deletes the reference to it.
    */
-  destroy() {
+  destroy(): void {
     this.setGraph(null);
   }
 }

src/mxgraph/view/graph/mxSelectionChange.ts

@@ -3,10 +3,10 @@ import mxResources from '../../util/mxResources';
 import mxLog from '../../util/gui/mxLog';
 import mxEvent from '../../util/event/mxEvent';
 import mxGraphSelectionModel from "./mxGraphSelectionModel";
-import mxCell from '../../model/mxCell';
+import mxCell from '../cell/mxCell';
 
 class mxSelectionChange {
-  selectionModel: mxGraphSelectionModel
+  selectionModel: mxGraphSelectionModel;
   added: mxCell[];
   removed: mxCell[];
 

src/mxgraph/view/style/mxPerimeter.ts

@@ -93,7 +93,7 @@ const mxPerimeter = {
   RectanglePerimeter(bounds: mxRectangle,
                      vertex: mxCellState,
                      next: mxPoint,
-                     orthogonal: boolean=false) {
+                     orthogonal: boolean=false): mxPoint {
 
     const cx = bounds.getCenterX();
     const cy = bounds.getCenterY();
@@ -154,7 +154,7 @@ const mxPerimeter = {
   EllipsePerimeter(bounds: mxRectangle,
                    vertex: mxCellState,
                    next: mxPoint,
-                   orthogonal: boolean=false) {
+                   orthogonal: boolean=false): mxPoint {
     const { x } = bounds;
     const { y } = bounds;
     const a = bounds.width / 2;
@@ -166,8 +166,8 @@ const mxPerimeter = {
 
     // Calculates straight line equation through
     // point and ellipse center y = d * x + h
-    const dx = parseInt(px - cx);
+    const dx = parseInt(String(px - cx));
-    const dy = parseInt(py - cy);
+    const dy = parseInt(String(py - cy));
 
     if (dx === 0 && dy !== 0) {
       return new mxPoint(cx, cy + (b * dy) / Math.abs(dy));
@@ -240,7 +240,7 @@ const mxPerimeter = {
   RhombusPerimeter(bounds: mxRectangle,
                    vertex: mxCellState,
                    next: mxPoint,
-                   orthogonal: boolean=false) {
+                   orthogonal: boolean=false): mxPoint {
     const { x } = bounds;
     const { y } = bounds;
     const w = bounds.width;
@@ -300,7 +300,7 @@ const mxPerimeter = {
   TrianglePerimeter(bounds: mxRectangle,
                     vertex: mxCellState,
                     next: mxPoint,
-                    orthogonal: boolean=false) {
+                    orthogonal: boolean=false): mxPoint {
     const direction =
       vertex != null ? vertex.style[mxConstants.STYLE_DIRECTION] : null;
     const vertical =
@@ -430,7 +430,6 @@ const mxPerimeter = {
     if (result == null) {
       result = new mxPoint(cx, cy);
     }
-
     return result;
   },
 
@@ -443,7 +442,7 @@ const mxPerimeter = {
   HexagonPerimeter(bounds: mxRectangle,
                    vertex: mxCellState,
                    next: mxPoint,
-                   orthogonal: boolean=false) {
+                   orthogonal: boolean=false): mxPoint {
 
     const { x } = bounds;
     const { y } = bounds;
@@ -743,7 +742,6 @@ const mxPerimeter = {
     if (result == null) {
       return new mxPoint(cx, cy);
     }
-
     return result;
   },
 };

src/pages/backgrounds/ExampleBase.ts

@@ -0,0 +1,27 @@
+class ExampleBase {
+  props: object;
+
+  constructor(props: object) {
+    this.props = props;
+  }
+
+  appendToElement(element): HTMLElement {
+    const html: string = this.getHTML();
+    const cont: HTMLElement =
+        document.createElement('div');
+    cont.innerHTML = html;
+    this.afterHTMLSet()
+    element.appendChild(cont);
+    return cont;
+  }
+
+  getHTML(): void {
+    throw new Error("Not implemented");
+  }
+
+  afterHTMLSet(): void {
+    throw new Error("Not implemented");
+  }
+}
+
+export default ExampleBase;

src/pages/backgrounds/ExtendCanvas.js

@@ -1,272 +0,0 @@
-/**
- * Copyright (c) 2006-2013, JGraph Ltd
- * Converted to ES9 syntax/React by David Morrissey 2021
- */
-
-import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
-import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxRectangle from '../../mxgraph/util/mxRectangle';
-import mxUtils from '../../mxgraph/util/mxUtils';
-import mxPoint from '../../mxgraph/util/mxPoint';
-
-class ExtendCanvas extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    // A container for the graph
-    return (
-      <>
-        <h1>Extend canvas</h1>
-        This example demonstrates implementing an infinite canvas with
-        scrollbars.
-        <div
-          ref={el => {
-            this.el = el;
-          }}
-          style={{
-            position: 'relative',
-            overflow: 'auto',
-            height: '241px',
-            background: "url('editors/images/grid.gif')",
-            cursor: 'default',
-          }}
-        />
-      </>
-    );
-  }
-
-  componentDidMount() {
-    // Disables the built-in context menu
-    mxEvent.disableContextMenu(this.el);
-
-    /**
-     * Specifies the size of the size for "tiles" to be used for a graph with
-     * scrollbars but no visible background page. A good value is large
-     * enough to reduce the number of repaints that is caused for auto-
-     * translation, which depends on this value, and small enough to give
-     * a small empty buffer around the graph. Default is 400x400.
-     */
-    const scrollTileSize = new mxRectangle(0, 0, 400, 400);
-
-    class MyCustomGraph extends mxGraph {
-      /**
-       * Returns the padding for pages in page view with scrollbars.
-       */
-      getPagePadding() {
-        return new mxPoint(
-          Math.max(0, Math.round(this.container.offsetWidth - 34)),
-          Math.max(0, Math.round(this.container.offsetHeight - 34))
-        );
-      }
-
-      /**
-       * Returns the size of the page format scaled with the page size.
-       */
-      getPageSize() {
-        return this.pageVisible
-          ? new mxRectangle(
-              0,
-              0,
-              this.pageFormat.width * this.pageScale,
-              this.pageFormat.height * this.pageScale
-            )
-          : scrollTileSize;
-      }
-
-      /**
-       * Returns a rectangle describing the position and count of the
-       * background pages, where x and y are the position of the top,
-       * left page and width and height are the vertical and horizontal
-       * page count.
-       */
-      getPageLayout() {
-        const size = this.pageVisible
-          ? this.getPageSize()
-          : scrollTileSize;
-        const bounds = this.getGraphBounds();
-
-        if (bounds.width === 0 || bounds.height === 0) {
-          return new mxRectangle(0, 0, 1, 1);
-        }
-
-        // Computes untransformed graph bounds
-        const x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
-        const y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
-        const w = Math.floor(bounds.width / this.view.scale);
-        const h = Math.floor(bounds.height / this.view.scale);
-
-        const x0 = Math.floor(x / size.width);
-        const y0 = Math.floor(y / size.height);
-        const w0 = Math.ceil((x + w) / size.width) - x0;
-        const h0 = Math.ceil((y + h) / size.height) - y0;
-
-        return new mxRectangle(x0, y0, w0, h0);
-      }
-
-      getPreferredPageSize(bounds, width, height) {
-        const pages = this.getPageLayout();
-        const size = this.getPageSize();
-
-        return new mxRectangle(
-          0,
-          0,
-          pages.width * size.width,
-          pages.height * size.height
-        );
-      }
-
-      sizeDidChange() {
-        if (this.container != null && mxUtils.hasScrollbars(this.container)) {
-          const pages = this.getPageLayout();
-          const pad = this.getPagePadding();
-          const size = this.getPageSize();
-
-          // Updates the minimum graph size
-          const minw = Math.ceil(
-            (2 * pad.x) / this.view.scale + pages.width * size.width
-          );
-          const minh = Math.ceil(
-            (2 * pad.y) / this.view.scale + pages.height * size.height
-          );
-
-          const min = this.minimumGraphSize;
-
-          // LATER: Fix flicker of scrollbar size in IE quirks mode
-          // after delayed call in window.resize event handler
-          if (min == null || min.width !== minw || min.height !== minh) {
-            this.minimumGraphSize = new mxRectangle(0, 0, minw, minh);
-          }
-
-          // Updates auto-translate to include padding and graph size
-          const dx = pad.x / this.view.scale - pages.x * size.width;
-          const dy = pad.y / this.view.scale - pages.y * size.height;
-
-          if (
-            !this.autoTranslate &&
-            (this.view.translate.x !== dx || this.view.translate.y !== dy)
-          ) {
-            this.autoTranslate = true;
-            this.view.x0 = pages.x;
-            this.view.y0 = pages.y;
-
-            // NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE
-            // BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.
-            // SHOULD MOVE TRANSLATE/SCALE TO VIEW.
-            const tx = this.view.translate.x;
-            const ty = this.view.translate.y;
-
-            this.view.setTranslate(dx, dy);
-            this.container.scrollLeft += (dx - tx) * this.view.scale;
-            this.container.scrollTop += (dy - ty) * this.view.scale;
-
-            this.autoTranslate = false;
-            return;
-          }
-          super.sizeDidChange();
-        }
-      }
-    }
-
-    // Creates the graph inside the given container
-    const graph = this.graph = new MyCustomGraph(this.el);
-    graph.panningHandler.ignoreCell = true;
-    graph.setPanning(true);
-
-    // Fits the number of background pages to the graph
-    graph.view.getBackgroundPageBounds = function() {
-      const layout = this.graph.getPageLayout();
-      const page = this.graph.getPageSize();
-
-      return new mxRectangle(
-        this.scale * (this.translate.x + layout.x * page.width),
-        this.scale * (this.translate.y + layout.y * page.height),
-        this.scale * layout.width * page.width,
-        this.scale * layout.height * page.height
-      );
-    };
-
-    /**
-     * Guesses autoTranslate to avoid another repaint (see below).
-     * Works if only the scale of the graph changes or if pages
-     * are visible and the visible pages do not change.
-     */
-    const graphViewValidate = graph.view.validate;
-    graph.view.validate = function() {
-      if (
-        this.graph.container != null &&
-        mxUtils.hasScrollbars(this.graph.container)
-      ) {
-        const pad = this.graph.getPagePadding();
-        const size = this.graph.getPageSize();
-
-        // Updating scrollbars here causes flickering in quirks and is not needed
-        // if zoom method is always used to set the current scale on the graph.
-        const tx = this.translate.x;
-        const ty = this.translate.y;
-        this.translate.x = pad.x / this.scale - (this.x0 || 0) * size.width;
-        this.translate.y = pad.y / this.scale - (this.y0 || 0) * size.height;
-      }
-
-      graphViewValidate.apply(this, arguments);
-    };
-
-    // Enables rubberband selection
-    new mxRubberband(graph);
-
-    // Gets the default parent for inserting new cells. This
-    // is normally the first child of the root (ie. layer 0).
-    const parent = graph.getDefaultParent();
-
-    // Adds cells to the model in a single step
-    graph.batchUpdate(() => {
-      const v1 = graph.insertVertex({
-        parent,
-        value: 'Hello,',
-        position: [20, 20],
-        size: [80, 30],
-      });
-      const v2 = graph.insertVertex({
-        parent,
-        value: 'World!',
-        position: [200, 150],
-        size: [80, 30],
-      });
-      const e1 = graph.insertEdge({
-        parent,
-        source: v1,
-        target: v2,
-      });
-    });
-
-    // Sets initial scrollbar positions
-    window.setTimeout(() => {
-      const bounds = graph.getGraphBounds();
-      const width = Math.max(
-        bounds.width,
-        scrollTileSize.width * graph.view.scale
-      );
-      const height = Math.max(
-        bounds.height,
-        scrollTileSize.height * graph.view.scale
-      );
-      graph.container.scrollTop = Math.floor(
-        Math.max(
-          0,
-          bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4)
-        )
-      );
-      graph.container.scrollLeft = Math.floor(
-        Math.max(
-          0,
-          bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2)
-        )
-      );
-    }, 0);
-  }
-}
-
-export default ExtendCanvas;

src/pages/backgrounds/ExtendCanvas.ts

@@ -0,0 +1,282 @@
+/**
+ * Copyright (c) 2006-2013, JGraph Ltd
+ * Converted to ES9 syntax/React by David Morrissey 2021
+ */
+
+import mxEvent from '../../mxgraph/util/event/mxEvent';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
+import mxGraphView from '../../mxgraph/view/graph/mxGraphView'
+import mxRubberband from '../../mxgraph/handler/mxRubberband';
+import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
+import mxUtils from '../../mxgraph/util/mxUtils';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
+import mxCell from '../../mxgraph/view/cell/mxCell';
+import ExampleBase from "./ExampleBase";
+
+/**
+ * Specifies the size of the size for "tiles" to be used for a graph with
+ * scrollbars but no visible background page. A good value is large
+ * enough to reduce the number of repaints that is caused for auto-
+ * translation, which depends on this value, and small enough to give
+ * a small empty buffer around the graph. Default is 400x400.
+ */
+const scrollTileSize = new mxRectangle(0, 0, 400, 400);
+
+class ExtendCanvas extends ExampleBase {
+  constructor(props) {
+    super(props);
+  }
+
+  getHTML() {
+    // A container for the graph
+    return `
+      <h1>Extend canvas</h1>
+      This example demonstrates implementing an infinite canvas with
+      scrollbars.
+      
+      <div id="el"
+           style="position: relative;
+                  overflow: auto;
+                  height: 241px;
+                  background: url('editors/images/grid.gif');
+                  cursor: default"
+      />
+    `;
+  }
+
+  afterHTMLSet(): void {
+    // Executed after the HTML has been set
+    const el = document.getElementById("el");
+    el.id = '';
+
+    // Disables the built-in context menu
+    mxEvent.disableContextMenu(el);
+
+    // Creates the graph inside the given container
+    const graph: MyCustomGraph = new MyCustomGraph(el);
+    graph.panningHandler.ignoreCell = true;
+    graph.setPanning(true);
+
+    // Enables rubberband selection
+    new mxRubberband(graph);
+
+    // Gets the default parent for inserting new cells. This
+    // is normally the first child of the root (ie. layer 0).
+    const parent = graph.getDefaultParent();
+
+    // Adds cells to the model in a single step
+    graph.batchUpdate(() => {
+      const v1: mxCell = graph.insertVertex({
+        parent,
+        value: 'Hello,',
+        position: [20, 20],
+        size: [80, 30],
+      });
+      const v2: mxCell = graph.insertVertex({
+        parent,
+        value: 'World!',
+        position: [200, 150],
+        size: [80, 30],
+      });
+      const e1: mxCell = graph.insertEdge({
+        parent,
+        source: v1,
+        target: v2,
+      });
+    });
+
+    // Sets initial scrollbar positions
+    window.setTimeout(() => {
+      const bounds: mxRectangle = graph.getGraphBounds();
+      const width: number = Math.max(
+        bounds.width,
+        scrollTileSize.width * graph.view.scale
+      );
+      const height: number = Math.max(
+        bounds.height,
+        scrollTileSize.height * graph.view.scale
+      );
+      graph.container.scrollTop = Math.floor(
+        Math.max(
+          0,
+          bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4)
+        )
+      );
+      graph.container.scrollLeft = Math.floor(
+        Math.max(
+          0,
+          bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2)
+        )
+      );
+    }, 0);
+  }
+}
+
+class MyCustomGraph extends mxGraph {
+  autoTranslate: boolean;
+
+  createGraphView(): mxGraphView {
+    return new MyCustomGraphView(this);
+  }
+
+  /**
+   * Returns the padding for pages in page view with scrollbars.
+   */
+  getPagePadding(): mxPoint {
+    return new mxPoint(
+      Math.max(0, Math.round(this.container.offsetWidth - 34)),
+      Math.max(0, Math.round(this.container.offsetHeight - 34))
+    );
+  }
+
+  /**
+   * Returns the size of the page format scaled with the page size.
+   */
+  getPageSize(): mxRectangle {
+    return this.pageVisible
+      ? new mxRectangle(
+          0,
+          0,
+          this.pageFormat.width * this.pageScale,
+          this.pageFormat.height * this.pageScale
+        )
+      : scrollTileSize;
+  }
+
+  /**
+   * Returns a rectangle describing the position and count of the
+   * background pages, where x and y are the position of the top,
+   * left page and width and height are the vertical and horizontal
+   * page count.
+   */
+  getPageLayout(): mxRectangle {
+    const size: mxRectangle = this.pageVisible
+      ? this.getPageSize()
+      : scrollTileSize;
+    const bounds = this.getGraphBounds();
+
+    if (bounds.width === 0 || bounds.height === 0) {
+      return new mxRectangle(0, 0, 1, 1);
+    }
+
+    // Computes untransformed graph bounds
+    const x: number = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
+    const y: number = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
+    const w: number = Math.floor(bounds.width / this.view.scale);
+    const h: number = Math.floor(bounds.height / this.view.scale);
+
+    const x0: number = Math.floor(x / size.width);
+    const y0: number = Math.floor(y / size.height);
+    const w0: number = Math.ceil((x + w) / size.width) - x0;
+    const h0: number = Math.ceil((y + h) / size.height) - y0;
+
+    return new mxRectangle(x0, y0, w0, h0);
+  }
+
+  getPreferredPageSize(bounds, width, height): mxRectangle {
+    const pages: mxRectangle = this.getPageLayout();
+    const size: mxRectangle = this.getPageSize();
+
+    return new mxRectangle(
+      0,
+      0,
+      pages.width * size.width,
+      pages.height * size.height
+    );
+  }
+
+  sizeDidChange(): mxRectangle {
+    if (this.container != null && mxUtils.hasScrollbars(this.container)) {
+      const pages: mxRectangle = this.getPageLayout();
+      const pad: mxPoint = this.getPagePadding();
+      const size: mxRectangle = this.getPageSize();
+
+      // Updates the minimum graph size
+      const minw: number = Math.ceil(
+        (2 * pad.x) / this.view.scale + pages.width * size.width
+      );
+      const minh: number = Math.ceil(
+        (2 * pad.y) / this.view.scale + pages.height * size.height
+      );
+
+      const min: number = this.minimumGraphSize;
+
+      // LATER: Fix flicker of scrollbar size in IE quirks mode
+      // after delayed call in window.resize event handler
+      if (min == null || min.width !== minw || min.height !== minh) {
+        this.minimumGraphSize = new mxRectangle(0, 0, minw, minh);
+      }
+
+      // Updates auto-translate to include padding and graph size
+      const dx: number = pad.x / this.view.scale - pages.x * size.width;
+      const dy: number = pad.y / this.view.scale - pages.y * size.height;
+
+      if (
+        !this.autoTranslate &&
+        (this.view.translate.x !== dx || this.view.translate.y !== dy)
+      ) {
+        this.autoTranslate = true;
+        this.view.x0 = pages.x;
+        this.view.y0 = pages.y;
+
+        // NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE
+        // BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.
+        // SHOULD MOVE TRANSLATE/SCALE TO VIEW.
+        const tx: number = this.view.translate.x;
+        const ty: number = this.view.translate.y;
+
+        this.view.setTranslate(dx, dy);
+        this.container.scrollLeft += (dx - tx) * this.view.scale;
+        this.container.scrollTop += (dy - ty) * this.view.scale;
+
+        this.autoTranslate = false;
+        return;
+      }
+
+      super.sizeDidChange();
+    }
+  }
+}
+
+class MyCustomGraphView extends mxGraphView {
+  /**
+   * Fits the number of background pages to the graph
+   */
+  getBackgroundPageBounds(): mxRectangle {
+    const layout: mxRectangle = this.graph.getPageLayout();
+    const page: mxRectangle = this.graph.getPageSize();
+
+    return new mxRectangle(
+      this.scale * (this.translate.x + layout.x * page.width),
+      this.scale * (this.translate.y + layout.y * page.height),
+      this.scale * layout.width * page.width,
+      this.scale * layout.height * page.height
+    );
+  }
+
+  /**
+   * Guesses autoTranslate to avoid another repaint (see below).
+   * Works if only the scale of the graph changes or if pages
+   * are visible and the visible pages do not change.
+   */
+  validate(): void {
+    if (
+      this.graph.container != null &&
+      mxUtils.hasScrollbars(this.graph.container)
+    ) {
+      const pad: mxPoint = this.graph.getPagePadding();
+      const size: mxRectangle = this.graph.getPageSize();
+
+      // Updating scrollbars here causes flickering in quirks and is not needed
+      // if zoom method is always used to set the current scale on the graph.
+      //const tx = this.translate.x;
+      //const ty = this.translate.y;
+      this.translate.x = pad.x / this.scale - (this.x0 || 0) * size.width;
+      this.translate.y = pad.y / this.scale - (this.y0 || 0) * size.height;
+    }
+
+    super.validate();
+  };
+}
+
+export default ExtendCanvas;

src/pages/backgrounds/Grid.js

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

src/pages/basic/HelloWorld.js

@@ -4,8 +4,8 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 
 class HelloWorld extends React.Component {

src/pages/basic/Template.js

@@ -9,7 +9,7 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxCodec from '../../mxgraph/io/mxCodec';

src/pages/connections/Anchors.js

@@ -4,109 +4,22 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxShape from '../../mxgraph/shape/mxShape';
-import mxConnectionConstraint from '../../mxgraph/view/mxConnectionConstraint';
+import mxConnectionConstraint from '../../mxgraph/view/connection/mxConnectionConstraint';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxPolyline from '../../mxgraph/shape/mxPolyline';
+import mxPolyline from '../../mxgraph/shape/edge/mxPolyline';
-import mxCellState from '../../mxgraph/view/mxCellState';
+import mxCellState from '../../mxgraph/view/cell/mxCellState';
+import mxGeometry from "../../mxgraph/util/datatypes/mxGeometry";
+import mxConnectionHandler from "../../mxgraph/handler/mxConnectionHandler";
 
 class Anchors extends React.Component {
   constructor(props) {
     super(props);
   }
 
-  componentDidMount() {
-    // Overridden to define per-shape connection points
-    mxGraph.prototype.getAllConnectionConstraints = function(terminal, source) {
-      if (terminal != null && terminal.shape != null) {
-        if (terminal.shape.stencil != null) {
-          if (terminal.shape.stencil.constraints != null) {
-            return terminal.shape.stencil.constraints;
-          }
-        } else if (terminal.shape.constraints != null) {
-          return terminal.shape.constraints;
-        }
-      }
-      return null;
-    };
-
-    // Defines the default constraints for all shapes
-    mxShape.prototype.constraints = [
-      new mxConnectionConstraint(new mxPoint(0.25, 0), true),
-      new mxConnectionConstraint(new mxPoint(0.5, 0), true),
-      new mxConnectionConstraint(new mxPoint(0.75, 0), true),
-      new mxConnectionConstraint(new mxPoint(0, 0.25), true),
-      new mxConnectionConstraint(new mxPoint(0, 0.5), true),
-      new mxConnectionConstraint(new mxPoint(0, 0.75), true),
-      new mxConnectionConstraint(new mxPoint(1, 0.25), true),
-      new mxConnectionConstraint(new mxPoint(1, 0.5), true),
-      new mxConnectionConstraint(new mxPoint(1, 0.75), true),
-      new mxConnectionConstraint(new mxPoint(0.25, 1), true),
-      new mxConnectionConstraint(new mxPoint(0.5, 1), true),
-      new mxConnectionConstraint(new mxPoint(0.75, 1), true),
-    ];
-
-    // Edges have no connection points
-    mxPolyline.prototype.constraints = null;
-
-    // Disables the built-in context menu
-    mxEvent.disableContextMenu(this.el);
-
-    // Creates the graph inside the given this.el
-    const graph = new mxGraph(this.el);
-    graph.setConnectable(true);
-
-    // Enables connect preview for the default edge style
-    graph.connectionHandler.createEdgeState = function(me) {
-      const edge = graph.createEdge(null, null, null, null, null);
-      return new mxCellState(
-        this.graph.view,
-        edge,
-        this.graph.getCellStyle(edge)
-      );
-    };
-
-    // Specifies the default edge style
-    graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =
-      'orthogonalEdgeStyle';
-
-    // Enables rubberband selection
-    new mxRubberband(graph);
-
-    // Gets the default parent for inserting new cells. This
-    // is normally the first child of the root (ie. layer 0).
-    const parent = graph.getDefaultParent();
-
-    // Adds cells to the model in a single step
-    graph.getModel().beginUpdate();
-    try {
-      const v1 = graph.insertVertex({
-        parent,
-        value: 'Hello,',
-        position: [20, 20],
-        size: [80, 30],
-      });
-      const v2 = graph.insertVertex({
-        parent,
-        value: 'World!',
-        position: [200, 150],
-        size: [80, 30],
-      });
-      const e1 = graph.insertEdge({
-        parent,
-        value: '',
-        position: v1,
-        size: v2,
-      });
-    } finally {
-      // Updates the display
-      graph.getModel().endUpdate();
-    }
-  }
-
   render() {
     // A container for the graph
     return (
@@ -129,6 +42,103 @@ class Anchors extends React.Component {
       </>
     );
   };
+
+  componentDidMount() {
+    // Disables the built-in context menu
+    mxEvent.disableContextMenu(this.el);
+
+    class MyCustomConnectionHandler extends mxConnectionHandler {
+      // Enables connect preview for the default edge style
+      createEdgeState(me) {
+        const edge = graph.createEdge(null, null, null, null, null);
+        return new mxCellState(
+          this.graph.view,
+          edge,
+          this.graph.getCellStyle(edge)
+        );
+      }
+    }
+
+    class MyCustomGraph extends mxGraph {
+      getAllConnectionConstraints(terminal, source) {
+        // Overridden to define per-shape connection points
+        if (terminal != null && terminal.shape != null) {
+          if (terminal.shape.stencil != null) {
+            if (terminal.shape.stencil.constraints != null) {
+              return terminal.shape.stencil.constraints;
+            }
+          } else if (terminal.shape.constraints != null) {
+            return terminal.shape.constraints;
+          }
+        }
+        return null;
+      }
+
+      createConnectionHandler() {
+        return new MyCustomConnectionHandler(this);
+      }
+    }
+
+    class MyCustomGeometryClass extends mxGeometry {
+      // Defines the default constraints for the vertices
+      constraints = [
+        new mxConnectionConstraint(new mxPoint(0.25, 0), true),
+        new mxConnectionConstraint(new mxPoint(0.5, 0), true),
+        new mxConnectionConstraint(new mxPoint(0.75, 0), true),
+        new mxConnectionConstraint(new mxPoint(0, 0.25), true),
+        new mxConnectionConstraint(new mxPoint(0, 0.5), true),
+        new mxConnectionConstraint(new mxPoint(0, 0.75), true),
+        new mxConnectionConstraint(new mxPoint(1, 0.25), true),
+        new mxConnectionConstraint(new mxPoint(1, 0.5), true),
+        new mxConnectionConstraint(new mxPoint(1, 0.75), true),
+        new mxConnectionConstraint(new mxPoint(0.25, 1), true),
+        new mxConnectionConstraint(new mxPoint(0.5, 1), true),
+        new mxConnectionConstraint(new mxPoint(0.75, 1), true),
+      ];
+    }
+
+    // Edges have no connection points
+    mxPolyline.prototype.constraints = null;
+
+    // Creates the graph inside the given this.el
+    const graph = new MyCustomGraph(this.el);
+    graph.setConnectable(true);
+
+    // Specifies the default edge style
+    graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =
+      'orthogonalEdgeStyle';
+
+    // Enables rubberband selection
+    new mxRubberband(graph);
+
+    // Gets the default parent for inserting new cells. This
+    // is normally the first child of the root (ie. layer 0).
+    const parent = graph.getDefaultParent();
+
+    // Adds cells to the model in a single step
+    graph.batchUpdate(() => {
+      const v1 = graph.insertVertex({
+        parent,
+        value: 'Hello,',
+        position: [20, 20],
+        size: [80, 30],
+        geometryClass: MyCustomGeometryClass,
+      });
+      const v2 = graph.insertVertex({
+        parent,
+        value: 'World!',
+        position: [200, 150],
+        size: [80, 30],
+        geometryClass: MyCustomGeometryClass,
+      });
+      const e1 = graph.insertEdge({
+        parent,
+        value: '',
+        position: v1,
+        size: v2,
+      });
+    });
+  }
 }
 
 export default Anchors;

src/pages/connections/EdgeTolerance.js

@@ -4,8 +4,8 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxUtils from '../../mxgraph/util/mxUtils';
 
 class EdgeTolerance extends React.Component {

src/pages/connections/FixedPoints.js

@@ -4,15 +4,15 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxConstraintHandler from '../../mxgraph/handler/mxConstraintHandler';
 import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
 import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
-import mxConnectionConstraint from '../../mxgraph/view/mxConnectionConstraint';
+import mxConnectionConstraint from '../../mxgraph/view/connection/mxConnectionConstraint';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxCellState from '../../mxgraph/view/mxCellState';
+import mxCellState from '../../mxgraph/view/cell/mxCellState';
 
 class FixedPoints extends React.Component {
   constructor(props) {

src/pages/connections/HelloPort.js

@@ -4,12 +4,12 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
 import mxCodec from '../../mxgraph/io/mxCodec';
 import mxUtils from '../../mxgraph/util/mxUtils';
 

src/pages/connections/Orthogonal.js

@@ -4,16 +4,16 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
 import mxGuide from '../../mxgraph/util/mxGuide';
 import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
 import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
-import mxGraphView from '../../mxgraph/view/mxGraphView';
+import mxGraphView from '../../mxgraph/view/graph/mxGraphView';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxCellState from '../../mxgraph/view/mxCellState';
+import mxCellState from '../../mxgraph/view/cell/mxCellState';
 
 class Orthogonal extends React.Component {
   constructor(props) {

src/pages/connections/PortRefs.js

@@ -4,16 +4,16 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxConstraintHandler from '../../mxgraph/handler/mxConstraintHandler';
-import mxImage from '../../mxgraph/util/mxImage';
+import mxImage from '../../mxgraph/util/image/mxImage';
 import mxShape from '../../mxgraph/shape/mxShape';
 import mxTriangle from '../../mxgraph/shape/mxTriangle';
 import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
-import mxConnectionConstraint from '../../mxgraph/view/mxConnectionConstraint';
+import mxConnectionConstraint from '../../mxgraph/view/connection/mxConnectionConstraint';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
 import mxConstants from '../../mxgraph/util/mxConstants';
 
 class PortRefs extends React.Component {

src/pages/dnd_copypaste/Clipboard.js

@@ -4,14 +4,14 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxUtils from '../../mxgraph/util/mxUtils';
-import mxClipboard from '../../mxgraph/util/mxClipboard';
+import mxClipboard from '../../mxgraph/util/storage/mxClipboard';
 import mxClient from '../../mxgraph/mxClient';
 import mxCodec from '../../mxgraph/io/mxCodec';
-import mxGraphModel from '../../mxgraph/model/mxGraphModel';
+import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
 
 class Clipboard extends React.Component {
   constructor(props) {

src/pages/dnd_copypaste/DragSource.js

@@ -4,13 +4,13 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxCell from '../../mxgraph/model/mxCell';
+import mxCell from '../../mxgraph/view/cell/mxCell';
-import mxGeometry from '../../mxgraph/model/mxGeometry';
+import mxGeometry from '../../mxgraph/util/datatypes/mxGeometry';
 import mxUtils from '../../mxgraph/util/mxUtils';
-import mxDragSource from '../../mxgraph/util/mxDragSource';
+import mxDragSource from '../../mxgraph/util/drag_pan/mxDragSource';
 import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
 import mxGuide from '../../mxgraph/util/mxGuide';
 import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';

src/pages/dnd_copypaste/Drop.js

@@ -4,8 +4,8 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxClient from '../../mxgraph/mxClient';

src/pages/editing/Editing.js

@@ -4,8 +4,8 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
 

src/pages/effects/Animation.js

@@ -4,8 +4,8 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
 
 class Animation extends React.Component {
   constructor(props) {

src/pages/effects/Morph.js

@@ -4,10 +4,10 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxMorphing from '../../mxgraph/util/mxMorphing';
+import mxMorphing from '../../mxgraph/util/animate/mxMorphing';
 import mxUtils from '../../mxgraph/util/mxUtils';
 
 class Morph extends React.Component {

src/pages/effects/Overlays.js

@@ -4,11 +4,11 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxCellTracker from '../../mxgraph/handler/mxCellTracker';
-import mxCellOverlay from '../../mxgraph/view/mxCellOverlay';
+import mxCellOverlay from '../../mxgraph/view/cell/mxCellOverlay';
-import mxImage from '../../mxgraph/util/mxImage';
+import mxImage from '../../mxgraph/util/image/mxImage';
 import mxUtils from '../../mxgraph/util/mxUtils';
 
 class Overlays extends React.Component {

src/pages/events/Boundary.js

@@ -4,11 +4,11 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
 import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
 import mxUtils from '../../mxgraph/util/mxUtils';
 

src/pages/events/Events.js

@@ -4,17 +4,17 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
 import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
-import mxLayoutManager from '../../mxgraph/view/mxLayoutManager';
+import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
 import mxParallelEdgeLayout from '../../mxgraph/layout/mxParallelEdgeLayout';
 import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
-import mxImage from '../../mxgraph/util/mxImage';
+import mxImage from '../../mxgraph/util/image/mxImage';
 import mxClient from '../../mxgraph/mxClient';
 
 class Events extends React.Component {

src/pages/icons_images/ContextIcons.js

@@ -4,8 +4,8 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxVertexHandler from '../../mxgraph/handler/mxVertexHandler';
 import mxUtils from '../../mxgraph/util/mxUtils';

src/pages/icons_images/Control.js

@@ -4,14 +4,14 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxUtils from '../../mxgraph/util/mxUtils';
-import mxRectangle from '../../mxgraph/util/mxRectangle';
+import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
-import mxCellRenderer from '../../mxgraph/view/mxCellRenderer';
+import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
-import mxImageShape from '../../mxgraph/shape/mxImageShape';
+import mxImageShape from '../../mxgraph/shape/node/mxImageShape';
-import mxImage from '../../mxgraph/util/mxImage';
+import mxImage from '../../mxgraph/util/image/mxImage';
 
 class Control extends React.Component {
   constructor(props) {

src/pages/icons_images/FixedIcon.js

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

src/pages/icons_images/HoverIcons.js

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

src/pages/icons_images/Images.js

@@ -4,14 +4,14 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxConstants from '../../mxgraph/util/mxConstants';
 import mxUtils from '../../mxgraph/util/mxUtils';
-import mxRectangle from '../../mxgraph/util/mxRectangle';
+import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
-import mxImage from '../../mxgraph/util/mxImage';
+import mxImage from '../../mxgraph/util/image/mxImage';
-import mxPerimeter from '../../mxgraph/view/mxPerimeter';
+import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
 
 class Images extends React.Component {
   constructor(props) {

src/pages/icons_images/Indicators.js

@@ -4,9 +4,9 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
 import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
 
 class Indicators extends React.Component {

src/pages/icons_images/Markers.js

@@ -4,14 +4,14 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxCellRenderer from '../../mxgraph/view/mxCellRenderer';
+import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
 import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
 import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
-import mxCylinder from '../../mxgraph/shape/mxCylinder';
+import mxCylinder from '../../mxgraph/shape/node/mxCylinder';
-import mxMarker from '../../mxgraph/shape/mxMarker';
+import mxMarker from '../../mxgraph/shape/edge/mxMarker';
-import mxArrow from '../../mxgraph/shape/mxArrow';
+import mxArrow from '../../mxgraph/shape/edge/mxArrow';
 
 class Markers extends React.Component {
   constructor(props) {

src/pages/labels/LabelPosition.js

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 
 class LabelPosition extends React.Component {
   constructor(props) {

src/pages/labels/Labels.js

@@ -4,11 +4,11 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxRectangle from '../../mxgraph/util/mxRectangle';
+import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
 
 class Labels extends React.Component {
   constructor(props) {

src/pages/labels/Perimeter.js

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

src/pages/labels/SecondLabel.js

@@ -4,12 +4,12 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxUtils from '../../mxgraph/util/mxUtils';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxRectangle from '../../mxgraph/util/mxRectangle';
+import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxRectangleShape from '../../mxgraph/shape/mxRectangleShape';
+import mxRectangleShape from '../../mxgraph/shape/node/mxRectangleShape';
 import mxText from '../../mxgraph/shape/mxText';
 
 class SecondLabel extends React.Component {

src/pages/labels/Wrapping.js

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 
 class Wrapping extends React.Component {
   constructor(props) {

src/pages/layout/AutoLayout.js

@@ -4,19 +4,19 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxClient from '../../mxgraph/mxClient';
-import mxMorphing from '../../mxgraph/util/mxMorphing';
+import mxMorphing from '../../mxgraph/util/animate/mxMorphing';
 import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
 import mxHierarchicalLayout from '../../mxgraph/layout/hierarchical/mxHierarchicalLayout';
 import mxConstants from '../../mxgraph/util/mxConstants';
 import mxUtils from '../../mxgraph/util/mxUtils';
-import mxCellOverlay from '../../mxgraph/view/mxCellOverlay';
+import mxCellOverlay from '../../mxgraph/view/cell/mxCellOverlay';
-import mxImage from '../../mxgraph/util/mxImage';
+import mxImage from '../../mxgraph/util/image/mxImage';
-import mxEventObject from '../../mxgraph/util/mxEventObject';
+import mxEventObject from '../../mxgraph/util/event/mxEventObject';
-import mxCellRenderer from '../../mxgraph/view/mxCellRenderer';
+import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
 
 class AutoLayout extends React.Component {
   constructor(props) {

src/pages/layout/Collapse.js

@@ -4,9 +4,9 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxRectangle from '../../mxgraph/util/mxRectangle';
+import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
-import mxGraphModel from '../../mxgraph/model/mxGraphModel';
+import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
 
 class Collapse extends React.Component {
   constructor(props) {

src/pages/layout/Constituent.js

@@ -4,8 +4,8 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
 

src/pages/layout/Folding.js

@@ -4,10 +4,10 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
-import mxLayoutManager from '../../mxgraph/view/mxLayoutManager';
+import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
 import mxStackLayout from '../../mxgraph/layout/mxStackLayout';
 
 class Folding extends React.Component {

src/pages/layout/Groups.js

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
 import mxPopupMenuHandler from '../../mxgraph/handler/mxPopupMenuHandler';

src/pages/layout/Handles.js

@@ -4,15 +4,15 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxVertexHandler from '../../mxgraph/handler/mxVertexHandler';
-import mxCellRenderer from '../../mxgraph/view/mxCellRenderer';
+import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
-import mxRectangle from '../../mxgraph/util/mxRectangle';
+import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
-import mxCylinder from '../../mxgraph/shape/mxCylinder';
+import mxCylinder from '../../mxgraph/shape/node/mxCylinder';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
 import mxHandle from '../../mxgraph/handler/mxHandle';
 
 class Handles extends React.Component {

src/pages/layout/HierarchicalLayout.js

@@ -4,13 +4,13 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxHierarchicalLayout from '../../mxgraph/layout/hierarchical/mxHierarchicalLayout';
 import mxFastOrganicLayout from '../../mxgraph/layout/mxFastOrganicLayout';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxPerimeter from '../../mxgraph/view/mxPerimeter';
+import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
 import mxUtils from '../../mxgraph/util/mxUtils';
 
 class HierarchicalLayout extends React.Component {

src/pages/layout/Layers.js

@@ -4,10 +4,10 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxCell from '../../mxgraph/model/mxCell';
+import mxCell from '../../mxgraph/view/cell/mxCell';
-import mxGraphModel from '../../mxgraph/model/mxGraphModel';
+import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
 import mxUtils from '../../mxgraph/util/mxUtils';
 
 class Layers extends React.Component {

src/pages/layout/OrgChart.js

@@ -7,23 +7,23 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxPrintPreview from '../../mxgraph/view/mxPrintPreview';
+import mxPrintPreview from '../../mxgraph/view/graph/mxPrintPreview';
 import mxUtils from '../../mxgraph/util/mxUtils';
-import mxCellOverlay from '../../mxgraph/view/mxCellOverlay';
+import mxCellOverlay from '../../mxgraph/view/cell/mxCellOverlay';
-import mxImage from '../../mxgraph/util/mxImage';
+import mxImage from '../../mxgraph/util/image/mxImage';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxWindow from '../../mxgraph/util/mxWindow';
+import mxWindow from '../../mxgraph/util/gui/mxWindow';
-import mxToolbar from '../../mxgraph/util/mxToolbar';
+import mxToolbar from '../../mxgraph/util/gui/mxToolbar';
-import mxLayoutManager from '../../mxgraph/view/mxLayoutManager';
+import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
-import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
 import mxCompactTreeLayout from '../../mxgraph/layout/mxCompactTreeLayout';
 import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
 import mxClient from '../../mxgraph/mxClient';
-import mxOutline from '../../mxgraph/view/mxOutline';
+import mxOutline from '../../mxgraph/view/graph/mxOutline';
 
 class OrgChart extends React.Component {
   constructor(props) {

src/pages/layout/RadialTreeLayout.js

@@ -4,9 +4,9 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxPerimeter from '../../mxgraph/view/mxPerimeter';
+import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
 import mxConstants from '../../mxgraph/util/mxConstants';
 import mxRadialTreeLayout from '../../mxgraph/layout/mxRadialTreeLayout';
 

src/pages/layout/SwimLanes.js

@@ -4,21 +4,21 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
 import mxStackLayout from '../../mxgraph/layout/mxStackLayout';
-import mxSwimlaneManager from '../../mxgraph/view/mxSwimlaneManager';
+import mxSwimlaneManager from '../../mxgraph/view/graph/mxSwimlaneManager';
-import mxGraphModel from '../../mxgraph/model/mxGraphModel';
+import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxPerimeter from '../../mxgraph/view/mxPerimeter';
+import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxEditor from '../../mxgraph/editor/mxEditor';
 import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
-import mxImage from '../../mxgraph/util/mxImage';
+import mxImage from '../../mxgraph/util/image/mxImage';
-import mxLayoutManager from '../../mxgraph/view/mxLayoutManager';
+import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
-import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
 
 class SwimLanes extends React.Component {
   constructor(props) {

src/pages/layout/Tree.js

@@ -4,20 +4,20 @@
  */
 
 import React from 'react';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
-import mxPoint from '../../mxgraph/util/mxPoint';
+import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxGraphView from '../../mxgraph/view/mxGraphView';
+import mxGraphView from '../../mxgraph/view/graph/mxGraphView';
-import mxCellRenderer from '../../mxgraph/view/mxCellRenderer';
+import mxCellRenderer from '../../mxgraph/view/cell/mxCellRenderer';
-import mxCylinder from '../../mxgraph/shape/mxCylinder';
+import mxCylinder from '../../mxgraph/shape/node/mxCylinder';
-import mxImage from '../../mxgraph/util/mxImage';
+import mxImage from '../../mxgraph/util/image/mxImage';
 import mxConstants from '../../mxgraph/util/mxConstants';
 import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
 import mxCompactTreeLayout from '../../mxgraph/layout/mxCompactTreeLayout';
-import mxLayoutManager from '../../mxgraph/view/mxLayoutManager';
+import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
-import mxRectangle from '../../mxgraph/util/mxRectangle';
+import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxClient from '../../mxgraph/mxClient';
-import mxEdgeStyle from '../../mxgraph/view/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
 
 class Tree extends React.Component {
   constructor(props) {

src/pages/misc/DynamicLoading.js

@@ -4,14 +4,14 @@
  */
 
 import React from 'react';
-import mxEvent from '../../mxgraph/util/mxEvent';
+import mxEvent from '../../mxgraph/util/event/mxEvent';
-import mxGraph from '../../mxgraph/view/mxGraph';
+import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxText from '../../mxgraph/shape/mxText';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxConstants from '../../mxgraph/util/mxConstants';
 import mxCodec from '../../mxgraph/io/mxCodec';
-import mxEffects from '../../mxgraph/util/mxEffects';
+import mxEffects from '../../mxgraph/util/animate/mxEffects';
-import mxPerimeter from '../../mxgraph/view/mxPerimeter';
+import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
 
 class DynamicLoading extends React.Component {
   constructor(props) {