- Restructure into a monorepo.

- Add Storybook to packages.
- Remove circular dependencies.

.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
+}

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",
-    "grunt-contrib-concat": "^1.0.1",
-    "grunt-contrib-copy": "^1.0.0",
-    "grunt-webpack": "^2.0.1",
-    "load-grunt-tasks": "^3.5.2",
-    "webpack": "^2.2.1"
+    "@babel/core": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "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 y = mxEvent.getClientY(evt);
+      const x = getClientX(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 clientY = mxEvent.getClientY(evt);
+    const clientX = getClientX(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 clientY = mxEvent.getClientY(evt);
+    const clientX = getClientX(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),
-      mxEvent.getClientY(evt)
+      getClientX(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)) ||
-      (mxEvent.isControlDown(evt) && mxEvent.isShiftDown(evt)) ||
-      (this.usePopupTrigger && mxEvent.isPopupTrigger(evt))
+        isLeftMouseButton(evt)) ||
+      (isControlDown(evt) && isShiftDown(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.screenY = mxEvent.getMainEvent(me.getEvent()).screenY;
+      this.screenX = getMainEvent(me.getEvent()).screenX;
+      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);
-        mxUtils.removeWhitespace(tmp, false);
+        removeWhitespace(tmp, true);
+        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)) {
-        node = mxUtils.importNode(this.document, obj, true);
+      } else if (isNode(obj)) {
+        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),
-                          mxEvent.getClientY(evt)
+                          getClientX(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)) {
-        val = mxUtils.replaceTrailingNewlines(val, '<div><br></div>');
+      if (fmt === 'html' && !isNode(this.value)) {
+        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.border != null ? mxUtils.htmlEntities(this.border, true) : null,
+      this.background != null ? htmlEntities(this.background, 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';
 

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

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