started reorganizing directory structure and converting to typescript

src/mxgraph/handler/mxConnectionHandler.js

@@ -10,10 +10,10 @@ import mxEvent from '../util/event/mxEvent';
 import mxConstants from '../util/mxConstants';
 import mxUtils from '../util/mxUtils';
 import mxMouseEvent from '../util/event/mxMouseEvent';
-import mxImageShape from '../shape/mxImageShape';
+import mxImageShape from '../shape/node/mxImageShape';
 import mxCellMarker from './mxCellMarker';
 import mxConstraintHandler from './mxConstraintHandler';
-import mxPolyline from '../shape/mxPolyline';
+import mxPolyline from '../shape/edge/mxPolyline';
 import mxEventSource from '../util/event/mxEventSource';
 import mxRectangle from '../util/datatypes/mxRectangle';
 import mxLog from '../util/gui/mxLog';

src/mxgraph/handler/mxConstraintHandler.js

@@ -9,8 +9,8 @@ import mxConstants from '../util/mxConstants';
 import mxEvent from '../util/event/mxEvent';
 import mxUtils from '../util/mxUtils';
 import mxRectangle from '../util/datatypes/mxRectangle';
-import mxImageShape from '../shape/mxImageShape';
+import mxImageShape from '../shape/node/mxImageShape';
-import mxRectangleShape from '../shape/mxRectangleShape';
+import mxRectangleShape from '../shape/node/mxRectangleShape';
 
 class mxConstraintHandler {
   /**

src/mxgraph/handler/mxEdgeHandler.js

@@ -7,8 +7,8 @@ import mxCellMarker from './mxCellMarker';
 import mxPoint from '../util/datatypes/mxPoint';
 import mxConstants from '../util/mxConstants';
 import mxUtils from '../util/mxUtils';
-import mxImageShape from '../shape/mxImageShape';
+import mxImageShape from '../shape/node/mxImageShape';
-import mxRectangleShape from '../shape/mxRectangleShape';
+import mxRectangleShape from '../shape/node/mxRectangleShape';
 import mxConnectionConstraint from '../view/connection/mxConnectionConstraint';
 import mxEvent from '../util/event/mxEvent';
 import mxConstraintHandler from './mxConstraintHandler';

src/mxgraph/handler/mxGraphHandler.js

@@ -7,7 +7,7 @@
 import mxClient from '../mxClient';
 import mxEvent from '../util/event/mxEvent';
 import mxUtils from '../util/mxUtils';
-import mxRectangleShape from '../shape/mxRectangleShape';
+import mxRectangleShape from '../shape/node/mxRectangleShape';
 import mxGuide from '../util/mxGuide';
 import mxPoint from '../util/datatypes/mxPoint';
 import mxConstants from '../util/mxConstants';

src/mxgraph/handler/mxHandle.js

@@ -6,9 +6,9 @@
 
 import mxUtils from '../util/mxUtils';
 import mxPoint from '../util/datatypes/mxPoint';
-import mxImageShape from '../shape/mxImageShape';
+import mxImageShape from '../shape/node/mxImageShape';
 import mxRectangle from '../util/datatypes/mxRectangle';
-import mxRectangleShape from '../shape/mxRectangleShape';
+import mxRectangleShape from '../shape/node/mxRectangleShape';
 import mxConstants from '../util/mxConstants';
 import mxEvent from '../util/event/mxEvent';
 

src/mxgraph/handler/mxVertexHandler.js

@@ -6,9 +6,9 @@
 import mxRectangle from '../util/datatypes/mxRectangle';
 import mxConstants from '../util/mxConstants';
 import mxEvent from '../util/event/mxEvent';
-import mxRectangleShape from '../shape/mxRectangleShape';
+import mxRectangleShape from '../shape/node/mxRectangleShape';
-import mxImageShape from '../shape/mxImageShape';
+import mxImageShape from '../shape/node/mxImageShape';
-import mxEllipse from '../shape/mxEllipse';
+import mxEllipse from '../shape/node/mxEllipse';
 import mxPoint from '../util/datatypes/mxPoint';
 import mxUtils from '../util/mxUtils';
 import mxClient from '../mxClient';

src/mxgraph/io/mxObjectCodec.js

@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxObjectIdentity from "../util/mxObjectIdentity";
+import mxObjectIdentity from "../util/datatypes/mxObjectIdentity";
 import mxLog from "../util/gui/mxLog";
 import mxGeometry from "../model/mxGeometry";
 import mxPoint from "../util/datatypes/mxPoint";

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

@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 import mxGraphAbstractHierarchyCell from './mxGraphAbstractHierarchyCell';
-import mxObjectIdentity from '../../../util/mxObjectIdentity';
+import mxObjectIdentity from '../../../util/datatypes/mxObjectIdentity';
 
 class mxGraphHierarchyEdge extends mxGraphAbstractHierarchyCell {
   /**

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

@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 import mxGraphAbstractHierarchyCell from './mxGraphAbstractHierarchyCell';
-import mxObjectIdentity from '../../../util/mxObjectIdentity';
+import mxObjectIdentity from '../../../util/datatypes/mxObjectIdentity';
 
 class mxGraphHierarchyNode extends mxGraphAbstractHierarchyCell {
   /**

src/mxgraph/layout/hierarchical/mxHierarchicalLayout.js

@@ -8,7 +8,7 @@ import mxConstants from '../../util/mxConstants';
 import mxHierarchicalEdgeStyle from './mxHierarchicalEdgeStyle';
 import mxDictionary from '../../util/datatypes/mxDictionary';
 import mxGraphHierarchyModel from './model/mxGraphHierarchyModel';
-import mxObjectIdentity from '../../util/mxObjectIdentity';
+import mxObjectIdentity from '../../util/datatypes/mxObjectIdentity';
 import mxMinimumCycleRemover from './stage/mxMinimumCycleRemover';
 import mxMedianHybridCrossingReduction from './stage/mxMedianHybridCrossingReduction';
 import mxCoordinateAssignment from './stage/mxCoordinateAssignment';

src/mxgraph/layout/hierarchical/mxSwimlaneLayout.js

@@ -10,7 +10,7 @@ import mxHierarchicalEdgeStyle from './mxHierarchicalEdgeStyle';
 import mxDictionary from '../../util/datatypes/mxDictionary';
 import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxSwimlaneModel from './model/mxSwimlaneModel';
-import mxObjectIdentity from '../../util/mxObjectIdentity';
+import mxObjectIdentity from '../../util/datatypes/mxObjectIdentity';
 import mxSwimlaneOrdering from './stage/mxSwimlaneOrdering';
 import mxMedianHybridCrossingReduction from './stage/mxMedianHybridCrossingReduction';
 import mxCoordinateAssignment from './stage/mxCoordinateAssignment';

src/mxgraph/layout/mxFastOrganicLayout.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxObjectIdentity from '../util/mxObjectIdentity';
+import mxObjectIdentity from '../util/datatypes/mxObjectIdentity';
 import mxGraphLayout from './mxGraphLayout';
 
 class mxFastOrganicLayout extends mxGraphLayout {

src/mxgraph/layout/mxParallelEdgeLayout.js

@@ -6,7 +6,7 @@
 
 import mxPoint from '../util/datatypes/mxPoint';
 import mxGraphLayout from './mxGraphLayout';
-import mxObjectIdentity from '../util/mxObjectIdentity';
+import mxObjectIdentity from '../util/datatypes/mxObjectIdentity';
 
 class mxParallelEdgeLayout extends mxGraphLayout {
   /**

src/mxgraph/model/mxGraphModel.js

@@ -7,7 +7,7 @@ import mxEventSource from '../util/event/mxEventSource';
 import mxUndoableEdit from '../util/undo/mxUndoableEdit';
 import mxCellPath from './mxCellPath';
 import mxDictionary from '../util/datatypes/mxDictionary';
-import mxObjectIdentity from '../util/mxObjectIdentity';
+import mxObjectIdentity from '../util/datatypes/mxObjectIdentity';
 import mxCell from './mxCell';
 import mxUtils from '../util/mxUtils';
 import mxEventObject from '../util/event/mxEventObject';

src/mxgraph/shape/edge/mxArrow.js

@@ -3,8 +3,8 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxShape from './mxShape';
+import mxShape from '../mxShape';
-import mxConstants from "../util/mxConstants";
+import mxConstants from "../../util/mxConstants";
 
 class mxArrow extends mxShape {
   /**

src/mxgraph/shape/edge/mxArrowConnector.js

@@ -3,9 +3,9 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxShape from './mxShape';
+import mxShape from '../mxShape';
-import mxConstants from '../util/mxConstants';
+import mxConstants from '../../util/mxConstants';
-import mxUtils from '../util/mxUtils';
+import mxUtils from '../../util/mxUtils';
 
 class mxArrowConnector extends mxShape {
   /**

src/mxgraph/shape/edge/mxConnector.js

@@ -3,9 +3,9 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxConstants from '../util/mxConstants';
+import mxConstants from '../../util/mxConstants';
 import mxPolyline from './mxPolyline';
-import mxUtils from '../util/mxUtils';
+import mxUtils from '../../util/mxUtils';
 import mxMarker from './mxMarker';
 
 class mxConnector extends mxPolyline {

src/mxgraph/shape/edge/mxLine.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxShape from './mxShape';
+import mxShape from '../mxShape';
 
 class mxLine extends mxShape {
   /**

src/mxgraph/shape/edge/mxMarker.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxConstants from '../util/mxConstants';
+import mxConstants from '../../util/mxConstants';
 
 const mxMarker = {
   /**

src/mxgraph/shape/edge/mxPolyline.js

@@ -3,9 +3,9 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxShape from './mxShape';
+import mxShape from '../mxShape';
-import mxConstants from '../util/mxConstants';
+import mxConstants from '../../util/mxConstants';
-import mxUtils from '../util/mxUtils';
+import mxUtils from '../../util/mxUtils';
 
 class mxPolyline extends mxShape {
   /**

src/mxgraph/shape/mxLabel.js

@@ -5,7 +5,7 @@
  */
 import mxRectangle from '../util/datatypes/mxRectangle';
 import mxConstants from '../util/mxConstants';
-import mxRectangleShape from './mxRectangleShape';
+import mxRectangleShape from './node/mxRectangleShape';
 import mxUtils from "../util/mxUtils";
 
 class mxLabel extends mxRectangleShape {

src/mxgraph/shape/node/mxCloud.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxActor from './mxActor';
+import mxActor from '../mxActor';
 
 class mxCloud extends mxActor {
   /**

src/mxgraph/shape/node/mxCylinder.js

@@ -3,9 +3,9 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxShape from './mxShape';
+import mxShape from '../mxShape';
-import mxConstants from '../util/mxConstants';
+import mxConstants from '../../util/mxConstants';
-import mxUtils from '../util/mxUtils';
+import mxUtils from '../../util/mxUtils';
 
 class mxCylinder extends mxShape {
   /**

src/mxgraph/shape/node/mxDoubleEllipse.js

@@ -4,10 +4,10 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxRectangle from '../util/datatypes/mxRectangle';
+import mxRectangle from '../../util/datatypes/mxRectangle';
-import mxShape from './mxShape';
+import mxShape from '../mxShape';
-import mxConstants from '../util/mxConstants';
+import mxConstants from '../../util/mxConstants';
-import mxUtils from '../util/mxUtils';
+import mxUtils from '../../util/mxUtils';
 
 class mxDoubleEllipse extends mxShape {
   /**

src/mxgraph/shape/node/mxEllipse.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxShape from './mxShape';
+import mxShape from '../mxShape';
 
 class mxEllipse extends mxShape {
   /**

src/mxgraph/shape/node/mxHexagon.js

@@ -3,10 +3,10 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxActor from './mxActor';
+import mxActor from '../mxActor';
-import mxPoint from '../util/datatypes/mxPoint';
+import mxPoint from '../../util/datatypes/mxPoint';
-import mxUtils from '../util/mxUtils';
+import mxUtils from '../../util/mxUtils';
-import mxConstants from '../util/mxConstants';
+import mxConstants from '../../util/mxConstants';
 
 class mxHexagon extends mxActor {
   /**

src/mxgraph/shape/node/mxImageShape.js

@@ -4,8 +4,8 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxUtils from '../util/mxUtils';
+import mxUtils from '../../util/mxUtils';
-import mxConstants from '../util/mxConstants';
+import mxConstants from '../../util/mxConstants';
 import mxRectangleShape from './mxRectangleShape';
 
 class mxImageShape extends mxRectangleShape {

src/mxgraph/shape/node/mxRectangleShape.js

@@ -4,9 +4,9 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxConstants from '../util/mxConstants';
+import mxConstants from '../../util/mxConstants';
-import mxUtils from '../util/mxUtils';
+import mxUtils from '../../util/mxUtils';
-import mxShape from './mxShape';
+import mxShape from '../mxShape';
 
 class mxRectangleShape extends mxShape {
   /**

src/mxgraph/shape/node/mxRhombus.js

@@ -3,10 +3,10 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
-import mxShape from './mxShape';
+import mxShape from '../mxShape';
-import mxPoint from '../util/datatypes/mxPoint';
+import mxPoint from '../../util/datatypes/mxPoint';
-import mxUtils from "../util/mxUtils";
+import mxUtils from "../../util/mxUtils";
-import mxConstants from "../util/mxConstants";
+import mxConstants from "../../util/mxConstants";
 
 class mxRhombus extends mxShape {
   /**

src/mxgraph/util/datatypes/mxDictionary.js

@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxObjectIdentity from '../mxObjectIdentity';
+import mxObjectIdentity from './mxObjectIdentity';
 
 class mxDictionary {
   /**

src/mxgraph/util/datatypes/mxObjectIdentity.js

@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
-import mxUtils from './mxUtils';
+import mxUtils from '../mxUtils';
 
 const mxObjectIdentity = {
   /**

src/mxgraph/util/event/mxEventObject.ts

@@ -10,21 +10,21 @@ class mxEventObject {
    *
    * Holds the name.
    */
-  name = null;
+  name: string | null = null;
 
   /**
    * Variable: properties
    *
    * Holds the properties as an associative array.
    */
-  properties = null;
+  properties: any = null;
 
   /**
    * Variable: consumed
    *
    * Holds the consumed state. Default is false.
    */
-  consumed = false;
+  consumed: boolean = false;
 
   /**
    * Class: mxEventObject
@@ -49,7 +49,9 @@ class mxEventObject {
    * new mxEventObject("eventName", key1, val1, .., keyN, valN)
    * (end)
    */
-  constructor(name, ...args) {
+  constructor(name: string,
+              ...args: any[]) {
+
     this.name = name;
     this.properties = [];
 
@@ -65,7 +67,7 @@ class mxEventObject {
    *
    * Returns <name>.
    */
-  getName() {
+  getName(): string {
     return this.name;
   }
 
@@ -74,7 +76,7 @@ class mxEventObject {
    *
    * Returns <properties>.
    */
-  getProperties() {
+  getProperties(): any {
     return this.properties;
   }
 
@@ -83,7 +85,7 @@ class mxEventObject {
    *
    * Returns the property for the given key.
    */
-  getProperty(key) {
+  getProperty(key: string): any {
     return this.properties[key];
   }
 
@@ -92,7 +94,7 @@ class mxEventObject {
    *
    * Returns true if the event has been consumed.
    */
-  isConsumed() {
+  isConsumed(): boolean {
     return this.consumed;
   }
 
@@ -101,7 +103,7 @@ class mxEventObject {
    *
    * Consumes the event.
    */
-  consume() {
+  consume(): void {
     this.consumed = true;
   }
 }

src/mxgraph/util/mxGuide.ts

@@ -3,9 +3,15 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
+
 import mxConstants from './mxConstants';
 import mxPoint from "./datatypes/mxPoint";
-import mxPolyline from "../shape/mxPolyline";
+import mxPolyline from "../shape/edge/mxPolyline";
+import mxCellState from "../view/cell/mxCellState";
+import mxShape from "../shape/mxShape";
+import mxRectangle from './datatypes/mxRectangle';
+import mxGraph from '../view/graph/mxGraph';
+import mxEventObject from './event/mxEventObject';
 
 /**
  * Class: mxGuide
@@ -22,58 +28,60 @@ class mxGuide {
    *
    * Reference to the enclosing <mxGraph> instance.
    */
-  graph = null;
+  graph: mxGraph = null;
 
   /**
    * Variable: states
    *
    * Contains the <mxCellStates> that are used for alignment.
    */
-  states = null;
+  states: mxCellState[] = null;
 
   /**
    * Variable: horizontal
    *
    * Specifies if horizontal guides are enabled. Default is true.
    */
-  horizontal = true;
+  horizontal: boolean = true;
 
   /**
    * Variable: vertical
    *
    * Specifies if vertical guides are enabled. Default is true.
    */
-  vertical = true;
+  vertical: boolean = true;
 
   /**
    * Variable: guideX
    *
    * Holds the <mxShape> for the horizontal guide.
    */
-  guideX = null;
+  guideX: mxShape | null = null;
 
   /**
    * Variable: guideY
    *
    * Holds the <mxShape> for the vertical guide.
    */
-  guideY = null;
+  guideY: mxShape | null = null;
 
   /**
    * Variable: rounded
    *
    * Specifies if rounded coordinates should be used. Default is false.
    */
-  rounded = false;
+  rounded: boolean = false;
 
   /**
    * Variable: tolerance
    *
    * Default tolerance in px if grid is disabled. Default is 2.
    */
-  tolerance = 2;
+  tolerance: number = 2;
+
+  constructor(graph: mxGraph,
+              states: mxCellState[]) {
 
-  constructor(graph, states) {
     this.graph = graph;
     this.setStates(states);
   }
@@ -83,7 +91,7 @@ class mxGuide {
    *
    * Sets the <mxCellStates> that should be used for alignment.
    */
-  setStates(states) {
+  setStates(states: mxCellState[]): void {
     this.states = states;
   }
 
@@ -93,7 +101,7 @@ class mxGuide {
    * Returns true if the guide should be enabled for the given native event. This
    * implementation always returns true.
    */
-  isEnabledForEvent(evt) {
+  isEnabledForEvent(evt: mxEventObject | null=null): boolean {
     return true;
   }
 
@@ -119,14 +127,13 @@ class mxGuide {
    *
    * horizontal - Boolean that specifies which guide should be created.
    */
-  createGuideShape(horizontal) {
+  createGuideShape(horizontal: boolean=false) {  // TODO: Should vertical guides be supported here?? ============================
     const guide = new mxPolyline(
       [],
       mxConstants.GUIDE_COLOR,
       mxConstants.GUIDE_STROKEWIDTH
     );
     guide.isDashed = true;
-
     return guide;
   }
 
@@ -135,16 +142,19 @@ class mxGuide {
    *
    * Returns true if the given state should be ignored.
    */
-  isStateIgnored(state) {
+  isStateIgnored(state: mxCellState | null=null) {
     return false;
   }
 
   /**
    * Function: move
    *
-   * Moves the <bounds> by the given <mxPoint> and returnt the snapped point.
+   * Moves the <bounds> by the given <mxPoint> and return the snapped point.
    */
-  move(bounds, delta, gridEnabled, clone) {
+  move(bounds: mxRectangle | null=null,
+       delta: mxPoint | null=null,
+       gridEnabled: boolean=false,
+       clone: boolean=false) {
     if (
       this.states != null &&
       (this.horizontal || this.vertical) &&
@@ -172,7 +182,7 @@ class mxGuide {
       const middle = b.getCenterY();
 
       // Snaps the left, center and right to the given x-coordinate
-      function snapX(x, state, centerAlign) {
+      const snapX = (x, state, centerAlign) => {
         let override = false;
 
         if (centerAlign && Math.abs(x - center) < ttX) {
@@ -211,7 +221,7 @@ class mxGuide {
       }
 
       // Snaps the top, middle or bottom to the given y-coordinate
-      function snapY(y, state, centerAlign) {
+      const snapY = (y, state, centerAlign) => {
         let override = false;
 
         if (centerAlign && Math.abs(y - middle) < ttY) {
@@ -255,25 +265,25 @@ class mxGuide {
         if (state != null && !this.isStateIgnored(state)) {
           // Align x
           if (this.horizontal) {
-            snapX.call(this, state.getCenterX(), state, true);
+            snapX(state.getCenterX(), state, true);
-            snapX.call(this, state.x, state, false);
+            snapX(state.x, state, false);
-            snapX.call(this, state.x + state.width, state, false);
+            snapX(state.x + state.width, state, false);
 
             // Aligns left and right of shape to center of page
             if (state.cell == null) {
-              snapX.call(this, state.getCenterX(), state, false);
+              snapX(state.getCenterX(), state, false);
             }
           }
 
           // Align y
           if (this.vertical) {
-            snapY.call(this, state.getCenterY(), state, true);
+            snapY(state.getCenterY(), state, true);
-            snapY.call(this, state.y, state, false);
+            snapY(state.y, state, false);
-            snapY.call(this, state.y + state.height, state, false);
+            snapY(state.y + state.height, state, false);
 
             // Aligns left and right of shape to center of page
             if (state.cell == null) {
-              snapY.call(this, state.getCenterY(), state, false);
+              snapY(state.getCenterY(), state, false);
             }
           }
         }
@@ -357,17 +367,19 @@ class mxGuide {
    *
    * Rounds to pixels for virtual states (eg. page guides)
    */
-  getDelta(bounds, stateX, dx, stateY, dy) {
+  getDelta(bounds: mxRectangle,
-    const s = this.graph.view.scale;
+           stateX: mxCellState | null=null,
+           dx: number,
+           stateY: mxCellState | null=null,
+           dy: number): mxPoint {
 
+    const s = this.graph.view.scale;
     if (this.rounded || (stateX != null && stateX.cell == null)) {
       dx = Math.round((bounds.x + dx) / s) * s - bounds.x;
     }
-
     if (this.rounded || (stateY != null && stateY.cell == null)) {
       dy = Math.round((bounds.y + dy) / s) * s - bounds.y;
     }
-
     return new mxPoint(dx, dy);
   }
 
@@ -376,7 +388,8 @@ class mxGuide {
    *
    * Returns the color for the given state.
    */
-  getGuideColor(state, horizontal) {
+  getGuideColor(state: mxCellState,
+                horizontal: boolean | null): string {
     return mxConstants.GUIDE_COLOR;
   }
 
@@ -385,7 +398,7 @@ class mxGuide {
    *
    * Hides all current guides.
    */
-  hide() {
+  hide(): void {
     this.setVisible(false);
   }
 
@@ -394,11 +407,10 @@ class mxGuide {
    *
    * Shows or hides the current guides.
    */
-  setVisible(visible) {
+  setVisible(visible: boolean): void {
     if (this.guideX != null) {
       this.guideX.node.style.visibility = visible ? 'visible' : 'hidden';
     }
-
     if (this.guideY != null) {
       this.guideY.node.style.visibility = visible ? 'visible' : 'hidden';
     }
@@ -409,12 +421,11 @@ class mxGuide {
    *
    * Destroys all resources that this object uses.
    */
-  destroy() {
+  destroy(): void {
     if (this.guideX != null) {
       this.guideX.destroy();
       this.guideX = null;
     }
-
     if (this.guideY != null) {
       this.guideY.destroy();
       this.guideY = null;

src/mxgraph/util/mxUtils.js

@@ -7,7 +7,7 @@ import mxEffects from './animate/mxEffects';
 import mxXmlRequest from './network/mxXmlRequest';
 import mxClient from '../mxClient';
 import mxConstants from './mxConstants';
-import mxObjectIdentity from './mxObjectIdentity';
+import mxObjectIdentity from './datatypes/mxObjectIdentity';
 import mxPoint from './datatypes/mxPoint';
 import mxDictionary from './datatypes/mxDictionary';
 import mxCellPath from '../model/mxCellPath';

src/mxgraph/util/undo/mxUndoableEdit.ts

@@ -6,6 +6,7 @@
 
 import mxEvent from '../event/mxEvent';
 import mxEventObject from '../event/mxEventObject';
+import mxEventSource from "../event/mxEventSource";
 
 class mxUndoableEdit {
   /**
@@ -13,7 +14,7 @@ class mxUndoableEdit {
    *
    * Specifies the source of the edit.
    */
-  source = null;
+  source: mxEventSource | null = null;
 
   /**
    * Variable: changes
@@ -22,7 +23,7 @@ class mxUndoableEdit {
    * expected to either have an undo and redo function, or an execute
    * function. Default is an empty array.
    */
-  changes = null;
+  changes: any[] = [];
 
   /**
    * Variable: significant
@@ -30,21 +31,21 @@ class mxUndoableEdit {
    * Specifies if the undoable change is significant.
    * Default is true.
    */
-  significant = null;
+  significant: boolean = true;
 
   /**
    * Variable: undone
    *
    * Specifies if this edit has been undone. Default is false.
    */
-  undone = false;
+  undone: boolean = false;
 
   /**
    * Variable: redone
    *
    * Specifies if this edit has been redone. Default is false.
    */
-  redone = false;
+  redone: boolean = false;
 
   /**
    * Class: mxUndoableEdit
@@ -90,10 +91,11 @@ class mxUndoableEdit {
    *
    * Constructs a new undoable edit for the given source.
    */
-  constructor(source, significant) {
+  constructor(source: mxEventSource,
+              significant: boolean=true) {
     this.source = source;
     this.changes = [];
-    this.significant = significant != null ? significant : true;
+    this.significant = significant;
   }
 
   /**
@@ -101,8 +103,8 @@ class mxUndoableEdit {
    *
    * Returns true if the this edit contains no changes.
    */
-  isEmpty() {
+  isEmpty(): boolean {
-    return this.changes.length == 0;
+    return this.changes.length === 0;
   }
 
   /**
@@ -110,7 +112,7 @@ class mxUndoableEdit {
    *
    * Returns <significant>.
    */
-  isSignificant() {
+  isSignificant(): boolean {
     return this.significant;
   }
 
@@ -120,7 +122,7 @@ class mxUndoableEdit {
    * Adds the specified change to this edit. The change is an object that is
    * expected to either have an undo and redo, or an execute function.
    */
-  add(change) {
+  add(change: any): void { // FIXME!!!
     this.changes.push(change);
   }
 
@@ -130,7 +132,7 @@ class mxUndoableEdit {
    * Hook to notify any listeners of the changes after an <undo> or <redo>
    * has been carried out. This implementation is empty.
    */
-  notify() {}
+  notify(): void {}
 
   /**
    * Function: die
@@ -138,14 +140,14 @@ class mxUndoableEdit {
    * Hook to free resources after the edit has been removed from the command
    * history. This implementation is empty.
    */
-  die() {}
+  die(): void {}
 
   /**
    * Function: undo
    *
    * Undoes all changes in this edit.
    */
-  undo() {
+  undo(): void {
     if (!this.undone) {
       this.source.fireEvent(new mxEventObject(mxEvent.START_EDIT));
       const count = this.changes.length;
@@ -169,7 +171,6 @@ class mxUndoableEdit {
       this.redone = false;
       this.source.fireEvent(new mxEventObject(mxEvent.END_EDIT));
     }
-
     this.notify();
   }
 
@@ -178,7 +179,7 @@ class mxUndoableEdit {
    *
    * Redoes all changes in this edit.
    */
-  redo() {
+  redo(): void {
     if (!this.redone) {
       this.source.fireEvent(new mxEventObject(mxEvent.START_EDIT));
       const count = this.changes.length;
@@ -202,7 +203,6 @@ class mxUndoableEdit {
       this.redone = true;
       this.source.fireEvent(new mxEventObject(mxEvent.END_EDIT));
     }
-
     this.notify();
   }
 }

src/mxgraph/view/connection/mxConnectionConstraint.js

@@ -4,21 +4,23 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
+import mxPoint from "../../util/datatypes/mxPoint";
+
 class mxConnectionConstraint {
   /**
    * Variable: point
    *
    * <mxPoint> that specifies the fixed location of the connection point.
    */
-  point = null;
+  point: mxPoint = null;
 
   /**
    * Variable: perimeter
    *
    * Boolean that specifies if the point should be projected onto the perimeter
-   * of the terminal.
+   * of the terminal. Default is true.
    */
-  perimeter = null;
+  perimeter: boolean = true;
 
   /**
    * Variable: name

src/mxgraph/view/graph/mxGraph.ts

@@ -46,7 +46,7 @@ import mxRootChange from '../../model/atomic_changes/mxRootChange';
 import mxStyleChange from '../../model/atomic_changes/mxStyleChange';
 import mxTerminalChange from '../../model/atomic_changes/mxTerminalChange';
 import mxValueChange from '../../model/atomic_changes/mxValueChange';
-import mxPolyline from '../../shape/mxPolyline';
+import mxPolyline from '../../shape/edge/mxPolyline';
 import mxCellState from '../cell/mxCellState';
 
 class mxGraph extends mxEventSource {
@@ -4539,13 +4539,13 @@ class mxGraph extends mxEventSource {
    * target - <mxCell> that defines the target of the edge.
    * style - Optional string that defines the cell style.
    */
-  insertEdge = (...args) => {
+  insertEdge(...args: any[]): mxCell {
-    let parent;
+    let parent: mxCell;
-    let id;
+    let id: number | null;
-    let value;
+    let value: any; // note me - can be a string or a class instance!!!
-    let source;
+    let source: mxCell;
-    let target;
+    let target: mxCell;
-    let style;
+    let style: string;  // TODO: Also allow for an object or class instance??
 
     if (args.length === 1) {
       // If only a single parameter, treat as an object
@@ -4574,7 +4574,13 @@ class mxGraph extends mxEventSource {
    * are set when the edge is added to the model.
    *
    */
-  createEdge(parent, id, value, source, target, style) {
+  createEdge(parent: mxCell | null=null,
+             id,
+             value,
+             source: mxCell | null=null,
+             target: mxCell | null=null,
+             style: ) {
+
     // Creates the edge
     const edge = new mxCell(value, new mxGeometry(), style);
     edge.setId(id);
@@ -4619,7 +4625,12 @@ class mxGraph extends mxEventSource {
    * source - Optional <mxCell> that represents the source terminal.
    * target - Optional <mxCell> that represents the target terminal.
    */
-  addCell(cell, parent, index, source, target) {
+  addCell(cell: mxCell,
+          parent: mxCell | null=null,
+          index: number | null=null,
+          source: mxCell | null=null,
+          target: mxCell | null=null): mxCell {
+
     return this.addCells([cell], parent, index, source, target)[0];
   }
 
@@ -4642,7 +4653,13 @@ class mxGraph extends mxEventSource {
    * absolute - Optional boolean indicating of cells should be kept at
    * their absolute position. Default is false.
    */
-  addCells(cells, parent, index, source, target, absolute) {
+  addCells(cells: mxCell[],
+           parent: mxCell | null=null,
+           index: number | null=null,
+           source: mxCell | null=null,
+           target: mxCell | null=null,
+           absolute: boolean=false) {
+
     if (parent == null) {
       parent = this.getDefaultParent();
     }

src/mxgraph/view/graph/mxGraphView.ts

@@ -9,7 +9,7 @@ import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxDictionary from '../../util/datatypes/mxDictionary';
 import mxEventSource from '../../util/event/mxEventSource';
 import mxEventObject from '../../util/event/mxEventObject';
-import mxRectangleShape from '../../shape/mxRectangleShape';
+import mxRectangleShape from '../../shape/node/mxRectangleShape';
 import mxConstants from '../../util/mxConstants';
 import mxClient from '../../mxClient';
 import mxEvent from '../../util/event/mxEvent';
@@ -18,7 +18,7 @@ import mxLog from '../../util/gui/mxLog';
 import mxResources from '../../util/mxResources';
 import mxCellState from '../cell/mxCellState';
 import mxUndoableEdit from '../../util/undo/mxUndoableEdit';
-import mxImageShape from '../../shape/mxImageShape';
+import mxImageShape from '../../shape/node/mxImageShape';
 import mxMouseEvent from '../../util/event/mxMouseEvent';
 import mxStyleRegistry from '../style/mxStyleRegistry';
 import mxGraph from "./mxGraph";

src/mxgraph/view/graph/mxOutline.ts

@@ -8,9 +8,9 @@ import mxMouseEvent from '../../util/event/mxMouseEvent';
 import mxConstants from '../../util/mxConstants';
 import mxPoint from '../../util/datatypes/mxPoint';
 import mxRectangle from '../../util/datatypes/mxRectangle';
-import mxRectangleShape from '../../shape/mxRectangleShape';
+import mxRectangleShape from '../../shape/node/mxRectangleShape';
 import mxGraph from './mxGraph';
-import mxImageShape from '../../shape/mxImageShape';
+import mxImageShape from '../../shape/node/mxImageShape';
 import mxEvent from '../../util/event/mxEvent';
 import mxUtils from '../../util/mxUtils';
 import mxClient from '../../mxClient';