Trying to run HelloWorld...

packages/core/src/index.ts

@@ -72,7 +72,7 @@ export { default as CircleLayout } from './view/layout/layout/CircleLayout';
 export { default as CompactTreeLayout } from './view/layout/layout/CompactTreeLayout';
 export { default as CompositeLayout } from './view/layout/layout/CompositeLayout';
 export { default as EdgeLabelLayout } from './view/layout/layout/EdgeLabelLayout';
-export { default as MxFastOrganicLayout } from './view/layout/layout/FastOrganicLayout';
+export { default as FastOrganicLayout } from './view/layout/layout/FastOrganicLayout';
 export { default as GraphLayout } from './view/layout/layout/GraphLayout';
 export { default as ParallelEdgeLayout } from './view/layout/layout/ParallelEdgeLayout';
 export { default as PartitionLayout } from './view/layout/layout/PartitionLayout';
@@ -113,7 +113,7 @@ export { default as mxStylesheetCodec } from './util/serialization/mxStylesheetC
 export { default as mxTerminalChangeCodec } from './util/serialization/mxTerminalChangeCodec';
 
 export { default as Actor } from './view/geometry/shape/Actor';
-export { default as Label } from './view/geometry/shape/node/LabelShape';
+export { default as LabelShape } from './view/geometry/shape/node/LabelShape';
 export { default as Shape } from './view/geometry/shape/Shape';
 export { default as SwimlaneShape } from './view/geometry/shape/node/SwimlaneShape';
 export { default as TextShape } from './view/geometry/shape/node/TextShape';

packages/core/src/util/serialization/mxGraphCodec.js

@@ -5,7 +5,7 @@
  * Type definitions from the typed-mxgraph project
  */
 
-import graph from '../../view/Graph';
+import { Graph } from '../../view/Graph';
 import mxCodecRegistry from './mxCodecRegistry';
 import mxObjectCodec from './mxObjectCodec';
 
