bugfixes

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'] > 0)
+  if (style.minWidth > 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() && !this.isCellLocked(cell) && style['selectable'] != 0;
+  return this.isCellsSelectable() && !this.isCellLocked(cell) && 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>

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';

docs/stashed/Wires.js

@@ -228,32 +228,32 @@ export default MYNAMEHERE;
       let fillColor = (invert) ? 'none' : '#FFFFFF';
 
       let style = graph.getStylesheet().getDefaultEdgeStyle();
-      delete style['endArrow'];
+      delete style.endArrow;
-      style['strokeColor'] = strokeColor;
+      style.strokeColor = strokeColor;
-      style['labelBackgroundColor'] = labelBackground;
+      style.labelBackgroundColor = labelBackground;
-      style['edgeStyle'] = 'wireEdgeStyle';
+      style.edgeStyle = 'wireEdgeStyle';
-      style['fontColor'] = fontColor;
+      style.fontColor = fontColor;
-      style['fontSize'] = '9';
+      style.fontSize = '9';
-      style['movable'] = '0';
+      style.movable = '0';
-      style['strokeWidth'] = strokeWidth;
+      style.strokeWidth = strokeWidth;
-      //style['rounded'] = '1';
+      //style.rounded = '1';
 
       // Sets join node size
-      style['startSize'] = joinNodeSize;
+      style.startSize = joinNodeSize;
-      style['endSize'] = joinNodeSize;
+      style.endSize = joinNodeSize;
 
       style = graph.getStylesheet().getDefaultVertexStyle();
-      style['gradientDirection'] = 'south';
+      style.gradientDirection = 'south';
-      //style['gradientColor'] = '#909090';
+      //style.gradientColor = '#909090';
-      style['strokeColor'] = strokeColor;
+      style.strokeColor = strokeColor;
-      //style['fillColor'] = '#e0e0e0';
+      //style.fillColor = '#e0e0e0';
-      style['fillColor'] = 'none';
+      style.fillColor = 'none';
-      style['fontColor'] = fontColor;
+      style.fontColor = fontColor;
-      style['fontStyle'] = '1';
+      style.fontStyle = '1';
-      style['fontSize'] = '12';
+      style.fontSize = '12';
-      style['resizable'] = '0';
+      style.resizable = '0';
-      style['rounded'] = '1';
+      style.rounded = '1';
-      style['strokeWidth'] = strokeWidth;
+      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.strokeWidth = this.state.style.strokeWidth || '1';
-            this.state.style['strokeColor'] = this.state.style['strokeColor'] || 'none';
+            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.strokeColor = '#00ff00';
-            state.style['strokeWidth'] = '3';
+            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;

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

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]]);

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.spacing = style.stackSpacing || stackLayout.spacing;
-				stackLayout.border = style['stackBorder'] || stackLayout.border;
+				stackLayout.border = style.stackBorder || stackLayout.border;
-				stackLayout.marginLeft = style['marginLeft'] || 0;
+				stackLayout.marginLeft = style.marginLeft || 0;
-				stackLayout.marginRight = style['marginRight'] || 0;
+				stackLayout.marginRight = style.marginRight || 0;
-				stackLayout.marginTop = style['marginTop'] || 0;
+				stackLayout.marginTop = style.marginTop || 0;
-				stackLayout.marginBottom = style['marginBottom'] || 0;
+				stackLayout.marginBottom = style.marginBottom || 0;
-				stackLayout.allowGaps = style['allowGaps'] || 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 != '0') ||
-		(!this.isContainer(cell) && style['collapsible'] == '1'))));
+		(!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' ||
+			(start.style.snapToPoint == '1' ||
-			edge.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)

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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.tabWidth = Math.round(tw);
-					this.state.style['tabHeight'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
+					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)

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);

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';
   }

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 {

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);
   }

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;
    * };
    * ```
    *

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;",
           " * };",
           " * ```",
           " *",

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);
     }