From 40d12f97457a8817f364d21446c6c8d25f9d3ecf Mon Sep 17 00:00:00 2001
From: mcyph <20507948+mcyph@users.noreply.github.com>
Date: Sat, 5 Jun 2021 17:24:20 +1000
Subject: [PATCH] removed ts check comments which match and converted mxCell[]
 references to mxCellArray

---
 .../src/atomic_changes/mxSelectionChange.ts   |    9 +-
 .../{mxStylesheet.js => mxStylesheet.ts}      |   45 +-
 packages/core/src/util/storage/mxClipboard.ts |   34 +-
 packages/core/src/view/cell/mxCell.ts         |  145 +-
 .../view/cell/{mxCells.ts => mxCellArray.ts}  |   59 +-
 .../{mxMultiplicity.js => mxMultiplicity.ts}  |   86 +-
 packages/core/src/view/graph/StyleMap.ts      | 1164 +++++++++++++++++
 packages/core/src/view/graph/mxGraph.ts       |  784 +++--------
 packages/core/src/view/graph/mxGraphModel.ts  |  324 +----
 .../src/view/graph/mxGraphSelectionModel.ts   |   56 +-
 packages/core/src/view/graph/mxGraphView.ts   |   20 +-
 .../core/src/view/graph/mxLayoutManager.ts    |   62 +-
 packages/core/src/view/graph/mxOutline.ts     |   47 +-
 .../{mxPrintPreview.js => mxPrintPreview.ts}  |    0
 .../core/src/view/graph/mxSwimlaneManager.ts  |   28 +-
 15 files changed, 1607 insertions(+), 1256 deletions(-)
 rename packages/core/src/util/datatypes/style/{mxStylesheet.js => mxStylesheet.ts} (86%)
 rename packages/core/src/view/cell/{mxCells.ts => mxCellArray.ts} (81%)
 rename packages/core/src/view/connection/{mxMultiplicity.js => mxMultiplicity.ts} (81%)
 create mode 100644 packages/core/src/view/graph/StyleMap.ts
 rename packages/core/src/view/graph/{mxPrintPreview.js => mxPrintPreview.ts} (100%)

diff --git a/packages/core/src/atomic_changes/mxSelectionChange.ts b/packages/core/src/atomic_changes/mxSelectionChange.ts
index 5cc2af7ee..6885bdcca 100644
--- a/packages/core/src/atomic_changes/mxSelectionChange.ts
+++ b/packages/core/src/atomic_changes/mxSelectionChange.ts
@@ -4,6 +4,7 @@ import mxLog from '../util/gui/mxLog';
 import mxEvent from '../util/event/mxEvent';
 import mxGraphSelectionModel from '../view/graph/mxGraphSelectionModel';
 import mxCell from '../view/cell/mxCell';
