converting to typescript

src/mxgraph/mxClient.js

@@ -418,13 +418,6 @@ const mxClient = {
     document.location.href.indexOf('http://') < 0 &&
     document.location.href.indexOf('https://') < 0,
 
-  /**
-   * Variable: defaultBundles
-   *
-   * Contains the base names of the default bundles if mxLoadResources is false.
-   */
-  defaultBundles: [],
-
   /**
    * Function: isBrowserSupported
    *
@@ -482,30 +475,6 @@ const mxClient = {
     const head = doc.getElementsByTagName('head')[0];
     head.appendChild(link);
   },
-
-  /**
-   * Function: loadResources
-   *
-   * Helper method to load the default bundles if mxLoadResources is false.
-   *
-   * Parameters:
-   *
-   * fn - Function to call after all resources have been loaded.
-   * lan - Optional string to pass to <mxResources.add>.
-   */
-  loadResources: (fn, lan) => {
-    let pending = mxClient.defaultBundles.length;
-
-    function callback() {
-      if (--pending === 0) {
-        fn();
-      }
-    }
-
-    for (let i = 0; i < mxClient.defaultBundles.length; i += 1) {
-      mxResources.add(mxClient.defaultBundles[i], lan, callback);
-    }
-  },
 };
 
 let mxResources = require('./util/mxResources');

src/mxgraph/shape/mxShape.ts

