From 1d29e57258a4d2a2e8df2a7b0cce169efad05b1d Mon Sep 17 00:00:00 2001
From: mcyph <20507948+mcyph@users.noreply.github.com>
Date: Sat, 3 Apr 2021 15:32:02 +1100
Subject: [PATCH] reorganize directory structure and converting to typescript

---
 src/.eslintrc                                 |  4 +-
 src/mxgraph/util/datatypes/mxCellState.ts     | 28 +++++-----
 src/mxgraph/view/cell/mxCell.ts               |  6 +--
 src/mxgraph/view/cell/mxCellPath.ts           |  4 +-
 src/mxgraph/view/cell/mxCellRenderer.ts       |  7 +--
 .../view/cell/mxTemporaryCellStates.ts        | 29 ++++++-----
 src/mxgraph/view/graph/mxLayoutManager.ts     | 51 ++++++++++---------
 src/pages/basic/Template.js                   |  2 +-
 src/pages/connections/Anchors.js              |  2 +-
 src/pages/connections/FixedPoints.js          |  2 +-
 src/pages/connections/HelloPort.js            |  4 +-
 src/pages/connections/Orthogonal.js           |  2 +-
 src/pages/dnd_copypaste/Clipboard.js          |  2 +-
 src/pages/events/Events.js                    |  2 +-
 src/pages/icons_images/Images.js              |  2 +-
 src/pages/icons_images/Indicators.js          |  2 +-
 src/pages/layout/Folding.js                   |  2 +-
 src/pages/layout/HierarchicalLayout.js        |  2 +-
 src/pages/layout/OrgChart.js                  |  2 +-
 src/pages/layout/RadialTreeLayout.js          |  2 +-
 src/pages/layout/SwimLanes.js                 |  4 +-
 src/pages/layout/Tree.js                      |  2 +-
 src/pages/misc/DynamicLoading.js              |  4 +-
 src/pages/misc/Guides.js                      |  2 +-
 src/pages/misc/Merge.js                       |  2 +-
 src/pages/misc/Monitor.js                     |  6 +--
 src/pages/styles/Stylesheet.js                |  4 +-
 src/pages/xml_json/FileIO.js                  |  4 +-
 src/pages/xml_json/JsonData.js                |  6 +--
 src/pages/xml_json/UserObject.js              |  2 +-
 src/tsconfig.json                             | 23 +++++++++
 31 files changed, 126 insertions(+), 90 deletions(-)
 create mode 100644 src/tsconfig.json

diff --git a/src/.eslintrc b/src/.eslintrc
index 107984be5..224b972ed 100644
--- a/src/.eslintrc
+++ b/src/.eslintrc
@@ -1,6 +1,8 @@
 {
   "extends": "@ijsto",
   "rules": {
-    "newIsCap": false
+    "newIsCap": 0,
+    "indent": ["error", 2, {"FunctionDeclaration": {"parameters": "first"},
+                            "FunctionExpression": {"parameters": "first"}}]
   }
 }