+import mxCellArray from "../view/cell/mxCellArray";
 
 /**
  * @class mxSelectionChange
@@ -12,8 +13,8 @@ import mxCell from '../view/cell/mxCell';
 class mxSelectionChange {
   constructor(
     selectionModel: mxGraphSelectionModel,
-    added: mxCell[] = [],
-    removed: mxCell[] = []
+    added: mxCellArray = new mxCellArray(),
+    removed: mxCellArray = new mxCellArray()
   ) {
     this.selectionModel = selectionModel;
     this.added = added.slice();
@@ -22,9 +23,9 @@ class mxSelectionChange {
 
   selectionModel: mxGraphSelectionModel;
 
-  added: mxCell[];
+  added: mxCellArray;
 
-  removed: mxCell[];
+  removed: mxCellArray;
 
   /**
    * Changes the current root of the view.
diff --git a/packages/core/src/util/datatypes/style/mxStylesheet.js b/packages/core/src/util/datatypes/style/mxStylesheet.ts
similarity index 86%
rename from packages/core/src/util/datatypes/style/mxStylesheet.js
rename to packages/core/src/util/datatypes/style/mxStylesheet.ts
index 78980691b..ec79f7118 100644
--- a/packages/core/src/util/datatypes/style/mxStylesheet.js
+++ b/packages/core/src/util/datatypes/style/mxStylesheet.ts
@@ -15,6 +15,7 @@ import {
 import mxPerimeter from './mxPerimeter';
 import mxUtils from '../../mxUtils';
 import { clone } from '../../mxCloneUtils';
+import StyleMap from "../../../view/graph/StyleMap";
 
 /**
  * @class mxStylesheet
@@ -67,7 +68,7 @@ import { clone } from '../../mxCloneUtils';
  */
 class mxStylesheet {
   constructor() {
-    this.styles = {};
+    this.styles = new StyleMap();
 
     this.putDefaultVertexStyle(this.createDefaultVertexStyle());
     this.putDefaultEdgeStyle(this.createDefaultEdgeStyle());
@@ -77,15 +78,13 @@ class mxStylesheet {
    * Maps from names to cell styles. Each cell style is a map of key,
    * value pairs.
    */
-  // styles: StyleMap;
-  styles;
+  styles: StyleMap;
 
   /**
    * Creates and returns the default vertex style.
    */
-  // createDefaultVertexStyle(): StyleMap;
-  createDefaultVertexStyle() {
-    const style = {};
+  createDefaultVertexStyle(): StyleMap {
+    const style = new StyleMap();
     style.shape = SHAPE_RECTANGLE;
     style.perimeter = mxPerimeter.RectanglePerimeter;
     style.verticalAlign = ALIGN_MIDDLE;
@@ -99,9 +98,8 @@ class mxStylesheet {
   /**
    * Creates and returns the default edge style.
    */
-  // createDefaultEdgeStyle(): StyleMap;
-  createDefaultEdgeStyle() {
-    const style = {};
+  createDefaultEdgeStyle(): StyleMap {
+    const style = new StyleMap();
     style.shape = SHAPE_CONNECTOR;
     style.endArrow = ARROW_CLASSIC;
     style.verticalAlign = ALIGN_MIDDLE;
@@ -116,33 +114,29 @@ class mxStylesheet {
    * stylename.
    * @param style Key, value pairs that define the style.
    */
-  // putDefaultVertexStyle(style: StyleMap): void;
-  putDefaultVertexStyle(style) {
+  putDefaultVertexStyle(style: StyleMap): void {
     this.putCellStyle('defaultVertex', style);
   }
 
   /**
    * Sets the default style for edges using defaultEdge as the stylename.
    */
-  // putDefaultEdgeStyle(style: StyleMap): void;
-  putDefaultEdgeStyle(style) {
+  putDefaultEdgeStyle(style: StyleMap): void {
     this.putCellStyle('defaultEdge', style);
   }
 
   /**
    * Returns the default style for vertices.
    */
-  // getDefaultVertexStyle(): StyleMap;
-  getDefaultVertexStyle() {
-    return this.styles.defaultVertex;
+  getDefaultVertexStyle(): StyleMap {
+    return <StyleMap>this.styles.defaultVertex;
   }
 
   /**
    * Sets the default style for edges.
    */
-  // getDefaultEdgeStyle(): StyleMap;
-  getDefaultEdgeStyle() {
-    return this.styles.defaultEdge;
+  getDefaultEdgeStyle(): StyleMap {
+    return <StyleMap>this.styles.defaultEdge;
   }
 
   /**
@@ -178,8 +172,7 @@ class mxStylesheet {
    * @param name Name for the style to be stored.
    * @param style Key, value pairs that define the style.
    */
-  // putCellStyle(name: string, style: StyleMap): void;
-  putCellStyle(name, style) {
+  putCellStyle(name: string, style: StyleMap): void {
     this.styles[name] = style;
   }
 
@@ -190,8 +183,9 @@ class mxStylesheet {
    * @param name String of the form [(stylename|key=value);] that represents the style.
    * @param defaultStyle Default style to be returned if no style can be found.
    */
-  // getCellStyle(name: string, defaultStyle?: StyleMap): StyleMap;
-  getCellStyle(name, defaultStyle) {
+  getCellStyle(name: string,
+               defaultStyle: StyleMap=new StyleMap()): StyleMap {
+
     let style = defaultStyle;
 
     if (name != null && name.length > 0) {
@@ -200,12 +194,11 @@ class mxStylesheet {
       if (style != null && name.charAt(0) !== ';') {
         style = clone(style);
       } else {
-        style = {};
+        style = new StyleMap();
       }
 
       // Parses each key, value pair into the existing style
-      for (let i = 0; i < pairs.length; i += 1) {
-        const tmp = pairs[i];
+      for (const tmp of pairs) {
         const pos = tmp.indexOf('=');
 
         if (pos >= 0) {
diff --git a/packages/core/src/util/storage/mxClipboard.ts b/packages/core/src/util/storage/mxClipboard.ts
index e0451b1b9..9fe69ee60 100644
--- a/packages/core/src/util/storage/mxClipboard.ts
+++ b/packages/core/src/util/storage/mxClipboard.ts
@@ -5,9 +5,9 @@
  * Type definitions from the typed-mxgraph project
  */
 
-import mxCell from '../../view/cell/mxCell';
 import mxGraph from '../../view/graph/mxGraph';
 import mxGraphModel from "../../view/graph/mxGraphModel";
+import mxCellArray from "../../view/cell/mxCellArray";
 
 /**
  * @class
@@ -86,42 +86,36 @@ class mxClipboard {
    * Defines the step size to offset the cells after each paste operation.
    * Default is 10.
    */
-  // static STEPSIZE: number;
   static STEPSIZE: number = 10;
 
   /**
    * Counts the number of times the clipboard data has been inserted.
    */
-  // static insertCount: number;
   static insertCount: number = 1;
 
   /**
    * Holds the array of {@link mxCell} currently in the clipboard.
    */
-  // static cells: Array<mxCell>;
-  static cells: mxCell[] | null = null;
+  static cells: mxCellArray | null = null;
 
   /**
    * Sets the cells in the clipboard. Fires a {@link mxEvent.CHANGE} event.
    */
-  // static setCells(cells: Array<mxCell>): void;
-  static setCells(cells: mxCell[] | null) {
+  static setCells(cells: mxCellArray | null): void {
     mxClipboard.cells = cells;
   }
 
   /**
    * Returns  the cells in the clipboard.
    */
-  // static getCells(): Array<mxCell>;
-  static getCells() {
+  static getCells(): mxCellArray | null {
     return mxClipboard.cells;
   }
 
   /**
    * Returns true if the clipboard currently has not data stored.
    */
-  // static isEmpty(): boolean;
-  static isEmpty() {
+  static isEmpty(): boolean {
     return mxClipboard.getCells() == null;
   }
 
@@ -133,8 +127,7 @@ class mxClipboard {
    * @param graph - {@link mxGraph} that contains the cells to be cut.
    * @param cells - Optional array of {@link mxCell} to be cut.
    */
-  // static cut(graph: mxGraph, cells?: Array<mxCell>): Array<mxCell>;
-  static cut(graph: mxGraph, cells: mxCell[] | null) {
+  static cut(graph: mxGraph, cells?: mxCellArray | null): mxCellArray | null {
     cells = mxClipboard.copy(graph, cells);
     mxClipboard.insertCount = 0;
     mxClipboard.removeCells(graph, cells);
@@ -149,8 +142,7 @@ class mxClipboard {
    * @param graph - {@link mxGraph} that contains the cells to be cut.
    * @param cells - Array of {@link mxCell} to be cut.
    */
-  // static removeCells(graph: mxGraph, cells: Array<mxCell>): void;
-  static removeCells(graph: mxGraph, cells: mxCell[] | null) {
+  static removeCells(graph: mxGraph, cells: mxCellArray | null): void {
     graph.removeCells(cells);
   }
 
@@ -162,12 +154,11 @@ class mxClipboard {
    * @param graph - {@link mxGraph} that contains the cells to be copied.
    * @param cells - Optional array of {@link mxCell} to be copied.
    */
-  // static copy(graph: mxGraph, cells?: Array<mxCell>): Array<mxCell>;
-  static copy(graph: mxGraph, cells: mxCell[] | null): mxCell[] | null {
+  static copy(graph: mxGraph, cells?: mxCellArray | null): mxCellArray | null {
     cells = cells || graph.getSelectionCells();
-    const result = graph.getExportableCells((<mxGraphModel>graph.model).getTopmostCells(cells));
+    const result = (<mxCellArray>graph.getExportableCells(cells)).getTopmostCells();
     mxClipboard.insertCount = 1;
-    mxClipboard.setCells(graph.cloneCells(<mxCell[]>result));
+    mxClipboard.setCells(graph.cloneCells(<mxCellArray>result));
 
     return result;
   }
@@ -183,8 +174,7 @@ class mxClipboard {
    *
    * @param graph - {@link mxGraph} to paste the {@link cells} into.
    */
-  // static paste(graph: mxGraph): Array<mxCell>;
-  static paste(graph: mxGraph) {
+  static paste(graph: mxGraph): mxCellArray | null {
     let cells = null;
 
     if (!mxClipboard.isEmpty()) {
@@ -196,7 +186,7 @@ class mxClipboard {
 
       // Increments the counter and selects the inserted cells
       mxClipboard.insertCount++;
-      graph.setSelectionCells(<mxCell[]>cells);
+      graph.setSelectionCells(<mxCellArray>cells);
     }
 
     return cells;
diff --git a/packages/core/src/view/cell/mxCell.ts b/packages/core/src/view/cell/mxCell.ts
index 846d1a7fa..38341426c 100644
--- a/packages/core/src/view/cell/mxCell.ts
+++ b/packages/core/src/view/cell/mxCell.ts
@@ -11,6 +11,7 @@ import mxCellOverlay from './mxCellOverlay';
 import { clone } from '../../util/mxCloneUtils';
 import mxPoint from '../../util/datatypes/mxPoint';
 import mxCellPath from './mxCellPath';
+import mxCellArray from "./mxCellArray";
 
 /**
  * Cells are the elements of the graph model. They represent the state
@@ -73,8 +74,8 @@ class mxCell {
   }
 
   // TODO: Document me!!!
-  getChildren(): mxCell[] {
-    return this.children || [];
+  getChildren(): mxCellArray {
+    return this.children || new mxCellArray();
   }
 
   // TODO: Document me!
@@ -89,87 +90,73 @@ class mxCell {
   /**
    * Holds the Id. Default is null.
    */
-  // id: string;
   id: string | null = null;
 
   /**
    * Holds the user object. Default is null.
    */
-  // value: any;
   value: any = null;
 
   /**
    * Holds the <mxGeometry>. Default is null.
    */
-  // geometry: mxGeometry;
   geometry: mxGeometry | null = null;
 
   /**
    * Holds the style as a string of the form [(stylename|key=value);]. Default is
    * null.
    */
-  // style: string;
   style: string | null = null;
 
   /**
    * Specifies whether the cell is a vertex. Default is false.
    */
-  // vertex: boolean;
   vertex: boolean = false;
 
   /**
    * Specifies whether the cell is an edge. Default is false.
    */
-  // edge: boolean;
   edge: boolean = false;
 
   /**
    * Specifies whether the cell is connectable. Default is true.
    */
-  // connectable: boolean;
   connectable: boolean = true;
 
   /**
    * Specifies whether the cell is visible. Default is true.
    */
-  // visible: boolean;
   visible: boolean = true;
 
   /**
    * Specifies whether the cell is collapsed. Default is false.
    */
-  // collapsed: boolean;
   collapsed: boolean = false;
 
   /**
    * Reference to the parent cell.
    */
-  // parent: mxCell;
   parent: mxCell | null = null;
 
   /**
    * Reference to the source terminal.
    */
-  // source: mxCell;
   source: mxCell | null = null;
 
   /**
    * Reference to the target terminal.
    */
-  // target: mxCell;
   target: mxCell | null = null;
 
   /**
    * Holds the child cells.
    */
-  // children: Array<mxCell>;
-  children: mxCell[] | null = null;
+  children: mxCellArray | null = null;
 
   /**
    * Holds the edges.
    */
-  // edges: Array<mxCell>;
-  edges: mxCell[] | null = null;
+  edges: mxCellArray | null = null;
 
   /**
    * List of members that should not be cloned inside <clone>. This field is
@@ -178,7 +165,6 @@ class mxCell {
    * to mark transient fields since transient modifiers are not supported by
    * the language.
    */
-  // mxTransient: Array<string>;
   mxTransient: string[] = [
     'id',
     'value',
@@ -192,7 +178,6 @@ class mxCell {
   /**
    * Returns the Id of the cell as a string.
    */
-  // getId(): string;
   getId(): string | null {
     return this.id;
   }
@@ -200,7 +185,6 @@ class mxCell {
   /**
    * Sets the Id of the cell to the given string.
    */
-  // setId(id: string): void;
   setId(id: string): void {
     this.id = id;
   }
@@ -209,7 +193,6 @@ class mxCell {
    * Returns the user object of the cell. The user
    * object is stored in <value>.
    */
-  // getValue(): any;
   getValue(): any {
     return this.value;
   }
@@ -218,7 +201,6 @@ class mxCell {
    * Sets the user object of the cell. The user object
    * is stored in <value>.
    */
-  // setValue(value: any): void;
   setValue(value: number): void {
     this.value = value;
   }
@@ -229,7 +211,6 @@ class mxCell {
    * replaces the user object with the given value and
    * returns the old user object.
    */
-  // valueChanged(newValue: any): any;
   valueChanged(newValue: any): any {
     const previous = this.getValue();
     this.setValue(newValue);
@@ -239,7 +220,6 @@ class mxCell {
   /**
    * Returns the <mxGeometry> that describes the <geometry>.
    */
-  // getGeometry(): mxGeometry;
   getGeometry(): mxGeometry | null {
     return this.geometry;
   }
@@ -247,7 +227,6 @@ class mxCell {
   /**
    * Sets the <mxGeometry> to be used as the <geometry>.
    */
-  // setGeometry(geometry: mxGeometry): void;
   setGeometry(geometry: mxGeometry | null): void {
     this.geometry = geometry;
   }
@@ -255,15 +234,13 @@ class mxCell {
   /**
    * Returns a string that describes the <style>.
    */
-  // getStyle(): string;
-  getStyle(): any {
+  getStyle(): string | null {
     return this.style;
   }
 
   /**
    * Sets the string to be used as the <style>.
    */
-  // setStyle(style: string): void;
   setStyle(style: string | null): void {
     this.style = style;
   }
@@ -271,7 +248,6 @@ class mxCell {
   /**
    * Returns true if the cell is a vertex.
    */
-  // isVertex(): boolean;
   isVertex(): boolean {
     return this.vertex;
   }
@@ -284,15 +260,13 @@ class mxCell {
    *
    * @param vertex Boolean that specifies if the cell is a vertex.
    */
-  // setVertex(vertex: boolean): void;
-  setVertex(vertex: boolean) {
+  setVertex(vertex: boolean): void {
     this.vertex = vertex;
   }
 
   /**
    * Returns true if the cell is an edge.
    */
-  // isEdge(): boolean;
   isEdge(): boolean {
     return this.edge;
   }
@@ -305,15 +279,13 @@ class mxCell {
    *
    * @param edge Boolean that specifies if the cell is an edge.
    */
-  // setEdge(edge: boolean): void;
-  setEdge(edge: boolean) {
+  setEdge(edge: boolean): void {
     this.edge = edge;
   }
 
   /**
    * Returns true if the cell is connectable.
    */
-  // isConnectable(): boolean;
   isConnectable(): boolean {
     return this.connectable;
   }
@@ -325,15 +297,13 @@ class mxCell {
    *
    * @param connectable Boolean that specifies the new connectable state.
    */
-  // setConnectable(connectable: boolean): void;
-  setConnectable(connectable: boolean) {
+  setConnectable(connectable: boolean): void {
     this.connectable = connectable;
   }
 
   /**
    * Returns true if the cell is visibile.
    */
-  // isVisible(): boolean;
   isVisible(): boolean {
     return this.visible;
   }
@@ -345,7 +315,6 @@ class mxCell {
    *
    * @param visible Boolean that specifies the new visible state.
    */
-  // setVisible(visible: boolean): void;
   setVisible(visible: boolean): void {
     this.visible = visible;
   }
@@ -353,7 +322,6 @@ class mxCell {
   /**
    * Returns true if the cell is collapsed.
    */
-  // isCollapsed(): boolean;
   isCollapsed(): boolean {
     return this.collapsed;
   }
@@ -365,7 +333,6 @@ class mxCell {
    *
    * @param collapsed Boolean that specifies the new collapsed state.
    */
-  // setCollapsed(collapsed: boolean): void;
   setCollapsed(collapsed: boolean): void {
     this.collapsed = collapsed;
   }
@@ -373,7 +340,6 @@ class mxCell {
   /**
    * Returns the cell's parent.
    */
-  // getParent(): mxCell;
   getParent(): mxCell | null {
     return this.parent;
   }
@@ -385,7 +351,6 @@ class mxCell {
    *
    * @param parent<mxCell> that represents the new parent.
    */
-  // setParent(parent: mxCell): void;
   setParent(parent: mxCell | null): void {
     this.parent = parent;
   }
@@ -398,7 +363,6 @@ class mxCell {
    * @param source Boolean that specifies if the source terminal should be
    * returned.
    */
-  // getTerminal(source: boolean): mxCell;
   getTerminal(source: boolean = false): mxCell | null {
     return source ? this.source : this.target;
   }
@@ -410,7 +374,6 @@ class mxCell {
    * @param {boolean} isSource  boolean that specifies if the source or target terminal
    * should be set.
    */
-  // setTerminal(terminal: mxCell, isSource: boolean): mxCell;
   setTerminal(terminal: mxCell | null, isSource: boolean): mxCell | null {
     if (isSource) {
       this.source = terminal;
@@ -423,7 +386,6 @@ class mxCell {
   /**
    * Returns the number of child cells.
    */
-  // getChildCount(): number;
   getChildCount(): number {
     return this.children == null ? 0 : this.children.length;
   }
@@ -435,7 +397,6 @@ class mxCell {
    *
    * @param childChild whose index should be returned.
    */
-  // getIndex(child: mxCell): number;
   getIndex(child: mxCell | null): number {
     if (child === null || !this.children) return -1;
     return this.children.indexOf(child);
@@ -448,7 +409,6 @@ class mxCell {
    *
    * @param indexInteger that specifies the child to be returned.
    */
-  // getChildAt(index: number): mxCell;
   getChildAt(index: number): mxCell | null {
     return this.children == null ? null : this.children[index];
   }
@@ -465,26 +425,23 @@ class mxCell {
    * @param indexOptional integer that specifies the index at which the child
    * should be inserted into the child array.
    */
-  // insert(child: mxCell, index: number): mxCell;
-  insert(child: mxCell | null = null, index: number | null = null) {
-    if (child != null) {
-      if (index == null) {
-        index = this.getChildCount();
+  insert(child: mxCell, index: number | null = null): mxCell | null {
+    if (index == null) {
+      index = this.getChildCount();
 
-        if (child.getParent() === this) {
-          index--;
-        }
+      if (child.getParent() === this) {
+        index--;
       }
+    }
 
-      child.removeFromParent();
-      child.setParent(this);
+    child.removeFromParent();
+    child.setParent(this);
 
-      if (this.children == null) {
-        this.children = [];
-        this.children.push(child);
-      } else {
-        this.children.splice(index, 0, child);
-      }
+    if (this.children == null) {
+      this.children = new mxCellArray();
+      this.children.push(child);
+    } else {
+      this.children.splice(index, 0, child);
     }
     return child;
   }
@@ -499,7 +456,6 @@ class mxCell {
    * @param indexInteger that specifies the index of the child to be
    * removed.
    */
-  // remove(index: number): mxCell;
   remove(index: number): mxCell | null {
     let child = null;
     if (this.children != null && index >= 0) {
@@ -515,7 +471,6 @@ class mxCell {
   /**
    * Removes the cell from its parent.
    */
-  // removeFromParent(): mxCell;
   removeFromParent(): void {
     if (this.parent != null) {
       const index = this.parent.getIndex(this);
@@ -526,7 +481,6 @@ class mxCell {
   /**
    * Returns the number of edges in the edge array.
    */
-  // getEdgeCount(): number;
   getEdgeCount(): number {
     return this.edges == null ? 0 : this.edges.length;
   }
@@ -538,7 +492,6 @@ class mxCell {
    *
    * @param edge<mxCell> whose index in <edges> should be returned.
    */
-  // getEdgeIndex(edge: mxCell): number;
   getEdgeIndex(edge: mxCell): number {
     if (!this.edges) return -1;
     return this.edges.indexOf(edge);
@@ -551,7 +504,6 @@ class mxCell {
    *
    * @param indexInteger that specifies the index of the edge to be returned.
    */
-  // getEdgeAt(index: number): mxCell;
   getEdgeAt(index: number): mxCell | null {
     return this.edges == null ? null : this.edges[index];
   }
@@ -565,7 +517,6 @@ class mxCell {
    * @param edge              <mxCell> to be inserted into the edge array.
    * @param isOutgoing Boolean that specifies if the edge is outgoing.
    */
-  // insertEdge(edge: mxCell, isOutgoing: boolean): mxCell;
   insertEdge(edge: mxCell | null, isOutgoing: boolean) {
     if (edge != null) {
       edge.removeFromTerminal(isOutgoing);
@@ -577,7 +528,7 @@ class mxCell {
         this.edges.indexOf(edge) < 0
       ) {
         if (this.edges == null) {
-          this.edges = [];
+          this.edges = new mxCellArray();
         }
         this.edges.push(edge);
       }
@@ -594,7 +545,6 @@ class mxCell {
    * @param edge<mxCell> to be removed from the edge array.
    * @param isOutgoing Boolean that specifies if the edge is outgoing.
    */
-  // removeEdge(edge: mxCell, isOutgoing: boolean): mxCell;
   removeEdge(edge: mxCell | null, isOutgoing: boolean = false): mxCell | null {
     if (edge != null) {
       if (edge.getTerminal(!isOutgoing) !== this && this.edges != null) {
@@ -616,7 +566,6 @@ class mxCell {
    *
    * @param isSource Boolean that specifies if the edge should be removed from its source or target terminal.
    */
-  // removeFromTerminal(isSource: boolean): mxCell;
   removeFromTerminal(isSource: boolean): void {
     const terminal = this.getTerminal(isSource);
     if (terminal != null) {
@@ -632,7 +581,6 @@ class mxCell {
    *
    * @param nameName nameName of the attribute.
    */
-  // hasAttribute(name: string): boolean;
   hasAttribute(name: string): boolean {
     const userObject = this.getValue();
     return (
@@ -653,7 +601,6 @@ class mxCell {
    * @param defaultValueOptional  default value to use if the attribute has no
    * value.
    */
-  // getAttribute(name: string, defaultValue: any): any;
   getAttribute(name: string, defaultValue: any): any {
     const userObject = this.getValue();
     const val =
@@ -671,7 +618,6 @@ class mxCell {
    * @param nameName    of the attribute whose value should be set.
    * @param valueNew    value of the attribute.
    */
-  // setAttribute(name: string, value: any): void;
   setAttribute(name: string, value: any): void {
     const userObject = this.getValue();
     if (userObject != null && userObject.nodeType === NODETYPE_ELEMENT) {
@@ -684,7 +630,6 @@ class mxCell {
    * the user object. All fields in <mxTransient> are ignored
    * during the cloning.
    */
-  // clone(): mxCell;
   clone(): mxCell {
     const c = clone(this, this.mxTransient);
     c.setValue(this.cloneValue());
@@ -694,7 +639,6 @@ class mxCell {
   /**
    * Returns a clone of the cell's user object.
    */
-  // cloneValue(): any;
   cloneValue(): any {
     let value = this.getValue();
     if (value != null) {
@@ -712,10 +656,9 @@ class mxCell {
    *
    * @param {mxCell} cell2  that specifies the second cell in the tree.
    */
-  // getNearestCommonAncestor(cell1: mxCell, cell2: mxCell): mxCell;
-  getNearestCommonAncestor(cell2: mxCell | null): mxCell | null {
+  getNearestCommonAncestor(cell2: mxCell): mxCell | null {
     // Creates the cell path for the second cell
-    let path = mxCellPath.create(<mxCell>cell2);
+    let path = mxCellPath.create(cell2);
 
     if (path != null && path.length > 0) {
       // Bubbles through the ancestors of the first
@@ -756,7 +699,6 @@ class mxCell {
    *
    * @param {mxCell} child  that specifies the child.
    */
-  // isAncestor(parent: mxCell, child: mxCell): boolean;
   isAncestor(child: mxCell | null): boolean {
     while (child != null && child !== this) {
       child = <mxCell>child.getParent();
@@ -767,16 +709,14 @@ class mxCell {
   /**
    * Returns the child vertices of the given parent.
    */
-  // getChildVertices(parent: mxCell): Array<mxCell>;
-  getChildVertices() {
+  getChildVertices(): mxCellArray {
     return this.getChildCells(true, false);
   }
 
   /**
    * Returns the child edges of the given parent.
    */
-  // getChildEdges(parent: mxCell): Array<mxCell>;
-  getChildEdges(): mxCell[] {
+  getChildEdges(): mxCellArray {
     return this.getChildCells(false, true);
   }
 
@@ -789,10 +729,9 @@ class mxCell {
    * @param edges  Boolean indicating if child edges should be returned.
    * Default is false.
    */
-  // getChildCells(parent: mxCell, vertices: boolean, edges: boolean): Array<mxCell>;
-  getChildCells(vertices: boolean = false, edges: boolean = false): mxCell[] {
+  getChildCells(vertices: boolean = false, edges: boolean = false): mxCellArray {
     const childCount = this.getChildCount();
-    const result = [];
+    const result = new mxCellArray();
 
     for (let i = 0; i < childCount; i += 1) {
       const child = <mxCell>this.getChildAt(i);
@@ -816,7 +755,6 @@ class mxCell {
    * incoming edges should be returned.
    * @param {mxCell} ignoredEdge  that represents an edge to be ignored.
    */
-  // getDirectedEdgeCount(cell: mxCell, outgoing: boolean, ignoredEdge: boolean): number;
   getDirectedEdgeCount(
     outgoing: boolean,
     ignoredEdge: mxCell | null = null
@@ -836,24 +774,21 @@ class mxCell {
   /**
    * Returns all edges of the given cell without loops.
    */
-  // getConnections(cell: mxCell): Array<mxCell>;
-  getConnections() {
+  getConnections(): mxCellArray {
     return this.getEdges(true, true, false);
   }
 
   /**
    * Returns the incoming edges of the given cell without loops.
    */
-  // getIncomingEdges(cell: mxCell): Array<mxCell>;
-  getIncomingEdges(): mxCell[] {
+  getIncomingEdges(): mxCellArray {
     return this.getEdges(true, false, false);
   }
 
   /**
    * Returns the outgoing edges of the given cell without loops.
    */
-  // getOutgoingEdges(cell: mxCell): Array<mxCell>;
-  getOutgoingEdges(): mxCell[] {
+  getOutgoingEdges(): mxCellArray {
     return this.getEdges(false, true, false);
   }
 
@@ -870,14 +805,13 @@ class mxCell {
    * @param includeLoops  Optional boolean that specifies if loops should be returned.
    * Default is true.
    */
-  // getEdges(cell: mxCell, incoming?: boolean, outgoing?: boolean, includeLoops?: boolean): Array<mxCell>;
   getEdges(
     incoming: boolean = true,
     outgoing: boolean = true,
     includeLoops: boolean = true
-  ) {
+  ): mxCellArray {
     const edgeCount = this.getEdgeCount();
-    const result = [];
+    const result = new mxCellArray();
 
     for (let i = 0; i < edgeCount; i += 1) {
       const edge = <mxCell>this.getEdgeAt(i);
@@ -924,8 +858,7 @@ class mxCell {
   /**
    * Returns all descendants of the given cell and the cell itself in an array.
    */
-  // getDescendants(parent: mxCell): Array<mxCell>;
-  getDescendants(): mxCell[] {
+  getDescendants(): mxCellArray {
     return this.filterDescendants(null);
   }
 
@@ -948,12 +881,11 @@ class mxCell {
    * @param filter  JavaScript function that takes an {@link mxCell} as an argument
    * and returns a boolean.
    */
-  // filterDescendants(filter: (...args: any) => boolean, parent?: mxCell): Array<mxCell>;
-  filterDescendants(filter: Function | null): mxCell[] {
+  filterDescendants(filter: Function | null): mxCellArray {
     let parent = this;
 
     // Creates a new array for storing the result
-    let result: mxCell[] = [];
+    let result = new mxCellArray();
 
     // Recursion starts at the root of the model
     parent = parent || this.getRoot();
@@ -968,7 +900,7 @@ class mxCell {
     const childCount = parent.getChildCount();
     for (let i = 0; i < childCount; i += 1) {
       const child = <mxCell>parent.getChildAt(i);
-      result = result.concat(child.filterDescendants(filter));
+      result = new mxCellArray(...result.concat(child.filterDescendants(filter)));
     }
 
     return result;
@@ -977,7 +909,6 @@ class mxCell {
   /**
    * Returns the root of the model or the topmost parent of the given cell.
    */
-  // getRoot(cell?: mxCell): mxCell;
   getRoot(): mxCell {
     let root: mxCell = this;
     let cell: mxCell = this;
diff --git a/packages/core/src/view/cell/mxCells.ts b/packages/core/src/view/cell/mxCellArray.ts
similarity index 81%
rename from packages/core/src/view/cell/mxCells.ts
rename to packages/core/src/view/cell/mxCellArray.ts
index b0cfd8337..1976a4d12 100644
--- a/packages/core/src/view/cell/mxCells.ts
+++ b/packages/core/src/view/cell/mxCellArray.ts
@@ -2,18 +2,43 @@ import mxCell from "./mxCell";
 import mxDictionary from "../../util/datatypes/mxDictionary";
 import mxObjectIdentity from "../../util/datatypes/mxObjectIdentity";
 
-class mxCells extends Array<mxCell> {
-  constructor(...items: mxCell[]) {
+class mxCellArray extends Array<mxCell> {
+  // @ts-ignore
+  constructor(...items: mxCell[] | mxCellArray) {
     super(...items);
   }
 
+  // @ts-ignore
+  concat(items: any): mxCellArray {
+    return new mxCellArray(...super.concat(items));
+  }
+
+  // @ts-ignore
+  splice(arg0: number, ...args: any): mxCellArray {
+    return new mxCellArray(...super.splice(arg0, ...args));
+  }
+
+  // @ts-ignore
+  slice(...args: any): mxCellArray {
+    return new mxCellArray(...super.slice(...args));
+  }
+
+  // @ts-ignore
+  map(arg0: any, ...args: any): mxCellArray {
+    return new mxCellArray(...<mxCell[]>super.map(arg0, ...args));
+  }
+
+  // @ts-ignore
+  filter(arg0: any, ...args: any): mxCellArray {
+    return new mxCellArray(...<mxCell[]>super.filter(arg0, ...args));
+  }
+
   /**
    * Returns the cells from the given array where the given filter function
    * returns true.
    */
-  // filterCells(cells: Array<mxCell>, filter: (...args: any) => boolean): Array<mxCell>;
-  filterCells(filter: Function): mxCell[] {
-    let result = [];
+  filterCells(filter: Function): mxCellArray {
+    let result = new mxCellArray();
 
     for (let i = 0; i < this.length; i += 1) {
       if (filter(this[i])) {
@@ -34,12 +59,11 @@ class mxCells extends Array<mxCell> {
    * @param targets  Boolean that specifies if target terminals should be contained
    * in the result. Default is true.
    */
-  // getOpposites(edges: Array<mxCell>, terminal: mxCell, sources?: boolean, targets?: boolean): Array<mxCell>;
   getOpposites(terminal: mxCell,
                sources: boolean=true,
-               targets: boolean=true): mxCell[] {
+               targets: boolean=true): mxCellArray {
 
-    const terminals = [];
+    const terminals = new mxCellArray();
 
     for (let i = 0; i < this.length; i += 1) {
       const source = this[i].getTerminal(true);
@@ -77,10 +101,9 @@ class mxCells extends Array<mxCell> {
    * descendants for each {@link mxCell} that it contains. Duplicates should be
    * removed in the cells array to improve performance.
    */
-  // getTopmostCells(cells: Array<mxCell>): Array<mxCell>;
-  getTopmostCells(): mxCell[] {
+  getTopmostCells(): mxCellArray {
     const dict = new mxDictionary();
-    const tmp = [];
+    const tmp = new mxCellArray();
 
     for (let i = 0; i < this.length; i += 1) {
       dict.put(this[i], true);
@@ -110,8 +133,7 @@ class mxCells extends Array<mxCell> {
    * Returns an array that represents the set (no duplicates) of all parents
    * for the given array of cells.
    */
-  // getParents(cells: Array<mxCell>): Array<mxCell>;
-  getParents() {
+  getParents(): mxCell[] {
     const parents = [];
     const dict = new mxDictionary();
 
@@ -135,11 +157,10 @@ class mxCells extends Array<mxCell> {
    * with all descendants.
    * @param mapping  Optional mapping for existing clones.
    */
-  // cloneCells(cells: Array<mxCell>, includeChildren?: boolean, mapping?: any): Array<mxCell>;
   cloneCells(includeChildren: boolean=true,
-             mapping: any={}): mxCell[] {
+             mapping: any={}): mxCellArray {
 
-    const clones: mxCell[] = [];
+    const clones: mxCellArray = new mxCellArray();
 
     for (const cell of this) {
       clones.push(this.cloneCellImpl(cell, mapping, includeChildren));
@@ -158,12 +179,11 @@ class mxCells extends Array<mxCell> {
    *
    * @private
    */
-  // cloneCellImpl(cell: mxCell, mapping?: any, includeChildren?: boolean): mxCell;
   cloneCellImpl(cell: mxCell,
                 mapping: any={},
                 includeChildren: boolean): mxCell {
 
-    const ident = mxObjectIdentity.get(cell);
+    const ident = <string>mxObjectIdentity.get(cell);
     let clone = mapping ? mapping[ident] : null;
 
     if (clone == null) {
@@ -192,7 +212,6 @@ class mxCells extends Array<mxCell> {
    *
    * @private
    */
-  // restoreClone(clone: mxCell, cell: mxCell, mapping?: any): void;
   restoreClone(clone: mxCell,
                cell: mxCell,
                mapping: any): void {
@@ -225,4 +244,4 @@ class mxCells extends Array<mxCell> {
   }
 }
 
-export default mxCells;
+export default mxCellArray;
diff --git a/packages/core/src/view/connection/mxMultiplicity.js b/packages/core/src/view/connection/mxMultiplicity.ts
similarity index 81%
rename from packages/core/src/view/connection/mxMultiplicity.js
rename to packages/core/src/view/connection/mxMultiplicity.ts
index 50320598b..6d1da282f 100644
--- a/packages/core/src/view/connection/mxMultiplicity.js
+++ b/packages/core/src/view/connection/mxMultiplicity.ts
@@ -7,6 +7,8 @@
 
 import mxResources from '../../util/mxResources';
 import { isNode } from '../../util/mxDomUtils';
+import mxCell from "../cell/mxCell";
+import mxGraph from "../graph/mxGraph";
 
 /**
  * @class mxMultiplicity
@@ -30,16 +32,16 @@ import { isNode } from '../../util/mxDomUtils';
  */
 class mxMultiplicity {
   constructor(
-    source,
-    type,
-    attr,
-    value,
-    min,
-    max,
-    validNeighbors,
-    countError,
-    typeError,
-    validNeighborsAllowed
+    source: boolean,
+    type: string,
+    attr: string,
+    value: string,
+    min: number | null | undefined,
+    max: number | 'n' | null | undefined,
+    validNeighbors: string[],
+    countError: string,
+    typeError: string,
+    validNeighborsAllowed: boolean=true
   ) {
     this.source = source;
     this.type = type;
@@ -50,8 +52,7 @@ class mxMultiplicity {
     this.validNeighbors = validNeighbors;
     this.countError = mxResources.get(countError) || countError;
     this.typeError = mxResources.get(typeError) || typeError;
-    this.validNeighborsAllowed =
-      validNeighborsAllowed != null ? validNeighborsAllowed : true;
+    this.validNeighborsAllowed = validNeighborsAllowed;
   }
 
   /**
@@ -59,75 +60,65 @@ class mxMultiplicity {
    * passed to {@link mxUtils.isNode} together with the source or target vertex
    * value as the first argument.
    */
-  // type: string;
-  type = null;
+  type: string;
 
   /**
    * Optional string that specifies the attributename to be passed to
    * {@link mxUtils.isNode} to check if the rule applies to a cell.
    */
-  // attr: string;
-  attr = null;
+  attr: string;
 
   /**
    * Optional string that specifies the value of the attribute to be passed
    * to {@link mxUtils.isNode} to check if the rule applies to a cell.
    */
-  // value: string;
-  value = null;
+  value: string;
 
   /**
    * Boolean that specifies if the rule is applied to the source or target
    * terminal of an edge.
    */
-  // source: boolean;
-  source = null;
+  source: boolean;
 
   /**
    * Defines the minimum number of connections for which this rule applies.
    *
    * @default 0
    */
-  // min: number;
-  min = null;
+  min: number;
 
   /**
    * Defines the maximum number of connections for which this rule applies.
    * A value of 'n' means unlimited times.
    * @default 'n'
    */
-  // max: number | 'n';
-  max = null;
+  max: number | 'n';
 
   /**
    * Holds an array of strings that specify the type of neighbor for which
    * this rule applies. The strings are used in {@link mxCell.is} on the opposite
    * terminal to check if the rule applies to the connection.
    */
-  // validNeighbors: Array<string>;
-  validNeighbors = null;
+  validNeighbors: Array<string>;
 
   /**
    * Boolean indicating if the list of validNeighbors are those that are allowed
    * for this rule or those that are not allowed for this rule.
    */
-  // validNeighborsAllowed: boolean;
-  validNeighborsAllowed = true;
+  validNeighborsAllowed: boolean = true;
 
   /**
    * Holds the localized error message to be displayed if the number of
    * connections for which the rule applies is smaller than {@link min} or greater
    * than {@link max}.
    */
-  // countError: string;
-  countError = null;
+  countError: string;
 
   /**
    * Holds the localized error message to be displayed if the type of the
    * neighbor for a connection does not match the rule.
    */
-  // typeError: string;
-  typeError = null;
+  typeError: string;
 
   /**
    * Checks the multiplicity for the given arguments and returns the error
@@ -140,8 +131,13 @@ class mxMultiplicity {
    * @param sourceOut Number of outgoing edges from the source terminal.
    * @param targetIn Number of incoming edges for the target terminal.
    */
-  // check(graph: mxGraph, edge: mxCell, source: mxCell, target: mxCell, sourceOut: number, targetIn: number): string;
-  check(graph, edge, source, target, sourceOut, targetIn) {
+  check(graph: mxGraph,
+        edge: mxCell,
+        source: mxCell,
+        target: mxCell,
+        sourceOut: number,
+        targetIn: number): string | null {
+
     let error = '';
 
     if (
@@ -176,8 +172,11 @@ class mxMultiplicity {
    * Checks if there are any valid neighbours in {@link validNeighbors}. This is only
    * called if {@link validNeighbors} is a non-empty array.
    */
-  // checkNeighbors(graph: mxGraph, edge: mxCell, source: mxCell, target: mxCell): boolean;
-  checkNeighbors(graph, edge, source, target) {
+  checkNeighbors(graph: mxGraph,
+                 edge: mxCell,
+                 source: mxCell,
+                 target: mxCell): boolean {
+
     const sourceValue = source.getValue();
     const targetValue = target.getValue();
     let isValid = !this.validNeighborsAllowed;
@@ -201,8 +200,9 @@ class mxMultiplicity {
    * given cell is the source or target of the given edge, depending on
    * {@link source}. This implementation uses {@link checkType} on the terminal's value.
    */
-  // checkTerminal(graph: mxGraph, terminal: mxCell, edge: mxCell): boolean;
-  checkTerminal(graph, terminal, edge) {
+  checkTerminal(graph: mxGraph,
+                edge: mxCell,
+                terminal: mxCell): boolean {
     const value = terminal.getValue();
 
     return this.checkType(graph, value, this.type, this.attr, this.value);
@@ -211,10 +211,14 @@ class mxMultiplicity {
   /**
    * Checks the type of the given value.
    */
-  // checkType(graph: mxCell, value: string, type: string, attr: string, attrValue: any): boolean;
-  checkType(graph, value, type, attr, attrValue) {
+  checkType(graph: mxGraph,
+            value: string | Element | mxCell,
+            type: string,
+            attr?: string,
+            attrValue?: any): boolean {
+
     if (value != null) {
-      if (!Number.isNaN(value.nodeType)) {
+      if (typeof value !== 'string' && 'nodeType' in value && !Number.isNaN(value.nodeType)) {
         // Checks if value is a DOM node
         return isNode(value, type, attr, attrValue);
       }
diff --git a/packages/core/src/view/graph/StyleMap.ts b/packages/core/src/view/graph/StyleMap.ts
new file mode 100644
index 000000000..03573e199
--- /dev/null
+++ b/packages/core/src/view/graph/StyleMap.ts
@@ -0,0 +1,1164 @@
+import {Style} from "util";
+
+class StyleMap {
+  defaultVertex?: StyleMap;
+  defaultEdge?: StyleMap;
+
+  /**
+   * Variable: STYLE_PERIMETER
+   *
+   * Defines the key for the perimeter style. This is a function that defines
+   * the perimeter around a particular shape. Possible values are the
+   * functions defined in <mxPerimeter>. Alternatively, the constants in this
+   * class that start with "PERIMETER_" may be used to access
+   * perimeter styles in <mxStyleRegistry>. Value is "perimeter".
+   */
+  perimeter: any;
+
+  /**
+   * Variable: STYLE_SOURCE_PORT
+   *
+   * Defines the ID of the cell that should be used for computing the
+   * perimeter point of the source for an edge. This allows for graphically
+   * connecting to a cell while keeping the actual terminal of the edge.
+   * Value is "sourcePort".
+   */
+  sourcePort: any;
+
+  /**
+   * Variable: STYLE_TARGET_PORT
+   *
+   * Defines the ID of the cell that should be used for computing the
+   * perimeter point of the target for an edge. This allows for graphically
+   * connecting to a cell while keeping the actual terminal of the edge.
+   * Value is "targetPort".
+   */
+  targetPort: any;
+
+  /**
+   * Variable: STYLE_PORT_CONSTRAINT
+   *
+   * Defines the direction(s) that edges are allowed to connect to cells in.
+   * Possible values are "DIRECTION_NORTH, DIRECTION_SOUTH,
+   * DIRECTION_EAST" and "DIRECTION_WEST". Value is
+   * "portConstraint".
+   */
+  portConstraint: any;
+
+  /**
+   * Variable: STYLE_PORT_CONSTRAINT_ROTATION
+   *
+   * Define whether port constraint directions are rotated with vertex
+   * rotation. 0 (default) causes port constraints to remain absolute,
+   * relative to the graph, 1 causes the constraints to rotate with
+   * the vertex. Value is "portConstraintRotation".
+   */
+  portConstraintRotation: any;
+
+  /**
+   * Variable: STYLE_SOURCE_PORT_CONSTRAINT
+   *
+   * Defines the direction(s) that edges are allowed to connect to sources in.
+   * Possible values are "DIRECTION_NORTH, DIRECTION_SOUTH, DIRECTION_EAST"
+   * and "DIRECTION_WEST". Value is "sourcePortConstraint".
+   */
+  sourcePortConstraint: any;
+
+  /**
+   * Variable: STYLE_TARGET_PORT_CONSTRAINT
+   *
+   * Defines the direction(s) that edges are allowed to connect to targets in.
+   * Possible values are "DIRECTION_NORTH, DIRECTION_SOUTH, DIRECTION_EAST"
+   * and "DIRECTION_WEST". Value is "targetPortConstraint".
+   */
+  targetPortConstraint: any;
+
+  /**
+   * Variable: STYLE_OPACITY
+   *
+   * Defines the key for the opacity style. The type of the value is
+   * numeric and the possible range is 0-100. Value is "opacity".
+   */
+  opacity: any;
+
+  /**
+   * Variable: STYLE_FILL_OPACITY
+   *
+   * Defines the key for the fill opacity style. The type of the value is
+   * numeric and the possible range is 0-100. Value is "fillOpacity".
+   */
+  fillOpacity: any;
+
+  /**
+   * Variable: STYLE_STROKE_OPACITY
+   *
+   * Defines the key for the stroke opacity style. The type of the value is
+   * numeric and the possible range is 0-100. Value is "strokeOpacity".
+   */
+  strokeOpacity: any;
+
+  /**
+   * Variable: STYLE_TEXT_OPACITY
+   *
+   * Defines the key for the text opacity style. The type of the value is
+   * numeric and the possible range is 0-100. Value is "textOpacity".
+   */
+  textOpacity: any;
+
+  /**
+   * Variable: STYLE_TEXT_DIRECTION
+   *
+   * Defines the key for the text direction style. Possible values are
+   * "TEXT_DIRECTION_DEFAULT, TEXT_DIRECTION_AUTO, TEXT_DIRECTION_LTR"
+   * and "TEXT_DIRECTION_RTL". Value is "textDirection".
+   * The default value for the style is defined in <DEFAULT_TEXT_DIRECTION>.
+   * It is used is no value is defined for this key in a given style. This is
+   * an experimental style that is currently ignored in the backends.
+   */
+  textDirection: any;
+
+  /**
+   * Variable: STYLE_OVERFLOW
+   *
+   * Defines the key for the overflow style. Possible values are 'visible',
+   * 'hidden', 'fill' and 'width'. The default value is 'visible'. This value
+   * specifies how overlapping vertex labels are handled. A value of
+   * 'visible' will show the complete label. A value of 'hidden' will clip
+   * the label so that it does not overlap the vertex bounds. A value of
+   * 'fill' will use the vertex bounds and a value of 'width' will use the
+   * vertex width for the label. See <mxGraph.isLabelClipped>. Note that
+   * the vertical alignment is ignored for overflow fill and for horizontal
+   * alignment, left should be used to avoid pixel offsets in Internet Explorer
+   * 11 and earlier or if foreignObjects are disabled. Value is "overflow".
+   */
+  overflow: any;
+
+  /**
+   * Variable: STYLE_ORTHOGONAL
+   *
+   * Defines if the connection points on either end of the edge should be
+   * computed so that the edge is vertical or horizontal if possible and
+   * if the point is not at a fixed location. Default is false. This is
+   * used in <mxGraph.isOrthogonal>, which also returns true if the edgeStyle
+   * of the edge is an elbow or entity. Value is "orthogonal".
+   */
+  orthogonal: any;
+
+  /**
+   * Variable: STYLE_EXIT_X
+   *
+   * Defines the key for the horizontal relative coordinate connection point
+   * of an edge with its source terminal. Value is "exitX".
+   */
+  exitX: any;
+
+  /**
+   * Variable: STYLE_EXIT_Y
+   *
+   * Defines the key for the vertical relative coordinate connection point
+   * of an edge with its source terminal. Value is "exitY".
+   */
+  exitY: any;
+
+
+  /**
+   * Variable: STYLE_EXIT_DX
+   *
+   * Defines the key for the horizontal offset of the connection point
+   * of an edge with its source terminal. Value is "exitDx".
+   */
+  exitDx: any;
+
+  /**
+   * Variable: STYLE_EXIT_DY
+   *
+   * Defines the key for the vertical offset of the connection point
+   * of an edge with its source terminal. Value is "exitDy".
+   */
+  exitDy: any;
+
+  /**
+   * Variable: STYLE_EXIT_PERIMETER
+   *
+   * Defines if the perimeter should be used to find the exact entry point
+   * along the perimeter of the source. Possible values are 0 (false) and
+   * 1 (true). Default is 1 (true). Value is "exitPerimeter".
+   */
+  exitPerimeter: any;
+
+  /**
+   * Variable: STYLE_ENTRY_X
+   *
+   * Defines the key for the horizontal relative coordinate connection point
+   * of an edge with its target terminal. Value is "entryX".
+   */
+  entryX: any;
+
+  /**
+   * Variable: STYLE_ENTRY_Y
+   *
+   * Defines the key for the vertical relative coordinate connection point
+   * of an edge with its target terminal. Value is "entryY".
+   */
+  entryY: any;
+
+  /**
+   * Variable: STYLE_ENTRY_DX
+   *
+   * Defines the key for the horizontal offset of the connection point
+   * of an edge with its target terminal. Value is "entryDx".
+   */
+  entryDx: any;
+
+  /**
+   * Variable: STYLE_ENTRY_DY
+   *
+   * Defines the key for the vertical offset of the connection point
+   * of an edge with its target terminal. Value is "entryDy".
+   */
+  entryDy: any;
+
+  /**
+   * Variable: STYLE_ENTRY_PERIMETER
+   *
+   * Defines if the perimeter should be used to find the exact entry point
+   * along the perimeter of the target. Possible values are 0 (false) and
+   * 1 (true). Default is 1 (true). Value is "entryPerimeter".
+   */
+  entryPerimeter: any;
+
+  /**
+   * Variable: STYLE_WHITE_SPACE
+   *
+   * Defines the key for the white-space style. Possible values are 'nowrap'
+   * and 'wrap'. The default value is 'nowrap'. This value specifies how
+   * white-space inside a HTML vertex label should be handled. A value of
+   * 'nowrap' means the text will never wrap to the next line until a
+   * linefeed is encountered. A value of 'wrap' means text will wrap when
+   * necessary. This style is only used for HTML labels.
+   * See <mxGraph.isWrapping>. Value is "whiteSpace".
+   */
+  whiteSpace: any;
+
+  /**
+   * Variable: STYLE_ROTATION
+   *
+   * Defines the key for the rotation style. The type of the value is
+   * numeric and the possible range is 0-360. Value is "rotation".
+   */
+  rotation: any;
+
+  /**
+   * Variable: STYLE_FILLCOLOR
+   *
+   * Defines the key for the fill color. Possible values are all HTML color
+   * names or HEX codes, as well as special keywords such as 'swimlane,
+   * 'inherit' or 'indicated' to use the color code of a related cell or the
+   * indicator shape. Value is "fillColor".
+   */
+  fillColor: any;
+
+  /**
+   * Variable: STYLE_POINTER_EVENTS
+   *
+   * Specifies if pointer events should be fired on transparent backgrounds.
+   * This style is currently only supported in <mxRectangleShape>. Default
+   * is true. Value is "pointerEvents". This is typically set to
+   * false in groups where the transparent part should allow any underlying
+   * cells to be clickable.
+   */
+  pointerEvents: any;
+
+  /**
+   * Variable: STYLE_SWIMLANE_FILLCOLOR
+   *
+   * Defines the key for the fill color of the swimlane background. Possible
+   * values are all HTML color names or HEX codes. Default is no background.
+   * Value is "swimlaneFillColor".
+   */
+  swimlaneFillColor: any;
+
+  /**
+   * Variable: STYLE_MARGIN
+   *
+   * Defines the key for the margin between the ellipses in the double ellipse shape.
+   * Possible values are all positive numbers. Value is "margin".
+   */
+  margin: any;
+
+  /**
+   * Variable: STYLE_GRADIENTCOLOR
+   *
+   * Defines the key for the gradient color. Possible values are all HTML color
+   * names or HEX codes, as well as special keywords such as 'swimlane,
+   * 'inherit' or 'indicated' to use the color code of a related cell or the
+   * indicator shape. This is ignored if no fill color is defined. Value is
+   * "gradientColor".
+   */
+  gradientColor: any;
+
+  /**
+   * Variable: STYLE_GRADIENT_DIRECTION
+   *
+   * Defines the key for the gradient direction. Possible values are
+   * <DIRECTION_EAST>, <DIRECTION_WEST>, <DIRECTION_NORTH> and
+   * <DIRECTION_SOUTH>. Default is <DIRECTION_SOUTH>. Generally, and by
+   * default in mxGraph, gradient painting is done from the value of
+   * <STYLE_FILLCOLOR> to the value of <STYLE_GRADIENTCOLOR>. Taking the
+   * example of <DIRECTION_NORTH>, this means <STYLE_FILLCOLOR> color at the
+   * bottom of paint pattern and <STYLE_GRADIENTCOLOR> at top, with a
+   * gradient in-between. Value is "gradientDirection".
+   */
+  gradientDirection: any;
+
+  /**
+   * Variable: STYLE_STROKECOLOR
+   *
+   * Defines the key for the strokeColor style. Possible values are all HTML
+   * color names or HEX codes, as well as special keywords such as 'swimlane,
+   * 'inherit', 'indicated' to use the color code of a related cell or the
+   * indicator shape or 'none' for no color. Value is "strokeColor".
+   */
+  strokeColor: any;
+
+  /**
+   * Variable: STYLE_SEPARATORCOLOR
+   *
+   * Defines the key for the separatorColor style. Possible values are all
+   * HTML color names or HEX codes. This style is only used for
+   * <SHAPE_SWIMLANE> shapes. Value is "separatorColor".
+   */
+  separatorColor: any;
+
+  /**
+   * Variable: STYLE_STROKEWIDTH
+   *
+   * Defines the key for the strokeWidth style. The type of the value is
+   * numeric and the possible range is any non-negative value larger or equal
+   * to 1. The value defines the stroke width in pixels. Note: To hide a
+   * stroke use strokeColor none. Value is "strokeWidth".
+   */
+  strokeWidth: any;
+
+  /**
+   * Variable: STYLE_ALIGN
+   *
+   * Defines the key for the align style. Possible values are <ALIGN_LEFT>,
+   * <ALIGN_CENTER> and <ALIGN_RIGHT>. This value defines how the lines of
+   * the label are horizontally aligned. <ALIGN_LEFT> mean label text lines
+   * are aligned to left of the label bounds, <ALIGN_RIGHT> to the right of
+   * the label bounds and <ALIGN_CENTER> means the center of the text lines
+   * are aligned in the center of the label bounds. Note this value doesn't
+   * affect the positioning of the overall label bounds relative to the
+   * vertex, to move the label bounds horizontally, use
+   * <STYLE_LABEL_POSITION>. Value is "align".
+   */
+  align: any;
+
+  /**
+   * Variable: STYLE_VERTICAL_ALIGN
+   *
+   * Defines the key for the verticalAlign style. Possible values are
+   * <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM>. This value defines how
+   * the lines of the label are vertically aligned. <ALIGN_TOP> means the
+   * topmost label text line is aligned against the top of the label bounds,
+   * <ALIGN_BOTTOM> means the bottom-most label text line is aligned against
+   * the bottom of the label bounds and <ALIGN_MIDDLE> means there is equal
+   * spacing between the topmost text label line and the top of the label
+   * bounds and the bottom-most text label line and the bottom of the label
+   * bounds. Note this value doesn't affect the positioning of the overall
+   * label bounds relative to the vertex, to move the label bounds
+   * vertically, use <STYLE_VERTICAL_LABEL_POSITION>. Value is "verticalAlign".
+   */
+  verticalAlign: any;
+
+  /**
+   * Variable: STYLE_LABEL_WIDTH
+   *
+   * Defines the key for the width of the label if the label position is not
+   * center. Value is "labelWidth".
+   */
+  labelWidth: any;
+
+  /**
+   * Variable: STYLE_LABEL_POSITION
+   *
+   * Defines the key for the horizontal label position of vertices. Possible
+   * values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT>. Default is
+   * <ALIGN_CENTER>. The label align defines the position of the label
+   * relative to the cell. <ALIGN_LEFT> means the entire label bounds is
+   * placed completely just to the left of the vertex, <ALIGN_RIGHT> means
+   * adjust to the right and <ALIGN_CENTER> means the label bounds are
+   * vertically aligned with the bounds of the vertex. Note this value
+   * doesn't affect the positioning of label within the label bounds, to move
+   * the label horizontally within the label bounds, use <STYLE_ALIGN>.
+   * Value is "labelPosition".
+   */
+  labelPosition: any;
+
+  /**
+   * Variable: STYLE_VERTICAL_LABEL_POSITION
+   *
+   * Defines the key for the vertical label position of vertices. Possible
+   * values are <ALIGN_TOP>, <ALIGN_BOTTOM> and <ALIGN_MIDDLE>. Default is
+   * <ALIGN_MIDDLE>. The label align defines the position of the label
+   * relative to the cell. <ALIGN_TOP> means the entire label bounds is
+   * placed completely just on the top of the vertex, <ALIGN_BOTTOM> means
+   * adjust on the bottom and <ALIGN_MIDDLE> means the label bounds are
+   * horizontally aligned with the bounds of the vertex. Note this value
+   * doesn't affect the positioning of label within the label bounds, to move
+   * the label vertically within the label bounds, use
+   * <STYLE_VERTICAL_ALIGN>. Value is "verticalLabelPosition".
+   */
+  verticalLabelPosition: any;
+
+  /**
+   * Variable: STYLE_IMAGE_ASPECT
+   *
+   * Defines the key for the image aspect style. Possible values are 0 (do
+   * not preserve aspect) or 1 (keep aspect). This is only used in
+   * <mxImageShape>. Default is 1. Value is "imageAspect".
+   */
+  imageAspect: any;
+
+  /**
+   * Variable: STYLE_IMAGE_ALIGN
+   *
+   * Defines the key for the align style. Possible values are <ALIGN_LEFT>,
+   * <ALIGN_CENTER> and <ALIGN_RIGHT>. The value defines how any image in the
+   * vertex label is aligned horizontally within the label bounds of a
+   * <SHAPE_LABEL> shape. Value is "imageAlign".
+   */
+  imageAlign: any;
+
+  /**
+   * Variable: STYLE_IMAGE_VERTICAL_ALIGN
+   *
+   * Defines the key for the verticalAlign style. Possible values are
+   * <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM>. The value defines how
+   * any image in the vertex label is aligned vertically within the label
+   * bounds of a <SHAPE_LABEL> shape. Value is "imageVerticalAlign".
+   */
+  imageVerticalAlign: any;
+
+  /**
+   * Variable: STYLE_GLASS
+   *
+   * Defines the key for the glass style. Possible values are 0 (disabled) and
+   * 1(enabled). The default value is 0. This is used in <mxLabel>. Value is
+   * "glass".
+   */
+  glass: any;
+
+  /**
+   * Variable: STYLE_IMAGE
+   *
+   * Defines the key for the image style. Possible values are any image URL,
+   * the type of the value is String. This is the path to the image that is
+   * to be displayed within the label of a vertex. Data URLs should use the
+   * following format: data:image/png,xyz where xyz is the base64 encoded
+   * data (without the "base64"-prefix). Note that Data URLs are only
+   * supported in modern browsers. Value is "image".
+   */
+  image: any;
+
+  /**
+   * Variable: STYLE_IMAGE_WIDTH
+   *
+   * Defines the key for the imageWidth style. The type of this value is
+   * int, the value is the image width in pixels and must be greater than 0.
+   * Value is "imageWidth".
+   */
+  imageWidth: any;
+
+  /**
+   * Variable: STYLE_IMAGE_HEIGHT
+   *
+   * Defines the key for the imageHeight style. The type of this value is
+   * int, the value is the image height in pixels and must be greater than 0.
+   * Value is "imageHeight".
+   */
+  imageHeight: any;
+
+  /**
+   * Variable: STYLE_IMAGE_BACKGROUND
+   *
+   * Defines the key for the image background color. This style is only used
+   * in <mxImageShape>. Possible values are all HTML color names or HEX
+   * codes. Value is "imageBackground".
+   */
+  imageBackground: any;
+
+  /**
+   * Variable: STYLE_IMAGE_BORDER
+   *
+   * Defines the key for the image border color. This style is only used in
+   * <mxImageShape>. Possible values are all HTML color names or HEX codes.
+   * Value is "imageBorder".
+   */
+  imageBorder: any;
+
+  /**
+   * Variable: STYLE_FLIPH
+   *
+   * Defines the key for the horizontal image flip. This style is only used
+   * in <mxImageShape>. Possible values are 0 and 1. Default is 0. Value is
+   * "flipH".
+   */
+  flipH: any;
+
+  /**
+   * Variable: STYLE_FLIPV
+   *
+   * Defines the key for the vertical flip. Possible values are 0 and 1.
+   * Default is 0. Value is "flipV".
+   */
+  flipV: any;
+
+  /**
+   * Variable: STYLE_NOLABEL
+   *
+   * Defines the key for the noLabel style. If this is true then no label is
+   * visible for a given cell. Possible values are true or false (1 or 0).
+   * Default is false. Value is "noLabel".
+   */
+  noLabel: any;
+
+  /**
+   * Variable: STYLE_NOEDGESTYLE
+   *
+   * Defines the key for the noEdgeStyle style. If this is true then no edge
+   * style is applied for a given edge. Possible values are true or false
+   * (1 or 0). Default is false. Value is "noEdgeStyle".
+   */
+  noEdgeStyle: any;
+
+  /**
+   * Variable: STYLE_LABEL_BACKGROUNDCOLOR
+   *
+   * Defines the key for the label background color. Possible values are all
+   * HTML color names or HEX codes. Value is "labelBackgroundColor".
+   */
+  labelBackgroundColor: any;
+
+  /**
+   * Variable: STYLE_LABEL_BORDERCOLOR
+   *
+   * Defines the key for the label border color. Possible values are all
+   * HTML color names or HEX codes. Value is "labelBorderColor".
+   */
+  labelBorderColor: any;
+
+  /**
+   * Variable: STYLE_LABEL_PADDING
+   *
+   * Defines the key for the label padding, ie. the space between the label
+   * border and the label. Value is "labelPadding".
+   */
+  labelPadding: any;
+
+  /**
+   * Variable: STYLE_INDICATOR_SHAPE
+   *
+   * Defines the key for the indicator shape used within an <mxLabel>.
+   * Possible values are all SHAPE_* constants or the names of any new
+   * shapes. The indicatorShape has precedence over the indicatorImage.
+   * Value is "indicatorShape".
+   */
+  indicatorShape: any;
+
+  /**
+   * Variable: STYLE_INDICATOR_IMAGE
+   *
+   * Defines the key for the indicator image used within an <mxLabel>.
+   * Possible values are all image URLs. The indicatorShape has
+   * precedence over the indicatorImage. Value is "indicatorImage".
+   */
+  indicatorImage: any;
+
+  /**
+   * Variable: STYLE_INDICATOR_COLOR
+   *
+   * Defines the key for the indicatorColor style. Possible values are all
+   * HTML color names or HEX codes, as well as the special 'swimlane' keyword
+   * to refer to the color of the parent swimlane if one exists. Value is
+   * "indicatorColor".
+   */
+  indicatorColor: any;
+
+  /**
+   * Variable: STYLE_INDICATOR_STROKECOLOR
+   *
+   * Defines the key for the indicator stroke color in <mxLabel>.
+   * Possible values are all color codes. Value is "indicatorStrokeColor".
+   */
+  indicatorStrokeColor: any;
+
+  /**
+   * Variable: STYLE_INDICATOR_GRADIENTCOLOR
+   *
+   * Defines the key for the indicatorGradientColor style. Possible values
+   * are all HTML color names or HEX codes. This style is only supported in
+   * <SHAPE_LABEL> shapes. Value is "indicatorGradientColor".
+   */
+  indicatorGradientColor: any;
+
+  /**
+   * Variable: STYLE_INDICATOR_SPACING
+   *
+   * The defines the key for the spacing between the label and the
+   * indicator in <mxLabel>. Possible values are in pixels. Value is
+   * "indicatorSpacing".
+   */
+  indicatorSpacing: any;
+
+  /**
+   * Variable: STYLE_INDICATOR_WIDTH
+   *
+   * Defines the key for the indicator width. Possible values start at 0 (in
+   * pixels). Value is "indicatorWidth".
+   */
+  indicatorWidth: any;
+
+  /**
+   * Variable: STYLE_INDICATOR_HEIGHT
+   *
+   * Defines the key for the indicator height. Possible values start at 0 (in
+   * pixels). Value is "indicatorHeight".
+   */
+  indicatorHeight: any;
+
+  /**
+   * Variable: STYLE_INDICATOR_DIRECTION
+   *
+   * Defines the key for the indicatorDirection style. The direction style is
+   * used to specify the direction of certain shapes (eg. <mxTriangle>).
+   * Possible values are <DIRECTION_EAST> (default), <DIRECTION_WEST>,
+   * <DIRECTION_NORTH> and <DIRECTION_SOUTH>. Value is "indicatorDirection".
+   */
+  indicatorDirection: any;
+
+  /**
+   * Variable: STYLE_SHADOW
+   *
+   * Defines the key for the shadow style. The type of the value is Boolean.
+   * Value is "shadow".
+   */
+  shadow: any;
+
+  /**
+   * Variable: STYLE_SEGMENT
+   *
+   * Defines the key for the segment style. The type of this value is float
+   * and the value represents the size of the horizontal segment of the
+   * entity relation style. Default is ENTITY_SEGMENT. Value is "segment".
+   */
+  segment: any;
+
+  /**
+   * Variable: STYLE_ENDARROW
+   *
+   * Defines the key for the end arrow marker. Possible values are all
+   * constants with an ARROW-prefix. This is only used in <mxConnector>.
+   * Value is "endArrow".
+   *
+   * Example:
+   * (code)
+   * style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
+   * (end)
+   */
+  endArrow: any;
+
+  /**
+   * Variable: STYLE_STARTARROW
+   *
+   * Defines the key for the start arrow marker. Possible values are all
+   * constants with an ARROW-prefix. This is only used in <mxConnector>.
+   * See <STYLE_ENDARROW>. Value is "startArrow".
+   */
+  startArrow: any;
+
+  /**
+   * Variable: STYLE_ENDSIZE
+   *
+   * Defines the key for the endSize style. The type of this value is numeric
+   * and the value represents the size of the end marker in pixels. Value is
+   * "endSize".
+   */
+  endSize: any;
+
+  /**
+   * Variable: STYLE_STARTSIZE
+   *
+   * Defines the key for the startSize style. The type of this value is
+   * numeric and the value represents the size of the start marker or the
+   * size of the swimlane title region depending on the shape it is used for.
+   * Value is "startSize".
+   */
+  startSize: any;
+
+  /**
+   * Variable: STYLE_SWIMLANE_LINE
+   *
+   * Defines the key for the swimlaneLine style. This style specifies whether
+   * the line between the title regio of a swimlane should be visible. Use 0
+   * for hidden or 1 (default) for visible. Value is "swimlaneLine".
+   */
+  swimlaneLine: any;
+
+  /**
+   * Variable: STYLE_ENDFILL
+   *
+   * Defines the key for the endFill style. Use 0 for no fill or 1 (default)
+   * for fill. (This style is only exported via <mxImageExport>.) Value is
+   * "endFill".
+   */
+  endFill: any;
+
+  /**
+   * Variable: STYLE_STARTFILL
+   *
+   * Defines the key for the startFill style. Use 0 for no fill or 1 (default)
+   * for fill. (This style is only exported via <mxImageExport>.) Value is
+   * "startFill".
+   */
+  startFill: any;
+
+  /**
+   * Variable: STYLE_DASHED
+   *
+   * Defines the key for the dashed style. Use 0 (default) for non-dashed or 1
+   * for dashed. Value is "dashed".
+   */
+  dashed: any;
+
+  /**
+   * Variable: STYLE_DASH_PATTERN
+   *
+   * Defines the key for the dashed pattern style in SVG and image exports.
+   * The type of this value is a space separated list of numbers that specify
+   * a custom-defined dash pattern. Dash styles are defined in terms of the
+   * length of the dash (the drawn part of the stroke) and the length of the
+   * space between the dashes. The lengths are relative to the line width: a
+   * length of "1" is equal to the line width. VML ignores this style and
+   * uses dashStyle instead as defined in the VML specification. This style
+   * is only used in the <mxConnector> shape. Value is "dashPattern".
+   */
+  dashPattern: any;
+
+  /**
+   * Variable: STYLE_FIX_DASH
+   *
+   * Defines the key for the fixDash style. Use 0 (default) for dash patterns
+   * that depend on the linewidth and 1 for dash patterns that ignore the
+   * line width. Value is "fixDash".
+   */
+  fixDash: any;
+
+  /**
+   * Variable: STYLE_ROUNDED
+   *
+   * Defines the key for the rounded style. The type of this value is
+   * Boolean. For edges this determines whether or not joins between edges
+   * segments are smoothed to a rounded finish. For vertices that have the
+   * rectangle shape, this determines whether or not the rectangle is
+   * rounded. Use 0 (default) for non-rounded or 1 for rounded. Value is
+   * "rounded".
+   */
+  rounded: any;
+
+  /**
+   * Variable: STYLE_CURVED
+   *
+   * Defines the key for the curved style. The type of this value is
+   * Boolean. It is only applicable for connector shapes. Use 0 (default)
+   * for non-curved or 1 for curved. Value is "curved".
+   */
+  curved: any;
+
+  /**
+   * Variable: STYLE_ARCSIZE
+   *
+   * Defines the rounding factor for a rounded rectangle in percent (without
+   * the percent sign). Possible values are between 0 and 100. If this value
+   * is not specified then RECTANGLE_ROUNDING_FACTOR * 100 is used. For
+   * edges, this defines the absolute size of rounded corners in pixels. If
+   * this values is not specified then LINE_ARCSIZE is used.
+   * (This style is only exported via <mxImageExport>.) Value is "arcSize".
+   */
+  arcSize: any;
+
+  /**
+   * Variable: STYLE_ABSOLUTE_ARCSIZE
+   *
+   * Defines the key for the absolute arc size style. This specifies if
+   * arcSize for rectangles is abolute or relative. Possible values are 1
+   * and 0 (default). Value is "absoluteArcSize".
+   */
+  absoluteArcSize: any;
+
+  /**
+   * Variable: STYLE_SOURCE_PERIMETER_SPACING
+   *
+   * Defines the key for the source perimeter spacing. The type of this value
+   * is numeric. This is the distance between the source connection point of
+   * an edge and the perimeter of the source vertex in pixels. This style
+   * only applies to edges. Value is "sourcePerimeterSpacing".
+   */
+  sourcePerimeterSpacing: any;
+
+  /**
+   * Variable: STYLE_TARGET_PERIMETER_SPACING
+   *
+   * Defines the key for the target perimeter spacing. The type of this value
+   * is numeric. This is the distance between the target connection point of
+   * an edge and the perimeter of the target vertex in pixels. This style
+   * only applies to edges. Value is "targetPerimeterSpacing".
+   */
+  targetPerimeterSpacing: any;
+
+  /**
+   * Variable: STYLE_PERIMETER_SPACING
+   *
+   * Defines the key for the perimeter spacing. This is the distance between
+   * the connection point and the perimeter in pixels. When used in a vertex
+   * style, this applies to all incoming edges to floating ports (edges that
+   * terminate on the perimeter of the vertex). When used in an edge style,
+   * this spacing applies to the source and target separately, if they
+   * terminate in floating ports (on the perimeter of the vertex). Value is
+   * "perimeterSpacing".
+   */
+  perimeterSpacing: any;
+
+  /**
+   * Variable: STYLE_SPACING
+   *
+   * Defines the key for the spacing. The value represents the spacing, in
+   * pixels, added to each side of a label in a vertex (style applies to
+   * vertices only). Value is "spacing".
+   */
+  spacing: any;
+
+  /**
+   * Variable: STYLE_SPACING_TOP
+   *
+   * Defines the key for the spacingTop style. The value represents the
+   * spacing, in pixels, added to the top side of a label in a vertex (style
+   * applies to vertices only). Value is "spacingTop".
+   */
+  spacingTop: any;
+
+  /**
+   * Variable: STYLE_SPACING_LEFT
+   *
+   * Defines the key for the spacingLeft style. The value represents the
+   * spacing, in pixels, added to the left side of a label in a vertex (style
+   * applies to vertices only). Value is "spacingLeft".
+   */
+  spacingLeft: any;
+
+  /**
+   * Variable: STYLE_SPACING_BOTTOM
+   *
+   * Defines the key for the spacingBottom style The value represents the
+   * spacing, in pixels, added to the bottom side of a label in a vertex
+   * (style applies to vertices only). Value is "spacingBottom".
+   */
+  spacingBottom: any;
+
+  /**
+   * Variable: STYLE_SPACING_RIGHT
+   *
+   * Defines the key for the spacingRight style The value represents the
+   * spacing, in pixels, added to the right side of a label in a vertex (style
+   * applies to vertices only). Value is "spacingRight".
+   */
+  spacingRight: any;
+
+  /**
+   * Variable: STYLE_HORIZONTAL
+   *
+   * Defines the key for the horizontal style. Possible values are
+   * true or false. This value only applies to vertices. If the <STYLE_SHAPE>
+   * is "SHAPE_SWIMLANE" a value of false indicates that the
+   * swimlane should be drawn vertically, true indicates to draw it
+   * horizontally. If the shape style does not indicate that this vertex is a
+   * swimlane, this value affects only whether the label is drawn
+   * horizontally or vertically. Value is "horizontal".
+   */
+  horizontal: any;
+
+  /**
+   * Variable: STYLE_DIRECTION
+   *
+   * Defines the key for the direction style. The direction style is used
+   * to specify the direction of certain shapes (eg. <mxTriangle>).
+   * Possible values are <DIRECTION_EAST> (default), <DIRECTION_WEST>,
+   * <DIRECTION_NORTH> and <DIRECTION_SOUTH>. Value is "direction".
+   */
+  direction: any;
+
+  /**
+   * Variable: STYLE_ANCHOR_POINT_DIRECTION
+   *
+   * Defines the key for the anchorPointDirection style. The defines if the
+   * direction style should be taken into account when computing the fixed
+   * point location for connected edges. Default is 1 (yes). Set this to 0
+   * to ignore the direction style for fixed connection points. Value is
+   * "anchorPointDirection".
+   */
+  anchorPointDirection: any;
+
+  /**
+   * Variable: STYLE_ELBOW
+   *
+   * Defines the key for the elbow style. Possible values are
+   * <ELBOW_HORIZONTAL> and <ELBOW_VERTICAL>. Default is <ELBOW_HORIZONTAL>.
+   * This defines how the three segment orthogonal edge style leaves its
+   * terminal vertices. The vertical style leaves the terminal vertices at
+   * the top and bottom sides. Value is "elbow".
+   */
+  elbow: any;
+
+  /**
+   * Variable: STYLE_FONTCOLOR
+   *
+   * Defines the key for the fontColor style. Possible values are all HTML
+   * color names or HEX codes. Value is "fontColor".
+   */
+  fontColor: any;
+
+  /**
+   * Variable: STYLE_FONTFAMILY
+   *
+   * Defines the key for the fontFamily style. Possible values are names such
+   * as Arial; Dialog; Verdana; Times New Roman. The value is of type String.
+   * Value is fontFamily.
+   */
+  fontFamily: any;
+
+  /**
+   * Variable: STYLE_FONTSIZE
+   *
+   * Defines the key for the fontSize style (in px). The type of the value
+   * is int. Value is "fontSize".
+   */
+  fontSize: any;
+
+  /**
+   * Variable: STYLE_FONTSTYLE
+   *
+   * Defines the key for the fontStyle style. Values may be any logical AND
+   * (sum) of <FONT_BOLD>, <FONT_ITALIC> and <FONT_UNDERLINE>.
+   * The type of the value is int. Value is "fontStyle".
+   */
+  fontStyle: any;
+
+  /**
+   * Variable: STYLE_ASPECT
+   *
+   * Defines the key for the aspect style. Possible values are empty or fixed.
+   * If fixed is used then the aspect ratio of the cell will be maintained
+   * when resizing. Default is empty. Value is "aspect".
+   */
+  aspect: any;
+
+  /**
+   * Variable: STYLE_AUTOSIZE
+   *
+   * Defines the key for the autosize style. This specifies if a cell should be
+   * resized automatically if the value has changed. Possible values are 0 or 1.
+   * Default is 0. See <mxGraph.isAutoSizeCell>. This is normally combined with
+   * <STYLE_RESIZABLE> to disable manual sizing. Value is "autosize".
+   */
+  autosize: any;
+
+  /**
+   * Variable: STYLE_FOLDABLE
+   *
+   * Defines the key for the foldable style. This specifies if a cell is foldable
+   * using a folding icon. Possible values are 0 or 1. Default is 1. See
+   * <mxGraph.isCellFoldable>. Value is "foldable".
+   */
+  foldable: any;
+
+  /**
+   * Variable: STYLE_EDITABLE
+   *
+   * Defines the key for the editable style. This specifies if the value of
+   * a cell can be edited using the in-place editor. Possible values are 0 or
+   * 1. Default is 1. See <mxGraph.isCellEditable>. Value is "editable".
+   */
+  editable: any;
+
+  /**
+   * Variable: STYLE_BACKGROUND_OUTLINE
+   *
+   * Defines the key for the backgroundOutline style. This specifies if a
+   * only the background of a cell should be painted when it is highlighted.
+   * Possible values are 0 or 1. Default is 0. Value is "backgroundOutline".
+   */
+  backgroundOutline: any;
+
+  /**
+   * Variable: STYLE_BENDABLE
+   *
+   * Defines the key for the bendable style. This specifies if the control
+   * points of an edge can be moved. Possible values are 0 or 1. Default is
+   * 1. See <mxGraph.isCellBendable>. Value is "bendable".
+   */
+  bendable: any;
+
+  /**
+   * Variable: STYLE_MOVABLE
+   *
+   * Defines the key for the movable style. This specifies if a cell can
+   * be moved. Possible values are 0 or 1. Default is 1. See
+   * <mxGraph.isCellMovable>. Value is "movable".
+   */
+  movable: any;
+
+  /**
+   * Variable: STYLE_RESIZABLE
+   *
+   * Defines the key for the resizable style. This specifies if a cell can
+   * be resized. Possible values are 0 or 1. Default is 1. See
+   * <mxGraph.isCellResizable>. Value is "resizable".
+   */
+  resizable: any;
+
+  /**
+   * Variable: STYLE_RESIZE_WIDTH
+   *
+   * Defines the key for the resizeWidth style. This specifies if a cell's
+   * width is resized if the parent is resized. If this is 1 then the width
+   * will be resized even if the cell's geometry is relative. If this is 0
+   * then the cell's width will not be resized. Default is not defined. Value
+   * is "resizeWidth".
+   */
+  resizeWidth: any;
+
+  /**
+   * Variable: STYLE_RESIZE_WIDTH
+   *
+   * Defines the key for the resizeHeight style. This specifies if a cell's
+   * height if resize if the parent is resized. If this is 1 then the height
+   * will be resized even if the cell's geometry is relative. If this is 0
+   * then the cell's height will not be resized. Default is not defined. Value
+   * is "resizeHeight".
+   */
+  resizeHeight: any;
+
+  /**
+   * Variable: STYLE_ROTATABLE
+   *
+   * Defines the key for the rotatable style. This specifies if a cell can
+   * be rotated. Possible values are 0 or 1. Default is 1. See
+   * <mxGraph.isCellRotatable>. Value is "rotatable".
+   */
+  rotatable: any;
+
+  /**
+   * Variable: STYLE_CLONEABLE
+   *
+   * Defines the key for the cloneable style. This specifies if a cell can
+   * be cloned. Possible values are 0 or 1. Default is 1. See
+   * <mxGraph.isCellCloneable>. Value is "cloneable".
+   */
+  cloneable: any;
+
+  /**
+   * Variable: STYLE_DELETABLE
+   *
+   * Defines the key for the deletable style. This specifies if a cell can be
+   * deleted. Possible values are 0 or 1. Default is 1. See
+   * <mxGraph.isCellDeletable>. Value is "deletable".
+   */
+  deletable: any;
+
+  /**
+   * Variable: STYLE_SHAPE
+   *
+   * Defines the key for the shape. Possible values are all constants with
+   * a SHAPE-prefix or any newly defined shape names. Value is "shape".
+   */
+  shape: any;
+
+  /**
+   * Variable: STYLE_EDGE
+   *
+   * Defines the key for the edge style. Possible values are the functions
+   * defined in <mxEdgeStyle>. Value is "edgeStyle".
+   */
+  edgeStyle: any;
+
+  /**
+   * Variable: STYLE_JETTY_SIZE
+   *
+   * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.
+   * Default is 10. Possible values are all numeric values or "auto".
+   * Jetty size is the minimum length of the orthogonal segment before
+   * it attaches to a shape.
+   * Value is "jettySize".
+   */
+  jettySize: any;
+
+  /**
+   * Variable: STYLE_SOURCE_JETTY_SIZE
+   *
+   * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.
+   * Default is 10. Possible values are numeric values or "auto". This has
+   * precedence over <STYLE_JETTY_SIZE>. Value is "sourceJettySize".
+   */
+  sourceJettySize: any;
+
+  /**
+   * Variable: targetJettySize
+   *
+   * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.
+   * Default is 10. Possible values are numeric values or "auto". This has
+   * precedence over <STYLE_JETTY_SIZE>. Value is "targetJettySize".
+   */
+  targetJettySize: any;
+
+  /**
+   * Variable: STYLE_LOOP
+   *
+   * Defines the key for the loop style. Possible values are the functions
+   * defined in <mxEdgeStyle>. Value is "loopStyle". Default is
+   * <mxGraph.defaultLoopStylean>.
+   */
+  loopStyle: any;
+
+  /**
+   * Variable: STYLE_ORTHOGONAL_LOOP
+   *
+   * Defines the key for the orthogonal loop style. Possible values are 0 and
+   * 1. Default is 0. Value is "orthogonalLoop". Use this style to specify
+   * if loops with no waypoints and defined anchor points should be routed
+   * using <STYLE_LOOP> or not routed.
+   */
+  orthogonalLoop: any;
+
+  /**
+   * Variable: STYLE_ROUTING_CENTER_X
+   *
+   * Defines the key for the horizontal routing center. Possible values are
+   * between -0.5 and 0.5. This is the relative offset from the center used
+   * for connecting edges. The type of this value is numeric. Value is
+   * "routingCenterX".
+   */
+  routingCenterX: any;
+
+  /**
+   * Variable: STYLE_ROUTING_CENTER_Y
+   *
+   * Defines the key for the vertical routing center. Possible values are
+   * between -0.5 and 0.5. This is the relative offset from the center used
+   * for connecting edges. The type of this value is numeric. Value is
+   * "routingCenterY".
+   */
+  routingCenterY: any;
+}
+
+export default StyleMap;
diff --git a/packages/core/src/view/graph/mxGraph.ts b/packages/core/src/view/graph/mxGraph.ts
index f9321815b..2ffd30359 100644
--- a/packages/core/src/view/graph/mxGraph.ts
+++ b/packages/core/src/view/graph/mxGraph.ts
@@ -86,6 +86,8 @@ import {
   isTouchEvent,
 } from '../../util/mxEventUtils';
 import { isNode } from '../../util/mxDomUtils';
+import mxCellArray from "../cell/mxCellArray";
+import StyleMap from "./StyleMap";
 
 /**
  * Extends {@link mxEventSource} to implement a graph component for
@@ -157,7 +159,6 @@ class mxGraph extends mxEventSource {
    *
    * @param container DOM node that will contain the graph display.
    */
-  // init(container: HTMLElement): void;
   init(container: HTMLElement): void {
     this.container = container;
 
@@ -214,7 +215,6 @@ class mxGraph extends mxEventSource {
   /**
    * Holds the mouse event listeners. See {@link fireMouseEvent}.
    */
-  // mouseListeners: any[];
   mouseListeners: any[] | null = null;
 
   /*****************************************************************************
@@ -224,19 +224,16 @@ class mxGraph extends mxEventSource {
   /**
    * Holds the state of the mouse button.
    */
-  // isMouseDown: boolean;
   isMouseDown: boolean = false;
 
   /**
    * Holds the {@link mxGraphModel} that contains the cells to be displayed.
    */
-  // model: mxGraphModel;
   model: mxGraphModel | null = null;
 
   /**
    * Holds the {@link mxGraphView} that caches the {@link mxCellState}s for the cells.
    */
-  // view: mxGraphView;
   view: mxGraphView;
 
   /**
@@ -252,59 +249,50 @@ class mxGraph extends mxEventSource {
    * dec.decode(root, graph.stylesheet);
    * ```
    */
-  // stylesheet: mxStylesheet;
   stylesheet: mxStylesheet | null = null;
 
   /**
    * Holds the {@link mxGraphSelectionModel} that models the current selection.
    */
-  // selectionModel: mxGraphSelectionModel;
   selectionModel: mxGraphSelectionModel | null = null;
 
   /**
    * Holds the {@link mxCellEditor} that is used as the in-place editing.
    */
-  // cellEditor: mxCellEditor;
   cellEditor: mxCellEditor | null = null;
 
   /**
    * Holds the {@link mxCellRenderer} for rendering the cells in the graph.
    */
-  // cellRenderer: mxCellRenderer;
   cellRenderer: mxCellRenderer;
 
   /**
    * An array of {@link mxMultiplicity} describing the allowed
    * connections in a graph.
    */
-  // multiplicities: mxMultiplicity[];
   multiplicities: mxMultiplicity[] | null = null;
 
   /**
    * RenderHint as it was passed to the constructor.
    */
-  // renderHint: any;
   renderHint: string | null = null;
 
   /**
    * Dialect to be used for drawing the graph. Possible values are all
    * constants in {@link mxConstants} with a DIALECT-prefix.
    */
-  // dialect: mxDialectConstants;
   dialect: 'svg' | 'mixedHtml' | 'preferHtml' | 'strictHtml' = 'svg';
 
   /**
    * Specifies the grid size.
    * @default 10
    */
-  // gridSize: number;
   gridSize: number = 10;
 
   /**
    * Specifies if the grid is enabled. This is used in {@link snap}.
    * @default true
    */
-  // gridEnabled: boolean;
   gridEnabled: boolean = true;
 
   /**
@@ -312,14 +300,12 @@ class mxGraph extends mxEventSource {
    * the respective style.
    * @default true
    */
-  // portsEnabled: boolean;
   portsEnabled: boolean = true;
 
   /**
    * Specifies if native double click events should be detected.
    * @default true
    */
-  // nativeDblClickEnabled: boolean;
   nativeDblClickEnabled: boolean = true;
 
   /**
@@ -327,21 +313,18 @@ class mxGraph extends mxEventSource {
    * double click.
    * @default true
    */
-  // doubleTapEnabled: boolean;
   doubleTapEnabled: boolean = true;
 
   /**
    * Specifies the timeout in milliseconds for double taps and non-native double clicks.
    * @default 500
    */
-  // doubleTapTimeout: number;
   doubleTapTimeout: number = 500;
 
   /**
    * Specifies the tolerance in pixels for double taps and double clicks in quirks mode.
    * @default 25
    */
-  // doubleTapTolerance: number;
   doubleTapTolerance: number = 25;
 
   /**
@@ -354,13 +337,11 @@ class mxGraph extends mxEventSource {
   /**
    * Holds the x-coordinate of the last touch event for double tap detection.
    */
-  // lastTouchY: number;
   lastTouchY: number = 0;
 
   /**
    * Holds the time of the last touch event for double click detection.
    */
-  // lastTouchTime: number;
   lastTouchTime: number = 0;
 
   /**
@@ -368,46 +349,39 @@ class mxGraph extends mxEventSource {
    * devices.
    * @default true
    */
-  // tapAndHoldEnabled: boolean;
   tapAndHoldEnabled: boolean = true;
 
   /**
    * Specifies the time in milliseconds for a tap and hold.
    * @default 500
    */
-  // tapAndHoldDelay: number;
   tapAndHoldDelay: number = 500;
 
   /**
    * `True` if the timer for tap and hold events is running.
    */
-  // tapAndHoldInProgress: boolean;
   tapAndHoldInProgress: boolean = false;
 
   /**
    * `True` as long as the timer is running and the touch events
    * stay within the given {@link tapAndHoldTolerance}.
    */
-  // tapAndHoldValid: boolean;
   tapAndHoldValid: boolean = false;
 
   /**
    * Holds the x-coordinate of the initial touch event for tap and hold.
    */
-  // initialTouchX: number;
   initialTouchX: number = 0;
 
   /**
    * Holds the y-coordinate of the initial touch event for tap and hold.
    */
-  // initialTouchY: number;
   initialTouchY: number = 0;
 
   /**
    * Tolerance in pixels for a move to be handled as a single click.
    * @default 4
    */
-  // tolerance: number;
   tolerance: number = 4;
 
   /**
@@ -416,7 +390,6 @@ class mxGraph extends mxEventSource {
    * {@link isConstrainChild} returns `true`. The value specifies the
    * portion of the child which is allowed to overlap the parent.
    */
-  // defaultOverlap: number;
   defaultOverlap: number = 0.5;
 
   /**
@@ -424,7 +397,6 @@ class mxGraph extends mxEventSource {
    * This is used in {@link getDefaultParent}.
    * @default null
    */
-  // defaultParent: mxCell;
   defaultParent: mxCell | null = null;
 
   /**
@@ -432,7 +404,6 @@ class mxGraph extends mxEventSource {
    * on an edge is being double clicked.
    * @default null
    */
-  // alternateEdgeStyle: string;
   alternateEdgeStyle: string | null = null;
 
   /**
@@ -446,7 +417,6 @@ class mxGraph extends mxEventSource {
    * graph.view.validate();
    * ```
    */
-  // backgroundImage: mxImage;
   backgroundImage: mxImage | null = null;
 
   /**
@@ -454,7 +424,6 @@ class mxGraph extends mxEventSource {
    * Not yet implemented.
    * @default false
    */
-  // pageVisible: boolean;
   pageVisible: boolean = false;
 
   /**
@@ -463,28 +432,24 @@ class mxGraph extends mxEventSource {
    * should call {@link sizeDidChange} to force an update of the display.
    * @default false
    */
-  // pageBreaksVisible: boolean;
   pageBreaksVisible: boolean = false;
 
   /**
    * Specifies the color for page breaks.
    * @default gray
    */
-  // pageBreakColor: string;
   pageBreakColor: string = 'gray';
 
   /**
    * Specifies the page breaks should be dashed.
    * @default true
    */
-  // pageBreakDashed: boolean;
   pageBreakDashed: boolean = true;
 
   /**
    * Specifies the minimum distance in pixels for page breaks to be visible.
    * @default 20
    */
-  // minPageBreakDist: number;
   minPageBreakDist: number = 20;
 
   /**
@@ -492,7 +457,6 @@ class mxGraph extends mxEventSource {
    * {@link sizeDidChange}. This is only used if the graph container has scrollbars.
    * @default false
    */
-  // preferPageSize: boolean;
   preferPageSize: boolean = false;
 
   /**
@@ -501,7 +465,6 @@ class mxGraph extends mxEventSource {
    * if {@link pageVisible} is `true` and the page breaks if {@link pageBreaksVisible} is `true`.
    * @default {@link mxConstants.PAGE_FORMAT_A4_PORTRAIT}
    */
-  // pageFormat: mxRectangle;
   pageFormat: mxRectangle = new mxRectangle(...PAGE_FORMAT_A4_PORTRAIT);
 
   /**
@@ -509,14 +472,12 @@ class mxGraph extends mxEventSource {
    * Not yet implemented.
    * @default 1.5
    */
-  // pageScale: number;
   pageScale: number = 1.5;
 
   /**
    * Specifies the return value for {@link isEnabled}.
    * @default true
    */
-  // enabled: boolean;
   enabled: boolean = true;
 
   /**
@@ -524,7 +485,6 @@ class mxGraph extends mxEventSource {
    * is pressed.
    * @default true
    */
-  // escapeEnabled: boolean;
   escapeEnabled: boolean = true;
 
   /**
@@ -534,7 +494,6 @@ class mxGraph extends mxEventSource {
    * {@link mxCellEditor}.
    * @default true
    */
-  // invokesStopCellEditing: boolean;
   invokesStopCellEditing: boolean = true;
 
   /**
@@ -543,7 +502,6 @@ class mxGraph extends mxEventSource {
    * cell editing. Note: You can always use F2 and escape to stop editing.
    * @default false
    */
-  // enterStopsCellEditing: boolean;
   enterStopsCellEditing: boolean = false;
 
   /**
@@ -553,35 +511,30 @@ class mxGraph extends mxEventSource {
    * then no panning occurs if this is `true`.
    * @default true
    */
-  // useScrollbarsForPanning: boolean;
   useScrollbarsForPanning: boolean = true;
 
   /**
    * Specifies the return value for {@link canExportCell}.
    * @default true
    */
-  // exportEnabled: boolean;
   exportEnabled: boolean = true;
 
   /**
    * Specifies the return value for {@link canImportCell}.
    * @default true
    */
-  // importEnabled: boolean;
   importEnabled: boolean = true;
 
   /**
    * Specifies the return value for {@link isCellLocked}.
    * @default false
    */
-  // cellsLocked: boolean;
   cellsLocked: boolean = false;
 
   /**
    * Specifies the return value for {@link isCellCloneable}.
    * @default true
    */
-  // cellsCloneable: boolean;
   cellsCloneable: boolean = true;
 
   /**
@@ -589,49 +542,42 @@ class mxGraph extends mxEventSource {
    * should be enabled).
    * @default true
    */
-  // foldingEnabled: boolean;
   foldingEnabled: boolean = true;
 
   /**
    * Specifies the return value for {@link isCellEditable}.
    * @default true
    */
-  // cellsEditable: boolean;
   cellsEditable: boolean = true;
 
   /**
    * Specifies the return value for {@link isCellDeletable}.
    * @default true
    */
-  // cellsDeletable: boolean;
   cellsDeletable: boolean = true;
 
   /**
    * Specifies the return value for {@link isCellMovable}.
    * @default true
    */
-  // cellsMovable: boolean;
   cellsMovable: boolean = true;
 
   /**
    * Specifies the return value for edges in {@link isLabelMovable}.
    * @default true
    */
-  // edgeLabelsMovable: boolean;
   edgeLabelsMovable: boolean = true;
 
   /**
    * Specifies the return value for vertices in {@link isLabelMovable}.
    * @default false
    */
-  // vertexLabelsMovable: boolean;
   vertexLabelsMovable: boolean = false;
 
   /**
    * Specifies the return value for {@link isDropEnabled}.
    * @default false
    */
-  // dropEnabled: boolean;
   dropEnabled: boolean = false;
 
   /**
@@ -640,35 +586,30 @@ class mxGraph extends mxEventSource {
    * out the drop operation.
    * @default true
    */
-  // splitEnabled: boolean;
   splitEnabled: boolean = true;
 
   /**
    * Specifies the return value for {@link isCellsResizable}.
    * @default true
    */
-  // cellsResizable: boolean;
   cellsResizable: boolean = true;
 
   /**
    * Specifies the return value for {@link isCellsBendable}.
    * @default true
    */
-  // cellsBendable: boolean;
   cellsBendable: boolean = true;
 
   /**
    * Specifies the return value for {@link isCellsSelectable}.
    * @default true
    */
-  // cellsSelectable: boolean;
   cellsSelectable: boolean = true;
 
   /**
    * Specifies the return value for {@link isCellsDisconnectable}.
    * @default true
    */
-  // cellsDisconnectable: boolean;
   cellsDisconnectable: boolean = true;
 
   /**
@@ -676,14 +617,12 @@ class mxGraph extends mxEventSource {
    * edit. This is used in {@link isAutoSizeCell}.
    * @default false
    */
-  // autoSizeCells: boolean;
   autoSizeCells: boolean = false;
 
   /**
    * Specifies if autoSize style should be applied when cells are added.
    * @default false
    */
-  // autoSizeCellsOnAdd: boolean;
   autoSizeCellsOnAdd: boolean = false;
 
   /**
@@ -696,7 +635,6 @@ class mxGraph extends mxEventSource {
    * no scrollbars, the use of {@link allowAutoPanning} is recommended.
    * @default true
    */
-  // autoScroll: boolean;
   autoScroll: boolean = true;
 
   /**
@@ -705,7 +643,6 @@ class mxGraph extends mxEventSource {
    * scroll positions (ie usually only rightwards and downwards). To avoid
    * possible conflicts with panning, set {@link translateToScrollPosition} to `true`.
    */
-  // ignoreScrollbars: boolean;
   ignoreScrollbars: boolean = false;
 
   /**
@@ -714,7 +651,6 @@ class mxGraph extends mxEventSource {
    * This can be used to avoid conflicts when using {@link autoScroll} and
    * {@link ignoreScrollbars} with no scrollbars in the container.
    */
-  // translateToScrollPosition: boolean;
   translateToScrollPosition: boolean = false;
 
   /**
@@ -725,7 +661,6 @@ class mxGraph extends mxEventSource {
    * are visible and scrollable in all directions.
    * @default false
    */
-  // timerAutoScroll: boolean;
   timerAutoScroll: boolean = false;
 
   /**
@@ -735,7 +670,6 @@ class mxGraph extends mxEventSource {
    * positive value.
    * @default false
    */
-  // allowAutoPanning: boolean;
   allowAutoPanning: boolean = false;
 
   /**
@@ -744,7 +678,6 @@ class mxGraph extends mxEventSource {
    * account if the container has scrollbars. See {@link autoScroll}.
    * @default true
    */
-  // autoExtend: boolean;
   autoExtend: boolean = true;
 
   /**
@@ -752,7 +685,6 @@ class mxGraph extends mxEventSource {
    * should be placed. Uses in {@link getMaximumGraphBounds}. Use a width or height of
    * `0` if you only want to give a upper, left corner.
    */
-  // maximumGraphBounds: mxRectangle;
   maximumGraphBounds: mxRectangle | null = null;
 
   /**
@@ -760,21 +692,18 @@ class mxGraph extends mxEventSource {
    * if the graph container has no scrollbars.
    * @default null
    */
-  // minimumGraphSize: mxRectangle;
   minimumGraphSize: mxRectangle | null = null;
 
   /**
    * {@link mxRectangle} that specifies the minimum size of the {@link container} if
    * {@link resizeContainer} is `true`.
    */
-  // minimumContainerSize: mxRectangle;
   minimumContainerSize: mxRectangle | null = null;
 
   /**
    * {@link mxRectangle} that specifies the maximum size of the container if
    * {@link resizeContainer} is `true`.
    */
-  // maximumContainerSize: mxRectangle;
   maximumContainerSize: mxRectangle | null = null;
 
   /**
@@ -782,7 +711,6 @@ class mxGraph extends mxEventSource {
    * the graph size has changed.
    * @default false
    */
-  // resizeContainer: boolean;
   resizeContainer: boolean = false;
 
   /**
@@ -790,7 +718,6 @@ class mxGraph extends mxEventSource {
    * being resized after the graph has been changed.
    * @default 0
    */
-  // border: number;
   border: number = 0;
 
   /**
@@ -799,7 +726,6 @@ class mxGraph extends mxEventSource {
    * both `true` then the normal order is applied.
    * @default false
    */
-  // keepEdgesInForeground: boolean;
   keepEdgesInForeground: boolean = false;
 
   /**
@@ -808,14 +734,12 @@ class mxGraph extends mxEventSource {
    * both `true` then the normal order is applied.
    * @default false
    */
-  // keepEdgesInBackground: boolean;
   keepEdgesInBackground: boolean = false;
 
   /**
    * Specifies if negative coordinates for vertices are allowed.
    * @default true
    */
-  // allowNegativeCoordinates: boolean;
   allowNegativeCoordinates: boolean = true;
 
   /**
@@ -823,7 +747,6 @@ class mxGraph extends mxEventSource {
    * move or resize of the child.
    * @default true
    */
-  // constrainChildren: boolean;
   constrainChildren: boolean = true;
 
   /**
@@ -832,7 +755,6 @@ class mxGraph extends mxEventSource {
    * {@link maximumGraphBounds}.
    * @default false
    */
-  // constrainRelativeChildren: boolean;
   constrainRelativeChildren: boolean = false;
 
   /**
@@ -840,7 +762,6 @@ class mxGraph extends mxEventSource {
    * the child. This has precedence over {@link constrainChildren}.
    * @default true
    */
-  // extendParents: boolean;
   extendParents: boolean = true;
 
   /**
@@ -848,7 +769,6 @@ class mxGraph extends mxEventSource {
    * switch if cells are added.
    * @default true
    */
-  // extendParentsOnAdd: boolean;
   extendParentsOnAdd: boolean = true;
 
   /**
@@ -856,14 +776,12 @@ class mxGraph extends mxEventSource {
    * switch if cells are added.
    * @default false (for backwards compatibility)
    */
-  // extendParentsOnMove: boolean;
   extendParentsOnMove: boolean = false;
 
   /**
    * Specifies the return value for {@link isRecursiveResize}.
    * @default false (for backwards compatibility)
    */
-  // recursiveResize: boolean;
   recursiveResize: boolean = false;
 
   /**
@@ -871,21 +789,18 @@ class mxGraph extends mxEventSource {
    * a cell is first collapsed.
    * @default true
    */
-  // collapseToPreferredSize: boolean;
   collapseToPreferredSize: boolean = true;
 
   /**
    * Specifies the factor used for {@link zoomIn} and {@link zoomOut}.
    * @default 1.2 (120%)
    */
-  // zoomFactor: number;
   zoomFactor: number = 1.2;
 
   /**
    * Specifies if the viewport should automatically contain the selection cells after a zoom operation.
    * @default false
    */
-  // keepSelectionVisibleOnZoom: boolean;
   keepSelectionVisibleOnZoom: boolean = false;
 
   /**
@@ -893,7 +808,6 @@ class mxGraph extends mxEventSource {
    * diagram rather than going from top, left.
    * @default true
    */
-  // centerZoom: boolean;
   centerZoom: boolean = true;
 
   /**
@@ -901,7 +815,6 @@ class mxGraph extends mxEventSource {
    * the model.
    * @default true
    */
-  // resetViewOnRootChange: boolean;
   resetViewOnRootChange: boolean = true;
 
   /**
@@ -909,7 +822,6 @@ class mxGraph extends mxEventSource {
    * connected cell.
    * @default false
    */
-  // resetEdgesOnResize: boolean;
   resetEdgesOnResize: boolean = false;
 
   /**
@@ -917,7 +829,6 @@ class mxGraph extends mxEventSource {
    * connected cell.
    * @default false
    */
-  // resetEdgesOnMove: boolean;
   resetEdgesOnMove: boolean = false;
 
   /**
@@ -925,14 +836,12 @@ class mxGraph extends mxEventSource {
    * reconnected.
    * @default true
    */
-  // resetEdgesOnConnect: boolean;
   resetEdgesOnConnect: boolean = true;
 
   /**
    * Specifies if loops (aka self-references) are allowed.
    * @default false
    */
-  // allowLoops: boolean;
   allowLoops: boolean = false;
 
   /**
@@ -940,7 +849,6 @@ class mxGraph extends mxEventSource {
    * {@link mxConstants.STYLE_LOOP} is undefined.
    * @default {@link mxEdgeStyle.Loop}
    */
-  // defaultLoopStyle: any;
   defaultLoopStyle = mxEdgeStyle.Loop;
 
   /**
@@ -948,21 +856,18 @@ class mxGraph extends mxEventSource {
    * vertices are allowed.
    * @default true
    */
-  // multigraph: boolean;
   multigraph: boolean = true;
 
   /**
    * Specifies if edges are connectable. This overrides the connectable field in edges.
    * @default false
    */
-  // connectableEdges: boolean;
   connectableEdges: boolean = false;
 
   /**
    * Specifies if edges with disconnected terminals are allowed in the graph.
    * @default true
    */
-  // allowDanglingEdges: boolean;
   allowDanglingEdges: boolean = true;
 
   /**
@@ -970,7 +875,6 @@ class mxGraph extends mxEventSource {
    * if they are valid.
    * @default true
    */
-  // cloneInvalidEdges: boolean;
   cloneInvalidEdges: boolean = false;
 
   /**
@@ -978,21 +882,18 @@ class mxGraph extends mxEventSource {
    * are moved.
    * @default true
    */
-  // disconnectOnMove: boolean;
   disconnectOnMove: boolean = true;
 
   /**
    * Specifies if labels should be visible. This is used in {@link getLabel}. Default
    * is true.
    */
-  // labelsVisible: boolean;
   labelsVisible: boolean = true;
 
   /**
    * Specifies the return value for {@link isHtmlLabel}.
    * @default false
    */
-  // htmlLabels: boolean;
   htmlLabels: boolean = false;
 
   /**
@@ -1000,14 +901,12 @@ class mxGraph extends mxEventSource {
    * mouse is released.
    * @default true
    */
-  // swimlaneSelectionEnabled: boolean;
   swimlaneSelectionEnabled: boolean = true;
 
   /**
    * Specifies if nesting of swimlanes is allowed.
    * @default true
    */
-  // swimlaneNesting: boolean;
   swimlaneNesting: boolean = true;
 
   /**
@@ -1015,48 +914,41 @@ class mxGraph extends mxEventSource {
    * color is set to 'swimlane'.
    * @default {@link 'fillColor'}
    */
-  // swimlaneIndicatorColorAttribute: string;
   swimlaneIndicatorColorAttribute: string = 'fillColor';
 
   /**
    * Holds the list of image bundles.
    */
-  // imageBundles: mxImageBundle[];
   imageBundles: mxImageBundle[] = [];
 
   /**
    * Specifies the minimum scale to be applied in {@link fit}. Set this to `null` to allow any value.
    * @default 0.1
    */
-  // minFitScale: number;
   minFitScale: number = 0.1;
 
   /**
    * Specifies the maximum scale to be applied in {@link fit}. Set this to `null` to allow any value.
    * @default 8
    */
-  // maxFitScale: number;
   maxFitScale: number = 8;
 
   /**
    * Current horizontal panning value.
    * @default 0
    */
-  // panDx: number;
   panDx: number = 0;
 
   /**
    * Current vertical panning value.
    * @default 0
    */
-  // panDy: number;
   panDy: number = 0;
 
   /**
    * Specifies the {@link mxImage} to indicate a collapsed state.
    * Default value is mxClient.imageBasePath + '/collapsed.gif'
    */
-  // collapsedImage: mxImage;
   collapsedImage: mxImage = new mxImage(
     `${mxClient.imageBasePath}/collapsed.gif`,
     9,
@@ -1067,7 +959,6 @@ class mxGraph extends mxEventSource {
    * Specifies the {@link mxImage} to indicate a expanded state.
    * Default value is mxClient.imageBasePath + '/expanded.gif'
    */
-  // expandedImage: mxImage;
   expandedImage: mxImage = new mxImage(
     `${mxClient.imageBasePath}/expanded.gif`,
     9,
@@ -1080,7 +971,6 @@ class mxGraph extends mxEventSource {
    * '/warning'.  The extension for the image depends on the platform. It is
    * '.png' on the Mac and '.gif' on all other platforms.
    */
-  // warningImage: mxImage;
   warningImage: mxImage = new mxImage(
     `${mxClient.imageBasePath}/warning${mxClient.IS_MAC ? '.png' : '.gif'}`,
     16,
@@ -1093,7 +983,6 @@ class mxGraph extends mxEventSource {
    * for this key does not exist then the value is used as the error message.
    * @default 'alreadyConnected'
    */
-  // alreadyConnectedResource: string;
   alreadyConnectedResource: string =
     mxClient.language != 'none' ? 'alreadyConnected' : '';
 
@@ -1103,7 +992,6 @@ class mxGraph extends mxEventSource {
    * key does not exist then the value is used as the warning message.
    * @default 'containsValidationErrors'
    */
-  // containsValidationErrorsResource: string;
   containsValidationErrorsResource: string =
     mxClient.language != 'none' ? 'containsValidationErrors' : '';
 
@@ -1113,7 +1001,6 @@ class mxGraph extends mxEventSource {
    * the tooltip.
    * @default 'collapse-expand'
    */
-  // collapseExpandResource: string;
   collapseExpandResource: string =
     mxClient.language != 'none' ? 'collapse-expand' : '';
 
@@ -1131,7 +1018,6 @@ class mxGraph extends mxEventSource {
    * Creates the tooltip-, panning-, connection- and graph-handler (in this
    * order). This is called in the constructor before {@link init} is called.
    */
-  // createHandlers(): void;
   createHandlers(): void {
     this.tooltipHandler = this.createTooltipHandler();
     this.tooltipHandler.setEnabled(false);
@@ -1147,7 +1033,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates and returns a new {@link mxTooltipHandler} to be used in this graph.
    */
-  // createTooltipHandler(): mxTooltipHandler;
   createTooltipHandler(): mxTooltipHandler {
     return new mxTooltipHandler(this);
   }
@@ -1155,7 +1040,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates and returns a new {@link mxTooltipHandler} to be used in this graph.
    */
-  // createSelectionCellsHandler: mxSelectionCellsHandler;
   createSelectionCellsHandler(): mxSelectionCellsHandler {
     return new mxSelectionCellsHandler(this);
   }
@@ -1163,7 +1047,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates and returns a new {@link mxConnectionHandler} to be used in this graph.
    */
-  // createConnectionHandler(): mxConnectionHandler;
   createConnectionHandler(): mxConnectionHandler {
     return new mxConnectionHandler(this);
   }
@@ -1171,7 +1054,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates and returns a new {@link mxGraphHandler} to be used in this graph.
    */
-  // createGraphHandler(): mxGraphHandler;
   createGraphHandler(): mxGraphHandler {
     return new mxGraphHandler(this);
   }
@@ -1179,7 +1061,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates and returns a new {@link mxPanningHandler} to be used in this graph.
    */
-  // createPanningHandler(): mxPanningHandler;
   createPanningHandler(): mxPanningHandler {
     return new mxPanningHandler(this);
   }
@@ -1187,7 +1068,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates and returns a new {@link mxPopupMenuHandler} to be used in this graph.
    */
-  // createPopupMenuHandler(): mxPopupMenuHandler;
   createPopupMenuHandler(): mxPopupMenuHandler {
     return new mxPopupMenuHandler(this);
   }
@@ -1195,7 +1075,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates a new {@link mxGraphSelectionModel} to be used in this graph.
    */
-  // createSelectionModel(): mxGraphSelectionModel;
   createSelectionModel(): mxGraphSelectionModel {
     return new mxGraphSelectionModel(this);
   }
@@ -1203,7 +1082,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates a new {@link mxGraphSelectionModel} to be used in this graph.
    */
-  // createStylesheet(): mxStylesheet;
   createStylesheet(): mxStylesheet {
     return new mxStylesheet();
   }
@@ -1211,7 +1089,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates a new {@link mxGraphView} to be used in this graph.
    */
-  // createGraphView(): mxGraphView;
   createGraphView(): mxGraphView {
     return new mxGraphView(this);
   }
@@ -1219,7 +1096,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates a new {@link mxCellRenderer} to be used in this graph.
    */
-  // createCellRenderer(): mxCellRenderer;
   createCellRenderer(): mxCellRenderer {
     return new mxCellRenderer();
   }
@@ -1227,7 +1103,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates a new {@link mxCellEditor} to be used in this graph.
    */
-  // createCellEditor(): mxCellEditor;
   createCellEditor(): mxCellEditor {
     return new mxCellEditor(this);
   }
@@ -1235,7 +1110,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the {@link mxGraphModel} that contains the cells.
    */
-  // getModel(): mxGraphModel;
   getModel(): mxGraphModel {
     return <mxGraphModel>this.model;
   }
@@ -1243,7 +1117,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the {@link mxGraphView} that contains the {@link mxCellStates}.
    */
-  // getView(): mxGraphView;
   getView(): mxGraphView {
     return <mxGraphView>this.view;
   }
@@ -1251,7 +1124,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the {@link mxStylesheet} that defines the style.
    */
-  // getStylesheet(): mxStylesheet;
   getStylesheet(): mxStylesheet | null {
     return this.stylesheet;
   }
@@ -1259,7 +1131,6 @@ class mxGraph extends mxEventSource {
   /**
    * Sets the {@link mxStylesheet} that defines the style.
    */
-  // setStylesheet(stylesheet: mxStylesheet): void;
   setStylesheet(stylesheet: mxStylesheet | null): void {
     this.stylesheet = stylesheet;
   }
@@ -1267,7 +1138,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the {@link mxGraphSelectionModel} that contains the selection.
    */
-  // getSelectionModel(): mxGraphSelectionModel;
   getSelectionModel(): mxGraphSelectionModel {
     return <mxGraphSelectionModel>this.selectionModel;
   }
@@ -1275,7 +1145,6 @@ class mxGraph extends mxEventSource {
   /**
    * Sets the {@link mxSelectionModel} that contains the selection.
    */
-  // setSelectionModel(selectionModel: mxGraphSelectionModel): void;
   setSelectionModel(selectionModel: mxGraphSelectionModel): void {
     this.selectionModel = selectionModel;
   }
@@ -1294,9 +1163,9 @@ class mxGraph extends mxEventSource {
   getSelectionCellsForChanges(
     changes: any[],
     ignoreFn: Function | null = null
-  ): mxCell[] {
+  ): mxCellArray {
     const dict = new mxDictionary();
-    const cells: mxCell[] = [];
+    const cells: mxCellArray = new mxCellArray();
 
     const addCell = (cell: mxCell) => {
       if (!dict.get(cell) && this.getModel().contains(cell)) {
@@ -1342,7 +1211,6 @@ class mxGraph extends mxEventSource {
    *
    * @param changes Array that contains the individual changes.
    */
-  // graphModelChanged(changes: any[]): void;
   graphModelChanged(changes: any[]) {
     for (let i = 0; i < changes.length; i += 1) {
       this.processChange(changes[i]);
@@ -1356,10 +1224,9 @@ class mxGraph extends mxEventSource {
   /**
    * Removes selection cells that are not in the model from the selection.
    */
-  // updateSelection(): void;
   updateSelection(): void {
     const cells = this.getSelectionCells();
-    const removed = [];
+    const removed = new mxCellArray();
 
     for (let i = 0; i < cells.length; i += 1) {
       if (!this.getModel().contains(cells[i]) || !cells[i].isVisible()) {
@@ -1480,8 +1347,7 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} that was removed from the model.
    */
-  // removeStateForCell(cell: mxCell): void;
-  removeStateForCell(cell: mxCell) {
+  removeStateForCell(cell: mxCell): void {
     const childCount = cell.getChildCount();
 
     for (let i = 0; i < childCount; i += 1) {
@@ -1503,7 +1369,6 @@ class mxGraph extends mxEventSource {
    * @param cell {@link mxCell} to add the overlay for.
    * @param overlay {@link mxCellOverlay} to be added for the cell.
    */
-  // addCellOverlay(cell: mxCell, overlay: mxCellOverlay): mxCellOverlay;
   addCellOverlay(cell: mxCell, overlay: mxCellOverlay): mxCellOverlay {
     if (cell.overlays == null) {
       cell.overlays = [];
@@ -1528,8 +1393,7 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} whose overlays should be returned.
    */
-  // getCellOverlays(cell: mxCell): mxCellOverlay[];
-  getCellOverlays(cell: mxCell) {
+  getCellOverlays(cell: mxCell): mxCellOverlay[] | null {
     return cell.overlays;
   }
 
@@ -1586,8 +1450,7 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} whose overlays should be removed
    */
-  // removeCellOverlays(cell: mxCell): mxCellOverlay[];
-  removeCellOverlays(cell: mxCell): any[] {
+  removeCellOverlays(cell: mxCell): mxCellOverlay[] {
     const { overlays } = cell;
 
     if (overlays != null) {
@@ -1625,7 +1488,6 @@ class mxGraph extends mxEventSource {
    * @param cell Optional {@link mxCell} that represents the root of the subtree to
    * remove the overlays from. Default is the root in the model.
    */
-  // clearCellOverlays(cell: mxCell): void;
   clearCellOverlays(cell: mxCell = <mxCell>this.getModel().getRoot()): void {
     this.removeCellOverlays(<mxCell>cell);
 
@@ -1657,13 +1519,12 @@ class mxGraph extends mxEventSource {
    * @param isSelect Optional boolean indicating if a click on the overlay
    * should select the corresponding cell. Default is `false`.
    */
-  // setCellWarning(cell: mxCell, warning: string, img?: mxImage, isSelect?: boolean): mxCellOverlay;
   setCellWarning(
     cell: mxCell,
     warning: string | null = null,
     img: mxImage | null = null,
     isSelect: boolean = false
-  ) {
+  ): mxCellOverlay | null {
     if (warning != null && warning.length > 0) {
       img = img != null ? img : this.warningImage;
 
@@ -1744,7 +1605,6 @@ class mxGraph extends mxEventSource {
    * @param cell {@link mxCell} for which the initial editing value should be returned.
    * @param evt Optional mouse event that triggered the editor.
    */
-  // getEditingValue(cell: mxCell, evt: MouseEvent): string;
   getEditingValue(
     cell: mxCell,
     evt: mxEventObject | mxMouseEvent
@@ -1758,7 +1618,6 @@ class mxGraph extends mxEventSource {
    * @param cancel Boolean that specifies if the current editing value
    * should be stored.
    */
-  // stopEditing(cancel: boolean): void;
   stopEditing(cancel: boolean = false): void {
     (<mxCellEditor>this.cellEditor).stopEditing(cancel);
     this.fireEvent(
@@ -1831,7 +1690,6 @@ class mxGraph extends mxEventSource {
    * @param value New label to be assigned.
    * @param autoSize Boolean that specifies if {@link cellSizeUpdated} should be called.
    */
-  // cellLabelChanged(cell: mxCell, value: any, autoSize?: boolean): void;
   cellLabelChanged(cell: mxCell, value: any, autoSize: boolean = false): void {
     this.batchUpdate(() => {
       this.getModel().setValue(cell, value);
@@ -1850,7 +1708,6 @@ class mxGraph extends mxEventSource {
    *
    * @param evt Mouseevent that represents the keystroke.
    */
-  // escape(evt?: MouseEvent): void;
   escape(evt: mxMouseEvent): void {
     this.fireEvent(new mxEventObject(mxEvent.ESCAPE, 'event', evt));
   }
@@ -1881,7 +1738,6 @@ class mxGraph extends mxEventSource {
    *
    * @param me {@link mxMouseEvent} that represents the single click.
    */
-  // click(me: mxMouseEvent): void;
   click(me: mxMouseEvent): boolean {
     const evt = me.getEvent();
     let cell = me.getCell();
@@ -1912,7 +1768,7 @@ class mxGraph extends mxEventSource {
                 !active ||
                 selected ||
                 (state.cell !== cell &&
-                  this.getModel().isAncestor(state.cell, cell))
+                  state.cell.isAncestor(cell))
               );
             }
           );
@@ -2097,11 +1953,10 @@ class mxGraph extends mxEventSource {
    * Scrolls the graph to the given point, extending the graph container if
    * specified.
    */
-  // scrollPointToVisible(x: number, y: number, extend?: boolean, border?: number): void;
   scrollPointToVisible(
     x: number,
     y: number,
-    extend: boolean,
+    extend: boolean = false,
     border: number = 20
   ): void {
     if (
@@ -2185,7 +2040,6 @@ class mxGraph extends mxEventSource {
   /**
    * Creates and returns an {@link mxPanningManager}.
    */
-  // createPanningManager(): mxPanningManager;
   createPanningManager(): mxPanningManager {
     return new mxPanningManager(this);
   }
@@ -2195,7 +2049,6 @@ class mxGraph extends mxEventSource {
    * container. The left, top, right and bottom borders are stored in the x, y,
    * width and height of the returned {@link mxRectangle}, respectively.
    */
-  // getBorderSizes(): mxRectangle;
   getBorderSizes(): mxRectangle {
     const css = <CSSStyleDeclaration>mxUtils.getCurrentStyle(this.container);
 
@@ -2222,7 +2075,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the preferred size of the background page if {@link preferPageSize} is true.
    */
-  // getPreferredPageSize(bounds: mxRectangle, width: number, height: number): mxRectangle;
   getPreferredPageSize(
     bounds: mxRectangle,
     width: number,
@@ -2406,7 +2258,6 @@ class mxGraph extends mxEventSource {
    * a {@link size} event after updating the clipping region of the SVG element in
    * SVG-bases browsers.
    */
-  // sizeDidChange(): void;
   sizeDidChange(): void {
     const bounds = this.getGraphBounds();
 
@@ -2470,7 +2321,6 @@ class mxGraph extends mxEventSource {
   /**
    * Resizes the container for the given graph width and height.
    */
-  // doResizeContainer(width: number, height: number): void;
   doResizeContainer(width: number, height: number): void {
     if (this.maximumContainerSize != null) {
       width = Math.min(this.maximumContainerSize.width, width);
@@ -2488,8 +2338,7 @@ class mxGraph extends mxEventSource {
    * @param width Specifies the width of the container in pixels.
    * @param height Specifies the height of the container in pixels.
    */
-  // updatePageBreaks(visible: boolean, width: number, height: number): void;
-  updatePageBreaks(visible: boolean, width: number, height: number) {
+  updatePageBreaks(visible: boolean, width: number, height: number): void {
     const { scale } = this.view;
     const tr = this.getView().translate;
     const fmt = this.pageFormat;
@@ -2601,8 +2450,7 @@ class mxGraph extends mxEventSource {
    * @param cell {@link mxCell} whose style should be returned as an array.
    * @param ignoreState Optional boolean that specifies if the cell state should be ignored.
    */
-  // getCurrentCellStyle(cell: mxCell, ignoreState?: boolean): StyleMap;
-  getCurrentCellStyle(cell: mxCell, ignoreState: boolean = false): any {
+  getCurrentCellStyle(cell: mxCell, ignoreState: boolean = false): StyleMap {
     const state = ignoreState ? null : this.getView().getState(cell);
     return state != null ? state.style : this.getCellStyle(cell);
   }
@@ -2617,10 +2465,9 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} whose style should be returned as an array.
    */
-  // getCellStyle(cell: mxCell): StyleMap;
-  getCellStyle(cell: mxCell): any {
+  getCellStyle(cell: mxCell): StyleMap {
     const stylename = cell.getStyle();
-    let style = null;
+    let style;
     const stylesheet = <mxStylesheet>this.stylesheet;
 
     // Gets the default style for the cell
@@ -2639,7 +2486,7 @@ class mxGraph extends mxEventSource {
 
     // Returns a non-null value if no style can be found
     if (style == null) {
-      style = {};
+      style = new StyleMap();
     }
     return style;
   }
@@ -2649,8 +2496,7 @@ class mxGraph extends mxEventSource {
    * turns short data URIs as defined in mxImageBundle to data URIs as
    * defined in RFC 2397 of the IETF.
    */
-  // postProcessCellStyle(style: StyleMap): StyleMap;
-  postProcessCellStyle(style: any): any {
+  postProcessCellStyle(style: StyleMap): StyleMap {
     if (style != null) {
       const key = style.image;
       let image = this.getImageFromBundles(key);
@@ -2695,8 +2541,7 @@ class mxGraph extends mxEventSource {
    * @param cells Optional array of {@link mxCell} to set the style for. Default is the
    * selection cells.
    */
-  // setCellStyle(style: string, cells?: mxCell[]): void;
-  setCellStyle(style: any, cells: mxCell[] | null = this.getSelectionCells()) {
+  setCellStyle(style: any, cells: mxCellArray | null = this.getSelectionCells()) {
     if (cells != null) {
       this.getModel().beginUpdate();
       try {
@@ -2722,13 +2567,12 @@ class mxGraph extends mxEventSource {
    * @param cell Optional {@link mxCell} whose style should be modified. Default is
    * the selection cell.
    */
-  // toggleCellStyle(key: string, defaultValue?: boolean, cell?: mxCell): any;
   toggleCellStyle(
     key: string,
     defaultValue: boolean = false,
-    cell: mxCell | null = this.getSelectionCell()
+    cell: mxCell = this.getSelectionCell()
   ) {
-    return this.toggleCellStyles(key, defaultValue, [cell]);
+    return this.toggleCellStyles(key, defaultValue, new mxCellArray(cell));
   }
 
   /**
@@ -2745,11 +2589,10 @@ class mxGraph extends mxEventSource {
    * @param cells Optional array of {@link mxCell} whose styles should be modified.
    * Default is the selection cells.
    */
-  // toggleCellStyles(key: string, defaultValue?: boolean, cells?: mxCell[]): any;
   toggleCellStyles(
     key: string,
     defaultValue: boolean = false,
-    cells: (mxCell | null)[] = this.getSelectionCells()
+    cells: mxCellArray = this.getSelectionCells()
   ) {
     let value = null;
 
@@ -2773,12 +2616,11 @@ class mxGraph extends mxEventSource {
    * @param cells Optional array of {@link mxCell} to change the style for. Default is
    * the selection cells.
    */
-  // setCellStyles(key: string, value: any, cells?: mxCell[]): void;
   setCellStyles(
     key: string,
     value: string | number | null = null,
-    cells: (mxCell | null)[] = this.getSelectionCells()
-  ) {
+    cells: mxCellArray = this.getSelectionCells()
+  ): void {
     mxUtils.setCellStyles(this.model, cells, key, value);
   }
 
@@ -2791,11 +2633,11 @@ class mxGraph extends mxEventSource {
    * @param cells Optional array of {@link mxCell} to change the style for. Default is
    * the selection cells.
    */
-  // toggleCellStyleFlags(key: string, flag: number, cells?: mxCell[]): void;
+  // toggleCellStyleFlags(key: string, flag: number, cells?: mxCellArray): void;
   toggleCellStyleFlags(
     key: string,
     flag: number,
-    cells: mxCell[] = this.getSelectionCells()
+    cells: mxCellArray = this.getSelectionCells()
   ) {
     this.setCellStyleFlags(key, flag, null, cells);
   }
@@ -2810,16 +2652,17 @@ class mxGraph extends mxEventSource {
    * @param cells Optional array of {@link mxCell} to change the style for. Default is
    * the selection cells.
    */
-  // setCellStyleFlags(key: string, flag: number, value: boolean, cells?: mxCell[]): void;
+  // setCellStyleFlags(key: string, flag: number, value: boolean, cells?: mxCellArray): void;
   setCellStyleFlags(
     key: string,
     flag: number,
     value: boolean | null = null,
-    cells: mxCell[] = this.getSelectionCells()
+    cells: mxCellArray = this.getSelectionCells()
   ) {
     if (cells != null && cells.length > 0) {
       if (value == null) {
         const style = this.getCurrentCellStyle(cells[0]);
+        // @ts-ignore
         const current = parseInt(style[key] || 0);
         value = !((current & flag) === flag);
       }
@@ -2840,8 +2683,8 @@ class mxGraph extends mxEventSource {
    * @param cells Array of {@link mxCell} to be aligned.
    * @param param Optional coordinate for the alignment.
    */
-  // alignCells(align: string, cells: mxCell[], param?: any): mxCell[];
-  alignCells(align: string, cells: mxCell[], param: number | null = null) {
+  // alignCells(align: string, cells: mxCellArray, param?: any): mxCellArray;
+  alignCells(align: string, cells: mxCellArray, param: number | null = null) {
     if (cells == null) {
       cells = this.getSelectionCells();
     }
@@ -3034,11 +2877,11 @@ class mxGraph extends mxEventSource {
    * @param cells Array of {@link mxCell} to move to the background. If null is
    * specified then the selection cells are used.
    */
-  // orderCells(back: boolean, cells?: mxCell[]): mxCell[];
+  // orderCells(back: boolean, cells?: mxCellArray): mxCellArray;
   orderCells(
     back: boolean = false,
-    cells: mxCell[] = this.getSelectionCells()
-  ): mxCell[] {
+    cells: mxCellArray = this.getSelectionCells()
+  ): mxCellArray {
     if (cells == null) {
       cells = mxUtils.sortCells(this.getSelectionCells(), true);
     }
@@ -3062,8 +2905,8 @@ class mxGraph extends mxEventSource {
    * @param cells Array of {@link mxCell} whose order should be changed.
    * @param back Boolean that specifies if the cells should be moved to back.
    */
-  // cellsOrdered(cells: mxCell[], back?: boolean): void;
-  cellsOrdered(cells: mxCell[], back: boolean = false) {
+  // cellsOrdered(cells: mxCellArray, back?: boolean): void;
+  cellsOrdered(cells: mxCellArray, back: boolean = false) {
     if (cells != null) {
       this.getModel().beginUpdate();
       try {
@@ -3108,11 +2951,11 @@ class mxGraph extends mxEventSource {
    * @param cells Optional array of {@link mxCell} to be grouped. If `null` is specified
    * then the selection cells are used.
    */
-  // groupCells(group: mxCell | null, border?: number, cells?: mxCell[]): mxCell;
+  // groupCells(group: mxCell | null, border?: number, cells?: mxCellArray): mxCell;
   groupCells(
     group: mxCell,
     border: number = 0,
-    cells: mxCell[] = mxUtils.sortCells(this.getSelectionCells(), true)
+    cells: mxCellArray = mxUtils.sortCells(this.getSelectionCells(), true)
   ) {
     cells = this.getCellsForGroup(cells);
 
@@ -3141,7 +2984,7 @@ class mxGraph extends mxEventSource {
         // Adds the group into the parent
         let index = parent.getChildCount();
         this.cellsAdded(
-          [group],
+          new mxCellArray(group),
           parent,
           index,
           null,
@@ -3157,7 +3000,7 @@ class mxGraph extends mxEventSource {
         this.cellsMoved(cells, -bounds.x, -bounds.y, false, false, false);
 
         // Resizes the group
-        this.cellsResized([group], [bounds], false);
+        this.cellsResized(new mxCellArray(group), [bounds], false);
 
         this.fireEvent(
           new mxEventObject(
@@ -3181,9 +3024,8 @@ class mxGraph extends mxEventSource {
    * Returns the cells with the same parent as the first cell
    * in the given array.
    */
-  // getCellsForGroup(cells: mxCell[]): mxCell[];
-  getCellsForGroup(cells: mxCell[]) {
-    const result = [];
+  getCellsForGroup(cells: mxCellArray): mxCellArray {
+    const result = new mxCellArray();
     if (cells != null && cells.length > 0) {
       const parent = cells[0].getParent();
       result.push(cells[0]);
@@ -3201,10 +3043,11 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the bounds to be used for the given group and children.
    */
-  // getBoundsForGroup(group: mxCell, children: mxCell[], border?: number): mxRectangle;
-  getBoundsForGroup(group: mxCell, children: mxCell[], border: number | null) {
-    const result = this.getBoundingBoxFromGeometry(children, true);
+  getBoundsForGroup(group: mxCell,
+                    children: mxCellArray,
+                    border: number | null): mxRectangle | null {
 
+    const result = this.getBoundingBoxFromGeometry(children, true);
     if (result != null) {
       if (this.isSwimlane(group)) {
         const size = this.getStartSize(group);
@@ -3223,7 +3066,6 @@ class mxGraph extends mxEventSource {
         result.height += 2 * border;
       }
     }
-
     return result;
   }
 
@@ -3243,8 +3085,8 @@ class mxGraph extends mxEventSource {
    *   return group;
    * };
    */
-  // createGroupCell(cells: mxCell[]): mxCell;
-  createGroupCell(cells: mxCell[]) {
+  // createGroupCell(cells: mxCellArray): mxCell;
+  createGroupCell(cells: mxCellArray) {
     const group = new mxCell('');
     group.setVertex(true);
     group.setConnectable(false);
@@ -3260,9 +3102,9 @@ class mxGraph extends mxEventSource {
    * @param cells Array of cells to be ungrouped. If null is specified then the
    * selection cells are used.
    */
-  // ungroupCells(cells: mxCell[]): mxCell[];
-  ungroupCells(cells: mxCell[]) {
-    let result: mxCell[] = [];
+  // ungroupCells(cells: mxCellArray): mxCellArray;
+  ungroupCells(cells: mxCellArray) {
+    let result: mxCellArray = new mxCellArray();
 
     if (cells == null) {
       cells = this.getCellsForUngroup();
@@ -3315,11 +3157,11 @@ class mxGraph extends mxEventSource {
    *
    * Returns the selection cells that can be ungrouped.
    */
-  getCellsForUngroup() {
+  getCellsForUngroup(): mxCellArray {
     const cells = this.getSelectionCells();
 
     // Finds the cells with children
-    const tmp = [];
+    const tmp = new mxCellArray();
 
     for (let i = 0; i < cells.length; i += 1) {
       if (cells[i].isVertex() && cells[i].getChildCount() > 0) {
@@ -3334,8 +3176,7 @@ class mxGraph extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} that were ungrouped.
    */
-  // removeCellsAfterUngroup(cells: mxCell[]): void;
-  removeCellsAfterUngroup(cells: mxCell[]) {
+  removeCellsAfterUngroup(cells: mxCellArray): void {
     this.cellsRemoved(this.addAllEdges(cells));
   }
 
@@ -3345,8 +3186,7 @@ class mxGraph extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} to be removed from their parents.
    */
-  // removeCellsFromParent(cells: mxCell[]): mxCell[];
-  removeCellsFromParent(cells: mxCell[]) {
+  removeCellsFromParent(cells: mxCellArray): mxCellArray {
     if (cells == null) {
       cells = this.getSelectionCells();
     }
@@ -3386,14 +3226,14 @@ class mxGraph extends mxEventSource {
    * leftBorder - Optional top border to be added in the group. Default is 0.
    */
   updateGroupBounds(
-    cells: mxCell[],
+    cells: mxCellArray,
     border: number = 0,
     moveGroup: boolean = false,
     topBorder: number = 0,
     rightBorder: number = 0,
     bottomBorder: number = 0,
     leftBorder: number = 0
-  ): mxCell[] {
+  ): mxCellArray {
     if (cells == null) {
       cells = this.getSelectionCells();
     }
@@ -3411,7 +3251,7 @@ class mxGraph extends mxEventSource {
         let geo = cells[i].getGeometry();
 
         if (geo != null) {
-          const children = <mxCell[]>this.getChildCells(cells[i]);
+          const children = <mxCellArray>this.getChildCells(cells[i]);
 
           if (children != null && children.length > 0) {
             const bounds = this.getBoundingBoxFromGeometry(children, true);
@@ -3474,8 +3314,8 @@ class mxGraph extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} whose bounding box should be returned.
    */
-  // getBoundingBox(cells: mxCell[]): mxRectangle;
-  getBoundingBox(cells: mxCell[]) {
+  // getBoundingBox(cells: mxCellArray): mxRectangle;
+  getBoundingBox(cells: mxCellArray) {
     let result = null;
 
     if (cells != null && cells.length > 0) {
@@ -3513,15 +3353,15 @@ class mxGraph extends mxEventSource {
    * @param keepPosition Optional boolean indicating if the position of the cells should
    * be updated to reflect the lost parent cell. Default is `false`.
    */
-  // cloneCell(cell: mxCell, allowInvalidEdges?: boolean, mapping?: any, keepPosition?: boolean): mxCell[];
+  // cloneCell(cell: mxCell, allowInvalidEdges?: boolean, mapping?: any, keepPosition?: boolean): mxCellArray;
   cloneCell(
     cell: mxCell,
     allowInvalidEdges: boolean = false,
     mapping: any = null,
     keepPosition: boolean = false
   ): mxCell {
-    return (<mxCell[]>(
-      this.cloneCells([cell], allowInvalidEdges, mapping, keepPosition)
+    return (<mxCellArray>(
+      this.cloneCells(new mxCellArray(cell), allowInvalidEdges, mapping, keepPosition)
     ))[0];
   }
 
@@ -3538,13 +3378,13 @@ class mxGraph extends mxEventSource {
    * @param keepPosition Optional boolean indicating if the position of the cells should
    * be updated to reflect the lost parent cell. Default is `false`.
    */
-  // cloneCells(cells: mxCell[], allowInvalidEdges?: boolean, mapping?: any, keepPosition?: boolean): mxCell[];
+  // cloneCells(cells: mxCellArray, allowInvalidEdges?: boolean, mapping?: any, keepPosition?: boolean): mxCellArray;
   cloneCells(
-    cells: mxCell[],
+    cells: mxCellArray,
     allowInvalidEdges: boolean = true,
     mapping: any = {},
     keepPosition: boolean = false
-  ): mxCell[] | null {
+  ): mxCellArray | null {
     allowInvalidEdges = allowInvalidEdges != null ? allowInvalidEdges : true;
     let clones = null;
 
@@ -3561,8 +3401,8 @@ class mxGraph extends mxEventSource {
       if (tmp.length > 0) {
         const { scale } = this.view;
         const trans = this.getView().translate;
-        const out: mxCell[] = [];
-        clones = this.getModel().cloneCells(cells, true, mapping);
+        const out: mxCellArray = new mxCellArray();
+        clones = cells.cloneCells(true, mapping);
 
         for (let i = 0; i < cells.length; i += 1) {
           if (
@@ -3646,7 +3486,7 @@ class mxGraph extends mxEventSource {
         }
         clones = out;
       } else {
-        clones = [];
+        clones = new mxCellArray();
       }
     }
     return clones;
@@ -3860,14 +3700,13 @@ class mxGraph extends mxEventSource {
    * @param target Optional {@link mxCell} that represents the target terminal.
    * @param index Optional index to insert the cells at. Default is 'to append'.
    */
-  // addEdge(edge: mxCell, parent?: mxCell, source?: mxCell, target?: mxCell, index?: number): mxCell;
   addEdge(
     edge: mxCell,
     parent: mxCell | null = null,
     source: mxCell | null = null,
     target: mxCell | null = null,
     index: number | null = null
-  ) {
+  ): mxCell {
     return this.addCell(edge, parent, index, source, target);
   }
 
@@ -3891,7 +3730,7 @@ class mxGraph extends mxEventSource {
     source: mxCell | null = null,
     target: mxCell | null = null
   ): mxCell {
-    return this.addCells([cell], parent, index, source, target)[0];
+    return this.addCells(new mxCellArray(cell), parent, index, source, target)[0];
   }
 
   /**
@@ -3914,7 +3753,7 @@ class mxGraph extends mxEventSource {
    * their absolute position. Default is false.
    */
   addCells(
-    cells: mxCell[],
+    cells: mxCellArray,
     parent: mxCell | null = null,
     index: number | null = null,
     source: mxCell | null = null,
@@ -3969,7 +3808,7 @@ class mxGraph extends mxEventSource {
    * <mxEvent.CELLS_ADDED> while the transaction is in progress.
    */
   cellsAdded(
-    cells: mxCell[] | null = null,
+    cells: mxCellArray | null = null,
     parent: mxCell | null = null,
     index: number | null = null,
     source: mxCell | null = null,
@@ -4113,12 +3952,12 @@ class mxGraph extends mxEventSource {
    * @param includeEdges Optional boolean which specifies if all connected edges
    * should be removed as well. Default is `true`.
    */
-  // removeCells(cells: mxCell[], includeEdges?: boolean): mxCell[];
-  removeCells(cells: mxCell[] | null = null, includeEdges: boolean = true) {
+  // removeCells(cells: mxCellArray, includeEdges?: boolean): mxCellArray;
+  removeCells(cells: mxCellArray | null = null, includeEdges: boolean = true) {
     includeEdges = includeEdges != null ? includeEdges : true;
 
     if (cells == null) {
-      cells = <mxCell[]>this.getDeletableCells(this.getSelectionCells());
+      cells = <mxCellArray>this.getDeletableCells(this.getSelectionCells());
     }
 
     // Adds all edges to the cells
@@ -4131,7 +3970,7 @@ class mxGraph extends mxEventSource {
 
       // Removes edges that are currently not
       // visible as those cannot be updated
-      const edges = <mxCell[]>this.getDeletableCells(this.getAllEdges(cells));
+      const edges = <mxCellArray>this.getDeletableCells(this.getAllEdges(cells));
       const dict = new mxDictionary();
 
       for (let i = 0; i < cells.length; i += 1) {
@@ -4148,7 +3987,7 @@ class mxGraph extends mxEventSource {
 
     this.getModel().beginUpdate();
     try {
-      this.cellsRemoved(<mxCell[]>cells);
+      this.cellsRemoved(<mxCellArray>cells);
       this.fireEvent(
         new mxEventObject(
           mxEvent.REMOVE_CELLS,
@@ -4171,8 +4010,8 @@ class mxGraph extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} to remove.
    */
-  // cellsRemoved(cells: mxCell[]): void;
-  cellsRemoved(cells: mxCell[]) {
+  // cellsRemoved(cells: mxCellArray): void;
+  cellsRemoved(cells: mxCellArray) {
     if (cells != null && cells.length > 0) {
       const { scale } = this.view;
       const tr = this.getView().translate;
@@ -4188,7 +4027,7 @@ class mxGraph extends mxEventSource {
 
         for (let i = 0; i < cells.length; i += 1) {
           // Disconnects edges which are not being removed
-          const edges = this.getAllEdges([cells[i]]);
+          const edges = this.getAllEdges(new mxCellArray(cells[i]));
 
           const disconnectTerminal = (edge: mxCell, source: boolean) => {
             let geo = edge.getGeometry();
@@ -4289,7 +4128,7 @@ class mxGraph extends mxEventSource {
    */
   splitEdge(
     edge: mxCell,
-    cells: mxCell[],
+    cells: mxCellArray,
     newEdge: mxCell,
     dx: number = 0,
     dy: number = 0,
@@ -4339,7 +4178,7 @@ class mxGraph extends mxEventSource {
         true
       );
       this.cellsAdded(
-        [newEdge],
+        new mxCellArray(newEdge),
         parent,
         parent ? parent.getChildCount() : 0,
         source,
@@ -4385,12 +4224,12 @@ class mxGraph extends mxEventSource {
    * @param includeEdges Optional boolean indicating if the visible state of all
    * connected edges should be changed as well. Default is `true`.
    */
-  // toggleCells(show: boolean, cells: mxCell[], includeEdges: boolean): mxCell[];
+  // toggleCells(show: boolean, cells: mxCellArray, includeEdges: boolean): mxCellArray;
   toggleCells(
     show: boolean = false,
-    cells: mxCell[] = this.getSelectionCells(),
+    cells: mxCellArray = this.getSelectionCells(),
     includeEdges: boolean = true
-  ): mxCell[] | null {
+  ): mxCellArray | null {
     // Adds all connected edges recursively
     if (includeEdges) {
       cells = this.addAllEdges(cells);
@@ -4422,8 +4261,8 @@ class mxGraph extends mxEventSource {
    * @param cells Array of {@link mxCell} whose visible state should be changed.
    * @param show Boolean that specifies the visible state to be assigned.
    */
-  // cellsToggled(cells: mxCell[], show: boolean): void;
-  cellsToggled(cells: mxCell[] | null = null, show: boolean = false): void {
+  // cellsToggled(cells: mxCellArray, show: boolean): void;
+  cellsToggled(cells: mxCellArray | null = null, show: boolean = false): void {
     if (cells != null && cells.length > 0) {
       this.getModel().beginUpdate();
       try {
@@ -4455,14 +4294,14 @@ class mxGraph extends mxEventSource {
    * checked. Default is `false`.
    * @param evt Optional native event that triggered the invocation.
    */
-  // foldCells(collapse: boolean, recurse: boolean, cells: mxCell[], checkFoldable?: boolean, evt?: Event): mxCell[];
+  // foldCells(collapse: boolean, recurse: boolean, cells: mxCellArray, checkFoldable?: boolean, evt?: Event): mxCellArray;
   foldCells(
     collapse: boolean = false,
     recurse: boolean = false,
-    cells: mxCell[] | null = null,
+    cells: mxCellArray | null = null,
     checkFoldable: boolean = false,
     evt: mxEventObject | null = null
-  ): mxCell[] | null {
+  ): mxCellArray | null {
     if (cells == null) {
       cells = this.getFoldableCells(this.getSelectionCells(), collapse);
     }
@@ -4501,9 +4340,9 @@ class mxGraph extends mxEventSource {
    * @param checkFoldable Optional boolean indicating of isCellFoldable should be
    * checked. Default is `false`.
    */
-  // cellsFolded(cells: mxCell[], collapse: boolean, recurse: boolean, checkFoldable?: boolean): void;
+  // cellsFolded(cells: mxCellArray, collapse: boolean, recurse: boolean, checkFoldable?: boolean): void;
   cellsFolded(
-    cells: mxCell[] | null = null,
+    cells: mxCellArray | null = null,
     collapse: boolean = false,
     recurse: boolean = false,
     checkFoldable: boolean = false
@@ -4642,18 +4481,16 @@ class mxGraph extends mxEventSource {
    * Returns an array with the given cells and all edges that are connected
    * to a cell or one of its descendants.
    */
-  // addAllEdges(cells: mxCell[]): mxCell[];
-  addAllEdges(cells: mxCell[]): mxCell[] {
+  addAllEdges(cells: mxCellArray): mxCellArray {
     const allCells = cells.slice();
-    return mxUtils.removeDuplicates(allCells.concat(this.getAllEdges(cells)));
+    return new mxCellArray(...mxUtils.removeDuplicates(allCells.concat(this.getAllEdges(cells))));
   }
 
   /**
    * Returns all edges connected to the given cells or its descendants.
    */
-  // getAllEdges(cells: mxCell[]): mxCell[];
-  getAllEdges(cells: mxCell[] | null): mxCell[] {
-    let edges: mxCell[] = [];
+  getAllEdges(cells: mxCellArray | null): mxCellArray {
+    let edges: mxCellArray = new mxCellArray();
     if (cells != null) {
       for (let i = 0; i < cells.length; i += 1) {
         const edgeCount = cells[i].getEdgeCount();
@@ -4664,7 +4501,7 @@ class mxGraph extends mxEventSource {
 
         // Recurses
         const children = cells[i].getChildren();
-        edges = edges.concat(this.getAllEdges(<mxCell[]>children));
+        edges = edges.concat(this.getAllEdges(<mxCellArray>children));
       }
     }
     return edges;
@@ -4794,7 +4631,7 @@ class mxGraph extends mxEventSource {
             }
           }
 
-          this.cellsResized([cell], [geo], false);
+          this.cellsResized(new mxCellArray(cell), [geo], false);
         }
       } finally {
         this.getModel().endUpdate();
@@ -4925,13 +4762,12 @@ class mxGraph extends mxEventSource {
    * @param cell {@link mxCell} whose bounds should be changed.
    * @param bounds {@link mxRectangle} that represents the new bounds.
    */
-  // resizeCell(cell: mxCell, bounds: mxRectangle, recurse?: boolean): mxCell[];
   resizeCell(
     cell: mxCell,
     bounds: mxRectangle,
     recurse: boolean = false
   ): mxCell {
-    return this.resizeCells([cell], [bounds], recurse)[0];
+    return this.resizeCells(new mxCellArray(cell), [bounds], recurse)[0];
   }
 
   /**
@@ -4942,12 +4778,11 @@ class mxGraph extends mxEventSource {
    * @param cells Array of {@link mxCell} whose bounds should be changed.
    * @param bounds Array of {@link mxRectangles} that represent the new bounds.
    */
-  // resizeCells(cells: mxCell[], bounds: mxRectangle[], recurse: boolean): mxCell[];
   resizeCells(
-    cells: mxCell[],
+    cells: mxCellArray,
     bounds: mxRectangle[],
     recurse: boolean = this.isRecursiveResize()
-  ): mxCell[] {
+  ): mxCellArray {
     this.getModel().beginUpdate();
     try {
       const prev = this.cellsResized(cells, bounds, recurse);
@@ -5010,13 +4845,11 @@ class mxGraph extends mxEventSource {
    * @param bounds Array of {@link mxRectangles} that represent the new bounds.
    * @param recurse Optional boolean that specifies if the children should be resized.
    */
-  // cellsResized(cells: mxCell[], bounds: mxRectangle[], recurse?: boolean): mxGeometry[];
   cellsResized(
-    cells: mxCell[] | null = null,
+    cells: mxCellArray | null = null,
     bounds: mxRectangle[] | null = null,
     recurse: boolean = false
-  ): any[] {
-    recurse = recurse != null ? recurse : false;
+  ): (mxGeometry | null)[] {
     const prev = [];
 
     if (cells != null && bounds != null && cells.length === bounds.length) {
@@ -5063,7 +4896,6 @@ class mxGraph extends mxEventSource {
    * @param ignoreRelative Boolean that indicates if relative cells should be ignored.
    * @param recurse Optional boolean that specifies if the children should be resized.
    */
-  // cellResized(cell: mxCell, bounds: mxRectangle, ignoreRelative?: boolean, recurse?: boolean): mxGeometry;
   cellResized(
     cell: mxCell,
     bounds: mxRectangle,
@@ -5127,7 +4959,6 @@ class mxGraph extends mxEventSource {
    * @param cell {@link mxCell} that has been resized.
    * @param newGeo {@link mxGeometry} that represents the new bounds.
    */
-  // resizeChildCells(cell: mxCell, newGeo: mxGeometry): void;
   resizeChildCells(cell: mxCell, newGeo: mxGeometry): void {
     const geo = <mxGeometry>cell.getGeometry();
     const dx = geo.width !== 0 ? newGeo.width / geo.width : 1;
@@ -5144,8 +4975,7 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} that has been resized.
    */
-  // constrainChildCells(cell: mxCell): void;
-  constrainChildCells(cell: mxCell) {
+  constrainChildCells(cell: mxCell): void {
     const childCount = cell.getChildCount();
 
     for (let i = 0; i < childCount; i += 1) {
@@ -5162,7 +4992,6 @@ class mxGraph extends mxEventSource {
    * @param dy Vertical scaling factor.
    * @param recurse Boolean indicating if the child cells should be scaled.
    */
-  // scaleCell(cell: mxCell, dx: number, dy: number, recurse?: boolean): void;
   scaleCell(
     cell: mxCell,
     dx: number,
@@ -5219,7 +5048,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} that has been resized.
    */
-  // extendParent(cell: mxCell): void;
   extendParent(cell: mxCell | null = null): void {
     if (cell != null) {
       const parent = <mxCell>cell.getParent();
@@ -5238,7 +5066,7 @@ class mxGraph extends mxEventSource {
           p.width = Math.max(p.width, geo.x + geo.width);
           p.height = Math.max(p.height, geo.y + geo.height);
 
-          this.cellsResized([parent], [p], false);
+          this.cellsResized(new mxCellArray(parent), [p], false);
         }
       }
     }
@@ -5260,15 +5088,14 @@ class mxGraph extends mxEventSource {
    * @param evt Mouseevent that triggered the invocation.
    * @param mapping Optional mapping for existing clones.
    */
-  // importCells(cells: mxCell[], dx: number, dy: number, target: mxCell, evt?: Event, mapping?: any): mxCell[];
   importCells(
-    cells: mxCell[] | null = null,
+    cells: mxCellArray | null = null,
     dx: number,
     dy: number,
     target: mxCell | null = null,
     evt: mxMouseEvent | null = null,
     mapping: any = {}
-  ): mxCell[] | null {
+  ): mxCellArray | null {
     return this.moveCells(cells, dx, dy, true, target, evt, mapping);
   }
 
@@ -5298,14 +5125,14 @@ class mxGraph extends mxEventSource {
    * mapping - Optional mapping for existing clones.
    */
   moveCells(
-    cells: mxCell[] | null = null,
+    cells: mxCellArray | null = null,
     dx: number,
     dy: number,
     clone: boolean = false,
     target: mxCell | null = null,
     evt: mxMouseEvent | null = null,
     mapping: any = null
-  ): mxCell[] | null {
+  ): mxCellArray | null {
     dx = dx != null ? dx : 0;
     dy = dy != null ? dy : 0;
     clone = clone != null ? clone : false;
@@ -5314,7 +5141,7 @@ class mxGraph extends mxEventSource {
 
     if (cells != null && (dx !== 0 || dy !== 0 || clone || target != null)) {
       // Removes descendants with ancestors in cells to avoid multiple moving
-      cells = this.getModel().getTopmostCells(cells);
+      cells = cells.getTopmostCells();
       const origCells = cells;
 
       this.getModel().beginUpdate();
@@ -5338,7 +5165,7 @@ class mxGraph extends mxEventSource {
         };
 
         // Removes relative edge labels with selected terminals
-        const checked = [];
+        const checked = new mxCellArray();
 
         for (let i = 0; i < cells.length; i += 1) {
           const geo = cells[i].getGeometry();
@@ -5359,7 +5186,7 @@ class mxGraph extends mxEventSource {
         cells = checked;
 
         if (clone) {
-          cells = <mxCell[]>(
+          cells = <mxCellArray>(
             this.cloneCells(cells, this.isCloneInvalidEdges(), mapping)
           );
 
@@ -5444,7 +5271,7 @@ class mxGraph extends mxEventSource {
    * <mxEvent.CELLS_MOVED> while the transaction is in progress.
    */
   cellsMoved(
-    cells: mxCell[] | null,
+    cells: mxCellArray | null,
     dx: number,
     dy: number,
     disconnect: boolean = false,
@@ -5495,7 +5322,6 @@ class mxGraph extends mxEventSource {
    * Translates the geometry of the given cell and stores the new,
    * translated geometry in the model as an atomic change.
    */
-  // translateCell(cell: mxCell, dx: number, dy: number): void;
   translateCell(cell: mxCell, dx: number, dy: number): void {
     let geometry = cell.getGeometry();
 
@@ -5553,7 +5379,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} for which the area should be returned.
    */
-  // getCellContainmentArea(cell: mxCell): mxRectangle;
   getCellContainmentArea(cell: mxCell): mxRectangle | null {
     if (cell != null && !cell.isEdge()) {
       const parent = cell.getParent();
@@ -5609,7 +5434,6 @@ class mxGraph extends mxEventSource {
    * Returns the bounds inside which the diagram should be kept as an
    * {@link mxRectangle}.
    */
-  // getMaximumGraphBounds(): mxRectangle;
   getMaximumGraphBounds(): mxRectangle | null {
     return this.maximumGraphBounds;
   }
@@ -5623,7 +5447,6 @@ class mxGraph extends mxEventSource {
    * @param cell {@link mxCell} which should be constrained.
    * @param sizeFirst Specifies if the size should be changed first. Default is `true`.
    */
-  // constrainChild(cell: mxCell, sizeFirst?: boolean): void;
   constrainChild(cell: mxCell, sizeFirst: boolean = true): void {
     if (cell != null) {
       let geo = cell.getGeometry();
@@ -5638,7 +5461,7 @@ class mxGraph extends mxEventSource {
 
         // Finds parent offset
         if (max != null) {
-          const off = this.getBoundingBoxFromGeometry([<mxCell>parent], false);
+          const off = this.getBoundingBoxFromGeometry(new mxCellArray(<mxCell>parent), false);
 
           if (off != null) {
             max = mxRectangle.fromRectangle(max);
@@ -5674,10 +5497,10 @@ class mxGraph extends mxEventSource {
         }
 
         if (max != null) {
-          const cells = [cell];
+          const cells = new mxCellArray(cell);
 
           if (!cell.isCollapsed()) {
-            const desc = this.getModel().getDescendants(cell);
+            const desc = cell.getDescendants();
 
             for (let i = 0; i < desc.length; i += 1) {
               if (desc[i].isVisible()) {
@@ -5752,8 +5575,7 @@ class mxGraph extends mxEventSource {
    * @param cells Array of {@link mxCell} for which the connected edges should be
    * reset.
    */
-  // resetEdges(cells: mxCell[]): void;
-  resetEdges(cells: mxCell[]): void {
+  resetEdges(cells: mxCellArray): void {
     if (cells != null) {
       // Prepares faster cells lookup
       const dict = new mxDictionary();
@@ -5765,7 +5587,7 @@ class mxGraph extends mxEventSource {
       this.getModel().beginUpdate();
       try {
         for (let i = 0; i < cells.length; i += 1) {
-          const edges = this.getModel().getEdges(cells[i]);
+          const edges = cells[i].getEdges();
 
           if (edges != null) {
             for (let j = 0; j < edges.length; j++) {
@@ -5800,7 +5622,6 @@ class mxGraph extends mxEventSource {
    *
    * @param edge {@link mxCell} whose points should be reset.
    */
-  // resetEdge(edge: mxCell): mxCell;
   resetEdge(edge: mxCell): mxCell | null {
     let geo = edge.getGeometry();
 
@@ -5820,7 +5641,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the constraint used to connect to the outline of the given state.
    */
-  // getOutlineConstraint(point: mxPoint, terminalState: mxCellState, me: mxMouseEvent): mxConnectionConstraint;
   getOutlineConstraint(
     point: mxPoint,
     terminalState: mxCellState,
@@ -5917,7 +5737,6 @@ class mxGraph extends mxEventSource {
    * @param terminal {@link mxCellState} that represents the terminal.
    * @param source Boolean that specifies if the terminal is the source or target.
    */
-  // getAllConnectionConstraints(terminal: mxCellState, source?: boolean): mxConnectionConstraint[];
   getAllConnectionConstraints(
     terminal: mxCellState,
     source: boolean
@@ -5940,7 +5759,6 @@ class mxGraph extends mxEventSource {
    * @param terminal {@link mxCellState} that represents the terminal.
    * @param source Boolean indicating if the terminal is the source or target.
    */
-  // getConnectionConstraint(edge: mxCellState, terminal: mxCellState, source?: boolean): mxConnectionConstraint;
   getConnectionConstraint(
     edge: mxCellState,
     terminal: mxCellState | null = null,
@@ -5998,55 +5816,46 @@ class mxGraph extends mxEventSource {
    * @param constraint Optional {@link mxConnectionConstraint} to be used for this
    * connection.
    */
-  // setConnectionConstraint(edge: mxCell, terminal: mxCell, source: boolean, constraint?: mxConnectionConstraint): void;
   setConnectionConstraint(
     edge: mxCell,
     terminal: mxCell,
     source: boolean = false,
     constraint: mxConnectionConstraint | null = null
-  ) {
+  ): void {
     if (constraint != null) {
       this.getModel().beginUpdate();
 
       try {
         if (constraint == null || constraint.point == null) {
-          this.setCellStyles(source ? 'exitX' : 'entryX', null, [
-            edge,
-          ]);
-          this.setCellStyles(source ? 'exitY' : 'entryY', null, [
-            edge,
-          ]);
-          this.setCellStyles(source ? 'exitDx' : 'entryDx', null, [
-            edge,
-          ]);
-          this.setCellStyles(source ? 'exitDy' : 'entryDy', null, [
-            edge,
-          ]);
+          this.setCellStyles(source ? 'exitX' : 'entryX', null, new mxCellArray(edge));
+          this.setCellStyles(source ? 'exitY' : 'entryY', null, new mxCellArray(edge));
+          this.setCellStyles(source ? 'exitDx' : 'entryDx', null, new mxCellArray(edge));
+          this.setCellStyles(source ? 'exitDy' : 'entryDy', null, new mxCellArray(edge));
           this.setCellStyles(
             source ? 'exitPerimeter' : 'entryPerimeter',
             null,
-            [edge]
+            new mxCellArray(edge)
           );
         } else if (constraint.point != null) {
           this.setCellStyles(
             source ? 'exitX' : 'entryX',
             constraint.point.x,
-            [edge]
+            new mxCellArray(edge)
           );
           this.setCellStyles(
             source ? 'exitY' : 'entryY',
             constraint.point.y,
-            [edge]
+            new mxCellArray(edge)
           );
           this.setCellStyles(
             source ? 'exitDx' : 'entryDx',
             constraint.dx,
-            [edge]
+            new mxCellArray(edge)
           );
           this.setCellStyles(
             source ? 'exitDy' : 'entryDy',
             constraint.dy,
-            [edge]
+            new mxCellArray(edge)
           );
 
           // Only writes 0 since 1 is default
@@ -6054,13 +5863,13 @@ class mxGraph extends mxEventSource {
             this.setCellStyles(
               source ? 'exitPerimeter' : 'entryPerimeter',
               '0',
-              [edge]
+              new mxCellArray(edge)
             );
           } else {
             this.setCellStyles(
               source ? 'exitPerimeter' : 'entryPerimeter',
               null,
-              [edge]
+              new mxCellArray(edge)
             );
           }
         }
@@ -6078,7 +5887,6 @@ class mxGraph extends mxEventSource {
    * @param constraint {@link mxConnectionConstraint} that represents the connection point
    * constraint as returned by {@link getConnectionConstraint}.
    */
-  // getConnectionPoint(vertex: mxCellState, constraint: mxConnectionConstraint, round?: boolean): mxPoint;
   getConnectionPoint(
     vertex: mxCellState,
     constraint: mxConnectionConstraint,
@@ -6201,7 +6009,6 @@ class mxGraph extends mxEventSource {
    * @param constraint Optional {@link mxConnectionConstraint} to be used for this
    * connection.
    */
-  // connectCell(edge: mxCell, terminal: mxCell, source: boolean, constraint?: mxConnectionConstraint): mxCell;
   connectCell(
     edge: mxCell,
     terminal: mxCell,
@@ -6241,7 +6048,6 @@ class mxGraph extends mxEventSource {
    * @param source Boolean indicating if the new terminal is the source or target.
    * @param constraint {@link mxConnectionConstraint} to be used for this connection.
    */
-  // cellConnected(edge: mxCell, terminal: mxCell, source: boolean, constraint: mxConnectionConstraint): void;
   cellConnected(
     edge: mxCell,
     terminal: mxCell,
@@ -6268,7 +6074,7 @@ class mxGraph extends mxEventSource {
 
           // Sets or resets all previous information for connecting to a child port
           const key = source ? 'sourcePort' : 'targetPort';
-          this.setCellStyles(key, id, [edge]);
+          this.setCellStyles(key, id, new mxCellArray(edge));
         }
 
         this.getModel().setTerminal(edge, terminal, source);
@@ -6302,8 +6108,7 @@ class mxGraph extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} to be disconnected.
    */
-  // disconnectGraph(cells: mxCell[]): void;
-  disconnectGraph(cells: mxCell[] | null) {
+  disconnectGraph(cells: mxCellArray | null) {
     if (cells != null) {
       this.getModel().beginUpdate();
       try {
@@ -6457,8 +6262,7 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} that represents the port.
    */
-  // isPort(cell: mxCell): boolean;
-  isPort(cell: mxCell) {
+  isPort(cell: mxCell): boolean {
     return false;
   }
 
@@ -6469,7 +6273,6 @@ class mxGraph extends mxEventSource {
    * @param cell {@link mxCell} that represents the port.
    * @param source If the cell is the source or target port.
    */
-  // getTerminalForPort(cell: mxCell, source: boolean): mxCell;
   getTerminalForPort(cell: mxCell, source: boolean = false): mxCell | null {
     return cell.getParent();
   }
@@ -6497,7 +6300,6 @@ class mxGraph extends mxEventSource {
    * @param cell Optional {@link mxCell} to be used as the new root. Default is the
    * selection cell.
    */
-  // enterGroup(cell: mxCell): void;
   enterGroup(cell: mxCell): void {
     cell = cell || this.getSelectionCell();
 
@@ -6511,7 +6313,6 @@ class mxGraph extends mxEventSource {
    * Changes the current root to the next valid root in the displayed cell
    * hierarchy.
    */
-  // exitGroup(): void;
   exitGroup(): void {
     const root = this.getModel().getRoot();
     const current = this.getCurrentRoot();
@@ -6549,7 +6350,6 @@ class mxGraph extends mxEventSource {
    * Uses the root of the model as the root of the displayed cell hierarchy
    * and selects the previous root.
    */
-  // home(): void;
   home() {
     const current = this.getCurrentRoot();
 
@@ -6569,7 +6369,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} which should be checked as a possible root.
    */
-  // isValidRoot(cell: mxCell): boolean;
   isValidRoot(cell: mxCell) {
     return cell != null;
   }
@@ -6597,17 +6396,16 @@ class mxGraph extends mxEventSource {
    * @param includeDescendants Optional boolean that specifies if the bounds
    * of all descendants should be included. Default is `false`.
    */
-  // getCellBounds(cell: mxCell, includeEdges?: boolean, includeDescendants?: boolean): mxRectangle;
   getCellBounds(
     cell: mxCell,
     includeEdges: boolean = false,
     includeDescendants: boolean = false
   ): mxRectangle | null {
-    let cells = [cell];
+    let cells = new mxCellArray(cell);
 
     // Includes all connected edges
     if (includeEdges) {
-      cells = cells.concat(<mxCell[]>this.getModel().getEdges(cell));
+      cells = cells.concat(<mxCellArray>cell.getEdges());
     }
 
     let result = this.getView().getBounds(cells);
@@ -6665,9 +6463,8 @@ class mxGraph extends mxEventSource {
    * @param includeEdges Specifies if edge bounds should be included by computing
    * the bounding box for all points in geometry. Default is `false`.
    */
-  // getBoundingBoxFromGeometry(cells: mxCell[], includeEdges?: boolean): mxRectangle;
   getBoundingBoxFromGeometry(
-    cells: mxCell[],
+    cells: mxCellArray,
     includeEdges: boolean = false
   ): mxRectangle | null {
     includeEdges = includeEdges != null ? includeEdges : false;
@@ -6721,7 +6518,7 @@ class mxGraph extends mxEventSource {
                   parent.isVertex() &&
                   parent !== this.getView().currentRoot
                 ) {
-                  tmp = this.getBoundingBoxFromGeometry([parent], false);
+                  tmp = this.getBoundingBoxFromGeometry(new mxCellArray(parent), false);
 
                   if (tmp != null) {
                     bbox = new mxRectangle(
@@ -6741,7 +6538,7 @@ class mxGraph extends mxEventSource {
                 bbox = mxRectangle.fromRectangle(geo);
 
                 if (parent.isVertex() && cells.indexOf(parent) >= 0) {
-                  tmp = this.getBoundingBoxFromGeometry([parent], false);
+                  tmp = this.getBoundingBoxFromGeometry(new mxCellArray(parent), false);
 
                   if (tmp != null) {
                     bbox.x += tmp.x;
@@ -6787,7 +6584,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell Optional {@link mxCell} for which the cell states should be cleared.
    */
-  // refresh(cell?: mxCell): void;
   refresh(cell: mxCell | null = null): void {
     if (cell) {
       this.getView().clear(cell, false);
@@ -6804,7 +6600,6 @@ class mxGraph extends mxEventSource {
    *
    * @param value Numeric value to be snapped to the grid.
    */
-  // snap(value: number): number;
   snap(value: number): number {
     if (this.gridEnabled) {
       value = Math.round(value / this.gridSize) * this.gridSize;
@@ -6883,7 +6678,6 @@ class mxGraph extends mxEventSource {
    * @param dx Amount to shift the graph along the x-axis.
    * @param dy Amount to shift the graph along the y-axis.
    */
-  // panGraph(dx: number, dy: number): void;
   panGraph(dx: number, dy: number): void {
     const container = <HTMLElement>this.container;
 
@@ -6987,7 +6781,6 @@ class mxGraph extends mxEventSource {
   /**
    * Zooms into the graph by {@link zoomFactor}.
    */
-  // zoomIn(): void;
   zoomIn(): void {
     this.zoom(this.zoomFactor);
   }
@@ -6995,7 +6788,6 @@ class mxGraph extends mxEventSource {
   /**
    * Zooms out of the graph by {@link zoomFactor}.
    */
-  // zoomOut(): void;
   zoomOut(): void {
     this.zoom(1 / this.zoomFactor);
   }
@@ -7003,7 +6795,6 @@ class mxGraph extends mxEventSource {
   /**
    * Resets the zoom and panning in the view.
    */
-  // zoomActual(): void;
   zoomActual(): void {
     if (this.getView().scale === 1) {
       this.getView().setTranslate(0, 0);
@@ -7019,7 +6810,6 @@ class mxGraph extends mxEventSource {
    * Zooms the graph to the given scale with an optional boolean center
    * argument, which is passd to {@link zoom}.
    */
-  // zoomTo(scale: number, center?: boolean): void;
   zoomTo(scale: number, center: boolean = false): void {
     this.zoom(scale / this.getView().scale, center);
   }
@@ -7034,17 +6824,12 @@ class mxGraph extends mxEventSource {
    * @param cx Optional float that specifies the horizontal center. Default is `0.5`.
    * @param cy Optional float that specifies the vertical center. Default is `0.5`.
    */
-  // center(horizontal?: boolean, vertical?: boolean, cx?: number, cy?: number): void;
   center(
     horizontal: boolean = true,
     vertical: boolean = true,
     cx: number = 0.5,
     cy: number = 0.5
   ): void {
-    horizontal = horizontal != null ? horizontal : true;
-    vertical = vertical != null ? vertical : true;
-    cx = cx != null ? cx : 0.5;
-    cy = cy != null ? cy : 0.5;
 
     const container = <HTMLElement>this.container;
     const hasScrollbars = mxUtils.hasScrollbars(this.container);
@@ -7257,7 +7042,6 @@ class mxGraph extends mxEventSource {
    * @param cell {@link mxCell} to be made visible.
    * @param center Optional boolean flag. Default is `false`.
    */
-  // scrollCellToVisible(cell: mxCell, center?: boolean): void;
   scrollCellToVisible(cell: mxCell, center: boolean = false): void {
     const x = -this.getView().translate.x;
     const y = -this.getView().translate.y;
@@ -7305,7 +7089,6 @@ class mxGraph extends mxEventSource {
    *
    * @param rect {@link mxRectangle} to be made visible.
    */
-  // scrollRectToVisible(rect: mxRectangle): boolean;
   scrollRectToVisible(rect: mxRectangle): boolean {
     let isChanged = false;
 
@@ -7391,75 +7174,12 @@ class mxGraph extends mxEventSource {
     return isChanged;
   }
 
-  /**
-   * Returns the {@link mxGeometry} for the given cell. This implementation uses
-   * {@link mxGraphModel.getGeometry}. Subclasses can override this to implement
-   * specific geometries for cells in only one graph, that is, it can return
-   * geometries that depend on the current state of the view.
-   *
-   * @param cell {@link mxCell} whose geometry should be returned.
-   */
-  // getCellGeometry(cell: mxCell): mxGeometry;
-  getCellGeometry(cell: mxCell): mxGeometry | null {
-    // SLATED FOR DELETION
-    return cell.getGeometry();
-  }
-
-  /**
-   * Returns true if the given cell is visible in this graph. This
-   * implementation uses {@link mxGraphModel.isVisible}. Subclassers can override
-   * this to implement specific visibility for cells in only one graph, that
-   * is, without affecting the visible state of the cell.
-   *
-   * When using dynamic filter expressions for cell visibility, then the
-   * graph should be revalidated after the filter expression has changed.
-   *
-   * @param cell {@link mxCell} whose visible state should be returned.
-   */
-  // isCellVisible(cell: mxCell): boolean;
-  isCellVisible(cell: mxCell): boolean {
-    // SLATED FOR DELETION
-    return cell.isVisible();
-  }
-
-  /**
-   * Returns true if the given cell is collapsed in this graph. This
-   * implementation uses {@link mxCell.isCollapsed}. Subclassers can override
-   * this to implement specific collapsed states for cells in only one graph,
-   * that is, without affecting the collapsed state of the cell.
-   *
-   * When using dynamic filter expressions for the collapsed state, then the
-   * graph should be revalidated after the filter expression has changed.
-   *
-   * @param cell {@link mxCell} whose collapsed state should be returned.
-   */
-  // isCellCollapsed(cell: mxCell): boolean;
-  isCellCollapsed(cell: mxCell): boolean {
-    // SLATED FOR DELETION
-    return cell.isCollapsed();
-  }
-
-  /**
-   * Returns true if the given cell is connectable in this graph. This
-   * implementation uses {@link mxCell.isConnectable}. Subclassers can override
-   * this to implement specific connectable states for cells in only one graph,
-   * that is, without affecting the connectable state of the cell in the model.
-   *
-   * @param cell {@link mxCell} whose connectable state should be returned.
-   */
-  // isCellConnectable(cell: mxCell): boolean;
-  isCellConnectable(cell: mxCell): boolean {
-    // SLATED FOR DELETION
-    return cell.isConnectable();
-  }
-
   /**
    * Returns true if perimeter points should be computed such that the
    * resulting edge has only horizontal or vertical segments.
    *
    * @param edge {@link mxCellState} that represents the edge.
    */
-  // isOrthogonal(edge: mxCellState): boolean;
   isOrthogonal(edge: mxCellState): boolean {
     /*
     'orthogonal' defines if the connection points on either end of the edge should
@@ -7486,17 +7206,6 @@ class mxGraph extends mxEventSource {
     );
   }
 
-  /**
-   * Returns true if the given cell state is a loop.
-   *
-   * @param state {@link mxCellState} that represents a potential loop.
-   */
-  // isLoop(state: mxCellState): boolean;
-  isLoop(state: mxCellState): boolean {
-    // SLATED FOR DELETION
-    return state.isLoop();
-  }
-
   /**
    * Returns true if the given event is a clone event. This implementation
    * returns true if control is pressed.
@@ -7559,7 +7268,6 @@ class mxGraph extends mxEventSource {
    * Displays the given validation error in a dialog. This implementation uses
    * mxUtils.alert.
    */
-  // validationAlert(message: string): void;
   validationAlert(message: any): void {
     alert(message);
   }
@@ -7572,7 +7280,6 @@ class mxGraph extends mxEventSource {
    * @param source {@link mxCell} that represents the source terminal.
    * @param target {@link mxCell} that represents the target terminal.
    */
-  // isEdgeValid(edge: mxCell, source: mxCell, target: mxCell): boolean;
   isEdgeValid(edge: mxCell, source: mxCell, target: mxCell): boolean {
     return this.getEdgeValidationError(edge, source, target) == null;
   }
@@ -7614,7 +7321,6 @@ class mxGraph extends mxEventSource {
    * @param source {@link mxCell} that represents the source terminal.
    * @param target {@link mxCell} that represents the target terminal.
    */
-  // getEdgeValidationError(edge: mxCell, source: mxCell, target: mxCell): string;
   getEdgeValidationError(
     edge: mxCell | null = null,
     source: mxCell | null = null,
@@ -7666,23 +7372,15 @@ class mxGraph extends mxEventSource {
       // Gets the number of outgoing edges from the source
       // and the number of incoming edges from the target
       // without counting the edge being currently changed.
-      const sourceOut = this.getModel().getDirectedEdgeCount(
-        source,
-        true,
-        edge
-      );
-      const targetIn = this.getModel().getDirectedEdgeCount(
-        target,
-        false,
-        edge
-      );
+      const sourceOut = source.getDirectedEdgeCount(true, edge);
+      const targetIn = target.getDirectedEdgeCount(false, edge);
 
       // Checks the change against each multiplicity rule
       if (this.multiplicities != null) {
-        for (let i = 0; i < this.multiplicities.length; i += 1) {
-          const err = this.multiplicities[i].check(
+        for (const multiplicity of this.multiplicities) {
+          const err = multiplicity.check(
             this,
-            edge,
+            <mxCell>edge,
             source,
             target,
             sourceOut,
@@ -7810,8 +7508,8 @@ class mxGraph extends mxEventSource {
    */
   // getCellValidationError(cell: mxCell): string | null;
   getCellValidationError(cell: mxCell): string | null {
-    const outCount = this.getModel().getDirectedEdgeCount(cell, true);
-    const inCount = this.getModel().getDirectedEdgeCount(cell, false);
+    const outCount = cell.getDirectedEdgeCount(true);
+    const inCount = cell.getDirectedEdgeCount(false);
     const value = cell.getValue();
     let error = '';
 
@@ -7857,7 +7555,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the {@link backgroundImage} as an {@link mxImage}.
    */
-  // getBackgroundImage(): mxImage;
   getBackgroundImage(): mxImage | null {
     return this.backgroundImage;
   }
@@ -7867,7 +7564,6 @@ class mxGraph extends mxEventSource {
    *
    * @param image New {@link mxImage} to be used for the background.
    */
-  // setBackgroundImage(image: mxImage): void;
   setBackgroundImage(image: mxImage | null): void {
     this.backgroundImage = image;
   }
@@ -7876,7 +7572,6 @@ class mxGraph extends mxEventSource {
    * Returns the {@link mxImage} used to display the collapsed state of
    * the specified cell state. This returns null for all edges.
    */
-  // getFoldingImage(state: mxCellState): mxImage;
   getFoldingImage(state: mxCellState): mxImage | null {
     if (state != null && this.foldingEnabled && !state.cell.isEdge()) {
       const tmp = (<mxCell>state.cell).isCollapsed();
@@ -7909,7 +7604,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} whose textual representation should be returned.
    */
-  // convertValueToString(cell: mxCell): string;
   convertValueToString(cell: mxCell): string | null {
     const value = cell.getValue();
 
@@ -7992,7 +7686,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} whose label should be displayed as HTML markup.
    */
-  // isHtmlLabel(cell: mxCell): boolean;
   isHtmlLabel(cell: mxCell): boolean {
     return this.isHtmlLabels();
   }
@@ -8000,7 +7693,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns {@link htmlLabels}.
    */
-  // isHtmlLabels(): boolean;
   isHtmlLabels(): boolean {
     return this.htmlLabels;
   }
@@ -8008,8 +7700,7 @@ class mxGraph extends mxEventSource {
   /**
    * Sets {@link htmlLabels}.
    */
-  // setHtmlLabels(value: boolean): void;
-  setHtmlLabels(value: boolean) {
+  setHtmlLabels(value: boolean): void {
     this.htmlLabels = value;
   }
 
@@ -8054,7 +7745,6 @@ class mxGraph extends mxEventSource {
    *
    * @param state {@link mxCell} whose label should be wrapped.
    */
-  // isWrapping(cell: mxCell): boolean;
   isWrapping(cell: mxCell): boolean {
     return this.getCurrentCellStyle(cell).whiteSpace === 'wrap';
   }
@@ -8067,7 +7757,6 @@ class mxGraph extends mxEventSource {
    *
    * @param state {@link mxCell} whose label should be clipped.
    */
-  // isLabelClipped(cell: mxCell): boolean;
   isLabelClipped(cell: mxCell): boolean {
     return this.getCurrentCellStyle(cell).overflow === 'hidden';
   }
@@ -8161,7 +7850,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} whose tooltip should be returned.
    */
-  // getTooltipForCell(cell: mxCell): string;
   getTooltipForCell(cell: mxCell): string | null {
     let tip = null;
 
@@ -8180,7 +7868,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} whose tooltip should be returned.
    */
-  // getLinkForCell(cell: mxCell): any;
   getLinkForCell(cell: mxCell): string | null {
     return null;
   }
@@ -8191,7 +7878,6 @@ class mxGraph extends mxEventSource {
    *
    * @param me {@link mxMouseEvent} whose cursor should be returned.
    */
-  // getCursorForMouseEvent(me: mxMouseEvent): string;
   getCursorForMouseEvent(me: mxMouseEvent): string | null {
     return this.getCursorForCell(me.getCell());
   }
@@ -8202,7 +7888,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} whose cursor should be returned.
    */
-  // getCursorForCell(cell: mxCell): string;
   getCursorForCell(cell: mxCell): string | null {
     return null;
   }
@@ -8216,7 +7901,6 @@ class mxGraph extends mxEventSource {
    * @param swimlane {@link mxCell} whose start size should be returned.
    * @param ignoreState Optional boolean that specifies if cell state should be ignored.
    */
-  // getStartSize(swimlane: mxCell, ignoreState?: boolean): mxRectangle;
   getStartSize(swimlane: mxCell, ignoreState: boolean = false): mxRectangle {
     const result = new mxRectangle();
     const style = this.getCurrentCellStyle(swimlane, ignoreState);
@@ -8235,7 +7919,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the direction for the given swimlane style.
    */
-  // getSwimlaneDirection(style: string): string;
   getSwimlaneDirection(style: any): string {
     const dir = mxUtils.getValue(style, 'direction', DIRECTION_EAST);
     const flipH = mxUtils.getValue(style, 'flipH', 0) == 1;
@@ -8275,7 +7958,6 @@ class mxGraph extends mxEventSource {
    * @param swimlane {@link mxCell} whose start size should be returned.
    * @param ignoreState Optional boolean that specifies if cell state should be ignored.
    */
-  // getActualStartSize(swimlane: mxCell, ignoreState?: boolean): mxRectangle;
   getActualStartSize(
     swimlane: mxCell,
     ignoreState: boolean = false
@@ -8309,7 +7991,6 @@ class mxGraph extends mxEventSource {
    *
    * @param state {@link mxCellState} whose image URL should be returned.
    */
-  // getImage(state: mxCellState): string;
   getImage(state: mxCellState): mxImage | null {
     return state != null && state.style != null
       ? state.style.image
@@ -8321,7 +8002,6 @@ class mxGraph extends mxEventSource {
    *
    * @param state {@link mxCellState} to check.
    */
-  // isTransparentState(state: mxCellState): boolean;
   isTransparentState(state: mxCellState): boolean {
     let result = false;
     if (state != null) {
@@ -8340,7 +8020,6 @@ class mxGraph extends mxEventSource {
    * @param state {@link mxCellState} whose vertical alignment should be
    * returned.
    */
-  // getVerticalAlign(state: mxCellState): string;
   getVerticalAlign(state: mxCellState): string | null {
     return state != null && state.style != null
       ? state.style.verticalAlign || ALIGN_MIDDLE
@@ -8355,7 +8034,6 @@ class mxGraph extends mxEventSource {
    * @param state {@link mxCellState} whose indicator color should be
    * returned.
    */
-  // getIndicatorColor(state: mxCellState): string;
   getIndicatorColor(state: mxCellState): string | null {
     return state != null && state.style != null
       ? state.style.indicatorColor
@@ -8370,7 +8048,6 @@ class mxGraph extends mxEventSource {
    * @param state {@link mxCellState} whose indicator gradient color should be
    * returned.
    */
-  // getIndicatorGradientColor(state: mxCellState): string;
   getIndicatorGradientColor(state: mxCellState): string | null {
     return state != null && state.style != null
       ? state.style.gradientColor
@@ -8384,7 +8061,6 @@ class mxGraph extends mxEventSource {
    *
    * @param state {@link mxCellState} whose indicator shape should be returned.
    */
-  // getIndicatorShape(state: mxCellState): any;
   getIndicatorShape(state: mxCellState): string | null {
     return state != null && state.style != null
       ? state.style.indicatorShape
@@ -8398,7 +8074,6 @@ class mxGraph extends mxEventSource {
    *
    * @param state {@link mxCellState} whose indicator image should be returned.
    */
-  // getIndicatorImage(state: mxCellState): any;
   getIndicatorImage(state: mxCellState): mxImage | null {
     return state != null && state.style != null
       ? state.style.indicatorImage
@@ -8408,7 +8083,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the value of {@link border}.
    */
-  // getBorder(): number;
   getBorder(): number {
     return this.border;
   }
@@ -8418,8 +8092,7 @@ class mxGraph extends mxEventSource {
    *
    * @param value Positive integer that represents the border to be used.
    */
-  // setBorder(value: number): void;
-  setBorder(value: number) {
+  setBorder(value: number): void {
     this.border = value;
   }
 
@@ -8431,7 +8104,6 @@ class mxGraph extends mxEventSource {
    * @param cell {@link mxCell} to be checked.
    * @param ignoreState Optional boolean that specifies if the cell state should be ignored.
    */
-  // isSwimlane(cell: mxCell, ignoreState?: boolean): boolean;
   isSwimlane(cell: mxCell, ignoreState: boolean = false): boolean {
     if (
       cell != null &&
@@ -8580,8 +8252,8 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the cells which may be exported in the given array of cells.
    */
-  // getCloneableCells(cells: mxCell[]): mxCell[];
-  getCloneableCells(cells: mxCell[]): mxCell[] | null {
+  // getCloneableCells(cells: mxCellArray): mxCellArray;
+  getCloneableCells(cells: mxCellArray): mxCellArray | null {
     return this.getModel().filterCells(cells, (cell: mxCell) => {
       return this.isCellCloneable(cell);
     });
@@ -8624,8 +8296,8 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the cells which may be exported in the given array of cells.
    */
-  // getExportableCells(cells: mxCell[]): mxCell[];
-  getExportableCells(cells: mxCell[]): mxCell[] | null {
+  // getExportableCells(cells: mxCellArray): mxCellArray;
+  getExportableCells(cells: mxCellArray): mxCellArray | null {
     return this.getModel().filterCells(cells, (cell: mxCell) => {
       return this.canExportCell(cell);
     });
@@ -8645,8 +8317,8 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the cells which may be imported in the given array of cells.
    */
-  // getImportableCells(cells: mxCell[]): mxCell[];
-  getImportableCells(cells: mxCell[]): mxCell[] | null {
+  // getImportableCells(cells: mxCellArray): mxCellArray;
+  getImportableCells(cells: mxCellArray): mxCellArray | null {
     return this.getModel().filterCells(cells, (cell: mxCell) => {
       return this.canImportCell(cell);
     });
@@ -8710,8 +8382,8 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the cells which may be exported in the given array of cells.
    */
-  // getDeletableCells(cells: mxCell[]): mxCell[];
-  getDeletableCells(cells: mxCell[]): mxCell[] | null {
+  // getDeletableCells(cells: mxCellArray): mxCellArray;
+  getDeletableCells(cells: mxCellArray): mxCellArray | null {
     return this.getModel().filterCells(cells, (cell: mxCell) => {
       return this.isCellDeletable(cell);
     });
@@ -8779,8 +8451,8 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the cells which are movable in the given array of cells.
    */
-  // getMovableCells(cells: mxCell[]): mxCell[];
-  getMovableCells(cells: mxCell[]): mxCell[] | null {
+  // getMovableCells(cells: mxCellArray): mxCellArray;
+  getMovableCells(cells: mxCellArray): mxCellArray | null {
     return this.getModel().filterCells(cells, (cell: mxCell) => {
       return this.isCellMovable(cell);
     });
@@ -9600,11 +9272,11 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the cells which are movable in the given array of cells.
    */
-  // getFoldableCells(cells: mxCell[], collapse: boolean): mxCell[];
+  // getFoldableCells(cells: mxCellArray, collapse: boolean): mxCellArray;
   getFoldableCells(
-    cells: mxCell[],
+    cells: mxCellArray,
     collapse: boolean = false
-  ): mxCell[] | null {
+  ): mxCellArray | null {
     return this.getModel().filterCells(cells, (cell: mxCell) => {
       return this.isCellFoldable(cell, collapse);
     });
@@ -9633,8 +9305,8 @@ class mxGraph extends mxEventSource {
    * @param cells {@link mxCell} that should be dropped into the target.
    * @param evt Mouseevent that triggered the invocation.
    */
-  // isValidDropTarget(cell: mxCell, cells: mxCell[], evt: Event): boolean;
-  isValidDropTarget(cell: mxCell, cells: mxCell[], evt: mxMouseEvent): boolean {
+  // isValidDropTarget(cell: mxCell, cells: mxCellArray, evt: Event): boolean;
+  isValidDropTarget(cell: mxCell, cells: mxCellArray, evt: mxMouseEvent): boolean {
     return (
       cell != null &&
       ((this.isSplitEnabled() && this.isSplitTarget(cell, cells, evt)) ||
@@ -9652,8 +9324,8 @@ class mxGraph extends mxEventSource {
    * @param cells {@link mxCell} that should split the edge.
    * @param evt Mouseevent that triggered the invocation.
    */
-  // isSplitTarget(target: mxCell, cells: mxCell[], evt: Event): boolean;
-  isSplitTarget(target: mxCell, cells: mxCell[], evt: mxMouseEvent): boolean {
+  // isSplitTarget(target: mxCell, cells: mxCellArray, evt: Event): boolean;
+  isSplitTarget(target: mxCell, cells: mxCellArray, evt: mxMouseEvent): boolean {
     if (
       target.isEdge() &&
       cells != null &&
@@ -9666,8 +9338,8 @@ class mxGraph extends mxEventSource {
       const trg = <mxCell>target.getTerminal(false);
 
       return (
-        !this.getModel().isAncestor(cells[0], src) &&
-        !this.getModel().isAncestor(cells[0], trg)
+        !cells[0].isAncestor(src) &&
+        !cells[0].isAncestor(trg)
       );
     }
     return false;
@@ -9687,9 +9359,9 @@ class mxGraph extends mxEventSource {
    * @param cell {@link mxCell} that is under the mousepointer.
    * @param clone Optional boolean to indicate of cells will be cloned.
    */
-  // getDropTarget(cells: mxCell[], evt: Event, cell: mxCell, clone?: boolean): mxCell;
+  // getDropTarget(cells: mxCellArray, evt: Event, cell: mxCell, clone?: boolean): mxCell;
   getDropTarget(
-    cells: mxCell[],
+    cells: mxCellArray,
     evt: mxMouseEvent,
     cell: mxCell | null = null,
     clone: boolean = false
@@ -9805,7 +9477,6 @@ class mxGraph extends mxEventSource {
    * @param parent {@link mxCell} that should be used as the root of the recursion.
    * Default is {@link defaultParent}.
    */
-  // getSwimlaneAt(x: number, y: number, parent: mxCell): mxCell;
   getSwimlaneAt(
     x: number,
     y: number,
@@ -9917,7 +9588,6 @@ class mxGraph extends mxEventSource {
    * @param x X-coordinate of the location to be checked.
    * @param y Y-coordinate of the location to be checked.
    */
-  // intersects(state: mxCellState, x: number, y: number): mxCell;
   intersects(state: mxCellState | null = null, x: number, y: number): boolean {
     if (state != null) {
       const pts = <mxPoint[]>state.absolutePoints;
@@ -9966,7 +9636,6 @@ class mxGraph extends mxEventSource {
    * @param x X-coordinate of the mouse event.
    * @param y Y-coordinate of the mouse event.
    */
-  // hitsSwimlaneContent(swimlane: mxCell, x: number, y: number): boolean;
   hitsSwimlaneContent(swimlane: mxCell, x: number, y: number): boolean {
     const state = this.getView().getState(swimlane);
     const size = this.getStartSize(swimlane);
@@ -9991,8 +9660,7 @@ class mxGraph extends mxEventSource {
    *
    * @param parent {@link mxCell} whose children should be returned.
    */
-  // getChildVertices(parent: mxCell): mxCell[];
-  getChildVertices(parent: mxCell): (mxCell | null)[] {
+  getChildVertices(parent: mxCell): mxCellArray {
     return this.getChildCells(parent, true, false);
   }
 
@@ -10001,8 +9669,7 @@ class mxGraph extends mxEventSource {
    *
    * @param parent {@link mxCell} whose child vertices should be returned.
    */
-  // getChildEdges(parent: mxCell): mxCell[];
-  getChildEdges(parent: mxCell): (mxCell | null)[] {
+  getChildEdges(parent: mxCell): mxCellArray {
     return this.getChildCells(parent, false, true);
   }
 
@@ -10016,14 +9683,13 @@ class mxGraph extends mxEventSource {
    * @param edges Optional boolean that specifies if child edges should
    * be returned. Default is `false`.
    */
-  // getChildCells(parent: mxCell, vertices?: boolean, edges?: boolean): mxCell[];
   getChildCells(
     parent: mxCell = this.getDefaultParent(),
     vertices: boolean = false,
     edges: boolean = false
-  ): (mxCell | null)[] {
-    const cells = this.getModel().getChildCells(parent, vertices, edges);
-    const result = [];
+  ): mxCellArray {
+    const cells = parent.getChildCells(vertices, edges);
+    const result = new mxCellArray();
 
     // Filters out the non-visible child cells
     for (let i = 0; i < cells.length; i += 1) {
@@ -10041,8 +9707,8 @@ class mxGraph extends mxEventSource {
    * @param parent Optional parent of the opposite end for a connection to be
    * returned.
    */
-  // getConnections(cell: mxCell, parent: mxCell): mxCell[];
-  getConnections(cell: mxCell, parent: mxCell | null = null): mxCell[] {
+  getConnections(cell: mxCell,
+                 parent: mxCell | null = null): mxCellArray {
     return this.getEdges(cell, parent, true, true, false);
   }
 
@@ -10055,8 +9721,8 @@ class mxGraph extends mxEventSource {
    * @param parent Optional parent of the opposite end for an edge to be
    * returned.
    */
-  // getIncomingEdges(cell: mxCell, parent: mxCell): mxCell[];
-  getIncomingEdges(cell: mxCell, parent: mxCell | null = null): mxCell[] {
+  getIncomingEdges(cell: mxCell,
+                   parent: mxCell | null = null): mxCellArray {
     return this.getEdges(cell, parent, true, false, false);
   }
 
@@ -10069,8 +9735,8 @@ class mxGraph extends mxEventSource {
    * @param parent Optional parent of the opposite end for an edge to be
    * returned.
    */
-  // getOutgoingEdges(cell: mxCell, parent?: mxCell): mxCell[];
-  getOutgoingEdges(cell: mxCell, parent: mxCell | null = null): mxCell[] {
+  getOutgoingEdges(cell: mxCell,
+                   parent: mxCell | null = null): mxCellArray {
     return this.getEdges(cell, parent, false, true, false);
   }
 
@@ -10105,8 +9771,8 @@ class mxGraph extends mxEventSource {
     outgoing: boolean = true,
     includeLoops: boolean = true,
     recurse: boolean = false
-  ): mxCell[] {
-    let edges: mxCell[] = [];
+  ): mxCellArray {
+    let edges: mxCellArray = new mxCellArray();
     const isCollapsed = cell.isCollapsed();
     const childCount = cell.getChildCount();
 
@@ -10114,16 +9780,14 @@ class mxGraph extends mxEventSource {
       const child = cell.getChildAt(i);
 
       if (isCollapsed || !(<mxCell>child).isVisible()) {
-        edges = edges.concat(
-          <mxCell[]>this.getModel().getEdges(<mxCell>child, incoming, outgoing)
-        );
+        edges = edges.concat((<mxCell>child).getEdges(incoming, outgoing));
       }
     }
 
     edges = edges.concat(
-      <mxCell[]>this.getModel().getEdges(cell, incoming, outgoing)
+      <mxCellArray>cell.getEdges(incoming, outgoing)
     );
-    const result = [];
+    const result = new mxCellArray();
 
     for (let i = 0; i < edges.length; i += 1) {
       const state = this.getView().getState(edges[i]);
@@ -10164,14 +9828,13 @@ class mxGraph extends mxEventSource {
    * @param parent {@link mxCell} the possible parent cell
    * @param recurse boolean whether or not to recurse the child ancestors
    */
-  // isValidAncestor(cell: mxCell, parent: mxCell, recurse?: boolean): boolean;
   isValidAncestor(
     cell: mxCell,
     parent: mxCell,
     recurse: boolean = false
   ): boolean {
     return recurse
-      ? this.getModel().isAncestor(parent, cell)
+      ? parent.isAncestor(cell)
       : cell.getParent() == parent;
   }
 
@@ -10188,14 +9851,13 @@ class mxGraph extends mxEventSource {
    * @param targets Optional boolean that specifies if targer terminals should be
    * included in the result. Default is `true`.
    */
-  // getOpposites(edges: mxCell[], terminal: mxCellState, sources?: boolean, targets?: boolean): mxCellState[];
   getOpposites(
-    edges: mxCell[],
+    edges: mxCellArray,
     terminal: mxCell | null = null,
     sources: boolean = true,
     targets: boolean = true
-  ): mxCell[] {
-    const terminals = [];
+  ): mxCellArray {
+    const terminals = new mxCellArray();
 
     // Fast lookup to avoid duplicates in terminals array
     const dict = new mxDictionary();
@@ -10254,10 +9916,9 @@ class mxGraph extends mxEventSource {
    * target -
    * directed -
    */
-  // getEdgesBetween(source: mxCell, target: mxCell, directed?: boolean): mxCell[];
-  getEdgesBetween(source: mxCell, target: mxCell, directed: boolean = false) {
+  getEdgesBetween(source: mxCell, target: mxCell, directed: boolean = false): mxCellArray {
     const edges = this.getEdges(source);
-    const result = [];
+    const result = new mxCellArray();
 
     // Checks if the edge is connected to the correct
     // cell and returns the first match
@@ -10291,8 +9952,7 @@ class mxGraph extends mxEventSource {
    * @param addOffset Optional boolean that specifies if the position should be
    * offset by half of the {@link gridSize}. Default is `true`.
    */
-  // getPointForEvent(evt: MouseEvent, addOffset: boolean): mxPoint;
-  getPointForEvent(evt: mxMouseEvent, addOffset: boolean = true) {
+  getPointForEvent(evt: mxMouseEvent, addOffset: boolean = true): mxPoint {
     const p = mxUtils.convertPoint(
       this.container,
       getClientX(evt),
@@ -10322,18 +9982,17 @@ class mxGraph extends mxEventSource {
    * Default is current root of the view or the root of the model.
    * @param result Optional array to store the result in.
    */
-  // getCells(x: number, y: number, width: number, height: number, parent?: mxCell, result?: mxCell[]): mxCell[];
   getCells(
     x: number,
     y: number,
     width: number,
     height: number,
     parent: mxCell | null = null,
-    result: mxCell[] = [],
+    result: mxCellArray = new mxCellArray(),
     intersection: mxRectangle | null = null,
     ignoreFn: Function | null = null,
     includeDescendants: boolean = false
-  ): mxCell[] {
+  ): mxCellArray {
     if (width > 0 || height > 0 || intersection != null) {
       const model = this.getModel();
       const right = x + width;
@@ -10471,13 +10130,13 @@ class mxGraph extends mxEventSource {
    * should be counted for a tree root. If false then outgoing edges will be
    * counted. Default is `false`.
    */
-  // findTreeRoots(parent: mxCell, isolate?: boolean, invert?: boolean): mxCell[];
+  // findTreeRoots(parent: mxCell, isolate?: boolean, invert?: boolean): mxCellArray;
   findTreeRoots(
     parent: mxCell,
     isolate: boolean = false,
     invert: boolean = false
-  ): mxCell[] {
-    const roots: mxCell[] = [];
+  ): mxCellArray {
+    const roots: mxCellArray = new mxCellArray();
 
     if (parent != null) {
       const model = this.getModel();
@@ -10604,7 +10263,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} for which the selection state should be returned.
    */
-  // isCellSelected(cell: mxCell): boolean;
   isCellSelected(cell: mxCell): boolean {
     return this.getSelectionModel().isSelected(cell);
   }
@@ -10612,7 +10270,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns true if the selection is empty.
    */
-  // isSelectionEmpty(): boolean;
   isSelectionEmpty(): boolean {
     return this.getSelectionModel().isEmpty();
   }
@@ -10620,7 +10277,6 @@ class mxGraph extends mxEventSource {
   /**
    * Clears the selection using {@link mxGraphSelectionModel.clear}.
    */
-  // clearSelection(): void;
   clearSelection(): void {
     return this.getSelectionModel().clear();
   }
@@ -10628,7 +10284,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the number of selected cells.
    */
-  // getSelectionCount(): number;
   getSelectionCount(): number {
     return this.getSelectionModel().cells.length;
   }
@@ -10636,7 +10291,6 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the first cell from the array of selected {@link mxCell}.
    */
-  // getSelectionCell(): mxCell;
   getSelectionCell(): mxCell {
     return this.getSelectionModel().cells[0];
   }
@@ -10644,8 +10298,8 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the array of selected {@link mxCell}.
    */
-  // getSelectionCells(): mxCell[];
-  getSelectionCells(): mxCell[] {
+  // getSelectionCells(): mxCellArray;
+  getSelectionCells(): mxCellArray {
     return this.getSelectionModel().cells.slice();
   }
 
@@ -10654,7 +10308,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} to be selected.
    */
-  // setSelectionCell(cell: mxCell): void;
   setSelectionCell(cell: mxCell | null): void {
     this.getSelectionModel().setCell(cell);
   }
@@ -10664,8 +10317,7 @@ class mxGraph extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} to be selected.
    */
-  // setSelectionCells(cells: mxCell[]): void;
-  setSelectionCells(cells: mxCell[]): void {
+  setSelectionCells(cells: mxCellArray): void {
     this.getSelectionModel().setCells(cells);
   }
 
@@ -10674,7 +10326,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} to be add to the selection.
    */
-  // addSelectionCell(cell: mxCell): void;
   addSelectionCell(cell: mxCell): void {
     this.getSelectionModel().addCell(cell);
   }
@@ -10684,8 +10335,7 @@ class mxGraph extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} to be added to the selection.
    */
-  // addSelectionCells(cells: mxCell[]): void;
-  addSelectionCells(cells: mxCell[]): void {
+  addSelectionCells(cells: mxCellArray): void {
     this.getSelectionModel().addCells(cells);
   }
 
@@ -10694,7 +10344,6 @@ class mxGraph extends mxEventSource {
    *
    * @param cell {@link mxCell} to be removed from the selection.
    */
-  // removeSelectionCell(cell: mxCell): void;
   removeSelectionCell(cell: mxCell): void {
     this.getSelectionModel().removeCell(cell);
   }
@@ -10704,8 +10353,8 @@ class mxGraph extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} to be removed from the selection.
    */
-  // removeSelectionCells(cells: mxCell[]): void;
-  removeSelectionCells(cells: mxCell[]): void {
+  // removeSelectionCells(cells: mxCellArray): void;
+  removeSelectionCells(cells: mxCellArray): void {
     this.getSelectionModel().removeCells(cells);
   }
 
@@ -10716,8 +10365,8 @@ class mxGraph extends mxEventSource {
    * @param rect {@link mxRectangle} that represents the region to be selected.
    * @param evt Mouseevent that triggered the selection.
    */
-  // selectRegion(rect: mxRectangle, evt: Event): mxCell[];
-  selectRegion(rect: mxRectangle, evt: mxMouseEvent): mxCell[] | null {
+  // selectRegion(rect: mxRectangle, evt: Event): mxCellArray;
+  selectRegion(rect: mxRectangle, evt: mxMouseEvent): mxCellArray | null {
     const cells = this.getCells(rect.x, rect.y, rect.width, rect.height);
     this.selectCellsForEvent(cells, evt);
     return cells;
@@ -10726,7 +10375,6 @@ class mxGraph extends mxEventSource {
   /**
    * Selects the next cell.
    */
-  // selectNextCell(): void;
   selectNextCell(): void {
     this.selectCell(true);
   }
@@ -10734,7 +10382,6 @@ class mxGraph extends mxEventSource {
   /**
    * Selects the previous cell.
    */
-  // selectPreviousCell(): void;
   selectPreviousCell(): void {
     this.selectCell();
   }
@@ -10742,7 +10389,6 @@ class mxGraph extends mxEventSource {
   /**
    * Selects the parent cell.
    */
-  // selectParentCell(): void;
   selectParentCell(): void {
     this.selectCell(false, true);
   }
@@ -10750,7 +10396,6 @@ class mxGraph extends mxEventSource {
   /**
    * Selects the first child cell.
    */
-  // selectChildCell(): void;
   selectChildCell(): void {
     this.selectCell(false, false, true);
   }
@@ -10763,7 +10408,6 @@ class mxGraph extends mxEventSource {
    * @param isParent Boolean indicating if the parent cell should be selected.
    * @param isChild Boolean indicating if the first child cell should be selected.
    */
-  // selectCell(isNext?: boolean, isParent?: boolean, isChild?: boolean): void;
   selectCell(
     isNext: boolean = false,
     isParent: boolean = false,
@@ -10827,15 +10471,14 @@ class mxGraph extends mxEventSource {
    * @param descendants Optional boolean specifying whether all descendants should be
    * selected. Default is `false`.
    */
-  // selectAll(parent: mxCell, descendants?: boolean): void;
   selectAll(
     parent: mxCell = this.getDefaultParent(),
     descendants: boolean = false
   ): void {
     const cells = descendants
-      ? this.getModel().filterDescendants((cell: mxCell) => {
+      ? parent.filterDescendants((cell: mxCell) => {
           return cell != parent && this.getView().getState(cell) != null;
-        }, parent)
+        })
       : parent.getChildren();
 
     if (cells != null) {
@@ -10846,7 +10489,6 @@ class mxGraph extends mxEventSource {
   /**
    * Select all vertices inside the given parent or the default parent.
    */
-  // selectVertices(parent: mxCell, selectGroups: boolean): void;
   selectVertices(parent: mxCell, selectGroups: boolean = false): void {
     this.selectCells(true, false, parent, selectGroups);
   }
@@ -10854,7 +10496,6 @@ class mxGraph extends mxEventSource {
   /**
    * Select all vertices inside the given parent or the default parent.
    */
-  // selectEdges(parent: mxCell): void;
   selectEdges(parent: mxCell): void {
     this.selectCells(false, true, parent);
   }
@@ -10872,7 +10513,6 @@ class mxGraph extends mxEventSource {
    * @param selectGroups Optional boolean that specifies if groups should be
    * selected. Default is `false`.
    */
-  // selectCells(vertices: boolean, edges: boolean, parent?: mxCell, selectGroups?: boolean): void;
   selectCells(
     vertices: boolean = false,
     edges: boolean = false,
@@ -10891,7 +10531,7 @@ class mxGraph extends mxEventSource {
       );
     };
 
-    const cells = this.getModel().filterDescendants(filter, parent);
+    const cells = parent.filterDescendants(filter);
     if (cells != null) {
       this.setSelectionCells(cells);
     }
@@ -10927,8 +10567,7 @@ class mxGraph extends mxEventSource {
    * @param cells Array of {@link mxCell} to be selected.
    * @param evt Optional mouseevent that triggered the selection.
    */
-  // selectCellsForEvent(cells: mxCell[], evt?: MouseEvent): void;
-  selectCellsForEvent(cells: mxCell[], evt: mxMouseEvent) {
+  selectCellsForEvent(cells: mxCellArray, evt: mxMouseEvent): void {
     if (this.isToggleEvent(evt)) {
       this.addSelectionCells(cells);
     } else {
@@ -10947,7 +10586,6 @@ class mxGraph extends mxEventSource {
    *
    * @param state {@link mxCellState} whose handler should be created.
    */
-  // createHandler(state: mxCellState): mxVertexHandler | mxEdgeHandler;
   createHandler(
     state: mxCellState | null = null
   ): mxEdgeHandler | mxVertexHandler | null {
@@ -10978,7 +10616,6 @@ class mxGraph extends mxEventSource {
    *
    * @param state {@link mxCellState} to create the handler for.
    */
-  // createVertexHandler(state: mxCellState): mxVertexHandler;
   createVertexHandler(state: mxCellState): mxVertexHandler {
     return new mxVertexHandler(state);
   }
@@ -10988,7 +10625,6 @@ class mxGraph extends mxEventSource {
    *
    * @param state {@link mxCellState} to create the handler for.
    */
-  // createEdgeHandler(state: mxCellState, edgeStyle: any): mxEdgeHandler;
   createEdgeHandler(state: mxCellState, edgeStyle: any): mxEdgeHandler {
     let result = null;
     if (
@@ -11014,7 +10650,6 @@ class mxGraph extends mxEventSource {
    *
    * @param state {@link mxCellState} to create the handler for.
    */
-  // createEdgeSegmentHandler(state: mxCellState): mxEdgeSegmentHandler;
   createEdgeSegmentHandler(state: mxCellState): mxEdgeSegmentHandler {
     return new mxEdgeSegmentHandler(state);
   }
@@ -11024,8 +10659,7 @@ class mxGraph extends mxEventSource {
    *
    * @param state {@link mxCellState} to create the handler for.
    */
-  // createElbowEdgeHandler(state: mxCellState): mxElbowEdgeHandler;
-  createElbowEdgeHandler(state: mxCellState) {
+  createElbowEdgeHandler(state: mxCellState): mxElbowEdgeHandler {
     return new mxElbowEdgeHandler(state);
   }
 
diff --git a/packages/core/src/view/graph/mxGraphModel.ts b/packages/core/src/view/graph/mxGraphModel.ts
index a3f578028..87ab0f4f7 100644
--- a/packages/core/src/view/graph/mxGraphModel.ts
+++ b/packages/core/src/view/graph/mxGraphModel.ts
@@ -21,7 +21,7 @@ import mxTerminalChange from '../../atomic_changes/mxTerminalChange';
 import mxValueChange from '../../atomic_changes/mxValueChange';
 import mxVisibleChange from '../../atomic_changes/mxVisibleChange';
 import mxGeometry from "../../util/datatypes/mxGeometry";
-import mxCells from "../cell/mxCells";
+import mxCellArray from "../cell/mxCellArray";
 
 /**
  * Extends {@link mxEventSource} to implement a graph model. The graph model acts as
@@ -337,24 +337,12 @@ class mxGraphModel extends mxEventSource {
     return this.cells != null ? this.cells[id] : null;
   }
 
-  filterCells(cells: mxCell[],
-              filter: Function): mxCell[] | null {
-    return new mxCells(...cells).filterCells(filter);
-  }
-
-  getDescendants(parent: mxCell): mxCell[] {
-    // SLATED FOR DELETION
-    return parent.getDescendants();
-  }
-
-  filterDescendants(filter: Function | null,
-                    parent: mxCell): mxCell[] {
-    // SLATED FOR DELETION
-    return parent.filterDescendants(filter);
+  filterCells(cells: mxCellArray,
+              filter: Function): mxCellArray | null {
+    return new mxCellArray(...cells).filterCells(filter);
   }
 
   getRoot(cell: mxCell | null = null): mxCell | null {
-    // SLATED FOR DELETION
     return cell ? cell.getRoot() : this.root;
   }
 
@@ -420,12 +408,6 @@ class mxGraphModel extends mxEventSource {
     return this.isRoot(cell.getParent());
   }
 
-  isAncestor(parent: mxCell | null,
-             child: mxCell | null): boolean {
-    // SLATED FOR DELETION
-    return parent?.isAncestor(child) || false;
-  }
-
   /**
    * Returns true if the model contains the given {@link mxCell}.
    *
@@ -433,18 +415,7 @@ class mxGraphModel extends mxEventSource {
    */
   // contains(cell: mxCell): boolean;
   contains(cell: mxCell): boolean {
-    return this.isAncestor(<mxCell>this.root, cell);
-  }
-
-  /**
-   * Returns the parent of the given cell.
-   *
-   * @param {mxCell} cell  whose parent should be returned.
-   */
-  // getParent(cell: mxCell): mxCell;
-  getParent(cell: mxCell): mxCell | null {
-    // SLATED FOR DELETION
-    return cell.getParent();
+    return (<mxCell>this.root).isAncestor(cell);
   }
 
   /**
@@ -585,7 +556,7 @@ class mxGraphModel extends mxEventSource {
       // Updates edge parent if edge and child have
       // a common root node (does not need to be the
       // model root node)
-      if (this.isAncestor(root, edge)) {
+      if (root.isAncestor(edge)) {
         this.updateEdgeParent(edge, root);
       }
     }
@@ -627,23 +598,23 @@ class mxGraphModel extends mxEventSource {
       target = target.getParent();
     }
 
-    if (this.isAncestor(root, source) && this.isAncestor(root, target)) {
+    if (root.isAncestor(source) && root.isAncestor(target)) {
       if (source === target) {
         cell = source ? source.getParent() : null;
       } else if (source) {
-        cell = source.getNearestCommonAncestor(target);
+        cell = source.getNearestCommonAncestor(<mxCell>target);
       }
 
       if (
         cell != null &&
-        (cell.getParent() !== this.root || this.isAncestor(cell, edge)) &&
+        (cell.getParent() !== this.root || cell.isAncestor(edge)) &&
         edge && edge.getParent() !== cell
       ) {
         let geo = edge.getGeometry();
 
         if (geo != null) {
-          const origin1 = this.getOrigin(<mxCell>edge.getParent());
-          const origin2 = this.getOrigin(cell);
+          const origin1 = (<mxCell>edge.getParent()).getOrigin();
+          const origin2 = cell.getOrigin();
 
           const dx = origin2.x - origin1.x;
           const dy = origin2.y - origin1.y;
@@ -658,17 +629,6 @@ class mxGraphModel extends mxEventSource {
     }
   }
 
-  getOrigin(cell: mxCell): mxPoint {
-    // SLATED FOR DELETION
-    return cell.getOrigin();
-  }
-
-  getNearestCommonAncestor(cell1: mxCell,
-                           cell2: mxCell): mxCell | null {
-    // SLATED FOR DELETION
-    return cell1.getNearestCommonAncestor(cell2);
-  }
-
   /**
    * Removes the specified cell from the model using {@link mxChildChange} and adds
    * the change to the current transaction. This operation will remove the
@@ -746,73 +706,6 @@ class mxGraphModel extends mxEventSource {
     return previous;
   }
 
-  /**
-   * Returns the number of children in the given cell.
-   *
-   * @param {mxCell} cell  whose number of children should be returned.
-   */
-  // getChildCount(cell?: mxCell): number;
-  getChildCount(cell: mxCell) {
-    // SLATED FOR DELETION
-    return cell.getChildCount();
-  }
-
-  /**
-   * Returns the child of the given {@link mxCell} at the given index.
-   *
-   * @param {mxCell} cell  that represents the parent.
-   * @param index  Integer that specifies the index of the child to be returned.
-   */
-  // getChildAt(cell: mxCell, index: number): mxCell;
-  getChildAt(cell: mxCell,
-             index: number): mxCell | null {
-    // SLATED FOR DELETION
-    return cell.getChildAt(index);
-  }
-
-  /**
-   * Returns all children of the given {@link mxCell} as an array of {@link mxCell}. The
-   * return value should be only be read.
-   *
-   * @param {mxCell} cell  the represents the parent.
-   */
-  // getChildren(cell: mxCell): Array<mxCell>;
-  getChildren(cell: mxCell): mxCell[] {
-    // SLATED FOR DELETION
-    return cell.children || [];
-  }
-
-  getChildVertices(parent: mxCell) {
-    // SLATED FOR DELETION
-    return parent.getChildVertices();
-  }
-
-  getChildEdges(parent: mxCell): mxCell[] {
-    // SLATED FOR DELETION
-    return parent.getChildEdges();
-  }
-
-  getChildCells(parent: mxCell,
-                vertices: boolean=false,
-                edges: boolean=false): mxCell[] {
-    // SLATED FOR DELETION
-    return parent.getChildCells(vertices, edges);
-  }
-
-  /**
-   * Returns the source or target {@link mxCell} of the given edge depending on the
-   * value of the boolean parameter.
-   *
-   * @param {mxCell} edge  that specifies the edge.
-   * @param isSource  Boolean indicating which end of the edge should be returned.
-   */
-  // getTerminal(edge: mxCell, isSource: boolean): mxCell;
-  getTerminal(edge: mxCell,
-              isSource: boolean=false): mxCell | null {
-    // SLATED FOR DELETION
-    return edge.getTerminal(isSource);
-  }
-
   /**
    * Sets the source or target terminal of the given {@link mxCell} using
    * {@link mxTerminalChange} and adds the change to the current transaction.
@@ -883,61 +776,6 @@ class mxGraphModel extends mxEventSource {
     return previous;
   }
 
-  /**
-   * Returns the number of distinct edges connected to the given cell.
-   *
-   * @param {mxCell} cell  that represents the vertex.
-   */
-  // getEdgeCount(cell: mxCell): number;
-  getEdgeCount(cell: mxCell): number {
-    // SLATED FOR DELETION
-    return cell.getEdgeCount();
-  }
-
-  /**
-   * Returns the edge of cell at the given index.
-   *
-   * @param {mxCell} cell  that specifies the vertex.
-   * @param index  Integer that specifies the index of the edge
-   * to return.
-   */
-  // getEdgeAt(cell: mxCell, index: number): mxCell;
-  getEdgeAt(cell: mxCell,
-            index: number): mxCell | null {
-    // SLATED FOR DELETION
-    return cell.getEdgeAt(index);
-  }
-
-  getDirectedEdgeCount(cell: mxCell,
-                       outgoing: boolean,
-                       ignoredEdge: mxCell | null=null): number {
-    // SLATED FOR DELETION
-    return cell.getDirectedEdgeCount(outgoing, ignoredEdge)
-  }
-
-  getConnections(cell: mxCell) {
-    // SLATED FOR DELETION
-    return cell.getConnections();
-  }
-
-  getIncomingEdges(cell: mxCell): mxCell[] {
-    // SLATED FOR DELETION
-    return cell.getIncomingEdges();
-  }
-
-  getOutgoingEdges(cell: mxCell): mxCell[] {
-    // SLATED FOR DELETION
-    return cell.getOutgoingEdges();
-  }
-
-  getEdges(cell: mxCell,
-           incoming: boolean=true,
-           outgoing: boolean=true,
-           includeLoops: boolean=true) {
-    // SLATED FOR DELETION
-    return cell.getEdges(incoming, outgoing, includeLoops);
-  }
-
   /**
    * Returns all edges between the given source and target pair. If directed
    * is true, then only edges from the source to the target are returned,
@@ -950,10 +788,9 @@ class mxGraphModel extends mxEventSource {
    * @param directed  Optional boolean that specifies if the direction of the
    * edge should be taken into account. Default is false.
    */
-  // getEdgesBetween(source: mxCell, target: mxCell, directed?: boolean): Array<mxCell>;
   getEdgesBetween(source: mxCell,
                   target: mxCell,
-                  directed: boolean=false) {
+                  directed: boolean=false): mxCellArray {
 
     const tmp1 = source.getEdgeCount();
     const tmp2 = target.getEdgeCount();
@@ -969,7 +806,7 @@ class mxGraphModel extends mxEventSource {
       terminal = target;
     }
 
-    const result = [];
+    const result = new mxCellArray();
 
     // Checks if the edge is connected to the correct
     // cell and returns the first match
@@ -987,65 +824,6 @@ class mxGraphModel extends mxEventSource {
     return result;
   }
 
-  getOpposites(edges: mxCell[],
-               terminal: mxCell,
-               sources: boolean=true,
-               targets: boolean=true): mxCell[] {
-    // SLATED FOR DELETION
-    return new mxCells(...edges).getOpposites(terminal, sources, targets);
-  }
-
-  getTopmostCells(cells: mxCell[]): mxCell[] {
-    // SLATED FOR DELETION
-    return new mxCells(...cells).getTopmostCells();
-  }
-
-  /**
-   * Returns true if the given cell is a vertex.
-   *
-   * @param {mxCell} cell  that represents the possible vertex.
-   */
-  // isVertex(cell: mxCell): boolean;
-  isVertex(cell: mxCell): boolean {
-    // SLATED FOR DELETION
-    return cell.isVertex();
-  }
-
-  /**
-   * Returns true if the given cell is an edge.
-   *
-   * @param {mxCell} cell  that represents the possible edge.
-   */
-  // isEdge(cell: mxCell): boolean;
-  isEdge(cell: mxCell): boolean {
-    // SLATED FOR DELETION
-    return cell.isEdge();
-  }
-
-  /**
-   * Returns true if the given {@link mxCell} is connectable. If {@link edgesConnectable}
-   * is false, then this function returns false for all edges else it returns
-   * the return value of <mxCell.isConnectable>.
-   *
-   * @param {mxCell} cell  whose connectable state should be returned.
-   */
-  // isConnectable(cell: mxCell): boolean;
-  isConnectable(cell: mxCell) {
-    // SLATED FOR DELECTION
-    return cell.isConnectable();
-  }
-
-  /**
-   * Returns the user object of the given {@link mxCell} using <mxCell.getValue>.
-   *
-   * @param {mxCell} cell  whose user object should be returned.
-   */
-  // getValue(cell: mxCell): any;
-  getValue(cell: mxCell) {
-    // SLATED FOR DELETION
-    return cell.getValue();
-  }
-
   /**
    * Sets the user object of then given {@link mxCell} using {@link mxValueChange}
    * and adds the change to the current transaction.
@@ -1053,7 +831,6 @@ class mxGraphModel extends mxEventSource {
    * @param {mxCell} cell  whose user object should be changed.
    * @param value  Object that defines the new user object.
    */
-  // setValue(cell: mxCell, value: any): any;
   setValue(cell: mxCell,
            value: any): any {
     this.execute(new mxValueChange(this, cell, value));
@@ -1078,23 +855,11 @@ class mxGraphModel extends mxEventSource {
    * };
    * ```
    */
-  // valueForCellChanged(cell: mxCell, value: any): any;
   valueForCellChanged(cell: mxCell,
                       value: any): any {
     return cell.valueChanged(value);
   }
 
-  /**
-   * Returns the {@link mxGeometry} of the given {@link mxCell}.
-   *
-   * @param {mxCell} cell  whose geometry should be returned.
-   */
-  // getGeometry(cell: mxCell): mxGeometry;
-  getGeometry(cell: mxCell): mxGeometry | null {
-    // SLATED FOR DELETION
-    return cell.getGeometry();
-  }
-
   /**
    * Sets the {@link mxGeometry} of the given {@link mxCell}. The actual update
    * of the cell is carried out in {@link geometryForCellChanged}. The
@@ -1103,7 +868,6 @@ class mxGraphModel extends mxEventSource {
    * @param {mxCell} cell  whose geometry should be changed.
    * @param {mxGeometry} geometry  that defines the new geometry.
    */
-  // setGeometry(cell: mxCell, geometry: mxGeometry): mxGeometry;
   setGeometry(cell: mxCell,
               geometry: mxGeometry): mxGeometry {
 
@@ -1117,7 +881,6 @@ class mxGraphModel extends mxEventSource {
    * Inner callback to update the {@link mxGeometry} of the given {@link mxCell} using
    * <mxCell.setGeometry> and return the previous {@link mxGeometry}.
    */
-  // geometryForCellChanged(cell: mxCell, geometry: mxGeometry): mxGeometry;
   geometryForCellChanged(cell: mxCell,
                          geometry: mxGeometry): mxGeometry | null {
 
@@ -1126,17 +889,6 @@ class mxGraphModel extends mxEventSource {
     return previous;
   }
 
-  /**
-   * Returns the style of the given {@link mxCell}.
-   *
-   * @param {mxCell} cell  whose style should be returned.
-   */
-  // getStyle(cell: mxCell): string | null;
-  getStyle(cell: mxCell | null): any {
-    // SLATED FOR DELETION
-    return cell != null ? cell.getStyle() : null;
-  }
-
   /**
    * Sets the style of the given {@link mxCell} using {@link mxStyleChange} and
    * adds the change to the current transaction.
@@ -1165,24 +917,13 @@ class mxGraphModel extends mxEventSource {
    */
   // styleForCellChanged(cell: mxCell, style: string): string;
   styleForCellChanged(cell: mxCell,
-                      style: any): mxCell | null {
+                      style: string): string | null {
 
     const previous = cell.getStyle();
     cell.setStyle(style);
     return previous;
   }
 
-  /**
-   * Returns true if the given {@link mxCell} is collapsed.
-   *
-   * @param {mxCell} cell  whose collapsed state should be returned.
-   */
-  // isCollapsed(cell: mxCell): boolean;
-  isCollapsed(cell: mxCell): boolean {
-    // SLATED FOR DELETION
-    return cell.isCollapsed();
-  }
-
   /**
    * Sets the collapsed state of the given {@link mxCell} using {@link mxCollapseChange}
    * and adds the change to the current transaction.
@@ -1190,7 +931,6 @@ class mxGraphModel extends mxEventSource {
    * @param {mxCell} cell  whose collapsed state should be changed.
    * @param collapsed  Boolean that specifies the new collpased state.
    */
-  // setCollapsed(cell: mxCell, collapsed: boolean): boolean;
   setCollapsed(cell: mxCell,
                collapsed: boolean): boolean {
 
@@ -1208,7 +948,6 @@ class mxGraphModel extends mxEventSource {
    * @param {mxCell} cell  that specifies the cell to be updated.
    * @param collapsed  Boolean that specifies the new collpased state.
    */
-  // collapsedStateForCellChanged(cell: mxCell, collapsed: boolean): boolean;
   collapsedStateForCellChanged(cell: mxCell,
                                collapsed: boolean): boolean {
 
@@ -1217,17 +956,6 @@ class mxGraphModel extends mxEventSource {
     return previous;
   }
 
-  /**
-   * Returns true if the given {@link mxCell} is visible.
-   *
-   * @param {mxCell} cell  whose visible state should be returned.
-   */
-  // isVisible(cell: mxCell): boolean;
-  isVisible(cell: mxCell): boolean {
-    // SLATED FOR DELETION
-    return cell.isVisible();
-  }
-
   /**
    * Sets the visible state of the given {@link mxCell} using {@link mxVisibleChange} and
    * adds the change to the current transaction.
@@ -1496,11 +1224,6 @@ class mxGraphModel extends mxEventSource {
     }
   }
 
-  getParents(cells: mxCell[]): mxCell[] {
-    // SLATED FOR DELETION
-    return new mxCells(...cells).getParents();
-  }
-
   //
   // Cell Cloning
   //
@@ -1515,27 +1238,10 @@ class mxGraphModel extends mxEventSource {
   cloneCell(cell: mxCell | null,
             includeChildren: boolean): mxCell | null {
     if (cell != null) {
-      return this.cloneCells([cell], includeChildren)[0];
+      return new mxCellArray(cell).cloneCells(includeChildren)[0];
     }
     return null;
   }
-
-  cloneCells(cells: mxCell[],
-             includeChildren: boolean=true,
-             mapping: any={}): mxCell[] {
-    // SLATED FOR DELETION
-    return new mxCells(...cells).cloneCells(includeChildren, mapping)
-  }
-
-  /**
-   * Hook for cloning the cell. This returns cell.clone() or
-   * any possible exceptions.
-   */
-  // cellCloned(cell: mxCell): mxCell;
-  cellCloned(cell: mxCell): mxCell {
-    // SLATED FOR DELETION
-    return cell.clone();
-  }
 }
 
 //
diff --git a/packages/core/src/view/graph/mxGraphSelectionModel.ts b/packages/core/src/view/graph/mxGraphSelectionModel.ts
index d06a594a9..2e0db7abe 100644
--- a/packages/core/src/view/graph/mxGraphSelectionModel.ts
+++ b/packages/core/src/view/graph/mxGraphSelectionModel.ts
@@ -13,6 +13,7 @@ import mxSelectionChange from '../../atomic_changes/mxSelectionChange';
 import mxEvent from '../../util/event/mxEvent';
 import mxCell from '../cell/mxCell';
 import mxGraph from './mxGraph';
+import mxCellArray from "../cell/mxCellArray";
 
 /**
  * @class mxGraphSelectionModel
@@ -51,18 +52,17 @@ class mxGraphSelectionModel extends mxEventSource {
     super();
 
     this.graph = graph;
-    this.cells = [];
+    this.cells = new mxCellArray();
   }
 
   // TODO: Document me!!
-  cells: mxCell[];
+  cells: mxCellArray;
 
   /**
    * Specifies the resource key for the status message after a long operation.
    * If the resource for this key does not exist then the value is used as
    * the status message. Default is 'done'.
    */
-  // doneResource: 'done' | '';
   doneResource: string = mxClient.language !== 'none' ? 'done' : '';
 
   /**
@@ -70,27 +70,23 @@ 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: 'updatingSelection' | '';
   updatingSelectionResource: string =
     mxClient.language !== 'none' ? 'updatingSelection' : '';
 
   /**
    * Reference to the enclosing {@link mxGraph}.
    */
-  // graph: mxGraph;
   graph: mxGraph | null = null;
 
   /**
    * Specifies if only one selected item at a time is allowed.
    * Default is false.
    */
-  // singleSelection: boolean;
   singleSelection: boolean = false;
 
   /**
    * Returns {@link singleSelection} as a boolean.
    */
-  // isSingleSelection(): boolean;
   isSingleSelection(): boolean {
     return this.singleSelection;
   }
@@ -101,7 +97,6 @@ class mxGraphSelectionModel extends mxEventSource {
    * @param {boolean} singleSelection Boolean that specifies the new value for
    * {@link singleSelection}.
    */
-  // setSingleSelection(singleSelection: boolean): void;
   setSingleSelection(singleSelection: boolean): void {
     this.singleSelection = singleSelection;
   }
@@ -109,7 +104,6 @@ class mxGraphSelectionModel extends mxEventSource {
   /**
    * Returns true if the given {@link mxCell} is selected.
    */
-  // isSelected(cell: mxCell): boolean;
   isSelected(cell: mxCell): boolean {
     if (cell != null) {
       return this.cells.indexOf(cell) >= 0;
@@ -120,7 +114,6 @@ class mxGraphSelectionModel extends mxEventSource {
   /**
    * Returns true if no cells are currently selected.
    */
-  // isEmpty(): boolean;
   isEmpty(): boolean {
     return this.cells.length === 0;
   }
@@ -129,7 +122,6 @@ class mxGraphSelectionModel extends mxEventSource {
    * Clears the selection and fires a {@link change} event if the selection was not
    * empty.
    */
-  // clear(): void;
   clear(): void {
     this.changeSelection(null, this.cells);
   }
@@ -139,10 +131,9 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * @param cell {@link mxCell} to be selected.
    */
-  // setCell(cell: mxCell): void;
   setCell(cell: mxCell | null): void {
     if (cell != null) {
-      this.setCells([cell]);
+      this.setCells(new mxCellArray(cell));
     }
   }
 
@@ -151,14 +142,13 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} to be selected.
    */
-  // setCells(cells: Array<mxCell>): void;
-  setCells(cells: mxCell[]): void {
+  setCells(cells: mxCellArray): void {
     if (cells != null) {
       if (this.singleSelection) {
-        cells = [<mxCell>this.getFirstSelectableCell(cells)];
+        cells = new mxCellArray(<mxCell>this.getFirstSelectableCell(cells));
       }
 
-      const tmp = [];
+      const tmp = new mxCellArray();
       for (let i = 0; i < cells.length; i += 1) {
         if ((<mxGraph>this.graph).isCellSelectable(cells[i])) {
           tmp.push(cells[i]);
@@ -171,8 +161,7 @@ class mxGraphSelectionModel extends mxEventSource {
   /**
    * Returns the first selectable cell in the given array of cells.
    */
-  // getFirstSelectableCell(cells: Array<mxCell>): mxCell;
-  getFirstSelectableCell(cells: mxCell[]): mxCell | null {
+  getFirstSelectableCell(cells: mxCellArray): mxCell | null {
     if (cells != null) {
       for (let i = 0; i < cells.length; i += 1) {
         if ((<mxGraph>this.graph).isCellSelectable(cells[i])) {
@@ -188,10 +177,9 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * @param cell {@link mxCell} to add to the selection.
    */
-  // addCell(cell: mxCell): void;
   addCell(cell: mxCell | null = null): void {
     if (cell != null) {
-      this.addCells([cell]);
+      this.addCells(new mxCellArray(cell));
     }
   }
 
@@ -201,16 +189,15 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} to add to the selection.
    */
-  // addCells(cells: Array<mxCell>): void;
-  addCells(cells: mxCell[]): void {
+  addCells(cells: mxCellArray): void {
     if (cells != null) {
       let remove = null;
       if (this.singleSelection) {
         remove = this.cells;
-        cells = [<mxCell>this.getFirstSelectableCell(cells)];
+        cells = new mxCellArray(<mxCell>this.getFirstSelectableCell(cells));
       }
 
-      const tmp = [];
+      const tmp = new mxCellArray();
       for (let i = 0; i < cells.length; i += 1) {
         if (
           !this.isSelected(cells[i]) &&
@@ -230,10 +217,9 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * @param cell {@link mxCell} to remove from the selection.
    */
-  // removeCell(cell: mxCell): void;
   removeCell(cell: mxCell | null = null): void {
     if (cell != null) {
-      this.removeCells([cell]);
+      this.removeCells(new mxCellArray(cell));
     }
   }
 
@@ -241,12 +227,11 @@ class mxGraphSelectionModel extends mxEventSource {
    * Removes the specified {@link mxCell} from the selection and fires a {@link select}
    * event for the remaining cells.
    *
-   * @param cell {@link mxCell} to remove from the selection.
+   * @param cells {@link mxCell}s to remove from the selection.
    */
-  // removeCells(cells: Array<mxCell>): void;
-  removeCells(cells: mxCell[] | null = null): void {
+  removeCells(cells: mxCellArray | null = null): void {
     if (cells != null) {
-      const tmp = [];
+      const tmp = new mxCellArray();
       for (let i = 0; i < cells.length; i += 1) {
         if (this.isSelected(cells[i])) {
           tmp.push(cells[i]);
@@ -262,14 +247,13 @@ class mxGraphSelectionModel extends mxEventSource {
    * @param added Array of {@link mxCell} to add to the selection.
    * @param remove Array of {@link mxCell} to remove from the selection.
    */
-  // changeSelection(added: Array<mxCell>, removed: Array<mxCell>): void;
-  changeSelection(added: mxCell[] | null=null,
-                  removed: mxCell[] | null=null): void {
+  changeSelection(added: mxCellArray | null=null,
+                  removed: mxCellArray | null=null): void {
     if (
       (added != null && added.length > 0 && added[0] != null) ||
       (removed != null && removed.length > 0 && removed[0] != null)
     ) {
-      const change = new mxSelectionChange(this, added || [], removed || []);
+      const change = new mxSelectionChange(this, added || new mxCellArray(), removed || new mxCellArray());
       change.execute();
       const edit = new mxUndoableEdit(this, false);
       edit.add(change);
@@ -285,7 +269,6 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * @param cell {@link mxCell} to add to the selection.
    */
-  // cellAdded(cell: mxCell): void;
   cellAdded(cell: mxCell): void {
     if (cell != null && !this.isSelected(cell)) {
       this.cells.push(cell);
@@ -298,7 +281,6 @@ class mxGraphSelectionModel extends mxEventSource {
    *
    * @param cell {@link mxCell} to remove from the selection.
    */
-  // cellRemoved(cell: mxCell): void;
   cellRemoved(cell: mxCell): void {
     if (cell != null) {
       const index = this.cells.indexOf(cell);
diff --git a/packages/core/src/view/graph/mxGraphView.ts b/packages/core/src/view/graph/mxGraphView.ts
index 24b370bb8..f1f7a3bf1 100644
--- a/packages/core/src/view/graph/mxGraphView.ts
+++ b/packages/core/src/view/graph/mxGraphView.ts
@@ -45,6 +45,7 @@ import {
   isConsumed,
 } from '../../util/mxEventUtils';
 import { clone } from '../../util/mxCloneUtils';
+import mxCellArray from "../cell/mxCellArray";
 
 /**
  * @class mxGraphView
@@ -378,8 +379,8 @@ class mxGraphView extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} whose bounds should be returned.
    */
-  // getBounds(cells: mxCell[]): mxRectangle;
-  getBounds(cells: mxCell[]): mxRectangle | null {
+  // getBounds(cells: mxCellArray): mxRectangle;
+  getBounds(cells: mxCellArray): mxRectangle | null {
     let result = null;
 
     if (cells != null && cells.length > 0) {
@@ -1042,17 +1043,6 @@ class mxGraphView extends mxEventSource {
     state.updateCachedBounds();
   }
 
-  /**
-   * Returns true if the children of the given cell should not be visible in the
-   * view. This implementation uses {@link mxCell.isCellVisible} but it can be
-   * overidden to use a separate condition.
-   */
-  // isCellCollapsed(cell: mxCell): boolean;
-  isCellCollapsed(cell: mxCell): boolean {
-    // SLATED FOR DELETION
-    return cell.isCollapsed();
-  }
-
   /**
    * Validates the given cell state.
    */
@@ -2189,8 +2179,8 @@ class mxGraphView extends mxEventSource {
    * have less elements than the given array. If no argument is given, then
    * this returns {@link states}.
    */
-  // getCellStates(cells: mxCell[]): mxCellState[];
-  getCellStates(cells: mxCell[] | null): mxCellState[] | mxDictionary | null {
+  // getCellStates(cells: mxCellArray): mxCellState[];
+  getCellStates(cells: mxCellArray | null): mxCellState[] | mxDictionary | null {
     if (cells == null) {
       return this.states;
     }
diff --git a/packages/core/src/view/graph/mxLayoutManager.ts b/packages/core/src/view/graph/mxLayoutManager.ts
index 85e8dda8f..b50458a8a 100644
--- a/packages/core/src/view/graph/mxLayoutManager.ts
+++ b/packages/core/src/view/graph/mxLayoutManager.ts
@@ -20,6 +20,7 @@ import mxGraph from './mxGraph';
 import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxMouseEvent from "../../util/event/mxMouseEvent";
 import { getClientX, getClientY } from '../../util/mxEventUtils';
+import mxCellArray from "../cell/mxCellArray";
 
 /**
  * @class mxLayoutManager
@@ -81,7 +82,6 @@ class mxLayoutManager extends mxEventSource {
   /**
    * Reference to the enclosing {@link mxGraph}.
    */
-  // graph: mxGraph;
   graph: mxGraph | null = null;
 
   /**
@@ -89,40 +89,34 @@ class mxLayoutManager extends mxEventSource {
    * the cell hierarchy.
    * @default true
    */
-  // bubbling: boolean;
   bubbling: boolean = true;
 
   /**
    * Specifies if event handling is enabled.
    * @default true
    */
-  // enabled: boolean;
   enabled: boolean = true;
 
   /**
    * Holds the function that handles the endUpdate event.
    */
-  // undoHandler: Function;
-  undoHandler: Function | null = null;
+  undoHandler: Function;
 
   /**
    * Holds the function that handles the move event.
    */
-  // moveHandler: Function;
-  moveHandler: Function | null = null;
+  moveHandler: Function;
 
   /**
    * Holds the function that handles the resize event.
    */
-  // resizeHandler: Function;
-  resizeHandler: Function | null = null;
+  resizeHandler: Function;
 
   /**
    * Returns true if events are handled. This implementation
    * returns {@link enabled}.
    */
-  // isEnabled(): boolean;
-  isEnabled() {
+  isEnabled(): boolean {
     return this.enabled;
   }
 
@@ -132,8 +126,7 @@ class mxLayoutManager extends mxEventSource {
    *
    * @param enabled Boolean that specifies the new enabled state.
    */
-  // setEnabled(enabled: boolean): void;
-  setEnabled(enabled: boolean) {
+  setEnabled(enabled: boolean): void {
     this.enabled = enabled;
   }
 
@@ -142,7 +135,6 @@ class mxLayoutManager extends mxEventSource {
    * should be executed whenever a cell layout (layout of the children of
    * a cell) has been executed. This implementation returns {@link bubbling}.
    */
-  // isBubbling(): boolean;
   isBubbling(): boolean {
     return this.bubbling;
   }
@@ -150,7 +142,6 @@ class mxLayoutManager extends mxEventSource {
   /**
    * Sets {@link bubbling}.
    */
-  // setBubbling(value: boolean): void;
   setBubbling(value: boolean): void {
     this.bubbling = value;
   }
@@ -158,7 +149,6 @@ class mxLayoutManager extends mxEventSource {
   /**
    * Returns the graph that this layout operates on.
    */
-  // getGraph(): mxGraph;
   getGraph(): mxGraph | null {
     return this.graph;
   }
@@ -218,7 +208,6 @@ class mxLayoutManager extends mxEventSource {
    *
    * TODO: what is undoableEdit type?
    */
-  // beforeUndo(undoableEdit: any): void;
   beforeUndo(undoableEdit: any): void {
     this.executeLayoutForCells(this.getCellsForChanges(undoableEdit.changes));
   }
@@ -230,7 +219,7 @@ class mxLayoutManager extends mxEventSource {
    * @param evt Mouse event that represents the mousedown.
    */
   // cellsMoved(cells: Array<mxCell>, evt: MouseEvent): void;
-  cellsMoved(cells: mxCell[],
+  cellsMoved(cells: mxCellArray,
              evt: mxMouseEvent): void {
 
     if (cells != null && evt != null) {
@@ -262,9 +251,9 @@ class mxLayoutManager extends mxEventSource {
    */
   // cellsResized(cells: Array<mxCell>, bounds: Array<mxRectangle>, prev: Array<any>): void;
   cellsResized(
-    cells: mxCell[] | null = null,
+    cells: mxCellArray | null = null,
     bounds: mxRectangle[] | null = null,
-    prev: mxCell[] | null = null
+    prev: mxCellArray | null = null
   ): void {
     if (cells != null && bounds != null) {
       const model = (<mxGraph>this.getGraph()).getModel();
@@ -284,12 +273,11 @@ class mxLayoutManager extends mxEventSource {
   /**
    * Returns the cells for which a layout should be executed.
    */
-  // getCellsForChanges(changes: Array<any>): Array<mxCell>;
-  getCellsForChanges(changes: any[]): mxCell[] {
-    let result: mxCell[] = [];
+  getCellsForChanges(changes: any[]): mxCellArray {
+    let result: mxCellArray = new mxCellArray();
     for (const change of changes) {
       if (change instanceof mxRootChange) {
-        return [];
+        return new mxCellArray();
       }
       result = result.concat(this.getCellsForChange(change));
     }
@@ -301,8 +289,7 @@ class mxLayoutManager extends mxEventSource {
    * changes.
    * @param change  mxChildChange|mxTerminalChange|mxVisibleChange|...
    */
-  // getCellsForChange(change: any): Array<mxCell>;
-  getCellsForChange(change: any): mxCell[] {
+  getCellsForChange(change: any): mxCellArray {
     if (change instanceof mxChildChange) {
       return this.addCellsWithLayout(
         change.child,
@@ -321,14 +308,14 @@ class mxLayoutManager extends mxEventSource {
       return this.addCellsWithLayout(change.cell);
     }
 
-    return [];
+    return new mxCellArray();
   }
 
   /**
    * Adds all ancestors of the given cell that have a layout.
    */
-  // addCellsWithLayout(cell: mxCell, result: Array<mxCell>): Array<mxCell>;
-  addCellsWithLayout(cell: mxCell, result: mxCell[] = []): mxCell[] {
+  addCellsWithLayout(cell: mxCell,
+                     result: mxCellArray = new mxCellArray()): mxCellArray {
     return this.addDescendantsWithLayout(
       cell,
       this.addAncestorsWithLayout(cell, result)
@@ -338,8 +325,7 @@ class mxLayoutManager extends mxEventSource {
   /**
    * Adds all ancestors of the given cell that have a layout.
    */
-  // addAncestorsWithLayout(cell: mxCell, result: Array<mxCell>): Array<mxCell>;
-  addAncestorsWithLayout(cell: mxCell, result: mxCell[] = []): mxCell[] {
+  addAncestorsWithLayout(cell: mxCell, result: mxCellArray = new mxCellArray()): mxCellArray {
     if (cell != null) {
       const layout = this.hasLayout(cell);
 
@@ -358,8 +344,8 @@ class mxLayoutManager extends mxEventSource {
   /**
    * Adds all descendants of the given cell that have a layout.
    */
-  // addDescendantsWithLayout(cell: mxCell, result: Array<mxCell>): Array<mxCell>;
-  addDescendantsWithLayout(cell: mxCell, result: mxCell[] = []): mxCell[] {
+  addDescendantsWithLayout(cell: mxCell,
+                           result: mxCellArray = new mxCellArray()): mxCellArray {
     if (cell != null && this.hasLayout(cell)) {
       const model = (<mxGraph>this.getGraph()).getModel();
 
@@ -378,8 +364,7 @@ class mxLayoutManager extends mxEventSource {
   /**
    * Executes the given layout on the given parent.
    */
-  // executeLayoutForCells(cells: Array<mxCell>): void;
-  executeLayoutForCells(cells: mxCell[]): void {
+  executeLayoutForCells(cells: mxCellArray): void {
     const sorted = mxUtils.sortCells(cells, false);
     this.layoutCells(sorted, true);
     this.layoutCells(sorted.reverse(), false);
@@ -388,8 +373,9 @@ class mxLayoutManager extends mxEventSource {
   /**
    * Executes all layouts which have been scheduled during the changes.
    */
-  // layoutCells(cells: Array<mxCell>, bubble: string): void;
-  layoutCells(cells: mxCell[], bubble: boolean = false): void {
+  layoutCells(cells: mxCellArray,
+              bubble: boolean = false): void {
+
     if (cells.length > 0) {
       // Invokes the layouts while removing duplicates
       const model = (<mxGraph>this.getGraph()).getModel();
@@ -415,7 +401,6 @@ class mxLayoutManager extends mxEventSource {
   /**
    * Executes the given layout on the given parent.
    */
-  // executeLayout(cell: mxCell, bubble: string): void;
   executeLayout(cell: mxCell,
                 bubble: boolean=false): void {
     const layout = this.getLayout(
@@ -430,7 +415,6 @@ class mxLayoutManager extends mxEventSource {
   /**
    * Removes all handlers from the {@link graph} and deletes the reference to it.
    */
-  // destroy(): void;
   destroy(): void {
     this.setGraph(null);
   }
diff --git a/packages/core/src/view/graph/mxOutline.ts b/packages/core/src/view/graph/mxOutline.ts
index 9f7912034..00e40b1d1 100644
--- a/packages/core/src/view/graph/mxOutline.ts
+++ b/packages/core/src/view/graph/mxOutline.ts
@@ -22,6 +22,7 @@ import mxUtils from '../../util/mxUtils';
 import mxImage from '../../util/image/mxImage';
 import mxEventObject from '../../util/event/mxEventObject';
 import { getSource, isMouseEvent } from '../../util/mxEventUtils';
+import mxEventSource from "../../util/event/mxEventSource";
 
 /**
  * @class mxOutline
@@ -81,8 +82,7 @@ class mxOutline {
   /**
    * Initializes the outline inside the given container.
    */
-  // init(container: HTMLElement): void;
-  init(container: HTMLElement) {
+  init(container: HTMLElement): void {
     this.outline = this.createGraph(container);
 
     // Do not repaint when suspended
@@ -224,55 +224,47 @@ class mxOutline {
   /**
    * Reference to the source {@link mxGraph}.
    */
-  // source: mxGraph;
   source: mxGraph;
 
   /**
    * Reference to the {@link mxGraph} that renders the outline.
    */
-  // outline: mxGraph;
   outline: mxGraph | null = null;
 
   /**
    * Renderhint to be used for the outline graph.
    * @default faster
    */
-  // graphRenderHint: string;
   graphRenderHint: string = 'exact';
 
   /**
    * Specifies if events are handled.
    * @default true
    */
-  // enabled: boolean;
   enabled: boolean = true;
 
   /**
    * Specifies a viewport rectangle should be shown.
    * @default true
    */
-  // showViewport: boolean;
   showViewport: boolean = true;
 
   /**
    * Border to be added at the bottom and right.
    * @default 10
    */
-  // border: number;
   border: number = 10;
 
   /**
    * Specifies the size of the sizer handler.
    * @default 8
    */
-  // sizerSize: number;
   sizerSize: number = 8;
 
   /**
    * Specifies if labels should be visible in the outline.
    * @default false
    */
-  // labelsVisible: boolean;
   labelsVisible: boolean = false;
 
   /**
@@ -280,21 +272,18 @@ class mxOutline {
    * graph.
    * @default false
    */
-  // updateOnPan: boolean;
   updateOnPan: boolean = false;
 
   /**
    * Optional {@link mxImage} to be used for the sizer.
    * @default null
    */
-  // sizerImage: mxImage;
   sizerImage: mxImage | null = null;
 
   /**
    * Minimum scale to be used.
    * @default 0.0001
    */
-  // minScale: number;
   minScale: number = 0.0001;
 
   /**
@@ -320,7 +309,6 @@ class mxOutline {
   /**
    * Creates the {@link mxGraph} used in the outline.
    */
-  // createGraph(container: HTMLElement): mxGraph;
   createGraph(container: HTMLElement): mxGraph {
     const graph = new mxGraph(
       container,
@@ -337,7 +325,6 @@ class mxOutline {
    * Returns true if events are handled. This implementation
    * returns {@link enabled}.
    */
-  // isEnabled(): boolean;
   isEnabled(): boolean {
     return this.enabled;
   }
@@ -348,7 +335,6 @@ class mxOutline {
    *
    * @param value Boolean that specifies the new enabled state.
    */
-  // setEnabled(value: boolean): void;
   setEnabled(value: boolean): void {
     this.enabled = value;
   }
@@ -359,7 +345,6 @@ class mxOutline {
    *
    * @param value Boolean that specifies the new enabled state.
    */
-  // setZoomEnabled(value: boolean): void;
   setZoomEnabled(value: boolean): void {
     // @ts-ignore
     this.sizer.node.style.visibility = value ? 'visible' : 'hidden';
@@ -368,7 +353,6 @@ class mxOutline {
   /**
    * Invokes {@link update} and revalidate the outline. This method is deprecated.
    */
-  // refresh(): void;
   refresh(): void {
     this.update(true);
   }
@@ -400,8 +384,7 @@ class mxOutline {
   /**
    * Returns the size of the source container.
    */
-  // getSourceContainerSize(): mxRectangle;
-  getSourceContainerSize() {
+  getSourceContainerSize(): mxRectangle {
     return new mxRectangle(
       0,
       0,
@@ -413,8 +396,7 @@ class mxOutline {
   /**
    * Returns the offset for drawing the outline graph.
    */
-  // getOutlineOffset(scale?: number): mxPoint;
-  getOutlineOffset(scale: number): mxPoint | null {
+  getOutlineOffset(scale?: number): mxPoint | null {
     // TODO: Should number -> mxPoint?
     return null;
   }
@@ -422,16 +404,14 @@ class mxOutline {
   /**
    * Returns the offset for drawing the outline graph.
    */
-  // getSourceGraphBounds(): mxRectangle;
-  getSourceGraphBounds() {
+  getSourceGraphBounds(): mxRectangle {
     return this.source.getGraphBounds();
   }
 
   /**
    * Updates the outline.
    */
-  // update(revalidate: boolean): void;
-  update(revalidate: boolean = false) {
+  update(revalidate: boolean = false): void {
     if (
       this.source != null &&
       this.source.container != null &&
@@ -583,8 +563,7 @@ class mxOutline {
   /**
    * Handles the event by starting a translation or zoom.
    */
-  // mouseDown(sender: mxEventSource, me: mxMouseEvent): void;
-  mouseDown(sender: any, me: mxMouseEvent) {
+  mouseDown(sender: mxEventSource, me: mxMouseEvent): void {
     if (this.enabled && this.showViewport) {
       const tol = !isMouseEvent(me.getEvent()) ? this.source.tolerance : 0;
       const hit =
@@ -624,8 +603,7 @@ class mxOutline {
    * Handles the event by previewing the viewrect in {@link graph} and updating the
    * rectangle that represents the viewrect in the outline.
    */
-  // mouseMove(sender: mxEventSource, me: mxMouseEvent): void;
-  mouseMove(sender: any, me: mxMouseEvent) {
+  mouseMove(sender: mxEventSource, me: mxMouseEvent): void {
     if (this.active) {
       const myBounds = <mxRectangle>this.bounds;
       const sizer = <mxRectangleShape>this.sizer;
@@ -713,8 +691,7 @@ class mxOutline {
    * };
    * ```
    */
-  // getTranslateForEvent(me: mxMouseEvent): mxPoint;
-  getTranslateForEvent(me: mxMouseEvent) {
+  getTranslateForEvent(me: mxMouseEvent): mxPoint {
     return new mxPoint(
       me.getX() - <number>this.startX,
       me.getY() - <number>this.startY
@@ -724,8 +701,7 @@ class mxOutline {
   /**
    * Handles the event by applying the translation or zoom to {@link graph}.
    */
-  // mouseUp(sender: mxEventSource, me: mxMouseEvent): void;
-  mouseUp(sender: any, me: mxMouseEvent) {
+  mouseUp(sender: mxEventSource, me: mxMouseEvent): void {
     if (this.active) {
       const delta = this.getTranslateForEvent(me);
       let dx = delta.x;
@@ -771,8 +747,7 @@ class mxOutline {
   /**
    * Destroy this outline and removes all listeners from {@link source}.
    */
-  // destroy(): void;
-  destroy() {
+  destroy(): void {
     if (this.source != null) {
       this.source.removeListener(this.panHandler);
       this.source.removeListener(this.refreshHandler);
diff --git a/packages/core/src/view/graph/mxPrintPreview.js b/packages/core/src/view/graph/mxPrintPreview.ts
similarity index 100%
rename from packages/core/src/view/graph/mxPrintPreview.js
rename to packages/core/src/view/graph/mxPrintPreview.ts
diff --git a/packages/core/src/view/graph/mxSwimlaneManager.ts b/packages/core/src/view/graph/mxSwimlaneManager.ts
index e2bde2b07..ca90ef9b8 100644
--- a/packages/core/src/view/graph/mxSwimlaneManager.ts
+++ b/packages/core/src/view/graph/mxSwimlaneManager.ts
@@ -13,6 +13,7 @@ import mxGraph from './mxGraph';
 import mxEventObject from '../../util/event/mxEventObject';
 import mxCell from '../cell/mxCell';
 import mxGeometry from '../../util/datatypes/mxGeometry';
+import mxCellArray from "../cell/mxCellArray";
 
 /**
  * @class mxSwimlaneManager
@@ -54,21 +55,18 @@ class mxSwimlaneManager extends mxEventSource {
   /**
    * Reference to the enclosing {@link mxGraph}.
    */
-  // graph: mxGraph;
   graph: mxGraph | null = null;
 
   /**
    * Specifies if event handling is enabled.
    * @default true
    */
-  // enabled: boolean;
   enabled: boolean = true;
 
   /**
    * Specifies the orientation of the swimlanes.
    * @default true
    */
-  // horizontal: boolean;
   horizontal: boolean = true;
 
   /**
@@ -76,33 +74,28 @@ class mxSwimlaneManager extends mxEventSource {
    * existing siblings.
    * @default true
    */
-  // addEnabled: boolean;
   addEnabled: boolean = true;
 
   /**
    * Specifies if resizing of swimlanes should be handled.
    * @default true
    */
-  // resizeEnabled: boolean;
   resizeEnabled: boolean = true;
 
   /**
    * Holds the function that handles the move event.
    */
-  // addHandler: Function;
   addHandler: Function | null = null;
 
   /**
    * Holds the function that handles the move event.
    */
-  // resizeHandler: Function;
   resizeHandler: Function | null = null;
 
   /**
    * Returns true if events are handled. This implementation
    * returns {@link enabled}.
    */
-  // isEnabled(): boolean;
   isEnabled(): boolean {
     return this.enabled;
   }
@@ -113,7 +106,6 @@ class mxSwimlaneManager extends mxEventSource {
    *
    * @param enabled Boolean that specifies the new enabled state.
    */
-  // setEnabled(value: boolean): void;
   setEnabled(value: boolean): void {
     this.enabled = value;
   }
@@ -121,7 +113,6 @@ class mxSwimlaneManager extends mxEventSource {
   /**
    * Returns {@link horizontal}.
    */
-  // isHorizontal(): boolean;
   isHorizontal(): boolean {
     return this.horizontal;
   }
@@ -129,7 +120,6 @@ class mxSwimlaneManager extends mxEventSource {
   /**
    * Sets {@link horizontal}.
    */
-  // setHorizontal(value: boolean): void;
   setHorizontal(value: boolean): void {
     this.horizontal = value;
   }
@@ -137,7 +127,6 @@ class mxSwimlaneManager extends mxEventSource {
   /**
    * Returns {@link addEnabled}.
    */
-  // isAddEnabled(): boolean;
   isAddEnabled(): boolean {
     return this.addEnabled;
   }
@@ -145,7 +134,6 @@ class mxSwimlaneManager extends mxEventSource {
   /**
    * Sets {@link addEnabled}.
    */
-  // setAddEnabled(value: boolean): void;
   setAddEnabled(value: boolean): void {
     this.addEnabled = value;
   }
@@ -153,7 +141,6 @@ class mxSwimlaneManager extends mxEventSource {
   /**
    * Returns {@link resizeEnabled}.
    */
-  // isResizeEnabled(): boolean;
   isResizeEnabled(): boolean {
     return this.resizeEnabled;
   }
@@ -161,7 +148,6 @@ class mxSwimlaneManager extends mxEventSource {
   /**
    * Sets {@link resizeEnabled}.
    */
-  // setResizeEnabled(value: boolean): void;
   setResizeEnabled(value: boolean): void {
     this.resizeEnabled = value;
   }
@@ -169,7 +155,6 @@ class mxSwimlaneManager extends mxEventSource {
   /**
    * Returns the graph that this manager operates on.
    */
-  // getGraph(): mxGraph;
   getGraph(): mxGraph | null {
     return this.graph;
   }
@@ -177,7 +162,6 @@ class mxSwimlaneManager extends mxEventSource {
   /**
    * Sets the graph that the manager operates on.
    */
-  // setGraph(graph: mxGraph): void;
   setGraph(graph: mxGraph | null): void {
     if (this.graph != null) {
       this.graph.removeListener(this.addHandler);
@@ -195,7 +179,6 @@ class mxSwimlaneManager extends mxEventSource {
   /**
    * Returns true if the given swimlane should be ignored.
    */
-  // isSwimlaneIgnored(swimlane: mxCell): boolean;
   isSwimlaneIgnored(swimlane: mxCell): boolean {
     return !(<mxGraph>this.getGraph()).isSwimlane(swimlane);
   }
@@ -204,7 +187,6 @@ class mxSwimlaneManager extends mxEventSource {
    * Returns true if the given cell is horizontal. If the given cell is not a
    * swimlane, then the global orientation is returned.
    */
-  // isCellHorizontal(cell: mxCell): boolean;
   isCellHorizontal(cell: mxCell): boolean {
     if ((<mxGraph>this.graph).isSwimlane(cell)) {
       const style = (<mxGraph>this.graph).getCellStyle(cell);
@@ -218,8 +200,7 @@ class mxSwimlaneManager extends mxEventSource {
    *
    * @param cell Array of {@link mxCell} that have been added.
    */
-  // cellsAdded(cells: Array<mxCell>): void;
-  cellsAdded(cells: mxCell[]): void {
+  cellsAdded(cells: mxCellArray): void {
     if (cells != null) {
       const model = (<mxGraph>this.graph).getModel();
 
@@ -274,8 +255,7 @@ class mxSwimlaneManager extends mxEventSource {
    *
    * @param cells Array of {@link mxCell} whose size was changed.
    */
-  // cellsResized(cells: Array<mxCell>): void;
-  cellsResized(cells: mxCell[] | null): void {
+  cellsResized(cells: mxCellArray | null): void {
     if (cells != null) {
       const model = (<mxGraph>this.getGraph()).getModel();
 
@@ -327,7 +307,6 @@ class mxSwimlaneManager extends mxEventSource {
    *
    * @param swimlane {@link mxCell} whose size has changed.
    */
-  // resizeSwimlane(swimlane: mxCell, w: number, h: number, parentHorizontal: boolean): void;
   resizeSwimlane(
     swimlane: mxCell,
     w: number,
@@ -381,7 +360,6 @@ class mxSwimlaneManager extends mxEventSource {
   /**
    * Removes all handlers from the {@link graph} and deletes the reference to it.
    */
-  // destroy(): void;
   destroy(): void {
     this.setGraph(null);
   }