converting to typescript

src/mxgraph/shape/mxActor.ts

@@ -48,9 +48,9 @@ import mxRectangle from 'mxgraph/util/datatypes/mxRectangle';
  * 1. This is stored in <strokewidth>.
  */
 class mxActor extends mxShape {
-  constructor(bounds: mxRectangle,
-              fill: string,
-              stroke: string,
+  constructor(bounds: mxRectangle | null=null,
+              fill: string | null=null,
+              stroke: string | null=null,
               strokewidth: number=1) {
     super();
     this.bounds = bounds;

src/mxgraph/shape/mxShape.ts

@@ -157,11 +157,11 @@ class mxShape {
 
   flipV: boolean = false;
 
-  isShadow: boolean | null = false;
+  isShadow: boolean = false;
 
-  isDashed: boolean | null = false;
+  isDashed: boolean = false;
 
-  isRounded: boolean | null = false;
+  isRounded: boolean = false;
 
   rotation: number | null = null;
 
@@ -171,7 +171,7 @@ class mxShape {
 
   oldGradients: any[] | null = null;
 
-  glass: boolean | null = false;
+  glass: boolean = false;
 
   /**
    * Variable: dialect
@@ -1084,10 +1084,11 @@ class mxShape {
     this.startArrow = null;
     this.endArrow = null;
     this.direction = null;
-    this.isShadow = null;
-    this.isDashed = null;
-    this.isRounded = null;
-    this.glass = null;
+
+    this.isShadow = false;
+    this.isDashed = false;
+    this.isRounded = false;
+    this.glass = false;
   }
 
   /**

src/mxgraph/shape/mxTriangle.ts

@@ -9,6 +9,7 @@ import mxActor from './mxActor';
 import mxUtils from '../util/mxUtils';
 import mxConstants from '../util/mxConstants';
 import mxAbstractCanvas2D from '../util/canvas/mxAbstractCanvas2D';
+import mxSvgCanvas2D from "../util/canvas/mxSvgCanvas2D";
 
 class mxTriangle extends mxActor {
   /**
@@ -39,7 +40,7 @@ class mxTriangle extends mxActor {
    * Draws the path for this shape.
    */
   redrawPath(
-    c: mxAbstractCanvas2D,
+    c: mxSvgCanvas2D,
     x: number,
     y: number,
     w: number,

src/mxgraph/util/mxGuide.ts

@@ -12,6 +12,8 @@ import mxShape from '../shape/mxShape';
 import mxRectangle from './datatypes/mxRectangle';
 import mxGraph from '../view/graph/mxGraph';
 import mxEventObject from './event/mxEventObject';
+import mxGraphView from "../view/graph/mxGraphView";
+import mxCell from "../view/cell/mxCell";
 
 /**
  * Class: mxGuide
@@ -28,14 +30,14 @@ class mxGuide {
    *
    * Reference to the enclosing <mxGraph> instance.
    */
-  graph: mxGraph = null;
+  graph: mxGraph;
 
   /**
    * Variable: states
    *
    * Contains the <mxCellStates> that are used for alignment.
    */
-  states: mxCellState[] = null;
+  states: mxCellState[] | null = null;
 
   /**
    * Variable: horizontal
@@ -108,7 +110,7 @@ class mxGuide {
    *
    * Returns the tolerance for the guides. Default value is gridSize / 2.
    */
-  getGuideTolerance(gridEnabled) {
+  getGuideTolerance(gridEnabled: boolean=false) {
     return gridEnabled && this.graph.gridEnabled
       ? this.graph.gridSize / 2
       : this.tolerance;
@@ -152,7 +154,7 @@ class mxGuide {
    */
   move(
     bounds: mxRectangle | null = null,
-    delta: mxPoint | null = null,
+    delta: mxPoint,
     gridEnabled: boolean = false,
     clone: boolean = false
   ) {
@@ -168,10 +170,10 @@ class mxGuide {
       b.x += delta.x;
       b.y += delta.y;
       let overrideX = false;
-      let stateX = null;
+      let stateX: mxCellState | null = null;
       let valueX = null;
       let overrideY = false;
-      let stateY = null;
+      let stateY: mxCellState | null = null;
       let valueY = null;
       let ttX = tt;
       let ttY = tt;
@@ -183,7 +185,7 @@ class mxGuide {
       const middle = b.getCenterY();
 
       // Snaps the left, center and right to the given x-coordinate
-      const snapX = (x, state, centerAlign) => {
+      const snapX = (x: number, state: mxCellState, centerAlign: boolean) => {
         let override = false;
 
         if (centerAlign && Math.abs(x - center) < ttX) {
@@ -222,7 +224,7 @@ class mxGuide {
       };
 
       // Snaps the top, middle or bottom to the given y-coordinate
-      const snapY = (y, state, centerAlign) => {
+      const snapY = (y: number, state: mxCellState, centerAlign: boolean) => {
         let override = false;
 
         if (centerAlign && Math.abs(y - middle) < ttY) {
@@ -295,18 +297,19 @@ class mxGuide {
       delta = this.getDelta(bounds, stateX, delta.x, stateY, delta.y);
 
       // Redraws the guides
-      const c = this.graph.container;
+      const c = <HTMLElement>this.graph.container;
 
       if (!overrideX && this.guideX != null) {
-        this.guideX.node.style.visibility = 'hidden';
+        (<SVGElement>this.guideX.node).style.visibility = 'hidden';
       } else if (this.guideX != null) {
         let minY = null;
         let maxY = null;
 
-        if (stateX != null && bounds != null) {
+        if (stateX != null) {
           minY = Math.min(bounds.y + delta.y - this.graph.panDy, stateX.y);
           maxY = Math.max(
             bounds.y + bounds.height + delta.y - this.graph.panDy,
+              // @ts-ignore
             stateX.y + stateX.height
           );
         }
@@ -324,12 +327,12 @@ class mxGuide {
         }
 
         this.guideX.stroke = this.getGuideColor(stateX, true);
-        this.guideX.node.style.visibility = 'visible';
+        (<SVGElement>this.guideX.node).style.visibility = 'visible';
         this.guideX.redraw();
       }
 
       if (!overrideY && this.guideY != null) {
-        this.guideY.node.style.visibility = 'hidden';
+        (<SVGElement>this.guideY.node).style.visibility = 'hidden';
       } else if (this.guideY != null) {
         let minX = null;
         let maxX = null;
@@ -338,6 +341,7 @@ class mxGuide {
           minX = Math.min(bounds.x + delta.x - this.graph.panDx, stateY.x);
           maxX = Math.max(
             bounds.x + bounds.width + delta.x - this.graph.panDx,
+              // @ts-ignore
             stateY.x + stateY.width
           );
         }
@@ -355,7 +359,7 @@ class mxGuide {
         }
 
         this.guideY.stroke = this.getGuideColor(stateY, false);
-        this.guideY.node.style.visibility = 'visible';
+        (<SVGElement>this.guideY.node).style.visibility = 'visible';
         this.guideY.redraw();
       }
     }
@@ -375,7 +379,7 @@ class mxGuide {
     stateY: mxCellState | null = null,
     dy: number
   ): mxPoint {
-    const s = this.graph.view.scale;
+    const s = (<mxGraphView>this.graph.view).scale;
     if (this.rounded || (stateX != null && stateX.cell == null)) {
       dx = Math.round((bounds.x + dx) / s) * s - bounds.x;
     }
@@ -390,7 +394,7 @@ class mxGuide {
    *
    * Returns the color for the given state.
    */
-  getGuideColor(state: mxCellState, horizontal: boolean | null): string {
+  getGuideColor(state: mxCellState | null, horizontal: boolean | null): string {
     return mxConstants.GUIDE_COLOR;
   }
 
@@ -410,10 +414,10 @@ class mxGuide {
    */
   setVisible(visible: boolean): void {
     if (this.guideX != null) {
-      this.guideX.node.style.visibility = visible ? 'visible' : 'hidden';
+      (<SVGElement>this.guideX.node).style.visibility = visible ? 'visible' : 'hidden';
     }
     if (this.guideY != null) {
-      this.guideY.node.style.visibility = visible ? 'visible' : 'hidden';
+      (<SVGElement>this.guideY.node).style.visibility = visible ? 'visible' : 'hidden';
     }
   }
 

src/mxgraph/view/cell/mxTemporaryCellStates.ts

@@ -14,6 +14,7 @@ import mxGraphView from '../graph/mxGraphView';
 import mxCell from './mxCell';
 import mxCellState from '../../util/datatypes/mxCellState';
 import mxShape from "../../shape/mxShape";
+import mxGraph from "../graph/mxGraph";
 
 class mxTemporaryCellStates {
   oldValidateCellState: Function | null;
@@ -54,13 +55,13 @@ class mxTemporaryCellStates {
     this.oldBounds = view.getGraphBounds();
     this.oldStates = view.getStates();
     this.oldScale = view.getScale();
-    this.oldDoRedrawShape = view.graph.cellRenderer.doRedrawShape;
+    this.oldDoRedrawShape = (<mxGraph>view.graph).cellRenderer.doRedrawShape;
 
     const self = this;
 
     // Overrides doRedrawShape and paint shape to add links on shapes
     if (getLinkForCellState != null) {
-      view.graph.cellRenderer.doRedrawShape = (state: mxCellState) => {
+      (<mxGraph>view.graph).cellRenderer.doRedrawShape = (state: mxCellState) => {
         const shape = <mxShape>state?.shape;
         const oldPaint = shape.paint;
 
@@ -75,7 +76,7 @@ class mxTemporaryCellStates {
           }
         };
 
-        (<Function>self.oldDoRedrawShape).apply(view.graph.cellRenderer, [state]);
+        (<Function>self.oldDoRedrawShape).apply((<mxGraph>view.graph).cellRenderer, [state]);
         shape.paint = oldPaint;
       };
     }
@@ -100,7 +101,7 @@ class mxTemporaryCellStates {
       // the model so that the original cells are not modified
       for (const cell of cells) {
         const bounds = view.getBoundingBox(
-          view.validateCellState(view.validateCell(cell))
+          view.validateCellState(<mxCell>view.validateCell(<mxCell>cell))
         );
         if (bbox == null) {
           bbox = bounds;

src/mxgraph/view/graph/mxCurrentRootChange.ts

@@ -4,6 +4,7 @@ import mxPoint from '../../util/datatypes/mxPoint';
 import mxCell from '../cell/mxCell';
 import mxEvent from '../../util/event/mxEvent';
 import mxGraphModel from './mxGraphModel';
+import mxGraph from "./mxGraph";
 
 class mxCurrentRootChange {
   view: mxGraphView;
@@ -30,8 +31,8 @@ class mxCurrentRootChange {
     this.isUp = root == null;
 
     if (!this.isUp) {
-      let tmp: mxCell = this.view.currentRoot;
-      const model: mxGraphModel = this.view.graph.getModel();
+      let tmp: mxCell | null = this.view.currentRoot;
+      const model: mxGraphModel = (<mxGraph>this.view.graph).getModel();
 
       while (tmp != null) {
         if (tmp === root) {
@@ -51,9 +52,9 @@ class mxCurrentRootChange {
   execute(): void {
     const tmp = this.view.currentRoot;
     this.view.currentRoot = this.previous;
-    this.previous = tmp;
+    this.previous = <mxCell>tmp;
 
-    const translate = this.view.graph.getTranslateForRoot(
+    const translate = (<mxGraph>this.view.graph).getTranslateForRoot(
       this.view.currentRoot
     );
 

src/mxgraph/view/graph/mxGraphSelectionModel.ts

@@ -179,12 +179,12 @@ class mxGraphSelectionModel extends mxEventSource {
   setCells(cells: mxCell[]): void {
     if (cells != null) {
       if (this.singleSelection) {
-        cells = [this.getFirstSelectableCell(cells)];
+        cells = [<mxCell>this.getFirstSelectableCell(cells)];
       }
 
       const tmp = [];
       for (let i = 0; i < cells.length; i += 1) {
-        if (this.graph.isCellSelectable(cells[i])) {
+        if ((<mxGraph>this.graph).isCellSelectable(cells[i])) {
           tmp.push(cells[i]);
         }
       }
@@ -200,7 +200,7 @@ class mxGraphSelectionModel extends mxEventSource {
   getFirstSelectableCell(cells: mxCell[]): mxCell | null {
     if (cells != null) {
       for (let i = 0; i < cells.length; i += 1) {
-        if (this.graph.isCellSelectable(cells[i])) {
+        if ((<mxGraph>this.graph).isCellSelectable(cells[i])) {
           return cells[i];
         }
       }
@@ -238,14 +238,14 @@ class mxGraphSelectionModel extends mxEventSource {
       let remove = null;
       if (this.singleSelection) {
         remove = this.cells;
-        cells = [this.getFirstSelectableCell(cells)];
+        cells = [<mxCell>this.getFirstSelectableCell(cells)];
       }
 
       const tmp = [];
       for (let i = 0; i < cells.length; i += 1) {
         if (
           !this.isSelected(cells[i]) &&
-          this.graph.isCellSelectable(cells[i])
+          (<mxGraph>this.graph).isCellSelectable(cells[i])
         ) {
           tmp.push(cells[i]);
         }
@@ -296,12 +296,13 @@ class mxGraphSelectionModel extends mxEventSource {
    * added - Array of <mxCell> to add to the selection.
    * remove - Array of <mxCell> to remove from the selection.
    */
-  changeSelection(added: mxCell[], removed: mxCell[]): void {
+  changeSelection(added: mxCell[] | null=null,
+                  removed: mxCell[] | 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 || [], removed || []);
       change.execute();
       const edit = new mxUndoableEdit(this, false);
       edit.add(change);

src/pages/backgrounds/ExampleBase.ts

@@ -5,7 +5,7 @@ class ExampleBase {
     this.props = props;
   }
 
-  appendToElement(element): HTMLElement {
+  appendToElement(element: HTMLElement): HTMLElement {
     const html: string = this.getHTML();
     const cont: HTMLElement =
         document.createElement('div');