@@ -99,7 +99,7 @@ class mxShape {
    *
    * container - DOM node that will contain the shape.
    */
-  init(container: HTMLElement | null = null) {
+  init(container: SVGElement | null = null) {
     if (this.node == null) {
       this.node = this.create(container);
 
@@ -114,7 +114,7 @@ class mxShape {
    *
    * Sets the styles to their default values.
    */
-  initStyles(container: HTMLElement | null = null) {
+  initStyles(container: SVGElement | null = null) {
     this.strokewidth = 1;
     this.rotation = 0;
     this.opacity = 100;
@@ -153,15 +153,15 @@ class mxShape {
 
   direction: string | null = null;
 
-  flipH: boolean | null = null;
+  flipH: boolean = false;
 
-  flipV: boolean | null = null;
+  flipV: boolean = false;
 
-  isShadow: boolean | null = null;
+  isShadow: boolean | null = false;
 
-  isDashed: boolean | null = null;
+  isDashed: boolean | null = false;
 
-  isRounded: boolean | null = null;
+  isRounded: boolean | null = false;
 
   rotation: number | null = null;
 
@@ -171,7 +171,7 @@ class mxShape {
 
   oldGradients: any[] | null = null;
 
-  glass: boolean | null = null;
+  glass: boolean | null = false;
 
   /**
    * Variable: dialect
@@ -349,7 +349,7 @@ class mxShape {
    *
    * container - DOM node that will contain the shape.
    */
-  create(container: HTMLElement | null): SVGGElement {
+  create(container: SVGElement | null): SVGGElement {
     return document.createElementNS("http://www.w3.org/2000/svg", "g");
   }
 

src/mxgraph/shape/node/mxRectangleShape.ts

@@ -156,7 +156,7 @@ class mxRectangleShape extends mxShape {
    * Generic background painting implementation.
    */
   paintForeground(
-    c: mxAbstractCanvas2D,
+    c: mxSvgCanvas2D,
     x: number,
     y: number,
     w: number,

src/mxgraph/util/datatypes/mxCellState.ts

@@ -11,6 +11,7 @@ import mxCell from '../../view/cell/mxCell';
 import mxGraphView from '../../view/graph/mxGraphView';
 import mxShape from '../../shape/mxShape';
 import mxText from '../../shape/mxText';
+import mxGraph from "../../view/graph/mxGraph";
 
 class mxCellState extends mxRectangle {
   // TODO: Document me!!
@@ -244,7 +245,8 @@ class mxCellState extends mxRectangle {
    * isSource - Boolean that specifies if the first or last point should
    * be assigned.
    */
-  setAbsoluteTerminalPoint(point: mxPoint, isSource: boolean = false): void {
+  setAbsoluteTerminalPoint(point: mxPoint,
+                           isSource: boolean=false): void {
     if (isSource) {
       if (this.absolutePoints == null) {
         this.absolutePoints = [];
@@ -445,7 +447,7 @@ class mxCellState extends mxRectangle {
    * Destroys the state and all associated resources.
    */
   destroy(): void {
-    (<mxGraphView>this.view).graph.cellRenderer.destroy(this);
+    (<mxGraph>(<mxGraphView>this.view).graph).cellRenderer.destroy(this);
   }
 }
 

src/mxgraph/util/datatypes/style/mxPerimeter.ts

@@ -245,7 +245,7 @@ const mxPerimeter = {
     vertex: mxCellState,
     next: mxPoint,
     orthogonal: boolean = false
-  ): mxPoint {
+  ): mxPoint | null {
     const { x } = bounds;
     const { y } = bounds;
     const w = bounds.width;
@@ -307,7 +307,7 @@ const mxPerimeter = {
     vertex: mxCellState,
     next: mxPoint,
     orthogonal: boolean = false
-  ): mxPoint {
+  ): mxPoint | null {
     const direction =
       vertex != null ? vertex.style[mxConstants.STYLE_DIRECTION] : null;
     const vertical =
@@ -451,7 +451,7 @@ const mxPerimeter = {
     vertex: mxCellState,
     next: mxPoint,
     orthogonal: boolean = false
-  ): mxPoint {
+  ): mxPoint | null {
     const { x } = bounds;
     const { y } = bounds;
     const w = bounds.width;
@@ -467,7 +467,7 @@ const mxPerimeter = {
     const pi = Math.PI;
     const pi2 = Math.PI / 2;
 
-    let result = new mxPoint(cx, cy);
+    let result: mxPoint | null = new mxPoint(cx, cy);
 
     const direction =
       vertex != null

src/mxgraph/util/datatypes/style/mxStyleRegistry.ts

@@ -19,7 +19,7 @@ const mxStyleRegistry = {
    *
    * Maps from strings to objects.
    */
-  values: [],
+  values: <any>{},
 
   /**
    * Function: putValue
@@ -44,7 +44,7 @@ const mxStyleRegistry = {
    *
    * Returns the name for the given value.
    */
-  getName: (value: any): string => {
+  getName: (value: any): string | null => {
     for (const key in mxStyleRegistry.values) {
       if (mxStyleRegistry.values[key] === value) {
         return key;

src/mxgraph/util/event/mxEventObject.ts

@@ -10,7 +10,7 @@ class mxEventObject {
    *
    * Holds the name.
    */
-  name: string | null = null;
+  name: string = '';
 
   /**
    * Variable: properties

src/mxgraph/view/cell/mxCellEditor.ts

@@ -772,7 +772,7 @@ class mxCellEditor {
    * cell - <mxCell> to start editing.
    * trigger - Optional mouse event that triggered the editor.
    */
-  startEditing(cell: mxCell, trigger: mxMouseEvent | null = null): void {
+  startEditing(cell: mxCell, trigger: MouseEvent | null = null): void {
     this.stopEditing(true);
     this.align = null;
 

src/mxgraph/view/connection/mxConnectionConstraint.ts

@@ -12,7 +12,7 @@ class mxConnectionConstraint {
    *
    * <mxPoint> that specifies the fixed location of the connection point.
    */
-  point: mxPoint = null;
+  point: mxPoint | null = null;
 
   /**
    * Variable: perimeter
@@ -27,21 +27,21 @@ class mxConnectionConstraint {
    *
    * Optional string that specifies the name of the constraint.
    */
-  name = null;
+  name: string | null = null;
 
   /**
    * Variable: dx
    *
    * Optional float that specifies the horizontal offset of the constraint.
    */
-  dx = null;
+  dx: number | null = null;
 
   /**
    * Variable: dy
    *
    * Optional float that specifies the vertical offset of the constraint.
    */
-  dy = null;
+  dy: number | null = null;
 
   /**
    * Class: mxConnectionConstraint
@@ -61,7 +61,11 @@ class mxConnectionConstraint {
    * perimeter - Optional boolean that specifies if the fixed point should be
    * projected onto the perimeter of the terminal. Default is true.
    */
-  constructor(point, perimeter, name, dx, dy) {
+  constructor(point: mxPoint | null=null,
+              perimeter: boolean=true,
+              name: string='',
+              dx: number | null=null,
+              dy: number | null=null) {
     this.point = point;
     this.perimeter = perimeter != null ? perimeter : true;
     this.name = name;

src/mxgraph/view/graph/mxGraph.ts

@@ -2403,7 +2403,7 @@ class mxGraph extends mxEventSource {
    * evt - Optional mouse event that triggered the editing.
    */
   startEditingAtCell(cell: mxCell | null=null,
-                     evt: mxMouseEvent): void {
+                     evt: MouseEvent): void {
     if (evt == null || !mxEvent.isMultiTouchEvent(evt)) {
       if (cell == null) {
         cell = this.getSelectionCell();
@@ -2728,7 +2728,7 @@ class mxGraph extends mxEventSource {
    * evt - Mouseevent that represents the doubleclick.
    * cell - Optional <mxCell> under the mousepointer.
    */
-  dblClick(evt: mxMouseEvent,
+  dblClick(evt: MouseEvent,
            cell: mxCell | null=null): void {
 
     const mxe = new mxEventObject(
@@ -3519,7 +3519,7 @@ class mxGraph extends mxEventSource {
    * the selection cells.
    */
   setCellStyles(key: string,
-                value: string | null=null,
+                value: string | number | null=null,
                 cells: mxCell[]=this.getSelectionCells()) {
 
     mxUtils.setCellStyles(this.model, cells, key, value);
@@ -6812,7 +6812,7 @@ class mxGraph extends mxEventSource {
    * terminal - <mxCellState> that represents the terminal.
    * source - Boolean indicating if the terminal is the source or target.
    */
-  getConnectionConstraint(edge: mxCell,
+  getConnectionConstraint(edge: mxCellState,
                           terminal: mxCellState,
                           source: boolean=false): mxConnectionConstraint {
     let point = null;
@@ -7402,7 +7402,7 @@ class mxGraph extends mxEventSource {
    *
    * cell - <mxCell> whose offset should be returned.
    */
-  getChildOffsetForCell(cell: mxCell) {
+  getChildOffsetForCell(cell: mxCell): mxPoint | null {
     return null;
   }
 
@@ -8384,7 +8384,7 @@ class mxGraph extends mxEventSource {
    *
    * cell - <mxCell> whose visible state should be returned.
    */
-  isCellVisible(cell: mxCell): boolean {
+  isCellVisible(cell: mxCell | null): boolean {
     return this.getModel().isVisible(cell);
   }
 
@@ -8473,7 +8473,7 @@ class mxGraph extends mxEventSource {
    * Returns true if the given event is a clone event. This implementation
    * returns true if control is pressed.
    */
-  isCloneEvent(evt: mxEventObject): boolean {
+  isCloneEvent(evt: mxEventObject | mxMouseEvent): boolean {
     return mxEvent.isControlDown(evt);
   }
 
@@ -8484,7 +8484,7 @@ class mxGraph extends mxEventSource {
    * returns true the cell behind the selected cell will be selected. This
    * implementation returns false;
    */
-  isTransparentClickEvent(evt: mxEventObject): boolean {
+  isTransparentClickEvent(evt: mxEventObject | mxMouseEvent): boolean {
     return false;
   }
 
@@ -8495,7 +8495,7 @@ class mxGraph extends mxEventSource {
    * returns true if the meta key (Cmd) is pressed on Macs or if control is
    * pressed on any other platform.
    */
-  isToggleEvent(evt: mxEventObject): boolean {
+  isToggleEvent(evt: mxEventObject | mxMouseEvent | mxMouseEvent): boolean {
     return mxClient.IS_MAC
       ? mxEvent.isMetaDown(evt)
       : mxEvent.isControlDown(evt);
@@ -8506,7 +8506,7 @@ class mxGraph extends mxEventSource {
    *
    * Returns true if the given mouse event should be aligned to the grid.
    */
-  isGridEnabledEvent(evt: mxEventObject): boolean {
+  isGridEnabledEvent(evt: mxEventObject | mxMouseEvent): boolean {
     return evt != null && !mxEvent.isAltDown(evt);
   }
 
@@ -8515,7 +8515,7 @@ class mxGraph extends mxEventSource {
    *
    * Returns true if the given mouse event should be aligned to the grid.
    */
-  isConstrainedEvent(evt: mxEventObject): boolean {
+  isConstrainedEvent(evt: mxEventObject | mxMouseEvent): boolean {
     return mxEvent.isShiftDown(evt);
   }
 
@@ -8525,7 +8525,7 @@ class mxGraph extends mxEventSource {
    * Returns true if the given mouse event should not allow any connections to be
    * made. This implementation returns false.
    */
-  isIgnoreTerminalEvent(evt: mxEventObject): boolean {
+  isIgnoreTerminalEvent(evt: mxEventObject | mxMouseEvent): boolean {
     return false;
   }
 
@@ -12586,7 +12586,7 @@ class mxGraph extends mxEventSource {
    *
    * Returns the state for the given touch event.
    */
-  getStateForTouchEvent(evt: mxEventObject) {
+  getStateForTouchEvent(evt: mxMouseEvent) {
     const x = mxEvent.getClientX(evt);
     const y = mxEvent.getClientY(evt);
 
@@ -12798,7 +12798,7 @@ class mxGraph extends mxEventSource {
    */
   fireMouseEvent(evtName: string,
                  me: mxMouseEvent,
-                 sender: any=this) {
+                 sender: any=this): void {
 
     if (this.isEventSourceIgnored(evtName, me)) {
       if (this.tooltipHandler != null) {
@@ -13076,7 +13076,7 @@ class mxGraph extends mxEventSource {
    * evt - Gestureend event that represents the gesture.
    * cell - Optional <mxCell> associated with the gesture.
    */
-  fireGestureEvent(evt: mxEventObject,
+  fireGestureEvent(evt: MouseEvent,
                    cell: mxCell | null=null): void {
     // Resets double tap event handling when gestures take place
     this.lastTouchTime = 0;
@@ -13112,15 +13112,5 @@ class mxGraph extends mxEventSource {
   }
 }
 
-/**
- * Installs the required language resources at class
- * loading time.
- */
-if (mxClient.mxLoadResources) {
-  mxResources.add(`${mxClient.basePath}/resources/graph`);
-} else {
-  mxClient.defaultBundles.push(`${mxClient.basePath}/resources/graph`);
-}
-
 export default mxGraph;
 import("../../serialization/mxGraphCodec");

src/mxgraph/view/graph/mxGraphModel.ts

@@ -526,7 +526,7 @@ class mxGraphModel extends mxEventSource {
    *
    * cell - <mxCell> that represents the possible root.
    */
-  isRoot(cell: mxCell) {
+  isRoot(cell: mxCell | null=null): boolean {
     return cell != null && this.root === cell;
   }
 
@@ -539,7 +539,7 @@ class mxGraphModel extends mxEventSource {
    *
    * cell - <mxCell> that represents the possible layer.
    */
-  isLayer(cell: mxCell | null) {
+  isLayer(cell: mxCell | null): boolean {
     return this.isRoot(this.getParent(cell));
   }
 
@@ -555,7 +555,7 @@ class mxGraphModel extends mxEventSource {
    * child - <mxCell> that specifies the child.
    */
   isAncestor(parent: mxCell | null,
-             child: mxCell | null) {
+             child: mxCell | null): boolean {
 
     while (child != null && child !== parent) {
       child = this.getParent(child);
@@ -572,7 +572,7 @@ class mxGraphModel extends mxEventSource {
    *
    * cell - <mxCell> that specifies the cell.
    */
-  contains(cell: mxCell | null) {
+  contains(cell: mxCell | null): boolean {
     return this.isAncestor(this.root, cell);
   }
 
@@ -1479,7 +1479,7 @@ class mxGraphModel extends mxEventSource {
    *
    * cell - <mxCell> that represents the possible vertex.
    */
-  isVertex(cell: mxCell): boolean {
+  isVertex(cell: mxCell | null): boolean {
     return cell != null ? cell.isVertex() : false;
   }
 

src/mxgraph/view/graph/mxLayoutManager.ts

@@ -210,7 +210,7 @@ class mxLayoutManager extends mxEventSource {
    * <getLayout> will return a layout for the given cell for
    * <mxEvent.BEGIN_UPDATE> or <mxEvent.END_UPDATE>.
    */
-  hasLayout(cell: mxCell): boolean {
+  hasLayout(cell: mxCell | null): boolean {
     return !!this.getLayout(cell, mxEvent.LAYOUT_CELLS);
   }
 
@@ -225,7 +225,7 @@ class mxLayoutManager extends mxEventSource {
    * check if a layout exists for the given cell. This is called
    * from <hasLayout>.
    */
-  getLayout(cell: mxCell, eventName: string): any {
+  getLayout(cell: mxCell | null, eventName: string): any {
     return null;
   }
 
@@ -378,7 +378,7 @@ class mxLayoutManager extends mxEventSource {
 
       if (this.isBubbling()) {
         const model = (<mxGraph>this.getGraph()).getModel();
-        this.addAncestorsWithLayout(model.getParent(cell), result);
+        this.addAncestorsWithLayout(<mxCell>model.getParent(cell), result);
       }
     }
     return result;
@@ -394,7 +394,7 @@ class mxLayoutManager extends mxEventSource {
       const model = (<mxGraph>this.getGraph()).getModel();
 
       for (let i = 0; i < model.getChildCount(cell); i += 1) {
-        const child = model.getChildAt(cell, i);
+        const child = <mxCell>model.getChildAt(cell, i);
 
         if (this.hasLayout(child)) {
           result.push(child);

src/mxgraph/view/graph/mxOutline.ts

@@ -18,45 +18,45 @@ import mxImage from '../../util/image/mxImage';
 
 class mxOutline {
   // TODO: Document me!!
-  sizer: mxRectangleShape;
+  sizer: mxRectangleShape | null=null;
 
-  selectionBorder: mxRectangleShape;
+  selectionBorder: mxRectangleShape | null=null;
 
-  updateHandler: Function | null;
+  updateHandler: Function | null=null;
 
-  refreshHandler: Function | null;
+  refreshHandler: Function | null=null;
 
-  panHandler: Function | null;
+  panHandler: Function | null=null;
 
-  active: boolean | null;
+  active: boolean | null=null;
 
-  bounds: mxRectangle | null;
+  bounds: mxRectangle | null=null;
 
-  zoom: number;
+  zoom: number | null=null;
 
-  startX: number;
+  startX: number | null=null;
 
-  startY: number;
+  startY: number | null=null;
 
-  dx0: number;
+  dx0: number | null=null;
 
-  dy0: number;
+  dy0: number | null=null;
 
-  index: number;
+  index: number | null=null;
 
   /**
    * Function: source
    *
    * Reference to the source <mxGraph>.
    */
-  source: mxGraph | null = null;
+  source: mxGraph;
 
   /**
    * Function: outline
    *
    * Reference to the <mxGraph> that renders the outline.
    */
-  outline: mxGraph | null = null;
+  outline: mxGraph;
 
   /**
    * Function: graphRenderHint
@@ -213,7 +213,7 @@ class mxOutline {
    *
    * Initializes the outline inside the given container.
    */
-  init(container) {
+  init(container: HTMLElement) {
     this.outline = this.createGraph(container);
 
     // Do not repaint when suspended
@@ -224,12 +224,10 @@ class mxOutline {
       }
     });
 
-    // Enables faster painting in SVG
-    if (mxClient.IS_SVG) {
-      const node = this.outline.getView().getCanvas().parentNode;
-      node.setAttribute('shape-rendering', 'optimizeSpeed');
-      node.setAttribute('image-rendering', 'optimizeSpeed');
-    }
+    // Enable faster painting in SVG
+    const node = <SVGElement>this.outline.getView().getCanvas().parentNode;
+    node.setAttribute('shape-rendering', 'optimizeSpeed');
+    node.setAttribute('image-rendering', 'optimizeSpeed');
 
     // Hides cursors and labels
     this.outline.labelsVisible = this.labelsVisible;