Merge pull request #21 from jsGraph/monorepo

Restructure into a monorepo.

.gitignore

@@ -3,7 +3,7 @@ javascript/dist
 .jshintrc
 javascript/examples/**/dist
 .idea/
-
+dist
 
 # dependencies
 /node_modules

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "singleQuote": true
+}

README.md

@@ -1,22 +1,60 @@
-Looking for maintainers
+# mxGraph
+
+## Getting started
+
+### Setting up local development environment
+
+In the project root directory, execute
+
+```sh
+$ npm install
+```
+
+To watch the core package, execute
+
+```sh
+$ npm run dev
+```
+
+and select `@mxgraph/core`.
+
+To run the html(vanilla-js) version of storybook, execute
+
+```sh
+$ npm run dev
+```
+
+and select `@mxgraph/html`.
+
+Since both commands are in watch mode, so it's recommended to open two terminals and run them separately. When a file is saved from the core package, the html storybook will be automatically updated.
+
 ===
 
+# Looking for maintainers
+
 12 Nov 2020.
 
-If you are interested in becoming a maintainer of mxGraph please comment on issue #1 https://github.com/jsGraph/mxgraph/issues/1 
+If you are interested in becoming a maintainer of mxGraph please comment on issue #1 https://github.com/jsGraph/mxgraph/issues/1
 
 Initial objectives:
 
-* The first priority is to maintain a working version of mxGraph and its **npm package**
+- The first priority is to maintain a working version of mxGraph and its **npm package**
-* The ambitious stretch goal is to refactor the codebase to create a modern modular, tree shakable, version of mxGraph to reduce the whole package size.
+- The ambitious stretch goal is to refactor the codebase to create a modern modular, tree shakable, version of mxGraph to reduce the whole package size.
 
 -- Colin Claverie
 
+Note that the original default branch was `master`, and this has now been renamed `main`. If you had a checkout with the old branch name then follow these instructions to get the new branch name:
 
-Original Readme below
+```
-====
+git branch -m master main
+git fetch origin
+git branch -u origin/main main
+git remote set-head origin -a
+```
 
-*NOTE 09.11.2020* : Development on mxGraph has now stopped, this repo is effectively end of life.
+# Original Readme below
+
+_NOTE 09.11.2020_ : Development on mxGraph has now stopped, this repo is effectively end of life.
 
 Known forks:
 
@@ -24,8 +62,7 @@ https://github.com/jsGraph/mxgraph
 
 https://github.com/process-analytics/mxgraph
 
-mxGraph
+# mxGraph
-=======
 
 mxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.
 
@@ -37,20 +74,17 @@ We don't support Typescript, but there is a [project to implement this](https://
 
 The mxGraph library uses no third-party software, it requires no plugins and can be integrated in virtually any framework (it's vanilla JS).
 
-Getting Started
+# Getting Started
-===============
 
 In the root folder there is an index.html file that contains links to all resources. You can view the documentation online on the [Github pages branch](https://jgraph.github.io/mxgraph/). The key resources are the JavaScript user manual, the JavaScript examples and the JavaScript API specificiation.
 
-Support
+# Support
-=======
 
 There is a [mxgraph tag on Stack Overflow](http://stackoverflow.com/questions/tagged/mxgraph). Please ensure your questions adhere to the [SO guidelines](http://stackoverflow.com/help/on-topic), otherwise it is likely to be closed.
 
 If you are looking for active support, your better route is one of the commercial diagramming tools, like [yFiles](https://www.yworks.com/products/yfiles-for-html) or [GoJS](https://gojs.net/latest/index.html).
 
-History
+# History
-=======
 
 We created mxGraph in 2005 as a commercial project and it ran through to 2016 that way. Our USP was the support for non-SVG browsers, when that advantage expired we moved onto commercial activity around draw.io. mxGraph is pretty much feature complete, production tested in many large enterprises and stable for many years.
 

babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript'
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties'
+  ]
+};

lerna.json

@@ -0,0 +1,6 @@
+{
+  "packages": [
+    "packages/*"
+  ],
+  "version": "0.0.0"
+}

package.json

@@ -2,7 +2,7 @@
   "name": "mxgraph",
   "description": "mxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
   "version": "4.2.2",
-  "homepage": "https://github.com/jsgraph/mxgraph",
+  "homepage": "https://github.com/jgraph/mxgraph",
   "author": {
     "name": "JGraph Ltd",
     "email": "support@jgraph.com"
@@ -10,21 +10,33 @@
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jsgraph/mxgraph.git"
+    "url": "git+https://github.com/jgraph/mxgraph.git"
   },
   "bugs": {
-    "url": "https://github.com/jsgraph/mxgraph/issues"
+    "url": "https://github.com/jgraph/mxgraph/issues"
   },
   "main": "./javascript/dist/build.js",
   "scripts": {
-    "prepare": "grunt build --base ./ --gruntfile etc/build/Gruntfile.js"
+    "dev": "node ./scripts/dev",
+    "bootstrap": "lerna bootstrap",
+    "postinstall": "lerna bootstrap"
   },
   "devDependencies": {
-    "grunt": "^1.0.1",
+    "@babel/core": "^7.13.15",
-    "grunt-contrib-concat": "^1.0.1",
+    "@babel/preset-env": "^7.13.15",
-    "grunt-contrib-copy": "^1.0.0",
+    "@babel/preset-react": "^7.13.13",
-    "grunt-webpack": "^2.0.1",
+    "@babel/preset-typescript": "^7.13.0",
-    "load-grunt-tasks": "^3.5.2",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "webpack": "^2.2.1"
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.2.1",
+    "lerna": "^4.0.0",
+    "@lerna/filter-options": "4.0.0",
+    "prettier": "^2.2.1",
+    "sass-loader": "^11.0.1",
+    "style-loader": "^2.0.0",
+    "webpack": "^5.32.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-merge": "^5.7.3",
+    "typescript": "^4.2.4"
   }
 }

packages/core/package-lock.json

@@ -0,0 +1,14 @@
+{
+  "name": "@mxgraph/core",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "circular-dependency-plugin": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-5.2.2.tgz",
+      "integrity": "sha512-g38K9Cm5WRwlaH6g03B9OEz/0qRizI+2I7n+Gz+L5DxXJAPAiWQvwlYNm1V1jkdpUv95bOe/ASm2vfi/G560jQ==",
+      "dev": true
+    }
+  }
+}

packages/core/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@mxgraph/core",
+  "version": "1.0.0",
+  "description": "",
+  "module": "src/index.ts",
+  "main": "dist/mxgraph.js",
+  "types": "dist/mxgraph.d.ts",
+  "scripts": {
+    "dev": "webpack --watch --mode=development",
+    "build": "NODE_ENV=production webpack --mode=production",
+    "postinstall": "webpack --mode=development"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "circular-dependency-plugin": "^5.2.2"
+  }
+}

packages/core/src/atomic_changes/mxCellAttributeChange.js

@@ -61,4 +61,4 @@ class mxCellAttributeChange {
 }
 
 export default mxCellAttributeChange;
-import('../serialization/mxGenericChangeCodec');
+// import('../serialization/mxGenericChangeCodec');

packages/core/src/atomic_changes/mxChildChange.js

@@ -93,4 +93,4 @@ class mxChildChange {
 }
 
 export default mxChildChange;
-import('../serialization/mxChildChangeCodec');
+// import('../serialization/mxChildChangeCodec');

packages/core/src/atomic_changes/mxCollapseChange.js

@@ -35,4 +35,4 @@ class mxCollapseChange {
 }
 
 export default mxCollapseChange;
-import('../serialization/mxGenericChangeCodec');
+// import('../serialization/mxGenericChangeCodec');

packages/core/src/atomic_changes/mxGeometryChange.js

@@ -35,4 +35,4 @@ class mxGeometryChange {
 }
 
 export default mxGeometryChange;
-import('../serialization/mxGenericChangeCodec');
+// import('../serialization/mxGenericChangeCodec');

packages/core/src/atomic_changes/mxRootChange.js

@@ -27,4 +27,4 @@ class mxRootChange {
 }
 
 export default mxRootChange;
-import('../serialization/mxRootChangeCodec');
+// import('../serialization/mxRootChangeCodec');

packages/core/src/atomic_changes/mxStyleChange.js

@@ -27,4 +27,4 @@ class mxStyleChange {
 }
 
 export default mxStyleChange;
-import('../serialization/mxGenericChangeCodec');
+// import('../serialization/mxGenericChangeCodec');

packages/core/src/atomic_changes/mxTerminalChange.js

@@ -33,4 +33,4 @@ class mxTerminalChange {
 }
 
 export default mxTerminalChange;
