From 707605cedd1144a98292947b7618c219abe934e2 Mon Sep 17 00:00:00 2001
From: mcyph <20507948+mcyph@users.noreply.github.com>
Date: Sun, 2 May 2021 16:04:34 +1000
Subject: [PATCH 1/4] removed all mxConstants.STYLE_* references, now referring
 to keys directly

---
 docs/stashed/Codec.js                         |    2 +-
 docs/stashed/GraphLayout.js                   |    8 +-
 docs/stashed/JQuery.js                        |    2 +-
 docs/stashed/Map.js                           |   14 +-
 docs/stashed/Ports.js                         |  120 +-
 docs/stashed/Schema.js                        |   62 +-
 docs/stashed/Scrollbars.js                    |   20 +-
 docs/stashed/ServerView.js                    |    2 +-
 docs/stashed/Touch.js                         |    2 +-
 docs/stashed/Wires.js                         |   10 +-
 docs/stashed/grapheditor/www/js/Actions.js    |   90 +-
 docs/stashed/grapheditor/www/js/EditorUi.js   |   14 +-
 docs/stashed/grapheditor/www/js/Format.js     |  404 +++---
 docs/stashed/grapheditor/www/js/Graph.js      |   86 +-
 docs/stashed/grapheditor/www/js/Menus.js      |   22 +-
 docs/stashed/grapheditor/www/js/Shapes.js     |  178 +--
 docs/stashed/grapheditor/www/js/Sidebar.js    |   22 +-
 docs/stashed/grapheditor/www/js/Toolbar.js    |   24 +-
 packages/core/src/editor/mxEditor.js          |   21 +-
 packages/core/src/handler/mxCellHighlight.ts  |    3 +-
 .../core/src/handler/mxConnectionHandler.js   |   21 +-
 packages/core/src/handler/mxEdgeHandler.js    |   26 +-
 .../core/src/handler/mxElbowEdgeHandler.js    |   12 +-
 packages/core/src/handler/mxGraphHandler.js   |    3 +-
 packages/core/src/handler/mxVertexHandler.js  |   36 +-
 packages/core/src/layout/mxGraphLayout.js     |    5 +-
 packages/core/src/layout/mxStackLayout.js     |    9 +-
 .../core/src/shape/edge/mxArrowConnector.js   |   15 +-
 packages/core/src/shape/edge/mxConnector.js   |   23 +-
 packages/core/src/shape/edge/mxPolyline.js    |    6 +-
 packages/core/src/shape/mxLabel.js            |   25 +-
 packages/core/src/shape/mxShape.ts            |   62 +-
 packages/core/src/shape/mxSwimlane.js         |   40 +-
 packages/core/src/shape/mxText.ts             |   57 +-
 packages/core/src/shape/mxTriangle.ts         |    4 +-
 packages/core/src/shape/node/mxCylinder.ts    |    3 +-
 .../core/src/shape/node/mxDoubleEllipse.ts    |    7 +-
 packages/core/src/shape/node/mxHexagon.ts     |    4 +-
 packages/core/src/shape/node/mxImageShape.ts  |   21 +-
 .../core/src/shape/node/mxRectangleShape.ts   |   13 +-
 packages/core/src/shape/node/mxRhombus.ts     |    4 +-
 packages/core/src/shape/node/mxStencil.js     |   18 +-
 .../src/util/datatypes/style/mxEdgeStyle.js   |   37 +-
 .../src/util/datatypes/style/mxPerimeter.ts   |    9 +-
 .../src/util/datatypes/style/mxStylesheet.js  |   46 +-
 packages/core/src/util/mxConstants.js         | 1171 +----------------
 packages/core/src/util/mxUtils.js             |   32 +-
 packages/core/src/view/cell/mxCellEditor.ts   |   31 +-
 packages/core/src/view/cell/mxCellRenderer.ts |  141 +-
 packages/core/src/view/graph/mxGraph.ts       |  279 ++--
 packages/core/src/view/graph/mxGraphView.ts   |   59 +-
 .../core/src/view/graph/mxSwimlaneManager.ts  |    3 +-
 packages/core/typed_mxgraph_defs.json         |  206 +--
 packages/html/stories/Animation.stories.js    |   11 +-
 packages/html/stories/AutoLayout.stories.js   |   11 +-
 packages/html/stories/Boundary.stories.js     |   16 +-
 .../html/stories/DynamicLoading.stories.js    |    6 +-
 packages/html/stories/DynamicStyle.stories.js |    2 +-
 packages/html/stories/Events.stories.js       |    4 +-
 packages/html/stories/FileIO.stories.js       |   14 +-
 packages/html/stories/FixedIcons.stories.js   |    4 +-
 packages/html/stories/FixedPoints.stories.js  |    2 +-
 packages/html/stories/Folding.stories.js      |   18 +-
 packages/html/stories/Guides.stories.js       |    4 +-
 packages/html/stories/HelloPort.stories.js    |    2 +-
 .../stories/HierarchicalLayout.stories.js     |   12 +-
 packages/html/stories/HoverStyle.stories.js   |    8 +-
 packages/html/stories/Images.stories.js       |   58 +-
 packages/html/stories/Indicators.stories.js   |   26 +-
 packages/html/stories/Labels.stories.js       |    2 +-
 packages/html/stories/Merge.stories.js        |   22 +-
 packages/html/stories/Monitor.stories.js      |   98 +-
 packages/html/stories/OrgChart.stories.js     |   54 +-
 packages/html/stories/Orthogonal.stories.js   |    3 +-
 packages/html/stories/PortRefs.stories.js     |    8 +-
 .../html/stories/RadialTreeLayout.stories.js  |   12 +-
 packages/html/stories/Shape.stories.js        |   10 +-
 packages/html/stories/Stencils.stories.js     |   24 +-
 packages/html/stories/Stylesheet.stories.js   |   36 +-
 packages/html/stories/SwimLanes.stories.js    |   76 +-
 packages/html/stories/Tree.stories.js         |   10 +-
 packages/html/stories/UserObject.stories.js   |   28 +-
 82 files changed, 1352 insertions(+), 2763 deletions(-)

diff --git a/docs/stashed/Codec.js b/docs/stashed/Codec.js
index f258d2413..2d93e6813 100644
--- a/docs/stashed/Codec.js
+++ b/docs/stashed/Codec.js
@@ -209,7 +209,7 @@ class Codec extends React.Component {
 
             // Changes the default style for edges "in-place"
             const style = graph.getStylesheet().getDefaultEdgeStyle();
-            style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
+            style.edge = mxEdgeStyle.ElbowConnector;
 
             // Enables panning with left mouse button
             graph.panningHandler.useLeftButtonForPanning = true;
diff --git a/docs/stashed/GraphLayout.js b/docs/stashed/GraphLayout.js
index c414ddcec..18a9e569c 100644
--- a/docs/stashed/GraphLayout.js
+++ b/docs/stashed/GraphLayout.js
@@ -61,10 +61,10 @@ export default GraphLayout;
 
         // Changes the default vertex style in-place
         let style = graph.getStylesheet().getDefaultVertexStyle();
-        style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
-        style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
-        style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-        style[mxConstants.STYLE_FONTSIZE] = '10';
+        style.shape = mxConstants.SHAPE_ELLIPSE;
+        style.perimiter = mxPerimeter.EllipsePerimeter;
+        style.gradientColor = 'white';
+        style.fontSize = '10';
 
         // Updates the size of the container to match
         // the size of the graph when it changes. If
diff --git a/docs/stashed/JQuery.js b/docs/stashed/JQuery.js
index 54a629e58..068f0a9b2 100644
--- a/docs/stashed/JQuery.js
+++ b/docs/stashed/JQuery.js
@@ -169,7 +169,7 @@ export default MYNAMEHERE;
         let graphConvertValueToString = graph.convertValueToString;
         graph.convertValueToString = function(cell)
         {
-          if (this.model.isVertex(cell))
+          if (cell.isVertex())
           {
             let node = document.createElement('canvas');
             node.setAttribute('width', cell.geometry.width);
diff --git a/docs/stashed/Map.js b/docs/stashed/Map.js
index f2984baa7..0ff4a3272 100644
--- a/docs/stashed/Map.js
+++ b/docs/stashed/Map.js
@@ -141,13 +141,13 @@ export default Map;
 
       // Sets default vertex style
       let style = {};
-      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
-      style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
-      style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5';
-      style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8';
-      style[mxConstants.STYLE_FONTCOLOR] = '#000000';
-      style[mxConstants.STYLE_OPACITY] = '50';
-      style[mxConstants.STYLE_FONTSIZE] = '16';
+      style.shape = mxConstants.SHAPE_ELLIPSE;
+      style.perimiter = mxPerimeter.EllipsePerimeter;
+      style.fillColor = '#8CCDF5';
+      style.strokeColor = '#1B78C8';
+      style.strokeColor = '#000000';
+      style['opacity'] = '50';
+      style.fontSize = '16';
       graph.getStylesheet().putDefaultVertexStyle(style);
 
       // Gets label from custom user object
diff --git a/docs/stashed/Ports.js b/docs/stashed/Ports.js
index 00d7f670f..f46b1aa50 100644
--- a/docs/stashed/Ports.js
+++ b/docs/stashed/Ports.js
@@ -99,7 +99,7 @@ export default Ports;
         // Uses the port icon while connections are previewed
         graph.connectionHandler.getConnectImage = function(state)
         {
-          return new mxImage(state.style[mxConstants.STYLE_IMAGE], 16, 16);
+          return new mxImage(state.style.image, 16, 16);
         };
 
         // Centers the port icon on the target port
@@ -516,79 +516,79 @@ export default Ports;
     function configureStylesheet(graph)
     {
       let style = {};
-      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
-      style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-      style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
-      style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
-      style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5';
-      style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5';
-      style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8';
-      style[mxConstants.STYLE_FONTCOLOR] = '#000000';
-      style[mxConstants.STYLE_ROUNDED] = true;
-      style[mxConstants.STYLE_OPACITY] = '80';
-      style[mxConstants.STYLE_FONTSIZE] = '12';
-      style[mxConstants.STYLE_FONTSTYLE] = 0;
-      style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
-      style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
+      style.shape = mxConstants.SHAPE_RECTANGLE;
+      style.perimiter = mxPerimeter.RectanglePerimeter;
+      style.align = mxConstants.ALIGN_CENTER;
+      style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+      style.gradientColor = '#41B9F5';
+      style.fillColor = '#8CCDF5';
+      style.strokeColor = '#1B78C8';
+      style.strokeColor = '#000000';
+      style.rounded = true;
+      style['opacity'] = '80';
+      style.fontSize = '12';
+      style.fontStyle = 0;
+      style.imageWidth = '48';
+      style.imageHeight = '48';
       graph.getStylesheet().putDefaultVertexStyle(style);
 
       // NOTE: Alternative vertex style for non-HTML labels should be as
       // follows. This repaces the above style for HTML labels.
       /*let style = {};
-      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;
-      style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-      style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
-      style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
-      style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;
-      style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
-      style[mxConstants.STYLE_SPACING_TOP] = '56';
-      style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';
-      style[mxConstants.STYLE_STROKECOLOR] = '#5d65df';
-      style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';
-      style[mxConstants.STYLE_FONTCOLOR] = '#1d258f';
-      style[mxConstants.STYLE_FONTFAMILY] = 'Verdana';
-      style[mxConstants.STYLE_FONTSIZE] = '12';
-      style[mxConstants.STYLE_FONTSTYLE] = '1';
-      style[mxConstants.STYLE_ROUNDED] = '1';
-      style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
-      style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
-      style[mxConstants.STYLE_OPACITY] = '80';
+      style.shape = mxConstants.SHAPE_LABEL;
+      style.perimiter = mxPerimeter.RectanglePerimeter;
+      style.verticalAlign = mxConstants.ALIGN_TOP;
+      style.align = mxConstants.ALIGN_CENTER;
+      style.imageAlign = mxConstants.ALIGN_CENTER;
+      style.imageVerticalAlign = mxConstants.ALIGN_TOP;
+      style.spacingTop = '56';
+      style.gradientColor = '#7d85df';
+      style.strokeColor = '#5d65df';
+      style.fillColor = '#adc5ff';
+      style.strokeColor = '#1d258f';
+      style.fontFamily = 'Verdana';
+      style.fontSize = '12';
+      style.fontStyle = '1';
+      style.rounded = '1';
+      style.imageWidth = '48';
+      style.imageHeight = '48';
+      style['opacity'] = '80';
       graph.getStylesheet().putDefaultVertexStyle(style);*/
 
       style = {};
-      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
-      style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-      style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
-      style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
-      style[mxConstants.STYLE_FILLCOLOR] = '#FF9103';
-      style[mxConstants.STYLE_GRADIENTCOLOR] = '#F8C48B';
-      style[mxConstants.STYLE_STROKECOLOR] = '#E86A00';
-      style[mxConstants.STYLE_FONTCOLOR] = '#000000';
-      style[mxConstants.STYLE_ROUNDED] = true;
-      style[mxConstants.STYLE_OPACITY] = '80';
-      style[mxConstants.STYLE_STARTSIZE] = '30';
-      style[mxConstants.STYLE_FONTSIZE] = '16';
-      style[mxConstants.STYLE_FONTSTYLE] = 1;
+      style.shape = mxConstants.SHAPE_SWIMLANE;
+      style.perimiter = mxPerimeter.RectanglePerimeter;
+      style.align = mxConstants.ALIGN_CENTER;
+      style.verticalAlign = mxConstants.ALIGN_TOP;
+      style.fillColor = '#FF9103';
+      style.gradientColor = '#F8C48B';
+      style.strokeColor = '#E86A00';
+      style.strokeColor = '#000000';
+      style.rounded = true;
+      style['opacity'] = '80';
+      style.startSize = '30';
+      style.fontSize = '16';
+      style.fontStyle = 1;
       graph.getStylesheet().putCellStyle('group', style);
 
       style = {};
-      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
-      style[mxConstants.STYLE_FONTCOLOR] = '#774400';
-      style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-      style[mxConstants.STYLE_PERIMETER_SPACING] = '6';
-      style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
-      style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
-      style[mxConstants.STYLE_FONTSIZE] = '10';
-      style[mxConstants.STYLE_FONTSTYLE] = 2;
-      style[mxConstants.STYLE_IMAGE_WIDTH] = '16';
-      style[mxConstants.STYLE_IMAGE_HEIGHT] = '16';
+      style.shape = mxConstants.SHAPE_IMAGE;
+      style.strokeColor = '#774400';
+      style.perimiter = mxPerimeter.RectanglePerimeter;
+      style.perimeterSpacing = '6';
+      style.align = mxConstants.ALIGN_LEFT;
+      style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+      style.fontSize = '10';
+      style.fontStyle = 2;
+      style.imageWidth = '16';
+      style.imageHeight = '16';
       graph.getStylesheet().putCellStyle('port', style);
 
       style = graph.getStylesheet().getDefaultEdgeStyle();
-      style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
-      style[mxConstants.STYLE_STROKEWIDTH] = '2';
-      style[mxConstants.STYLE_ROUNDED] = true;
-      style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
+      style.labelBackgroundColor = '#FFFFFF';
+      style.strokeWidth = '2';
+      style.rounded = true;
+      style.edge = mxEdgeStyle.EntityRelation;
     };
   </script>
 </head>
diff --git a/docs/stashed/Schema.js b/docs/stashed/Schema.js
index 0d26725c9..41d73f9c3 100644
--- a/docs/stashed/Schema.js
+++ b/docs/stashed/Schema.js
@@ -648,44 +648,44 @@ export default MYNAMEHERE;
     function configureStylesheet(graph)
     {
       let style = {};
-      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
-      style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-      style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
-      style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
-      style[mxConstants.STYLE_FONTCOLOR] = '#000000';
-      style[mxConstants.STYLE_FONTSIZE] = '11';
-      style[mxConstants.STYLE_FONTSTYLE] = 0;
-      style[mxConstants.STYLE_SPACING_LEFT] = '4';
-      style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
-      style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
+      style.shape = mxConstants.SHAPE_RECTANGLE;
+      style.perimiter = mxPerimeter.RectanglePerimeter;
+      style.align = mxConstants.ALIGN_LEFT;
+      style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+      style.strokeColor = '#000000';
+      style.fontSize = '11';
+      style.fontStyle = 0;
+      style.spacingLeft = '4';
+      style.imageWidth = '48';
+      style.imageHeight = '48';
       graph.getStylesheet().putDefaultVertexStyle(style);
 
       style = {};
-      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
-      style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-      style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
-      style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
-      style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5';
-      style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5';
-      style[mxConstants.STYLE_SWIMLANE_FILLCOLOR] = '#ffffff';
-      style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8';
-      style[mxConstants.STYLE_FONTCOLOR] = '#000000';
-      style[mxConstants.STYLE_STROKEWIDTH] = '2';
-      style[mxConstants.STYLE_STARTSIZE] = '28';
-      style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
-      style[mxConstants.STYLE_FONTSIZE] = '12';
-      style[mxConstants.STYLE_FONTSTYLE] = 1;
-      style[mxConstants.STYLE_IMAGE] = 'images/icons48/table.png';
+      style.shape = mxConstants.SHAPE_SWIMLANE;
+      style.perimiter = mxPerimeter.RectanglePerimeter;
+      style.align = mxConstants.ALIGN_CENTER;
+      style.verticalAlign = mxConstants.ALIGN_TOP;
+      style.gradientColor = '#41B9F5';
+      style.fillColor = '#8CCDF5';
+      style['swimlaneFillColor'] = '#ffffff';
+      style.strokeColor = '#1B78C8';
+      style.strokeColor = '#000000';
+      style.strokeWidth = '2';
+      style.startSize = '28';
+      style.verticalAlign = 'middle';
+      style.fontSize = '12';
+      style.fontStyle = 1;
+      style.image = 'images/icons48/table.png';
       // Looks better without opacity if shadow is enabled
-      //style[mxConstants.STYLE_OPACITY] = '80';
-      style[mxConstants.STYLE_SHADOW] = 1;
+      //style['opacity'] = '80';
+      style.shadow = 1;
       graph.getStylesheet().putCellStyle('table', style);
 
       style = graph.stylesheet.getDefaultEdgeStyle();
-      style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
-      style[mxConstants.STYLE_STROKEWIDTH] = '2';
-      style[mxConstants.STYLE_ROUNDED] = true;
-      style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
+      style.labelBackgroundColor = '#FFFFFF';
+      style.strokeWidth = '2';
+      style.rounded = true;
+      style.edge = mxEdgeStyle.EntityRelation;
     };
 
     // Function to create the entries in the popupmenu
diff --git a/docs/stashed/Scrollbars.js b/docs/stashed/Scrollbars.js
index b7fc75ead..6dad0a4a8 100644
--- a/docs/stashed/Scrollbars.js
+++ b/docs/stashed/Scrollbars.js
@@ -168,23 +168,23 @@ export default Scrollbars;
         let graph = new mxGraph(container);
 
         // Uses the entity perimeter (below) as default
-        graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
-        graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_PERIMETER] =
+        graph.stylesheet.getDefaultVertexStyle().verticalAlign = mxConstants.ALIGN_TOP;
+        graph.stylesheet.getDefaultVertexStyle().perimiter =
           mxPerimeter.EntityPerimeter;
-        graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_SHADOW] = true;
-        graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_FILLCOLOR] = '#DDEAFF';
-        graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_GRADIENTCOLOR] = '#A9C4EB';
-        delete graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_STROKECOLOR];
+        graph.stylesheet.getDefaultVertexStyle().shadow = true;
+        graph.stylesheet.getDefaultVertexStyle().fillColor = '#DDEAFF';
+        graph.stylesheet.getDefaultVertexStyle().gradientColor = '#A9C4EB';
+        delete graph.stylesheet.getDefaultVertexStyle().strokeColor;
 
         // Used for HTML labels that use up the complete vertex space (see
         // graph.cellRenderer.redrawLabel below for syncing the size)
-        graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_OVERFLOW] = 'fill';
+        graph.stylesheet.getDefaultVertexStyle().overflow = 'fill';
 
         // Uses the entity edge style as default
-        graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_EDGE] =
+        graph.stylesheet.getDefaultEdgeStyle().edge =
           mxEdgeStyle.EntityRelation;
-        graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_STROKECOLOR] = 'black';
-        graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_FONTCOLOR] = 'black';
+        graph.stylesheet.getDefaultEdgeStyle().strokeColor = 'black';
+        graph.stylesheet.getDefaultEdgeStyle().strokeColor = 'black';
 
         // Allows new connections to be made but do not allow existing
         // connections to be changed for the sake of simplicity of this
diff --git a/docs/stashed/ServerView.js b/docs/stashed/ServerView.js
index 736e4f819..4aff42ce7 100644
--- a/docs/stashed/ServerView.js
+++ b/docs/stashed/ServerView.js
@@ -52,7 +52,7 @@ export default MYNAMEHERE;
 
       if (state != null)
       {
-        let color = mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, 'white');
+        let color = mxUtils.getValue(state.style, 'fillColor', 'white');
         this.textarea.style.background = color;
       }
     };
diff --git a/docs/stashed/Touch.js b/docs/stashed/Touch.js
index 478cc86f4..c89c71c3b 100644
--- a/docs/stashed/Touch.js
+++ b/docs/stashed/Touch.js
@@ -437,7 +437,7 @@ export default Touch;
             pt.y = s.y + s.height / 2;
           }
 
-          let alpha = mxUtils.toRadians(mxUtils.getValue(s.style, mxConstants.STYLE_ROTATION, 0));
+          let alpha = mxUtils.toRadians(mxUtils.getValue(s.style, 'rotation', 0));
 
           if (alpha != 0)
           {
diff --git a/docs/stashed/Wires.js b/docs/stashed/Wires.js
index 1d4c318a9..9690e5e4e 100644
--- a/docs/stashed/Wires.js
+++ b/docs/stashed/Wires.js
@@ -134,7 +134,7 @@ export default MYNAMEHERE;
          let geo = (terminal != null) ? terminal.cell.getGeometry() : null;
 
          if ((geo != null ? !geo.relative : false) &&
-           this.getModel().isVertex(terminal.cell) &&
+           terminal.cell.isVertex() &&
            this.getModel().getChildCount(terminal.cell) == 0)
          {
           return [new mxConnectionConstraint(new mxPoint(0, 0.5), false),
@@ -182,7 +182,7 @@ export default MYNAMEHERE;
 
           let parent = this.getModel().getParent(cell);
 
-          if (this.getModel().isVertex(parent))
+          if (parent.isVertex())
           {
             tip += this.getTooltipForCell(parent) + '.';
           }
@@ -581,8 +581,8 @@ export default MYNAMEHERE;
 
       if (this.sourceConstraint != null && this.previous != null)
       {
-        edge.style = mxConstants.STYLE_EXIT_X+'='+this.sourceConstraint.point.x+';'+
-          mxConstants.STYLE_EXIT_Y+'='+this.sourceConstraint.point.y+';';
+        edge.style = 'exitX'+'='+this.sourceConstraint.point.x+';'+
+          'exitY'+'='+this.sourceConstraint.point.y+';';
       }
       else if (this.graph.model.isEdge(me.getCell()))
       {
@@ -845,7 +845,7 @@ export default MYNAMEHERE;
       horizontal = source.style['portConstraint'] != 'vertical';
 
       // Checks the direction of the shape and rotates
-      let direction = source.style[mxConstants.STYLE_DIRECTION];
+      let direction = source.style.direction;
 
       if (direction == 'north' || direction == 'south')
       {
diff --git a/docs/stashed/grapheditor/www/js/Actions.js b/docs/stashed/grapheditor/www/js/Actions.js
index e9190dc6d..71ada98b1 100644
--- a/docs/stashed/grapheditor/www/js/Actions.js
+++ b/docs/stashed/grapheditor/www/js/Actions.js
@@ -283,11 +283,11 @@ Actions.prototype.init = function()
 			try
 			{
 				let defaultValue = graph.isCellMovable(graph.getSelectionCell()) ? 1 : 0;
-				graph.toggleCellStyles(mxConstants.STYLE_MOVABLE, defaultValue);
-				graph.toggleCellStyles(mxConstants.STYLE_RESIZABLE, defaultValue);
-				graph.toggleCellStyles(mxConstants.STYLE_ROTATABLE, defaultValue);
-				graph.toggleCellStyles(mxConstants.STYLE_DELETABLE, defaultValue);
-				graph.toggleCellStyles(mxConstants.STYLE_EDITABLE, defaultValue);
+				graph.toggleCellStyles('movable', defaultValue);
+				graph.toggleCellStyles('resizable', defaultValue);
+				graph.toggleCellStyles('rotatable', defaultValue);
+				graph.toggleCellStyles('deletable', defaultValue);
+				graph.toggleCellStyles('editable', defaultValue);
 				graph.toggleCellStyles('connectable', defaultValue);
 			}
 			finally
@@ -696,12 +696,12 @@ Actions.prototype.init = function()
     	
 		graph.stopEditing();
     	
-    	if (state != null && state.style[mxConstants.STYLE_WHITE_SPACE] == 'wrap')
+    	if (state != null && state.style.whiteSpace == 'wrap')
     	{
     		value = null;
     	}
 
-       	graph.setCellStyles(mxConstants.STYLE_WHITE_SPACE, value);
+       	graph.setCellStyles('whiteSpace', value);
 	});
 	this.addAction('rotation', function()
 	{
@@ -710,14 +710,14 @@ Actions.prototype.init = function()
     	
     	if (state != null)
     	{
-    		value = state.style[mxConstants.STYLE_ROTATION] || value;
+    		value = state.style.rotation || value;
     	}
 
 		let dlg = new FilenameDialog(ui, value, mxResources.get('apply'), function(newValue)
 		{
 			if (newValue != null && newValue.length > 0)
 			{
-				graph.setCellStyles(mxConstants.STYLE_ROTATION, newValue);
+				graph.setCellStyles('rotation', newValue);
 			}
 		}, mxResources.get('enterValue') + ' (' + mxResources.get('rotation') + ' 0-360)');
 		
@@ -1004,7 +1004,7 @@ Actions.prototype.init = function()
 				try
 				{
 					let cells = graph.getSelectionCells();
-					graph.toggleCellStyleFlags(mxConstants.STYLE_FONTSTYLE, style, cells);
+					graph.toggleCellStyleFlags('fontStyle', style, cells);
 					
 					// Removes bold and italic tags and CSS styles inside labels
 					if ((style & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD)
@@ -1065,24 +1065,24 @@ Actions.prototype.init = function()
 	toggleFontStyle('underline', mxConstants.FONT_UNDERLINE, function() { document.execCommand('underline', false, null); }, Editor.ctrlKey + '+U');
 	
 	// Color actions
-	this.addAction('fontColor...', function() { ui.menus.pickColor(mxConstants.STYLE_FONTCOLOR, 'forecolor', '000000'); });
-	this.addAction('strokeColor...', function() { ui.menus.pickColor(mxConstants.STYLE_STROKECOLOR); });
-	this.addAction('fillColor...', function() { ui.menus.pickColor(mxConstants.STYLE_FILLCOLOR); });
-	this.addAction('gradientColor...', function() { ui.menus.pickColor(mxConstants.STYLE_GRADIENTCOLOR); });
-	this.addAction('backgroundColor...', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, 'backcolor'); });
-	this.addAction('borderColor...', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BORDERCOLOR); });
+	this.addAction('fontColor...', function() { ui.menus.pickColor('fontColor', 'forecolor', '000000'); });
+	this.addAction('strokeColor...', function() { ui.menus.pickColor('strokeColor'); });
+	this.addAction('fillColor...', function() { ui.menus.pickColor('fillColor'); });
+	this.addAction('gradientColor...', function() { ui.menus.pickColor('gradientColor'); });
+	this.addAction('backgroundColor...', function() { ui.menus.pickColor('backgroundColor', 'backcolor'); });
+	this.addAction('borderColor...', function() { ui.menus.pickColor('labelBorderColor'); });
 	
 	// Format actions
-	this.addAction('vertical', function() { ui.menus.toggleStyle(mxConstants.STYLE_HORIZONTAL, true); });
-	this.addAction('shadow', function() { ui.menus.toggleStyle(mxConstants.STYLE_SHADOW); });
+	this.addAction('vertical', function() { ui.menus.toggleStyle('horizontal', true); });
+	this.addAction('shadow', function() { ui.menus.toggleStyle('shadow'); });
 	this.addAction('solid', function()
 	{
 		graph.getModel().beginUpdate();
 		try
 		{
-			graph.setCellStyles(mxConstants.STYLE_DASHED, null);
-			graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, null);
-			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
+			graph.setCellStyles('dashed', null);
+			graph.setCellStyles('dashPattern', null);
+			ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'],
 				'values', [null, null], 'cells', graph.getSelectionCells()));
 		}
 		finally
@@ -1095,9 +1095,9 @@ Actions.prototype.init = function()
 		graph.getModel().beginUpdate();
 		try
 		{
-			graph.setCellStyles(mxConstants.STYLE_DASHED, '1');
-			graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, null);
-			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
+			graph.setCellStyles('dashed', '1');
+			graph.setCellStyles('dashPattern', null);
+			ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'],
 				'values', ['1', null], 'cells', graph.getSelectionCells()));
 		}
 		finally
@@ -1110,9 +1110,9 @@ Actions.prototype.init = function()
 		graph.getModel().beginUpdate();
 		try
 		{
-			graph.setCellStyles(mxConstants.STYLE_DASHED, '1');
-			graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, '1 4');
-			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
+			graph.setCellStyles('dashed', '1');
+			graph.setCellStyles('dashPattern', '1 4');
+			ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'],
 				'values', ['1', '1 4'], 'cells', graph.getSelectionCells()));
 		}
 		finally
@@ -1125,9 +1125,9 @@ Actions.prototype.init = function()
 		graph.getModel().beginUpdate();
 		try
 		{
-			graph.setCellStyles(mxConstants.STYLE_ROUNDED, '0');
-			graph.setCellStyles(mxConstants.STYLE_CURVED, '0');
-			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED],
+			graph.setCellStyles('rounded', '0');
+			graph.setCellStyles('curved', '0');
+			ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
 					'values', ['0', '0'], 'cells', graph.getSelectionCells()));
 		}
 		finally
@@ -1140,9 +1140,9 @@ Actions.prototype.init = function()
 		graph.getModel().beginUpdate();
 		try
 		{
-			graph.setCellStyles(mxConstants.STYLE_ROUNDED, '1');
-			graph.setCellStyles(mxConstants.STYLE_CURVED, '0');
-			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED],
+			graph.setCellStyles('rounded', '1');
+			graph.setCellStyles('curved', '0');
+			ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
 					'values', ['1', '0'], 'cells', graph.getSelectionCells()));
 		}
 		finally
@@ -1159,11 +1159,11 @@ Actions.prototype.init = function()
 			{
 				let cells = graph.getSelectionCells();
 	    		let style = graph.getCurrentCellStyle(cells[0]);
-	    		let value = (mxUtils.getValue(style, mxConstants.STYLE_ROUNDED, '0') == '1') ? '0' : '1';
+	    		let value = (mxUtils.getValue(style, 'rounded', '0') == '1') ? '0' : '1';
 	    		
-				graph.setCellStyles(mxConstants.STYLE_ROUNDED, value);
-				graph.setCellStyles(mxConstants.STYLE_CURVED, null);
-				ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED],
+				graph.setCellStyles('rounded', value);
+				graph.setCellStyles('curved', null);
+				ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
 						'values', [value, '0'], 'cells', graph.getSelectionCells()));
 			}
 			finally
@@ -1177,9 +1177,9 @@ Actions.prototype.init = function()
 		graph.getModel().beginUpdate();
 		try
 		{
-			graph.setCellStyles(mxConstants.STYLE_ROUNDED, '0');
-			graph.setCellStyles(mxConstants.STYLE_CURVED, '1');
-			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED],
+			graph.setCellStyles('rounded', '0');
+			graph.setCellStyles('curved', '1');
+			ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
 					'values', ['0', '1'], 'cells', graph.getSelectionCells()));
 		}
 		finally
@@ -1347,7 +1347,7 @@ Actions.prototype.init = function()
 	    	
 	    	if (state != null)
 	    	{
-	    		value = state.style[mxConstants.STYLE_IMAGE] || value;
+	    		value = state.style.image || value;
 	    	}
 	    	
 	    	let selectionState = graph.cellEditor.saveSelection();
@@ -1384,18 +1384,18 @@ Actions.prototype.init = function()
 		            	    	graph.fireEvent(new mxEventObject('cellsInserted', 'cells', select));
 			    			}
 			    			
-			        		graph.setCellStyles(mxConstants.STYLE_IMAGE, (newValue.length > 0) ? newValue : null, cells);
+			        		graph.setCellStyles('image', (newValue.length > 0) ? newValue : null, cells);
 			        		
 			        		// Sets shape only if not already shape with image (label or image)
 			        		let style = graph.getCurrentCellStyle(cells[0]);
 			        		
-			        		if (style[mxConstants.STYLE_SHAPE] != 'image' && style[mxConstants.STYLE_SHAPE] != 'label')
+			        		if (style.shape != 'image' && style.shape != 'label')
 			        		{
-			        			graph.setCellStyles(mxConstants.STYLE_SHAPE, 'image', cells);
+			        			graph.setCellStyles('shape', 'image', cells);
 			        		}
 			        		else if (newValue.length == 0)
 			        		{
-			        			graph.setCellStyles(mxConstants.STYLE_SHAPE, null, cells);
+			        			graph.setCellStyles('shape', null, cells);
 			        		}
 				        	
 				        	if (graph.getSelectionCount() == 1)
diff --git a/docs/stashed/grapheditor/www/js/EditorUi.js b/docs/stashed/grapheditor/www/js/EditorUi.js
index 40f5c34c9..6c810ebfc 100644
--- a/docs/stashed/grapheditor/www/js/EditorUi.js
+++ b/docs/stashed/grapheditor/www/js/EditorUi.js
@@ -818,7 +818,7 @@ EditorUi = function(editor, container, lightbox)
 					let lineStartDiv = this.toolbar.lineStartMenu.getElementsByTagName('div')[0];
 					
 					lineStartDiv.className = this.getCssClassForMarker('start',
-							graph.currentEdgeStyle['shape'], graph.currentEdgeStyle[mxConstants.STYLE_STARTARROW],
+							graph.currentEdgeStyle['shape'], graph.currentEdgeStyle.startArrow,
 							mxUtils.getValue(graph.currentEdgeStyle, 'startFill', '1'));
 				}
 	
@@ -828,7 +828,7 @@ EditorUi = function(editor, container, lightbox)
 					let lineEndDiv = this.toolbar.lineEndMenu.getElementsByTagName('div')[0];
 					
 					lineEndDiv.className = this.getCssClassForMarker('end',
-							graph.currentEdgeStyle['shape'], graph.currentEdgeStyle[mxConstants.STYLE_ENDARROW],
+							graph.currentEdgeStyle['shape'], graph.currentEdgeStyle.endArrow,
 							mxUtils.getValue(graph.currentEdgeStyle, 'endFill', '1'));
 				}
 			}
@@ -845,8 +845,8 @@ EditorUi = function(editor, container, lightbox)
 			    	
 			    	if (state != null)
 			    	{
-			    		ff = state.style[mxConstants.STYLE_FONTFAMILY] || ff;
-			    		fs = state.style[mxConstants.STYLE_FONTSIZE] || fs;
+			    		ff = state.style.fontFamily || ff;
+			    		fs = state.style.fontSize || fs;
 			    		
 			    		if (ff.length > 10)
 			    		{
@@ -1207,7 +1207,7 @@ EditorUi.prototype.installShapePicker = function()
 					let geo = temp.getGeometry();
 					me.consume();
 					
-					while (temp != null && graph.model.isVertex(temp) && geo != null && geo.relative)
+					while (temp != null && temp.isVertex() && geo != null && geo.relative)
 					{
 						cell = temp;
 						temp = cell.getParent()
@@ -4635,7 +4635,7 @@ EditorUi.prototype.createKeyHandler = function(editor)
 					let parent = cell.getParent();
 					let layout = null;
 	
-					if (graph.getSelectionCount() == 1 && graph.model.isVertex(cell) &&
+					if (graph.getSelectionCount() == 1 && cell.isVertex() &&
 						graph.layoutManager != null && !graph.isCellLocked(cell))
 					{
 						layout = graph.layoutManager.getLayout(parent);
@@ -4668,7 +4668,7 @@ EditorUi.prototype.createKeyHandler = function(editor)
 							{
 						        let parent = cells[i].getParent();
 					
-						        if (graph.model.isVertex(parent) && mxUtils.indexOf(cells, parent) < 0)
+						        if (parent.isVertex() && mxUtils.indexOf(cells, parent) < 0)
 						        {
 						            realCells.push(parent);
 						        }
diff --git a/docs/stashed/grapheditor/www/js/Format.js b/docs/stashed/grapheditor/www/js/Format.js
index 57635449f..59328c0aa 100644
--- a/docs/stashed/grapheditor/www/js/Format.js
+++ b/docs/stashed/grapheditor/www/js/Format.js
@@ -224,7 +224,7 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells)
 		result.fill = result.fill && this.isFillState(state);
 		result.stroke = result.stroke && this.isStrokeState(state);
 		
-		let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
+		let shape = mxUtils.getValue(state.style, 'shape', null);
 		result.containsImage = result.containsImage || shape == 'image';
 		
 		for (var key in state.style)
@@ -251,11 +251,11 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells)
  */
 Format.prototype.isFillState = function(state)
 {
-	return !this.isSpecialColor(state.style[mxConstants.STYLE_FILLCOLOR]) &&
+	return !this.isSpecialColor(state.style.fillColor) &&
 		(state.cell.isVertex() ||
-		mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'arrow' ||
-		mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'filledEdge' ||
-		mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'flexArrow');
+		mxUtils.getValue(state.style, 'shape', null) == 'arrow' ||
+		mxUtils.getValue(state.style, 'shape', null) == 'filledEdge' ||
+		mxUtils.getValue(state.style, 'shape', null) == 'flexArrow');
 };
 
 /**
@@ -263,7 +263,7 @@ Format.prototype.isFillState = function(state)
  */
 Format.prototype.isStrokeState = function(state)
 {
-	return !this.isSpecialColor(state.style[mxConstants.STYLE_STROKECOLOR]);
+	return !this.isSpecialColor(state.style.strokeColor);
 };
 
 /**
@@ -271,8 +271,8 @@ Format.prototype.isStrokeState = function(state)
  */
 Format.prototype.isSpecialColor = function(color)
 {
-	return mxUtils.indexOf([mxConstants.STYLE_STROKECOLOR,
-		mxConstants.STYLE_FILLCOLOR, 'inherit', 'swimlane',
+	return mxUtils.indexOf(['strokeColor',
+		'fillColor', 'inherit', 'swimlane',
 		'indicated'], color) >= 0;
 };
 
@@ -281,7 +281,7 @@ Format.prototype.isSpecialColor = function(color)
  */
 Format.prototype.isGlassState = function(state)
 {
-	let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
+	let shape = mxUtils.getValue(state.style, 'shape', null);
 	
 	return (shape == 'label' || shape == 'rectangle' || shape == 'internalStorage' ||
 			shape == 'ext' || shape == 'umlLifeline' || shape == 'swimlane' ||
@@ -295,7 +295,7 @@ Format.prototype.isRoundedState = function(state)
 {
 	return (state.shape != null) ? state.shape.isRoundable() :
 		mxUtils.indexOf(this.roundableShapes, mxUtils.getValue(state.style,
-		mxConstants.STYLE_SHAPE, null)) >= 0;
+		'shape', null)) >= 0;
 };
 
 /**
@@ -303,8 +303,8 @@ Format.prototype.isRoundedState = function(state)
  */
 Format.prototype.isLineJumpState = function(state)
 {
-	let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
-	let curved = mxUtils.getValue(state.style, mxConstants.STYLE_CURVED, false);
+	let shape = mxUtils.getValue(state.style, 'shape', null);
+	let curved = mxUtils.getValue(state.style, 'curved', false);
 	
 	return !curved && (shape == 'connector' || shape == 'filledEdge');
 };
@@ -314,7 +314,7 @@ Format.prototype.isLineJumpState = function(state)
  */
 Format.prototype.isAutoSizeState = function(state)
 {
-	return mxUtils.getValue(state.style, mxConstants.STYLE_AUTOSIZE, null) == '1';
+	return mxUtils.getValue(state.style, 'autoSize', null) == '1';
 };
 
 /**
@@ -322,7 +322,7 @@ Format.prototype.isAutoSizeState = function(state)
  */
 Format.prototype.isImageState = function(state)
 {
-	let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
+	let shape = mxUtils.getValue(state.style, 'shape', null);
 	
 	return (shape == 'label' || shape == 'image');
 };
@@ -332,7 +332,7 @@ Format.prototype.isImageState = function(state)
  */
 Format.prototype.isShadowState = function(state)
 {
-	let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
+	let shape = mxUtils.getValue(state.style, 'shape', null);
 	
 	return (shape != 'image');
 };
@@ -628,7 +628,7 @@ BaseFormatPanel.prototype.getSelectionState = function()
 		
 		if (state != null)
 		{
-			let tmp = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
+			let tmp = mxUtils.getValue(state.style, 'shape', null);
 			
 			if (tmp != null)
 			{
@@ -670,7 +670,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu
 		let value = (isFloat) ? parseFloat(input.value) : parseInt(input.value);
 
 		// Special case: angle mod 360
-		if (!isNaN(value) && key == mxConstants.STYLE_ROTATION)
+		if (!isNaN(value) && key == 'rotation')
 		{
 			// Workaround for decimal rounding errors in floats is to
 			// use integer and round all numbers to two decimal point
@@ -712,7 +712,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu
 				graph.setCellStyles(key, value, cells);
 
 				// Handles special case for fontSize where HTML labels are parsed and updated
-				if (key == mxConstants.STYLE_FONTSIZE)
+				if (key == 'fontSize')
 				{
 					graph.updateLabelElements(graph.getSelectionCells(), function(elt)
 					{
@@ -1937,7 +1937,7 @@ ArrangePanel.prototype.addFlip = function(div)
 	
 	let btn = mxUtils.button(mxResources.get('horizontal'), function(evt)
 	{
-		graph.toggleCellStyles(mxConstants.STYLE_FLIPH, false);
+		graph.toggleCellStyles('flipH', false);
 	})
 	
 	btn.setAttribute('title', mxResources.get('horizontal'));
@@ -1947,7 +1947,7 @@ ArrangePanel.prototype.addFlip = function(div)
 	
 	let btn = mxUtils.button(mxResources.get('vertical'), function(evt)
 	{
-		graph.toggleCellStyles(mxConstants.STYLE_FLIPV, false);
+		graph.toggleCellStyles('flipV', false);
 	})
 	
 	btn.setAttribute('title', mxResources.get('vertical'));
@@ -2067,12 +2067,12 @@ ArrangePanel.prototype.addAngle = function(div)
 			if (force || document.activeElement != input)
 			{
 				ss = this.format.getSelectionState();
-				let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_ROTATION, 0));
+				let tmp = parseFloat(mxUtils.getValue(ss.style, 'rotation', 0));
 				input.value = (isNaN(tmp)) ? '' : tmp  + '°';
 			}
 		});
 	
-		update = this.installInputHandler(input, mxConstants.STYLE_ROTATION, 0, 0, 360, '°', null, true);
+		update = this.installInputHandler(input, 'rotation', 0, 0, 360, '°', null, true);
 		this.addKeyHandler(input, listener);
 	
 		graph.getModel().addListener(mxEvent.CHANGE, listener);
@@ -2215,7 +2215,7 @@ ArrangePanel.prototype.addGeometry = function(container)
 	wrapper.style.whiteSpace = 'nowrap';
 	wrapper.style.textAlign = 'right';
 	let opt = this.createCellOption(mxResources.get('constrainProportions'),
-		mxConstants.STYLE_ASPECT, null, 'fixed', 'null');
+		'aspect', null, 'fixed', 'null');
 	opt.style.width = '100%';
 	wrapper.appendChild(opt);
 		
@@ -2828,19 +2828,19 @@ TextFormatPanel.prototype.addFont = function(container)
 		function(evt)
 		{
 			graph.cellEditor.alignText(mxConstants.ALIGN_LEFT, evt);
-		} : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_LEFT])), stylePanel3);
+		} : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_LEFT])), stylePanel3);
 	let center = this.editorUi.toolbar.addButton('geSprite-center', mxResources.get('center'),
 		(graph.cellEditor.isContentEditing()) ?
 		function(evt)
 		{
 			graph.cellEditor.alignText(mxConstants.ALIGN_CENTER, evt);
-		} : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_CENTER])), stylePanel3);
+		} : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_CENTER])), stylePanel3);
 	let right = this.editorUi.toolbar.addButton('geSprite-right', mxResources.get('right'),
 		(graph.cellEditor.isContentEditing()) ?
 		function(evt)
 		{
 			graph.cellEditor.alignText(mxConstants.ALIGN_RIGHT, evt);
-		} : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_RIGHT])), stylePanel3);
+		} : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_RIGHT])), stylePanel3);
 
 	this.styleButtons([left, center, right]);
 	
@@ -2863,11 +2863,11 @@ TextFormatPanel.prototype.addFont = function(container)
 	}
 	
 	let top = this.editorUi.toolbar.addButton('geSprite-top', mxResources.get('top'),
-		callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_TOP])), stylePanel3);
+		callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_TOP])), stylePanel3);
 	let middle = this.editorUi.toolbar.addButton('geSprite-middle', mxResources.get('middle'),
-		callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_MIDDLE])), stylePanel3);
+		callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_MIDDLE])), stylePanel3);
 	let bottom = this.editorUi.toolbar.addButton('geSprite-bottom', mxResources.get('bottom'),
-		callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_BOTTOM])), stylePanel3);
+		callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_BOTTOM])), stylePanel3);
 	
 	this.styleButtons([top, middle, bottom]);
 
@@ -3038,10 +3038,10 @@ TextFormatPanel.prototype.addFont = function(container)
 				
 				if (vals != null)
 				{
-					graph.setCellStyles(mxConstants.STYLE_LABEL_POSITION, vals[0], graph.getSelectionCells());
-					graph.setCellStyles(mxConstants.STYLE_VERTICAL_LABEL_POSITION, vals[1], graph.getSelectionCells());
-					graph.setCellStyles(mxConstants.STYLE_ALIGN, vals[2], graph.getSelectionCells());
-					graph.setCellStyles(mxConstants.STYLE_VERTICAL_ALIGN, vals[3], graph.getSelectionCells());
+					graph.setCellStyles(mxConstants.'labelPosition', vals[0], graph.getSelectionCells());
+					graph.setCellStyles(mxConstants.'verticalLabelPosition', vals[1], graph.getSelectionCells());
+					graph.setCellStyles(mxConstants.'align', vals[2], graph.getSelectionCells());
+					graph.setCellStyles(mxConstants.'verticalAlign', vals[3], graph.getSelectionCells());
 				}
 			}
 			finally
@@ -3058,7 +3058,7 @@ TextFormatPanel.prototype.addFont = function(container)
 		
 		mxEvent.addListener(dirSelect, 'change', function(evt)
 		{
-			graph.setCellStyles(mxConstants.STYLE_TEXT_DIRECTION, dirSet[dirSelect.value], graph.getSelectionCells());
+			graph.setCellStyles('textDirection', dirSet[dirSelect.value], graph.getSelectionCells());
 			mxEvent.consume(evt);
 		});
 	}
@@ -3077,7 +3077,7 @@ TextFormatPanel.prototype.addFont = function(container)
 	// after first character was entered (as the font element is lazy created)
 	let pendingFontSize = null;
 
-	let inputUpdate = this.installInputHandler(input, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize, 1, 999, ' pt',
+	let inputUpdate = this.installInputHandler(input, 'fontSize', Menus.prototype.defaultFontSize, 1, 999, ' pt',
 	function(fontSize)
 	{
 		// IE does not support containsNode
@@ -3234,7 +3234,7 @@ TextFormatPanel.prototype.addFont = function(container)
 	{
 		install: function(apply) { bgColorApply = apply; },
 		destroy: function() { bgColorApply = null; }
-	}, null, true) : this.createCellColorOption(mxResources.get('backgroundColor'), mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, '#ffffff', null, function(color)
+	}, null, true) : this.createCellColorOption(mxResources.get('backgroundColor'), 'backgroundColor', '#ffffff', null, function(color)
 	{
 		graph.updateLabelElements(graph.getSelectionCells(), function(elt)
 		{
@@ -3243,7 +3243,7 @@ TextFormatPanel.prototype.addFont = function(container)
 	});
 	bgPanel.style.fontWeight = 'bold';
 
-	let borderPanel = this.createCellColorOption(mxResources.get('borderColor'), mxConstants.STYLE_LABEL_BORDERCOLOR, '#000000');
+	let borderPanel = this.createCellColorOption(mxResources.get('borderColor'), 'labelBorderColor', '#000000');
 	borderPanel.style.fontWeight = 'bold';
 	
 	let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
@@ -3311,12 +3311,12 @@ TextFormatPanel.prototype.addFont = function(container)
 			document.execCommand('forecolor', false, (color != mxConstants.NONE) ?
 				color : 'transparent');
 		}
-	}, (defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : '#000000',
+	}, (defs.strokeColor != null) ? defs.strokeColor : '#000000',
 	{
 		install: function(apply) { fontColorApply = apply; },
 		destroy: function() { fontColorApply = null; }
-	}, null, true) : this.createCellColorOption(mxResources.get('fontColor'), mxConstants.STYLE_FONTCOLOR,
-		(defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : '#000000', function(color)
+	}, null, true) : this.createCellColorOption(mxResources.get('fontColor'), 'fontColor',
+		(defs.strokeColor != null) ? defs.strokeColor : '#000000', function(color)
 	{
 		if (color == mxConstants.NONE)
 		{
@@ -3332,14 +3332,14 @@ TextFormatPanel.prototype.addFont = function(container)
 	{
 		if (color == mxConstants.NONE)
 		{
-			graph.setCellStyles(mxConstants.STYLE_NOLABEL, '1', graph.getSelectionCells());
+			graph.setCellStyles('noLabel', '1', graph.getSelectionCells());
 		}
 		else
 		{
-			graph.setCellStyles(mxConstants.STYLE_NOLABEL, null, graph.getSelectionCells());
+			graph.setCellStyles('noLabel', null, graph.getSelectionCells());
 		}
 		
-		graph.updateCellStyles(mxConstants.STYLE_FONTCOLOR, color, graph.getSelectionCells());
+		graph.updateCellStyles('fontColor', color, graph.getSelectionCells());
 
 		graph.updateLabelElements(graph.getSelectionCells(), function(elt)
 		{
@@ -3364,7 +3364,7 @@ TextFormatPanel.prototype.addFont = function(container)
 	extraPanel.style.paddingBottom = '4px';
 	
 	// LATER: Fix toggle using '' instead of 'null'
-	let wwOpt = this.createCellOption(mxResources.get('wordWrap'), mxConstants.STYLE_WHITE_SPACE, null, 'wrap', 'null', null, null, true);
+	let wwOpt = this.createCellOption(mxResources.get('wordWrap'), 'whiteSpace', null, 'wrap', 'null', null, null, true);
 	wwOpt.style.fontWeight = 'bold';
 	
 	// Word wrap in edge labels only supported via labelWidth style
@@ -3429,7 +3429,7 @@ TextFormatPanel.prototype.addFont = function(container)
 	if (!graph.cellEditor.isContentEditing())
 	{
 		container.appendChild(extraPanel);
-		container.appendChild(this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_TEXT_OPACITY));
+		container.appendChild(this.createRelativeOption(mxResources.get('opacity'), 'textOpacity'));
 		container.appendChild(spacingPanel);
 	}
 	else
@@ -3759,32 +3759,32 @@ TextFormatPanel.prototype.addFont = function(container)
 	let listener = mxUtils.bind(this, function(sender, evt, force)
 	{
 		ss = this.format.getSelectionState();
-		let fontStyle = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSTYLE, 0);
+		let fontStyle = mxUtils.getValue(ss.style, 'fontStyle', 0);
 		setSelected(fontStyleItems[0], (fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD);
 		setSelected(fontStyleItems[1], (fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC);
 		setSelected(fontStyleItems[2], (fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE);
-		fontMenu.firstChild.nodeValue = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTFAMILY, Menus.prototype.defaultFont);
+		fontMenu.firstChild.nodeValue = mxUtils.getValue(ss.style, 'fontFamily', Menus.prototype.defaultFont);
 
-		setSelected(verticalItem, mxUtils.getValue(ss.style, mxConstants.STYLE_HORIZONTAL, '1') == '0');
+		setSelected(verticalItem, mxUtils.getValue(ss.style, 'horizontal', '1') == '0');
 		
 		if (force || document.activeElement != input)
 		{
-			let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize));
+			let tmp = parseFloat(mxUtils.getValue(ss.style, 'fontSize', Menus.prototype.defaultFontSize));
 			input.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 		
-		let align = mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER);
+		let align = mxUtils.getValue(ss.style, mxConstants.'align', mxConstants.ALIGN_CENTER);
 		setSelected(left, align == mxConstants.ALIGN_LEFT);
 		setSelected(center, align == mxConstants.ALIGN_CENTER);
 		setSelected(right, align == mxConstants.ALIGN_RIGHT);
 		
-		let valign = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
+		let valign = mxUtils.getValue(ss.style, mxConstants.'verticalAlign', mxConstants.ALIGN_MIDDLE);
 		setSelected(top, valign == mxConstants.ALIGN_TOP);
 		setSelected(middle, valign == mxConstants.ALIGN_MIDDLE);
 		setSelected(bottom, valign == mxConstants.ALIGN_BOTTOM);
 		
-		let pos = mxUtils.getValue(ss.style, mxConstants.STYLE_LABEL_POSITION, mxConstants.ALIGN_CENTER);
-		let vpos = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE);
+		let pos = mxUtils.getValue(ss.style, mxConstants.'labelPosition', mxConstants.ALIGN_CENTER);
+		let vpos = mxUtils.getValue(ss.style, mxConstants.'verticalLabelPosition', mxConstants.ALIGN_MIDDLE);
 		
 		if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_TOP)
 		{
@@ -3823,7 +3823,7 @@ TextFormatPanel.prototype.addFont = function(container)
 			positionSelect.value = 'center';
 		}
 		
-		let dir = mxUtils.getValue(ss.style, mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION);
+		let dir = mxUtils.getValue(ss.style, 'textDirection', mxConstants.DEFAULT_TEXT_DIRECTION);
 		
 		if (dir == mxConstants.TEXT_DIRECTION_RTL)
 		{
@@ -3840,40 +3840,40 @@ TextFormatPanel.prototype.addFont = function(container)
 		
 		if (force || document.activeElement != globalSpacing)
 		{
-			let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING, 2));
+			let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacing', 2));
 			globalSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 
 		if (force || document.activeElement != topSpacing)
 		{
-			let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_TOP, 0));
+			let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingTop', 0));
 			topSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 		
 		if (force || document.activeElement != rightSpacing)
 		{
-			let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_RIGHT, 0));
+			let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingRight', 0));
 			rightSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 		
 		if (force || document.activeElement != bottomSpacing)
 		{
-			let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_BOTTOM, 0));
+			let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingBottom', 0));
 			bottomSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 		
 		if (force || document.activeElement != leftSpacing)
 		{
-			let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_LEFT, 0));
+			let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingLeft', 0));
 			leftSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 	});
 
-	globalUpdate = this.installInputHandler(globalSpacing, mxConstants.STYLE_SPACING, 2, -999, 999, ' pt');
-	topUpdate = this.installInputHandler(topSpacing, mxConstants.STYLE_SPACING_TOP, 0, -999, 999, ' pt');
-	rightUpdate = this.installInputHandler(rightSpacing, mxConstants.STYLE_SPACING_RIGHT, 0, -999, 999, ' pt');
-	bottomUpdate = this.installInputHandler(bottomSpacing, mxConstants.STYLE_SPACING_BOTTOM, 0, -999, 999, ' pt');
-	leftUpdate = this.installInputHandler(leftSpacing, mxConstants.STYLE_SPACING_LEFT, 0, -999, 999, ' pt');
+	globalUpdate = this.installInputHandler(globalSpacing, 'spacing', 2, -999, 999, ' pt');
+	topUpdate = this.installInputHandler(topSpacing, 'spacingTop', 0, -999, 999, ' pt');
+	rightUpdate = this.installInputHandler(rightSpacing, 'spacingRight', 0, -999, 999, ' pt');
+	bottomUpdate = this.installInputHandler(bottomSpacing, 'spacingBottom', 0, -999, 999, ' pt');
+	leftUpdate = this.installInputHandler(leftSpacing, 'spacingLeft', 0, -999, 999, ' pt');
 
 	this.addKeyHandler(input, listener);
 	this.addKeyHandler(globalSpacing, listener);
@@ -4020,7 +4020,7 @@ TextFormatPanel.prototype.addFont = function(container)
 							
 							if (!graph.cellEditor.isTableSelected())
 							{
-								let align = graph.cellEditor.align || mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER);
+								let align = graph.cellEditor.align || mxUtils.getValue(ss.style, mxConstants.'align', mxConstants.ALIGN_CENTER);
 
 								if (isEqualOrPrefixed(css.textAlign, 'justify'))
 								{
@@ -4191,7 +4191,7 @@ StyleFormatPanel.prototype.init = function()
 	
 		this.container.appendChild(this.addStroke(this.createPanel()));
 		this.container.appendChild(this.addLineJumps(this.createPanel()));
-		let opacityPanel = this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_OPACITY, 41);
+		let opacityPanel = this.createRelativeOption(mxResources.get('opacity'), 'opacity', 41);
 		opacityPanel.style.paddingTop = '8px';
 		opacityPanel.style.paddingBottom = '8px';
 		this.container.appendChild(opacityPanel);
@@ -4313,7 +4313,7 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem
 					styleElem.textContent = cssTxt;
 					let xml = mxUtils.getXml(svg.documentElement);
 					
-					graph.setCellStyles(mxConstants.STYLE_IMAGE, 'data:image/svg+xml,' +
+					graph.setCellStyles('image', 'data:image/svg+xml,' +
 						((window.btoa) ? btoa(xml) : Base64.encode(xml, true)),
 						graph.getSelectionCells());
 				}, '#ffffff',
@@ -4421,8 +4421,8 @@ StyleFormatPanel.prototype.addFill = function(container)
 	});
 	
 	let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
-	let gradientPanel = this.createCellColorOption(mxResources.get('gradient'), mxConstants.STYLE_GRADIENTCOLOR,
-		(defs[mxConstants.STYLE_GRADIENTCOLOR] != null) ? defs[mxConstants.STYLE_GRADIENTCOLOR] : '#ffffff', function(color)
+	let gradientPanel = this.createCellColorOption(mxResources.get('gradient'), 'gradientColor',
+		(defs.gradientColor != null) ? defs.gradientColor : '#ffffff', function(color)
 	{
 		if (color == null || color == mxConstants.NONE)
 		{
@@ -4434,10 +4434,10 @@ StyleFormatPanel.prototype.addFill = function(container)
 		}
 	}, function(color)
 	{
-		graph.updateCellStyles(mxConstants.STYLE_GRADIENTCOLOR, color, graph.getSelectionCells());
+		graph.updateCellStyles('gradientColor', color, graph.getSelectionCells());
 	});
 
-	let fillKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BACKGROUND : mxConstants.STYLE_FILLCOLOR;
+	let fillKey = (ss.style.shape == 'image') ? 'imageBackground' : 'fillColor';
 	let label = (ss.style.shape == 'image') ? mxResources.get('background') : mxResources.get('fill');
 	
 	let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
@@ -4477,7 +4477,7 @@ StyleFormatPanel.prototype.addFill = function(container)
 	let listener = mxUtils.bind(this, function()
 	{
 		ss = this.format.getSelectionState();
-		let value = mxUtils.getValue(ss.style, mxConstants.STYLE_GRADIENT_DIRECTION, mxConstants.DIRECTION_SOUTH);
+		let value = mxUtils.getValue(ss.style, 'gradientDirection', mxConstants.DIRECTION_SOUTH);
 		let fillStyle = mxUtils.getValue(ss.style, 'fillStyle', 'auto');
 		
 		// Handles empty string which is not allowed as a value
@@ -4490,7 +4490,7 @@ StyleFormatPanel.prototype.addFill = function(container)
 		fillStyleSelect.value = fillStyle;
 		container.style.display = (ss.fill) ? '' : 'none';
 		
-		let fillColor = mxUtils.getValue(ss.style, mxConstants.STYLE_FILLCOLOR, null);
+		let fillColor = mxUtils.getValue(ss.style, 'fillColor', null);
 			
 		if (!ss.fill || ss.containsImage || fillColor == null || fillColor == mxConstants.NONE || ss.style.shape == 'filledEdge')
 		{
@@ -4510,7 +4510,7 @@ StyleFormatPanel.prototype.addFill = function(container)
 
 	mxEvent.addListener(gradientSelect, 'change', function(evt)
 	{
-		graph.setCellStyles(mxConstants.STYLE_GRADIENT_DIRECTION, gradientSelect.value, graph.getSelectionCells());
+		graph.setCellStyles('gradientDirection', gradientSelect.value, graph.getSelectionCells());
 		mxEvent.consume(evt);
 	});
 	
@@ -4593,7 +4593,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
 		graph.getModel().beginUpdate();
 		try
 		{
-			let keys = [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED];
+			let keys = ['rounded', 'curved'];
 			// Default for rounded is 1
 			let values = ['0', null];
 			
@@ -4628,7 +4628,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
 		mxEvent.consume(evt);
 	});
 
-	let strokeKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BORDER : mxConstants.STYLE_STROKECOLOR;
+	let strokeKey = (ss.style.shape == 'image') ? 'imageBorder' : 'strokeColor';
 	let label = (ss.style.shape == 'image') ? mxResources.get('border') : mxResources.get('line');
 	
 	let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
@@ -4669,11 +4669,11 @@ StyleFormatPanel.prototype.addStroke = function(container)
 
 	let pattern = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu)
 	{
-		addItem(menu, 75, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid'));
-		addItem(menu, 75, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed'));
-		addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
-		addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
-		addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
+		addItem(menu, 75, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', mxResources.get('solid'));
+		addItem(menu, 75, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', mxResources.get('dashed'));
+		addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
+		addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
+		addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
 	}));
 	
 	// Used for mixed selection (vertices and edges)
@@ -4681,19 +4681,19 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	
 	let edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-connection', mxResources.get('connection'), false, mxUtils.bind(this, function(menu)
 	{
-		this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line'));
-		this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link'));
-		this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['flexArrow', null, null, null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow'));
-		this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow')); 
+		this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line'));
+		this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link'));
+		this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['flexArrow', null, null, null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow'));
+		this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow'));
 	}));
 
 	let altPattern = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu)
 	{
-		addItem(menu, 33, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid'));
-		addItem(menu, 33, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed'));
-		addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
-		addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
-		addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
+		addItem(menu, 33, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', mxResources.get('solid'));
+		addItem(menu, 33, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', mxResources.get('dashed'));
+		addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
+		addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
+		addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
 	}));
 	
 	var stylePanel2 = stylePanel.cloneNode(false);
@@ -4716,10 +4716,10 @@ StyleFormatPanel.prototype.addStroke = function(container)
 		let value = parseInt(input.value);
 		value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value));
 		
-		if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1))
+		if (value != mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1))
 		{
-			graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells());
-			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH],
+			graph.setCellStyles(mxConstants.'strokeWidth', value, graph.getSelectionCells());
+			ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth,
 					'values', [value], 'cells', graph.getSelectionCells()));
 		}
 
@@ -4733,10 +4733,10 @@ StyleFormatPanel.prototype.addStroke = function(container)
 		let value = parseInt(altInput.value);
 		value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value));
 		
-		if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1))
+		if (value != mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1))
 		{
-			graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells());
-			ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH],
+			graph.setCellStyles(mxConstants.'strokeWidth', value, graph.getSelectionCells());
+			ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth,
 					'values', [value], 'cells', graph.getSelectionCells()));
 		}
 
@@ -4774,19 +4774,19 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	{
 		if (ss.style.shape != 'arrow')
 		{
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
 	
 			if (ss.style.shape == 'connector')
 			{
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved'));
 			}
 			
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation'));
 		}
 	}));
 
@@ -4794,47 +4794,47 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	{
 		if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge')
 		{
-			let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
+			let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
 			item.setAttribute('title', mxResources.get('none'));
 			item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>';
 
 			if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge')
 			{
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-startclassic', null, false).setAttribute('title', mxResources.get('classic'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-startclassicthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-startopen', null, false).setAttribute('title', mxResources.get('openArrow'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-startopenthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['openAsync', 0], 'geIcon geSprite geSprite-startopenasync', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-startblock', null, false).setAttribute('title', mxResources.get('block'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-startblockthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 1], 'geIcon geSprite geSprite-startasync', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-startoval', null, false).setAttribute('title', mxResources.get('oval'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-startdiamond', null, false).setAttribute('title', mxResources.get('diamond'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-startthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-startclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-startclassicthintrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-startblockthintrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 0], 'geIcon geSprite geSprite-startasynctrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-startovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-startdiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-startthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['box', 0], 'geIcon geSprite geSvgSprite geSprite-box', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geSprite-halfCircle', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['dash', 0], 'geIcon geSprite geSprite-startdash', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['cross', 0], 'geIcon geSprite geSprite-startcross', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-startcircleplus', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circle', 1], 'geIcon geSprite geSprite-startcircle', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERone', 0], 'geIcon geSprite geSprite-starterone', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-starteronetoone', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmany', 0], 'geIcon geSprite geSprite-startermany', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-starteronetomany', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-starteroneopt', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-startclassic', null, false).setAttribute('title', mxResources.get('classic'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-startclassicthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-startopen', null, false).setAttribute('title', mxResources.get('openArrow'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-startopenthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['openAsync', 0], 'geIcon geSprite geSprite-startopenasync', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-startblock', null, false).setAttribute('title', mxResources.get('block'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-startblockthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['async', 1], 'geIcon geSprite geSprite-startasync', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-startoval', null, false).setAttribute('title', mxResources.get('oval'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-startdiamond', null, false).setAttribute('title', mxResources.get('diamond'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-startthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-startclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-startclassicthintrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-startblockthintrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['async', 0], 'geIcon geSprite geSprite-startasynctrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-startovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-startdiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-startthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['box', 0], 'geIcon geSprite geSvgSprite geSprite-box', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geSprite-halfCircle', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['dash', 0], 'geIcon geSprite geSprite-startdash', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['cross', 0], 'geIcon geSprite geSprite-startcross', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-startcircleplus', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['circle', 1], 'geIcon geSprite geSprite-startcircle', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERone', 0], 'geIcon geSprite geSprite-starterone', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-starteronetoone', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERmany', 0], 'geIcon geSprite geSprite-startermany', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-starteronetomany', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-starteroneopt', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false);
 			}
 			else
 			{
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
+				this.editorUi.menus.edgeStyleChange(menu, '', .startArrow, [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
 			}
 		}
 	}));
@@ -4843,47 +4843,47 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	{
 		if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge')
 		{
-			let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
+			let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
 			item.setAttribute('title', mxResources.get('none'));
 			item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>';
 			
 			if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge')
 			{
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-endclassic', null, false).setAttribute('title', mxResources.get('classic'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-endclassicthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-endopen', null, false).setAttribute('title', mxResources.get('openArrow'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-endopenthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['openAsync', 0], 'geIcon geSprite geSprite-endopenasync', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-endblock', null, false).setAttribute('title', mxResources.get('block'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-endblockthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 1], 'geIcon geSprite geSprite-endasync', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-endoval', null, false).setAttribute('title', mxResources.get('oval'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-enddiamond', null, false).setAttribute('title', mxResources.get('diamond'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-endthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-endclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-endclassicthintrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-endblockthintrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 0], 'geIcon geSprite geSprite-endasynctrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-endovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-enddiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-endthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['box', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-box', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-halfCircle', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['dash', 0], 'geIcon geSprite geSprite-enddash', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['cross', 0], 'geIcon geSprite geSprite-endcross', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-endcircleplus', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circle', 1], 'geIcon geSprite geSprite-endcircle', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERone', 0], 'geIcon geSprite geSprite-enderone', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-enderonetoone', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmany', 0], 'geIcon geSprite geSprite-endermany', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-enderonetomany', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-enderoneopt', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-endclassic', null, false).setAttribute('title', mxResources.get('classic'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-endclassicthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-endopen', null, false).setAttribute('title', mxResources.get('openArrow'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-endopenthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['openAsync', 0], 'geIcon geSprite geSprite-endopenasync', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-endblock', null, false).setAttribute('title', mxResources.get('block'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-endblockthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['async', 1], 'geIcon geSprite geSprite-endasync', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-endoval', null, false).setAttribute('title', mxResources.get('oval'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-enddiamond', null, false).setAttribute('title', mxResources.get('diamond'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-endthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-endclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-endclassicthintrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-endblockthintrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['async', 0], 'geIcon geSprite geSprite-endasynctrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-endovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-enddiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-endthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['box', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-box', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-halfCircle', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['dash', 0], 'geIcon geSprite geSprite-enddash', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['cross', 0], 'geIcon geSprite geSprite-endcross', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-endcircleplus', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['circle', 1], 'geIcon geSprite geSprite-endcircle', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERone', 0], 'geIcon geSprite geSprite-enderone', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-enderonetoone', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERmany', 0], 'geIcon geSprite geSprite-endermany', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-enderonetomany', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-enderoneopt', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false);
 			}
 			else
 			{
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
+				this.editorUi.menus.edgeStyleChange(menu, '', .endArrow, [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
 			}
 		}
 	}));
@@ -5021,30 +5021,30 @@ StyleFormatPanel.prototype.addStroke = function(container)
 
 		if (force || document.activeElement != input)
 		{
-			let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1));
+			let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1));
 			input.value = (isNaN(tmp)) ? '' : tmp + ' pt';
 		}
 		
 		if (force || document.activeElement != altInput)
 		{
-			let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1));
+			let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1));
 			altInput.value = (isNaN(tmp)) ? '' : tmp + ' pt';
 		}
 		
 		styleSelect.style.visibility = (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') ? '' : 'hidden';
 		
-		if (mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1')
+		if (mxUtils.getValue(ss.style, 'curved', null) == '1')
 		{
 			styleSelect.value = 'curved';
 		}
-		else if (mxUtils.getValue(ss.style, mxConstants.STYLE_ROUNDED, null) == '1')
+		else if (mxUtils.getValue(ss.style, 'rounded', null) == '1')
 		{
 			styleSelect.value = 'rounded';
 		}
 		
-		if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASHED, null) == '1')
+		if (mxUtils.getValue(ss.style, 'dashed', null) == '1')
 		{
-			if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, null) == null)
+			if (mxUtils.getValue(ss.style, 'dashPattern', null) == null)
 			{
 				solid.style.borderBottom = '1px dashed ' + this.defaultStrokeColor;
 			}
@@ -5065,14 +5065,14 @@ StyleFormatPanel.prototype.addStroke = function(container)
 		
 		if (edgeStyleDiv != null)
 		{
-			let es = mxUtils.getValue(ss.style, mxConstants.STYLE_EDGE, null);
+			let es = mxUtils.getValue(ss.style, 'edge', null);
 			
-			if (mxUtils.getValue(ss.style, mxConstants.STYLE_NOEDGESTYLE, null) == '1')
+			if (mxUtils.getValue(ss.style, 'noEdgeStyle', null) == '1')
 			{
 				es = null;
 			}
 			
-			if (es == 'orthogonalEdgeStyle' && mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1')
+			if (es == 'orthogonalEdgeStyle' && mxUtils.getValue(ss.style, 'curved', null) == '1')
 			{
 				edgeStyleDiv.className = 'geSprite geSprite-curved';
 			}
@@ -5087,13 +5087,13 @@ StyleFormatPanel.prototype.addStroke = function(container)
 			else if (es == 'elbowEdgeStyle')
 			{
 				edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style,
-					mxConstants.STYLE_ELBOW, null) == 'vertical') ?
+					'elbow', null) == 'vertical') ?
 					'geSprite-verticalelbow' : 'geSprite-horizontalelbow');
 			}
 			else if (es == 'isometricEdgeStyle')
 			{
 				edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style,
-					mxConstants.STYLE_ELBOW, null) == 'vertical') ?
+					'elbow', null) == 'vertical') ?
 					'geSprite-verticalisometric' : 'geSprite-horizontalisometric');
 			}
 			else
@@ -5160,9 +5160,9 @@ StyleFormatPanel.prototype.addStroke = function(container)
 			return markerDiv;
 		};
 		
-		let sourceDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTARROW, null),
+		let sourceDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.'startArrow', null),
 				mxUtils.getValue(ss.style, 'startFill', '1'), lineStart, 'start');
-		let targetDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDARROW, null),
+		let targetDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.'endArrow', null),
 				mxUtils.getValue(ss.style, 'endFill', '1'), lineEnd, 'end');
 
 		// Special cases for markers
@@ -5195,40 +5195,40 @@ StyleFormatPanel.prototype.addStroke = function(container)
 
 		if (force || document.activeElement != startSize)
 		{
-			let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE));
+			let tmp = parseInt(mxUtils.getValue(ss.style, 'startSize', mxConstants.DEFAULT_MARKERSIZE));
 			startSize.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 		
 		if (force || document.activeElement != startSpacing)
 		{
-			let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0));
+			let tmp = parseInt(mxUtils.getValue(ss.style, 'sourcePerimeterSpacing', 0));
 			startSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 
 		if (force || document.activeElement != endSize)
 		{
-			let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE));
+			let tmp = parseInt(mxUtils.getValue(ss.style, 'endSize', mxConstants.DEFAULT_MARKERSIZE));
 			endSize.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 		
 		if (force || document.activeElement != startSpacing)
 		{
-			let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0));
+			let tmp = parseInt(mxUtils.getValue(ss.style, 'targetPerimeterSpacing', 0));
 			endSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 		
 		if (force || document.activeElement != perimeterSpacing)
 		{
-			let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_PERIMETER_SPACING, 0));
+			let tmp = parseInt(mxUtils.getValue(ss.style, 'perimeterSpacing', 0));
 			perimeterSpacing.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 	});
 	
-	startSizeUpdate = this.installInputHandler(startSize, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
-	startSpacingUpdate = this.installInputHandler(startSpacing, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0, -999, 999, ' pt');
-	endSizeUpdate = this.installInputHandler(endSize, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
-	endSpacingUpdate = this.installInputHandler(endSpacing, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0, -999, 999, ' pt');
-	perimeterUpdate = this.installInputHandler(perimeterSpacing, mxConstants.STYLE_PERIMETER_SPACING, 0, 0, 999, ' pt');
+	startSizeUpdate = this.installInputHandler(startSize, 'startSize', mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
+	startSpacingUpdate = this.installInputHandler(startSpacing, 'sourcePerimeterSpacing', 0, -999, 999, ' pt');
+	endSizeUpdate = this.installInputHandler(endSize, 'endSize', mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
+	endSpacingUpdate = this.installInputHandler(endSpacing, 'targetPerimeterSpacing', 0, -999, 999, ' pt');
+	perimeterUpdate = this.installInputHandler(perimeterSpacing, 'perimeterSpacing', 0, 0, 999, ' pt');
 
 	this.addKeyHandler(input, listener);
 	this.addKeyHandler(startSize, listener);
@@ -5401,7 +5401,7 @@ StyleFormatPanel.prototype.addEffects = function(div)
 		
 		if (ss.rounded)
 		{
-			addOption(mxResources.get('rounded'), mxConstants.STYLE_ROUNDED, 0);
+			addOption(mxResources.get('rounded'), 'rounded', 0);
 		}
 		
 		if (ss.style.shape == 'swimlane')
@@ -5411,12 +5411,12 @@ StyleFormatPanel.prototype.addEffects = function(div)
 
 		if (!ss.containsImage)
 		{
-			addOption(mxResources.get('shadow'), mxConstants.STYLE_SHADOW, 0);
+			addOption(mxResources.get('shadow'), 'shadow', 0);
 		}
 		
 		if (ss.glass)
 		{
-			addOption(mxResources.get('glass'), mxConstants.STYLE_GLASS, 0);
+			addOption(mxResources.get('glass'), 'glass', 0);
 		}
 
 		addOption(mxResources.get('sketch'), 'sketch', 0);
@@ -5621,8 +5621,8 @@ DiagramStylePanel.prototype.addView = function(div)
 				for (let j = 0; j < styles.length; j++)
 				{
 					if ((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) ||
-						(styles[j] != mxConstants.STYLE_FILLCOLOR &&
-						styles[j] != mxConstants.STYLE_STROKECOLOR))
+						(styles[j] != 'fillColor' &&
+						styles[j] != 'strokeColor'))
 					{
 						newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]);
 					}
@@ -5645,8 +5645,8 @@ DiagramStylePanel.prototype.addView = function(div)
 			{
 				if (((style[styles[j]] != null &&
 					style[styles[j]] != mxConstants.NONE) ||
-					(styles[j] != mxConstants.STYLE_FILLCOLOR &&
-					styles[j] != mxConstants.STYLE_STROKECOLOR)))
+					(styles[j] != 'fillColor' &&
+					styles[j] != 'strokeColor')))
 				{
 					style[styles[j]] = defaultStyle[styles[j]];
 				}
@@ -5684,8 +5684,8 @@ DiagramStylePanel.prototype.addView = function(div)
 			{
 				if (cell == null || ((result[key] != null &&
 					result[key] != mxConstants.NONE) ||
-					(key != mxConstants.STYLE_FILLCOLOR &&
-					key != mxConstants.STYLE_STROKECOLOR)))
+					(key != 'fillColor' &&
+					key != 'strokeColor')))
 				{
 					result[key] = style[key];
 				}
diff --git a/docs/stashed/grapheditor/www/js/Graph.js b/docs/stashed/grapheditor/www/js/Graph.js
index e19a9ff08..2bef22461 100644
--- a/docs/stashed/grapheditor/www/js/Graph.js
+++ b/docs/stashed/grapheditor/www/js/Graph.js
@@ -204,7 +204,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone)
 	{
 		let style = this.getCurrentCellStyle(cell);
 		
-		return (style != null) ? (style['html'] == '1' || style[mxConstants.STYLE_WHITE_SPACE] == 'wrap') : false;
+		return (style != null) ? (style['html'] == '1' || style.whiteSpace == 'wrap') : false;
 	};
 	
 	// Implements a listener for hover and click handling on edges
@@ -1692,7 +1692,7 @@ Graph.prototype.init = function(container)
 	{
 		// Redirect editing for tables
 		let style = this.getCellStyle(cell);
-		let size = parseInt(mxUtils.getValue(style, mxConstants.STYLE_STARTSIZE, 0));
+		let size = parseInt(mxUtils.getValue(style, 'startSize', 0));
 		
 		if (this.isTable(cell) && (!this.isSwimlane(cell) ||
 			size == 0) && this.getLabel(cell) == '' &&
@@ -1701,7 +1701,7 @@ Graph.prototype.init = function(container)
 			cell = cell.getChildAt(0);
 			
 			style = this.getCellStyle(cell);
-			size = parseInt(mxUtils.getValue(style, mxConstants.STYLE_STARTSIZE, 0));
+			size = parseInt(mxUtils.getValue(style, 'startSize', 0));
 		}
 		
 		// Redirect editing for table rows
@@ -3404,7 +3404,7 @@ Graph.prototype.getCellStyle = function(cell)
 			
 			if (layout != null && layout.constructor == mxStackLayout)
 			{
-				style[mxConstants.STYLE_HORIZONTAL] = !layout.horizontal;
+				style.horizontal = !layout.horizontal;
 			}
 		}
 	}
@@ -4392,7 +4392,7 @@ HoverIcons.prototype.drag = function(evt, x, y)
 		let es = this.graph.connectionHandler.edgeState;
 
 		if (evt != null && mxEvent.isShiftDown(evt) && mxEvent.isControlDown(evt) && es != null &&
-			mxUtils.getValue(es.style, mxConstants.STYLE_EDGE, null) === 'orthogonalEdgeStyle')
+			mxUtils.getValue(es.style, 'edge', null) === 'orthogonalEdgeStyle')
 		{
 			let direction = this.getDirection();
 			es.cell.style = mxUtils.setStyle(es.cell.style, 'sourcePortConstraint', direction);
@@ -4916,7 +4916,7 @@ Graph.prototype.createCrossFunctionalSwimlane = function(rowCount, colCount, w,
 	
 	let table = this.createVertex(null, null, '', 0, 0,
 		colCount * w, rowCount * h, tableStyle);
-	let t = mxUtils.getValue(this.getCellStyle(table), mxConstants.STYLE_STARTSIZE,
+	let t = mxUtils.getValue(this.getCellStyle(table), 'startSize',
 		mxConstants.DEFAULT_STARTSIZE);
 	table.geometry.width += t;
 	table.geometry.height += t;
@@ -5391,7 +5391,7 @@ TableLayout.prototype.execute = function(parent)
 		
 		// Forces repaint if jumps change on a valid edge
 		if (state != null && recurse && state.cell.isEdge() &&
-			state.style != null && state.style[mxConstants.STYLE_CURVED] != 1 &&
+			state.style != null && state.style.curved != 1 &&
 			!state.invalid && this.updateLineJumps(state))
 		{
 			this.graph.cellRenderer.redraw(state, false, this.isRendering());
@@ -5401,7 +5401,7 @@ TableLayout.prototype.execute = function(parent)
 		
 		// Adds to the list of edges that may intersect with later edges
 		if (state != null && recurse && state.cell.isEdge() &&
-			state.style != null && state.style[mxConstants.STYLE_CURVED] != 1)
+			state.style != null && state.style.curved != 1)
 		{
 			// LATER: Reuse jumps for valid edges
 			this.validEdges.push(state);
@@ -5431,7 +5431,7 @@ TableLayout.prototype.execute = function(parent)
 
 		// Updates jumps on invalid edge before repaint
 		if (state.cell.isEdge() &&
-			state.style[mxConstants.STYLE_CURVED] != 1)
+			state.style.curved != 1)
 		{
 			this.updateLineJumps(state);
 		}
@@ -5592,7 +5592,7 @@ TableLayout.prototype.execute = function(parent)
 		}
 		else
 		{
-			let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
+			let arcSize = mxUtils.getValue(this.style, 'arcSize',
 				mxConstants.LINE_ARCSIZE) / 2;
 			let size = (parseInt(mxUtils.getValue(this.style, 'jumpSize',
 				Graph.defaultJumpSize)) - 2) / 2 + this.strokewidth;
@@ -5720,7 +5720,7 @@ TableLayout.prototype.execute = function(parent)
 		    let next = this.getNextPoint(edge, end, source);
 		    
 		    let orth = this.graph.isOrthogonal(edge);
-		    let alpha = mxUtils.toRadians(Number(start.style[mxConstants.STYLE_ROTATION] || '0'));
+		    let alpha = mxUtils.toRadians(Number(start.style.rotation || '0'));
 		    let center = new mxPoint(start.getCenterX(), start.getCenterY());
 		    
 		    if (alpha != 0)
@@ -5730,10 +5730,10 @@ TableLayout.prototype.execute = function(parent)
 		        next = mxUtils.getRotatedPoint(next, cos, sin, center);
 		    }
 		    
-		    let border = parseFloat(edge.style[mxConstants.STYLE_PERIMETER_SPACING] || 0);
+		    let border = parseFloat(edge.style.perimeterSpacing || 0);
 		    border += parseFloat(edge.style[(source) ?
-		        mxConstants.STYLE_SOURCE_PERIMETER_SPACING :
-		        mxConstants.STYLE_TARGET_PERIMETER_SPACING] || 0);
+		        'sourcePerimeterSpacing' :
+		        'targetPerimeterSpacing'] || 0);
 		    let pt = this.getPerimeterPoint(start, next, alpha == 0 && orth, border);
 		
 		    if (alpha != 0)
@@ -5817,7 +5817,7 @@ TableLayout.prototype.execute = function(parent)
 	{
 		if (state.style != null && typeof(pako) !== 'undefined')
 		{
-	    	let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
+	    	let shape = mxUtils.getValue(state.style, 'shape', null);
 	
 	    	// Extracts and decodes stencil XML if shape has the form shape=stencil(value)
 	    	if (shape != null && typeof shape === 'string' && shape.substring(0, 8) == 'stencil(')
@@ -6200,7 +6200,7 @@ if (typeof mxVertexHandler != 'undefined')
 		{
 			let shape = connectionHandlerCreateShape.apply(this, arguments);
 			
-			shape.isDashed = this.graph.currentEdgeStyle[mxConstants.STYLE_DASHED] == '1';
+			shape.isDashed = this.graph.currentEdgeStyle.dashed == '1';
 			
 			return shape;
 		}
@@ -6548,7 +6548,7 @@ if (typeof mxVertexHandler != 'undefined')
 				!cell.isEdge())
 			{
 				let shape = this.getCurrentCellStyle(cell, ignoreState)
-					[mxConstants.STYLE_SHAPE];
+					.shape;
 				
 				return shape == mxConstants.SHAPE_SWIMLANE || shape == 'table';
 			}
@@ -6985,11 +6985,11 @@ if (typeof mxVertexHandler != 'undefined')
 			if (edge != null)
 			{
 				let style = this.getCurrentCellStyle(edge);
-				let elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,
+				let elbow = mxUtils.getValue(style, 'elbow',
 					mxConstants.ELBOW_HORIZONTAL);
 				let value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
 					mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;
-				this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);
+				this.setCellStyles('elbow', value, [edge]);
 			}
 		};
 
@@ -7185,9 +7185,9 @@ if (typeof mxVertexHandler != 'undefined')
 							{
 								let dirs = [mxConstants.DIRECTION_EAST, mxConstants.DIRECTION_SOUTH,
 									mxConstants.DIRECTION_WEST, mxConstants.DIRECTION_NORTH];
-								let dir = mxUtils.getValue(state.style, mxConstants.STYLE_DIRECTION,
+								let dir = mxUtils.getValue(state.style, 'direction',
 									mxConstants.DIRECTION_EAST);
-								this.setCellStyles(mxConstants.STYLE_DIRECTION,
+								this.setCellStyles('direction',
 									dirs[mxUtils.mod(mxUtils.indexOf(dirs, dir) +
 									((backwards) ? -1 : 1), dirs.length)], [cell]);
 							}
@@ -8235,8 +8235,8 @@ if (typeof mxVertexHandler != 'undefined')
 			let style = this.getCurrentCellStyle(cell);
 				
 			return !this.isTableCell(cell) && !this.isTableRow(cell) && (result ||
-				(mxUtils.getValue(style, mxConstants.STYLE_RESIZABLE, '1') != '0' &&
-				style[mxConstants.STYLE_WHITE_SPACE] == 'wrap'));
+				(mxUtils.getValue(style, 'resizable', '1') != '0' &&
+				style.whiteSpace == 'wrap'));
 		};
 		
 		/**
@@ -9818,22 +9818,22 @@ if (typeof mxVertexHandler != 'undefined')
 					content = this.graph.sanitizeHtml((nl2Br) ? content.replace(/\n/g, '<br/>') : content, true)
 					this.textarea.className = 'mxCellEditor geContentEditable';
 					
-					let size = mxUtils.getValue(state.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE);
-					let family = mxUtils.getValue(state.style, mxConstants.STYLE_FONTFAMILY, mxConstants.DEFAULT_FONTFAMILY);
-					let align = mxUtils.getValue(state.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_LEFT);
-					let bold = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
+					let size = mxUtils.getValue(state.style, 'fontSize', mxConstants.DEFAULT_FONTSIZE);
+					let family = mxUtils.getValue(state.style, 'fontFamily', mxConstants.DEFAULT_FONTFAMILY);
+					let align = mxUtils.getValue(state.style, mxConstants.'align', mxConstants.ALIGN_LEFT);
+					let bold = (mxUtils.getValue(state.style, 'fontStyle', 0) &
 							mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD;
-					let italic = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
+					let italic = (mxUtils.getValue(state.style, 'fontStyle', 0) &
 							mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC;
 					let txtDecor = [];
 					
-					if ((mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
+					if ((mxUtils.getValue(state.style, 'fontStyle', 0) &
 							mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE)
 					{
 						txtDecor.push('underline');
 					}
 					
-					if ((mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
+					if ((mxUtils.getValue(state.style, 'fontStyle', 0) &
 							mxConstants.FONT_STRIKETHROUGH) == mxConstants.FONT_STRIKETHROUGH)
 					{
 						txtDecor.push('line-through');
@@ -9897,8 +9897,8 @@ if (typeof mxVertexHandler != 'undefined')
 						
 						if (m == null)
 						{
-							m = mxUtils.getAlignmentAsPoint(mxUtils.getValue(state.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER),
-									mxUtils.getValue(state.style, mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE));
+							m = mxUtils.getAlignmentAsPoint(mxUtils.getValue(state.style, mxConstants.'align', mxConstants.ALIGN_CENTER),
+									mxUtils.getValue(state.style, mxConstants.'verticalAlign', mxConstants.ALIGN_MIDDLE));
 						}
 						
 						this.bounds.x += m.x * this.bounds.width;
@@ -10038,14 +10038,14 @@ if (typeof mxVertexHandler != 'undefined')
 		 */
 		mxCellEditor.prototype.getBackgroundColor = function(state)
 		{
-			let color = mxUtils.getValue(state.style, mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, null);
+			let color = mxUtils.getValue(state.style, 'backgroundColor', null);
 
 			if ((color == null || color == mxConstants.NONE) &&
 				(state.cell.geometry != null && state.cell.geometry.width > 0) &&
-				(mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0) != 0 ||
-				mxUtils.getValue(state.style, mxConstants.STYLE_HORIZONTAL, 1) == 0))
+				(mxUtils.getValue(state.style, 'rotation', 0) != 0 ||
+				mxUtils.getValue(state.style, 'horizontal', 1) == 0))
 			{
-				color = mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, null);
+				color = mxUtils.getValue(state.style, 'fillColor', null);
 			}
 
 			if (color == mxConstants.NONE)
@@ -10760,7 +10760,7 @@ if (typeof mxVertexHandler != 'undefined')
 											formatHintText(this.roundLength(this.bounds.height / s), unit);
 				}
 				
-				let rot = (this.currentAlpha != null) ? this.currentAlpha : this.state.style[mxConstants.STYLE_ROTATION] || '0';
+				let rot = (this.currentAlpha != null) ? this.currentAlpha : this.state.style.rotation || '0';
 				let bb = mxUtils.getBoundingBox(this.bounds, rot);
 				
 				if (bb == null)
@@ -11413,14 +11413,14 @@ if (typeof mxVertexHandler != 'undefined')
 		// Invokes turn on single click on rotation handle
 		mxVertexHandler.prototype.rotateClick = function()
 		{
-			let stroke = mxUtils.getValue(this.state.style, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE);
-			let fill = mxUtils.getValue(this.state.style, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE);
+			let stroke = mxUtils.getValue(this.state.style, 'strokeColor', mxConstants.NONE);
+			let fill = mxUtils.getValue(this.state.style, 'fillColor', mxConstants.NONE);
 			
 			if (this.state.cell.isVertex() &&
 				stroke == mxConstants.NONE && fill == mxConstants.NONE)
 			{
-				let angle = mxUtils.mod(mxUtils.getValue(this.state.style, mxConstants.STYLE_ROTATION, 0) + 90, 360);
-				this.state.view.graph.setCellStyles(mxConstants.STYLE_ROTATION, angle, [this.state.cell]);
+				let angle = mxUtils.mod(mxUtils.getValue(this.state.style, 'rotation', 0) + 90, 360);
+				this.state.view.graph.setCellStyles('rotation', angle, [this.state.cell]);
 			}
 			else
 			{
@@ -11755,9 +11755,9 @@ if (typeof mxVertexHandler != 'undefined')
 			{
 				let c = new mxPoint(this.state.getCenterX(), this.state.getCenterY());
 				let tmp = new mxRectangle(this.state.x, this.state.y - 22, this.state.width + 24, this.state.height + 22);
-				let bb = mxUtils.getBoundingBox(tmp, this.state.style[mxConstants.STYLE_ROTATION] || '0', c);
+				let bb = mxUtils.getBoundingBox(tmp, this.state.style.rotation || '0', c);
 				let rs = (bb != null) ? mxUtils.getBoundingBox(this.state,
-					this.state.style[mxConstants.STYLE_ROTATION] || '0') : this.state;
+					this.state.style.rotation || '0') : this.state;
 				let tb = (this.state.text != null) ? this.state.text.boundingBox : null;
 				
 				if (bb == null)
diff --git a/docs/stashed/grapheditor/www/js/Menus.js b/docs/stashed/grapheditor/www/js/Menus.js
index a94d9785b..1ccfc6c25 100644
--- a/docs/stashed/grapheditor/www/js/Menus.js
+++ b/docs/stashed/grapheditor/www/js/Menus.js
@@ -53,7 +53,7 @@ Menus.prototype.init = function()
 	{
 		let addItem = mxUtils.bind(this, function(fontname)
 		{
-			let tr = this.styleChange(menu, fontname, [mxConstants.STYLE_FONTFAMILY], [fontname], null, parent, function()
+			let tr = this.styleChange(menu, fontname, .fontFamily, [fontname], null, parent, function()
 			{
 				document.execCommand('fontname', false, fontname);
 			}, function()
@@ -97,7 +97,7 @@ Menus.prototype.init = function()
 			menu.addSeparator(parent);
 		}
 		
-		this.promptChange(menu, mxResources.get('custom') + '...', '', mxConstants.DEFAULT_FONTFAMILY, mxConstants.STYLE_FONTFAMILY, parent, true, mxUtils.bind(this, function(newValue)
+		this.promptChange(menu, mxResources.get('custom') + '...', '', mxConstants.DEFAULT_FONTFAMILY, 'fontFamily', parent, true, mxUtils.bind(this, function(newValue)
 		{
 			if (mxUtils.indexOf(this.customFonts, newValue) < 0)
 			{
@@ -139,7 +139,7 @@ Menus.prototype.init = function()
 		
 		let addItem = mxUtils.bind(this, function(fontsize)
 		{
-			this.styleChange(menu, fontsize, [mxConstants.STYLE_FONTSIZE], [fontsize], null, parent, function()
+			this.styleChange(menu, fontsize, .fontSize, [fontsize], null, parent, function()
 			{
 				if (graph.cellEditor.textarea != null)
 				{
@@ -189,15 +189,15 @@ Menus.prototype.init = function()
 			menu.addSeparator(parent);
 		}
 		
-		this.promptChange(menu, mxResources.get('custom') + '...', '(pt)', '12', mxConstants.STYLE_FONTSIZE, parent, true, mxUtils.bind(this, function(newValue)
+		this.promptChange(menu, mxResources.get('custom') + '...', '(pt)', '12', 'fontSize', parent, true, mxUtils.bind(this, function(newValue)
 		{
 			this.customFontSizes.push(newValue);
 		}));
 	})));
 	this.put('direction', new Menu(mxUtils.bind(this, function(menu, parent)
 	{
-		menu.addItem(mxResources.get('flipH'), null, function() { graph.toggleCellStyles(mxConstants.STYLE_FLIPH, false); }, parent);
-		menu.addItem(mxResources.get('flipV'), null, function() { graph.toggleCellStyles(mxConstants.STYLE_FLIPV, false); }, parent);
+		menu.addItem(mxResources.get('flipH'), null, function() { graph.toggleCellStyles('flipH', false); }, parent);
+		menu.addItem(mxResources.get('flipV'), null, function() { graph.toggleCellStyles('flipV', false); }, parent);
 		this.addMenuItems(menu, ['-', 'rotation'], parent);
 	})));
 	this.put('align', new Menu(mxUtils.bind(this, function(menu, parent)
@@ -863,7 +863,7 @@ Menus.prototype.createStyleChangeFunction = function(keys, values)
 				graph.setCellStyles(keys[i], values[i], cells);
 
 				// Removes CSS alignment to produce consistent output
-				if (keys[i] == mxConstants.STYLE_ALIGN)
+				if (keys[i] == mxConstants.'align')
 				{
 					graph.updateLabelElements(cells, function(elt)
 					{
@@ -873,7 +873,7 @@ Menus.prototype.createStyleChangeFunction = function(keys, values)
 				}
 				
 				// Updates autosize after font changes
-				if (keys[i] == mxConstants.STYLE_FONTFAMILY)
+				if (keys[i] == 'fontFamily')
 				{
 					for (let j = 0; j < cells.length; j++)
 					{
@@ -1164,8 +1164,8 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt)
 	{
 		let hasWaypoints = false;
 
-		if (cell.isEdge() && mxUtils.getValue(state.style, mxConstants.STYLE_EDGE, null) != 'entityRelationEdgeStyle' &&
-			mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) != 'arrow')
+		if (cell.isEdge() && mxUtils.getValue(state.style, 'edge', null) != 'entityRelationEdgeStyle' &&
+			mxUtils.getValue(state.style, 'shape', null) != 'arrow')
 		{
 			let handler = graph.selectionCellsHandler.getHandler(cell);
 			let isWaypoint = false;
@@ -1203,7 +1203,7 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt)
 			this.addMenuItems(menu, ['-', 'editStyle', 'editData', 'editLink'], null, evt);
 	
 			// Shows edit image action if there is an image in the style
-			if (cell.isVertex() && mxUtils.getValue(state.style, mxConstants.STYLE_IMAGE, null) != null)
+			if (cell.isVertex() && mxUtils.getValue(state.style, 'image', null) != null)
 			{
 				menu.addSeparator();
 				this.addMenuItem(menu, 'image', null, evt).firstChild.nextSibling.innerHTML = mxResources.get('editImage') + '...';
diff --git a/docs/stashed/grapheditor/www/js/Shapes.js b/docs/stashed/grapheditor/www/js/Shapes.js
index a324a71d4..f49f92981 100644
--- a/docs/stashed/grapheditor/www/js/Shapes.js
+++ b/docs/stashed/grapheditor/www/js/Shapes.js
@@ -22,7 +22,7 @@
 				
 				if (this.style != null)
 				{
-					events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
+					events = mxUtils.getValue(this.style, mxConstants.'pointerEvents', '1') == '1';
 				}
 				
 				if (!events)
@@ -866,7 +866,7 @@
 	CardShape.prototype.redrawPath = function(c, x, y, w, h)
 	{
 		let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))));
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w, 0), new mxPoint(w, h), new mxPoint(0, h), new mxPoint(0, s)],
 				this.isRounded, arcSize, true);
 		c.end();
@@ -1093,7 +1093,7 @@
 		let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
 
 		let dx = (fixed) ? Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w, 0), new mxPoint(w - dx, h)],
 				this.isRounded, arcSize, true);
 		c.end();
@@ -1119,7 +1119,7 @@
 		let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
 
 		let dx = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w - dx, 0), new mxPoint(w, h)],
 				this.isRounded, arcSize, true);
 	};
@@ -1137,7 +1137,7 @@
 	{
 		c.setFillColor(null);
 		let s = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(w, 0), new mxPoint(s, 0), new mxPoint(s, h / 2),
 		                   new mxPoint(0, h / 2), new mxPoint(s, h / 2), new mxPoint(s, h),
 		                   new mxPoint(w, h)], this.isRounded, arcSize, false);
@@ -1377,7 +1377,7 @@
 			
 			if (this.style != null)
 			{
-				events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';		
+				events = mxUtils.getValue(this.style, mxConstants.'pointerEvents', '1') == '1';
 			}
 			
 			if (events || (this.fill != null && this.fill != mxConstants.NONE) ||
@@ -1394,14 +1394,14 @@
 				{
 					let r = 0;
 					
-					if (mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1')
+					if (mxUtils.getValue(this.style, 'absoluteArcSize', 0) == '1')
 					{
 						r = Math.min(w / 2, Math.min(h / 2, mxUtils.getValue(this.style,
-							mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2));
+							'arcSize', mxConstants.LINE_ARCSIZE) / 2));
 					}
 					else
 					{
-						let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
+						let f = mxUtils.getValue(this.style, 'arcSize',
 							mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
 						r = Math.min(w * f, h * f);
 					}
@@ -1463,7 +1463,7 @@
 	};
 	ProcessShape.prototype.getLabelBounds = function(rect)
 	{
-		if (mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, true) ==
+		if (mxUtils.getValue(this.state.style, 'horizontal', true) ==
 			(this.direction == null ||
 			this.direction == mxConstants.DIRECTION_EAST ||
 			this.direction == mxConstants.DIRECTION_WEST))
@@ -1476,7 +1476,7 @@
 	
 			if (this.isRounded)
 			{
-				let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
+				let f = mxUtils.getValue(this.style, 'arcSize',
 					mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
 				inset = Math.max(inset, Math.min(w * f, h * f));
 			}
@@ -1506,7 +1506,7 @@
 
 		if (this.isRounded)
 		{
-			let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
+			let f = mxUtils.getValue(this.style, 'arcSize',
 				mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
 			inset = Math.max(inset, Math.min(w * f, h * f));
 		}
@@ -1563,7 +1563,7 @@
 	};
 	CalloutShape.prototype.redrawPath = function(c, x, y, w, h)
 	{
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		let s = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
 		let dx = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position', this.position))));
 		var dx2 = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position2', this.position2))));
@@ -1594,7 +1594,7 @@
 		let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
 		let s = (fixed) ? Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) :
 			w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w - s, 0), new mxPoint(w, h / 2), new mxPoint(w - s, h),
 		                   new mxPoint(0, h), new mxPoint(s, h / 2)], this.isRounded, arcSize, true);
 		c.end();
@@ -1619,7 +1619,7 @@
 		let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
 		let s = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) :
 			w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w - s, 0), new mxPoint(w, 0.5 * h), new mxPoint(w - s, h),
 		                   new mxPoint(s, h), new mxPoint(0, 0.5 * h)], this.isRounded, arcSize, true);
 	};
@@ -1659,7 +1659,7 @@
 		if (this.style['double'] == 1)
 		{
 			let margin = (Math.max(2, this.strokewidth + 1) * 2 + parseFloat(
-				this.style[mxConstants.STYLE_MARGIN] || 0)) * this.scale;
+				this.style[mxConstants.'margin'] || 0)) * this.scale;
 		
 			return new mxRectangle(rect.x + margin, rect.y + margin,
 				rect.width - 2 * margin, rect.height - 2 * margin);
@@ -1674,7 +1674,7 @@
 		if (!this.outline && this.style['double'] == 1)
 		{
 			let margin = Math.max(2, this.strokewidth + 1) * 2 +
-				parseFloat(this.style[mxConstants.STYLE_MARGIN] || 0);
+				parseFloat(this.style[mxConstants.'margin'] || 0);
 			x += margin;
 			y += margin;
 			w -= 2 * margin;
@@ -1706,7 +1706,7 @@
 		if (this.style['double'] == 1)
 		{
 			let margin = (Math.max(2, this.strokewidth + 1) + parseFloat(
-				this.style[mxConstants.STYLE_MARGIN] || 0)) * this.scale;
+				this.style[mxConstants.'margin'] || 0)) * this.scale;
 		
 			return new mxRectangle(rect.x + margin, rect.y + margin,
 				rect.width - 2 * margin, rect.height - 2 * margin);
@@ -1721,7 +1721,7 @@
 		{
 			if (!this.outline && this.style['double'] == 1)
 			{
-				let margin = Math.max(2, this.strokewidth + 1) + parseFloat(this.style[mxConstants.STYLE_MARGIN] || 0);
+				let margin = Math.max(2, this.strokewidth + 1) + parseFloat(this.style[mxConstants.'margin'] || 0);
 				x += margin;
 				y += margin;
 				w -= 2 * margin;
@@ -2069,7 +2069,7 @@
 		let co = this.corner;
 		var w0 = Math.min(w, Math.max(co, parseFloat(mxUtils.getValue(this.style, 'width', this.width))));
 		var h0 = Math.min(h, Math.max(co * 1.5, parseFloat(mxUtils.getValue(this.style, 'height', this.height))));
-		let bg = mxUtils.getValue(this.style, mxConstants.STYLE_SWIMLANE_FILLCOLOR, mxConstants.NONE);
+		let bg = mxUtils.getValue(this.style, 'swimlaneFillColor', mxConstants.NONE);
 		
 		if (bg != mxConstants.NONE)
 		{
@@ -2117,7 +2117,7 @@
 			size = mxUtils.getValue(vertex.style, 'size', size) * vertex.view.scale;
 		}
 		
-		let sw = (parseFloat(vertex.style[mxConstants.STYLE_STROKEWIDTH] || 1) * vertex.view.scale / 2) - 1;
+		let sw = (parseFloat(vertex.style.strokeWidth || 1) * vertex.view.scale / 2) - 1;
 
 		if (next.x < bounds.getCenterX())
 		{
@@ -2142,15 +2142,15 @@
 
 	mxPerimeter.BackbonePerimeter = (bounds, vertex, next, orthogonal) =>
 	{
-		let sw = (parseFloat(vertex.style[mxConstants.STYLE_STROKEWIDTH] || 1) * vertex.view.scale / 2) - 1;
+		let sw = (parseFloat(vertex.style.strokeWidth || 1) * vertex.view.scale / 2) - 1;
 		
 		if (vertex.style['backboneSize'] != null)
 		{
 			sw += (parseFloat(vertex.style['backboneSize']) * vertex.view.scale / 2) - 1;
 		}
 		
-		if (vertex.style[mxConstants.STYLE_DIRECTION] == 'south' ||
-			vertex.style[mxConstants.STYLE_DIRECTION] == 'north')
+		if (vertex.style.direction == 'south' ||
+			vertex.style.direction == 'north')
 		{
 			if (next.x < bounds.getCenterX())
 			{
@@ -2209,7 +2209,7 @@
 		let h = bounds.height;
 
 		let direction = (vertex != null) ? mxUtils.getValue(
-			vertex.style, mxConstants.STYLE_DIRECTION,
+			vertex.style, 'direction',
 			mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
 		let vertical = direction == mxConstants.DIRECTION_NORTH ||
 			direction == mxConstants.DIRECTION_SOUTH;
@@ -2272,7 +2272,7 @@
 		let h = bounds.height;
 
 		let direction = (vertex != null) ? mxUtils.getValue(
-				vertex.style, mxConstants.STYLE_DIRECTION,
+				vertex.style, 'direction',
 				mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
 		let points = [];
 		
@@ -2348,7 +2348,7 @@
 		let cy = bounds.getCenterY();
 		
 		let direction = (vertex != null) ? mxUtils.getValue(
-				vertex.style, mxConstants.STYLE_DIRECTION,
+				vertex.style, 'direction',
 				mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
 		var points;
 		
@@ -2425,7 +2425,7 @@
 		let cy = bounds.getCenterY();
 		
 		let direction = (vertex != null) ? mxUtils.getValue(
-			vertex.style, mxConstants.STYLE_DIRECTION,
+			vertex.style, 'direction',
 			mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
 		let vertical = direction == mxConstants.DIRECTION_NORTH ||
 			direction == mxConstants.DIRECTION_SOUTH;
@@ -2676,7 +2676,7 @@
 		let hw = w / 2;
 		let hh = h / 2;
 		
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		c.begin();
 		this.addPoints(c, [new mxPoint(x + hw, y), new mxPoint(x + w, y + hh), new mxPoint(x + hw, y + h),
 		     new mxPoint(x, y + hh)], this.isRounded, arcSize, true);
@@ -2793,7 +2793,7 @@
 	ManualInputShape.prototype.redrawPath = function(c, x, y, w, h)
 	{
 		let s = Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)));
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(0, h), new mxPoint(0, s), new mxPoint(w, 0), new mxPoint(w, h)],
 				this.isRounded, arcSize, true);
 		c.end();
@@ -2820,7 +2820,7 @@
 		
 		if (this.isRounded)
 		{
-			let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
+			let f = mxUtils.getValue(this.style, 'arcSize',
 				mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
 			inset = Math.max(inset, Math.min(w * f, h * f));
 		}
@@ -2859,7 +2859,7 @@
 		let dy = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
 		
 		let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, dy), new mxPoint(dx, dy),
 		                   new mxPoint(dx, h), new mxPoint(0, h)], this.isRounded, arcSize, true);
 		c.end();
@@ -2908,7 +2908,7 @@
 		var w2 = Math.abs(w - dx) / 2;
 		
 		let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, dy), new mxPoint((w + dx) / 2, dy),
 		                   new mxPoint((w + dx) / 2, h), new mxPoint((w - dx) / 2, h), new mxPoint((w - dx) / 2, dy),
 		                   new mxPoint(0, dy)], this.isRounded, arcSize, true);
@@ -2932,7 +2932,7 @@
 		let at = (h - aw) / 2;
 		let ab = at + aw;
 		
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(0, at), new mxPoint(w - as, at), new mxPoint(w - as, 0), new mxPoint(w, h / 2),
 		                   new mxPoint(w - as, h), new mxPoint(w - as, ab), new mxPoint(0, ab)],
 		                   this.isRounded, arcSize, true);
@@ -2954,7 +2954,7 @@
 		let at = (h - aw) / 2;
 		let ab = at + aw;
 		
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(0, h / 2), new mxPoint(as, 0), new mxPoint(as, at), new mxPoint(w - as, at),
 		                   new mxPoint(w - as, 0), new mxPoint(w, h / 2), new mxPoint(w - as, h),
 		                   new mxPoint(w - as, ab), new mxPoint(as, ab), new mxPoint(as, h)],
@@ -3038,7 +3038,7 @@
 	LoopLimitShape.prototype.redrawPath = function(c, x, y, w, h)
 	{
 		let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w - s, 0), new mxPoint(w, s * 0.8), new mxPoint(w, h),
 		                   new mxPoint(0, h), new mxPoint(0, s * 0.8)], this.isRounded, arcSize, true);
 		c.end();
@@ -3060,7 +3060,7 @@
 	OffPageConnectorShape.prototype.redrawPath = function(c, x, y, w, h)
 	{
 		let s = h * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, h - s), new mxPoint(w / 2, h),
 		                   new mxPoint(0, h - s)], this.isRounded, arcSize, true);
 		c.end();
@@ -3236,7 +3236,7 @@
 		if (this.style != null)
 		{
 			let pointerEvents = c.pointerEvents;
-			let events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
+			let events = mxUtils.getValue(this.style, mxConstants.'pointerEvents', '1') == '1';
 			
 			if (!events && (this.fill == null || this.fill == mxConstants.NONE))
 			{
@@ -3760,36 +3760,36 @@
 		
 		function createArcHandle(state, yOffset)
 		{
-			return createHandle(state, [mxConstants.STYLE_ARCSIZE], function(bounds)
+			return createHandle(state, ['arcSize'], function(bounds)
 			{
 				let tmp = (yOffset != null) ? yOffset : bounds.height / 8;
 				
-				if (mxUtils.getValue(state.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1')
+				if (mxUtils.getValue(state.style, 'absoluteArcSize', 0) == '1')
 				{
-					let arcSize = mxUtils.getValue(state.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+					let arcSize = mxUtils.getValue(state.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 					
 					return new mxPoint(bounds.x + bounds.width - Math.min(bounds.width / 2, arcSize), bounds.y + tmp);
 				}
 				else
 				{
 					let arcSize = Math.max(0, parseFloat(mxUtils.getValue(state.style,
-						mxConstants.STYLE_ARCSIZE, mxConstants.RECTANGLE_ROUNDING_FACTOR * 100))) / 100;
+						'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100))) / 100;
 					
 					return new mxPoint(bounds.x + bounds.width - Math.min(Math.max(bounds.width / 2, bounds.height / 2),
 						Math.min(bounds.width, bounds.height) * arcSize), bounds.y + tmp);
 				}
 			}, function(bounds, pt, me)
 			{
-				if (mxUtils.getValue(state.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1')
+				if (mxUtils.getValue(state.style, 'absoluteArcSize', 0) == '1')
 				{
-					this.state.style[mxConstants.STYLE_ARCSIZE] = Math.round(Math.max(0, Math.min(bounds.width,
+					this.state.style['arcSize'] = Math.round(Math.max(0, Math.min(bounds.width,
 						(bounds.x + bounds.width - pt.x) * 2)));
 				}
 				else
 				{
 					let f = Math.min(50, Math.max(0, (bounds.width - pt.x + bounds.x) * 100 /
 						Math.min(bounds.width, bounds.height)));
-					this.state.style[mxConstants.STYLE_ARCSIZE] = Math.round(f);
+					this.state.style['arcSize'] = Math.round(f);
 				}
 			});
 		}
@@ -3800,7 +3800,7 @@
 			{
 				let handles = [];
 				
-				if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
+				if (mxUtils.getValue(state.style, 'rounded', false))
 				{
 					handles.push(createArcHandle(state));
 				}
@@ -3829,7 +3829,7 @@
 					this.state.style['size'] = size;
 				}, false, true)];
 				
-				if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
+				if (mxUtils.getValue(state.style, 'rounded', false))
 				{
 					handles.push(createArcHandle(state));
 				}
@@ -3858,7 +3858,7 @@
 					this.state.style['size'] = size;
 				}, false, redrawEdges)];
 				
-				if (allowArcHandle && mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
+				if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false))
 				{
 					handles.push(createArcHandle(state));
 				}
@@ -3883,7 +3883,7 @@
 							Math.min(bounds.height, pt.y - bounds.y))) / factor);
 				}, false)];
 				
-				if (allowArcHandle && mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
+				if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false))
 				{
 					handles.push(createArcHandle(state));
 				}
@@ -3999,12 +3999,12 @@
 				let tol = state.view.graph.gridSize / state.view.scale;
 				let handles = [];
 				
-				if (mxUtils.getValue(state.style, mxConstants.STYLE_STARTARROW, mxConstants.NONE) != mxConstants.NONE)
+				if (mxUtils.getValue(state.style, mxConstants.'startArrow', mxConstants.NONE) != mxConstants.NONE)
 				{
-					handles.push(createEdgeHandle(state, ['width', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], true, function(dist, nx, ny, p0, p1)
+					handles.push(createEdgeHandle(state, ['width', 'startSize', 'endSize'], true, function(dist, nx, ny, p0, p1)
 					{
 						let w = (state.shape.getEdgeWidth() - state.shape.strokewidth) * state.view.scale;
-						let l = mxUtils.getNumber(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
+						let l = mxUtils.getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
 						
 						return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) + ny * w / 2,
 							p0.y + ny * (l + state.shape.strokewidth * state.view.scale) - nx * w / 2);
@@ -4013,29 +4013,29 @@
 						let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
 						let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
 						
-						state.style[mxConstants.STYLE_STARTSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
+						state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
 						state.style['width'] = Math.round(w * 2) / state.view.scale;
 						
 						// Applies to opposite side
 						if (mxEvent.isControlDown(me.getEvent()))
 						{
-							state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
+							state.style.endSize = state.style.startSize;
 						}
 
 						// Snaps to end geometry
 						if (!mxEvent.isAltDown(me.getEvent()))
 						{
-							if (Math.abs(parseFloat(state.style[mxConstants.STYLE_STARTSIZE]) - parseFloat(state.style[mxConstants.STYLE_ENDSIZE])) < tol / 6)
+							if (Math.abs(parseFloat(state.style.startSize) - parseFloat(state.style.endSize)) < tol / 6)
 							{
-								state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
+								state.style.startSize = state.style.endSize;
 							}
 						}
 					}));
 					
-					handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], true, function(dist, nx, ny, p0, p1)
+					handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', 'startSize', 'endSize'], true, function(dist, nx, ny, p0, p1)
 					{
 						let w = (state.shape.getStartArrowWidth() - state.shape.strokewidth) * state.view.scale;
-						let l = mxUtils.getNumber(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
+						let l = mxUtils.getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
 						
 						return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) + ny * w / 2,
 							p0.y + ny * (l + state.shape.strokewidth * state.view.scale) - nx * w / 2);
@@ -4044,22 +4044,22 @@
 						let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
 						let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
 						
-						state.style[mxConstants.STYLE_STARTSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
+						state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
 						state.style['startWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
 						
 						// Applies to opposite side
 						if (mxEvent.isControlDown(me.getEvent()))
 						{
-							state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
+							state.style.endSize = state.style.startSize;
 							state.style['endWidth'] = state.style['startWidth'];
 						}
 						
 						// Snaps to endWidth
 						if (!mxEvent.isAltDown(me.getEvent()))
 						{
-							if (Math.abs(parseFloat(state.style[mxConstants.STYLE_STARTSIZE]) - parseFloat(state.style[mxConstants.STYLE_ENDSIZE])) < tol / 6)
+							if (Math.abs(parseFloat(state.style.startSize) - parseFloat(state.style.endSize)) < tol / 6)
 							{
-								state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
+								state.style.startSize = state.style.endSize;
 							}
 							
 							if (Math.abs(parseFloat(state.style['startWidth']) - parseFloat(state.style['endWidth'])) < tol)
@@ -4070,12 +4070,12 @@
 					}));
 				}
 				
-				if (mxUtils.getValue(state.style, mxConstants.STYLE_ENDARROW, mxConstants.NONE) != mxConstants.NONE)
+				if (mxUtils.getValue(state.style, mxConstants.'endArrow', mxConstants.NONE) != mxConstants.NONE)
 				{
-					handles.push(createEdgeHandle(state, ['width', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], false, function(dist, nx, ny, p0, p1)
+					handles.push(createEdgeHandle(state, ['width', 'startSize', 'endSize'], false, function(dist, nx, ny, p0, p1)
 					{
 						let w = (state.shape.getEdgeWidth() - state.shape.strokewidth) * state.view.scale;
-						let l = mxUtils.getNumber(state.style, mxConstants.STYLE_ENDSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
+						let l = mxUtils.getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
 						
 						return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) - ny * w / 2,
 							p0.y + ny * (l + state.shape.strokewidth * state.view.scale) + nx * w / 2);
@@ -4084,29 +4084,29 @@
 						let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
 						let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
 						
-						state.style[mxConstants.STYLE_ENDSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
+						state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
 						state.style['width'] = Math.round(w * 2) / state.view.scale;
 						
 						// Applies to opposite side
 						if (mxEvent.isControlDown(me.getEvent()))
 						{
-							state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
+							state.style.startSize = state.style.endSize;
 						}
 					
 						// Snaps to start geometry
 						if (!mxEvent.isAltDown(me.getEvent()))
 						{
-							if (Math.abs(parseFloat(state.style[mxConstants.STYLE_ENDSIZE]) - parseFloat(state.style[mxConstants.STYLE_STARTSIZE])) < tol / 6)
+							if (Math.abs(parseFloat(state.style.endSize) - parseFloat(state.style.startSize)) < tol / 6)
 							{
-								state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
+								state.style.endSize = state.style.startSize;
 							}
 						}
 					}));
 					
-					handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], false, function(dist, nx, ny, p0, p1)
+					handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', 'startSize', 'endSize'], false, function(dist, nx, ny, p0, p1)
 					{
 						let w = (state.shape.getEndArrowWidth() - state.shape.strokewidth) * state.view.scale;
-						let l = mxUtils.getNumber(state.style, mxConstants.STYLE_ENDSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
+						let l = mxUtils.getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
 						
 						return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) - ny * w / 2,
 							p0.y + ny * (l + state.shape.strokewidth * state.view.scale) + nx * w / 2);
@@ -4115,22 +4115,22 @@
 						let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
 						let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
 						
-						state.style[mxConstants.STYLE_ENDSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
+						state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
 						state.style['endWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
 						
 						// Applies to opposite side
 						if (mxEvent.isControlDown(me.getEvent()))
 						{
-							state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
+							state.style.startSize = state.style.endSize;
 							state.style['startWidth'] = state.style['endWidth'];
 						}
 					
 						// Snaps to start geometry
 						if (!mxEvent.isAltDown(me.getEvent()))
 						{
-							if (Math.abs(parseFloat(state.style[mxConstants.STYLE_ENDSIZE]) - parseFloat(state.style[mxConstants.STYLE_STARTSIZE])) < tol / 6)
+							if (Math.abs(parseFloat(state.style.endSize) - parseFloat(state.style.startSize)) < tol / 6)
 							{
-								state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
+								state.style.endSize = state.style.startSize;
 							}
 							
 							if (Math.abs(parseFloat(state.style['endWidth']) - parseFloat(state.style['startWidth'])) < tol)
@@ -4147,18 +4147,18 @@
 			{
 				let handles = [];
 				
-				if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED))
+				if (mxUtils.getValue(state.style, 'rounded'))
 				{
-					let size = parseFloat(mxUtils.getValue(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_STARTSIZE));
+					let size = parseFloat(mxUtils.getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE));
 					handles.push(createArcHandle(state, size / 2));
 				}
 				
 				// Start size handle must be last item in handles for hover to work in tables (see mouse event handler in Graph)
-				handles.push(createHandle(state, [mxConstants.STYLE_STARTSIZE], function(bounds)
+				handles.push(createHandle(state, .startSize, function(bounds)
 				{
-					let size = parseFloat(mxUtils.getValue(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_STARTSIZE));
+					let size = parseFloat(mxUtils.getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE));
 					
-					if (mxUtils.getValue(state.style, mxConstants.STYLE_HORIZONTAL, 1) == 1)
+					if (mxUtils.getValue(state.style, 'horizontal', 1) == 1)
 					{
 						return new mxPoint(bounds.getCenterX(), bounds.y + Math.max(0, Math.min(bounds.height, size)));
 					}
@@ -4168,8 +4168,8 @@
 					}
 				}, function(bounds, pt)
 				{	
-					state.style[mxConstants.STYLE_STARTSIZE] =
-						(mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, 1) == 1) ?
+					state.style.startSize =
+						(mxUtils.getValue(this.state.style, 'horizontal', 1) == 1) ?
 							Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))) :
 							Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
 				}, false, null, function(me)
@@ -4196,8 +4196,8 @@
 								}
 							}
 							
-							graph.setCellStyles(mxConstants.STYLE_STARTSIZE,
-								state.style[mxConstants.STYLE_STARTSIZE], temp);
+							graph.setCellStyles('startSize',
+								state.style.startSize, temp);
 						}
 					}					
 				}));
@@ -4253,7 +4253,7 @@
 					this.state.style['size'] = size;
 				}, false)];
 				
-				if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
+				if (mxUtils.getValue(state.style, 'rounded', false))
 				{
 					handles.push(createArcHandle(state));
 				}
@@ -4315,7 +4315,7 @@
 					this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * 4 / 3)));
 				}, false)];
 				
-				if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
+				if (mxUtils.getValue(state.style, 'rounded', false))
 				{
 					handles.push(createArcHandle(state));
 				}
@@ -4374,7 +4374,7 @@
 					this.state.style['base'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x - position * bounds.width)));
 				}, false)];
 				
-				if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
+				if (mxUtils.getValue(state.style, 'rounded', false))
 				{
 					handles.push(createArcHandle(state));
 				}
@@ -4395,7 +4395,7 @@
 					this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
 				}, false)];
 				
-				if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
+				if (mxUtils.getValue(state.style, 'rounded', false))
 				{
 					handles.push(createArcHandle(state));
 				}
@@ -4777,7 +4777,7 @@
 	CalloutShape.prototype.getConstraints = function(style, w, h)
 	{
 		let constr = [];
-		let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
+		let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
 		let s = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
 		let dx = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position', this.position))));
 		var dx2 = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position2', this.position2))));
diff --git a/docs/stashed/grapheditor/www/js/Sidebar.js b/docs/stashed/grapheditor/www/js/Sidebar.js
index eda6492cf..eb0cc22b5 100644
--- a/docs/stashed/grapheditor/www/js/Sidebar.js
+++ b/docs/stashed/grapheditor/www/js/Sidebar.js
@@ -2639,11 +2639,11 @@ Sidebar.prototype.updateShapes = function(source, targets)
 				}
 
 				// Replaces the participant style in the lifeline shape with the target shape
-				if (style[mxConstants.STYLE_SHAPE] == 'umlLifeline' &&
-					sourceCellStyle[mxConstants.STYLE_SHAPE] != 'umlLifeline')
+				if (style.shape == 'umlLifeline' &&
+					sourceCellStyle.shape != 'umlLifeline')
 				{
-					graph.setCellStyles(mxConstants.STYLE_SHAPE, 'umlLifeline', [targetCell]);
-					graph.setCellStyles('participant', sourceCellStyle[mxConstants.STYLE_SHAPE], [targetCell]);
+					graph.setCellStyles('shape', 'umlLifeline', [targetCell]);
+					graph.setCellStyles('participant', sourceCellStyle.shape, [targetCell]);
 				}
 				
 				for (let j = 0; j < styles.length; j++)
@@ -3143,8 +3143,8 @@ Sidebar.prototype.isDropStyleEnabled = function(cells, firstVertex)
 		
 		if (vstyle != null)
 		{
-			result = mxUtils.getValue(vstyle, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE) != mxConstants.NONE ||
-				mxUtils.getValue(vstyle, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) != mxConstants.NONE;
+			result = mxUtils.getValue(vstyle, 'strokeColor', mxConstants.NONE) != mxConstants.NONE ||
+				mxUtils.getValue(vstyle, 'fillColor', mxConstants.NONE) != mxConstants.NONE;
 		}
 	}
 	
@@ -3498,11 +3498,11 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
 		// Shift means disabled, delayed on cells with children, shows after this.dropTargetDelay, hides after 2500ms
 		if (dropStyleEnabled && (timeOnTarget < 2500) && state != null && !mxEvent.isShiftDown(evt) &&
 			// If shape is equal or target has no stroke, fill and gradient then use longer delay except for images
-			(((mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE) != mxUtils.getValue(sourceCellStyle, mxConstants.STYLE_SHAPE) &&
-			(mxUtils.getValue(state.style, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE) != mxConstants.NONE ||
-			mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) != mxConstants.NONE ||
-			mxUtils.getValue(state.style, mxConstants.STYLE_GRADIENTCOLOR, mxConstants.NONE) != mxConstants.NONE)) ||
-			mxUtils.getValue(sourceCellStyle, mxConstants.STYLE_SHAPE) == 'image') ||
+			(((mxUtils.getValue(state.style, 'shape') != mxUtils.getValue(sourceCellStyle, 'shape') &&
+			(mxUtils.getValue(state.style, 'strokeColor', mxConstants.NONE) != mxConstants.NONE ||
+			mxUtils.getValue(state.style, 'fillColor', mxConstants.NONE) != mxConstants.NONE ||
+			mxUtils.getValue(state.style, 'gradientColor', mxConstants.NONE) != mxConstants.NONE)) ||
+			mxUtils.getValue(sourceCellStyle, 'shape') == 'image') ||
 			timeOnTarget > 1500 || state.cell.isEdge()) && (timeOnTarget > this.dropTargetDelay) &&
 			!this.isDropStyleTargetIgnored(state) && ((state.cell.isVertex() && firstVertex != null) ||
 			(state.cell.isEdge() && cells[0].isEdge())))
diff --git a/docs/stashed/grapheditor/www/js/Toolbar.js b/docs/stashed/grapheditor/www/js/Toolbar.js
index 5e7423f9c..ce4f48857 100644
--- a/docs/stashed/grapheditor/www/js/Toolbar.js
+++ b/docs/stashed/grapheditor/www/js/Toolbar.js
@@ -143,10 +143,10 @@ Toolbar.prototype.init = function()
 		{
 			this.edgeShapeMenu = this.addMenuFunction('', mxResources.get('connection'), false, mxUtils.bind(this, function(menu)
 			{
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_SHAPE, 'width'], [null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_SHAPE, 'width'], ['link', null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_SHAPE, 'width'], ['flexArrow', null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_SHAPE, 'width'], ['arrow', null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], [null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], ['link', null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], ['flexArrow', null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], ['arrow', null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow'));
 			}));
 	
 			this.addDropDownArrow(this.edgeShapeMenu, 'geSprite-connection', 44, 50, 0, 0, 22, -4);
@@ -154,14 +154,14 @@ Toolbar.prototype.init = function()
 	
 		this.edgeStyleMenu = this.addMenuFunction('geSprite-orthogonal', mxResources.get('waypoints'), false, mxUtils.bind(this, function(menu)
 		{
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved'));
-			this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved'));
+			this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation'));
 		}));
 		
 		this.addDropDownArrow(this.edgeStyleMenu, 'geSprite-orthogonal', 44, 50, 0, 0, 22, -4);
diff --git a/packages/core/src/editor/mxEditor.js b/packages/core/src/editor/mxEditor.js
index c028428c6..6f16647a3 100644
--- a/packages/core/src/editor/mxEditor.js
+++ b/packages/core/src/editor/mxEditor.js
@@ -30,9 +30,6 @@ import {
   FONT_BOLD,
   FONT_ITALIC,
   FONT_UNDERLINE,
-  STYLE_ALIGN,
-  STYLE_FONTSTYLE,
-  STYLE_VERTICAL_ALIGN,
 } from '../util/mxConstants';
 import mxGraph from '../view/graph/mxGraph';
 import mxSwimlaneManager from '../view/graph/mxSwimlaneManager';
@@ -1203,19 +1200,19 @@ class mxEditor extends mxEventSource {
 
     this.addAction('bold', (editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.toggleCellStyleFlags(STYLE_FONTSTYLE, FONT_BOLD);
+        editor.graph.toggleCellStyleFlags('fontStyle', FONT_BOLD);
       }
     });
 
     this.addAction('italic', (editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.toggleCellStyleFlags(STYLE_FONTSTYLE, FONT_ITALIC);
+        editor.graph.toggleCellStyleFlags('fontStyle', FONT_ITALIC);
       }
     });
 
     this.addAction('underline', (editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.toggleCellStyleFlags(STYLE_FONTSTYLE, FONT_UNDERLINE);
+        editor.graph.toggleCellStyleFlags('fontStyle', FONT_UNDERLINE);
       }
     });
 
@@ -1256,36 +1253,36 @@ class mxEditor extends mxEventSource {
     });
 
     this.addAction('alignFontLeft', (editor) => {
-      editor.graph.setCellStyles(STYLE_ALIGN, ALIGN_LEFT);
+      editor.graph.setCellStyles('align', ALIGN_LEFT);
     });
 
     this.addAction('alignFontCenter', (editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.setCellStyles(STYLE_ALIGN, ALIGN_CENTER);
+        editor.graph.setCellStyles('align', ALIGN_CENTER);
       }
     });
 
     this.addAction('alignFontRight', (editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.setCellStyles(STYLE_ALIGN, ALIGN_RIGHT);
+        editor.graph.setCellStyles('align', ALIGN_RIGHT);
       }
     });
 
     this.addAction('alignFontTop', (editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.setCellStyles(STYLE_VERTICAL_ALIGN, ALIGN_TOP);
+        editor.graph.setCellStyles('verticalAlign', ALIGN_TOP);
       }
     });
 
     this.addAction('alignFontMiddle', (editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.setCellStyles(STYLE_VERTICAL_ALIGN, ALIGN_MIDDLE);
+        editor.graph.setCellStyles('verticalAlign', ALIGN_MIDDLE);
       }
     });
 
     this.addAction('alignFontBottom', (editor) => {
       if (editor.graph.isEnabled()) {
-        editor.graph.setCellStyles(STYLE_VERTICAL_ALIGN, ALIGN_BOTTOM);
+        editor.graph.setCellStyles('verticalAlign', ALIGN_BOTTOM);
       }
     });
 
diff --git a/packages/core/src/handler/mxCellHighlight.ts b/packages/core/src/handler/mxCellHighlight.ts
index cc26f32bc..8540804ad 100644
--- a/packages/core/src/handler/mxCellHighlight.ts
+++ b/packages/core/src/handler/mxCellHighlight.ts
@@ -9,7 +9,6 @@ import {
   DIALECT_SVG,
   HIGHLIGHT_OPACITY,
   HIGHLIGHT_STROKEWIDTH,
-  STYLE_ROTATION,
 } from '../util/mxConstants';
 import mxEvent from '../util/event/mxEvent';
 import mxRectangle from '../util/datatypes/mxRectangle';
@@ -216,7 +215,7 @@ class mxCellHighlight {
           this.state.width + 2 * this.spacing,
           this.state.height + 2 * this.spacing
         );
-        this.shape.rotation = Number(this.state.style[STYLE_ROTATION] || '0');
+        this.shape.rotation = Number(this.state.style.rotation || '0');
         this.shape.strokewidth =
           <number>this.getStrokeWidth() / this.state.view.scale;
         this.shape.outline = true;
diff --git a/packages/core/src/handler/mxConnectionHandler.js b/packages/core/src/handler/mxConnectionHandler.js
index dd60bf6fe..1fed24390 100644
--- a/packages/core/src/handler/mxConnectionHandler.js
+++ b/packages/core/src/handler/mxConnectionHandler.js
@@ -16,11 +16,6 @@ import {
   INVALID_COLOR,
   OUTLINE_HIGHLIGHT_COLOR,
   OUTLINE_HIGHLIGHT_STROKEWIDTH,
-  STYLE_ENTRY_X,
-  STYLE_ENTRY_Y,
-  STYLE_EXIT_X,
-  STYLE_EXIT_Y,
-  STYLE_ROTATION,
   TOOLTIP_VERTICAL_OFFSET,
   VALID_COLOR,
 } from '../util/mxConstants';
@@ -927,7 +922,7 @@ class mxConnectionHandler extends mxEventSource {
       cy = size.height !== 0 ? state.y + (size.height * scale) / 2 : cy;
 
       const alpha = mxUtils.toRadians(
-        mxUtils.getValue(state.style, STYLE_ROTATION) || 0
+        mxUtils.getValue(state.style, 'rotation') || 0
       );
 
       if (alpha !== 0) {
@@ -1565,16 +1560,16 @@ class mxConnectionHandler extends mxEventSource {
   updateEdgeState(current, constraint) {
     // TODO: Use generic method for writing constraint to style
     if (this.sourceConstraint != null && this.sourceConstraint.point != null) {
-      this.edgeState.style[STYLE_EXIT_X] = this.sourceConstraint.point.x;
-      this.edgeState.style[STYLE_EXIT_Y] = this.sourceConstraint.point.y;
+      this.edgeState.style.exitX = this.sourceConstraint.point.x;
+      this.edgeState.style.exitY = this.sourceConstraint.point.y;
     }
 
     if (constraint != null && constraint.point != null) {
-      this.edgeState.style[STYLE_ENTRY_X] = constraint.point.x;
-      this.edgeState.style[STYLE_ENTRY_Y] = constraint.point.y;
+      this.edgeState.style.entryX = constraint.point.x;
+      this.edgeState.style.entryY = constraint.point.y;
     } else {
-      delete this.edgeState.style[STYLE_ENTRY_X];
-      delete this.edgeState.style[STYLE_ENTRY_Y];
+      delete this.edgeState.style.entryX;
+      delete this.edgeState.style.entryY;
     }
 
     this.edgeState.absolutePoints = [
@@ -1690,7 +1685,7 @@ class mxConnectionHandler extends mxEventSource {
     const c = new mxPoint(state.getCenterX(), state.getCenterY());
 
     if (sourcePerimeter != null) {
-      const theta = mxUtils.getValue(state.style, STYLE_ROTATION, 0);
+      const theta = mxUtils.getValue(state.style, 'rotation', 0);
       const rad = -theta * (Math.PI / 180);
 
       if (theta !== 0) {
diff --git a/packages/core/src/handler/mxEdgeHandler.js b/packages/core/src/handler/mxEdgeHandler.js
index c4a46129f..b8f7f72b7 100644
--- a/packages/core/src/handler/mxEdgeHandler.js
+++ b/packages/core/src/handler/mxEdgeHandler.js
@@ -30,14 +30,6 @@ import {
   NONE,
   OUTLINE_HIGHLIGHT_COLOR,
   OUTLINE_HIGHLIGHT_STROKEWIDTH,
-  STYLE_EDGE,
-  STYLE_ENTRY_X,
-  STYLE_ENTRY_Y,
-  STYLE_EXIT_X,
-  STYLE_EXIT_Y,
-  STYLE_NOEDGESTYLE,
-  STYLE_ROTATION,
-  STYLE_SHAPE,
 } from '../util/mxConstants';
 import mxUtils from '../util/mxUtils';
 import mxImageShape from '../shape/node/mxImageShape';
@@ -360,7 +352,7 @@ class mxEdgeHandler {
           this.parentHighlight.dialect = DIALECT_SVG;
           this.parentHighlight.pointerEvents = false;
           this.parentHighlight.rotation = Number(
-            pstate.style[STYLE_ROTATION] || '0'
+            pstate.style.rotation || '0'
           );
           this.parentHighlight.init(this.graph.getView().getOverlayPane());
           this.parentHighlight.redraw();
@@ -474,10 +466,10 @@ class mxEdgeHandler {
   isVirtualBendsEnabled(evt) {
     return (
       this.virtualBendsEnabled &&
-      (this.state.style[STYLE_EDGE] == null ||
-        this.state.style[STYLE_EDGE] === NONE ||
-        this.state.style[STYLE_NOEDGESTYLE] === 1) &&
-      mxUtils.getValue(this.state.style, STYLE_SHAPE, null) != 'arrow'
+      (this.state.style.edge == null ||
+        this.state.style.edge === NONE ||
+        this.state.style.noEdgeStyle == 1) &&
+      mxUtils.getValue(this.state.style, 'shape', null) != 'arrow'
     );
   }
 
@@ -1560,13 +1552,13 @@ class mxEdgeHandler {
 
     if (this.isSource || this.isTarget) {
       if (constraint != null && constraint.point != null) {
-        edge.style[this.isSource ? STYLE_EXIT_X : STYLE_ENTRY_X] =
+        edge.style[this.isSource ? 'exitX' : 'entryX'] =
           constraint.point.x;
-        edge.style[this.isSource ? STYLE_EXIT_Y : STYLE_ENTRY_Y] =
+        edge.style[this.isSource ? 'exitY' : 'entryY'] =
           constraint.point.y;
       } else {
-        delete edge.style[this.isSource ? STYLE_EXIT_X : STYLE_ENTRY_X];
-        delete edge.style[this.isSource ? STYLE_EXIT_Y : STYLE_ENTRY_Y];
+        delete edge.style[this.isSource ? 'exitX' : 'entryX'];
+        delete edge.style[this.isSource ? 'exitY' : 'entryY'];
       }
     }
 
diff --git a/packages/core/src/handler/mxElbowEdgeHandler.js b/packages/core/src/handler/mxElbowEdgeHandler.js
index cdc805ab5..ef1796c83 100644
--- a/packages/core/src/handler/mxElbowEdgeHandler.js
+++ b/packages/core/src/handler/mxElbowEdgeHandler.js
@@ -11,8 +11,6 @@ import {
   EDGESTYLE_TOPTOBOTTOM,
   ELBOW_VERTICAL,
   HANDLE_SIZE,
-  STYLE_EDGE,
-  STYLE_ELBOW,
 } from '../util/mxConstants';
 import mxEvent from '../util/event/mxEvent';
 import mxPoint from '../util/datatypes/mxPoint';
@@ -125,11 +123,11 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
    */
   // getCursorForBend(): string;
   getCursorForBend() {
-    return this.state.style[STYLE_EDGE] === mxEdgeStyle.TopToBottom ||
-      this.state.style[STYLE_EDGE] === EDGESTYLE_TOPTOBOTTOM ||
-      ((this.state.style[STYLE_EDGE] === mxEdgeStyle.ElbowConnector ||
-        this.state.style[STYLE_EDGE] === EDGESTYLE_ELBOW) &&
-        this.state.style[STYLE_ELBOW] === ELBOW_VERTICAL)
+    return this.state.style.edge === mxEdgeStyle.TopToBottom ||
+      this.state.style.edge === EDGESTYLE_TOPTOBOTTOM ||
+      ((this.state.style.edge === mxEdgeStyle.ElbowConnector ||
+        this.state.style.edge === EDGESTYLE_ELBOW) &&
+        this.state.style['elbow'] === ELBOW_VERTICAL)
       ? 'row-resize'
       : 'col-resize';
   }
diff --git a/packages/core/src/handler/mxGraphHandler.js b/packages/core/src/handler/mxGraphHandler.js
index 0f0a4e4bb..e16fa9367 100644
--- a/packages/core/src/handler/mxGraphHandler.js
+++ b/packages/core/src/handler/mxGraphHandler.js
@@ -18,7 +18,6 @@ import {
   DIALECT_SVG,
   DROP_TARGET_COLOR,
   INVALID_CONNECT_TARGET_COLOR,
-  STYLE_ROTATION,
   VALID_COLOR,
 } from '../util/mxConstants';
 import mxDictionary from '../util/datatypes/mxDictionary';
@@ -1709,7 +1708,7 @@ class mxGraphHandler {
           getClientY(evt)
         );
         const alpha = mxUtils.toRadians(
-          mxUtils.getValue(pState.style, STYLE_ROTATION) || 0
+          mxUtils.getValue(pState.style, 'rotation') || 0
         );
 
         if (alpha !== 0) {
diff --git a/packages/core/src/handler/mxVertexHandler.js b/packages/core/src/handler/mxVertexHandler.js
index db7935d02..5408b6e70 100644
--- a/packages/core/src/handler/mxVertexHandler.js
+++ b/packages/core/src/handler/mxVertexHandler.js
@@ -16,8 +16,6 @@ import {
   HANDLE_STROKECOLOR,
   LABEL_HANDLE_FILLCOLOR,
   LABEL_HANDLE_SIZE,
-  STYLE_ASPECT,
-  STYLE_ROTATION,
   VERTEX_SELECTION_COLOR,
   VERTEX_SELECTION_DASHED,
   VERTEX_SELECTION_STROKEWIDTH,
@@ -250,7 +248,7 @@ class mxVertexHandler {
     this.selectionBorder.dialect = DIALECT_SVG;
     this.selectionBorder.pointerEvents = false;
     this.selectionBorder.rotation = Number(
-      this.state.style[STYLE_ROTATION] || '0'
+      this.state.style.rotation || '0'
     );
     this.selectionBorder.init(this.graph.getView().getOverlayPane());
     mxEvent.redirectMouseEvents(
@@ -369,7 +367,7 @@ class mxVertexHandler {
   // isConstrainedEvent(me: mxMouseEvent): boolean;
   isConstrainedEvent(me) {
     return (
-      isShiftDown(me.getEvent()) || this.state.style[STYLE_ASPECT] === 'fixed'
+      isShiftDown(me.getEvent()) || this.state.style.aspect === 'fixed'
     );
   }
 
@@ -765,7 +763,7 @@ class mxVertexHandler {
           if (
             !(
               mxClient.IS_SVG &&
-              Number(this.state.style[STYLE_ROTATION] || '0') !== 0
+              Number(this.state.style.rotation || '0') !== 0
             ) &&
             this.state.text != null &&
             this.state.text.node.parentNode === this.graph.container
@@ -1082,7 +1080,7 @@ class mxVertexHandler {
   // resizeVertex(me: mxMouseEvent): void;
   resizeVertex(me) {
     const ct = new mxPoint(this.state.getCenterX(), this.state.getCenterY());
-    const alpha = mxUtils.toRadians(this.state.style[STYLE_ROTATION] || '0');
+    const alpha = mxUtils.toRadians(this.state.style.rotation || '0');
     const point = new mxPoint(me.getGraphX(), me.getGraphY());
     const tr = this.graph.view.translate;
     const { scale } = this.graph.view;
@@ -1389,7 +1387,7 @@ class mxVertexHandler {
         } else if (index === mxEvent.ROTATION_HANDLE) {
           if (this.currentAlpha != null) {
             const delta =
-              this.currentAlpha - (this.state.style[STYLE_ROTATION] || 0);
+              this.currentAlpha - (this.state.style.rotation || 0);
 
             if (delta !== 0) {
               this.rotateCell(this.state.cell, delta);
@@ -1400,7 +1398,7 @@ class mxVertexHandler {
         } else {
           const gridEnabled = this.graph.isGridEnabledEvent(me.getEvent());
           const alpha = mxUtils.toRadians(
-            this.state.style[STYLE_ROTATION] || '0'
+            this.state.style.rotation || '0'
           );
           const cos = Math.cos(-alpha);
           const sin = Math.sin(-alpha);
@@ -1475,8 +1473,8 @@ class mxVertexHandler {
       if (cell.isVertex() || cell.isEdge()) {
         if (!cell.isEdge()) {
           const style = this.graph.getCurrentCellStyle(cell);
-          const total = (style[STYLE_ROTATION] || 0) + angle;
-          this.graph.setCellStyles(STYLE_ROTATION, total, [cell]);
+          const total = (style.rotation || 0) + angle;
+          this.graph.setCellStyles('rotation', total, [cell]);
         }
 
         let geo = cell.getGeometry();
@@ -1591,7 +1589,7 @@ class mxVertexHandler {
     if (geo != null) {
       if (index === mxEvent.LABEL_HANDLE) {
         const alpha = -mxUtils.toRadians(
-          this.state.style[STYLE_ROTATION] || '0'
+          this.state.style.rotation || '0'
         );
         const cos = Math.cos(alpha);
         const sin = Math.sin(alpha);
@@ -1696,13 +1694,13 @@ class mxVertexHandler {
    *   let s = this.state;
    *
    *   if (this.graph.isHtmlLabel(s.cell) && (index == 3 || index == 4) &&
-   *       s.text != null && s.style[mxConstants.STYLE_WHITE_SPACE] == 'wrap')
+   *       s.text != null && s.style.whiteSpace == 'wrap')
    *   {
    *     let label = this.graph.getLabel(s.cell);
-   *     let fontSize = mxUtils.getNumber(s.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE);
+   *     let fontSize = mxUtils.getNumber(s.style, 'fontSize', mxConstants.DEFAULT_FONTSIZE);
    *     let ww = result.width / s.view.scale - s.text.spacingRight - s.text.spacingLeft
    *
-   *     result.height = mxUtils.getSizeForString(label, fontSize, s.style[mxConstants.STYLE_FONTFAMILY], ww).height;
+   *     result.height = mxUtils.getSizeForString(label, fontSize, s.style.fontFamily, ww).height;
    *   }
    *
    *   return result;
@@ -2002,7 +2000,7 @@ class mxVertexHandler {
           ];
 
           const alpha = mxUtils.toRadians(
-            this.state.style[STYLE_ROTATION] || '0'
+            this.state.style.rotation || '0'
           );
           const cos = Math.cos(alpha);
           const sin = Math.sin(alpha);
@@ -2075,7 +2073,7 @@ class mxVertexHandler {
       const alpha = mxUtils.toRadians(
         this.currentAlpha != null
           ? this.currentAlpha
-          : this.state.style[STYLE_ROTATION] || '0'
+          : this.state.style.rotation || '0'
       );
       const cos = Math.cos(alpha);
       const sin = Math.sin(alpha);
@@ -2101,7 +2099,7 @@ class mxVertexHandler {
 
     if (this.selectionBorder != null) {
       this.selectionBorder.rotation = Number(
-        this.state.style[STYLE_ROTATION] || '0'
+        this.state.style.rotation || '0'
       );
     }
 
@@ -2194,7 +2192,7 @@ class mxVertexHandler {
           this.parentHighlight.dialect = DIALECT_SVG;
           this.parentHighlight.pointerEvents = false;
           this.parentHighlight.rotation = Number(
-            pstate.style[STYLE_ROTATION] || '0'
+            pstate.style.rotation || '0'
           );
           this.parentHighlight.init(this.graph.getView().getOverlayPane());
           this.parentHighlight.redraw();
@@ -2224,7 +2222,7 @@ class mxVertexHandler {
         );
       }
 
-      this.preview.rotation = Number(this.state.style[STYLE_ROTATION] || '0');
+      this.preview.rotation = Number(this.state.style.rotation || '0');
       this.preview.redraw();
     }
 
diff --git a/packages/core/src/layout/mxGraphLayout.js b/packages/core/src/layout/mxGraphLayout.js
index 35422b799..00b3a85fe 100644
--- a/packages/core/src/layout/mxGraphLayout.js
+++ b/packages/core/src/layout/mxGraphLayout.js
@@ -9,7 +9,6 @@ import mxDictionary from '../util/datatypes/mxDictionary';
 import mxRectangle from '../util/datatypes/mxRectangle';
 import mxGeometry from '../util/datatypes/mxGeometry';
 import mxPoint from '../util/datatypes/mxPoint';
-import { STYLE_NOEDGESTYLE, STYLE_ORTHOGONAL } from '../util/mxConstants';
 
 /**
  * @class mxGraphLayout
@@ -238,7 +237,7 @@ class mxGraphLayout {
    */
   // setEdgeStyleEnabled(edge: mxCell, value: any): void;
   setEdgeStyleEnabled(edge, value) {
-    this.graph.setCellStyles(STYLE_NOEDGESTYLE, value ? '0' : '1', [edge]);
+    this.graph.setCellStyles('noEdgeStyle', value ? '0' : '1', [edge]);
   }
 
   /**
@@ -246,7 +245,7 @@ class mxGraphLayout {
    */
   // setOrthogonalEdge(edge: mxCell, value: any): void;
   setOrthogonalEdge(edge, value) {
-    this.graph.setCellStyles(STYLE_ORTHOGONAL, value ? '1' : '0', [edge]);
+    this.graph.setCellStyles('orthogonal', value ? '1' : '0', [edge]);
   }
 
   /**
diff --git a/packages/core/src/layout/mxStackLayout.js b/packages/core/src/layout/mxStackLayout.js
index 03fecdf84..b8221cd96 100644
--- a/packages/core/src/layout/mxStackLayout.js
+++ b/packages/core/src/layout/mxStackLayout.js
@@ -9,9 +9,6 @@ import mxRectangle from '../util/datatypes/mxRectangle';
 import mxUtils from '../util/mxUtils';
 import {
   DEFAULT_STARTSIZE,
-  STYLE_HORIZONTAL,
-  STYLE_STARTSIZE,
-  STYLE_STROKEWIDTH,
 } from '../util/mxConstants';
 
 /**
@@ -316,10 +313,10 @@ class mxStackLayout extends mxGraphLayout {
         const style = this.graph.getCellStyle(parent);
         let start = mxUtils.getNumber(
           style,
-          STYLE_STARTSIZE,
+          'startSize',
           DEFAULT_STARTSIZE
         );
-        const horz = mxUtils.getValue(style, STYLE_HORIZONTAL, true) == 1;
+        const horz = mxUtils.getValue(style, 'horizontal', true) == 1;
 
         if (pgeo != null) {
           if (horz) {
@@ -381,7 +378,7 @@ class mxStackLayout extends mxGraphLayout {
 
             if (!this.borderCollapse) {
               const childStyle = this.graph.getCellStyle(child);
-              sw = mxUtils.getNumber(childStyle, STYLE_STROKEWIDTH, 1);
+              sw = mxUtils.getNumber(childStyle, 'strokeWidth', 1);
             }
 
             if (last != null) {
diff --git a/packages/core/src/shape/edge/mxArrowConnector.js b/packages/core/src/shape/edge/mxArrowConnector.js
index 4488399a4..186fc956a 100644
--- a/packages/core/src/shape/edge/mxArrowConnector.js
+++ b/packages/core/src/shape/edge/mxArrowConnector.js
@@ -10,11 +10,6 @@ import {
   ARROW_SPACING,
   ARROW_WIDTH,
   NONE,
-  STYLE_ENDARROW,
-  STYLE_ENDSIZE,
-  STYLE_STARTARROW,
-  STYLE_STARTSIZE,
-  STYLE_STROKEWIDTH,
 } from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
 
@@ -71,9 +66,9 @@ class mxArrowConnector extends mxShape {
 
     if (this.style != null) {
       this.startSize =
-        mxUtils.getNumber(this.style, STYLE_STARTSIZE, ARROW_SIZE / 5) * 3;
+        mxUtils.getNumber(this.style, 'startSize', ARROW_SIZE / 5) * 3;
       this.endSize =
-        mxUtils.getNumber(this.style, STYLE_ENDSIZE, ARROW_SIZE / 5) * 3;
+        mxUtils.getNumber(this.style, 'endSize', ARROW_SIZE / 5) * 3;
     }
   }
 
@@ -108,7 +103,7 @@ class mxArrowConnector extends mxShape {
     if (this.outline) {
       strokeWidth = Math.max(
         1,
-        mxUtils.getNumber(this.style, STYLE_STROKEWIDTH, this.strokewidth)
+        mxUtils.getNumber(this.style, 'strokeWidth', this.strokewidth)
       );
     }
 
@@ -489,7 +484,7 @@ class mxArrowConnector extends mxShape {
    */
   // isMarkerStart(): boolean;
   isMarkerStart() {
-    return mxUtils.getValue(this.style, STYLE_STARTARROW, NONE) !== NONE;
+    return mxUtils.getValue(this.style, 'startArrow', NONE) !== NONE;
   }
 
   /**
@@ -497,7 +492,7 @@ class mxArrowConnector extends mxShape {
    */
   // isMarkerEnd(): boolean;
   isMarkerEnd() {
-    return mxUtils.getValue(this.style, STYLE_ENDARROW, NONE) !== NONE;
+    return mxUtils.getValue(this.style, 'endArrow', NONE) !== NONE;
   }
 }
 
diff --git a/packages/core/src/shape/edge/mxConnector.js b/packages/core/src/shape/edge/mxConnector.js
index 5ce7da18a..c71a28150 100644
--- a/packages/core/src/shape/edge/mxConnector.js
+++ b/packages/core/src/shape/edge/mxConnector.js
@@ -7,13 +7,6 @@
 import {
   DEFAULT_MARKERSIZE,
   NONE,
-  STYLE_CURVED,
-  STYLE_ENDARROW,
-  STYLE_ENDFILL,
-  STYLE_ENDSIZE,
-  STYLE_STARTARROW,
-  STYLE_STARTFILL,
-  STYLE_STARTSIZE,
 } from '../../util/mxConstants';
 import mxPolyline from './mxPolyline';
 import mxUtils from '../../util/mxUtils';
@@ -39,7 +32,7 @@ class mxConnector extends mxPolyline {
   // updateBoundingBox(): void;
   updateBoundingBox() {
     this.useSvgBoundingBox =
-      this.style != null && this.style[STYLE_CURVED] === 1;
+      this.style != null && this.style.curved === 1;
     super.updateBoundingBox();
   }
 
@@ -79,7 +72,7 @@ class mxConnector extends mxPolyline {
     const n = pts.length;
     const type = mxUtils.getValue(
       this.style,
-      source ? STYLE_STARTARROW : STYLE_ENDARROW
+      source ? 'startArrow' : 'endArrow'
     );
     let p0 = source ? pts[1] : pts[n - 2];
     const pe = source ? pts[0] : pts[n - 1];
@@ -108,13 +101,13 @@ class mxConnector extends mxPolyline {
 
       const size = mxUtils.getNumber(
         this.style,
-        source ? STYLE_STARTSIZE : STYLE_ENDSIZE,
+        source ? 'startSize' : 'endSize',
         DEFAULT_MARKERSIZE
       );
 
       // Allow for stroke width in the end point used and the
       // orthogonal vectors describing the direction of the marker
-      const filled = this.style[source ? STYLE_STARTFILL : STYLE_ENDFILL] !== 0;
+      const filled = this.style[source ? 'startFill' : 'endFill'] !== 0;
 
       result = mxMarker.createMarker(
         c,
@@ -143,16 +136,16 @@ class mxConnector extends mxPolyline {
     // Adds marker sizes
     let size = 0;
 
-    if (mxUtils.getValue(this.style, STYLE_STARTARROW, NONE) !== NONE) {
+    if (mxUtils.getValue(this.style, 'startArrow', NONE) !== NONE) {
       size =
-        mxUtils.getNumber(this.style, STYLE_STARTSIZE, DEFAULT_MARKERSIZE) + 1;
+        mxUtils.getNumber(this.style, 'startSize', DEFAULT_MARKERSIZE) + 1;
     }
 
-    if (mxUtils.getValue(this.style, STYLE_ENDARROW, NONE) !== NONE) {
+    if (mxUtils.getValue(this.style, 'endArrow', NONE) !== NONE) {
       size =
         Math.max(
           size,
-          mxUtils.getNumber(this.style, STYLE_ENDSIZE, DEFAULT_MARKERSIZE)
+          mxUtils.getNumber(this.style, 'endSize', DEFAULT_MARKERSIZE)
         ) + 1;
     }
 
diff --git a/packages/core/src/shape/edge/mxPolyline.js b/packages/core/src/shape/edge/mxPolyline.js
index 20fb146a9..4d07f82f0 100644
--- a/packages/core/src/shape/edge/mxPolyline.js
+++ b/packages/core/src/shape/edge/mxPolyline.js
@@ -7,8 +7,6 @@
 import mxShape from '../mxShape';
 import {
   LINE_ARCSIZE,
-  STYLE_ARCSIZE,
-  STYLE_CURVED,
 } from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
 
@@ -72,7 +70,7 @@ class mxPolyline extends mxShape {
     const prev = c.pointerEventsValue;
     c.pointerEventsValue = 'stroke';
 
-    if (this.style == null || this.style[STYLE_CURVED] != 1) {
+    if (this.style == null || this.style.curved != 1) {
       this.paintLine(c, pts, this.isRounded);
     } else {
       this.paintCurvedLine(c, pts);
@@ -87,7 +85,7 @@ class mxPolyline extends mxShape {
   // paintLine(c: mxAbstractCanvas2D, pts: Array<mxPoint>, rounded?: boolean): void;
   paintLine(c, pts, rounded) {
     const arcSize =
-      mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2;
+      mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
     c.begin();
     this.addPoints(c, pts, rounded, arcSize, false);
     c.stroke();
diff --git a/packages/core/src/shape/mxLabel.js b/packages/core/src/shape/mxLabel.js
index 86fb5f3b5..ee8783c8c 100644
--- a/packages/core/src/shape/mxLabel.js
+++ b/packages/core/src/shape/mxLabel.js
@@ -13,13 +13,6 @@ import {
   ALIGN_RIGHT,
   ALIGN_TOP,
   DEFAULT_IMAGESIZE,
-  STYLE_IMAGE_ALIGN,
-  STYLE_IMAGE_HEIGHT,
-  STYLE_IMAGE_VERTICAL_ALIGN,
-  STYLE_IMAGE_WIDTH,
-  STYLE_INDICATOR_HEIGHT,
-  STYLE_INDICATOR_WIDTH,
-  STYLE_SPACING,
 } from '../util/mxConstants';
 import mxRectangleShape from './node/mxRectangleShape';
 import mxUtils from '../util/mxUtils';
@@ -172,24 +165,24 @@ class mxLabel extends mxRectangleShape {
    */
   // getImageBounds(x: number, y: number, w: number, h: number): mxRectangle;
   getImageBounds(x, y, w, h) {
-    const align = mxUtils.getValue(this.style, STYLE_IMAGE_ALIGN, ALIGN_LEFT);
+    const align = mxUtils.getValue(this.style, 'imageAlign', ALIGN_LEFT);
     const valign = mxUtils.getValue(
       this.style,
-      STYLE_IMAGE_VERTICAL_ALIGN,
+      'verticalAlign',
       ALIGN_MIDDLE
     );
     const width = mxUtils.getNumber(
       this.style,
-      STYLE_IMAGE_WIDTH,
+      'imageWidth',
       DEFAULT_IMAGESIZE
     );
     const height = mxUtils.getNumber(
       this.style,
-      STYLE_IMAGE_HEIGHT,
+      'imageHeight',
       DEFAULT_IMAGESIZE
     );
     const spacing =
-      mxUtils.getNumber(this.style, STYLE_SPACING, this.spacing) + 5;
+      mxUtils.getNumber(this.style, 'spacing', this.spacing) + 5;
 
     if (align === ALIGN_CENTER) {
       x += (w - width) / 2;
@@ -250,20 +243,20 @@ class mxLabel extends mxRectangleShape {
    */
   // getIndicatorBounds(x: number, y: number, w: number, h: number): mxRectangle;
   getIndicatorBounds(x, y, w, h) {
-    const align = mxUtils.getValue(this.style, STYLE_IMAGE_ALIGN, ALIGN_LEFT);
+    const align = mxUtils.getValue(this.style, 'imageAlign', ALIGN_LEFT);
     const valign = mxUtils.getValue(
       this.style,
-      STYLE_IMAGE_VERTICAL_ALIGN,
+      'verticalAlign',
       ALIGN_MIDDLE
     );
     const width = mxUtils.getNumber(
       this.style,
-      STYLE_INDICATOR_WIDTH,
+      'indicatorWidth',
       this.indicatorSize
     );
     const height = mxUtils.getNumber(
       this.style,
-      STYLE_INDICATOR_HEIGHT,
+      'indicatorHeight',
       this.indicatorSize
     );
     const spacing = this.spacing + 5;
diff --git a/packages/core/src/shape/mxShape.ts b/packages/core/src/shape/mxShape.ts
index e417a2485..0c683fe31 100644
--- a/packages/core/src/shape/mxShape.ts
+++ b/packages/core/src/shape/mxShape.ts
@@ -16,14 +16,6 @@ import {
   RECTANGLE_ROUNDING_FACTOR,
   SHADOW_OFFSET_X,
   SHADOW_OFFSET_Y,
-  STYLE_ABSOLUTE_ARCSIZE,
-  STYLE_ARCSIZE,
-  STYLE_BACKGROUND_OUTLINE,
-  STYLE_DIRECTION,
-  STYLE_FIX_DASH,
-  STYLE_FLIPH,
-  STYLE_FLIPV,
-  STYLE_HORIZONTAL,
 } from '../util/mxConstants';
 import mxPoint from '../util/datatypes/mxPoint';
 import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
@@ -83,7 +75,7 @@ const toBool = (i: any): boolean => {
  * @example
  * ```javascript
  * var style = graph.getStylesheet().getDefaultVertexStyle();
- * style[mxConstants.STYLE_SHAPE] = 'customShape';
+ * style.shape = 'customShape';
  * ```
  */
 class mxShape {
@@ -473,7 +465,7 @@ class mxShape {
    */
   // getLabelBounds(rect: mxRectangle): mxRectangle;
   getLabelBounds(rect: mxRectangle): mxRectangle {
-    const d = mxUtils.getValue(this.style, STYLE_DIRECTION, DIRECTION_EAST);
+    const d = mxUtils.getValue(this.style, 'direction', DIRECTION_EAST);
     let bounds = rect.clone();
 
     // Normalizes argument for getLabelMargins hook
@@ -493,8 +485,8 @@ class mxShape {
     if (labelMargins != null) {
       labelMargins = <mxRectangle>(<mxRectangle>labelMargins).clone();
 
-      let flipH = toBool(mxUtils.getValue(this.style, STYLE_FLIPH, false));
-      let flipV = toBool(mxUtils.getValue(this.style, STYLE_FLIPV, false));
+      let flipH = toBool(mxUtils.getValue(this.style, 'flipH', false));
+      let flipV = toBool(mxUtils.getValue(this.style, 'flipV', false));
 
       // Handles special case for vertical labels
       if (
@@ -801,7 +793,7 @@ class mxShape {
       c.setDashed(
         this.isDashed,
         this.style != null
-          ? toBool(mxUtils.getValue(this.style, STYLE_FIX_DASH, false))
+          ? toBool(mxUtils.getValue(this.style, 'fixDash', false))
           : false
       );
     }
@@ -894,7 +886,7 @@ class mxShape {
       !this.outline ||
       this.style == null ||
       toBool(
-        mxUtils.getValue(this.style, STYLE_BACKGROUND_OUTLINE, 0) === false
+        mxUtils.getValue(this.style, 'backgroundOutline', 0) === false
       )
     ) {
       c.setShadow(false);
@@ -945,12 +937,12 @@ class mxShape {
   getArcSize(w: number, h: number): number {
     let r = 0;
 
-    if (toBool(mxUtils.getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0))) {
+    if (toBool(mxUtils.getValue(this.style, 'absoluteArcSize', 0))) {
       r = Math.min(
         w / 2,
         Math.min(
           h / 2,
-          mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2
+          mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2
         )
       );
     } else {
@@ -958,7 +950,7 @@ class mxShape {
         String(
           mxUtils.getValue(
             this.style,
-            STYLE_ARCSIZE,
+            'arcSize',
             RECTANGLE_ROUNDING_FACTOR * 100
           ) / 100
         )
@@ -1142,25 +1134,25 @@ class mxShape {
    * Applies the style of the given <mxCellState> to the shape. This
    * implementation assigns the following styles to local fields:
    *
-   * - <mxConstants.STYLE_FILLCOLOR> => fill
-   * - <mxConstants.STYLE_GRADIENTCOLOR> => gradient
-   * - <mxConstants.STYLE_GRADIENT_DIRECTION> => gradientDirection
-   * - <mxConstants.STYLE_OPACITY> => opacity
+   * - <'fillColor'> => fill
+   * - <'gradientColor'> => gradient
+   * - <'gradientDirection'> => gradientDirection
+   * - <'opacity'> => opacity
    * - <mxConstants.STYLE_FILL_OPACITY> => fillOpacity
    * - <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity
-   * - <mxConstants.STYLE_STROKECOLOR> => stroke
-   * - <mxConstants.STYLE_STROKEWIDTH> => strokewidth
-   * - <mxConstants.STYLE_SHADOW> => isShadow
-   * - <mxConstants.STYLE_DASHED> => isDashed
-   * - <mxConstants.STYLE_SPACING> => spacing
-   * - <mxConstants.STYLE_STARTSIZE> => startSize
-   * - <mxConstants.STYLE_ENDSIZE> => endSize
-   * - <mxConstants.STYLE_ROUNDED> => isRounded
-   * - <mxConstants.STYLE_STARTARROW> => startArrow
-   * - <mxConstants.STYLE_ENDARROW> => endArrow
-   * - <mxConstants.STYLE_ROTATION> => rotation
-   * - <mxConstants.STYLE_DIRECTION> => direction
-   * - <mxConstants.STYLE_GLASS> => glass
+   * - <'strokeColor'> => stroke
+   * - <mxConstants.'strokeWidth'> => strokewidth
+   * - <'shadow'> => isShadow
+   * - <'dashed'> => isDashed
+   * - <'spacing'> => spacing
+   * - <'startSize'> => startSize
+   * - <'endSize'> => endSize
+   * - <'rounded'> => isRounded
+   * - <mxConstants.'startArrow'> => startArrow
+   * - <mxConstants.'endArrow'> => endArrow
+   * - <'rotation'> => rotation
+   * - <'direction'> => direction
+   * - <'glass'> => glass
    *
    * This keeps a reference to the <style>. If you need to keep a reference to
    * the cell, you can override this method and store a local reference to
@@ -1408,7 +1400,7 @@ class mxShape {
   // getTextRotation(): number;
   getTextRotation(): number {
     let rot = this.getRotation();
-    if (!toBool(mxUtils.getValue(this.style, STYLE_HORIZONTAL, 1))) {
+    if (!toBool(mxUtils.getValue(this.style, 'horizontal', 1))) {
       rot += this.verticalTextRotation || -90; // WARNING WARNING!!!! ===============================================================================================
     }
     return rot;
diff --git a/packages/core/src/shape/mxSwimlane.js b/packages/core/src/shape/mxSwimlane.js
index 8f4909625..c1eea19df 100644
--- a/packages/core/src/shape/mxSwimlane.js
+++ b/packages/core/src/shape/mxSwimlane.js
@@ -14,16 +14,6 @@ import {
   LINE_ARCSIZE,
   NONE,
   RECTANGLE_ROUNDING_FACTOR,
-  STYLE_ABSOLUTE_ARCSIZE,
-  STYLE_ARCSIZE,
-  STYLE_FLIPH,
-  STYLE_FLIPV,
-  STYLE_HORIZONTAL,
-  STYLE_POINTER_EVENTS,
-  STYLE_SEPARATORCOLOR,
-  STYLE_STARTSIZE,
-  STYLE_SWIMLANE_FILLCOLOR,
-  STYLE_SWIMLANE_LINE,
 } from '../util/mxConstants';
 import mxUtils from '../util/mxUtils';
 
@@ -31,11 +21,11 @@ import mxUtils from '../util/mxUtils';
  * Extends {@link mxShape} to implement a swimlane shape.
  * This shape is registered under {@link mxConstants.SHAPE_SWIMLANE} in {@link mxCellRenderer}.
  * Use the {@link mxConstants.STYLE_STYLE_STARTSIZE} to define the size of the title
- * region, {@link mxConstants.STYLE_SWIMLANE_FILLCOLOR} for the content area fill,
- * {@link mxConstants.STYLE_SEPARATORCOLOR} to draw an additional vertical separator and
+ * region, `'swimLaneFillColor'` for the content area fill,
+ * `'separatorColor'` to draw an additional vertical separator and
  * {@link mxConstants.STYLE_SWIMLANE_LINE} to hide the line between the title region and
  * the content area.
- * The {@link mxConstants.STYLE_HORIZONTAL} affects the orientation of this shape,
+ * The {@link 'horizontal'} affects the orientation of this shape,
  * not only its label.
  *
  * @class mxSwimlane
@@ -81,7 +71,7 @@ class mxSwimlane extends mxShape {
   getTitleSize() {
     return Math.max(
       0,
-      mxUtils.getValue(this.style, STYLE_STARTSIZE, DEFAULT_STARTSIZE)
+      mxUtils.getValue(this.style, 'startSize', DEFAULT_STARTSIZE)
     );
   }
 
@@ -94,8 +84,8 @@ class mxSwimlane extends mxShape {
     const bounds = new mxRectangle(rect.x, rect.y, rect.width, rect.height);
     const horizontal = this.isHorizontal();
 
-    const flipH = mxUtils.getValue(this.style, STYLE_FLIPH, 0) == 1;
-    const flipV = mxUtils.getValue(this.style, STYLE_FLIPV, 0) == 1;
+    const flipH = mxUtils.getValue(this.style, 'flipH', 0) == 1;
+    const flipV = mxUtils.getValue(this.style, 'flipV', 0) == 1;
 
     // East is default
     const shapeVertical =
@@ -156,19 +146,19 @@ class mxSwimlane extends mxShape {
    * Returns the arcsize for the swimlane.
    */
   getSwimlaneArcSize(w, h, start) {
-    if (mxUtils.getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0) == '1') {
+    if (mxUtils.getValue(this.style, 'absoluteArcSize', 0) == '1') {
       return Math.min(
         w / 2,
         Math.min(
           h / 2,
-          mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2
+          mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2
         )
       );
     }
     const f =
       mxUtils.getValue(
         this.style,
-        STYLE_ARCSIZE,
+        'arcSize',
         RECTANGLE_ROUNDING_FACTOR * 100
       ) / 100;
 
@@ -180,7 +170,7 @@ class mxSwimlane extends mxShape {
    */
   // isHorizontal(): boolean;
   isHorizontal() {
-    return mxUtils.getValue(this.style, STYLE_HORIZONTAL, 1) == 1;
+    return mxUtils.getValue(this.style, 'horizontal', 1) == 1;
   }
 
   /**
@@ -189,9 +179,9 @@ class mxSwimlane extends mxShape {
   // paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
   paintVertexShape(c, x, y, w, h) {
     let start = this.getTitleSize();
-    const fill = mxUtils.getValue(this.style, STYLE_SWIMLANE_FILLCOLOR, NONE);
+    const fill = mxUtils.getValue(this.style, 'swimlaneFillColor', NONE);
     const swimlaneLine =
-      mxUtils.getValue(this.style, STYLE_SWIMLANE_LINE, 1) == 1;
+      mxUtils.getValue(this.style, 'swimlaneLine', 1) == 1;
     let r = 0;
 
     if (this.isHorizontal()) {
@@ -210,7 +200,7 @@ class mxSwimlane extends mxShape {
       this.paintRoundedSwimlane(c, x, y, w, h, start, r, fill, swimlaneLine);
     }
 
-    const sep = mxUtils.getValue(this.style, STYLE_SEPARATORCOLOR, NONE);
+    const sep = mxUtils.getValue(this.style, 'separatorColor', NONE);
     this.paintSeparator(c, x, y, w, h, start, sep);
 
     if (this.image != null) {
@@ -244,7 +234,7 @@ class mxSwimlane extends mxShape {
     let events = true;
 
     if (this.style != null) {
-      events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1';
+      events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
     }
 
     if (!events && (this.fill == null || this.fill === NONE)) {
@@ -325,7 +315,7 @@ class mxSwimlane extends mxShape {
     let events = true;
 
     if (this.style != null) {
-      events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1';
+      events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
     }
 
     if (!events && (this.fill == null || this.fill === NONE)) {
diff --git a/packages/core/src/shape/mxText.ts b/packages/core/src/shape/mxText.ts
index 879a4d59c..176d86e1b 100644
--- a/packages/core/src/shape/mxText.ts
+++ b/packages/core/src/shape/mxText.ts
@@ -23,23 +23,6 @@ import {
   FONT_UNDERLINE,
   LINE_HEIGHT,
   NONE,
-  STYLE_ALIGN,
-  STYLE_FONTCOLOR,
-  STYLE_FONTFAMILY,
-  STYLE_FONTSIZE,
-  STYLE_HORIZONTAL,
-  STYLE_LABEL_BACKGROUNDCOLOR,
-  STYLE_LABEL_BORDERCOLOR,
-  STYLE_LABEL_POSITION,
-  STYLE_SPACING,
-  STYLE_SPACING_BOTTOM,
-  STYLE_SPACING_LEFT,
-  STYLE_SPACING_RIGHT,
-  STYLE_SPACING_TOP,
-  STYLE_TEXT_DIRECTION,
-  STYLE_TEXT_OPACITY,
-  STYLE_VERTICAL_ALIGN,
-  STYLE_VERTICAL_LABEL_POSITION,
   TEXT_DIRECTION_AUTO,
   TEXT_DIRECTION_LTR,
   TEXT_DIRECTION_RTL,
@@ -434,27 +417,23 @@ class mxText extends mxShape {
 
     if (this.style != null) {
       this.fontStyle = this.style.fontStyle || this.fontStyle;
-      this.family = mxUtils.getValue(this.style, STYLE_FONTFAMILY, this.family);
-      this.size = mxUtils.getValue(this.style, STYLE_FONTSIZE, this.size);
-      this.color = mxUtils.getValue(this.style, STYLE_FONTCOLOR, this.color);
-      this.align = mxUtils.getValue(this.style, STYLE_ALIGN, this.align);
-      this.valign = mxUtils.getValue(
-        this.style,
-        STYLE_VERTICAL_ALIGN,
-        this.valign
-      );
+      this.family = mxUtils.getValue(this.style, 'fontFamily', this.family);
+      this.size = mxUtils.getValue(this.style, 'fontSize', this.size);
+      this.color = mxUtils.getValue(this.style, 'fontColor', this.color);
+      this.align = mxUtils.getValue(this.style, 'align', this.align);
+      this.valign = mxUtils.getValue(this.style, 'verticalAlign', this.valign);
       this.spacing = parseInt(
-        mxUtils.getValue(this.style, STYLE_SPACING, this.spacing)
+        mxUtils.getValue(this.style, 'spacing', this.spacing)
       );
       this.spacingTop =
         parseInt(
-          mxUtils.getValue(this.style, STYLE_SPACING_TOP, this.spacingTop - old)
+          mxUtils.getValue(this.style, 'spacingTop', this.spacingTop - old)
         ) + this.spacing;
       this.spacingRight =
         parseInt(
           mxUtils.getValue(
             this.style,
-            STYLE_SPACING_RIGHT,
+            'spacingRight',
             this.spacingRight - old
           )
         ) + this.spacing;
@@ -462,7 +441,7 @@ class mxText extends mxShape {
         parseInt(
           mxUtils.getValue(
             this.style,
-            STYLE_SPACING_BOTTOM,
+            'spacingBottom',
             this.spacingBottom - old
           )
         ) + this.spacing;
@@ -470,31 +449,31 @@ class mxText extends mxShape {
         parseInt(
           mxUtils.getValue(
             this.style,
-            STYLE_SPACING_LEFT,
+            'spacingLeft',
             this.spacingLeft - old
           )
         ) + this.spacing;
       this.horizontal = mxUtils.getValue(
         this.style,
-        STYLE_HORIZONTAL,
+        'horizontal',
         this.horizontal
       );
       this.background = mxUtils.getValue(
         this.style,
-        STYLE_LABEL_BACKGROUNDCOLOR,
+        'backgroundColor',
         this.background
       );
       this.border = mxUtils.getValue(
         this.style,
-        STYLE_LABEL_BORDERCOLOR,
+        'labelBorderColor',
         this.border
       );
       this.textDirection = mxUtils.getValue(
         this.style,
-        STYLE_TEXT_DIRECTION,
+        'textDirection',
         DEFAULT_TEXT_DIRECTION
       );
-      this.opacity = mxUtils.getValue(this.style, STYLE_TEXT_OPACITY, 100);
+      this.opacity = mxUtils.getValue(this.style, 'textOpacity', 100);
       this.updateMargin();
     }
 
@@ -558,13 +537,13 @@ class mxText extends mxShape {
 
     const h =
       this.style != null
-        ? mxUtils.getValue(this.style, STYLE_LABEL_POSITION, ALIGN_CENTER)
+        ? mxUtils.getValue(this.style, 'labelPosition', ALIGN_CENTER)
         : null;
     const v =
       this.style != null
         ? mxUtils.getValue(
             this.style,
-            STYLE_VERTICAL_LABEL_POSITION,
+            'verticalLabelPosition',
             ALIGN_MIDDLE
           )
         : null;
@@ -698,7 +677,7 @@ class mxText extends mxShape {
       !this.horizontal &&
       this.state != null &&
       // @ts-ignore
-      this.state.view.graph.model.isVertex(this.state.cell)
+      this.state.cell.isVertex()
     );
   }
 
diff --git a/packages/core/src/shape/mxTriangle.ts b/packages/core/src/shape/mxTriangle.ts
index 9009a459c..240c0bf05 100644
--- a/packages/core/src/shape/mxTriangle.ts
+++ b/packages/core/src/shape/mxTriangle.ts
@@ -8,7 +8,7 @@
 import mxPoint from '../util/datatypes/mxPoint';
 import mxActor from './mxActor';
 import mxUtils from '../util/mxUtils';
-import { LINE_ARCSIZE, STYLE_ARCSIZE } from '../util/mxConstants';
+import { LINE_ARCSIZE } from '../util/mxConstants';
 import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
 
 /**
@@ -47,7 +47,7 @@ class mxTriangle extends mxActor {
     h: number
   ): void {
     const arcSize: number =
-      mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2;
+      mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
 
     this.addPoints(
       c,
diff --git a/packages/core/src/shape/node/mxCylinder.ts b/packages/core/src/shape/node/mxCylinder.ts
index 9c1df430b..305a6f173 100644
--- a/packages/core/src/shape/node/mxCylinder.ts
+++ b/packages/core/src/shape/node/mxCylinder.ts
@@ -5,7 +5,6 @@
  * Type definitions from the typed-mxgraph project
  */
 import mxShape from '../mxShape';
-import { STYLE_BACKGROUND_OUTLINE } from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
 import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
 import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
@@ -62,7 +61,7 @@ class mxCylinder extends mxShape {
     if (
       !this.outline ||
       this.style == null ||
-      mxUtils.getValue(this.style, STYLE_BACKGROUND_OUTLINE, 0) == 0
+      mxUtils.getValue(this.style, 'backgroundOutline', 0) == 0
     ) {
       c.setShadow(false);
       c.begin();
diff --git a/packages/core/src/shape/node/mxDoubleEllipse.ts b/packages/core/src/shape/node/mxDoubleEllipse.ts
index 642fd9dfe..94014d08c 100644
--- a/packages/core/src/shape/node/mxDoubleEllipse.ts
+++ b/packages/core/src/shape/node/mxDoubleEllipse.ts
@@ -7,7 +7,6 @@
 
 import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxShape from '../mxShape';
-import { STYLE_MARGIN } from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
 import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
 
@@ -24,7 +23,7 @@ import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
  *   c.ellipse(x, y, w, h);
  *   c.stroke();
  *
- *   var inset = mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
+ *   var inset = mxUtils.getValue(this.style, mxConstants.'margin', Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
  *   x += inset;
  *   y += inset;
  *   w -= 2 * inset;
@@ -84,7 +83,7 @@ class mxDoubleEllipse extends mxShape {
     if (!this.outline) {
       const margin = mxUtils.getValue(
         this.style,
-        STYLE_MARGIN,
+        'margin',
         Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5))
       );
       x += margin;
@@ -109,7 +108,7 @@ class mxDoubleEllipse extends mxShape {
     const margin =
       mxUtils.getValue(
         this.style,
-        STYLE_MARGIN,
+        'margin',
         Math.min(
           3 + this.strokewidth,
           Math.min(rect.width / 5 / this.scale, rect.height / 5 / this.scale)
diff --git a/packages/core/src/shape/node/mxHexagon.ts b/packages/core/src/shape/node/mxHexagon.ts
index 06ce16d24..8223b778d 100644
--- a/packages/core/src/shape/node/mxHexagon.ts
+++ b/packages/core/src/shape/node/mxHexagon.ts
@@ -7,7 +7,7 @@
 import mxActor from '../mxActor';
 import mxPoint from '../../util/datatypes/mxPoint';
 import mxUtils from '../../util/mxUtils';
-import { LINE_ARCSIZE, STYLE_ARCSIZE } from '../../util/mxConstants';
+import { LINE_ARCSIZE } from '../../util/mxConstants';
 import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
 
 /**
@@ -31,7 +31,7 @@ class mxHexagon extends mxActor {
   // redrawPath(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
   redrawPath(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number) {
     const arcSize =
-      mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2;
+      mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
     this.addPoints(
       c,
       [
diff --git a/packages/core/src/shape/node/mxImageShape.ts b/packages/core/src/shape/node/mxImageShape.ts
index aff2825b6..d7a565542 100644
--- a/packages/core/src/shape/node/mxImageShape.ts
+++ b/packages/core/src/shape/node/mxImageShape.ts
@@ -6,11 +6,6 @@
  */
 
 import mxUtils from '../../util/mxUtils';
-import {
-  STYLE_IMAGE_ASPECT,
-  STYLE_IMAGE_BACKGROUND,
-  STYLE_IMAGE_BORDER,
-} from '../../util/mxConstants';
 import mxRectangleShape from './mxRectangleShape';
 import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxCellState from '../../view/cell/mxCellState';
@@ -66,14 +61,14 @@ class mxImageShape extends mxRectangleShape {
 
   /**
    * Overrides {@link mxShape.apply} to replace the fill and stroke colors with the
-   * respective values from {@link mxConstants.STYLE_IMAGE_BACKGROUND} and
-   * {@link mxConstants.STYLE_IMAGE_BORDER}.
+   * respective values from {@link 'imageBackground'} and
+   * {@link 'imageBorder'}.
    *
    * Applies the style of the given {@link mxCellState} to the shape. This
    * implementation assigns the following styles to local fields:
    *
-   * - {@link mxConstants.STYLE_IMAGE_BACKGROUND} => fill
-   * - {@link mxConstants.STYLE_IMAGE_BORDER} => stroke
+   * - {@link 'imageBackground'} => fill
+   * - {@link 'imageBorder'} => stroke
    *
    * @param {mxCellState} state   {@link mxCellState} of the corresponding cell.
    */
@@ -87,7 +82,7 @@ class mxImageShape extends mxRectangleShape {
 
     if (this.style != null) {
       this.preserveImageAspect =
-        mxUtils.getNumber(this.style, STYLE_IMAGE_ASPECT, 1) == 1;
+        mxUtils.getNumber(this.style, 'imageAspect', 1) == 1;
 
       // Legacy support for imageFlipH/V
       this.flipH =
@@ -144,8 +139,8 @@ class mxImageShape extends mxRectangleShape {
     h: number
   ) {
     if (this.image != null) {
-      const fill = mxUtils.getValue(this.style, STYLE_IMAGE_BACKGROUND, null);
-      let stroke = mxUtils.getValue(this.style, STYLE_IMAGE_BORDER, null);
+      const fill = mxUtils.getValue(this.style, 'imageBackground', null);
+      let stroke = mxUtils.getValue(this.style, 'imageBorder', null);
 
       if (fill != null) {
         // Stroke rendering required for shadow
@@ -158,7 +153,7 @@ class mxImageShape extends mxRectangleShape {
       // FlipH/V are implicit via mxShape.updateTransform
       c.image(x, y, w, h, this.image, this.preserveImageAspect, false, false);
 
-      stroke = mxUtils.getValue(this.style, STYLE_IMAGE_BORDER, null);
+      stroke = mxUtils.getValue(this.style, 'imageBorder', null);
 
       if (stroke != null) {
         c.setShadow(false);
diff --git a/packages/core/src/shape/node/mxRectangleShape.ts b/packages/core/src/shape/node/mxRectangleShape.ts
index d7a4b8342..1b756e138 100644
--- a/packages/core/src/shape/node/mxRectangleShape.ts
+++ b/packages/core/src/shape/node/mxRectangleShape.ts
@@ -9,9 +9,6 @@ import {
   LINE_ARCSIZE,
   NONE,
   RECTANGLE_ROUNDING_FACTOR,
-  STYLE_ABSOLUTE_ARCSIZE,
-  STYLE_ARCSIZE,
-  STYLE_POINTER_EVENTS,
 } from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
 import mxShape from '../mxShape';
@@ -50,7 +47,7 @@ class mxRectangleShape extends mxShape {
     let events = true;
 
     if (this.style != null) {
-      events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1';
+      events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
     }
 
     return (
@@ -75,7 +72,7 @@ class mxRectangleShape extends mxShape {
     let events = true;
 
     if (this.style != null) {
-      events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1';
+      events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
     }
 
     if (
@@ -90,19 +87,19 @@ class mxRectangleShape extends mxShape {
       if (this.isRounded) {
         let r = 0;
 
-        if (mxUtils.getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0) == '1') {
+        if (mxUtils.getValue(this.style, 'absoluteArcSize', 0) == '1') {
           r = Math.min(
             w / 2,
             Math.min(
               h / 2,
-              mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2
+              mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2
             )
           );
         } else {
           const f =
             mxUtils.getValue(
               this.style,
-              STYLE_ARCSIZE,
+              'arcSize',
               RECTANGLE_ROUNDING_FACTOR * 100
             ) / 100;
           r = Math.min(w * f, h * f);
diff --git a/packages/core/src/shape/node/mxRhombus.ts b/packages/core/src/shape/node/mxRhombus.ts
index a11eb5bcd..ac14b597e 100644
--- a/packages/core/src/shape/node/mxRhombus.ts
+++ b/packages/core/src/shape/node/mxRhombus.ts
@@ -7,7 +7,7 @@
 import mxShape from '../mxShape';
 import mxPoint from '../../util/datatypes/mxPoint';
 import mxUtils from '../../util/mxUtils';
-import { LINE_ARCSIZE, STYLE_ARCSIZE } from '../../util/mxConstants';
+import { LINE_ARCSIZE } from '../../util/mxConstants';
 import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
 
@@ -59,7 +59,7 @@ class mxRhombus extends mxShape {
     const hh = h / 2;
 
     const arcSize =
-      mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2;
+      mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
     c.begin();
     this.addPoints(
       c,
diff --git a/packages/core/src/shape/node/mxStencil.js b/packages/core/src/shape/node/mxStencil.js
index d7615db80..902f7b312 100644
--- a/packages/core/src/shape/node/mxStencil.js
+++ b/packages/core/src/shape/node/mxStencil.js
@@ -16,12 +16,6 @@ import {
   NODETYPE_ELEMENT,
   NONE,
   RECTANGLE_ROUNDING_FACTOR,
-  STYLE_BACKGROUND_OUTLINE,
-  STYLE_DIRECTION,
-  STYLE_FLIPH,
-  STYLE_FLIPV,
-  STYLE_POINTER_EVENTS,
-  STYLE_STROKEWIDTH,
 } from '../../util/mxConstants';
 import mxStencilRegistry from './mxStencilRegistry';
 import { getChildNodes, getTextContent } from '../../util/mxDomUtils';
@@ -248,19 +242,19 @@ class mxStencil extends mxShape {
     // (start, segment, end blocks), pluggable markers, how to implement
     // swimlanes (title area) with this API, add icon, horizontal/vertical
     // label, indicator for all shapes, rotation
-    const direction = mxUtils.getValue(shape.style, STYLE_DIRECTION, null);
+    const direction = mxUtils.getValue(shape.style, 'direction', null);
     const aspect = this.computeAspect(shape.style, x, y, w, h, direction);
     const minScale = Math.min(aspect.width, aspect.height);
     const sw =
       this.strokewidth == 'inherit'
-        ? Number(mxUtils.getNumber(shape.style, STYLE_STROKEWIDTH, 1))
+        ? Number(mxUtils.getNumber(shape.style, 'strokeWidth', 1))
         : Number(this.strokewidth) * minScale;
     canvas.setStrokeWidth(sw);
 
     // Draws a transparent rectangle for catching events
     if (
       shape.style != null &&
-      mxUtils.getValue(shape.style, STYLE_POINTER_EVENTS, '0') == '1'
+      mxUtils.getValue(shape.style, 'pointerEvents', '0') == '1'
     ) {
       canvas.setStrokeColor(NONE);
       canvas.rect(x, y, w, h);
@@ -292,7 +286,7 @@ class mxStencil extends mxShape {
       true,
       !shape.outline ||
         shape.style == null ||
-        mxUtils.getValue(shape.style, STYLE_BACKGROUND_OUTLINE, 0) == 0
+        mxUtils.getValue(shape.style, 'backgroundOutline', 0) == 0
     );
 
     // Restores stack for unequal count of save/restore calls
@@ -562,8 +556,8 @@ class mxStencil extends mxShape {
             const dr = shape.rotation;
 
             // Depends on flipping
-            const flipH = mxUtils.getValue(shape.style, STYLE_FLIPH, 0) == 1;
-            const flipV = mxUtils.getValue(shape.style, STYLE_FLIPV, 0) == 1;
+            const flipH = mxUtils.getValue(shape.style, 'flipH', 0) == 1;
+            const flipV = mxUtils.getValue(shape.style, 'flipV', 0) == 1;
 
             if (flipH && flipV) {
               rotation -= dr;
diff --git a/packages/core/src/util/datatypes/style/mxEdgeStyle.js b/packages/core/src/util/datatypes/style/mxEdgeStyle.js
index 14c2d30c7..7d45b001e 100644
--- a/packages/core/src/util/datatypes/style/mxEdgeStyle.js
+++ b/packages/core/src/util/datatypes/style/mxEdgeStyle.js
@@ -23,17 +23,6 @@ import {
   ELBOW_VERTICAL,
   ENTITY_SEGMENT,
   NONE,
-  STYLE_DIRECTION,
-  STYLE_ELBOW,
-  STYLE_ENDARROW,
-  STYLE_ENDSIZE,
-  STYLE_JETTY_SIZE,
-  STYLE_ROTATION,
-  STYLE_SEGMENT,
-  STYLE_SOURCE_JETTY_SIZE,
-  STYLE_STARTARROW,
-  STYLE_STARTSIZE,
-  STYLE_TARGET_JETTY_SIZE,
 } from '../../mxConstants';
 import mxRectangle from '../mxRectangle';
 
@@ -41,13 +30,13 @@ import mxRectangle from '../mxRectangle';
  * Class: mxEdgeStyle
  *
  * Provides various edge styles to be used as the values for
- * <mxConstants.STYLE_EDGE> in a cell style.
+ * <'edge'> in a cell style.
  *
  * Example:
  *
  * (code)
  * let style = stylesheet.getDefaultEdgeStyle();
- * style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
+ * style.edge = mxEdgeStyle.ElbowConnector;
  * (end)
  *
  * Sets the default edge style to <ElbowConnector>.
@@ -100,7 +89,7 @@ import mxRectangle from '../mxRectangle';
  *
  * (code)
  * let style = graph.getStylesheet().getDefaultEdgeStyle();
- * style[mxConstants.STYLE_EDGE] = mxEdgeStyle.MyStyle;
+ * style.edge = mxEdgeStyle.MyStyle;
  * (end)
  *
  * Note that the object can be used directly when programmatically setting
@@ -134,7 +123,7 @@ class mxEdgeStyle {
     const { view } = state;
     const { graph } = view;
     const segment =
-      mxUtils.getValue(state.style, STYLE_SEGMENT, ENTITY_SEGMENT) * view.scale;
+      mxUtils.getValue(state.style, 'segment', ENTITY_SEGMENT) * view.scale;
 
     const pts = state.absolutePoints;
     const p0 = pts[0];
@@ -289,11 +278,11 @@ class mxEdgeStyle {
       let dy = 0;
 
       const seg =
-        mxUtils.getValue(state.style, STYLE_SEGMENT, graph.gridSize) *
+        mxUtils.getValue(state.style, 'segment', graph.gridSize) *
         view.scale;
       const dir = mxUtils.getValue(
         state.style,
-        STYLE_DIRECTION,
+        'direction',
         DIRECTION_WEST
       );
 
@@ -385,7 +374,7 @@ class mxEdgeStyle {
 
     if (
       !horizontal &&
-      (vertical || state.style[STYLE_ELBOW] === ELBOW_VERTICAL)
+      (vertical || state.style['elbow'] === ELBOW_VERTICAL)
     ) {
       mxEdgeStyle.TopToBottom(state, source, target, points, result);
     } else {
@@ -965,22 +954,22 @@ class mxEdgeStyle {
   static getJettySize(state, isSource) {
     let value = mxUtils.getValue(
       state.style,
-      isSource ? STYLE_SOURCE_JETTY_SIZE : STYLE_TARGET_JETTY_SIZE,
-      mxUtils.getValue(state.style, STYLE_JETTY_SIZE, mxEdgeStyle.orthBuffer)
+      isSource ? 'sourceJettySize' : 'targetJettySize',
+      mxUtils.getValue(state.style, 'jettySize', mxEdgeStyle.orthBuffer)
     );
 
     if (value === 'auto') {
       // Computes the automatic jetty size
       const type = mxUtils.getValue(
         state.style,
-        isSource ? STYLE_STARTARROW : STYLE_ENDARROW,
+        isSource ? 'startArrow' : 'endArrow',
         NONE
       );
 
       if (type !== NONE) {
         const size = mxUtils.getNumber(
           state.style,
-          isSource ? STYLE_STARTSIZE : STYLE_ENDSIZE,
+          isSource ? 'startSize' : 'endSize',
           DEFAULT_MARKERSIZE
         );
         value =
@@ -1160,7 +1149,7 @@ class mxEdgeStyle {
         true,
         DIRECTION_MASK_ALL
       );
-      rotation = mxUtils.getValue(source.style, STYLE_ROTATION, 0);
+      rotation = mxUtils.getValue(source.style, 'rotation', 0);
 
       // console.log('source rotation', rotation);
 
@@ -1183,7 +1172,7 @@ class mxEdgeStyle {
         false,
         DIRECTION_MASK_ALL
       );
-      rotation = mxUtils.getValue(target.style, STYLE_ROTATION, 0);
+      rotation = mxUtils.getValue(target.style, 'rotation', 0);
 
       // console.log('target rotation', rotation);
 
diff --git a/packages/core/src/util/datatypes/style/mxPerimeter.ts b/packages/core/src/util/datatypes/style/mxPerimeter.ts
index dbee35ae4..90c188b98 100644
--- a/packages/core/src/util/datatypes/style/mxPerimeter.ts
+++ b/packages/core/src/util/datatypes/style/mxPerimeter.ts
@@ -12,7 +12,6 @@ import {
   DIRECTION_NORTH,
   DIRECTION_SOUTH,
   DIRECTION_WEST,
-  STYLE_DIRECTION,
 } from '../../mxConstants';
 import mxRectangle from '../mxRectangle';
 import mxCellState from '../../../view/cell/mxCellState';
@@ -35,7 +34,7 @@ import mxCellState from '../../../view/cell/mxCellState';
  *
  * @example
  * ```javascript
- * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
+ * style.perimiter = mxPerimeter.RectanglePerimeter;
  * ```
  *
  * When adding new perimeter functions, it is recommended to use the
@@ -75,7 +74,7 @@ import mxCellState from '../../../view/cell/mxCellState';
  * @example
  * ```javascript
  * var style = graph.getStylesheet().getDefaultVertexStyle();
- * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.CustomPerimeter;
+ * style.perimiter = mxPerimeter.CustomPerimeter;
  * ```
  *
  * Note that the object can be used directly when programmatically setting
@@ -314,7 +313,7 @@ class mxPerimeter {
     next: mxPoint,
     orthogonal: boolean = false
   ): mxPoint | null {
-    const direction = vertex != null ? vertex.style[STYLE_DIRECTION] : null;
+    const direction = vertex != null ? vertex.style.direction : null;
     const vertical =
       direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH;
 
@@ -463,7 +462,7 @@ class mxPerimeter {
 
     const direction =
       vertex != null
-        ? mxUtils.getValue(vertex.style, STYLE_DIRECTION, DIRECTION_EAST)
+        ? mxUtils.getValue(vertex.style, 'direction', DIRECTION_EAST)
         : DIRECTION_EAST;
     const vertical =
       direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH;
diff --git a/packages/core/src/util/datatypes/style/mxStylesheet.js b/packages/core/src/util/datatypes/style/mxStylesheet.js
index 7e6ea466e..78980691b 100644
--- a/packages/core/src/util/datatypes/style/mxStylesheet.js
+++ b/packages/core/src/util/datatypes/style/mxStylesheet.js
@@ -10,15 +10,7 @@ import {
   ARROW_CLASSIC,
   NONE,
   SHAPE_CONNECTOR,
-  SHAPE_RECTANGLE,
-  STYLE_ALIGN,
-  STYLE_ENDARROW,
-  STYLE_FILLCOLOR,
-  STYLE_FONTCOLOR,
-  STYLE_PERIMETER,
-  STYLE_SHAPE,
-  STYLE_STROKECOLOR,
-  STYLE_VERTICAL_ALIGN,
+  SHAPE_RECTANGLE
 } from '../../mxConstants';
 import mxPerimeter from './mxPerimeter';
 import mxUtils from '../../mxUtils';
@@ -45,9 +37,9 @@ import { clone } from '../../mxCloneUtils';
  *
  * ```javascript
  * var vertexStyle = stylesheet.getDefaultVertexStyle();
- * vertexStyle[mxConstants.STYLE_ROUNDED] = true;
+ * vertexStyle.rounded = true;
  * var edgeStyle = stylesheet.getDefaultEdgeStyle();
- * edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
+ * edgeStyle.edge = mxEdgeStyle.EntityRelation;
  * ```
  *
  * Modifies the built-in default styles.
@@ -94,13 +86,13 @@ class mxStylesheet {
   // createDefaultVertexStyle(): StyleMap;
   createDefaultVertexStyle() {
     const style = {};
-    style[STYLE_SHAPE] = SHAPE_RECTANGLE;
-    style[STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-    style[STYLE_VERTICAL_ALIGN] = ALIGN_MIDDLE;
-    style[STYLE_ALIGN] = ALIGN_CENTER;
-    style[STYLE_FILLCOLOR] = '#C3D9FF';
-    style[STYLE_STROKECOLOR] = '#6482B9';
-    style[STYLE_FONTCOLOR] = '#774400';
+    style.shape = SHAPE_RECTANGLE;
+    style.perimeter = mxPerimeter.RectanglePerimeter;
+    style.verticalAlign = ALIGN_MIDDLE;
+    style.align = ALIGN_CENTER;
+    style.fillColor = '#C3D9FF';
+    style.strokeColor = '#6482B9';
+    style.fontColor = '#774400';
     return style;
   }
 
@@ -110,12 +102,12 @@ class mxStylesheet {
   // createDefaultEdgeStyle(): StyleMap;
   createDefaultEdgeStyle() {
     const style = {};
-    style[STYLE_SHAPE] = SHAPE_CONNECTOR;
-    style[STYLE_ENDARROW] = ARROW_CLASSIC;
-    style[STYLE_VERTICAL_ALIGN] = ALIGN_MIDDLE;
-    style[STYLE_ALIGN] = ALIGN_CENTER;
-    style[STYLE_STROKECOLOR] = '#6482B9';
-    style[STYLE_FONTCOLOR] = '#446299';
+    style.shape = SHAPE_CONNECTOR;
+    style.endArrow = ARROW_CLASSIC;
+    style.verticalAlign = ALIGN_MIDDLE;
+    style.align = ALIGN_CENTER;
+    style.strokeColor = '#6482B9';
+    style.fontColor = '#446299';
     return style;
   }
 
@@ -164,9 +156,9 @@ class mxStylesheet {
    *
    * ```javascript
    * var style = new Object();
-   * style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
-   * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-   * style[mxConstants.STYLE_ROUNDED] = true;
+   * style.shape = mxConstants.SHAPE_RECTANGLE;
+   * style.perimiter = mxPerimeter.RectanglePerimeter;
+   * style.rounded = true;
    * graph.getStylesheet().putCellStyle('rounded', style);
    * ```
    *
diff --git a/packages/core/src/util/mxConstants.js b/packages/core/src/util/mxConstants.js
index ede9624d7..aa9e3b02b 100644
--- a/packages/core/src/util/mxConstants.js
+++ b/packages/core/src/util/mxConstants.js
@@ -57,13 +57,6 @@ export const RENDERING_HINT_FASTEST = 'fastest';
  */
 export const DIALECT_SVG = 'svg';
 
-/**
- * Variable: DIALECT_VML
- *
- * Defines the VML display dialect name.
- */
-export const DIALECT_VML = 'vml';
-
 /**
  * Variable: DIALECT_MIXEDHTML
  *
@@ -92,13 +85,6 @@ export const DIALECT_STRICTHTML = 'strictHtml';
  */
 export const NS_SVG = 'http://www.w3.org/2000/svg';
 
-/**
- * Variable: NS_XHTML
- *
- * Defines the XHTML namespace.
- */
-export const NS_XHTML = 'http://www.w3.org/1999/xhtml';
-
 /**
  * Variable: NS_XLINK
  *
@@ -624,7 +610,7 @@ export const DEFAULT_IMAGESIZE = 24;
  * Variable: ENTITY_SEGMENT
  *
  * Defines the length of the horizontal segment of an Entity Relation.
- * This can be overridden using <mxConstants.STYLE_SEGMENT> style.
+ * This can be overridden using <mxConstants.'segment'> style.
  * Default is 30.
  */
 export const ENTITY_SEGMENT = 30;
@@ -704,1161 +690,6 @@ export const PAGE_FORMAT_LETTER_LANDSCAPE = [0, 0, 1100, 850];
  */
 export const NONE = 'none';
 
-/**
- * Variable: STYLE_PERIMETER
- *
- * Defines the key for the perimeter style. This is a function that defines
- * the perimeter around a particular shape. Possible values are the
- * functions defined in <mxPerimeter>. Alternatively, the constants in this
- * class that start with "PERIMETER_" may be used to access
- * perimeter styles in <mxStyleRegistry>. Value is "perimeter".
- */
-export const STYLE_PERIMETER = 'perimeter';
-
-/**
- * Variable: STYLE_SOURCE_PORT
- *
- * Defines the ID of the cell that should be used for computing the
- * perimeter point of the source for an edge. This allows for graphically
- * connecting to a cell while keeping the actual terminal of the edge.
- * Value is "sourcePort".
- */
-export const STYLE_SOURCE_PORT = 'sourcePort';
-
-/**
- * Variable: STYLE_TARGET_PORT
- *
- * Defines the ID of the cell that should be used for computing the
- * perimeter point of the target for an edge. This allows for graphically
- * connecting to a cell while keeping the actual terminal of the edge.
- * Value is "targetPort".
- */
-export const STYLE_TARGET_PORT = 'targetPort';
-
-/**
- * Variable: STYLE_PORT_CONSTRAINT
- *
- * Defines the direction(s) that edges are allowed to connect to cells in.
- * Possible values are "DIRECTION_NORTH, DIRECTION_SOUTH,
- * DIRECTION_EAST" and "DIRECTION_WEST". Value is
- * "portConstraint".
- */
-export const STYLE_PORT_CONSTRAINT = 'portConstraint';
-
-/**
- * Variable: STYLE_PORT_CONSTRAINT_ROTATION
- *
- * Define whether port constraint directions are rotated with vertex
- * rotation. 0 (default) causes port constraints to remain absolute,
- * relative to the graph, 1 causes the constraints to rotate with
- * the vertex. Value is "portConstraintRotation".
- */
-export const STYLE_PORT_CONSTRAINT_ROTATION = 'portConstraintRotation';
-
-/**
- * Variable: STYLE_SOURCE_PORT_CONSTRAINT
- *
- * Defines the direction(s) that edges are allowed to connect to sources in.
- * Possible values are "DIRECTION_NORTH, DIRECTION_SOUTH, DIRECTION_EAST"
- * and "DIRECTION_WEST". Value is "sourcePortConstraint".
- */
-export const STYLE_SOURCE_PORT_CONSTRAINT = 'sourcePortConstraint';
-
-/**
- * Variable: STYLE_TARGET_PORT_CONSTRAINT
- *
- * Defines the direction(s) that edges are allowed to connect to targets in.
- * Possible values are "DIRECTION_NORTH, DIRECTION_SOUTH, DIRECTION_EAST"
- * and "DIRECTION_WEST". Value is "targetPortConstraint".
- */
-export const STYLE_TARGET_PORT_CONSTRAINT = 'targetPortConstraint';
-
-/**
- * Variable: STYLE_OPACITY
- *
- * Defines the key for the opacity style. The type of the value is
- * numeric and the possible range is 0-100. Value is "opacity".
- */
-export const STYLE_OPACITY = 'opacity';
-
-/**
- * Variable: STYLE_FILL_OPACITY
- *
- * Defines the key for the fill opacity style. The type of the value is
- * numeric and the possible range is 0-100. Value is "fillOpacity".
- */
-export const STYLE_FILL_OPACITY = 'fillOpacity';
-
-/**
- * Variable: STYLE_STROKE_OPACITY
- *
- * Defines the key for the stroke opacity style. The type of the value is
- * numeric and the possible range is 0-100. Value is "strokeOpacity".
- */
-export const STYLE_STROKE_OPACITY = 'strokeOpacity';
-
-/**
- * Variable: STYLE_TEXT_OPACITY
- *
- * Defines the key for the text opacity style. The type of the value is
- * numeric and the possible range is 0-100. Value is "textOpacity".
- */
-export const STYLE_TEXT_OPACITY = 'textOpacity';
-
-/**
- * Variable: STYLE_TEXT_DIRECTION
- *
- * Defines the key for the text direction style. Possible values are
- * "TEXT_DIRECTION_DEFAULT, TEXT_DIRECTION_AUTO, TEXT_DIRECTION_LTR"
- * and "TEXT_DIRECTION_RTL". Value is "textDirection".
- * The default value for the style is defined in <DEFAULT_TEXT_DIRECTION>.
- * It is used is no value is defined for this key in a given style. This is
- * an experimental style that is currently ignored in the backends.
- */
-export const STYLE_TEXT_DIRECTION = 'textDirection';
-
-/**
- * Variable: STYLE_OVERFLOW
- *
- * Defines the key for the overflow style. Possible values are 'visible'
- * 'hidden' 'fill' and 'width'. The default value is 'visible'. This value
- * specifies how overlapping vertex labels are handled. A value of
- * 'visible' will show the complete label. A value of 'hidden' will clip
- * the label so that it does not overlap the vertex bounds. A value of
- * 'fill' will use the vertex bounds and a value of 'width' will use the
- * vertex width for the label. See <mxGraph.isLabelClipped>. Note that
- * the vertical alignment is ignored for overflow fill and for horizontal
- * alignment, left should be used to avoid pixel offsets in Internet Explorer
- * 11 and earlier or if foreignObjects are disabled. Value is "overflow".
- */
-export const STYLE_OVERFLOW = 'overflow';
-
-/**
- * Variable: STYLE_ORTHOGONAL
- *
- * Defines if the connection points on either end of the edge should be
- * computed so that the edge is vertical or horizontal if possible and
- * if the point is not at a fixed location. Default is false. This is
- * used in <mxGraph.isOrthogonal>, which also returns true if the edgeStyle
- * of the edge is an elbow or entity. Value is "orthogonal".
- */
-export const STYLE_ORTHOGONAL = 'orthogonal';
-
-/**
- * Variable: STYLE_EXIT_X
- *
- * Defines the key for the horizontal relative coordinate connection point
- * of an edge with its source terminal. Value is "exitX".
- */
-export const STYLE_EXIT_X = 'exitX';
-
-/**
- * Variable: STYLE_EXIT_Y
- *
- * Defines the key for the vertical relative coordinate connection point
- * of an edge with its source terminal. Value is "exitY".
- */
-export const STYLE_EXIT_Y = 'exitY';
-
-/**
- * Variable: STYLE_EXIT_DX
- *
- * Defines the key for the horizontal offset of the connection point
- * of an edge with its source terminal. Value is "exitDx".
- */
-export const STYLE_EXIT_DX = 'exitDx';
-
-/**
- * Variable: STYLE_EXIT_DY
- *
- * Defines the key for the vertical offset of the connection point
- * of an edge with its source terminal. Value is "exitDy".
- */
-export const STYLE_EXIT_DY = 'exitDy';
-
-/**
- * Variable: STYLE_EXIT_PERIMETER
- *
- * Defines if the perimeter should be used to find the exact entry point
- * along the perimeter of the source. Possible values are 0 (false) and
- * 1 (true). Default is 1 (true). Value is "exitPerimeter".
- */
-export const STYLE_EXIT_PERIMETER = 'exitPerimeter';
-
-/**
- * Variable: STYLE_ENTRY_X
- *
- * Defines the key for the horizontal relative coordinate connection point
- * of an edge with its target terminal. Value is "entryX".
- */
-export const STYLE_ENTRY_X = 'entryX';
-
-/**
- * Variable: STYLE_ENTRY_Y
- *
- * Defines the key for the vertical relative coordinate connection point
- * of an edge with its target terminal. Value is "entryY".
- */
-export const STYLE_ENTRY_Y = 'entryY';
-
-/**
- * Variable: STYLE_ENTRY_DX
- *
- * Defines the key for the horizontal offset of the connection point
- * of an edge with its target terminal. Value is "entryDx".
- */
-export const STYLE_ENTRY_DX = 'entryDx';
-
-/**
- * Variable: STYLE_ENTRY_DY
- *
- * Defines the key for the vertical offset of the connection point
- * of an edge with its target terminal. Value is "entryDy".
- */
-export const STYLE_ENTRY_DY = 'entryDy';
-
-/**
- * Variable: STYLE_ENTRY_PERIMETER
- *
- * Defines if the perimeter should be used to find the exact entry point
- * along the perimeter of the target. Possible values are 0 (false) and
- * 1 (true). Default is 1 (true). Value is "entryPerimeter".
- */
-export const STYLE_ENTRY_PERIMETER = 'entryPerimeter';
-
-/**
- * Variable: STYLE_WHITE_SPACE
- *
- * Defines the key for the white-space style. Possible values are 'nowrap'
- * and 'wrap'. The default value is 'nowrap'. This value specifies how
- * white-space inside a HTML vertex label should be handled. A value of
- * 'nowrap' means the text will never wrap to the next line until a
- * linefeed is encountered. A value of 'wrap' means text will wrap when
- * necessary. This style is only used for HTML labels.
- * See <mxGraph.isWrapping>. Value is "whiteSpace".
- */
-export const STYLE_WHITE_SPACE = 'whiteSpace';
-
-/**
- * Variable: STYLE_ROTATION
- *
- * Defines the key for the rotation style. The type of the value is
- * numeric and the possible range is 0-360. Value is "rotation".
- */
-export const STYLE_ROTATION = 'rotation';
-
-/**
- * Variable: STYLE_FILLCOLOR
- *
- * Defines the key for the fill color. Possible values are all HTML color
- * names or HEX codes, as well as special keywords such as 'swimlane,
- * 'inherit' or 'indicated' to use the color code of a related cell or the
- * indicator shape. Value is "fillColor".
- */
-export const STYLE_FILLCOLOR = 'fillColor';
-
-/**
- * Variable: STYLE_POINTER_EVENTS
- *
- * Specifies if pointer events should be fired on transparent backgrounds.
- * This style is currently only supported in <mxRectangleShape>. Default
- * is true. Value is "pointerEvents". This is typically set to
- * false in groups where the transparent part should allow any underlying
- * cells to be clickable.
- */
-export const STYLE_POINTER_EVENTS = 'pointerEvents';
-
-/**
- * Variable: STYLE_SWIMLANE_FILLCOLOR
- *
- * Defines the key for the fill color of the swimlane background. Possible
- * values are all HTML color names or HEX codes. Default is no background.
- * Value is "swimlaneFillColor".
- */
-export const STYLE_SWIMLANE_FILLCOLOR = 'swimlaneFillColor';
-
-/**
- * Variable: STYLE_MARGIN
- *
- * Defines the key for the margin between the ellipses in the double ellipse shape.
- * Possible values are all positive numbers. Value is "margin".
- */
-export const STYLE_MARGIN = 'margin';
-
-/**
- * Variable: STYLE_GRADIENTCOLOR
- *
- * Defines the key for the gradient color. Possible values are all HTML color
- * names or HEX codes, as well as special keywords such as 'swimlane,
- * 'inherit' or 'indicated' to use the color code of a related cell or the
- * indicator shape. This is ignored if no fill color is defined. Value is
- * "gradientColor".
- */
-export const STYLE_GRADIENTCOLOR = 'gradientColor';
-
-/**
- * Variable: STYLE_GRADIENT_DIRECTION
- *
- * Defines the key for the gradient direction. Possible values are
- * <DIRECTION_EAST>, <DIRECTION_WEST>, <DIRECTION_NORTH> and
- * <DIRECTION_SOUTH>. Default is <DIRECTION_SOUTH>. Generally, and by
- * default in mxGraph, gradient painting is done from the value of
- * <STYLE_FILLCOLOR> to the value of <STYLE_GRADIENTCOLOR>. Taking the
- * example of <DIRECTION_NORTH>, this means <STYLE_FILLCOLOR> color at the
- * bottom of paint pattern and <STYLE_GRADIENTCOLOR> at top, with a
- * gradient in-between. Value is "gradientDirection".
- */
-export const STYLE_GRADIENT_DIRECTION = 'gradientDirection';
-
-/**
- * Variable: STYLE_STROKECOLOR
- *
- * Defines the key for the strokeColor style. Possible values are all HTML
- * color names or HEX codes, as well as special keywords such as 'swimlane,
- * 'inherit' 'indicated' to use the color code of a related cell or the
- * indicator shape or 'none' for no color. Value is "strokeColor".
- */
-export const STYLE_STROKECOLOR = 'strokeColor';
-
-/**
- * Variable: STYLE_SEPARATORCOLOR
- *
- * Defines the key for the separatorColor style. Possible values are all
- * HTML color names or HEX codes. This style is only used for
- * <SHAPE_SWIMLANE> shapes. Value is "separatorColor".
- */
-export const STYLE_SEPARATORCOLOR = 'separatorColor';
-
-/**
- * Variable: STYLE_STROKEWIDTH
- *
- * Defines the key for the strokeWidth style. The type of the value is
- * numeric and the possible range is any non-negative value larger or equal
- * to 1. The value defines the stroke width in pixels. Note: To hide a
- * stroke use strokeColor none. Value is "strokeWidth".
- */
-export const STYLE_STROKEWIDTH = 'strokeWidth';
-
-/**
- * Variable: STYLE_ALIGN
- *
- * Defines the key for the align style. Possible values are <ALIGN_LEFT>,
- * <ALIGN_CENTER> and <ALIGN_RIGHT>. This value defines how the lines of
- * the label are horizontally aligned. <ALIGN_LEFT> mean label text lines
- * are aligned to left of the label bounds, <ALIGN_RIGHT> to the right of
- * the label bounds and <ALIGN_CENTER> means the center of the text lines
- * are aligned in the center of the label bounds. Note this value doesn't
- * affect the positioning of the overall label bounds relative to the
- * vertex, to move the label bounds horizontally, use
- * <STYLE_LABEL_POSITION>. Value is "align".
- */
-export const STYLE_ALIGN = 'align';
-
-/**
- * Variable: STYLE_VERTICAL_ALIGN
- *
- * Defines the key for the verticalAlign style. Possible values are
- * <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM>. This value defines how
- * the lines of the label are vertically aligned. <ALIGN_TOP> means the
- * topmost label text line is aligned against the top of the label bounds,
- * <ALIGN_BOTTOM> means the bottom-most label text line is aligned against
- * the bottom of the label bounds and <ALIGN_MIDDLE> means there is equal
- * spacing between the topmost text label line and the top of the label
- * bounds and the bottom-most text label line and the bottom of the label
- * bounds. Note this value doesn't affect the positioning of the overall
- * label bounds relative to the vertex, to move the label bounds
- * vertically, use <STYLE_VERTICAL_LABEL_POSITION>. Value is "verticalAlign".
- */
-export const STYLE_VERTICAL_ALIGN = 'verticalAlign';
-
-/**
- * Variable: STYLE_LABEL_WIDTH
- *
- * Defines the key for the width of the label if the label position is not
- * center. Value is "labelWidth".
- */
-export const STYLE_LABEL_WIDTH = 'labelWidth';
-
-/**
- * Variable: STYLE_LABEL_POSITION
- *
- * Defines the key for the horizontal label position of vertices. Possible
- * values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT>. Default is
- * <ALIGN_CENTER>. The label align defines the position of the label
- * relative to the cell. <ALIGN_LEFT> means the entire label bounds is
- * placed completely just to the left of the vertex, <ALIGN_RIGHT> means
- * adjust to the right and <ALIGN_CENTER> means the label bounds are
- * vertically aligned with the bounds of the vertex. Note this value
- * doesn't affect the positioning of label within the label bounds, to move
- * the label horizontally within the label bounds, use <STYLE_ALIGN>.
- * Value is "labelPosition".
- */
-export const STYLE_LABEL_POSITION = 'labelPosition';
-
-/**
- * Variable: STYLE_VERTICAL_LABEL_POSITION
- *
- * Defines the key for the vertical label position of vertices. Possible
- * values are <ALIGN_TOP>, <ALIGN_BOTTOM> and <ALIGN_MIDDLE>. Default is
- * <ALIGN_MIDDLE>. The label align defines the position of the label
- * relative to the cell. <ALIGN_TOP> means the entire label bounds is
- * placed completely just on the top of the vertex, <ALIGN_BOTTOM> means
- * adjust on the bottom and <ALIGN_MIDDLE> means the label bounds are
- * horizontally aligned with the bounds of the vertex. Note this value
- * doesn't affect the positioning of label within the label bounds, to move
- * the label vertically within the label bounds, use
- * <STYLE_VERTICAL_ALIGN>. Value is "verticalLabelPosition".
- */
-export const STYLE_VERTICAL_LABEL_POSITION = 'verticalLabelPosition';
-
-/**
- * Variable: STYLE_IMAGE_ASPECT
- *
- * Defines the key for the image aspect style. Possible values are 0 (do
- * not preserve aspect) or 1 (keep aspect). This is only used in
- * <mxImageShape>. Default is 1. Value is "imageAspect".
- */
-export const STYLE_IMAGE_ASPECT = 'imageAspect';
-
-/**
- * Variable: STYLE_IMAGE_ALIGN
- *
- * Defines the key for the align style. Possible values are <ALIGN_LEFT>,
- * <ALIGN_CENTER> and <ALIGN_RIGHT>. The value defines how any image in the
- * vertex label is aligned horizontally within the label bounds of a
- * <SHAPE_LABEL> shape. Value is "imageAlign".
- */
-export const STYLE_IMAGE_ALIGN = 'imageAlign';
-
-/**
- * Variable: STYLE_IMAGE_VERTICAL_ALIGN
- *
- * Defines the key for the verticalAlign style. Possible values are
- * <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM>. The value defines how
- * any image in the vertex label is aligned vertically within the label
- * bounds of a <SHAPE_LABEL> shape. Value is "imageVerticalAlign".
- */
-export const STYLE_IMAGE_VERTICAL_ALIGN = 'imageVerticalAlign';
-
-/**
- * Variable: STYLE_GLASS
- *
- * Defines the key for the glass style. Possible values are 0 (disabled) and
- * 1(enabled). The default value is 0. This is used in <mxLabel>. Value is
- * "glass".
- */
-export const STYLE_GLASS = 'glass';
-
-/**
- * Variable: STYLE_IMAGE
- *
- * Defines the key for the image style. Possible values are any image URL,
- * the type of the value is String. This is the path to the image that is
- * to be displayed within the label of a vertex. Data URLs should use the
- * following format: data:image/png,xyz where xyz is the base64 encoded
- * data (without the "base64"-prefix). Note that Data URLs are only
- * supported in modern browsers. Value is "image".
- */
-export const STYLE_IMAGE = 'image';
-
-/**
- * Variable: STYLE_IMAGE_WIDTH
- *
- * Defines the key for the imageWidth style. The type of this value is
- * int, the value is the image width in pixels and must be greater than 0.
- * Value is "imageWidth".
- */
-export const STYLE_IMAGE_WIDTH = 'imageWidth';
-
-/**
- * Variable: STYLE_IMAGE_HEIGHT
- *
- * Defines the key for the imageHeight style. The type of this value is
- * int, the value is the image height in pixels and must be greater than 0.
- * Value is "imageHeight".
- */
-export const STYLE_IMAGE_HEIGHT = 'imageHeight';
-
-/**
- * Variable: STYLE_IMAGE_BACKGROUND
- *
- * Defines the key for the image background color. This style is only used
- * in <mxImageShape>. Possible values are all HTML color names or HEX
- * codes. Value is "imageBackground".
- */
-export const STYLE_IMAGE_BACKGROUND = 'imageBackground';
-
-/**
- * Variable: STYLE_IMAGE_BORDER
- *
- * Defines the key for the image border color. This style is only used in
- * <mxImageShape>. Possible values are all HTML color names or HEX codes.
- * Value is "imageBorder".
- */
-export const STYLE_IMAGE_BORDER = 'imageBorder';
-
-/**
- * Variable: STYLE_FLIPH
- *
- * Defines the key for the horizontal image flip. This style is only used
- * in <mxImageShape>. Possible values are 0 and 1. Default is 0. Value is
- * "flipH".
- */
-export const STYLE_FLIPH = 'flipH';
-
-/**
- * Variable: STYLE_FLIPV
- *
- * Defines the key for the vertical flip. Possible values are 0 and 1.
- * Default is 0. Value is "flipV".
- */
-export const STYLE_FLIPV = 'flipV';
-
-/**
- * Variable: STYLE_NOLABEL
- *
- * Defines the key for the noLabel style. If this is true then no label is
- * visible for a given cell. Possible values are true or false (1 or 0).
- * Default is false. Value is "noLabel".
- */
-export const STYLE_NOLABEL = 'noLabel';
-
-/**
- * Variable: STYLE_NOEDGESTYLE
- *
- * Defines the key for the noEdgeStyle style. If this is true then no edge
- * style is applied for a given edge. Possible values are true or false
- * (1 or 0). Default is false. Value is "noEdgeStyle".
- */
-export const STYLE_NOEDGESTYLE = 'noEdgeStyle';
-
-/**
- * Variable: STYLE_LABEL_BACKGROUNDCOLOR
- *
- * Defines the key for the label background color. Possible values are all
- * HTML color names or HEX codes. Value is "labelBackgroundColor".
- */
-export const STYLE_LABEL_BACKGROUNDCOLOR = 'labelBackgroundColor';
-
-/**
- * Variable: STYLE_LABEL_BORDERCOLOR
- *
- * Defines the key for the label border color. Possible values are all
- * HTML color names or HEX codes. Value is "labelBorderColor".
- */
-export const STYLE_LABEL_BORDERCOLOR = 'labelBorderColor';
-
-/**
- * Variable: STYLE_LABEL_PADDING
- *
- * Defines the key for the label padding, ie. the space between the label
- * border and the label. Value is "labelPadding".
- */
-export const STYLE_LABEL_PADDING = 'labelPadding';
-
-/**
- * Variable: STYLE_INDICATOR_SHAPE
- *
- * Defines the key for the indicator shape used within an <mxLabel>.
- * Possible values are all SHAPE_* constants or the names of any new
- * shapes. The indicatorShape has precedence over the indicatorImage.
- * Value is "indicatorShape".
- */
-export const STYLE_INDICATOR_SHAPE = 'indicatorShape';
-
-/**
- * Variable: STYLE_INDICATOR_IMAGE
- *
- * Defines the key for the indicator image used within an <mxLabel>.
- * Possible values are all image URLs. The indicatorShape has
- * precedence over the indicatorImage. Value is "indicatorImage".
- */
-export const STYLE_INDICATOR_IMAGE = 'indicatorImage';
-
-/**
- * Variable: STYLE_INDICATOR_COLOR
- *
- * Defines the key for the indicatorColor style. Possible values are all
- * HTML color names or HEX codes, as well as the special 'swimlane' keyword
- * to refer to the color of the parent swimlane if one exists. Value is
- * "indicatorColor".
- */
-export const STYLE_INDICATOR_COLOR = 'indicatorColor';
-
-/**
- * Variable: STYLE_INDICATOR_STROKECOLOR
- *
- * Defines the key for the indicator stroke color in <mxLabel>.
- * Possible values are all color codes. Value is "indicatorStrokeColor".
- */
-export const STYLE_INDICATOR_STROKECOLOR = 'indicatorStrokeColor';
-
-/**
- * Variable: STYLE_INDICATOR_GRADIENTCOLOR
- *
- * Defines the key for the indicatorGradientColor style. Possible values
- * are all HTML color names or HEX codes. This style is only supported in
- * <SHAPE_LABEL> shapes. Value is "indicatorGradientColor".
- */
-export const STYLE_INDICATOR_GRADIENTCOLOR = 'indicatorGradientColor';
-
-/**
- * Variable: STYLE_INDICATOR_SPACING
- *
- * The defines the key for the spacing between the label and the
- * indicator in <mxLabel>. Possible values are in pixels. Value is
- * "indicatorSpacing".
- */
-export const STYLE_INDICATOR_SPACING = 'indicatorSpacing';
-
-/**
- * Variable: STYLE_INDICATOR_WIDTH
- *
- * Defines the key for the indicator width. Possible values start at 0 (in
- * pixels). Value is "indicatorWidth".
- */
-export const STYLE_INDICATOR_WIDTH = 'indicatorWidth';
-
-/**
- * Variable: STYLE_INDICATOR_HEIGHT
- *
- * Defines the key for the indicator height. Possible values start at 0 (in
- * pixels). Value is "indicatorHeight".
- */
-export const STYLE_INDICATOR_HEIGHT = 'indicatorHeight';
-
-/**
- * Variable: STYLE_INDICATOR_DIRECTION
- *
- * Defines the key for the indicatorDirection style. The direction style is
- * used to specify the direction of certain shapes (eg. <mxTriangle>).
- * Possible values are <DIRECTION_EAST> (default), <DIRECTION_WEST>,
- * <DIRECTION_NORTH> and <DIRECTION_SOUTH>. Value is "indicatorDirection".
- */
-export const STYLE_INDICATOR_DIRECTION = 'indicatorDirection';
-
-/**
- * Variable: STYLE_SHADOW
- *
- * Defines the key for the shadow style. The type of the value is Boolean.
- * Value is "shadow".
- */
-export const STYLE_SHADOW = 'shadow';
-
-/**
- * Variable: STYLE_SEGMENT
- *
- * Defines the key for the segment style. The type of this value is float
- * and the value represents the size of the horizontal segment of the
- * entity relation style. Default is ENTITY_SEGMENT. Value is "segment".
- */
-export const STYLE_SEGMENT = 'segment';
-
-/**
- * Variable: STYLE_ENDARROW
- *
- * Defines the key for the end arrow marker. Possible values are all
- * constants with an ARROW-prefix. This is only used in <mxConnector>.
- * Value is "endArrow".
- *
- * Example:
- * (code)
- * style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
- * (end)
- */
-export const STYLE_ENDARROW = 'endArrow';
-
-/**
- * Variable: STYLE_STARTARROW
- *
- * Defines the key for the start arrow marker. Possible values are all
- * constants with an ARROW-prefix. This is only used in <mxConnector>.
- * See <STYLE_ENDARROW>. Value is "startArrow".
- */
-export const STYLE_STARTARROW = 'startArrow';
-
-/**
- * Variable: STYLE_ENDSIZE
- *
- * Defines the key for the endSize style. The type of this value is numeric
- * and the value represents the size of the end marker in pixels. Value is
- * "endSize".
- */
-export const STYLE_ENDSIZE = 'endSize';
-
-/**
- * Variable: STYLE_STARTSIZE
- *
- * Defines the key for the startSize style. The type of this value is
- * numeric and the value represents the size of the start marker or the
- * size of the swimlane title region depending on the shape it is used for.
- * Value is "startSize".
- */
-export const STYLE_STARTSIZE = 'startSize';
-
-/**
- * Variable: STYLE_SWIMLANE_LINE
- *
- * Defines the key for the swimlaneLine style. This style specifies whether
- * the line between the title regio of a swimlane should be visible. Use 0
- * for hidden or 1 (default) for visible. Value is "swimlaneLine".
- */
-export const STYLE_SWIMLANE_LINE = 'swimlaneLine';
-
-/**
- * Variable: STYLE_ENDFILL
- *
- * Defines the key for the endFill style. Use 0 for no fill or 1 (default)
- * for fill. (This style is only exported via <mxImageExport>.) Value is
- * "endFill".
- */
-export const STYLE_ENDFILL = 'endFill';
-
-/**
- * Variable: STYLE_STARTFILL
- *
- * Defines the key for the startFill style. Use 0 for no fill or 1 (default)
- * for fill. (This style is only exported via <mxImageExport>.) Value is
- * "startFill".
- */
-export const STYLE_STARTFILL = 'startFill';
-
-/**
- * Variable: STYLE_DASHED
- *
- * Defines the key for the dashed style. Use 0 (default) for non-dashed or 1
- * for dashed. Value is "dashed".
- */
-export const STYLE_DASHED = 'dashed';
-
-/**
- * Variable: STYLE_DASH_PATTERN
- *
- * Defines the key for the dashed pattern style in SVG and image exports.
- * The type of this value is a space separated list of numbers that specify
- * a custom-defined dash pattern. Dash styles are defined in terms of the
- * length of the dash (the drawn part of the stroke) and the length of the
- * space between the dashes. The lengths are relative to the line width: a
- * length of "1" is equal to the line width. VML ignores this style and
- * uses dashStyle instead as defined in the VML specification. This style
- * is only used in the <mxConnector> shape. Value is "dashPattern".
- */
-export const STYLE_DASH_PATTERN = 'dashPattern';
-
-/**
- * Variable: STYLE_FIX_DASH
- *
- * Defines the key for the fixDash style. Use 0 (default) for dash patterns
- * that depend on the linewidth and 1 for dash patterns that ignore the
- * line width. Value is "fixDash".
- */
-export const STYLE_FIX_DASH = 'fixDash';
-
-/**
- * Variable: STYLE_ROUNDED
- *
- * Defines the key for the rounded style. The type of this value is
- * Boolean. For edges this determines whether or not joins between edges
- * segments are smoothed to a rounded finish. For vertices that have the
- * rectangle shape, this determines whether or not the rectangle is
- * rounded. Use 0 (default) for non-rounded or 1 for rounded. Value is
- * "rounded".
- */
-export const STYLE_ROUNDED = 'rounded';
-
-/**
- * Variable: STYLE_CURVED
- *
- * Defines the key for the curved style. The type of this value is
- * Boolean. It is only applicable for connector shapes. Use 0 (default)
- * for non-curved or 1 for curved. Value is "curved".
- */
-export const STYLE_CURVED = 'curved';
-
-/**
- * Variable: STYLE_ARCSIZE
- *
- * Defines the rounding factor for a rounded rectangle in percent (without
- * the percent sign). Possible values are between 0 and 100. If this value
- * is not specified then RECTANGLE_ROUNDING_FACTOR * 100 is used. For
- * edges, this defines the absolute size of rounded corners in pixels. If
- * this values is not specified then LINE_ARCSIZE is used.
- * (This style is only exported via <mxImageExport>.) Value is "arcSize".
- */
-export const STYLE_ARCSIZE = 'arcSize';
-
-/**
- * Variable: STYLE_ABSOLUTE_ARCSIZE
- *
- * Defines the key for the absolute arc size style. This specifies if
- * arcSize for rectangles is abolute or relative. Possible values are 1
- * and 0 (default). Value is "absoluteArcSize".
- */
-export const STYLE_ABSOLUTE_ARCSIZE = 'absoluteArcSize';
-
-/**
- * Variable: STYLE_SOURCE_PERIMETER_SPACING
- *
- * Defines the key for the source perimeter spacing. The type of this value
- * is numeric. This is the distance between the source connection point of
- * an edge and the perimeter of the source vertex in pixels. This style
- * only applies to edges. Value is "sourcePerimeterSpacing".
- */
-export const STYLE_SOURCE_PERIMETER_SPACING = 'sourcePerimeterSpacing';
-
-/**
- * Variable: STYLE_TARGET_PERIMETER_SPACING
- *
- * Defines the key for the target perimeter spacing. The type of this value
- * is numeric. This is the distance between the target connection point of
- * an edge and the perimeter of the target vertex in pixels. This style
- * only applies to edges. Value is "targetPerimeterSpacing".
- */
-export const STYLE_TARGET_PERIMETER_SPACING = 'targetPerimeterSpacing';
-
-/**
- * Variable: STYLE_PERIMETER_SPACING
- *
- * Defines the key for the perimeter spacing. This is the distance between
- * the connection point and the perimeter in pixels. When used in a vertex
- * style, this applies to all incoming edges to floating ports (edges that
- * terminate on the perimeter of the vertex). When used in an edge style,
- * this spacing applies to the source and target separately, if they
- * terminate in floating ports (on the perimeter of the vertex). Value is
- * "perimeterSpacing".
- */
-export const STYLE_PERIMETER_SPACING = 'perimeterSpacing';
-
-/**
- * Variable: STYLE_SPACING
- *
- * Defines the key for the spacing. The value represents the spacing, in
- * pixels, added to each side of a label in a vertex (style applies to
- * vertices only). Value is "spacing".
- */
-export const STYLE_SPACING = 'spacing';
-
-/**
- * Variable: STYLE_SPACING_TOP
- *
- * Defines the key for the spacingTop style. The value represents the
- * spacing, in pixels, added to the top side of a label in a vertex (style
- * applies to vertices only). Value is "spacingTop".
- */
-export const STYLE_SPACING_TOP = 'spacingTop';
-
-/**
- * Variable: STYLE_SPACING_LEFT
- *
- * Defines the key for the spacingLeft style. The value represents the
- * spacing, in pixels, added to the left side of a label in a vertex (style
- * applies to vertices only). Value is "spacingLeft".
- */
-export const STYLE_SPACING_LEFT = 'spacingLeft';
-
-/**
- * Variable: STYLE_SPACING_BOTTOM
- *
- * Defines the key for the spacingBottom style The value represents the
- * spacing, in pixels, added to the bottom side of a label in a vertex
- * (style applies to vertices only). Value is "spacingBottom".
- */
-export const STYLE_SPACING_BOTTOM = 'spacingBottom';
-
-/**
- * Variable: STYLE_SPACING_RIGHT
- *
- * Defines the key for the spacingRight style The value represents the
- * spacing, in pixels, added to the right side of a label in a vertex (style
- * applies to vertices only). Value is "spacingRight".
- */
-export const STYLE_SPACING_RIGHT = 'spacingRight';
-
-/**
- * Variable: STYLE_HORIZONTAL
- *
- * Defines the key for the horizontal style. Possible values are
- * true or false. This value only applies to vertices. If the <STYLE_SHAPE>
- * is "SHAPE_SWIMLANE" a value of false indicates that the
- * swimlane should be drawn vertically, true indicates to draw it
- * horizontally. If the shape style does not indicate that this vertex is a
- * swimlane, this value affects only whether the label is drawn
- * horizontally or vertically. Value is "horizontal".
- */
-export const STYLE_HORIZONTAL = 'horizontal';
-
-/**
- * Variable: STYLE_DIRECTION
- *
- * Defines the key for the direction style. The direction style is used
- * to specify the direction of certain shapes (eg. <mxTriangle>).
- * Possible values are <DIRECTION_EAST> (default), <DIRECTION_WEST>,
- * <DIRECTION_NORTH> and <DIRECTION_SOUTH>. Value is "direction".
- */
-export const STYLE_DIRECTION = 'direction';
-
-/**
- * Variable: STYLE_ANCHOR_POINT_DIRECTION
- *
- * Defines the key for the anchorPointDirection style. The defines if the
- * direction style should be taken into account when computing the fixed
- * point location for connected edges. Default is 1 (yes). Set this to 0
- * to ignore the direction style for fixed connection points. Value is
- * "anchorPointDirection".
- */
-export const STYLE_ANCHOR_POINT_DIRECTION = 'anchorPointDirection';
-
-/**
- * Variable: STYLE_ELBOW
- *
- * Defines the key for the elbow style. Possible values are
- * <ELBOW_HORIZONTAL> and <ELBOW_VERTICAL>. Default is <ELBOW_HORIZONTAL>.
- * This defines how the three segment orthogonal edge style leaves its
- * terminal vertices. The vertical style leaves the terminal vertices at
- * the top and bottom sides. Value is "elbow".
- */
-export const STYLE_ELBOW = 'elbow';
-
-/**
- * Variable: STYLE_FONTCOLOR
- *
- * Defines the key for the fontColor style. Possible values are all HTML
- * color names or HEX codes. Value is "fontColor".
- */
-export const STYLE_FONTCOLOR = 'fontColor';
-
-/**
- * Variable: STYLE_FONTFAMILY
- *
- * Defines the key for the fontFamily style. Possible values are names such
- * as Arial; Dialog; Verdana; Times New Roman. The value is of type String.
- * Value is fontFamily.
- */
-export const STYLE_FONTFAMILY = 'fontFamily';
-
-/**
- * Variable: STYLE_FONTSIZE
- *
- * Defines the key for the fontSize style (in px). The type of the value
- * is int. Value is "fontSize".
- */
-export const STYLE_FONTSIZE = 'fontSize';
-
-/**
- * Variable: STYLE_FONTSTYLE
- *
- * Defines the key for the fontStyle style. Values may be any logical AND
- * (sum) of <FONT_BOLD>, <FONT_ITALIC> and <FONT_UNDERLINE>.
- * The type of the value is int. Value is "fontStyle".
- */
-export const STYLE_FONTSTYLE = 'fontStyle';
-
-/**
- * Variable: STYLE_ASPECT
- *
- * Defines the key for the aspect style. Possible values are empty or fixed.
- * If fixed is used then the aspect ratio of the cell will be maintained
- * when resizing. Default is empty. Value is "aspect".
- */
-export const STYLE_ASPECT = 'aspect';
-
-/**
- * Variable: STYLE_AUTOSIZE
- *
- * Defines the key for the autosize style. This specifies if a cell should be
- * resized automatically if the value has changed. Possible values are 0 or 1.
- * Default is 0. See <mxGraph.isAutoSizeCell>. This is normally combined with
- * <STYLE_RESIZABLE> to disable manual sizing. Value is "autosize".
- */
-export const STYLE_AUTOSIZE = 'autosize';
-
-/**
- * Variable: STYLE_FOLDABLE
- *
- * Defines the key for the foldable style. This specifies if a cell is foldable
- * using a folding icon. Possible values are 0 or 1. Default is 1. See
- * <mxGraph.isCellFoldable>. Value is "foldable".
- */
-export const STYLE_FOLDABLE = 'foldable';
-
-/**
- * Variable: STYLE_EDITABLE
- *
- * Defines the key for the editable style. This specifies if the value of
- * a cell can be edited using the in-place editor. Possible values are 0 or
- * 1. Default is 1. See <mxGraph.isCellEditable>. Value is "editable".
- */
-export const STYLE_EDITABLE = 'editable';
-
-/**
- * Variable: STYLE_BACKGROUND_OUTLINE
- *
- * Defines the key for the backgroundOutline style. This specifies if a
- * only the background of a cell should be painted when it is highlighted.
- * Possible values are 0 or 1. Default is 0. Value is "backgroundOutline".
- */
-export const STYLE_BACKGROUND_OUTLINE = 'backgroundOutline';
-
-/**
- * Variable: STYLE_BENDABLE
- *
- * Defines the key for the bendable style. This specifies if the control
- * points of an edge can be moved. Possible values are 0 or 1. Default is
- * 1. See <mxGraph.isCellBendable>. Value is "bendable".
- */
-export const STYLE_BENDABLE = 'bendable';
-
-/**
- * Variable: STYLE_MOVABLE
- *
- * Defines the key for the movable style. This specifies if a cell can
- * be moved. Possible values are 0 or 1. Default is 1. See
- * <mxGraph.isCellMovable>. Value is "movable".
- */
-export const STYLE_MOVABLE = 'movable';
-
-/**
- * Variable: STYLE_RESIZABLE
- *
- * Defines the key for the resizable style. This specifies if a cell can
- * be resized. Possible values are 0 or 1. Default is 1. See
- * <mxGraph.isCellResizable>. Value is "resizable".
- */
-export const STYLE_RESIZABLE = 'resizable';
-
-/**
- * Variable: STYLE_RESIZE_WIDTH
- *
- * Defines the key for the resizeWidth style. This specifies if a cell's
- * width is resized if the parent is resized. If this is 1 then the width
- * will be resized even if the cell's geometry is relative. If this is 0
- * then the cell's width will not be resized. Default is not defined. Value
- * is "resizeWidth".
- */
-export const STYLE_RESIZE_WIDTH = 'resizeWidth';
-
-/**
- * Variable: STYLE_RESIZE_WIDTH
- *
- * Defines the key for the resizeHeight style. This specifies if a cell's
- * height if resize if the parent is resized. If this is 1 then the height
- * will be resized even if the cell's geometry is relative. If this is 0
- * then the cell's height will not be resized. Default is not defined. Value
- * is "resizeHeight".
- */
-export const STYLE_RESIZE_HEIGHT = 'resizeHeight';
-
-/**
- * Variable: STYLE_ROTATABLE
- *
- * Defines the key for the rotatable style. This specifies if a cell can
- * be rotated. Possible values are 0 or 1. Default is 1. See
- * <mxGraph.isCellRotatable>. Value is "rotatable".
- */
-export const STYLE_ROTATABLE = 'rotatable';
-
-/**
- * Variable: STYLE_CLONEABLE
- *
- * Defines the key for the cloneable style. This specifies if a cell can
- * be cloned. Possible values are 0 or 1. Default is 1. See
- * <mxGraph.isCellCloneable>. Value is "cloneable".
- */
-export const STYLE_CLONEABLE = 'cloneable';
-
-/**
- * Variable: STYLE_DELETABLE
- *
- * Defines the key for the deletable style. This specifies if a cell can be
- * deleted. Possible values are 0 or 1. Default is 1. See
- * <mxGraph.isCellDeletable>. Value is "deletable".
- */
-export const STYLE_DELETABLE = 'deletable';
-
-/**
- * Variable: STYLE_SHAPE
- *
- * Defines the key for the shape. Possible values are all constants with
- * a SHAPE-prefix or any newly defined shape names. Value is "shape".
- */
-export const STYLE_SHAPE = 'shape';
-
-/**
- * Variable: STYLE_EDGE
- *
- * Defines the key for the edge style. Possible values are the functions
- * defined in <mxEdgeStyle>. Value is "edgeStyle".
- */
-export const STYLE_EDGE = 'edgeStyle';
-
-/**
- * Variable: STYLE_JETTY_SIZE
- *
- * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.
- * Default is 10. Possible values are all numeric values or "auto".
- * Jetty size is the minimum length of the orthogonal segment before
- * it attaches to a shape.
- * Value is "jettySize".
- */
-export const STYLE_JETTY_SIZE = 'jettySize';
-
-/**
- * Variable: STYLE_SOURCE_JETTY_SIZE
- *
- * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.
- * Default is 10. Possible values are numeric values or "auto". This has
- * precedence over <STYLE_JETTY_SIZE>. Value is "sourceJettySize".
- */
-export const STYLE_SOURCE_JETTY_SIZE = 'sourceJettySize';
-
-/**
- * Variable: targetJettySize
- *
- * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.
- * Default is 10. Possible values are numeric values or "auto". This has
- * precedence over <STYLE_JETTY_SIZE>. Value is "targetJettySize".
- */
-export const STYLE_TARGET_JETTY_SIZE = 'targetJettySize';
-
-/**
- * Variable: STYLE_LOOP
- *
- * Defines the key for the loop style. Possible values are the functions
- * defined in <mxEdgeStyle>. Value is "loopStyle". Default is
- * <mxGraph.defaultLoopStylean>.
- */
-export const STYLE_LOOP = 'loopStyle';
-
-/**
- * Variable: STYLE_ORTHOGONAL_LOOP
- *
- * Defines the key for the orthogonal loop style. Possible values are 0 and
- * 1. Default is 0. Value is "orthogonalLoop". Use this style to specify
- * if loops with no waypoints and defined anchor points should be routed
- * using <STYLE_LOOP> or not routed.
- */
-export const STYLE_ORTHOGONAL_LOOP = 'orthogonalLoop';
-
-/**
- * Variable: STYLE_ROUTING_CENTER_X
- *
- * Defines the key for the horizontal routing center. Possible values are
- * between -0.5 and 0.5. This is the relative offset from the center used
- * for connecting edges. The type of this value is numeric. Value is
- * "routingCenterX".
- */
-export const STYLE_ROUTING_CENTER_X = 'routingCenterX';
-
-/**
- * Variable: STYLE_ROUTING_CENTER_Y
- *
- * Defines the key for the vertical routing center. Possible values are
- * between -0.5 and 0.5. This is the relative offset from the center used
- * for connecting edges. The type of this value is numeric. Value is
- * "routingCenterY".
- */
-export const STYLE_ROUTING_CENTER_Y = 'routingCenterY';
-
 /**
  * Variable: FONT_BOLD
  *
diff --git a/packages/core/src/util/mxUtils.js b/packages/core/src/util/mxUtils.js
index 868da0620..ee7919a9d 100644
--- a/packages/core/src/util/mxUtils.js
+++ b/packages/core/src/util/mxUtils.js
@@ -34,16 +34,6 @@ import {
   NODETYPE_TEXT,
   NONE,
   PAGE_FORMAT_A4_PORTRAIT,
-  STYLE_DIRECTION,
-  STYLE_FLIPH,
-  STYLE_FLIPV,
-  STYLE_HORIZONTAL,
-  STYLE_PORT_CONSTRAINT,
-  STYLE_PORT_CONSTRAINT_ROTATION,
-  STYLE_ROTATION,
-  STYLE_SOURCE_PORT_CONSTRAINT,
-  STYLE_STARTSIZE,
-  STYLE_TARGET_PORT_CONSTRAINT,
 } from './mxConstants';
 import mxPoint from './datatypes/mxPoint';
 import mxDictionary from './datatypes/mxDictionary';
@@ -905,10 +895,10 @@ const mxUtils = {
   getPortConstraints: (terminal, edge, source, defaultValue) => {
     const value = mxUtils.getValue(
       terminal.style,
-      STYLE_PORT_CONSTRAINT,
+      'portConstraint',
       mxUtils.getValue(
         edge.style,
-        source ? STYLE_SOURCE_PORT_CONSTRAINT : STYLE_TARGET_PORT_CONSTRAINT,
+        source ? 'sourcePortConstraint' : 'targetPortConstraint',
         null
       )
     );
@@ -920,13 +910,13 @@ const mxUtils = {
     let returnValue = DIRECTION_MASK_NONE;
     const constraintRotationEnabled = mxUtils.getValue(
       terminal.style,
-      STYLE_PORT_CONSTRAINT_ROTATION,
+      'portConstraintRotation',
       0
     );
     let rotation = 0;
 
     if (constraintRotationEnabled == 1) {
-      rotation = mxUtils.getValue(terminal.style, STYLE_ROTATION, 0);
+      rotation = mxUtils.getValue(terminal.style, 'rotation', 0);
     }
 
     let quad = 0;
@@ -1073,9 +1063,9 @@ const mxUtils = {
    * rectangle according to the respective styles in style.
    */
   getDirectedBounds(rect, m, style, flipH, flipV) {
-    const d = mxUtils.getValue(style, STYLE_DIRECTION, DIRECTION_EAST);
-    flipH = flipH != null ? flipH : mxUtils.getValue(style, STYLE_FLIPH, false);
-    flipV = flipV != null ? flipV : mxUtils.getValue(style, STYLE_FLIPV, false);
+    const d = mxUtils.getValue(style, 'direction', DIRECTION_EAST);
+    flipH = flipH != null ? flipH : mxUtils.getValue(style, 'flipH', false);
+    flipV = flipV != null ? flipV : mxUtils.getValue(style, 'flipV', false);
 
     m.x = Math.round(Math.max(0, Math.min(rect.width, m.x)));
     m.y = Math.round(Math.max(0, Math.min(rect.height, m.y)));
@@ -1321,10 +1311,10 @@ const mxUtils = {
       let h = state.height;
 
       const start =
-        mxUtils.getValue(state.style, STYLE_STARTSIZE) * state.view.scale;
+        mxUtils.getValue(state.style, 'startSize') * state.view.scale;
 
       if (start > 0) {
-        if (mxUtils.getValue(state.style, STYLE_HORIZONTAL, true)) {
+        if (mxUtils.getValue(state.style, 'horizontal', true)) {
           cy = state.y + start / 2;
           h = start;
         } else {
@@ -1343,7 +1333,7 @@ const mxUtils = {
 
       const rect = new mxRectangle(cx - w / 2, cy - h / 2, w, h);
       const alpha = mxUtils.toRadians(
-        mxUtils.getValue(state.style, STYLE_ROTATION) || 0
+        mxUtils.getValue(state.style, 'rotation') || 0
       );
 
       if (alpha != 0) {
@@ -2003,7 +1993,7 @@ const mxUtils = {
    * let cells = graph.getSelectionCells();
    * mxUtils.setCellStyleFlags(graph.model,
    *       cells,
-   *       mxConstants.STYLE_FONTSTYLE,
+   *       'fontStyle',
    *       mxConstants.FONT_BOLD);
    * (end)
    *
diff --git a/packages/core/src/view/cell/mxCellEditor.ts b/packages/core/src/view/cell/mxCellEditor.ts
index 07718cd38..99ef8f34d 100644
--- a/packages/core/src/view/cell/mxCellEditor.ts
+++ b/packages/core/src/view/cell/mxCellEditor.ts
@@ -23,13 +23,6 @@ import {
   FONT_STRIKETHROUGH,
   FONT_UNDERLINE,
   LINE_HEIGHT,
-  STYLE_ALIGN,
-  STYLE_FONTCOLOR,
-  STYLE_LABEL_POSITION,
-  STYLE_LABEL_WIDTH,
-  STYLE_OVERFLOW,
-  STYLE_VERTICAL_ALIGN,
-  STYLE_VERTICAL_LABEL_POSITION,
   WORD_WRAP,
 } from '../../util/mxConstants';
 import mxText from '../../shape/mxText';
@@ -610,14 +603,14 @@ class mxCellEditor {
           }
         }
       } else {
-        const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
+        const lw = mxUtils.getValue(state.style, 'labelWidth', null);
         m = state.text != null && this.align == null ? state.text.margin : null;
 
         if (m == null) {
           m = mxUtils.getAlignmentAsPoint(
             this.align ||
-              mxUtils.getValue(state.style, STYLE_ALIGN, ALIGN_CENTER),
-            mxUtils.getValue(state.style, STYLE_VERTICAL_ALIGN, ALIGN_MIDDLE)
+              mxUtils.getValue(state.style, 'align', ALIGN_CENTER),
+            mxUtils.getValue(state.style, 'verticalAlign', ALIGN_MIDDLE)
           );
         }
 
@@ -638,12 +631,12 @@ class mxCellEditor {
           let bounds = mxRectangle.fromRectangle(state);
           let hpos = mxUtils.getValue(
             state.style,
-            STYLE_LABEL_POSITION,
+            'labelPosition',
             ALIGN_CENTER
           );
           let vpos = mxUtils.getValue(
             state.style,
-            STYLE_VERTICAL_LABEL_POSITION,
+            'verticalLabelPosition',
             ALIGN_MIDDLE
           );
 
@@ -658,7 +651,7 @@ class mxCellEditor {
 
           if (
             !state.view.graph.cellRenderer.legacySpacing ||
-            state.style[STYLE_OVERFLOW] !== 'width'
+            state.style.overflow !== 'width'
           ) {
             // @ts-ignore
             const dummy = new mxText(); // FIXME!!!! ===================================================================================================
@@ -840,8 +833,8 @@ class mxCellEditor {
         state.style.fontFamily != null
           ? state.style.fontFamily
           : DEFAULT_FONTFAMILY;
-      const color = mxUtils.getValue(state.style, STYLE_FONTCOLOR, 'black');
-      const align = mxUtils.getValue(state.style, STYLE_ALIGN, ALIGN_LEFT);
+      const color = mxUtils.getValue(state.style, 'fontColor', 'black');
+      const align = mxUtils.getValue(state.style, 'align', ALIGN_LEFT);
       const bold = (state.style.fontStyle || 0) & FONT_BOLD;
       const italic = (state.style.fontStyle || 0) & FONT_ITALIC;
 
@@ -923,7 +916,7 @@ class mxCellEditor {
         this.autoSize &&
         // @ts-ignore
         (this.graph.model.isEdge(state.cell) ||
-          state.style[STYLE_OVERFLOW] !== 'fill')
+          state.style.overflow !== 'fill')
       ) {
         window.setTimeout(() => {
           this.resize();
@@ -1027,7 +1020,7 @@ class mxCellEditor {
           }
 
           if (this.align != null) {
-            this.graph.setCellStyles(STYLE_ALIGN, this.align, [state.cell]);
+            this.graph.setCellStyles('align', this.align, [state.cell]);
           }
         } finally {
           this.graph.getModel().endUpdate();
@@ -1101,7 +1094,7 @@ class mxCellEditor {
     if (
       !isEdge &&
       state.view.graph.cellRenderer.legacySpacing &&
-      state.style[STYLE_OVERFLOW] === 'fill'
+      state.style.overflow === 'fill'
     ) {
       result = (<mxShape>state.shape).getLabelBounds(
         mxRectangle.fromRectangle(state)
@@ -1187,7 +1180,7 @@ class mxCellEditor {
         const horizontal: string = <string>(
           mxUtils.getStringValue(
             state.style,
-            STYLE_LABEL_POSITION,
+            'labelPosition',
             ALIGN_CENTER
           )
         );
diff --git a/packages/core/src/view/cell/mxCellRenderer.ts b/packages/core/src/view/cell/mxCellRenderer.ts
index b96bdc0f3..37e47f1d1 100644
--- a/packages/core/src/view/cell/mxCellRenderer.ts
+++ b/packages/core/src/view/cell/mxCellRenderer.ts
@@ -46,33 +46,6 @@ import {
   SHAPE_RHOMBUS,
   SHAPE_SWIMLANE,
   SHAPE_TRIANGLE,
-  STYLE_ALIGN,
-  STYLE_FILLCOLOR,
-  STYLE_FONTCOLOR,
-  STYLE_FONTFAMILY,
-  STYLE_FONTSIZE,
-  STYLE_FONTSTYLE,
-  STYLE_GRADIENTCOLOR,
-  STYLE_HORIZONTAL,
-  STYLE_INDICATOR_DIRECTION,
-  STYLE_INDICATOR_STROKECOLOR,
-  STYLE_LABEL_BACKGROUNDCOLOR,
-  STYLE_LABEL_BORDERCOLOR,
-  STYLE_LABEL_POSITION,
-  STYLE_LABEL_WIDTH,
-  STYLE_OVERFLOW,
-  STYLE_ROTATION,
-  STYLE_SHAPE,
-  STYLE_SPACING,
-  STYLE_SPACING_BOTTOM,
-  STYLE_SPACING_LEFT,
-  STYLE_SPACING_RIGHT,
-  STYLE_SPACING_TOP,
-  STYLE_STROKECOLOR,
-  STYLE_TEXT_DIRECTION,
-  STYLE_TEXT_OPACITY,
-  STYLE_VERTICAL_ALIGN,
-  STYLE_VERTICAL_LABEL_POSITION,
 } from '../../util/mxConstants';
 import mxUtils from '../../util/mxUtils';
 import mxRectangle from '../../util/datatypes/mxRectangle';
@@ -248,7 +221,7 @@ class mxCellRenderer {
     if (state.style != null) {
       // Checks if there is a stencil for the name and creates
       // a shape instance for the stencil if one exists
-      const stencil = mxStencilRegistry.getStencil(state.style[STYLE_SHAPE]);
+      const stencil = mxStencilRegistry.getStencil(state.style.shape);
       if (stencil != null) {
         shape = new mxShape(stencil);
       } else {
@@ -294,7 +267,7 @@ class mxCellRenderer {
    */
   // getShapeConstructor(state: mxCellState): any;
   getShapeConstructor(state: mxCellState) {
-    let ctor = this.getShape(state.style[STYLE_SHAPE]);
+    let ctor = this.getShape(state.style.shape);
     if (ctor == null) {
       ctor = <typeof mxShape>(
         (state.cell.isEdge() ? this.defaultEdgeShape : this.defaultVertexShape)
@@ -318,11 +291,11 @@ class mxCellRenderer {
     shape.apply(state);
     shape.image = state.view.graph.getImage(state);
     shape.indicatorColor = state.view.graph.getIndicatorColor(state);
-    shape.indicatorStrokeColor = state.style[STYLE_INDICATOR_STROKECOLOR];
+    shape.indicatorStrokeColor = state.style['indicatorStrokeColor'];
     shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(
       state
     );
-    shape.indicatorDirection = state.style[STYLE_INDICATOR_DIRECTION];
+    shape.indicatorDirection = state.style['indicatorDirection'];
     shape.indicatorImage = state.view.graph.getIndicatorImage(state);
     this.postConfigureShape(state);
   }
@@ -338,11 +311,11 @@ class mxCellRenderer {
   // postConfigureShape(state: mxCellState): void;
   postConfigureShape(state: mxCellState) {
     if (state.shape != null) {
-      this.resolveColor(state, 'indicatorGradientColor', STYLE_GRADIENTCOLOR);
-      this.resolveColor(state, 'indicatorColor', STYLE_FILLCOLOR);
-      this.resolveColor(state, 'gradient', STYLE_GRADIENTCOLOR);
-      this.resolveColor(state, 'stroke', STYLE_STROKECOLOR);
-      this.resolveColor(state, 'fill', STYLE_FILLCOLOR);
+      this.resolveColor(state, 'indicatorGradientColor', 'gradientColor');
+      this.resolveColor(state, 'indicatorColor', 'fillColor');
+      this.resolveColor(state, 'gradient', 'gradientColor');
+      this.resolveColor(state, 'stroke', 'strokeColor');
+      this.resolveColor(state, 'fill', 'fillColor');
     }
   }
 
@@ -358,10 +331,10 @@ class mxCellRenderer {
     if (state.style != null) {
       const values = ['inherit', 'swimlane', 'indicated'];
       const styles = [
-        STYLE_FILLCOLOR,
-        STYLE_STROKECOLOR,
-        STYLE_GRADIENTCOLOR,
-        STYLE_FONTCOLOR,
+        'fillColor',
+        'strokeColor',
+        'gradientColor',
+        'fontColor',
       ];
 
       for (let i = 0; i < styles.length; i += 1) {
@@ -381,7 +354,7 @@ class mxCellRenderer {
    */
   // resolveColor(state: mxCellState, field: string, key: string): void;
   resolveColor(state: mxCellState, field: string, key: string) {
-    const shape = key === STYLE_FONTCOLOR ? state.text : state.shape;
+    const shape = key === 'fontColor' ? state.text : state.shape;
 
     if (shape != null) {
       const { graph } = state.view;
@@ -391,18 +364,18 @@ class mxCellRenderer {
 
       if (value === 'inherit') {
         // @ts-ignore
-        referenced = graph.model.getParent(state.cell);
+        referenced = state.cell.getParent();
       } else if (value === 'swimlane') {
         // @ts-ignore
         shape[field] =
-          key === STYLE_STROKECOLOR || key === STYLE_FONTCOLOR
+          key === 'strokeColor' || key === 'fontColor'
             ? '#000000'
             : '#ffffff';
 
         // @ts-ignore
-        if (graph.model.getTerminal(state.cell, false) != null) {
+        if (state.cell.getTerminal(false) != null) {
           // @ts-ignore
-          referenced = graph.model.getTerminal(state.cell, false);
+          referenced = state.cell.getTerminal(false);
         } else {
           referenced = state.cell;
         }
@@ -413,19 +386,19 @@ class mxCellRenderer {
         // @ts-ignore
         shape[field] = state.shape.indicatorColor;
       } else if (
-        key !== STYLE_FILLCOLOR &&
-        value === STYLE_FILLCOLOR &&
+        key !== 'fillColor' &&
+        value === 'fillColor' &&
         state.shape != null
       ) {
         // @ts-ignore
-        shape[field] = state.style[STYLE_FILLCOLOR];
+        shape[field] = state.style.fillColor;
       } else if (
-        key !== STYLE_STROKECOLOR &&
-        value === STYLE_STROKECOLOR &&
+        key !== 'strokeColor' &&
+        value === 'strokeColor' &&
         state.shape != null
       ) {
         // @ts-ignore
-        shape[field] = state.style[STYLE_STROKECOLOR];
+        shape[field] = state.style.strokeColor;
       }
 
       if (referenced != null) {
@@ -434,7 +407,7 @@ class mxCellRenderer {
         shape[field] = null;
 
         if (rstate != null) {
-          const rshape = key === STYLE_FONTCOLOR ? rstate.text : rstate.shape;
+          const rshape = key === 'fontColor' ? rstate.text : rstate.shape;
 
           if (rshape != null && field !== 'indicatorColor') {
             // @ts-ignore
@@ -997,7 +970,7 @@ class mxCellRenderer {
       state.view.graph.isHtmlLabel(state.cell) ||
       (value != null && isNode(value));
     const dialect = isForceHtml ? DIALECT_STRICTHTML : state.view.graph.dialect;
-    const overflow = state.style[STYLE_OVERFLOW] || 'visible';
+    const overflow = state.style.overflow || 'visible';
 
     if (
       state.text != null &&
@@ -1043,7 +1016,7 @@ class mxCellRenderer {
 
       const bounds = this.getLabelBounds(state);
       const nextScale = this.getTextScale(state);
-      this.resolveColor(state, 'color', STYLE_FONTCOLOR);
+      this.resolveColor(state, 'color', 'fontColor');
 
       if (
         forced ||
@@ -1110,22 +1083,22 @@ class mxCellRenderer {
     }
 
     return (
-      check('fontStyle', STYLE_FONTSTYLE, DEFAULT_FONTSTYLE) ||
-      check('family', STYLE_FONTFAMILY, DEFAULT_FONTFAMILY) ||
-      check('size', STYLE_FONTSIZE, DEFAULT_FONTSIZE) ||
-      check('color', STYLE_FONTCOLOR, 'black') ||
-      check('align', STYLE_ALIGN, '') ||
-      check('valign', STYLE_VERTICAL_ALIGN, '') ||
-      check('spacing', STYLE_SPACING, 2) ||
-      check('spacingTop', STYLE_SPACING_TOP, 0) ||
-      check('spacingRight', STYLE_SPACING_RIGHT, 0) ||
-      check('spacingBottom', STYLE_SPACING_BOTTOM, 0) ||
-      check('spacingLeft', STYLE_SPACING_LEFT, 0) ||
-      check('horizontal', STYLE_HORIZONTAL, true) ||
-      check('background', STYLE_LABEL_BACKGROUNDCOLOR, null) ||
-      check('border', STYLE_LABEL_BORDERCOLOR, null) ||
-      check('opacity', STYLE_TEXT_OPACITY, 100) ||
-      check('textDirection', STYLE_TEXT_DIRECTION, DEFAULT_TEXT_DIRECTION)
+      check('fontStyle', 'fontStyle', DEFAULT_FONTSTYLE) ||
+      check('family', 'fontFamily', DEFAULT_FONTFAMILY) ||
+      check('size', 'fontSize', DEFAULT_FONTSIZE) ||
+      check('color', 'fontColor', 'black') ||
+      check('align', 'align', '') ||
+      check('valign', 'verticalAlign', '') ||
+      check('spacing', 'spacing', 2) ||
+      check('spacingTop', 'spacingTop', 0) ||
+      check('spacingRight', 'spacingRight', 0) ||
+      check('spacingBottom', 'spacingBottom', 0) ||
+      check('spacingLeft', 'spacingLeft', 0) ||
+      check('horizontal', 'horizontal', true) ||
+      check('background', 'labelBackgroundColor', null) ||
+      check('border', 'labelBorderColor', null) ||
+      check('opacity', 'textOpacity', 100) ||
+      check('textDirection', 'textDirection', DEFAULT_TEXT_DIRECTION)
     );
   }
 
@@ -1220,12 +1193,12 @@ class mxCellRenderer {
     if (state.shape != null) {
       const hpos = mxUtils.getValue(
         state.style,
-        STYLE_LABEL_POSITION,
+        'labelPosition',
         ALIGN_CENTER
       );
       const vpos = mxUtils.getValue(
         state.style,
-        STYLE_VERTICAL_LABEL_POSITION,
+        'verticalLabelPosition',
         ALIGN_MIDDLE
       );
 
@@ -1235,7 +1208,7 @@ class mxCellRenderer {
     }
 
     // Label width style overrides actual label width
-    const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
+    const lw = mxUtils.getValue(state.style, 'labelWidth', null);
 
     if (lw != null) {
       bounds.width = parseFloat(lw) * scale;
@@ -1267,8 +1240,8 @@ class mxCellRenderer {
 
     if (
       !this.legacySpacing ||
-      (state.style[STYLE_OVERFLOW] !== 'fill' &&
-        state.style[STYLE_OVERFLOW] !== 'width')
+      (state.style.overflow !== 'fill' &&
+        state.style.overflow !== 'width')
     ) {
       const s = state.view.scale;
       // @ts-ignore
@@ -1278,15 +1251,15 @@ class mxCellRenderer {
 
       const hpos = mxUtils.getValue(
         state.style,
-        STYLE_LABEL_POSITION,
+        'labelPosition',
         ALIGN_CENTER
       );
       const vpos = mxUtils.getValue(
         state.style,
-        STYLE_VERTICAL_LABEL_POSITION,
+        'verticalLabelPosition',
         ALIGN_MIDDLE
       );
-      const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
+      const lw = mxUtils.getValue(state.style, 'labelWidth', null);
 
       bounds.width = Math.max(
         0,
@@ -1314,7 +1287,7 @@ class mxCellRenderer {
       theta !== 0 &&
       state != null &&
       // @ts-ignore
-      state.view.graph.model.isVertex(state.cell)
+      state.cell.isVertex()
     ) {
       const cx = state.getCenterX();
       const cy = state.getCenterY();
@@ -1349,7 +1322,7 @@ class mxCellRenderer {
 
     if (state.overlays != null) {
       const rot = mxUtils.mod(
-        mxUtils.getValue(state.style, STYLE_ROTATION, 0),
+        mxUtils.getValue(state.style, 'rotation', 0),
         90
       );
       const rad = mxUtils.toRadians(rot);
@@ -1410,7 +1383,7 @@ class mxCellRenderer {
       const bounds = this.getControlBounds(state, image.width, image.height);
 
       const r = this.legacyControlPosition
-        ? mxUtils.getValue(state.style, STYLE_ROTATION, 0)
+        ? mxUtils.getValue(state.style, 'rotation', 0)
         : // @ts-ignore
           state.shape.getTextRotation();
       const s = state.view.scale;
@@ -1457,7 +1430,7 @@ class mxCellRenderer {
           let rot = state.shape.getShapeRotation();
 
           if (this.legacyControlPosition) {
-            rot = mxUtils.getValue(state.style, STYLE_ROTATION, 0);
+            rot = mxUtils.getValue(state.style, 'rotation', 0);
           } else if (state.shape.isPaintBoundsInverted()) {
             const t = (state.width - state.height) / 2;
             cx += t;
@@ -1655,8 +1628,6 @@ class mxCellRenderer {
     force: boolean = false,
     rendering: boolean = true
   ): boolean {
-    const model = <mxGraphModel>state.view.graph.model;
-
     let shapeChanged = false;
 
     // Forces creation of new shape if shape style has changed
@@ -1664,7 +1635,7 @@ class mxCellRenderer {
       state.shape != null &&
       state.shape.style != null &&
       state.style != null &&
-      state.shape.style[STYLE_SHAPE] !== state.style[STYLE_SHAPE]
+      state.shape.style.shape !== state.style.shape
     ) {
       state.shape.destroy();
       state.shape = null;
diff --git a/packages/core/src/view/graph/mxGraph.ts b/packages/core/src/view/graph/mxGraph.ts
index 8b2872dc5..c8c36f316 100644
--- a/packages/core/src/view/graph/mxGraph.ts
+++ b/packages/core/src/view/graph/mxGraph.ts
@@ -55,62 +55,6 @@ import {
   PAGE_FORMAT_A4_PORTRAIT,
   SHAPE_LABEL,
   SHAPE_SWIMLANE,
-  STYLE_ALIGN,
-  STYLE_ANCHOR_POINT_DIRECTION,
-  STYLE_ASPECT,
-  STYLE_AUTOSIZE,
-  STYLE_BENDABLE,
-  STYLE_CLONEABLE,
-  STYLE_DELETABLE,
-  STYLE_DIRECTION,
-  STYLE_EDITABLE,
-  STYLE_ENTRY_DX,
-  STYLE_ENTRY_DY,
-  STYLE_ENTRY_PERIMETER,
-  STYLE_ENTRY_X,
-  STYLE_ENTRY_Y,
-  STYLE_EXIT_DX,
-  STYLE_EXIT_DY,
-  STYLE_EXIT_PERIMETER,
-  STYLE_EXIT_X,
-  STYLE_EXIT_Y,
-  STYLE_FILLCOLOR,
-  STYLE_FLIPH,
-  STYLE_FLIPV,
-  STYLE_FOLDABLE,
-  STYLE_FONTFAMILY,
-  STYLE_FONTSIZE,
-  STYLE_FONTSTYLE,
-  STYLE_HORIZONTAL,
-  STYLE_IMAGE,
-  STYLE_IMAGE_HEIGHT,
-  STYLE_IMAGE_WIDTH,
-  STYLE_INDICATOR_COLOR,
-  STYLE_INDICATOR_GRADIENTCOLOR,
-  STYLE_INDICATOR_IMAGE,
-  STYLE_INDICATOR_SHAPE,
-  STYLE_MOVABLE,
-  STYLE_NOLABEL,
-  STYLE_ORTHOGONAL,
-  STYLE_OVERFLOW,
-  STYLE_POINTER_EVENTS,
-  STYLE_RESIZABLE,
-  STYLE_RESIZE_HEIGHT,
-  STYLE_RESIZE_WIDTH,
-  STYLE_ROTATABLE,
-  STYLE_ROTATION,
-  STYLE_SHAPE,
-  STYLE_SOURCE_PORT,
-  STYLE_SPACING,
-  STYLE_SPACING_BOTTOM,
-  STYLE_SPACING_LEFT,
-  STYLE_SPACING_RIGHT,
-  STYLE_SPACING_TOP,
-  STYLE_STARTSIZE,
-  STYLE_STROKECOLOR,
-  STYLE_TARGET_PORT,
-  STYLE_VERTICAL_ALIGN,
-  STYLE_WHITE_SPACE,
 } from '../../util/mxConstants';
 import mxMultiplicity from '../connection/mxMultiplicity';
 
@@ -1069,10 +1013,10 @@ class mxGraph extends mxEventSource {
   /**
    * The attribute used to find the color for the indicator if the indicator
    * color is set to 'swimlane'.
-   * @default {@link mxConstants.STYLE_FILLCOLOR}
+   * @default {@link 'fillColor'}
    */
   // swimlaneIndicatorColorAttribute: string;
-  swimlaneIndicatorColorAttribute: string = STYLE_FILLCOLOR;
+  swimlaneIndicatorColorAttribute: string = 'fillColor';
 
   /**
    * Holds the list of image bundles.
@@ -2708,11 +2652,11 @@ class mxGraph extends mxEventSource {
   // postProcessCellStyle(style: StyleMap): StyleMap;
   postProcessCellStyle(style: any): any {
     if (style != null) {
-      const key = style[STYLE_IMAGE];
+      const key = style.image;
       let image = this.getImageFromBundles(key);
 
       if (image != null) {
-        style[STYLE_IMAGE] = image;
+        style.image = image;
       } else {
         image = key;
       }
@@ -2737,7 +2681,7 @@ class mxGraph extends mxEventSource {
           }
         }
 
-        style[STYLE_IMAGE] = image;
+        style.image = image;
       }
     }
     return style;
@@ -2791,7 +2735,7 @@ class mxGraph extends mxEventSource {
    * Toggles the boolean value for the given key in the style of the given cells
    * and returns the new value as 0 or 1. If no cells are specified, then the
    * selection cells are used. For example, this can be used to toggle
-   * {@link mxConstants.STYLE_ROUNDED} or any other style with a boolean value.
+   * {@link 'rounded'} or any other style with a boolean value.
    *
    * Parameter:
    *
@@ -2996,7 +2940,7 @@ class mxGraph extends mxEventSource {
    * transaction is in progress. Returns the edge that was flipped.
    *
    * Here is an example that overrides this implementation to invert the
-   * value of {@link mxConstants.STYLE_ELBOW} without removing any existing styles.
+   * value of {@link 'elbow'} without removing any existing styles.
    *
    * ```javascript
    * graph.flipEdge = function(edge)
@@ -3004,11 +2948,11 @@ class mxGraph extends mxEventSource {
    *   if (edge != null)
    *   {
    *     var style = this.getCurrentCellStyle(edge);
-   *     var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,
+   *     var elbow = mxUtils.getValue(style, 'elbow',
    *         mxConstants.ELBOW_HORIZONTAL);
    *     var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
    *         mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;
-   *     this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);
+   *     this.setCellStyles('elbow', value, [edge]);
    *   }
    * };
    * ```
@@ -4655,7 +4599,7 @@ class mxGraph extends mxEventSource {
           if (tmp != null) {
             bounds = <mxGeometry>tmp;
 
-            const startSize = mxUtils.getValue(style, STYLE_STARTSIZE);
+            const startSize = mxUtils.getValue(style, 'startSize');
 
             if (startSize > 0) {
               bounds.height = Math.max(bounds.height, startSize);
@@ -4675,7 +4619,7 @@ class mxGraph extends mxEventSource {
         geo.alternateBounds.x = geo.x;
         geo.alternateBounds.y = geo.y;
 
-        const alpha = mxUtils.toRadians(style[STYLE_ROTATION] || 0);
+        const alpha = mxUtils.toRadians(style.rotation || 0);
 
         if (alpha !== 0) {
           const dx = geo.alternateBounds.getCenterX() - geo.getCenterX();
@@ -4786,10 +4730,10 @@ class mxGraph extends mxEventSource {
               cellStyle = '';
             }
 
-            if (mxUtils.getValue(style, STYLE_HORIZONTAL, true)) {
+            if (mxUtils.getValue(style, 'horizontal', true)) {
               cellStyle = mxUtils.setStyle(
                 cellStyle,
-                STYLE_STARTSIZE,
+                'startSize',
                 size.height + 8
               );
 
@@ -4801,7 +4745,7 @@ class mxGraph extends mxEventSource {
             } else {
               cellStyle = mxUtils.setStyle(
                 cellStyle,
-                STYLE_STARTSIZE,
+                'startSize',
                 size.width + 8
               );
 
@@ -4815,7 +4759,7 @@ class mxGraph extends mxEventSource {
             this.getModel().setStyle(cell, cellStyle);
           } else {
             const state = this.getView().createState(cell);
-            const align = state.style[STYLE_ALIGN] || ALIGN_CENTER;
+            const align = state.style.align || ALIGN_CENTER;
 
             if (align === ALIGN_RIGHT) {
               geo.x += geo.width - size.width;
@@ -4894,34 +4838,34 @@ class mxGraph extends mxEventSource {
       const { style } = state;
 
       if (!cell.isEdge()) {
-        const fontSize = style[STYLE_FONTSIZE] || DEFAULT_FONTSIZE;
+        const fontSize = style.fontSize || DEFAULT_FONTSIZE;
         let dx = 0;
         let dy = 0;
 
         // Adds dimension of image if shape is a label
-        if (this.getImage(state) != null || style[STYLE_IMAGE] != null) {
-          if (style[STYLE_SHAPE] === SHAPE_LABEL) {
-            if (style[STYLE_VERTICAL_ALIGN] === ALIGN_MIDDLE) {
+        if (this.getImage(state) != null || style.image != null) {
+          if (style.shape === SHAPE_LABEL) {
+            if (style.verticalAlign === ALIGN_MIDDLE) {
               dx +=
-                parseFloat(style[STYLE_IMAGE_WIDTH]) || new mxLabel().imageSize;
+                parseFloat(style.imageWidth) || new mxLabel().imageSize;
             }
 
-            if (style[STYLE_ALIGN] !== ALIGN_CENTER) {
+            if (style.align !== ALIGN_CENTER) {
               dy +=
-                parseFloat(style[STYLE_IMAGE_HEIGHT]) ||
+                parseFloat(style.imageHeight) ||
                 new mxLabel().imageSize;
             }
           }
         }
 
         // Adds spacings
-        dx += 2 * (style[STYLE_SPACING] || 0);
-        dx += style[STYLE_SPACING_LEFT] || 0;
-        dx += style[STYLE_SPACING_RIGHT] || 0;
+        dx += 2 * (style.spacing || 0);
+        dx += style.spacingLeft || 0;
+        dx += style.spacingRight || 0;
 
-        dy += 2 * (style[STYLE_SPACING] || 0);
-        dy += style[STYLE_SPACING_TOP] || 0;
-        dy += style[STYLE_SPACING_BOTTOM] || 0;
+        dy += 2 * (style.spacing || 0);
+        dy += style.spacingTop || 0;
+        dy += style.spacingBottom || 0;
 
         // Add spacing for collapse/expand icon
         // LATER: Check alignment and use constants
@@ -4945,14 +4889,14 @@ class mxGraph extends mxEventSource {
           const size = mxUtils.getSizeForString(
             value,
             fontSize,
-            style[STYLE_FONTFAMILY],
+            style.fontFamily,
             textWidth,
-            style[STYLE_FONTSTYLE]
+            style.fontStyle
           );
           let width = size.width + dx;
           let height = size.height + dy;
 
-          if (!mxUtils.getValue(style, STYLE_HORIZONTAL, true)) {
+          if (!mxUtils.getValue(style, 'horizontal', true)) {
             const tmp = height;
             height = width;
             width = tmp;
@@ -5237,17 +5181,17 @@ class mxGraph extends mxEventSource {
       const w = geo.width;
       const h = geo.height;
 
-      geo.scale(dx, dy, style[STYLE_ASPECT] === 'fixed');
+      geo.scale(dx, dy, style.aspect === 'fixed');
 
-      if (style[STYLE_RESIZE_WIDTH] == '1') {
+      if (style.resizeWidth == '1') {
         geo.width = w * dx;
-      } else if (style[STYLE_RESIZE_WIDTH] == '0') {
+      } else if (style.resizeWidth == '0') {
         geo.width = w;
       }
 
-      if (style[STYLE_RESIZE_HEIGHT] == '1') {
+      if (style.resizeHeight == '1') {
         geo.height = h * dy;
-      } else if (style[STYLE_RESIZE_HEIGHT] == '0') {
+      } else if (style.resizeHeight == '0') {
         geo.height = h;
       }
 
@@ -5576,7 +5520,7 @@ class mxGraph extends mxEventSource {
 
         if (parent.isVertex()) {
           const style = this.getCurrentCellStyle(parent);
-          angle = mxUtils.getValue(style, STYLE_ROTATION, 0);
+          angle = mxUtils.getValue(style, 'rotation', 0);
         }
 
         if (angle !== 0) {
@@ -5628,11 +5572,11 @@ class mxGraph extends mxEventSource {
             const style = this.getCurrentCellStyle(parent);
             const dir = mxUtils.getValue(
               style,
-              STYLE_DIRECTION,
+              'direction',
               DIRECTION_EAST
             );
-            const flipH = mxUtils.getValue(style, STYLE_FLIPH, 0) == 1;
-            const flipV = mxUtils.getValue(style, STYLE_FLIPV, 0) == 1;
+            const flipH = mxUtils.getValue(style, 'flipH', 0) == 1;
+            const flipV = mxUtils.getValue(style, 'flipV', 0) == 1;
 
             if (dir === DIRECTION_SOUTH || dir === DIRECTION_NORTH) {
               const tmp = size.width;
@@ -5886,7 +5830,7 @@ class mxGraph extends mxEventSource {
       const bounds = <mxRectangle>(
         this.getView().getPerimeterBounds(terminalState)
       );
-      const direction = terminalState.style[STYLE_DIRECTION];
+      const direction = terminalState.style.direction;
 
       if (direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH) {
         bounds.x += bounds.width / 2 - bounds.height / 2;
@@ -5913,8 +5857,8 @@ class mxGraph extends mxEventSource {
 
       // LATER: Add flipping support for image shapes
       if ((<mxCell>terminalState.cell).isVertex()) {
-        let flipH = terminalState.style[STYLE_FLIPH];
-        let flipV = terminalState.style[STYLE_FLIPV];
+        let flipH = terminalState.style.flipH;
+        let flipV = terminalState.style.flipV;
 
         // Legacy support for stencilFlipH/V
         if (
@@ -6004,11 +5948,11 @@ class mxGraph extends mxEventSource {
   ): mxConnectionConstraint {
     let point = null;
     // @ts-ignore
-    const x = <string>edge.style[source ? STYLE_EXIT_X : STYLE_ENTRY_X];
+    const x = <string>edge.style[source ? 'exitX' : 'entryX'];
 
     if (x != null) {
       // @ts-ignore
-      const y = <string>edge.style[source ? STYLE_EXIT_Y : STYLE_ENTRY_Y];
+      const y = <string>edge.style[source ? 'exitY' : 'entryY'];
 
       if (y != null) {
         point = new mxPoint(parseFloat(x), parseFloat(y));
@@ -6022,18 +5966,18 @@ class mxGraph extends mxEventSource {
     if (point != null) {
       perimeter = mxUtils.getValue(
         edge.style,
-        source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
+        source ? 'exitPerimeter' : 'entryPerimeter',
         true
       );
 
       // Add entry/exit offset
       // @ts-ignore
       dx = parseFloat(
-        <string>edge.style[source ? STYLE_EXIT_DX : STYLE_ENTRY_DX]
+        <string>edge.style[source ? 'exitDx' : 'entryDx']
       );
       // @ts-ignore
       dy = parseFloat(
-        <string>edge.style[source ? STYLE_EXIT_DY : STYLE_ENTRY_DY]
+        <string>edge.style[source ? 'exitDy' : 'entryDy']
       );
 
       dx = Number.isFinite(dx) ? dx : 0;
@@ -6066,41 +6010,41 @@ class mxGraph extends mxEventSource {
 
       try {
         if (constraint == null || constraint.point == null) {
-          this.setCellStyles(source ? STYLE_EXIT_X : STYLE_ENTRY_X, null, [
+          this.setCellStyles(source ? 'exitX' : 'entryX', null, [
             edge,
           ]);
-          this.setCellStyles(source ? STYLE_EXIT_Y : STYLE_ENTRY_Y, null, [
+          this.setCellStyles(source ? 'exitY' : 'entryY', null, [
             edge,
           ]);
-          this.setCellStyles(source ? STYLE_EXIT_DX : STYLE_ENTRY_DX, null, [
+          this.setCellStyles(source ? 'exitDx' : 'entryDx', null, [
             edge,
           ]);
-          this.setCellStyles(source ? STYLE_EXIT_DY : STYLE_ENTRY_DY, null, [
+          this.setCellStyles(source ? 'exitDy' : 'entryDy', null, [
             edge,
           ]);
           this.setCellStyles(
-            source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
+            source ? 'exitPerimeter' : 'entryPerimeter',
             null,
             [edge]
           );
         } else if (constraint.point != null) {
           this.setCellStyles(
-            source ? STYLE_EXIT_X : STYLE_ENTRY_X,
+            source ? 'exitX' : 'entryX',
             constraint.point.x,
             [edge]
           );
           this.setCellStyles(
-            source ? STYLE_EXIT_Y : STYLE_ENTRY_Y,
+            source ? 'exitY' : 'entryY',
             constraint.point.y,
             [edge]
           );
           this.setCellStyles(
-            source ? STYLE_EXIT_DX : STYLE_ENTRY_DX,
+            source ? 'exitDx' : 'entryDx',
             constraint.dx,
             [edge]
           );
           this.setCellStyles(
-            source ? STYLE_EXIT_DY : STYLE_ENTRY_DY,
+            source ? 'exitDy' : 'entryDy',
             constraint.dy,
             [edge]
           );
@@ -6108,13 +6052,13 @@ class mxGraph extends mxEventSource {
           // Only writes 0 since 1 is default
           if (!constraint.perimeter) {
             this.setCellStyles(
-              source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
+              source ? 'exitPerimeter' : 'entryPerimeter',
               '0',
               [edge]
             );
           } else {
             this.setCellStyles(
-              source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
+              source ? 'exitPerimeter' : 'entryPerimeter',
               null,
               [edge]
             );
@@ -6145,13 +6089,13 @@ class mxGraph extends mxEventSource {
     if (vertex != null && constraint.point != null) {
       const bounds = <mxRectangle>this.getView().getPerimeterBounds(vertex);
       const cx = new mxPoint(bounds.getCenterX(), bounds.getCenterY());
-      const direction = vertex.style[STYLE_DIRECTION];
+      const direction = vertex.style.direction;
       let r1 = 0;
 
       // Bounds need to be rotated by 90 degrees for further computation
       if (
         direction != null &&
-        mxUtils.getValue(vertex.style, STYLE_ANCHOR_POINT_DIRECTION, 1) == 1
+        mxUtils.getValue(vertex.style, 'anchorPointDirection', 1) == 1
       ) {
         if (direction === DIRECTION_NORTH) {
           r1 += 270;
@@ -6178,7 +6122,7 @@ class mxGraph extends mxEventSource {
       );
 
       // Rotation for direction before projection on perimeter
-      let r2 = vertex.style[STYLE_ROTATION] || 0;
+      let r2 = vertex.style.rotation || 0;
 
       if (constraint.perimeter) {
         if (r1 !== 0) {
@@ -6202,8 +6146,8 @@ class mxGraph extends mxEventSource {
         r2 += r1;
 
         if ((<mxCell>vertex.cell).isVertex()) {
-          let flipH = vertex.style[STYLE_FLIPH] == 1;
-          let flipV = vertex.style[STYLE_FLIPV] == 1;
+          let flipH = vertex.style.flipH == 1;
+          let flipV = vertex.style.flipV == 1;
 
           // Legacy support for stencilFlipH/V
           if (vertex.shape != null && vertex.shape.stencil != null) {
@@ -6323,7 +6267,7 @@ class mxGraph extends mxEventSource {
           }
 
           // Sets or resets all previous information for connecting to a child port
-          const key = source ? STYLE_SOURCE_PORT : STYLE_TARGET_PORT;
+          const key = source ? 'sourcePort' : 'targetPort';
           this.setCellStyles(key, id, [edge]);
         }
 
@@ -6814,7 +6758,7 @@ class mxGraph extends mxEventSource {
               const style = this.getCurrentCellStyle(cell);
 
               if (bbox != null) {
-                const angle = mxUtils.getValue(style, STYLE_ROTATION, 0);
+                const angle = mxUtils.getValue(style, 'rotation', 0);
 
                 if (angle !== 0) {
                   bbox = mxUtils.getBoundingBox(bbox, angle);
@@ -7517,7 +7461,14 @@ class mxGraph extends mxEventSource {
    */
   // isOrthogonal(edge: mxCellState): boolean;
   isOrthogonal(edge: mxCellState): boolean {
-    const orthogonal = edge.style[STYLE_ORTHOGONAL];
+    /*
+    'orthogonal' defines if the connection points on either end of the edge should
+    be computed so that the edge is vertical or horizontal if possible
+    and if the point is not at a fixed location. Default is false.
+    This also returns true if the edgeStyle of the edge is an elbow or
+    entity.
+     */
+    const orthogonal = edge.style.orthogonal;
 
     if (orthogonal != null) {
       return orthogonal;
@@ -8028,7 +7979,7 @@ class mxGraph extends mxEventSource {
     if (this.labelsVisible && cell != null) {
       const style = this.getCurrentCellStyle(cell);
 
-      if (!mxUtils.getValue(style, STYLE_NOLABEL, false)) {
+      if (!mxUtils.getValue(style, 'noLabel', false)) {
         result = this.convertValueToString(cell);
       }
     }
@@ -8067,7 +8018,7 @@ class mxGraph extends mxEventSource {
    *
    * Returns true if no white-space CSS style directive should be used for
    * displaying the given cells label. This implementation returns true if
-   * {@link mxConstants.STYLE_WHITE_SPACE} in the style of the given cell is 'wrap'.
+   * {@link 'whiteSpace'} in the style of the given cell is 'wrap'.
    *
    * This is used as a workaround for IE ignoring the white-space directive
    * of child elements if the directive appears in a parent element. It
@@ -8105,20 +8056,20 @@ class mxGraph extends mxEventSource {
    */
   // isWrapping(cell: mxCell): boolean;
   isWrapping(cell: mxCell): boolean {
-    return this.getCurrentCellStyle(cell)[STYLE_WHITE_SPACE] === 'wrap';
+    return this.getCurrentCellStyle(cell).whiteSpace === 'wrap';
   }
 
   /**
    * Returns true if the overflow portion of labels should be hidden. If this
    * returns true then vertex labels will be clipped to the size of the vertices.
-   * This implementation returns true if {@link STYLE_OVERFLOW} in the
+   * This implementation returns true if `overflow` in the
    * style of the given cell is 'hidden'.
    *
    * @param state {@link mxCell} whose label should be clipped.
    */
   // isLabelClipped(cell: mxCell): boolean;
   isLabelClipped(cell: mxCell): boolean {
-    return this.getCurrentCellStyle(cell)[STYLE_OVERFLOW] === 'hidden';
+    return this.getCurrentCellStyle(cell).overflow === 'hidden';
   }
 
   /**
@@ -8270,10 +8221,10 @@ class mxGraph extends mxEventSource {
     const result = new mxRectangle();
     const style = this.getCurrentCellStyle(swimlane, ignoreState);
     const size = parseInt(
-      mxUtils.getValue(style, STYLE_STARTSIZE, DEFAULT_STARTSIZE)
+      mxUtils.getValue(style, 'startSize', DEFAULT_STARTSIZE)
     );
 
-    if (mxUtils.getValue(style, STYLE_HORIZONTAL, true)) {
+    if (mxUtils.getValue(style, 'horizontal', true)) {
       result.height = size;
     } else {
       result.width = size;
@@ -8286,10 +8237,10 @@ class mxGraph extends mxEventSource {
    */
   // getSwimlaneDirection(style: string): string;
   getSwimlaneDirection(style: any): string {
-    const dir = mxUtils.getValue(style, STYLE_DIRECTION, DIRECTION_EAST);
-    const flipH = mxUtils.getValue(style, STYLE_FLIPH, 0) == 1;
-    const flipV = mxUtils.getValue(style, STYLE_FLIPV, 0) == 1;
-    const h = mxUtils.getValue(style, STYLE_HORIZONTAL, true);
+    const dir = mxUtils.getValue(style, 'direction', DIRECTION_EAST);
+    const flipH = mxUtils.getValue(style, 'flipH', 0) == 1;
+    const flipV = mxUtils.getValue(style, 'flipV', 0) == 1;
+    const h = mxUtils.getValue(style, 'horizontal', true);
     let n = h ? 0 : 3;
 
     if (dir === DIRECTION_NORTH) {
@@ -8334,7 +8285,7 @@ class mxGraph extends mxEventSource {
     if (this.isSwimlane(swimlane, ignoreState)) {
       const style = this.getCurrentCellStyle(swimlane, ignoreState);
       const size = parseInt(
-        mxUtils.getValue(style, STYLE_STARTSIZE, DEFAULT_STARTSIZE)
+        mxUtils.getValue(style, 'startSize', DEFAULT_STARTSIZE)
       );
       const dir = this.getSwimlaneDirection(style);
 
@@ -8353,7 +8304,7 @@ class mxGraph extends mxEventSource {
 
   /**
    * Returns the image URL for the given cell state. This implementation
-   * returns the value stored under {@link mxConstants.STYLE_IMAGE} in the cell
+   * returns the value stored under {@link 'image'} in the cell
    * style.
    *
    * @param state {@link mxCellState} whose image URL should be returned.
@@ -8361,7 +8312,7 @@ class mxGraph extends mxEventSource {
   // getImage(state: mxCellState): string;
   getImage(state: mxCellState): mxImage | null {
     return state != null && state.style != null
-      ? state.style[STYLE_IMAGE]
+      ? state.style.image
       : null;
   }
 
@@ -8374,8 +8325,8 @@ class mxGraph extends mxEventSource {
   isTransparentState(state: mxCellState): boolean {
     let result = false;
     if (state != null) {
-      const stroke = mxUtils.getValue(state.style, STYLE_STROKECOLOR, NONE);
-      const fill = mxUtils.getValue(state.style, STYLE_FILLCOLOR, NONE);
+      const stroke = mxUtils.getValue(state.style, 'strokeColor', NONE);
+      const fill = mxUtils.getValue(state.style, 'fillColor', NONE);
       result = stroke === NONE && fill === NONE && this.getImage(state) == null;
     }
     return result;
@@ -8384,7 +8335,7 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the vertical alignment for the given cell state. This
    * implementation returns the value stored under
-   * {@link mxConstants.STYLE_VERTICAL_ALIGN} in the cell style.
+   * {@link mxConstants.'verticalAlign'} in the cell style.
    *
    * @param state {@link mxCellState} whose vertical alignment should be
    * returned.
@@ -8392,7 +8343,7 @@ class mxGraph extends mxEventSource {
   // getVerticalAlign(state: mxCellState): string;
   getVerticalAlign(state: mxCellState): string | null {
     return state != null && state.style != null
-      ? state.style[STYLE_VERTICAL_ALIGN] || ALIGN_MIDDLE
+      ? state.style.verticalAlign || ALIGN_MIDDLE
       : null;
   }
 
@@ -8407,7 +8358,7 @@ class mxGraph extends mxEventSource {
   // getIndicatorColor(state: mxCellState): string;
   getIndicatorColor(state: mxCellState): string | null {
     return state != null && state.style != null
-      ? state.style[STYLE_INDICATOR_COLOR]
+      ? state.style.indicatorColor
       : null;
   }
 
@@ -8422,7 +8373,7 @@ class mxGraph extends mxEventSource {
   // getIndicatorGradientColor(state: mxCellState): string;
   getIndicatorGradientColor(state: mxCellState): string | null {
     return state != null && state.style != null
-      ? state.style[STYLE_INDICATOR_GRADIENTCOLOR]
+      ? state.style.gradientColor
       : null;
   }
 
@@ -8436,7 +8387,7 @@ class mxGraph extends mxEventSource {
   // getIndicatorShape(state: mxCellState): any;
   getIndicatorShape(state: mxCellState): string | null {
     return state != null && state.style != null
-      ? state.style[STYLE_INDICATOR_SHAPE]
+      ? state.style.indicatorShape
       : null;
   }
 
@@ -8450,7 +8401,7 @@ class mxGraph extends mxEventSource {
   // getIndicatorImage(state: mxCellState): any;
   getIndicatorImage(state: mxCellState): mxImage | null {
     return state != null && state.style != null
-      ? state.style[STYLE_INDICATOR_IMAGE]
+      ? state.style.indicatorImage
       : null;
   }
 
@@ -8488,7 +8439,7 @@ class mxGraph extends mxEventSource {
       !cell.isEdge()
     ) {
       return (
-        this.getCurrentCellStyle(cell, ignoreState)[STYLE_SHAPE] ===
+        this.getCurrentCellStyle(cell, ignoreState).shape ===
         SHAPE_SWIMLANE
       );
     }
@@ -8646,7 +8597,7 @@ class mxGraph extends mxEventSource {
   // isCellCloneable(cell: mxCell): boolean;
   isCellCloneable(cell: mxCell): boolean {
     const style = this.getCurrentCellStyle(cell);
-    return this.isCellsCloneable() && style[STYLE_CLONEABLE] !== 0;
+    return this.isCellsCloneable() && style.cloneable !== 0;
   }
 
   /**
@@ -8769,14 +8720,14 @@ class mxGraph extends mxEventSource {
   /**
    * Returns true if the given cell is moveable. This returns
    * {@link cellsDeletable} for all given cells if a cells style does not specify
-   * {@link mxConstants.STYLE_DELETABLE} to be 0.
+   * {@link 'deletable'} to be 0.
    *
    * @param cell {@link mxCell} whose deletable state should be returned.
    */
   // isCellDeletable(cell: mxCell): boolean;
   isCellDeletable(cell: mxCell): boolean {
     const style = this.getCurrentCellStyle(cell);
-    return this.isCellsDeletable() && style[STYLE_DELETABLE] !== 0;
+    return this.isCellsDeletable() && style.deletable !== 0;
   }
 
   /**
@@ -8815,14 +8766,14 @@ class mxGraph extends mxEventSource {
 
   /**
    * Returns true if the given cell is rotatable. This returns true for the given
-   * cell if its style does not specify {@link mxConstants.STYLE_ROTATABLE} to be 0.
+   * cell if its style does not specify {@link 'rotatable'} to be 0.
    *
    * @param cell {@link mxCell} whose rotatable state should be returned.
    */
   // isCellRotatable(cell: mxCell): boolean;
   isCellRotatable(cell: mxCell): boolean {
     const style = this.getCurrentCellStyle(cell);
-    return style[STYLE_ROTATABLE] !== 0;
+    return style.rotatable !== 0;
   }
 
   /**
@@ -8838,7 +8789,7 @@ class mxGraph extends mxEventSource {
   /**
    * Returns true if the given cell is moveable. This returns {@link cellsMovable}
    * for all given cells if {@link isCellLocked} does not return true for the given
-   * cell and its style does not specify {@link mxConstants.STYLE_MOVABLE} to be 0.
+   * cell and its style does not specify {@link 'movable'} to be 0.
    *
    * @param cell {@link mxCell} whose movable state should be returned.
    */
@@ -8849,7 +8800,7 @@ class mxGraph extends mxEventSource {
     return (
       this.isCellsMovable() &&
       !this.isCellLocked(cell) &&
-      style[STYLE_MOVABLE] !== 0
+      style.movable !== 0
     );
   }
 
@@ -9170,7 +9121,7 @@ class mxGraph extends mxEventSource {
    * Returns true if the given cell is resizable. This returns
    * {@link cellsResizable} for all given cells if {@link isCellLocked} does not return
    * true for the given cell and its style does not specify
-   * {@link mxConstants.STYLE_RESIZABLE} to be 0.
+   * {@link 'resizable'} to be 0.
    *
    * @param cell {@link mxCell} whose resizable state should be returned.
    */
@@ -9181,7 +9132,7 @@ class mxGraph extends mxEventSource {
     const r =
       this.isCellsResizable() &&
       !this.isCellLocked(cell) &&
-      mxUtils.getValue(style, STYLE_RESIZABLE, '1') != '0';
+      mxUtils.getValue(style, 'resizeable', '1') != '0';
     // alert(r);
     return r;
   }
@@ -9235,7 +9186,7 @@ class mxGraph extends mxEventSource {
     return (
       this.isCellsBendable() &&
       !this.isCellLocked(cell) &&
-      style[STYLE_BENDABLE] !== 0
+      style.bendable !== 0
     );
   }
 
@@ -9262,7 +9213,7 @@ class mxGraph extends mxEventSource {
   /**
    * Returns true if the given cell is editable. This returns {@link cellsEditable} for
    * all given cells if {@link isCellLocked} does not return true for the given cell
-   * and its style does not specify {@link mxConstants.STYLE_EDITABLE} to be 0.
+   * and its style does not specify {@link 'editable'} to be 0.
    *
    * @param cell {@link mxCell} whose editable state should be returned.
    */
@@ -9273,7 +9224,7 @@ class mxGraph extends mxEventSource {
     return (
       this.isCellsEditable() &&
       !this.isCellLocked(cell) &&
-      style[STYLE_EDITABLE] != 0
+      style.editable != 0
     );
   }
 
@@ -9436,7 +9387,7 @@ class mxGraph extends mxEventSource {
    * Returns true if the size of the given cell should automatically be
    * updated after a change of the label. This implementation returns
    * {@link autoSizeCells} or checks if the cell style does specify
-   * {@link mxConstants.STYLE_AUTOSIZE} to be 1.
+   * {@link 'autoSize'} to be 1.
    *
    * @param cell {@link mxCell} that should be resized.
    */
@@ -9444,7 +9395,7 @@ class mxGraph extends mxEventSource {
   isAutoSizeCell(cell: mxCell) {
     const style = this.getCurrentCellStyle(cell);
 
-    return this.isAutoSizeCells() || style[STYLE_AUTOSIZE] == 1;
+    return this.isAutoSizeCells() || style.autosize == 1;
   }
 
   /**
@@ -9669,7 +9620,7 @@ class mxGraph extends mxEventSource {
   // isCellFoldable(cell: mxCell, collapse: boolean): boolean;
   isCellFoldable(cell: mxCell, collapse: boolean = false): boolean {
     const style = this.getCurrentCellStyle(cell);
-    return cell.getChildCount() > 0 && style[STYLE_FOLDABLE] != 0;
+    return cell.getChildCount() > 0 && style.foldable != 0;
   }
 
   /**
@@ -9987,7 +9938,7 @@ class mxGraph extends mxEventSource {
         }
       } else {
         const alpha = mxUtils.toRadians(
-          mxUtils.getValue(state.style, STYLE_ROTATION) || 0
+          mxUtils.getValue(state.style, 'rotation') || 0
         );
 
         if (alpha != 0) {
@@ -10408,7 +10359,7 @@ class mxGraph extends mxEventSource {
             cell.isVisible() &&
             (ignoreFn == null || !ignoreFn(state))
           ) {
-            const deg = mxUtils.getValue(state.style, STYLE_ROTATION) || 0;
+            const deg = mxUtils.getValue(state.style, 'rotation') || 0;
 
             let box: mxCellState | mxRectangle = state; // TODO: CHECK ME!!!! ==========================================================
             if (deg != 0) {
@@ -11140,7 +11091,7 @@ class mxGraph extends mxEventSource {
             return (
               state.shape == null ||
               state.shape.paintBackground !== this.paintBackground ||
-              mxUtils.getValue(state.style, STYLE_POINTER_EVENTS, '1') == '1' ||
+              mxUtils.getValue(state.style, 'pointerEvents', '1') == '1' ||
               (state.shape.fill != null && state.shape.fill !== NONE)
             );
           })
diff --git a/packages/core/src/view/graph/mxGraphView.ts b/packages/core/src/view/graph/mxGraphView.ts
index 6b4aee5cd..24b370bb8 100644
--- a/packages/core/src/view/graph/mxGraphView.ts
+++ b/packages/core/src/view/graph/mxGraphView.ts
@@ -18,25 +18,6 @@ import {
   ALIGN_MIDDLE,
   ALIGN_RIGHT,
   ALIGN_TOP,
-  STYLE_ALIGN,
-  STYLE_EDGE,
-  STYLE_FLIPH,
-  STYLE_FLIPV,
-  STYLE_LABEL_POSITION,
-  STYLE_LABEL_WIDTH,
-  STYLE_LOOP,
-  STYLE_NOEDGESTYLE,
-  STYLE_ORTHOGONAL_LOOP,
-  STYLE_PERIMETER,
-  STYLE_PERIMETER_SPACING,
-  STYLE_ROTATION,
-  STYLE_ROUTING_CENTER_X,
-  STYLE_ROUTING_CENTER_Y,
-  STYLE_SOURCE_PERIMETER_SPACING,
-  STYLE_SOURCE_PORT,
-  STYLE_TARGET_PERIMETER_SPACING,
-  STYLE_TARGET_PORT,
-  STYLE_VERTICAL_LABEL_POSITION,
 } from '../../util/mxConstants';
 import mxClient from '../../mxClient';
 import mxEvent from '../../util/event/mxEvent';
@@ -1081,7 +1062,7 @@ class mxGraphView extends mxEventSource {
     const pState = this.getState(state.cell.getParent());
 
     if (geo.relative && pState != null && !pState.cell.isEdge()) {
-      const alpha = mxUtils.toRadians(pState.style[STYLE_ROTATION] || '0');
+      const alpha = mxUtils.toRadians(pState.style.rotation || '0');
       if (alpha !== 0) {
         const cos = Math.cos(alpha);
         const sin = Math.sin(alpha);
@@ -1146,10 +1127,10 @@ class mxGraphView extends mxEventSource {
    */
   // updateVertexLabelOffset(state: mxCellState): void;
   updateVertexLabelOffset(state: mxCellState) {
-    const h = mxUtils.getValue(state.style, STYLE_LABEL_POSITION, ALIGN_CENTER);
+    const h = mxUtils.getValue(state.style, 'labelPosition', ALIGN_CENTER);
 
     if (h === ALIGN_LEFT) {
-      let lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
+      let lw = mxUtils.getValue(state.style, 'labelWidth', null);
 
       if (lw != null) {
         lw *= this.scale;
@@ -1163,11 +1144,11 @@ class mxGraphView extends mxEventSource {
       // @ts-ignore
       state.absoluteOffset.x += state.width;
     } else if (h === ALIGN_CENTER) {
-      const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
+      const lw = mxUtils.getValue(state.style, 'labelWidth', null);
 
       if (lw != null) {
         // Aligns text block with given width inside the vertex width
-        const align = mxUtils.getValue(state.style, STYLE_ALIGN, ALIGN_CENTER);
+        const align = mxUtils.getValue(state.style, 'align', ALIGN_CENTER);
         let dx = 0;
 
         if (align === ALIGN_CENTER) {
@@ -1185,7 +1166,7 @@ class mxGraphView extends mxEventSource {
 
     const v = mxUtils.getValue(
       state.style,
-      STYLE_VERTICAL_LABEL_POSITION,
+      'verticalLabelPosition',
       ALIGN_MIDDLE
     );
 
@@ -1481,7 +1462,7 @@ class mxGraphView extends mxEventSource {
 
     if (
       (points == null || points.length < 2) &&
-      (!mxUtils.getValue(edge.style, STYLE_ORTHOGONAL_LOOP, false) ||
+      (!mxUtils.getValue(edge.style, 'orthogonalLoop', false) ||
         ((sc == null || sc.point == null) && (tc == null || tc.point == null)))
     ) {
       return source != null && source === target;
@@ -1502,11 +1483,11 @@ class mxGraphView extends mxEventSource {
     let edgeStyle: any = this.isLoopStyleEnabled(edge, points, source, target)
       ? mxUtils.getValue(
           edge.style,
-          STYLE_LOOP,
+          'loop',
           (<mxGraph>this.graph).defaultLoopStyle
         )
-      : !mxUtils.getValue(edge.style, STYLE_NOEDGESTYLE, false)
-      ? edge.style[STYLE_EDGE]
+      : !mxUtils.getValue(edge.style, 'noEdgeStyle', false)
+      ? edge.style.edge
       : null;
 
     // Converts string values to objects
@@ -1593,7 +1574,7 @@ class mxGraphView extends mxEventSource {
     let next = this.getNextPoint(edge, end, source);
 
     const orth = (<mxGraph>this.graph).isOrthogonal(edge);
-    const alpha = mxUtils.toRadians(Number(start.style[STYLE_ROTATION] || '0'));
+    const alpha = mxUtils.toRadians(Number(start.style.rotation || '0'));
     const center = new mxPoint(start.getCenterX(), start.getCenterY());
 
     if (alpha !== 0) {
@@ -1602,10 +1583,10 @@ class mxGraphView extends mxEventSource {
       next = mxUtils.getRotatedPoint(next, cos, sin, center);
     }
 
-    let border = parseFloat(edge.style[STYLE_PERIMETER_SPACING] || 0);
+    let border = parseFloat(edge.style.perimeterSpacing || 0);
     border += parseFloat(
       edge.style[
-        source ? STYLE_SOURCE_PERIMETER_SPACING : STYLE_TARGET_PERIMETER_SPACING
+        source ? 'sourcePerimeterSpacing' : 'targetPerimeterSpacing'
       ] || 0
     );
     let pt = this.getPerimeterPoint(
@@ -1638,7 +1619,7 @@ class mxGraphView extends mxEventSource {
     terminal: mxCellState,
     source: boolean = false
   ): mxCellState | null {
-    const key = source ? STYLE_SOURCE_PORT : STYLE_TARGET_PORT;
+    const key = source ? 'sourcePort' : 'targetPort';
     const id = mxUtils.getValue(state.style, key);
 
     if (id != null) {
@@ -1688,8 +1669,8 @@ class mxGraphView extends mxEventSource {
           let flipV = false;
 
           if (terminal.cell.isVertex()) {
-            flipH = mxUtils.getValue(terminal.style, STYLE_FLIPH, 0) == 1;
-            flipV = mxUtils.getValue(terminal.style, STYLE_FLIPV, 0) == 1;
+            flipH = mxUtils.getValue(terminal.style, 'flipH', 0) == 1;
+            flipV = mxUtils.getValue(terminal.style, 'flipV', 0) == 1;
 
             // Legacy support for stencilFlipH/V
             if (terminal.shape != null && terminal.shape.stencil != null) {
@@ -1738,7 +1719,7 @@ class mxGraphView extends mxEventSource {
   getRoutingCenterX(state: mxCellState) {
     const f =
       state.style != null
-        ? parseFloat(state.style[STYLE_ROUTING_CENTER_X]) || 0
+        ? parseFloat(state.style.routingCenterX) || 0
         : 0;
     return state.getCenterX() + f * state.width;
   }
@@ -1750,7 +1731,7 @@ class mxGraphView extends mxEventSource {
   getRoutingCenterY(state: mxCellState) {
     const f =
       state.style != null
-        ? parseFloat(state.style[STYLE_ROUTING_CENTER_Y]) || 0
+        ? parseFloat(state.style.routingCenterY) || 0
         : 0;
     return state.getCenterY() + f * state.height;
   }
@@ -1801,7 +1782,7 @@ class mxGraphView extends mxEventSource {
     border: number = 0
   ): mxRectangle | null {
     if (terminal != null) {
-      border += parseFloat(terminal.style[STYLE_PERIMETER_SPACING] || 0);
+      border += parseFloat(terminal.style.perimeterSpacing || 0);
     }
     return (<mxCellState>terminal).getPerimeterBounds(border * this.scale);
   }
@@ -1811,7 +1792,7 @@ class mxGraphView extends mxEventSource {
    */
   // getPerimeterFunction(state: mxCellState): any;
   getPerimeterFunction(state: mxCellState): Function | null {
-    let perimeter = state.style[STYLE_PERIMETER];
+    let perimeter = state.style.perimeter;
 
     // Converts string values to objects
     if (typeof perimeter === 'string') {
diff --git a/packages/core/src/view/graph/mxSwimlaneManager.ts b/packages/core/src/view/graph/mxSwimlaneManager.ts
index 3e8f96e9e..e2bde2b07 100644
--- a/packages/core/src/view/graph/mxSwimlaneManager.ts
+++ b/packages/core/src/view/graph/mxSwimlaneManager.ts
@@ -8,7 +8,6 @@
 import mxEventSource from '../../util/event/mxEventSource';
 import mxUtils from '../../util/mxUtils';
 import mxEvent from '../../util/event/mxEvent';
-import { STYLE_HORIZONTAL } from '../../util/mxConstants';
 import mxRectangle from '../../util/datatypes/mxRectangle';
 import mxGraph from './mxGraph';
 import mxEventObject from '../../util/event/mxEventObject';
@@ -209,7 +208,7 @@ class mxSwimlaneManager extends mxEventSource {
   isCellHorizontal(cell: mxCell): boolean {
     if ((<mxGraph>this.graph).isSwimlane(cell)) {
       const style = (<mxGraph>this.graph).getCellStyle(cell);
-      return mxUtils.getValue(style, STYLE_HORIZONTAL, 1) == 1;
+      return mxUtils.getValue(style, 'horizontal', 1) == 1;
     }
     return !this.isHorizontal();
   }
diff --git a/packages/core/typed_mxgraph_defs.json b/packages/core/typed_mxgraph_defs.json
index cd4b0453c..2c17f0a3f 100644
--- a/packages/core/typed_mxgraph_defs.json
+++ b/packages/core/typed_mxgraph_defs.json
@@ -853,9 +853,9 @@
       " *",
       " * ```javascript",
       " * var vertexStyle = stylesheet.getDefaultVertexStyle();",
-      " * vertexStyle[mxConstants.STYLE_ROUNDED] = true;",
+      " * vertexStyle.rounded = true;",
       " * var edgeStyle = stylesheet.getDefaultEdgeStyle();",
-      " * edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;",
+      " * edgeStyle.edge = mxEdgeStyle.EntityRelation;",
       " * ```",
       " *",
       " * Modifies the built-in default styles.",
@@ -960,9 +960,9 @@
           " *",
           " * ```javascript",
           " * var style = new Object();",
-          " * style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;",
-          " * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;",
-          " * style[mxConstants.STYLE_ROUNDED] = true;",
+          " * style.shape = mxConstants.SHAPE_RECTANGLE;",
+          " * style.perimiter = mxPerimeter.RectanglePerimeter;",
+          " * style.rounded = true;",
           " * graph.getStylesheet().putCellStyle('rounded', style);",
           " * ```",
           " *",
@@ -4629,7 +4629,7 @@
           "/**",
           " * The attribute used to find the color for the indicator if the indicator",
           " * color is set to 'swimlane'.",
-          " * @default {@link mxConstants.STYLE_FILLCOLOR}",
+          " * @default {@link 'fillColor'}",
           " */"
         ]
       ],
@@ -5460,7 +5460,7 @@
           " * Toggles the boolean value for the given key in the style of the given cells",
           " * and returns the new value as 0 or 1. If no cells are specified, then the",
           " * selection cells are used. For example, this can be used to toggle",
-          " * {@link mxConstants.STYLE_ROUNDED} or any other style with a boolean value.",
+          " * {@link 'rounded'} or any other style with a boolean value.",
           " *",
           " * Parameter:",
           " *",
@@ -5541,7 +5541,7 @@
           " * transaction is in progress. Returns the edge that was flipped.",
           " *",
           " * Here is an example that overrides this implementation to invert the",
-          " * value of {@link mxConstants.STYLE_ELBOW} without removing any existing styles.",
+          " * value of {@link 'elbow'} without removing any existing styles.",
           " *",
           " * ```javascript",
           " * graph.flipEdge = function(edge)",
@@ -5549,11 +5549,11 @@
           " *   if (edge != null)",
           " *   {",
           " *     var style = this.getCurrentCellStyle(edge);",
-          " *     var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,",
+          " *     var elbow = mxUtils.getValue(style, 'elbow',",
           " *         mxConstants.ELBOW_HORIZONTAL);",
           " *     var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?",
           " *         mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;",
-          " *     this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);",
+          " *     this.setCellStyles('elbow', value, [edge]);",
           " *   }",
           " * };",
           " * ```",
@@ -7064,7 +7064,7 @@
           " *",
           " * Returns true if no white-space CSS style directive should be used for",
           " * displaying the given cells label. This implementation returns true if",
-          " * {@link mxConstants.STYLE_WHITE_SPACE} in the style of the given cell is 'wrap'.",
+          " * {@link 'whiteSpace'} in the style of the given cell is 'wrap'.",
           " *",
           " * This is used as a workaround for IE ignoring the white-space directive",
           " * of child elements if the directive appears in a parent element. It",
@@ -7232,7 +7232,7 @@
         [
           "/**",
           " * Returns the image URL for the given cell state. This implementation",
-          " * returns the value stored under {@link mxConstants.STYLE_IMAGE} in the cell",
+          " * returns the value stored under {@link 'image'} in the cell",
           " * style.",
           " *",
           " * @param state {@link mxCellState} whose image URL should be returned.",
@@ -7255,7 +7255,7 @@
           "/**",
           " * Returns the vertical alignment for the given cell state. This",
           " * implementation returns the value stored under",
-          " * {@link mxConstants.STYLE_VERTICAL_ALIGN} in the cell style.",
+          " * {@link mxConstants.'verticalAlign'} in the cell style.",
           " *",
           " * @param state {@link mxCellState} whose vertical alignment should be",
           " * returned.",
@@ -7602,7 +7602,7 @@
           "/**",
           " * Returns true if the given cell is moveable. This returns",
           " * {@link cellsDeletable} for all given cells if a cells style does not specify",
-          " * {@link mxConstants.STYLE_DELETABLE} to be 0.",
+          " * {@link 'deletable'} to be 0.",
           " *",
           " * @param cell {@link mxCell} whose deletable state should be returned.",
           " */"
@@ -7643,7 +7643,7 @@
         [
           "/**",
           " * Returns true if the given cell is rotatable. This returns true for the given",
-          " * cell if its style does not specify {@link mxConstants.STYLE_ROTATABLE} to be 0.",
+          " * cell if its style does not specify {@link 'rotatable'} to be 0.",
           " *",
           " * @param cell {@link mxCell} whose rotatable state should be returned.",
           " */"
@@ -7663,7 +7663,7 @@
           "/**",
           " * Returns true if the given cell is moveable. This returns {@link cellsMovable}",
           " * for all given cells if {@link isCellLocked} does not return true for the given",
-          " * cell and its style does not specify {@link mxConstants.STYLE_MOVABLE} to be 0.",
+          " * cell and its style does not specify {@link 'movable'} to be 0.",
           " *",
           " * @param cell {@link mxCell} whose movable state should be returned.",
           " */"
@@ -7989,7 +7989,7 @@
           " * Returns true if the given cell is resizable. This returns",
           " * {@link cellsResizable} for all given cells if {@link isCellLocked} does not return",
           " * true for the given cell and its style does not specify",
-          " * {@link mxConstants.STYLE_RESIZABLE} to be 0.",
+          " * {@link 'resizable'} to be 0.",
           " *",
           " * @param cell {@link mxCell} whose resizable state should be returned.",
           " */"
@@ -8068,7 +8068,7 @@
           "/**",
           " * Returns true if the given cell is editable. This returns {@link cellsEditable} for",
           " * all given cells if {@link isCellLocked} does not return true for the given cell",
-          " * and its style does not specify {@link mxConstants.STYLE_EDITABLE} to be 0.",
+          " * and its style does not specify {@link 'editable'} to be 0.",
           " *",
           " * @param cell {@link mxCell} whose editable state should be returned.",
           " */"
@@ -8223,7 +8223,7 @@
           " * Returns true if the size of the given cell should automatically be",
           " * updated after a change of the label. This implementation returns",
           " * {@link autoSizeCells} or checks if the cell style does specify",
-          " * {@link mxConstants.STYLE_AUTOSIZE} to be 1.",
+          " * {@link 'autoSize'} to be 1.",
           " *",
           " * @param cell {@link mxCell} that should be resized.",
           " */"
@@ -9221,7 +9221,7 @@
       " *",
       " * @example",
       " * ```javascript",
-      " * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;",
+      " * style.perimiter = mxPerimeter.RectanglePerimeter;",
       " * ```",
       " *",
       " * When adding new perimeter functions, it is recommended to use the",
@@ -9261,7 +9261,7 @@
       " * @example",
       " * ```javascript",
       " * var style = graph.getStylesheet().getDefaultVertexStyle();",
-      " * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.CustomPerimeter;",
+      " * style.perimiter = mxPerimeter.CustomPerimeter;",
       " * ```",
       " *",
       " * Note that the object can be used directly when programmatically setting",
@@ -12393,7 +12393,7 @@
       " * @example",
       " * ```javascript",
       " * var style = graph.getStylesheet().getDefaultVertexStyle();",
-      " * style[mxConstants.STYLE_SHAPE] = 'customShape';",
+      " * style.shape = 'customShape';",
       " * ```",
       " */"
     ],
@@ -13213,25 +13213,25 @@
           " * Applies the style of the given <mxCellState> to the shape. This",
           " * implementation assigns the following styles to local fields:",
           " *",
-          " * - <mxConstants.STYLE_FILLCOLOR> => fill",
-          " * - <mxConstants.STYLE_GRADIENTCOLOR> => gradient",
-          " * - <mxConstants.STYLE_GRADIENT_DIRECTION> => gradientDirection",
-          " * - <mxConstants.STYLE_OPACITY> => opacity",
+          " * - <'fillColor'> => fill",
+          " * - <'gradientColor'> => gradient",
+          " * - <'gradientDirection'> => gradientDirection",
+          " * - <'opacity'> => opacity",
           " * - <mxConstants.STYLE_FILL_OPACITY> => fillOpacity",
           " * - <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity",
-          " * - <mxConstants.STYLE_STROKECOLOR> => stroke",
-          " * - <mxConstants.STYLE_STROKEWIDTH> => strokewidth",
-          " * - <mxConstants.STYLE_SHADOW> => isShadow",
-          " * - <mxConstants.STYLE_DASHED> => isDashed",
-          " * - <mxConstants.STYLE_SPACING> => spacing",
-          " * - <mxConstants.STYLE_STARTSIZE> => startSize",
-          " * - <mxConstants.STYLE_ENDSIZE> => endSize",
-          " * - <mxConstants.STYLE_ROUNDED> => isRounded",
-          " * - <mxConstants.STYLE_STARTARROW> => startArrow",
-          " * - <mxConstants.STYLE_ENDARROW> => endArrow",
-          " * - <mxConstants.STYLE_ROTATION> => rotation",
-          " * - <mxConstants.STYLE_DIRECTION> => direction",
-          " * - <mxConstants.STYLE_GLASS> => glass",
+          " * - <'strokeColor'> => stroke",
+          " * - <mxConstants.'strokeWidth'> => strokewidth",
+          " * - <'shadow'> => isShadow",
+          " * - <'dashed'> => isDashed",
+          " * - <'spacing'> => spacing",
+          " * - <'startSize'> => startSize",
+          " * - <'endSize'> => endSize",
+          " * - <'rounded'> => isRounded",
+          " * - <mxConstants.'startArrow'> => startArrow",
+          " * - <mxConstants.'endArrow'> => endArrow",
+          " * - <'rotation'> => rotation",
+          " * - <'direction'> => direction",
+          " * - <'glass'> => glass",
           " *",
           " * This keeps a reference to the <style>. If you need to keep a reference to",
           " * the cell, you can override this method and store a local reference to",
@@ -13677,11 +13677,11 @@
       " * Extends {@link mxShape} to implement a swimlane shape.",
       " * This shape is registered under {@link mxConstants.SHAPE_SWIMLANE} in {@link mxCellRenderer}.",
       " * Use the {@link mxConstants.STYLE_STYLE_STARTSIZE} to define the size of the title",
-      " * region, {@link mxConstants.STYLE_SWIMLANE_FILLCOLOR} for the content area fill,",
+      " * region, {@link 'swimlaneFillColor'} for the content area fill,",
       " * {@link mxConstants.STYLE_SEPARATORCOLOR} to draw an additional vertical separator and",
       " * {@link mxConstants.STYLE_SWIMLANE_LINE} to hide the line between the title region and",
       " * the content area.",
-      " * The {@link mxConstants.STYLE_HORIZONTAL} affects the orientation of this shape,",
+      " * The {@link 'horizontal'} affects the orientation of this shape,",
       " * not only its label.",
       " *",
       " * @class mxSwimlane",
@@ -14731,14 +14731,14 @@
         [
           "/**",
           " * Overrides {@link mxShape.apply} to replace the fill and stroke colors with the",
-          " * respective values from {@link mxConstants.STYLE_IMAGE_BACKGROUND} and",
-          " * {@link mxConstants.STYLE_IMAGE_BORDER}.",
+          " * respective values from {@link 'imageBackground'} and",
+          " * {@link 'imageBorder'}.",
           " *",
           " * Applies the style of the given {@link mxCellState} to the shape. This",
           " * implementation assigns the following styles to local fields:",
           " *",
-          " * - {@link mxConstants.STYLE_IMAGE_BACKGROUND} => fill",
-          " * - {@link mxConstants.STYLE_IMAGE_BORDER} => stroke",
+          " * - {@link 'imageBackground'} => fill",
+          " * - {@link 'imageBorder'} => stroke",
           " *",
           " * @param {mxCellState} state   {@link mxCellState} of the corresponding cell.",
           " */"
@@ -14848,7 +14848,7 @@
       " *   c.ellipse(x, y, w, h);",
       " *   c.stroke();",
       " *",
-      " *   var inset = mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));",
+      " *   var inset = mxUtils.getValue(this.style, mxConstants.'margin', Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));",
       " *   x += inset;",
       " *   y += inset;",
       " *   w -= 2 * inset;",
@@ -23736,7 +23736,7 @@
         [
           "/**",
           " * Defines the length of the horizontal segment of an Entity Relation.",
-          " * This can be overridden using <mxConstants.STYLE_SEGMENT> style.",
+          " * This can be overridden using <mxConstants.'segment'> style.",
           " * Default is 30.",
           " */"
         ]
@@ -24075,8 +24075,8 @@
           " */"
         ]
       ],
-      "static STYLE_POINTER_EVENTS": [
-        "static STYLE_POINTER_EVENTS: 'pointerEvents';",
+      "static 'pointerEvents'": [
+        "static 'pointerEvents': 'pointerEvents';",
         [
           "/**",
           " * Specifies if pointer events should be fired on transparent backgrounds.",
@@ -24097,8 +24097,8 @@
           " */"
         ]
       ],
-      "static STYLE_MARGIN": [
-        "static STYLE_MARGIN: 'margin';",
+      "static 'margin'": [
+        "static 'margin': 'margin';",
         [
           "/**",
           " * Defines the key for the margin between the ellipses in the double ellipse shape.",
@@ -24133,8 +24133,8 @@
           " */"
         ]
       ],
-      "static STYLE_STROKECOLOR": [
-        "static STYLE_STROKECOLOR: 'strokeColor';",
+      "static 'strokeColor'": [
+        "static 'strokeColor': 'strokeColor';",
         [
           "/**",
           " * Defines the key for the strokeColor style. Possible values are all HTML",
@@ -24154,8 +24154,8 @@
           " */"
         ]
       ],
-      "static STYLE_STROKEWIDTH": [
-        "static STYLE_STROKEWIDTH: 'strokeWidth';",
+      "static 'strokeWidth'": [
+        "static 'strokeWidth': 'strokeWidth';",
         [
           "/**",
           " * Defines the key for the strokeWidth style. The type of the value is",
@@ -24165,8 +24165,8 @@
           " */"
         ]
       ],
-      "static STYLE_ALIGN": [
-        "static STYLE_ALIGN: 'align';",
+      "static 'align'": [
+        "static 'align': 'align';",
         [
           "/**",
           " * Defines the key for the align style. Possible values are <ALIGN_LEFT>;",
@@ -24177,12 +24177,12 @@
           " * are aligned in the center of the label bounds. Note this value doesn't",
           " * affect the positioning of the overall label bounds relative to the",
           " * vertex, to move the label bounds horizontally, use",
-          " * <STYLE_LABEL_POSITION>. Value is \"align\".",
+          " * <'labelPosition'>. Value is \"align\".",
           " */"
         ]
       ],
-      "static STYLE_VERTICAL_ALIGN": [
-        "static STYLE_VERTICAL_ALIGN: 'verticalAlign';",
+      "static 'verticalAlign'": [
+        "static 'verticalAlign': 'verticalAlign';",
         [
           "/**",
           " * Defines the key for the verticalAlign style. Possible values are",
@@ -24195,12 +24195,12 @@
           " * bounds and the bottom-most text label line and the bottom of the label",
           " * bounds. Note this value doesn't affect the positioning of the overall",
           " * label bounds relative to the vertex, to move the label bounds",
-          " * vertically, use <STYLE_VERTICAL_LABEL_POSITION>. Value is \"verticalAlign\".",
+          " * vertically, use <'verticalLabelPosition'>. Value is \"verticalAlign\".",
           " */"
         ]
       ],
-      "static STYLE_LABEL_WIDTH": [
-        "static STYLE_LABEL_WIDTH: 'labelWidth';",
+      "static 'labelWidth'": [
+        "static 'labelWidth': 'labelWidth';",
         [
           "/**",
           " * Defines the key for the width of the label if the label position is not",
@@ -24208,8 +24208,8 @@
           " */"
         ]
       ],
-      "static STYLE_LABEL_POSITION": [
-        "static STYLE_LABEL_POSITION: 'labelPosition';",
+      "static 'labelPosition'": [
+        "static 'labelPosition': 'labelPosition';",
         [
           "/**",
           " * Defines the key for the horizontal label position of vertices. Possible",
@@ -24220,13 +24220,13 @@
           " * adjust to the right and <ALIGN_CENTER> means the label bounds are",
           " * vertically aligned with the bounds of the vertex. Note this value",
           " * doesn't affect the positioning of label within the label bounds, to move",
-          " * the label horizontally within the label bounds, use <STYLE_ALIGN>.",
+          " * the label horizontally within the label bounds, use <'align'>.",
           " * Value is \"labelPosition\".",
           " */"
         ]
       ],
-      "static STYLE_VERTICAL_LABEL_POSITION": [
-        "static STYLE_VERTICAL_LABEL_POSITION: 'verticalLabelPosition';",
+      "static 'verticalLabelPosition'": [
+        "static 'verticalLabelPosition': 'verticalLabelPosition';",
         [
           "/**",
           " * Defines the key for the vertical label position of vertices. Possible",
@@ -24238,7 +24238,7 @@
           " * horizontally aligned with the bounds of the vertex. Note this value",
           " * doesn't affect the positioning of label within the label bounds, to move",
           " * the label vertically within the label bounds, use",
-          " * <STYLE_VERTICAL_ALIGN>. Value is \"verticalLabelPosition\".",
+          " * <'verticalAlign'>. Value is \"verticalLabelPosition\".",
           " */"
         ]
       ],
@@ -24435,8 +24435,8 @@
           " */"
         ]
       ],
-      "static STYLE_INDICATOR_STROKECOLOR": [
-        "static STYLE_INDICATOR_STROKECOLOR: 'indicatorStrokeColor';",
+      "static 'indicatorStrokeColor'": [
+        "static 'indicatorStrokeColor': 'indicatorStrokeColor';",
         [
           "/**",
           " * Defines the key for the indicator stroke color in <mxLabel>.",
@@ -24482,8 +24482,8 @@
           " */"
         ]
       ],
-      "static STYLE_INDICATOR_DIRECTION": [
-        "static STYLE_INDICATOR_DIRECTION: 'indicatorDirection';",
+      "static 'indicatorDirection'": [
+        "static 'indicatorDirection': 'indicatorDirection';",
         [
           "/**",
           " * Defines the key for the indicatorDirection style. The direction style is",
@@ -24502,8 +24502,8 @@
           " */"
         ]
       ],
-      "static STYLE_SEGMENT": [
-        "static STYLE_SEGMENT: 'segment';",
+      "static 'segment'": [
+        "static 'segment': 'segment';",
         [
           "/**",
           " * Defines the key for the segment style. The type of this value is float",
@@ -24512,8 +24512,8 @@
           " */"
         ]
       ],
-      "static STYLE_ENDARROW": [
-        "static STYLE_ENDARROW: 'endArrow';",
+      "static 'endArrow'": [
+        "static 'endArrow': 'endArrow';",
         [
           "/**",
           " * Defines the key for the end arrow marker. Possible values are all",
@@ -24522,18 +24522,18 @@
           " *",
           " * Example:",
           " * (code)",
-          " * style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;",
+          " * style.endArrow = mxConstants.ARROW_CLASSIC;",
           " * (end)",
           " */"
         ]
       ],
-      "static STYLE_STARTARROW": [
-        "static STYLE_STARTARROW: 'startArrow';",
+      "static 'startArrow'": [
+        "static 'startArrow': 'startArrow';",
         [
           "/**",
           " * Defines the key for the start arrow marker. Possible values are all",
           " * constants with an ARROW-prefix. This is only used in <mxConnector>.",
-          " * See <STYLE_ENDARROW>. Value is \"startArrow\".",
+          " * See <'endArrow'>. Value is \"startArrow\".",
           " */"
         ]
       ],
@@ -24645,8 +24645,8 @@
           " */"
         ]
       ],
-      "static STYLE_ARCSIZE": [
-        "static STYLE_ARCSIZE: 'arcSize';",
+      "static 'arcSize'": [
+        "static 'arcSize': 'arcSize';",
         [
           "/**",
           " * Defines the rounding factor for a rounded rectangle in percent (without",
@@ -24759,7 +24759,7 @@
         [
           "/**",
           " * Defines the key for the horizontal style. Possible values are",
-          " * true or false. This value only applies to vertices. If the <STYLE_SHAPE>",
+          " * true or false. This value only applies to vertices. If the <'shape'>",
           " * is \"SHAPE_SWIMLANE\" a value of false indicates that the",
           " * swimlane should be drawn vertically, true indicates to draw it",
           " * horizontally. If the shape style does not indicate that this vertex is a",
@@ -24791,8 +24791,8 @@
           " */"
         ]
       ],
-      "static STYLE_ELBOW": [
-        "static STYLE_ELBOW: 'elbow';",
+      "static 'elbow'": [
+        "static 'elbow': 'elbow';",
         [
           "/**",
           " * Defines the key for the elbow style. Possible values are",
@@ -24803,8 +24803,8 @@
           " */"
         ]
       ],
-      "static STYLE_FONTCOLOR": [
-        "static STYLE_FONTCOLOR: 'fontColor';",
+      "static 'fontColor'": [
+        "static 'fontColor': 'fontColor';",
         [
           "/**",
           " * Defines the key for the fontColor style. Possible values are all HTML",
@@ -24882,8 +24882,8 @@
           " */"
         ]
       ],
-      "static STYLE_BACKGROUND_OUTLINE": [
-        "static STYLE_BACKGROUND_OUTLINE: 'backgroundOutline';",
+      "static 'backgroundOutline'": [
+        "static 'backgroundOutline': 'backgroundOutline';",
         [
           "/**",
           " * Defines the key for the backgroundOutline style. This specifies if a",
@@ -24976,8 +24976,8 @@
           " */"
         ]
       ],
-      "static STYLE_SHAPE": [
-        "static STYLE_SHAPE: 'shape';",
+      "static 'shape'": [
+        "static 'shape': 'shape';",
         [
           "/**",
           " * Defines the key for the shape. Possible values are all constants with",
@@ -24994,8 +24994,8 @@
           " */"
         ]
       ],
-      "static STYLE_JETTY_SIZE": [
-        "static STYLE_JETTY_SIZE: 'jettySize';",
+      "static 'jettySize'": [
+        "static 'jettySize': 'jettySize';",
         [
           "/**",
           " * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.",
@@ -25004,23 +25004,23 @@
           " */"
         ]
       ],
-      "static STYLE_SOURCE_JETTY_SIZE": [
-        "static STYLE_SOURCE_JETTY_SIZE: 'sourceJettySize';",
+      "static 'sourceJettySize'": [
+        "static 'sourceJettySize': 'sourceJettySize';",
         [
           "/**",
           " * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.",
           " * Default is 10. Possible values are numeric values or \"auto\". This has",
-          " * precedence over <STYLE_JETTY_SIZE>. Value is \"sourceJettySize\".",
+          " * precedence over <'jettySize'>. Value is \"sourceJettySize\".",
           " */"
         ]
       ],
-      "static STYLE_TARGET_JETTY_SIZE": [
-        "static STYLE_TARGET_JETTY_SIZE: 'targetJettySize';",
+      "static 'targetJettySize'": [
+        "static 'targetJettySize': 'targetJettySize';",
         [
           "/**",
           " * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.",
           " * Default is 10. Possible values are numeric values or \"auto\". This has",
-          " * precedence over <STYLE_JETTY_SIZE>. Value is \"targetJettySize\".",
+          " * precedence over <'jettySize'>. Value is \"targetJettySize\".",
           " */"
         ]
       ],
@@ -34713,13 +34713,13 @@
           " *   var s = this.state;",
           " *",
           " *   if (this.graph.isHtmlLabel(s.cell) && (index == 3 || index == 4) &&",
-          " *       s.text != null && s.style[mxConstants.STYLE_WHITE_SPACE] == 'wrap')",
+          " *       s.text != null && s.style.whiteSpace == 'wrap')",
           " *   {",
           " *     var label = this.graph.getLabel(s.cell);",
-          " *     var fontSize = mxUtils.getNumber(s.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE);",
+          " *     var fontSize = mxUtils.getNumber(s.style, 'fontSize', mxConstants.DEFAULT_FONTSIZE);",
           " *     var ww = result.width / s.view.scale - s.text.spacingRight - s.text.spacingLeft",
           " *",
-          " *     result.height = mxUtils.getSizeForString(label, fontSize, s.style[mxConstants.STYLE_FONTFAMILY], ww).height;",
+          " *     result.height = mxUtils.getSizeForString(label, fontSize, s.style.fontFamily, ww).height;",
           " *   }",
           " *",
           " *   return result;",
diff --git a/packages/html/stories/Animation.stories.js b/packages/html/stories/Animation.stories.js
index 21f9102ce..ce045542e 100644
--- a/packages/html/stories/Animation.stories.js
+++ b/packages/html/stories/Animation.stories.js
@@ -33,8 +33,8 @@ const Template = ({ label, ...args }) => {
     'shape=cylinder;strokeWidth=2;fillColor=#ffffff;strokeColor=black;' +
     'gradientColor=#a0a0a0;fontColor=black;fontStyle=1;spacingTop=14;';
 
-  graph.getModel().beginUpdate();
-  try {
+  let e1;
+  graph.batchUpdate(() => {
     const v1 = graph.insertVertex({
       parent,
       value: 'Pump',
@@ -49,7 +49,7 @@ const Template = ({ label, ...args }) => {
       size: [60, 60],
       style: vertexStyle,
     });
-    var e1 = graph.insertEdge({
+    e1 = graph.insertEdge({
       parent,
       source: v1,
       target: v2,
@@ -58,10 +58,7 @@ const Template = ({ label, ...args }) => {
     });
     e1.geometry.points = [new mxPoint(230, 50)];
     graph.orderCells(true, [e1]);
-  } finally {
-    // Updates the display
-    graph.getModel().endUpdate();
-  }
+  });
 
   // Adds animation to edge shape and makes "pipe" visible
   const state = graph.view.getState(e1);
diff --git a/packages/html/stories/AutoLayout.stories.js b/packages/html/stories/AutoLayout.stories.js
index cc0e57149..9bdec9ca9 100644
--- a/packages/html/stories/AutoLayout.stories.js
+++ b/packages/html/stories/AutoLayout.stories.js
@@ -104,6 +104,8 @@ const Template = ({ label, ...args }) => {
   const parent = graph.getDefaultParent();
 
   const layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
+
+  let v1;
   const executeLayout = (change, post) => {
     graph.getModel().beginUpdate();
     try {
@@ -187,9 +189,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Adds cells to the model in a single step
-  graph.getModel().beginUpdate();
-  let v1;
-  try {
+  graph.batchUpdate(() => {
     v1 = graph.insertVertex({
       parent,
       value: 'Hello,',
@@ -197,10 +197,7 @@ const Template = ({ label, ...args }) => {
       size: [80, 30],
     });
     addOverlay(v1);
-  } finally {
-    // Updates the display
-    graph.getModel().endUpdate();
-  }
+  });
 
   graph.resizeCell = function() {
     mxGraph.prototype.resizeCell.apply(this, arguments);
diff --git a/packages/html/stories/Boundary.stories.js b/packages/html/stories/Boundary.stories.js
index 73d555c36..398d25606 100644
--- a/packages/html/stories/Boundary.stories.js
+++ b/packages/html/stories/Boundary.stories.js
@@ -23,7 +23,7 @@ const Template = ({ label, ...args }) => {
     mxEvent, 
     mxRubberband, 
     mxPoint,
-    mxConstants,
+    mxGraphHandler,
     mxUtils
   } = mxgraph;
 
@@ -132,13 +132,13 @@ const Template = ({ label, ...args }) => {
 
   // Sets the base style for all vertices
   const style = graph.getStylesheet().getDefaultVertexStyle();
-  style[mxConstants.STYLE_ROUNDED] = true;
-  style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';
-  style[mxConstants.STYLE_STROKECOLOR] = '#000000';
-  style[mxConstants.STYLE_STROKEWIDTH] = '2';
-  style[mxConstants.STYLE_FONTCOLOR] = '#000000';
-  style[mxConstants.STYLE_FONTSIZE] = '12';
-  style[mxConstants.STYLE_FONTSTYLE] = 1;
+  style.rounded = true;
+  style.fillColor = '#ffffff';
+  style.strokeColor = '#000000';
+  style.strokeWidth = '2';
+  style.strokeColor = '#000000';
+  style.fontSize = '12';
+  style.fontStyle = 1;
   graph.getStylesheet().putDefaultVertexStyle(style);
 
   // Replaces move preview for relative children
diff --git a/packages/html/stories/DynamicLoading.stories.js b/packages/html/stories/DynamicLoading.stories.js
index f67d1d9d6..79c743a19 100644
--- a/packages/html/stories/DynamicLoading.stories.js
+++ b/packages/html/stories/DynamicLoading.stories.js
@@ -52,9 +52,9 @@ const Template = ({ label, ...args }) => {
 
   // Changes the default vertex style in-place
   const style = graph.getStylesheet().getDefaultVertexStyle();
-  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
-  style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
-  style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
+  style.shape = mxConstants.SHAPE_ELLIPSE;
+  style.perimiter = mxPerimeter.EllipsePerimeter;
+  style.gradientColor = 'white';
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
diff --git a/packages/html/stories/DynamicStyle.stories.js b/packages/html/stories/DynamicStyle.stories.js
index ad7bf135c..78739f51c 100644
--- a/packages/html/stories/DynamicStyle.stories.js
+++ b/packages/html/stories/DynamicStyle.stories.js
@@ -60,7 +60,7 @@ const Template = ({ label, ...args }) => {
         const targetStyle = graph.getCurrentCellStyle(target);
         const fill = mxUtils.getValue(
           targetStyle,
-          mxConstants.STYLE_FILLCOLOR
+          'fillColor'
         );
 
         if (fill != null) {
diff --git a/packages/html/stories/Events.stories.js b/packages/html/stories/Events.stories.js
index 1d88bd71b..19721edab 100644
--- a/packages/html/stories/Events.stories.js
+++ b/packages/html/stories/Events.stories.js
@@ -93,8 +93,8 @@ const Template = ({ label, ...args }) => {
   // of the edge. The ElbowConnector edge style switches to TopToBottom
   // if the horizontal style is true.
   const style = graph.getStylesheet().getDefaultEdgeStyle();
-  style[mxConstants.STYLE_ROUNDED] = true;
-  style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
+  style.rounded = true;
+  style.edge = mxEdgeStyle.ElbowConnector;
 
   // Installs a popupmenu handler using local function (see below).
   graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => {
diff --git a/packages/html/stories/FileIO.stories.js b/packages/html/stories/FileIO.stories.js
index 333b4fbb0..53ceab6c8 100644
--- a/packages/html/stories/FileIO.stories.js
+++ b/packages/html/stories/FileIO.stories.js
@@ -49,17 +49,17 @@ const Template = ({ label, ...args }) => {
 
       // Changes the default vertex style in-place
       let style = graph.getStylesheet().getDefaultVertexStyle();
-      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ROUNDED;
-      style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-      style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-      style[mxConstants.STYLE_PERIMETER_SPACING] = 4;
-      style[mxConstants.STYLE_SHADOW] = true;
+      style.shape = mxConstants.SHAPE_ROUNDED;
+      style.perimiter = mxPerimeter.RectanglePerimeter;
+      style.gradientColor = 'white';
+      style.perimeterSpacing = 4;
+      style.shadow = true;
 
       style = graph.getStylesheet().getDefaultEdgeStyle();
-      style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
+      style.labelBackgroundColor = 'white';
 
       style = mxUtils.clone(style);
-      style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_CLASSIC;
+      style.startArrow = mxConstants.ARROW_CLASSIC;
       graph.getStylesheet().putCellStyle('2way', style);
 
       graph.isHtmlLabel = function(cell) {
diff --git a/packages/html/stories/FixedIcons.stories.js b/packages/html/stories/FixedIcons.stories.js
index e982396b6..00d600ed7 100644
--- a/packages/html/stories/FixedIcons.stories.js
+++ b/packages/html/stories/FixedIcons.stories.js
@@ -35,12 +35,12 @@ const Template = ({ label, ...args }) => {
   mxLabel.prototype.getImageBounds = function(x, y, w, h) {
     const iw = mxUtils.getValue(
       this.style,
-      mxConstants.STYLE_IMAGE_WIDTH,
+      'imageWidth',
       mxConstants.DEFAULT_IMAGESIZE
     );
     const ih = mxUtils.getValue(
       this.style,
-      mxConstants.STYLE_IMAGE_HEIGHT,
+      'imageHeight',
       mxConstants.DEFAULT_IMAGESIZE
     );
 
diff --git a/packages/html/stories/FixedPoints.stories.js b/packages/html/stories/FixedPoints.stories.js
index e0e396735..bada3d84a 100644
--- a/packages/html/stories/FixedPoints.stories.js
+++ b/packages/html/stories/FixedPoints.stories.js
@@ -134,7 +134,7 @@ const Template = ({ label, ...args }) => {
     }
 
     getAllConnectionConstraints(terminal) {
-      if (terminal != null && this.model.isVertex(terminal.cell)) {
+      if (terminal != null && terminal.cell.isVertex()) {
         return [
           new mxConnectionConstraint(new mxPoint(0, 0), true),
           new mxConnectionConstraint(new mxPoint(0.5, 0), true),
diff --git a/packages/html/stories/Folding.stories.js b/packages/html/stories/Folding.stories.js
index a89fd9527..d2d61b5f0 100644
--- a/packages/html/stories/Folding.stories.js
+++ b/packages/html/stories/Folding.stories.js
@@ -43,19 +43,19 @@ const Template = ({ label, ...args }) => {
 
   // Sets global styles
   let style = graph.getStylesheet().getDefaultEdgeStyle();
-  style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
-  style[mxConstants.STYLE_ROUNDED] = true;
+  style.edge = mxEdgeStyle.EntityRelation;
+  style.rounded = true;
 
   style = graph.getStylesheet().getDefaultVertexStyle();
-  style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';
-  style[mxConstants.STYLE_SHAPE] = 'swimlane';
-  style[mxConstants.STYLE_STARTSIZE] = 30;
+  style.fillColor = '#ffffff';
+  style.shape = 'swimlane';
+  style.startSize = 30;
 
   style = [];
-  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
-  style[mxConstants.STYLE_STROKECOLOR] = 'none';
-  style[mxConstants.STYLE_FILLCOLOR] = 'none';
-  style[mxConstants.STYLE_FOLDABLE] = false;
+  style.shape = mxConstants.SHAPE_RECTANGLE;
+  style.strokeColor = 'none';
+  style.fillColor = 'none';
+  style.foldable = false;
   graph.getStylesheet().putCellStyle('column', style);
 
   // Installs auto layout for all levels
diff --git a/packages/html/stories/Guides.stories.js b/packages/html/stories/Guides.stories.js
index 3df4c5eb8..a7ad49c45 100644
--- a/packages/html/stories/Guides.stories.js
+++ b/packages/html/stories/Guides.stories.js
@@ -60,8 +60,8 @@ const Template = ({ label, ...args }) => {
   // of the edge. The ElbowConnector edge style switches to TopToBottom
   // if the horizontal style is true.
   const style = graph.getStylesheet().getDefaultEdgeStyle();
-  style[mxConstants.STYLE_ROUNDED] = true;
-  style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
+  style.rounded = true;
+  style.edge = mxEdgeStyle.ElbowConnector;
   graph.alternateEdgeStyle = 'elbow=vertical';
 
   // Enables rubberband selection
diff --git a/packages/html/stories/HelloPort.stories.js b/packages/html/stories/HelloPort.stories.js
index 0f439122b..64a519fdf 100644
--- a/packages/html/stories/HelloPort.stories.js
+++ b/packages/html/stories/HelloPort.stories.js
@@ -44,7 +44,7 @@ const Template = ({ label, ...args }) => {
 
   // Sets the default edge style
   const style = graph.getStylesheet().getDefaultEdgeStyle();
-  style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
+  style.edge = mxEdgeStyle.ElbowConnector;
 
   // Ports are not used as terminals for edges, they are
   // only used to compute the graphical connection point
diff --git a/packages/html/stories/HierarchicalLayout.stories.js b/packages/html/stories/HierarchicalLayout.stories.js
index e1e4630e8..831eb6d85 100644
--- a/packages/html/stories/HierarchicalLayout.stories.js
+++ b/packages/html/stories/HierarchicalLayout.stories.js
@@ -49,14 +49,14 @@ const Template = ({ label, ...args }) => {
 
   // Changes the default vertex style in-place
   let style = graph.getStylesheet().getDefaultVertexStyle();
-  style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-  style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-  style[mxConstants.STYLE_PERIMETER_SPACING] = 6;
-  style[mxConstants.STYLE_ROUNDED] = true;
-  style[mxConstants.STYLE_SHADOW] = true;
+  style.perimiter = mxPerimeter.RectanglePerimeter;
+  style.gradientColor = 'white';
+  style.perimeterSpacing = 6;
+  style.rounded = true;
+  style.shadow = true;
 
   style = graph.getStylesheet().getDefaultEdgeStyle();
-  style[mxConstants.STYLE_ROUNDED] = true;
+  style.rounded = true;
 
   // Creates a layout algorithm to be used
   // with the graph
diff --git a/packages/html/stories/HoverStyle.stories.js b/packages/html/stories/HoverStyle.stories.js
index 7b0579c9a..328968fc4 100644
--- a/packages/html/stories/HoverStyle.stories.js
+++ b/packages/html/stories/HoverStyle.stories.js
@@ -34,15 +34,15 @@ const Template = ({ label, ...args }) => {
 
   function updateStyle(state, hover) {
     if (hover) {
-      state.style[mxConstants.STYLE_FILLCOLOR] = '#ff0000';
+      state.style.fillColor = '#ff0000';
     }
 
     // Sets rounded style for both cases since the rounded style
     // is not set in the default style and is therefore inherited
     // once it is set, whereas the above overrides the default value
-    state.style[mxConstants.STYLE_ROUNDED] = hover ? '1' : '0';
-    state.style[mxConstants.STYLE_STROKEWIDTH] = hover ? '4' : '1';
-    state.style[mxConstants.STYLE_FONTSTYLE] = hover
+    state.style.rounded = hover ? '1' : '0';
+    state.style.strokeWidth = hover ? '4' : '1';
+    state.style.fontStyle = hover
       ? mxConstants.FONT_BOLD
       : '0';
   }
diff --git a/packages/html/stories/Images.stories.js b/packages/html/stories/Images.stories.js
index 2602e2b86..9bf71e40b 100644
--- a/packages/html/stories/Images.stories.js
+++ b/packages/html/stories/Images.stories.js
@@ -99,47 +99,47 @@ const Template = ({ label, ...args }) => {
 
   function configureStylesheet(graph) {
     let style = {};
-    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
-    style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-    style[mxConstants.STYLE_IMAGE] = 'images/icons48/keys.png';
-    style[mxConstants.STYLE_FONTCOLOR] = '#FFFFFF';
+    style.shape = mxConstants.SHAPE_IMAGE;
+    style.perimiter = mxPerimeter.RectanglePerimeter;
+    style.image = 'images/icons48/keys.png';
+    style.strokeColor = '#FFFFFF';
     graph.getStylesheet().putCellStyle('image', style);
 
     style = mxCloneUtils.clone(style);
-    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;
-    style[mxConstants.STYLE_STROKECOLOR] = '#000000';
-    style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
-    style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
-    style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;
-    style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
-    style[mxConstants.STYLE_IMAGE] = 'images/icons48/gear.png';
-    style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
-    style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
-    style[mxConstants.STYLE_SPACING_TOP] = '56';
-    style[mxConstants.STYLE_SPACING] = '8';
+    style.shape = mxConstants.SHAPE_LABEL;
+    style.strokeColor = '#000000';
+    style.align = mxConstants.ALIGN_CENTER;
+    style.verticalAlign = mxConstants.ALIGN_TOP;
+    style.imageAlign = mxConstants.ALIGN_CENTER;
+    style.imageVerticalAlign = mxConstants.ALIGN_TOP;
+    style.image = 'images/icons48/gear.png';
+    style.imageWidth = '48';
+    style.imageHeight = '48';
+    style.spacingTop = '56';
+    style.spacing = '8';
     graph.getStylesheet().putCellStyle('bottom', style);
 
     style = mxCloneUtils.clone(style);
-    style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
-    style[mxConstants.STYLE_IMAGE] = 'images/icons48/server.png';
-    delete style[mxConstants.STYLE_SPACING_TOP];
+    style.imageVerticalAlign = mxConstants.ALIGN_BOTTOM;
+    style.image = 'images/icons48/server.png';
+    delete style.spacingTop;
     graph.getStylesheet().putCellStyle('top', style);
 
     style = mxCloneUtils.clone(style);
-    style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
-    style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_LEFT;
-    style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
-    style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
-    style[mxConstants.STYLE_IMAGE] = 'images/icons48/earth.png';
-    style[mxConstants.STYLE_SPACING_LEFT] = '55';
-    style[mxConstants.STYLE_SPACING] = '4';
+    style.align = mxConstants.ALIGN_LEFT;
+    style.imageAlign = mxConstants.ALIGN_LEFT;
+    style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+    style.imageVerticalAlign = mxConstants.ALIGN_MIDDLE;
+    style.image = 'images/icons48/earth.png';
+    style.spacingLeft = '55';
+    style.spacing = '4';
     graph.getStylesheet().putCellStyle('right', style);
 
     style = mxCloneUtils.clone(style);
-    style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_RIGHT;
-    style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_RIGHT;
-    delete style[mxConstants.STYLE_SPACING_LEFT];
-    style[mxConstants.STYLE_SPACING_RIGHT] = '55';
+    style.align = mxConstants.ALIGN_RIGHT;
+    style.imageAlign = mxConstants.ALIGN_RIGHT;
+    delete style.spacingLeft;
+    style.spacingRight = '55';
     graph.getStylesheet().putCellStyle('left', style);
   }
 
diff --git a/packages/html/stories/Indicators.stories.js b/packages/html/stories/Indicators.stories.js
index 03bb607ef..067f50d56 100644
--- a/packages/html/stories/Indicators.stories.js
+++ b/packages/html/stories/Indicators.stories.js
@@ -36,23 +36,23 @@ const Template = ({ label, ...args }) => {
   // Creates a style with an indicator
   let style = graph.getStylesheet().getDefaultVertexStyle();
 
-  style[mxConstants.STYLE_SHAPE] = 'label';
-  style[mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom';
-  style[mxConstants.STYLE_INDICATOR_SHAPE] = 'ellipse';
-  style[mxConstants.STYLE_INDICATOR_WIDTH] = 34;
-  style[mxConstants.STYLE_INDICATOR_HEIGHT] = 34;
-  style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 'top'; // indicator v-alignment
-  style[mxConstants.STYLE_IMAGE_ALIGN] = 'center';
-  style[mxConstants.STYLE_INDICATOR_COLOR] = 'green';
-  delete style[mxConstants.STYLE_STROKECOLOR]; // transparent
-  delete style[mxConstants.STYLE_FILLCOLOR]; // transparent
+  style.shape = 'label';
+  style.verticalAlign = 'bottom';
+  style.indicatorShape = 'ellipse';
+  style.indicatorWidth = 34;
+  style.indicatorHeight = 34;
+  style.imageVerticalAlign = 'top'; // indicator v-alignment
+  style.imageAlign = 'center';
+  style.indicatorColor = 'green';
+  delete style.strokeColor; // transparent
+  delete style.fillColor; // transparent
 
   // Creates a style with an indicator
   style = graph.getStylesheet().getDefaultEdgeStyle();
 
-  style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
-  style[mxConstants.STYLE_ELBOW] = mxConstants.ELBOW_VERTICAL;
-  style[mxConstants.STYLE_ROUNDED] = true;
+  style.edge = mxEdgeStyle.ElbowConnector;
+  style.elbow = mxConstants.ELBOW_VERTICAL;
+  style.rounded = true;
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
diff --git a/packages/html/stories/Labels.stories.js b/packages/html/stories/Labels.stories.js
index bd94bea72..6ac9580c9 100644
--- a/packages/html/stories/Labels.stories.js
+++ b/packages/html/stories/Labels.stories.js
@@ -73,7 +73,7 @@ const Template = ({ label, ...args }) => {
     ) {
       const style = this.getCellStyle(cell);
       const fontSize =
-        style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE;
+        style.fontSize || mxConstants.DEFAULT_FONTSIZE;
       const max = geometry.width / (fontSize * 0.625);
 
       if (max < label.length) {
diff --git a/packages/html/stories/Merge.stories.js b/packages/html/stories/Merge.stories.js
index bb7463be2..bf5b474a4 100644
--- a/packages/html/stories/Merge.stories.js
+++ b/packages/html/stories/Merge.stories.js
@@ -39,20 +39,20 @@ const Template = ({ label, ...args }) => {
 
   // Makes all cells round with a white, bold label
   let style = graph.stylesheet.getDefaultVertexStyle();
-  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
-  style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
-  style[mxConstants.STYLE_FONTCOLOR] = 'white';
-  style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-  style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;
-  style[mxConstants.STYLE_FONTSIZE] = 14;
-  style[mxConstants.STYLE_SHADOW] = true;
+  style.shape = mxConstants.SHAPE_ELLIPSE;
+  style.perimiter = mxPerimeter.EllipsePerimeter;
+  style.strokeColor = 'white';
+  style.gradientColor = 'white';
+  style.fontStyle = mxConstants.FONT_BOLD;
+  style.fontSize = 14;
+  style.shadow = true;
 
   // Makes all edge labels gray with a white background
   style = graph.stylesheet.getDefaultEdgeStyle();
-  style[mxConstants.STYLE_FONTCOLOR] = 'gray';
-  style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;
-  style[mxConstants.STYLE_FONTCOLOR] = 'black';
-  style[mxConstants.STYLE_STROKEWIDTH] = 2;
+  style.strokeColor = 'gray';
+  style.fontStyle = mxConstants.FONT_BOLD;
+  style.strokeColor = 'black';
+  style.strokeWidth = 2;
 
   // Enables rubberband selection
   if (args.rubberBand)
diff --git a/packages/html/stories/Monitor.stories.js b/packages/html/stories/Monitor.stories.js
index 86425177d..6eb71d59d 100644
--- a/packages/html/stories/Monitor.stories.js
+++ b/packages/html/stories/Monitor.stories.js
@@ -124,7 +124,7 @@ const Template = ({ label, ...args }) => {
               // Updates the cell color and adds some tooltip information
               if (cell != null) {
                 // Resets the fillcolor and the overlay
-                graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, 'white', [
+                graph.setCellStyles('fillColor', 'white', [
                   cell,
                 ]);
                 graph.removeCellOverlays(cell);
@@ -132,19 +132,19 @@ const Template = ({ label, ...args }) => {
                 // Changes the cell color for the known states
                 if (state == 'Running') {
                   graph.setCellStyles(
-                    mxConstants.STYLE_FILLCOLOR,
+                    'fillColor',
                     '#f8cecc',
                     [cell]
                   );
                 } else if (state == 'Waiting') {
                   graph.setCellStyles(
-                    mxConstants.STYLE_FILLCOLOR,
+                    'fillColor',
                     '#fff2cc',
                     [cell]
                   );
                 } else if (state == 'Completed') {
                   graph.setCellStyles(
-                    mxConstants.STYLE_FILLCOLOR,
+                    'fillColor',
                     '#d4e1f5',
                     [cell]
                   );
@@ -198,66 +198,66 @@ const Template = ({ label, ...args }) => {
 
     // Creates the stylesheet for the process display
     let style = graph.getStylesheet().getDefaultVertexStyle();
-    style[mxConstants.STYLE_FONTSIZE] = 11;
-    style[mxConstants.STYLE_FONTCOLOR] = 'black';
-    style[mxConstants.STYLE_STROKECOLOR] = '#808080';
-    style[mxConstants.STYLE_FILLCOLOR] = 'white';
-    style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-    style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST;
-    style[mxConstants.STYLE_ROUNDED] = true;
-    style[mxConstants.STYLE_SHADOW] = true;
-    style[mxConstants.STYLE_FONTSTYLE] = 1;
+    style.fontSize = 11;
+    style.strokeColor = 'black';
+    style.strokeColor = '#808080';
+    style.fillColor = 'white';
+    style.gradientColor = 'white';
+    style.gradientDirection = mxConstants.DIRECTION_EAST;
+    style.rounded = true;
+    style.shadow = true;
+    style.fontStyle = 1;
 
     style = graph.getStylesheet().getDefaultEdgeStyle();
-    style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
-    style[mxConstants.STYLE_STROKECOLOR] = '#808080';
-    style[mxConstants.STYLE_ROUNDED] = true;
-    style[mxConstants.STYLE_SHADOW] = true;
+    style.edge = mxEdgeStyle.ElbowConnector;
+    style.strokeColor = '#808080';
+    style.rounded = true;
+    style.shadow = true;
 
     style = [];
-    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
-    style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-    style[mxConstants.STYLE_STROKECOLOR] = '#a0a0a0';
-    style[mxConstants.STYLE_FONTCOLOR] = '#606060';
-    style[mxConstants.STYLE_FILLCOLOR] = '#E0E0DF';
-    style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-    style[mxConstants.STYLE_STARTSIZE] = 30;
-    style[mxConstants.STYLE_ROUNDED] = false;
-    style[mxConstants.STYLE_FONTSIZE] = 12;
-    style[mxConstants.STYLE_FONTSTYLE] = 0;
-    style[mxConstants.STYLE_HORIZONTAL] = false;
+    style.shape = mxConstants.SHAPE_SWIMLANE;
+    style.perimiter = mxPerimeter.RectanglePerimeter;
+    style.strokeColor = '#a0a0a0';
+    style.strokeColor = '#606060';
+    style.fillColor = '#E0E0DF';
+    style.gradientColor = 'white';
+    style.startSize = 30;
+    style.rounded = false;
+    style.fontSize = 12;
+    style.fontStyle = 0;
+    style.horizontal = false;
     // To improve text quality for vertical labels in some old IE versions...
-    style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#efefef';
+    style.labelBackgroundColor = '#efefef';
 
     graph.getStylesheet().putCellStyle('swimlane', style);
 
     style = [];
-    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RHOMBUS;
-    style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter;
-    style[mxConstants.STYLE_STROKECOLOR] = '#91BCC0';
-    style[mxConstants.STYLE_FONTCOLOR] = 'gray';
-    style[mxConstants.STYLE_FILLCOLOR] = '#91BCC0';
-    style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-    style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
-    style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
-    style[mxConstants.STYLE_FONTSIZE] = 16;
+    style.shape = mxConstants.SHAPE_RHOMBUS;
+    style.perimiter = mxPerimeter.RhombusPerimeter;
+    style.strokeColor = '#91BCC0';
+    style.strokeColor = 'gray';
+    style.fillColor = '#91BCC0';
+    style.gradientColor = 'white';
+    style.align = mxConstants.ALIGN_CENTER;
+    style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+    style.fontSize = 16;
     graph.getStylesheet().putCellStyle('step', style);
 
     style = [];
-    style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
-    style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
-    style[mxConstants.STYLE_FONTCOLOR] = 'gray';
-    style[mxConstants.STYLE_FILLCOLOR] = '#A0C88F';
-    style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-    style[mxConstants.STYLE_STROKECOLOR] = '#A0C88F';
-    style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
-    style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
-    style[mxConstants.STYLE_FONTSIZE] = 16;
+    style.shape = mxConstants.SHAPE_ELLIPSE;
+    style.perimiter = mxPerimeter.EllipsePerimeter;
+    style.strokeColor = 'gray';
+    style.fillColor = '#A0C88F';
+    style.gradientColor = 'white';
+    style.strokeColor = '#A0C88F';
+    style.align = mxConstants.ALIGN_CENTER;
+    style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+    style.fontSize = 16;
     graph.getStylesheet().putCellStyle('start', style);
 
     style = mxCloneUtils.clone(style);
-    style[mxConstants.STYLE_FILLCOLOR] = '#DACCBC';
-    style[mxConstants.STYLE_STROKECOLOR] = '#AF7F73';
+    style.fillColor = '#DACCBC';
+    style.strokeColor = '#AF7F73';
     graph.getStylesheet().putCellStyle('end', style);
 
     return graph;
diff --git a/packages/html/stories/OrgChart.stories.js b/packages/html/stories/OrgChart.stories.js
index 8887c5cdc..f70c02d1d 100644
--- a/packages/html/stories/OrgChart.stories.js
+++ b/packages/html/stories/OrgChart.stories.js
@@ -85,43 +85,43 @@ const Template = ({ label, ...args }) => {
 
   // Set some stylesheet options for the visual appearance of vertices
   let style = graph.getStylesheet().getDefaultVertexStyle();
-  style[mxConstants.STYLE_SHAPE] = 'label';
+  style.shape = 'label';
 
-  style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
-  style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
-  style[mxConstants.STYLE_SPACING_LEFT] = 54;
+  style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+  style.align = mxConstants.ALIGN_LEFT;
+  style.spacingLeft = 54;
 
-  style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';
-  style[mxConstants.STYLE_STROKECOLOR] = '#5d65df';
-  style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';
+  style.gradientColor = '#7d85df';
+  style.strokeColor = '#5d65df';
+  style.fillColor = '#adc5ff';
 
-  style[mxConstants.STYLE_FONTCOLOR] = '#1d258f';
-  style[mxConstants.STYLE_FONTFAMILY] = 'Verdana';
-  style[mxConstants.STYLE_FONTSIZE] = '12';
-  style[mxConstants.STYLE_FONTSTYLE] = '1';
+  style.strokeColor = '#1d258f';
+  style.fontFamily = 'Verdana';
+  style.fontSize = '12';
+  style.fontStyle = '1';
 
-  style[mxConstants.STYLE_SHADOW] = '1';
-  style[mxConstants.STYLE_ROUNDED] = '1';
-  style[mxConstants.STYLE_GLASS] = '1';
+  style.shadow = '1';
+  style.rounded = '1';
+  style.glass = '1';
 
-  style[mxConstants.STYLE_IMAGE] = '/images/dude3.png';
-  style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
-  style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
-  style[mxConstants.STYLE_SPACING] = 8;
+  style.image = '/images/dude3.png';
+  style.imageWidth = '48';
+  style.imageHeight = '48';
+  style.spacing = 8;
 
   // Sets the default style for edges
   style = graph.getStylesheet().getDefaultEdgeStyle();
-  style[mxConstants.STYLE_ROUNDED] = true;
-  style[mxConstants.STYLE_STROKEWIDTH] = 3;
-  style[mxConstants.STYLE_EXIT_X] = 0.5; // center
-  style[mxConstants.STYLE_EXIT_Y] = 1.0; // bottom
-  style[mxConstants.STYLE_EXIT_PERIMETER] = 0; // disabled
-  style[mxConstants.STYLE_ENTRY_X] = 0.5; // center
-  style[mxConstants.STYLE_ENTRY_Y] = 0; // top
-  style[mxConstants.STYLE_ENTRY_PERIMETER] = 0; // disabled
+  style.rounded = true;
+  style.strokeWidth = 3;
+  style.exitX = 0.5; // center
+  style.exitY = 1.0; // bottom
+  style.exitPerimeter = 0; // disabled
+  style.entryX = 0.5; // center
+  style.entryY = 0; // top
+  style.entryPerimeter = 0; // disabled
 
   // Disable the following for straight lines
-  style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
+  style.edge = mxEdgeStyle.TopToBottom;
 
   // Stops editing on enter or escape keypress
   const keyHandler = new mxKeyHandler(graph);
diff --git a/packages/html/stories/Orthogonal.stories.js b/packages/html/stories/Orthogonal.stories.js
index 7b4712c3d..c4fe41f55 100644
--- a/packages/html/stories/Orthogonal.stories.js
+++ b/packages/html/stories/Orthogonal.stories.js
@@ -19,7 +19,8 @@ const Template = ({ label, ...args }) => {
     mxPoint,
     mxCellState,
     mxEdgeHandler,
-    mxGraphView
+    mxGraphView,
+    mxEvent
   } = mxgraph;
 
   const container = document.createElement('div');
diff --git a/packages/html/stories/PortRefs.stories.js b/packages/html/stories/PortRefs.stories.js
index 1c35ab909..4017a8932 100644
--- a/packages/html/stories/PortRefs.stories.js
+++ b/packages/html/stories/PortRefs.stories.js
@@ -158,8 +158,8 @@ const Template = ({ label, ...args }) => {
   ) {
     if (constraint != null) {
       const key = source
-        ? mxConstants.STYLE_SOURCE_PORT
-        : mxConstants.STYLE_TARGET_PORT;
+        ? 'sourcePort'
+        : 'targetPort';
 
       if (constraint == null || constraint.id == null) {
         this.setCellStyles(key, null, [edge]);
@@ -172,8 +172,8 @@ const Template = ({ label, ...args }) => {
   // Returns the port for the given connection
   graph.getConnectionConstraint = function(edge, terminal, source) {
     const key = source
-      ? mxConstants.STYLE_SOURCE_PORT
-      : mxConstants.STYLE_TARGET_PORT;
+      ? 'sourcePort'
+      : 'targetPort';
     const id = edge.style[key];
 
     if (id != null) {
diff --git a/packages/html/stories/RadialTreeLayout.stories.js b/packages/html/stories/RadialTreeLayout.stories.js
index eb046e7b1..fdb8ea4a6 100644
--- a/packages/html/stories/RadialTreeLayout.stories.js
+++ b/packages/html/stories/RadialTreeLayout.stories.js
@@ -39,14 +39,14 @@ const Template = ({ label, ...args }) => {
 
   // Changes the default vertex style in-place
   let style = graph.getStylesheet().getDefaultVertexStyle();
-  style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-  style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-  style[mxConstants.STYLE_PERIMETER_SPACING] = 6;
-  style[mxConstants.STYLE_ROUNDED] = true;
-  style[mxConstants.STYLE_SHADOW] = true;
+  style.perimiter = mxPerimeter.RectanglePerimeter;
+  style.gradientColor = 'white';
+  style.perimeterSpacing = 6;
+  style.rounded = true;
+  style.shadow = true;
 
   style = graph.getStylesheet().getDefaultEdgeStyle();
-  style[mxConstants.STYLE_ROUNDED] = true;
+  style.rounded = true;
 
   // Creates a layout algorithm to be used
   // with the graph
diff --git a/packages/html/stories/Shape.stories.js b/packages/html/stories/Shape.stories.js
index 45ca99e76..6f65d53ad 100644
--- a/packages/html/stories/Shape.stories.js
+++ b/packages/html/stories/Shape.stories.js
@@ -96,16 +96,16 @@ const Template = ({ label, ...args }) => {
   // Changes the default style for vertices "in-place"
   // to use the custom shape.
   const style = graph.getStylesheet().getDefaultVertexStyle();
-  style[mxConstants.STYLE_SHAPE] = 'box';
+  style.shape = 'box';
 
   // Adds a spacing for the label that matches the
   // extrusion size
-  style[mxConstants.STYLE_SPACING_TOP] = BoxShape.prototype.extrude;
-  style[mxConstants.STYLE_SPACING_RIGHT] = BoxShape.prototype.extrude;
+  style.spacingTop = BoxShape.prototype.extrude;
+  style.spacingRight = BoxShape.prototype.extrude;
 
   // Adds a gradient and shadow to improve the user experience
-  style[mxConstants.STYLE_GRADIENTCOLOR] = '#FFFFFF';
-  style[mxConstants.STYLE_SHADOW] = true;
+  style.gradientColor = '#FFFFFF';
+  style.shadow = true;
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
diff --git a/packages/html/stories/Stencils.stories.js b/packages/html/stories/Stencils.stories.js
index a5b1730dd..cefd2c8d0 100644
--- a/packages/html/stories/Stencils.stories.js
+++ b/packages/html/stories/Stencils.stories.js
@@ -68,7 +68,7 @@ const Template = ({ label, ...args }) => {
 
   // Uses the shape for resize previews
   mxVertexHandler.prototype.createSelectionShape = function(bounds) {
-    const key = this.state.style[mxConstants.STYLE_SHAPE];
+    const key = this.state.style.shape;
     const stencil = mxStencilRegistry.getStencil(key);
     let shape = null;
 
@@ -159,11 +159,11 @@ const Template = ({ label, ...args }) => {
 
   // Changes default styles
   let style = graph.getStylesheet().getDefaultEdgeStyle();
-  style[mxConstants.STYLE_EDGE] = 'orthogonalEdgeStyle';
+  style.edge = 'orthogonalEdgeStyle';
   style = graph.getStylesheet().getDefaultVertexStyle();
-  style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';
-  style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';
-  style[mxConstants.STYLE_SHADOW] = '1';
+  style.fillColor = '#adc5ff';
+  style.gradientColor = '#7d85df';
+  style.shadow = '1';
 
   // Enables rubberband selection
   if (args.rubberBand)
@@ -273,13 +273,13 @@ const Template = ({ label, ...args }) => {
 
   buttons.appendChild(
     mxDomHelpers.button('FlipH', function() {
-      graph.toggleCellStyles(mxConstants.STYLE_FLIPH);
+      graph.toggleCellStyles('flipH');
     })
   );
 
   buttons.appendChild(
     mxDomHelpers.button('FlipV', function() {
-      graph.toggleCellStyles(mxConstants.STYLE_FLIPV);
+      graph.toggleCellStyles('flipV');
     })
   );
 
@@ -312,7 +312,7 @@ const Template = ({ label, ...args }) => {
 
             if (state != null) {
               let dir =
-                state.style[mxConstants.STYLE_DIRECTION] ||
+                state.style.direction ||
                 'east'; /* default */
 
               if (dir === 'east') {
@@ -325,7 +325,7 @@ const Template = ({ label, ...args }) => {
                 dir = 'east';
               }
 
-              graph.setCellStyles(mxConstants.STYLE_DIRECTION, dir, [cell]);
+              graph.setCellStyles('direction', dir, [cell]);
             }
           } finally {
             graph.getModel().endUpdate();
@@ -342,17 +342,17 @@ const Template = ({ label, ...args }) => {
 
   buttons.appendChild(
     mxDomHelpers.button('And', function() {
-      graph.setCellStyles(mxConstants.STYLE_SHAPE, 'and');
+      graph.setCellStyles('shape', 'and');
     })
   );
   buttons.appendChild(
     mxDomHelpers.button('Or', function() {
-      graph.setCellStyles(mxConstants.STYLE_SHAPE, 'or');
+      graph.setCellStyles('shape', 'or');
     })
   );
   buttons.appendChild(
     mxDomHelpers.button('Xor', function() {
-      graph.setCellStyles(mxConstants.STYLE_SHAPE, 'xor');
+      graph.setCellStyles('shape', 'xor');
     })
   );
 
diff --git a/packages/html/stories/Stylesheet.stories.js b/packages/html/stories/Stylesheet.stories.js
index f56e95b90..c126688d6 100644
--- a/packages/html/stories/Stylesheet.stories.js
+++ b/packages/html/stories/Stylesheet.stories.js
@@ -59,28 +59,28 @@ const Template = ({ label, ...args }) => {
 
   // Creates the default style for vertices
   let style = [];
-  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
-  style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
-  style[mxConstants.STYLE_STROKECOLOR] = 'gray';
-  style[mxConstants.STYLE_ROUNDED] = true;
-  style[mxConstants.STYLE_FILLCOLOR] = '#EEEEEE';
-  style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-  style[mxConstants.STYLE_FONTCOLOR] = '#774400';
-  style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
-  style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
-  style[mxConstants.STYLE_FONTSIZE] = '12';
-  style[mxConstants.STYLE_FONTSTYLE] = 1;
+  style.shape = mxConstants.SHAPE_RECTANGLE;
+  style.perimiter = mxPerimeter.RectanglePerimeter;
+  style.strokeColor = 'gray';
+  style.rounded = true;
+  style.fillColor = '#EEEEEE';
+  style.gradientColor = 'white';
+  style.strokeColor = '#774400';
+  style.align = mxConstants.ALIGN_CENTER;
+  style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+  style.fontSize = '12';
+  style.fontStyle = 1;
   graph.getStylesheet().putDefaultVertexStyle(style);
 
   // Creates the default style for edges
   style = [];
-  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR;
-  style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';
-  style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
-  style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
-  style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
-  style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
-  style[mxConstants.STYLE_FONTSIZE] = '10';
+  style.shape = mxConstants.SHAPE_CONNECTOR;
+  style.strokeColor = '#6482B9';
+  style.align = mxConstants.ALIGN_CENTER;
+  style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+  style.edge = mxEdgeStyle.ElbowConnector;
+  style.endArrow = mxConstants.ARROW_CLASSIC;
+  style.fontSize = '10';
   graph.getStylesheet().putDefaultEdgeStyle(style);
 
   // Gets the default parent for inserting new cells. This
diff --git a/packages/html/stories/SwimLanes.stories.js b/packages/html/stories/SwimLanes.stories.js
index 8555efcf8..eaac4efba 100644
--- a/packages/html/stories/SwimLanes.stories.js
+++ b/packages/html/stories/SwimLanes.stories.js
@@ -61,60 +61,60 @@ const Template = ({ label, ...args }) => {
 
   // Changes the default vertex style in-place
   let style = graph.getStylesheet().getDefaultVertexStyle();
-  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
-  style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
-  style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
-  style[mxConstants.STYLE_FONTSIZE] = 11;
-  style[mxConstants.STYLE_STARTSIZE] = 22;
-  style[mxConstants.STYLE_HORIZONTAL] = false;
-  style[mxConstants.STYLE_FONTCOLOR] = 'black';
-  style[mxConstants.STYLE_STROKECOLOR] = 'black';
-  delete style[mxConstants.STYLE_FILLCOLOR];
+  style.shape = mxConstants.SHAPE_SWIMLANE;
+  style.verticalAlign = 'middle';
+  style.labelBackgroundColor = 'white';
+  style.fontSize = 11;
+  style.startSize = 22;
+  style.horizontal = false;
+  style.strokeColor = 'black';
+  style.strokeColor = 'black';
+  delete style.fillColor;
 
   style = mxCloneUtils.clone(style);
-  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
-  style[mxConstants.STYLE_FONTSIZE] = 10;
-  style[mxConstants.STYLE_ROUNDED] = true;
-  style[mxConstants.STYLE_HORIZONTAL] = true;
-  style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
-  delete style[mxConstants.STYLE_STARTSIZE];
-  style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'none';
+  style.shape = mxConstants.SHAPE_RECTANGLE;
+  style.fontSize = 10;
+  style.rounded = true;
+  style.horizontal = true;
+  style.verticalAlign = 'middle';
+  delete style.startSize;
+  style.labelBackgroundColor = 'none';
   graph.getStylesheet().putCellStyle('process', style);
 
   style = mxCloneUtils.clone(style);
-  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
-  style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
-  delete style[mxConstants.STYLE_ROUNDED];
+  style.shape = mxConstants.SHAPE_ELLIPSE;
+  style.perimiter = mxPerimeter.EllipsePerimeter;
+  delete style.rounded;
   graph.getStylesheet().putCellStyle('state', style);
 
   style = mxCloneUtils.clone(style);
-  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RHOMBUS;
-  style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter;
-  style[mxConstants.STYLE_VERTICAL_ALIGN] = 'top';
-  style[mxConstants.STYLE_SPACING_TOP] = 40;
-  style[mxConstants.STYLE_SPACING_RIGHT] = 64;
+  style.shape = mxConstants.SHAPE_RHOMBUS;
+  style.perimiter = mxPerimeter.RhombusPerimeter;
+  style.verticalAlign = 'top';
+  style.spacingTop = 40;
+  style.spacingRight = 64;
   graph.getStylesheet().putCellStyle('condition', style);
 
   style = mxCloneUtils.clone(style);
-  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_DOUBLE_ELLIPSE;
-  style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
-  style[mxConstants.STYLE_SPACING_TOP] = 28;
-  style[mxConstants.STYLE_FONTSIZE] = 14;
-  style[mxConstants.STYLE_FONTSTYLE] = 1;
-  delete style[mxConstants.STYLE_SPACING_RIGHT];
+  style.shape = mxConstants.SHAPE_DOUBLE_ELLIPSE;
+  style.perimiter = mxPerimeter.EllipsePerimeter;
+  style.spacingTop = 28;
+  style.fontSize = 14;
+  style.fontStyle = 1;
+  delete style.spacingRight;
   graph.getStylesheet().putCellStyle('end', style);
 
   style = graph.getStylesheet().getDefaultEdgeStyle();
-  style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
-  style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_BLOCK;
-  style[mxConstants.STYLE_ROUNDED] = true;
-  style[mxConstants.STYLE_FONTCOLOR] = 'black';
-  style[mxConstants.STYLE_STROKECOLOR] = 'black';
+  style.edge = mxEdgeStyle.ElbowConnector;
+  style.endArrow = mxConstants.ARROW_BLOCK;
+  style.rounded = true;
+  style.strokeColor = 'black';
+  style.strokeColor = 'black';
 
   style = mxCloneUtils.clone(style);
-  style[mxConstants.STYLE_DASHED] = true;
-  style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_OPEN;
-  style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_OVAL;
+  style.dashed = true;
+  style.endArrow = mxConstants.ARROW_OPEN;
+  style.startArrow = mxConstants.ARROW_OVAL;
   graph.getStylesheet().putCellStyle('crossover', style);
 
   // Installs double click on middle control point and
diff --git a/packages/html/stories/Tree.stories.js b/packages/html/stories/Tree.stories.js
index 31b5fe727..af97c8ff1 100644
--- a/packages/html/stories/Tree.stories.js
+++ b/packages/html/stories/Tree.stories.js
@@ -195,13 +195,13 @@ const Template = ({ label, ...args }) => {
 
   // Set some stylesheet options for the visual appearance
   let style = graph.getStylesheet().getDefaultVertexStyle();
-  style[mxConstants.STYLE_SHAPE] = 'treenode';
-  style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-  style[mxConstants.STYLE_SHADOW] = true;
+  style.shape = 'treenode';
+  style.gradientColor = 'white';
+  style.shadow = true;
 
   style = graph.getStylesheet().getDefaultEdgeStyle();
-  style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
-  style[mxConstants.STYLE_ROUNDED] = true;
+  style.edge = mxEdgeStyle.TopToBottom;
+  style.rounded = true;
 
   // Enables automatic sizing for vertices after editing and
   // panning by using the left mouse button.
diff --git a/packages/html/stories/UserObject.stories.js b/packages/html/stories/UserObject.stories.js
index f6b14a007..72174900a 100644
--- a/packages/html/stories/UserObject.stories.js
+++ b/packages/html/stories/UserObject.stories.js
@@ -175,23 +175,23 @@ const Template = ({ label, ...args }) => {
   // Changes the style for match the markup
   // Creates the default style for vertices
   let style = graph.getStylesheet().getDefaultVertexStyle();
-  style[mxConstants.STYLE_STROKECOLOR] = 'gray';
-  style[mxConstants.STYLE_ROUNDED] = true;
-  style[mxConstants.STYLE_SHADOW] = true;
-  style[mxConstants.STYLE_FILLCOLOR] = '#DFDFDF';
-  style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
-  style[mxConstants.STYLE_FONTCOLOR] = 'black';
-  style[mxConstants.STYLE_FONTSIZE] = '12';
-  style[mxConstants.STYLE_SPACING] = 4;
+  style.strokeColor = 'gray';
+  style.rounded = true;
+  style.shadow = true;
+  style.fillColor = '#DFDFDF';
+  style.gradientColor = 'white';
+  style.strokeColor = 'black';
+  style.fontSize = '12';
+  style.spacing = 4;
 
   // Creates the default style for edges
   style = graph.getStylesheet().getDefaultEdgeStyle();
-  style[mxConstants.STYLE_STROKECOLOR] = '#0C0C0C';
-  style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
-  style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
-  style[mxConstants.STYLE_ROUNDED] = true;
-  style[mxConstants.STYLE_FONTCOLOR] = 'black';
-  style[mxConstants.STYLE_FONTSIZE] = '10';
+  style.strokeColor = '#0C0C0C';
+  style.labelBackgroundColor = 'white';
+  style.edge = mxEdgeStyle.ElbowConnector;
+  style.rounded = true;
+  style.strokeColor = 'black';
+  style.fontSize = '10';
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).

From fe7ac7e84d63d5ba9d5e62bf757e2683716e43b3 Mon Sep 17 00:00:00 2001
From: mcyph <20507948+mcyph@users.noreply.github.com>
Date: Sun, 2 May 2021 23:56:17 +1000
Subject: [PATCH 2/4] bugfixes

---
 docs/stashed/Map.js                         |  4 ++--
 docs/stashed/Ports.js                       | 14 +++++++-------
 docs/stashed/Schema.js                      |  6 +++---
 docs/stashed/Scrollbars.js                  |  2 +-
 docs/stashed/grapheditor/www/js/EditorUi.js |  2 +-
 packages/html/stories/Boundary.stories.js   |  2 +-
 packages/html/stories/Images.stories.js     |  2 +-
 packages/html/stories/Merge.stories.js      |  6 +++---
 packages/html/stories/Monitor.stories.js    |  8 ++++----
 packages/html/stories/OrgChart.stories.js   |  2 +-
 packages/html/stories/Stylesheet.stories.js |  2 +-
 packages/html/stories/SwimLanes.stories.js  |  4 ++--
 packages/html/stories/UserObject.stories.js |  4 ++--
 13 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/docs/stashed/Map.js b/docs/stashed/Map.js
index 0ff4a3272..5369852eb 100644
--- a/docs/stashed/Map.js
+++ b/docs/stashed/Map.js
@@ -145,8 +145,8 @@ export default Map;
       style.perimiter = mxPerimeter.EllipsePerimeter;
       style.fillColor = '#8CCDF5';
       style.strokeColor = '#1B78C8';
-      style.strokeColor = '#000000';
-      style['opacity'] = '50';
+      style.fontColor = '#000000';
+      style.opacity = '50';
       style.fontSize = '16';
       graph.getStylesheet().putDefaultVertexStyle(style);
 
diff --git a/docs/stashed/Ports.js b/docs/stashed/Ports.js
index f46b1aa50..aabbac404 100644
--- a/docs/stashed/Ports.js
+++ b/docs/stashed/Ports.js
@@ -523,9 +523,9 @@ export default Ports;
       style.gradientColor = '#41B9F5';
       style.fillColor = '#8CCDF5';
       style.strokeColor = '#1B78C8';
-      style.strokeColor = '#000000';
+      style.fontColor = '#000000';
       style.rounded = true;
-      style['opacity'] = '80';
+      style.opacity = '80';
       style.fontSize = '12';
       style.fontStyle = 0;
       style.imageWidth = '48';
@@ -545,14 +545,14 @@ export default Ports;
       style.gradientColor = '#7d85df';
       style.strokeColor = '#5d65df';
       style.fillColor = '#adc5ff';
-      style.strokeColor = '#1d258f';
+      style.fontColor = '#1d258f';
       style.fontFamily = 'Verdana';
       style.fontSize = '12';
       style.fontStyle = '1';
       style.rounded = '1';
       style.imageWidth = '48';
       style.imageHeight = '48';
-      style['opacity'] = '80';
+      style.opacity = '80';
       graph.getStylesheet().putDefaultVertexStyle(style);*/
 
       style = {};
@@ -563,9 +563,9 @@ export default Ports;
       style.fillColor = '#FF9103';
       style.gradientColor = '#F8C48B';
       style.strokeColor = '#E86A00';
-      style.strokeColor = '#000000';
+      style.fontColor = '#000000';
       style.rounded = true;
-      style['opacity'] = '80';
+      style.opacity = '80';
       style.startSize = '30';
       style.fontSize = '16';
       style.fontStyle = 1;
@@ -573,7 +573,7 @@ export default Ports;
 
       style = {};
       style.shape = mxConstants.SHAPE_IMAGE;
-      style.strokeColor = '#774400';
+      style.fontColor = '#774400';
       style.perimiter = mxPerimeter.RectanglePerimeter;
       style.perimeterSpacing = '6';
       style.align = mxConstants.ALIGN_LEFT;
diff --git a/docs/stashed/Schema.js b/docs/stashed/Schema.js
index 41d73f9c3..ac37270fb 100644
--- a/docs/stashed/Schema.js
+++ b/docs/stashed/Schema.js
@@ -652,7 +652,7 @@ export default MYNAMEHERE;
       style.perimiter = mxPerimeter.RectanglePerimeter;
       style.align = mxConstants.ALIGN_LEFT;
       style.verticalAlign = mxConstants.ALIGN_MIDDLE;
-      style.strokeColor = '#000000';
+      style.fontColor = '#000000';
       style.fontSize = '11';
       style.fontStyle = 0;
       style.spacingLeft = '4';
@@ -669,7 +669,7 @@ export default MYNAMEHERE;
       style.fillColor = '#8CCDF5';
       style['swimlaneFillColor'] = '#ffffff';
       style.strokeColor = '#1B78C8';
-      style.strokeColor = '#000000';
+      style.fontColor = '#000000';
       style.strokeWidth = '2';
       style.startSize = '28';
       style.verticalAlign = 'middle';
@@ -677,7 +677,7 @@ export default MYNAMEHERE;
       style.fontStyle = 1;
       style.image = 'images/icons48/table.png';
       // Looks better without opacity if shadow is enabled
-      //style['opacity'] = '80';
+      //style.opacity = '80';
       style.shadow = 1;
       graph.getStylesheet().putCellStyle('table', style);
 
diff --git a/docs/stashed/Scrollbars.js b/docs/stashed/Scrollbars.js
index 6dad0a4a8..feb5f8dea 100644
--- a/docs/stashed/Scrollbars.js
+++ b/docs/stashed/Scrollbars.js
@@ -184,7 +184,7 @@ export default Scrollbars;
         graph.stylesheet.getDefaultEdgeStyle().edge =
           mxEdgeStyle.EntityRelation;
         graph.stylesheet.getDefaultEdgeStyle().strokeColor = 'black';
-        graph.stylesheet.getDefaultEdgeStyle().strokeColor = 'black';
+        graph.stylesheet.getDefaultEdgeStyle().fontColor = 'black';
 
         // Allows new connections to be made but do not allow existing
         // connections to be changed for the sake of simplicity of this
diff --git a/docs/stashed/grapheditor/www/js/EditorUi.js b/docs/stashed/grapheditor/www/js/EditorUi.js
index 6c810ebfc..6ae3bc501 100644
--- a/docs/stashed/grapheditor/www/js/EditorUi.js
+++ b/docs/stashed/grapheditor/www/js/EditorUi.js
@@ -521,7 +521,7 @@ EditorUi = function(editor, container, lightbox)
 		                 ['strokeColor', 'strokeWidth'],
 		                 ['fillColor', 'gradientColor'],
 		                 valueStyles,
-		                 ['opacity'],
+		                 .opacity,
 		                 ['align'],
 		                 ['html']];
 		
diff --git a/packages/html/stories/Boundary.stories.js b/packages/html/stories/Boundary.stories.js
index 398d25606..2cbbd9097 100644
--- a/packages/html/stories/Boundary.stories.js
+++ b/packages/html/stories/Boundary.stories.js
@@ -136,7 +136,7 @@ const Template = ({ label, ...args }) => {
   style.fillColor = '#ffffff';
   style.strokeColor = '#000000';
   style.strokeWidth = '2';
-  style.strokeColor = '#000000';
+  style.fontColor = '#000000';
   style.fontSize = '12';
   style.fontStyle = 1;
   graph.getStylesheet().putDefaultVertexStyle(style);
diff --git a/packages/html/stories/Images.stories.js b/packages/html/stories/Images.stories.js
index 9bf71e40b..f591adf72 100644
--- a/packages/html/stories/Images.stories.js
+++ b/packages/html/stories/Images.stories.js
@@ -102,7 +102,7 @@ const Template = ({ label, ...args }) => {
     style.shape = mxConstants.SHAPE_IMAGE;
     style.perimiter = mxPerimeter.RectanglePerimeter;
     style.image = 'images/icons48/keys.png';
-    style.strokeColor = '#FFFFFF';
+    style.fontColor = '#FFFFFF';
     graph.getStylesheet().putCellStyle('image', style);
 
     style = mxCloneUtils.clone(style);
diff --git a/packages/html/stories/Merge.stories.js b/packages/html/stories/Merge.stories.js
index bf5b474a4..fcd176d04 100644
--- a/packages/html/stories/Merge.stories.js
+++ b/packages/html/stories/Merge.stories.js
@@ -41,7 +41,7 @@ const Template = ({ label, ...args }) => {
   let style = graph.stylesheet.getDefaultVertexStyle();
   style.shape = mxConstants.SHAPE_ELLIPSE;
   style.perimiter = mxPerimeter.EllipsePerimeter;
-  style.strokeColor = 'white';
+  style.fontColor = 'white';
   style.gradientColor = 'white';
   style.fontStyle = mxConstants.FONT_BOLD;
   style.fontSize = 14;
@@ -49,9 +49,9 @@ const Template = ({ label, ...args }) => {
 
   // Makes all edge labels gray with a white background
   style = graph.stylesheet.getDefaultEdgeStyle();
-  style.strokeColor = 'gray';
+  style.fontColor = 'gray';
   style.fontStyle = mxConstants.FONT_BOLD;
-  style.strokeColor = 'black';
+  style.fontColor = 'black';
   style.strokeWidth = 2;
 
   // Enables rubberband selection
diff --git a/packages/html/stories/Monitor.stories.js b/packages/html/stories/Monitor.stories.js
index 6eb71d59d..816e1c0c9 100644
--- a/packages/html/stories/Monitor.stories.js
+++ b/packages/html/stories/Monitor.stories.js
@@ -199,7 +199,7 @@ const Template = ({ label, ...args }) => {
     // Creates the stylesheet for the process display
     let style = graph.getStylesheet().getDefaultVertexStyle();
     style.fontSize = 11;
-    style.strokeColor = 'black';
+    style.fontColor = 'black';
     style.strokeColor = '#808080';
     style.fillColor = 'white';
     style.gradientColor = 'white';
@@ -218,7 +218,7 @@ const Template = ({ label, ...args }) => {
     style.shape = mxConstants.SHAPE_SWIMLANE;
     style.perimiter = mxPerimeter.RectanglePerimeter;
     style.strokeColor = '#a0a0a0';
-    style.strokeColor = '#606060';
+    style.fontColor = '#606060';
     style.fillColor = '#E0E0DF';
     style.gradientColor = 'white';
     style.startSize = 30;
@@ -235,7 +235,7 @@ const Template = ({ label, ...args }) => {
     style.shape = mxConstants.SHAPE_RHOMBUS;
     style.perimiter = mxPerimeter.RhombusPerimeter;
     style.strokeColor = '#91BCC0';
-    style.strokeColor = 'gray';
+    style.fontColor = 'gray';
     style.fillColor = '#91BCC0';
     style.gradientColor = 'white';
     style.align = mxConstants.ALIGN_CENTER;
@@ -246,7 +246,7 @@ const Template = ({ label, ...args }) => {
     style = [];
     style.shape = mxConstants.SHAPE_ELLIPSE;
     style.perimiter = mxPerimeter.EllipsePerimeter;
-    style.strokeColor = 'gray';
+    style.fontColor = 'gray';
     style.fillColor = '#A0C88F';
     style.gradientColor = 'white';
     style.strokeColor = '#A0C88F';
diff --git a/packages/html/stories/OrgChart.stories.js b/packages/html/stories/OrgChart.stories.js
index f70c02d1d..2083626b4 100644
--- a/packages/html/stories/OrgChart.stories.js
+++ b/packages/html/stories/OrgChart.stories.js
@@ -95,7 +95,7 @@ const Template = ({ label, ...args }) => {
   style.strokeColor = '#5d65df';
   style.fillColor = '#adc5ff';
 
-  style.strokeColor = '#1d258f';
+  style.fontColor = '#1d258f';
   style.fontFamily = 'Verdana';
   style.fontSize = '12';
   style.fontStyle = '1';
diff --git a/packages/html/stories/Stylesheet.stories.js b/packages/html/stories/Stylesheet.stories.js
index c126688d6..1dd532710 100644
--- a/packages/html/stories/Stylesheet.stories.js
+++ b/packages/html/stories/Stylesheet.stories.js
@@ -65,7 +65,7 @@ const Template = ({ label, ...args }) => {
   style.rounded = true;
   style.fillColor = '#EEEEEE';
   style.gradientColor = 'white';
-  style.strokeColor = '#774400';
+  style.fontColor = '#774400';
   style.align = mxConstants.ALIGN_CENTER;
   style.verticalAlign = mxConstants.ALIGN_MIDDLE;
   style.fontSize = '12';
diff --git a/packages/html/stories/SwimLanes.stories.js b/packages/html/stories/SwimLanes.stories.js
index eaac4efba..4764b17e0 100644
--- a/packages/html/stories/SwimLanes.stories.js
+++ b/packages/html/stories/SwimLanes.stories.js
@@ -67,7 +67,7 @@ const Template = ({ label, ...args }) => {
   style.fontSize = 11;
   style.startSize = 22;
   style.horizontal = false;
-  style.strokeColor = 'black';
+  style.fontColor = 'black';
   style.strokeColor = 'black';
   delete style.fillColor;
 
@@ -108,7 +108,7 @@ const Template = ({ label, ...args }) => {
   style.edge = mxEdgeStyle.ElbowConnector;
   style.endArrow = mxConstants.ARROW_BLOCK;
   style.rounded = true;
-  style.strokeColor = 'black';
+  style.fontColor = 'black';
   style.strokeColor = 'black';
 
   style = mxCloneUtils.clone(style);
diff --git a/packages/html/stories/UserObject.stories.js b/packages/html/stories/UserObject.stories.js
index 72174900a..e33f8f528 100644
--- a/packages/html/stories/UserObject.stories.js
+++ b/packages/html/stories/UserObject.stories.js
@@ -180,7 +180,7 @@ const Template = ({ label, ...args }) => {
   style.shadow = true;
   style.fillColor = '#DFDFDF';
   style.gradientColor = 'white';
-  style.strokeColor = 'black';
+  style.fontColor = 'black';
   style.fontSize = '12';
   style.spacing = 4;
 
@@ -190,7 +190,7 @@ const Template = ({ label, ...args }) => {
   style.labelBackgroundColor = 'white';
   style.edge = mxEdgeStyle.ElbowConnector;
   style.rounded = true;
-  style.strokeColor = 'black';
+  style.fontColor = 'black';
   style.fontSize = '10';
 
   // Gets the default parent for inserting new cells. This

From 7cac8a2a86ac9599a3ff1e51f878bca15162dbf7 Mon Sep 17 00:00:00 2001
From: mcyph <20507948+mcyph@users.noreply.github.com>
Date: Sun, 2 May 2021 23:59:43 +1000
Subject: [PATCH 3/4] bugfixes

---
 docs/js-api/files/view/mxGraph-js.html        |   6 +-
 docs/stashed/Schema.js                        |   2 +-
 docs/stashed/Wires.js                         |  60 +++++-----
 docs/stashed/grapheditor/www/js/Actions.js    |   2 +-
 docs/stashed/grapheditor/www/js/Format.js     |   2 +-
 docs/stashed/grapheditor/www/js/Graph.js      |  70 ++++++------
 docs/stashed/grapheditor/www/js/Shapes.js     | 106 +++++++++---------
 docs/stashed/grapheditor/www/js/Sidebar.js    |   2 +-
 .../core/src/handler/mxElbowEdgeHandler.js    |   2 +-
 .../src/util/datatypes/style/mxEdgeStyle.js   |   2 +-
 packages/core/src/view/cell/mxCellRenderer.ts |   4 +-
 packages/core/src/view/graph/mxGraph.ts       |   6 +-
 packages/core/typed_mxgraph_defs.json         |   6 +-
 packages/html/stories/FixedPoints.stories.js  |   4 +-
 14 files changed, 137 insertions(+), 137 deletions(-)

diff --git a/docs/js-api/files/view/mxGraph-js.html b/docs/js-api/files/view/mxGraph-js.html
index 072a098c7..871c6fc15 100644
--- a/docs/js-api/files/view/mxGraph-js.html
+++ b/docs/js-api/files/view/mxGraph-js.html
@@ -655,9 +655,9 @@ graph.getPreferredSizeForCell = function(cell)
   let result = graphGetPreferredSizeForCell.apply(this, arguments);
   let style = this.getCellStyle(cell);
 
-  if (style['minWidth'] &gt; 0)
+  if (style.minWidth &gt; 0)
   {
-    result.width = Math.max(style['minWidth'], result.width);
+    result.width = Math.max(style.minWidth, result.width);
   }
 
   return result;
@@ -1032,7 +1032,7 @@ graph.isWrapping = function(state)
 {
   let style = this.getCurrentCellStyle(cell);
 
-  return this.isCellsSelectable() &amp;&amp; !this.isCellLocked(cell) &amp;&amp; style['selectable'] != 0;
+  return this.isCellsSelectable() &amp;&amp; !this.isCellLocked(cell) &amp;&amp; style.selectable != 0;
 };</pre></blockquote><p>You can then use the new style as shown in this example.</p><blockquote><pre class="prettyprint">graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'selectable=0');</pre></blockquote><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>cell</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link1306 onMouseOver="ShowTip(event, 'tt246', 'link1306')" onMouseOut="HideTip('tt246')">mxCell</a> whose selectable state should be returned.</td></tr></table></div></div></div>
 
 <div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxGraph.isCellsSelectable"></a>isCellsSelectable</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxGraph.prototype.isCellsSelectable = function()</td></tr></table></blockquote><p>Returns <a href="#mxGraph.cellsSelectable" class=LVariable id=link1307 onMouseOver="ShowTip(event, 'tt120', 'link1307')" onMouseOut="HideTip('tt120')">cellsSelectable</a>.</p></div></div></div>
diff --git a/docs/stashed/Schema.js b/docs/stashed/Schema.js
index ac37270fb..0c1a11165 100644
--- a/docs/stashed/Schema.js
+++ b/docs/stashed/Schema.js
@@ -667,7 +667,7 @@ export default MYNAMEHERE;
       style.verticalAlign = mxConstants.ALIGN_TOP;
       style.gradientColor = '#41B9F5';
       style.fillColor = '#8CCDF5';
-      style['swimlaneFillColor'] = '#ffffff';
+      style.swimlaneFillColor = '#ffffff';
       style.strokeColor = '#1B78C8';
       style.fontColor = '#000000';
       style.strokeWidth = '2';
diff --git a/docs/stashed/Wires.js b/docs/stashed/Wires.js
index 9690e5e4e..4efa4d6d3 100644
--- a/docs/stashed/Wires.js
+++ b/docs/stashed/Wires.js
@@ -228,32 +228,32 @@ export default MYNAMEHERE;
       let fillColor = (invert) ? 'none' : '#FFFFFF';
 
       let style = graph.getStylesheet().getDefaultEdgeStyle();
-      delete style['endArrow'];
-      style['strokeColor'] = strokeColor;
-      style['labelBackgroundColor'] = labelBackground;
-      style['edgeStyle'] = 'wireEdgeStyle';
-      style['fontColor'] = fontColor;
-      style['fontSize'] = '9';
-      style['movable'] = '0';
-      style['strokeWidth'] = strokeWidth;
-      //style['rounded'] = '1';
+      delete style.endArrow;
+      style.strokeColor = strokeColor;
+      style.labelBackgroundColor = labelBackground;
+      style.edgeStyle = 'wireEdgeStyle';
+      style.fontColor = fontColor;
+      style.fontSize = '9';
+      style.movable = '0';
+      style.strokeWidth = strokeWidth;
+      //style.rounded = '1';
 
       // Sets join node size
-      style['startSize'] = joinNodeSize;
-      style['endSize'] = joinNodeSize;
+      style.startSize = joinNodeSize;
+      style.endSize = joinNodeSize;
 
       style = graph.getStylesheet().getDefaultVertexStyle();
-      style['gradientDirection'] = 'south';
-      //style['gradientColor'] = '#909090';
-      style['strokeColor'] = strokeColor;
-      //style['fillColor'] = '#e0e0e0';
-      style['fillColor'] = 'none';
-      style['fontColor'] = fontColor;
-      style['fontStyle'] = '1';
-      style['fontSize'] = '12';
-      style['resizable'] = '0';
-      style['rounded'] = '1';
-      style['strokeWidth'] = strokeWidth;
+      style.gradientDirection = 'south';
+      //style.gradientColor = '#909090';
+      style.strokeColor = strokeColor;
+      //style.fillColor = '#e0e0e0';
+      style.fillColor = 'none';
+      style.fontColor = fontColor;
+      style.fontStyle = '1';
+      style.fontSize = '12';
+      style.resizable = '0';
+      style.rounded = '1';
+      style.strokeWidth = strokeWidth;
 
       let parent = graph.getDefaultParent();
 
@@ -724,8 +724,8 @@ export default MYNAMEHERE;
             this.state.style = this.lastStyle;
 
             // Workaround for shape using current stroke width if no strokewidth defined
-            this.state.style['strokeWidth'] = this.state.style['strokeWidth'] || '1';
-            this.state.style['strokeColor'] = this.state.style['strokeColor'] || 'none';
+            this.state.style.strokeWidth = this.state.style.strokeWidth || '1';
+            this.state.style.strokeColor = this.state.style.strokeColor || 'none';
 
             if (this.state.shape != null)
             {
@@ -738,8 +738,8 @@ export default MYNAMEHERE;
           {
             this.lastStyle = state.style;
             state.style = mxUtils.clone(state.style);
-            state.style['strokeColor'] = '#00ff00';
-            state.style['strokeWidth'] = '3';
+            state.style.strokeColor = '#00ff00';
+            state.style.strokeWidth = '3';
 
             if (state.shape != null)
             {
@@ -781,12 +781,12 @@ export default MYNAMEHERE;
 
         if (this.model.isEdge(this.model.getTerminal(cell, true)))
         {
-          style['startArrow'] = 'oval';
+          style.startArrow = 'oval';
         }
 
         if (this.model.isEdge(this.model.getTerminal(cell, false)))
         {
-          style['endArrow'] = 'oval';
+          style.endArrow = 'oval';
         }
       }
 
@@ -838,11 +838,11 @@ export default MYNAMEHERE;
     // Gets the initial connection from the source terminal or edge
     if (source != null && state.view.graph.model.isEdge(source.cell))
     {
-      horizontal = state.style['sourceConstraint'] == 'horizontal';
+      horizontal = state.style.sourceConstraint == 'horizontal';
     }
     else if (source != null)
     {
-      horizontal = source.style['portConstraint'] != 'vertical';
+      horizontal = source.style.portConstraint != 'vertical';
 
       // Checks the direction of the shape and rotates
       let direction = source.style.direction;
diff --git a/docs/stashed/grapheditor/www/js/Actions.js b/docs/stashed/grapheditor/www/js/Actions.js
index 71ada98b1..f3b0cc18a 100644
--- a/docs/stashed/grapheditor/www/js/Actions.js
+++ b/docs/stashed/grapheditor/www/js/Actions.js
@@ -628,7 +628,7 @@ Actions.prototype.init = function()
     	if (refState != null)
     	{
 	    	graph.stopEditing();
-    		let value = (refState.style['html'] == '1') ? null : '1';
+    		let value = (refState.style.html == '1') ? null : '1';
 			
 			graph.getModel().beginUpdate();
 			try
diff --git a/docs/stashed/grapheditor/www/js/Format.js b/docs/stashed/grapheditor/www/js/Format.js
index 59328c0aa..aaba588f0 100644
--- a/docs/stashed/grapheditor/www/js/Format.js
+++ b/docs/stashed/grapheditor/www/js/Format.js
@@ -5608,7 +5608,7 @@ DiagramStylePanel.prototype.addView = function(div)
 				let style = graph.getCellStyle(cells[i]);
 				
 				// Handles special label background color
-				if (style['labelBackgroundColor'] != null)
+				if (style.labelBackgroundColor != null)
 				{
 					graph.updateCellStyles('labelBackgroundColor', (graphStyle != null) ?
 						graphStyle.background : null, [cells[i]]);
diff --git a/docs/stashed/grapheditor/www/js/Graph.js b/docs/stashed/grapheditor/www/js/Graph.js
index 2bef22461..9c48b087a 100644
--- a/docs/stashed/grapheditor/www/js/Graph.js
+++ b/docs/stashed/grapheditor/www/js/Graph.js
@@ -204,7 +204,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone)
 	{
 		let style = this.getCurrentCellStyle(cell);
 		
-		return (style != null) ? (style['html'] == '1' || style.whiteSpace == 'wrap') : false;
+		return (style != null) ? (style.html == '1' || style.whiteSpace == 'wrap') : false;
 	};
 	
 	// Implements a listener for hover and click handling on edges
@@ -625,7 +625,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone)
 		
 		if (state.view.graph.isHtmlLabel(state.cell))
 		{
-			if (state.style['html'] != 1)
+			if (state.style.html != 1)
 			{
 				result = mxUtils.htmlEntities(result, false);
 			}
@@ -2358,20 +2358,20 @@ Graph.prototype.initLayoutManager = function()
 		{
 			let style = this.graph.getCellStyle(cell);
 	
-			if (style['childLayout'] == 'stackLayout')
+			if (style.childLayout == 'stackLayout')
 			{
 				let stackLayout = new mxStackLayout(this.graph, true);
 				stackLayout.resizeParentMax = mxUtils.getValue(style, 'resizeParentMax', '1') == '1';
 				stackLayout.horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1';
 				stackLayout.resizeParent = mxUtils.getValue(style, 'resizeParent', '1') == '1';
 				stackLayout.resizeLast = mxUtils.getValue(style, 'resizeLast', '0') == '1';
-				stackLayout.spacing = style['stackSpacing'] || stackLayout.spacing;
-				stackLayout.border = style['stackBorder'] || stackLayout.border;
-				stackLayout.marginLeft = style['marginLeft'] || 0;
-				stackLayout.marginRight = style['marginRight'] || 0;
-				stackLayout.marginTop = style['marginTop'] || 0;
-				stackLayout.marginBottom = style['marginBottom'] || 0;
-				stackLayout.allowGaps = style['allowGaps'] || 0;
+				stackLayout.spacing = style.stackSpacing || stackLayout.spacing;
+				stackLayout.border = style.stackBorder || stackLayout.border;
+				stackLayout.marginLeft = style.marginLeft || 0;
+				stackLayout.marginRight = style.marginRight || 0;
+				stackLayout.marginTop = style.marginTop || 0;
+				stackLayout.marginBottom = style.marginBottom || 0;
+				stackLayout.allowGaps = style.allowGaps || 0;
 				stackLayout.fill = true;
 				
 				if (stackLayout.allowGaps)
@@ -2381,7 +2381,7 @@ Graph.prototype.initLayoutManager = function()
 				
 				return stackLayout;
 			}
-			else if (style['childLayout'] == 'treeLayout')
+			else if (style.childLayout == 'treeLayout')
 			{
 				let treeLayout = new mxCompactTreeLayout(this.graph);
 				treeLayout.horizontal = mxUtils.getValue(style, 'horizontalTree', '1') == '1';
@@ -2394,7 +2394,7 @@ Graph.prototype.initLayoutManager = function()
 				
 				return treeLayout;
 			}
-			else if (style['childLayout'] == 'flowLayout')
+			else if (style.childLayout == 'flowLayout')
 			{
 				let flowLayout = new mxHierarchicalLayout(this.graph, mxUtils.getValue(style,
 					'flowOrientation', mxConstants.DIRECTION_EAST));
@@ -2414,15 +2414,15 @@ Graph.prototype.initLayoutManager = function()
 				
 				return flowLayout;
 			}
-			else if (style['childLayout'] == 'circleLayout')
+			else if (style.childLayout == 'circleLayout')
 			{
 				return new mxCircleLayout(this.graph);
 			}
-			else if (style['childLayout'] == 'organicLayout')
+			else if (style.childLayout == 'organicLayout')
 			{
 				return new mxFastOrganicLayout(this.graph);
 			}
-			else if (style['childLayout'] == 'tableLayout')
+			else if (style.childLayout == 'tableLayout')
 			{
 				return new TableLayout(this.graph);
 			}
@@ -3602,11 +3602,11 @@ Graph.prototype.isContainer = function(cell)
 	
 	if (this.isSwimlane(cell))
 	{
-		return style['container'] != '0';
+		return style.container != '0';
 	}
 	else
 	{
-		return style['container'] == '1';
+		return style.container == '1';
 	}
 };
 
@@ -3617,7 +3617,7 @@ Graph.prototype.isCellConnectable = function(cell)
 {
 	let style = this.getCurrentCellStyle(cell);
 	
-	return (style['connectable'] != null) ? style['connectable'] != '0' :
+	return (style.connectable != null) ? style.connectable != '0' :
 		mxGraph.prototype.isCellConnectable.apply(this, arguments);
 };
 
@@ -3628,7 +3628,7 @@ Graph.prototype.isLabelMovable = function(cell)
 {
 	let style = this.getCurrentCellStyle(cell);
 	
-	return (style['movableLabel'] != null) ? style['movableLabel'] != '0' :
+	return (style.movableLabel != null) ? style.movableLabel != '0' :
 		mxGraph.prototype.isLabelMovable.apply(this, arguments);
 };
 
@@ -3711,10 +3711,10 @@ Graph.prototype.isCellFoldable = function(cell)
 {
 	let style = this.getCurrentCellStyle(cell);
 	
-	return this.foldingEnabled && (style['treeFolding'] == '1' ||
+	return this.foldingEnabled && (style.treeFolding == '1' ||
 		(!this.isCellLocked(cell) &&
-		((this.isContainer(cell) && style['collapsible'] != '0') ||
-		(!this.isContainer(cell) && style['collapsible'] == '1'))));
+		((this.isContainer(cell) && style.collapsible != '0') ||
+		(!this.isContainer(cell) && style.collapsible == '1'))));
 };
 
 /**
@@ -4396,7 +4396,7 @@ HoverIcons.prototype.drag = function(evt, x, y)
 		{
 			let direction = this.getDirection();
 			es.cell.style = mxUtils.setStyle(es.cell.style, 'sourcePortConstraint', direction);
-			es.style['sourcePortConstraint'] = direction;
+			es.style.sourcePortConstraint = direction;
 		}
 	}
 };
@@ -4809,7 +4809,7 @@ HoverIcons.prototype.update = function(state, x, y)
  */
 HoverIcons.prototype.setCurrentState = function(state)
 {
-	if (state.style['portConstraint'] != 'eastwest')
+	if (state.style.portConstraint != 'eastwest')
 	{
 		this.graph.container.appendChild(this.arrowUp);
 		this.graph.container.appendChild(this.arrowDown);
@@ -4962,7 +4962,7 @@ Graph.prototype.isTable = function(cell)
 {
 	let style = this.getCellStyle(cell);
 	
-	return style != null && style['childLayout'] == 'tableLayout';
+	return style != null && style.childLayout == 'tableLayout';
 };
 
 /**
@@ -5494,7 +5494,7 @@ TableLayout.prototype.execute = function(parent)
 						var state2 = this.validEdges[e];
 						var pts2 = state2.absolutePoints;
 						
-						if (pts2 != null && mxUtils.intersects(state, state2) && state2.style['noJump'] != '1')
+						if (pts2 != null && mxUtils.intersects(state, state2) && state2.style.noJump != '1')
 						{
 							// Compares each segment of the edge with the current segment
 							for (let j = 0; j < pts2.length - 1; j++)
@@ -5713,8 +5713,8 @@ TableLayout.prototype.execute = function(parent)
 	mxGraphView.prototype.updateFloatingTerminalPoint = function(edge, start, end, source)
 	{
 		if (start != null && edge != null &&
-			(start.style['snapToPoint'] == '1' ||
-			edge.style['snapToPoint'] == '1'))
+			(start.style.snapToPoint == '1' ||
+			edge.style.snapToPoint == '1'))
 		{
 		    start = this.getTerminalPort(edge, start, source);
 		    let next = this.getNextPoint(edge, end, source);
@@ -6568,9 +6568,9 @@ if (typeof mxVertexHandler != 'undefined')
 			{
 				let style = this.getCurrentCellStyle(parent);
 				
-				if (style['expand'] != null)
+				if (style.expand != null)
 				{
-					return style['expand'] != '0';
+					return style.expand != '0';
 				}
 			}
 			
@@ -9428,7 +9428,7 @@ if (typeof mxVertexHandler != 'undefined')
 		{
 			let state = this.graph.view.getState(this.editingCell);
 			
-			return state != null && state.style['html'] == 1;
+			return state != null && state.style.html == 1;
 		};
 
 		/**
@@ -9597,7 +9597,7 @@ if (typeof mxVertexHandler != 'undefined')
 			// dashed borders for divs and table cells
 			let state = this.graph.view.getState(cell);
 	
-			if (state != null && state.style['html'] == 1)
+			if (state != null && state.style.html == 1)
 			{
 				this.textarea.className = 'mxCellEditor geContentEditable';
 			}
@@ -10157,7 +10157,7 @@ if (typeof mxVertexHandler != 'undefined')
 			stackLayoutResizeCell.apply(this, arguments);
 			let style = this.graph.getCellStyle(cell);
 				
-			if (style['childLayout'] == null)
+			if (style.childLayout == null)
 			{
 				let parent = cell.getParent();
 				let geo = (parent != null) ? parent.getGeometry() : null;
@@ -10166,7 +10166,7 @@ if (typeof mxVertexHandler != 'undefined')
 				{
 					style = this.graph.getCellStyle(parent);
 					
-					if (style['childLayout'] == 'stackLayout')
+					if (style.childLayout == 'stackLayout')
 					{
 						let border = parseFloat(mxUtils.getValue(style, 'stackBorder', mxStackLayout.prototype.border));
 						let horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1';
@@ -10675,7 +10675,7 @@ if (typeof mxVertexHandler != 'undefined')
 		{
 			let result = new mxPoint(0, 0);
 			let tol = this.tolerance;
-			let name = this.state.style['shape'];
+			let name = this.state.style.shape;
 
 			if (mxCellRenderer.defaultShapes[name] == null &&
 				mxStencilRegistry.getStencil(name) == null)
diff --git a/docs/stashed/grapheditor/www/js/Shapes.js b/docs/stashed/grapheditor/www/js/Shapes.js
index f49f92981..ee1515731 100644
--- a/docs/stashed/grapheditor/www/js/Shapes.js
+++ b/docs/stashed/grapheditor/www/js/Shapes.js
@@ -1656,7 +1656,7 @@
 	let mxRhombusPaintVertexShape = mxRhombus.prototype.paintVertexShape;
 	mxRhombus.prototype.getLabelBounds = function(rect)
 	{
-		if (this.style['double'] == 1)
+		if (this.style.double == 1)
 		{
 			let margin = (Math.max(2, this.strokewidth + 1) * 2 + parseFloat(
 				this.style[mxConstants.'margin'] || 0)) * this.scale;
@@ -1671,7 +1671,7 @@
 	{
 		mxRhombusPaintVertexShape.apply(this, arguments);
 
-		if (!this.outline && this.style['double'] == 1)
+		if (!this.outline && this.style.double == 1)
 		{
 			let margin = Math.max(2, this.strokewidth + 1) * 2 +
 				parseFloat(this.style[mxConstants.'margin'] || 0);
@@ -1703,7 +1703,7 @@
 	};
 	ExtendedShape.prototype.getLabelBounds = function(rect)
 	{
-		if (this.style['double'] == 1)
+		if (this.style.double == 1)
 		{
 			let margin = (Math.max(2, this.strokewidth + 1) + parseFloat(
 				this.style[mxConstants.'margin'] || 0)) * this.scale;
@@ -1719,7 +1719,7 @@
 	{
 		if (this.style != null)
 		{
-			if (!this.outline && this.style['double'] == 1)
+			if (!this.outline && this.style.double == 1)
 			{
 				let margin = Math.max(2, this.strokewidth + 1) + parseFloat(this.style[mxConstants.'margin'] || 0);
 				x += margin;
@@ -2144,9 +2144,9 @@
 	{
 		let sw = (parseFloat(vertex.style.strokeWidth || 1) * vertex.view.scale / 2) - 1;
 		
-		if (vertex.style['backboneSize'] != null)
+		if (vertex.style.backboneSize != null)
 		{
-			sw += (parseFloat(vertex.style['backboneSize']) * vertex.view.scale / 2) - 1;
+			sw += (parseFloat(vertex.style.backboneSize) * vertex.view.scale / 2) - 1;
 		}
 		
 		if (vertex.style.direction == 'south' ||
@@ -3782,14 +3782,14 @@
 			{
 				if (mxUtils.getValue(state.style, 'absoluteArcSize', 0) == '1')
 				{
-					this.state.style['arcSize'] = Math.round(Math.max(0, Math.min(bounds.width,
+					this.state.style.arcSize = Math.round(Math.max(0, Math.min(bounds.width,
 						(bounds.x + bounds.width - pt.x) * 2)));
 				}
 				else
 				{
 					let f = Math.min(50, Math.max(0, (bounds.width - pt.x + bounds.x) * 100 /
 						Math.min(bounds.width, bounds.height)));
-					this.state.style['arcSize'] = Math.round(f);
+					this.state.style.arcSize = Math.round(f);
 				}
 			});
 		}
@@ -3826,7 +3826,7 @@
 					let fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null;
 					let size = (fixed) ? (pt.x - bounds.x) : Math.max(0, Math.min(max, (pt.x - bounds.x) / bounds.width * 0.75));
 					
-					this.state.style['size'] = size;
+					this.state.style.size = size;
 				}, false, true)];
 				
 				if (mxUtils.getValue(state.style, 'rounded', false))
@@ -3855,7 +3855,7 @@
 					let fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null;
 					let size = (fixed) ? (pt.x - bounds.x) : Math.max(0, Math.min(max, (pt.x - bounds.x) / bounds.width));
 					
-					this.state.style['size'] = size;
+					this.state.style.size = size;
 				}, false, redrawEdges)];
 				
 				if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false))
@@ -3879,7 +3879,7 @@
 					return new mxPoint(bounds.x + size, bounds.y + size);
 				}, function(bounds, pt)
 				{
-					this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, pt.x - bounds.x),
+					this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, pt.x - bounds.x),
 							Math.min(bounds.height, pt.y - bounds.y))) / factor);
 				}, false)];
 				
@@ -3903,7 +3903,7 @@
 							return new mxPoint(bounds.x, bounds.y + size);
 						}, function(bounds, pt)
 						{
-							this.state.style['size'] = Math.max(0, pt.y - bounds.y);
+							this.state.style.size = Math.max(0, pt.y - bounds.y);
 						}, true)];
 			}
 		};
@@ -3920,8 +3920,8 @@
 					return new mxPoint(bounds.x + (1 - as) * bounds.width, bounds.y + (1 - aw) * bounds.height / 2);
 				}, function(bounds, pt)
 				{
-					this.state.style['arrowWidth'] = Math.max(0, Math.min(1, Math.abs(bounds.y + bounds.height / 2 - pt.y) / bounds.height * 2));
-					this.state.style['arrowSize'] = Math.max(0, Math.min(maxSize, (bounds.x + bounds.width - pt.x) / (bounds.width)));
+					this.state.style.arrowWidth = Math.max(0, Math.min(1, Math.abs(bounds.y + bounds.height / 2 - pt.y) / bounds.height * 2));
+					this.state.style.arrowSize = Math.max(0, Math.min(maxSize, (bounds.x + bounds.width - pt.x) / (bounds.width)));
 				})];
 			};
 		};
@@ -3977,7 +3977,7 @@
 			}, function(dist, nx, ny, p0, p1, pt)
 			{
 				let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));					
-				state.style['width'] = Math.round(w * 2) / state.view.scale - spacing;
+				state.style.width = Math.round(w * 2) / state.view.scale - spacing;
 			});
 		};
 		
@@ -4014,7 +4014,7 @@
 						let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
 						
 						state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
-						state.style['width'] = Math.round(w * 2) / state.view.scale;
+						state.style.width = Math.round(w * 2) / state.view.scale;
 						
 						// Applies to opposite side
 						if (mxEvent.isControlDown(me.getEvent()))
@@ -4045,13 +4045,13 @@
 						let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
 						
 						state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
-						state.style['startWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
+						state.style.startWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
 						
 						// Applies to opposite side
 						if (mxEvent.isControlDown(me.getEvent()))
 						{
 							state.style.endSize = state.style.startSize;
-							state.style['endWidth'] = state.style['startWidth'];
+							state.style.endWidth = state.style.startWidth;
 						}
 						
 						// Snaps to endWidth
@@ -4062,9 +4062,9 @@
 								state.style.startSize = state.style.endSize;
 							}
 							
-							if (Math.abs(parseFloat(state.style['startWidth']) - parseFloat(state.style['endWidth'])) < tol)
+							if (Math.abs(parseFloat(state.style.startWidth) - parseFloat(state.style.endWidth)) < tol)
 							{
-								state.style['startWidth'] = state.style['endWidth'];
+								state.style.startWidth = state.style.endWidth;
 							}
 						}
 					}));
@@ -4085,7 +4085,7 @@
 						let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
 						
 						state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
-						state.style['width'] = Math.round(w * 2) / state.view.scale;
+						state.style.width = Math.round(w * 2) / state.view.scale;
 						
 						// Applies to opposite side
 						if (mxEvent.isControlDown(me.getEvent()))
@@ -4116,13 +4116,13 @@
 						let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
 						
 						state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
-						state.style['endWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
+						state.style.endWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
 						
 						// Applies to opposite side
 						if (mxEvent.isControlDown(me.getEvent()))
 						{
 							state.style.startSize = state.style.endSize;
-							state.style['startWidth'] = state.style['endWidth'];
+							state.style.startWidth = state.style.endWidth;
 						}
 					
 						// Snaps to start geometry
@@ -4133,9 +4133,9 @@
 								state.style.endSize = state.style.startSize;
 							}
 							
-							if (Math.abs(parseFloat(state.style['endWidth']) - parseFloat(state.style['startWidth'])) < tol)
+							if (Math.abs(parseFloat(state.style.endWidth) - parseFloat(state.style.startWidth)) < tol)
 							{
-								state.style['endWidth'] = state.style['startWidth'];
+								state.style.endWidth = state.style.startWidth;
 							}
 						}
 					}));
@@ -4218,7 +4218,7 @@
 					return new mxPoint(bounds.getCenterX(), bounds.y + size);
 				}, function(bounds, pt)
 				{	
-					this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
+					this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
 				}, false)];
 			},
 			'umlFrame': function(state)
@@ -4231,8 +4231,8 @@
 					return new mxPoint(bounds.x + w0, bounds.y + h0);
 				}, function(bounds, pt)
 				{
-					this.state.style['width'] = Math.round(Math.max(UmlFrame.prototype.corner, Math.min(bounds.width, pt.x - bounds.x)));
-					this.state.style['height'] = Math.round(Math.max(UmlFrame.prototype.corner * 1.5, Math.min(bounds.height, pt.y - bounds.y)));
+					this.state.style.width = Math.round(Math.max(UmlFrame.prototype.corner, Math.min(bounds.width, pt.x - bounds.x)));
+					this.state.style.height = Math.round(Math.max(UmlFrame.prototype.corner * 1.5, Math.min(bounds.height, pt.y - bounds.y)));
 				}, false)];
 				
 				return handles;
@@ -4250,7 +4250,7 @@
 				{
 					let fixed = mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0';
 					let size = (fixed) ? Math.max(0, Math.min(bounds.width * 0.5, (pt.x - bounds.x))) : Math.max(0, Math.min(0.5, (pt.x - bounds.x) / bounds.width));
-					this.state.style['size'] = size;
+					this.state.style.size = size;
 				}, false)];
 				
 				if (mxUtils.getValue(state.style, 'rounded', false))
@@ -4271,7 +4271,7 @@
 				}, function(bounds, pt)
 				{
 					let m = Math.min(bounds.width, bounds.height);
-					this.state.style['size'] = Math.max(0, Math.min(1, Math.min((Math.max(0, bounds.getCenterY() - pt.y) / m) * 2,
+					this.state.style.size = Math.max(0, Math.min(1, Math.min((Math.max(0, bounds.getCenterY() - pt.y) / m) * 2,
 							(Math.max(0, bounds.getCenterX() - pt.x) / m) * 2)));
 				})];
 			},
@@ -4285,7 +4285,7 @@
 					return new mxPoint(bounds.x + bounds.width - size, bounds.y + size);
 				}, function(bounds, pt)
 				{
-					this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x),
+					this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x),
 							Math.min(bounds.height, pt.y - bounds.y))));
 				})];
 			},
@@ -4299,7 +4299,7 @@
 					return new mxPoint(bounds.x + bounds.width - size, bounds.y + size);
 				}, function(bounds, pt)
 				{
-					this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x),
+					this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x),
 							Math.min(bounds.height, pt.y - bounds.y))));
 				})];
 			},
@@ -4312,7 +4312,7 @@
 					return new mxPoint(bounds.x + bounds.width / 4, bounds.y + size * 3 / 4);
 				}, function(bounds, pt)
 				{
-					this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * 4 / 3)));
+					this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * 4 / 3)));
 				}, false)];
 				
 				if (mxUtils.getValue(state.style, 'rounded', false))
@@ -4335,7 +4335,7 @@
 					let fixed = mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0';
 					let size = (fixed) ? Math.max(0, Math.min(bounds.width, (bounds.x + bounds.width - pt.x))) : Math.max(0, Math.min(1, (bounds.x + bounds.width - pt.x) / bounds.width));
 					
-					this.state.style['size'] = size;
+					this.state.style.size = size;
 				}, false)];
 			},
 			'callout': function(state)
@@ -4350,8 +4350,8 @@
 				}, function(bounds, pt)
 				{
 					let base = Math.max(0, Math.min(bounds.width, mxUtils.getValue(this.state.style, 'base', CalloutShape.prototype.base)));
-					this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y)));
-					this.state.style['position'] = Math.round(Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width)) * 100) / 100;
+					this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y)));
+					this.state.style.position = Math.round(Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width)) * 100) / 100;
 				}, false), createHandle(state, ['position2'], function(bounds)
 				{
 					var position2 = Math.max(0, Math.min(1, mxUtils.getValue(this.state.style, 'position2', CalloutShape.prototype.position2)));
@@ -4371,7 +4371,7 @@
 				{
 					let position = Math.max(0, Math.min(1, mxUtils.getValue(this.state.style, 'position', CalloutShape.prototype.position)));
 
-					this.state.style['base'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x - position * bounds.width)));
+					this.state.style.base = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x - position * bounds.width)));
 				}, false)];
 				
 				if (mxUtils.getValue(state.style, 'rounded', false))
@@ -4391,8 +4391,8 @@
 					return new mxPoint(bounds.x + dx, bounds.y + dy);
 				}, function(bounds, pt)
 				{
-					this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
-					this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
+					this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
+					this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
 				}, false)];
 				
 				if (mxUtils.getValue(state.style, 'rounded', false))
@@ -4412,8 +4412,8 @@
 					return new mxPoint(bounds.x + dx / 2, bounds.y + dy * 2);
 				}, function(bounds, pt)
 				{
-					this.state.style['jettyWidth'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)) * 2);
-					this.state.style['jettyHeight'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)) / 2);
+					this.state.style.jettyWidth = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)) * 2);
+					this.state.style.jettyHeight = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)) / 2);
 				})];
 				
 				return handles;
@@ -4428,8 +4428,8 @@
 					return new mxPoint(bounds.x + dx, bounds.y + dy);
 				}, function(bounds, pt)
 				{
-					this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
-					this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
+					this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
+					this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
 				}, false)];
 			},
 			'tee': function(state)
@@ -4442,8 +4442,8 @@
 					return new mxPoint(bounds.x + (bounds.width + dx) / 2, bounds.y + dy);
 				}, function(bounds, pt)
 				{
-					this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width / 2, (pt.x - bounds.x - bounds.width / 2)) * 2));
-					this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
+					this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width / 2, (pt.x - bounds.x - bounds.width / 2)) * 2));
+					this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
 				}, false)];
 			},
 			'singleArrow': createArrowHandleFunction(1),
@@ -4470,8 +4470,8 @@
 						tw = bounds.width - tw;
 					}
 					
-					this.state.style['tabWidth'] = Math.round(tw);
-					this.state.style['tabHeight'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
+					this.state.style.tabWidth = Math.round(tw);
+					this.state.style.tabHeight = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
 				}, false)];
 			},
 			'document': function(state)
@@ -4483,7 +4483,7 @@
 					return new mxPoint(bounds.x + 3 * bounds.width / 4, bounds.y + (1 - size) * bounds.height);
 				}, function(bounds, pt)
 				{
-					this.state.style['size'] = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height));
+					this.state.style.size = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height));
 				}, false)];
 			},
 			'tape': function(state)
@@ -4495,7 +4495,7 @@
 					return new mxPoint(bounds.getCenterX(), bounds.y + size * bounds.height / 2);
 				}, function(bounds, pt)
 				{
-					this.state.style['size'] = Math.max(0, Math.min(1, ((pt.y - bounds.y) / bounds.height) * 2));
+					this.state.style.size = Math.max(0, Math.min(1, ((pt.y - bounds.y) / bounds.height) * 2));
 				}, false)];
 			},
 			'isoCube2' : function(state)
@@ -4508,7 +4508,7 @@
 					return new mxPoint(bounds.x, bounds.y + isoH);
 				}, function(bounds, pt)
 				{
-					this.state.style['isoAngle'] = Math.max(0, (pt.y - bounds.y) * 50 / bounds.height);
+					this.state.style.isoAngle = Math.max(0, (pt.y - bounds.y) * 50 / bounds.height);
 				}, true)];
 			},
 			'cylinder2' : createCylinderHandleFunction(CylinderShape.prototype.size),
@@ -4522,7 +4522,7 @@
 					return new mxPoint(bounds.getCenterX(), bounds.y + (1 - size) * bounds.height);
 				}, function(bounds, pt)
 				{
-					this.state.style['size'] = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height));
+					this.state.style.size = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height));
 				}, false)];
 			},
 			'step': createDisplayHandleFunction(StepShape.prototype.size, true, null, true, StepShape.prototype.fixedSize),
@@ -4550,7 +4550,7 @@
 			// LATER: Make locked state independent of rotatable flag, fix toggle if default is false
 			//if (this.graph.isCellResizable(this.state.cell) || this.graph.isCellMovable(this.state.cell))
 			{
-				let name = this.state.style['shape'];
+				let name = this.state.style.shape;
 
 				if (mxCellRenderer.defaultShapes[name] == null &&
 					mxStencilRegistry.getStencil(name) == null)
@@ -4592,7 +4592,7 @@
 
 		mxEdgeHandler.prototype.createCustomHandles = function()
 		{
-			let name = this.state.style['shape'];
+			let name = this.state.style.shape;
 			
 			if (mxCellRenderer.defaultShapes[name] == null &&
 				mxStencilRegistry.getStencil(name) == null)
diff --git a/docs/stashed/grapheditor/www/js/Sidebar.js b/docs/stashed/grapheditor/www/js/Sidebar.js
index eb0cc22b5..cf890203d 100644
--- a/docs/stashed/grapheditor/www/js/Sidebar.js
+++ b/docs/stashed/grapheditor/www/js/Sidebar.js
@@ -3739,7 +3739,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
 					arrowLeft.style.left = Math.floor(bds.x - this.triangleLeft.width) + 'px';
 					arrowLeft.style.top = arrowRight.style.top;
 					
-					if (state.style['portConstraint'] != 'eastwest')
+					if (state.style.portConstraint != 'eastwest')
 					{
 						graph.container.appendChild(arrowUp);
 						graph.container.appendChild(arrowDown);
diff --git a/packages/core/src/handler/mxElbowEdgeHandler.js b/packages/core/src/handler/mxElbowEdgeHandler.js
index ef1796c83..1722900c1 100644
--- a/packages/core/src/handler/mxElbowEdgeHandler.js
+++ b/packages/core/src/handler/mxElbowEdgeHandler.js
@@ -127,7 +127,7 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
       this.state.style.edge === EDGESTYLE_TOPTOBOTTOM ||
       ((this.state.style.edge === mxEdgeStyle.ElbowConnector ||
         this.state.style.edge === EDGESTYLE_ELBOW) &&
-        this.state.style['elbow'] === ELBOW_VERTICAL)
+        this.state.style.elbow === ELBOW_VERTICAL)
       ? 'row-resize'
       : 'col-resize';
   }
diff --git a/packages/core/src/util/datatypes/style/mxEdgeStyle.js b/packages/core/src/util/datatypes/style/mxEdgeStyle.js
index 7d45b001e..f2b285908 100644
--- a/packages/core/src/util/datatypes/style/mxEdgeStyle.js
+++ b/packages/core/src/util/datatypes/style/mxEdgeStyle.js
@@ -374,7 +374,7 @@ class mxEdgeStyle {
 
     if (
       !horizontal &&
-      (vertical || state.style['elbow'] === ELBOW_VERTICAL)
+      (vertical || state.style.elbow === ELBOW_VERTICAL)
     ) {
       mxEdgeStyle.TopToBottom(state, source, target, points, result);
     } else {
diff --git a/packages/core/src/view/cell/mxCellRenderer.ts b/packages/core/src/view/cell/mxCellRenderer.ts
index 37e47f1d1..00a194731 100644
--- a/packages/core/src/view/cell/mxCellRenderer.ts
+++ b/packages/core/src/view/cell/mxCellRenderer.ts
@@ -291,11 +291,11 @@ class mxCellRenderer {
     shape.apply(state);
     shape.image = state.view.graph.getImage(state);
     shape.indicatorColor = state.view.graph.getIndicatorColor(state);
-    shape.indicatorStrokeColor = state.style['indicatorStrokeColor'];
+    shape.indicatorStrokeColor = state.style.indicatorStrokeColor;
     shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(
       state
     );
-    shape.indicatorDirection = state.style['indicatorDirection'];
+    shape.indicatorDirection = state.style.indicatorDirection;
     shape.indicatorImage = state.view.graph.getIndicatorImage(state);
     this.postConfigureShape(state);
   }
diff --git a/packages/core/src/view/graph/mxGraph.ts b/packages/core/src/view/graph/mxGraph.ts
index c8c36f316..4ba16d560 100644
--- a/packages/core/src/view/graph/mxGraph.ts
+++ b/packages/core/src/view/graph/mxGraph.ts
@@ -4814,9 +4814,9 @@ class mxGraph extends mxEventSource {
    *   var result = graphGetPreferredSizeForCell.apply(this, arguments);
    *   var style = this.getCellStyle(cell);
    *
-   *   if (style['minWidth'] > 0)
+   *   if (style.minWidth > 0)
    *   {
-   *     result.width = Math.max(style['minWidth'], result.width);
+   *     result.width = Math.max(style.minWidth, result.width);
    *   }
    *
    *   return result;
@@ -8674,7 +8674,7 @@ class mxGraph extends mxEventSource {
    * {
    *   var style = this.getCurrentCellStyle(cell);
    *
-   *   return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0;
+   *   return this.isCellsSelectable() && !this.isCellLocked(cell) && style.selectable != 0;
    * };
    * ```
    *
diff --git a/packages/core/typed_mxgraph_defs.json b/packages/core/typed_mxgraph_defs.json
index 2c17f0a3f..3ad3c4ec6 100644
--- a/packages/core/typed_mxgraph_defs.json
+++ b/packages/core/typed_mxgraph_defs.json
@@ -5999,9 +5999,9 @@
           " *   var result = graphGetPreferredSizeForCell.apply(this, arguments);",
           " *   var style = this.getCellStyle(cell);",
           " *",
-          " *   if (style['minWidth'] > 0)",
+          " *   if (style.minWidth > 0)",
           " *   {",
-          " *     result.width = Math.max(style['minWidth'], result.width);",
+          " *     result.width = Math.max(style.minWidth, result.width);",
           " *   }",
           " *",
           " *   return result;",
@@ -7558,7 +7558,7 @@
           " * {",
           " *   var style = this.getCurrentCellStyle(cell);",
           " *",
-          " *   return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0;",
+          " *   return this.isCellsSelectable() && !this.isCellLocked(cell) && style.selectable != 0;",
           " * };",
           " * ```",
           " *",
diff --git a/packages/html/stories/FixedPoints.stories.js b/packages/html/stories/FixedPoints.stories.js
index bada3d84a..cd3fbac44 100644
--- a/packages/html/stories/FixedPoints.stories.js
+++ b/packages/html/stories/FixedPoints.stories.js
@@ -86,10 +86,10 @@ const Template = ({ label, ...args }) => {
         }
 
         // In case the edge style must be changed during the preview:
-        // this.edgeState.style['edgeStyle'] = 'orthogonalEdgeStyle';
+        // this.edgeState.style.edgeStyle = 'orthogonalEdgeStyle';
         // And to use the new edge style in the new edge inserted into the graph,
         // update the cell style as follows:
-        // this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style['edgeStyle']);
+        // this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style.edgeStyle);
       }
       return super.updateEdgeState(pt, constraint);
     }

From 40d5834b7c03e175e44a70250df6e3346a1ad323 Mon Sep 17 00:00:00 2001
From: mcyph <20507948+mcyph@users.noreply.github.com>
Date: Mon, 3 May 2021 00:06:49 +1000
Subject: [PATCH 4/4] bugfixes

---
 docs/stashed/grapheditor/www/js/EditorUi.js   |   2 +-
 docs/stashed/grapheditor/www/js/Format.js     | 162 +++++++++---------
 docs/stashed/grapheditor/www/js/Graph.js      |   6 +-
 docs/stashed/grapheditor/www/js/Menus.js      |   2 +-
 docs/stashed/grapheditor/www/js/Shapes.js     |  18 +-
 packages/core/src/shape/mxShape.ts            |   6 +-
 .../core/src/shape/node/mxDoubleEllipse.ts    |   2 +-
 packages/core/src/util/mxConstants.js         |   2 +-
 packages/core/src/view/graph/mxGraph.ts       |   2 +-
 packages/core/typed_mxgraph_defs.json         |  12 +-
 10 files changed, 107 insertions(+), 107 deletions(-)

diff --git a/docs/stashed/grapheditor/www/js/EditorUi.js b/docs/stashed/grapheditor/www/js/EditorUi.js
index 6ae3bc501..6c810ebfc 100644
--- a/docs/stashed/grapheditor/www/js/EditorUi.js
+++ b/docs/stashed/grapheditor/www/js/EditorUi.js
@@ -521,7 +521,7 @@ EditorUi = function(editor, container, lightbox)
 		                 ['strokeColor', 'strokeWidth'],
 		                 ['fillColor', 'gradientColor'],
 		                 valueStyles,
-		                 .opacity,
+		                 ['opacity'],
 		                 ['align'],
 		                 ['html']];
 		
diff --git a/docs/stashed/grapheditor/www/js/Format.js b/docs/stashed/grapheditor/www/js/Format.js
index aaba588f0..994edd900 100644
--- a/docs/stashed/grapheditor/www/js/Format.js
+++ b/docs/stashed/grapheditor/www/js/Format.js
@@ -3038,10 +3038,10 @@ TextFormatPanel.prototype.addFont = function(container)
 				
 				if (vals != null)
 				{
-					graph.setCellStyles(mxConstants.'labelPosition', vals[0], graph.getSelectionCells());
-					graph.setCellStyles(mxConstants.'verticalLabelPosition', vals[1], graph.getSelectionCells());
-					graph.setCellStyles(mxConstants.'align', vals[2], graph.getSelectionCells());
-					graph.setCellStyles(mxConstants.'verticalAlign', vals[3], graph.getSelectionCells());
+					graph.setCellStyles('labelPosition', vals[0], graph.getSelectionCells());
+					graph.setCellStyles('verticalLabelPosition', vals[1], graph.getSelectionCells());
+					graph.setCellStyles('align', vals[2], graph.getSelectionCells());
+					graph.setCellStyles('verticalAlign', vals[3], graph.getSelectionCells());
 				}
 			}
 			finally
@@ -3773,18 +3773,18 @@ TextFormatPanel.prototype.addFont = function(container)
 			input.value = (isNaN(tmp)) ? '' : tmp  + ' pt';
 		}
 		
-		let align = mxUtils.getValue(ss.style, mxConstants.'align', mxConstants.ALIGN_CENTER);
+		let align = mxUtils.getValue(ss.style, 'align', mxConstants.ALIGN_CENTER);
 		setSelected(left, align == mxConstants.ALIGN_LEFT);
 		setSelected(center, align == mxConstants.ALIGN_CENTER);
 		setSelected(right, align == mxConstants.ALIGN_RIGHT);
 		
-		let valign = mxUtils.getValue(ss.style, mxConstants.'verticalAlign', mxConstants.ALIGN_MIDDLE);
+		let valign = mxUtils.getValue(ss.style, 'verticalAlign', mxConstants.ALIGN_MIDDLE);
 		setSelected(top, valign == mxConstants.ALIGN_TOP);
 		setSelected(middle, valign == mxConstants.ALIGN_MIDDLE);
 		setSelected(bottom, valign == mxConstants.ALIGN_BOTTOM);
 		
-		let pos = mxUtils.getValue(ss.style, mxConstants.'labelPosition', mxConstants.ALIGN_CENTER);
-		let vpos = mxUtils.getValue(ss.style, mxConstants.'verticalLabelPosition', mxConstants.ALIGN_MIDDLE);
+		let pos = mxUtils.getValue(ss.style, 'labelPosition', mxConstants.ALIGN_CENTER);
+		let vpos = mxUtils.getValue(ss.style, 'verticalLabelPosition', mxConstants.ALIGN_MIDDLE);
 		
 		if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_TOP)
 		{
@@ -4020,7 +4020,7 @@ TextFormatPanel.prototype.addFont = function(container)
 							
 							if (!graph.cellEditor.isTableSelected())
 							{
-								let align = graph.cellEditor.align || mxUtils.getValue(ss.style, mxConstants.'align', mxConstants.ALIGN_CENTER);
+								let align = graph.cellEditor.align || mxUtils.getValue(ss.style, 'align', mxConstants.ALIGN_CENTER);
 
 								if (isEqualOrPrefixed(css.textAlign, 'justify'))
 								{
@@ -4716,9 +4716,9 @@ StyleFormatPanel.prototype.addStroke = function(container)
 		let value = parseInt(input.value);
 		value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value));
 		
-		if (value != mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1))
+		if (value != mxUtils.getValue(ss.style, 'strokeWidth', 1))
 		{
-			graph.setCellStyles(mxConstants.'strokeWidth', value, graph.getSelectionCells());
+			graph.setCellStyles('strokeWidth', value, graph.getSelectionCells());
 			ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth,
 					'values', [value], 'cells', graph.getSelectionCells()));
 		}
@@ -4733,9 +4733,9 @@ StyleFormatPanel.prototype.addStroke = function(container)
 		let value = parseInt(altInput.value);
 		value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value));
 		
-		if (value != mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1))
+		if (value != mxUtils.getValue(ss.style, 'strokeWidth', 1))
 		{
-			graph.setCellStyles(mxConstants.'strokeWidth', value, graph.getSelectionCells());
+			graph.setCellStyles('strokeWidth', value, graph.getSelectionCells());
 			ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth,
 					'values', [value], 'cells', graph.getSelectionCells()));
 		}
@@ -4794,43 +4794,43 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	{
 		if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge')
 		{
-			let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
+			let item = this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
 			item.setAttribute('title', mxResources.get('none'));
 			item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>';
 
 			if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge')
 			{
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-startclassic', null, false).setAttribute('title', mxResources.get('classic'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-startclassicthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-startopen', null, false).setAttribute('title', mxResources.get('openArrow'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-startopenthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['openAsync', 0], 'geIcon geSprite geSprite-startopenasync', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-startblock', null, false).setAttribute('title', mxResources.get('block'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-startblockthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['async', 1], 'geIcon geSprite geSprite-startasync', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-startoval', null, false).setAttribute('title', mxResources.get('oval'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-startdiamond', null, false).setAttribute('title', mxResources.get('diamond'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-startthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-startclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-startclassicthintrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-startblockthintrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['async', 0], 'geIcon geSprite geSprite-startasynctrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-startovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-startdiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-startthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['box', 0], 'geIcon geSprite geSvgSprite geSprite-box', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geSprite-halfCircle', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['dash', 0], 'geIcon geSprite geSprite-startdash', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['cross', 0], 'geIcon geSprite geSprite-startcross', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-startcircleplus', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['circle', 1], 'geIcon geSprite geSprite-startcircle', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERone', 0], 'geIcon geSprite geSprite-starterone', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-starteronetoone', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERmany', 0], 'geIcon geSprite geSprite-startermany', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-starteronetomany', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-starteroneopt', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-startclassic', null, false).setAttribute('title', mxResources.get('classic'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-startclassicthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-startopen', null, false).setAttribute('title', mxResources.get('openArrow'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-startopenthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['openAsync', 0], 'geIcon geSprite geSprite-startopenasync', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-startblock', null, false).setAttribute('title', mxResources.get('block'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-startblockthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['async', 1], 'geIcon geSprite geSprite-startasync', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-startoval', null, false).setAttribute('title', mxResources.get('oval'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-startdiamond', null, false).setAttribute('title', mxResources.get('diamond'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-startthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-startclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-startclassicthintrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-startblockthintrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['async', 0], 'geIcon geSprite geSprite-startasynctrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-startovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-startdiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-startthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['box', 0], 'geIcon geSprite geSvgSprite geSprite-box', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geSprite-halfCircle', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['dash', 0], 'geIcon geSprite geSprite-startdash', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['cross', 0], 'geIcon geSprite geSprite-startcross', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-startcircleplus', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['circle', 1], 'geIcon geSprite geSprite-startcircle', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERone', 0], 'geIcon geSprite geSprite-starterone', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-starteronetoone', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERmany', 0], 'geIcon geSprite geSprite-startermany', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-starteronetomany', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-starteroneopt', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false);
 			}
 			else
 			{
@@ -4843,43 +4843,43 @@ StyleFormatPanel.prototype.addStroke = function(container)
 	{
 		if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge')
 		{
-			let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
+			let item = this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
 			item.setAttribute('title', mxResources.get('none'));
 			item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>';
 			
 			if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge')
 			{
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-endclassic', null, false).setAttribute('title', mxResources.get('classic'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-endclassicthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-endopen', null, false).setAttribute('title', mxResources.get('openArrow'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-endopenthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['openAsync', 0], 'geIcon geSprite geSprite-endopenasync', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-endblock', null, false).setAttribute('title', mxResources.get('block'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-endblockthin', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['async', 1], 'geIcon geSprite geSprite-endasync', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-endoval', null, false).setAttribute('title', mxResources.get('oval'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-enddiamond', null, false).setAttribute('title', mxResources.get('diamond'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-endthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-endclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-endclassicthintrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-endblockthintrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['async', 0], 'geIcon geSprite geSprite-endasynctrans', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-endovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-enddiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-endthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['box', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-box', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-halfCircle', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['dash', 0], 'geIcon geSprite geSprite-enddash', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['cross', 0], 'geIcon geSprite geSprite-endcross', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-endcircleplus', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['circle', 1], 'geIcon geSprite geSprite-endcircle', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERone', 0], 'geIcon geSprite geSprite-enderone', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-enderonetoone', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERmany', 0], 'geIcon geSprite geSprite-endermany', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-enderonetomany', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-enderoneopt', null, false);
-				this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-endclassic', null, false).setAttribute('title', mxResources.get('classic'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-endclassicthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-endopen', null, false).setAttribute('title', mxResources.get('openArrow'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-endopenthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['openAsync', 0], 'geIcon geSprite geSprite-endopenasync', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-endblock', null, false).setAttribute('title', mxResources.get('block'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-endblockthin', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['async', 1], 'geIcon geSprite geSprite-endasync', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-endoval', null, false).setAttribute('title', mxResources.get('oval'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-enddiamond', null, false).setAttribute('title', mxResources.get('diamond'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-endthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-endclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-endclassicthintrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-endblockthintrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['async', 0], 'geIcon geSprite geSprite-endasynctrans', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-endovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-enddiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-endthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['box', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-box', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-halfCircle', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['dash', 0], 'geIcon geSprite geSprite-enddash', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['cross', 0], 'geIcon geSprite geSprite-endcross', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-endcircleplus', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['circle', 1], 'geIcon geSprite geSprite-endcircle', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERone', 0], 'geIcon geSprite geSprite-enderone', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-enderonetoone', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERmany', 0], 'geIcon geSprite geSprite-endermany', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-enderonetomany', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-enderoneopt', null, false);
+				this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false);
 			}
 			else
 			{
@@ -5021,13 +5021,13 @@ StyleFormatPanel.prototype.addStroke = function(container)
 
 		if (force || document.activeElement != input)
 		{
-			let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1));
+			let tmp = parseInt(mxUtils.getValue(ss.style, 'strokeWidth', 1));
 			input.value = (isNaN(tmp)) ? '' : tmp + ' pt';
 		}
 		
 		if (force || document.activeElement != altInput)
 		{
-			let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1));
+			let tmp = parseInt(mxUtils.getValue(ss.style, 'strokeWidth', 1));
 			altInput.value = (isNaN(tmp)) ? '' : tmp + ' pt';
 		}
 		
@@ -5160,9 +5160,9 @@ StyleFormatPanel.prototype.addStroke = function(container)
 			return markerDiv;
 		};
 		
-		let sourceDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.'startArrow', null),
+		let sourceDiv = updateArrow(mxUtils.getValue(ss.style, 'startArrow', null),
 				mxUtils.getValue(ss.style, 'startFill', '1'), lineStart, 'start');
-		let targetDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.'endArrow', null),
+		let targetDiv = updateArrow(mxUtils.getValue(ss.style, 'endArrow', null),
 				mxUtils.getValue(ss.style, 'endFill', '1'), lineEnd, 'end');
 
 		// Special cases for markers
diff --git a/docs/stashed/grapheditor/www/js/Graph.js b/docs/stashed/grapheditor/www/js/Graph.js
index 9c48b087a..14aefb5af 100644
--- a/docs/stashed/grapheditor/www/js/Graph.js
+++ b/docs/stashed/grapheditor/www/js/Graph.js
@@ -9820,7 +9820,7 @@ if (typeof mxVertexHandler != 'undefined')
 					
 					let size = mxUtils.getValue(state.style, 'fontSize', mxConstants.DEFAULT_FONTSIZE);
 					let family = mxUtils.getValue(state.style, 'fontFamily', mxConstants.DEFAULT_FONTFAMILY);
-					let align = mxUtils.getValue(state.style, mxConstants.'align', mxConstants.ALIGN_LEFT);
+					let align = mxUtils.getValue(state.style, 'align', mxConstants.ALIGN_LEFT);
 					let bold = (mxUtils.getValue(state.style, 'fontStyle', 0) &
 							mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD;
 					let italic = (mxUtils.getValue(state.style, 'fontStyle', 0) &
@@ -9897,8 +9897,8 @@ if (typeof mxVertexHandler != 'undefined')
 						
 						if (m == null)
 						{
-							m = mxUtils.getAlignmentAsPoint(mxUtils.getValue(state.style, mxConstants.'align', mxConstants.ALIGN_CENTER),
-									mxUtils.getValue(state.style, mxConstants.'verticalAlign', mxConstants.ALIGN_MIDDLE));
+							m = mxUtils.getAlignmentAsPoint(mxUtils.getValue(state.style, 'align', mxConstants.ALIGN_CENTER),
+									mxUtils.getValue(state.style, 'verticalAlign', mxConstants.ALIGN_MIDDLE));
 						}
 						
 						this.bounds.x += m.x * this.bounds.width;
diff --git a/docs/stashed/grapheditor/www/js/Menus.js b/docs/stashed/grapheditor/www/js/Menus.js
index 1ccfc6c25..bfd157a6d 100644
--- a/docs/stashed/grapheditor/www/js/Menus.js
+++ b/docs/stashed/grapheditor/www/js/Menus.js
@@ -863,7 +863,7 @@ Menus.prototype.createStyleChangeFunction = function(keys, values)
 				graph.setCellStyles(keys[i], values[i], cells);
 
 				// Removes CSS alignment to produce consistent output
-				if (keys[i] == mxConstants.'align')
+				if (keys[i] == 'align')
 				{
 					graph.updateLabelElements(cells, function(elt)
 					{
diff --git a/docs/stashed/grapheditor/www/js/Shapes.js b/docs/stashed/grapheditor/www/js/Shapes.js
index ee1515731..497844f29 100644
--- a/docs/stashed/grapheditor/www/js/Shapes.js
+++ b/docs/stashed/grapheditor/www/js/Shapes.js
@@ -22,7 +22,7 @@
 				
 				if (this.style != null)
 				{
-					events = mxUtils.getValue(this.style, mxConstants.'pointerEvents', '1') == '1';
+					events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
 				}
 				
 				if (!events)
@@ -1377,7 +1377,7 @@
 			
 			if (this.style != null)
 			{
-				events = mxUtils.getValue(this.style, mxConstants.'pointerEvents', '1') == '1';
+				events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
 			}
 			
 			if (events || (this.fill != null && this.fill != mxConstants.NONE) ||
@@ -1659,7 +1659,7 @@
 		if (this.style.double == 1)
 		{
 			let margin = (Math.max(2, this.strokewidth + 1) * 2 + parseFloat(
-				this.style[mxConstants.'margin'] || 0)) * this.scale;
+				this.style['margin'] || 0)) * this.scale;
 		
 			return new mxRectangle(rect.x + margin, rect.y + margin,
 				rect.width - 2 * margin, rect.height - 2 * margin);
@@ -1674,7 +1674,7 @@
 		if (!this.outline && this.style.double == 1)
 		{
 			let margin = Math.max(2, this.strokewidth + 1) * 2 +
-				parseFloat(this.style[mxConstants.'margin'] || 0);
+				parseFloat(this.style['margin'] || 0);
 			x += margin;
 			y += margin;
 			w -= 2 * margin;
@@ -1706,7 +1706,7 @@
 		if (this.style.double == 1)
 		{
 			let margin = (Math.max(2, this.strokewidth + 1) + parseFloat(
-				this.style[mxConstants.'margin'] || 0)) * this.scale;
+				this.style['margin'] || 0)) * this.scale;
 		
 			return new mxRectangle(rect.x + margin, rect.y + margin,
 				rect.width - 2 * margin, rect.height - 2 * margin);
@@ -1721,7 +1721,7 @@
 		{
 			if (!this.outline && this.style.double == 1)
 			{
-				let margin = Math.max(2, this.strokewidth + 1) + parseFloat(this.style[mxConstants.'margin'] || 0);
+				let margin = Math.max(2, this.strokewidth + 1) + parseFloat(this.style['margin'] || 0);
 				x += margin;
 				y += margin;
 				w -= 2 * margin;
@@ -3236,7 +3236,7 @@
 		if (this.style != null)
 		{
 			let pointerEvents = c.pointerEvents;
-			let events = mxUtils.getValue(this.style, mxConstants.'pointerEvents', '1') == '1';
+			let events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
 			
 			if (!events && (this.fill == null || this.fill == mxConstants.NONE))
 			{
@@ -3999,7 +3999,7 @@
 				let tol = state.view.graph.gridSize / state.view.scale;
 				let handles = [];
 				
-				if (mxUtils.getValue(state.style, mxConstants.'startArrow', mxConstants.NONE) != mxConstants.NONE)
+				if (mxUtils.getValue(state.style, 'startArrow', mxConstants.NONE) != mxConstants.NONE)
 				{
 					handles.push(createEdgeHandle(state, ['width', 'startSize', 'endSize'], true, function(dist, nx, ny, p0, p1)
 					{
@@ -4070,7 +4070,7 @@
 					}));
 				}
 				
-				if (mxUtils.getValue(state.style, mxConstants.'endArrow', mxConstants.NONE) != mxConstants.NONE)
+				if (mxUtils.getValue(state.style, 'endArrow', mxConstants.NONE) != mxConstants.NONE)
 				{
 					handles.push(createEdgeHandle(state, ['width', 'startSize', 'endSize'], false, function(dist, nx, ny, p0, p1)
 					{
diff --git a/packages/core/src/shape/mxShape.ts b/packages/core/src/shape/mxShape.ts
index 0c683fe31..cac4e552c 100644
--- a/packages/core/src/shape/mxShape.ts
+++ b/packages/core/src/shape/mxShape.ts
@@ -1141,15 +1141,15 @@ class mxShape {
    * - <mxConstants.STYLE_FILL_OPACITY> => fillOpacity
    * - <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity
    * - <'strokeColor'> => stroke
-   * - <mxConstants.'strokeWidth'> => strokewidth
+   * - <'strokeWidth'> => strokewidth
    * - <'shadow'> => isShadow
    * - <'dashed'> => isDashed
    * - <'spacing'> => spacing
    * - <'startSize'> => startSize
    * - <'endSize'> => endSize
    * - <'rounded'> => isRounded
-   * - <mxConstants.'startArrow'> => startArrow
-   * - <mxConstants.'endArrow'> => endArrow
+   * - <'startArrow'> => startArrow
+   * - <'endArrow'> => endArrow
    * - <'rotation'> => rotation
    * - <'direction'> => direction
    * - <'glass'> => glass
diff --git a/packages/core/src/shape/node/mxDoubleEllipse.ts b/packages/core/src/shape/node/mxDoubleEllipse.ts
index 94014d08c..8492fdbdc 100644
--- a/packages/core/src/shape/node/mxDoubleEllipse.ts
+++ b/packages/core/src/shape/node/mxDoubleEllipse.ts
@@ -23,7 +23,7 @@ import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
  *   c.ellipse(x, y, w, h);
  *   c.stroke();
  *
- *   var inset = mxUtils.getValue(this.style, mxConstants.'margin', Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
+ *   var inset = mxUtils.getValue(this.style, 'margin', Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
  *   x += inset;
  *   y += inset;
  *   w -= 2 * inset;
diff --git a/packages/core/src/util/mxConstants.js b/packages/core/src/util/mxConstants.js
index aa9e3b02b..8fedab98e 100644
--- a/packages/core/src/util/mxConstants.js
+++ b/packages/core/src/util/mxConstants.js
@@ -610,7 +610,7 @@ export const DEFAULT_IMAGESIZE = 24;
  * Variable: ENTITY_SEGMENT
  *
  * Defines the length of the horizontal segment of an Entity Relation.
- * This can be overridden using <mxConstants.'segment'> style.
+ * This can be overridden using <'segment'> style.
  * Default is 30.
  */
 export const ENTITY_SEGMENT = 30;
diff --git a/packages/core/src/view/graph/mxGraph.ts b/packages/core/src/view/graph/mxGraph.ts
index 4ba16d560..f9321815b 100644
--- a/packages/core/src/view/graph/mxGraph.ts
+++ b/packages/core/src/view/graph/mxGraph.ts
@@ -8335,7 +8335,7 @@ class mxGraph extends mxEventSource {
   /**
    * Returns the vertical alignment for the given cell state. This
    * implementation returns the value stored under
-   * {@link mxConstants.'verticalAlign'} in the cell style.
+   * {@link 'verticalAlign'} in the cell style.
    *
    * @param state {@link mxCellState} whose vertical alignment should be
    * returned.
diff --git a/packages/core/typed_mxgraph_defs.json b/packages/core/typed_mxgraph_defs.json
index 3ad3c4ec6..9841713a5 100644
--- a/packages/core/typed_mxgraph_defs.json
+++ b/packages/core/typed_mxgraph_defs.json
@@ -7255,7 +7255,7 @@
           "/**",
           " * Returns the vertical alignment for the given cell state. This",
           " * implementation returns the value stored under",
-          " * {@link mxConstants.'verticalAlign'} in the cell style.",
+          " * {@link 'verticalAlign'} in the cell style.",
           " *",
           " * @param state {@link mxCellState} whose vertical alignment should be",
           " * returned.",
@@ -13220,15 +13220,15 @@
           " * - <mxConstants.STYLE_FILL_OPACITY> => fillOpacity",
           " * - <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity",
           " * - <'strokeColor'> => stroke",
-          " * - <mxConstants.'strokeWidth'> => strokewidth",
+          " * - <'strokeWidth'> => strokewidth",
           " * - <'shadow'> => isShadow",
           " * - <'dashed'> => isDashed",
           " * - <'spacing'> => spacing",
           " * - <'startSize'> => startSize",
           " * - <'endSize'> => endSize",
           " * - <'rounded'> => isRounded",
-          " * - <mxConstants.'startArrow'> => startArrow",
-          " * - <mxConstants.'endArrow'> => endArrow",
+          " * - <'startArrow'> => startArrow",
+          " * - <'endArrow'> => endArrow",
           " * - <'rotation'> => rotation",
           " * - <'direction'> => direction",
           " * - <'glass'> => glass",
@@ -14848,7 +14848,7 @@
       " *   c.ellipse(x, y, w, h);",
       " *   c.stroke();",
       " *",
-      " *   var inset = mxUtils.getValue(this.style, mxConstants.'margin', Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));",
+      " *   var inset = mxUtils.getValue(this.style, 'margin', Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));",
       " *   x += inset;",
       " *   y += inset;",
       " *   w -= 2 * inset;",
@@ -23736,7 +23736,7 @@
         [
           "/**",
           " * Defines the length of the horizontal segment of an Entity Relation.",
-          " * This can be overridden using <mxConstants.'segment'> style.",
+          " * This can be overridden using <'segment'> style.",
           " * Default is 30.",
           " */"
         ]