@@ -28,7 +28,7 @@ import mxObjectCodec from './mxObjectCodec';
  */
 class mxGraphCodec extends mxObjectCodec {
   constructor() {
-    super(new graph(), [
+    super(new Graph(), [
       'graphListeners',
       'eventListeners',
       'view',

packages/core/src/view/geometry/shape/Shape.ts

@@ -1205,7 +1205,7 @@ class Shape {
    * Returns the rotation from the style.
    */
   getRotation() {
-    return this.rotation;
+    return this.rotation ?? 0;
   }
 
   /**
@@ -1230,7 +1230,7 @@ class Shape {
    */
   getShapeRotation() {
     let rot = this.getRotation();
-    console.log('rot', rot, this, this.rotation);
+
     if (this.direction === DIRECTION_NORTH) {
       rot += 270;
     } else if (this.direction === DIRECTION_WEST) {

packages/html/stories/Anchors.stories.js

@@ -1,7 +1,7 @@
 import {
   Graph,
   InternalEvent,
-  Rubberband,
+  RubberBand,
   ConnectionHandler,
   ConnectionConstraint,
   Geometry,
@@ -91,7 +91,7 @@ const Template = ({ label, ...args }) => {
   graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = 'orthogonalEdgeStyle';
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/AutoLayout.stories.js

@@ -1,6 +1,6 @@
 import {
   Graph,
-  Rubberband,
+  RubberBand,
   InternalEvent,
   CellRenderer,
   EdgeHandler,
@@ -88,7 +88,7 @@ const Template = ({ label, ...args }) => {
   graph.view.setTranslate(20, 20);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Boundary.stories.js

@@ -1,7 +1,7 @@
 import {
   Graph,
   InternalEvent,
-  Rubberband,
+  RubberBand,
   Point,
   GraphHandler,
   utils,
@@ -172,7 +172,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Clipboard.stories.js

@@ -1,14 +1,14 @@
 import {
   Graph,
   InternalEvent,
-  Rubberband,
+  RubberBand,
-  mxClipboard,
+  Clipboard,
   utils,
   EventUtils,
   mxClient,
   mxCodec,
   Model,
-  mxStringUtils,
+  StringUtils,
 } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
@@ -44,7 +44,7 @@ const Template = ({ label, ...args }) => {
   const graph = new Graph(container);
 
   // Public helper method for shared clipboard.
-  mxClipboard.cellsToString = function (cells) {
+  Clipboard.cellsToString = function (cells) {
     const codec = new mxCodec();
     const model = new Model();
     const parent = model.getRoot().getChildAt(0);
@@ -142,7 +142,7 @@ const Template = ({ label, ...args }) => {
         }
       }
 
-      textInput.value = mxClipboard.cellsToString(clones);
+      textInput.value = Clipboard.cellsToString(clones);
     }
 
     textInput.select();
@@ -228,7 +228,7 @@ const Template = ({ label, ...args }) => {
 
   // Parses and inserts XML into graph
   const pasteText = function (text) {
-    const xml = mxStringUtils.trim(text);
+    const xml = StringUtils.trim(text);
     const x = graph.container.scrollLeft / graph.view.scale - graph.view.translate.x;
     const y = graph.container.scrollTop / graph.view.scale - graph.view.translate.y;
 
@@ -294,7 +294,7 @@ const Template = ({ label, ...args }) => {
   });
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Constituent.stories.js

@@ -1,4 +1,4 @@
-import { Graph, InternalEvent, GraphHandler, Rubberband } from '@maxgraph/core';
+import { Graph, InternalEvent, GraphHandler, RubberBand } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -69,7 +69,7 @@ const Template = ({ label, ...args }) => {
   const graph = new MyCustomGraph(container);
 
   // Enables rubberband selection
-  new Rubberband(graph);
+  new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/ContextIcons.stories.js

@@ -1,7 +1,7 @@
 import {
   Graph,
   InternalEvent,
-  Rubberband,
+  RubberBand,
   EventUtils,
   utils,
   VertexHandler,
@@ -168,7 +168,7 @@ const Template = ({ label, ...args }) => {
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Control.stories.js

@@ -1,7 +1,7 @@
 import {
   Graph,
   InternalEvent,
-  Rubberband,
+  RubberBand,
   mxDomHelpers,
   ImageShape,
   Rectangle,
@@ -128,7 +128,7 @@ const Template = ({ label, ...args }) => {
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/DragSource.stories.js

@@ -1,7 +1,7 @@
 import {
   Graph,
-  mxDomUtils,
+  DomUtils,
-  Rubberband,
+  RubberBand,
   DragSource,
   utils,
   GestureUtils,
@@ -87,7 +87,7 @@ const Template = ({ label, ...args }) => {
     // graph.setResizeContainer(true);
 
     // Enables rubberband selection
-    if (args.rubberBand) new Rubberband(graph);
+    if (args.rubberBand) new RubberBand(graph);
 
     // Gets the default parent for inserting new cells. This
     // is normally the first child of the root (ie. layer 0).
@@ -124,7 +124,7 @@ const Template = ({ label, ...args }) => {
     const elt = document.elementFromPoint(x, y);
 
     for (const graph of graphs) {
-      if (mxDomUtils.isAncestorNode(graph.container, elt)) {
+      if (DomUtils.isAncestorNode(graph.container, elt)) {
         return graph;
       }
     }

packages/html/stories/Drop.stories.js

@@ -1,6 +1,6 @@
 import {
   Graph,
-  Rubberband,
+  RubberBand,
   utils,
   EventUtils,
   InternalEvent,
@@ -53,7 +53,7 @@ const Template = ({ label, ...args }) => {
     const graph = new Graph(container);
 
     // Enables rubberband selection
-    if (args.rubberBand) new Rubberband(graph);
+    if (args.rubberBand) new RubberBand(graph);
 
     InternalEvent.addListener(container, 'dragover', function (evt) {
       if (graph.isEnabled()) {

packages/html/stories/DynamicLoading.stories.js

@@ -1,13 +1,13 @@
 import {
   Graph,
-  Text,
+  TextShape,
   mxEffects,
   InternalEvent,
   Constants,
   Perimeter,
   mxCodec,
   utils,
-  mxXmlUtils,
+  XmlUtils,
 } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
@@ -31,7 +31,7 @@ const Template = ({ label, ...args }) => {
   let requestId = 0;
 
   // Speedup the animation
-  Text.prototype.enableBoundingBox = false;
+  TextShape.prototype.enableBoundingBox = false;
 
   // Creates the graph inside the given container
   const graph = new Graph(container);
@@ -85,7 +85,7 @@ const Template = ({ label, ...args }) => {
       graph.getModel().beginUpdate();
       try {
         const xml = server(cell.id);
-        const doc = mxXmlUtils.parseXml(xml);
+        const doc = XmlUtils.parseXml(xml);
         const dec = new mxCodec(doc);
         const model = dec.decode(doc.documentElement);
 

packages/html/stories/DynamicStyle.stories.js

@@ -1,4 +1,4 @@
-import { Graph, utils, Constants, Rubberband } from '@maxgraph/core';
+import { Graph, utils, Constants, RubberBand } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -29,7 +29,7 @@ const Template = ({ label, ...args }) => {
   graph.edgeLabelsMovable = false;
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Needs to set a flag to check for dynamic style changes,
   // that is, changes to styles on cells where the style was

packages/html/stories/DynamicToolbar.stories.js

@@ -1,6 +1,6 @@
 import {
   Graph,
-  Rubberband,
+  RubberBand,
   ConnectionHandler,
   ImageBox,
   mxToolbar,
@@ -74,7 +74,7 @@ const Template = ({ label, ...args }) => {
   // Stops editing on enter or escape keypress
   const keyHandler = new mxKeyHandler(graph);
 
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   addVertex('/images/rectangle.gif', 100, 40, '');
   addVertex('/images/rounded.gif', 100, 40, 'shape=rounded');

packages/html/stories/Editing.stories.js

@@ -2,7 +2,7 @@ import {
   Graph,
   mxKeyHandler,
   utils,
-  mxDomUtils,
+  DomUtils,
   CloneUtils,
   EventUtils,
 } from '@maxgraph/core';
@@ -48,14 +48,14 @@ const Template = ({ label, ...args }) => {
       td1.style.textAlign = 'center';
       td1.style.fontSize = '12px';
       td1.style.color = '#774400';
-      mxDomUtils.write(td1, cell.value.first);
+      DomUtils.write(td1, cell.value.first);
 
       const tr2 = document.createElement('tr');
       const td2 = document.createElement('td');
       td2.style.textAlign = 'center';
       td2.style.fontSize = '12px';
       td2.style.color = '#774400';
-      mxDomUtils.write(td2, cell.value.second);
+      DomUtils.write(td2, cell.value.second);
 
       tr1.appendChild(td1);
       tr2.appendChild(td2);

packages/html/stories/Events.stories.js

@@ -1,10 +1,10 @@
 import {
   Graph,
   InternalEvent,
-  Rubberband,
+  RubberBand,
   ConnectionHandler,
   LayoutManager,
-  mxParallelEdgeLayout,
+  ParallelEdgeLayout,
   ImageBox,
   mxKeyHandler,
   Constants,
@@ -62,7 +62,7 @@ const Template = ({ label, ...args }) => {
   // Optionally you can enable panning, tooltips and connections
   // using graph.setPanning(), setTooltips() & setConnectable().
   // To enable rubberband selection and basic keyboard events,
-  // use new Rubberband(graph) and new mxKeyHandler(graph).
+  // use new RubberBand(graph) and new mxKeyHandler(graph).
   const graph = new MyCustomGraph(container);
 
   // Enables tooltips, new connections and panning
@@ -71,7 +71,7 @@ const Template = ({ label, ...args }) => {
   graph.setConnectable(true);
 
   // Automatically handle parallel edges
-  const layout = new mxParallelEdgeLayout(graph);
+  const layout = new ParallelEdgeLayout(graph);
   const layoutMgr = new LayoutManager(graph);
 
   layoutMgr.getLayout = function (cell) {
@@ -82,7 +82,7 @@ const Template = ({ label, ...args }) => {
 
   // Enables rubberband (marquee) selection and a handler
   // for basic keystrokes (eg. return, escape during editing).
-  const rubberband = new Rubberband(graph);
+  const rubberband = new RubberBand(graph);
   const keyHandler = new mxKeyHandler(graph);
 
   // Changes the default style for edges "in-place" and assigns

packages/html/stories/ExtendCanvas.stories.js

@@ -1,7 +1,7 @@
 import {
   Graph,
   InternalEvent,
-  Rubberband,
+  RubberBand,
   Rectangle,
   Point,
   utils,
@@ -195,7 +195,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/FixedIcons.stories.js

@@ -1,4 +1,11 @@
-import { Graph, Rubberband, Rectangle, Constants, utils, mxLabel } from '@maxgraph/core';
+import {
+  Graph,
+  RubberBand,
+  Rectangle,
+  Constants,
+  utils,
+  LabelShape,
+} from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -23,7 +30,7 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Overrides the image bounds code to change the position
-  mxLabel.prototype.getImageBounds = function (x, y, w, h) {
+  LabelShape.prototype.getImageBounds = function (x, y, w, h) {
     const iw = utils.getValue(this.style, 'imageWidth', Constants.DEFAULT_IMAGESIZE);
     const ih = utils.getValue(this.style, 'imageHeight', Constants.DEFAULT_IMAGESIZE);
 
@@ -45,7 +52,7 @@ const Template = ({ label, ...args }) => {
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/FixedPoints.stories.js

@@ -1,6 +1,6 @@
 import {
   Graph,
-  Rubberband,
+  RubberBand,
   ConnectionHandler,
   ConnectionConstraint,
   ConstraintHandler,
@@ -142,7 +142,7 @@ const Template = ({ label, ...args }) => {
   graph.setConnectable(true);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Grid.stories.js

@@ -1,7 +1,7 @@
 import {
   Graph,
   InternalEvent,
-  Rubberband,
+  RubberBand,
   mxLog,
   GraphView,
   Point,
@@ -45,7 +45,7 @@ const Template = ({ label, ...args }) => {
   graph.setPanning(true);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   let repaintGrid;
 

packages/html/stories/Groups.stories.js

@@ -1,4 +1,4 @@
-import { Graph, Rubberband, GraphHandler, mxPopupMenuHandler } from '@maxgraph/core';
+import { Graph, RubberBand, GraphHandler, PopupMenuHandler } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -106,7 +106,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Returns last selected ancestor
-  mxPopupMenuHandler.prototype.getCellForPopupEvent = function (me) {
+  PopupMenuHandler.prototype.getCellForPopupEvent = function (me) {
     let cell = me.getCell();
     const model = this.graph.getModel();
     let parent = cell.getParent();
@@ -133,7 +133,7 @@ const Template = ({ label, ...args }) => {
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Guides.stories.js

@@ -5,7 +5,7 @@ import {
   Constants,
   EdgeHandler,
   EdgeStyle,
-  Rubberband,
+  RubberBand,
 } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
@@ -63,7 +63,7 @@ const Template = ({ label, ...args }) => {
   graph.alternateEdgeStyle = 'elbow=vertical';
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Handles.stories.js

@@ -7,7 +7,7 @@ import {
   Rectangle,
   VertexHandler,
   InternalEvent,
-  Rubberband,
+  RubberBand,
   utils,
   VertexHandle,
 } from '@maxgraph/core';
@@ -205,7 +205,7 @@ const Template = ({ label, ...args }) => {
   graph.centerZoom = false;
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/HelloPort.stories.js

@@ -1,6 +1,6 @@
 import {
   Graph,
-  Rubberband,
+  RubberBand,
   EdgeStyle,
   Point,
   Constants,
@@ -72,7 +72,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/HelloWorld.stories.js

@@ -25,11 +25,11 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
+  // if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
   const graph = new Graph(container);
 
-  // if (args.rubberBand) new Rubberband(graph);
+  // if (args.rubberBand) new RubberBand(graph);
 
   const parent = graph.getDefaultParent();
 

packages/html/stories/HierarchicalLayout.stories.js

@@ -1,11 +1,11 @@
 import {
   Graph,
-  mxDomUtils,
+  DomUtils,
-  mxFastOrganicLayout,
+  FastOrganicLayout,
   mxHierarchicalLayout,
   Perimeter,
   InternalEvent,
-  Rubberband,
+  RubberBand,
   Constants,
 } from '@maxgraph/core';
 
@@ -42,7 +42,7 @@ const Template = ({ label, ...args }) => {
   const graph = new Graph(container);
 
   // Adds rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Changes the default vertex style in-place
   let style = graph.getStylesheet().getDefaultVertexStyle();
@@ -58,7 +58,7 @@ const Template = ({ label, ...args }) => {
   // Creates a layout algorithm to be used
   // with the graph
   const layout = new mxHierarchicalLayout(graph);
-  const organic = new mxFastOrganicLayout(graph);
+  const organic = new FastOrganicLayout(graph);
   organic.forceConstant = 120;
 
   const parent = graph.getDefaultParent();
@@ -68,7 +68,7 @@ const Template = ({ label, ...args }) => {
 
   // Adds a button to execute the layout
   let button = document.createElement('button');
-  mxDomUtils.write(button, 'Hierarchical');
+  DomUtils.write(button, 'Hierarchical');
   InternalEvent.addListener(button, 'click', function (evt) {
     layout.execute(parent);
   });
@@ -76,7 +76,7 @@ const Template = ({ label, ...args }) => {
 
   // Adds a button to execute the layout
   button = document.createElement('button');
-  mxDomUtils.write(button, 'Organic');
+  DomUtils.write(button, 'Organic');
 
   InternalEvent.addListener(button, 'click', function (evt) {
     organic.execute(parent);

packages/html/stories/HoverIcons.stories.js

@@ -1,7 +1,7 @@
 import {
   Graph,
   InternalEvent,
-  Rubberband,
+  RubberBand,
   ImageBox,
   Rectangle,
   utils,
@@ -104,7 +104,7 @@ const Template = ({ label, ...args }) => {
   graph.setConnectable(true);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Defines the tolerance before removing the icons
   const ICON_TOLERANCE = 20;

packages/html/stories/HoverStyle.stories.js

@@ -1,4 +1,4 @@
-import { Graph, Constants, Rubberband, CloneUtils } from '@maxgraph/core';
+import { Graph, Constants, RubberBand, CloneUtils } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -103,7 +103,7 @@ const Template = ({ label, ...args }) => {
   });
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/JsonData.stories.js

@@ -6,9 +6,9 @@ import {
   InternalEvent,
   mxClient,
   mxCodec,
-  mxDomUtils,
+  DomUtils,
   utils,
-  popup,
+  mxWindow,
 } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
@@ -41,11 +41,11 @@ const Template = ({ label, ...args }) => {
   const codec = new mxObjectCodec(new CustomData());
   codec.encode = function (enc, obj) {
     const node = enc.document.createElement('CustomData');
-    mxDomUtils.setTextContent(node, JSON.stringify(obj));
+    DomUtils.setTextContent(node, JSON.stringify(obj));
     return node;
   };
   codec.decode = function (dec, node, into) {
-    const obj = JSON.parse(mxDomUtils.getTextContent(node));
+    const obj = JSON.parse(DomUtils.getTextContent(node));
     obj.constructor = CustomData;
 
     return obj;
@@ -85,7 +85,7 @@ const Template = ({ label, ...args }) => {
     mxDomHelpers.button('Show JSON', function () {
       const encoder = new mxCodec();
       const node = encoder.encode(graph.getModel());
-      popup(utils.getXml(node), true);
+      mxWindow.popup(utils.getXml(node), true);
     })
   );
 

packages/html/stories/Labels.stories.js

@@ -1,4 +1,4 @@
-import { Graph, Rubberband, mxKeyHandler, Constants, Rectangle } from '@maxgraph/core';
+import { Graph, RubberBand, mxKeyHandler, Constants, Rectangle } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -28,7 +28,7 @@ const Template = ({ label, ...args }) => {
   graph.htmlLabels = true;
   graph.vertexLabelsMovable = true;
 
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   new mxKeyHandler(graph);
 

packages/html/stories/Merge.stories.js

@@ -1,4 +1,4 @@
-import { Graph, Perimeter, Constants, Rubberband } from '@maxgraph/core';
+import { Graph, Perimeter, Constants, RubberBand } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -48,7 +48,7 @@ const Template = ({ label, ...args }) => {
   style.strokeWidth = 2;
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Monitor.stories.js

@@ -2,7 +2,7 @@ import {
   Graph,
   EdgeStyle,
   mxDomHelpers,
-  mxXmlUtils,
+  XmlUtils,
   Perimeter,
   utils,
   Constants,
@@ -76,7 +76,7 @@ const Template = ({ label, ...args }) => {
     '<Cell id="30" value="" edge="1" parent="2" source="27" target="EnterAccountingData"><Geometry relative="1" as="geometry"><Array as="points"><Point x="469" y="40"/></Array></Geometry></Cell>' +
     '<Cell id="33" value="" edge="1" parent="2" source="6" target="EnterAccountingData"><Geometry relative="1" as="geometry"><Array as="points"><Point x="255" y="200"/></Array></Geometry></Cell>' +
     '</root></Transactions>';
-  const doc = mxXmlUtils.parseXml(xml);
+  const doc = XmlUtils.parseXml(xml);
   const codec = new mxCodec(doc);
   codec.decode(doc.documentElement, graph.getModel());
 
@@ -101,7 +101,7 @@ const Template = ({ label, ...args }) => {
    */
   function update(graph, xml) {
     if (xml != null && xml.length > 0) {
-      const doc = mxXmlUtils.parseXml(xml);
+      const doc = XmlUtils.parseXml(xml);
 
       if (doc != null && doc.documentElement != null) {
         const model = graph.getModel();

packages/html/stories/Morph.stories.js

@@ -3,7 +3,7 @@ import {
   mxDomHelpers,
   mxMorphing,
   InternalEvent,
-  Rubberband,
+  RubberBand,
 } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
@@ -42,7 +42,7 @@ const Template = ({ label, ...args }) => {
   const graph = new Graph(container);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Orthogonal.stories.js

@@ -1,6 +1,6 @@
 import {
   Graph,
-  Rubberband,
+  RubberBand,
   ConnectionHandler,
   GraphHandler,
   Guide,
@@ -82,7 +82,7 @@ const Template = ({ label, ...args }) => {
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/PageBreaks.stories.js

@@ -1,7 +1,7 @@
 import {
   Graph,
   Rectangle,
-  Rubberband,
+  RubberBand,
   mxDomHelpers,
   InternalEvent,
 } from '@maxgraph/core';
@@ -57,7 +57,7 @@ const Template = ({ label, ...args }) => {
   graph.graphHandler.scaleGrid = true;
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Perimeter.stories.js

@@ -1,4 +1,4 @@
-import { Graph, Rubberband, GraphView, utils } from '@maxgraph/core';
+import { Graph, RubberBand, GraphView, utils } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -55,7 +55,7 @@ const Template = ({ label, ...args }) => {
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Permissions.stories.js

@@ -2,7 +2,7 @@ import {
   Graph,
   ConnectionHandler,
   ImageBox,
-  Rubberband,
+  RubberBand,
   mxKeyHandler,
   mxDomHelpers,
 } from '@maxgraph/core';
@@ -44,7 +44,7 @@ const Template = ({ label, ...args }) => {
   graph.setAllowLoops(true);
 
   // Enables rubberband selection and key handling
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   const keyHandler = new mxKeyHandler(graph);
 

packages/html/stories/PortRefs.stories.js

@@ -1,6 +1,6 @@
 import {
   Graph,
-  Rubberband,
+  RubberBand,
   Point,
   EdgeHandler,
   ConstraintHandler,
@@ -44,7 +44,7 @@ const Template = ({ label, ...args }) => {
   graph.setPortsEnabled(false);
 
   // Enables rubberband selection
-  new Rubberband(graph);
+  new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/RadialTreeLayout.stories.js

@@ -1,8 +1,8 @@
 import {
   Graph,
-  Rubberband,
+  RubberBand,
   Constants,
-  mxRadialTreeLayout,
+  RadialTreeLayout,
   Perimeter,
 } from '@maxgraph/core';
 
@@ -32,7 +32,7 @@ const Template = ({ label, ...args }) => {
   const graph = new Graph(container);
 
   // Adds rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Changes the default vertex style in-place
   let style = graph.getStylesheet().getDefaultVertexStyle();
@@ -47,7 +47,7 @@ const Template = ({ label, ...args }) => {
 
   // Creates a layout algorithm to be used
   // with the graph
-  const layout = new mxRadialTreeLayout(graph);
+  const layout = new RadialTreeLayout(graph);
 
   const parent = graph.getDefaultParent();
 

packages/html/stories/SecondLabel.stories.js

@@ -2,7 +2,7 @@ import {
   Graph,
   RectangleShape,
   mxDomHelpers,
-  Text,
+  TextShape,
   Point,
   Rectangle,
   Constants,
@@ -98,7 +98,7 @@ const Template = ({ label, ...args }) => {
       const secondLabel = graph.getSecondLabel(state.cell);
 
       if (secondLabel != null && state.shape != null && state.secondLabel == null) {
-        state.secondLabel = new Text(
+        state.secondLabel = new TextShape(
           secondLabel,
           new Rectangle(),
           Constants.ALIGN_LEFT,

packages/html/stories/Stencils.stories.js

@@ -8,10 +8,10 @@ import {
   CellHighlight,
   Constants,
   VertexHandler,
-  Rubberband,
+  RubberBand,
   Shape,
   StencilShape,
-  StencilRegistry,
+  StencilShapeRegistry,
   CellRenderer,
   utils,
 } from '@maxgraph/core';
@@ -66,7 +66,7 @@ const Template = ({ label, ...args }) => {
   // Uses the shape for resize previews
   VertexHandler.prototype.createSelectionShape = function (bounds) {
     const key = this.state.style.shape;
-    const stencil = StencilRegistry.getStencil(key);
+    const stencil = StencilShapeRegistry.getStencil(key);
     let shape = null;
 
     if (stencil != null) {
@@ -128,7 +128,10 @@ const Template = ({ label, ...args }) => {
 
   while (shape != null) {
     if (shape.nodeType === Constants.NODETYPE_ELEMENT) {
-      StencilRegistry.addStencil(shape.getAttribute('name'), new StencilShape(shape));
+      StencilShapeRegistry.addStencil(
+        shape.getAttribute('name'),
+        new StencilShape(shape)
+      );
     }
 
     shape = shape.nextSibling;
@@ -159,7 +162,7 @@ const Template = ({ label, ...args }) => {
   style.shadow = '1';
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Toolbar.stories.js

@@ -1,6 +1,6 @@
 import {
   Graph,
-  Rubberband,
+  RubberBand,
   ConnectionHandler,
   ImageBox,
   mxToolbar,
@@ -84,7 +84,7 @@ const Template = ({ label, ...args }) => {
   // Stops editing on enter or escape keypress
   const keyHandler = new mxKeyHandler(graph);
 
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   const addVertex = (icon, w, h, style) => {
     const vertex = new Cell(null, new Geometry(0, 0, w, h), style);

packages/html/stories/UserObject.stories.js

@@ -4,12 +4,12 @@ import {
   mxDomHelpers,
   mxKeyHandler,
   InternalEvent,
-  mxXmlUtils,
+  XmlUtils,
   mxCodec,
   Constants,
   utils,
   EdgeStyle,
-  mxDomUtils,
+  DomUtils,
   mxForm,
   CellAttributeChange,
 } from '@maxgraph/core';
@@ -37,7 +37,7 @@ const Template = ({ label, ...args }) => {
 
   // Note that these XML nodes will be enclosing the
   // Cell nodes for the model cells in the output
-  const doc = mxXmlUtils.createXmlDocument();
+  const doc = XmlUtils.createXmlDocument();
 
   const person1 = doc.createElement('Person');
   person1.setAttribute('firstName', 'Daffy');
@@ -72,7 +72,7 @@ const Template = ({ label, ...args }) => {
 
   // Overrides method to provide a cell label in the display
   graph.convertValueToString = function (cell) {
-    if (mxDomUtils.isNode(cell.value)) {
+    if (DomUtils.isNode(cell.value)) {
       if (cell.value.nodeName.toLowerCase() == 'person') {
         const firstName = cell.getAttribute('firstName', '');
         const lastName = cell.getAttribute('lastName', '');
@@ -94,7 +94,7 @@ const Template = ({ label, ...args }) => {
   // Overrides method to store a cell label in the model
   const { cellLabelChanged } = graph;
   graph.cellLabelChanged = function (cell, newValue, autoSize) {
-    if (mxDomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') {
+    if (DomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') {
       const pos = newValue.indexOf(' ');
 
       const firstName = pos > 0 ? newValue.substring(0, pos) : newValue;
@@ -116,7 +116,7 @@ const Template = ({ label, ...args }) => {
   // Overrides method to create the editing value
   const { getEditingValue } = graph;
   graph.getEditingValue = function (cell) {
-    if (mxDomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') {
+    if (DomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') {
       const firstName = cell.getAttribute('firstName', '');
       const lastName = cell.getAttribute('lastName', '');
 
@@ -218,13 +218,13 @@ const Template = ({ label, ...args }) => {
     const cell = graph.getSelectionCell();
 
     if (cell == null) {
-      mxDomUtils.writeln(div, 'Nothing selected.');
+      DomUtils.writeln(div, 'Nothing selected.');
     } else {
       // Writes the title
       const center = document.createElement('center');
-      mxDomUtils.writeln(center, `${cell.value.nodeName} (${cell.id})`);
+      DomUtils.writeln(center, `${cell.value.nodeName} (${cell.id})`);
       div.appendChild(center);
-      mxDomUtils.br(div);
+      DomUtils.br(div);
 
       // Creates the form from the attributes of the user object
       const form = new mxForm();
@@ -236,7 +236,7 @@ const Template = ({ label, ...args }) => {
       }
 
       div.appendChild(form.getTable());
-      mxDomUtils.br(div);
+      DomUtils.br(div);
     }
   }
 

packages/html/stories/Validation.stories.js

@@ -1,7 +1,7 @@
 import {
   Graph,
-  Rubberband,
+  RubberBand,
-  mxXmlUtils,
+  XmlUtils,
   Multiplicity,
   mxKeyHandler,
   InternalEvent,
@@ -29,7 +29,7 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  const xmlDocument = mxXmlUtils.createXmlDocument();
+  const xmlDocument = XmlUtils.createXmlDocument();
   const sourceNode = xmlDocument.createElement('Source');
   const targetNode = xmlDocument.createElement('Target');
   const subtargetNode = xmlDocument.createElement('Subtarget');
@@ -87,7 +87,7 @@ const Template = ({ label, ...args }) => {
   );
 
   // Enables rubberband selection
-  new Rubberband(graph);
+  new RubberBand(graph);
 
   // Removes cells when [DELETE] is pressed
   const keyHandler = new mxKeyHandler(graph);

packages/html/stories/Visibility.stories.js

@@ -1,4 +1,4 @@
-import { Graph, Rubberband, mxDomHelpers } from '@maxgraph/core';
+import { Graph, RubberBand, mxDomHelpers } from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -29,7 +29,7 @@ const Template = ({ label, ...args }) => {
   const graph = new Graph(container);
 
   // Enables rubberband selection
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

packages/html/stories/Window.stories.js

@@ -2,10 +2,10 @@ import {
   Graph,
   mxWindow,
   mxKeyHandler,
-  Rubberband,
+  RubberBand,
   InternalEvent,
   mxLog,
-  mxDomUtils,
+  DomUtils,
   mxClient,
 } from '@maxgraph/core';
 
@@ -57,7 +57,7 @@ const Template = ({ label, ...args }) => {
   graph.setTooltips(true);
   graph.setPanning(true);
 
-  if (args.rubberBand) new Rubberband(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   new mxKeyHandler(graph);
 
@@ -85,7 +85,7 @@ const Template = ({ label, ...args }) => {
   const lorem =
     'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ';
   let content = document.createElement('div');
-  mxDomUtils.write(content, lorem + lorem + lorem);
+  DomUtils.write(content, lorem + lorem + lorem);
 
   wnd = new mxWindow(
     'Scrollable, resizable, auto height',