-import('../serialization/mxTerminalChangeCodec');
+// import('../serialization/mxTerminalChangeCodec');

packages/core/src/atomic_changes/mxValueChange.js

@@ -28,4 +28,4 @@ class mxValueChange {
 }
 
 export default mxValueChange;
-import('../serialization/mxGenericChangeCodec');
+// import('../serialization/mxGenericChangeCodec');

packages/core/src/atomic_changes/mxVisibleChange.js

@@ -35,4 +35,4 @@ class mxVisibleChange {
 }
 
 export default mxVisibleChange;
-import('../serialization/mxGenericChangeCodec');
+// import('../serialization/mxGenericChangeCodec');

packages/core/src/editor/mxDefaultPopupMenu.js

@@ -4,8 +4,8 @@
  * Updated to ES9 syntax by David Morrissey 2021
  * Type definitions from the typed-mxgraph project
  */
+import { getTextContent } from '../util/mxDomUtils';
 import mxResources from '../util/mxResources';
-import mxUtils from '../util/mxUtils';
 
 /**
  * Creates popupmenus for mouse events.  This object holds an XML node which is a description of the popup menu to be created.  In {@link createMenu}, the configuration is applied to the context and the resulting menu items are added to the menu dynamically.  See {@link createMenu} for a description of the configuration format.
@@ -166,7 +166,7 @@ class mxDefaultPopupMenu {
         if (condition == null || conditions[condition]) {
           let as = item.getAttribute('as');
           as = mxResources.get(as) || as;
-          const funct = mxUtils.eval(mxUtils.getTextContent(item));
+          const funct = eval(getTextContent(item));
           const action = item.getAttribute('action');
           let icon = item.getAttribute('icon');
           const iconCls = item.getAttribute('iconCls');
@@ -289,7 +289,7 @@ class mxDefaultPopupMenu {
     const condNodes = this.config.getElementsByTagName('condition');
 
     for (let i = 0; i < condNodes.length; i += 1) {
-      const funct = mxUtils.eval(mxUtils.getTextContent(condNodes[i]));
+      const funct = eval(getTextContent(condNodes[i]));
       const name = condNodes[i].getAttribute('name');
 
       if (name != null && typeof funct === 'function') {

packages/core/src/editor/mxDefaultToolbar.js

@@ -10,6 +10,8 @@ import mxToolbar from '../util/gui/mxToolbar';
 import mxGeometry from '../util/datatypes/mxGeometry';
 import mxUtils from '../util/mxUtils';
 import mxEvent from '../util/event/mxEvent';
+import { getClientX, getClientY } from '../util/mxEventUtils';
+import { makeDraggable } from '../util/mxGestureUtils';
 
 /**
  * Toolbar for the editor. This modifies the state of the graph
@@ -330,8 +332,8 @@ class mxDefaultToolbar {
     const { graph } = this.editor;
 
     if (graph.canImportCell(vertex)) {
-      const x = mxEvent.getClientX(evt);
+      const x = getClientX(evt);
-      const y = mxEvent.getClientY(evt);
+      const y = getClientY(evt);
       const pt = mxUtils.convertPoint(graph.container, x, y);
 
       // Splits the target edge or inserts into target group
@@ -435,7 +437,7 @@ class mxDefaultToolbar {
       sprite.style.width = `${2 * img.offsetWidth}px`;
       sprite.style.height = `${2 * img.offsetHeight}px`;
 
-      mxUtils.makeDraggable(img, this.editor.graph, dropHandler, sprite);
+      makeDraggable(img, this.editor.graph, dropHandler, sprite);
       mxEvent.removeListener(sprite, 'load', loader);
     });
   }
@@ -460,4 +462,4 @@ class mxDefaultToolbar {
 }
 
 export default mxDefaultToolbar;
-import('../serialization/mxDefaultToolbarCodec');
+// import('../serialization/mxDefaultToolbarCodec');

packages/core/src/editor/mxEditor.js

@@ -15,7 +15,7 @@ import mxStackLayout from '../layout/mxStackLayout';
 import mxEventObject from '../util/event/mxEventObject';
 import mxUtils from '../util/mxUtils';
 import mxCodec from '../serialization/mxCodec';
-import mxWindow from '../util/gui/mxWindow';
+import mxWindow, { error } from '../util/gui/mxWindow';
 import mxForm from '../util/gui/mxForm';
 import mxOutline from '../view/graph/mxOutline';
 import mxCell from '../view/cell/mxCell';
@@ -32,6 +32,7 @@ import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange';
 import mxPrintPreview from '../view/graph/mxPrintPreview';
 import mxClipboard from '../util/storage/mxClipboard';
 import mxLog from '../util/gui/mxLog';
+import { isNode } from '../util/mxDomUtils';
 
 /**
  * Installs the required language resources at class
@@ -1306,7 +1307,7 @@ class mxEditor extends mxEventSource {
       const current = editor.graph.getView().scale * 100;
       const scale =
         parseFloat(
-          mxUtils.prompt(
+          prompt(
             mxResources.get(editor.askZoomResource) || editor.askZoomResource,
             current
           )
@@ -1440,12 +1441,12 @@ class mxEditor extends mxEventSource {
         // Invokes the function on the editor using the args
         action.apply(this, args);
       } catch (e) {
-        mxUtils.error(`Cannot execute ${actionname}: ${e.message}`, 280, true);
+        error(`Cannot execute ${actionname}: ${e.message}`, 280, true);
 
         throw e;
       }
     } else {
-      mxUtils.error(`Cannot find action ${actionname}`, 280, true);
+      error(`Cannot find action ${actionname}`, 280, true);
     }
   }
 
@@ -2232,7 +2233,7 @@ class mxEditor extends mxEventSource {
     const model = this.graph.getModel();
     const value = model.getValue(cell);
 
-    if (mxUtils.isNode(value)) {
+    if (isNode(value)) {
       // Creates a form for the user object inside
       // the cell
       const form = new mxForm('properties');
@@ -2818,4 +2819,4 @@ class mxEditor extends mxEventSource {
 }
 
 export default mxEditor;
-import('../serialization/mxEditorCodec');
+// import('../serialization/mxEditorCodec');

packages/core/src/handler/mxConnectionHandler.js

@@ -17,6 +17,7 @@ import mxPolyline from '../shape/edge/mxPolyline';
 import mxEventSource from '../util/event/mxEventSource';
 import mxRectangle from '../util/datatypes/mxRectangle';
 import mxLog from '../util/gui/mxLog';
+import { getClientX, getClientY, isAltDown, isConsumed, isShiftDown } from '../util/mxEventUtils';
 
 /**
  * Class: mxConnectionHandler
@@ -846,7 +847,7 @@ class mxConnectionHandler extends mxEventSource {
 
       // Updates the local icon before firing the mouse down event.
       const mouseDown = evt => {
-        if (!mxEvent.isConsumed(evt)) {
+        if (!isConsumed(evt)) {
           this.icon = icon;
           this.graph.fireMouseEvent(
             mxEvent.MOUSE_DOWN,
@@ -1063,8 +1064,8 @@ class mxConnectionHandler extends mxEventSource {
     const offset = mxUtils.getOffset(this.graph.container);
     const evt = me.getEvent();
 
-    const clientX = mxEvent.getClientX(evt);
+    const clientX = getClientX(evt);
-    const clientY = mxEvent.getClientY(evt);
+    const clientY = getClientY(evt);
 
     const doc = document.documentElement;
     const left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
@@ -1077,9 +1078,9 @@ class mxConnectionHandler extends mxEventSource {
 
     return (
       this.outlineConnect &&
-      !mxEvent.isShiftDown(me.getEvent()) &&
+      !isShiftDown(me.getEvent()) &&
       (me.isSource(this.marker.highlight.shape) ||
-        (mxEvent.isAltDown(me.getEvent()) && me.getState() != null) ||
+        (isAltDown(me.getEvent()) && me.getState() != null) ||
         this.marker.highlight.isHighlightAt(clientX, clientY) ||
         ((gridX !== clientX || gridY !== clientY) &&
           me.getState() == null &&
@@ -1256,7 +1257,7 @@ class mxConnectionHandler extends mxEventSource {
    */
   // snapToPreview(me: mxMouseEvent, point: mxPoint): void;
   snapToPreview(me, point) {
-    if (!mxEvent.isAltDown(me.getEvent()) && this.previous != null) {
+    if (!isAltDown(me.getEvent()) && this.previous != null) {
       const tol = (this.graph.gridSize * this.graph.view.scale) / 2;
       const tmp =
         this.sourceConstraint != null
@@ -1332,7 +1333,7 @@ class mxConnectionHandler extends mxEventSource {
         } else if (
           this.previous != null &&
           !this.graph.isIgnoreTerminalEvent(me.getEvent()) &&
-          mxEvent.isShiftDown(me.getEvent())
+          isShiftDown(me.getEvent())
         ) {
           if (
             Math.abs(this.previous.getCenterX() - point.x) <

packages/core/src/handler/mxConstraintHandler.js

@@ -12,6 +12,7 @@ import mxUtils from '../util/mxUtils';
 import mxRectangle from '../util/datatypes/mxRectangle';
 import mxImageShape from '../shape/node/mxImageShape';
 import mxRectangleShape from '../shape/node/mxRectangleShape';
+import { isShiftDown } from '../util/mxEventUtils';
 
 /**
  * Handles constraints on connection targets. This class is in charge of
@@ -184,7 +185,7 @@ class mxConstraintHandler {
    */
   // isKeepFocusEvent(me: mxMouseEvent): boolean;
   isKeepFocusEvent(me) {
-    return mxEvent.isShiftDown(me.getEvent());
+    return isShiftDown(me.getEvent());
   }
 
   /**

packages/core/src/handler/mxEdgeHandler.js

@@ -16,6 +16,7 @@ import mxConstraintHandler from './mxConstraintHandler';
 import mxRectangle from '../util/datatypes/mxRectangle';
 import mxClient from '../mxClient';
 import mxEdgeStyle from '../util/datatypes/style/mxEdgeStyle';
+import { getClientX, getClientY, isAltDown, isMouseEvent, isShiftDown } from '../util/mxEventUtils';
 
 /**
  * Graph event handler that reconnects edges and modifies control points and the edge
@@ -465,7 +466,7 @@ class mxEdgeHandler {
    */
   // isAddPointEvent(evt: Event): boolean;
   isAddPointEvent(evt) {
-    return mxEvent.isShiftDown(evt);
+    return isShiftDown(evt);
   }
 
   /**
@@ -476,7 +477,7 @@ class mxEdgeHandler {
    */
   // isRemovePointEvent(evt: Event): boolean;
   isRemovePointEvent(evt) {
-    return mxEvent.isShiftDown(evt);
+    return isShiftDown(evt);
   }
 
   /**
@@ -897,7 +898,7 @@ class mxEdgeHandler {
 
     if (this.state != null) {
       // Connection highlight may consume events before they reach sizer handle
-      const tol = !mxEvent.isMouseEvent(me.getEvent()) ? this.tolerance : 1;
+      const tol = !isMouseEvent(me.getEvent()) ? this.tolerance : 1;
       const hit =
         this.allowHandleBoundsCheck && tol > 0
           ? new mxRectangle(
@@ -1134,7 +1135,7 @@ class mxEdgeHandler {
    */
   // isSnapToTerminalsEvent(me: mxMouseEvent): boolean;
   isSnapToTerminalsEvent(me) {
-    return this.snapToTerminals && !mxEvent.isAltDown(me.getEvent());
+    return this.snapToTerminals && !isAltDown(me.getEvent());
   }
 
   /**
@@ -1346,7 +1347,7 @@ class mxEdgeHandler {
           if (
             result == null &&
             this.straightRemoveEnabled &&
-            (me == null || !mxEvent.isAltDown(me.getEvent()))
+            (me == null || !isAltDown(me.getEvent()))
           ) {
             const tol = this.graph.tolerance * this.graph.tolerance;
             const abs = this.state.absolutePoints.slice();
@@ -1435,8 +1436,8 @@ class mxEdgeHandler {
     const offset = mxUtils.getOffset(this.graph.container);
     const evt = me.getEvent();
 
-    const clientX = mxEvent.getClientX(evt);
+    const clientX = getClientX(evt);
-    const clientY = mxEvent.getClientY(evt);
+    const clientY = getClientY(evt);
 
     const doc = document.documentElement;
     const left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
@@ -1449,9 +1450,9 @@ class mxEdgeHandler {
 
     return (
       this.outlineConnect &&
-      !mxEvent.isShiftDown(me.getEvent()) &&
+      !isShiftDown(me.getEvent()) &&
       (me.isSource(this.marker.highlight.shape) ||
-        (mxEvent.isAltDown(me.getEvent()) && me.getState() != null) ||
+        (isAltDown(me.getEvent()) && me.getState() != null) ||
         this.marker.highlight.isHighlightAt(clientX, clientY) ||
         ((gridX !== clientX || gridY !== clientY) &&
           me.getState() == null &&
@@ -1603,7 +1604,7 @@ class mxEdgeHandler {
       // Uses the current point from the constraint handler if available
       if (
         !this.graph.isIgnoreTerminalEvent(me.getEvent()) &&
-        mxEvent.isShiftDown(me.getEvent()) &&
+        isShiftDown(me.getEvent()) &&
         this.snapPoint != null
       ) {
         if (
@@ -2132,8 +2133,8 @@ class mxEdgeHandler {
   addPoint(state, evt) {
     const pt = mxUtils.convertPoint(
       this.graph.container,
-      mxEvent.getClientX(evt),
+      getClientX(evt),
-      mxEvent.getClientY(evt)
+      getClientY(evt)
     );
     const gridEnabled = this.graph.isGridEnabledEvent(evt);
     this.convertPoint(pt, gridEnabled);

packages/core/src/handler/mxElbowEdgeHandler.js

@@ -13,6 +13,7 @@ import mxResources from '../util/mxResources';
 import mxRectangle from '../util/datatypes/mxRectangle';
 import mxUtils from '../util/mxUtils';
 import mxClient from '../mxClient';
+import { isConsumed } from '../util/mxEventUtils';
 
 /**
  * Class: mxElbowEdgeHandler
@@ -71,7 +72,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
     // Virtual
     bends.push(
       this.createVirtualBend(evt => {
-        if (!mxEvent.isConsumed(evt) && this.flipEnabled) {
+        if (!isConsumed(evt) && this.flipEnabled) {
           this.graph.flipEdge(this.state.cell, evt);
           mxEvent.consume(evt);
         }

packages/core/src/handler/mxGraphHandler.js

@@ -15,6 +15,7 @@ import mxConstants from '../util/mxConstants';
 import mxDictionary from '../util/datatypes/mxDictionary';
 import mxCellHighlight from './mxCellHighlight';
 import mxRectangle from '../util/datatypes/mxRectangle';
+import { isAltDown, isMultiTouchEvent } from '../util/mxEventUtils';
 
 /**
  * Class: mxGraphHandler
@@ -491,7 +492,7 @@ class mxGraphHandler {
 
     if (
       (!this.graph.isToggleEvent(me.getEvent()) ||
-        !mxEvent.isAltDown(me.getEvent())) &&
+        !isAltDown(me.getEvent())) &&
       state != null &&
       !this.graph.isCellSelected(state.cell)
     ) {
@@ -523,7 +524,7 @@ class mxGraphHandler {
   isDelayedSelection(cell, me) {
     if (
       !this.graph.isToggleEvent(me.getEvent()) ||
-      !mxEvent.isAltDown(me.getEvent())
+      !isAltDown(me.getEvent())
     ) {
       while (cell != null) {
         if (this.graph.selectionCellsHandler.isHandled(cell)) {
@@ -536,7 +537,7 @@ class mxGraphHandler {
 
     return (
       this.graph.isToggleEvent(me.getEvent()) &&
-      !mxEvent.isAltDown(me.getEvent())
+      !isAltDown(me.getEvent())
     );
   }
 
@@ -572,7 +573,7 @@ class mxGraphHandler {
       } else {
         if (
           !this.graph.isToggleEvent(me.getEvent()) ||
-          !mxEvent.isAltDown(me.getEvent())
+          !isAltDown(me.getEvent())
         ) {
           const model = this.graph.getModel();
           let parent = model.getParent(cell);
@@ -632,7 +633,7 @@ class mxGraphHandler {
       this.isEnabled() &&
       this.graph.isEnabled() &&
       me.getState() != null &&
-      !mxEvent.isMultiTouchEvent(me.getEvent())
+      !isMultiTouchEvent(me.getEvent())
     ) {
       const cell = this.getInitialCellForEvent(me);
       this.delayedSelection = this.isDelayedSelection(cell, me);
@@ -1052,7 +1053,7 @@ class mxGraphHandler {
       !this.suspended
     ) {
       // Stops moving if a multi touch event is received
-      if (mxEvent.isMultiTouchEvent(me.getEvent())) {
+      if (isMultiTouchEvent(me.getEvent())) {
         this.reset();
         return;
       }

packages/core/src/handler/mxKeyHandler.js

@@ -6,8 +6,9 @@
  */
 
 import mxEvent from '../util/event/mxEvent';
+import { isAncestorNode } from '../util/mxDomUtils';
+import { getSource, isAltDown, isConsumed, isShiftDown } from '../util/mxEventUtils';
 import mxUtils from '../util/mxUtils';
-import '../serialization/mxDefaultKeyHandlerCodec';
 
 /**
  * Class: mxKeyHandler
@@ -248,14 +249,14 @@ class mxKeyHandler {
    * evt - Key event whose associated function should be returned.
    */
   getFunction(evt) {
-    if (evt != null && !mxEvent.isAltDown(evt)) {
+    if (evt != null && !isAltDown(evt)) {
       if (this.isControlDown(evt)) {
-        if (mxEvent.isShiftDown(evt)) {
+        if (isShiftDown(evt)) {
           return this.controlShiftKeys[evt.keyCode];
         }
         return this.controlKeys[evt.keyCode];
       }
-      if (mxEvent.isShiftDown(evt)) {
+      if (isShiftDown(evt)) {
         return this.shiftKeys[evt.keyCode];
       }
       return this.normalKeys[evt.keyCode];
@@ -277,7 +278,7 @@ class mxKeyHandler {
    * evt - Key event that represents the keystroke.
    */
   isGraphEvent(evt) {
-    const source = mxEvent.getSource(evt);
+    const source = getSource(evt);
 
     // Accepts events from the target object or
     // in-place editing inside graph
@@ -291,7 +292,7 @@ class mxKeyHandler {
     }
 
     // Accepts events from inside the container
-    return mxUtils.isAncestorNode(this.graph.container, source);
+    return isAncestorNode(this.graph.container, source);
   }
 
   /**
@@ -341,7 +342,7 @@ class mxKeyHandler {
   isEnabledForEvent(evt) {
     return (
       this.graph.isEnabled() &&
-      !mxEvent.isConsumed(evt) &&
+      !isConsumed(evt) &&
       this.isGraphEvent(evt) &&
       this.isEnabled()
     );

packages/core/src/handler/mxPanningHandler.js

@@ -8,6 +8,7 @@ import mxEventSource from '../util/event/mxEventSource';
 import mxUtils from '../util/mxUtils';
 import mxEventObject from '../util/event/mxEventObject';
 import mxEvent from '../util/event/mxEvent';
+import { isConsumed, isControlDown, isLeftMouseButton, isMultiTouchEvent, isPopupTrigger, isShiftDown } from '../util/mxEventUtils';
 
 /**
  * Class: mxPanningHandler
@@ -69,7 +70,7 @@ class mxPanningHandler extends mxEventSource {
         if (this.isPinchEnabled()) {
           const evt = eo.getProperty('event');
 
-          if (!mxEvent.isConsumed(evt) && evt.type === 'gesturestart') {
+          if (!isConsumed(evt) && evt.type === 'gesturestart') {
             this.initialScale = this.graph.view.scale;
 
             // Forces start of panning when pinch gesture starts
@@ -279,9 +280,9 @@ class mxPanningHandler extends mxEventSource {
     return (
       (this.useLeftButtonForPanning &&
         me.getState() == null &&
-        mxEvent.isLeftMouseButton(evt)) ||
+        isLeftMouseButton(evt)) ||
-      (mxEvent.isControlDown(evt) && mxEvent.isShiftDown(evt)) ||
+      (isControlDown(evt) && isShiftDown(evt)) ||
-      (this.usePopupTrigger && mxEvent.isPopupTrigger(evt))
+      (this.usePopupTrigger && isPopupTrigger(evt))
     );
   }
 
@@ -294,7 +295,7 @@ class mxPanningHandler extends mxEventSource {
    */
   // isForcePanningEvent(me: mxMouseEvent): boolean;
   isForcePanningEvent(me) {
-    return this.ignoreCell || mxEvent.isMultiTouchEvent(me.getEvent());
+    return this.ignoreCell || isMultiTouchEvent(me.getEvent());
   }
 
   /**

packages/core/src/handler/mxPopupMenuHandler.js

@@ -7,6 +7,7 @@
 import mxPopupMenu from '../util/gui/mxPopupMenu';
 import mxEvent from '../util/event/mxEvent';
 import mxUtils from '../util/mxUtils';
+import { getMainEvent, isMultiTouchEvent } from '../util/mxEventUtils';
 
 /**
  * Class: mxPopupMenuHandler
@@ -134,13 +135,13 @@ class mxPopupMenuHandler extends mxPopupMenu {
    */
   // mouseDown(sender: any, me: mxMouseEvent): void;
   mouseDown(sender, me) {
-    if (this.isEnabled() && !mxEvent.isMultiTouchEvent(me.getEvent())) {
+    if (this.isEnabled() && !isMultiTouchEvent(me.getEvent())) {
       // Hides the popupmenu if is is being displayed
       this.hideMenu();
       this.triggerX = me.getGraphX();
       this.triggerY = me.getGraphY();
-      this.screenX = mxEvent.getMainEvent(me.getEvent()).screenX;
+      this.screenX = getMainEvent(me.getEvent()).screenX;
-      this.screenY = mxEvent.getMainEvent(me.getEvent()).screenY;
+      this.screenY = getMainEvent(me.getEvent()).screenY;
       this.popupTrigger = this.isPopupTrigger(me);
       this.inTolerance = true;
     }
@@ -156,9 +157,9 @@ class mxPopupMenuHandler extends mxPopupMenu {
     // Popup trigger may change on mouseUp so ignore it
     if (this.inTolerance && this.screenX != null && this.screenY != null) {
       if (
-        Math.abs(mxEvent.getMainEvent(me.getEvent()).screenX - this.screenX) >
+        Math.abs(getMainEvent(me.getEvent()).screenX - this.screenX) >
           this.graph.tolerance ||
-        Math.abs(mxEvent.getMainEvent(me.getEvent()).screenY - this.screenY) >
+        Math.abs(getMainEvent(me.getEvent()).screenY - this.screenY) >
           this.graph.tolerance
       ) {
         this.inTolerance = false;

packages/core/src/handler/mxRubberband.js

@@ -9,6 +9,8 @@ import mxPoint from '../util/datatypes/mxPoint';
 import mxMouseEvent from '../util/event/mxMouseEvent';
 import mxClient from '../mxClient';
 import mxRectangle from '../util/datatypes/mxRectangle';
+import { isAltDown, isMultiTouchEvent } from '../util/mxEventUtils';
+import { clearSelection } from '../util/mxDomUtils';
 
 /**
  * Event handler that selects rectangular regions.
@@ -131,7 +133,7 @@ class mxRubberband {
    * This implementation returns true if the alt key is pressed.
    */
   isForceRubberbandEvent(me) {
-    return mxEvent.isAltDown(me.getEvent());
+    return isAltDown(me.getEvent());
   }
 
   /**
@@ -147,7 +149,7 @@ class mxRubberband {
       this.isEnabled() &&
       this.graph.isEnabled() &&
       me.getState() == null &&
-      !mxEvent.isMultiTouchEvent(me.getEvent())
+      !isMultiTouchEvent(me.getEvent())
     ) {
       const offset = mxUtils.getOffset(this.graph.container);
       const origin = mxUtils.getScrollOrigin(this.graph.container);
@@ -226,7 +228,7 @@ class mxRubberband {
 
         // Clears selection while rubberbanding. This is required because
         // the event is not consumed in mouseDown.
-        mxUtils.clearSelection();
+        clearSelection();
 
         this.update(x, y);
         me.consume();

packages/core/src/handler/mxTooltipHandler.js

@@ -7,6 +7,8 @@
 import mxEvent from '../util/event/mxEvent';
 import mxUtils from '../util/mxUtils';
 import mxConstants from '../util/mxConstants';
+import { getSource, isMouseEvent } from '../util/mxEventUtils';
+import { isNode } from '../util/mxDomUtils';
 
 /**
  * Class: mxTooltipHandler
@@ -155,7 +157,7 @@ class mxTooltipHandler {
       document.body.appendChild(this.div);
 
       mxEvent.addGestureListeners(this.div, evt => {
-        const source = mxEvent.getSource(evt);
+        const source = getSource(evt);
 
         if (source.nodeName !== 'A') {
           this.hideTooltip();
@@ -247,7 +249,7 @@ class mxTooltipHandler {
    */
   // reset(me: mxMouseEvent, restart: boolean, state: mxCellState): void;
   reset(me, restart, state) {
-    if (!this.ignoreTouchEvents || mxEvent.isMouseEvent(me.getEvent())) {
+    if (!this.ignoreTouchEvents || isMouseEvent(me.getEvent())) {
       this.resetTimer();
       state = state != null ? state : this.getStateForEvent(me);
 
@@ -328,7 +330,7 @@ class mxTooltipHandler {
         mxConstants.TOOLTIP_VERTICAL_OFFSET +
         origin.y}px`;
 
-      if (!mxUtils.isNode(tip)) {
+      if (!isNode(tip)) {
         this.div.innerHTML = tip.replace(/\n/g, '<br>');
       } else {
         this.div.innerHTML = '';

packages/core/src/handler/mxVertexHandler.js

@@ -13,7 +13,7 @@ import mxEllipse from '../shape/node/mxEllipse';
 import mxPoint from '../util/datatypes/mxPoint';
 import mxUtils from '../util/mxUtils';
 import mxClient from '../mxClient';
-import mxGraphHandler from './mxGraphHandler';
+import { isMouseEvent, isShiftDown } from '../util/mxEventUtils';
 
 /**
  * Class: mxVertexHandler
@@ -353,7 +353,7 @@ class mxVertexHandler {
   // isConstrainedEvent(me: mxMouseEvent): boolean;
   isConstrainedEvent(me) {
     return (
-      mxEvent.isShiftDown(me.getEvent()) ||
+      isShiftDown(me.getEvent()) ||
       this.state.style[mxConstants.STYLE_ASPECT] === 'fixed'
     );
   }
@@ -599,7 +599,7 @@ class mxVertexHandler {
   // getHandleForEvent(me: mxMouseEvent): number;
   getHandleForEvent(me) {
     // Connection highlight may consume events before they reach sizer handle
-    const tol = !mxEvent.isMouseEvent(me.getEvent()) ? this.tolerance : 1;
+    const tol = !isMouseEvent(me.getEvent()) ? this.tolerance : 1;
     const hit =
       this.allowHandleBoundsCheck && tol > 0
         ? new mxRectangle(
@@ -873,7 +873,7 @@ class mxVertexHandler {
   checkTolerance(me) {
     if (this.inTolerance && this.startX != null && this.startY != null) {
       if (
-        mxEvent.isMouseEvent(me.getEvent()) ||
+        isMouseEvent(me.getEvent()) ||
         Math.abs(me.getGraphX() - this.startX) > this.graph.tolerance ||
         Math.abs(me.getGraphY() - this.startY) > this.graph.tolerance
       ) {

packages/core/src/index.ts

@@ -0,0 +1,324 @@
+import mxClient from './mxClient';
+
+import mxDefaultKeyHandler from './editor/mxDefaultKeyHandler';
+import mxDefaultPopupMenu from './editor/mxDefaultPopupMenu';
+import mxDefaultToolbar from './editor/mxDefaultToolbar';
+import mxEditor from './editor/mxEditor';
+
+import mxCellHighlight from './handler/mxCellHighlight';
+import mxCellMarker from './handler/mxCellMarker';
+import mxCellTracker from './handler/mxCellTracker';
+import mxConnectionHandler from './handler/mxConnectionHandler';
+import mxConstraintHandler from './handler/mxConstraintHandler';
+import mxEdgeHandler from './handler/mxEdgeHandler';
+import mxEdgeSegmentHandler from './handler/mxEdgeSegmentHandler';
+import mxElbowEdgeHandler from './handler/mxElbowEdgeHandler';
+import mxGraphHandler from './handler/mxGraphHandler';
+import mxHandle from './handler/mxHandle';
+import mxKeyHandler from './handler/mxKeyHandler';
+import mxPanningHandler from './handler/mxPanningHandler';
+import mxPopupMenuHandler from './handler/mxPopupMenuHandler';
+import mxRubberband from './handler/mxRubberband';
+import mxSelectionCellsHandler from './handler/mxSelectionCellsHandler';
+import mxTooltipHandler from './handler/mxTooltipHandler';
+import mxVertexHandler from './handler/mxVertexHandler';
+
+import mxCircleLayout from './layout/mxCircleLayout';
+import mxCompactTreeLayout from './layout/mxCompactTreeLayout';
+import mxCompositeLayout from './layout/mxCompositeLayout';
+import mxEdgeLabelLayout from './layout/mxEdgeLabelLayout';
+import mxFastOrganicLayout from './layout/mxFastOrganicLayout';
+import mxGraphLayout from './layout/mxGraphLayout';
+import mxParallelEdgeLayout from './layout/mxParallelEdgeLayout';
+import mxPartitionLayout from './layout/mxPartitionLayout';
+import mxRadialTreeLayout from './layout/mxRadialTreeLayout';
+import mxStackLayout from './layout/mxStackLayout';
+
+import mxHierarchicalEdgeStyle from './layout/hierarchical/mxHierarchicalEdgeStyle';
+import mxHierarchicalLayout from './layout/hierarchical/mxHierarchicalLayout';
+import mxSwimlaneLayout from './layout/hierarchical/mxSwimlaneLayout';
+
+import mxGraphAbstractHierarchyCell from './layout/hierarchical/model/mxGraphAbstractHierarchyCell';
+import mxGraphHierarchyEdge from './layout/hierarchical/model/mxGraphHierarchyEdge';
+import mxGraphHierarchyModel from './layout/hierarchical/model/mxGraphHierarchyModel';
+import mxGraphHierarchyNode from './layout/hierarchical/model/mxGraphHierarchyNode';
+import mxSwimlaneModel from './layout/hierarchical/model/mxSwimlaneModel';
+
+import mxCoordinateAssignment from './layout/hierarchical/stage/mxCoordinateAssignment';
+import mxHierarchicalLayoutStage from './layout/hierarchical/stage/mxHierarchicalLayoutStage';
+import mxMedianHybridCrossingReduction from './layout/hierarchical/stage/mxMedianHybridCrossingReduction';
+import mxMinimumCycleRemover from './layout/hierarchical/stage/mxMinimumCycleRemover';
+import mxSwimlaneOrdering from './layout/hierarchical/stage/mxSwimlaneOrdering';
+
+import mxCellCodec from './serialization/mxCellCodec';
+import mxChildChangeCodec from './serialization/mxChildChangeCodec';
+import mxCodec from './serialization/mxCodec';
+import mxCodecRegistry from './serialization/mxCodecRegistry';
+import mxDefaultKeyHandlerCodec from './serialization/mxDefaultKeyHandlerCodec';
+import mxDefaultPopupMenuCodec from './serialization/mxDefaultPopupMenuCodec';
+import mxDefaultToolbarCodec from './serialization/mxDefaultToolbarCodec';
+import mxEditorCodec from './serialization/mxEditorCodec';
+import mxGenericChangeCodec from './serialization/mxGenericChangeCodec';
+import mxGraphCodec from './serialization/mxGraphCodec';
+import mxGraphViewCodec from './serialization/mxGraphViewCodec';
+import mxModelCodec from './serialization/mxModelCodec';
+import mxObjectCodec from './serialization/mxObjectCodec';
+import mxRootChangeCodec from './serialization/mxRootChangeCodec';
+import mxStylesheetCodec from './serialization/mxStylesheetCodec';
+import mxTerminalChangeCodec from './serialization/mxTerminalChangeCodec';
+
+import mxActor from './shape/mxActor';
+import mxLabel from './shape/mxLabel';
+import mxShape from './shape/mxShape';
+import mxSwimlane from './shape/mxSwimlane';
+import mxText from './shape/mxText';
+import mxTriangle from './shape/mxTriangle';
+
+import mxArrow from './shape/edge/mxArrow';
+import mxArrowConnector from './shape/edge/mxArrowConnector';
+import mxConnector from './shape/edge/mxConnector';
+import mxLine from './shape/edge/mxLine';
+import mxMarker from './shape/edge/mxMarker';
+import mxPolyline from './shape/edge/mxPolyline';
+
+import mxCloud from './shape/node/mxCloud';
+import mxCylinder from './shape/node/mxCylinder';
+import mxDoubleEllipse from './shape/node/mxDoubleEllipse';
+import mxEllipse from './shape/node/mxEllipse';
+import mxHexagon from './shape/node/mxHexagon';
+import mxImageShape from './shape/node/mxImageShape';
+import mxRectangleShape from './shape/node/mxRectangleShape';
+import mxRhombus from './shape/node/mxRhombus';
+import mxStencil from './shape/node/mxStencil';
+import mxStencilRegistry from './shape/node/mxStencilRegistry';
+
+import mxConstants from './util/mxConstants';
+import mxGuide from './util/mxGuide';
+import mxResources from './util/mxResources';
+import mxUtils from './util/mxUtils';
+import * as mxCloneUtils from './util/mxCloneUtils';
+import * as mxDomUtils from './util/mxDomUtils';
+import * as mxEventUtils from './util/mxEventUtils';
+import * as mxGestureUtils from './util/mxGestureUtils';
+import * as mxStringUtils from './util/mxStringUtils';
+import * as mxXmlUtils from './util/mxXmlUtils';
+
+import mxAnimation from './util/animate/mxAnimation';
+import mxEffects from './util/animate/mxEffects';
+import mxMorphing from './util/animate/mxMorphing';
+
+import mxAbstractCanvas2D from './util/canvas/mxAbstractCanvas2D';
+import mxSvgCanvas2D from './util/canvas/mxSvgCanvas2D';
+import mxXmlCanvas2D from './util/canvas/mxXmlCanvas2D';
+
+import mxDictionary from './util/datatypes/mxDictionary';
+import mxGeometry from './util/datatypes/mxGeometry';
+import mxObjectIdentity from './util/datatypes/mxObjectIdentity';
+import mxPoint from './util/datatypes/mxPoint';
+import mxRectangle from './util/datatypes/mxRectangle';
+
+import mxEdgeStyle from './util/datatypes/style/mxEdgeStyle';
+import mxPerimeter from './util/datatypes/style/mxPerimeter';
+import mxStyleRegistry from './util/datatypes/style/mxStyleRegistry';
+import mxStylesheet from './util/datatypes/style/mxStylesheet';
+
+import mxDivResizer from './util/dom/mxDivResizer';
+import * as mxDomHelpers from './util/dom/mxDomHelpers';
+
+import mxDragSource from './util/drag_pan/mxDragSource';
+import mxPanningManager from './util/drag_pan/mxPanningManager';
+
+import mxEvent from './util/event/mxEvent';
+import mxEventObject from './util/event/mxEventObject';
+import mxEventSource from './util/event/mxEventSource';
+import mxMouseEvent from './util/event/mxMouseEvent';
+
+import mxForm from './util/gui/mxForm';
+import mxLog from './util/gui/mxLog';
+import mxPopupMenu from './util/gui/mxPopupMenu';
+import mxToolbar from './util/gui/mxToolbar';
+import mxWindow from './util/gui/mxWindow';
+
+import mxImage from './util/image/mxImage';
+import mxImageBundle from './util/image/mxImageBundle';
+import mxImageExport from './util/image/mxImageExport';
+
+import mxUrlConverter from './util/network/mxUrlConverter';
+import mxXmlRequest from './util/network/mxXmlRequest';
+
+import mxAutoSaveManager from './util/storage/mxAutoSaveManager';
+import mxClipboard from './util/storage/mxClipboard';
+
+import mxUndoableEdit from './util/undo/mxUndoableEdit';
+import mxUndoManager from './util/undo/mxUndoManager';
+
+import mxCell from './view/cell/mxCell';
+import mxCellEditor from './view/cell/mxCellEditor';
+import mxCellOverlay from './view/cell/mxCellOverlay';
+import mxCellPath from './view/cell/mxCellPath';
+import mxCellRenderer from './view/cell/mxCellRenderer';
+import mxCellState from './view/cell/mxCellState';
+import mxCellStatePreview from './view/cell/mxCellStatePreview';
+import mxTemporaryCellStates from './view/cell/mxTemporaryCellStates';
+
+import mxConnectionConstraint from './view/connection/mxConnectionConstraint';
+import mxMultiplicity from './view/connection/mxMultiplicity';
+
+import mxGraph from './view/graph/mxGraph';
+import mxGraphModel from './view/graph/mxGraphModel';
+import mxGraphSelectionModel from './view/graph/mxGraphSelectionModel';
+import mxGraphView from './view/graph/mxGraphView';
+import mxLayoutManager from './view/graph/mxLayoutManager';
+import mxOutline from './view/graph/mxOutline';
+import mxPrintPreview from './view/graph/mxPrintPreview';
+import mxSwimlaneManager from './view/graph/mxSwimlaneManager';
+
+export default {
+  mxClient,
+  mxLog,
+	mxObjectIdentity,
+	mxDictionary,
+	mxResources,
+	mxPoint,
+	mxRectangle,
+	mxEffects,
+	mxUtils,
+	mxConstants,
+	mxEventObject,
+	mxMouseEvent,
+	mxEventSource,
+	mxEvent,
+	mxXmlRequest,
+	mxClipboard,
+	mxWindow,
+	mxForm,
+	mxImage,
+	mxDivResizer,
+	mxDragSource,
+	mxToolbar,
+	mxUndoableEdit,
+	mxUndoManager,
+	mxUrlConverter,
+	mxPanningManager,
+	mxPopupMenu,
+	mxAutoSaveManager,
+	mxAnimation,
+	mxMorphing,
+	mxImageBundle,
+	mxImageExport,
+	mxAbstractCanvas2D,
+	mxXmlCanvas2D,
+	mxSvgCanvas2D,
+	mxGuide,
+	mxShape,
+	mxStencil,
+	mxStencilRegistry,
+	mxMarker,
+	mxActor,
+	mxCloud,
+	mxRectangleShape,
+	mxEllipse,
+	mxDoubleEllipse,
+	mxRhombus,
+	mxPolyline,
+	mxArrow,
+	mxArrowConnector,
+	mxText,
+	mxTriangle,
+	mxHexagon,
+	mxLine,
+	mxImageShape,
+	mxLabel,
+	mxCylinder,
+	mxConnector,
+	mxSwimlane,
+	mxGraphLayout,
+	mxStackLayout,
+	mxPartitionLayout,
+	mxCompactTreeLayout,
+	mxRadialTreeLayout,
+	mxFastOrganicLayout,
+	mxCircleLayout,
+	mxParallelEdgeLayout,
+	mxCompositeLayout,
+	mxEdgeLabelLayout,
+	mxGraphAbstractHierarchyCell,
+	mxGraphHierarchyNode,
+	mxGraphHierarchyEdge,
+	mxGraphHierarchyModel,
+	mxSwimlaneModel,
+	mxHierarchicalLayoutStage,
+	mxMedianHybridCrossingReduction,
+	mxMinimumCycleRemover,
+	mxCoordinateAssignment,
+	mxSwimlaneOrdering,
+	mxHierarchicalLayout,
+	mxSwimlaneLayout,
+	mxGraphModel,
+	mxCell,
+	mxGeometry,
+	mxCellPath,
+	mxPerimeter,
+	mxPrintPreview,
+	mxStylesheet,
+	mxCellState,
+	mxGraphSelectionModel,
+	mxCellEditor,
+	mxCellRenderer,
+	mxEdgeStyle,
+	mxStyleRegistry,
+	mxGraphView,
+	mxGraph,
+	mxCellOverlay,
+	mxOutline,
+	mxMultiplicity,
+	mxLayoutManager,
+	mxSwimlaneManager,
+	mxTemporaryCellStates,
+	mxCellStatePreview,
+	mxConnectionConstraint,
+	mxGraphHandler,
+	mxPanningHandler,
+	mxPopupMenuHandler,
+	mxCellMarker,
+	mxSelectionCellsHandler,
+	mxConnectionHandler,
+	mxConstraintHandler,
+	mxRubberband,
+	mxHandle,
+	mxVertexHandler,
+	mxEdgeHandler,
+	mxElbowEdgeHandler,
+	mxEdgeSegmentHandler,
+	mxKeyHandler,
+	mxTooltipHandler,
+	mxCellTracker,
+	mxCellHighlight,
+	mxDefaultKeyHandler,
+	mxDefaultPopupMenu,
+	mxDefaultToolbar,
+	mxEditor,
+	mxCodecRegistry,
+	mxCodec,
+	mxObjectCodec,
+	mxCellCodec,
+	mxModelCodec,
+	mxRootChangeCodec,
+	mxChildChangeCodec,
+	mxTerminalChangeCodec,
+	mxGenericChangeCodec,
+	// mxGraphCodec,
+	// mxGraphViewCodec,
+	// mxStylesheetCodec,
+	// mxDefaultKeyHandlerCodec,
+	// mxDefaultToolbarCodec,
+	// mxDefaultPopupMenuCodec,
+	// mxEditorCodec,
+	mxCloneUtils,
+	mxDomUtils,
+	mxEventUtils,
+	mxGestureUtils,
+	mxStringUtils,
+	mxXmlUtils,
+	mxDomHelpers
+};

packages/core/src/mxClient.js

@@ -2,6 +2,7 @@
  * Copyright (c) 2006-2017, JGraph Ltd
  * Copyright (c) 2006-2017, Gaudenz Alder
  */
+
 const mxClient = {
   /**
    * Class: mxClient
@@ -39,7 +40,10 @@ const mxClient = {
   mxResourceExtension: '.txt',
   setResourceExtension: value => {
     mxClient.mxResourceExtension = value;
-    mxResources.extension = value;
+    
+    // Removes dependency with mxResources.
+    // mxClient.mxResourceExtension can be used instead.
+    // mxResources.extension = value;
   },
 
   /**
@@ -477,6 +481,4 @@ const mxClient = {
   },
 };
 
-let mxResources = require('./util/mxResources');
-
 export default mxClient;

packages/core/src/serialization/mxCellCodec.js

@@ -10,6 +10,8 @@ import mxObjectCodec from './mxObjectCodec';
 import mxCodecRegistry from './mxCodecRegistry';
 import mxUtils from '../util/mxUtils';
 import mxConstants from '../util/mxConstants';
+import { removeWhitespace } from '../util/mxStringUtils';
+import { importNode } from '../util/mxDomUtils';
 
 /**
  * Class: mxCellCodec
@@ -106,7 +108,7 @@ class mxCellCodec extends mxObjectCodec {
       // by putting the result of the default encoding into a clone of the
       // user object (node type 1) and returning this cloned user object.
       const tmp = node;
-      node = mxUtils.importNode(enc.document, obj.value, true);
+      node = importNode(enc.document, obj.value, true);
       node.appendChild(tmp);
 
       // Moves the id attribute to the outermost XML node, namely the
@@ -135,8 +137,8 @@ class mxCellCodec extends mxObjectCodec {
       const tmp = node.getElementsByTagName(classname)[0];
 
       if (tmp != null && tmp.parentNode === node) {
-        mxUtils.removeWhitespace(tmp, true);
+        removeWhitespace(tmp, true);
-        mxUtils.removeWhitespace(tmp, false);
+        removeWhitespace(tmp, false);
         tmp.parentNode.removeChild(tmp);
         inner = tmp;
       } else {

packages/core/src/serialization/mxCodec.js

@@ -11,6 +11,8 @@ import mxCodecRegistry from './mxCodecRegistry';
 import mxConstants from '../util/mxConstants';
 import mxCell from '../view/cell/mxCell';
 import mxLog from '../util/gui/mxLog';
+import { getFunctionName } from '../util/mxStringUtils';
+import { importNode, isNode } from '../util/mxDomUtils';
 
 /**
  * XML codec for JavaScript object graphs. See {@link mxObjectCodec} for a
@@ -332,11 +334,11 @@ class mxCodec {
 
       if (enc != null) {
         node = enc.encode(this, obj);
-      } else if (mxUtils.isNode(obj)) {
+      } else if (isNode(obj)) {
-        node = mxUtils.importNode(this.document, obj, true);
+        node = importNode(this.document, obj, true);
       } else {
         mxLog.warn(
-          `mxCodec.encode: No codec for ${mxUtils.getFunctionName(
+          `mxCodec.encode: No codec for ${getFunctionName(
             obj.constructor
           )}`
         );

packages/core/src/serialization/mxDefaultToolbarCodec.js

@@ -8,6 +8,8 @@
 import mxObjectCodec from './mxObjectCodec';
 import mxDefaultToolbar from '../editor/mxDefaultToolbar';
 import mxCodecRegistry from './mxCodecRegistry';
+import { getChildNodes, getTextContent } from '../util/mxDomUtils';
+import { getClientX, getClientY } from '../util/mxEventUtils';
 
 /**
  * Class: mxDefaultToolbarCodec
@@ -146,14 +148,14 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
               const mode = node.getAttribute('mode');
               const template = node.getAttribute('template');
               const toggle = node.getAttribute('toggle') != '0';
-              const text = mxUtils.getTextContent(node);
+              const text = getTextContent(node);
               let elt = null;
 
               if (action != null) {
                 elt = into.addItem(as, icon, action, pressedIcon);
               } else if (mode != null) {
                 const funct = mxDefaultToolbarCodec.allowEval
-                  ? mxUtils.eval(text)
+                  ? eval(text)
                   : null;
                 elt = into.addMode(as, icon, mode, pressedIcon, funct);
               } else if (
@@ -175,7 +177,7 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
                   text.length > 0 &&
                   mxDefaultToolbarCodec.allowEval
                 ) {
-                  insertFunction = mxUtils.eval(text);
+                  insertFunction = eval(text);
                 }
 
                 elt = into.addPrototype(
@@ -187,7 +189,7 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
                   toggle
                 );
               } else {
-                const children = mxUtils.getChildNodes(node);
+                const children = getChildNodes(node);
 
                 if (children.length > 0) {
                   if (icon == null) {
@@ -241,8 +243,8 @@ class mxDefaultToolbarCodec extends mxObjectCodec {
                       into.toolbar.selectMode(img, evt => {
                         const pt = mxUtils.convertPoint(
                           editor.graph.container,
-                          mxEvent.getClientX(evt),
+                          getClientX(evt),
-                          mxEvent.getClientY(evt)
+                          getClientY(evt)
                         );
 
                         return editor.addVertex(null, funct(), pt.x, pt.y);

packages/core/src/serialization/mxEditorCodec.js

@@ -9,6 +9,7 @@ import mxEditor from '../editor/mxEditor';
 import mxWindow from '../util/gui/mxWindow';
 import mxObjectCodec from './mxObjectCodec';
 import mxCodecRegistry from './mxCodecRegistry';
+import { getChildNodes } from '../util/mxDomUtils';
 
 /**
  * Class: mxEditorCodec
@@ -208,7 +209,7 @@ class mxEditorCodec extends mxObjectCodec {
       editor.templates = [];
     }
 
-    const children = mxUtils.getChildNodes(node);
+    const children = getChildNodes(node);
     for (let j = 0; j < children.length; j++) {
       const name = children[j].getAttribute('as');
       let child = children[j].firstChild;

packages/core/src/serialization/mxGenericChangeCodec.js

@@ -14,6 +14,7 @@ import mxVisibleChange from '../atomic_changes/mxVisibleChange';
 import mxCellAttributeChange from '../atomic_changes/mxCellAttributeChange';
 import mxCodecRegistry from './mxCodecRegistry';
 import mxUtils from '../util/mxUtils';
+import { isNode } from '../util/mxDomUtils';
 
 /**
  * Class: mxGenericChangeCodec
@@ -56,7 +57,7 @@ class mxGenericChangeCodec extends mxObjectCodec {
   afterDecode(dec, node, obj) {
     // Allows forward references in sessions. This is a workaround
     // for the sequence of edits in mxGraph.moveCells and cellsAdded.
-    if (mxUtils.isNode(obj.cell)) {
+    if (isNode(obj.cell)) {
       obj.cell = dec.decodeCell(obj.cell, false);
     }
 

packages/core/src/serialization/mxObjectCodec.js

@@ -11,6 +11,7 @@ import mxGeometry from '../util/datatypes/mxGeometry';
 import mxPoint from '../util/datatypes/mxPoint';
 import mxConstants from '../util/mxConstants';
 import mxUtils from '../util/mxUtils';
+import { getTextContent } from '../util/mxDomUtils';
 
 /**
  * Generic codec for JavaScript objects that implements a mapping between
@@ -811,7 +812,7 @@ class mxObjectCodec {
         value = child.getAttribute('value');
 
         if (value == null && mxObjectCodec.allowEval) {
-          value = mxUtils.eval(mxUtils.getTextContent(child));
+          value = eval(getTextContent(child));
         }
       } else {
         value = dec.decode(child, template);

packages/core/src/serialization/mxStylesheetCodec.js

@@ -12,6 +12,7 @@ import mxConstants from '../util/mxConstants';
 import mxLog from '../util/gui/mxLog';
 import mxStyleRegistry from '../util/datatypes/style/mxStyleRegistry';
 import mxObjectCodec from './mxObjectCodec';
+import { getTextContent } from '../util/mxDomUtils';
 
 /**
  * Class: mxStylesheetCodec
@@ -163,7 +164,7 @@ class mxStylesheetCodec extends mxObjectCodec {
               const key = entry.getAttribute('as');
 
               if (entry.nodeName === 'add') {
-                const text = mxUtils.getTextContent(entry);
+                const text = getTextContent(entry);
                 let value = null;
 
                 if (
@@ -171,7 +172,7 @@ class mxStylesheetCodec extends mxObjectCodec {
                   text.length > 0 &&
                   mxStylesheetCodec.allowEval
                 ) {
-                  value = mxUtils.eval(text);
+                  value = eval(text);
                 } else {
                   value = entry.getAttribute('value');
 

packages/core/src/shape/mxActor.ts

@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  * Type definitions from the typed-mxgraph project
  */
-import mxRectangle from 'mxgraph/util/datatypes/mxRectangle';
+import mxRectangle from '../util/datatypes/mxRectangle';
 import mxShape from './mxShape';
 import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
 

packages/core/src/shape/mxShape.ts

@@ -12,7 +12,6 @@ import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
 import mxEvent from '../util/event/mxEvent';
 import mxClient from '../mxClient';
 import mxCellState from '../view/cell/mxCellState';
-import mxAbstractCanvas2D from '../util/canvas/mxAbstractCanvas2D';
 import mxStencil from './node/mxStencil';
 import mxCellOverlay from "../view/cell/mxCellOverlay";
 
@@ -1322,7 +1321,7 @@ class mxShape {
     }
 
     if (this.bounds != null) {
-      let bbox = this.createBoundingBox();
+      let bbox: mxRectangle | null = this.createBoundingBox();
 
       if (bbox != null) {
         this.augmentBoundingBox(bbox);

packages/core/src/shape/mxText.ts

@@ -13,6 +13,8 @@ import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
 import mxShape from './mxShape';
 import mxRectangle from '../util/datatypes/mxRectangle';
 import mxCellState from '../view/cell/mxCellState';
+import { htmlEntities, replaceTrailingNewlines, trim } from '../util/mxStringUtils';
+import { isNode } from '../util/mxDomUtils';
 
 /**
  * Extends mxShape to implement a text shape.
@@ -255,25 +257,25 @@ class mxText extends mxShape {
     } else {
       // Checks if text contains HTML markup
       const realHtml =
-        mxUtils.isNode(this.value) ||
+        isNode(this.value) ||
         this.dialect === mxConstants.DIALECT_STRICTHTML;
 
       // Always renders labels as HTML in VML
       const fmt = realHtml ? 'html' : '';
-      let val = this.value;
+      let val = this.value as string;
 
       if (!realHtml && fmt === 'html') {
         // @ts-ignore
-        val = mxUtils.htmlEntities(val, false);
+        val = htmlEntities(val, false);
       }
 
-      if (fmt === 'html' && !mxUtils.isNode(this.value)) {
+      if (fmt === 'html' && !isNode(this.value)) {
-        val = mxUtils.replaceTrailingNewlines(val, '<div><br></div>');
+        val = replaceTrailingNewlines(val, '<div><br></div>');
       }
 
       // Handles trailing newlines to make sure they are visible in rendering output
       val =
-        !mxUtils.isNode(this.value) && this.replaceLinefeeds && fmt === 'html'
+        !isNode(this.value) && this.replaceLinefeeds && fmt === 'html'
           ? (<string>val).replace(/\n/g, '<br/>')
           : val;
 
@@ -320,7 +322,7 @@ class mxText extends mxShape {
       this.checkBounds() &&
       this.cacheEnabled &&
       this.lastValue === this.value &&
-      (mxUtils.isNode(this.value) ||
+      (isNode(this.value) ||
         this.dialect === mxConstants.DIALECT_STRICTHTML)
     ) {
       // @ts-ignore
@@ -341,7 +343,7 @@ class mxText extends mxShape {
       super.redraw();
 
       if (
-        mxUtils.isNode(this.value) ||
+        isNode(this.value) ||
         this.dialect === mxConstants.DIALECT_STRICTHTML
       ) {
         this.lastValue = this.value;
@@ -594,7 +596,7 @@ class mxText extends mxShape {
           // Workaround for bounding box of empty string
           if (
             typeof this.value === 'string' &&
-            mxUtils.trim(this.value) == 0
+            trim(this.value)?.length == 0
           ) {
             this.boundingBox = null;
           } else if (b.width === 0 && b.height === 0) {
@@ -718,15 +720,15 @@ class mxText extends mxShape {
    * Private helper function to create SVG elements
    */
   getHtmlValue() {
-    let val = this.value;
+    let val = this.value as string;
 
     if (this.dialect !== mxConstants.DIALECT_STRICTHTML) {
       // @ts-ignore
-      val = mxUtils.htmlEntities(val, false);
+      val = htmlEntities(val, false);
     }
 
     // Handles trailing newlines to make sure they are visible in rendering output
-    val = mxUtils.replaceTrailingNewlines(val, '<div><br></div>');
+    val = replaceTrailingNewlines(val, '<div><br></div>');
     val = this.replaceLinefeeds ? val.replace(/\n/g, '<br/>') : val;
 
     return val;
@@ -808,8 +810,8 @@ class mxText extends mxShape {
       this.wrap,
       this.overflow,
       this.clipped,
-      this.background != null ? mxUtils.htmlEntities(this.background, true) : null,
+      this.background != null ? htmlEntities(this.background, true) : null,
-      this.border != null ? mxUtils.htmlEntities(this.border, true) : null,
+      this.border != null ? htmlEntities(this.border, true) : null,
       flex,
       block,
       this.scale,
@@ -850,7 +852,7 @@ class mxText extends mxShape {
 
         node.setAttribute('style', flex);
 
-        const html = mxUtils.isNode(this.value)
+        const html = isNode(this.value)
             // @ts-ignore
           ? this.value.outerHTML
           : this.getHtmlValue();
@@ -874,19 +876,19 @@ class mxText extends mxShape {
    */
   // updateInnerHtml(elt: HTMLElement): void;
   updateInnerHtml(elt: HTMLElement) {
-    if (mxUtils.isNode(this.value)) {
+    if (isNode(this.value)) {
       // @ts-ignore
       elt.innerHTML = this.value.outerHTML;
     } else {
-      let val = this.value;
+      let val = this.value as string;
 
       if (this.dialect !== mxConstants.DIALECT_STRICTHTML) {
         // LATER: Can be cached in updateValue
-        val = mxUtils.htmlEntities(<string>val, false);
+        val = htmlEntities(<string>val, false);
       }
 
       // Handles trailing newlines to make sure they are visible in rendering output
-      val = mxUtils.replaceTrailingNewlines(val, '<div>&nbsp;</div>');
+      val = replaceTrailingNewlines(val, '<div>&nbsp;</div>');
       val = this.replaceLinefeeds ? val.replace(/\n/g, '<br/>') : val;
       val = `<div style="display:inline-block;_display:inline;">${val}</div>`;
 
@@ -903,18 +905,18 @@ class mxText extends mxShape {
   updateValue() {
     const node = <SVGGElement>this.node;
 
-    if (mxUtils.isNode(this.value)) {
+    if (isNode(this.value)) {
       node.innerHTML = '';
       node.appendChild(<HTMLElement | SVGGElement>this.value);
     } else {
-      let val = this.value;
+      let val = this.value as string;
 
       if (this.dialect !== mxConstants.DIALECT_STRICTHTML) {
-        val = mxUtils.htmlEntities(<string>val, false);
+        val = htmlEntities(<string>val, false);
       }
 
       // Handles trailing newlines to make sure they are visible in rendering output
-      val = mxUtils.replaceTrailingNewlines(val, '<div><br></div>');
+      val = replaceTrailingNewlines(val, '<div><br></div>');
       val = this.replaceLinefeeds ? val.replace(/\n/g, '<br/>') : val;
       const bg =
         this.background != null && this.background !== mxConstants.NONE
@@ -937,11 +939,11 @@ class mxText extends mxShape {
         let css = '';
 
         if (bg != null) {
-          css += `background-color:${mxUtils.htmlEntities(bg, true)};`;
+          css += `background-color:${htmlEntities(bg, true)};`;
         }
 
         if (bd != null) {
-          css += `border:1px solid ${mxUtils.htmlEntities(bd, true)};`;
+          css += `border:1px solid ${htmlEntities(bd, true)};`;
         }
 
         // Wrapper DIV for background, zoom needed for inline in quirks

packages/core/src/shape/mxTriangle.ts

@@ -9,7 +9,6 @@ import mxPoint from '../util/datatypes/mxPoint';
 import mxActor from './mxActor';
 import mxUtils from '../util/mxUtils';
 import mxConstants from '../util/mxConstants';
-import mxAbstractCanvas2D from '../util/canvas/mxAbstractCanvas2D';
 import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
 
 /**

packages/core/src/shape/node/mxDoubleEllipse.ts

@@ -9,7 +9,6 @@ import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxShape from '../mxShape';
 import mxConstants from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
-import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
 import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
 
 /**

packages/core/src/shape/node/mxEllipse.ts

@@ -5,7 +5,6 @@
  * Type definitions from the typed-mxgraph project
  */
 import mxShape from '../mxShape';
-import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
 import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
 import mxRectangle from '../../util/datatypes/mxRectangle';