fixed import and init errors

src/mxgraph/handler/mxCellMarker.js

@@ -3,6 +3,10 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
+import mxEventSource from "../util/mxEventSource";
+import mxConstants from "../util/mxConstants";
+import mxCellHighlight from "./mxCellHighlight";
+import mxEventObject from "../util/mxEventObject";
 
 class mxCellMarker extends mxEventSource {
   /**
@@ -261,7 +265,7 @@ class mxCellMarker extends mxEventSource {
       this.validState = null;
     }
 
-    if (state != this.markedState || color != this.currentColor) {
+    if (state !== this.markedState || color !== this.currentColor) {
       this.currentColor = color;
 
       if (state != null && this.currentColor != null) {

src/mxgraph/handler/mxEdgeHandler.js

@@ -6,7 +6,7 @@
 import mxCellMarker from "./mxCellMarker";
 import mxPoint from "../util/mxPoint";
 import mxConstants from "../util/mxConstants";
-import mxUtils from "../examples/map-background/leaflet";
+import mxUtils from "../util/mxUtils";
 import mxImageShape from "../shape/mxImageShape";
 import mxRectangleShape from "../shape/mxRectangleShape";
 import mxConnectionConstraint from "../view/mxConnectionConstraint";

src/mxgraph/handler/mxElbowEdgeHandler.js

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

src/mxgraph/handler/mxSelectionCellsHandler.js

@@ -3,6 +3,9 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
+import mxEventSource from "../util/mxEventSource";
+import mxDictionary from "../util/mxDictionary";
+import mxEventObject from "../util/mxEventObject";
 
 class mxSelectionCellsHandler extends mxEventSource {
   /**

src/mxgraph/model/mxGraphModel.js

@@ -4,6 +4,11 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 import mxEventSource from "../util/mxEventSource";
+import mxUndoableEdit from "../util/mxUndoableEdit";
+import mxCellPath from "./mxCellPath";
+import mxDictionary from "../util/mxDictionary";
+import mxObjectIdentity from "../util/mxObjectIdentity";
+import mxCell from "./mxCell";
 
 class mxGraphModel extends mxEventSource {
   /**

src/mxgraph/mxClient.js

@@ -2,6 +2,8 @@
  * Copyright (c) 2006-2017, JGraph Ltd
  * Copyright (c) 2006-2017, Gaudenz Alder
  */
+import mxResources from "./util/mxResources";
+
 let mxClient = {
   /**
    * Class: mxClient
@@ -23,19 +25,247 @@ let mxClient = {
    */
   VERSION: '4.2.2',
 
+  /**
+   * Variable: mxResourceExtension
+   *
+   * Optional global config variable to specify the extension of resource files.
+   * Default is true. NOTE: This is a global variable, not a variable of mxClient.
+   *
+   * (code)
+   * <script type="text/javascript">
+   *     let mxResourceExtension = '.txt';
+   * </script>
+   * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
+   * (end)
+   */
+  mxResourceExtension: '.txt',
+  setResourceExtension: (value) => {
+    mxClient.mxResourceExtension = value;
+    mxResources.extension = value;
+  },
+
+  /**
+   * Variable: mxLoadResources
+   *
+   * Optional global config variable to toggle loading of the two resource files
+   * in <mxGraph> and <mxEditor>. Default is true. NOTE: This is a global variable,
+   * not a variable of mxClient. If this is false, you can use <mxClient.loadResources>
+   * with its callback to load the default bundles asynchronously.
+   *
+   * (code)
+   * <script type="text/javascript">
+   *     let mxLoadResources = false;
+   * </script>
+   * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
+   * (end)
+   */
+  mxLoadResources: true,
+  setLoadResources: (value) => {},
+
+  /**
+   * Variable: mxForceIncludes
+   *
+   * Optional global config variable to force loading the JavaScript files in
+   * development mode. Default is undefined. NOTE: This is a global variable,
+   * not a variable of mxClient.
+   *
+   * (code)
+   * <script type="text/javascript">
+   *     let mxLoadResources = true;
+   * </script>
+   * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
+   * (end)
+   */
+  mxForceIncludes: false,
+  setForceIncludes: (value) => {
+    mxClient.mxForceIncludes = value;
+  },
+
+  /**
+   * Variable: mxLoadStylesheets
+   *
+   * Optional global config variable to toggle loading of the CSS files when
+   * the library is initialized. Default is true. NOTE: This is a global variable,
+   * not a variable of mxClient.
+   *
+   * (code)
+   * <script type="text/javascript">
+   *     let mxLoadStylesheets = false;
+   * </script>
+   * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
+   * (end)
+   */
+  mxLoadStylesheets: true,
+  setLoadStylesheets: (value) => {
+    mxClient.mxLoadStylesheets = value;
+  },
+
+  /**
+   * Variable: basePath
+   *
+   * Basepath for all URLs in the core without trailing slash. Default is '.'.
+   * Set mxBasePath prior to loading the mxClient library as follows to override
+   * this setting:
+   *
+   * (code)
+   * <script type="text/javascript">
+   *     mxBasePath = '/path/to/core/directory';
+   * </script>
+   * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
+   * (end)
+   *
+   * When using a relative path, the path is relative to the URL of the page that
+   * contains the assignment. Trailing slashes are automatically removed.
+   */
+  basePath: '.',
+  setBasePath: (value) => {
+    if (typeof(value) != 'undefined' && value.length > 0) {
+      // Adds a trailing slash if required
+      if (value.substring(value.length - 1) === '/') {
+        value = value.substring(0, value.length - 1);
+      }
+      mxClient.basePath = value;
+    } else {
+      mxClient.basePath = '.';
+    }
+  },
+
+  /**
+   * Variable: imageBasePath
+   *
+   * Basepath for all images URLs in the core without trailing slash. Default is
+   * <mxClient.basePath> + '/images'. Set mxImageBasePath prior to loading the
+   * mxClient library as follows to override this setting:
+   *
+   * (code)
+   * <script type="text/javascript">
+   *     mxImageBasePath = '/path/to/image/directory';
+   * </script>
+   * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
+   * (end)
+   *
+   * When using a relative path, the path is relative to the URL of the page that
+   * contains the assignment. Trailing slashes are automatically removed.
+   */
+  imageBasePath: '.',
+  setImageBasePath: (value) => {
+    if (typeof(value) != 'undefined' && value.length > 0) {
+      // Adds a trailing slash if required
+      if (value.substring(value.length - 1) === '/') {
+        value = value.substring(0, value.length - 1);
+      }
+      mxClient.imageBasePath = value;
+    } else {
+      mxClient.imageBasePath = mxClient.basePath + '/images';
+    }
+  },
+
+  /**
+   * Variable: language
+   *
+   * Defines the language of the client, eg. en for english, de for german etc.
+   * The special value 'none' will disable all built-in internationalization and
+   * resource loading. See <mxResources.getSpecialBundle> for handling identifiers
+   * with and without a dash.
+   *
+   * Set mxLanguage prior to loading the mxClient library as follows to override
+   * this setting:
+   *
+   * (code)
+   * <script type="text/javascript">
+   *     mxLanguage = 'en';
+   * </script>
+   * <script type="text/javascript" src="js/mxClient.js"></script>
+   * (end)
+   *
+   * If internationalization is disabled, then the following variables should be
+   * overridden to reflect the current language of the system. These variables are
+   * cleared when i18n is disabled.
+   * <mxEditor.askZoomResource>, <mxEditor.lastSavedResource>,
+   * <mxEditor.currentFileResource>, <mxEditor.propertiesResource>,
+   * <mxEditor.tasksResource>, <mxEditor.helpResource>, <mxEditor.outlineResource>,
+   * <mxElbowEdgeHandler.doubleClickOrientationResource>, <mxUtils.errorResource>,
+   * <mxUtils.closeResource>, <mxGraphSelectionModel.doneResource>,
+   * <mxGraphSelectionModel.updatingSelectionResource>, <mxGraphView.doneResource>,
+   * <mxGraphView.updatingDocumentResource>, <mxCellRenderer.collapseExpandResource>,
+   * <mxGraph.containsValidationErrorsResource> and
+   * <mxGraph.alreadyConnectedResource>.
+   */
+  language: typeof window !== "undefined" ? navigator.language : 'en',
+  setLanguage: (value) => {
+    if (typeof(value) != 'undefined' && value != null) {
+      mxClient.language = value;
+    }
+    else {
+      mxClient.language = navigator.language;
+    }
+  },
+
+  /**
+   * Variable: defaultLanguage
+   *
+   * Defines the default language which is used in the common resource files. Any
+   * resources for this language will only load the common resource file, but not
+   * the language-specific resource file. Default is 'en'.
+   *
+   * Set mxDefaultLanguage prior to loading the mxClient library as follows to override
+   * this setting:
+   *
+   * (code)
+   * <script type="text/javascript">
+   *     mxDefaultLanguage = 'de';
+   * </script>
+   * <script type="text/javascript" src="js/mxClient.js"></script>
+   * (end)
+   */
+  defaultLanguage: 'en',
+  setDefaultLanguage: (value) => {
+    if (typeof(value) != 'undefined' && value != null) {
+      mxClient.defaultLanguage = value;
+    } else {
+      mxClient.defaultLanguage = 'en';
+    }
+  },
+
+  /**
+   * Variable: languages
+   *
+   * Defines the optional array of all supported language extensions. The default
+   * language does not have to be part of this list. See
+   * <mxResources.isLanguageSupported>.
+   *
+   * (code)
+   * <script type="text/javascript">
+   *     mxLanguages = ['de', 'it', 'fr'];
+   * </script>
+   * <script type="text/javascript" src="js/mxClient.js"></script>
+   * (end)
+   *
+   * This is used to avoid unnecessary requests to language files, ie. if a 404
+   * will be returned.
+   */
+
+  setLanguages: (value) => {
+    if (typeof(value) != 'undefined' && value != null) {
+      mxClient.languages = value;
+    }
+  },
+
   /**
    * Variable: IS_EDGE
    *
    * True if the current browser is Microsoft Edge.
    */
-  IS_EDGE: navigator.userAgent != null && !!navigator.userAgent.match(/Edge\//),
+  IS_EDGE: typeof window !== 'undefined' &&
+      navigator.userAgent != null && !!navigator.userAgent.match(/Edge\//),
 
   /**
    * Variable: IS_NS
    *
    * True if the current browser is Netscape (including Firefox).
    */
-  IS_NS: navigator.userAgent != null &&
+  IS_NS: typeof window !== 'undefined' &&
+      navigator.userAgent != null &&
       navigator.userAgent.indexOf('Mozilla/') >= 0 &&
       navigator.userAgent.indexOf('MSIE') < 0 &&
       navigator.userAgent.indexOf('Edge/') < 0,
@@ -45,42 +275,48 @@ let mxClient = {
    *
    * True if the current browser is Safari.
    */
-  IS_SF: /Apple Computer, Inc/.test(navigator.vendor),
+  IS_SF: typeof window !== 'undefined' &&
+      /Apple Computer, Inc/.test(navigator.vendor),
 
   /**
    * Variable: IS_ANDROID
    *
    * Returns true if the user agent contains Android.
    */
-  IS_ANDROID: navigator.appVersion.indexOf('Android') >= 0,
+  IS_ANDROID: typeof window !== 'undefined' &&
+      navigator.appVersion.indexOf('Android') >= 0,
 
   /**
    * Variable: IS_IOS
    *
    * Returns true if the user agent is an iPad, iPhone or iPod.
    */
-  IS_IOS: (/iP(hone|od|ad)/.test(navigator.platform)),
+  IS_IOS: typeof window !== 'undefined' &&
+      (/iP(hone|od|ad)/.test(navigator.platform)),
 
   /**
    * Variable: IS_GC
    *
    * True if the current browser is Google Chrome.
    */
-  IS_GC: /Google Inc/.test(navigator.vendor),
+  IS_GC: typeof window !== 'undefined' &&
+      /Google Inc/.test(navigator.vendor),
 
   /**
    * Variable: IS_CHROMEAPP
    *
    * True if the this is running inside a Chrome App.
    */
-  IS_CHROMEAPP: window.chrome != null && chrome.app != null && chrome.app.runtime != null,
+  IS_CHROMEAPP: typeof window !== 'undefined' &&
+      window.chrome != null && chrome.app != null && chrome.app.runtime != null,
 
   /**
    * Variable: IS_FF
    *
    * True if the current browser is Firefox.
    */
-  IS_FF: typeof InstallTrigger !== 'undefined',
+  IS_FF: typeof window !== 'undefined' &&
+      typeof InstallTrigger !== 'undefined',
 
   /**
    * Variable: IS_MT
@@ -89,7 +325,8 @@ let mxClient = {
    * for all Firefox-based browsers newer than or equal 3, such as Camino,
    * Iceweasel, Seamonkey and Iceape.
    */
-  IS_MT: (navigator.userAgent.indexOf('Firefox/') >= 0 &&
+  IS_MT: typeof window !== 'undefined' &&
+      ((navigator.userAgent.indexOf('Firefox/') >= 0 &&
       navigator.userAgent.indexOf('Firefox/1.') < 0 &&
       navigator.userAgent.indexOf('Firefox/2.') < 0) ||
       (navigator.userAgent.indexOf('Iceweasel/') >= 0 &&
@@ -98,14 +335,15 @@ let mxClient = {
       (navigator.userAgent.indexOf('SeaMonkey/') >= 0 &&
           navigator.userAgent.indexOf('SeaMonkey/1.') < 0) ||
       (navigator.userAgent.indexOf('Iceape/') >= 0 &&
-          navigator.userAgent.indexOf('Iceape/1.') < 0),
+          navigator.userAgent.indexOf('Iceape/1.') < 0)),
 
   /**
    * Variable: IS_SVG
    *
    * True if the browser supports SVG.
    */
-  IS_SVG: navigator.appName.toUpperCase() != 'MICROSOFT INTERNET EXPLORER',
+  IS_SVG: typeof window !== 'undefined' &&
+      navigator.appName.toUpperCase() !== 'MICROSOFT INTERNET EXPLORER',
 
   /**
    * Variable: NO_FO
@@ -113,29 +351,33 @@ let mxClient = {
    * True if foreignObject support is not available. This is the case for
    * Opera, older SVG-based browsers and all versions of IE.
    */
-  NO_FO: !document.createElementNS || document.createElementNS('http://www.w3.org/2000/svg',
+  NO_FO: typeof window !== 'undefined' &&
-      'foreignObject') != '[object SVGForeignObjectElement]' || navigator.userAgent.indexOf('Opera/') >= 0,
+      (!document.createElementNS || document.createElementNS('http://www.w3.org/2000/svg','foreignObject') !==
+          '[object SVGForeignObjectElement]' || navigator.userAgent.indexOf('Opera/') >= 0),
 
   /**
    * Variable: IS_WIN
    *
    * True if the client is a Windows.
    */
-  IS_WIN: navigator.appVersion.indexOf('Win') > 0,
+  IS_WIN: typeof window !== 'undefined' &&
+      navigator.appVersion.indexOf('Win') > 0,
 
   /**
    * Variable: IS_MAC
    *
    * True if the client is a Mac.
    */
-  IS_MAC: navigator.appVersion.indexOf('Mac') > 0,
+  IS_MAC: typeof window !== 'undefined' &&
+      navigator.appVersion.indexOf('Mac') > 0,
 
   /**
    * Variable: IS_CHROMEOS
    *
    * True if the client is a Chrome OS.
    */
-  IS_CHROMEOS: /\bCrOS\b/.test(navigator.appVersion),
+  IS_CHROMEOS: typeof window !== 'undefined' &&
+      /\bCrOS\b/.test(navigator.appVersion),
 
   /**
    * Variable: IS_TOUCH
@@ -143,21 +385,25 @@ let mxClient = {
    * True if this device supports touchstart/-move/-end events (Apple iOS,
    * Android, Chromebook and Chrome Browser on touch-enabled devices).
    */
-  IS_TOUCH: 'ontouchstart' in document.documentElement,
+  IS_TOUCH: typeof window !== 'undefined' &&
+      'ontouchstart' in document.documentElement,
 
   /**
    * Variable: IS_POINTER
    *
    * True if this device supports Microsoft pointer events (always false on Macs).
    */
-  IS_POINTER: window.PointerEvent != null && !(navigator.appVersion.indexOf('Mac') > 0),
+  IS_POINTER: typeof window !== 'undefined' &&
+      window.PointerEvent != null &&
+      !(navigator.appVersion.indexOf('Mac') > 0),
 
   /**
    * Variable: IS_LOCAL
    *
    * True if the documents location does not start with http:// or https://.
    */
-  IS_LOCAL: document.location.href.indexOf('http://') < 0 &&
+  IS_LOCAL: typeof window !== 'undefined' &&
+      document.location.href.indexOf('http://') < 0 &&
       document.location.href.indexOf('https://') < 0,
 
   /**
@@ -239,7 +485,7 @@ let mxClient = {
     let pending = mxClient.defaultBundles.length;
 
     function callback() {
-      if (--pending == 0) {
+      if (--pending === 0) {
         fn();
       }
     }
@@ -250,215 +496,4 @@ let mxClient = {
   }
 };
 
-/**
+export default mxClient;
- * Variable: mxLoadResources
- * 
- * Optional global config variable to toggle loading of the two resource files
- * in <mxGraph> and <mxEditor>. Default is true. NOTE: This is a global variable,
- * not a variable of mxClient. If this is false, you can use <mxClient.loadResources>
- * with its callback to load the default bundles asynchronously.
- *
- * (code)
- * <script type="text/javascript">
- *     let mxLoadResources = false;
- * </script>
- * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
- * (end)
- */
-if (typeof(mxLoadResources) == 'undefined') {
-  mxLoadResources = true;
-}
-
-/**
- * Variable: mxForceIncludes
- * 
- * Optional global config variable to force loading the JavaScript files in
- * development mode. Default is undefined. NOTE: This is a global variable,
- * not a variable of mxClient.
- *
- * (code)
- * <script type="text/javascript">
- *     let mxLoadResources = true;
- * </script>
- * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
- * (end)
- */
-if (typeof(mxForceIncludes) == 'undefined') {
-  mxForceIncludes = false;
-}
-
-/**
- * Variable: mxResourceExtension
- * 
- * Optional global config variable to specify the extension of resource files.
- * Default is true. NOTE: This is a global variable, not a variable of mxClient.
- *
- * (code)
- * <script type="text/javascript">
- *     let mxResourceExtension = '.txt';
- * </script>
- * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
- * (end)
- */
-if (typeof(mxResourceExtension) == 'undefined') {
-  mxResourceExtension = '.txt';
-}
-
-/**
- * Variable: mxLoadStylesheets
- * 
- * Optional global config variable to toggle loading of the CSS files when
- * the library is initialized. Default is true. NOTE: This is a global variable,
- * not a variable of mxClient.
- *
- * (code)
- * <script type="text/javascript">
- *     let mxLoadStylesheets = false;
- * </script>
- * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
- * (end)
- */
-if (typeof(mxLoadStylesheets) == 'undefined') {
-  mxLoadStylesheets = true;
-}
-
-/**
- * Variable: basePath
- *
- * Basepath for all URLs in the core without trailing slash. Default is '.'.
- * Set mxBasePath prior to loading the mxClient library as follows to override
- * this setting:
- *
- * (code)
- * <script type="text/javascript">
- *     mxBasePath = '/path/to/core/directory';
- * </script>
- * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
- * (end)
- * 
- * When using a relative path, the path is relative to the URL of the page that
- * contains the assignment. Trailing slashes are automatically removed.
- */
-if (typeof(mxBasePath) != 'undefined' && mxBasePath.length > 0) {
-  // Adds a trailing slash if required
-  if (mxBasePath.substring(mxBasePath.length - 1) === '/') {
-    mxBasePath = mxBasePath.substring(0, mxBasePath.length - 1);
-  }
-  mxClient.basePath = mxBasePath;
-} else {
-  mxClient.basePath = '.';
-}
-
-/**
- * Variable: imageBasePath
- *
- * Basepath for all images URLs in the core without trailing slash. Default is
- * <mxClient.basePath> + '/images'. Set mxImageBasePath prior to loading the
- * mxClient library as follows to override this setting:
- *
- * (code)
- * <script type="text/javascript">
- *     mxImageBasePath = '/path/to/image/directory';
- * </script>
- * <script type="text/javascript" src="/path/to/core/directory/js/mxClient.js"></script>
- * (end)
- * 
- * When using a relative path, the path is relative to the URL of the page that
- * contains the assignment. Trailing slashes are automatically removed.
- */
-if (typeof(mxImageBasePath) != 'undefined' && mxImageBasePath.length > 0) {
-  // Adds a trailing slash if required
-  if (mxImageBasePath.substring(mxImageBasePath.length - 1) === '/') {
-    mxImageBasePath = mxImageBasePath.substring(0, mxImageBasePath.length - 1);
-  }
-  mxClient.imageBasePath = mxImageBasePath;
-} else {
-  mxClient.imageBasePath = mxClient.basePath + '/images';
-}
-
-/**
- * Variable: language
- *
- * Defines the language of the client, eg. en for english, de for german etc.
- * The special value 'none' will disable all built-in internationalization and
- * resource loading. See <mxResources.getSpecialBundle> for handling identifiers
- * with and without a dash.
- * 
- * Set mxLanguage prior to loading the mxClient library as follows to override
- * this setting:
- *
- * (code)
- * <script type="text/javascript">
- *     mxLanguage = 'en';
- * </script>
- * <script type="text/javascript" src="js/mxClient.js"></script>
- * (end)
- * 
- * If internationalization is disabled, then the following variables should be
- * overridden to reflect the current language of the system. These variables are
- * cleared when i18n is disabled.
- * <mxEditor.askZoomResource>, <mxEditor.lastSavedResource>,
- * <mxEditor.currentFileResource>, <mxEditor.propertiesResource>,
- * <mxEditor.tasksResource>, <mxEditor.helpResource>, <mxEditor.outlineResource>,
- * <mxElbowEdgeHandler.doubleClickOrientationResource>, <mxUtils.errorResource>,
- * <mxUtils.closeResource>, <mxGraphSelectionModel.doneResource>,
- * <mxGraphSelectionModel.updatingSelectionResource>, <mxGraphView.doneResource>,
- * <mxGraphView.updatingDocumentResource>, <mxCellRenderer.collapseExpandResource>,
- * <mxGraph.containsValidationErrorsResource> and
- * <mxGraph.alreadyConnectedResource>.
- */
-if (typeof(mxLanguage) != 'undefined' && mxLanguage != null) {
-  mxClient.language = mxLanguage;
-}
-else {
-  mxClient.language = navigator.language;
-}
-
-/**
- * Variable: defaultLanguage
- * 
- * Defines the default language which is used in the common resource files. Any
- * resources for this language will only load the common resource file, but not
- * the language-specific resource file. Default is 'en'.
- * 
- * Set mxDefaultLanguage prior to loading the mxClient library as follows to override
- * this setting:
- *
- * (code)
- * <script type="text/javascript">
- *     mxDefaultLanguage = 'de';
- * </script>
- * <script type="text/javascript" src="js/mxClient.js"></script>
- * (end)
- */
-if (typeof(mxDefaultLanguage) != 'undefined' && mxDefaultLanguage != null) {
-  mxClient.defaultLanguage = mxDefaultLanguage;
-} else {
-  mxClient.defaultLanguage = 'en';
-}
-
-// Adds all required stylesheets and namespaces
-if (mxLoadStylesheets) {
-  mxClient.link('stylesheet', mxClient.basePath + '/css/common.css');
-}
-
-/**
- * Variable: languages
- *
- * Defines the optional array of all supported language extensions. The default
- * language does not have to be part of this list. See
- * <mxResources.isLanguageSupported>.
- *
- * (code)
- * <script type="text/javascript">
- *     mxLanguages = ['de', 'it', 'fr'];
- * </script>
- * <script type="text/javascript" src="js/mxClient.js"></script>
- * (end)
- * 
- * This is used to avoid unnecessary requests to language files, ie. if a 404
- * will be returned.
- */
-if (typeof(mxLanguages) != 'undefined' && mxLanguages != null) {
-  mxClient.languages = mxLanguages;
-}

src/mxgraph/shape/mxActor.js

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

src/mxgraph/shape/mxArrow.js

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

src/mxgraph/shape/mxArrowConnector.js

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

src/mxgraph/shape/mxCloud.js

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

src/mxgraph/shape/mxConnector.js

@@ -4,8 +4,10 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 import mxConstants from "../util/mxConstants";
+import mxPolyline from "./mxPolyline";
+import mxUtils from "../util/mxUtils";
 
-class mxConnector extends mxPolyLine {
+class mxConnector extends mxPolyline {
   /**
    * Class: mxConnector
    *

src/mxgraph/shape/mxCylinder.js

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

src/mxgraph/shape/mxDoubleEllipse.js

@@ -5,6 +5,9 @@
  */
 
 import mxRectangle from "../util/mxRectangle";
+import mxShape from "./mxShape";
+import mxConstants from "../util/mxConstants";
+import mxUtils from "../util/mxUtils";
 
 class mxDoubleEllipse extends mxShape {
   /**

src/mxgraph/shape/mxEllipse.js

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

src/mxgraph/shape/mxHexagon.js

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

src/mxgraph/shape/mxImageShape.js

@@ -6,6 +6,7 @@
 
 import mxUtils from "../util/mxUtils";
 import mxConstants from "../util/mxConstants";
+import mxRectangleShape from "./mxRectangleShape";
 
 class mxImageShape extends mxRectangleShape {
   /**

src/mxgraph/shape/mxLine.js

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

src/mxgraph/shape/mxPolyline.js

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

src/mxgraph/shape/mxRectangleShape.js

@@ -6,6 +6,7 @@
 
 import mxConstants from "../util/mxConstants";
 import mxUtils from "../util/mxUtils";
+import mxShape from "./mxShape";
 
 class mxRectangleShape extends mxShape {
   /**

src/mxgraph/shape/mxRhombus.js

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

src/mxgraph/shape/mxShape.js

@@ -3,6 +3,11 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
+import mxRectangle from "../util/mxRectangle";
+import mxUtils from "../util/mxUtils";
+import mxConstants from "../util/mxConstants";
+import mxPoint from "../util/mxPoint";
+import mxSvgCanvas2D from "../util/mxSvgCanvas2D";
 
 class mxShape {
   /**
@@ -212,7 +217,11 @@ class mxShape {
    *
    * Constructs a new shape.
    */
-  constructor(stencil) {
+  constructor(...args) {
+    this._constructor(...args);
+  };
+
+  _constructor = (stencil) => {
     this.stencil = stencil;
     this.initStyles();
   };

src/mxgraph/shape/mxStencil.js

@@ -6,6 +6,7 @@
 
 import mxRectangle from "../util/mxRectangle";
 import mxConnectionConstraint from "FIXME";
+import mxShape from "./mxShape";
 
 class mxStencil extends mxShape {
   /**
@@ -281,7 +282,7 @@ class mxStencil extends mxShape {
    * desc - XML node that contains the stencil description.
    */
   constructor(desc) {
-    // constructor not called
+    super();
     this.desc = desc;
     this.parseDescription();
     this.parseConstraints();

src/mxgraph/shape/mxSwimlane.js

@@ -3,6 +3,9 @@
  * Copyright (c) 2006-2015, Gaudenz Alder
  * Updated to ES9 syntax by David Morrissey 2021
  */
+import mxShape from "./mxShape";
+import mxRectangle from "../util/mxRectangle";
+import mxConstants from "../util/mxConstants";
 
 class mxSwimlane extends mxShape {
   /**
@@ -46,6 +49,11 @@ class mxSwimlane extends mxShape {
     this.strokewidth = (strokewidth != null) ? strokewidth : 1;
   };
 
+  _constructor = () => {
+    // explicitly do nothing in
+    // overridden constructor in mxShape
+  };
+
   /**
    * Function: isRoundable
    *

src/mxgraph/shape/mxText.js

@@ -9,6 +9,7 @@ import mxConstants from "../util/mxConstants";
 import mxUtils from "../util/mxUtils";
 import mxPoint from "../util/mxPoint";
 import mxSvgCanvas2D from "../util/mxSvgCanvas2D";
+import mxShape from "./mxShape";
 
 class mxText extends mxShape {
   /**

src/mxgraph/util/mxConstants.js

@@ -4,6 +4,8 @@
  * Updated to ES9 syntax by David Morrissey 2021
  */
 
+import mxRectangle from "./mxRectangle";
+
 let mxConstants = {
   /**
    * Class: mxConstants

src/mxgraph/util/mxResources.js

@@ -2,8 +2,10 @@
  * Copyright (c) 2006-2016, JGraph Ltd
  * Copyright (c) 2006-2016, Gaudenz Alder
  */
-let mxResources =
+import mxClient from "../mxClient";
-    {
+import mxConstants from "./mxConstants";
+
+let mxResources = {
   /**
    * Class: mxResources
    *
@@ -68,7 +70,7 @@ let mxResources =
    *
    * Specifies the extension used for language files. Default is <mxResourceExtension>.
    */
-      extension: mxResourceExtension,
+  extension: '.txt',
 
   /**
    * Variable: resourcesEncoded
@@ -194,7 +196,7 @@ let mxResources =
     lan = (lan != null) ? lan : ((mxClient.language != null) ?
         mxClient.language.toLowerCase() : mxConstants.NONE);
 
-        if (lan != mxConstants.NONE) {
+    if (lan !== mxConstants.NONE) {
       let defaultBundle = mxResources.getDefaultBundle(basename, lan);
       let specialBundle = mxResources.getSpecialBundle(basename, lan);
 
@@ -262,14 +264,14 @@ let mxResources =
       let lines = text.split('\n');
 
       for (let i = 0; i < lines.length; i++) {
-            if (lines[i].charAt(0) != '#') {
+        if (lines[i].charAt(0) !== '#') {
           let index = lines[i].indexOf('=');
 
           if (index > 0) {
             let key = lines[i].substring(0, index);
             let idx = lines[i].length;
 
-                if (lines[i].charCodeAt(idx - 1) == 13) {
+            if (lines[i].charCodeAt(idx - 1) === 13) {
               idx--;
             }
 
@@ -348,9 +350,9 @@ let mxResources =
     for (let i = 0; i < value.length; i++) {
       let c = value.charAt(i);
 
-          if (c == '{') {
+      if (c === '{') {
         index = '';
-          } else if (index != null && c == '}') {
+      } else if (index != null && c === '}') {
         index = parseInt(index) - 1;
 
         if (index >= 0 && index < params.length) {
@@ -383,7 +385,6 @@ let mxResources =
       mxResources.add(mxClient.basePath + '/resources/graph', null, callback);
     });
   }
-
 };
 
 export default mxResources;

src/mxgraph/util/mxUtils.js

@@ -6,6 +6,7 @@
 import mxEffects from "./mxEffects";
 import mxXmlRequest from "./mxXmlRequest";
 import mxClient from "../mxClient";
+import mxConstants from "./mxConstants";
 
 let mxUtils = {
   /**
@@ -30,7 +31,7 @@ let mxUtils = {
    * resource for this key does not exist then the value is used as
    * the title. Default is 'error'.
    */
-  errorResource: (mxClient.language != 'none') ? 'error' : '',
+  errorResource: (mxClient.language !== 'none') ? 'error' : '',
 
   /**
    * Variable: closeResource
@@ -39,7 +40,7 @@ let mxUtils = {
    * resource for this key does not exist then the value is used as
    * the label. Default is 'close'.
    */
-  closeResource: (mxClient.language != 'none') ? 'close' : '',
+  closeResource: (mxClient.language !== 'none') ? 'close' : '',
 
   /**
    * Variable: errorImage
@@ -163,11 +164,11 @@ let mxUtils = {
    * function to the specified scope. Inside funct, the "this" keyword
    * becomes a reference to that scope.
    */
-  /*bind: (scope, funct) => {
+  bind: (scope, funct) => {
     return () => {
       return funct.apply(scope, arguments);
     };
-  },*/
+  },
 
   /**
    * Function: eval
@@ -393,7 +394,7 @@ let mxUtils = {
     let parent = child;
 
     while (parent != null) {
-      if (parent == ancestor) {
+      if (parent === ancestor) {
         return true;
       }
 
@@ -582,11 +583,11 @@ let mxUtils = {
   removeWhitespace: (node, before) => {
     let tmp = (before) ? node.previousSibling : node.nextSibling;
 
-    while (tmp != null && tmp.nodeType == mxConstants.NODETYPE_TEXT) {
+    while (tmp != null && tmp.nodeType === mxConstants.NODETYPE_TEXT) {
       let next = (before) ? tmp.previousSibling : tmp.nextSibling;
       let text = mxUtils.getTextContent(tmp);
 
-      if (mxUtils.trim(text).length == 0) {
+      if (mxUtils.trim(text).length === 0) {
         tmp.parentNode.removeChild(tmp);
       }
 
@@ -689,7 +690,7 @@ let mxUtils = {
       indent = (indent != null) ? indent : '';
       newline = (newline != null) ? newline : '\n';
 
-      if (node.namespaceURI != null && node.namespaceURI != ns) {
+      if (node.namespaceURI != null && node.namespaceURI !== ns) {
         ns = node.namespaceURI;
 
         if (node.getAttribute('xmlns') == null) {
@@ -697,9 +698,9 @@ let mxUtils = {
         }
       }
 
-      if (node.nodeType == mxConstants.NODETYPE_DOCUMENT) {
+      if (node.nodeType === mxConstants.NODETYPE_DOCUMENT) {
         result.push(mxUtils.getPrettyXml(node.documentElement, tab, indent, newline, ns));
-      } else if (node.nodeType == mxConstants.NODETYPE_DOCUMENT_FRAGMENT) {
+      } else if (node.nodeType === mxConstants.NODETYPE_DOCUMENT_FRAGMENT) {
         let tmp = node.firstChild;
 
         if (tmp != null) {
@@ -708,19 +709,19 @@ let mxUtils = {
             tmp = tmp.nextSibling;
           }
         }
-      } else if (node.nodeType == mxConstants.NODETYPE_COMMENT) {
+      } else if (node.nodeType === mxConstants.NODETYPE_COMMENT) {
         let value = mxUtils.getTextContent(node);
 
         if (value.length > 0) {
           result.push(indent + '<!--' + value + '-->' + newline);
         }
-      } else if (node.nodeType == mxConstants.NODETYPE_TEXT) {
+      } else if (node.nodeType === mxConstants.NODETYPE_TEXT) {
         let value = mxUtils.trim(mxUtils.getTextContent(node));
 
         if (value.length > 0) {
           result.push(indent + mxUtils.htmlEntities(value, false) + newline);
         }
-      } else if (node.nodeType == mxConstants.NODETYPE_CDATA) {
+      } else if (node.nodeType === mxConstants.NODETYPE_CDATA) {
         let value = mxUtils.getTextContent(node);
 
         if (value.length > 0) {

src/mxgraph/view/mxCellOverlay.js

@@ -6,6 +6,8 @@
 
 import mxPoint from "../util/mxPoint";
 import mxRectangle from "../util/mxRectangle";
+import mxEventSource from "../util/mxEventSource";
+import mxConstants from "../util/mxConstants";
 
 class mxCellOverlay extends mxEventSource {
   /**

src/mxgraph/view/mxGraph.js

@@ -36,6 +36,7 @@ import mxMouseEvent from "../util/mxMouseEvent";
 import mxResources from "../util/mxResources";
 import mxGeometry from "../model/mxGeometry";
 import mxCell from "../model/mxCell";
+import mxGraphModel from "../model/mxGraphModel";
 
 class mxGraph extends mxEventSource {
   /**
@@ -11703,7 +11704,7 @@ class mxGraph extends mxEventSource {
  * Installs the required language resources at class
  * loading time.
  */
-if (mxLoadResources) {
+if (mxClient.mxLoadResources) {
   mxResources.add(mxClient.basePath + '/resources/graph');
 } else {
   mxClient.defaultBundles.push(mxClient.basePath + '/resources/graph');