updates to js syntax

src/js/layout/mxGraphLayout.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2006-2018, Gaudenz Alder
  */
 
-import mxRectangle from "FIXME";
+import mxRectangle from "../util/mxRectangle";
 import mxDictionary from "FIXME";
 
 class mxGraphLayout {

src/js/layout/mxPartitionLayout.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
 
-import mxRectangle from "FIXME";
+import mxRectangle from "../util/mxRectangle";
 
 class mxPartitionLayout extends mxGraphLayout {
   /**

src/js/model/mxGeometry.js

@@ -4,7 +4,7 @@
  */
 
 import mxPoint from "FIXME";
-import mxRectangle from "FIXME";
+import mxRectangle from "../util/mxRectangle";
 
 class mxGeometry extends mxRectangle {
   /**

src/js/shape/mxDoubleEllipse.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
 
-import mxRectangle from "FIXME";
+import mxRectangle from "../util/mxRectangle";
 
 class mxDoubleEllipse extends mxShape {
   /**

src/js/shape/mxStencil.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
 
-import mxRectangle from "FIXME";
+import mxRectangle from "../util/mxRectangle";
 import mxConnectionConstraint from "FIXME";
 
 class mxStencil extends mxShape {

src/js/util/mxAbstractCanvas2D.js

@@ -2,28 +2,12 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
+import mxUtils from "./mxUtils";
- * Class: mxAbstractCanvas2D
+import mxConstants from "./mxConstants";
- *
+import mxUrlConverter from "./mxUrlConverter";
- * Base class for all canvases. A description of the public API is available in <mxXmlCanvas2D>.
+import mxPoint from "./mxPoint";
- * All color values of <mxConstants.NONE> will be converted to null in the state.
- * 
- * Constructor: mxAbstractCanvas2D
- *
- * Constructs a new abstract canvas.
- */
-function mxAbstractCanvas2D()
-{
-  /**
-   * Variable: converter
-   * 
-   * Holds the <mxUrlConverter> to convert image URLs.
-   */
-  this.converter = this.createUrlConverter();
-  
-  this.reset();
-};
 
+class mxAbstractCanvas2D {
   /**
    * Variable: state
    *
@@ -108,13 +92,33 @@ mxAbstractCanvas2closeOp = 'Z';
    */
   mxAbstractCanvas2pointerEvents = false;
 
+  /**
+   * Class: mxAbstractCanvas2D
+   *
+   * Base class for all canvases. A description of the public API is available in <mxXmlCanvas2D>.
+   * All color values of <mxConstants.NONE> will be converted to null in the state.
+   *
+   * Constructor: mxAbstractCanvas2D
+   *
+   * Constructs a new abstract canvas.
+   */
+  constructor() {
+    /**
+     * Variable: converter
+     *
+     * Holds the <mxUrlConverter> to convert image URLs.
+     */
+    this.converter = this.createUrlConverter();
+
+    this.reset();
+  };
+
   /**
    * Function: createUrlConverter
    *
    * Create a new <mxUrlConverter> and returns it.
    */
-mxAbstractCanvas2createUrlConverter = ()=>
+  mxAbstractCanvas2createUrlConverter = () => {
-{
     return new mxUrlConverter();
   };
 
@@ -123,8 +127,7 @@ mxAbstractCanvas2createUrlConverter = ()=>
    *
    * Resets the state of this canvas.
    */
-mxAbstractCanvas2reset = ()=>
+  mxAbstractCanvas2reset = () => {
-{
     this.state = this.createState();
     this.states = [];
   };
@@ -134,8 +137,7 @@ mxAbstractCanvas2reset = ()=>
    *
    * Creates the state of the this canvas.
    */
-mxAbstractCanvas2createState = ()=>
+  mxAbstractCanvas2createState = () => {
-{
     return {
       dx: 0,
       dy: 0,
@@ -178,8 +180,7 @@ mxAbstractCanvas2createState = ()=>
    *
    * Rounds all numbers to integers.
    */
-mxAbstractCanvas2format = (value)=>
+  mxAbstractCanvas2format = (value) => {
-{
     return Math.round(parseFloat(value));
   };
 
@@ -188,18 +189,14 @@ mxAbstractCanvas2format = (value)=>
    *
    * Adds the given operation to the path.
    */
-mxAbstractCanvas2addOp = ()=>
+  mxAbstractCanvas2addOp = () => {
-{
+    if (this.path != null) {
-  if (this.path != null)
-  {
       this.path.push(arguments[0]);
 
-    if (arguments.length > 2)
+      if (arguments.length > 2) {
-    {
         var s = this.state;
 
-      for (var i = 2; i < arguments.length; i += 2)
+        for (var i = 2; i < arguments.length; i += 2) {
-      {
           this.lastX = arguments[i - 1];
           this.lastY = arguments[i];
 
@@ -215,8 +212,7 @@ mxAbstractCanvas2addOp = ()=>
    *
    * Rotates the given point and returns the result as an <mxPoint>.
    */
-mxAbstractCanvas2rotatePoint = (x, y, theta, cx, cy)=>
+  mxAbstractCanvas2rotatePoint = (x, y, theta, cx, cy) => {
-{
     var rad = theta * (Math.PI / 180);
 
     return mxUtils.getRotatedPoint(new mxPoint(x, y), Math.cos(rad),
@@ -228,8 +224,7 @@ mxAbstractCanvas2rotatePoint = (x, y, theta, cx, cy)=>
    *
    * Saves the current state.
    */
-mxAbstractCanvas2save = ()=>
+  mxAbstractCanvas2save = () => {
-{
     this.states.push(this.state);
     this.state = mxUtils.clone(this.state);
   };
@@ -239,10 +234,8 @@ mxAbstractCanvas2save = ()=>
    *
    * Restores the current state.
    */
-mxAbstractCanvas2restore = ()=>
+  mxAbstractCanvas2restore = () => {
-{
+    if (this.states.length > 0) {
-  if (this.states.length > 0)
-  {
       this.state = this.states.pop();
     }
   };
@@ -252,8 +245,7 @@ mxAbstractCanvas2restore = ()=>
    *
    * Sets the current link. Hook for subclassers.
    */
-mxAbstractCanvas2setLink = (link)=>
+  mxAbstractCanvas2setLink = (link) => {
-{
     // nop
   };
 
@@ -262,8 +254,7 @@ mxAbstractCanvas2setLink = (link)=>
    *
    * Scales the current state.
    */
-mxAbstractCanvas2scale = (value)=>
+  mxAbstractCanvas2scale = (value) => {
-{
     this.state.scale *= value;
     this.state.strokeWidth *= value;
   };
@@ -273,8 +264,7 @@ mxAbstractCanvas2scale = (value)=>
    *
    * Translates the current state.
    */
-mxAbstractCanvas2translate = (dx, dy)=>
+  mxAbstractCanvas2translate = (dx, dy) => {
-{
     this.state.dx += dx;
     this.state.dy += dy;
   };
@@ -284,8 +274,7 @@ mxAbstractCanvas2translate = (dx, dy)=>
    *
    * Rotates the current state.
    */
-mxAbstractCanvas2rotate = (theta, flipH, flipV, cx, cy)=>
+  mxAbstractCanvas2rotate = (theta, flipH, flipV, cx, cy) => {
-{
     // nop
   };
 
@@ -294,8 +283,7 @@ mxAbstractCanvas2rotate = (theta, flipH, flipV, cx, cy)=>
    *
    * Sets the current alpha.
    */
-mxAbstractCanvas2setAlpha = (value)=>
+  mxAbstractCanvas2setAlpha = (value) => {
-{
     this.state.alpha = value;
   };
 
@@ -304,8 +292,7 @@ mxAbstractCanvas2setAlpha = (value)=>
    *
    * Sets the current solid fill alpha.
    */
-mxAbstractCanvas2setFillAlpha = (value)=>
+  mxAbstractCanvas2setFillAlpha = (value) => {
-{
     this.state.fillAlpha = value;
   };
 
@@ -314,8 +301,7 @@ mxAbstractCanvas2setFillAlpha = (value)=>
    *
    * Sets the current stroke alpha.
    */
-mxAbstractCanvas2setStrokeAlpha = (value)=>
+  mxAbstractCanvas2setStrokeAlpha = (value) => {
-{
     this.state.strokeAlpha = value;
   };
 
@@ -324,10 +310,8 @@ mxAbstractCanvas2setStrokeAlpha = (value)=>
    *
    * Sets the current fill color.
    */
-mxAbstractCanvas2setFillColor = (value)=>
+  mxAbstractCanvas2setFillColor = (value) => {
-{
+    if (value == mxConstants.NONE) {
-  if (value == mxConstants.NONE)
-  {
       value = null;
     }
 
@@ -340,8 +324,7 @@ mxAbstractCanvas2setFillColor = (value)=>
    *
    * Sets the current gradient.
    */
-mxAbstractCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2)=>
+  mxAbstractCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2) => {
-{
     var s = this.state;
     s.fillColor = color1;
     s.gradientFillAlpha = (alpha1 != null) ? alpha1 : 1;
@@ -355,10 +338,8 @@ mxAbstractCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, a
    *
    * Sets the current stroke color.
    */
-mxAbstractCanvas2setStrokeColor = (value)=>
+  mxAbstractCanvas2setStrokeColor = (value) => {
-{
+    if (value == mxConstants.NONE) {
-  if (value == mxConstants.NONE)
-  {
       value = null;
     }
 
@@ -370,8 +351,7 @@ mxAbstractCanvas2setStrokeColor = (value)=>
    *
    * Sets the current stroke width.
    */
-mxAbstractCanvas2setStrokeWidth = (value)=>
+  mxAbstractCanvas2setStrokeWidth = (value) => {
-{
     this.state.strokeWidth = value;
   };
 
@@ -380,8 +360,7 @@ mxAbstractCanvas2setStrokeWidth = (value)=>
    *
    * Enables or disables dashed lines.
    */
-mxAbstractCanvas2setDashed = (value, fixDash)=>
+  mxAbstractCanvas2setDashed = (value, fixDash) => {
-{
     this.state.dashed = value;
     this.state.fixDash = fixDash;
   };
@@ -391,8 +370,7 @@ mxAbstractCanvas2setDashed = (value, fixDash)=>
    *
    * Sets the current dash pattern.
    */
-mxAbstractCanvas2setDashPattern = (value)=>
+  mxAbstractCanvas2setDashPattern = (value) => {
-{
     this.state.dashPattern = value;
   };
 
@@ -401,8 +379,7 @@ mxAbstractCanvas2setDashPattern = (value)=>
    *
    * Sets the current line cap.
    */
-mxAbstractCanvas2setLineCap = (value)=>
+  mxAbstractCanvas2setLineCap = (value) => {
-{
     this.state.lineCap = value;
   };
 
@@ -411,8 +388,7 @@ mxAbstractCanvas2setLineCap = (value)=>
    *
    * Sets the current line join.
    */
-mxAbstractCanvas2setLineJoin = (value)=>
+  mxAbstractCanvas2setLineJoin = (value) => {
-{
     this.state.lineJoin = value;
   };
 
@@ -421,8 +397,7 @@ mxAbstractCanvas2setLineJoin = (value)=>
    *
    * Sets the current miter limit.
    */
-mxAbstractCanvas2setMiterLimit = (value)=>
+  mxAbstractCanvas2setMiterLimit = (value) => {
-{
     this.state.miterLimit = value;
   };
 
@@ -431,10 +406,8 @@ mxAbstractCanvas2setMiterLimit = (value)=>
    *
    * Sets the current font color.
    */
-mxAbstractCanvas2setFontColor = (value)=>
+  mxAbstractCanvas2setFontColor = (value) => {
-{
+    if (value == mxConstants.NONE) {
-  if (value == mxConstants.NONE)
-  {
       value = null;
     }
 
@@ -446,10 +419,8 @@ mxAbstractCanvas2setFontColor = (value)=>
    *
    * Sets the current font background color.
    */
-mxAbstractCanvas2setFontBackgroundColor = (value)=>
+  mxAbstractCanvas2setFontBackgroundColor = (value) => {
-{
+    if (value == mxConstants.NONE) {
-  if (value == mxConstants.NONE)
-  {
       value = null;
     }
 
@@ -461,10 +432,8 @@ mxAbstractCanvas2setFontBackgroundColor = (value)=>
    *
    * Sets the current font border color.
    */
-mxAbstractCanvas2setFontBorderColor = (value)=>
+  mxAbstractCanvas2setFontBorderColor = (value) => {
-{
+    if (value == mxConstants.NONE) {
-  if (value == mxConstants.NONE)
-  {
       value = null;
     }
 
@@ -476,8 +445,7 @@ mxAbstractCanvas2setFontBorderColor = (value)=>
    *
    * Sets the current font size.
    */
-mxAbstractCanvas2setFontSize = (value)=>
+  mxAbstractCanvas2setFontSize = (value) => {
-{
     this.state.fontSize = parseFloat(value);
   };
 
@@ -486,8 +454,7 @@ mxAbstractCanvas2setFontSize = (value)=>
    *
    * Sets the current font family.
    */
-mxAbstractCanvas2setFontFamily = (value)=>
+  mxAbstractCanvas2setFontFamily = (value) => {
-{
     this.state.fontFamily = value;
   };
 
@@ -496,10 +463,8 @@ mxAbstractCanvas2setFontFamily = (value)=>
    *
    * Sets the current font style.
    */
-mxAbstractCanvas2setFontStyle = (value)=>
+  mxAbstractCanvas2setFontStyle = (value) => {
-{
+    if (value == null) {
-  if (value == null)
-  {
       value = 0;
     }
 
@@ -511,8 +476,7 @@ mxAbstractCanvas2setFontStyle = (value)=>
    *
    * Enables or disables and configures the current shadow.
    */
-mxAbstractCanvas2setShadow = (enabled)=>
+  mxAbstractCanvas2setShadow = (enabled) => {
-{
     this.state.shadow = enabled;
   };
 
@@ -521,10 +485,8 @@ mxAbstractCanvas2setShadow = (enabled)=>
    *
    * Enables or disables and configures the current shadow.
    */
-mxAbstractCanvas2setShadowColor = (value)=>
+  mxAbstractCanvas2setShadowColor = (value) => {
-{
+    if (value == mxConstants.NONE) {
-  if (value == mxConstants.NONE)
-  {
       value = null;
     }
 
@@ -536,8 +498,7 @@ mxAbstractCanvas2setShadowColor = (value)=>
    *
    * Enables or disables and configures the current shadow.
    */
-mxAbstractCanvas2setShadowAlpha = (value)=>
+  mxAbstractCanvas2setShadowAlpha = (value) => {
-{
     this.state.shadowAlpha = value;
   };
 
@@ -546,8 +507,7 @@ mxAbstractCanvas2setShadowAlpha = (value)=>
    *
    * Enables or disables and configures the current shadow.
    */
-mxAbstractCanvas2setShadowOffset = (dx, dy)=>
+  mxAbstractCanvas2setShadowOffset = (dx, dy) => {
-{
     this.state.shadowDx = dx;
     this.state.shadowDy = dy;
   };
@@ -557,8 +517,7 @@ mxAbstractCanvas2setShadowOffset = (dx, dy)=>
    *
    * Starts a new path.
    */
-mxAbstractCanvas2begin = ()=>
+  mxAbstractCanvas2begin = () => {
-{
     this.lastX = 0;
     this.lastY = 0;
     this.path = [];
@@ -569,8 +528,7 @@ mxAbstractCanvas2begin = ()=>
    *
    *  Moves the current path the given coordinates.
    */
-mxAbstractCanvas2moveTo = (x, y)=>
+  mxAbstractCanvas2moveTo = (x, y) => {
-{
     this.addOp(this.moveOp, x, y);
   };
 
@@ -579,8 +537,7 @@ mxAbstractCanvas2moveTo = (x, y)=>
    *
    * Draws a line to the given coordinates. Uses moveTo with the op argument.
    */
-mxAbstractCanvas2lineTo = (x, y)=>
+  mxAbstractCanvas2lineTo = (x, y) => {
-{
     this.addOp(this.lineOp, x, y);
   };
 
@@ -589,8 +546,7 @@ mxAbstractCanvas2lineTo = (x, y)=>
    *
    * Adds a quadratic curve to the current path.
    */
-mxAbstractCanvas2quadTo = (x1, y1, x2, y2)=>
+  mxAbstractCanvas2quadTo = (x1, y1, x2, y2) => {
-{
     this.addOp(this.quadOp, x1, y1, x2, y2);
   };
 
@@ -599,8 +555,7 @@ mxAbstractCanvas2quadTo = (x1, y1, x2, y2)=>
    *
    * Adds a bezier curve to the current path.
    */
-mxAbstractCanvas2curveTo = (x1, y1, x2, y2, x3, y3)=>
+  mxAbstractCanvas2curveTo = (x1, y1, x2, y2, x3, y3) => {
-{
     this.addOp(this.curveOp, x1, y1, x2, y2, x3, y3);
   };
 
@@ -610,14 +565,11 @@ mxAbstractCanvas2curveTo = (x1, y1, x2, y2, x3, y3)=>
    * Adds the given arc to the current path. This is a synthetic operation that
    * is broken down into curves.
    */
-mxAbstractCanvas2arcTo = (rx, ry, angle, largeArcFlag, sweepFlag, x, y)=>
+  mxAbstractCanvas2arcTo = (rx, ry, angle, largeArcFlag, sweepFlag, x, y) => {
-{
     var curves = mxUtils.arcToCurves(this.lastX, this.lastY, rx, ry, angle, largeArcFlag, sweepFlag, x, y);
 
-  if (curves != null)
+    if (curves != null) {
-  {
+      for (var i = 0; i < curves.length; i += 6) {
-    for (var i = 0; i < curves.length; i += 6) 
-    {
         this.curveTo(curves[i], curves[i + 1], curves[i + 2],
             curves[i + 3], curves[i + 4], curves[i + 5]);
       }
@@ -629,8 +581,7 @@ mxAbstractCanvas2arcTo = (rx, ry, angle, largeArcFlag, sweepFlag, x, y)=>
    *
    * Closes the current path.
    */
-mxAbstractCanvas2close = (x1, y1, x2, y2, x3, y3)=>
+  mxAbstractCanvas2close = (x1, y1, x2, y2, x3, y3) => {
-{
     this.addOp(this.closeOp);
   };
 
@@ -639,4 +590,8 @@ mxAbstractCanvas2close = (x1, y1, x2, y2, x3, y3)=>
    *
    * Empty implementation for backwards compatibility. This will be removed.
    */
-mxAbstractCanvas2end = ()=> { };
+  mxAbstractCanvas2end = () => {
+  };
+}
+
+export default mxAbstractCanvas2D;

src/js/util/mxAnimation.js

@@ -2,31 +2,11 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
+import mxUtils from "./mxUtils";
- *
+import mxEventSource from "./mxEventSource";
- * Class: mxAnimation
+import mxEventObject from "./mxEventObject";
- * 
- * Implements a basic animation in JavaScript.
- * 
- * Constructor: mxAnimation
- * 
- * Constructs an animation.
- * 
- * Parameters:
- * 
- * graph - Reference to the enclosing <mxGraph>.
- */
-function mxAnimation(delay)
-{
-  this.delay = (delay != null) ? delay : 20;
-};
-
-/**
- * Extends mxEventSource.
- */
-mxAnimation.prototype = new mxEventSource();
-constructor = mxAnimation;
 
+class mxAnimation extends mxEventSource {
   /**
    * Variable: delay
    *
@@ -41,13 +21,30 @@ delay = null;
    */
   thread = null;
 
+  /**
+   *
+   * Class: mxAnimation
+   *
+   * Implements a basic animation in JavaScript.
+   *
+   * Constructor: mxAnimation
+   *
+   * Constructs an animation.
+   *
+   * Parameters:
+   *
+   * graph - Reference to the enclosing <mxGraph>.
+   */
+  constructor(delay) {
+    this.delay = (delay != null) ? delay : 20;
+  };
+
   /**
    * Function: isRunning
    *
    * Returns true if the animation is running.
    */
-isRunning = ()=>
+  isRunning = () => {
-{
     return this.thread != null;
   };
 
@@ -56,10 +53,8 @@ isRunning = ()=>
    *
    * Starts the animation by repeatedly invoking updateAnimation.
    */
-startAnimation = ()=>
+  startAnimation = () => {
-{
+    if (this.thread == null) {
-  if (this.thread == null)
-  {
       this.thread = window.setInterval(mxUtils.bind(this, this.updateAnimation), this.delay);
     }
   };
@@ -71,8 +66,7 @@ startAnimation = ()=>
    * when finished, startAnimation to resume. This is called whenever the
    * timer fires and fires an mxEvent.EXECUTE event with no properties.
    */
-updateAnimation = ()=>
+  updateAnimation = () => {
-{
     this.fireEvent(new mxEventObject(mxEvent.EXECUTE));
   };
 
@@ -81,12 +75,13 @@ updateAnimation = ()=>
    *
    * Stops the animation by deleting the timer and fires an <mxEvent.DONE>.
    */
-stopAnimation = ()=>
+  stopAnimation = () => {
-{
+    if (this.thread != null) {
-  if (this.thread != null)
-  {
       window.clearInterval(this.thread);
       this.thread = null;
       this.fireEvent(new mxEventObject(mxEvent.DONE));
     }
   };
+}
+
+export default mxAnimation;

src/js/util/mxAutoSaveManager.js

@@ -2,51 +2,10 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
+import mxEventSource from "./mxEventSource";
- * Class: mxAutoSaveManager
+import mxUtils from "./mxUtils";
- * 
- * Manager for automatically saving diagrams. The <save> hook must be
- * implemented.
- * 
- * Example:
- * 
- * (code)
- * var mgr = new mxAutoSaveManager(editor.graph);
- * mgr.save = ()=>
- * {
- *   mxLog.show();
- *   mxLog.debug('save');
- * };
- * (end)
- * 
- * Constructor: mxAutoSaveManager
- *
- * Constructs a new automatic layout for the given graph.
- *
- * Arguments:
- * 
- * graph - Reference to the enclosing graph. 
- */
-function mxAutoSaveManager(graph)
-{
-  // Notifies the manager of a change
-  this.changeHandler = mxUtils.bind(this, (sender, evt)=>
-  {
-    if (this.isEnabled())
-    {
-      this.graphModelChanged(evt.getProperty('edit').changes);
-    }
-  });
-
-  this.setGraph(graph);
-};
-
-/**
- * Extends mxEventSource.
- */
-mxAutoSaveManager.prototype = new mxEventSource();
-constructor = mxAutoSaveManager;
 
+class mxAutoSaveManager extends mxEventSource {
   /**
    * Variable: graph
    *
@@ -111,14 +70,49 @@ enabled = true;
    */
   changeHandler = null;
 
+  /**
+   * Class: mxAutoSaveManager
+   *
+   * Manager for automatically saving diagrams. The <save> hook must be
+   * implemented.
+   *
+   * Example:
+   *
+   * (code)
+   * var mgr = new mxAutoSaveManager(editor.graph);
+   * mgr.save = ()=>
+   * {
+   *   mxLog.show();
+   *   mxLog.debug('save');
+   * };
+   * (end)
+   *
+   * Constructor: mxAutoSaveManager
+   *
+   * Constructs a new automatic layout for the given graph.
+   *
+   * Arguments:
+   *
+   * graph - Reference to the enclosing graph.
+   */
+  constructor(graph) {
+    // Notifies the manager of a change
+    this.changeHandler = mxUtils.bind(this, (sender, evt) => {
+      if (this.isEnabled()) {
+        this.graphModelChanged(evt.getProperty('edit').changes);
+      }
+    });
+
+    this.setGraph(graph);
+  };
+
   /**
    * Function: isEnabled
    *
    * Returns true if events are handled. This implementation
    * returns <enabled>.
    */
-isEnabled = ()=>
+  isEnabled = () => {
-{
     return this.enabled;
   };
 
@@ -132,8 +126,7 @@ isEnabled = ()=>
    *
    * enabled - Boolean that specifies the new enabled state.
    */
-setEnabled = (value)=>
+  setEnabled = (value) => {
-{
     this.enabled = value;
   };
 
@@ -142,17 +135,14 @@ setEnabled = (value)=>
    *
    * Sets the graph that the layouts operate on.
    */
-setGraph = (graph)=>
+  setGraph = (graph) => {
-{
+    if (this.graph != null) {
-  if (this.graph != null)
-  {
       this.graph.getModel().removeListener(this.changeHandler);
     }
 
     this.graph = graph;
 
-  if (this.graph != null)
+    if (this.graph != null) {
-  {
       this.graph.getModel().addListener(mxEvent.CHANGE, this.changeHandler);
     }
   };
@@ -162,8 +152,7 @@ setGraph = (graph)=>
    *
    * Empty hook that is called if the graph should be saved.
    */
-save = ()=>
+  save = () => {
-{
     // empty
   };
 
@@ -172,20 +161,16 @@ save = ()=>
    *
    * Invoked when the graph model has changed.
    */
-graphModelChanged = (changes)=>
+  graphModelChanged = (changes) => {
-{
     var now = new Date().getTime();
     var dt = (now - this.lastSnapshot) / 1000;
 
     if (dt > this.autoSaveDelay ||
         (this.ignoredChanges >= this.autoSaveThreshold &&
-     dt > this.autoSaveThrottle))
+            dt > this.autoSaveThrottle)) {
-  {
       this.save();
       this.reset();
-  }
+    } else {
-  else
-  {
       // Increments the number of ignored changes
       this.ignoredChanges++;
     }
@@ -196,8 +181,7 @@ graphModelChanged = (changes)=>
    *
    * Resets all counters.
    */
-reset = ()=>
+  reset = () => {
-{
     this.lastSnapshot = new Date().getTime();
     this.ignoredChanges = 0;
   };
@@ -207,7 +191,9 @@ reset = ()=>
    *
    * Removes all handlers from the <graph> and deletes the reference to it.
    */
-destroy = ()=>
+  destroy = () => {
-{
     this.setGraph(null);
   };
+}
+
+export default mxAutoSaveManager;

src/js/util/mxClipboard.js

@@ -2,8 +2,7 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-var mxClipboard =
+var mxClipboard = {
-{
   /**
    * Class: mxClipboard
    * 
@@ -217,5 +216,6 @@ var mxClipboard =
     
     return cells;
   }
-
 };
+
+export default mxClipboard;

src/js/util/mxConstants.js

@@ -2,8 +2,8 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
- var mxConstants =
+
- {
+var mxConstants = {
   /**
    * Class: mxConstants
    * 
@@ -2336,3 +2336,5 @@
    */
   PERIMETER_TRIANGLE: 'trianglePerimeter'
 };
+
+export default mxConstants;

src/js/util/mxDictionary.js

@@ -12,8 +12,9 @@
  *
  * Constructs a new dictionary which allows object to be used as keys.
  */
-function mxDictionary()
+
-{
+class mxDictionary {
+  constructor() {
     this.clear();
   };
 
@@ -29,8 +30,7 @@ map = null;
    *
    * Clears the dictionary.
    */
-clear = ()=>
+  clear = () => {
-{
     this.map = {};
   };
 
@@ -39,8 +39,7 @@ clear = ()=>
    *
    * Returns the value for the given key.
    */
-get = (key)=>
+  get = (key) => {
-{
     var id = mxObjectIdentity.get(key);
 
     return this.map[id];
@@ -52,8 +51,7 @@ get = (key)=>
    * Stores the value under the given key and returns the previous
    * value for that key.
    */
-put = (key, value)=>
+  put = (key, value) => {
-{
     var id = mxObjectIdentity.get(key);
     var previous = this.map[id];
     this.map[id] = value;
@@ -67,8 +65,7 @@ put = (key, value)=>
    * Removes the value for the given key and returns the value that
    * has been removed.
    */
-remove = (key)=>
+  remove = (key) => {
-{
     var id = mxObjectIdentity.get(key);
     var previous = this.map[id];
     delete this.map[id];
@@ -81,12 +78,10 @@ remove = (key)=>
    *
    * Returns all keys as an array.
    */
-getKeys = ()=>
+  getKeys = () => {
-{
     var result = [];
 
-  for (var key in this.map)
+    for (var key in this.map) {
-  {
       result.push(key);
     }
 
@@ -98,12 +93,10 @@ getKeys = ()=>
    *
    * Returns all values as an array.
    */
-getValues = ()=>
+  getValues = () => {
-{
     var result = [];
 
-  for (var key in this.map)
+    for (var key in this.map) {
-  {
       result.push(this.map[key]);
     }
 
@@ -121,10 +114,11 @@ getValues = ()=>
    *
    * visitor - A function that takes the key and value as arguments.
    */
-visit = (visitor)=>
+  visit = (visitor) => {
-{
+    for (var key in this.map) {
-  for (var key in this.map)
-  {
       visitor(key, this.map[key]);
     }
   };
+}
+
+export default mxDictionary;

src/js/util/mxDivResizer.js

@@ -37,29 +37,24 @@
  * container - Optional Container that contains the div. Default is the
  * window.
  */
-function mxDivResizer(div, container)
+class mxDivResizer {
-{
+  constructor(div, container) {
-  if (div.nodeName.toLowerCase() == 'div')
+    if (div.nodeName.toLowerCase() == 'div') {
-  {
+      if (container == null) {
-    if (container == null)
-    {
         container = window;
       }
 
       this.div = div;
       var style = mxUtils.getCurrentStyle(div);
 
-    if (style != null)
+      if (style != null) {
-    {
         this.resizeWidth = style.width == 'auto';
         this.resizeHeight = style.height == 'auto';
       }
 
       mxEvent.addListener(container, 'resize',
-      mxUtils.bind(this, (evt)=>
+          mxUtils.bind(this, (evt) => {
-      {
+            if (!this.handlingResize) {
-        if (!this.handlingResize)
-        {
               this.handlingResize = true;
               this.resize();
               this.handlingResize = false;
@@ -97,8 +92,7 @@ handlingResize = false;
    *
    * Updates the style of the DIV after the window has been resized.
    */
-resize = ()=>
+  resize = () => {
-{
     var w = this.getDocumentWidth();
     var h = this.getDocumentHeight();
 
@@ -112,8 +106,7 @@ resize = ()=>
         !isNaN(r) &&
         l >= 0 &&
         r >= 0 &&
-    w - r - l > 0)
+        w - r - l > 0) {
-  {
       this.div.style.width = (w - r - l) + 'px';
     }
 
@@ -122,8 +115,7 @@ resize = ()=>
         !isNaN(b) &&
         t >= 0 &&
         b >= 0 &&
-    h - t - b > 0)
+        h - t - b > 0) {
-  {
       this.div.style.height = (h - t - b) + 'px';
     }
   };
@@ -134,8 +126,7 @@ resize = ()=>
    * Hook for subclassers to return the width of the document (without
    * scrollbars).
    */
-getDocumentWidth = ()=>
+  getDocumentWidth = () => {
-{
     return document.body.clientWidth;
   };
 
@@ -145,7 +136,9 @@ getDocumentWidth = ()=>
    * Hook for subclassers to return the height of the document (without
    * scrollbars).
    */
-getDocumentHeight = ()=>
+  getDocumentHeight = () => {
-{
     return document.body.clientHeight;
   };
+}
+
+export default mxDivResizer;

src/js/util/mxDragSource.js

@@ -2,48 +2,11 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
+import mxRectangle from "./mxRectangle";
- * Class: mxDragSource
+import mxCellHighlight from "../handler/mxCellHighlight";
- * 
+import mxUtils from "./mxUtils";
- * Wrapper to create a drag source from a DOM element so that the element can
- * be dragged over a graph and dropped into the graph as a new cell.
- * 
- * Problem is that in the dropHandler the current preview location is not
- * available, so the preview and the dropHandler must match.
- * 
- * Constructor: mxDragSource
- * 
- * Constructs a new drag source for the given element.
- */
-function mxDragSource(element, dropHandler)
-{
-  this.element = element;
-  this.dropHandler = dropHandler;
-  
-  // Handles a drag gesture on the element
-  mxEvent.addGestureListeners(element, mxUtils.bind(this, (evt)=>
-  {
-    this.mouseDown(evt);
-  }));
-  
-  // Prevents native drag and drop
-  mxEvent.addListener(element, 'dragstart', (evt)=>
-  {
-    mxEvent.consume(evt);
-  });
-  
-  this.eventConsumer = (sender, evt)=>
-  {
-    var evtName = evt.getProperty('eventName');
-    var me = evt.getProperty('event');
-    
-    if (evtName != mxEvent.MOUSE_DOWN)
-    {
-      me.consume();
-    }
-  };
-};
 
+class mxDragSource {
   /**
    * Variable: element
    *
@@ -180,13 +143,49 @@ dragElementOpacity = 70;
    */
   checkEventSource = true;
 
+  /**
+   * Class: mxDragSource
+   *
+   * Wrapper to create a drag source from a DOM element so that the element can
+   * be dragged over a graph and dropped into the graph as a new cell.
+   *
+   * Problem is that in the dropHandler the current preview location is not
+   * available, so the preview and the dropHandler must match.
+   *
+   * Constructor: mxDragSource
+   *
+   * Constructs a new drag source for the given element.
+   */
+  constructor(element, dropHandler) {
+    this.element = element;
+    this.dropHandler = dropHandler;
+
+    // Handles a drag gesture on the element
+    mxEvent.addGestureListeners(element, mxUtils.bind(this, (evt) => {
+      this.mouseDown(evt);
+    }));
+
+    // Prevents native drag and drop
+    mxEvent.addListener(element, 'dragstart', (evt) => {
+      mxEvent.consume(evt);
+    });
+
+    this.eventConsumer = (sender, evt) => {
+      var evtName = evt.getProperty('eventName');
+      var me = evt.getProperty('event');
+
+      if (evtName != mxEvent.MOUSE_DOWN) {
+        me.consume();
+      }
+    };
+  };
+
   /**
    * Function: isEnabled
    *
    * Returns <enabled>.
    */
-isEnabled = ()=>
+  isEnabled = () => {
-{
     return this.enabled;
   };
 
@@ -195,8 +194,7 @@ isEnabled = ()=>
    *
    * Sets <enabled>.
    */
-setEnabled = (value)=>
+  setEnabled = (value) => {
-{
     this.enabled = value;
   };
 
@@ -205,8 +203,7 @@ setEnabled = (value)=>
    *
    * Returns <guidesEnabled>.
    */
-isGuidesEnabled = ()=>
+  isGuidesEnabled = () => {
-{
     return this.guidesEnabled;
   };
 
@@ -215,8 +212,7 @@ isGuidesEnabled = ()=>
    *
    * Sets <guidesEnabled>.
    */
-setGuidesEnabled = (value)=>
+  setGuidesEnabled = (value) => {
-{
     this.guidesEnabled = value;
   };
 
@@ -225,8 +221,7 @@ setGuidesEnabled = (value)=>
    *
    * Returns <gridEnabled>.
    */
-isGridEnabled = ()=>
+  isGridEnabled = () => {
-{
     return this.gridEnabled;
   };
 
@@ -235,8 +230,7 @@ isGridEnabled = ()=>
    *
    * Sets <gridEnabled>.
    */
-setGridEnabled = (value)=>
+  setGridEnabled = (value) => {
-{
     this.gridEnabled = value;
   };
 
@@ -246,8 +240,7 @@ setGridEnabled = (value)=>
    * Returns the graph for the given mouse event. This implementation returns
    * null.
    */
-getGraphForEvent = (evt)=>
+  getGraphForEvent = (evt) => {
-{
     return null;
   };
 
@@ -257,8 +250,7 @@ getGraphForEvent = (evt)=>
    * Returns the drop target for the given graph and coordinates. This
    * implementation uses <mxGraph.getCellAt>.
    */
-getDropTarget = (graph, x, y, evt)=>
+  getDropTarget = (graph, x, y, evt) => {
-{
     return graph.getCellAt(x, y);
   };
 
@@ -268,8 +260,7 @@ getDropTarget = (graph, x, y, evt)=>
    * Creates and returns a clone of the <dragElementPrototype> or the <element>
    * if the former is not defined.
    */
-createDragElement = (evt)=>
+  createDragElement = (evt) => {
-{
     return this.element.cloneNode(true);
   };
 
@@ -279,8 +270,7 @@ createDragElement = (evt)=>
    * Creates and returns an element which can be used as a preview in the given
    * graph.
    */
-createPreviewElement = (graph)=>
+  createPreviewElement = (graph) => {
-{
     return null;
   };
 
@@ -289,8 +279,7 @@ createPreviewElement = (graph)=>
    *
    * Returns true if this drag source is active.
    */
-isActive = ()=>
+  isActive = () => {
-{
     return this.mouseMoveHandler != null;
   };
 
@@ -299,10 +288,8 @@ isActive = ()=>
    *
    * Stops and removes everything and restores the state of the object.
    */
-reset = ()=>
+  reset = () => {
-{
+    if (this.currentGraph != null) {
-  if (this.currentGraph != null)
-  {
       this.dragExit(this.currentGraph);
       this.currentGraph = null;
     }
@@ -333,17 +320,14 @@ reset = ()=>
    * };
    * (end)
    */
-mouseDown = (evt)=>
+  mouseDown = (evt) => {
-{
+    if (this.enabled && !mxEvent.isConsumed(evt) && this.mouseMoveHandler == null) {
-  if (this.enabled && !mxEvent.isConsumed(evt) && this.mouseMoveHandler == null)
-  {
       this.startDrag(evt);
       this.mouseMoveHandler = mxUtils.bind(this, this.mouseMove);
       this.mouseUpHandler = mxUtils.bind(this, this.mouseUp);
       mxEvent.addGestureListeners(document, null, this.mouseMoveHandler, this.mouseUpHandler);
 
-    if (mxClient.IS_TOUCH && !mxEvent.isMouseEvent(evt))
+      if (mxClient.IS_TOUCH && !mxEvent.isMouseEvent(evt)) {
-    {
         this.eventSource = mxEvent.getSource(evt);
         mxEvent.addGestureListeners(this.eventSource, null, this.mouseMoveHandler, this.mouseUpHandler);
       }
@@ -355,15 +339,13 @@ mouseDown = (evt)=>
    *
    * Creates the <dragElement> using <createDragElement>.
    */
-startDrag = (evt)=>
+  startDrag = (evt) => {
-{
     this.dragElement = this.createDragElement(evt);
     this.dragElement.style.position = 'absolute';
     this.dragElement.style.zIndex = this.dragElementZIndex;
     mxUtils.setOpacity(this.dragElement, this.dragElementOpacity);
 
-  if (this.checkEventSource && mxClient.IS_SVG)
+    if (this.checkEventSource && mxClient.IS_SVG) {
-  {
       this.dragElement.style.pointerEvents = 'none';
     }
   };
@@ -373,8 +355,7 @@ startDrag = (evt)=>
    *
    * Invokes <removeDragElement>.
    */
-stopDrag = ()=>
+  stopDrag = () => {
-{
     // LATER: This used to have a mouse event. If that is still needed we need to add another
     // final call to the DnD protocol to add a cleanup step in the case of escape press, which
     // is not associated with a mouse event and which currently calles this method.
@@ -386,12 +367,9 @@ stopDrag = ()=>
    *
    * Removes and destroys the <dragElement>.
    */
-removeDragElement = ()=>
+  removeDragElement = () => {
-{
+    if (this.dragElement != null) {
-  if (this.dragElement != null)
+      if (this.dragElement.parentNode != null) {
-  {
-    if (this.dragElement.parentNode != null)
-    {
         this.dragElement.parentNode.removeChild(this.dragElement);
       }
 
@@ -404,8 +382,7 @@ removeDragElement = ()=>
    *
    * Returns the topmost element under the given event.
    */
-getElementForEvent = (evt)=>
+  getElementForEvent = (evt) => {
-{
     return ((mxEvent.isTouchEvent(evt) || mxEvent.isPenEvent(evt)) ?
         document.elementFromPoint(mxEvent.getClientX(evt), mxEvent.getClientY(evt)) :
         mxEvent.getSource(evt));
@@ -416,18 +393,15 @@ getElementForEvent = (evt)=>
    *
    * Returns true if the given graph contains the given event.
    */
-graphContainsEvent = (graph, evt)=>
+  graphContainsEvent = (graph, evt) => {
-{
     var x = mxEvent.getClientX(evt);
     var y = mxEvent.getClientY(evt);
     var offset = mxUtils.getOffset(graph.container);
     var origin = mxUtils.getScrollOrigin();
     var elt = this.getElementForEvent(evt);
 
-  if (this.checkEventSource)
+    if (this.checkEventSource) {
-  {
+      while (elt != null && elt != graph.container) {
-    while (elt != null && elt != graph.container)
-    {
         elt = elt.parentNode;
       }
     }
@@ -445,50 +419,41 @@ graphContainsEvent = (graph, evt)=>
    * <currentGraph>, calling <dragEnter> and <dragExit> on the new and old graph,
    * respectively, and invokes <dragOver> if <currentGraph> is not null.
    */
-mouseMove = (evt)=>
+  mouseMove = (evt) => {
-{
     var graph = this.getGraphForEvent(evt);
 
     // Checks if event is inside the bounds of the graph container
-  if (graph != null && !this.graphContainsEvent(graph, evt))
+    if (graph != null && !this.graphContainsEvent(graph, evt)) {
-  {
       graph = null;
     }
 
-  if (graph != this.currentGraph)
+    if (graph != this.currentGraph) {
-  {
+      if (this.currentGraph != null) {
-    if (this.currentGraph != null)
-    {
         this.dragExit(this.currentGraph, evt);
       }
 
       this.currentGraph = graph;
 
-    if (this.currentGraph != null)
+      if (this.currentGraph != null) {
-    {
         this.dragEnter(this.currentGraph, evt);
       }
     }
 
-  if (this.currentGraph != null)
+    if (this.currentGraph != null) {
-  {
       this.dragOver(this.currentGraph, evt);
     }
 
-  if (this.dragElement != null && (this.previewElement == null || this.previewElement.style.visibility != 'visible'))
+    if (this.dragElement != null && (this.previewElement == null || this.previewElement.style.visibility != 'visible')) {
-  {
       var x = mxEvent.getClientX(evt);
       var y = mxEvent.getClientY(evt);
 
-    if (this.dragElement.parentNode == null)
+      if (this.dragElement.parentNode == null) {
-    {
         document.body.appendChild(this.dragElement);
       }
 
       this.dragElement.style.visibility = 'visible';
 
-    if (this.dragOffset != null)
+      if (this.dragOffset != null) {
-    {
         x += this.dragOffset.x;
         y += this.dragOffset.y;
       }
@@ -497,9 +462,7 @@ mouseMove = (evt)=>
 
       this.dragElement.style.left = (x + offset.x) + 'px';
       this.dragElement.style.top = (y + offset.y) + 'px';
-  }
+    } else if (this.dragElement != null) {
-  else if (this.dragElement != null)
-  {
       this.dragElement.style.visibility = 'hidden';
     }
 
@@ -512,13 +475,10 @@ mouseMove = (evt)=>
    * Processes the mouse up event and invokes <drop>, <dragExit> and <stopDrag>
    * as required.
    */
-mouseUp = (evt)=>
+  mouseUp = (evt) => {
-{
+    if (this.currentGraph != null) {
-  if (this.currentGraph != null)
-  {
       if (this.currentPoint != null && (this.previewElement == null ||
-      this.previewElement.style.visibility != 'hidden'))
+          this.previewElement.style.visibility != 'hidden')) {
-    {
         var scale = this.currentGraph.view.scale;
         var tr = this.currentGraph.view.translate;
         var x = this.currentPoint.x / scale - tr.x;
@@ -542,10 +502,8 @@ mouseUp = (evt)=>
    *
    * Actives the given graph as a drop target.
    */
-removeListeners = ()=>
+  removeListeners = () => {
-{
+    if (this.eventSource != null) {
-  if (this.eventSource != null)
-  {
       mxEvent.removeGestureListeners(this.eventSource, null, this.mouseMoveHandler, this.mouseUpHandler);
       this.eventSource = null;
     }
@@ -560,25 +518,21 @@ removeListeners = ()=>
    *
    * Actives the given graph as a drop target.
    */
-dragEnter = (graph, evt)=>
+  dragEnter = (graph, evt) => {
-{
     graph.isMouseDown = true;
     graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
     this.previewElement = this.createPreviewElement(graph);
 
-  if (this.previewElement != null && this.checkEventSource && mxClient.IS_SVG)
+    if (this.previewElement != null && this.checkEventSource && mxClient.IS_SVG) {
-  {
       this.previewElement.style.pointerEvents = 'none';
     }
 
     // Guide is only needed if preview element is used
-  if (this.isGuidesEnabled() && this.previewElement != null)
+    if (this.isGuidesEnabled() && this.previewElement != null) {
-  {
       this.currentGuide = new mxGuide(graph, graph.graphHandler.getGuideStates());
     }
 
-  if (this.highlightDropTargets)
+    if (this.highlightDropTargets) {
-  {
       this.currentHighlight = new mxCellHighlight(graph, mxConstants.DROP_TARGET_COLOR);
     }
 
@@ -591,8 +545,7 @@ dragEnter = (graph, evt)=>
    *
    * Deactivates the given graph as a drop target.
    */
-dragExit = (graph, evt)=>
+  dragExit = (graph, evt) => {
-{
     this.currentDropTarget = null;
     this.currentPoint = null;
     graph.isMouseDown = false;
@@ -600,24 +553,20 @@ dragExit = (graph, evt)=>
     // Consumes all events in the current graph before they are fired
     graph.removeListener(this.eventConsumer);
 
-  if (this.previewElement != null)
+    if (this.previewElement != null) {
-  {
+      if (this.previewElement.parentNode != null) {
-    if (this.previewElement.parentNode != null)
-    {
         this.previewElement.parentNode.removeChild(this.previewElement);
       }
 
       this.previewElement = null;
     }
 
-  if (this.currentGuide != null)
+    if (this.currentGuide != null) {
-  {
       this.currentGuide.destroy();
       this.currentGuide = null;
     }
 
-  if (this.currentHighlight != null)
+    if (this.currentHighlight != null) {
-  {
       this.currentHighlight.destroy();
       this.currentHighlight = null;
     }
@@ -629,31 +578,26 @@ dragExit = (graph, evt)=>
    * Implements autoscroll, updates the <currentPoint>, highlights any drop
    * targets and updates the preview.
    */
-dragOver = (graph, evt)=>
+  dragOver = (graph, evt) => {
-{
     var offset = mxUtils.getOffset(graph.container);
     var origin = mxUtils.getScrollOrigin(graph.container);
     var x = mxEvent.getClientX(evt) - offset.x + origin.x - graph.panDx;
     var y = mxEvent.getClientY(evt) - offset.y + origin.y - graph.panDy;
 
-  if (graph.autoScroll && (this.autoscroll == null || this.autoscroll))
+    if (graph.autoScroll && (this.autoscroll == null || this.autoscroll)) {
-  {
       graph.scrollPointToVisible(x, y, graph.autoExtend);
     }
 
     // Highlights the drop target under the mouse
-  if (this.currentHighlight != null && graph.isDropEnabled())
+    if (this.currentHighlight != null && graph.isDropEnabled()) {
-  {
       this.currentDropTarget = this.getDropTarget(graph, x, y, evt);
       var state = graph.getView().getState(this.currentDropTarget);
       this.currentHighlight.highlight(state);
     }
 
     // Updates the location of the preview
-  if (this.previewElement != null)
+    if (this.previewElement != null) {
-  {
+      if (this.previewElement.parentNode == null) {
-    if (this.previewElement.parentNode == null)
-    {
         graph.container.appendChild(this.previewElement);
 
         this.previewElement.style.zIndex = '3';
@@ -664,8 +608,7 @@ dragOver = (graph, evt)=>
       var hideGuide = true;
 
       // Grid and guides
-    if (this.currentGuide != null && this.currentGuide.isEnabledForEvent(evt))
+      if (this.currentGuide != null && this.currentGuide.isEnabledForEvent(evt)) {
-    {
         // LATER: HTML preview appears smaller than SVG preview
         var w = parseInt(this.previewElement.style.width);
         var h = parseInt(this.previewElement.style.height);
@@ -675,9 +618,7 @@ dragOver = (graph, evt)=>
         hideGuide = false;
         x = delta.x;
         y = delta.y;
-    }
+      } else if (gridEnabled) {
-    else if (gridEnabled)
-    {
         var scale = graph.view.scale;
         var tr = graph.view.translate;
         var off = graph.gridSize / 2;
@@ -685,13 +626,11 @@ dragOver = (graph, evt)=>
         y = (graph.snap(y / scale - tr.y - off) + tr.y) * scale;
       }
 
-    if (this.currentGuide != null && hideGuide)
+      if (this.currentGuide != null && hideGuide) {
-    {
         this.currentGuide.hide();
       }
 
-    if (this.previewOffset != null)
+      if (this.previewOffset != null) {
-    {
         x += this.previewOffset.x;
         y += this.previewOffset.y;
       }
@@ -710,16 +649,17 @@ dragOver = (graph, evt)=>
    * Returns the drop target for the given graph and coordinates. This
    * implementation uses <mxGraph.getCellAt>.
    */
-drop = (graph, evt, dropTarget, x, y)=>
+  drop = (graph, evt, dropTarget, x, y) => {
-{
     this.dropHandler.apply(this, arguments);
 
     // Had to move this to after the insert because it will
     // affect the scrollbars of the window in IE to try and
     // make the complete container visible.
     // LATER: Should be made optional.
-  if (graph.container.style.visibility != 'hidden')
+    if (graph.container.style.visibility != 'hidden') {
-  {
       graph.container.focus();
     }
   };
+}
+
+export default mxDragSource;

src/js/util/mxEffects.js

@@ -2,9 +2,7 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-var mxEffects =
+var mxEffects = {
-{
-
   /**
    * Class: mxEffects
    *
@@ -37,37 +35,29 @@ var mxEffects =
    * done - Optional function argument that is invoked after the
    * last step of the animation.
    */
-  animateChanges: (graph, changes, done)=>
+  animateChanges: (graph, changes, done) => {
-  {
     var maxStep = 10;
     var step = 0;
 
-    var animate = ()=> 
+    var animate = () => {
-    {
       var isRequired = false;
 
-      for (var i = 0; i < changes.length; i++)
+      for (var i = 0; i < changes.length; i++) {
-      {
         var change = changes[i];
 
         if (change instanceof mxGeometryChange ||
             change instanceof mxTerminalChange ||
             change instanceof mxValueChange ||
             change instanceof mxChildChange ||
-          change instanceof mxStyleChange)
+            change instanceof mxStyleChange) {
-        {
           var state = graph.getView().getState(change.cell || change.child, false);
 
-          if (state != null)
+          if (state != null) {
-          {
             isRequired = true;
 
-            if (change.constructor != mxGeometryChange || graph.model.isEdge(change.cell))
+            if (change.constructor != mxGeometryChange || graph.model.isEdge(change.cell)) {
-            {
               mxUtils.setOpacity(state.shape.node, 100 * step / maxStep);
-            }
+            } else {
-            else
-            {
               var scale = graph.getView().scale;
 
               var dx = (change.geometry.x - change.previous.x) * scale;
@@ -76,15 +66,12 @@ var mxEffects =
               var sx = (change.geometry.width - change.previous.width) * scale;
               var sy = (change.geometry.height - change.previous.height) * scale;
 
-              if (step == 0)
+              if (step == 0) {
-              {
                 state.x -= dx;
                 state.y -= dy;
                 state.width -= sx;
                 state.height -= sy;
-              }
+              } else {
-              else
-              {
                 state.x += dx / maxStep;
                 state.y += dy / maxStep;
                 state.width += sx / maxStep;
@@ -100,13 +87,10 @@ var mxEffects =
         }
       }
 
-      if (step < maxStep && isRequired)
+      if (step < maxStep && isRequired) {
-      {
         step++;
         window.setTimeout(animate, delay);
-      }
+      } else if (done != null) {
-      else if (done != null)
-      {
         done();
       }
     };
@@ -126,18 +110,15 @@ var mxEffects =
    * cell - <mxCell> to set the opacity for.
    * opacity - New value for the opacity in %.
    */
-    cascadeOpacity: (graph, cell, opacity)=>
+  cascadeOpacity: (graph, cell, opacity) => {
-  {
     // Fades all children
     var childCount = graph.model.getChildCount(cell);
 
-    for (var i=0; i<childCount; i++)
+    for (var i = 0; i < childCount; i++) {
-    {
       var child = graph.model.getChildAt(cell, i);
       var childState = graph.getView().getState(child);
 
-      if (childState != null)
+      if (childState != null) {
-      {
         mxUtils.setOpacity(childState.shape.node, opacity);
         mxEffects.cascadeOpacity(graph, child, opacity);
       }
@@ -146,14 +127,11 @@ var mxEffects =
     // Fades all connected edges
     var edges = graph.model.getEdges(cell);
 
-    if (edges != null)
+    if (edges != null) {
-    {
+      for (var i = 0; i < edges.length; i++) {
-      for (var i=0; i<edges.length; i++)
-      {
         var edgeState = graph.getView().getState(edges[i]);
 
-        if (edgeState != null)
+        if (edgeState != null) {
-        {
           mxUtils.setOpacity(edgeState.shape.node, opacity);
         }
       }
@@ -165,8 +143,7 @@ var mxEffects =
    *
    * Asynchronous fade-out operation.
    */
-  fadeOut: (node, from, remove, step, delay, isEnabled)=>
+  fadeOut: (node, from, remove, step, delay, isEnabled) => {
-  {
     step = step || 40;
     delay = delay || 30;
 
@@ -174,38 +151,30 @@ var mxEffects =
 
     mxUtils.setOpacity(node, opacity);
 
-    if (isEnabled || isEnabled == null)
+    if (isEnabled || isEnabled == null) {
-    {
+      var f = () => {
-      var f = ()=>
-      {
         opacity = Math.max(opacity - step, 0);
         mxUtils.setOpacity(node, opacity);
 
-        if (opacity > 0)
+        if (opacity > 0) {
-        {
           window.setTimeout(f, delay);
-        }
+        } else {
-        else
-        {
           node.style.visibility = 'hidden';
 
-          if (remove && node.parentNode)
+          if (remove && node.parentNode) {
-          {
             node.parentNode.removeChild(node);
           }
         }
       };
       window.setTimeout(f, delay);
-    }
+    } else {
-    else
-    {
       node.style.visibility = 'hidden';
 
-      if (remove && node.parentNode)
+      if (remove && node.parentNode) {
-      {
         node.parentNode.removeChild(node);
       }
     }
   }
-
 };
+
+export default mxEffects;

src/js/util/mxEventObject.js

@@ -2,6 +2,8 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+
+class mxEventObject {
   /**
    * Class: mxEventObject
    *
@@ -25,15 +27,12 @@
    * new mxEventObject("eventName", key1, val1, .., keyN, valN)
    * (end)
    */
-function mxEventObject(name)
+  constructor(name) {
-{
     this.name = name;
     this.properties = [];
 
-  for (var i = 1; i < arguments.length; i += 2)
+    for (var i = 1; i < arguments.length; i += 2) {
-  {
+      if (arguments[i + 1] != null) {
-    if (arguments[i + 1] != null)
-    {
         this.properties[arguments[i]] = arguments[i + 1];
       }
     }
@@ -65,8 +64,7 @@ consumed = false;
    *
    * Returns <name>.
    */
-getName = ()=>
+  getName = () => {
-{
     return this.name;
   };
 
@@ -75,8 +73,7 @@ getName = ()=>
    *
    * Returns <properties>.
    */
-getProperties = ()=>
+  getProperties = () => {
-{
     return this.properties;
   };
 
@@ -85,8 +82,7 @@ getProperties = ()=>
    *
    * Returns the property for the given key.
    */
-getProperty = (key)=>
+  getProperty = (key) => {
-{
     return this.properties[key];
   };
 
@@ -95,8 +91,7 @@ getProperty = (key)=>
    *
    * Returns true if the event has been consumed.
    */
-isConsumed = ()=>
+  isConsumed = () => {
-{
     return this.consumed;
   };
 
@@ -105,7 +100,9 @@ isConsumed = ()=>
    *
    * Consumes the event.
    */
-consume = ()=>
+  consume = () => {
-{
     this.consumed = true;
   };
+}
+
+export default mxEventObject;

src/js/util/mxEventSource.js

@@ -2,33 +2,10 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- * Class: mxEventSource
- *
- * Base class for objects that dispatch named events. To create a subclass that
- * inherits from mxEventSource, the following code is used.
- *
- * (code)
- * function MyClass() { };
- *
- * MyClass.prototype = new mxEventSource();
- * constructor = MyClass;
- * (end)
- *
- * Known Subclasses:
- *
- * <mxGraphModel>, <mxGraph>, <mxGraphView>, <mxEditor>, <mxCellOverlay>,
- * <mxToolbar>, <mxWindow>
- * 
- * Constructor: mxEventSource
- *
- * Constructs a new event source.
- */
-function mxEventSource(eventSource)
-{
-  this.setEventSource(eventSource);
-};
 
+import mxEventObject from "./mxEventObject";
+
+class mxEventSource {
   /**
    * Variable: eventListeners
    *
@@ -52,13 +29,38 @@ eventsEnabled = true;
    */
   eventSource = null;
 
+  /**
+   * Class: mxEventSource
+   *
+   * Base class for objects that dispatch named events. To create a subclass that
+   * inherits from mxEventSource, the following code is used.
+   *
+   * (code)
+   * function MyClass() { };
+   *
+   * MyClass.prototype = new mxEventSource();
+   * constructor = MyClass;
+   * (end)
+   *
+   * Known Subclasses:
+   *
+   * <mxGraphModel>, <mxGraph>, <mxGraphView>, <mxEditor>, <mxCellOverlay>,
+   * <mxToolbar>, <mxWindow>
+   *
+   * Constructor: mxEventSource
+   *
+   * Constructs a new event source.
+   */
+  constructor(eventSource) {
+    this.setEventSource(eventSource);
+  };
+
   /**
    * Function: isEventsEnabled
    *
    * Returns <eventsEnabled>.
    */
-isEventsEnabled = ()=>
+  isEventsEnabled = () => {
-{
     return this.eventsEnabled;
   };
 
@@ -67,8 +69,7 @@ isEventsEnabled = ()=>
    *
    * Sets <eventsEnabled>.
    */
-setEventsEnabled = (value)=>
+  setEventsEnabled = (value) => {
-{
     this.eventsEnabled = value;
   };
 
@@ -77,8 +78,7 @@ setEventsEnabled = (value)=>
    *
    * Returns <eventSource>.
    */
-getEventSource = ()=>
+  getEventSource = () => {
-{
     return this.eventSource;
   };
 
@@ -87,8 +87,7 @@ getEventSource = ()=>
    *
    * Sets <eventSource>.
    */
-setEventSource = (value)=>
+  setEventSource = (value) => {
-{
     this.eventSource = value;
   };
 
@@ -100,10 +99,8 @@ setEventSource = (value)=>
    *
    * The parameters of the listener are the sender and an <mxEventObject>.
    */
-addListener = (name, funct)=>
+  addListener = (name, funct) => {
-{
+    if (this.eventListeners == null) {
-  if (this.eventListeners == null)
-  {
       this.eventListeners = [];
     }
 
@@ -116,20 +113,14 @@ addListener = (name, funct)=>
    *
    * Removes all occurrences of the given listener from <eventListeners>.
    */
-removeListener = (funct)=>
+  removeListener = (funct) => {
-{
+    if (this.eventListeners != null) {
-  if (this.eventListeners != null)
-  {
       var i = 0;
 
-    while (i < this.eventListeners.length)
+      while (i < this.eventListeners.length) {
-    {
+        if (this.eventListeners[i + 1] == funct) {
-      if (this.eventListeners[i+1] == funct)
-      {
           this.eventListeners.splice(i, 2);
-      }
+        } else {
-      else
-      {
           i += 2;
         }
       }
@@ -155,35 +146,31 @@ removeListener = (funct)=>
    * sender - Optional sender to be passed to the listener. Default value is
    * the return value of <getEventSource>.
    */
-fireEvent = (evt, sender)=>
+  fireEvent = (evt, sender) => {
-{
+    if (this.eventListeners != null && this.isEventsEnabled()) {
-  if (this.eventListeners != null && this.isEventsEnabled())
+      if (evt == null) {
-  {
-    if (evt == null)
-    {
         evt = new mxEventObject();
       }
 
-    if (sender == null)
+      if (sender == null) {
-    {
         sender = this.getEventSource();
       }
 
-    if (sender == null)
+      if (sender == null) {
-    {
         sender = this;
       }
 
       var args = [sender, evt];
 
-    for (var i = 0; i < this.eventListeners.length; i += 2)
+      for (var i = 0; i < this.eventListeners.length; i += 2) {
-    {
         var listen = this.eventListeners[i];
 
-      if (listen == null || listen == evt.getName())
+        if (listen == null || listen == evt.getName()) {
-      {
           this.eventListeners[i + 1].apply(this, args);
         }
       }
     }
   };
+}
+
+export default mxEventSource;

src/js/util/mxForm.js

@@ -2,24 +2,8 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- * Class: mxForm
- * 
- * A simple class for creating HTML forms.
- * 
- * Constructor: mxForm
- * 
- * Creates a HTML table using the specified classname.
- */
-function mxForm(className)
-{
-  this.table = document.createElement('table');
-  this.table.className = className;
-  this.body = document.createElement('tbody');
-  
-  this.table.appendChild(this.body);
-};
 
+class mxForm {
   /**
    * Variable: table
    *
@@ -35,13 +19,29 @@ table = null;
    */
   body = false;
 
+  /**
+   * Class: mxForm
+   *
+   * A simple class for creating HTML forms.
+   *
+   * Constructor: mxForm
+   *
+   * Creates a HTML table using the specified classname.
+   */
+  constructor(className) {
+    this.table = document.createElement('table');
+    this.table.className = className;
+    this.body = document.createElement('tbody');
+
+    this.table.appendChild(this.body);
+  };
+
   /**
    * Function: getTable
    *
    * Returns the table that contains this form.
    */
-getTable = ()=>
+  getTable = () => {
-{
     return this.table;
   };
 
@@ -51,8 +51,7 @@ getTable = ()=>
    * Helper method to add an OK and Cancel button using the respective
    * functions.
    */
-addButtons = (okFunct, cancelFunct)=>
+  addButtons = (okFunct, cancelFunct) => {
-{
     var tr = document.createElement('tr');
     var td = document.createElement('td');
     tr.appendChild(td);
@@ -63,8 +62,7 @@ addButtons = (okFunct, cancelFunct)=>
     mxUtils.write(button, mxResources.get('ok') || 'OK');
     td.appendChild(button);
 
-  mxEvent.addListener(button, 'click', ()=>
+    mxEvent.addListener(button, 'click', () => {
-  {
       okFunct();
     });
 
@@ -73,8 +71,7 @@ addButtons = (okFunct, cancelFunct)=>
     mxUtils.write(button, mxResources.get('cancel') || 'Cancel');
     td.appendChild(button);
 
-  mxEvent.addListener(button, 'click', ()=>
+    mxEvent.addListener(button, 'click', () => {
-  {
       cancelFunct();
     });
 
@@ -87,8 +84,7 @@ addButtons = (okFunct, cancelFunct)=>
    *
    * Adds an input for the given name, type and value and returns it.
    */
-addText = (name, value, type)=>
+  addText = (name, value, type) => {
-{
     var input = document.createElement('input');
 
     input.setAttribute('type', type || 'text');
@@ -102,16 +98,14 @@ addText = (name, value, type)=>
    *
    * Adds a checkbox for the given name and value and returns the textfield.
    */
-addCheckbox = (name, value)=>
+  addCheckbox = (name, value) => {
-{
     var input = document.createElement('input');
 
     input.setAttribute('type', 'checkbox');
     this.addField(name, input);
 
     // IE can only change the checked value if the input is inside the DOM
-  if (value)
+    if (value) {
-  {
       input.checked = true;
     }
 
@@ -123,12 +117,10 @@ addCheckbox = (name, value)=>
    *
    * Adds a textarea for the given name and value and returns the textarea.
    */
-addTextarea = (name, value, rows)=>
+  addTextarea = (name, value, rows) => {
-{
     var input = document.createElement('textarea');
 
-  if (mxClient.IS_NS)
+    if (mxClient.IS_NS) {
-  {
       rows--;
     }
 
@@ -143,17 +135,14 @@ addTextarea = (name, value, rows)=>
    *
    * Adds a combo for the given name and returns the combo.
    */
-addCombo = (name, isMultiSelect, size)=>
+  addCombo = (name, isMultiSelect, size) => {
-{
     var select = document.createElement('select');
 
-  if (size != null)
+    if (size != null) {
-  {
       select.setAttribute('size', size);
     }
 
-  if (isMultiSelect)
+    if (isMultiSelect) {
-  {
       select.setAttribute('multiple', 'true');
     }
 
@@ -165,15 +154,13 @@ addCombo = (name, isMultiSelect, size)=>
    *
    * Adds an option for the given label to the specified combo.
    */
-addOption = (combo, label, value, isSelected)=>
+  addOption = (combo, label, value, isSelected) => {
-{
     var option = document.createElement('option');
 
     mxUtils.writeln(option, label);
     option.setAttribute('value', value);
 
-  if (isSelected)
+    if (isSelected) {
-  {
       option.setAttribute('selected', isSelected);
     }
 
@@ -186,8 +173,7 @@ addOption = (combo, label, value, isSelected)=>
    * Adds a new row with the name and the input field in two columns and
    * returns the given input.
    */
-addField = (name, input)=>
+  addField = (name, input) => {
-{
     var tr = document.createElement('tr');
     var td = document.createElement('td');
     mxUtils.write(td, name);
@@ -200,3 +186,6 @@ addField = (name, input)=>
 
     return input;
   };
+}
+
+export default mxForm;

src/js/util/mxGuide.js

@@ -11,8 +11,8 @@
  * 
  * Constructs a new guide object.
  */
-function mxGuide(graph, states)
+class mxGuide {
-{
+  constructor(graph, states) {
     this.graph = graph;
     this.setStates(states);
   };
@@ -78,8 +78,7 @@ tolerance = 2;
    *
    * Sets the <mxCellStates> that should be used for alignment.
    */
-setStates = (states)=>
+  setStates = (states) => {
-{
     this.states = states;
   };
 
@@ -89,8 +88,7 @@ setStates = (states)=>
    * Returns true if the guide should be enabled for the given native event. This
    * implementation always returns true.
    */
-isEnabledForEvent = (evt)=>
+  isEnabledForEvent = (evt) => {
-{
     return true;
   };
 
@@ -99,8 +97,7 @@ isEnabledForEvent = (evt)=>
    *
    * Returns the tolerance for the guides. Default value is gridSize / 2.
    */
-getGuideTolerance = (gridEnabled)=>
+  getGuideTolerance = (gridEnabled) => {
-{
     return (gridEnabled && this.graph.gridEnabled) ? this.graph.gridSize / 2 : this.tolerance;
   };
 
@@ -115,8 +112,7 @@ getGuideTolerance = (gridEnabled)=>
    *
    * horizontal - Boolean that specifies which guide should be created.
    */
-createGuideShape = (horizontal)=>
+  createGuideShape = (horizontal) => {
-{
     var guide = new mxPolyline([], mxConstants.GUIDE_COLOR, mxConstants.GUIDE_STROKEWIDTH);
     guide.isDashed = true;
 
@@ -128,8 +124,7 @@ createGuideShape = (horizontal)=>
    *
    * Returns true if the given state should be ignored.
    */
-isStateIgnored = (state)=>
+  isStateIgnored = (state) => {
-{
     return false;
   };
 
@@ -138,10 +133,8 @@ isStateIgnored = (state)=>
    *
    * Moves the <bounds> by the given <mxPoint> and returnt the snapped point.
    */
-move = (bounds, delta, gridEnabled, clone)=>
+  move = (bounds, delta, gridEnabled, clone) => {
-{
+    if (this.states != null && (this.horizontal || this.vertical) && bounds != null && delta != null) {
-  if (this.states != null && (this.horizontal || this.vertical) && bounds != null && delta != null)
-  {
       var scale = this.graph.getView().scale;
       var tt = this.getGuideTolerance(gridEnabled) * scale;
       var b = bounds.clone();
@@ -163,39 +156,30 @@ move = (bounds, delta, gridEnabled, clone)=>
       var middle = b.getCenterY();
 
       // Snaps the left, center and right to the given x-coordinate
-    function snapX(x, state, centerAlign)
+      function snapX(x, state, centerAlign) {
-    {
         var override = false;
 
-      if (centerAlign && Math.abs(x - center) < ttX)
+        if (centerAlign && Math.abs(x - center) < ttX) {
-      {
           delta.x = x - bounds.getCenterX();
           ttX = Math.abs(x - center);
           override = true;
-      }
+        } else if (!centerAlign) {
-      else if (!centerAlign)
+          if (Math.abs(x - left) < ttX) {
-      {
-        if (Math.abs(x - left) < ttX)
-        {
             delta.x = x - bounds.x;
             ttX = Math.abs(x - left);
             override = true;
-        }
+          } else if (Math.abs(x - right) < ttX) {
-        else if (Math.abs(x - right) < ttX)
-        {
             delta.x = x - bounds.x - bounds.width;
             ttX = Math.abs(x - right);
             override = true;
           }
         }
 
-      if (override)
+        if (override) {
-      {
           stateX = state;
           valueX = x;
 
-        if (this.guideX == null)
+          if (this.guideX == null) {
-        {
             this.guideX = this.createGuideShape(true);
 
             // Makes sure to use either VML or SVG shapes in order to implement
@@ -212,39 +196,30 @@ move = (bounds, delta, gridEnabled, clone)=>
       };
 
       // Snaps the top, middle or bottom to the given y-coordinate
-    function snapY(y, state, centerAlign)
+      function snapY(y, state, centerAlign) {
-    {
         var override = false;
 
-      if (centerAlign && Math.abs(y - middle) < ttY)
+        if (centerAlign && Math.abs(y - middle) < ttY) {
-      {
           delta.y = y - bounds.getCenterY();
           ttY = Math.abs(y - middle);
           override = true;
-      }
+        } else if (!centerAlign) {
-      else if (!centerAlign)
+          if (Math.abs(y - top) < ttY) {
-      {
-        if (Math.abs(y - top) < ttY)
-        {
             delta.y = y - bounds.y;
             ttY = Math.abs(y - top);
             override = true;
-        }
+          } else if (Math.abs(y - bottom) < ttY) {
-        else if (Math.abs(y - bottom) < ttY)
-        {
             delta.y = y - bounds.y - bounds.height;
             ttY = Math.abs(y - bottom);
             override = true;
           }
         }
 
-      if (override)
+        if (override) {
-      {
           stateY = state;
           valueY = y;
 
-        if (this.guideY == null)
+          if (this.guideY == null) {
-        {
             this.guideY = this.createGuideShape(false);
 
             // Makes sure to use either VML or SVG shapes in order to implement
@@ -260,36 +235,30 @@ move = (bounds, delta, gridEnabled, clone)=>
         overrideY = overrideY || override;
       };
 
-    for (var i = 0; i < this.states.length; i++)
+      for (var i = 0; i < this.states.length; i++) {
-    {
         var state = this.states[i];
 
-      if (state != null && !this.isStateIgnored(state))
+        if (state != null && !this.isStateIgnored(state)) {
-      {
           // Align x
-        if (this.horizontal)
+          if (this.horizontal) {
-        {
             snapX.call(this, state.getCenterX(), state, true);
             snapX.call(this, state.x, state, false);
             snapX.call(this, state.x + state.width, state, false);
 
             // Aligns left and right of shape to center of page
-          if (state.cell == null)
+            if (state.cell == null) {
-          {
               snapX.call(this, state.getCenterX(), state, false);
             }
           }
 
           // Align y
-        if (this.vertical)
+          if (this.vertical) {
-        {
             snapY.call(this, state.getCenterY(), state, true);
             snapY.call(this, state.y, state, false);
             snapY.call(this, state.y + state.height, state, false);
 
             // Aligns left and right of shape to center of page
-          if (state.cell == null)
+            if (state.cell == null) {
-          {
               snapY.call(this, state.getCenterY(), state, false);
             }
           }
@@ -303,27 +272,20 @@ move = (bounds, delta, gridEnabled, clone)=>
       // Redraws the guides
       var c = this.graph.container;
 
-    if (!overrideX && this.guideX != null)
+      if (!overrideX && this.guideX != null) {
-    {
         this.guideX.node.style.visibility = 'hidden';
-    }
+      } else if (this.guideX != null) {
-    else if (this.guideX != null)
-    {
         var minY = null;
         var maxY = null;
 
-      if (stateX != null && bounds != null)
+        if (stateX != null && bounds != 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, stateX.y + stateX.height);
         }
 
-      if (minY != null && maxY != null)
+        if (minY != null && maxY != null) {
-      {
           this.guideX.points = [new mxPoint(valueX, minY), new mxPoint(valueX, maxY)];
-      }
+        } else {
-      else
-      {
           this.guideX.points = [new mxPoint(valueX, -this.graph.panDy),
             new mxPoint(valueX, c.scrollHeight - 3 - this.graph.panDy)];
         }
@@ -333,27 +295,20 @@ move = (bounds, delta, gridEnabled, clone)=>
         this.guideX.redraw();
       }
 
-    if (!overrideY && this.guideY != null)
+      if (!overrideY && this.guideY != null) {
-    {
         this.guideY.node.style.visibility = 'hidden';
-    }
+      } else if (this.guideY != null) {
-    else if (this.guideY != null)
-    {
         var minX = null;
         var maxX = null;
 
-      if (stateY != null && bounds != null)
+        if (stateY != null && bounds != null) {
-      {
           minX = Math.min(bounds.x + delta.x - this.graph.panDx, stateY.x);
           maxX = Math.max(bounds.x + bounds.width + delta.x - this.graph.panDx, stateY.x + stateY.width);
         }
 
-      if (minX != null && maxX != null)
+        if (minX != null && maxX != null) {
-      {
           this.guideY.points = [new mxPoint(minX, valueY), new mxPoint(maxX, valueY)];
-      }
+        } else {
-      else
-      {
           this.guideY.points = [new mxPoint(-this.graph.panDx, valueY),
             new mxPoint(c.scrollWidth - 3 - this.graph.panDx, valueY)];
         }
@@ -372,17 +327,14 @@ move = (bounds, delta, gridEnabled, clone)=>
    *
    * Rounds to pixels for virtual states (eg. page guides)
    */
-getDelta = (bounds, stateX, dx, stateY, dy)=>
+  getDelta = (bounds, stateX, dx, stateY, dy) => {
-{
     var s = this.graph.view.scale;
 
-  if (this.rounded || (stateX != null && stateX.cell == null))
+    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))
+    if (this.rounded || (stateY != null && stateY.cell == null)) {
-  {
       dy = Math.round((bounds.y + dy) / s) * s - bounds.y;
     }
 
@@ -394,8 +346,7 @@ getDelta = (bounds, stateX, dx, stateY, dy)=>
    *
    * Returns the color for the given state.
    */
-getGuideColor = (state, horizontal)=>
+  getGuideColor = (state, horizontal) => {
-{
     return mxConstants.GUIDE_COLOR;
   };
 
@@ -404,8 +355,7 @@ getGuideColor = (state, horizontal)=>
    *
    * Hides all current guides.
    */
-hide = ()=>
+  hide = () => {
-{
     this.setVisible(false);
   };
 
@@ -414,15 +364,12 @@ hide = ()=>
    *
    * Shows or hides the current guides.
    */
-setVisible = (visible)=>
+  setVisible = (visible) => {
-{
+    if (this.guideX != null) {
-  if (this.guideX != null)
-  {
       this.guideX.node.style.visibility = (visible) ? 'visible' : 'hidden';
     }
 
-  if (this.guideY != null)
+    if (this.guideY != null) {
-  {
       this.guideY.node.style.visibility = (visible) ? 'visible' : 'hidden';
     }
   };
@@ -432,17 +379,17 @@ setVisible = (visible)=>
    *
    * Destroys all resources that this object uses.
    */
-destroy = ()=>
+  destroy = () => {
-{
+    if (this.guideX != null) {
-  if (this.guideX != null)
-  {
       this.guideX.destroy();
       this.guideX = null;
     }
 
-  if (this.guideY != null)
+    if (this.guideY != null) {
-  {
       this.guideY.destroy();
       this.guideY = null;
     }
   };
+}
+
+export default mxGuide;

src/js/util/mxImage.js

@@ -2,22 +2,8 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- * Class: mxImage
- *
- * Encapsulates the URL, width and height of an image.
- * 
- * Constructor: mxImage
- * 
- * Constructs a new image.
- */
-function mxImage(src, width, height)
-{
-  this.src = src;
-  this.width = width;
-  this.height = height;
-};
 
+class mxImage {
   /**
    * Variable: src
    *
@@ -38,3 +24,21 @@ width = null;
    * Integer that specifies the height of the image.
    */
   height = null;
+
+  /**
+   * Class: mxImage
+   *
+   * Encapsulates the URL, width and height of an image.
+   *
+   * Constructor: mxImage
+   *
+   * Constructs a new image.
+   */
+  constructor(src, width, height) {
+    this.src = src;
+    this.width = width;
+    this.height = height;
+  };
+}
+
+export default mxImage;

src/js/util/mxImageBundle.js

@@ -2,6 +2,22 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+
+class mxImageBundle {
+  /**
+   * Variable: images
+   *
+   * Maps from keys to images.
+   */
+  images = null;
+
+  /**
+   * Variable: alt
+   *
+   * Specifies if the fallback representation should be returned.
+   */
+  alt = null;
+
   /**
    * Class: mxImageBundle
    *
@@ -47,34 +63,18 @@
    * support data URIs, but the maximum size is limited to 32 KB, which means
    * all data URIs should be limited to 32 KB.
    */
-function mxImageBundle(alt)
+  constructor(alt) {
-{
     this.images = [];
     this.alt = (alt != null) ? alt : false;
   };
 
-/**
- * Variable: images
- * 
- * Maps from keys to images.
- */
-images = null;
-
-/**
- * Variable: alt
- * 
- * Specifies if the fallback representation should be returned.
- */
-alt = null;
-
   /**
    * Function: putImage
    *
    * Adds the specified entry to the map. The entry is an object with a value and
    * fallback property as specified in the arguments.
    */
-putImage = (key, value, fallback)=>
+  putImage = (key, value, fallback) => {
-{
     this.images[key] = {value: value, fallback: fallback};
   };
 
@@ -85,19 +85,19 @@ putImage = (key, value, fallback)=>
    * or fallback, depending on <alt>. The fallback is returned if
    * <alt> is true, the value is returned otherwise.
    */
-getImage = (key)=>
+  getImage = (key) => {
-{
     var result = null;
 
-  if (key != null)
+    if (key != null) {
-  {
       var img = this.images[key];
 
-    if (img != null)
+      if (img != null) {
-    {
         result = (this.alt) ? img.fallback : img.value;
       }
     }
 
     return result;
   };
+}
+
+export default mxImageBundle;

src/js/util/mxImageExport.js

@@ -2,6 +2,15 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+
+class mxImageExport {
+  /**
+   * Variable: includeOverlays
+   *
+   * Specifies if overlays should be included in the export. Default is false.
+   */
+  includeOverlays = false;
+
   /**
    * Class: mxImageExport
    *
@@ -32,34 +41,22 @@
    *
    * Constructs a new image export.
    */
-function mxImageExport() { };
+  constructor() {}
-
-/**
- * Variable: includeOverlays
- * 
- * Specifies if overlays should be included in the export. Default is false.
- */
-includeOverlays = false;
 
   /**
    * Function: drawState
    *
    * Draws the given state and all its descendants to the given canvas.
    */
-drawState = (state, canvas)=>
+  drawState = (state, canvas) => {
-{
+    if (state != null) {
-  if (state != null)
+      this.visitStatesRecursive(state, canvas, mxUtils.bind(this, () => {
-  {
-    this.visitStatesRecursive(state, canvas, mxUtils.bind(this, ()=>
-    {
         this.drawCellState.apply(this, arguments);
       }));
 
       // Paints the overlays
-    if (this.includeOverlays)
+      if (this.includeOverlays) {
-    {
+        this.visitStatesRecursive(state, canvas, mxUtils.bind(this, () => {
-      this.visitStatesRecursive(state, canvas, mxUtils.bind(this, ()=>
-      {
           this.drawOverlays.apply(this, arguments);
         }));
       }
@@ -71,17 +68,14 @@ drawState = (state, canvas)=>
    *
    * Visits the given state and all its descendants to the given canvas recursively.
    */
-visitStatesRecursive = (state, canvas, visitor)=>
+  visitStatesRecursive = (state, canvas, visitor) => {
-{
+    if (state != null) {
-  if (state != null)
-  {
       visitor(state, canvas);
 
       var graph = state.view.graph;
       var childCount = graph.model.getChildCount(state.cell);
 
-    for (var i = 0; i < childCount; i++)
+      for (var i = 0; i < childCount; i++) {
-    {
         var childState = graph.view.getState(graph.model.getChildAt(state.cell, i));
         this.visitStatesRecursive(childState, canvas, visitor);
       }
@@ -93,8 +87,7 @@ visitStatesRecursive = (state, canvas, visitor)=>
    *
    * Returns the link for the given cell state and canvas. This returns null.
    */
-getLinkForCellState = (state, canvas)=>
+  getLinkForCellState = (state, canvas) => {
-{
     return null;
   };
 
@@ -103,13 +96,11 @@ getLinkForCellState = (state, canvas)=>
    *
    * Draws the given state to the given canvas.
    */
-drawCellState = (state, canvas)=>
+  drawCellState = (state, canvas) => {
-{
     // Experimental feature
     var link = this.getLinkForCellState(state, canvas);
 
-  if (link != null)
+    if (link != null) {
-  {
       canvas.setLink(link);
     }
 
@@ -117,8 +108,7 @@ drawCellState = (state, canvas)=>
     this.drawShape(state, canvas);
     this.drawText(state, canvas);
 
-  if (link != null)
+    if (link != null) {
-  {
       canvas.setLink(null);
     }
   };
@@ -128,10 +118,8 @@ drawCellState = (state, canvas)=>
    *
    * Draws the shape of the given state.
    */
-drawShape = (state, canvas)=>
+  drawShape = (state, canvas) => {
-{
+    if (state.shape instanceof mxShape && state.shape.checkBounds()) {
-  if (state.shape instanceof mxShape && state.shape.checkBounds())
-  {
       canvas.save();
 
       state.shape.beforePaint(canvas);
@@ -147,10 +135,8 @@ drawShape = (state, canvas)=>
    *
    * Draws the text of the given state.
    */
-drawText = (state, canvas)=>
+  drawText = (state, canvas) => {
-{
+    if (state.text != null && state.text.checkBounds()) {
-  if (state.text != null && state.text.checkBounds())
-  {
       canvas.save();
 
       state.text.beforePaint(canvas);
@@ -167,17 +153,15 @@ drawText = (state, canvas)=>
    * Draws the overlays for the given state. This is called if <includeOverlays>
    * is true.
    */
-drawOverlays = (state, canvas)=>
+  drawOverlays = (state, canvas) => {
-{
+    if (state.overlays != null) {
-  if (state.overlays != null)
+      state.overlays.visit((id, shape) => {
-  {
+        if (shape instanceof mxShape) {
-    state.overlays.visit((id, shape)=>
-    {
-      if (shape instanceof mxShape)
-      {
           shape.paint(canvas);
         }
       });
     }
   };
+}
 
+export default mxImageExport;

src/js/util/mxLog.js

@@ -2,8 +2,8 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-var mxLog =
+
-{
+var mxLog = {
   /**
    * Class: mxLog
    *
@@ -53,10 +53,8 @@ var mxLog =
    * point to a non-null value. This is called from within <setVisible> if the
    * log has not yet been initialized.
    */
-  init: ()=>
+  init: () => {
-  {
+    if (mxLog.window == null && document.body != null) {
-    if (mxLog.window == null && document.body != null)
-    {
       var title = mxLog.consoleName + ' - mxGraph ' + mxClient.VERSION;
 
       // Creates a table that maintains the layout
@@ -78,12 +76,9 @@ var mxLog =
       mxLog.textarea.value = mxLog.buffer;
 
       // Workaround for wrong width in standards mode
-      if (mxClient.IS_NS && document.compatMode != 'BackCompat')
+      if (mxClient.IS_NS && document.compatMode != 'BackCompat') {
-      {
         mxLog.textarea.style.width = '99%';
-      }
+      } else {
-      else
-      {
         mxLog.textarea.style.width = '100%';
       }
 
@@ -102,57 +97,42 @@ var mxLog =
       table.appendChild(tbody);
 
       // Adds various debugging buttons
-      mxLog.addButton('Info', function (evt)
+      mxLog.addButton('Info', function (evt) {
-      {
         mxLog.info();
       });
 
-      mxLog.addButton('DOM', function (evt)
+      mxLog.addButton('DOM', function (evt) {
-      {
         var content = mxUtils.getInnerHtml(document.body);
         mxLog.debug(content);
       });
 
-      mxLog.addButton('Trace', function (evt)
+      mxLog.addButton('Trace', function (evt) {
-      {
         mxLog.TRACE = !mxLog.TRACE;
 
-        if (mxLog.TRACE)
+        if (mxLog.TRACE) {
-        {
           mxLog.debug('Tracing enabled');
-        }
+        } else {
-        else
-        {
           mxLog.debug('Tracing disabled');
         }
       });
 
-      mxLog.addButton('Copy', function (evt)
+      mxLog.addButton('Copy', function (evt) {
-      {
+        try {
-        try
-        {
           mxUtils.copy(mxLog.textarea.value);
-        }
+        } catch (err) {
-        catch (err)
-        {
           mxUtils.alert(err);
         }
       });
 
-      mxLog.addButton('Show', function (evt)
+      mxLog.addButton('Show', function (evt) {
-      {
+        try {
-        try
-        {
           mxUtils.popup(mxLog.textarea.value);
-        }
+        } catch (err) {
-        catch (err)
-        {
           mxUtils.alert(err);
         }
       });
 
-      mxLog.addButton('Clear', function (evt)
+      mxLog.addButton('Clear', function (evt) {
-      {
         mxLog.textarea.value = '';
       });
 
@@ -160,13 +140,10 @@ var mxLog =
       var h = 0;
       var w = 0;
 
-      if (typeof(window.innerWidth) === 'number')
+      if (typeof (window.innerWidth) === 'number') {
-      {
         h = window.innerHeight;
         w = window.innerWidth;
-      }
+      } else {
-      else
-      {
         h = (document.documentElement.clientHeight || document.body.clientHeight);
         w = document.body.clientWidth;
       }
@@ -180,12 +157,10 @@ var mxLog =
 
       // Workaround for ignored textarea height in various setups
       if ((mxClient.IS_NS && !mxClient.IS_GC &&
-        !mxClient.IS_SF && document.compatMode != 'BackCompat'))
+          !mxClient.IS_SF && document.compatMode != 'BackCompat')) {
-      {
         var elt = mxLog.window.getElement();
 
-        var resizeHandler = (sender, evt)=>
+        var resizeHandler = (sender, evt) => {
-        {
           mxLog.textarea.style.height = Math.max(0, elt.offsetHeight - 70) + 'px';
         };
 
@@ -203,8 +178,7 @@ var mxLog =
    *
    * Writes the current navigator information to the console.
    */
-  info: ()=>
+  info: () => {
-  {
     mxLog.writeln(mxUtils.toString(navigator));
   },
 
@@ -213,8 +187,7 @@ var mxLog =
    *
    * Adds a button to the console using the given label and function.
    */
-  addButton: (lab, funct)=>
+  addButton: (lab, funct) => {
-  {
     var button = document.createElement('button');
     mxUtils.write(button, lab);
     mxEvent.addListener(button, 'click', funct);
@@ -226,10 +199,8 @@ var mxLog =
    *
    * Returns true if the console is visible.
    */
-  isVisible: ()=>
+  isVisible: () => {
-  {
+    if (mxLog.window != null) {
-    if (mxLog.window != null)
-    {
       return mxLog.window.isVisible();
     }
 
@@ -242,8 +213,7 @@ var mxLog =
    *
    * Shows the console.
    */
-  show: ()=>
+  show: () => {
-  {
     mxLog.setVisible(true);
   },
 
@@ -252,15 +222,12 @@ var mxLog =
    *
    * Shows or hides the console.
    */
-  setVisible: (visible)=>
+  setVisible: (visible) => {
-  {
+    if (mxLog.window == null) {
-    if (mxLog.window == null)
-    {
       mxLog.init();
     }
 
-    if (mxLog.window != null)
+    if (mxLog.window != null) {
-    {
       mxLog.window.setVisible(visible);
     }
   },
@@ -281,10 +248,8 @@ var mxLog =
    * mxLog.leave('World!', t0);
    * (end)
    */
-  enter: (string)=>
+  enter: (string) => {
-  {
+    if (mxLog.TRACE) {
-    if (mxLog.TRACE)
-    {
       mxLog.writeln('Entering ' + string);
 
       return new Date().getTime();
@@ -299,10 +264,8 @@ var mxLog =
    * between the current time and t0 in milliseconds.
    * See <enter> for an example.
    */
-  leave: (string, t0)=>
+  leave: (string, t0) => {
-  {
+    if (mxLog.TRACE) {
-    if (mxLog.TRACE)
-    {
       var dt = (t0 != 0) ? ' (' + (new Date().getTime() - t0) + ' ms)' : '';
       mxLog.writeln('Leaving ' + string + dt);
     }
@@ -320,10 +283,8 @@ var mxLog =
    * mxLog.debug('Hello, World!');
    * (end)
    */
-  debug: ()=>
+  debug: () => {
-  {
+    if (mxLog.DEBUG) {
-    if (mxLog.DEBUG)
-    {
       mxLog.writeln.apply(this, arguments);
     }
   },
@@ -340,10 +301,8 @@ var mxLog =
    * mxLog.warn('Hello, World!');
    * (end)
    */
-  warn: ()=>
+  warn: () => {
-  {
+    if (mxLog.WARN) {
-    if (mxLog.WARN)
-    {
       mxLog.writeln.apply(this, arguments);
     }
   },
@@ -353,36 +312,29 @@ var mxLog =
    *
    * Adds the specified strings to the console.
    */
-  write: ()=>
+  write: () => {
-  {
     var string = '';
 
-    for (var i = 0; i < arguments.length; i++)
+    for (var i = 0; i < arguments.length; i++) {
-    {
       string += arguments[i];
 
-      if (i < arguments.length - 1)
+      if (i < arguments.length - 1) {
-      {
         string += ' ';
       }
     }
 
-    if (mxLog.textarea != null)
+    if (mxLog.textarea != null) {
-    {
       mxLog.textarea.value = mxLog.textarea.value + string;
 
       // Workaround for no update in Presto 2.5.22 (Opera 10.5)
       if (navigator.userAgent != null &&
-        navigator.userAgent.indexOf('Presto/2.5') >= 0)
+          navigator.userAgent.indexOf('Presto/2.5') >= 0) {
-      {
         mxLog.textarea.style.visibility = 'hidden';
         mxLog.textarea.style.visibility = 'visible';
       }
 
       mxLog.textarea.scrollTop = mxLog.textarea.scrollHeight;
-    }
+    } else {
-    else
-    {
       mxLog.buffer += string;
     }
   },
@@ -393,21 +345,19 @@ var mxLog =
    * Adds the specified strings to the console, appending a linefeed at the
    * end of each string.
    */
-  writeln: ()=>
+  writeln: () => {
-  {
     var string = '';
 
-    for (var i = 0; i < arguments.length; i++)
+    for (var i = 0; i < arguments.length; i++) {
-    {
       string += arguments[i];
 
-      if (i < arguments.length - 1)
+      if (i < arguments.length - 1) {
-      {
         string += ' ';
       }
     }
 
     mxLog.write(string + '\n');
   }
-  
 };
+
+export default mxLog;

src/js/util/mxMorphing.js

@@ -2,57 +2,10 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
+import mxPoint from "./mxPoint";
- *
+import mxCellStatePreview from "../view/mxCellStatePreview";
- * Class: mxMorphing
- * 
- * Implements animation for morphing cells. Here is an example of
- * using this class for animating the result of a layout algorithm:
- * 
- * (code)
- * graph.getModel().beginUpdate();
- * try
- * {
- *   var circleLayout = new mxCircleLayout(graph);
- *   circleLayout.execute(graph.getDefaultParent());
- * }
- * finally
- * {
- *   var morph = new mxMorphing(graph);
- *   morph.addListener(mxEvent.DONE, ()=>
- *   {
- *     graph.getModel().endUpdate();
- *   });
- *   
- *   morph.startAnimation();
- * }
- * (end)
- * 
- * Constructor: mxMorphing
- * 
- * Constructs an animation.
- * 
- * Parameters:
- * 
- * graph - Reference to the enclosing <mxGraph>.
- * steps - Optional number of steps in the morphing animation. Default is 6.
- * ease - Optional easing constant for the animation. Default is 1.5.
- * delay - Optional delay between the animation steps. Passed to <mxAnimation>.
- */
-function mxMorphing(graph, steps, ease, delay)
-{
-  mxAnimation.call(this, delay);
-  this.graph = graph;
-  this.steps = (steps != null) ? steps : 6;
-  this.ease = (ease != null) ? ease : 1.5;
-};
-
-/**
- * Extends mxEventSource.
- */
-mxMorphing.prototype = new mxAnimation();
-constructor = mxMorphing;
 
+class mxMorphing extends mxAnimation {
   /**
    * Variable: graph
    *
@@ -91,26 +44,65 @@ ease = null;
    */
   cells = null;
 
+  /**
+   *
+   * Class: mxMorphing
+   *
+   * Implements animation for morphing cells. Here is an example of
+   * using this class for animating the result of a layout algorithm:
+   *
+   * (code)
+   * graph.getModel().beginUpdate();
+   * try
+   * {
+   *   var circleLayout = new mxCircleLayout(graph);
+   *   circleLayout.execute(graph.getDefaultParent());
+   * }
+   * finally
+   * {
+   *   var morph = new mxMorphing(graph);
+   *   morph.addListener(mxEvent.DONE, ()=>
+   *   {
+   *     graph.getModel().endUpdate();
+   *   });
+   *
+   *   morph.startAnimation();
+   * }
+   * (end)
+   *
+   * Constructor: mxMorphing
+   *
+   * Constructs an animation.
+   *
+   * Parameters:
+   *
+   * graph - Reference to the enclosing <mxGraph>.
+   * steps - Optional number of steps in the morphing animation. Default is 6.
+   * ease - Optional easing constant for the animation. Default is 1.5.
+   * delay - Optional delay between the animation steps. Passed to <mxAnimation>.
+   */
+  constructor(graph, steps, ease, delay) {
+    super(delay);
+    this.graph = graph;
+    this.steps = (steps != null) ? steps : 6;
+    this.ease = (ease != null) ? ease : 1.5;
+  };
+
   /**
    * Function: updateAnimation
    *
    * Animation step.
    */
-updateAnimation = ()=>
+  updateAnimation = () => {
-{
     updateAnimation.apply(this, arguments);
     var move = new mxCellStatePreview(this.graph);
 
-  if (this.cells != null)
+    if (this.cells != null) {
-  {
       // Animates the given cells individually without recursion
-    for (var i = 0; i < this.cells.length; i++)
+      for (var i = 0; i < this.cells.length; i++) {
-    {
         this.animateCell(this.cells[i], move, false);
       }
-  }
+    } else {
-  else
-  {
       // Animates all changed cells by using recursion to find
       // the changed cells but not for the animation itself
       this.animateCell(this.graph.getModel().getRoot(), move, true);
@@ -118,8 +110,7 @@ updateAnimation = ()=>
 
     this.show(move);
 
-  if (move.isEmpty() || this.step++ >= this.steps)
+    if (move.isEmpty() || this.step++ >= this.steps) {
-  {
       this.stopAnimation();
     }
   };
@@ -129,8 +120,7 @@ updateAnimation = ()=>
    *
    * Shows the changes in the given <mxCellStatePreview>.
    */
-show = (move)=>
+  show = (move) => {
-{
     move.show();
   };
 
@@ -139,19 +129,16 @@ show = (move)=>
    *
    * Animates the given cell state using <mxCellStatePreview.moveState>.
    */
-animateCell = (cell, move, recurse)=>
+  animateCell = (cell, move, recurse) => {
-{
     var state = this.graph.getView().getState(cell);
     var delta = null;
 
-  if (state != null)
+    if (state != null) {
-  {
       // Moves the animated state from where it will be after the model
       // change by subtracting the given delta vector from that location
       delta = this.getDelta(state);
 
-    if (this.graph.getModel().isVertex(cell) && (delta.x != 0 || delta.y != 0))
+      if (this.graph.getModel().isVertex(cell) && (delta.x != 0 || delta.y != 0)) {
-    {
         var translate = this.graph.view.getTranslate();
         var scale = this.graph.view.getScale();
 
@@ -162,12 +149,10 @@ animateCell = (cell, move, recurse)=>
       }
     }
 
-  if (recurse && !this.stopRecursion(state, delta))
+    if (recurse && !this.stopRecursion(state, delta)) {
-  {
       var childCount = this.graph.getModel().getChildCount(cell);
 
-    for (var i = 0; i < childCount; i++)
+      for (var i = 0; i < childCount; i++) {
-    {
         this.animateCell(this.graph.getModel().getChildAt(cell, i), move, recurse);
       }
     }
@@ -179,8 +164,7 @@ animateCell = (cell, move, recurse)=>
    * Returns true if the animation should not recursively find more
    * deltas for children if the given parent state has been animated.
    */
-stopRecursion = (state, delta)=>
+  stopRecursion = (state, delta) => {
-{
     return delta != null && (delta.x != 0 || delta.y != 0);
   };
 
@@ -190,8 +174,7 @@ stopRecursion = (state, delta)=>
    * Returns the vector between the current rendered state and the future
    * location of the state after the display will be updated.
    */
-getDelta = (state)=>
+  getDelta = (state) => {
-{
     var origin = this.getOriginForCell(state.cell);
     var translate = this.graph.getView().getTranslate();
     var scale = this.graph.getView().getScale();
@@ -208,42 +191,37 @@ getDelta = (state)=>
    * by using caching inside this method as the result per cell never changes
    * during the lifecycle of this object.
    */
-getOriginForCell = (cell)=>
+  getOriginForCell = (cell) => {
-{
     var result = null;
 
-  if (cell != null)
+    if (cell != null) {
-  {
       var parent = this.graph.getModel().getParent(cell);
       var geo = this.graph.getCellGeometry(cell);
       result = this.getOriginForCell(parent);
 
       // TODO: Handle offsets
-    if (geo != null)
+      if (geo != null) {
-    {
+        if (geo.relative) {
-      if (geo.relative)
-      {
           var pgeo = this.graph.getCellGeometry(parent);
 
-        if (pgeo != null)
+          if (pgeo != null) {
-        {
             result.x += geo.x * pgeo.width;
             result.y += geo.y * pgeo.height;
           }
-      }
+        } else {
-      else
-      {
           result.x += geo.x;
           result.y += geo.y;
         }
       }
     }
 
-  if (result == null)
+    if (result == null) {
-  {
       var t = this.graph.view.getTranslate();
       result = new mxPoint(-t.x, -t.y);
     }
 
     return result;
   };
+}
+
+export default mxMorphing;

src/js/util/mxMouseEvent.js

@@ -2,47 +2,8 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- * Class: mxMouseEvent
- * 
- * Base class for all mouse events in mxGraph. A listener for this event should
- * implement the following methods:
- * 
- * (code)
- * graph.addMouseListener(
- * {
- *   mouseDown: (sender, evt)=>
- *   {
- *     mxLog.debug('mouseDown');
- *   },
- *   mouseMove: (sender, evt)=>
- *   {
- *     mxLog.debug('mouseMove');
- *   },
- *   mouseUp: (sender, evt)=>
- *   {
- *     mxLog.debug('mouseUp');
- *   }
- * });
- * (end)
- * 
- * Constructor: mxMouseEvent
- *
- * Constructs a new event object for the given arguments.
- * 
- * Parameters:
- * 
- * evt - Native mouse event.
- * state - Optional <mxCellState> under the mouse.
- * 
- */
-function mxMouseEvent(evt, state)
-{
-  this.evt = evt;
-  this.state = state;
-  this.sourceState = state;
-};
 
+class mxMouseEvent {
   /**
    * Variable: consumed
    *
@@ -88,13 +49,52 @@ state = null;
    */
   sourceState = null;
 
+  /**
+   * Class: mxMouseEvent
+   *
+   * Base class for all mouse events in mxGraph. A listener for this event should
+   * implement the following methods:
+   *
+   * (code)
+   * graph.addMouseListener(
+   * {
+   *   mouseDown: (sender, evt)=>
+   *   {
+   *     mxLog.debug('mouseDown');
+   *   },
+   *   mouseMove: (sender, evt)=>
+   *   {
+   *     mxLog.debug('mouseMove');
+   *   },
+   *   mouseUp: (sender, evt)=>
+   *   {
+   *     mxLog.debug('mouseUp');
+   *   }
+   * });
+   * (end)
+   *
+   * Constructor: mxMouseEvent
+   *
+   * Constructs a new event object for the given arguments.
+   *
+   * Parameters:
+   *
+   * evt - Native mouse event.
+   * state - Optional <mxCellState> under the mouse.
+   *
+   */
+  constructor(evt, state) {
+    this.evt = evt;
+    this.state = state;
+    this.sourceState = state;
+  };
+
   /**
    * Function: getEvent
    *
    * Returns <evt>.
    */
-getEvent = ()=>
+  getEvent = () => {
-{
     return this.evt;
   };
 
@@ -103,8 +103,7 @@ getEvent = ()=>
    *
    * Returns the target DOM element using <mxEvent.getSource> for <evt>.
    */
-getSource = ()=>
+  getSource = () => {
-{
     return mxEvent.getSource(this.evt);
   };
 
@@ -113,10 +112,8 @@ getSource = ()=>
    *
    * Returns true if the given <mxShape> is the source of <evt>.
    */
-isSource = (shape)=>
+  isSource = (shape) => {
-{
+    if (shape != null) {
-  if (shape != null)
-  {
       return mxUtils.isAncestorNode(shape.node, this.getSource());
     }
 
@@ -128,8 +125,7 @@ isSource = (shape)=>
    *
    * Returns <evt.clientX>.
    */
-getX = ()=>
+  getX = () => {
-{
     return mxEvent.getClientX(this.getEvent());
   };
 
@@ -138,8 +134,7 @@ getX = ()=>
    *
    * Returns <evt.clientY>.
    */
-getY = ()=>
+  getY = () => {
-{
     return mxEvent.getClientY(this.getEvent());
   };
 
@@ -148,8 +143,7 @@ getY = ()=>
    *
    * Returns <graphX>.
    */
-getGraphX = ()=>
+  getGraphX = () => {
-{
     return this.graphX;
   };
 
@@ -158,8 +152,7 @@ getGraphX = ()=>
    *
    * Returns <graphY>.
    */
-getGraphY = ()=>
+  getGraphY = () => {
-{
     return this.graphY;
   };
 
@@ -168,8 +161,7 @@ getGraphY = ()=>
    *
    * Returns <state>.
    */
-getState = ()=>
+  getState = () => {
-{
     return this.state;
   };
 
@@ -178,12 +170,10 @@ getState = ()=>
    *
    * Returns the <mxCell> in <state> is not null.
    */
-getCell = ()=>
+  getCell = () => {
-{
     var state = this.getState();
 
-  if (state != null)
+    if (state != null) {
-  {
       return state.cell;
     }
 
@@ -195,8 +185,7 @@ getCell = ()=>
    *
    * Returns true if the event is a popup trigger.
    */
-isPopupTrigger = ()=>
+  isPopupTrigger = () => {
-{
     return mxEvent.isPopupTrigger(this.getEvent());
   };
 
@@ -205,8 +194,7 @@ isPopupTrigger = ()=>
    *
    * Returns <consumed>.
    */
-isConsumed = ()=>
+  isConsumed = () => {
-{
     return this.consumed;
   };
 
@@ -223,16 +211,17 @@ isConsumed = ()=>
    * preventDefault - Specifies if the native event should be canceled. Default
    * is true.
    */
-consume = (preventDefault)=>
+  consume = (preventDefault) => {
-{
     preventDefault = (preventDefault != null) ? preventDefault :
         (this.evt.touches != null || mxEvent.isMouseEvent(this.evt));
 
-  if (preventDefault && this.evt.preventDefault)
+    if (preventDefault && this.evt.preventDefault) {
-  {
       this.evt.preventDefault();
     }
 
     // Sets local consumed state
     this.consumed = true;
   };
+}
+
+export default mxMouseEvent;

src/js/util/mxObjectIdentity.js

@@ -2,8 +2,8 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-var mxObjectIdentity =
+
-{
+var mxObjectIdentity = {
   /**
    * Class: mxObjectIdentity
    *
@@ -33,19 +33,13 @@ var mxObjectIdentity =
    * Returns the ID for the given object or function or null if no object
    * is specified.
    */
-  get: (obj)=>
+  get: (obj) => {
-  {
+    if (obj != null) {
-    if (obj != null)
+      if (obj[mxObjectIdentity.FIELD_NAME] == null) {
-    {
+        if (typeof obj === 'object') {
-      if (obj[mxObjectIdentity.FIELD_NAME] == null)
-      {
-        if (typeof obj === 'object')
-        {
           var ctor = mxUtils.getFunctionName(obj.constructor);
           obj[mxObjectIdentity.FIELD_NAME] = ctor + '#' + mxObjectIdentity.counter++;
-        }
+        } else if (typeof obj === 'function') {
-        else if (typeof obj === 'function')
-        {
           obj[mxObjectIdentity.FIELD_NAME] = 'Function#' + mxObjectIdentity.counter++;
         }
       }
@@ -61,12 +55,11 @@ var mxObjectIdentity =
    *
    * Deletes the ID from the given object or function.
    */
-  clear: (obj)=>
+  clear: (obj) => {
-  {
+    if (typeof (obj) === 'object' || typeof obj === 'function') {
-    if (typeof(obj) === 'object' || typeof obj === 'function')
-    {
       delete obj[mxObjectIdentity.FIELD_NAME];
     }
   }
-
 };
+
+export default mxObjectIdentity;

src/js/util/mxPanningManager.js

@@ -2,240 +2,8 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- * Class: mxPanningManager
- *
- * Implements a handler for panning.
- */
-function mxPanningManager(graph)
-{
-  this.thread = null;
-  this.active = false;
-  this.tdx = 0;
-  this.tdy = 0;
-  this.t0x = 0;
-  this.t0y = 0;
-  this.dx = 0;
-  this.dy = 0;
-  this.scrollbars = false;
-  this.scrollLeft = 0;
-  this.scrollTop = 0;
-  
-  this.mouseListener =
-  {
-      mouseDown: (sender, me)=> { },
-      mouseMove: (sender, me)=> { },
-      mouseUp: mxUtils.bind(this, (sender, me)=>
-      {
-        if (this.active)
-        {
-          this.stop();
-        }
-      })
-  };
-  
-  graph.addMouseListener(this.mouseListener);
-  
-  this.mouseUpListener = mxUtils.bind(this, ()=>
-  {
-        if (this.active)
-        {
-          this.stop();
-        }
-  });
-  
-  // Stops scrolling on every mouseup anywhere in the document
-  mxEvent.addListener(document, 'mouseup', this.mouseUpListener);
-  
-  var createThread = mxUtils.bind(this, ()=>
-  {
-        this.scrollbars = mxUtils.hasScrollbars(graph.container);
-        this.scrollLeft = graph.container.scrollLeft;
-        this.scrollTop = graph.container.scrollTop;
-  
-        return window.setInterval(mxUtils.bind(this, ()=>
-    {
-      this.tdx -= this.dx;
-      this.tdy -= this.dy;
-
-      if (this.scrollbars)
-      {
-        var left = -graph.container.scrollLeft - Math.ceil(this.dx);
-        var top = -graph.container.scrollTop - Math.ceil(this.dy);
-        graph.panGraph(left, top);
-        graph.panDx = this.scrollLeft - graph.container.scrollLeft;
-        graph.panDy = this.scrollTop - graph.container.scrollTop;
-        graph.fireEvent(new mxEventObject(mxEvent.PAN));
-        // TODO: Implement graph.autoExtend
-      }
-      else
-      {
-        graph.panGraph(this.getDx(), this.getDy());
-      }
-    }), this.delay);
-  });
-  
-  this.isActive = ()=>
-  {
-    return active;
-  };
-  
-  this.getDx = ()=>
-  {
-    return Math.round(this.tdx);
-  };
-  
-  this.getDy = ()=>
-  {
-    return Math.round(this.tdy);
-  };
-  
-  this.start = ()=>
-  {
-    this.t0x = graph.view.translate.x;
-    this.t0y = graph.view.translate.y;
-    this.active = true;
-  };
-  
-  this.panTo = (x, y, w, h)=>
-  {
-    if (!this.active)
-    {
-      this.start();
-    }
-    
-      this.scrollLeft = graph.container.scrollLeft;
-      this.scrollTop = graph.container.scrollTop;
-    
-    w = (w != null) ? w : 0;
-    h = (h != null) ? h : 0;
-    
-    var c = graph.container;
-    this.dx = x + w - c.scrollLeft - c.clientWidth;
-    
-    if (this.dx < 0 && Math.abs(this.dx) < this.border)
-    {
-      this.dx = this.border + this.dx;
-    }
-    else if (this.handleMouseOut)
-    {
-      this.dx = Math.max(this.dx, 0);
-    }
-    else
-    {
-      this.dx = 0;
-    }
-    
-    if (this.dx == 0)
-    {
-      this.dx = x - c.scrollLeft;
-      
-      if (this.dx > 0 && this.dx < this.border)
-      {
-        this.dx = this.dx - this.border;
-      }
-      else if (this.handleMouseOut)
-      {
-        this.dx = Math.min(0, this.dx);
-      }
-      else
-      {
-        this.dx = 0;
-      }
-    }
-    
-    this.dy = y + h - c.scrollTop - c.clientHeight;
-
-    if (this.dy < 0 && Math.abs(this.dy) < this.border)
-    {
-      this.dy = this.border + this.dy;
-    }
-    else if (this.handleMouseOut)
-    {
-      this.dy = Math.max(this.dy, 0);
-    }
-    else
-    {
-      this.dy = 0;
-    }
-    
-    if (this.dy == 0)
-    {
-      this.dy = y - c.scrollTop;
-      
-      if (this.dy > 0 && this.dy < this.border)
-      {
-        this.dy = this.dy - this.border;
-      }
-      else if (this.handleMouseOut)
-      {
-        this.dy = Math.min(0, this.dy);
-      } 
-      else
-      {
-        this.dy = 0;
-      }
-    }
-    
-    if (this.dx != 0 || this.dy != 0)
-    {
-      this.dx *= this.damper;
-      this.dy *= this.damper;
-      
-      if (this.thread == null)
-      {
-        this.thread = createThread();
-      }
-    }
-    else if (this.thread != null)
-    {
-      window.clearInterval(this.thread);
-      this.thread = null;
-    }
-  };
-  
-  this.stop = ()=>
-  {
-    if (this.active)
-    {
-      this.active = false;
-    
-      if (this.thread != null)
-        {
-        window.clearInterval(this.thread);
-        this.thread = null;
-        }
-      
-      this.tdx = 0;
-      this.tdy = 0;
-      
-      if (!this.scrollbars)
-      {
-        var px = graph.panDx;
-        var py = graph.panDy;
-          
-          if (px != 0 || py != 0)
-          {
-            graph.panGraph(0, 0);
-            graph.view.setTranslate(this.t0x + px / graph.view.scale, this.t0y + py / graph.view.scale);
-          }
-      }
-      else
-      {
-        graph.panDx = 0;
-        graph.panDy = 0;
-        graph.fireEvent(new mxEventObject(mxEvent.PAN));
-      }
-    }
-  };
-  
-  this.destroy = ()=>
-  {
-    graph.removeMouseListener(this.mouseListener);
-    mxEvent.removeListener(document, 'mouseup', this.mouseUpListener);
-  };
-};
 
+class mxPanningManager {
   /**
    * Variable: damper
    *
@@ -263,3 +31,192 @@ handleMouseOut = true;
    * Border to handle automatic panning inside the component. Default is 0 (disabled).
    */
   border = 0;
+
+  /**
+   * Class: mxPanningManager
+   *
+   * Implements a handler for panning.
+   */
+  constructor(graph) {
+    this.thread = null;
+    this.active = false;
+    this.tdx = 0;
+    this.tdy = 0;
+    this.t0x = 0;
+    this.t0y = 0;
+    this.dx = 0;
+    this.dy = 0;
+    this.scrollbars = false;
+    this.scrollLeft = 0;
+    this.scrollTop = 0;
+
+    this.mouseListener =
+        {
+          mouseDown: (sender, me) => {
+          },
+          mouseMove: (sender, me) => {
+          },
+          mouseUp: mxUtils.bind(this, (sender, me) => {
+            if (this.active) {
+              this.stop();
+            }
+          })
+        };
+
+    graph.addMouseListener(this.mouseListener);
+
+    this.mouseUpListener = mxUtils.bind(this, () => {
+      if (this.active) {
+        this.stop();
+      }
+    });
+
+    // Stops scrolling on every mouseup anywhere in the document
+    mxEvent.addListener(document, 'mouseup', this.mouseUpListener);
+
+    var createThread = mxUtils.bind(this, () => {
+      this.scrollbars = mxUtils.hasScrollbars(graph.container);
+      this.scrollLeft = graph.container.scrollLeft;
+      this.scrollTop = graph.container.scrollTop;
+
+      return window.setInterval(mxUtils.bind(this, () => {
+        this.tdx -= this.dx;
+        this.tdy -= this.dy;
+
+        if (this.scrollbars) {
+          var left = -graph.container.scrollLeft - Math.ceil(this.dx);
+          var top = -graph.container.scrollTop - Math.ceil(this.dy);
+          graph.panGraph(left, top);
+          graph.panDx = this.scrollLeft - graph.container.scrollLeft;
+          graph.panDy = this.scrollTop - graph.container.scrollTop;
+          graph.fireEvent(new mxEventObject(mxEvent.PAN));
+          // TODO: Implement graph.autoExtend
+        } else {
+          graph.panGraph(this.getDx(), this.getDy());
+        }
+      }), this.delay);
+    });
+
+    this.isActive = () => {
+      return active;
+    };
+
+    this.getDx = () => {
+      return Math.round(this.tdx);
+    };
+
+    this.getDy = () => {
+      return Math.round(this.tdy);
+    };
+
+    this.start = () => {
+      this.t0x = graph.view.translate.x;
+      this.t0y = graph.view.translate.y;
+      this.active = true;
+    };
+
+    this.panTo = (x, y, w, h) => {
+      if (!this.active) {
+        this.start();
+      }
+
+      this.scrollLeft = graph.container.scrollLeft;
+      this.scrollTop = graph.container.scrollTop;
+
+      w = (w != null) ? w : 0;
+      h = (h != null) ? h : 0;
+
+      var c = graph.container;
+      this.dx = x + w - c.scrollLeft - c.clientWidth;
+
+      if (this.dx < 0 && Math.abs(this.dx) < this.border) {
+        this.dx = this.border + this.dx;
+      } else if (this.handleMouseOut) {
+        this.dx = Math.max(this.dx, 0);
+      } else {
+        this.dx = 0;
+      }
+
+      if (this.dx == 0) {
+        this.dx = x - c.scrollLeft;
+
+        if (this.dx > 0 && this.dx < this.border) {
+          this.dx = this.dx - this.border;
+        } else if (this.handleMouseOut) {
+          this.dx = Math.min(0, this.dx);
+        } else {
+          this.dx = 0;
+        }
+      }
+
+      this.dy = y + h - c.scrollTop - c.clientHeight;
+
+      if (this.dy < 0 && Math.abs(this.dy) < this.border) {
+        this.dy = this.border + this.dy;
+      } else if (this.handleMouseOut) {
+        this.dy = Math.max(this.dy, 0);
+      } else {
+        this.dy = 0;
+      }
+
+      if (this.dy == 0) {
+        this.dy = y - c.scrollTop;
+
+        if (this.dy > 0 && this.dy < this.border) {
+          this.dy = this.dy - this.border;
+        } else if (this.handleMouseOut) {
+          this.dy = Math.min(0, this.dy);
+        } else {
+          this.dy = 0;
+        }
+      }
+
+      if (this.dx != 0 || this.dy != 0) {
+        this.dx *= this.damper;
+        this.dy *= this.damper;
+
+        if (this.thread == null) {
+          this.thread = createThread();
+        }
+      } else if (this.thread != null) {
+        window.clearInterval(this.thread);
+        this.thread = null;
+      }
+    };
+
+    this.stop = () => {
+      if (this.active) {
+        this.active = false;
+
+        if (this.thread != null) {
+          window.clearInterval(this.thread);
+          this.thread = null;
+        }
+
+        this.tdx = 0;
+        this.tdy = 0;
+
+        if (!this.scrollbars) {
+          var px = graph.panDx;
+          var py = graph.panDy;
+
+          if (px != 0 || py != 0) {
+            graph.panGraph(0, 0);
+            graph.view.setTranslate(this.t0x + px / graph.view.scale, this.t0y + py / graph.view.scale);
+          }
+        } else {
+          graph.panDx = 0;
+          graph.panDy = 0;
+          graph.fireEvent(new mxEventObject(mxEvent.PAN));
+        }
+      }
+    };
+
+    this.destroy = () => {
+      graph.removeMouseListener(this.mouseListener);
+      mxEvent.removeListener(document, 'mouseup', this.mouseUpListener);
+    };
+  };
+}
+
+export default mxPanningManager;

src/js/util/mxPoint.js

@@ -2,6 +2,10 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+
+import mxUtils from "../util/mxUtils";
+
+class mxPoint {
   /**
    * Class: mxPoint
    *
@@ -12,8 +16,7 @@
    * Constructs a new point for the optional x and y coordinates. If no
    * coordinates are given, then the default values for <x> and <y> are used.
    */
-function mxPoint(x, y)
+  constructor(x, y) {
-{
     this.x = (x != null) ? x : 0;
     this.y = (y != null) ? y : 0;
   };
@@ -37,8 +40,7 @@ y = null;
    *
    * Returns true if the given object equals this point.
    */
-equals = (obj)=>
+  equals = (obj) => {
-{
     return obj != null && obj.x == this.x && obj.y == this.y;
   };
 
@@ -47,8 +49,10 @@ equals = (obj)=>
    *
    * Returns a clone of this <mxPoint>.
    */
-clone = ()=>
+  clone = () => {
-{
     // Handles subclasses as well
     return mxUtils.clone(this);
   };
+}
+
+export default mxPoint;

src/js/util/mxPopupMenu.js

@@ -2,6 +2,11 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+import mxEventSource from "./mxEventSource";
+import mxUtils from "./mxUtils";
+import mxEventObject from "./mxEventObject";
+
+class mxPopupMenu extends mxEventSource {
   /**
    * Class: mxPopupMenu
    *
@@ -28,22 +33,14 @@
    *
    * Fires after the menu has been shown in <popup>.
    */
-function mxPopupMenu(factoryMethod)
+  constructor(factoryMethod) {
-{
     this.factoryMethod = factoryMethod;
 
-  if (factoryMethod != null)
+    if (factoryMethod != null) {
-  {
       this.init();
     }
   };
 
-/**
- * Extends mxEventSource.
- */
-mxPopupMenu.prototype = new mxEventSource();
-constructor = mxPopupMenu;
-
   /**
    * Variable: submenuImage
    *
@@ -116,8 +113,7 @@ labels = true;
    *
    * Initializes the shapes required for this vertex handler.
    */
-init = ()=>
+  init = () => {
-{
     // Adds the inner table
     this.table = document.createElement('table');
     this.table.className = 'mxPopupMenu';
@@ -142,8 +138,7 @@ init = ()=>
    * Returns true if events are handled. This implementation
    * returns <enabled>.
    */
-isEnabled = ()=>
+  isEnabled = () => {
-{
     return this.enabled;
   };
 
@@ -153,8 +148,7 @@ isEnabled = ()=>
    * Enables or disables event handling. This implementation
    * updates <enabled>.
    */
-setEnabled = (enabled)=>
+  setEnabled = (enabled) => {
-{
     this.enabled = enabled;
   };
 
@@ -168,8 +162,7 @@ setEnabled = (enabled)=>
    *
    * me - <mxMouseEvent> that represents the mouse event.
    */
-isPopupTrigger = (me)=>
+  isPopupTrigger = (me) => {
-{
     return me.isPopupTrigger() || (this.useLeftButtonForPopup && mxEvent.isLeftMouseButton(me.getEvent()));
   };
 
@@ -194,16 +187,13 @@ isPopupTrigger = (me)=>
    * Default is true.
    * noHover - Optional boolean to disable hover state.
    */
-addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
+  addItem = (title, image, funct, parent, iconCls, enabled, active, noHover) => {
-{
     parent = parent || this;
     this.itemCount++;
 
     // Smart separators only added if element contains items
-  if (parent.willAddSeparator)
+    if (parent.willAddSeparator) {
-  {
+      if (parent.containsItems) {
-    if (parent.containsItems)
-    {
         this.addSeparator(parent, true);
       }
 
@@ -217,14 +207,11 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
     col1.className = 'mxPopupMenuIcon';
 
     // Adds the given image into the first column
-  if (image != null)
+    if (image != null) {
-  {
       var img = document.createElement('img');
       img.src = image;
       col1.appendChild(img);
-  }
+    } else if (iconCls != null) {
-  else if (iconCls != null)
-  {
       var div = document.createElement('div');
       div.className = iconCls;
       col1.appendChild(div);
@@ -232,8 +219,7 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
 
     tr.appendChild(col1);
 
-  if (this.labels)
+    if (this.labels) {
-  {
       var col2 = document.createElement('td');
       col2.className = 'mxPopupMenuItem' +
           ((enabled != null && !enabled) ? ' mxDisabled' : '');
@@ -250,32 +236,26 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
 
       tr.appendChild(col3);
 
-    if (parent.div == null)
+      if (parent.div == null) {
-    {
         this.createSubmenu(parent);
       }
     }
 
     parent.tbody.appendChild(tr);
 
-  if (active != false && enabled != false)
+    if (active != false && enabled != false) {
-  {
       var currentSelection = null;
 
       mxEvent.addGestureListeners(tr,
-      mxUtils.bind(this, (evt)=>
+          mxUtils.bind(this, (evt) => {
-      {
             this.eventReceiver = tr;
 
-        if (parent.activeRow != tr && parent.activeRow != parent)
+            if (parent.activeRow != tr && parent.activeRow != parent) {
-        {
+              if (parent.activeRow != null && parent.activeRow.div.parentNode != null) {
-          if (parent.activeRow != null && parent.activeRow.div.parentNode != null)
-          {
                 this.hideSubmenu(parent);
               }
 
-          if (tr.div != null)
+              if (tr.div != null) {
-          {
                 this.showSubmenu(parent, tr);
                 parent.activeRow = tr;
               }
@@ -283,57 +263,44 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
 
             mxEvent.consume(evt);
           }),
-      mxUtils.bind(this, (evt)=>
+          mxUtils.bind(this, (evt) => {
-      {
+            if (parent.activeRow != tr && parent.activeRow != parent) {
-        if (parent.activeRow != tr && parent.activeRow != parent)
+              if (parent.activeRow != null && parent.activeRow.div.parentNode != null) {
-        {
-          if (parent.activeRow != null && parent.activeRow.div.parentNode != null)
-          {
                 this.hideSubmenu(parent);
               }
 
-          if (this.autoExpand && tr.div != null)
+              if (this.autoExpand && tr.div != null) {
-          {
                 this.showSubmenu(parent, tr);
                 parent.activeRow = tr;
               }
             }
 
             // Sets hover style because TR in IE doesn't have hover
-        if (!noHover)
+            if (!noHover) {
-        {
               tr.className = 'mxPopupMenuItemHover';
             }
           }),
-      mxUtils.bind(this, (evt)=>
+          mxUtils.bind(this, (evt) => {
-      {
             // EventReceiver avoids clicks on a submenu item
             // which has just been shown in the mousedown
-        if (this.eventReceiver == tr)
+            if (this.eventReceiver == tr) {
-        {
+              if (parent.activeRow != tr) {
-          if (parent.activeRow != tr)
-          {
                 this.hideMenu();
               }
 
               // Workaround for lost current selection in page because of focus in IE
-          if (currentSelection != null)
+              if (currentSelection != null) {
-          {
                 // Workaround for "unspecified error" in IE8 standards
-            try
+                try {
-            {
                   currentSelection.select();
-            }
+                } catch (e) {
-            catch (e)
-            {
                   // ignore
                 }
 
                 currentSelection = null;
               }
 
-          if (funct != null)
+              if (funct != null) {
-          {
                 funct(evt);
               }
             }
@@ -344,11 +311,9 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
       );
 
       // Resets hover style because TR in IE doesn't have hover
-    if (!noHover)
+      if (!noHover) {
-    {
         mxEvent.addListener(tr, 'mouseout',
-        mxUtils.bind(this, (evt)=>
+            mxUtils.bind(this, (evt) => {
-        {
               tr.className = 'mxPopupMenuItem';
             })
         );
@@ -361,8 +326,7 @@ addItem = (title, image, funct, parent, iconCls, enabled, active, noHover)=>
   /**
    * Adds a checkmark to the given menuitem.
    */
-addCheckmark = (item, img)=>
+  addCheckmark = (item, img) => {
-{
     var td = item.firstChild.nextSibling;
     td.style.backgroundImage = 'url(\'' + img + '\')';
     td.style.backgroundRepeat = 'no-repeat';
@@ -380,8 +344,7 @@ addCheckmark = (item, img)=>
    *
    * parent - An item returned by <addItem>.
    */
-createSubmenu = (parent)=>
+  createSubmenu = (parent) => {
-{
     parent.table = document.createElement('table');
     parent.table.className = 'mxPopupMenu';
 
@@ -410,10 +373,8 @@ createSubmenu = (parent)=>
    *
    * Shows the submenu inside the given parent row.
    */
-showSubmenu = (parent, row)=>
+  showSubmenu = (parent, row) => {
-{
+    if (row.div != null) {
-  if (row.div != null)
-  {
       row.div.style.left = (parent.div.offsetLeft +
           row.offsetLeft + row.offsetWidth - 1) + 'px';
       row.div.style.top = (parent.div.offsetTop + row.offsetTop) + 'px';
@@ -429,8 +390,7 @@ showSubmenu = (parent, row)=>
 
       var right = offset.x + (b.clientWidth || d.clientWidth);
 
-    if (left + width > right)
+      if (left + width > right) {
-    {
         row.div.style.left = Math.max(0, (parent.div.offsetLeft - width - 6)) + 'px';
       }
 
@@ -449,16 +409,12 @@ showSubmenu = (parent, row)=>
    * parent - Optional item returned by <addItem>.
    * force - Optional boolean to ignore <smartSeparators>. Default is false.
    */
-addSeparator = (parent, force)=>
+  addSeparator = (parent, force) => {
-{
     parent = parent || this;
 
-  if (this.smartSeparators && !force)
+    if (this.smartSeparators && !force) {
-  {
       parent.willAddSeparator = true;
-  }
+    } else if (parent.tbody != null) {
-  else if (parent.tbody != null)
-  {
       parent.willAddSeparator = false;
       var tr = document.createElement('tr');
 
@@ -496,16 +452,13 @@ addSeparator = (parent, force)=>
    * }
    * (end)
    */
-popup = (x, y, cell, evt)=>
+  popup = (x, y, cell, evt) => {
-{
+    if (this.div != null && this.tbody != null && this.factoryMethod != null) {
-  if (this.div != null && this.tbody != null && this.factoryMethod != null)
-  {
       this.div.style.left = x + 'px';
       this.div.style.top = y + 'px';
 
       // Removes all child nodes from the existing menu
-    while (this.tbody.firstChild != null)
+      while (this.tbody.firstChild != null) {
-    {
         mxEvent.release(this.tbody.firstChild);
         this.tbody.removeChild(this.tbody.firstChild);
       }
@@ -513,8 +466,7 @@ popup = (x, y, cell, evt)=>
       this.itemCount = 0;
       this.factoryMethod(this, cell, evt);
 
-    if (this.itemCount > 0)
+      if (this.itemCount > 0) {
-    {
         this.showMenu();
         this.fireEvent(new mxEventObject(mxEvent.SHOW));
       }
@@ -526,8 +478,7 @@ popup = (x, y, cell, evt)=>
    *
    * Returns true if the menu is showing.
    */
-isMenuShowing = ()=>
+  isMenuShowing = () => {
-{
     return this.div != null && this.div.parentNode == document.body;
   };
 
@@ -536,8 +487,7 @@ isMenuShowing = ()=>
    *
    * Shows the menu.
    */
-showMenu = ()=>
+  showMenu = () => {
-{
     // Fits the div inside the viewport
     document.body.appendChild(this.div);
     mxUtils.fit(this.div);
@@ -548,12 +498,9 @@ showMenu = ()=>
    *
    * Removes the menu and all submenus.
    */
-hideMenu = ()=>
+  hideMenu = () => {
-{
+    if (this.div != null) {
-  if (this.div != null)
+      if (this.div.parentNode != null) {
-  {
-    if (this.div.parentNode != null)
-    {
         this.div.parentNode.removeChild(this.div);
       }
 
@@ -572,14 +519,11 @@ hideMenu = ()=>
    *
    * parent - An item returned by <addItem>.
    */
-hideSubmenu = (parent)=>
+  hideSubmenu = (parent) => {
-{
+    if (parent.activeRow != null) {
-  if (parent.activeRow != null)
-  {
       this.hideSubmenu(parent.activeRow);
 
-    if (parent.activeRow.div.parentNode != null)
+      if (parent.activeRow.div.parentNode != null) {
-    {
         parent.activeRow.div.parentNode.removeChild(parent.activeRow.div);
       }
 
@@ -592,17 +536,17 @@ hideSubmenu = (parent)=>
    *
    * Destroys the handler and all its resources and DOM nodes.
    */
-destroy = ()=>
+  destroy = () => {
-{
+    if (this.div != null) {
-  if (this.div != null)
-  {
       mxEvent.release(this.div);
 
-    if (this.div.parentNode != null)
+      if (this.div.parentNode != null) {
-    {
         this.div.parentNode.removeChild(this.div);
       }
 
       this.div = null;
     }
   };
+}
+
+export default mxPopupMenu;

src/js/util/mxRectangle.js

@@ -13,20 +13,16 @@
  * Constructs a new rectangle for the optional parameters. If no parameters
  * are given then the respective default values are used.
  */
-function mxRectangle(x, y, width, height)
-{
-  mxPoint.call(this, x, y);
 
+import mxPoint from "./mxPoint";
+
+class mxRectangle extends mxPoint {
+  constructor(x, y, width, height) {
+    super(x, y);
     this.width = (width != null) ? width : 0;
     this.height = (height != null) ? height : 0;
   };
 
-/**
- * Extends mxPoint.
- */
-mxRectangle.prototype = new mxPoint();
-constructor = mxRectangle;
-
   /**
    * Variable: width
    *
@@ -46,8 +42,7 @@ height = null;
    *
    * Sets this rectangle to the specified values
    */
-setRect = (x, y, w, h)=>
+  setRect = (x, y, w, h) => {
-{
     this.x = x;
     this.y = y;
     this.width = w;
@@ -59,8 +54,7 @@ setRect = (x, y, w, h)=>
    *
    * Returns the x-coordinate of the center point.
    */
-getCenterX = function ()
+  getCenterX = function () {
-{
     return this.x + this.width / 2;
   };
 
@@ -69,8 +63,7 @@ getCenterX = function ()
    *
    * Returns the y-coordinate of the center point.
    */
-getCenterY = function ()
+  getCenterY = function () {
-{
     return this.y + this.height / 2;
   };
 
@@ -79,10 +72,8 @@ getCenterY = function ()
    *
    * Adds the given rectangle to this rectangle.
    */
-add = (rect)=>
+  add = (rect) => {
-{
+    if (rect != null) {
-  if (rect != null)
-  {
       var minX = Math.min(this.x, rect.x);
       var minY = Math.min(this.y, rect.y);
       var maxX = Math.max(this.x + this.width, rect.x + rect.width);
@@ -100,10 +91,8 @@ add = (rect)=>
    *
    * Changes this rectangle to where it overlaps with the given rectangle.
    */
-intersect = (rect)=>
+  intersect = (rect) => {
-{
+    if (rect != null) {
-  if (rect != null)
-  {
       var r1 = this.x + this.width;
       var r2 = rect.x + rect.width;
 
@@ -124,8 +113,7 @@ intersect = (rect)=>
    * the given amount from the x- and y-coordinates and adds twice the amount
    * to the width and height.
    */
-grow = (amount)=>
+  grow = (amount) => {
-{
     this.x -= amount;
     this.y -= amount;
     this.width += 2 * amount;
@@ -139,8 +127,7 @@ grow = (amount)=>
    *
    * Returns the top, left corner as a new <mxPoint>.
    */
-getPoint = ()=>
+  getPoint = () => {
-{
     return new mxPoint(this.x, this.y);
   };
 
@@ -149,8 +136,7 @@ getPoint = ()=>
    *
    * Rotates this rectangle by 90 degree around its center point.
    */
-rotate90 = ()=>
+  rotate90 = () => {
-{
     var t = (this.width - this.height) / 2;
     this.x += t;
     this.y -= t;
@@ -164,8 +150,7 @@ rotate90 = ()=>
    *
    * Returns true if the given object equals this rectangle.
    */
-equals = (obj)=>
+  equals = (obj) => {
-{
     return obj != null && obj.x == this.x && obj.y == this.y &&
         obj.width == this.width && obj.height == this.height;
   };
@@ -175,7 +160,9 @@ equals = (obj)=>
    *
    * Returns a new <mxRectangle> which is a copy of the given rectangle.
    */
-mxRectangle.fromRectangle = (rect)=>
+  static fromRectangle = (rect) => {
-{
     return new mxRectangle(rect.x, rect.y, rect.width, rect.height);
   };
+}
+
+export default mxRectangle;

src/js/util/mxResources.js

@@ -448,3 +448,5 @@ var mxResources =
   }
 
 };
+
+export default mxResources;

src/js/util/mxToolbar.js

@@ -2,36 +2,14 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- * Class: mxToolbar
- * 
- * Creates a toolbar inside a given DOM node. The toolbar may contain icons,
- * buttons and combo boxes.
- * 
- * Event: mxEvent.SELECT
- * 
- * Fires when an item was selected in the toolbar. The <code>function</code>
- * property contains the function that was selected in <selectMode>.
- * 
- * Constructor: mxToolbar
- * 
- * Constructs a toolbar in the specified container.
- *
- * Parameters:
- *
- * container - DOM node that contains the toolbar.
- */
-function mxToolbar(container)
-{
-  this.container = container;
-};
 
-/**
+import mxUtils from "./mxUtils";
- * Extends mxEventSource.
+import mxPoint from "./mxPoint";
- */
+import mxPopupMenu from "./mxPopupMenu";
-mxToolbar.prototype = new mxEventSource();
+import mxEventSource from "./mxEventSource";
-constructor = mxToolbar;
+import mxEventObject from "./mxEventObject";
 
+class mxToolbar extends mxEventSource {
   /**
    * Variable: container
    *
@@ -69,6 +47,29 @@ noReset = false;
    */
   updateDefaultMode = true;
 
+  /**
+   * Class: mxToolbar
+   *
+   * Creates a toolbar inside a given DOM node. The toolbar may contain icons,
+   * buttons and combo boxes.
+   *
+   * Event: mxEvent.SELECT
+   *
+   * Fires when an item was selected in the toolbar. The <code>function</code>
+   * property contains the function that was selected in <selectMode>.
+   *
+   * Constructor: mxToolbar
+   *
+   * Constructs a toolbar in the specified container.
+   *
+   * Parameters:
+   *
+   * container - DOM node that contains the toolbar.
+   */
+  constructor(container) {
+    this.container = container;
+  };
+
   /**
    * Function: addItem
    *
@@ -87,22 +88,17 @@ updateDefaultMode = true;
    * factoryMethod - Optional factory method for popup menu, eg.
    * (menu, evt, cell)=> { menu.addItem('Hello, World!'); }
    */
-addItem = (title, icon, funct, pressedIcon, style, factoryMethod)=>
+  addItem = (title, icon, funct, pressedIcon, style, factoryMethod) => {
-{
     var img = document.createElement((icon != null) ? 'img' : 'button');
     var initialClassName = style || ((factoryMethod != null) ?
         'mxToolbarMode' : 'mxToolbarItem');
     img.className = initialClassName;
     img.setAttribute('src', icon);
 
-  if (title != null)
+    if (title != null) {
-  {
+      if (icon != null) {
-    if (icon != null)
-    {
         img.setAttribute('title', title);
-    }
+      } else {
-    else
-    {
         mxUtils.write(img, title);
       }
     }
@@ -110,59 +106,45 @@ addItem = (title, icon, funct, pressedIcon, style, factoryMethod)=>
     this.container.appendChild(img);
 
     // Invokes the function on a click on the toolbar item
-  if (funct != null)
+    if (funct != null) {
-  {
       mxEvent.addListener(img, 'click', funct);
 
-    if (mxClient.IS_TOUCH)
+      if (mxClient.IS_TOUCH) {
-    {
         mxEvent.addListener(img, 'touchend', funct);
       }
     }
 
-  var mouseHandler = mxUtils.bind(this, (evt)=>
+    var mouseHandler = mxUtils.bind(this, (evt) => {
-  {
+      if (pressedIcon != null) {
-    if (pressedIcon != null)
-    {
         img.setAttribute('src', icon);
-    }
+      } else {
-    else
-    {
         img.style.backgroundColor = '';
       }
     });
 
     // Highlights the toolbar item with a gray background
     // while it is being clicked with the mouse
-  mxEvent.addGestureListeners(img, mxUtils.bind(this, (evt)=>
+    mxEvent.addGestureListeners(img, mxUtils.bind(this, (evt) => {
-  {
+      if (pressedIcon != null) {
-    if (pressedIcon != null)
-    {
         img.setAttribute('src', pressedIcon);
-    }
+      } else {
-    else
-    {
         img.style.backgroundColor = 'gray';
       }
 
       // Popup Menu
-    if (factoryMethod != null)
+      if (factoryMethod != null) {
-    {
+        if (this.menu == null) {
-      if (this.menu == null)
-      {
           this.menu = new mxPopupMenu();
           this.menu.init();
         }
 
         var last = this.currentImg;
 
-      if (this.menu.isMenuShowing())
+        if (this.menu.isMenuShowing()) {
-      {
           this.menu.hideMenu();
         }
 
-      if (last != img)
+        if (last != img) {
-      {
           // Redirects factory method to local factory method
           this.currentImg = img;
           this.menu.factoryMethod = factoryMethod;
@@ -173,12 +155,10 @@ addItem = (title, icon, funct, pressedIcon, style, factoryMethod)=>
           this.menu.popup(point.x, point.y, null, evt);
 
           // Sets and overrides to restore classname
-        if (this.menu.isMenuShowing())
+          if (this.menu.isMenuShowing()) {
-        {
             img.className = initialClassName + 'Selected';
 
-          this.menu.hideMenu = ()=>
+            this.menu.hideMenu = () => {
-          {
               hideMenu.apply(this);
               img.className = initialClassName;
               this.currentImg = null;
@@ -203,8 +183,7 @@ addItem = (title, icon, funct, pressedIcon, style, factoryMethod)=>
    *
    * style - Optional style classname. Default is mxToolbarCombo.
    */
-addCombo = (style)=>
+  addCombo = (style) => {
-{
     var div = document.createElement('div');
     div.style.display = 'inline';
     div.className = 'mxToolbarComboContainer';
@@ -230,19 +209,16 @@ addCombo = (style)=>
    * title - String that specifies the title of the default element.
    * style - Optional style classname. Default is mxToolbarCombo.
    */
-addActionCombo = (title, style)=>
+  addActionCombo = (title, style) => {
-{
     var select = document.createElement('select');
     select.className = style || 'mxToolbarCombo';
     this.addOption(select, title, null);
 
-  mxEvent.addListener(select, 'change', (evt)=>
+    mxEvent.addListener(select, 'change', (evt) => {
-  {
       var value = select.options[select.selectedIndex];
       select.selectedIndex = 0;
 
-    if (value.funct != null)
+      if (value.funct != null) {
-    {
         value.funct(evt);
       }
     });
@@ -265,17 +241,13 @@ addActionCombo = (title, style)=>
    * title - String that specifies the title of the option.
    * value - Specifies the value associated with this option.
    */
-addOption = (combo, title, value)=>
+  addOption = (combo, title, value) => {
-{
     var option = document.createElement('option');
     mxUtils.writeln(option, title);
 
-  if (typeof(value) == 'function')
+    if (typeof (value) == 'function') {
-  {
       option.funct = value;
-  }
+    } else {
-  else
-  {
       option.setAttribute('value', value);
     }
 
@@ -291,35 +263,28 @@ addOption = (combo, title, value)=>
    * be selected at a time. The currently selected item is the default item
    * after a reset of the toolbar.
    */
-addSwitchMode = (title, icon, funct, pressedIcon, style)=>
+  addSwitchMode = (title, icon, funct, pressedIcon, style) => {
-{
     var img = document.createElement('img');
     img.initialClassName = style || 'mxToolbarMode';
     img.className = img.initialClassName;
     img.setAttribute('src', icon);
     img.altIcon = pressedIcon;
 
-  if (title != null)
+    if (title != null) {
-  {
       img.setAttribute('title', title);
     }
 
-  mxEvent.addListener(img, 'click', mxUtils.bind(this, (evt)=>
+    mxEvent.addListener(img, 'click', mxUtils.bind(this, (evt) => {
-  {
       var tmp = this.selectedMode.altIcon;
 
-    if (tmp != null)
+      if (tmp != null) {
-    {
         this.selectedMode.altIcon = this.selectedMode.getAttribute('src');
         this.selectedMode.setAttribute('src', tmp);
-    }
+      } else {
-    else
-    {
         this.selectedMode.className = this.selectedMode.initialClassName;
       }
 
-    if (this.updateDefaultMode)
+      if (this.updateDefaultMode) {
-    {
         this.defaultMode = img;
       }
 
@@ -327,13 +292,10 @@ addSwitchMode = (title, icon, funct, pressedIcon, style)=>
 
       var tmp = img.altIcon;
 
-    if (tmp != null)
+      if (tmp != null) {
-    {
         img.altIcon = img.getAttribute('src');
         img.setAttribute('src', tmp);
-    }
+      } else {
-    else
-    {
         img.className = img.initialClassName + 'Selected';
       }
 
@@ -343,8 +305,7 @@ addSwitchMode = (title, icon, funct, pressedIcon, style)=>
 
     this.container.appendChild(img);
 
-  if (this.defaultMode == null)
+    if (this.defaultMode == null) {
-  {
       this.defaultMode = img;
 
       // Function should fire only once so
@@ -366,8 +327,7 @@ addSwitchMode = (title, icon, funct, pressedIcon, style)=>
    * The function argument uses the following signature: funct(evt, cell) where
    * evt is the native mouse event and cell is the cell under the mouse.
    */
-addMode = (title, icon, funct, pressedIcon, style, toggle)=>
+  addMode = (title, icon, funct, pressedIcon, style, toggle) => {
-{
     toggle = (toggle != null) ? toggle : true;
     var img = document.createElement((icon != null) ? 'img' : 'button');
 
@@ -376,27 +336,22 @@ addMode = (title, icon, funct, pressedIcon, style, toggle)=>
     img.setAttribute('src', icon);
     img.altIcon = pressedIcon;
 
-  if (title != null)
+    if (title != null) {
-  {
       img.setAttribute('title', title);
     }
 
-  if (this.enabled && toggle)
+    if (this.enabled && toggle) {
-  {
+      mxEvent.addListener(img, 'click', mxUtils.bind(this, (evt) => {
-    mxEvent.addListener(img, 'click', mxUtils.bind(this, (evt)=>
-    {
         this.selectMode(img, funct);
         this.noReset = false;
       }));
 
-    mxEvent.addListener(img, 'dblclick', mxUtils.bind(this, (evt)=>
+      mxEvent.addListener(img, 'dblclick', mxUtils.bind(this, (evt) => {
-    {
         this.selectMode(img, funct);
         this.noReset = true;
       }));
 
-    if (this.defaultMode == null)
+      if (this.defaultMode == null) {
-    {
         this.defaultMode = img;
         this.defaultFunction = funct;
         this.selectMode(img, funct);
@@ -415,21 +370,15 @@ addMode = (title, icon, funct, pressedIcon, style, toggle)=>
    * DOM node as selected. This function fires a select event with the given
    * function as a parameter.
    */
-selectMode = (domNode, funct)=>
+  selectMode = (domNode, funct) => {
-{
+    if (this.selectedMode != domNode) {
-  if (this.selectedMode != domNode)
+      if (this.selectedMode != null) {
-  {
-    if (this.selectedMode != null)
-    {
         var tmp = this.selectedMode.altIcon;
 
-      if (tmp != null)
+        if (tmp != null) {
-      {
           this.selectedMode.altIcon = this.selectedMode.getAttribute('src');
           this.selectedMode.setAttribute('src', tmp);
-      }
+        } else {
-      else
-      {
           this.selectedMode.className = this.selectedMode.initialClassName;
         }
       }
@@ -437,13 +386,10 @@ selectMode = (domNode, funct)=>
       this.selectedMode = domNode;
       var tmp = this.selectedMode.altIcon;
 
-    if (tmp != null)
+      if (tmp != null) {
-    {
         this.selectedMode.altIcon = this.selectedMode.getAttribute('src');
         this.selectedMode.setAttribute('src', tmp);
-    }
+      } else {
-    else
-    {
         this.selectedMode.className = this.selectedMode.initialClassName + 'Selected';
       }
 
@@ -457,10 +403,8 @@ selectMode = (domNode, funct)=>
    * Selects the default mode and resets the state of the previously selected
    * mode.
    */
-resetMode = (forced)=>
+  resetMode = (forced) => {
-{
+    if ((forced || !this.noReset) && this.selectedMode != this.defaultMode) {
-  if ((forced || !this.noReset) && this.selectedMode != this.defaultMode)
-  {
       // The last selected switch mode will be activated
       // so the function was already executed and is
       // no longer required here
@@ -477,8 +421,7 @@ resetMode = (forced)=>
    *
    * icon - URL of the separator icon.
    */
-addSeparator = (icon)=>
+  addSeparator = (icon) => {
-{
     return this.addItem(null, icon, null);
   };
 
@@ -487,8 +430,7 @@ addSeparator = (icon)=>
    *
    * Adds a break to the container.
    */
-addBreak = ()=>
+  addBreak = () => {
-{
     mxUtils.br(this.container);
   };
 
@@ -497,8 +439,7 @@ addBreak = ()=>
    *
    * Adds a horizontal line to the container.
    */
-addLine = ()=>
+  addLine = () => {
-{
     var hr = document.createElement('hr');
 
     hr.style.marginRight = '6px';
@@ -512,16 +453,17 @@ addLine = ()=>
    *
    * Removes the toolbar and all its associated resources.
    */
-destroy = function ()
+  destroy = function () {
-{
     mxEvent.release(this.container);
     this.container = null;
     this.defaultMode = null;
     this.defaultFunction = null;
     this.selectedMode = null;
 
-  if (this.menu != null)
+    if (this.menu != null) {
-  {
       this.menu.destroy();
     }
   };
+}
+
+export default mxToolbar;

src/js/util/mxUndoManager.js

@@ -2,6 +2,33 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+
+import mxEventObject from "./mxEventObject";
+import mxEventSource from "./mxEventSource";
+
+class mxUndoManager extends mxEventSource {
+  /**
+   * Variable: size
+   *
+   * Maximum command history size. 0 means unlimited history. Default is
+   * 100.
+   */
+  size = null;
+
+  /**
+   * Variable: history
+   *
+   * Array that contains the steps of the command history.
+   */
+  history = null;
+
+  /**
+   * Variable: indexOfNextAdd
+   *
+   * Index of the element to be added next.
+   */
+  indexOfNextAdd = 0;
+
   /**
    * Class: mxUndoManager
    *
@@ -70,47 +97,17 @@
    * Constructs a new undo manager with the given history size. If no history
    * size is given, then a default size of 100 steps is used.
    */
-function mxUndoManager(size)
+  constructor(size) {
-{
     this.size = (size != null) ? size : 100;
     this.clear();
   };
 
-/**
- * Extends mxEventSource.
- */
-mxUndoManager.prototype = new mxEventSource();
-constructor = mxUndoManager;
-
-/**
- * Variable: size
- * 
- * Maximum command history size. 0 means unlimited history. Default is
- * 100.
- */
-size = null;
-
-/**
- * Variable: history
- * 
- * Array that contains the steps of the command history.
- */
-history = null;
-
-/**
- * Variable: indexOfNextAdd
- * 
- * Index of the element to be added next.
- */
-indexOfNextAdd = 0;
-
   /**
    * Function: isEmpty
    *
    * Returns true if the history is empty.
    */
-isEmpty = ()=>
+  isEmpty = () => {
-{
     return this.history.length == 0;
   };
 
@@ -119,8 +116,7 @@ isEmpty = ()=>
    *
    * Clears the command history.
    */
-clear = ()=>
+  clear = () => {
-{
     this.history = [];
     this.indexOfNextAdd = 0;
     this.fireEvent(new mxEventObject(mxEvent.CLEAR));
@@ -131,8 +127,7 @@ clear = ()=>
    *
    * Returns true if an undo is possible.
    */
-canUndo = ()=>
+  canUndo = () => {
-{
     return this.indexOfNextAdd > 0;
   };
 
@@ -141,15 +136,12 @@ canUndo = ()=>
    *
    * Undoes the last change.
    */
-undo = ()=>
+  undo = () => {
-{
+    while (this.indexOfNextAdd > 0) {
-    while (this.indexOfNextAdd > 0)
-    {
       var edit = this.history[--this.indexOfNextAdd];
       edit.undo();
 
-    if (edit.isSignificant())
+      if (edit.isSignificant()) {
-        {
         this.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit));
         break;
       }
@@ -161,8 +153,7 @@ undo = ()=>
    *
    * Returns true if a redo is possible.
    */
-canRedo = ()=>
+  canRedo = () => {
-{
     return this.indexOfNextAdd < this.history.length;
   };
 
@@ -171,17 +162,14 @@ canRedo = ()=>
    *
    * Redoes the last change.
    */
-redo = ()=>
+  redo = () => {
-{
     var n = this.history.length;
 
-    while (this.indexOfNextAdd < n)
+    while (this.indexOfNextAdd < n) {
-    {
       var edit = this.history[this.indexOfNextAdd++];
       edit.redo();
 
-        if (edit.isSignificant())
+      if (edit.isSignificant()) {
-        {
         this.fireEvent(new mxEventObject(mxEvent.REDO, 'edit', edit));
         break;
       }
@@ -193,13 +181,11 @@ redo = ()=>
    *
    * Method to be called to add new undoable edits to the <history>.
    */
-undoableEditHappened = (undoableEdit)=>
+  undoableEditHappened = (undoableEdit) => {
-{
     this.trim();
 
     if (this.size > 0 &&
-    this.size == this.history.length)
+        this.size == this.history.length) {
-  {
       this.history.shift();
     }
 
@@ -214,16 +200,16 @@ undoableEditHappened = (undoableEdit)=>
    * Removes all pending steps after <indexOfNextAdd> from the history,
    * invoking die on each edit. This is called from <undoableEditHappened>.
    */
-trim = ()=>
+  trim = () => {
-{
+    if (this.history.length > this.indexOfNextAdd) {
-  if (this.history.length > this.indexOfNextAdd)
-  {
       var edits = this.history.splice(this.indexOfNextAdd,
           this.history.length - this.indexOfNextAdd);
 
-    for (var i = 0; i < edits.length; i++)
+      for (var i = 0; i < edits.length; i++) {
-    {
         edits[i].die();
       }
     }
   };
+}
+
+export default mxUndoManager;

src/js/util/mxUndoableEdit.js

@@ -2,6 +2,49 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+
+import mxEvent from "./mxEvent";
+import mxEventObject from "./mxEventObject";
+
+class mxUndoableEdit {
+  /**
+   * Variable: source
+   *
+   * Specifies the source of the edit.
+   */
+  source = null;
+
+  /**
+   * Variable: changes
+   *
+   * Array that contains the changes that make up this edit. The changes are
+   * expected to either have an undo and redo function, or an execute
+   * function. Default is an empty array.
+   */
+  changes = null;
+
+  /**
+   * Variable: significant
+   *
+   * Specifies if the undoable change is significant.
+   * Default is true.
+   */
+  significant = null;
+
+  /**
+   * Variable: undone
+   *
+   * Specifies if this edit has been undone. Default is false.
+   */
+  undone = false;
+
+  /**
+   * Variable: redone
+   *
+   * Specifies if this edit has been redone. Default is false.
+   */
+  redone = false;
+
   /**
    * Class: mxUndoableEdit
    *
@@ -46,58 +89,18 @@
    *
    * Constructs a new undoable edit for the given source.
    */
-function mxUndoableEdit(source, significant)
+  constructor(source, significant) {
-{
     this.source = source;
     this.changes = [];
     this.significant = (significant != null) ? significant : true;
   };
 
-/**
- * Variable: source
- * 
- * Specifies the source of the edit.
- */
-source = null;
-
-/**
- * Variable: changes
- * 
- * Array that contains the changes that make up this edit. The changes are
- * expected to either have an undo and redo function, or an execute
- * function. Default is an empty array.
- */
-changes = null;
-
-/**
- * Variable: significant
- * 
- * Specifies if the undoable change is significant.
- * Default is true.
- */
-significant = null;
-
-/**
- * Variable: undone
- * 
- * Specifies if this edit has been undone. Default is false.
- */
-undone = false;
-
-/**
- * Variable: redone
- * 
- * Specifies if this edit has been redone. Default is false.
- */
-redone = false;
-
   /**
    * Function: isEmpty
    *
    * Returns true if the this edit contains no changes.
    */
-isEmpty = ()=>
+  isEmpty = () => {
-{
     return this.changes.length == 0;
   };
 
@@ -106,8 +109,7 @@ isEmpty = ()=>
    *
    * Returns <significant>.
    */
-isSignificant = ()=>
+  isSignificant = () => {
-{
     return this.significant;
   };
 
@@ -117,8 +119,7 @@ isSignificant = ()=>
    * 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) => {
-{
     this.changes.push(change);
   };
 
@@ -128,7 +129,8 @@ add = (change)=>
    * Hook to notify any listeners of the changes after an <undo> or <redo>
    * has been carried out. This implementation is empty.
    */
-notify = ()=> { };
+  notify = () => {
+  };
 
   /**
    * Function: die
@@ -136,30 +138,25 @@ notify = ()=> { };
    * Hook to free resources after the edit has been removed from the command
    * history. This implementation is empty.
    */
-die = ()=> { };
+  die = () => {
+  };
 
   /**
    * Function: undo
    *
    * Undoes all changes in this edit.
    */
-undo = ()=>
+  undo = () => {
-{
+    if (!this.undone) {
-  if (!this.undone)
-  {
       this.source.fireEvent(new mxEventObject(mxEvent.START_EDIT));
       var count = this.changes.length;
 
-    for (var i = count - 1; i >= 0; i--)
+      for (var i = count - 1; i >= 0; i--) {
-    {
         var change = this.changes[i];
 
-      if (change.execute != null)
+        if (change.execute != null) {
-      {
           change.execute();
-      }
+        } else if (change.undo != null) {
-      else if (change.undo != null)
-      {
           change.undo();
         }
 
@@ -180,23 +177,17 @@ undo = ()=>
    *
    * Redoes all changes in this edit.
    */
-redo = ()=>
+  redo = () => {
-{
+    if (!this.redone) {
-  if (!this.redone)
-  {
       this.source.fireEvent(new mxEventObject(mxEvent.START_EDIT));
       var count = this.changes.length;
 
-    for (var i = 0; i < count; i++)
+      for (var i = 0; i < count; i++) {
-    {
         var change = this.changes[i];
 
-      if (change.execute != null)
+        if (change.execute != null) {
-      {
           change.execute();
-      }
+        } else if (change.redo != null) {
-      else if (change.redo != null)
-      {
           change.redo();
         }
 
@@ -211,3 +202,6 @@ redo = ()=>
 
     this.notify();
   };
+}
+
+export default mxUndoableEdit;

src/js/util/mxUrlConverter.js

@@ -2,14 +2,15 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+
+class mxUrlConverter {
   /**
    *
    * Class: mxUrlConverter
    *
    * Converts relative and absolute URLs to absolute URLs with protocol and domain.
    */
-var mxUrlConverter = ()=>
+  constructor() {
-{
     // Empty constructor
   };
 
@@ -39,15 +40,13 @@ baseDomain = null;
    *
    * Private helper function to update the base URL.
    */
-updateBaseUrl = ()=>
+  updateBaseUrl = () => {
-{
     this.baseDomain = location.protocol + '//' + location.host;
     this.baseUrl = this.baseDomain + location.pathname;
     var tmp = this.baseUrl.lastIndexOf('/');
 
     // Strips filename etc
-  if (tmp > 0)
+    if (tmp > 0) {
-  {
       this.baseUrl = this.baseUrl.substring(0, tmp + 1);
     }
   };
@@ -57,8 +56,7 @@ updateBaseUrl = ()=>
    *
    * Returns <enabled>.
    */
-isEnabled = ()=>
+  isEnabled = () => {
-{
     return this.enabled;
   };
 
@@ -67,8 +65,7 @@ isEnabled = ()=>
    *
    * Sets <enabled>.
    */
-setEnabled = (value)=>
+  setEnabled = (value) => {
-{
     this.enabled = value;
   };
 
@@ -77,8 +74,7 @@ setEnabled = (value)=>
    *
    * Returns <baseUrl>.
    */
-getBaseUrl = ()=>
+  getBaseUrl = () => {
-{
     return this.baseUrl;
   };
 
@@ -87,8 +83,7 @@ getBaseUrl = ()=>
    *
    * Sets <baseUrl>.
    */
-setBaseUrl = (value)=>
+  setBaseUrl = (value) => {
-{
     this.baseUrl = value;
   };
 
@@ -97,8 +92,7 @@ setBaseUrl = (value)=>
    *
    * Returns <baseDomain>.
    */
-getBaseDomain = ()=>
+  getBaseDomain = () => {
-{
     return this.baseDomain;
   };
 
@@ -107,8 +101,7 @@ getBaseDomain = ()=>
    *
    * Sets <baseDomain>.
    */
-setBaseDomain = (value)=>
+  setBaseDomain = (value) => {
-{
     this.baseDomain = value;
   };
 
@@ -117,8 +110,7 @@ setBaseDomain = (value)=>
    *
    * Returns true if the given URL is relative.
    */
-isRelativeUrl = (url)=>
+  isRelativeUrl = (url) => {
-{
     return url != null && url.substring(0, 2) != '//' && url.substring(0, 7) != 'http://' &&
         url.substring(0, 8) != 'https://' && url.substring(0, 10) != 'data:image' &&
         url.substring(0, 7) != 'file://';
@@ -130,24 +122,21 @@ isRelativeUrl = (url)=>
    * Converts the given URL to an absolute URL with protol and domain.
    * Relative URLs are first converted to absolute URLs.
    */
-convert = (url)=>
+  convert = (url) => {
-{
+    if (this.isEnabled() && this.isRelativeUrl(url)) {
-  if (this.isEnabled() && this.isRelativeUrl(url))
+      if (this.getBaseUrl() == null) {
-  {
-    if (this.getBaseUrl() == null)
-    {
         this.updateBaseUrl();
       }
 
-    if (url.charAt(0) == '/')
+      if (url.charAt(0) == '/') {
-    {
         url = this.getBaseDomain() + url;
-    }
+      } else {
-    else
-    {
         url = this.getBaseUrl() + url;
       }
     }
 
     return url;
   };
+}
+
+export default mxUrlConverter;

src/js/util/mxWindow.js

@@ -2,6 +2,85 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+
+import mxRectangle from "./mxRectangle";
+import mxEventObject from "./mxEventObject";
+import mxEventSource from "./mxEventSource";
+import mxUtils from "./mxUtils";
+
+class mxWindow extends mxEventSource {
+  /**
+   * Variable: closeImage
+   *
+   * URL of the image to be used for the close icon in the titlebar.
+   */
+  closeImage = mxClient.imageBasePath + '/close.gif';
+
+  /**
+   * Variable: minimizeImage
+   *
+   * URL of the image to be used for the minimize icon in the titlebar.
+   */
+  minimizeImage = mxClient.imageBasePath + '/minimize.gif';
+
+  /**
+   * Variable: normalizeImage
+   *
+   * URL of the image to be used for the normalize icon in the titlebar.
+   */
+  normalizeImage = mxClient.imageBasePath + '/normalize.gif';
+
+  /**
+   * Variable: maximizeImage
+   *
+   * URL of the image to be used for the maximize icon in the titlebar.
+   */
+  maximizeImage = mxClient.imageBasePath + '/maximize.gif';
+
+  /**
+   * Variable: resizeImage
+   *
+   * URL of the image to be used for the resize icon.
+   */
+  resizeImage = mxClient.imageBasePath + '/resize.gif';
+
+  /**
+   * Variable: visible
+   *
+   * Boolean flag that represents the visible state of the window.
+   */
+  visible = false;
+
+  /**
+   * Variable: minimumSize
+   *
+   * <mxRectangle> that specifies the minimum width and height of the window.
+   * Default is (50, 40).
+   */
+  minimumSize = new mxRectangle(0, 0, 50, 40);
+
+  /**
+   * Variable: destroyOnClose
+   *
+   * Specifies if the window should be destroyed when it is closed. If this
+   * is false then the window is hidden using <setVisible>. Default is true.
+   */
+  destroyOnClose = true;
+
+  /**
+   * Variable: title
+   *
+   * Reference to the DOM node (TD) that contains the title.
+   */
+  title = null;
+
+  /**
+   * Variable: content
+   *
+   * Reference to the DOM node that represents the window content.
+   */
+  content = null;
+
   /**
    * Class: mxWindow
    *
@@ -185,10 +264,8 @@
    * style - Optional base classname for the window elements. Default is
    * mxWindow.
    */
-function mxWindow(title, content, x, y, width, height, minimizable, movable, replaceNode, style)
+  constructor(title, content, x, y, width, height, minimizable, movable, replaceNode, style) {
-{
+    if (content != null) {
-  if (content != null)
-  {
       minimizable = (minimizable != null) ? minimizable : true;
       this.content = content;
       this.init(x, y, width, height, style);
@@ -199,107 +276,24 @@ function mxWindow(title, content, x, y, width, height, minimizable, movable, rep
       this.setMinimizable(minimizable);
       this.setTitle(title);
 
-    if (movable == null || movable)
+      if (movable == null || movable) {
-    {
         this.installMoveHandler();
       }
 
-    if (replaceNode != null && replaceNode.parentNode != null)
+      if (replaceNode != null && replaceNode.parentNode != null) {
-    {
         replaceNode.parentNode.replaceChild(this.div, replaceNode);
-    }
+      } else {
-    else
-    {
         document.body.appendChild(this.div);
       }
     }
   };
 
-/**
- * Extends mxEventSource.
- */
-mxWindow.prototype = new mxEventSource();
-constructor = mxWindow;
-
-/**
- * Variable: closeImage
- * 
- * URL of the image to be used for the close icon in the titlebar.
- */
-closeImage = mxClient.imageBasePath + '/close.gif';
-
-/**
- * Variable: minimizeImage
- * 
- * URL of the image to be used for the minimize icon in the titlebar.
- */
-minimizeImage = mxClient.imageBasePath + '/minimize.gif';
-  
-/**
- * Variable: normalizeImage
- * 
- * URL of the image to be used for the normalize icon in the titlebar.
- */
-normalizeImage = mxClient.imageBasePath + '/normalize.gif';
-  
-/**
- * Variable: maximizeImage
- * 
- * URL of the image to be used for the maximize icon in the titlebar.
- */
-maximizeImage = mxClient.imageBasePath + '/maximize.gif';
-
-/**
- * Variable: resizeImage
- * 
- * URL of the image to be used for the resize icon.
- */
-resizeImage = mxClient.imageBasePath + '/resize.gif';
-
-/**
- * Variable: visible
- * 
- * Boolean flag that represents the visible state of the window.
- */
-visible = false;
-
-/**
- * Variable: minimumSize
- * 
- * <mxRectangle> that specifies the minimum width and height of the window.
- * Default is (50, 40).
- */
-minimumSize = new mxRectangle(0, 0, 50, 40);
-
-/**
- * Variable: destroyOnClose
- * 
- * Specifies if the window should be destroyed when it is closed. If this
- * is false then the window is hidden using <setVisible>. Default is true.
- */
-destroyOnClose = true;
-
-/**
- * Variable: title
- * 
- * Reference to the DOM node (TD) that contains the title.
- */
-title = null;
-
-/**
- * Variable: content
- * 
- * Reference to the DOM node that represents the window content.
- */
-content = null;
-
   /**
    * Function: init
    *
    * Initializes the DOM tree that represents the window.
    */
-init = (x, y, width, height, style)=>
+  init = (x, y, width, height, style) => {
-{
     style = (style != null) ? style : 'mxWindow';
 
     this.div = document.createElement('div');
@@ -311,20 +305,17 @@ init = (x, y, width, height, style)=>
     this.table.className = style;
 
     // Disables built-in pan and zoom in IE10 and later
-  if (mxClient.IS_POINTER)
+    if (mxClient.IS_POINTER) {
-  {
       this.div.style.touchAction = 'none';
     }
 
     // Workaround for table size problems in FF
-  if (width != null)
+    if (width != null) {
-  {
       this.div.style.width = width + 'px';
       this.table.style.width = width + 'px';
     }
 
-  if (height != null)
+    if (height != null) {
-  {
       this.div.style.height = height + 'px';
       this.table.style.height = height + 'px';
     }
@@ -358,8 +349,7 @@ init = (x, y, width, height, style)=>
 
     // Workaround for div around div restricts height
     // of inner div if outerdiv has hidden overflow
-  if (this.content.nodeName.toUpperCase() != 'DIV')
+    if (this.content.nodeName.toUpperCase() !== 'DIV') {
-  {
       this.contentWrapper.style.height = '100%';
     }
 
@@ -371,8 +361,7 @@ init = (x, y, width, height, style)=>
     this.div.appendChild(this.table);
 
     // Puts the window on top of other windows when clicked
-  var activator = mxUtils.bind(this, (evt)=>
+    var activator = mxUtils.bind(this, (evt) => {
-  {
       this.activate();
     });
 
@@ -388,17 +377,14 @@ init = (x, y, width, height, style)=>
    * Sets the window title to the given string. HTML markup inside the title
    * will be escaped.
    */
-setTitle = (title)=>
+  setTitle = (title) => {
-{
     // Removes all text content nodes (normally just one)
     var child = this.title.firstChild;
 
-  while (child != null)
+    while (child != null) {
-  {
       var next = child.nextSibling;
 
-    if (child.nodeType == mxConstants.NODETYPE_TEXT)
+      if (child.nodeType === mxConstants.NODETYPE_TEXT) {
-    {
         child.parentNode.removeChild(child);
       }
 
@@ -414,18 +400,13 @@ setTitle = (title)=>
    *
    * Sets if the window contents should be scrollable.
    */
-setScrollable = (scrollable)=>
+  setScrollable = (scrollable) => {
-{
     // Workaround for hang in Presto 2.5.22 (Opera 10.5)
     if (navigator.userAgent == null ||
-    navigator.userAgent.indexOf('Presto/2.5') < 0)
+        navigator.userAgent.indexOf('Presto/2.5') < 0) {
-  {
+      if (scrollable) {
-    if (scrollable)
-    {
         this.contentWrapper.style.overflow = 'auto';
-    }
+      } else {
-    else
-    {
         this.contentWrapper.style.overflow = 'hidden';
       }
     }
@@ -436,19 +417,15 @@ setScrollable = (scrollable)=>
    *
    * Puts the window on top of all other windows.
    */
-activate = ()=>
+  activate = () => {
-{
+    if (mxWindow.activeWindow !== this) {
-  if (mxWindow.activeWindow != this)
-  {
       var style = mxUtils.getCurrentStyle(this.getElement());
       var index = (style != null) ? style.zIndex : 3;
 
-    if (mxWindow.activeWindow)
+      if (mxWindow.activeWindow) {
-    {
         var elt = mxWindow.activeWindow.getElement();
 
-      if (elt != null && elt.style != null)
+        if (elt != null && elt.style != null) {
-      {
           elt.style.zIndex = index;
         }
       }
@@ -466,8 +443,7 @@ activate = ()=>
    *
    * Returuns the outermost DOM node that makes up the window.
    */
-getElement = ()=>
+  getElement = () => {
-{
     return this.div;
   };
 
@@ -476,8 +452,7 @@ getElement = ()=>
    *
    * Makes sure the window is inside the client area of the window.
    */
-fit = ()=>
+  fit = () => {
-{
     mxUtils.fit(this.div);
   };
 
@@ -486,10 +461,8 @@ fit = ()=>
    *
    * Returns true if the window is resizable.
    */
-isResizable = ()=>
+  isResizable = () => {
-{
+    if (this.resize != null) {
-  if (this.resize != null)
-  {
       return this.resize.style.display != 'none';
     }
 
@@ -510,12 +483,9 @@ isResizable = ()=>
    * }
    * (end)
    */
-setResizable = (resizable)=>
+  setResizable = (resizable) => {
-{
+    if (resizable) {
-  if (resizable)
+      if (this.resize == null) {
-  {
-    if (this.resize == null)
-    {
         this.resize = document.createElement('img');
         this.resize.style.position = 'absolute';
         this.resize.style.bottom = '2px';
@@ -529,8 +499,7 @@ setResizable = (resizable)=>
         var width = null;
         var height = null;
 
-      var start = mxUtils.bind(this, (evt)=>
+        var start = mxUtils.bind(this, (evt) => {
-      {
           // LATER: pointerdown starting on border of resize does start
           // the drag operation but does not fire consecutive events via
           // one of the listeners below (does pan instead).
@@ -548,10 +517,8 @@ setResizable = (resizable)=>
 
         // Adds a temporary pair of listeners to intercept
         // the gesture event in the document
-      var dragHandler = mxUtils.bind(this, (evt)=>
+        var dragHandler = mxUtils.bind(this, (evt) => {
-      {
+          if (startX != null && startY != null) {
-        if (startX != null && startY != null)
-        {
             var dx = mxEvent.getClientX(evt) - startX;
             var dy = mxEvent.getClientY(evt) - startY;
 
@@ -562,10 +529,8 @@ setResizable = (resizable)=>
           }
         });
 
-      var dropHandler = mxUtils.bind(this, (evt)=>
+        var dropHandler = mxUtils.bind(this, (evt) => {
-      {
+          if (startX != null && startY != null) {
-        if (startX != null && startY != null)
-        {
             startX = null;
             startY = null;
             mxEvent.removeGestureListeners(document, null, dragHandler, dropHandler);
@@ -576,14 +541,10 @@ setResizable = (resizable)=>
 
         mxEvent.addGestureListeners(this.resize, start, dragHandler, dropHandler);
         this.div.appendChild(this.resize);
-    }
+      } else {
-    else 
-    {
         this.resize.style.display = 'inline';
       }
-  }
+    } else if (this.resize != null) {
-  else if (this.resize != null)
-  {
       this.resize.style.display = 'none';
     }
   };
@@ -593,8 +554,7 @@ setResizable = (resizable)=>
    *
    * Sets the size of the window.
    */
-setSize = (width, height)=>
+  setSize = (width, height) => {
-{
     width = Math.max(this.minimumSize.width, width);
     height = Math.max(this.minimumSize.height, height);
 
@@ -614,8 +574,7 @@ setSize = (width, height)=>
    *
    * Sets if the window is minimizable.
    */
-setMinimizable = (minimizable)=>
+  setMinimizable = (minimizable) => {
-{
     this.minimize.style.display = (minimizable) ? '' : 'none';
   };
 
@@ -626,8 +585,7 @@ setMinimizable = (minimizable)=>
    * A width or height of 0 means keep the existing width or height. This
    * implementation returns the height of the window title and keeps the width.
    */
-getMinimumSize = ()=>
+  getMinimumSize = () => {
-{
     return new mxRectangle(0, 0, 0, this.title.offsetHeight);
   };
 
@@ -636,8 +594,7 @@ getMinimumSize = ()=>
    *
    * Installs the event listeners required for minimizing the window.
    */
-installMinimizeHandler = ()=>
+  installMinimizeHandler = () => {
-{
     this.minimize = document.createElement('img');
 
     this.minimize.setAttribute('src', this.minimizeImage);
@@ -652,12 +609,10 @@ installMinimizeHandler = ()=>
     var maxDisplay = null;
     var height = null;
 
-  var funct = mxUtils.bind(this, (evt)=>
+    var funct = mxUtils.bind(this, (evt) => {
-  {
       this.activate();
 
-    if (!minimized)
+      if (!minimized) {
-    {
         minimized = true;
 
         this.minimize.setAttribute('src', this.normalizeImage);
@@ -670,27 +625,22 @@ installMinimizeHandler = ()=>
 
         var minSize = this.getMinimumSize();
 
-      if (minSize.height > 0)
+        if (minSize.height > 0) {
-      {
           this.div.style.height = minSize.height + 'px';
           this.table.style.height = minSize.height + 'px';
         }
 
-      if (minSize.width > 0)
+        if (minSize.width > 0) {
-      {
           this.div.style.width = minSize.width + 'px';
           this.table.style.width = minSize.width + 'px';
         }
 
-      if (this.resize != null)
+        if (this.resize != null) {
-      {
           this.resize.style.visibility = 'hidden';
         }
 
         this.fireEvent(new mxEventObject(mxEvent.MINIMIZE, 'event', evt));
-    }
+      } else {
-    else
-    {
         minimized = false;
 
         this.minimize.setAttribute('src', this.minimizeImage);
@@ -700,8 +650,7 @@ installMinimizeHandler = ()=>
         this.div.style.height = height;
         this.table.style.height = height;
 
-      if (this.resize != null)
+        if (this.resize != null) {
-      {
           this.resize.style.visibility = '';
         }
 
@@ -719,8 +668,7 @@ installMinimizeHandler = ()=>
    *
    * Sets if the window is maximizable.
    */
-setMaximizable = (maximizable)=>
+  setMaximizable = (maximizable) => {
-{
     this.maximize.style.display = (maximizable) ? '' : 'none';
   };
 
@@ -729,8 +677,7 @@ setMaximizable = (maximizable)=>
    *
    * Installs the event listeners required for maximizing the window.
    */
-installMaximizeHandler = ()=>
+  installMaximizeHandler = () => {
-{
     this.maximize = document.createElement('img');
 
     this.maximize.setAttribute('src', this.maximizeImage);
@@ -749,14 +696,11 @@ installMaximizeHandler = ()=>
     var width = null;
     var minDisplay = null;
 
-  var funct = mxUtils.bind(this, (evt)=>
+    var funct = mxUtils.bind(this, (evt) => {
-  {
       this.activate();
 
-    if (this.maximize.style.display != 'none')
+      if (this.maximize.style.display != 'none') {
-    {
+        if (!maximized) {
-      if (!maximized)
-      {
           maximized = true;
 
           this.maximize.setAttribute('src', this.normalizeImage);
@@ -781,23 +725,19 @@ installMaximizeHandler = ()=>
           this.table.style.width = (document.body.clientWidth - 2) + 'px';
           this.table.style.height = (docHeight - 2) + 'px';
 
-        if (this.resize != null)
+          if (this.resize != null) {
-        {
             this.resize.style.visibility = 'hidden';
           }
 
           var style = mxUtils.getCurrentStyle(this.contentWrapper);
 
-        if (style.overflow == 'auto' || this.resize != null)
+          if (style.overflow == 'auto' || this.resize != null) {
-        {
             this.contentWrapper.style.height = (this.div.offsetHeight -
                 this.title.offsetHeight - this.contentHeightCorrection) + 'px';
           }
 
           this.fireEvent(new mxEventObject(mxEvent.MAXIMIZE, 'event', evt));
-      }
+        } else {
-      else
-      {
           maximized = false;
 
           this.maximize.setAttribute('src', this.maximizeImage);
@@ -814,8 +754,7 @@ installMaximizeHandler = ()=>
 
           var style = mxUtils.getCurrentStyle(this.contentWrapper);
 
-        if (style.overflow == 'auto' || this.resize != null)
+          if (style.overflow == 'auto' || this.resize != null) {
-        {
             this.contentWrapper.style.height = (this.div.offsetHeight -
                 this.title.offsetHeight - this.contentHeightCorrection) + 'px';
           }
@@ -823,8 +762,7 @@ installMaximizeHandler = ()=>
           this.table.style.height = height;
           this.table.style.width = width;
 
-        if (this.resize != null)
+          if (this.resize != null) {
-        {
             this.resize.style.visibility = '';
           }
 
@@ -844,13 +782,11 @@ installMaximizeHandler = ()=>
    *
    * Installs the event listeners required for moving the window.
    */
-installMoveHandler = ()=>
+  installMoveHandler = () => {
-{
     this.title.style.cursor = 'move';
 
     mxEvent.addGestureListeners(this.title,
-    mxUtils.bind(this, (evt)=>
+        mxUtils.bind(this, (evt) => {
-    {
           var startX = mxEvent.getClientX(evt);
           var startY = mxEvent.getClientY(evt);
           var x = this.getX();
@@ -858,8 +794,7 @@ installMoveHandler = ()=>
 
           // Adds a temporary pair of listeners to intercept
           // the gesture event in the document
-      var dragHandler = mxUtils.bind(this, (evt)=>
+          var dragHandler = mxUtils.bind(this, (evt) => {
-      {
             var dx = mxEvent.getClientX(evt) - startX;
             var dy = mxEvent.getClientY(evt) - startY;
             this.setLocation(x + dx, y + dy);
@@ -867,8 +802,7 @@ installMoveHandler = ()=>
             mxEvent.consume(evt);
           });
 
-      var dropHandler = mxUtils.bind(this, (evt)=>
+          var dropHandler = mxUtils.bind(this, (evt) => {
-      {
             mxEvent.removeGestureListeners(document, null, dragHandler, dropHandler);
             this.fireEvent(new mxEventObject(mxEvent.MOVE_END, 'event', evt));
             mxEvent.consume(evt);
@@ -880,8 +814,7 @@ installMoveHandler = ()=>
         }));
 
     // Disables built-in pan and zoom in IE10 and later
-  if (mxClient.IS_POINTER)
+    if (mxClient.IS_POINTER) {
-  {
       this.title.style.touchAction = 'none';
     }
   };
@@ -891,8 +824,7 @@ installMoveHandler = ()=>
    *
    * Sets the upper, left corner of the window.
    */
- setLocation = (x, y)=>
+  setLocation = (x, y) => {
- {
     this.div.style.left = x + 'px';
     this.div.style.top = y + 'px';
   };
@@ -902,8 +834,7 @@ installMoveHandler = ()=>
    *
    * Returns the current position on the x-axis.
    */
-getX = ()=>
+  getX = () => {
-{
     return parseInt(this.div.style.left);
   };
 
@@ -912,8 +843,7 @@ getX = ()=>
    *
    * Returns the current position on the y-axis.
    */
-getY = ()=>
+  getY = () => {
-{
     return parseInt(this.div.style.top);
   };
 
@@ -923,8 +853,7 @@ getY = ()=>
    * Adds the <closeImage> as a new image node in <closeImg> and installs the
    * <close> event.
    */
-installCloseHandler = ()=>
+  installCloseHandler = () => {
-{
     this.closeImg = document.createElement('img');
 
     this.closeImg.setAttribute('src', this.closeImage);
@@ -936,16 +865,12 @@ installCloseHandler = ()=>
     this.buttons.appendChild(this.closeImg);
 
     mxEvent.addGestureListeners(this.closeImg,
-    mxUtils.bind(this, (evt)=>
+        mxUtils.bind(this, (evt) => {
-    {
           this.fireEvent(new mxEventObject(mxEvent.CLOSE, 'event', evt));
 
-      if (this.destroyOnClose)
+          if (this.destroyOnClose) {
-      {
             this.destroy();
-      }
+          } else {
-      else
-      {
             this.setVisible(false);
           }
 
@@ -962,8 +887,7 @@ installCloseHandler = ()=>
    *
    * image - URL of the image to be used.
    */
-setImage = (image)=>
+  setImage = (image) => {
-{
     this.image = document.createElement('img');
     this.image.setAttribute('src', image);
     this.image.setAttribute('align', 'left');
@@ -983,8 +907,7 @@ setImage = (image)=>
    *
    * closable - Boolean specifying if the window should be closable.
    */
-setClosable = (closable)=>
+  setClosable = (closable) => {
-{
     this.closeImg.style.display = (closable) ? '' : 'none';
   };
 
@@ -993,10 +916,8 @@ setClosable = (closable)=>
    *
    * Returns true if the window is visible.
    */
-isVisible = ()=>
+  isVisible = () => {
-{
+    if (this.div != null) {
-  if (this.div != null)
-  {
       return this.div.style.display != 'none';
     }
 
@@ -1012,16 +933,11 @@ isVisible = ()=>
    *
    * visible - Boolean indicating if the window should be made visible.
    */
-setVisible = (visible)=>
+  setVisible = (visible) => {
-{
+    if (this.div != null && this.isVisible() != visible) {
-  if (this.div != null && this.isVisible() != visible)
+      if (visible) {
-  {
-    if (visible)
-    {
         this.show();
-    }
+      } else {
-    else
-    {
         this.hide();
       }
     }
@@ -1032,16 +948,14 @@ setVisible = (visible)=>
    *
    * Shows the window.
    */
-show = ()=>
+  show = () => {
-{
     this.div.style.display = '';
     this.activate();
 
     var style = mxUtils.getCurrentStyle(this.contentWrapper);
 
     if ((style.overflow == 'auto' || this.resize != null) &&
-    this.contentWrapper.style.display != 'none')
+        this.contentWrapper.style.display != 'none') {
-  {
       this.contentWrapper.style.height = (this.div.offsetHeight -
           this.title.offsetHeight - this.contentHeightCorrection) + 'px';
     }
@@ -1054,8 +968,7 @@ show = ()=>
    *
    * Hides the window.
    */
-hide = ()=>
+  hide = () => {
-{
     this.div.style.display = 'none';
     this.fireEvent(new mxEventObject(mxEvent.HIDE));
   };
@@ -1066,12 +979,10 @@ hide = ()=>
    * Destroys the window and removes all associated resources. Fires a
    * <destroy> event prior to destroying the window.
    */
-destroy = ()=>
+  destroy = () => {
-{
     this.fireEvent(new mxEventObject(mxEvent.DESTROY));
 
-  if (this.div != null)
+    if (this.div != null) {
-  {
       mxEvent.release(this.div);
       this.div.parentNode.removeChild(this.div);
       this.div = null;
@@ -1081,3 +992,6 @@ destroy = ()=>
     this.content = null;
     this.contentWrapper = null;
   };
+}
+
+export default mxWindow;

src/js/util/mxXmlCanvas2D.js

@@ -2,6 +2,23 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+
+class mxXmlCanvas2D extends mxAbstractCanvas2D {
+  /**
+   * Variable: textEnabled
+   *
+   * Specifies if text output should be enabled. Default is true.
+   */
+  mxXmlCanvas2textEnabled = true;
+
+  /**
+   * Variable: compressed
+   *
+   * Specifies if the output should be compressed by removing redundant calls.
+   * Default is true.
+   */
+  mxXmlCanvas2compressed = true;
+
   /**
    * Class: mxXmlCanvas2D
    *
@@ -28,9 +45,8 @@
    *
    * Constructs a new abstract canvas.
    */
-function mxXmlCanvas2D(root)
+  constructor(root) {
-{
+    super();
-  mxAbstractCanvas2D.call(this);
 
     /**
      * Variable: root
@@ -43,33 +59,12 @@ function mxXmlCanvas2D(root)
     this.writeDefaults();
   };
 
-/**
- * Extends mxAbstractCanvas2D
- */
-mxUtils.extend(mxXmlCanvas2D, mxAbstractCanvas2D);
-
-/**
- * Variable: textEnabled
- * 
- * Specifies if text output should be enabled. Default is true.
- */
-mxXmlCanvas2textEnabled = true;
-
-/**
- * Variable: compressed
- * 
- * Specifies if the output should be compressed by removing redundant calls.
- * Default is true.
- */
-mxXmlCanvas2compressed = true;
-
   /**
    * Function: writeDefaults
    *
    * Writes the rendering defaults to <root>:
    */
-mxXmlCanvas2writeDefaults = ()=>
+  mxXmlCanvas2writeDefaults = () => {
-{
     var elem;
 
     // Writes font defaults
@@ -101,8 +96,7 @@ mxXmlCanvas2writeDefaults = ()=>
    *
    * Returns a formatted number with 2 decimal places.
    */
-mxXmlCanvas2format = (value)=>
+  mxXmlCanvas2format = (value) => {
-{
     return parseFloat(parseFloat(value).toFixed(2));
   };
 
@@ -111,8 +105,7 @@ mxXmlCanvas2format = (value)=>
    *
    * Creates the given element using the owner document of <root>.
    */
-mxXmlCanvas2createElement = (name)=>
+  mxXmlCanvas2createElement = (name) => {
-{
     return this.root.ownerDocument.createElement(name);
   };
 
@@ -121,10 +114,8 @@ mxXmlCanvas2createElement = (name)=>
    *
    * Saves the drawing state.
    */
-mxXmlCanvas2save = ()=>
+  mxXmlCanvas2save = () => {
-{
+    if (this.compressed) {
-  if (this.compressed)
-  {
       mxAbstractCanvas2save.apply(this, arguments);
     }
 
@@ -136,10 +127,8 @@ mxXmlCanvas2save = ()=>
    *
    * Restores the drawing state.
    */
-mxXmlCanvas2restore = ()=>
+  mxXmlCanvas2restore = () => {
-{
+    if (this.compressed) {
-  if (this.compressed)
-  {
       mxAbstractCanvas2restore.apply(this, arguments);
     }
 
@@ -155,8 +144,7 @@ mxXmlCanvas2restore = ()=>
    *
    * scale - Number that represents the scale where 1 is equal to 100%.
    */
-mxXmlCanvas2scale = (value)=>
+  mxXmlCanvas2scale = (value) => {
-{
     var elem = this.createElement('scale');
     elem.setAttribute('scale', value);
     this.root.appendChild(elem);
@@ -172,8 +160,7 @@ mxXmlCanvas2scale = (value)=>
    * dx - Number that specifies the horizontal translation.
    * dy - Number that specifies the vertical translation.
    */
-mxXmlCanvas2translate = (dx, dy)=>
+  mxXmlCanvas2translate = (dx, dy) => {
-{
     var elem = this.createElement('translate');
     elem.setAttribute('dx', this.format(dx));
     elem.setAttribute('dy', this.format(dy));
@@ -194,12 +181,10 @@ mxXmlCanvas2translate = (dx, dy)=>
    * cx - Number that represents the x-coordinate of the rotation center.
    * cy - Number that represents the y-coordinate of the rotation center.
    */
-mxXmlCanvas2rotate = (theta, flipH, flipV, cx, cy)=>
+  mxXmlCanvas2rotate = (theta, flipH, flipV, cx, cy) => {
-{
     var elem = this.createElement('rotate');
 
-  if (theta != 0 || flipH || flipV)
+    if (theta != 0 || flipH || flipV) {
-  {
       elem.setAttribute('theta', this.format(theta));
       elem.setAttribute('flipH', (flipH) ? '1' : '0');
       elem.setAttribute('flipV', (flipV) ? '1' : '0');
@@ -219,12 +204,9 @@ mxXmlCanvas2rotate = (theta, flipH, flipV, cx, cy)=>
    * value - Number that represents the new alpha. Possible values are between
    * 1 (opaque) and 0 (transparent).
    */
-mxXmlCanvas2setAlpha = (value)=>
+  mxXmlCanvas2setAlpha = (value) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.alpha == value) {
-  {
-    if (this.state.alpha == value)
-    {
         return;
       }
 
@@ -246,12 +228,9 @@ mxXmlCanvas2setAlpha = (value)=>
    * value - Number that represents the new fill alpha. Possible values are between
    * 1 (opaque) and 0 (transparent).
    */
-mxXmlCanvas2setFillAlpha = (value)=>
+  mxXmlCanvas2setFillAlpha = (value) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.fillAlpha == value) {
-  {
-    if (this.state.fillAlpha == value)
-    {
         return;
       }
 
@@ -273,12 +252,9 @@ mxXmlCanvas2setFillAlpha = (value)=>
    * value - Number that represents the new stroke alpha. Possible values are between
    * 1 (opaque) and 0 (transparent).
    */
-mxXmlCanvas2setStrokeAlpha = (value)=>
+  mxXmlCanvas2setStrokeAlpha = (value) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.strokeAlpha == value) {
-  {
-    if (this.state.strokeAlpha == value)
-    {
         return;
       }
 
@@ -299,17 +275,13 @@ mxXmlCanvas2setStrokeAlpha = (value)=>
    *
    * value - Hexadecimal representation of the color or 'none'.
    */
-mxXmlCanvas2setFillColor = (value)=>
+  mxXmlCanvas2setFillColor = (value) => {
-{
+    if (value == mxConstants.NONE) {
-  if (value == mxConstants.NONE)
-  {
       value = null;
     }
 
-  if (this.compressed)
+    if (this.compressed) {
-  {
+      if (this.state.fillColor == value) {
-    if (this.state.fillColor == value)
-    {
         return;
       }
 
@@ -341,10 +313,8 @@ mxXmlCanvas2setFillColor = (value)=>
    * alpha2 - Optional alpha of the end color. Default is 1. Possible values
    * are between 1 (opaque) and 0 (transparent).
    */
-mxXmlCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2)=>
+  mxXmlCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2) => {
-{
+    if (color1 != null && color2 != null) {
-  if (color1 != null && color2 != null)
-  {
       mxAbstractCanvas2setGradient.apply(this, arguments);
 
       var elem = this.createElement('gradient');
@@ -356,18 +326,15 @@ mxXmlCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2
       elem.setAttribute('h', this.format(h));
 
       // Default direction is south
-    if (direction != null)
+      if (direction != null) {
-    {
         elem.setAttribute('direction', direction);
       }
 
-    if (alpha1 != null)
+      if (alpha1 != null) {
-    {
         elem.setAttribute('alpha1', alpha1);
       }
 
-    if (alpha2 != null)
+      if (alpha2 != null) {
-    {
         elem.setAttribute('alpha2', alpha2);
       }
 
@@ -384,17 +351,13 @@ mxXmlCanvas2setGradient = (color1, color2, x, y, w, h, direction, alpha1, alpha2
    *
    * value - Hexadecimal representation of the color or 'none'.
    */
-mxXmlCanvas2setStrokeColor = (value)=>
+  mxXmlCanvas2setStrokeColor = (value) => {
-{
+    if (value == mxConstants.NONE) {
-  if (value == mxConstants.NONE)
-  {
       value = null;
     }
 
-  if (this.compressed)
+    if (this.compressed) {
-  {
+      if (this.state.strokeColor == value) {
-    if (this.state.strokeColor == value)
-    {
         return;
       }
 
@@ -415,12 +378,9 @@ mxXmlCanvas2setStrokeColor = (value)=>
    *
    * value - Numeric representation of the stroke width.
    */
-mxXmlCanvas2setStrokeWidth = (value)=>
+  mxXmlCanvas2setStrokeWidth = (value) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.strokeWidth == value) {
-  {
-    if (this.state.strokeWidth == value)
-    {
         return;
       }
 
@@ -443,12 +403,9 @@ mxXmlCanvas2setStrokeWidth = (value)=>
    * value - Boolean that specifies if the stroke width should be ignored
    * for the dash pattern. Default is false.
    */
-mxXmlCanvas2setDashed = (value, fixDash)=>
+  mxXmlCanvas2setDashed = (value, fixDash) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.dashed == value) {
-  {
-    if (this.state.dashed == value)
-    {
         return;
       }
 
@@ -458,8 +415,7 @@ mxXmlCanvas2setDashed = (value, fixDash)=>
     var elem = this.createElement('dashed');
     elem.setAttribute('dashed', (value) ? '1' : '0');
 
-  if (fixDash != null)
+    if (fixDash != null) {
-  {
       elem.setAttribute('fixDash', (fixDash) ? '1' : '0');
     }
 
@@ -478,12 +434,9 @@ mxXmlCanvas2setDashed = (value, fixDash)=>
    * between the dashes. The lengths are relative to the line width - a length
    * of 1 is equals to the line width.
    */
-mxXmlCanvas2setDashPattern = (value)=>
+  mxXmlCanvas2setDashPattern = (value) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.dashPattern == value) {
-  {
-    if (this.state.dashPattern == value)
-    {
         return;
       }
 
@@ -505,12 +458,9 @@ mxXmlCanvas2setDashPattern = (value)=>
    * value - String that represents the line cap. Possible values are flat, round
    * and square.
    */
-mxXmlCanvas2setLineCap = (value)=>
+  mxXmlCanvas2setLineCap = (value) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.lineCap == value) {
-  {
-    if (this.state.lineCap == value)
-    {
         return;
       }
 
@@ -532,12 +482,9 @@ mxXmlCanvas2setLineCap = (value)=>
    * value - String that represents the line join. Possible values are miter,
    * round and bevel.
    */
-mxXmlCanvas2setLineJoin = (value)=>
+  mxXmlCanvas2setLineJoin = (value) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.lineJoin == value) {
-  {
-    if (this.state.lineJoin == value)
-    {
         return;
       }
 
@@ -558,12 +505,9 @@ mxXmlCanvas2setLineJoin = (value)=>
    *
    * value - Number that represents the miter limit.
    */
-mxXmlCanvas2setMiterLimit = (value)=>
+  mxXmlCanvas2setMiterLimit = (value) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.miterLimit == value) {
-  {
-    if (this.state.miterLimit == value)
-    {
         return;
       }
 
@@ -584,19 +528,14 @@ mxXmlCanvas2setMiterLimit = (value)=>
    *
    * value - Hexadecimal representation of the color or 'none'.
    */
-mxXmlCanvas2setFontColor = (value)=>
+  mxXmlCanvas2setFontColor = (value) => {
-{
+    if (this.textEnabled) {
-  if (this.textEnabled)
+      if (value == mxConstants.NONE) {
-  {
-    if (value == mxConstants.NONE)
-    {
         value = null;
       }
 
-    if (this.compressed)
+      if (this.compressed) {
-    {
+        if (this.state.fontColor == value) {
-      if (this.state.fontColor == value)
-      {
           return;
         }
 
@@ -618,19 +557,14 @@ mxXmlCanvas2setFontColor = (value)=>
    *
    * value - Hexadecimal representation of the color or 'none'.
    */
-mxXmlCanvas2setFontBackgroundColor = (value)=>
+  mxXmlCanvas2setFontBackgroundColor = (value) => {
-{
+    if (this.textEnabled) {
-  if (this.textEnabled)
+      if (value == mxConstants.NONE) {
-  {
-    if (value == mxConstants.NONE)
-    {
         value = null;
       }
 
-    if (this.compressed)
+      if (this.compressed) {
-    {
+        if (this.state.fontBackgroundColor == value) {
-      if (this.state.fontBackgroundColor == value)
-      {
           return;
         }
 
@@ -652,19 +586,14 @@ mxXmlCanvas2setFontBackgroundColor = (value)=>
    *
    * value - Hexadecimal representation of the color or 'none'.
    */
-mxXmlCanvas2setFontBorderColor = (value)=>
+  mxXmlCanvas2setFontBorderColor = (value) => {
-{
+    if (this.textEnabled) {
-  if (this.textEnabled)
+      if (value == mxConstants.NONE) {
-  {
-    if (value == mxConstants.NONE)
-    {
         value = null;
       }
 
-    if (this.compressed)
+      if (this.compressed) {
-    {
+        if (this.state.fontBorderColor == value) {
-      if (this.state.fontBorderColor == value)
-      {
           return;
         }
 
@@ -686,14 +615,10 @@ mxXmlCanvas2setFontBorderColor = (value)=>
    *
    * value - Numeric representation of the font size.
    */
-mxXmlCanvas2setFontSize = (value)=>
+  mxXmlCanvas2setFontSize = (value) => {
-{
+    if (this.textEnabled) {
-  if (this.textEnabled)
+      if (this.compressed) {
-  {
+        if (this.state.fontSize == value) {
-    if (this.compressed)
-    {
-      if (this.state.fontSize == value)
-      {
           return;
         }
 
@@ -716,14 +641,10 @@ mxXmlCanvas2setFontSize = (value)=>
    * value - String representation of the font family. This handles the same
    * values as the CSS font-family property.
    */
-mxXmlCanvas2setFontFamily = (value)=>
+  mxXmlCanvas2setFontFamily = (value) => {
-{
+    if (this.textEnabled) {
-  if (this.textEnabled)
+      if (this.compressed) {
-  {
+        if (this.state.fontFamily == value) {
-    if (this.compressed)
-    {
-      if (this.state.fontFamily == value)
-      {
           return;
         }
 
@@ -746,19 +667,14 @@ mxXmlCanvas2setFontFamily = (value)=>
    * value - Numeric representation of the font family. This is the sum of the
    * font styles from <mxConstants>.
    */
-mxXmlCanvas2setFontStyle = (value)=>
+  mxXmlCanvas2setFontStyle = (value) => {
-{
+    if (this.textEnabled) {
-  if (this.textEnabled)
+      if (value == null) {
-  {
-    if (value == null)
-    {
         value = 0;
       }
 
-    if (this.compressed)
+      if (this.compressed) {
-    {
+        if (this.state.fontStyle == value) {
-      if (this.state.fontStyle == value)
-      {
           return;
         }
 
@@ -780,12 +696,9 @@ mxXmlCanvas2setFontStyle = (value)=>
    *
    * value - Boolean that specifies if shadows should be enabled.
    */
-mxXmlCanvas2setShadow = (value)=>
+  mxXmlCanvas2setShadow = (value) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.shadow == value) {
-  {
-    if (this.state.shadow == value)
-    {
         return;
       }
 
@@ -806,17 +719,13 @@ mxXmlCanvas2setShadow = (value)=>
    *
    * value - Hexadecimal representation of the color or 'none'.
    */
-mxXmlCanvas2setShadowColor = (value)=>
+  mxXmlCanvas2setShadowColor = (value) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (value == mxConstants.NONE) {
-  {
-    if (value == mxConstants.NONE)
-    {
         value = null;
       }
 
-    if (this.state.shadowColor == value)
+      if (this.state.shadowColor == value) {
-    {
         return;
       }
 
@@ -838,12 +747,9 @@ mxXmlCanvas2setShadowColor = (value)=>
    * value - Number that represents the new alpha. Possible values are between
    * 1 (opaque) and 0 (transparent).
    */
-mxXmlCanvas2setShadowAlpha = (value)=>
+  mxXmlCanvas2setShadowAlpha = (value) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.shadowAlpha == value) {
-  {
-    if (this.state.shadowAlpha == value)
-    {
         return;
       }
 
@@ -866,12 +772,9 @@ mxXmlCanvas2setShadowAlpha = (value)=>
    * dx - Number that represents the horizontal offset of the shadow.
    * dy - Number that represents the vertical offset of the shadow.
    */
-mxXmlCanvas2setShadowOffset = (dx, dy)=>
+  mxXmlCanvas2setShadowOffset = (dx, dy) => {
-{
+    if (this.compressed) {
-  if (this.compressed)
+      if (this.state.shadowDx == dx && this.state.shadowDy == dy) {
-  {
-    if (this.state.shadowDx == dx && this.state.shadowDy == dy)
-    {
         return;
       }
 
@@ -897,8 +800,7 @@ mxXmlCanvas2setShadowOffset = (dx, dy)=>
    * w - Number that represents the width of the rectangle.
    * h - Number that represents the height of the rectangle.
    */
-mxXmlCanvas2rect = (x, y, w, h)=>
+  mxXmlCanvas2rect = (x, y, w, h) => {
-{
     var elem = this.createElement('rect');
     elem.setAttribute('x', this.format(x));
     elem.setAttribute('y', this.format(y));
@@ -921,8 +823,7 @@ mxXmlCanvas2rect = (x, y, w, h)=>
    * dx - Number that represents the horizontal rounding.
    * dy - Number that represents the vertical rounding.
    */
-mxXmlCanvas2roundrect = (x, y, w, h, dx, dy)=>
+  mxXmlCanvas2roundrect = (x, y, w, h, dx, dy) => {
-{
     var elem = this.createElement('roundrect');
     elem.setAttribute('x', this.format(x));
     elem.setAttribute('y', this.format(y));
@@ -945,8 +846,7 @@ mxXmlCanvas2roundrect = (x, y, w, h, dx, dy)=>
    * w - Number that represents the width of the ellipse.
    * h - Number that represents the height of the ellipse.
    */
-mxXmlCanvas2ellipse = (x, y, w, h)=>
+  mxXmlCanvas2ellipse = (x, y, w, h) => {
-{
     var elem = this.createElement('ellipse');
     elem.setAttribute('x', this.format(x));
     elem.setAttribute('y', this.format(y));
@@ -971,8 +871,7 @@ mxXmlCanvas2ellipse = (x, y, w, h)=>
    * flipH - Boolean indicating if the image should be flipped horizontally.
    * flipV - Boolean indicating if the image should be flipped vertically.
    */
-mxXmlCanvas2image = (x, y, w, h, src, aspect, flipH, flipV)=>
+  mxXmlCanvas2image = (x, y, w, h, src, aspect, flipH, flipV) => {
-{
     src = this.converter.convert(src);
 
     // LATER: Add option for embedding images as base64.
@@ -993,8 +892,7 @@ mxXmlCanvas2image = (x, y, w, h, src, aspect, flipH, flipV)=>
    *
    * Starts a new path and puts it into the drawing buffer.
    */
-mxXmlCanvas2begin = ()=>
+  mxXmlCanvas2begin = () => {
-{
     this.root.appendChild(this.createElement('begin'));
     this.lastX = 0;
     this.lastY = 0;
@@ -1010,8 +908,7 @@ mxXmlCanvas2begin = ()=>
    * x - Number that represents the x-coordinate of the point.
    * y - Number that represents the y-coordinate of the point.
    */
-mxXmlCanvas2moveTo = (x, y)=>
+  mxXmlCanvas2moveTo = (x, y) => {
-{
     var elem = this.createElement('move');
     elem.setAttribute('x', this.format(x));
     elem.setAttribute('y', this.format(y));
@@ -1030,8 +927,7 @@ mxXmlCanvas2moveTo = (x, y)=>
    * x - Number that represents the x-coordinate of the endpoint.
    * y - Number that represents the y-coordinate of the endpoint.
    */
-mxXmlCanvas2lineTo = (x, y)=>
+  mxXmlCanvas2lineTo = (x, y) => {
-{
     var elem = this.createElement('line');
     elem.setAttribute('x', this.format(x));
     elem.setAttribute('y', this.format(y));
@@ -1052,8 +948,7 @@ mxXmlCanvas2lineTo = (x, y)=>
    * x2 - Number that represents the x-coordinate of the endpoint.
    * y2 - Number that represents the y-coordinate of the endpoint.
    */
-mxXmlCanvas2quadTo = (x1, y1, x2, y2)=>
+  mxXmlCanvas2quadTo = (x1, y1, x2, y2) => {
-{
     var elem = this.createElement('quad');
     elem.setAttribute('x1', this.format(x1));
     elem.setAttribute('y1', this.format(y1));
@@ -1078,8 +973,7 @@ mxXmlCanvas2quadTo = (x1, y1, x2, y2)=>
    * x3 - Number that represents the x-coordinate of the endpoint.
    * y3 - Number that represents the y-coordinate of the endpoint.
    */
-mxXmlCanvas2curveTo = (x1, y1, x2, y2, x3, y3)=>
+  mxXmlCanvas2curveTo = (x1, y1, x2, y2, x3, y3) => {
-{
     var elem = this.createElement('curve');
     elem.setAttribute('x1', this.format(x1));
     elem.setAttribute('y1', this.format(y1));
@@ -1097,8 +991,7 @@ mxXmlCanvas2curveTo = (x1, y1, x2, y2, x3, y3)=>
    *
    * Closes the current path.
    */
-mxXmlCanvas2close = ()=>
+  mxXmlCanvas2close = () => {
-{
     this.root.appendChild(this.createElement('close'));
   };
 
@@ -1127,12 +1020,9 @@ mxXmlCanvas2close = ()=>
    * rotation - Number that specifies the angle of the rotation around the anchor point of the text.
    * dir - Optional string that specifies the text direction. Possible values are rtl and lrt.
    */
-mxXmlCanvas2text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir)=>
+  mxXmlCanvas2text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip, rotation, dir) => {
-{
+    if (this.textEnabled && str != null) {
-  if (this.textEnabled && str != null)
+      if (mxUtils.isNode(str)) {
-  {
-    if (mxUtils.isNode(str))
-    {
         str = mxUtils.getOuterHtml(str);
       }
 
@@ -1143,42 +1033,35 @@ mxXmlCanvas2text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip
       elem.setAttribute('h', this.format(h));
       elem.setAttribute('str', str);
 
-    if (align != null)
+      if (align != null) {
-    {
         elem.setAttribute('align', align);
       }
 
-    if (valign != null)
+      if (valign != null) {
-    {
         elem.setAttribute('valign', valign);
       }
 
       elem.setAttribute('wrap', (wrap) ? '1' : '0');
 
-    if (format == null)
+      if (format == null) {
-    {
         format = '';
       }
 
       elem.setAttribute('format', format);
 
-    if (overflow != null)
+      if (overflow != null) {
-    {
         elem.setAttribute('overflow', overflow);
       }
 
-    if (clip != null)
+      if (clip != null) {
-    {
         elem.setAttribute('clip', (clip) ? '1' : '0');
       }
 
-    if (rotation != null)
+      if (rotation != null) {
-    {
         elem.setAttribute('rotation', rotation);
       }
 
-    if (dir != null)
+      if (dir != null) {
-    {
         elem.setAttribute('dir', dir);
       }
 
@@ -1191,8 +1074,7 @@ mxXmlCanvas2text = (x, y, w, h, str, align, valign, wrap, format, overflow, clip
    *
    * Paints the outline of the current drawing buffer.
    */
-mxXmlCanvas2stroke = ()=>
+  mxXmlCanvas2stroke = () => {
-{
     this.root.appendChild(this.createElement('stroke'));
   };
 
@@ -1201,8 +1083,7 @@ mxXmlCanvas2stroke = ()=>
    *
    * Fills the current drawing buffer.
    */
-mxXmlCanvas2fill = ()=>
+  mxXmlCanvas2fill = () => {
-{
     this.root.appendChild(this.createElement('fill'));
   };
 
@@ -1211,7 +1092,9 @@ mxXmlCanvas2fill = ()=>
    *
    * Fills the current drawing buffer and its outline.
    */
-mxXmlCanvas2fillAndStroke = ()=>
+  mxXmlCanvas2fillAndStroke = () => {
-{
     this.root.appendChild(this.createElement('fillstroke'));
   };
+}
+
+export default mxXmlCanvas2D;

src/js/view/mxCellOverlay.js

@@ -2,76 +2,11 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- * Class: mxCellOverlay
- *
- * Extends <mxEventSource> to implement a graph overlay, represented by an icon
- * and a tooltip. Overlays can handle and fire <click> events and are added to
- * the graph using <mxGraph.addCellOverlay>, and removed using
- * <mxGraph.removeCellOverlay>, or <mxGraph.removeCellOverlays> to remove all overlays.
- * The <mxGraph.getCellOverlays> function returns the array of overlays for a given
- * cell in a graph. If multiple overlays exist for the same cell, then
- * <getBounds> should be overridden in at least one of the overlays.
- * 
- * Overlays appear on top of all cells in a special layer. If this is not
- * desirable, then the image must be rendered as part of the shape or label of
- * the cell instead.
- *
- * Example:
- * 
- * The following adds a new overlays for a given vertex and selects the cell
- * if the overlay is clicked.
- *
- * (code)
- * var overlay = new mxCellOverlay(img, html);
- * graph.addCellOverlay(vertex, overlay);
- * overlay.addListener(mxEvent.CLICK, (sender, evt)=>
- * {
- *   var cell = evt.getProperty('cell');
- *   graph.setSelectionCell(cell);
- * });
- * (end)
- * 
- * For cell overlays to be printed use <mxPrintPreview.printOverlays>.
- *
- * Event: mxEvent.CLICK
- *
- * Fires when the user clicks on the overlay. The <code>event</code> property
- * contains the corresponding mouse event and the <code>cell</code> property
- * contains the cell. For touch devices this is fired if the element receives
- * a touchend event.
- * 
- * Constructor: mxCellOverlay
- *
- * Constructs a new overlay using the given image and tooltip.
- * 
- * Parameters:
- * 
- * image - <mxImage> that represents the icon to be displayed.
- * tooltip - Optional string that specifies the tooltip.
- * align - Optional horizontal alignment for the overlay. Possible
- * values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT>
- * (default).
- * verticalAlign - Vertical alignment for the overlay. Possible
- * values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM>
- * (default).
- */
-function mxCellOverlay(image, tooltip, align, verticalAlign, offset, cursor)
-{
-  this.image = image;
-  this.tooltip = tooltip;
-  this.align = (align != null) ? align : this.align;
-  this.verticalAlign = (verticalAlign != null) ? verticalAlign : this.verticalAlign;
-  this.offset = (offset != null) ? offset : new mxPoint();
-  this.cursor = (cursor != null) ? cursor : 'help';
-};
 
-/**
+import mxPoint from "FIXME";
- * Extends mxEventSource.
+import mxRectangle from "../util/mxRectangle";
- */
-mxCellOverlay.prototype = new mxEventSource();
-constructor = mxCellOverlay;
 
+class mxCellOverlay extends mxEventSource {
   /**
    * Variable: image
    *
@@ -127,6 +62,70 @@ cursor = null;
    */
   defaultOverlap = 0.5;
 
+  /**
+   * Class: mxCellOverlay
+   *
+   * Extends <mxEventSource> to implement a graph overlay, represented by an icon
+   * and a tooltip. Overlays can handle and fire <click> events and are added to
+   * the graph using <mxGraph.addCellOverlay>, and removed using
+   * <mxGraph.removeCellOverlay>, or <mxGraph.removeCellOverlays> to remove all overlays.
+   * The <mxGraph.getCellOverlays> function returns the array of overlays for a given
+   * cell in a graph. If multiple overlays exist for the same cell, then
+   * <getBounds> should be overridden in at least one of the overlays.
+   *
+   * Overlays appear on top of all cells in a special layer. If this is not
+   * desirable, then the image must be rendered as part of the shape or label of
+   * the cell instead.
+   *
+   * Example:
+   *
+   * The following adds a new overlays for a given vertex and selects the cell
+   * if the overlay is clicked.
+   *
+   * (code)
+   * var overlay = new mxCellOverlay(img, html);
+   * graph.addCellOverlay(vertex, overlay);
+   * overlay.addListener(mxEvent.CLICK, (sender, evt)=>
+   * {
+   *   var cell = evt.getProperty('cell');
+   *   graph.setSelectionCell(cell);
+   * });
+   * (end)
+   *
+   * For cell overlays to be printed use <mxPrintPreview.printOverlays>.
+   *
+   * Event: mxEvent.CLICK
+   *
+   * Fires when the user clicks on the overlay. The <code>event</code> property
+   * contains the corresponding mouse event and the <code>cell</code> property
+   * contains the cell. For touch devices this is fired if the element receives
+   * a touchend event.
+   *
+   * Constructor: mxCellOverlay
+   *
+   * Constructs a new overlay using the given image and tooltip.
+   *
+   * Parameters:
+   *
+   * image - <mxImage> that represents the icon to be displayed.
+   * tooltip - Optional string that specifies the tooltip.
+   * align - Optional horizontal alignment for the overlay. Possible
+   * values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT>
+   * (default).
+   * verticalAlign - Vertical alignment for the overlay. Possible
+   * values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM>
+   * (default).
+   */
+  constructor(image, tooltip, align, verticalAlign, offset, cursor) {
+    // no super
+    this.image = image;
+    this.tooltip = tooltip;
+    this.align = (align != null) ? align : this.align;
+    this.verticalAlign = (verticalAlign != null) ? verticalAlign : this.verticalAlign;
+    this.offset = (offset != null) ? offset : new mxPoint();
+    this.cursor = (cursor != null) ? cursor : 'help';
+  };
+
   /**
    * Function: getBounds
    *
@@ -160,8 +159,7 @@ defaultOverlap = 0.5;
    * state - <mxCellState> that represents the current state of the
    * associated cell.
    */
-getBounds = (state)=>
+  getBounds = (state) => {
-{
     var isEdge = state.view.graph.getModel().isEdge(state.cell);
     var s = state.view.scale;
     var pt = null;
@@ -169,50 +167,34 @@ getBounds = (state)=>
     var w = this.image.width;
     var h = this.image.height;
 
-  if (isEdge)
+    if (isEdge) {
-  {
       var pts = state.absolutePoints;
 
-    if (pts.length % 2 == 1)
+      if (pts.length % 2 === 1) {
-    {
         pt = pts[Math.floor(pts.length / 2)];
-    }
+      } else {
-    else
-    {
         var idx = pts.length / 2;
         var p0 = pts[idx - 1];
         var p1 = pts[idx];
         pt = new mxPoint(p0.x + (p1.x - p0.x) / 2,
             p0.y + (p1.y - p0.y) / 2);
       }
-  }
+    } else {
-  else
-  {
       pt = new mxPoint();
 
-    if (this.align == mxConstants.ALIGN_LEFT)
+      if (this.align === mxConstants.ALIGN_LEFT) {
-    {
         pt.x = state.x;
-    }
+      } else if (this.align === mxConstants.ALIGN_CENTER) {
-    else if (this.align == mxConstants.ALIGN_CENTER)
-    {
         pt.x = state.x + state.width / 2;
-    }
+      } else {
-    else
-    {
         pt.x = state.x + state.width;
       }
 
-    if (this.verticalAlign == mxConstants.ALIGN_TOP)
+      if (this.verticalAlign === mxConstants.ALIGN_TOP) {
-    {
         pt.y = state.y;
-    }
+      } else if (this.verticalAlign === mxConstants.ALIGN_MIDDLE) {
-    else if (this.verticalAlign == mxConstants.ALIGN_MIDDLE)
-    {
         pt.y = state.y + state.height / 2;
-    }
+      } else {
-    else
-    {
         pt.y = state.y + state.height;
       }
     }
@@ -227,7 +209,9 @@ getBounds = (state)=>
    * Returns the textual representation of the overlay to be used as the
    * tooltip. This implementation returns <tooltip>.
    */
-toString = ()=>
+  toString = () => {
-{
     return this.tooltip;
   };
+}
+
+export default mxCellOverlay;

src/js/view/mxCellState.js

@@ -2,47 +2,11 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- * Class: mxCellState
- * 
- * Represents the current state of a cell in a given <mxGraphView>.
- * 
- * For edges, the edge label position is stored in <absoluteOffset>.
- * 
- * The size for oversize labels can be retrieved using the boundingBox property
- * of the <text> field as shown below.
- * 
- * (code)
- * var bbox = (state.text != null) ? state.text.boundingBox : null;
- * (end)
- * 
- * Constructor: mxCellState
- * 
- * Constructs a new object that represents the current state of the given
- * cell in the specified view.
- * 
- * Parameters:
- * 
- * view - <mxGraphView> that contains the state.
- * cell - <mxCell> that this state represents.
- * style - Array of key, value pairs that constitute the style.
- */
-function mxCellState(view, cell, style)
-{
-  this.view = view;
-  this.cell = cell;
-  this.style = (style != null) ? style : {};
 
-  this.origin = new mxPoint();
+import mxPoint from "../util/mxPoint";
-  this.absoluteOffset = new mxPoint();
+import mxRectangle from "../util/mxRectangle";
-};
-
-/**
- * Extends mxRectangle.
- */
-mxCellState.prototype = new mxRectangle();
-constructor = mxCellState;
 
+class mxCellState extends mxRectangle {
   /**
    * Variable: view
    *
@@ -169,6 +133,41 @@ unscaledWidth = null;
    */
   unscaledHeight = null;
 
+  /**
+   * Class: mxCellState
+   *
+   * Represents the current state of a cell in a given <mxGraphView>.
+   *
+   * For edges, the edge label position is stored in <absoluteOffset>.
+   *
+   * The size for oversize labels can be retrieved using the boundingBox property
+   * of the <text> field as shown below.
+   *
+   * (code)
+   * var bbox = (state.text != null) ? state.text.boundingBox : null;
+   * (end)
+   *
+   * Constructor: mxCellState
+   *
+   * Constructs a new object that represents the current state of the given
+   * cell in the specified view.
+   *
+   * Parameters:
+   *
+   * view - <mxGraphView> that contains the state.
+   * cell - <mxCell> that this state represents.
+   * style - Array of key, value pairs that constitute the style.
+   */
+  constructor(view, cell, style) {
+    // no super
+    this.view = view;
+    this.cell = cell;
+    this.style = (style != null) ? style : {};
+
+    this.origin = new mxPoint();
+    this.absoluteOffset = new mxPoint();
+  };
+
   /**
    * Function: getPerimeterBounds
    *
@@ -180,13 +179,11 @@ unscaledHeight = null;
    * border - Optional border to be added around the perimeter bounds.
    * bounds - Optional <mxRectangle> to be used as the initial bounds.
    */
-getPerimeterBounds = (border, bounds)=>
+  getPerimeterBounds = (border, bounds) => {
-{
     border = border || 0;
     bounds = (bounds != null) ? bounds : new mxRectangle(this.x, this.y, this.width, this.height);
 
-  if (this.shape != null && this.shape.stencil != null && this.shape.stencil.aspect == 'fixed')
+    if (this.shape != null && this.shape.stencil != null && this.shape.stencil.aspect === 'fixed') {
-  {
       var aspect = this.shape.stencil.computeAspect(this.style, bounds.x, bounds.y, bounds.width, bounds.height);
 
       bounds.x = aspect.x;
@@ -195,8 +192,7 @@ getPerimeterBounds = (border, bounds)=>
       bounds.height = this.shape.stencil.h0 * aspect.height;
     }
 
-  if (border != 0)
+    if (border !== 0) {
-  {
       bounds.grow(border);
     }
 
@@ -214,38 +210,25 @@ getPerimeterBounds = (border, bounds)=>
    * isSource - Boolean that specifies if the first or last point should
    * be assigned.
    */
-setAbsoluteTerminalPoint = (point, isSource)=>
+  setAbsoluteTerminalPoint = (point, isSource) => {
-{
+    if (isSource) {
-  if (isSource)
+      if (this.absolutePoints == null) {
-  {
-    if (this.absolutePoints == null)
-    {
         this.absolutePoints = [];
       }
 
-    if (this.absolutePoints.length == 0)
+      if (this.absolutePoints.length === 0) {
-    {
         this.absolutePoints.push(point);
-    }
+      } else {
-    else
-    {
         this.absolutePoints[0] = point;
       }
-  }
+    } else {
-  else
+      if (this.absolutePoints == null) {
-  {
-    if (this.absolutePoints == null)
-    {
         this.absolutePoints = [];
         this.absolutePoints.push(null);
         this.absolutePoints.push(point);
-    }
+      } else if (this.absolutePoints.length === 1) {
-    else if (this.absolutePoints.length == 1)
-    {
         this.absolutePoints.push(point);
-    }
+      } else {
-    else
-    {
         this.absolutePoints[this.absolutePoints.length - 1] = point;
       }
     }
@@ -256,15 +239,12 @@ setAbsoluteTerminalPoint = (point, isSource)=>
    *
    * Sets the given cursor on the shape and text shape.
    */
-setCursor = (cursor)=>
+  setCursor = (cursor) => {
-{
+    if (this.shape != null) {
-  if (this.shape != null)
-  {
       this.shape.setCursor(cursor);
     }
 
-  if (this.text != null)
+    if (this.text != null) {
-  {
       this.text.setCursor(cursor);
     }
   };
@@ -279,8 +259,7 @@ setCursor = (cursor)=>
    * source - Boolean that specifies if the source or target cell should be
    * returned.
    */
-getVisibleTerminal = (source)=>
+  getVisibleTerminal = (source) => {
-{
     var tmp = this.getVisibleTerminalState(source);
 
     return (tmp != null) ? tmp.cell : null;
@@ -296,8 +275,7 @@ getVisibleTerminal = (source)=>
    * source - Boolean that specifies if the source or target state should be
    * returned.
    */
-getVisibleTerminalState = (source)=>
+  getVisibleTerminalState = (source) => {
-{
     return (source) ? this.visibleSourceState : this.visibleTargetState;
   };
 
@@ -311,14 +289,10 @@ getVisibleTerminalState = (source)=>
    * terminalState - <mxCellState> that represents the terminal.
    * source - Boolean that specifies if the source or target state should be set.
    */
-setVisibleTerminalState = (terminalState, source)=>
+  setVisibleTerminalState = (terminalState, source) => {
-{
+    if (source) {
-  if (source)
-  {
       this.visibleSourceState = terminalState;
-  }
+    } else {
-  else
-  {
       this.visibleTargetState = terminalState;
     }
   };
@@ -328,8 +302,7 @@ setVisibleTerminalState = (terminalState, source)=>
    *
    * Returns the unscaled, untranslated bounds.
    */
-getCellBounds = ()=>
+  getCellBounds = () => {
-{
     return this.cellBounds;
   };
 
@@ -340,8 +313,7 @@ getCellBounds = ()=>
    * <getCellBounds> but with a 90 degree rotation if the shape's
    * isPaintBoundsInverted returns true.
    */
-getPaintBounds = ()=>
+  getPaintBounds = () => {
-{
     return this.paintBounds;
   };
 
@@ -350,15 +322,13 @@ getPaintBounds = ()=>
    *
    * Updates the cellBounds and paintBounds.
    */
-updateCachedBounds = ()=>
+  updateCachedBounds = () => {
-{
     var tr = this.view.translate;
     var s = this.view.scale;
     this.cellBounds = new mxRectangle(this.x / s - tr.x, this.y / s - tr.y, this.width / s, this.height / s);
     this.paintBounds = mxRectangle.fromRectangle(this.cellBounds);
 
-  if (this.shape != null && this.shape.isPaintBoundsInverted())
+    if (this.shape != null && this.shape.isPaintBoundsInverted()) {
-  {
       this.paintBounds.rotate90();
     }
   };
@@ -368,8 +338,7 @@ updateCachedBounds = ()=>
    *
    * Copies all fields from the given state to this state.
    */
-setState = (state)=>
+  setState = (state) => {
-{
     this.view = state.view;
     this.cell = state.cell;
     this.style = state.style;
@@ -393,33 +362,27 @@ setState = (state)=>
    *
    * Returns a clone of this <mxPoint>.
    */
-clone = ()=>
+  clone = () => {
-{
     var clone = new mxCellState(this.view, this.cell, this.style);
 
     // Clones the absolute points
-  if (this.absolutePoints != null)
+    if (this.absolutePoints != null) {
-  {
       clone.absolutePoints = [];
 
-    for (var i = 0; i < this.absolutePoints.length; i++)
+      for (var i = 0; i < this.absolutePoints.length; i++) {
-    {
         clone.absolutePoints[i] = this.absolutePoints[i].clone();
       }
     }
 
-  if (this.origin != null)
+    if (this.origin != null) {
-  {
       clone.origin = this.origin.clone();
     }
 
-  if (this.absoluteOffset != null)
+    if (this.absoluteOffset != null) {
-  {
       clone.absoluteOffset = this.absoluteOffset.clone();
     }
 
-  if (this.boundingBox != null)
+    if (this.boundingBox != null) {
-  {
       clone.boundingBox = this.boundingBox.clone();
     }
 
@@ -441,7 +404,9 @@ clone = ()=>
    *
    * Destroys the state and all associated resources.
    */
-destroy = ()=>
+  destroy = () => {
-{
     this.view.graph.cellRenderer.destroy(this);
   };
+}
+
+export default mxCellState;

src/js/view/mxCellStatePreview.js

@@ -2,26 +2,12 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- *
- * Class: mxCellStatePreview
- * 
- * Implements a live preview for moving cells.
- * 
- * Constructor: mxCellStatePreview
- * 
- * Constructs a move preview for the given graph.
- * 
- * Parameters:
- * 
- * graph - Reference to the enclosing <mxGraph>.
- */
-function mxCellStatePreview(graph)
-{
-  this.deltas = new mxDictionary();
-  this.graph = graph;
-};
 
+import mxUtils from "../util/mxUtils";
+import mxPoint from "../util/mxPoint";
+import mxDictionary from "../util/mxDictionary";
+
+class mxCellStatePreview {
   /**
    * Variable: graph
    *
@@ -43,46 +29,57 @@ deltas = null;
    */
   count = 0;
 
+  /**
+   *
+   * Class: mxCellStatePreview
+   *
+   * Implements a live preview for moving cells.
+   *
+   * Constructor: mxCellStatePreview
+   *
+   * Constructs a move preview for the given graph.
+   *
+   * Parameters:
+   *
+   * graph - Reference to the enclosing <mxGraph>.
+   */
+  constructor(graph) {
+    this.deltas = new mxDictionary();
+    this.graph = graph;
+  };
+
   /**
    * Function: isEmpty
    *
    * Returns true if this contains no entries.
    */
-isEmpty = ()=>
+  isEmpty = () => {
-{
+    return this.count === 0;
-  return this.count == 0;
   };
 
   /**
    * Function: moveState
    */
-moveState = (state, dx, dy, add, includeEdges)=>
+  moveState = (state, dx, dy, add, includeEdges) => {
-{
     add = (add != null) ? add : true;
     includeEdges = (includeEdges != null) ? includeEdges : true;
 
     var delta = this.deltas.get(state.cell);
 
-  if (delta == null)
+    if (delta == null) {
-  {
       // Note: Deltas stores the point and the state since the key is a string.
       delta = {point: new mxPoint(dx, dy), state: state};
       this.deltas.put(state.cell, delta);
       this.count++;
-  }
+    } else if (add) {
-  else if (add)
-  {
       delta.point.x += dx;
       delta.point.y += dy;
-  }
+    } else {
-  else
-  {
       delta.point.x = dx;
       delta.point.y = dy;
     }
 
-  if (includeEdges)
+    if (includeEdges) {
-  {
       this.addEdges(state);
     }
 
@@ -92,15 +89,12 @@ moveState = (state, dx, dy, add, includeEdges)=>
   /**
    * Function: show
    */
-show = (visitor)=>
+  show = (visitor) => {
-{
+    this.deltas.visit(mxUtils.bind(this, (key, delta) => {
-  this.deltas.visit(mxUtils.bind(this, (key, delta)=>
-  {
       this.translateState(delta.state, delta.point.x, delta.point.y);
     }));
 
-  this.deltas.visit(mxUtils.bind(this, (key, delta)=>
+    this.deltas.visit(mxUtils.bind(this, (key, delta) => {
-  {
       this.revalidateState(delta.state, delta.point.x, delta.point.y, visitor);
     }));
   };
@@ -108,22 +102,18 @@ show = (visitor)=>
   /**
    * Function: translateState
    */
-translateState = (state, dx, dy)=>
+  translateState = (state, dx, dy) => {
-{
+    if (state != null) {
-  if (state != null)
-  {
       var model = this.graph.getModel();
 
-    if (model.isVertex(state.cell))
+      if (model.isVertex(state.cell)) {
-    {
         state.view.updateCellState(state);
         var geo = model.getGeometry(state.cell);
 
         // Moves selection cells and non-relative vertices in
         // the first phase so that edge terminal points will
         // be updated in the second phase
-      if ((dx != 0 || dy != 0) && geo != null && (!geo.relative || this.deltas.get(state.cell) != null))
+        if ((dx != 0 || dy != 0) && geo != null && (!geo.relative || this.deltas.get(state.cell) != null)) {
-      {
           state.x += dx;
           state.y += dy;
         }
@@ -131,8 +121,7 @@ translateState = (state, dx, dy)=>
 
       var childCount = model.getChildCount(state.cell);
 
-      for (var i = 0; i < childCount; i++)
+      for (var i = 0; i < childCount; i++) {
-      {
         this.translateState(state.view.getState(model.getChildAt(state.cell, i)), dx, dy);
       }
     }
@@ -141,16 +130,13 @@ translateState = (state, dx, dy)=>
   /**
    * Function: revalidateState
    */
-revalidateState = (state, dx, dy, visitor)=>
+  revalidateState = (state, dx, dy, visitor) => {
-{
+    if (state != null) {
-  if (state != null)
-  {
       var model = this.graph.getModel();
 
       // Updates the edge terminal points and restores the
       // (relative) positions of any (relative) children
-    if (model.isEdge(state.cell))
+      if (model.isEdge(state.cell)) {
-    {
         state.view.updateCellState(state);
       }
 
@@ -160,8 +146,7 @@ revalidateState = (state, dx, dy, visitor)=>
       // Moves selection vertices which are relative
       if ((dx != 0 || dy != 0) && geo != null && geo.relative &&
           model.isVertex(state.cell) && (pState == null ||
-      model.isVertex(pState.cell) || this.deltas.get(state.cell) != null))
+              model.isVertex(pState.cell) || this.deltas.get(state.cell) != null)) {
-    {
         state.x += dx;
         state.y += dy;
       }
@@ -169,15 +154,13 @@ revalidateState = (state, dx, dy, visitor)=>
       this.graph.cellRenderer.redraw(state);
 
       // Invokes the visitor on the given state
-    if (visitor != null)
+      if (visitor != null) {
-    {
         visitor(state);
       }
 
       var childCount = model.getChildCount(state.cell);
 
-      for (var i = 0; i < childCount; i++)
+      for (var i = 0; i < childCount; i++) {
-      {
         this.revalidateState(this.graph.view.getState(model.getChildAt(state.cell, i)), dx, dy, visitor);
       }
     }
@@ -186,18 +169,18 @@ revalidateState = (state, dx, dy, visitor)=>
   /**
    * Function: addEdges
    */
-addEdges = (state)=>
+  addEdges = (state) => {
-{
     var model = this.graph.getModel();
     var edgeCount = model.getEdgeCount(state.cell);
 
-  for (var i = 0; i < edgeCount; i++)
+    for (var i = 0; i < edgeCount; i++) {
-  {
       var s = state.view.getState(model.getEdgeAt(state.cell, i));
 
-    if (s != null)
+      if (s != null) {
-    {
         this.moveState(s, 0, 0);
       }
     }
   };
+}
+
+export default mxCellStatePreview;

src/js/view/mxConnectionConstraint.js

@@ -2,33 +2,8 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- * Class: mxConnectionConstraint
- * 
- * Defines an object that contains the constraints about how to connect one
- * side of an edge to its terminal.
- * 
- * Constructor: mxConnectionConstraint
- * 
- * Constructs a new connection constraint for the given point and boolean
- * arguments.
- * 
- * Parameters:
- * 
- * point - Optional <mxPoint> that specifies the fixed location of the point
- * in relative coordinates. Default is null.
- * perimeter - Optional boolean that specifies if the fixed point should be
- * projected onto the perimeter of the terminal. Default is true.
- */
-function mxConnectionConstraint(point, perimeter, name, dx, dy)
-{
-  this.point = point;
-  this.perimeter = (perimeter != null) ? perimeter : true;
-  this.name = name;
-  this.dx = dx? dx : 0;
-  this.dy = dy? dy : 0;
-};
 
+class mxConnectionConstraint {
   /**
    * Variable: point
    *
@@ -65,3 +40,31 @@ dx = null;
    */
   dy = null;
 
+  /**
+   * Class: mxConnectionConstraint
+   *
+   * Defines an object that contains the constraints about how to connect one
+   * side of an edge to its terminal.
+   *
+   * Constructor: mxConnectionConstraint
+   *
+   * Constructs a new connection constraint for the given point and boolean
+   * arguments.
+   *
+   * Parameters:
+   *
+   * point - Optional <mxPoint> that specifies the fixed location of the point
+   * in relative coordinates. Default is null.
+   * 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) {
+    this.point = point;
+    this.perimeter = (perimeter != null) ? perimeter : true;
+    this.name = name;
+    this.dx = dx ? dx : 0;
+    this.dy = dy ? dy : 0;
+  };
+}
+
+export default mxConnectionConstraint;

src/js/view/mxGraphSelectionModel.js

@@ -2,6 +2,45 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+
+import mxUndoableEdit from "../util/mxUndoableEdit";
+import mxEventSource from "../util/mxEventSource";
+import mxEventObject from "../util/mxEventObject";
+
+class mxGraphSelectionModel extends mxEventSource {
+  /**
+   * Variable: doneResource
+   *
+   * Specifies the resource key for the status message after a long operation.
+   * If the resource for this key does not exist then the value is used as
+   * the status message. Default is 'done'.
+   */
+  doneResource = (mxClient.language != 'none') ? 'done' : '';
+
+  /**
+   * Variable: updatingSelectionResource
+   *
+   * Specifies the resource key for the status message while the selection is
+   * being updated. If the resource for this key does not exist then the
+   * value is used as the status message. Default is 'updatingSelection'.
+   */
+  updatingSelectionResource = (mxClient.language != 'none') ? 'updatingSelection' : '';
+
+  /**
+   * Variable: graph
+   *
+   * Reference to the enclosing <mxGraph>.
+   */
+  graph = null;
+
+  /**
+   * Variable: singleSelection
+   *
+   * Specifies if only one selected item at a time is allowed.
+   * Default is false.
+   */
+  singleSelection = false;
+
   /**
    * Class: mxGraphSelectionModel
    *
@@ -41,58 +80,17 @@
    *
    * graph - Reference to the enclosing <mxGraph>.
    */
-function mxGraphSelectionModel(graph)
+  constructor(graph) {
-{
     this.graph = graph;
     this.cells = [];
   };
 
-/**
- * Extends mxEventSource.
- */
-mxGraphSelectionModel.prototype = new mxEventSource();
-constructor = mxGraphSelectionModel;
-
-/**
- * Variable: doneResource
- * 
- * Specifies the resource key for the status message after a long operation.
- * If the resource for this key does not exist then the value is used as
- * the status message. Default is 'done'.
- */
-doneResource = (mxClient.language != 'none') ? 'done' : '';
-
-/**
- * Variable: updatingSelectionResource
- *
- * Specifies the resource key for the status message while the selection is
- * being updated. If the resource for this key does not exist then the
- * value is used as the status message. Default is 'updatingSelection'.
- */
-updatingSelectionResource = (mxClient.language != 'none') ? 'updatingSelection' : '';
-
-/**
- * Variable: graph
- * 
- * Reference to the enclosing <mxGraph>.
- */
-graph = null;
-
-/**
- * Variable: singleSelection
- *
- * Specifies if only one selected item at a time is allowed.
- * Default is false.
- */
-singleSelection = false;
-
   /**
    * Function: isSingleSelection
    *
    * Returns <singleSelection> as a boolean.
    */
-isSingleSelection = ()=>
+  isSingleSelection = () => {
-{
     return this.singleSelection;
   };
 
@@ -106,8 +104,7 @@ isSingleSelection = ()=>
    * singleSelection - Boolean that specifies the new value for
    * <singleSelection>.
    */
-setSingleSelection = (singleSelection)=>
+  setSingleSelection = (singleSelection) => {
-{
     this.singleSelection = singleSelection;
   };
 
@@ -116,10 +113,8 @@ setSingleSelection = (singleSelection)=>
    *
    * Returns true if the given <mxCell> is selected.
    */
-isSelected = (cell)=>
+  isSelected = (cell) => {
-{
+    if (cell != null) {
-  if (cell != null)
-  {
       return mxUtils.indexOf(this.cells, cell) >= 0;
     }
 
@@ -131,9 +126,8 @@ isSelected = (cell)=>
    *
    * Returns true if no cells are currently selected.
    */
-isEmpty = ()=>
+  isEmpty = () => {
-{
+    return this.cells.length === 0;
-  return this.cells.length == 0;
   };
 
   /**
@@ -142,8 +136,7 @@ isEmpty = ()=>
    * Clears the selection and fires a <change> event if the selection was not
    * empty.
    */
-clear = ()=>
+  clear = () => {
-{
     this.changeSelection(null, this.cells);
   };
 
@@ -156,10 +149,8 @@ clear = ()=>
    *
    * cell - <mxCell> to be selected.
    */
-setCell = (cell)=>
+  setCell = (cell) => {
-{
+    if (cell != null) {
-  if (cell != null)
-  {
       this.setCells([cell]);
     }
   };
@@ -173,21 +164,16 @@ setCell = (cell)=>
    *
    * cells - Array of <mxCells> to be selected.
    */
-setCells = (cells)=>
+  setCells = (cells) => {
-{
+    if (cells != null) {
-  if (cells != null)
+      if (this.singleSelection) {
-  {
-    if (this.singleSelection)
-    {
         cells = [this.getFirstSelectableCell(cells)];
       }
 
       var tmp = [];
 
-    for (var i = 0; i < cells.length; i++)
+      for (var i = 0; i < cells.length; i++) {
-    {
+        if (this.graph.isCellSelectable(cells[i])) {
-      if (this.graph.isCellSelectable(cells[i]))
-      {
           tmp.push(cells[i]);
         }
       }
@@ -201,14 +187,10 @@ setCells = (cells)=>
    *
    * Returns the first selectable cell in the given array of cells.
    */
-getFirstSelectableCell = (cells)=>
+  getFirstSelectableCell = (cells) => {
-{
+    if (cells != null) {
-  if (cells != null)
+      for (var i = 0; i < cells.length; i++) {
-  {
+        if (this.graph.isCellSelectable(cells[i])) {
-    for (var i = 0; i < cells.length; i++)
-    {
-      if (this.graph.isCellSelectable(cells[i]))
-      {
           return cells[i];
         }
       }
@@ -226,10 +208,8 @@ getFirstSelectableCell = (cells)=>
    *
    * cell - <mxCell> to add to the selection.
    */
-addCell = (cell)=>
+  addCell = (cell) => {
-{
+    if (cell != null) {
-  if (cell != null)
-  {
       this.addCells([cell]);
     }
   };
@@ -244,25 +224,20 @@ addCell = (cell)=>
    *
    * cells - Array of <mxCells> to add to the selection.
    */
-addCells = (cells)=>
+  addCells = (cells) => {
-{
+    if (cells != null) {
-  if (cells != null)
-  {
       var remove = null;
 
-    if (this.singleSelection)
+      if (this.singleSelection) {
-    {
         remove = this.cells;
         cells = [this.getFirstSelectableCell(cells)];
       }
 
       var tmp = [];
 
-    for (var i = 0; i < cells.length; i++)
+      for (var i = 0; i < cells.length; i++) {
-    {
         if (!this.isSelected(cells[i]) &&
-        this.graph.isCellSelectable(cells[i]))
+            this.graph.isCellSelectable(cells[i])) {
-      {
           tmp.push(cells[i]);
         }
       }
@@ -281,10 +256,8 @@ addCells = (cells)=>
    *
    * cell - <mxCell> to remove from the selection.
    */
-removeCell = (cell)=>
+  removeCell = (cell) => {
-{
+    if (cell != null) {
-  if (cell != null)
-  {
       this.removeCells([cell]);
     }
   };
@@ -292,16 +265,12 @@ removeCell = (cell)=>
   /**
    * Function: removeCells
    */
-removeCells = (cells)=>
+  removeCells = (cells) => {
-{
+    if (cells != null) {
-  if (cells != null)
-  {
       var tmp = [];
 
-    for (var i = 0; i < cells.length; i++)
+      for (var i = 0; i < cells.length; i++) {
-    {
+        if (this.isSelected(cells[i])) {
-      if (this.isSelected(cells[i]))
-      {
           tmp.push(cells[i]);
         }
       }
@@ -320,15 +289,13 @@ removeCells = (cells)=>
    * added - Array of <mxCell> to add to the selection.
    * remove - Array of <mxCell> to remove from the selection.
    */
-changeSelection = (added, removed)=>
+  changeSelection = (added, removed) => {
-{
     if ((added != null &&
         added.length > 0 &&
         added[0] != null) ||
         (removed != null &&
             removed.length > 0 &&
-    removed[0] != null))
+            removed[0] != null)) {
-  {
       var change = new mxSelectionChange(this, added, removed);
       change.execute();
       var edit = new mxUndoableEdit(this, false);
@@ -347,11 +314,9 @@ changeSelection = (added, removed)=>
    *
    * cell - <mxCell> to add to the selection.
    */
-cellAdded = (cell)=>
+  cellAdded = (cell) => {
-{
     if (cell != null &&
-    !this.isSelected(cell))
+        !this.isSelected(cell)) {
-  {
       this.cells.push(cell);
     }
   };
@@ -366,14 +331,11 @@ cellAdded = (cell)=>
    *
    * cell - <mxCell> to remove from the selection.
    */
-cellRemoved = (cell)=>
+  cellRemoved = (cell) => {
-{
+    if (cell != null) {
-  if (cell != null)
-  {
       var index = mxUtils.indexOf(this.cells, cell);
 
-    if (index >= 0)
+      if (index >= 0) {
-    {
         this.cells.splice(index, 1);
       }
     }
@@ -388,8 +350,7 @@ cellRemoved = (cell)=>
    *
    * Constructs a change of the current root in the given view.
    */
-function mxSelectionChange(selectionModel, added, removed)
+  mxSelectionChange = (selectionModel, added, removed) => {
-{
     this.selectionModel = selectionModel;
     this.added = (added != null) ? added.slice() : null;
     this.removed = (removed != null) ? removed.slice() : null;
@@ -400,25 +361,20 @@ function mxSelectionChange(selectionModel, added, removed)
    *
    * Changes the current root of the view.
    */
-execute = ()=>
+  execute = () => {
-{
     var t0 = mxLog.enter('mxSelectionChange.execute');
     window.status = mxResources.get(
         this.selectionModel.updatingSelectionResource) ||
         this.selectionModel.updatingSelectionResource;
 
-  if (this.removed != null)
+    if (this.removed != null) {
-  {
+      for (var i = 0; i < this.removed.length; i++) {
-    for (var i = 0; i < this.removed.length; i++)
-    {
         this.selectionModel.cellRemoved(this.removed[i]);
       }
     }
 
-  if (this.added != null)
+    if (this.added != null) {
-  {
+      for (var i = 0; i < this.added.length; i++) {
-    for (var i = 0; i < this.added.length; i++)
-    {
         this.selectionModel.cellAdded(this.added[i]);
       }
     }
@@ -434,3 +390,6 @@ execute = ()=>
     this.selectionModel.fireEvent(new mxEventObject(mxEvent.CHANGE,
         'added', this.added, 'removed', this.removed));
   };
+}
+
+export default mxGraphSelectionModel;

src/js/view/mxLayoutManager.js

@@ -2,76 +2,10 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- * Class: mxLayoutManager
- * 
- * Implements a layout manager that runs a given layout after any changes to the graph:
- * 
- * Example:
- * 
- * (code)
- * var layoutMgr = new mxLayoutManager(graph);
- * layoutMgr.getLayout = (cell, eventName)=>
- * {
- *   return layout;
- * };
- * (end)
- * 
- * See <getLayout> for a description of the possible eventNames.
- * 
- * Event: mxEvent.LAYOUT_CELLS
- * 
- * Fires between begin- and endUpdate after all cells have been layouted in
- * <layoutCells>. The <code>cells</code> property contains all cells that have
- * been passed to <layoutCells>.
- * 
- * Constructor: mxLayoutManager
- *
- * Constructs a new automatic layout for the given graph.
- *
- * Arguments:
- * 
- * graph - Reference to the enclosing graph. 
- */
-function mxLayoutManager(graph)
-{
-  // Executes the layout before the changes are dispatched
-  this.undoHandler = mxUtils.bind(this, (sender, evt)=>
-  {
-    if (this.isEnabled())
-    {
-      this.beforeUndo(evt.getProperty('edit'));
-    }
-  });
 
-  // Notifies the layout of a move operation inside a parent
+import mxEventSource from "../util/mxEventSource";
-  this.moveHandler = mxUtils.bind(this, (sender, evt)=>
-  {
-    if (this.isEnabled())
-    {
-      this.cellsMoved(evt.getProperty('cells'), evt.getProperty('event'));
-    }
-  });
-    
-  // Notifies the layout of a move operation inside a parent
-  this.resizeHandler = mxUtils.bind(this, (sender, evt)=>
-  {
-    if (this.isEnabled())
-    {
-      this.cellsResized(evt.getProperty('cells'), evt.getProperty('bounds'),
-        evt.getProperty('previous'));
-    }
-  });
-  
-  this.setGraph(graph);
-};
-
-/**
- * Extends mxEventSource.
- */
-mxLayoutManager.prototype = new mxEventSource();
-constructor = mxLayoutManager;
 
+class mxLayoutManager extends mxEventSource {
   /**
    * Variable: graph
    *
@@ -115,14 +49,70 @@ moveHandler = null;
    */
   resizeHandler = null;
 
+  /**
+   * Class: mxLayoutManager
+   *
+   * Implements a layout manager that runs a given layout after any changes to the graph:
+   *
+   * Example:
+   *
+   * (code)
+   * var layoutMgr = new mxLayoutManager(graph);
+   * layoutMgr.getLayout = (cell, eventName)=>
+   * {
+   *   return layout;
+   * };
+   * (end)
+   *
+   * See <getLayout> for a description of the possible eventNames.
+   *
+   * Event: mxEvent.LAYOUT_CELLS
+   *
+   * Fires between begin- and endUpdate after all cells have been layouted in
+   * <layoutCells>. The <code>cells</code> property contains all cells that have
+   * been passed to <layoutCells>.
+   *
+   * Constructor: mxLayoutManager
+   *
+   * Constructs a new automatic layout for the given graph.
+   *
+   * Arguments:
+   *
+   * graph - Reference to the enclosing graph.
+   */
+  constructor(graph) {
+    // Executes the layout before the changes are dispatched
+    this.undoHandler = (sender, evt) => {
+      if (this.isEnabled()) {
+        this.beforeUndo(evt.getProperty('edit'));
+      }
+    };
+
+    // Notifies the layout of a move operation inside a parent
+    this.moveHandler = (sender, evt) => {
+      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) => {
+      if (this.isEnabled()) {
+        this.cellsResized(evt.getProperty('cells'), evt.getProperty('bounds'),
+            evt.getProperty('previous'));
+      }
+    };
+
+    this.setGraph(graph);
+  };
+
   /**
    * Function: isEnabled
    *
    * Returns true if events are handled. This implementation
    * returns <enabled>.
    */
-isEnabled = ()=>
+  isEnabled = () => {
-{
     return this.enabled;
   };
 
@@ -136,8 +126,7 @@ isEnabled = ()=>
    *
    * enabled - Boolean that specifies the new enabled state.
    */
-setEnabled = (enabled)=>
+  setEnabled = (enabled) => {
-{
     this.enabled = enabled;
   };
 
@@ -148,8 +137,7 @@ setEnabled = (enabled)=>
    * should be executed whenever a cell layout (layout of the children of
    * a cell) has been executed. This implementation returns <bubbling>.
    */
-isBubbling = ()=>
+  isBubbling = () => {
-{
     return this.bubbling;
   };
 
@@ -158,8 +146,7 @@ isBubbling = ()=>
    *
    * Sets <bubbling>.
    */
-setBubbling = (value)=>
+  setBubbling = (value) => {
-{
     this.bubbling = value;
   };
 
@@ -168,8 +155,7 @@ setBubbling = (value)=>
    *
    * Returns the graph that this layout operates on.
    */
-getGraph = ()=>
+  getGraph = () => {
-{
     return this.graph;
   };
 
@@ -178,10 +164,8 @@ getGraph = ()=>
    *
    * Sets the graph that the layouts operate on.
    */
-setGraph = (graph)=>
+  setGraph = (graph) => {
-{
+    if (this.graph != null) {
-  if (this.graph != null)
-  {
       var model = this.graph.getModel();
       model.removeListener(this.undoHandler);
       this.graph.removeListener(this.moveHandler);
@@ -190,8 +174,7 @@ setGraph = (graph)=>
 
     this.graph = graph;
 
-  if (this.graph != null)
+    if (this.graph != null) {
-  {
       var model = this.graph.getModel();
       model.addListener(mxEvent.BEFORE_UNDO, this.undoHandler);
       this.graph.addListener(mxEvent.MOVE_CELLS, this.moveHandler);
@@ -208,8 +191,7 @@ setGraph = (graph)=>
    * <getLayout> will return a layout for the given cell for
    * <mxEvent.BEGIN_UPDATE> or <mxEvent.END_UPDATE>.
    */
-hasLayout = (cell)=>
+  hasLayout = (cell) => {
-{
     return this.getLayout(cell, mxEvent.LAYOUT_CELLS);
   };
 
@@ -224,8 +206,7 @@ hasLayout = (cell)=>
    * check if a layout exists for the given cell. This is called
    * from <hasLayout>.
    */
-getLayout = (cell, eventName)=>
+  getLayout = (cell, eventName) => {
-{
     return null;
   };
 
@@ -239,8 +220,7 @@ getLayout = (cell, eventName)=>
    * cell - Array of <mxCells> that have been moved.
    * evt - Mouse event that represents the mousedown.
    */
-beforeUndo = (undoableEdit)=>
+  beforeUndo = (undoableEdit) => {
-{
     this.executeLayoutForCells(this.getCellsForChanges(undoableEdit.changes));
   };
 
@@ -254,20 +234,16 @@ beforeUndo = (undoableEdit)=>
    * cell - Array of <mxCells> that have been moved.
    * evt - Mouse event that represents the mousedown.
    */
-cellsMoved = (cells, evt)=>
+  cellsMoved = (cells, evt) => {
-{
+    if (cells != null && evt != null) {
-  if (cells != null && evt != null)
-  {
       var point = mxUtils.convertPoint(this.getGraph().container,
           mxEvent.getClientX(evt), mxEvent.getClientY(evt));
       var model = this.getGraph().getModel();
 
-    for (var i = 0; i < cells.length; i++)
+      for (var i = 0; i < cells.length; i++) {
-    {
         var layout = this.getLayout(model.getParent(cells[i]), mxEvent.MOVE_CELLS);
 
-      if (layout != null)
+        if (layout != null) {
-      {
           layout.moveCell(cells[i], point.x, point.y);
         }
       }
@@ -284,18 +260,14 @@ cellsMoved = (cells, evt)=>
    * cell - Array of <mxCells> that have been resized.
    * bounds - <mxRectangle> taht represents the new bounds.
    */
-cellsResized = (cells, bounds, prev)=>
+  cellsResized = (cells, bounds, prev) => {
-{
+    if (cells != null && bounds != null) {
-  if (cells != null && bounds != null)
-  {
       var model = this.getGraph().getModel();
 
-    for (var i = 0; i < cells.length; i++)
+      for (var i = 0; i < cells.length; i++) {
-    {
         var layout = this.getLayout(model.getParent(cells[i]), mxEvent.RESIZE_CELLS);
 
-      if (layout != null)
+        if (layout != null) {
-      {
           layout.resizeCell(cells[i], bounds[i], prev[i]);
         }
       }
@@ -307,20 +279,15 @@ cellsResized = (cells, bounds, prev)=>
    *
    * Returns the cells for which a layout should be executed.
    */
-getCellsForChanges = (changes)=>
+  getCellsForChanges = (changes) => {
-{
     var result = [];
 
-  for (var i = 0; i < changes.length; i++)
+    for (var i = 0; i < changes.length; i++) {
-  {
       var change = changes[i];
 
-    if (change instanceof mxRootChange)
+      if (change instanceof mxRootChange) {
-    {
         return [];
-    }
+      } else {
-    else
-    {
         result = result.concat(this.getCellsForChange(change));
       }
     }
@@ -334,21 +301,15 @@ getCellsForChanges = (changes)=>
    * Executes all layouts which have been scheduled during the
    * changes.
    */
-getCellsForChange = (change)=>
+  getCellsForChange = (change) => {
-{
+    if (change instanceof mxChildChange) {
-  if (change instanceof mxChildChange)
-  {
       return this.addCellsWithLayout(change.child,
           this.addCellsWithLayout(change.previous));
-  }
+    } else if (change instanceof mxTerminalChange ||
-  else if (change instanceof mxTerminalChange ||
+        change instanceof mxGeometryChange) {
-    change instanceof mxGeometryChange)
-  {
       return this.addCellsWithLayout(change.cell);
-  }
+    } else if (change instanceof mxVisibleChange ||
-  else if (change instanceof mxVisibleChange ||
+        change instanceof mxStyleChange) {
-    change instanceof mxStyleChange)
-  {
       return this.addCellsWithLayout(change.cell);
     }
 
@@ -360,8 +321,7 @@ getCellsForChange = (change)=>
    *
    * Adds all ancestors of the given cell that have a layout.
    */
-addCellsWithLayout = (cell, result)=>
+  addCellsWithLayout = (cell, result) => {
-{
     return this.addDescendantsWithLayout(cell,
         this.addAncestorsWithLayout(cell, result));
   };
@@ -371,21 +331,17 @@ addCellsWithLayout = (cell, result)=>
    *
    * Adds all ancestors of the given cell that have a layout.
    */
-addAncestorsWithLayout = (cell, result)=>
+  addAncestorsWithLayout = (cell, result) => {
-{
     result = (result != null) ? result : [];
 
-  if (cell != null)
+    if (cell != null) {
-  {
       var layout = this.hasLayout(cell);
 
-    if (layout != null)
+      if (layout != null) {
-    {
         result.push(cell);
       }
 
-    if (this.isBubbling())
+      if (this.isBubbling()) {
-    {
         var model = this.getGraph().getModel();
         this.addAncestorsWithLayout(
             model.getParent(cell), result);
@@ -400,20 +356,16 @@ addAncestorsWithLayout = (cell, result)=>
    *
    * Adds all descendants of the given cell that have a layout.
    */
-addDescendantsWithLayout = (cell, result)=>
+  addDescendantsWithLayout = (cell, result) => {
-{
     result = (result != null) ? result : [];
 
-  if (cell != null && this.hasLayout(cell))
+    if (cell != null && this.hasLayout(cell)) {
-  {
       var model = this.getGraph().getModel();
 
-    for (var i = 0; i < model.getChildCount(cell); i++)
+      for (var i = 0; i < model.getChildCount(cell); i++) {
-    {
         var child = model.getChildAt(cell, i);
 
-      if (this.hasLayout(child))
+        if (this.hasLayout(child)) {
-      {
           result.push(child);
           this.addDescendantsWithLayout(child, result);
         }
@@ -431,8 +383,7 @@ addDescendantsWithLayout = (cell, result)=>
    * <mxEvent.BEGIN_UPDATE>, in the second phase layouts for parent cells are
    * executed before layouts for child cells with <mxEvent.END_UPDATE>.
    */
-executeLayoutForCells = (cells)=>
+  executeLayoutForCells = (cells) => {
-{
     var sorted = mxUtils.sortCells(cells, false);
     this.layoutCells(sorted, true);
     this.layoutCells(sorted.reverse(), false);
@@ -443,31 +394,24 @@ executeLayoutForCells = (cells)=>
    *
    * Executes all layouts which have been scheduled during the changes.
    */
-layoutCells = (cells, bubble)=>
+  layoutCells = (cells, bubble) => {
-{
+    if (cells.length > 0) {
-  if (cells.length > 0)
-  {
       // Invokes the layouts while removing duplicates
       var model = this.getGraph().getModel();
 
       model.beginUpdate();
-    try 
+      try {
-    {
         var last = null;
 
-      for (var i = 0; i < cells.length; i++)
+        for (var i = 0; i < cells.length; i++) {
-      {
+          if (cells[i] != model.getRoot() && cells[i] != last) {
-        if (cells[i] != model.getRoot() && cells[i] != last)
-        {
             this.executeLayout(cells[i], bubble);
             last = cells[i];
           }
         }
 
         this.fireEvent(new mxEventObject(mxEvent.LAYOUT_CELLS, 'cells', cells));
-    }
+      } finally {
-    finally
-    {
         model.endUpdate();
       }
     }
@@ -478,13 +422,11 @@ layoutCells = (cells, bubble)=>
    *
    * Executes the given layout on the given parent.
    */
-executeLayout = (cell, bubble)=>
+  executeLayout = (cell, bubble) => {
-{
     var layout = this.getLayout(cell, (bubble) ?
         mxEvent.BEGIN_UPDATE : mxEvent.END_UPDATE);
 
-  if (layout != null)
+    if (layout != null) {
-  {
       layout.execute(cell);
     }
   };
@@ -494,7 +436,9 @@ executeLayout = (cell, bubble)=>
    *
    * Removes all handlers from the <graph> and deletes the reference to it.
    */
-destroy = ()=>
+  destroy = () => {
-{
     this.setGraph(null);
   };
+}
+
+export default mxLayoutManager;

src/js/view/mxMultiplicity.js

@@ -2,66 +2,8 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-/**
- * Class: mxMultiplicity
- * 
- * Defines invalid connections along with the error messages that they produce.
- * To add or remove rules on a graph, you must add/remove instances of this
- * class to <mxGraph.multiplicities>.
- * 
- * Example:
- * 
- * (code)
- * graph.multiplicities.push(new mxMultiplicity(
- *   true, 'rectangle', null, null, 0, 2, ['circle'],
- *   'Only 2 targets allowed',
- *   'Only circle targets allowed'));
- * (end)
- * 
- * Defines a rule where each rectangle must be connected to no more than 2
- * circles and no other types of targets are allowed.
- * 
- * Constructor: mxMultiplicity
- * 
- * Instantiate class mxMultiplicity in order to describe allowed
- * connections in a graph. Not all constraints can be enforced while
- * editing, some must be checked at validation time. The <countError> and
- * <typeError> are treated as resource keys in <mxResources>.
- * 
- * Parameters:
- * 
- * source - Boolean indicating if this rule applies to the source or target
- * terminal.
- * type - Type of the source or target terminal that this rule applies to.
- * See <type> for more information.
- * attr - Optional attribute name to match the source or target terminal.
- * value - Optional attribute value to match the source or target terminal.
- * min - Minimum number of edges for this rule. Default is 1.
- * max - Maximum number of edges for this rule. n means infinite. Default
- * is n.
- * validNeighbors - Array of types of the opposite terminal for which this
- * rule applies.
- * countError - Error to be displayed for invalid number of edges.
- * typeError - Error to be displayed for invalid opposite terminals.
- * validNeighborsAllowed - Optional boolean indicating if the array of
- * opposite types should be valid or invalid.
- */
-function mxMultiplicity(source, type, attr, value, min, max,
-  validNeighbors, countError, typeError, validNeighborsAllowed)
-{
-  this.source = source;
-  this.type = type;
-  this.attr = attr;
-  this.value = value;
-  this.min = (min != null) ? min : 0;
-  this.max = (max != null) ? max : 'n';
-  this.validNeighbors = validNeighbors;
-  this.countError = mxResources.get(countError) || countError;
-  this.typeError = mxResources.get(typeError) || typeError;
-  this.validNeighborsAllowed = (validNeighborsAllowed != null) ?
-    validNeighborsAllowed : true;
-};
 
+class mxMultiplicity {
   /**
    * Variable: type
    *
@@ -145,6 +87,65 @@ countError = null;
    */
   typeError = null;
 
+  /**
+   * Class: mxMultiplicity
+   *
+   * Defines invalid connections along with the error messages that they produce.
+   * To add or remove rules on a graph, you must add/remove instances of this
+   * class to <mxGraph.multiplicities>.
+   *
+   * Example:
+   *
+   * (code)
+   * graph.multiplicities.push(new mxMultiplicity(
+   *   true, 'rectangle', null, null, 0, 2, ['circle'],
+   *   'Only 2 targets allowed',
+   *   'Only circle targets allowed'));
+   * (end)
+   *
+   * Defines a rule where each rectangle must be connected to no more than 2
+   * circles and no other types of targets are allowed.
+   *
+   * Constructor: mxMultiplicity
+   *
+   * Instantiate class mxMultiplicity in order to describe allowed
+   * connections in a graph. Not all constraints can be enforced while
+   * editing, some must be checked at validation time. The <countError> and
+   * <typeError> are treated as resource keys in <mxResources>.
+   *
+   * Parameters:
+   *
+   * source - Boolean indicating if this rule applies to the source or target
+   * terminal.
+   * type - Type of the source or target terminal that this rule applies to.
+   * See <type> for more information.
+   * attr - Optional attribute name to match the source or target terminal.
+   * value - Optional attribute value to match the source or target terminal.
+   * min - Minimum number of edges for this rule. Default is 1.
+   * max - Maximum number of edges for this rule. n means infinite. Default
+   * is n.
+   * validNeighbors - Array of types of the opposite terminal for which this
+   * rule applies.
+   * countError - Error to be displayed for invalid number of edges.
+   * typeError - Error to be displayed for invalid opposite terminals.
+   * validNeighborsAllowed - Optional boolean indicating if the array of
+   * opposite types should be valid or invalid.
+   */
+  constructor(source, type, attr, value, min, max,
+              validNeighbors, countError, typeError, validNeighborsAllowed) {
+    this.source = source;
+    this.type = type;
+    this.attr = attr;
+    this.value = value;
+    this.min = (min != null) ? min : 0;
+    this.max = (max != null) ? max : 'n';
+    this.validNeighbors = validNeighbors;
+    this.countError = mxResources.get(countError) || countError;
+    this.typeError = mxResources.get(typeError) || typeError;
+    this.validNeighborsAllowed = (validNeighborsAllowed != null) ?
+        validNeighborsAllowed : true;
+  };
+
   /**
    * Function: check
    *
@@ -160,26 +161,21 @@ typeError = null;
    * sourceOut - Number of outgoing edges from the source terminal.
    * targetIn - Number of incoming edges for the target terminal.
    */
-check = (graph, edge, source, target, sourceOut, targetIn)=>
+  check = (graph, edge, source, target, sourceOut, targetIn) => {
-{
     var error = '';
 
     if ((this.source && this.checkTerminal(graph, source, edge)) ||
-    (!this.source && this.checkTerminal(graph, target, edge)))
+        (!this.source && this.checkTerminal(graph, target, edge))) {
-  {
       if (this.countError != null &&
           ((this.source && (this.max == 0 || (sourceOut >= this.max))) ||
-      (!this.source && (this.max == 0 || (targetIn >= this.max)))))
+              (!this.source && (this.max == 0 || (targetIn >= this.max))))) {
-    {
         error += this.countError + '\n';
       }
 
-    if (this.validNeighbors != null && this.typeError != null && this.validNeighbors.length > 0)
+      if (this.validNeighbors != null && this.typeError != null && this.validNeighbors.length > 0) {
-    {
         var isValid = this.checkNeighbors(graph, edge, source, target);
 
-      if (!isValid)
+        if (!isValid) {
-      {
           error += this.typeError + '\n';
         }
       }
@@ -194,24 +190,19 @@ check = (graph, edge, source, target, sourceOut, targetIn)=>
    * Checks if there are any valid neighbours in <validNeighbors>. This is only
    * called if <validNeighbors> is a non-empty array.
    */
-checkNeighbors = (graph, edge, source, target)=>
+  checkNeighbors = (graph, edge, source, target) => {
-{
     var sourceValue = graph.model.getValue(source);
     var targetValue = graph.model.getValue(target);
     var isValid = !this.validNeighborsAllowed;
     var valid = this.validNeighbors;
 
-  for (var j = 0; j < valid.length; j++)
+    for (var j = 0; j < valid.length; j++) {
-  {
       if (this.source &&
-      this.checkType(graph, targetValue, valid[j]))
+          this.checkType(graph, targetValue, valid[j])) {
-    {
         isValid = this.validNeighborsAllowed;
         break;
-    }
+      } else if (!this.source &&
-    else if (!this.source &&
+          this.checkType(graph, sourceValue, valid[j])) {
-      this.checkType(graph, sourceValue, valid[j]))
-    {
         isValid = this.validNeighborsAllowed;
         break;
       }
@@ -227,8 +218,7 @@ checkNeighbors = (graph, edge, source, target)=>
    * given cell is the source or target of the given edge, depending on
    * <source>. This implementation uses <checkType> on the terminal's value.
    */
-checkTerminal = (graph, terminal, edge)=>
+  checkTerminal = (graph, terminal, edge) => {
-{
     var value = graph.model.getValue(terminal);
 
     return this.checkType(graph, value, this.type, this.attr, this.value);
@@ -239,19 +229,17 @@ checkTerminal = (graph, terminal, edge)=>
    *
    * Checks the type of the given value.
    */
-checkType = (graph, value, type, attr, attrValue)=>
+  checkType = (graph, value, type, attr, attrValue) => {
-{
+    if (value != null) {
-  if (value != null)
-  {
       if (!isNaN(value.nodeType)) // Checks if value is a DOM node
       {
         return mxUtils.isNode(value, type, attr, attrValue);
-    }
+      } else {
-    else
-    {
         return value == type;
       }
     }
-
     return false;
   };
+}
+
+export default mxMultiplicity;

src/js/view/mxOutline.js

@@ -2,6 +2,15 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
+
+import mxConstants from "../util/mxConstants";
+import mxPoint from "../util/mxPoint";
+import mxRectangle from "../util/mxRectangle";
+import mxRectangleShape from "../shape/mxRectangleShape";
+import mxMouseEvent from "FIXME";
+import mxGraph from "./mxGraph";
+
+class mxOutline {
   /**
    * Class: mxOutline
    *
@@ -54,12 +63,10 @@
    * source - <mxGraph> to create the outline for.
    * container - DOM node that will contain the outline.
    */
-function mxOutline(source, container)
+  constructor(source, container) {
-{
     this.source = source;
 
-  if (container != null)
+    if (container != null) {
-  {
       this.init(container);
     }
   };
@@ -165,8 +172,7 @@ suspended = false;
    *
    * Creates the <mxGraph> used in the outline.
    */
-createGraph = (container)=>
+  createGraph = (container) => {
-{
     var graph = new mxGraph(container, this.source.getModel(), this.graphRenderHint, this.source.getStylesheet());
     graph.foldingEnabled = false;
     graph.autoScroll = false;
@@ -179,23 +185,19 @@ createGraph = (container)=>
    *
    * Initializes the outline inside the given container.
    */
-init = (container)=>
+  init = (container) => {
-{
     this.outline = this.createGraph(container);
 
     // Do not repaint when suspended
     var outlineGraphModelChanged = this.outline.graphModelChanged;
-  this.outline.graphModelChanged = mxUtils.bind(this, (changes)=>
+    this.outline.graphModelChanged = mxUtils.bind(this, (changes) => {
-  {
+      if (!this.suspended && this.outline != null) {
-    if (!this.suspended && this.outline != null)
-    {
         outlineGraphModelChanged.apply(this.outline, arguments);
       }
     });
 
     // Enables faster painting in SVG
-  if (mxClient.IS_SVG)
+    if (mxClient.IS_SVG) {
-  {
       var node = this.outline.getView().getCanvas().parentNode;
       node.setAttribute('shape-rendering', 'optimizeSpeed');
       node.setAttribute('image-rendering', 'optimizeSpeed');
@@ -205,10 +207,8 @@ init = (container)=>
     this.outline.labelsVisible = this.labelsVisible;
     this.outline.setEnabled(false);
 
-  this.updateHandler = mxUtils.bind(this, (sender, evt)=>
+    this.updateHandler = mxUtils.bind(this, (sender, evt) => {
-  {
+      if (!this.suspended && !this.active) {
-    if (!this.suspended && !this.active)
-    {
         this.update();
       }
     });
@@ -228,18 +228,15 @@ init = (container)=>
     // Updates blue rectangle on scroll
     mxEvent.addListener(this.source.container, 'scroll', this.updateHandler);
 
-  this.panHandler = mxUtils.bind(this, (sender)=>
+    this.panHandler = mxUtils.bind(this, (sender) => {
-  {
+      if (this.updateOnPan) {
-    if (this.updateOnPan)
-    {
         this.updateHandler.apply(this, arguments);
       }
     });
     this.source.addListener(mxEvent.PAN, this.panHandler);
 
     // Refreshes the graph in the outline after a refresh of the main graph
-  this.refreshHandler = mxUtils.bind(this, (sender)=>
+    this.refreshHandler = mxUtils.bind(this, (sender) => {
-  {
       this.outline.setStylesheet(this.source.getStylesheet());
       this.outline.refresh();
     });
@@ -251,10 +248,8 @@ init = (container)=>
         mxConstants.OUTLINE_COLOR, mxConstants.OUTLINE_STROKEWIDTH);
     this.selectionBorder.dialect = this.outline.dialect;
 
-  if (this.forceVmlHandles)
+    if (this.forceVmlHandles) {
-  {
+      this.selectionBorder.isHtmlAllowed = () => {
-    this.selectionBorder.isHtmlAllowed = ()=>
-    {
         return false;
       };
     }
@@ -265,17 +260,14 @@ init = (container)=>
     // complete gesture on the event target. This is needed because all the events
     // are routed via the initial element even if that element is removed from the
     // DOM, which happens when we repaint the selection border and zoom handles.
-  var handler = mxUtils.bind(this, (evt)=>
+    var handler = mxUtils.bind(this, (evt) => {
-  {
       var t = mxEvent.getSource(evt);
 
-    var redirect = mxUtils.bind(this, (evt)=>
+      var redirect = mxUtils.bind(this, (evt) => {
-    {
         this.outline.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt));
       });
 
-    var redirect2 = mxUtils.bind(this, (evt)=>
+      var redirect2 = mxUtils.bind(this, (evt) => {
-    {
         mxEvent.removeGestureListeners(t, null, redirect, redirect2);
         this.outline.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt));
       });
@@ -289,18 +281,15 @@ init = (container)=>
     // Creates a small blue rectangle for sizing (sizer handle)
     this.sizer = this.createSizer();
 
-  if (this.forceVmlHandles)
+    if (this.forceVmlHandles) {
-  {
+      this.sizer.isHtmlAllowed = () => {
-    this.sizer.isHtmlAllowed = ()=>
-    {
         return false;
       };
     }
 
     this.sizer.init(this.outline.getView().getOverlayPane());
 
-  if (this.enabled)
+    if (this.enabled) {
-  {
       this.sizer.node.style.cursor = 'nwse-resize';
     }
 
@@ -319,8 +308,7 @@ init = (container)=>
    * Returns true if events are handled. This implementation
    * returns <enabled>.
    */
-isEnabled = ()=>
+  isEnabled = () => {
-{
     return this.enabled;
   };
 
@@ -334,8 +322,7 @@ isEnabled = ()=>
    *
    * value - Boolean that specifies the new enabled state.
    */
-setEnabled = (value)=>
+  setEnabled = (value) => {
-{
     this.enabled = value;
   };
 
@@ -349,8 +336,7 @@ setEnabled = (value)=>
    *
    * value - Boolean that specifies the new enabled state.
    */
-setZoomEnabled = (value)=>
+  setZoomEnabled = (value) => {
-{
     this.sizer.node.style.visibility = (value) ? 'visible' : 'hidden';
   };
 
@@ -359,8 +345,7 @@ setZoomEnabled = (value)=>
    *
    * Invokes <update> and revalidate the outline. This method is deprecated.
    */
-refresh = ()=>
+  refresh = () => {
-{
     this.update(true);
   };
 
@@ -369,17 +354,13 @@ refresh = ()=>
    *
    * Creates the shape used as the sizer.
    */
-createSizer = ()=>
+  createSizer = () => {
-{
+    if (this.sizerImage != null) {
-  if (this.sizerImage != null)
-  {
       var sizer = new mxImageShape(new mxRectangle(0, 0, this.sizerImage.width, this.sizerImage.height), this.sizerImage.src);
       sizer.dialect = this.outline.dialect;
 
       return sizer;
-  }
+    } else {
-  else
-  {
       var sizer = new mxRectangleShape(new mxRectangle(0, 0, this.sizerSize, this.sizerSize),
           mxConstants.OUTLINE_HANDLE_FILLCOLOR, mxConstants.OUTLINE_HANDLE_STROKECOLOR);
       sizer.dialect = this.outline.dialect;
@@ -393,8 +374,7 @@ createSizer = ()=>
    *
    * Returns the size of the source container.
    */
-getSourceContainerSize = ()=>
+  getSourceContainerSize = () => {
-{
     return new mxRectangle(0, 0, this.source.container.scrollWidth, this.source.container.scrollHeight);
   };
 
@@ -403,8 +383,7 @@ getSourceContainerSize = ()=>
    *
    * Returns the offset for drawing the outline graph.
    */
-getOutlineOffset = (scale)=>
+  getOutlineOffset = (scale) => {
-{
     return null;
   };
 
@@ -413,8 +392,7 @@ getOutlineOffset = (scale)=>
    *
    * Returns the graph bound boxing of the source.
    */
-getSourceGraphBounds = ()=>
+  getSourceGraphBounds = () => {
-{
     return this.source.getGraphBounds();
   };
 
@@ -423,11 +401,9 @@ getSourceGraphBounds = ()=>
    *
    * Updates the outline.
    */
-update = (revalidate)=>
+  update = (revalidate) => {
-{
     if (this.source != null && this.source.container != null &&
-    this.outline != null && this.outline.container != null)
+        this.outline != null && this.outline.container != null) {
-  {
       var sourceScale = this.source.view.scale;
       var scaledGraphBounds = this.getSourceGraphBounds();
       var unscaledGraphBounds = new mxRectangle(scaledGraphBounds.x / sourceScale + this.source.panDx,
@@ -452,18 +428,15 @@ update = (revalidate)=>
       var outlineScale = Math.min(availableWidth / completeWidth, availableHeight / completeHeight);
       var scale = (isNaN(outlineScale)) ? this.minScale : Math.max(this.minScale, outlineScale);
 
-    if (scale > 0)
+      if (scale > 0) {
-    {
+        if (this.outline.getView().scale != scale) {
-      if (this.outline.getView().scale != scale)
-      {
           this.outline.getView().scale = scale;
           revalidate = true;
         }
 
         var navView = this.outline.getView();
 
-      if (navView.currentRoot != this.source.getView().currentRoot)
+        if (navView.currentRoot != this.source.getView().currentRoot) {
-      {
           navView.setCurrentRoot(this.source.getView().currentRoot);
         }
 
@@ -473,23 +446,19 @@ update = (revalidate)=>
 
         var off = this.getOutlineOffset(scale);
 
-      if (off != null)
+        if (off != null) {
-      {
           tx += off.x;
           ty += off.y;
         }
 
-      if (unscaledGraphBounds.x < 0)
+        if (unscaledGraphBounds.x < 0) {
-      {
           tx = tx - unscaledGraphBounds.x;
         }
-      if (unscaledGraphBounds.y < 0)
+        if (unscaledGraphBounds.y < 0) {
-      {
           ty = ty - unscaledGraphBounds.y;
         }
 
-      if (navView.translate.x != tx || navView.translate.y != ty)
+        if (navView.translate.x != tx || navView.translate.y != ty) {
-      {
           navView.translate.x = tx;
           navView.translate.y = ty;
           revalidate = true;
@@ -515,8 +484,7 @@ update = (revalidate)=>
 
         var b = this.selectionBorder.bounds;
 
-      if (b.x != this.bounds.x || b.y != this.bounds.y || b.width != this.bounds.width || b.height != this.bounds.height)
+        if (b.x != this.bounds.x || b.y != this.bounds.y || b.width != this.bounds.width || b.height != this.bounds.height) {
-      {
           this.selectionBorder.bounds = this.bounds;
           this.selectionBorder.redraw();
         }
@@ -526,19 +494,16 @@ update = (revalidate)=>
         var b2 = new mxRectangle(this.bounds.x + this.bounds.width - b.width / 2,
             this.bounds.y + this.bounds.height - b.height / 2, b.width, b.height);
 
-      if (b.x != b2.x || b.y != b2.y || b.width != b2.width || b.height != b2.height)
+        if (b.x != b2.x || b.y != b2.y || b.width != b2.width || b.height != b2.height) {
-      {
           this.sizer.bounds = b2;
 
           // Avoids update of visibility in redraw for VML
-        if (this.sizer.node.style.visibility != 'hidden')
+          if (this.sizer.node.style.visibility != 'hidden') {
-        {
             this.sizer.redraw();
           }
         }
 
-      if (revalidate)
+        if (revalidate) {
-      {
           this.outline.view.revalidate();
         }
       }
@@ -550,10 +515,8 @@ update = (revalidate)=>
    *
    * Handles the event by starting a translation or zoom.
    */
-mouseDown = (sender, me)=>
+  mouseDown = (sender, me) => {
-{
+    if (this.enabled && this.showViewport) {
-  if (this.enabled && this.showViewport)
-  {
       var tol = (!mxEvent.isMouseEvent(me.getEvent())) ? this.source.tolerance : 0;
       var hit = (this.source.allowHandleBoundsCheck && tol > 0) ?
           new mxRectangle(me.getGraphX() - tol, me.getGraphY() - tol, 2 * tol, 2 * tol) : null;
@@ -562,13 +525,10 @@ mouseDown = (sender, me)=>
       this.startY = me.getY();
       this.active = true;
 
-    if (this.source.useScrollbarsForPanning && mxUtils.hasScrollbars(this.source.container))
+      if (this.source.useScrollbarsForPanning && mxUtils.hasScrollbars(this.source.container)) {
-    {
         this.dx0 = this.source.container.scrollLeft;
         this.dy0 = this.source.container.scrollTop;
-    }
+      } else {
-    else
-    {
         this.dx0 = 0;
         this.dy0 = 0;
       }
@@ -583,10 +543,8 @@ mouseDown = (sender, me)=>
    * Handles the event by previewing the viewrect in <graph> and updating the
    * rectangle that represents the viewrect in the outline.
    */
-mouseMove = (sender, me)=>
+  mouseMove = (sender, me) => {
-{
+    if (this.active) {
-  if (this.active)
-  {
       this.selectionBorder.node.style.display = (this.showViewport) ? '' : 'none';
       this.sizer.node.style.display = this.selectionBorder.node.style.display;
 
@@ -595,8 +553,7 @@ mouseMove = (sender, me)=>
       var dy = delta.y;
       var bounds = null;
 
-    if (!this.zoom)
+      if (!this.zoom) {
-    {
         // Previews the panning on the source graph
         var scale = this.outline.getView().scale;
         bounds = new mxRectangle(this.bounds.x + dx,
@@ -608,9 +565,7 @@ mouseMove = (sender, me)=>
         dy /= scale;
         dy *= this.source.getView().scale;
         this.source.panGraph(-dx - this.dx0, -dy - this.dy0);
-    }
+      } else {
-    else
-    {
         // Does *not* preview zooming on the source graph
         var container = this.source.container;
         var viewRatio = container.clientWidth / container.clientHeight;
@@ -631,8 +586,7 @@ mouseMove = (sender, me)=>
           b.width, b.height);
 
       // Avoids update of visibility in redraw for VML
-    if (this.sizer.node.style.visibility != 'hidden')
+      if (this.sizer.node.style.visibility != 'hidden') {
-    {
         this.sizer.redraw();
       }
 
@@ -662,8 +616,7 @@ mouseMove = (sender, me)=>
    * };
    * (end)
    */
-getTranslateForEvent = (me)=>
+  getTranslateForEvent = (me) => {
-{
     return new mxPoint(me.getX() - this.startX, me.getY() - this.startY);
   };
 
@@ -672,32 +625,25 @@ getTranslateForEvent = (me)=>
    *
    * Handles the event by applying the translation or zoom to <graph>.
    */
-mouseUp = (sender, me)=>
+  mouseUp = (sender, me) => {
-{
+    if (this.active) {
-  if (this.active)
-  {
       var delta = this.getTranslateForEvent(me);
       var dx = delta.x;
       var dy = delta.y;
 
-    if (Math.abs(dx) > 0 || Math.abs(dy) > 0)
+      if (Math.abs(dx) > 0 || Math.abs(dy) > 0) {
-    {
+        if (!this.zoom) {
-      if (!this.zoom)
-      {
           // Applies the new translation if the source
           // has no scrollbars
           if (!this.source.useScrollbarsForPanning ||
-          !mxUtils.hasScrollbars(this.source.container))
+              !mxUtils.hasScrollbars(this.source.container)) {
-        {
             this.source.panGraph(0, 0);
             dx /= this.outline.getView().scale;
             dy /= this.outline.getView().scale;
             var t = this.source.getView().translate;
             this.source.getView().setTranslate(t.x - dx, t.y - dy);
           }
-      }
+        } else {
-      else
-      {
           // Applies the new zoom
           var w = this.selectionBorder.bounds.width;
           var scale = this.source.getView().scale;
@@ -719,10 +665,8 @@ mouseUp = (sender, me)=>
    *
    * Destroy this outline and removes all listeners from <source>.
    */
-destroy = ()=>
+  destroy = () => {
-{
+    if (this.source != null) {
-  if (this.source != null)
-  {
       this.source.removeListener(this.panHandler);
       this.source.removeListener(this.refreshHandler);
       this.source.getModel().removeListener(this.updateHandler);
@@ -731,22 +675,22 @@ destroy = ()=>
       this.source = null;
     }
 
-  if (this.outline != null)
+    if (this.outline != null) {
-  {
       this.outline.removeMouseListener(this);
       this.outline.destroy();
       this.outline = null;
     }
 
-  if (this.selectionBorder != null)
+    if (this.selectionBorder != null) {
-  {
       this.selectionBorder.destroy();
       this.selectionBorder = null;
     }
 
-  if (this.sizer != null)
+    if (this.sizer != null) {
-  {
       this.sizer.destroy();
       this.sizer = null;
     }
   };
+}
+
+export default mxOutline;

src/js/view/mxPerimeter.js

@@ -2,8 +2,11 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-var mxPerimeter =
+
-{
+import mxUtils from "../util/mxUtils";
+import mxPoint from "../util/mxPoint";
+
+var mxPerimeter = {
   /**
    * Class: mxPerimeter
    *
@@ -81,8 +84,7 @@ var mxPerimeter =
    * of the perimeter and the line between the next and the center point is
    * returned.
    */
-  RectanglePerimeter: function (bounds, vertex, next, orthogonal)
+  RectanglePerimeter: function (bounds, vertex, next, orthogonal) {
-  {
     var cx = bounds.getCenterX();
     var cy = bounds.getCenterY();
     var dx = next.x - cx;
@@ -94,57 +96,40 @@ var mxPerimeter =
     var beta = pi2 - alpha;
     var t = Math.atan2(bounds.height, bounds.width);
 
-    if (alpha < -pi + t || alpha > pi - t)
+    if (alpha < -pi + t || alpha > pi - t) {
-    {
       // Left edge
       p.x = bounds.x;
       p.y = cy - bounds.width * Math.tan(alpha) / 2;
-    }
+    } else if (alpha < -t) {
-    else if (alpha < -t)
-    {
       // Top Edge
       p.y = bounds.y;
       p.x = cx - bounds.height * Math.tan(beta) / 2;
-    }
+    } else if (alpha < t) {
-    else if (alpha < t)
-    {
       // Right Edge
       p.x = bounds.x + bounds.width;
       p.y = cy + bounds.width * Math.tan(alpha) / 2;
-    }
+    } else {
-    else
-    {
       // Bottom Edge
       p.y = bounds.y + bounds.height;
       p.x = cx + bounds.height * Math.tan(beta) / 2;
     }
 
-    if (orthogonal)
+    if (orthogonal) {
-    {
       if (next.x >= bounds.x &&
-        next.x <= bounds.x + bounds.width)
+          next.x <= bounds.x + bounds.width) {
-      {
         p.x = next.x;
-      }
+      } else if (next.y >= bounds.y &&
-      else if (next.y >= bounds.y &&
+          next.y <= bounds.y + bounds.height) {
-             next.y <= bounds.y + bounds.height)
-      {
         p.y = next.y;
       }
-      if (next.x < bounds.x)
+      if (next.x < bounds.x) {
-      {
         p.x = bounds.x;
-      }
+      } else if (next.x > bounds.x + bounds.width) {
-      else if (next.x > bounds.x + bounds.width)
-      {
         p.x = bounds.x + bounds.width;
       }
-      if (next.y < bounds.y)
+      if (next.y < bounds.y) {
-      {
         p.y = bounds.y;
-      }
+      } else if (next.y > bounds.y + bounds.height) {
-      else if (next.y > bounds.y + bounds.height)
-      {
         p.y = bounds.y + bounds.height;
       }
     }
@@ -158,8 +143,7 @@ var mxPerimeter =
    * Describes an elliptic perimeter. See <RectanglePerimeter>
    * for a description of the parameters.
    */
-  EllipsePerimeter: function (bounds, vertex, next, orthogonal)
+  EllipsePerimeter: function (bounds, vertex, next, orthogonal) {
-  {
     var x = bounds.x;
     var y = bounds.y;
     var a = bounds.width / 2;
@@ -174,37 +158,29 @@ var mxPerimeter =
     var dx = parseInt(px - cx);
     var dy = parseInt(py - cy);
 
-    if (dx == 0 && dy != 0)
+    if (dx == 0 && dy != 0) {
-    {
       return new mxPoint(cx, cy + b * dy / Math.abs(dy));
-    }
+    } else if (dx == 0 && dy == 0) {
-    else if (dx == 0 && dy == 0)
-    {
       return new mxPoint(px, py);
     }
 
-    if (orthogonal)
+    if (orthogonal) {
-    {
+      if (py >= y && py <= y + bounds.height) {
-      if (py >= y && py <= y + bounds.height)
-      {
         var ty = py - cy;
         var tx = Math.sqrt(a * a * (1 - (ty * ty) / (b * b))) || 0;
 
-        if (px <= x)
+        if (px <= x) {
-        {
           tx = -tx;
         }
 
         return new mxPoint(cx + tx, py);
       }
 
-      if (px >= x && px <= x + bounds.width)
+      if (px >= x && px <= x + bounds.width) {
-      {
         var tx = px - cx;
         var ty = Math.sqrt(b * b * (1 - (tx * tx) / (a * a))) || 0;
 
-        if (py <= y)
+        if (py <= y) {
-        {
           ty = -ty;
         }
 
@@ -236,13 +212,10 @@ var mxPerimeter =
     var xout = 0;
     var yout = 0;
 
-    if (dist1 < dist2)
+    if (dist1 < dist2) {
-    {
       xout = xout1;
       yout = yout1;
-    }
+    } else {
-    else
-    {
       xout = xout2;
       yout = yout2;
     }
@@ -256,8 +229,7 @@ var mxPerimeter =
    * Describes a rhombus (aka diamond) perimeter. See <RectanglePerimeter>
    * for a description of the parameters.
    */
-  RhombusPerimeter: function (bounds, vertex, next, orthogonal)
+  RhombusPerimeter: function (bounds, vertex, next, orthogonal) {
-  {
     var x = bounds.x;
     var y = bounds.y;
     var w = bounds.width;
@@ -270,25 +242,16 @@ var mxPerimeter =
     var py = next.y;
 
     // Special case for intersecting the diamond's corners
-    if (cx == px)
+    if (cx == px) {
-    {
+      if (cy > py) {
-      if (cy > py)
-      {
         return new mxPoint(cx, y); // top
-      }
+      } else {
-      else
-      {
         return new mxPoint(cx, y + h); // bottom
       }
-    }
+    } else if (cy == py) {
-    else if (cy == py)
+      if (cx > px) {
-    {
-      if (cx > px)
-      {
         return new mxPoint(x, cy); // left
-      }
+      } else {
-      else
-      {
         return new mxPoint(x + w, cy); // right
       }
     }
@@ -296,37 +259,25 @@ var mxPerimeter =
     var tx = cx;
     var ty = cy;
 
-    if (orthogonal)
+    if (orthogonal) {
-    {
+      if (px >= x && px <= x + w) {
-      if (px >= x && px <= x + w)
-      {
         tx = px;
-      }
+      } else if (py >= y && py <= y + h) {
-      else if (py >= y && py <= y + h)
-      {
         ty = py;
       }
     }
 
     // In which quadrant will the intersection be?
     // set the slope and offset of the border line accordingly
-    if (px < cx)
+    if (px < cx) {
-    {
+      if (py < cy) {
-      if (py < cy)
-      {
         return mxUtils.intersection(px, py, tx, ty, cx, y, x, cy);
-      }
+      } else {
-      else
-      {
         return mxUtils.intersection(px, py, tx, ty, cx, y + h, x, cy);
       }
-    }
+    } else if (py < cy) {
-    else if (py < cy)
-    {
       return mxUtils.intersection(px, py, tx, ty, cx, y, x + w, cy);
-    }
+    } else {
-    else
-    {
       return mxUtils.intersection(px, py, tx, ty, cx, y + h, x + w, cy);
     }
   },
@@ -337,8 +288,7 @@ var mxPerimeter =
    * Describes a triangle perimeter. See <RectanglePerimeter>
    * for a description of the parameters.
    */
-  TrianglePerimeter: function (bounds, vertex, next, orthogonal)
+  TrianglePerimeter: function (bounds, vertex, next, orthogonal) {
-  {
     var direction = (vertex != null) ?
         vertex.style[mxConstants.STYLE_DIRECTION] : null;
     var vertical = direction == mxConstants.DIRECTION_NORTH ||
@@ -356,19 +306,14 @@ var mxPerimeter =
     var corner = new mxPoint(x + w, cy);
     var end = new mxPoint(x, y + h);
 
-    if (direction == mxConstants.DIRECTION_NORTH)
+    if (direction == mxConstants.DIRECTION_NORTH) {
-    {
       start = end;
       corner = new mxPoint(cx, y);
       end = new mxPoint(x + w, y + h);
-    }
+    } else if (direction == mxConstants.DIRECTION_SOUTH) {
-    else if (direction == mxConstants.DIRECTION_SOUTH)
-    {
       corner = new mxPoint(cx, y + h);
       end = new mxPoint(x + w, y);
-    }
+    } else if (direction == mxConstants.DIRECTION_WEST) {
-    else if (direction == mxConstants.DIRECTION_WEST)
-    {
       start = new mxPoint(x + w, y);
       corner = new mxPoint(x, cy);
       end = new mxPoint(x + w, y + h);
@@ -383,70 +328,47 @@ var mxPerimeter =
     var base = false;
 
     if (direction == mxConstants.DIRECTION_NORTH ||
-      direction == mxConstants.DIRECTION_WEST)
+        direction == mxConstants.DIRECTION_WEST) {
-    {
       base = alpha > -t && alpha < t;
-    }
+    } else {
-    else
-    {
       base = alpha < -Math.PI + t || alpha > Math.PI - t;
     }
 
     var result = null;
 
-    if (base)
+    if (base) {
-    {
       if (orthogonal && ((vertical && next.x >= start.x && next.x <= end.x) ||
-        (!vertical && next.y >= start.y && next.y <= end.y)))
+          (!vertical && next.y >= start.y && next.y <= end.y))) {
-      {
+        if (vertical) {
-        if (vertical)
-        {
           result = new mxPoint(next.x, start.y);
-        }
+        } else {
-        else
-        {
           result = new mxPoint(start.x, next.y);
         }
-      }
+      } else {
-      else
+        if (direction == mxConstants.DIRECTION_NORTH) {
-      {
-        if (direction == mxConstants.DIRECTION_NORTH)
-        {
           result = new mxPoint(x + w / 2 + h * Math.tan(alpha) / 2,
               y + h);
-        }
+        } else if (direction == mxConstants.DIRECTION_SOUTH) {
-        else if (direction == mxConstants.DIRECTION_SOUTH)
-        {
           result = new mxPoint(x + w / 2 - h * Math.tan(alpha) / 2,
               y);
-        }
+        } else if (direction == mxConstants.DIRECTION_WEST) {
-        else if (direction == mxConstants.DIRECTION_WEST)
-        {
           result = new mxPoint(x + w, y + h / 2 +
               w * Math.tan(alpha) / 2);
-        }
+        } else {
-        else
-        {
           result = new mxPoint(x, y + h / 2 -
               w * Math.tan(alpha) / 2);
         }
       }
-    }
+    } else {
-    else
+      if (orthogonal) {
-    {
-      if (orthogonal)
-      {
         var pt = new mxPoint(cx, cy);
 
-        if (next.y >= y && next.y <= y + h)
+        if (next.y >= y && next.y <= y + h) {
-        {
           pt.x = (vertical) ? cx : (
               (direction == mxConstants.DIRECTION_WEST) ?
                   x + w : x);
           pt.y = next.y;
-        }
+        } else if (next.x >= x && next.x <= x + w) {
-        else if (next.x >= x && next.x <= x + w)
-        {
           pt.x = next.x;
           pt.y = (!vertical) ? cy : (
               (direction == mxConstants.DIRECTION_NORTH) ?
@@ -462,20 +384,16 @@ var mxPerimeter =
       }
 
       if ((vertical && next.x <= x + w / 2) ||
-        (!vertical && next.y <= y + h / 2))
+          (!vertical && next.y <= y + h / 2)) {
-      {
         result = mxUtils.intersection(next.x, next.y, cx, cy,
             start.x, start.y, corner.x, corner.y);
-      }
+      } else {
-      else
-      {
         result = mxUtils.intersection(next.x, next.y, cx, cy,
             corner.x, corner.y, end.x, end.y);
       }
     }
 
-    if (result == null)
+    if (result == null) {
-    {
       result = new mxPoint(cx, cy);
     }
 
@@ -488,8 +406,7 @@ var mxPerimeter =
    * Describes a hexagon perimeter. See <RectanglePerimeter>
    * for a description of the parameters.
    */
-  HexagonPerimeter: function (bounds, vertex, next, orthogonal)
+  HexagonPerimeter: function (bounds, vertex, next, orthogonal) {
-  {
     var x = bounds.x;
     var y = bounds.y;
     var w = bounds.width;
@@ -517,224 +434,139 @@ var mxPerimeter =
 
     //Only consider corrects quadrants for the orthogonal case.
     if ((px < x) && (py < y) || (px < x) && (py > y + h)
-        || (px > x + w) && (py < y) || (px > x + w) && (py > y + h))
+        || (px > x + w) && (py < y) || (px > x + w) && (py > y + h)) {
-    {
       orthogonal = false;
     }
 
-    if (orthogonal)
+    if (orthogonal) {
-    {
+      if (vertical) {
-      if (vertical)
-      {
         //Special cases where intersects with hexagon corners
-        if (px == cx)
+        if (px == cx) {
-        {
+          if (py <= y) {
-          if (py <= y)
-          {
             return new mxPoint(cx, y);
-          }
+          } else if (py >= y + h) {
-          else if (py >= y + h)
-          {
             return new mxPoint(cx, y + h);
           }
-        }
+        } else if (px < x) {
-        else if (px < x)
+          if (py == y + h / 4) {
-        {
-          if (py == y + h / 4)
-          {
             return new mxPoint(x, y + h / 4);
-          }
+          } else if (py == y + 3 * h / 4) {
-          else if (py == y + 3 * h / 4)
-          {
             return new mxPoint(x, y + 3 * h / 4);
           }
-        }
+        } else if (px > x + w) {
-        else if (px > x + w)
+          if (py == y + h / 4) {
-        {
-          if (py == y + h / 4)
-          {
             return new mxPoint(x + w, y + h / 4);
+          } else if (py == y + 3 * h / 4) {
+            return new mxPoint(x + w, y + 3 * h / 4);
           }
-          else if (py == y + 3 * h / 4)
+        } else if (px == x) {
-          {
+          if (py < cy) {
+            return new mxPoint(x, y + h / 4);
+          } else if (py > cy) {
+            return new mxPoint(x, y + 3 * h / 4);
+          }
+        } else if (px == x + w) {
+          if (py < cy) {
+            return new mxPoint(x + w, y + h / 4);
+          } else if (py > cy) {
             return new mxPoint(x + w, y + 3 * h / 4);
           }
         }
-        else if (px == x)
+        if (py == y) {
-        {
-          if (py < cy)
-          {
-            return new mxPoint(x, y + h / 4);
-          }
-          else if (py > cy)
-          {
-            return new mxPoint(x, y + 3 * h / 4);
-          }
-        }
-        else if (px == x + w)
-        {
-          if (py < cy)
-          {
-            return new mxPoint(x + w, y + h / 4);
-          }
-          else if (py > cy)
-          {
-            return new mxPoint(x + w, y + 3 * h / 4);
-          }
-        }
-        if (py == y)
-        {
           return new mxPoint(cx, y);
-        }
+        } else if (py == y + h) {
-        else if (py == y + h)
-        {
           return new mxPoint(cx, y + h);
         }
 
-        if (px < cx)
+        if (px < cx) {
-        {
+          if ((py > y + h / 4) && (py < y + 3 * h / 4)) {
-          if ((py > y + h / 4) && (py < y + 3 * h / 4))
-          {
             a = new mxPoint(x, y);
             b = new mxPoint(x, y + h);
-          }
+          } else if (py < y + h / 4) {
-          else if (py < y + h / 4)
-          {
             a = new mxPoint(x - Math.floor(0.5 * w), y
                 + Math.floor(0.5 * h));
             b = new mxPoint(x + w, y - Math.floor(0.25 * h));
-          }
+          } else if (py > y + 3 * h / 4) {
-          else if (py > y + 3 * h / 4)
-          {
             a = new mxPoint(x - Math.floor(0.5 * w), y
                 + Math.floor(0.5 * h));
             b = new mxPoint(x + w, y + Math.floor(1.25 * h));
           }
-        }
+        } else if (px > cx) {
-        else if (px > cx)
+          if ((py > y + h / 4) && (py < y + 3 * h / 4)) {
-        {
-          if ((py > y + h / 4) && (py < y + 3 * h / 4))
-          {
             a = new mxPoint(x + w, y);
             b = new mxPoint(x + w, y + h);
-          }
+          } else if (py < y + h / 4) {
-          else if (py < y + h / 4)
-          {
             a = new mxPoint(x, y - Math.floor(0.25 * h));
             b = new mxPoint(x + Math.floor(1.5 * w), y
                 + Math.floor(0.5 * h));
-          }
+          } else if (py > y + 3 * h / 4) {
-          else if (py > y + 3 * h / 4)
-          {
             a = new mxPoint(x + Math.floor(1.5 * w), y
                 + Math.floor(0.5 * h));
             b = new mxPoint(x, y + Math.floor(1.25 * h));
           }
         }
 
-      }
+      } else {
-      else
-      {
         //Special cases where intersects with hexagon corners
-        if (py == cy)
+        if (py == cy) {
-        {
+          if (px <= x) {
-          if (px <= x)
-          {
             return new mxPoint(x, y + h / 2);
-          }
+          } else if (px >= x + w) {
-          else if (px >= x + w)
-          {
             return new mxPoint(x + w, y + h / 2);
           }
-        }
+        } else if (py < y) {
-        else if (py < y)
+          if (px == x + w / 4) {
-        {
-          if (px == x + w / 4)
-          {
             return new mxPoint(x + w / 4, y);
-          }
+          } else if (px == x + 3 * w / 4) {
-          else if (px == x + 3 * w / 4)
-          {
             return new mxPoint(x + 3 * w / 4, y);
           }
-        }
+        } else if (py > y + h) {
-        else if (py > y + h)
+          if (px == x + w / 4) {
-        {
-          if (px == x + w / 4)
-          {
             return new mxPoint(x + w / 4, y + h);
+          } else if (px == x + 3 * w / 4) {
+            return new mxPoint(x + 3 * w / 4, y + h);
           }
-          else if (px == x + 3 * w / 4)
+        } else if (py == y) {
-          {
+          if (px < cx) {
+            return new mxPoint(x + w / 4, y);
+          } else if (px > cx) {
+            return new mxPoint(x + 3 * w / 4, y);
+          }
+        } else if (py == y + h) {
+          if (px < cx) {
+            return new mxPoint(x + w / 4, y + h);
+          } else if (py > cy) {
             return new mxPoint(x + 3 * w / 4, y + h);
           }
         }
-        else if (py == y)
+        if (px == x) {
-        {
-          if (px < cx)
-          {
-            return new mxPoint(x + w / 4, y);
-          }
-          else if (px > cx)
-          {
-            return new mxPoint(x + 3 * w / 4, y);
-          }
-        }
-        else if (py == y + h)
-        {
-          if (px < cx)
-          {
-            return new mxPoint(x + w / 4, y + h);
-          }
-          else if (py > cy)
-          {
-            return new mxPoint(x + 3 * w / 4, y + h);
-          }
-        }
-        if (px == x)
-        {
           return new mxPoint(x, cy);
-        }
+        } else if (px == x + w) {
-        else if (px == x + w)
-        {
           return new mxPoint(x + w, cy);
         }
 
-        if (py < cy)
+        if (py < cy) {
-        {
+          if ((px > x + w / 4) && (px < x + 3 * w / 4)) {
-          if ((px > x + w / 4) && (px < x + 3 * w / 4))
-          {
             a = new mxPoint(x, y);
             b = new mxPoint(x + w, y);
-          }
+          } else if (px < x + w / 4) {
-          else if (px < x + w / 4)
-          {
             a = new mxPoint(x - Math.floor(0.25 * w), y + h);
             b = new mxPoint(x + Math.floor(0.5 * w), y
                 - Math.floor(0.5 * h));
-          }
+          } else if (px > x + 3 * w / 4) {
-          else if (px > x + 3 * w / 4)
-          {
             a = new mxPoint(x + Math.floor(0.5 * w), y
                 - Math.floor(0.5 * h));
             b = new mxPoint(x + Math.floor(1.25 * w), y + h);
           }
-        }
+        } else if (py > cy) {
-        else if (py > cy)
+          if ((px > x + w / 4) && (px < x + 3 * w / 4)) {
-        {
-          if ((px > x + w / 4) && (px < x + 3 * w / 4))
-          {
             a = new mxPoint(x, y + h);
             b = new mxPoint(x + w, y + h);
-          }
+          } else if (px < x + w / 4) {
-          else if (px < x + w / 4)
-          {
             a = new mxPoint(x - Math.floor(0.25 * w), y);
             b = new mxPoint(x + Math.floor(0.5 * w), y
                 + Math.floor(1.5 * h));
-          }
+          } else if (px > x + 3 * w / 4) {
-          else if (px > x + 3 * w / 4)
-          {
             a = new mxPoint(x + Math.floor(0.5 * w), y
                 + Math.floor(1.5 * h));
             b = new mxPoint(x + Math.floor(1.25 * w), y);
@@ -745,163 +577,105 @@ var mxPerimeter =
       var tx = cx;
       var ty = cy;
 
-      if (px >= x && px <= x + w)
+      if (px >= x && px <= x + w) {
-      {
         tx = px;
 
-        if (py < cy)
+        if (py < cy) {
-        {
           ty = y + h;
-        }
+        } else {
-        else
-        {
           ty = y;
         }
-      }
+      } else if (py >= y && py <= y + h) {
-      else if (py >= y && py <= y + h)
-      {
         ty = py;
 
-        if (px < cx)
+        if (px < cx) {
-        {
           tx = x + w;
-        }
+        } else {
-        else
-        {
           tx = x;
         }
       }
 
       result = mxUtils.intersection(tx, ty, next.x, next.y, a.x, a.y, b.x, b.y);
-    }
+    } else {
-    else
+      if (vertical) {
-    {
-      if (vertical)
-      {
         var beta = Math.atan2(h / 4, w / 2);
 
         //Special cases where intersects with hexagon corners
-        if (alpha == beta)
+        if (alpha == beta) {
-        {
           return new mxPoint(x + w, y + Math.floor(0.25 * h));
-        }
+        } else if (alpha == pi2) {
-        else if (alpha == pi2)
-        {
           return new mxPoint(x + Math.floor(0.5 * w), y);
-        }
+        } else if (alpha == (pi - beta)) {
-        else if (alpha == (pi - beta))
-        {
           return new mxPoint(x, y + Math.floor(0.25 * h));
-        }
+        } else if (alpha == -beta) {
-        else if (alpha == -beta)
-        {
           return new mxPoint(x + w, y + Math.floor(0.75 * h));
-        }
+        } else if (alpha == (-pi2)) {
-        else if (alpha == (-pi2))
-        {
           return new mxPoint(x + Math.floor(0.5 * w), y + h);
-        }
+        } else if (alpha == (-pi + beta)) {
-        else if (alpha == (-pi + beta))
-        {
           return new mxPoint(x, y + Math.floor(0.75 * h));
         }
 
-        if ((alpha < beta) && (alpha > -beta))
+        if ((alpha < beta) && (alpha > -beta)) {
-        {
           a = new mxPoint(x + w, y);
           b = new mxPoint(x + w, y + h);
-        }
+        } else if ((alpha > beta) && (alpha < pi2)) {
-        else if ((alpha > beta) && (alpha < pi2))
-        {
           a = new mxPoint(x, y - Math.floor(0.25 * h));
           b = new mxPoint(x + Math.floor(1.5 * w), y
               + Math.floor(0.5 * h));
-        }
+        } else if ((alpha > pi2) && (alpha < (pi - beta))) {
-        else if ((alpha > pi2) && (alpha < (pi - beta)))
-        {
           a = new mxPoint(x - Math.floor(0.5 * w), y
               + Math.floor(0.5 * h));
           b = new mxPoint(x + w, y - Math.floor(0.25 * h));
-        }
+        } else if (((alpha > (pi - beta)) && (alpha <= pi))
-        else if (((alpha > (pi - beta)) && (alpha <= pi))
+            || ((alpha < (-pi + beta)) && (alpha >= -pi))) {
-            || ((alpha < (-pi + beta)) && (alpha >= -pi)))
-        {
           a = new mxPoint(x, y);
           b = new mxPoint(x, y + h);
-        }
+        } else if ((alpha < -beta) && (alpha > -pi2)) {
-        else if ((alpha < -beta) && (alpha > -pi2))
-        {
           a = new mxPoint(x + Math.floor(1.5 * w), y
               + Math.floor(0.5 * h));
           b = new mxPoint(x, y + Math.floor(1.25 * h));
-        }
+        } else if ((alpha < -pi2) && (alpha > (-pi + beta))) {
-        else if ((alpha < -pi2) && (alpha > (-pi + beta)))
-        {
           a = new mxPoint(x - Math.floor(0.5 * w), y
               + Math.floor(0.5 * h));
           b = new mxPoint(x + w, y + Math.floor(1.25 * h));
         }
-      }
+      } else {
-      else
-      {
         var beta = Math.atan2(h / 2, w / 4);
 
         //Special cases where intersects with hexagon corners
-        if (alpha == beta)
+        if (alpha == beta) {
-        {
           return new mxPoint(x + Math.floor(0.75 * w), y);
-        }
+        } else if (alpha == (pi - beta)) {
-        else if (alpha == (pi - beta))
-        {
           return new mxPoint(x + Math.floor(0.25 * w), y);
-        }
+        } else if ((alpha == pi) || (alpha == -pi)) {
-        else if ((alpha == pi) || (alpha == -pi))
-        {
           return new mxPoint(x, y + Math.floor(0.5 * h));
-        }
+        } else if (alpha == 0) {
-        else if (alpha == 0)
-        {
           return new mxPoint(x + w, y + Math.floor(0.5 * h));
-        }
+        } else if (alpha == -beta) {
-        else if (alpha == -beta)
-        {
           return new mxPoint(x + Math.floor(0.75 * w), y + h);
-        }
+        } else if (alpha == (-pi + beta)) {
-        else if (alpha == (-pi + beta))
-        {
           return new mxPoint(x + Math.floor(0.25 * w), y + h);
         }
 
-        if ((alpha > 0) && (alpha < beta))
+        if ((alpha > 0) && (alpha < beta)) {
-        {
           a = new mxPoint(x + Math.floor(0.5 * w), y
               - Math.floor(0.5 * h));
           b = new mxPoint(x + Math.floor(1.25 * w), y + h);
-        }
+        } else if ((alpha > beta) && (alpha < (pi - beta))) {
-        else if ((alpha > beta) && (alpha < (pi - beta)))
-        {
           a = new mxPoint(x, y);
           b = new mxPoint(x + w, y);
-        }
+        } else if ((alpha > (pi - beta)) && (alpha < pi)) {
-        else if ((alpha > (pi - beta)) && (alpha < pi))
-        {
           a = new mxPoint(x - Math.floor(0.25 * w), y + h);
           b = new mxPoint(x + Math.floor(0.5 * w), y
               - Math.floor(0.5 * h));
-        }
+        } else if ((alpha < 0) && (alpha > -beta)) {
-        else if ((alpha < 0) && (alpha > -beta))
-        {
           a = new mxPoint(x + Math.floor(0.5 * w), y
               + Math.floor(1.5 * h));
           b = new mxPoint(x + Math.floor(1.25 * w), y);
-        }
+        } else if ((alpha < -beta) && (alpha > (-pi + beta))) {
-        else if ((alpha < -beta) && (alpha > (-pi + beta)))
-        {
           a = new mxPoint(x, y + h);
           b = new mxPoint(x + w, y + h);
-        }
+        } else if ((alpha < (-pi + beta)) && (alpha > -pi)) {
-        else if ((alpha < (-pi + beta)) && (alpha > -pi))
-        {
           a = new mxPoint(x - Math.floor(0.25 * w), y);
           b = new mxPoint(x + Math.floor(0.5 * w), y
               + Math.floor(1.5 * h));
@@ -911,11 +685,12 @@ var mxPerimeter =
       result = mxUtils.intersection(cx, cy, next.x, next.y, a.x, a.y, b.x, b.y);
     }
 
-    if (result == null)
+    if (result == null) {
-    {
       return new mxPoint(cx, cy);
     }
 
     return result;
   }
 };
+
+export default mxPerimeter;

src/js/view/mxPrintPreview.js

@@ -2,6 +2,159 @@
  * Copyright (c) 2006-2019, JGraph Ltd
  * Copyright (c) 2006-2017, draw.io AG
  */
+
+import mxPoint from "../util/mxPoint";
+import mxRectangle from "../util/mxRectangle";
+import mxTemporaryCellStates from "./mxTemporaryCellStates";
+
+class mxPrintPreview {
+  /**
+   * Variable: graph
+   *
+   * Reference to the <mxGraph> that should be previewed.
+   */
+  graph = null;
+
+  /**
+   * Variable: pageFormat
+   *
+   * Holds the <mxRectangle> that defines the page format.
+   */
+  pageFormat = null;
+
+  /**
+   * Variable: scale
+   *
+   * Holds the scale of the print preview.
+   */
+  scale = null;
+
+  /**
+   * Variable: border
+   *
+   * The border inset around each side of every page in the preview. This is set
+   * to 0 if autoOrigin is false.
+   */
+  border = 0;
+
+  /**
+   * Variable: marginTop
+   *
+   * The margin at the top of the page (number). Default is 0.
+   */
+  marginTop = 0;
+
+  /**
+   * Variable: marginBottom
+   *
+   * The margin at the bottom of the page (number). Default is 0.
+   */
+  marginBottom = 0;
+
+  /**
+   * Variable: x0
+   *
+   * Holds the horizontal offset of the output.
+   */
+  x0 = 0;
+
+  /**
+   * Variable: y0
+   *
+   * Holds the vertical offset of the output.
+   */
+  y0 = 0;
+
+  /**
+   * Variable: autoOrigin
+   *
+   * Specifies if the origin should be automatically computed based on the top,
+   * left corner of the actual diagram contents. The required offset will be added
+   * to <x0> and <y0> in <open>. Default is true.
+   */
+  autoOrigin = true;
+
+  /**
+   * Variable: printOverlays
+   *
+   * Specifies if overlays should be printed. Default is false.
+   */
+  printOverlays = false;
+
+  /**
+   * Variable: printControls
+   *
+   * Specifies if controls (such as folding icons) should be printed. Default is
+   * false.
+   */
+  printControls = false;
+
+  /**
+   * Variable: printBackgroundImage
+   *
+   * Specifies if the background image should be printed. Default is false.
+   */
+  printBackgroundImage = false;
+
+  /**
+   * Variable: backgroundColor
+   *
+   * Holds the color value for the page background color. Default is #ffffff.
+   */
+  backgroundColor = '#ffffff';
+
+  /**
+   * Variable: borderColor
+   *
+   * Holds the color value for the page border.
+   */
+  borderColor = null;
+
+  /**
+   * Variable: title
+   *
+   * Holds the title of the preview window.
+   */
+  title = null;
+
+  /**
+   * Variable: pageSelector
+   *
+   * Boolean that specifies if the page selector should be
+   * displayed. Default is true.
+   */
+  pageSelector = null;
+
+  /**
+   * Variable: wnd
+   *
+   * Reference to the preview window.
+   */
+  wnd = null;
+
+  /**
+   * Variable: targetWindow
+   *
+   * Assign any window here to redirect the rendering in <open>.
+   */
+  targetWindow = null;
+
+  /**
+   * Variable: pageCount
+   *
+   * Holds the actual number of pages in the preview.
+   */
+  pageCount = 0;
+
+  /**
+   * Variable: clipping
+   *
+   * Specifies is clipping should be used to avoid creating too many cell states
+   * in large diagrams. The bounding box of the cells in the original diagram is
+   * used if this is enabled. Default is true.
+   */
+  clipping = true;
+
   /**
    * Class: mxPrintPreview
    *
@@ -172,8 +325,7 @@
    * pageSelector - Optional boolean that specifies if the page selector
    * should appear in the window with the print preview. Default is true.
    */
-function mxPrintPreview(graph, scale, pageFormat, border, x0, y0, borderColor, title, pageSelector)
+  constructor(graph, scale, pageFormat, border, x0, y0, borderColor, title, pageSelector) {
-{
     this.graph = graph;
     this.scale = (scale != null) ? scale : 1 / graph.pageScale;
     this.border = (border != null) ? border : 0;
@@ -185,160 +337,12 @@ function mxPrintPreview(graph, scale, pageFormat, border, x0, y0, borderColor, t
     this.pageSelector = (pageSelector != null) ? pageSelector : true;
   };
 
-/**
- * Variable: graph
- * 
- * Reference to the <mxGraph> that should be previewed.
- */
-graph = null;
-
-/**
- * Variable: pageFormat
- *
- * Holds the <mxRectangle> that defines the page format.
- */
-pageFormat = null;
-
-/**
- * Variable: scale
- * 
- * Holds the scale of the print preview.
- */
-scale = null;
-
-/**
- * Variable: border
- * 
- * The border inset around each side of every page in the preview. This is set
- * to 0 if autoOrigin is false.
- */
-border = 0;
-
-/**
- * Variable: marginTop
- * 
- * The margin at the top of the page (number). Default is 0.
- */
-marginTop = 0;
-
-/**
- * Variable: marginBottom
- * 
- * The margin at the bottom of the page (number). Default is 0.
- */
-marginBottom = 0;
-
-/**
- * Variable: x0
- * 
- * Holds the horizontal offset of the output.
- */
-x0 = 0;
-
-/**
- * Variable: y0
- *
- * Holds the vertical offset of the output.
- */
-y0 = 0;
-
-/**
- * Variable: autoOrigin
- * 
- * Specifies if the origin should be automatically computed based on the top,
- * left corner of the actual diagram contents. The required offset will be added
- * to <x0> and <y0> in <open>. Default is true.
- */
-autoOrigin = true;
-
-/**
- * Variable: printOverlays
- * 
- * Specifies if overlays should be printed. Default is false.
- */
-printOverlays = false;
-
-/**
- * Variable: printControls
- * 
- * Specifies if controls (such as folding icons) should be printed. Default is
- * false.
- */
-printControls = false;
-
-/**
- * Variable: printBackgroundImage
- * 
- * Specifies if the background image should be printed. Default is false.
- */
-printBackgroundImage = false;
-
-/**
- * Variable: backgroundColor
- * 
- * Holds the color value for the page background color. Default is #ffffff.
- */
-backgroundColor = '#ffffff';
-
-/**
- * Variable: borderColor
- * 
- * Holds the color value for the page border.
- */
-borderColor = null;
-
-/**
- * Variable: title
- * 
- * Holds the title of the preview window.
- */
-title = null;
-
-/**
- * Variable: pageSelector
- * 
- * Boolean that specifies if the page selector should be
- * displayed. Default is true.
- */
-pageSelector = null;
-
-/**
- * Variable: wnd
- * 
- * Reference to the preview window.
- */
-wnd = null;
-
-/**
- * Variable: targetWindow
- * 
- * Assign any window here to redirect the rendering in <open>.
- */
-targetWindow = null;
-
-/**
- * Variable: pageCount
- * 
- * Holds the actual number of pages in the preview.
- */
-pageCount = 0;
-
-/**
- * Variable: clipping
- * 
- * Specifies is clipping should be used to avoid creating too many cell states
- * in large diagrams. The bounding box of the cells in the original diagram is
- * used if this is enabled. Default is true.
- */
-clipping = true;
-
   /**
    * Function: getWindow
    *
    * Returns <wnd>.
    */
-getWindow = ()=>
+  getWindow = () => {
-{
     return this.wnd;
   };
 
@@ -349,8 +353,7 @@ getWindow = ()=>
    * page. This implementation returns an X-UA meta tag for IE5 in quirks mode,
    * IE8 in IE8 standards mode and edge in IE9 standards mode.
    */
-getDoctype = ()=>
+  getDoctype = () => {
-{
     var dt = '';
     return dt;
   };
@@ -366,8 +369,7 @@ getDoctype = ()=>
    * targetWindow - Optional window that should be used for rendering. If
    * this is specified then no HEAD tag, CSS and BODY tag will be written.
    */
-appendGraph = (graph, scale, x0, y0, forcePageBreaks, keepOpen)=>
+  appendGraph = (graph, scale, x0, y0, forcePageBreaks, keepOpen) => {
-{
     this.graph = graph;
     this.scale = (scale != null) ? scale : 1 / graph.pageScale;
     this.x0 = x0;
@@ -387,29 +389,23 @@ appendGraph = (graph, scale, x0, y0, forcePageBreaks, keepOpen)=>
    * targetWindow - Optional window that should be used for rendering. If
    * this is specified then no HEAD tag, CSS and BODY tag will be written.
    */
-open = (css, targetWindow, forcePageBreaks, keepOpen)=>
+  open = (css, targetWindow, forcePageBreaks, keepOpen) => {
-{
     // Closing the window while the page is being rendered may cause an
     // exception in IE. This and any other exceptions are simply ignored.
     var previousInitializeOverlay = this.graph.cellRenderer.initializeOverlay;
     var div = null;
 
-  try
+    try {
-  {
       // Temporarily overrides the method to redirect rendering of overlays
       // to the draw pane so that they are visible in the printout
-    if (this.printOverlays)
+      if (this.printOverlays) {
-    {
+        this.graph.cellRenderer.initializeOverlay = (state, overlay) => {
-      this.graph.cellRenderer.initializeOverlay = (state, overlay)=>
-      {
           overlay.init(state.view.getDrawPane());
         };
       }
 
-    if (this.printControls)
+      if (this.printControls) {
-    {
+        this.graph.cellRenderer.initControl = (state, control, handleEvents, clickHandler) => {
-      this.graph.cellRenderer.initControl = (state, control, handleEvents, clickHandler)=>
-      {
           control.dialect = state.view.graph.dialect;
           control.init(state.view.getDrawPane());
         };
@@ -418,25 +414,21 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
       this.wnd = (targetWindow != null) ? targetWindow : this.wnd;
       var isNewWindow = false;
 
-    if (this.wnd == null)
+      if (this.wnd == null) {
-    {
         isNewWindow = true;
         this.wnd = window.open();
       }
 
       var doc = this.wnd.document;
 
-    if (isNewWindow)
+      if (isNewWindow) {
-    {
         var dt = this.getDoctype();
 
-      if (dt != null && dt.length > 0)
+        if (dt != null && dt.length > 0) {
-      {
           doc.writeln(dt);
         }
 
-      if (document.compatMode === 'CSS1Compat')
+        if (document.compatMode === 'CSS1Compat') {
-      {
           doc.writeln('<!DOCTYPE html>');
         }
 
@@ -455,8 +447,7 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
       var tr = this.graph.getView().getTranslate();
 
       // Uses the absolute origin with no offset for all printing
-    if (!this.autoOrigin)
+      if (!this.autoOrigin) {
-    {
         this.x0 -= tr.x * this.scale;
         this.y0 -= tr.y * this.scale;
         bounds.width += bounds.x;
@@ -482,20 +473,16 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
       var vpages = Math.max(1, Math.ceil((bounds.height + this.y0) / availableHeight));
       this.pageCount = hpages * vpages;
 
-    var writePageSelector = mxUtils.bind(this, ()=>
+      var writePageSelector = mxUtils.bind(this, () => {
-    {
+        if (this.pageSelector && (vpages > 1 || hpages > 1)) {
-      if (this.pageSelector && (vpages > 1 || hpages > 1))
-      {
           var table = this.createPageSelector(vpages, hpages);
           doc.body.appendChild(table);
         }
       });
 
-    var addPage = mxUtils.bind(this, (div, addBreak)=>
+      var addPage = mxUtils.bind(this, (div, addBreak) => {
-    {
         // Border of the DIV (aka page) inside the document
-      if (this.borderColor != null)
+        if (this.borderColor != null) {
-      {
           div.style.borderColor = this.borderColor;
           div.style.borderStyle = 'solid';
           div.style.borderWidth = '1px';
@@ -505,8 +492,7 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
         // child selectors, eg. body > div { background: white; }
         div.style.background = this.backgroundColor;
 
-      if (forcePageBreaks || addBreak)
+        if (forcePageBreaks || addBreak) {
-      {
           div.style.pageBreakAfter = 'always';
         }
 
@@ -518,41 +504,33 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
         // to create the complete page and then copy it over to the
         // new window.document. This can be fixed later by using the
         // ownerDocument of the container in mxShape and mxGraphView.
-      if (isNewWindow && mxClient.IS_EDGE)
+        if (isNewWindow && mxClient.IS_EDGE) {
-      {
           // For some obscure reason, removing the DIV from the
           // parent before fetching its outerHTML has missing
           // fillcolor properties and fill children, so the div
           // must be removed afterwards to keep the fillcolors.
           doc.writeln(div.outerHTML);
           div.parentNode.removeChild(div);
-      }
+        } else if (mxClient.IS_EDGE) {
-      else if (mxClient.IS_EDGE)
-      {
           var clone = doc.createElement('div');
           clone.innerHTML = div.outerHTML;
           clone = clone.getElementsByTagName('div')[0];
           doc.body.appendChild(clone);
           div.parentNode.removeChild(div);
-      }
+        } else {
-      else
-      {
           div.parentNode.removeChild(div);
           doc.body.appendChild(div);
         }
 
-      if (forcePageBreaks || addBreak)
+        if (forcePageBreaks || addBreak) {
-      {
           this.addPageBreak(doc);
         }
       });
 
       var cov = this.getCoverPages(this.pageFormat.width, this.pageFormat.height);
 
-    if (cov != null)
+      if (cov != null) {
-    {
+        for (var i = 0; i < cov.length; i++) {
-      for (var i = 0; i < cov.length; i++)
-      {
           addPage(cov[i], true);
         }
       }
@@ -561,15 +539,12 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
 
       // Appends each page to the page output for printing, making
       // sure there will be a page break after each page (ie. div)
-    for (var i = 0; i < vpages; i++)
+      for (var i = 0; i < vpages; i++) {
-    {
         var dy = i * availableHeight / this.scale - this.y0 / this.scale +
             (bounds.y - tr.y * currentScale) / currentScale;
 
-      for (var j = 0; j < hpages; j++)
+        for (var j = 0; j < hpages; j++) {
-      {
+          if (this.wnd == null) {
-        if (this.wnd == null)
-        {
             return null;
           }
 
@@ -577,12 +552,10 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
               (bounds.x - tr.x * currentScale) / currentScale;
           var pageNum = i * hpages + j + 1;
           var clip = new mxRectangle(dx, dy, availableWidth, availableHeight);
-        div = this.renderPage(this.pageFormat.width, this.pageFormat.height, 0, 0, mxUtils.bind(this, (div)=>
+          div = this.renderPage(this.pageFormat.width, this.pageFormat.height, 0, 0, mxUtils.bind(this, (div) => {
-        {
             this.addGraphFragment(-dx, -dy, this.scale, pageNum, div, clip);
 
-          if (this.printBackgroundImage)
+            if (this.printBackgroundImage) {
-          {
               this.insertBackgroundImage(div, -dx, -dy);
             }
           }), pageNum);
@@ -594,32 +567,24 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
         }
       }
 
-    if (apx != null)
+      if (apx != null) {
-    {
+        for (var i = 0; i < apx.length; i++) {
-      for (var i = 0; i < apx.length; i++)
-      {
           addPage(apx[i], i < apx.length - 1);
         }
       }
 
-    if (isNewWindow && !keepOpen)
+      if (isNewWindow && !keepOpen) {
-    {
         this.closeDocument();
         writePageSelector();
       }
 
       this.wnd.focus();
-  }
+    } catch (e) {
-  catch (e)
-  {
       // Removes the DIV from the document in case of an error
-    if (div != null && div.parentNode != null)
+      if (div != null && div.parentNode != null) {
-    {
         div.parentNode.removeChild(div);
       }
-  }
+    } finally {
-  finally
-  {
       this.graph.cellRenderer.initializeOverlay = previousInitializeOverlay;
     }
 
@@ -631,8 +596,7 @@ open = (css, targetWindow, forcePageBreaks, keepOpen)=>
    *
    * Adds a page break to the given document.
    */
-addPageBreak = (doc)=>
+  addPageBreak = (doc) => {
-{
     var hr = doc.createElement('hr');
     hr.className = 'mxPageBreak';
     doc.body.appendChild(hr);
@@ -643,12 +607,9 @@ addPageBreak = (doc)=>
    *
    * Writes the closing tags for body and page after calling <writePostfix>.
    */
-closeDocument = ()=>
+  closeDocument = () => {
-{
+    try {
-  try
+      if (this.wnd != null && this.wnd.document != null) {
-  {
-    if (this.wnd != null && this.wnd.document != null)
-    {
         var doc = this.wnd.document;
 
         this.writePostfix(doc);
@@ -659,9 +620,7 @@ closeDocument = ()=>
         // Removes all event handlers in the print output
         mxEvent.release(doc.body);
       }
-  }
+    } catch (e) {
-  catch (e)
-  {
       // ignore any errors resulting from wnd no longer being available
     }
   };
@@ -672,10 +631,8 @@ closeDocument = ()=>
    * Writes the HEAD section into the given document, without the opening
    * and closing HEAD tags.
    */
-writeHead = (doc, css)=>
+  writeHead = (doc, css) => {
-{
+    if (this.title != null) {
-  if (this.title != null)
-  {
       doc.writeln('<title>' + this.title + '</title>');
     }
 
@@ -700,8 +657,7 @@ writeHead = (doc, css)=>
     doc.writeln('  body.mxPage { background: gray; }');
     doc.writeln('}');
 
-  if (css != null)
+    if (css != null) {
-  {
       doc.writeln(css);
     }
 
@@ -713,8 +669,7 @@ writeHead = (doc, css)=>
    *
    * Called before closing the body of the page. This implementation is empty.
    */
-writePostfix = (doc)=>
+  writePostfix = (doc) => {
-{
     // empty
   };
 
@@ -723,8 +678,7 @@ writePostfix = (doc)=>
    *
    * Creates the page selector table.
    */
-createPageSelector = (vpages, hpages)=>
+  createPageSelector = (vpages, hpages) => {
-{
     var doc = this.wnd.document;
     var table = doc.createElement('table');
     table.className = 'mxPageSelector';
@@ -732,20 +686,17 @@ createPageSelector = (vpages, hpages)=>
 
     var tbody = doc.createElement('tbody');
 
-  for (var i = 0; i < vpages; i++)
+    for (var i = 0; i < vpages; i++) {
-  {
       var row = doc.createElement('tr');
 
-    for (var j = 0; j < hpages; j++)
+      for (var j = 0; j < hpages; j++) {
-    {
         var pageNum = i * hpages + j + 1;
         var cell = doc.createElement('td');
         var a = doc.createElement('a');
         a.setAttribute('href', '#mxPage-' + pageNum);
 
         // Workaround for FF where the anchor is appended to the URL of the original document
-      if (mxClient.IS_NS && !mxClient.IS_SF && !mxClient.IS_GC)
+        if (mxClient.IS_NS && !mxClient.IS_SF && !mxClient.IS_GC) {
-      {
           var js = 'var page = document.getElementById(\'mxPage-' + pageNum + '\');page.scrollIntoView(true);event.preventDefault();';
           a.setAttribute('onclick', js);
         }
@@ -780,18 +731,15 @@ createPageSelector = (vpages, hpages)=>
    * Takes the inner div as the argument.
    * pageNumber - Integer representing the page number.
    */
-renderPage = (w, h, dx, dy, content, pageNumber)=>
+  renderPage = (w, h, dx, dy, content, pageNumber) => {
-{
     var doc = this.wnd.document;
     var div = document.createElement('div');
     var arg = null;
 
-  try
+    try {
-  {
       // Workaround for ignored clipping in IE 9 standards
       // when printing with page breaks and HTML labels.
-    if (dx != 0 || dy != 0)
+      if (dx != 0 || dy != 0) {
-    {
         div.style.position = 'relative';
         div.style.width = w + 'px';
         div.style.height = h + 'px';
@@ -816,8 +764,7 @@ renderPage = (w, h, dx, dy, content, pageNumber)=>
         arg = viewport;
       }
       // FIXME: IE10/11 too many pages
-    else
+      else {
-    {
         div.style.width = w + 'px';
         div.style.height = h + 'px';
         div.style.overflow = 'hidden';
@@ -831,8 +778,7 @@ renderPage = (w, h, dx, dy, content, pageNumber)=>
         innerDiv.style.top = this.border + 'px';
         innerDiv.style.left = this.border + 'px';
 
-      if (this.graph.dialect == mxConstants.DIALECT_VML)
+        if (this.graph.dialect == mxConstants.DIALECT_VML) {
-      {
           innerDiv.style.position = 'absolute';
         }
 
@@ -840,9 +786,7 @@ renderPage = (w, h, dx, dy, content, pageNumber)=>
         document.body.appendChild(div);
         arg = innerDiv;
       }
-  }
+    } catch (e) {
-  catch (e)
-  {
       div.parentNode.removeChild(div);
       div = null;
 
@@ -859,12 +803,10 @@ renderPage = (w, h, dx, dy, content, pageNumber)=>
    *
    * Returns the root cell for painting the graph.
    */
-getRoot = ()=>
+  getRoot = () => {
-{
     var root = this.graph.view.currentRoot;
 
-  if (root == null)
+    if (root == null) {
-  {
       root = this.graph.getModel().getRoot();
     }
 
@@ -878,8 +820,7 @@ getRoot = ()=>
    * This returns true if foreignObject is supported and we're not in Safari
    * as it has clipping bugs for transformed CSS content with foreignObjects.
    */
-useCssTransforms = ()=>
+  useCssTransforms = () => {
-{
     return !mxClient.NO_FO && !mxClient.IS_SF;
   };
 
@@ -897,8 +838,7 @@ useCssTransforms = ()=>
    * div - Div that contains the output.
    * clip - Contains the clipping rectangle as an <mxRectangle>.
    */
-addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
+  addGraphFragment = (dx, dy, scale, pageNumber, div, clip) => {
-{
     var view = this.graph.getView();
     var previousContainer = this.graph.container;
     this.graph.container = div;
@@ -909,13 +849,11 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
     var overlayPane = view.getOverlayPane();
     var realScale = scale;
 
-  if (this.graph.dialect == mxConstants.DIALECT_SVG)
+    if (this.graph.dialect == mxConstants.DIALECT_SVG) {
-  {
       view.createSvg();
 
       // Uses CSS transform for scaling
-    if (this.useCssTransforms())
+      if (this.useCssTransforms()) {
-    {
         var g = view.getDrawPane().parentNode;
         var prev = g.getAttribute('transform');
         g.setAttribute('transformOrigin', '0 0');
@@ -926,13 +864,9 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
         dx = 0;
         dy = 0;
       }
-  }
+    } else if (this.graph.dialect == mxConstants.DIALECT_VML) {
-  else if (this.graph.dialect == mxConstants.DIALECT_VML)
-  {
       view.createVml();
-  }
+    } else {
-  else
-  {
       view.createHtml();
     }
 
@@ -954,29 +888,24 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
     var s = view.scale;
 
     // Gets the transformed clip for intersection check below
-  if (this.clipping)
+    if (this.clipping) {
-  {
       var tempClip = new mxRectangle((clip.x + translate.x) * s, (clip.y + translate.y) * s,
           clip.width * s / realScale, clip.height * s / realScale);
 
       // Checks clipping rectangle for speedup
       // Must create terminal states for edge clipping even if terminal outside of clip
-    this.graph.cellRenderer.redraw = (state, force, rendering)=>
+      this.graph.cellRenderer.redraw = (state, force, rendering) => {
-    {
+        if (state != null) {
-      if (state != null)
-      {
           // Gets original state from graph to find bounding box
           var orig = states.get(state.cell);
 
-        if (orig != null)
+          if (orig != null) {
-        {
             var bbox = view.getBoundingBox(orig, false);
 
             // Stops rendering if outside clip for speedup but ignores
             // edge labels where width and height is set to 0
             if (bbox != null && bbox.width > 0 && bbox.height > 0 &&
-            !mxUtils.intersects(tempClip, bbox))
+                !mxUtils.intersects(tempClip, bbox)) {
-          {
               return;
             }
           }
@@ -988,29 +917,23 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
 
     var temp = null;
 
-  try
+    try {
-  {
       // Creates the temporary cell states in the view and
       // draws them onto the temporary DOM nodes in the view
       var cells = [this.getRoot()];
-    temp = new mxTemporaryCellStates(view, scale, cells, null, mxUtils.bind(this, (state)=>
+      temp = new mxTemporaryCellStates(view, scale, cells, null, mxUtils.bind(this, (state) => {
-    {
         return this.getLinkForCellState(state);
       }));
-  }
+    } finally {
-  finally
-  {
       // Removes everything but the SVG node
       var tmp = div.firstChild;
 
-    while (tmp != null)
+      while (tmp != null) {
-    {
         var next = tmp.nextSibling;
         var name = tmp.nodeName.toLowerCase();
 
         // Note: Width and height are required in FF 11
-      if (name == 'svg')
+        if (name == 'svg') {
-      {
           tmp.style.overflow = 'hidden';
           tmp.style.position = 'relative';
           tmp.style.top = this.marginTop + 'px';
@@ -1020,8 +943,7 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
           tmp.style.height = '';
         }
         // Tries to fetch all text labels and only text labels
-      else if (tmp.style.cursor != 'default' && name != 'div')
+        else if (tmp.style.cursor != 'default' && name != 'div') {
-      {
           tmp.parentNode.removeChild(tmp);
         }
 
@@ -1029,12 +951,10 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
       }
 
       // Puts background image behind SVG output
-    if (this.printBackgroundImage)
+      if (this.printBackgroundImage) {
-    {
         var svgs = div.getElementsByTagName('svg');
 
-      if (svgs.length > 0)
+        if (svgs.length > 0) {
-      {
           svgs[0].style.position = 'absolute';
         }
       }
@@ -1061,8 +981,7 @@ addGraphFragment = (dx, dy, scale, pageNumber, div, clip)=>
    *
    * Returns the link for the given cell state. This returns null.
    */
-getLinkForCellState = (state)=>
+  getLinkForCellState = (state) => {
-{
     return this.graph.getLinkForCell(state.cell);
   };
 
@@ -1071,12 +990,10 @@ getLinkForCellState = (state)=>
    *
    * Inserts the background image into the given div.
    */
-insertBackgroundImage = (div, dx, dy)=>
+  insertBackgroundImage = (div, dx, dy) => {
-{
     var bg = this.graph.backgroundImage;
 
-  if (bg != null)
+    if (bg != null) {
-  {
       var img = document.createElement('img');
       img.style.position = 'absolute';
       img.style.marginLeft = Math.round(dx * this.scale) + 'px';
@@ -1094,8 +1011,7 @@ insertBackgroundImage = (div, dx, dy)=>
    *
    * Returns the pages to be added before the print output. This returns null.
    */
-getCoverPages = ()=>
+  getCoverPages = () => {
-{
     return null;
   };
 
@@ -1104,8 +1020,7 @@ getCoverPages = ()=>
    *
    * Returns the pages to be added after the print output. This returns null.
    */
-getAppendices = ()=>
+  getAppendices = () => {
-{
     return null;
   };
 
@@ -1118,12 +1033,10 @@ getAppendices = ()=>
    *
    * css - Optional CSS string to be used in the head section.
    */
-print = (css)=>
+  print = (css) => {
-{
     var wnd = this.open(css);
 
-  if (wnd != null)
+    if (wnd != null) {
-  {
       wnd.print();
     }
   };
@@ -1133,11 +1046,12 @@ print = (css)=>
    *
    * Closes the print preview window.
    */
-close = ()=>
+  close = () => {
-{
+    if (this.wnd != null) {
-  if (this.wnd != null)
-  {
       this.wnd.close();
       this.wnd = null;
     }
   };
+}
+
+export default mxPrintPreview;

src/js/view/mxStyleRegistry.js

@@ -2,8 +2,10 @@
  * Copyright (c) 2006-2015, JGraph Ltd
  * Copyright (c) 2006-2015, Gaudenz Alder
  */
-var mxStyleRegistry =
+
-{
+import mxConstants from "../util/mxConstants";
+
+var mxStyleRegistry = {
   /**
    * Class: mxStyleRegistry
    *
@@ -21,8 +23,7 @@ var mxStyleRegistry =
    *
    * Puts the given object into the registry under the given name.
    */
-  putValue: (name, obj)=>
+  putValue: (name, obj) => {
-  {
     mxStyleRegistry.values[name] = obj;
   },
 
@@ -31,8 +32,7 @@ var mxStyleRegistry =
    *
    * Returns the value associated with the given name.
    */
-  getValue: (name)=>
+  getValue: (name) => {
-  {
     return mxStyleRegistry.values[name];
   },
 
@@ -41,19 +41,14 @@ var mxStyleRegistry =
    *
    * Returns the name for the given value.
    */
-  getName: (value)=>
+  getName: (value) => {
-  {
+    for (var key in mxStyleRegistry.values) {
-    for (var key in mxStyleRegistry.values)
+      if (mxStyleRegistry.values[key] === value) {
-    {
-      if (mxStyleRegistry.values[key] == value)
-      {
         return key;
       }
     }
-    
     return null;
   }
-
 };
 
 mxStyleRegistry.putValue(mxConstants.EDGESTYLE_ELBOW, mxEdgeStyle.ElbowConnector);
@@ -69,3 +64,5 @@ mxStyleRegistry.putValue(mxConstants.PERIMETER_RECTANGLE, mxPerimeter.RectangleP
 mxStyleRegistry.putValue(mxConstants.PERIMETER_RHOMBUS, mxPerimeter.RhombusPerimeter);
 mxStyleRegistry.putValue(mxConstants.PERIMETER_TRIANGLE, mxPerimeter.TrianglePerimeter);
 mxStyleRegistry.putValue(mxConstants.PERIMETER_HEXAGON, mxPerimeter.HexagonPerimeter);
+
+export default mxStyleRegistry;

src/js/view/mxTemporaryCellStates.js

@@ -7,89 +7,11 @@
  * 
  * Creates a temporary set of cell states.
  */
-function mxTemporaryCellStates(view, scale, cells, isCellVisibleFn, getLinkForCellState)
-{
-  scale = (scale != null) ? scale : 1;
-  this.view = view;
 
-  // Stores the previous state
+import mxRectangle from "../util/mxRectangle";
-  this.oldValidateCellState = view.validateCellState;
+import mxDictionary from "../util/mxDictionary";
-  this.oldBounds = view.getGraphBounds();
-  this.oldStates = view.getStates();
-  this.oldScale = view.getScale();
-  this.oldDoRedrawShape = view.graph.cellRenderer.doRedrawShape;
-
-  var self = this;
-
-  // Overrides doRedrawShape and paint shape to add links on shapes
-  if (getLinkForCellState != null)
-  {
-    view.graph.cellRenderer.doRedrawShape = (state)=>
-    {
-      var oldPaint = state.shape.paint;
-      
-      state.shape.paint = (c)=>
-      {
-        var link = getLinkForCellState(state);
-        
-        if (link != null)
-        {
-          c.setLink(link);
-        }
-        
-        oldPaint.apply(this, arguments);
-        
-        if (link != null)
-        {
-          c.setLink(null);
-        }
-      };
-      
-      self.oldDoRedrawShape.apply(view.graph.cellRenderer, arguments);
-      state.shape.paint = oldPaint;
-    };
-  }
-
-  // Overrides validateCellState to ignore invisible cells
-  view.validateCellState = (cell, resurse)=>
-  {
-    if (cell == null || isCellVisibleFn == null || isCellVisibleFn(cell))
-    {
-      return self.oldValidateCellState.apply(view, arguments);
-    }
-    
-    return null;
-  };
-  
-  // Creates space for new states
-  view.setStates(new mxDictionary());
-  view.setScale(scale);
-  
-  if (cells != null)
-  {
-    view.resetValidationState();
-    var bbox = null;
-
-    // Validates the vertices and edges without adding them to
-    // the model so that the original cells are not modified
-    for (var i = 0; i < cells.length; i++)
-    {
-      var bounds = view.getBoundingBox(view.validateCellState(view.validateCell(cells[i])));
-      
-      if (bbox == null)
-      {
-        bbox = bounds;
-      }
-      else
-      {
-        bbox.add(bounds);
-      }
-    }
-
-    view.setGraphBounds(bbox || new mxRectangle());
-  }
-};
 
+class mxTemporaryCellStates {
   /**
    * Variable: view
    *
@@ -118,16 +40,88 @@ oldBounds = null;
    */
   oldScale = null;
 
+  constructor(view, scale, cells, isCellVisibleFn, getLinkForCellState) {
+    scale = (scale != null) ? scale : 1;
+    this.view = view;
+
+    // Stores the previous state
+    this.oldValidateCellState = view.validateCellState;
+    this.oldBounds = view.getGraphBounds();
+    this.oldStates = view.getStates();
+    this.oldScale = view.getScale();
+    this.oldDoRedrawShape = view.graph.cellRenderer.doRedrawShape;
+
+    var self = this;
+
+    // Overrides doRedrawShape and paint shape to add links on shapes
+    if (getLinkForCellState != null) {
+      view.graph.cellRenderer.doRedrawShape = (state) => {
+        var oldPaint = state.shape.paint;
+
+        state.shape.paint = (c) => {
+          var link = getLinkForCellState(state);
+
+          if (link != null) {
+            c.setLink(link);
+          }
+
+          oldPaint.apply(this, arguments);
+
+          if (link != null) {
+            c.setLink(null);
+          }
+        };
+
+        self.oldDoRedrawShape.apply(view.graph.cellRenderer, arguments);
+        state.shape.paint = oldPaint;
+      };
+    }
+
+    // Overrides validateCellState to ignore invisible cells
+    view.validateCellState = (cell, resurse) => {
+      if (cell == null || isCellVisibleFn == null || isCellVisibleFn(cell)) {
+        return self.oldValidateCellState.apply(view, arguments);
+      }
+
+      return null;
+    };
+
+    // Creates space for new states
+    view.setStates(new mxDictionary());
+    view.setScale(scale);
+
+    if (cells != null) {
+      view.resetValidationState();
+      var bbox = null;
+
+      // Validates the vertices and edges without adding them to
+      // the model so that the original cells are not modified
+      for (var i = 0; i < cells.length; i++) {
+        var bounds = view.getBoundingBox(view.validateCellState(view.validateCell(cells[i])));
+
+        if (bbox == null) {
+          bbox = bounds;
+        } else {
+          bbox.add(bounds);
+        }
+      }
+
+      view.setGraphBounds(bbox || new mxRectangle());
+    }
+  };
+
   /**
    * Function: destroy
    *
    * Returns the top, left corner as a new <mxPoint>.
    */
-destroy = ()=>
+  destroy = () => {
-{
     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;
   };
+}
+
+export default mxTemporaryCellStates;