\ No newline at end of file
diff --git a/src/mxgraph/util/datatypes/mxCellState.ts b/src/mxgraph/util/datatypes/mxCellState.ts
index f755e442f..e3ea594e0 100644
--- a/src/mxgraph/util/datatypes/mxCellState.ts
+++ b/src/mxgraph/util/datatypes/mxCellState.ts
@@ -14,17 +14,17 @@ import mxText from '../../shape/mxText';
 
 class mxCellState extends mxRectangle {
   // TODO: Document me!!
-  cellBounds: mxRectangle;
+  cellBounds: mxRectangle | undefined;
 
-  paintBounds: mxRectangle;
+  paintBounds: mxRectangle | undefined;
 
-  boundingBox: mxRectangle;
+  boundingBox: mxRectangle | undefined;
 
   // Used by mxCellRenderer's createControl()
-  control: mxShape;
+  control: mxShape | undefined;
 
   // Used by mxCellRenderer's createCellOverlays()
-  overlays: any[];
+  overlays: any[] | null | undefined;
 
   /**
    * Variable: view
@@ -76,7 +76,7 @@ class mxCellState extends mxRectangle {
    * Holds an array of <mxPoints> that represent the absolute points of an
    * edge.
    */
-  absolutePoints: mxPoint[] | null = null;
+  absolutePoints: (mxPoint | null)[] | null = null;
 
   /**
    * Variable: absoluteOffset
@@ -336,7 +336,7 @@ class mxCellState extends mxRectangle {
    * Returns the unscaled, untranslated bounds.
    */
   getCellBounds(): mxRectangle {
-    return this.cellBounds;
+    return <mxRectangle>this.cellBounds;
   }
 
   /**
@@ -347,7 +347,7 @@ class mxCellState extends mxRectangle {
    * isPaintBoundsInverted returns true.
    */
   getPaintBounds(): mxRectangle {
-    return this.paintBounds;
+    return <mxRectangle>this.paintBounds;
   }
 
   /**
@@ -356,8 +356,10 @@ class mxCellState extends mxRectangle {
    * Updates the cellBounds and paintBounds.
    */
   updateCachedBounds(): void {
-    const tr = this.view.translate;
-    const s = this.view.scale;
+    const view = <mxGraphView>this.view;
+
+    const tr = view.translate;
+    const s = view.scale;
     this.cellBounds = new mxRectangle(
       this.x / s - tr.x,
       this.y / s - tr.y,
@@ -401,14 +403,14 @@ class mxCellState extends mxRectangle {
    * Returns a clone of this <mxPoint>.
    */
   clone(): mxCellState {
-    const clone = new mxCellState(this.view, this.cell, this.style);
+    const clone = new mxCellState(<mxGraphView>this.view, <mxCell>this.cell, this.style);
 
     // Clones the absolute points
     if (this.absolutePoints != null) {
       clone.absolutePoints = [];
 
       for (let i = 0; i < this.absolutePoints.length; i += 1) {
-        clone.absolutePoints[i] = this.absolutePoints[i].clone();
+        clone.absolutePoints[i] = (<mxPoint[]>this.absolutePoints)[i].clone();
       }
     }
 
@@ -443,7 +445,7 @@ class mxCellState extends mxRectangle {
    * Destroys the state and all associated resources.
    */
   destroy(): void {
-    this.view.graph.cellRenderer.destroy(this);
+    (<mxGraphView>this.view).graph.cellRenderer.destroy(this);
   }
 }
 
diff --git a/src/mxgraph/view/cell/mxCell.ts b/src/mxgraph/view/cell/mxCell.ts
index e189e876e..465337b34 100644
--- a/src/mxgraph/view/cell/mxCell.ts
+++ b/src/mxgraph/view/cell/mxCell.ts
@@ -218,7 +218,7 @@ class mxCell {
    *
    * Returns the Id of the cell as a string.
    */
-  getId(): number {
+  getId(): number | null {
     return this.id;
   }
 
@@ -279,7 +279,7 @@ class mxCell {
    *
    * Sets the <mxGeometry> to be used as the <geometry>.
    */
-  setGeometry(geometry: mxGeometry): void {
+  setGeometry(geometry: mxGeometry | null): void {
     this.geometry = geometry;
   }
 
@@ -297,7 +297,7 @@ class mxCell {
    *
    * Sets the string to be used as the <style>.
    */
-  setStyle(style: string): void {
+  setStyle(style: string | null): void {
     this.style = style;
   }
 
diff --git a/src/mxgraph/view/cell/mxCellPath.ts b/src/mxgraph/view/cell/mxCellPath.ts
index 0af451363..22f51f613 100644
--- a/src/mxgraph/view/cell/mxCellPath.ts
+++ b/src/mxgraph/view/cell/mxCellPath.ts
@@ -92,11 +92,11 @@ class mxCellPath {
    * path - String that defines the path.
    */
   static resolve(root: mxCell, path: string): mxCell | null {
-    let parent = root;
+    let parent: mxCell | null | undefined = root;
     if (path != null) {
       const tokens = path.split(mxCellPath.PATH_SEPARATOR);
       for (let i = 0; i < tokens.length; i += 1) {
-        parent = parent.getChildAt(parseInt(tokens[i]));
+        parent = parent?.getChildAt(parseInt(tokens[i])) || null;
       }
     }
     return parent;
diff --git a/src/mxgraph/view/cell/mxCellRenderer.ts b/src/mxgraph/view/cell/mxCellRenderer.ts
index 9a4933b1a..fcfc44970 100644
--- a/src/mxgraph/view/cell/mxCellRenderer.ts
+++ b/src/mxgraph/view/cell/mxCellRenderer.ts
@@ -63,7 +63,7 @@ class mxCellRenderer {
    *
    * Defines the default shape for labels. Default is <mxText>.
    */
-  defaultTextShape: typeof mxShape = mxText;
+  defaultTextShape: typeof mxText = mxText;
 
   /**
    * Variable: legacyControlPosition
@@ -1642,7 +1642,7 @@ class mxCellRenderer {
    * Invokes redraw on the shape of the given state.
    */
   doRedrawShape(state: mxCellState) {
-    state.shape.redraw();
+    state.shape?.redraw();
   }
 
   /**
@@ -1650,7 +1650,8 @@ class mxCellRenderer {
    *
    * Returns true if the given shape must be repainted.
    */
-  isShapeInvalid(state, shape) {
+  isShapeInvalid(state: mxCellState, 
+                 shape: mxShape): boolean {
     return (
       shape.bounds == null ||
       shape.scale !== state.view.scale ||
diff --git a/src/mxgraph/view/cell/mxTemporaryCellStates.ts b/src/mxgraph/view/cell/mxTemporaryCellStates.ts
index d17f2eb86..c6d39dfaa 100644
--- a/src/mxgraph/view/cell/mxTemporaryCellStates.ts
+++ b/src/mxgraph/view/cell/mxTemporaryCellStates.ts
@@ -13,6 +13,7 @@ import mxDictionary from '../../util/datatypes/mxDictionary';
 import mxGraphView from '../graph/mxGraphView';
 import mxCell from './mxCell';
 import mxCellState from '../../util/datatypes/mxCellState';
+import mxShape from "../../shape/mxShape";
 
 class mxTemporaryCellStates {
   oldValidateCellState: Function | null;
@@ -27,7 +28,7 @@ class mxTemporaryCellStates {
   /**
    * Variable: oldStates
    */
-  oldStates: mxCellState | null = null;
+  oldStates: mxDictionary | null = null;
 
   /**
    * Variable: oldBounds
@@ -59,10 +60,11 @@ class mxTemporaryCellStates {
 
     // Overrides doRedrawShape and paint shape to add links on shapes
     if (getLinkForCellState != null) {
-      view.graph.cellRenderer.doRedrawShape = state => {
-        const oldPaint = state.shape.paint;
+      view.graph.cellRenderer.doRedrawShape = (state: mxCellState) => {
+        const shape = <mxShape>state?.shape;
+        const oldPaint = shape.paint;
 
-        state.shape.paint = c => {
+        shape.paint = c => {
           const link = getLinkForCellState(state);
           if (link != null) {
             c.setLink(link);
@@ -73,15 +75,15 @@ class mxTemporaryCellStates {
           }
         };
 
-        self.oldDoRedrawShape.apply(view.graph.cellRenderer, [state]);
-        state.shape.paint = oldPaint;
+        (<Function>self.oldDoRedrawShape).apply(view.graph.cellRenderer, [state]);
+        shape.paint = oldPaint;
       };
     }
 
     // Overrides validateCellState to ignore invisible cells
     view.validateCellState = (cell, recurse) => {
       if (cell == null || isCellVisibleFn == null || isCellVisibleFn(cell)) {
-        return self.oldValidateCellState.apply(view, [cell, recurse]);
+        return (<Function>self.oldDoRedrawShape).apply(view, [cell, recurse]);
       }
       return null;
     };
@@ -116,11 +118,14 @@ class mxTemporaryCellStates {
    * Returns the top, left corner as a new <mxPoint>.
    */
   destroy(): void {
-    this.view.setScale(this.oldScale);
-    this.view.setStates(this.oldStates);
-    this.view.setGraphBounds(this.oldBounds);
-    this.view.validateCellState = this.oldValidateCellState;
-    this.view.graph.cellRenderer.doRedrawShape = this.oldDoRedrawShape;
+    const view = <mxGraphView>this.view;
+    view.setScale(this.oldScale);
+    view.setStates(this.oldStates);
+    view.setGraphBounds(<mxRectangle>this.oldBounds);
+    // @ts-ignore
+    view.validateCellState = <Function>this.oldValidateCellState;
+    // @ts-ignore
+    view.graph.cellRenderer.doRedrawShape = <Function>this.oldDoRedrawShape;
   }
 }
 
diff --git a/src/mxgraph/view/graph/mxLayoutManager.ts b/src/mxgraph/view/graph/mxLayoutManager.ts
index 427176756..a9bebc66f 100644
--- a/src/mxgraph/view/graph/mxLayoutManager.ts
+++ b/src/mxgraph/view/graph/mxLayoutManager.ts
@@ -17,6 +17,7 @@ import mxEventObject from '../../util/event/mxEventObject';
 import mxCell from '../cell/mxCell';
 import mxGraph from './mxGraph';
 import mxRectangle from '../../util/datatypes/mxRectangle';
+import mxMouseEvent from "../../util/event/mxMouseEvent";
 
 class mxLayoutManager extends mxEventSource {
   /**
@@ -97,21 +98,21 @@ class mxLayoutManager extends mxEventSource {
     super();
 
     // Executes the layout before the changes are dispatched
-    this.undoHandler = (sender, evt) => {
+    this.undoHandler = (sender: any, evt: mxEventObject) => {
       if (this.isEnabled()) {
         this.beforeUndo(evt.getProperty('edit'));
       }
     };
 
     // Notifies the layout of a move operation inside a parent
-    this.moveHandler = (sender, evt) => {
+    this.moveHandler = (sender: any, evt: mxEventObject) => {
       if (this.isEnabled()) {
         this.cellsMoved(evt.getProperty('cells'), evt.getProperty('event'));
       }
     };
 
     // Notifies the layout of a move operation inside a parent
-    this.resizeHandler = (sender, evt) => {
+    this.resizeHandler = (sender: any, evt: mxEventObject) => {
       if (this.isEnabled()) {
         this.cellsResized(
           evt.getProperty('cells'),
@@ -144,7 +145,7 @@ class mxLayoutManager extends mxEventSource {
    *
    * enabled - Boolean that specifies the new enabled state.
    */
-  setEnabled(enabled) {
+  setEnabled(enabled: boolean) {
     this.enabled = enabled;
   }
 
@@ -155,7 +156,7 @@ class mxLayoutManager extends mxEventSource {
    * should be executed whenever a cell layout (layout of the children of
    * a cell) has been executed. This implementation returns <bubbling>.
    */
-  isBubbling() {
+  isBubbling(): boolean {
     return this.bubbling;
   }
 
@@ -164,7 +165,7 @@ class mxLayoutManager extends mxEventSource {
    *
    * Sets <bubbling>.
    */
-  setBubbling(value) {
+  setBubbling(value: boolean): void {
     this.bubbling = value;
   }
 
@@ -173,7 +174,7 @@ class mxLayoutManager extends mxEventSource {
    *
    * Returns the graph that this layout operates on.
    */
-  getGraph() {
+  getGraph(): mxGraph | null {
     return this.graph;
   }
 
@@ -182,7 +183,7 @@ class mxLayoutManager extends mxEventSource {
    *
    * Sets the graph that the layouts operate on.
    */
-  setGraph(graph: mxGraph): void {
+  setGraph(graph: mxGraph | null): void {
     if (this.graph != null) {
       const model = this.graph.getModel();
       model.removeListener(this.undoHandler);
@@ -238,7 +239,7 @@ class mxLayoutManager extends mxEventSource {
    * cell - Array of <mxCells> that have been moved.
    * evt - Mouse event that represents the mousedown.
    */
-  beforeUndo(undoableEdit) {
+  beforeUndo(undoableEdit: any): void {
     this.executeLayoutForCells(this.getCellsForChanges(undoableEdit.changes));
   }
 
@@ -252,14 +253,16 @@ class mxLayoutManager extends mxEventSource {
    * cell - Array of <mxCells> that have been moved.
    * evt - Mouse event that represents the mousedown.
    */
-  cellsMoved(cells, evt) {
+  cellsMoved(cells: mxCell[],
+             evt: mxMouseEvent): void {
+
     if (cells != null && evt != null) {
       const point = mxUtils.convertPoint(
-        this.getGraph().container,
+        (<mxGraph>this.getGraph()).container,
         mxEvent.getClientX(evt),
         mxEvent.getClientY(evt)
       );
-      const model = this.getGraph().getModel();
+      const model = (<mxGraph>this.getGraph()).getModel();
 
       for (let i = 0; i < cells.length; i += 1) {
         const layout = this.getLayout(
@@ -282,24 +285,23 @@ class mxLayoutManager extends mxEventSource {
    * Parameters:
    *
    * cell - Array of <mxCells> that have been resized.
-   * bounds - <mxRectangle> taht represents the new bounds.
+   * bounds - <mxRectangle> that represents the new bounds.
    */
   cellsResized(
     cells: mxCell[] | null = null,
-    bounds: mxRectangle | null = null,
-    prev
-  ) {
+    bounds: mxRectangle[] | null = null,
+    prev: mxCell[] | null = null
+  ): void {
     if (cells != null && bounds != null) {
-      const model = this.getGraph().getModel();
+      const model = (<mxGraph>this.getGraph()).getModel();
 
       for (let i = 0; i < cells.length; i += 1) {
         const layout = this.getLayout(
           model.getParent(cells[i]),
           mxEvent.RESIZE_CELLS
         );
-
         if (layout != null) {
-          layout.resizeCell(cells[i], bounds[i], prev[i]);
+          layout.resizeCell(cells[i], bounds[i], prev?.[i]);
         }
       }
     }
@@ -311,7 +313,7 @@ class mxLayoutManager extends mxEventSource {
    * Returns the cells for which a layout should be executed.
    */
   getCellsForChanges(changes: any[]): mxCell[] {
-    let result = [];
+    let result: mxCell[] = [];
     for (const change of changes) {
       if (change instanceof mxRootChange) {
         return [];
@@ -375,7 +377,7 @@ class mxLayoutManager extends mxEventSource {
       }
 
       if (this.isBubbling()) {
-        const model = this.getGraph().getModel();
+        const model = (<mxGraph>this.getGraph()).getModel();
         this.addAncestorsWithLayout(model.getParent(cell), result);
       }
     }
@@ -389,7 +391,7 @@ class mxLayoutManager extends mxEventSource {
    */
   addDescendantsWithLayout(cell: mxCell, result: mxCell[] = []): mxCell[] {
     if (cell != null && this.hasLayout(cell)) {
-      const model = this.getGraph().getModel();
+      const model = (<mxGraph>this.getGraph()).getModel();
 
       for (let i = 0; i < model.getChildCount(cell); i += 1) {
         const child = model.getChildAt(cell, i);
@@ -425,7 +427,7 @@ class mxLayoutManager extends mxEventSource {
   layoutCells(cells: mxCell[], bubble: boolean = false): void {
     if (cells.length > 0) {
       // Invokes the layouts while removing duplicates
-      const model = this.getGraph().getModel();
+      const model = (<mxGraph>this.getGraph()).getModel();
 
       model.beginUpdate();
       try {
@@ -450,7 +452,8 @@ class mxLayoutManager extends mxEventSource {
    *
    * Executes the given layout on the given parent.
    */
-  executeLayout(cell: mxCell, bubble: boolean = false): void {
+  executeLayout(cell: mxCell,
+                bubble: boolean=false): void {
     const layout = this.getLayout(
       cell,
       bubble ? mxEvent.BEGIN_UPDATE : mxEvent.END_UPDATE
diff --git a/src/pages/basic/Template.js b/src/pages/basic/Template.js
index 3d62930a0..576cddd88 100644
--- a/src/pages/basic/Template.js
+++ b/src/pages/basic/Template.js
@@ -12,7 +12,7 @@ import React from 'react';
 import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxUtils from '../../mxgraph/util/mxUtils';
-import mxCodec from '../../mxgraph/io/mxCodec';
+import mxCodec from '../../mxgraph/serialization/mxCodec';
 
 class Template extends React.Component {
   constructor(props) {
diff --git a/src/pages/connections/Anchors.js b/src/pages/connections/Anchors.js
index d9fe7ae4e..7d43ef1f2 100644
--- a/src/pages/connections/Anchors.js
+++ b/src/pages/connections/Anchors.js
@@ -11,7 +11,7 @@ import mxShape from '../../mxgraph/shape/mxShape';
 import mxConnectionConstraint from '../../mxgraph/view/connection/mxConnectionConstraint';
 import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
 import mxPolyline from '../../mxgraph/shape/edge/mxPolyline';
-import mxCellState from '../../mxgraph/view/cell/mxCellState';
+import mxCellState from '../../mxgraph/util/datatypes/mxCellState';
 import mxGeometry from "../../mxgraph/util/datatypes/mxGeometry";
 import mxConnectionHandler from "../../mxgraph/handler/mxConnectionHandler";
 
diff --git a/src/pages/connections/FixedPoints.js b/src/pages/connections/FixedPoints.js
index b6e9b2124..91d037c4c 100644
--- a/src/pages/connections/FixedPoints.js
+++ b/src/pages/connections/FixedPoints.js
@@ -12,7 +12,7 @@ import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
 import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
 import mxConnectionConstraint from '../../mxgraph/view/connection/mxConnectionConstraint';
 import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxCellState from '../../mxgraph/view/cell/mxCellState';
+import mxCellState from '../../mxgraph/util/datatypes/mxCellState';
 
 class FixedPoints extends React.Component {
   constructor(props) {
diff --git a/src/pages/connections/HelloPort.js b/src/pages/connections/HelloPort.js
index d9b2b8654..e2a45a5ab 100644
--- a/src/pages/connections/HelloPort.js
+++ b/src/pages/connections/HelloPort.js
@@ -8,9 +8,9 @@ import mxEvent from '../../mxgraph/util/event/mxEvent';
 import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
 import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxCodec from '../../mxgraph/io/mxCodec';
+import mxCodec from '../../mxgraph/serialization/mxCodec';
 import mxUtils from '../../mxgraph/util/mxUtils';
 
 class HelloPort extends React.Component {
diff --git a/src/pages/connections/Orthogonal.js b/src/pages/connections/Orthogonal.js
index 2dd2d7bb9..b17f9bfc1 100644
--- a/src/pages/connections/Orthogonal.js
+++ b/src/pages/connections/Orthogonal.js
@@ -13,7 +13,7 @@ import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
 import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
 import mxGraphView from '../../mxgraph/view/graph/mxGraphView';
 import mxPoint from '../../mxgraph/util/datatypes/mxPoint';
-import mxCellState from '../../mxgraph/view/cell/mxCellState';
+import mxCellState from '../../mxgraph/util/datatypes/mxCellState';
 
 class Orthogonal extends React.Component {
   constructor(props) {
diff --git a/src/pages/dnd_copypaste/Clipboard.js b/src/pages/dnd_copypaste/Clipboard.js
index ad19dbd7f..30e00f922 100644
--- a/src/pages/dnd_copypaste/Clipboard.js
+++ b/src/pages/dnd_copypaste/Clipboard.js
@@ -10,7 +10,7 @@ import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxClipboard from '../../mxgraph/util/storage/mxClipboard';
 import mxClient from '../../mxgraph/mxClient';
-import mxCodec from '../../mxgraph/io/mxCodec';
+import mxCodec from '../../mxgraph/serialization/mxCodec';
 import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
 
 class Clipboard extends React.Component {
diff --git a/src/pages/events/Events.js b/src/pages/events/Events.js
index 1b5faef91..5001b3bae 100644
--- a/src/pages/events/Events.js
+++ b/src/pages/events/Events.js
@@ -9,7 +9,7 @@ import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
 import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
 import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
 import mxParallelEdgeLayout from '../../mxgraph/layout/mxParallelEdgeLayout';
diff --git a/src/pages/icons_images/Images.js b/src/pages/icons_images/Images.js
index d74d9cbcd..6e254e6c9 100644
--- a/src/pages/icons_images/Images.js
+++ b/src/pages/icons_images/Images.js
@@ -11,7 +11,7 @@ import mxConstants from '../../mxgraph/util/mxConstants';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
 import mxImage from '../../mxgraph/util/image/mxImage';
-import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
+import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
 
 class Images extends React.Component {
   constructor(props) {
diff --git a/src/pages/icons_images/Indicators.js b/src/pages/icons_images/Indicators.js
index 658a77176..14b706d68 100644
--- a/src/pages/icons_images/Indicators.js
+++ b/src/pages/icons_images/Indicators.js
@@ -6,7 +6,7 @@
 import React from 'react';
 import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
 import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
 
 class Indicators extends React.Component {
diff --git a/src/pages/layout/Folding.js b/src/pages/layout/Folding.js
index 8c302bfa8..7637f64f7 100644
--- a/src/pages/layout/Folding.js
+++ b/src/pages/layout/Folding.js
@@ -6,7 +6,7 @@
 import React from 'react';
 import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
 import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
 import mxStackLayout from '../../mxgraph/layout/mxStackLayout';
 
diff --git a/src/pages/layout/HierarchicalLayout.js b/src/pages/layout/HierarchicalLayout.js
index 7278c50a9..284645039 100644
--- a/src/pages/layout/HierarchicalLayout.js
+++ b/src/pages/layout/HierarchicalLayout.js
@@ -10,7 +10,7 @@ import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxHierarchicalLayout from '../../mxgraph/layout/hierarchical/mxHierarchicalLayout';
 import mxFastOrganicLayout from '../../mxgraph/layout/mxFastOrganicLayout';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
+import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
 import mxUtils from '../../mxgraph/util/mxUtils';
 
 class HierarchicalLayout extends React.Component {
diff --git a/src/pages/layout/OrgChart.js b/src/pages/layout/OrgChart.js
index 3b1d3d93a..fd2fba01a 100644
--- a/src/pages/layout/OrgChart.js
+++ b/src/pages/layout/OrgChart.js
@@ -19,7 +19,7 @@ import mxConstants from '../../mxgraph/util/mxConstants';
 import mxWindow from '../../mxgraph/util/gui/mxWindow';
 import mxToolbar from '../../mxgraph/util/gui/mxToolbar';
 import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
-import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
 import mxCompactTreeLayout from '../../mxgraph/layout/mxCompactTreeLayout';
 import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
 import mxClient from '../../mxgraph/mxClient';
diff --git a/src/pages/layout/RadialTreeLayout.js b/src/pages/layout/RadialTreeLayout.js
index b76ca56d1..3e06b9312 100644
--- a/src/pages/layout/RadialTreeLayout.js
+++ b/src/pages/layout/RadialTreeLayout.js
@@ -6,7 +6,7 @@
 import React from 'react';
 import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
+import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
 import mxConstants from '../../mxgraph/util/mxConstants';
 import mxRadialTreeLayout from '../../mxgraph/layout/mxRadialTreeLayout';
 
diff --git a/src/pages/layout/SwimLanes.js b/src/pages/layout/SwimLanes.js
index 030274b28..e0703bac1 100644
--- a/src/pages/layout/SwimLanes.js
+++ b/src/pages/layout/SwimLanes.js
@@ -12,13 +12,13 @@ import mxStackLayout from '../../mxgraph/layout/mxStackLayout';
 import mxSwimlaneManager from '../../mxgraph/view/graph/mxSwimlaneManager';
 import mxGraphModel from '../../mxgraph/view/graph/mxGraphModel';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
+import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxEditor from '../../mxgraph/editor/mxEditor';
 import mxConnectionHandler from '../../mxgraph/handler/mxConnectionHandler';
 import mxImage from '../../mxgraph/util/image/mxImage';
 import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
-import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
 
 class SwimLanes extends React.Component {
   constructor(props) {
diff --git a/src/pages/layout/Tree.js b/src/pages/layout/Tree.js
index 9e4affca6..8a396c5bb 100644
--- a/src/pages/layout/Tree.js
+++ b/src/pages/layout/Tree.js
@@ -17,7 +17,7 @@ import mxLayoutManager from '../../mxgraph/view/graph/mxLayoutManager';
 import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxClient from '../../mxgraph/mxClient';
-import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
 
 class Tree extends React.Component {
   constructor(props) {
diff --git a/src/pages/misc/DynamicLoading.js b/src/pages/misc/DynamicLoading.js
index 595576fbc..7b59f0232 100644
--- a/src/pages/misc/DynamicLoading.js
+++ b/src/pages/misc/DynamicLoading.js
@@ -9,9 +9,9 @@ import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxText from '../../mxgraph/shape/mxText';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxCodec from '../../mxgraph/io/mxCodec';
+import mxCodec from '../../mxgraph/serialization/mxCodec';
 import mxEffects from '../../mxgraph/util/animate/mxEffects';
-import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
+import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
 
 class DynamicLoading extends React.Component {
   constructor(props) {
diff --git a/src/pages/misc/Guides.js b/src/pages/misc/Guides.js
index 211ed7fd1..0d7148b56 100644
--- a/src/pages/misc/Guides.js
+++ b/src/pages/misc/Guides.js
@@ -10,7 +10,7 @@ import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxGraphHandler from '../../mxgraph/handler/mxGraphHandler';
 import mxEdgeHandler from '../../mxgraph/handler/mxEdgeHandler';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
 import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
 
 class Guides extends React.Component {
diff --git a/src/pages/misc/Merge.js b/src/pages/misc/Merge.js
index 632349151..d883e58a4 100644
--- a/src/pages/misc/Merge.js
+++ b/src/pages/misc/Merge.js
@@ -7,7 +7,7 @@ import React from 'react';
 import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
+import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
 
 class Merge extends React.Component {
   constructor(props) {
diff --git a/src/pages/misc/Monitor.js b/src/pages/misc/Monitor.js
index 7e0c41168..df3ebadda 100644
--- a/src/pages/misc/Monitor.js
+++ b/src/pages/misc/Monitor.js
@@ -9,9 +9,9 @@ import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxConstants from '../../mxgraph/util/mxConstants';
 import mxCellOverlay from '../../mxgraph/view/cell/mxCellOverlay';
 import mxUtils from '../../mxgraph/util/mxUtils';
-import mxCodec from '../../mxgraph/io/mxCodec';
-import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
-import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
+import mxCodec from '../../mxgraph/serialization/mxCodec';
+import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
+import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
 
 class Monitor extends React.Component {
   constructor(props) {
diff --git a/src/pages/styles/Stylesheet.js b/src/pages/styles/Stylesheet.js
index aaf204da2..5f571e4de 100644
--- a/src/pages/styles/Stylesheet.js
+++ b/src/pages/styles/Stylesheet.js
@@ -6,8 +6,8 @@
 import React from 'react';
 import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxConstants from '../../mxgraph/util/mxConstants';
-import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
-import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
+import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
+import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
 
 class Stylesheet extends React.Component {
   constructor(props) {
diff --git a/src/pages/xml_json/FileIO.js b/src/pages/xml_json/FileIO.js
index ecc7e2941..d0d77090f 100644
--- a/src/pages/xml_json/FileIO.js
+++ b/src/pages/xml_json/FileIO.js
@@ -11,8 +11,8 @@ import mxConstants from '../../mxgraph/util/mxConstants';
 import mxUtils from '../../mxgraph/util/mxUtils';
 import mxFastOrganicLayout from '../../mxgraph/layout/mxFastOrganicLayout';
 import mxEventObject from '../../mxgraph/util/event/mxEventObject';
-import mxCodec from '../../mxgraph/io/mxCodec';
-import mxPerimeter from '../../mxgraph/view/style/mxPerimeter';
+import mxCodec from '../../mxgraph/serialization/mxCodec';
+import mxPerimeter from '../../mxgraph/util/datatypes/style/mxPerimeter';
 import mxClient from '../../mxgraph/mxClient';
 
 class FileIO extends React.Component {
diff --git a/src/pages/xml_json/JsonData.js b/src/pages/xml_json/JsonData.js
index dc3edb62d..5522fe922 100644
--- a/src/pages/xml_json/JsonData.js
+++ b/src/pages/xml_json/JsonData.js
@@ -7,10 +7,10 @@ import React from 'react';
 import mxEvent from '../../mxgraph/util/event/mxEvent';
 import mxGraph from '../../mxgraph/view/graph/mxGraph';
 import mxRubberband from '../../mxgraph/handler/mxRubberband';
-import mxCodecRegistry from '../../mxgraph/io/mxCodecRegistry';
-import mxObjectCodec from '../../mxgraph/io/mxObjectCodec';
+import mxCodecRegistry from '../../mxgraph/serialization/mxCodecRegistry';
+import mxObjectCodec from '../../mxgraph/serialization/mxObjectCodec';
 import mxUtils from '../../mxgraph/util/mxUtils';
-import mxCodec from '../../mxgraph/io/mxCodec';
+import mxCodec from '../../mxgraph/serialization/mxCodec';
 
 class JsonData extends React.Component {
   // Adds an option to view the XML of the graph
diff --git a/src/pages/xml_json/UserObject.js b/src/pages/xml_json/UserObject.js
index 9a4841d46..05a82f258 100644
--- a/src/pages/xml_json/UserObject.js
+++ b/src/pages/xml_json/UserObject.js
@@ -13,7 +13,7 @@ import mxForm from '../../mxgraph/util/gui/mxForm';
 import mxCellAttributeChange from '../../mxgraph/atomic_changes/mxCellAttributeChange';
 import mxKeyHandler from '../../mxgraph/handler/mxKeyHandler';
 import mxRectangle from '../../mxgraph/util/datatypes/mxRectangle';
-import mxEdgeStyle from '../../mxgraph/view/style/mxEdgeStyle';
+import mxEdgeStyle from '../../mxgraph/util/datatypes/style/mxEdgeStyle';
 
 class UserObject extends React.Component {
   constructor(props) {
diff --git a/src/tsconfig.json b/src/tsconfig.json
new file mode 100644
index 000000000..a58dbc647
--- /dev/null
+++ b/src/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "react-native",
+    "lib": ["es2020", "dom"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "strict": true,
+    "target": "es2020",
+    "resolveJsonModule": true, // Required for JSON files
+    "skipLibCheck": true
+  },
+  "exclude": [
+    "node_modules",
+    "e2e",
+    "**/*.json", // Don't try and check JSON files
+    "**/*.spec.ts",
+  ]
+}
\ No newline at end of file