zcy
/
maxGraph
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #31 from mcyph/master 

removed all mxConstants.STYLE_* references, now referring to keys directly
development
Junsik Shim 2021-05-08 20:01:25 +09:00 committed by GitHub
parent e976ab30dd 40d5834b7c
commit 57b118f893
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
83 changed files with 1481 additions and 2892 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/js-api/files/view/mxGraph-js.html
View File

@ -655,9 +655,9 @@ graph.getPreferredSizeForCell = function(cell)
let result = graphGetPreferredSizeForCell.apply(this, arguments); let result = graphGetPreferredSizeForCell.apply(this, arguments);
let style = this.getCellStyle(cell); 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; return result;
@ -1032,7 +1032,7 @@ graph.isWrapping = function(state)
{ {
let style = this.getCurrentCellStyle(cell); 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> };</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> <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>

2
docs/stashed/Codec.js
View File

@ -209,7 +209,7 @@ class Codec extends React.Component {
// Changes the default style for edges "in-place" // Changes the default style for edges "in-place"
const style = graph.getStylesheet().getDefaultEdgeStyle(); const style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; style.edge = mxEdgeStyle.ElbowConnector;
// Enables panning with left mouse button // Enables panning with left mouse button
graph.panningHandler.useLeftButtonForPanning = true; graph.panningHandler.useLeftButtonForPanning = true;

8
docs/stashed/GraphLayout.js
View File

@ -61,10 +61,10 @@ export default GraphLayout;
// Changes the default vertex style in-place // Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE; style.shape = mxConstants.SHAPE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter; style.perimiter = mxPerimeter.EllipsePerimeter;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_FONTSIZE] = '10'; style.fontSize = '10';
// Updates the size of the container to match // Updates the size of the container to match
// the size of the graph when it changes. If // the size of the graph when it changes. If

2
docs/stashed/JQuery.js
View File

@ -169,7 +169,7 @@ export default MYNAMEHERE;
let graphConvertValueToString = graph.convertValueToString; let graphConvertValueToString = graph.convertValueToString;
graph.convertValueToString = function(cell) graph.convertValueToString = function(cell)
{ {
if (this.model.isVertex(cell)) if (cell.isVertex())
{ {
let node = document.createElement('canvas'); let node = document.createElement('canvas');
node.setAttribute('width', cell.geometry.width); node.setAttribute('width', cell.geometry.width);

14
docs/stashed/Map.js
View File

@ -141,13 +141,13 @@ export default Map;
// Sets default vertex style // Sets default vertex style
let style = {}; let style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE; style.shape = mxConstants.SHAPE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter; style.perimiter = mxPerimeter.EllipsePerimeter;
style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5'; style.fillColor = '#8CCDF5';
style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8'; style.strokeColor = '#1B78C8';
style[mxConstants.STYLE_FONTCOLOR] = '#000000'; style.fontColor = '#000000';
style[mxConstants.STYLE_OPACITY] = '50'; style.opacity = '50';
style[mxConstants.STYLE_FONTSIZE] = '16'; style.fontSize = '16';
graph.getStylesheet().putDefaultVertexStyle(style); graph.getStylesheet().putDefaultVertexStyle(style);
// Gets label from custom user object // Gets label from custom user object

120
docs/stashed/Ports.js
View File

@ -99,7 +99,7 @@ export default Ports;
// Uses the port icon while connections are previewed // Uses the port icon while connections are previewed
graph.connectionHandler.getConnectImage = function(state) 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 // Centers the port icon on the target port
@ -516,79 +516,79 @@ export default Ports;
function configureStylesheet(graph) function configureStylesheet(graph)
{ {
let style = {}; let style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; style.shape = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style.align = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5'; style.gradientColor = '#41B9F5';
style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5'; style.fillColor = '#8CCDF5';
style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8'; style.strokeColor = '#1B78C8';
style[mxConstants.STYLE_FONTCOLOR] = '#000000'; style.fontColor = '#000000';
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_OPACITY] = '80'; style.opacity = '80';
style[mxConstants.STYLE_FONTSIZE] = '12'; style.fontSize = '12';
style[mxConstants.STYLE_FONTSTYLE] = 0; style.fontStyle = 0;
style[mxConstants.STYLE_IMAGE_WIDTH] = '48'; style.imageWidth = '48';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48'; style.imageHeight = '48';
graph.getStylesheet().putDefaultVertexStyle(style); graph.getStylesheet().putDefaultVertexStyle(style);
// NOTE: Alternative vertex style for non-HTML labels should be as // NOTE: Alternative vertex style for non-HTML labels should be as
// follows. This repaces the above style for HTML labels. // follows. This repaces the above style for HTML labels.
/*let style = {}; /*let style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL; style.shape = mxConstants.SHAPE_LABEL;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; style.verticalAlign = mxConstants.ALIGN_TOP;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style.align = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER; style.imageAlign = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; style.imageVerticalAlign = mxConstants.ALIGN_TOP;
style[mxConstants.STYLE_SPACING_TOP] = '56'; style.spacingTop = '56';
style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df'; style.gradientColor = '#7d85df';
style[mxConstants.STYLE_STROKECOLOR] = '#5d65df'; style.strokeColor = '#5d65df';
style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff'; style.fillColor = '#adc5ff';
style[mxConstants.STYLE_FONTCOLOR] = '#1d258f'; style.fontColor = '#1d258f';
style[mxConstants.STYLE_FONTFAMILY] = 'Verdana'; style.fontFamily = 'Verdana';
style[mxConstants.STYLE_FONTSIZE] = '12'; style.fontSize = '12';
style[mxConstants.STYLE_FONTSTYLE] = '1'; style.fontStyle = '1';
style[mxConstants.STYLE_ROUNDED] = '1'; style.rounded = '1';
style[mxConstants.STYLE_IMAGE_WIDTH] = '48'; style.imageWidth = '48';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48'; style.imageHeight = '48';
style[mxConstants.STYLE_OPACITY] = '80'; style.opacity = '80';
graph.getStylesheet().putDefaultVertexStyle(style);*/ graph.getStylesheet().putDefaultVertexStyle(style);*/
style = {}; style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE; style.shape = mxConstants.SHAPE_SWIMLANE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style.align = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; style.verticalAlign = mxConstants.ALIGN_TOP;
style[mxConstants.STYLE_FILLCOLOR] = '#FF9103'; style.fillColor = '#FF9103';
style[mxConstants.STYLE_GRADIENTCOLOR] = '#F8C48B'; style.gradientColor = '#F8C48B';
style[mxConstants.STYLE_STROKECOLOR] = '#E86A00'; style.strokeColor = '#E86A00';
style[mxConstants.STYLE_FONTCOLOR] = '#000000'; style.fontColor = '#000000';
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_OPACITY] = '80'; style.opacity = '80';
style[mxConstants.STYLE_STARTSIZE] = '30'; style.startSize = '30';
style[mxConstants.STYLE_FONTSIZE] = '16'; style.fontSize = '16';
style[mxConstants.STYLE_FONTSTYLE] = 1; style.fontStyle = 1;
graph.getStylesheet().putCellStyle('group', style); graph.getStylesheet().putCellStyle('group', style);
style = {}; style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE; style.shape = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_FONTCOLOR] = '#774400'; style.fontColor = '#774400';
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_PERIMETER_SPACING] = '6'; style.perimeterSpacing = '6';
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT; style.align = mxConstants.ALIGN_LEFT;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_FONTSIZE] = '10'; style.fontSize = '10';
style[mxConstants.STYLE_FONTSTYLE] = 2; style.fontStyle = 2;
style[mxConstants.STYLE_IMAGE_WIDTH] = '16'; style.imageWidth = '16';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '16'; style.imageHeight = '16';
graph.getStylesheet().putCellStyle('port', style); graph.getStylesheet().putCellStyle('port', style);
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF'; style.labelBackgroundColor = '#FFFFFF';
style[mxConstants.STYLE_STROKEWIDTH] = '2'; style.strokeWidth = '2';
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation; style.edge = mxEdgeStyle.EntityRelation;
}; };
</script> </script>
</head> </head>

62
docs/stashed/Schema.js
View File

@ -648,44 +648,44 @@ export default MYNAMEHERE;
function configureStylesheet(graph) function configureStylesheet(graph)
{ {
let style = {}; let style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; style.shape = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT; style.align = mxConstants.ALIGN_LEFT;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_FONTCOLOR] = '#000000'; style.fontColor = '#000000';
style[mxConstants.STYLE_FONTSIZE] = '11'; style.fontSize = '11';
style[mxConstants.STYLE_FONTSTYLE] = 0; style.fontStyle = 0;
style[mxConstants.STYLE_SPACING_LEFT] = '4'; style.spacingLeft = '4';
style[mxConstants.STYLE_IMAGE_WIDTH] = '48'; style.imageWidth = '48';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48'; style.imageHeight = '48';
graph.getStylesheet().putDefaultVertexStyle(style); graph.getStylesheet().putDefaultVertexStyle(style);
style = {}; style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE; style.shape = mxConstants.SHAPE_SWIMLANE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style.align = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; style.verticalAlign = mxConstants.ALIGN_TOP;
style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5'; style.gradientColor = '#41B9F5';
style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5'; style.fillColor = '#8CCDF5';
style[mxConstants.STYLE_SWIMLANE_FILLCOLOR] = '#ffffff'; style.swimlaneFillColor = '#ffffff';
style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8'; style.strokeColor = '#1B78C8';
style[mxConstants.STYLE_FONTCOLOR] = '#000000'; style.fontColor = '#000000';
style[mxConstants.STYLE_STROKEWIDTH] = '2'; style.strokeWidth = '2';
style[mxConstants.STYLE_STARTSIZE] = '28'; style.startSize = '28';
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle'; style.verticalAlign = 'middle';
style[mxConstants.STYLE_FONTSIZE] = '12'; style.fontSize = '12';
style[mxConstants.STYLE_FONTSTYLE] = 1; style.fontStyle = 1;
style[mxConstants.STYLE_IMAGE] = 'images/icons48/table.png'; style.image = 'images/icons48/table.png';
// Looks better without opacity if shadow is enabled // Looks better without opacity if shadow is enabled
//style[mxConstants.STYLE_OPACITY] = '80'; //style.opacity = '80';
style[mxConstants.STYLE_SHADOW] = 1; style.shadow = 1;
graph.getStylesheet().putCellStyle('table', style); graph.getStylesheet().putCellStyle('table', style);
style = graph.stylesheet.getDefaultEdgeStyle(); style = graph.stylesheet.getDefaultEdgeStyle();
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF'; style.labelBackgroundColor = '#FFFFFF';
style[mxConstants.STYLE_STROKEWIDTH] = '2'; style.strokeWidth = '2';
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation; style.edge = mxEdgeStyle.EntityRelation;
}; };
// Function to create the entries in the popupmenu // Function to create the entries in the popupmenu

20
docs/stashed/Scrollbars.js
View File

@ -168,23 +168,23 @@ export default Scrollbars;
let graph = new mxGraph(container); let graph = new mxGraph(container);
// Uses the entity perimeter (below) as default // Uses the entity perimeter (below) as default
graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; graph.stylesheet.getDefaultVertexStyle().verticalAlign = mxConstants.ALIGN_TOP;
graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_PERIMETER] = graph.stylesheet.getDefaultVertexStyle().perimiter =
mxPerimeter.EntityPerimeter; mxPerimeter.EntityPerimeter;
graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_SHADOW] = true; graph.stylesheet.getDefaultVertexStyle().shadow = true;
graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_FILLCOLOR] = '#DDEAFF'; graph.stylesheet.getDefaultVertexStyle().fillColor = '#DDEAFF';
graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_GRADIENTCOLOR] = '#A9C4EB'; graph.stylesheet.getDefaultVertexStyle().gradientColor = '#A9C4EB';
delete graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_STROKECOLOR]; delete graph.stylesheet.getDefaultVertexStyle().strokeColor;
// Used for HTML labels that use up the complete vertex space (see // Used for HTML labels that use up the complete vertex space (see
// graph.cellRenderer.redrawLabel below for syncing the size) // 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 // Uses the entity edge style as default
graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_EDGE] = graph.stylesheet.getDefaultEdgeStyle().edge =
mxEdgeStyle.EntityRelation; mxEdgeStyle.EntityRelation;
graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_STROKECOLOR] = 'black'; graph.stylesheet.getDefaultEdgeStyle().strokeColor = 'black';
graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_FONTCOLOR] = 'black'; graph.stylesheet.getDefaultEdgeStyle().fontColor = 'black';
// Allows new connections to be made but do not allow existing // Allows new connections to be made but do not allow existing
// connections to be changed for the sake of simplicity of this // connections to be changed for the sake of simplicity of this

2
docs/stashed/ServerView.js
View File

@ -52,7 +52,7 @@ export default MYNAMEHERE;
if (state != null) 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; this.textarea.style.background = color;
} }
}; };

2
docs/stashed/Touch.js
View File

@ -437,7 +437,7 @@ export default Touch;
pt.y = s.y + s.height / 2; 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) if (alpha != 0)
{ {

70
docs/stashed/Wires.js
View File

@ -134,7 +134,7 @@ export default MYNAMEHERE;
let geo = (terminal != null) ? terminal.cell.getGeometry() : null; let geo = (terminal != null) ? terminal.cell.getGeometry() : null;
if ((geo != null ? !geo.relative : false) && if ((geo != null ? !geo.relative : false) &&
this.getModel().isVertex(terminal.cell) && terminal.cell.isVertex() &&
this.getModel().getChildCount(terminal.cell) == 0) this.getModel().getChildCount(terminal.cell) == 0)
{ {
return [new mxConnectionConstraint(new mxPoint(0, 0.5), false), return [new mxConnectionConstraint(new mxPoint(0, 0.5), false),
@ -182,7 +182,7 @@ export default MYNAMEHERE;
let parent = this.getModel().getParent(cell); let parent = this.getModel().getParent(cell);
if (this.getModel().isVertex(parent)) if (parent.isVertex())
{ {
tip += this.getTooltipForCell(parent) + '.'; tip += this.getTooltipForCell(parent) + '.';
} }
@ -228,32 +228,32 @@ export default MYNAMEHERE;
let fillColor = (invert) ? 'none' : '#FFFFFF'; let fillColor = (invert) ? 'none' : '#FFFFFF';
let style = graph.getStylesheet().getDefaultEdgeStyle(); 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 // Sets join node size
style['startSize'] = joinNodeSize; style.startSize = joinNodeSize;
style['endSize'] = joinNodeSize; style.endSize = joinNodeSize;
style = graph.getStylesheet().getDefaultVertexStyle(); 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(); let parent = graph.getDefaultParent();
@ -581,8 +581,8 @@ export default MYNAMEHERE;
if (this.sourceConstraint != null && this.previous != null) if (this.sourceConstraint != null && this.previous != null)
{ {
edge.style = mxConstants.STYLE_EXIT_X+'='+this.sourceConstraint.point.x+';'+ edge.style = 'exitX'+'='+this.sourceConstraint.point.x+';'+
mxConstants.STYLE_EXIT_Y+'='+this.sourceConstraint.point.y+';'; 'exitY'+'='+this.sourceConstraint.point.y+';';
} }
else if (this.graph.model.isEdge(me.getCell())) else if (this.graph.model.isEdge(me.getCell()))
{ {
@ -724,8 +724,8 @@ export default MYNAMEHERE;
this.state.style = this.lastStyle; this.state.style = this.lastStyle;
// Workaround for shape using current stroke width if no strokewidth defined // 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) if (this.state.shape != null)
{ {
@ -738,8 +738,8 @@ export default MYNAMEHERE;
{ {
this.lastStyle = state.style; this.lastStyle = state.style;
state.style = mxUtils.clone(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) if (state.shape != null)
{ {
@ -781,12 +781,12 @@ export default MYNAMEHERE;
if (this.model.isEdge(this.model.getTerminal(cell, true))) if (this.model.isEdge(this.model.getTerminal(cell, true)))
{ {
style['startArrow'] = 'oval'; style.startArrow = 'oval';
} }
if (this.model.isEdge(this.model.getTerminal(cell, false))) if (this.model.isEdge(this.model.getTerminal(cell, false)))
{ {
style['endArrow'] = 'oval'; style.endArrow = 'oval';
} }
} }
@ -838,14 +838,14 @@ export default MYNAMEHERE;
// Gets the initial connection from the source terminal or edge // Gets the initial connection from the source terminal or edge
if (source != null && state.view.graph.model.isEdge(source.cell)) if (source != null && state.view.graph.model.isEdge(source.cell))
{ {
horizontal = state.style['sourceConstraint'] == 'horizontal'; horizontal = state.style.sourceConstraint == 'horizontal';
} }
else if (source != null) else if (source != null)
{ {
horizontal = source.style['portConstraint'] != 'vertical'; horizontal = source.style.portConstraint != 'vertical';
// Checks the direction of the shape and rotates // 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') if (direction == 'north' || direction == 'south')
{ {

92
docs/stashed/grapheditor/www/js/Actions.js
View File

@ -283,11 +283,11 @@ Actions.prototype.init = function()
try try
{ {
let defaultValue = graph.isCellMovable(graph.getSelectionCell()) ? 1 : 0; let defaultValue = graph.isCellMovable(graph.getSelectionCell()) ? 1 : 0;
graph.toggleCellStyles(mxConstants.STYLE_MOVABLE, defaultValue); graph.toggleCellStyles('movable', defaultValue);
graph.toggleCellStyles(mxConstants.STYLE_RESIZABLE, defaultValue); graph.toggleCellStyles('resizable', defaultValue);
graph.toggleCellStyles(mxConstants.STYLE_ROTATABLE, defaultValue); graph.toggleCellStyles('rotatable', defaultValue);
graph.toggleCellStyles(mxConstants.STYLE_DELETABLE, defaultValue); graph.toggleCellStyles('deletable', defaultValue);
graph.toggleCellStyles(mxConstants.STYLE_EDITABLE, defaultValue); graph.toggleCellStyles('editable', defaultValue);
graph.toggleCellStyles('connectable', defaultValue); graph.toggleCellStyles('connectable', defaultValue);
} }
finally finally
@ -628,7 +628,7 @@ Actions.prototype.init = function()
if (refState != null) if (refState != null)
{ {
graph.stopEditing(); graph.stopEditing();
let value = (refState.style['html'] == '1') ? null : '1'; let value = (refState.style.html == '1') ? null : '1';
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try
@ -696,12 +696,12 @@ Actions.prototype.init = function()
graph.stopEditing(); graph.stopEditing();
if (state != null && state.style[mxConstants.STYLE_WHITE_SPACE] == 'wrap') if (state != null && state.style.whiteSpace == 'wrap')
{ {
value = null; value = null;
} }
graph.setCellStyles(mxConstants.STYLE_WHITE_SPACE, value); graph.setCellStyles('whiteSpace', value);
}); });
this.addAction('rotation', function() this.addAction('rotation', function()
{ {
@ -710,14 +710,14 @@ Actions.prototype.init = function()
if (state != null) 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) let dlg = new FilenameDialog(ui, value, mxResources.get('apply'), function(newValue)
{ {
if (newValue != null && newValue.length > 0) if (newValue != null && newValue.length > 0)
{ {
graph.setCellStyles(mxConstants.STYLE_ROTATION, newValue); graph.setCellStyles('rotation', newValue);
} }
}, mxResources.get('enterValue') + ' (' + mxResources.get('rotation') + ' 0-360)'); }, mxResources.get('enterValue') + ' (' + mxResources.get('rotation') + ' 0-360)');
@ -1004,7 +1004,7 @@ Actions.prototype.init = function()
try try
{ {
let cells = graph.getSelectionCells(); 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 // Removes bold and italic tags and CSS styles inside labels
if ((style & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD) 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'); toggleFontStyle('underline', mxConstants.FONT_UNDERLINE, function() { document.execCommand('underline', false, null); }, Editor.ctrlKey + '+U');
// Color actions // Color actions
this.addAction('fontColor...', function() { ui.menus.pickColor(mxConstants.STYLE_FONTCOLOR, 'forecolor', '000000'); }); this.addAction('fontColor...', function() { ui.menus.pickColor('fontColor', 'forecolor', '000000'); });
this.addAction('strokeColor...', function() { ui.menus.pickColor(mxConstants.STYLE_STROKECOLOR); }); this.addAction('strokeColor...', function() { ui.menus.pickColor('strokeColor'); });
this.addAction('fillColor...', function() { ui.menus.pickColor(mxConstants.STYLE_FILLCOLOR); }); this.addAction('fillColor...', function() { ui.menus.pickColor('fillColor'); });
this.addAction('gradientColor...', function() { ui.menus.pickColor(mxConstants.STYLE_GRADIENTCOLOR); }); this.addAction('gradientColor...', function() { ui.menus.pickColor('gradientColor'); });
this.addAction('backgroundColor...', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, 'backcolor'); }); this.addAction('backgroundColor...', function() { ui.menus.pickColor('backgroundColor', 'backcolor'); });
this.addAction('borderColor...', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BORDERCOLOR); }); this.addAction('borderColor...', function() { ui.menus.pickColor('labelBorderColor'); });
// Format actions // Format actions
this.addAction('vertical', function() { ui.menus.toggleStyle(mxConstants.STYLE_HORIZONTAL, true); }); this.addAction('vertical', function() { ui.menus.toggleStyle('horizontal', true); });
this.addAction('shadow', function() { ui.menus.toggleStyle(mxConstants.STYLE_SHADOW); }); this.addAction('shadow', function() { ui.menus.toggleStyle('shadow'); });
this.addAction('solid', function() this.addAction('solid', function()
{ {
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try
{ {
graph.setCellStyles(mxConstants.STYLE_DASHED, null); graph.setCellStyles('dashed', null);
graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, null); graph.setCellStyles('dashPattern', null);
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'],
'values', [null, null], 'cells', graph.getSelectionCells())); 'values', [null, null], 'cells', graph.getSelectionCells()));
} }
finally finally
@ -1095,9 +1095,9 @@ Actions.prototype.init = function()
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try
{ {
graph.setCellStyles(mxConstants.STYLE_DASHED, '1'); graph.setCellStyles('dashed', '1');
graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, null); graph.setCellStyles('dashPattern', null);
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'],
'values', ['1', null], 'cells', graph.getSelectionCells())); 'values', ['1', null], 'cells', graph.getSelectionCells()));
} }
finally finally
@ -1110,9 +1110,9 @@ Actions.prototype.init = function()
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try
{ {
graph.setCellStyles(mxConstants.STYLE_DASHED, '1'); graph.setCellStyles('dashed', '1');
graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, '1 4'); graph.setCellStyles('dashPattern', '1 4');
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'],
'values', ['1', '1 4'], 'cells', graph.getSelectionCells())); 'values', ['1', '1 4'], 'cells', graph.getSelectionCells()));
} }
finally finally
@ -1125,9 +1125,9 @@ Actions.prototype.init = function()
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try
{ {
graph.setCellStyles(mxConstants.STYLE_ROUNDED, '0'); graph.setCellStyles('rounded', '0');
graph.setCellStyles(mxConstants.STYLE_CURVED, '0'); graph.setCellStyles('curved', '0');
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED], ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
'values', ['0', '0'], 'cells', graph.getSelectionCells())); 'values', ['0', '0'], 'cells', graph.getSelectionCells()));
} }
finally finally
@ -1140,9 +1140,9 @@ Actions.prototype.init = function()
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try
{ {
graph.setCellStyles(mxConstants.STYLE_ROUNDED, '1'); graph.setCellStyles('rounded', '1');
graph.setCellStyles(mxConstants.STYLE_CURVED, '0'); graph.setCellStyles('curved', '0');
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED], ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
'values', ['1', '0'], 'cells', graph.getSelectionCells())); 'values', ['1', '0'], 'cells', graph.getSelectionCells()));
} }
finally finally
@ -1159,11 +1159,11 @@ Actions.prototype.init = function()
{ {
let cells = graph.getSelectionCells(); let cells = graph.getSelectionCells();
let style = graph.getCurrentCellStyle(cells[0]); 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('rounded', value);
graph.setCellStyles(mxConstants.STYLE_CURVED, null); graph.setCellStyles('curved', null);
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED], ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
'values', [value, '0'], 'cells', graph.getSelectionCells())); 'values', [value, '0'], 'cells', graph.getSelectionCells()));
} }
finally finally
@ -1177,9 +1177,9 @@ Actions.prototype.init = function()
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try
{ {
graph.setCellStyles(mxConstants.STYLE_ROUNDED, '0'); graph.setCellStyles('rounded', '0');
graph.setCellStyles(mxConstants.STYLE_CURVED, '1'); graph.setCellStyles('curved', '1');
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED], ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
'values', ['0', '1'], 'cells', graph.getSelectionCells())); 'values', ['0', '1'], 'cells', graph.getSelectionCells()));
} }
finally finally
@ -1347,7 +1347,7 @@ Actions.prototype.init = function()
if (state != null) if (state != null)
{ {
value = state.style[mxConstants.STYLE_IMAGE] || value; value = state.style.image || value;
} }
let selectionState = graph.cellEditor.saveSelection(); let selectionState = graph.cellEditor.saveSelection();
@ -1384,18 +1384,18 @@ Actions.prototype.init = function()
graph.fireEvent(new mxEventObject('cellsInserted', 'cells', select)); 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) // Sets shape only if not already shape with image (label or image)
let style = graph.getCurrentCellStyle(cells[0]); 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) else if (newValue.length == 0)
{ {
graph.setCellStyles(mxConstants.STYLE_SHAPE, null, cells); graph.setCellStyles('shape', null, cells);
} }
if (graph.getSelectionCount() == 1) if (graph.getSelectionCount() == 1)

14
docs/stashed/grapheditor/www/js/EditorUi.js
View File

@ -818,7 +818,7 @@ EditorUi = function(editor, container, lightbox)
let lineStartDiv = this.toolbar.lineStartMenu.getElementsByTagName('div')[0]; let lineStartDiv = this.toolbar.lineStartMenu.getElementsByTagName('div')[0];
lineStartDiv.className = this.getCssClassForMarker('start', 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')); mxUtils.getValue(graph.currentEdgeStyle, 'startFill', '1'));
} }
@ -828,7 +828,7 @@ EditorUi = function(editor, container, lightbox)
let lineEndDiv = this.toolbar.lineEndMenu.getElementsByTagName('div')[0]; let lineEndDiv = this.toolbar.lineEndMenu.getElementsByTagName('div')[0];
lineEndDiv.className = this.getCssClassForMarker('end', 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')); mxUtils.getValue(graph.currentEdgeStyle, 'endFill', '1'));
} }
} }
@ -845,8 +845,8 @@ EditorUi = function(editor, container, lightbox)
if (state != null) if (state != null)
{ {
ff = state.style[mxConstants.STYLE_FONTFAMILY] || ff; ff = state.style.fontFamily || ff;
fs = state.style[mxConstants.STYLE_FONTSIZE] || fs; fs = state.style.fontSize || fs;
if (ff.length > 10) if (ff.length > 10)
{ {
@ -1207,7 +1207,7 @@ EditorUi.prototype.installShapePicker = function()
let geo = temp.getGeometry(); let geo = temp.getGeometry();
me.consume(); me.consume();
while (temp != null && graph.model.isVertex(temp) && geo != null && geo.relative) while (temp != null && temp.isVertex() && geo != null && geo.relative)
{ {
cell = temp; cell = temp;
temp = cell.getParent() temp = cell.getParent()
@ -4635,7 +4635,7 @@ EditorUi.prototype.createKeyHandler = function(editor)
let parent = cell.getParent(); let parent = cell.getParent();
let layout = null; let layout = null;
if (graph.getSelectionCount() == 1 && graph.model.isVertex(cell) && if (graph.getSelectionCount() == 1 && cell.isVertex() &&
graph.layoutManager != null && !graph.isCellLocked(cell)) graph.layoutManager != null && !graph.isCellLocked(cell))
{ {
layout = graph.layoutManager.getLayout(parent); layout = graph.layoutManager.getLayout(parent);
@ -4668,7 +4668,7 @@ EditorUi.prototype.createKeyHandler = function(editor)
{ {
let parent = cells[i].getParent(); 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); realCells.push(parent);
} }

406
docs/stashed/grapheditor/www/js/Format.js
View File

@ -224,7 +224,7 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells)
result.fill = result.fill && this.isFillState(state); result.fill = result.fill && this.isFillState(state);
result.stroke = result.stroke && this.isStrokeState(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'; result.containsImage = result.containsImage || shape == 'image';
for (var key in state.style) for (var key in state.style)
@ -251,11 +251,11 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells)
*/ */
Format.prototype.isFillState = function(state) Format.prototype.isFillState = function(state)
{ {
return !this.isSpecialColor(state.style[mxConstants.STYLE_FILLCOLOR]) && return !this.isSpecialColor(state.style.fillColor) &&
(state.cell.isVertex() || (state.cell.isVertex() ||
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'arrow' || mxUtils.getValue(state.style, 'shape', null) == 'arrow' ||
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'filledEdge' || mxUtils.getValue(state.style, 'shape', null) == 'filledEdge' ||
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'flexArrow'); mxUtils.getValue(state.style, 'shape', null) == 'flexArrow');
}; };
/** /**
@ -263,7 +263,7 @@ Format.prototype.isFillState = function(state)
*/ */
Format.prototype.isStrokeState = 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) Format.prototype.isSpecialColor = function(color)
{ {
return mxUtils.indexOf([mxConstants.STYLE_STROKECOLOR, return mxUtils.indexOf(['strokeColor',
mxConstants.STYLE_FILLCOLOR, 'inherit', 'swimlane', 'fillColor', 'inherit', 'swimlane',
'indicated'], color) >= 0; 'indicated'], color) >= 0;
}; };
@ -281,7 +281,7 @@ Format.prototype.isSpecialColor = function(color)
*/ */
Format.prototype.isGlassState = function(state) 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' || return (shape == 'label' || shape == 'rectangle' || shape == 'internalStorage' ||
shape == 'ext' || shape == 'umlLifeline' || shape == 'swimlane' || shape == 'ext' || shape == 'umlLifeline' || shape == 'swimlane' ||
@ -295,7 +295,7 @@ Format.prototype.isRoundedState = function(state)
{ {
return (state.shape != null) ? state.shape.isRoundable() : return (state.shape != null) ? state.shape.isRoundable() :
mxUtils.indexOf(this.roundableShapes, mxUtils.getValue(state.style, 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) Format.prototype.isLineJumpState = function(state)
{ {
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null); let shape = mxUtils.getValue(state.style, 'shape', null);
let curved = mxUtils.getValue(state.style, mxConstants.STYLE_CURVED, false); let curved = mxUtils.getValue(state.style, 'curved', false);
return !curved && (shape == 'connector' || shape == 'filledEdge'); return !curved && (shape == 'connector' || shape == 'filledEdge');
}; };
@ -314,7 +314,7 @@ Format.prototype.isLineJumpState = function(state)
*/ */
Format.prototype.isAutoSizeState = 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) 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'); return (shape == 'label' || shape == 'image');
}; };
@ -332,7 +332,7 @@ Format.prototype.isImageState = function(state)
*/ */
Format.prototype.isShadowState = 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'); return (shape != 'image');
}; };
@ -628,7 +628,7 @@ BaseFormatPanel.prototype.getSelectionState = function()
if (state != null) if (state != null)
{ {
let tmp = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null); let tmp = mxUtils.getValue(state.style, 'shape', null);
if (tmp != null) if (tmp != null)
{ {
@ -670,7 +670,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu
let value = (isFloat) ? parseFloat(input.value) : parseInt(input.value); let value = (isFloat) ? parseFloat(input.value) : parseInt(input.value);
// Special case: angle mod 360 // 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 // Workaround for decimal rounding errors in floats is to
// use integer and round all numbers to two decimal point // 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); graph.setCellStyles(key, value, cells);
// Handles special case for fontSize where HTML labels are parsed and updated // 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) graph.updateLabelElements(graph.getSelectionCells(), function(elt)
{ {
@ -1937,7 +1937,7 @@ ArrangePanel.prototype.addFlip = function(div)
let btn = mxUtils.button(mxResources.get('horizontal'), function(evt) 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')); btn.setAttribute('title', mxResources.get('horizontal'));
@ -1947,7 +1947,7 @@ ArrangePanel.prototype.addFlip = function(div)
let btn = mxUtils.button(mxResources.get('vertical'), function(evt) 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')); btn.setAttribute('title', mxResources.get('vertical'));
@ -2067,12 +2067,12 @@ ArrangePanel.prototype.addAngle = function(div)
if (force || document.activeElement != input) if (force || document.activeElement != input)
{ {
ss = this.format.getSelectionState(); 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 + '°'; 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); this.addKeyHandler(input, listener);
graph.getModel().addListener(mxEvent.CHANGE, listener); graph.getModel().addListener(mxEvent.CHANGE, listener);
@ -2215,7 +2215,7 @@ ArrangePanel.prototype.addGeometry = function(container)
wrapper.style.whiteSpace = 'nowrap'; wrapper.style.whiteSpace = 'nowrap';
wrapper.style.textAlign = 'right'; wrapper.style.textAlign = 'right';
let opt = this.createCellOption(mxResources.get('constrainProportions'), let opt = this.createCellOption(mxResources.get('constrainProportions'),
mxConstants.STYLE_ASPECT, null, 'fixed', 'null'); 'aspect', null, 'fixed', 'null');
opt.style.width = '100%'; opt.style.width = '100%';
wrapper.appendChild(opt); wrapper.appendChild(opt);
@ -2828,19 +2828,19 @@ TextFormatPanel.prototype.addFont = function(container)
function(evt) function(evt)
{ {
graph.cellEditor.alignText(mxConstants.ALIGN_LEFT, 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'), let center = this.editorUi.toolbar.addButton('geSprite-center', mxResources.get('center'),
(graph.cellEditor.isContentEditing()) ? (graph.cellEditor.isContentEditing()) ?
function(evt) function(evt)
{ {
graph.cellEditor.alignText(mxConstants.ALIGN_CENTER, 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'), let right = this.editorUi.toolbar.addButton('geSprite-right', mxResources.get('right'),
(graph.cellEditor.isContentEditing()) ? (graph.cellEditor.isContentEditing()) ?
function(evt) function(evt)
{ {
graph.cellEditor.alignText(mxConstants.ALIGN_RIGHT, 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]); 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'), 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'), 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'), 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]); this.styleButtons([top, middle, bottom]);
@ -3038,10 +3038,10 @@ TextFormatPanel.prototype.addFont = function(container)
if (vals != null) if (vals != null)
{ {
graph.setCellStyles(mxConstants.STYLE_LABEL_POSITION, vals[0], graph.getSelectionCells()); graph.setCellStyles('labelPosition', vals[0], graph.getSelectionCells());
graph.setCellStyles(mxConstants.STYLE_VERTICAL_LABEL_POSITION, vals[1], graph.getSelectionCells()); graph.setCellStyles('verticalLabelPosition', vals[1], graph.getSelectionCells());
graph.setCellStyles(mxConstants.STYLE_ALIGN, vals[2], graph.getSelectionCells()); graph.setCellStyles('align', vals[2], graph.getSelectionCells());
graph.setCellStyles(mxConstants.STYLE_VERTICAL_ALIGN, vals[3], graph.getSelectionCells()); graph.setCellStyles('verticalAlign', vals[3], graph.getSelectionCells());
} }
} }
finally finally
@ -3058,7 +3058,7 @@ TextFormatPanel.prototype.addFont = function(container)
mxEvent.addListener(dirSelect, 'change', function(evt) 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); mxEvent.consume(evt);
}); });
} }
@ -3077,7 +3077,7 @@ TextFormatPanel.prototype.addFont = function(container)
// after first character was entered (as the font element is lazy created) // after first character was entered (as the font element is lazy created)
let pendingFontSize = null; 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) function(fontSize)
{ {
// IE does not support containsNode // IE does not support containsNode
@ -3234,7 +3234,7 @@ TextFormatPanel.prototype.addFont = function(container)
{ {
install: function(apply) { bgColorApply = apply; }, install: function(apply) { bgColorApply = apply; },
destroy: function() { bgColorApply = null; } 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) graph.updateLabelElements(graph.getSelectionCells(), function(elt)
{ {
@ -3243,7 +3243,7 @@ TextFormatPanel.prototype.addFont = function(container)
}); });
bgPanel.style.fontWeight = 'bold'; 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'; borderPanel.style.fontWeight = 'bold';
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); 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) ? document.execCommand('forecolor', false, (color != mxConstants.NONE) ?
color : 'transparent'); color : 'transparent');
} }
}, (defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : '#000000', }, (defs.strokeColor != null) ? defs.strokeColor : '#000000',
{ {
install: function(apply) { fontColorApply = apply; }, install: function(apply) { fontColorApply = apply; },
destroy: function() { fontColorApply = null; } destroy: function() { fontColorApply = null; }
}, null, true) : this.createCellColorOption(mxResources.get('fontColor'), mxConstants.STYLE_FONTCOLOR, }, null, true) : this.createCellColorOption(mxResources.get('fontColor'), 'fontColor',
(defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : '#000000', function(color) (defs.strokeColor != null) ? defs.strokeColor : '#000000', function(color)
{ {
if (color == mxConstants.NONE) if (color == mxConstants.NONE)
{ {
@ -3332,14 +3332,14 @@ TextFormatPanel.prototype.addFont = function(container)
{ {
if (color == mxConstants.NONE) if (color == mxConstants.NONE)
{ {
graph.setCellStyles(mxConstants.STYLE_NOLABEL, '1', graph.getSelectionCells()); graph.setCellStyles('noLabel', '1', graph.getSelectionCells());
} }
else 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) graph.updateLabelElements(graph.getSelectionCells(), function(elt)
{ {
@ -3364,7 +3364,7 @@ TextFormatPanel.prototype.addFont = function(container)
extraPanel.style.paddingBottom = '4px'; extraPanel.style.paddingBottom = '4px';
// LATER: Fix toggle using '' instead of 'null' // 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'; wwOpt.style.fontWeight = 'bold';
// Word wrap in edge labels only supported via labelWidth style // Word wrap in edge labels only supported via labelWidth style
@ -3429,7 +3429,7 @@ TextFormatPanel.prototype.addFont = function(container)
if (!graph.cellEditor.isContentEditing()) if (!graph.cellEditor.isContentEditing())
{ {
container.appendChild(extraPanel); 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); container.appendChild(spacingPanel);
} }
else else
@ -3759,32 +3759,32 @@ TextFormatPanel.prototype.addFont = function(container)
let listener = mxUtils.bind(this, function(sender, evt, force) let listener = mxUtils.bind(this, function(sender, evt, force)
{ {
ss = this.format.getSelectionState(); 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[0], (fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD);
setSelected(fontStyleItems[1], (fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC); setSelected(fontStyleItems[1], (fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC);
setSelected(fontStyleItems[2], (fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE); 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) 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'; input.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
let align = mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER); let align = mxUtils.getValue(ss.style, 'align', mxConstants.ALIGN_CENTER);
setSelected(left, align == mxConstants.ALIGN_LEFT); setSelected(left, align == mxConstants.ALIGN_LEFT);
setSelected(center, align == mxConstants.ALIGN_CENTER); setSelected(center, align == mxConstants.ALIGN_CENTER);
setSelected(right, align == mxConstants.ALIGN_RIGHT); 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, 'verticalAlign', mxConstants.ALIGN_MIDDLE);
setSelected(top, valign == mxConstants.ALIGN_TOP); setSelected(top, valign == mxConstants.ALIGN_TOP);
setSelected(middle, valign == mxConstants.ALIGN_MIDDLE); setSelected(middle, valign == mxConstants.ALIGN_MIDDLE);
setSelected(bottom, valign == mxConstants.ALIGN_BOTTOM); setSelected(bottom, valign == mxConstants.ALIGN_BOTTOM);
let pos = mxUtils.getValue(ss.style, mxConstants.STYLE_LABEL_POSITION, mxConstants.ALIGN_CENTER); let pos = mxUtils.getValue(ss.style, 'labelPosition', mxConstants.ALIGN_CENTER);
let vpos = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE); let vpos = mxUtils.getValue(ss.style, 'verticalLabelPosition', mxConstants.ALIGN_MIDDLE);
if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_TOP) if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_TOP)
{ {
@ -3823,7 +3823,7 @@ TextFormatPanel.prototype.addFont = function(container)
positionSelect.value = 'center'; 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) if (dir == mxConstants.TEXT_DIRECTION_RTL)
{ {
@ -3840,40 +3840,40 @@ TextFormatPanel.prototype.addFont = function(container)
if (force || document.activeElement != globalSpacing) 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'; globalSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
if (force || document.activeElement != topSpacing) 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'; topSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
if (force || document.activeElement != rightSpacing) 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'; rightSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
if (force || document.activeElement != bottomSpacing) 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'; bottomSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
if (force || document.activeElement != leftSpacing) 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'; leftSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
}); });
globalUpdate = this.installInputHandler(globalSpacing, mxConstants.STYLE_SPACING, 2, -999, 999, ' pt'); globalUpdate = this.installInputHandler(globalSpacing, 'spacing', 2, -999, 999, ' pt');
topUpdate = this.installInputHandler(topSpacing, mxConstants.STYLE_SPACING_TOP, 0, -999, 999, ' pt'); topUpdate = this.installInputHandler(topSpacing, 'spacingTop', 0, -999, 999, ' pt');
rightUpdate = this.installInputHandler(rightSpacing, mxConstants.STYLE_SPACING_RIGHT, 0, -999, 999, ' pt'); rightUpdate = this.installInputHandler(rightSpacing, 'spacingRight', 0, -999, 999, ' pt');
bottomUpdate = this.installInputHandler(bottomSpacing, mxConstants.STYLE_SPACING_BOTTOM, 0, -999, 999, ' pt'); bottomUpdate = this.installInputHandler(bottomSpacing, 'spacingBottom', 0, -999, 999, ' pt');
leftUpdate = this.installInputHandler(leftSpacing, mxConstants.STYLE_SPACING_LEFT, 0, -999, 999, ' pt'); leftUpdate = this.installInputHandler(leftSpacing, 'spacingLeft', 0, -999, 999, ' pt');
this.addKeyHandler(input, listener); this.addKeyHandler(input, listener);
this.addKeyHandler(globalSpacing, listener); this.addKeyHandler(globalSpacing, listener);
@ -4020,7 +4020,7 @@ TextFormatPanel.prototype.addFont = function(container)
if (!graph.cellEditor.isTableSelected()) 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, 'align', mxConstants.ALIGN_CENTER);
if (isEqualOrPrefixed(css.textAlign, 'justify')) if (isEqualOrPrefixed(css.textAlign, 'justify'))
{ {
@ -4191,7 +4191,7 @@ StyleFormatPanel.prototype.init = function()
this.container.appendChild(this.addStroke(this.createPanel())); this.container.appendChild(this.addStroke(this.createPanel()));
this.container.appendChild(this.addLineJumps(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.paddingTop = '8px';
opacityPanel.style.paddingBottom = '8px'; opacityPanel.style.paddingBottom = '8px';
this.container.appendChild(opacityPanel); this.container.appendChild(opacityPanel);
@ -4313,7 +4313,7 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem
styleElem.textContent = cssTxt; styleElem.textContent = cssTxt;
let xml = mxUtils.getXml(svg.documentElement); 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)), ((window.btoa) ? btoa(xml) : Base64.encode(xml, true)),
graph.getSelectionCells()); graph.getSelectionCells());
}, '#ffffff', }, '#ffffff',
@ -4421,8 +4421,8 @@ StyleFormatPanel.prototype.addFill = function(container)
}); });
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
let gradientPanel = this.createCellColorOption(mxResources.get('gradient'), mxConstants.STYLE_GRADIENTCOLOR, let gradientPanel = this.createCellColorOption(mxResources.get('gradient'), 'gradientColor',
(defs[mxConstants.STYLE_GRADIENTCOLOR] != null) ? defs[mxConstants.STYLE_GRADIENTCOLOR] : '#ffffff', function(color) (defs.gradientColor != null) ? defs.gradientColor : '#ffffff', function(color)
{ {
if (color == null || color == mxConstants.NONE) if (color == null || color == mxConstants.NONE)
{ {
@ -4434,10 +4434,10 @@ StyleFormatPanel.prototype.addFill = function(container)
} }
}, function(color) }, 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 label = (ss.style.shape == 'image') ? mxResources.get('background') : mxResources.get('fill');
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); 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() let listener = mxUtils.bind(this, function()
{ {
ss = this.format.getSelectionState(); 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'); let fillStyle = mxUtils.getValue(ss.style, 'fillStyle', 'auto');
// Handles empty string which is not allowed as a value // Handles empty string which is not allowed as a value
@ -4490,7 +4490,7 @@ StyleFormatPanel.prototype.addFill = function(container)
fillStyleSelect.value = fillStyle; fillStyleSelect.value = fillStyle;
container.style.display = (ss.fill) ? '' : 'none'; 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') 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) 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); mxEvent.consume(evt);
}); });
@ -4593,7 +4593,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try try
{ {
let keys = [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED]; let keys = ['rounded', 'curved'];
// Default for rounded is 1 // Default for rounded is 1
let values = ['0', null]; let values = ['0', null];
@ -4628,7 +4628,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
mxEvent.consume(evt); 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 label = (ss.style.shape == 'image') ? mxResources.get('border') : mxResources.get('line');
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); 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) 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, 'solid', ['dashed', 'dashPattern'], [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, 'dashed', ['dashed', 'dashPattern'], ['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', ['dashed', 'dashPattern'], ['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', ['dashed', 'dashPattern'], ['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, 'dotted', ['dashed', 'dashPattern'], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
})); }));
// Used for mixed selection (vertices and edges) // 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) 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, '', ['shape', 'startSize', '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, '', ['shape', 'startSize', '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, '', ['shape', 'startSize', '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'], ['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) 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, 'solid', ['dashed', 'dashPattern'], [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, 'dashed', ['dashed', 'dashPattern'], ['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', ['dashed', 'dashPattern'], ['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', ['dashed', 'dashPattern'], ['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, 'dotted', ['dashed', 'dashPattern'], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
})); }));
var stylePanel2 = stylePanel.cloneNode(false); var stylePanel2 = stylePanel.cloneNode(false);
@ -4716,10 +4716,10 @@ StyleFormatPanel.prototype.addStroke = function(container)
let value = parseInt(input.value); let value = parseInt(input.value);
value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : 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, 'strokeWidth', 1))
{ {
graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells()); graph.setCellStyles('strokeWidth', value, graph.getSelectionCells());
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH], ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth,
'values', [value], 'cells', graph.getSelectionCells())); 'values', [value], 'cells', graph.getSelectionCells()));
} }
@ -4733,10 +4733,10 @@ StyleFormatPanel.prototype.addStroke = function(container)
let value = parseInt(altInput.value); let value = parseInt(altInput.value);
value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : 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, 'strokeWidth', 1))
{ {
graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells()); graph.setCellStyles('strokeWidth', value, graph.getSelectionCells());
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH], ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth,
'values', [value], 'cells', graph.getSelectionCells())); 'values', [value], 'cells', graph.getSelectionCells()));
} }
@ -4774,19 +4774,19 @@ StyleFormatPanel.prototype.addStroke = function(container)
{ {
if (ss.style.shape != 'arrow') 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, '', ['edge', 'curved', '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, '', ['edge', 'curved', '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, '', ['edge', 'elbow', 'curved', '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, '', ['edge', 'elbow', 'curved', '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, '', ['edge', 'elbow', 'curved', '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', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
if (ss.style.shape == 'connector') 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') 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, '', ['startArrow', 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
item.setAttribute('title', mxResources.get('none')); item.setAttribute('title', mxResources.get('none'));
item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>'; item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>';
if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') 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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['startArrow', 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false);
} }
else 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') 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, '', ['endArrow', 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
item.setAttribute('title', mxResources.get('none')); item.setAttribute('title', mxResources.get('none'));
item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>'; item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>';
if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') 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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['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, '', ['endArrow', 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false);
} }
else 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) if (force || document.activeElement != input)
{ {
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)); let tmp = parseInt(mxUtils.getValue(ss.style, 'strokeWidth', 1));
input.value = (isNaN(tmp)) ? '' : tmp + ' pt'; input.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
if (force || document.activeElement != altInput) if (force || document.activeElement != altInput)
{ {
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)); let tmp = parseInt(mxUtils.getValue(ss.style, 'strokeWidth', 1));
altInput.value = (isNaN(tmp)) ? '' : tmp + ' pt'; altInput.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
styleSelect.style.visibility = (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') ? '' : 'hidden'; 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'; 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'; 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; solid.style.borderBottom = '1px dashed ' + this.defaultStrokeColor;
} }
@ -5065,14 +5065,14 @@ StyleFormatPanel.prototype.addStroke = function(container)
if (edgeStyleDiv != null) 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; 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'; edgeStyleDiv.className = 'geSprite geSprite-curved';
} }
@ -5087,13 +5087,13 @@ StyleFormatPanel.prototype.addStroke = function(container)
else if (es == 'elbowEdgeStyle') else if (es == 'elbowEdgeStyle')
{ {
edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style, edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style,
mxConstants.STYLE_ELBOW, null) == 'vertical') ? 'elbow', null) == 'vertical') ?
'geSprite-verticalelbow' : 'geSprite-horizontalelbow'); 'geSprite-verticalelbow' : 'geSprite-horizontalelbow');
} }
else if (es == 'isometricEdgeStyle') else if (es == 'isometricEdgeStyle')
{ {
edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style, edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style,
mxConstants.STYLE_ELBOW, null) == 'vertical') ? 'elbow', null) == 'vertical') ?
'geSprite-verticalisometric' : 'geSprite-horizontalisometric'); 'geSprite-verticalisometric' : 'geSprite-horizontalisometric');
} }
else else
@ -5160,9 +5160,9 @@ StyleFormatPanel.prototype.addStroke = function(container)
return markerDiv; return markerDiv;
}; };
let sourceDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTARROW, null), let sourceDiv = updateArrow(mxUtils.getValue(ss.style, 'startArrow', null),
mxUtils.getValue(ss.style, 'startFill', '1'), lineStart, 'start'); 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, 'endArrow', null),
mxUtils.getValue(ss.style, 'endFill', '1'), lineEnd, 'end'); mxUtils.getValue(ss.style, 'endFill', '1'), lineEnd, 'end');
// Special cases for markers // Special cases for markers
@ -5195,40 +5195,40 @@ StyleFormatPanel.prototype.addStroke = function(container)
if (force || document.activeElement != startSize) 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'; startSize.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
if (force || document.activeElement != startSpacing) 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'; startSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
if (force || document.activeElement != endSize) 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'; endSize.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
if (force || document.activeElement != startSpacing) 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'; endSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
if (force || document.activeElement != perimeterSpacing) 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'; perimeterSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
} }
}); });
startSizeUpdate = this.installInputHandler(startSize, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt'); startSizeUpdate = this.installInputHandler(startSize, 'startSize', mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
startSpacingUpdate = this.installInputHandler(startSpacing, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0, -999, 999, ' pt'); startSpacingUpdate = this.installInputHandler(startSpacing, 'sourcePerimeterSpacing', 0, -999, 999, ' pt');
endSizeUpdate = this.installInputHandler(endSize, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt'); endSizeUpdate = this.installInputHandler(endSize, 'endSize', mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
endSpacingUpdate = this.installInputHandler(endSpacing, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0, -999, 999, ' pt'); endSpacingUpdate = this.installInputHandler(endSpacing, 'targetPerimeterSpacing', 0, -999, 999, ' pt');
perimeterUpdate = this.installInputHandler(perimeterSpacing, mxConstants.STYLE_PERIMETER_SPACING, 0, 0, 999, ' pt'); perimeterUpdate = this.installInputHandler(perimeterSpacing, 'perimeterSpacing', 0, 0, 999, ' pt');
this.addKeyHandler(input, listener); this.addKeyHandler(input, listener);
this.addKeyHandler(startSize, listener); this.addKeyHandler(startSize, listener);
@ -5401,7 +5401,7 @@ StyleFormatPanel.prototype.addEffects = function(div)
if (ss.rounded) if (ss.rounded)
{ {
addOption(mxResources.get('rounded'), mxConstants.STYLE_ROUNDED, 0); addOption(mxResources.get('rounded'), 'rounded', 0);
} }
if (ss.style.shape == 'swimlane') if (ss.style.shape == 'swimlane')
@ -5411,12 +5411,12 @@ StyleFormatPanel.prototype.addEffects = function(div)
if (!ss.containsImage) if (!ss.containsImage)
{ {
addOption(mxResources.get('shadow'), mxConstants.STYLE_SHADOW, 0); addOption(mxResources.get('shadow'), 'shadow', 0);
} }
if (ss.glass) if (ss.glass)
{ {
addOption(mxResources.get('glass'), mxConstants.STYLE_GLASS, 0); addOption(mxResources.get('glass'), 'glass', 0);
} }
addOption(mxResources.get('sketch'), 'sketch', 0); addOption(mxResources.get('sketch'), 'sketch', 0);
@ -5608,7 +5608,7 @@ DiagramStylePanel.prototype.addView = function(div)
let style = graph.getCellStyle(cells[i]); let style = graph.getCellStyle(cells[i]);
// Handles special label background color // Handles special label background color
if (style['labelBackgroundColor'] != null) if (style.labelBackgroundColor != null)
{ {
graph.updateCellStyles('labelBackgroundColor', (graphStyle != null) ? graph.updateCellStyles('labelBackgroundColor', (graphStyle != null) ?
graphStyle.background : null, [cells[i]]); graphStyle.background : null, [cells[i]]);
@ -5621,8 +5621,8 @@ DiagramStylePanel.prototype.addView = function(div)
for (let j = 0; j < styles.length; j++) for (let j = 0; j < styles.length; j++)
{ {
if ((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) || if ((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) ||
(styles[j] != mxConstants.STYLE_FILLCOLOR && (styles[j] != 'fillColor' &&
styles[j] != mxConstants.STYLE_STROKECOLOR)) styles[j] != 'strokeColor'))
{ {
newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]); newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]);
} }
@ -5645,8 +5645,8 @@ DiagramStylePanel.prototype.addView = function(div)
{ {
if (((style[styles[j]] != null && if (((style[styles[j]] != null &&
style[styles[j]] != mxConstants.NONE) || style[styles[j]] != mxConstants.NONE) ||
(styles[j] != mxConstants.STYLE_FILLCOLOR && (styles[j] != 'fillColor' &&
styles[j] != mxConstants.STYLE_STROKECOLOR))) styles[j] != 'strokeColor')))
{ {
style[styles[j]] = defaultStyle[styles[j]]; style[styles[j]] = defaultStyle[styles[j]];
} }
@ -5684,8 +5684,8 @@ DiagramStylePanel.prototype.addView = function(div)
{ {
if (cell == null || ((result[key] != null && if (cell == null || ((result[key] != null &&
result[key] != mxConstants.NONE) || result[key] != mxConstants.NONE) ||
(key != mxConstants.STYLE_FILLCOLOR && (key != 'fillColor' &&
key != mxConstants.STYLE_STROKECOLOR))) key != 'strokeColor')))
{ {
result[key] = style[key]; result[key] = style[key];
} }

154
docs/stashed/grapheditor/www/js/Graph.js
View File

@ -204,7 +204,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone)
{ {
let style = this.getCurrentCellStyle(cell); 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 // 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.view.graph.isHtmlLabel(state.cell))
{ {
if (state.style['html'] != 1) if (state.style.html != 1)
{ {
result = mxUtils.htmlEntities(result, false); result = mxUtils.htmlEntities(result, false);
} }
@ -1692,7 +1692,7 @@ Graph.prototype.init = function(container)
{ {
// Redirect editing for tables // Redirect editing for tables
let style = this.getCellStyle(cell); 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) || if (this.isTable(cell) && (!this.isSwimlane(cell) ||
size == 0) && this.getLabel(cell) == '' && size == 0) && this.getLabel(cell) == '' &&
@ -1701,7 +1701,7 @@ Graph.prototype.init = function(container)
cell = cell.getChildAt(0); cell = cell.getChildAt(0);
style = this.getCellStyle(cell); 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 // Redirect editing for table rows
@ -2358,20 +2358,20 @@ Graph.prototype.initLayoutManager = function()
{ {
let style = this.graph.getCellStyle(cell); let style = this.graph.getCellStyle(cell);
if (style['childLayout'] == 'stackLayout') if (style.childLayout == 'stackLayout')
{ {
let stackLayout = new mxStackLayout(this.graph, true); let stackLayout = new mxStackLayout(this.graph, true);
stackLayout.resizeParentMax = mxUtils.getValue(style, 'resizeParentMax', '1') == '1'; stackLayout.resizeParentMax = mxUtils.getValue(style, 'resizeParentMax', '1') == '1';
stackLayout.horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1'; stackLayout.horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1';
stackLayout.resizeParent = mxUtils.getValue(style, 'resizeParent', '1') == '1'; stackLayout.resizeParent = mxUtils.getValue(style, 'resizeParent', '1') == '1';
stackLayout.resizeLast = mxUtils.getValue(style, 'resizeLast', '0') == '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; stackLayout.fill = true;
if (stackLayout.allowGaps) if (stackLayout.allowGaps)
@ -2381,7 +2381,7 @@ Graph.prototype.initLayoutManager = function()
return stackLayout; return stackLayout;
} }
else if (style['childLayout'] == 'treeLayout') else if (style.childLayout == 'treeLayout')
{ {
let treeLayout = new mxCompactTreeLayout(this.graph); let treeLayout = new mxCompactTreeLayout(this.graph);
treeLayout.horizontal = mxUtils.getValue(style, 'horizontalTree', '1') == '1'; treeLayout.horizontal = mxUtils.getValue(style, 'horizontalTree', '1') == '1';
@ -2394,7 +2394,7 @@ Graph.prototype.initLayoutManager = function()
return treeLayout; return treeLayout;
} }
else if (style['childLayout'] == 'flowLayout') else if (style.childLayout == 'flowLayout')
{ {
let flowLayout = new mxHierarchicalLayout(this.graph, mxUtils.getValue(style, let flowLayout = new mxHierarchicalLayout(this.graph, mxUtils.getValue(style,
'flowOrientation', mxConstants.DIRECTION_EAST)); 'flowOrientation', mxConstants.DIRECTION_EAST));
@ -2414,15 +2414,15 @@ Graph.prototype.initLayoutManager = function()
return flowLayout; return flowLayout;
} }
else if (style['childLayout'] == 'circleLayout') else if (style.childLayout == 'circleLayout')
{ {
return new mxCircleLayout(this.graph); return new mxCircleLayout(this.graph);
} }
else if (style['childLayout'] == 'organicLayout') else if (style.childLayout == 'organicLayout')
{ {
return new mxFastOrganicLayout(this.graph); return new mxFastOrganicLayout(this.graph);
} }
else if (style['childLayout'] == 'tableLayout') else if (style.childLayout == 'tableLayout')
{ {
return new TableLayout(this.graph); return new TableLayout(this.graph);
} }
@ -3404,7 +3404,7 @@ Graph.prototype.getCellStyle = function(cell)
if (layout != null && layout.constructor == mxStackLayout) if (layout != null && layout.constructor == mxStackLayout)
{ {
style[mxConstants.STYLE_HORIZONTAL] = !layout.horizontal; style.horizontal = !layout.horizontal;
} }
} }
} }
@ -3602,11 +3602,11 @@ Graph.prototype.isContainer = function(cell)
if (this.isSwimlane(cell)) if (this.isSwimlane(cell))
{ {
return style['container'] != '0'; return style.container != '0';
} }
else else
{ {
return style['container'] == '1'; return style.container == '1';
} }
}; };
@ -3617,7 +3617,7 @@ Graph.prototype.isCellConnectable = function(cell)
{ {
let style = this.getCurrentCellStyle(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); mxGraph.prototype.isCellConnectable.apply(this, arguments);
}; };
@ -3628,7 +3628,7 @@ Graph.prototype.isLabelMovable = function(cell)
{ {
let style = this.getCurrentCellStyle(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); mxGraph.prototype.isLabelMovable.apply(this, arguments);
}; };
@ -3711,10 +3711,10 @@ Graph.prototype.isCellFoldable = function(cell)
{ {
let style = this.getCurrentCellStyle(cell); let style = this.getCurrentCellStyle(cell);
return this.foldingEnabled && (style['treeFolding'] == '1' || return this.foldingEnabled && (style.treeFolding == '1' ||
(!this.isCellLocked(cell) && (!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'))));
}; };
/** /**
@ -4392,11 +4392,11 @@ HoverIcons.prototype.drag = function(evt, x, y)
let es = this.graph.connectionHandler.edgeState; let es = this.graph.connectionHandler.edgeState;
if (evt != null && mxEvent.isShiftDown(evt) && mxEvent.isControlDown(evt) && es != null && 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(); let direction = this.getDirection();
es.cell.style = mxUtils.setStyle(es.cell.style, 'sourcePortConstraint', direction); 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) 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.arrowUp);
this.graph.container.appendChild(this.arrowDown); this.graph.container.appendChild(this.arrowDown);
@ -4916,7 +4916,7 @@ Graph.prototype.createCrossFunctionalSwimlane = function(rowCount, colCount, w,
let table = this.createVertex(null, null, '', 0, 0, let table = this.createVertex(null, null, '', 0, 0,
colCount * w, rowCount * h, tableStyle); 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); mxConstants.DEFAULT_STARTSIZE);
table.geometry.width += t; table.geometry.width += t;
table.geometry.height += t; table.geometry.height += t;
@ -4962,7 +4962,7 @@ Graph.prototype.isTable = function(cell)
{ {
let style = this.getCellStyle(cell); let style = this.getCellStyle(cell);
return style != null && style['childLayout'] == 'tableLayout'; return style != null && style.childLayout == 'tableLayout';
}; };
/** /**
@ -5391,7 +5391,7 @@ TableLayout.prototype.execute = function(parent)
// Forces repaint if jumps change on a valid edge // Forces repaint if jumps change on a valid edge
if (state != null && recurse && state.cell.isEdge() && 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)) !state.invalid && this.updateLineJumps(state))
{ {
this.graph.cellRenderer.redraw(state, false, this.isRendering()); 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 // Adds to the list of edges that may intersect with later edges
if (state != null && recurse && state.cell.isEdge() && 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 // LATER: Reuse jumps for valid edges
this.validEdges.push(state); this.validEdges.push(state);
@ -5431,7 +5431,7 @@ TableLayout.prototype.execute = function(parent)
// Updates jumps on invalid edge before repaint // Updates jumps on invalid edge before repaint
if (state.cell.isEdge() && if (state.cell.isEdge() &&
state.style[mxConstants.STYLE_CURVED] != 1) state.style.curved != 1)
{ {
this.updateLineJumps(state); this.updateLineJumps(state);
} }
@ -5494,7 +5494,7 @@ TableLayout.prototype.execute = function(parent)
var state2 = this.validEdges[e]; var state2 = this.validEdges[e];
var pts2 = state2.absolutePoints; 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 // Compares each segment of the edge with the current segment
for (let j = 0; j < pts2.length - 1; j++) for (let j = 0; j < pts2.length - 1; j++)
@ -5592,7 +5592,7 @@ TableLayout.prototype.execute = function(parent)
} }
else else
{ {
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, let arcSize = mxUtils.getValue(this.style, 'arcSize',
mxConstants.LINE_ARCSIZE) / 2; mxConstants.LINE_ARCSIZE) / 2;
let size = (parseInt(mxUtils.getValue(this.style, 'jumpSize', let size = (parseInt(mxUtils.getValue(this.style, 'jumpSize',
Graph.defaultJumpSize)) - 2) / 2 + this.strokewidth; Graph.defaultJumpSize)) - 2) / 2 + this.strokewidth;
@ -5713,14 +5713,14 @@ TableLayout.prototype.execute = function(parent)
mxGraphView.prototype.updateFloatingTerminalPoint = function(edge, start, end, source) mxGraphView.prototype.updateFloatingTerminalPoint = function(edge, start, end, source)
{ {
if (start != null && edge != null && 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); start = this.getTerminalPort(edge, start, source);
let next = this.getNextPoint(edge, end, source); let next = this.getNextPoint(edge, end, source);
let orth = this.graph.isOrthogonal(edge); 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()); let center = new mxPoint(start.getCenterX(), start.getCenterY());
if (alpha != 0) if (alpha != 0)
@ -5730,10 +5730,10 @@ TableLayout.prototype.execute = function(parent)
next = mxUtils.getRotatedPoint(next, cos, sin, center); 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) ? border += parseFloat(edge.style[(source) ?
mxConstants.STYLE_SOURCE_PERIMETER_SPACING : 'sourcePerimeterSpacing' :
mxConstants.STYLE_TARGET_PERIMETER_SPACING] || 0); 'targetPerimeterSpacing'] || 0);
let pt = this.getPerimeterPoint(start, next, alpha == 0 && orth, border); let pt = this.getPerimeterPoint(start, next, alpha == 0 && orth, border);
if (alpha != 0) if (alpha != 0)
@ -5817,7 +5817,7 @@ TableLayout.prototype.execute = function(parent)
{ {
if (state.style != null && typeof(pako) !== 'undefined') 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) // Extracts and decodes stencil XML if shape has the form shape=stencil(value)
if (shape != null && typeof shape === 'string' && shape.substring(0, 8) == 'stencil(') 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); let shape = connectionHandlerCreateShape.apply(this, arguments);
shape.isDashed = this.graph.currentEdgeStyle[mxConstants.STYLE_DASHED] == '1'; shape.isDashed = this.graph.currentEdgeStyle.dashed == '1';
return shape; return shape;
} }
@ -6548,7 +6548,7 @@ if (typeof mxVertexHandler != 'undefined')
!cell.isEdge()) !cell.isEdge())
{ {
let shape = this.getCurrentCellStyle(cell, ignoreState) let shape = this.getCurrentCellStyle(cell, ignoreState)
[mxConstants.STYLE_SHAPE]; .shape;
return shape == mxConstants.SHAPE_SWIMLANE || shape == 'table'; return shape == mxConstants.SHAPE_SWIMLANE || shape == 'table';
} }
@ -6568,9 +6568,9 @@ if (typeof mxVertexHandler != 'undefined')
{ {
let style = this.getCurrentCellStyle(parent); let style = this.getCurrentCellStyle(parent);
if (style['expand'] != null) if (style.expand != null)
{ {
return style['expand'] != '0'; return style.expand != '0';
} }
} }
@ -6985,11 +6985,11 @@ if (typeof mxVertexHandler != 'undefined')
if (edge != null) if (edge != null)
{ {
let style = this.getCurrentCellStyle(edge); let style = this.getCurrentCellStyle(edge);
let elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW, let elbow = mxUtils.getValue(style, 'elbow',
mxConstants.ELBOW_HORIZONTAL); mxConstants.ELBOW_HORIZONTAL);
let value = (elbow == mxConstants.ELBOW_HORIZONTAL) ? let value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
mxConstants.ELBOW_VERTICAL : 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, let dirs = [mxConstants.DIRECTION_EAST, mxConstants.DIRECTION_SOUTH,
mxConstants.DIRECTION_WEST, mxConstants.DIRECTION_NORTH]; 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); mxConstants.DIRECTION_EAST);
this.setCellStyles(mxConstants.STYLE_DIRECTION, this.setCellStyles('direction',
dirs[mxUtils.mod(mxUtils.indexOf(dirs, dir) + dirs[mxUtils.mod(mxUtils.indexOf(dirs, dir) +
((backwards) ? -1 : 1), dirs.length)], [cell]); ((backwards) ? -1 : 1), dirs.length)], [cell]);
} }
@ -8235,8 +8235,8 @@ if (typeof mxVertexHandler != 'undefined')
let style = this.getCurrentCellStyle(cell); let style = this.getCurrentCellStyle(cell);
return !this.isTableCell(cell) && !this.isTableRow(cell) && (result || return !this.isTableCell(cell) && !this.isTableRow(cell) && (result ||
(mxUtils.getValue(style, mxConstants.STYLE_RESIZABLE, '1') != '0' && (mxUtils.getValue(style, 'resizable', '1') != '0' &&
style[mxConstants.STYLE_WHITE_SPACE] == 'wrap')); style.whiteSpace == 'wrap'));
}; };
/** /**
@ -9428,7 +9428,7 @@ if (typeof mxVertexHandler != 'undefined')
{ {
let state = this.graph.view.getState(this.editingCell); 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 // dashed borders for divs and table cells
let state = this.graph.view.getState(cell); 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'; this.textarea.className = 'mxCellEditor geContentEditable';
} }
@ -9818,22 +9818,22 @@ if (typeof mxVertexHandler != 'undefined')
content = this.graph.sanitizeHtml((nl2Br) ? content.replace(/\n/g, '<br/>') : content, true) content = this.graph.sanitizeHtml((nl2Br) ? content.replace(/\n/g, '<br/>') : content, true)
this.textarea.className = 'mxCellEditor geContentEditable'; this.textarea.className = 'mxCellEditor geContentEditable';
let size = mxUtils.getValue(state.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE); let size = mxUtils.getValue(state.style, 'fontSize', mxConstants.DEFAULT_FONTSIZE);
let family = mxUtils.getValue(state.style, mxConstants.STYLE_FONTFAMILY, mxConstants.DEFAULT_FONTFAMILY); let family = mxUtils.getValue(state.style, 'fontFamily', mxConstants.DEFAULT_FONTFAMILY);
let align = mxUtils.getValue(state.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_LEFT); let align = mxUtils.getValue(state.style, 'align', mxConstants.ALIGN_LEFT);
let bold = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) & let bold = (mxUtils.getValue(state.style, 'fontStyle', 0) &
mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD; 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; mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC;
let txtDecor = []; let txtDecor = [];
if ((mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) & if ((mxUtils.getValue(state.style, 'fontStyle', 0) &
mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE) mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE)
{ {
txtDecor.push('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) mxConstants.FONT_STRIKETHROUGH) == mxConstants.FONT_STRIKETHROUGH)
{ {
txtDecor.push('line-through'); txtDecor.push('line-through');
@ -9897,8 +9897,8 @@ if (typeof mxVertexHandler != 'undefined')
if (m == null) if (m == null)
{ {
m = mxUtils.getAlignmentAsPoint(mxUtils.getValue(state.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER), m = mxUtils.getAlignmentAsPoint(mxUtils.getValue(state.style, 'align', mxConstants.ALIGN_CENTER),
mxUtils.getValue(state.style, mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE)); mxUtils.getValue(state.style, 'verticalAlign', mxConstants.ALIGN_MIDDLE));
} }
this.bounds.x += m.x * this.bounds.width; this.bounds.x += m.x * this.bounds.width;
@ -10038,14 +10038,14 @@ if (typeof mxVertexHandler != 'undefined')
*/ */
mxCellEditor.prototype.getBackgroundColor = function(state) 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) && if ((color == null || color == mxConstants.NONE) &&
(state.cell.geometry != null && state.cell.geometry.width > 0) && (state.cell.geometry != null && state.cell.geometry.width > 0) &&
(mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0) != 0 || (mxUtils.getValue(state.style, 'rotation', 0) != 0 ||
mxUtils.getValue(state.style, mxConstants.STYLE_HORIZONTAL, 1) == 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) if (color == mxConstants.NONE)
@ -10157,7 +10157,7 @@ if (typeof mxVertexHandler != 'undefined')
stackLayoutResizeCell.apply(this, arguments); stackLayoutResizeCell.apply(this, arguments);
let style = this.graph.getCellStyle(cell); let style = this.graph.getCellStyle(cell);
if (style['childLayout'] == null) if (style.childLayout == null)
{ {
let parent = cell.getParent(); let parent = cell.getParent();
let geo = (parent != null) ? parent.getGeometry() : null; let geo = (parent != null) ? parent.getGeometry() : null;
@ -10166,7 +10166,7 @@ if (typeof mxVertexHandler != 'undefined')
{ {
style = this.graph.getCellStyle(parent); style = this.graph.getCellStyle(parent);
if (style['childLayout'] == 'stackLayout') if (style.childLayout == 'stackLayout')
{ {
let border = parseFloat(mxUtils.getValue(style, 'stackBorder', mxStackLayout.prototype.border)); let border = parseFloat(mxUtils.getValue(style, 'stackBorder', mxStackLayout.prototype.border));
let horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1'; let horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1';
@ -10675,7 +10675,7 @@ if (typeof mxVertexHandler != 'undefined')
{ {
let result = new mxPoint(0, 0); let result = new mxPoint(0, 0);
let tol = this.tolerance; let tol = this.tolerance;
let name = this.state.style['shape']; let name = this.state.style.shape;
if (mxCellRenderer.defaultShapes[name] == null && if (mxCellRenderer.defaultShapes[name] == null &&
mxStencilRegistry.getStencil(name) == null) mxStencilRegistry.getStencil(name) == null)
@ -10760,7 +10760,7 @@ if (typeof mxVertexHandler != 'undefined')
formatHintText(this.roundLength(this.bounds.height / s), unit); 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); let bb = mxUtils.getBoundingBox(this.bounds, rot);
if (bb == null) if (bb == null)
@ -11413,14 +11413,14 @@ if (typeof mxVertexHandler != 'undefined')
// Invokes turn on single click on rotation handle // Invokes turn on single click on rotation handle
mxVertexHandler.prototype.rotateClick = function() mxVertexHandler.prototype.rotateClick = function()
{ {
let stroke = mxUtils.getValue(this.state.style, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE); let stroke = mxUtils.getValue(this.state.style, 'strokeColor', mxConstants.NONE);
let fill = mxUtils.getValue(this.state.style, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE); let fill = mxUtils.getValue(this.state.style, 'fillColor', mxConstants.NONE);
if (this.state.cell.isVertex() && if (this.state.cell.isVertex() &&
stroke == mxConstants.NONE && fill == mxConstants.NONE) stroke == mxConstants.NONE && fill == mxConstants.NONE)
{ {
let angle = mxUtils.mod(mxUtils.getValue(this.state.style, mxConstants.STYLE_ROTATION, 0) + 90, 360); let angle = mxUtils.mod(mxUtils.getValue(this.state.style, 'rotation', 0) + 90, 360);
this.state.view.graph.setCellStyles(mxConstants.STYLE_ROTATION, angle, [this.state.cell]); this.state.view.graph.setCellStyles('rotation', angle, [this.state.cell]);
} }
else else
{ {
@ -11755,9 +11755,9 @@ if (typeof mxVertexHandler != 'undefined')
{ {
let c = new mxPoint(this.state.getCenterX(), this.state.getCenterY()); 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 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, 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; let tb = (this.state.text != null) ? this.state.text.boundingBox : null;
if (bb == null) if (bb == null)

22
docs/stashed/grapheditor/www/js/Menus.js
View File

@ -53,7 +53,7 @@ Menus.prototype.init = function()
{ {
let addItem = mxUtils.bind(this, function(fontname) 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); document.execCommand('fontname', false, fontname);
}, function() }, function()
@ -97,7 +97,7 @@ Menus.prototype.init = function()
menu.addSeparator(parent); 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) if (mxUtils.indexOf(this.customFonts, newValue) < 0)
{ {
@ -139,7 +139,7 @@ Menus.prototype.init = function()
let addItem = mxUtils.bind(this, function(fontsize) 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) if (graph.cellEditor.textarea != null)
{ {
@ -189,15 +189,15 @@ Menus.prototype.init = function()
menu.addSeparator(parent); 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.customFontSizes.push(newValue);
})); }));
}))); })));
this.put('direction', new Menu(mxUtils.bind(this, function(menu, parent) 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('flipH'), null, function() { graph.toggleCellStyles('flipH', false); }, parent);
menu.addItem(mxResources.get('flipV'), null, function() { graph.toggleCellStyles(mxConstants.STYLE_FLIPV, false); }, parent); menu.addItem(mxResources.get('flipV'), null, function() { graph.toggleCellStyles('flipV', false); }, parent);
this.addMenuItems(menu, ['-', 'rotation'], parent); this.addMenuItems(menu, ['-', 'rotation'], parent);
}))); })));
this.put('align', new Menu(mxUtils.bind(this, function(menu, 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); graph.setCellStyles(keys[i], values[i], cells);
// Removes CSS alignment to produce consistent output // Removes CSS alignment to produce consistent output
if (keys[i] == mxConstants.STYLE_ALIGN) if (keys[i] == 'align')
{ {
graph.updateLabelElements(cells, function(elt) graph.updateLabelElements(cells, function(elt)
{ {
@ -873,7 +873,7 @@ Menus.prototype.createStyleChangeFunction = function(keys, values)
} }
// Updates autosize after font changes // Updates autosize after font changes
if (keys[i] == mxConstants.STYLE_FONTFAMILY) if (keys[i] == 'fontFamily')
{ {
for (let j = 0; j < cells.length; j++) for (let j = 0; j < cells.length; j++)
{ {
@ -1164,8 +1164,8 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt)
{ {
let hasWaypoints = false; let hasWaypoints = false;
if (cell.isEdge() && mxUtils.getValue(state.style, mxConstants.STYLE_EDGE, null) != 'entityRelationEdgeStyle' && if (cell.isEdge() && mxUtils.getValue(state.style, 'edge', null) != 'entityRelationEdgeStyle' &&
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) != 'arrow') mxUtils.getValue(state.style, 'shape', null) != 'arrow')
{ {
let handler = graph.selectionCellsHandler.getHandler(cell); let handler = graph.selectionCellsHandler.getHandler(cell);
let isWaypoint = false; let isWaypoint = false;
@ -1203,7 +1203,7 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt)
this.addMenuItems(menu, ['-', 'editStyle', 'editData', 'editLink'], null, evt); this.addMenuItems(menu, ['-', 'editStyle', 'editData', 'editLink'], null, evt);
// Shows edit image action if there is an image in the style // 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(); menu.addSeparator();
this.addMenuItem(menu, 'image', null, evt).firstChild.nextSibling.innerHTML = mxResources.get('editImage') + '...'; this.addMenuItem(menu, 'image', null, evt).firstChild.nextSibling.innerHTML = mxResources.get('editImage') + '...';

280
docs/stashed/grapheditor/www/js/Shapes.js
View File

@ -22,7 +22,7 @@
if (this.style != null) if (this.style != null)
{ {
events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1'; events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
} }
if (!events) if (!events)
@ -866,7 +866,7 @@
CardShape.prototype.redrawPath = function(c, x, y, w, h) 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 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.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); this.isRounded, arcSize, true);
c.end(); c.end();
@ -1093,7 +1093,7 @@
let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0'; 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 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.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w, 0), new mxPoint(w - dx, h)],
this.isRounded, arcSize, true); this.isRounded, arcSize, true);
c.end(); c.end();
@ -1119,7 +1119,7 @@
let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0'; 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 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.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w - dx, 0), new mxPoint(w, h)],
this.isRounded, arcSize, true); this.isRounded, arcSize, true);
}; };
@ -1137,7 +1137,7 @@
{ {
c.setFillColor(null); c.setFillColor(null);
let s = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); 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), 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(0, h / 2), new mxPoint(s, h / 2), new mxPoint(s, h),
new mxPoint(w, h)], this.isRounded, arcSize, false); new mxPoint(w, h)], this.isRounded, arcSize, false);
@ -1377,7 +1377,7 @@
if (this.style != null) if (this.style != null)
{ {
events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1'; events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
} }
if (events || (this.fill != null && this.fill != mxConstants.NONE) || if (events || (this.fill != null && this.fill != mxConstants.NONE) ||
@ -1394,14 +1394,14 @@
{ {
let r = 0; 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, 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 else
{ {
let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, let f = mxUtils.getValue(this.style, 'arcSize',
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100; mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
r = Math.min(w * f, h * f); r = Math.min(w * f, h * f);
} }
@ -1463,7 +1463,7 @@
}; };
ProcessShape.prototype.getLabelBounds = function(rect) 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 == null ||
this.direction == mxConstants.DIRECTION_EAST || this.direction == mxConstants.DIRECTION_EAST ||
this.direction == mxConstants.DIRECTION_WEST)) this.direction == mxConstants.DIRECTION_WEST))
@ -1476,7 +1476,7 @@
if (this.isRounded) 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; mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
inset = Math.max(inset, Math.min(w * f, h * f)); inset = Math.max(inset, Math.min(w * f, h * f));
} }
@ -1506,7 +1506,7 @@
if (this.isRounded) 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; mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
inset = Math.max(inset, Math.min(w * f, h * f)); inset = Math.max(inset, Math.min(w * f, h * f));
} }
@ -1563,7 +1563,7 @@
}; };
CalloutShape.prototype.redrawPath = function(c, x, y, w, h) 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 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)))); 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)))); 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 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)))) : 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)))); 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), 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); new mxPoint(0, h), new mxPoint(s, h / 2)], this.isRounded, arcSize, true);
c.end(); c.end();
@ -1619,7 +1619,7 @@
let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0'; 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)))) : 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)))); 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), 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); new mxPoint(s, h), new mxPoint(0, 0.5 * h)], this.isRounded, arcSize, true);
}; };
@ -1656,10 +1656,10 @@
let mxRhombusPaintVertexShape = mxRhombus.prototype.paintVertexShape; let mxRhombusPaintVertexShape = mxRhombus.prototype.paintVertexShape;
mxRhombus.prototype.getLabelBounds = function(rect) 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( let margin = (Math.max(2, this.strokewidth + 1) * 2 + parseFloat(
this.style[mxConstants.STYLE_MARGIN] || 0)) * this.scale; this.style['margin'] || 0)) * this.scale;
return new mxRectangle(rect.x + margin, rect.y + margin, return new mxRectangle(rect.x + margin, rect.y + margin,
rect.width - 2 * margin, rect.height - 2 * margin); rect.width - 2 * margin, rect.height - 2 * margin);
@ -1671,10 +1671,10 @@
{ {
mxRhombusPaintVertexShape.apply(this, arguments); 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 + let margin = Math.max(2, this.strokewidth + 1) * 2 +
parseFloat(this.style[mxConstants.STYLE_MARGIN] || 0); parseFloat(this.style['margin'] || 0);
x += margin; x += margin;
y += margin; y += margin;
w -= 2 * margin; w -= 2 * margin;
@ -1703,10 +1703,10 @@
}; };
ExtendedShape.prototype.getLabelBounds = function(rect) ExtendedShape.prototype.getLabelBounds = function(rect)
{ {
if (this.style['double'] == 1) if (this.style.double == 1)
{ {
let margin = (Math.max(2, this.strokewidth + 1) + parseFloat( let margin = (Math.max(2, this.strokewidth + 1) + parseFloat(
this.style[mxConstants.STYLE_MARGIN] || 0)) * this.scale; this.style['margin'] || 0)) * this.scale;
return new mxRectangle(rect.x + margin, rect.y + margin, return new mxRectangle(rect.x + margin, rect.y + margin,
rect.width - 2 * margin, rect.height - 2 * margin); rect.width - 2 * margin, rect.height - 2 * margin);
@ -1719,9 +1719,9 @@
{ {
if (this.style != null) 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.STYLE_MARGIN] || 0); let margin = Math.max(2, this.strokewidth + 1) + parseFloat(this.style['margin'] || 0);
x += margin; x += margin;
y += margin; y += margin;
w -= 2 * margin; w -= 2 * margin;
@ -2069,7 +2069,7 @@
let co = this.corner; let co = this.corner;
var w0 = Math.min(w, Math.max(co, parseFloat(mxUtils.getValue(this.style, 'width', this.width)))); 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)))); 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) if (bg != mxConstants.NONE)
{ {
@ -2117,7 +2117,7 @@
size = mxUtils.getValue(vertex.style, 'size', size) * vertex.view.scale; 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()) if (next.x < bounds.getCenterX())
{ {
@ -2142,15 +2142,15 @@
mxPerimeter.BackbonePerimeter = (bounds, vertex, next, orthogonal) => 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) 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[mxConstants.STYLE_DIRECTION] == 'south' || if (vertex.style.direction == 'south' ||
vertex.style[mxConstants.STYLE_DIRECTION] == 'north') vertex.style.direction == 'north')
{ {
if (next.x < bounds.getCenterX()) if (next.x < bounds.getCenterX())
{ {
@ -2209,7 +2209,7 @@
let h = bounds.height; let h = bounds.height;
let direction = (vertex != null) ? mxUtils.getValue( let direction = (vertex != null) ? mxUtils.getValue(
vertex.style, mxConstants.STYLE_DIRECTION, vertex.style, 'direction',
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
let vertical = direction == mxConstants.DIRECTION_NORTH || let vertical = direction == mxConstants.DIRECTION_NORTH ||
direction == mxConstants.DIRECTION_SOUTH; direction == mxConstants.DIRECTION_SOUTH;
@ -2272,7 +2272,7 @@
let h = bounds.height; let h = bounds.height;
let direction = (vertex != null) ? mxUtils.getValue( let direction = (vertex != null) ? mxUtils.getValue(
vertex.style, mxConstants.STYLE_DIRECTION, vertex.style, 'direction',
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
let points = []; let points = [];
@ -2348,7 +2348,7 @@
let cy = bounds.getCenterY(); let cy = bounds.getCenterY();
let direction = (vertex != null) ? mxUtils.getValue( let direction = (vertex != null) ? mxUtils.getValue(
vertex.style, mxConstants.STYLE_DIRECTION, vertex.style, 'direction',
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
var points; var points;
@ -2425,7 +2425,7 @@
let cy = bounds.getCenterY(); let cy = bounds.getCenterY();
let direction = (vertex != null) ? mxUtils.getValue( let direction = (vertex != null) ? mxUtils.getValue(
vertex.style, mxConstants.STYLE_DIRECTION, vertex.style, 'direction',
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
let vertical = direction == mxConstants.DIRECTION_NORTH || let vertical = direction == mxConstants.DIRECTION_NORTH ||
direction == mxConstants.DIRECTION_SOUTH; direction == mxConstants.DIRECTION_SOUTH;
@ -2676,7 +2676,7 @@
let hw = w / 2; let hw = w / 2;
let hh = h / 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(); c.begin();
this.addPoints(c, [new mxPoint(x + hw, y), new mxPoint(x + w, y + hh), new mxPoint(x + hw, y + h), 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); new mxPoint(x, y + hh)], this.isRounded, arcSize, true);
@ -2793,7 +2793,7 @@
ManualInputShape.prototype.redrawPath = function(c, x, y, w, h) ManualInputShape.prototype.redrawPath = function(c, x, y, w, h)
{ {
let s = Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))); 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.addPoints(c, [new mxPoint(0, h), new mxPoint(0, s), new mxPoint(w, 0), new mxPoint(w, h)],
this.isRounded, arcSize, true); this.isRounded, arcSize, true);
c.end(); c.end();
@ -2820,7 +2820,7 @@
if (this.isRounded) 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; mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
inset = Math.max(inset, Math.min(w * f, h * f)); 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 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 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), 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); new mxPoint(dx, h), new mxPoint(0, h)], this.isRounded, arcSize, true);
c.end(); c.end();
@ -2908,7 +2908,7 @@
var w2 = Math.abs(w - dx) / 2; 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 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), 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((w + dx) / 2, h), new mxPoint((w - dx) / 2, h), new mxPoint((w - dx) / 2, dy),
new mxPoint(0, dy)], this.isRounded, arcSize, true); new mxPoint(0, dy)], this.isRounded, arcSize, true);
@ -2932,7 +2932,7 @@
let at = (h - aw) / 2; let at = (h - aw) / 2;
let ab = at + aw; 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), 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)], new mxPoint(w - as, h), new mxPoint(w - as, ab), new mxPoint(0, ab)],
this.isRounded, arcSize, true); this.isRounded, arcSize, true);
@ -2954,7 +2954,7 @@
let at = (h - aw) / 2; let at = (h - aw) / 2;
let ab = at + aw; 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), 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, 0), new mxPoint(w, h / 2), new mxPoint(w - as, h),
new mxPoint(w - as, ab), new mxPoint(as, ab), new mxPoint(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) 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 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), 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); new mxPoint(0, h), new mxPoint(0, s * 0.8)], this.isRounded, arcSize, true);
c.end(); c.end();
@ -3060,7 +3060,7 @@
OffPageConnectorShape.prototype.redrawPath = function(c, x, y, w, h) 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 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), 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); new mxPoint(0, h - s)], this.isRounded, arcSize, true);
c.end(); c.end();
@ -3236,7 +3236,7 @@
if (this.style != null) if (this.style != null)
{ {
let pointerEvents = c.pointerEvents; let pointerEvents = c.pointerEvents;
let events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1'; let events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
if (!events && (this.fill == null || this.fill == mxConstants.NONE)) if (!events && (this.fill == null || this.fill == mxConstants.NONE))
{ {
@ -3760,36 +3760,36 @@
function createArcHandle(state, yOffset) 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; 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); return new mxPoint(bounds.x + bounds.width - Math.min(bounds.width / 2, arcSize), bounds.y + tmp);
} }
else else
{ {
let arcSize = Math.max(0, parseFloat(mxUtils.getValue(state.style, 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), 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); Math.min(bounds.width, bounds.height) * arcSize), bounds.y + tmp);
} }
}, function(bounds, pt, me) }, 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))); (bounds.x + bounds.width - pt.x) * 2)));
} }
else else
{ {
let f = Math.min(50, Math.max(0, (bounds.width - pt.x + bounds.x) * 100 / let f = Math.min(50, Math.max(0, (bounds.width - pt.x + bounds.x) * 100 /
Math.min(bounds.width, bounds.height))); 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 = []; let handles = [];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) if (mxUtils.getValue(state.style, 'rounded', false))
{ {
handles.push(createArcHandle(state)); handles.push(createArcHandle(state));
} }
@ -3826,10 +3826,10 @@
let fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null; 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)); 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)]; }, false, true)];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) if (mxUtils.getValue(state.style, 'rounded', false))
{ {
handles.push(createArcHandle(state)); handles.push(createArcHandle(state));
} }
@ -3855,10 +3855,10 @@
let fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null; 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)); 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)]; }, false, redrawEdges)];
if (allowArcHandle && mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false))
{ {
handles.push(createArcHandle(state)); handles.push(createArcHandle(state));
} }
@ -3879,11 +3879,11 @@
return new mxPoint(bounds.x + size, bounds.y + size); return new mxPoint(bounds.x + size, bounds.y + size);
}, function(bounds, pt) }, 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); Math.min(bounds.height, pt.y - bounds.y))) / factor);
}, false)]; }, false)];
if (allowArcHandle && mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false))
{ {
handles.push(createArcHandle(state)); handles.push(createArcHandle(state));
} }
@ -3903,7 +3903,7 @@
return new mxPoint(bounds.x, bounds.y + size); return new mxPoint(bounds.x, bounds.y + size);
}, function(bounds, pt) }, 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)]; }, true)];
} }
}; };
@ -3920,8 +3920,8 @@
return new mxPoint(bounds.x + (1 - as) * bounds.width, bounds.y + (1 - aw) * bounds.height / 2); return new mxPoint(bounds.x + (1 - as) * bounds.width, bounds.y + (1 - aw) * bounds.height / 2);
}, function(bounds, pt) }, 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) }, 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)); 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;
}); });
}; };
@ -3999,12 +3999,12 @@
let tol = state.view.graph.gridSize / state.view.scale; let tol = state.view.graph.gridSize / state.view.scale;
let handles = []; let handles = [];
if (mxUtils.getValue(state.style, mxConstants.STYLE_STARTARROW, mxConstants.NONE) != mxConstants.NONE) if (mxUtils.getValue(state.style, '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 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, 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); 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 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); 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; state.style.width = Math.round(w * 2) / state.view.scale;
// Applies to opposite side // Applies to opposite side
if (mxEvent.isControlDown(me.getEvent())) 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 // Snaps to end geometry
if (!mxEvent.isAltDown(me.getEvent())) 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 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, 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); p0.y + ny * (l + state.shape.strokewidth * state.view.scale) - nx * w / 2);
@ -4044,38 +4044,38 @@
let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); 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); 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; state.style.startWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
// Applies to opposite side // Applies to opposite side
if (mxEvent.isControlDown(me.getEvent())) 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']; state.style.endWidth = state.style.startWidth;
} }
// Snaps to endWidth // Snaps to endWidth
if (!mxEvent.isAltDown(me.getEvent())) 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) if (Math.abs(parseFloat(state.style.startWidth) - parseFloat(state.style.endWidth)) < tol)
{ {
state.style['startWidth'] = state.style['endWidth']; state.style.startWidth = state.style.endWidth;
} }
} }
})); }));
} }
if (mxUtils.getValue(state.style, mxConstants.STYLE_ENDARROW, mxConstants.NONE) != mxConstants.NONE) if (mxUtils.getValue(state.style, '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 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, 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); 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 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); 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; state.style.width = Math.round(w * 2) / state.view.scale;
// Applies to opposite side // Applies to opposite side
if (mxEvent.isControlDown(me.getEvent())) 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 // Snaps to start geometry
if (!mxEvent.isAltDown(me.getEvent())) 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 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, 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); p0.y + ny * (l + state.shape.strokewidth * state.view.scale) + nx * w / 2);
@ -4115,27 +4115,27 @@
let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); 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); 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; state.style.endWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
// Applies to opposite side // Applies to opposite side
if (mxEvent.isControlDown(me.getEvent())) 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']; state.style.startWidth = state.style.endWidth;
} }
// Snaps to start geometry // Snaps to start geometry
if (!mxEvent.isAltDown(me.getEvent())) 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) if (Math.abs(parseFloat(state.style.endWidth) - parseFloat(state.style.startWidth)) < tol)
{ {
state.style['endWidth'] = state.style['startWidth']; state.style.endWidth = state.style.startWidth;
} }
} }
})); }));
@ -4147,18 +4147,18 @@
{ {
let handles = []; 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)); 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) // 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))); return new mxPoint(bounds.getCenterX(), bounds.y + Math.max(0, Math.min(bounds.height, size)));
} }
@ -4168,8 +4168,8 @@
} }
}, function(bounds, pt) }, function(bounds, pt)
{ {
state.style[mxConstants.STYLE_STARTSIZE] = state.style.startSize =
(mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, 1) == 1) ? (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.height, pt.y - bounds.y))) :
Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x))); Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
}, false, null, function(me) }, false, null, function(me)
@ -4196,8 +4196,8 @@
} }
} }
graph.setCellStyles(mxConstants.STYLE_STARTSIZE, graph.setCellStyles('startSize',
state.style[mxConstants.STYLE_STARTSIZE], temp); state.style.startSize, temp);
} }
} }
})); }));
@ -4218,7 +4218,7 @@
return new mxPoint(bounds.getCenterX(), bounds.y + size); return new mxPoint(bounds.getCenterX(), bounds.y + size);
}, function(bounds, pt) }, 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)]; }, false)];
}, },
'umlFrame': function(state) 'umlFrame': function(state)
@ -4231,8 +4231,8 @@
return new mxPoint(bounds.x + w0, bounds.y + h0); return new mxPoint(bounds.x + w0, bounds.y + h0);
}, function(bounds, pt) }, 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)]; }, false)];
return handles; return handles;
@ -4250,10 +4250,10 @@
{ {
let fixed = mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0'; 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)); 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)]; }, false)];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) if (mxUtils.getValue(state.style, 'rounded', false))
{ {
handles.push(createArcHandle(state)); handles.push(createArcHandle(state));
} }
@ -4271,7 +4271,7 @@
}, function(bounds, pt) }, function(bounds, pt)
{ {
let m = Math.min(bounds.width, bounds.height); 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))); (Math.max(0, bounds.getCenterX() - pt.x) / m) * 2)));
})]; })];
}, },
@ -4285,7 +4285,7 @@
return new mxPoint(bounds.x + bounds.width - size, bounds.y + size); return new mxPoint(bounds.x + bounds.width - size, bounds.y + size);
}, function(bounds, pt) }, 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)))); Math.min(bounds.height, pt.y - bounds.y))));
})]; })];
}, },
@ -4299,7 +4299,7 @@
return new mxPoint(bounds.x + bounds.width - size, bounds.y + size); return new mxPoint(bounds.x + bounds.width - size, bounds.y + size);
}, function(bounds, pt) }, 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)))); Math.min(bounds.height, pt.y - bounds.y))));
})]; })];
}, },
@ -4312,10 +4312,10 @@
return new mxPoint(bounds.x + bounds.width / 4, bounds.y + size * 3 / 4); return new mxPoint(bounds.x + bounds.width / 4, bounds.y + size * 3 / 4);
}, function(bounds, pt) }, 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)]; }, false)];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) if (mxUtils.getValue(state.style, 'rounded', false))
{ {
handles.push(createArcHandle(state)); handles.push(createArcHandle(state));
} }
@ -4335,7 +4335,7 @@
let fixed = mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0'; 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)); 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)]; }, false)];
}, },
'callout': function(state) 'callout': function(state)
@ -4350,8 +4350,8 @@
}, function(bounds, pt) }, function(bounds, pt)
{ {
let base = Math.max(0, Math.min(bounds.width, mxUtils.getValue(this.state.style, 'base', CalloutShape.prototype.base))); 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) }, false), createHandle(state, ['position2'], function(bounds)
{ {
var position2 = Math.max(0, Math.min(1, mxUtils.getValue(this.state.style, 'position2', CalloutShape.prototype.position2))); var position2 = Math.max(0, Math.min(1, mxUtils.getValue(this.state.style, 'position2', CalloutShape.prototype.position2)));
@ -4371,10 +4371,10 @@
{ {
let position = Math.max(0, Math.min(1, mxUtils.getValue(this.state.style, 'position', CalloutShape.prototype.position))); 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)]; }, false)];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) if (mxUtils.getValue(state.style, 'rounded', false))
{ {
handles.push(createArcHandle(state)); handles.push(createArcHandle(state));
} }
@ -4391,11 +4391,11 @@
return new mxPoint(bounds.x + dx, bounds.y + dy); return new mxPoint(bounds.x + dx, bounds.y + dy);
}, function(bounds, pt) }, 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)]; }, false)];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) if (mxUtils.getValue(state.style, 'rounded', false))
{ {
handles.push(createArcHandle(state)); handles.push(createArcHandle(state));
} }
@ -4412,8 +4412,8 @@
return new mxPoint(bounds.x + dx / 2, bounds.y + dy * 2); return new mxPoint(bounds.x + dx / 2, bounds.y + dy * 2);
}, function(bounds, pt) }, 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; return handles;
@ -4428,8 +4428,8 @@
return new mxPoint(bounds.x + dx, bounds.y + dy); return new mxPoint(bounds.x + dx, bounds.y + dy);
}, function(bounds, pt) }, 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)]; }, false)];
}, },
'tee': function(state) 'tee': function(state)
@ -4442,8 +4442,8 @@
return new mxPoint(bounds.x + (bounds.width + dx) / 2, bounds.y + dy); return new mxPoint(bounds.x + (bounds.width + dx) / 2, bounds.y + dy);
}, function(bounds, pt) }, 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)]; }, false)];
}, },
'singleArrow': createArrowHandleFunction(1), 'singleArrow': createArrowHandleFunction(1),
@ -4470,8 +4470,8 @@
tw = bounds.width - tw; 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)]; }, false)];
}, },
'document': function(state) 'document': function(state)
@ -4483,7 +4483,7 @@
return new mxPoint(bounds.x + 3 * bounds.width / 4, bounds.y + (1 - size) * bounds.height); return new mxPoint(bounds.x + 3 * bounds.width / 4, bounds.y + (1 - size) * bounds.height);
}, function(bounds, pt) }, 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)]; }, false)];
}, },
'tape': function(state) 'tape': function(state)
@ -4495,7 +4495,7 @@
return new mxPoint(bounds.getCenterX(), bounds.y + size * bounds.height / 2); return new mxPoint(bounds.getCenterX(), bounds.y + size * bounds.height / 2);
}, function(bounds, pt) }, 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)]; }, false)];
}, },
'isoCube2' : function(state) 'isoCube2' : function(state)
@ -4508,7 +4508,7 @@
return new mxPoint(bounds.x, bounds.y + isoH); return new mxPoint(bounds.x, bounds.y + isoH);
}, function(bounds, pt) }, 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)]; }, true)];
}, },
'cylinder2' : createCylinderHandleFunction(CylinderShape.prototype.size), 'cylinder2' : createCylinderHandleFunction(CylinderShape.prototype.size),
@ -4522,7 +4522,7 @@
return new mxPoint(bounds.getCenterX(), bounds.y + (1 - size) * bounds.height); return new mxPoint(bounds.getCenterX(), bounds.y + (1 - size) * bounds.height);
}, function(bounds, pt) }, 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)]; }, false)];
}, },
'step': createDisplayHandleFunction(StepShape.prototype.size, true, null, true, StepShape.prototype.fixedSize), '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 // 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)) //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 && if (mxCellRenderer.defaultShapes[name] == null &&
mxStencilRegistry.getStencil(name) == null) mxStencilRegistry.getStencil(name) == null)
@ -4592,7 +4592,7 @@
mxEdgeHandler.prototype.createCustomHandles = function() mxEdgeHandler.prototype.createCustomHandles = function()
{ {
let name = this.state.style['shape']; let name = this.state.style.shape;
if (mxCellRenderer.defaultShapes[name] == null && if (mxCellRenderer.defaultShapes[name] == null &&
mxStencilRegistry.getStencil(name) == null) mxStencilRegistry.getStencil(name) == null)
@ -4777,7 +4777,7 @@
CalloutShape.prototype.getConstraints = function(style, w, h) CalloutShape.prototype.getConstraints = function(style, w, h)
{ {
let constr = []; 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 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)))); 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)))); var dx2 = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position2', this.position2))));

24
docs/stashed/grapheditor/www/js/Sidebar.js
View File

@ -2639,11 +2639,11 @@ Sidebar.prototype.updateShapes = function(source, targets)
} }
// Replaces the participant style in the lifeline shape with the target shape // Replaces the participant style in the lifeline shape with the target shape
if (style[mxConstants.STYLE_SHAPE] == 'umlLifeline' && if (style.shape == 'umlLifeline' &&
sourceCellStyle[mxConstants.STYLE_SHAPE] != 'umlLifeline') sourceCellStyle.shape != 'umlLifeline')
{ {
graph.setCellStyles(mxConstants.STYLE_SHAPE, 'umlLifeline', [targetCell]); graph.setCellStyles('shape', 'umlLifeline', [targetCell]);
graph.setCellStyles('participant', sourceCellStyle[mxConstants.STYLE_SHAPE], [targetCell]); graph.setCellStyles('participant', sourceCellStyle.shape, [targetCell]);
} }
for (let j = 0; j < styles.length; j++) for (let j = 0; j < styles.length; j++)
@ -3143,8 +3143,8 @@ Sidebar.prototype.isDropStyleEnabled = function(cells, firstVertex)
if (vstyle != null) if (vstyle != null)
{ {
result = mxUtils.getValue(vstyle, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE) != mxConstants.NONE || result = mxUtils.getValue(vstyle, 'strokeColor', mxConstants.NONE) != mxConstants.NONE ||
mxUtils.getValue(vstyle, mxConstants.STYLE_FILLCOLOR, 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 // 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 (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 // 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, 'shape') != mxUtils.getValue(sourceCellStyle, 'shape') &&
(mxUtils.getValue(state.style, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE) != mxConstants.NONE || (mxUtils.getValue(state.style, 'strokeColor', mxConstants.NONE) != mxConstants.NONE ||
mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) != mxConstants.NONE || mxUtils.getValue(state.style, 'fillColor', mxConstants.NONE) != mxConstants.NONE ||
mxUtils.getValue(state.style, mxConstants.STYLE_GRADIENTCOLOR, mxConstants.NONE) != mxConstants.NONE)) || mxUtils.getValue(state.style, 'gradientColor', mxConstants.NONE) != mxConstants.NONE)) ||
mxUtils.getValue(sourceCellStyle, mxConstants.STYLE_SHAPE) == 'image') || mxUtils.getValue(sourceCellStyle, 'shape') == 'image') ||
timeOnTarget > 1500 || state.cell.isEdge()) && (timeOnTarget > this.dropTargetDelay) && timeOnTarget > 1500 || state.cell.isEdge()) && (timeOnTarget > this.dropTargetDelay) &&
!this.isDropStyleTargetIgnored(state) && ((state.cell.isVertex() && firstVertex != null) || !this.isDropStyleTargetIgnored(state) && ((state.cell.isVertex() && firstVertex != null) ||
(state.cell.isEdge() && cells[0].isEdge()))) (state.cell.isEdge() && cells[0].isEdge())))
@ -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.left = Math.floor(bds.x - this.triangleLeft.width) + 'px';
arrowLeft.style.top = arrowRight.style.top; arrowLeft.style.top = arrowRight.style.top;
if (state.style['portConstraint'] != 'eastwest') if (state.style.portConstraint != 'eastwest')
{ {
graph.container.appendChild(arrowUp); graph.container.appendChild(arrowUp);
graph.container.appendChild(arrowDown); graph.container.appendChild(arrowDown);

24
docs/stashed/grapheditor/www/js/Toolbar.js
View File

@ -143,10 +143,10 @@ Toolbar.prototype.init = function()
{ {
this.edgeShapeMenu = this.addMenuFunction('', mxResources.get('connection'), false, mxUtils.bind(this, function(menu) 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, '', ['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, '', ['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, '', ['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'], ['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); 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.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, '', ['edge', 'curved', '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, '', ['edge', 'curved', '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, '', ['edge', 'elbow', 'curved', '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, '', ['edge', 'elbow', 'curved', '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, '', ['edge', 'elbow', 'curved', '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', 'elbow', 'curved', '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, '', ['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'));
})); }));
this.addDropDownArrow(this.edgeStyleMenu, 'geSprite-orthogonal', 44, 50, 0, 0, 22, -4); this.addDropDownArrow(this.edgeStyleMenu, 'geSprite-orthogonal', 44, 50, 0, 0, 22, -4);

21
packages/core/src/editor/mxEditor.js
View File

@ -30,9 +30,6 @@ import {
FONT_BOLD, FONT_BOLD,
FONT_ITALIC, FONT_ITALIC,
FONT_UNDERLINE, FONT_UNDERLINE,
STYLE_ALIGN,
STYLE_FONTSTYLE,
STYLE_VERTICAL_ALIGN,
} from '../util/mxConstants'; } from '../util/mxConstants';
import mxGraph from '../view/graph/mxGraph'; import mxGraph from '../view/graph/mxGraph';
import mxSwimlaneManager from '../view/graph/mxSwimlaneManager'; import mxSwimlaneManager from '../view/graph/mxSwimlaneManager';
@ -1203,19 +1200,19 @@ class mxEditor extends mxEventSource {
this.addAction('bold', (editor) => { this.addAction('bold', (editor) => {
if (editor.graph.isEnabled()) { if (editor.graph.isEnabled()) {
editor.graph.toggleCellStyleFlags(STYLE_FONTSTYLE, FONT_BOLD); editor.graph.toggleCellStyleFlags('fontStyle', FONT_BOLD);
} }
}); });
this.addAction('italic', (editor) => { this.addAction('italic', (editor) => {
if (editor.graph.isEnabled()) { if (editor.graph.isEnabled()) {
editor.graph.toggleCellStyleFlags(STYLE_FONTSTYLE, FONT_ITALIC); editor.graph.toggleCellStyleFlags('fontStyle', FONT_ITALIC);
} }
}); });
this.addAction('underline', (editor) => { this.addAction('underline', (editor) => {
if (editor.graph.isEnabled()) { 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) => { this.addAction('alignFontLeft', (editor) => {
editor.graph.setCellStyles(STYLE_ALIGN, ALIGN_LEFT); editor.graph.setCellStyles('align', ALIGN_LEFT);
}); });
this.addAction('alignFontCenter', (editor) => { this.addAction('alignFontCenter', (editor) => {
if (editor.graph.isEnabled()) { if (editor.graph.isEnabled()) {
editor.graph.setCellStyles(STYLE_ALIGN, ALIGN_CENTER); editor.graph.setCellStyles('align', ALIGN_CENTER);
} }
}); });
this.addAction('alignFontRight', (editor) => { this.addAction('alignFontRight', (editor) => {
if (editor.graph.isEnabled()) { if (editor.graph.isEnabled()) {
editor.graph.setCellStyles(STYLE_ALIGN, ALIGN_RIGHT); editor.graph.setCellStyles('align', ALIGN_RIGHT);
} }
}); });
this.addAction('alignFontTop', (editor) => { this.addAction('alignFontTop', (editor) => {
if (editor.graph.isEnabled()) { if (editor.graph.isEnabled()) {
editor.graph.setCellStyles(STYLE_VERTICAL_ALIGN, ALIGN_TOP); editor.graph.setCellStyles('verticalAlign', ALIGN_TOP);
} }
}); });
this.addAction('alignFontMiddle', (editor) => { this.addAction('alignFontMiddle', (editor) => {
if (editor.graph.isEnabled()) { if (editor.graph.isEnabled()) {
editor.graph.setCellStyles(STYLE_VERTICAL_ALIGN, ALIGN_MIDDLE); editor.graph.setCellStyles('verticalAlign', ALIGN_MIDDLE);
} }
}); });
this.addAction('alignFontBottom', (editor) => { this.addAction('alignFontBottom', (editor) => {
if (editor.graph.isEnabled()) { if (editor.graph.isEnabled()) {
editor.graph.setCellStyles(STYLE_VERTICAL_ALIGN, ALIGN_BOTTOM); editor.graph.setCellStyles('verticalAlign', ALIGN_BOTTOM);
} }
}); });

3
packages/core/src/handler/mxCellHighlight.ts
View File

@ -9,7 +9,6 @@ import {
DIALECT_SVG, DIALECT_SVG,
HIGHLIGHT_OPACITY, HIGHLIGHT_OPACITY,
HIGHLIGHT_STROKEWIDTH, HIGHLIGHT_STROKEWIDTH,
STYLE_ROTATION,
} from '../util/mxConstants'; } from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent'; import mxEvent from '../util/event/mxEvent';
import mxRectangle from '../util/datatypes/mxRectangle'; import mxRectangle from '../util/datatypes/mxRectangle';
@ -216,7 +215,7 @@ class mxCellHighlight {
this.state.width + 2 * this.spacing, this.state.width + 2 * this.spacing,
this.state.height + 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 = this.shape.strokewidth =
<number>this.getStrokeWidth() / this.state.view.scale; <number>this.getStrokeWidth() / this.state.view.scale;
this.shape.outline = true; this.shape.outline = true;

21
packages/core/src/handler/mxConnectionHandler.js
View File

@ -16,11 +16,6 @@ import {
INVALID_COLOR, INVALID_COLOR,
OUTLINE_HIGHLIGHT_COLOR, OUTLINE_HIGHLIGHT_COLOR,
OUTLINE_HIGHLIGHT_STROKEWIDTH, OUTLINE_HIGHLIGHT_STROKEWIDTH,
STYLE_ENTRY_X,
STYLE_ENTRY_Y,
STYLE_EXIT_X,
STYLE_EXIT_Y,
STYLE_ROTATION,
TOOLTIP_VERTICAL_OFFSET, TOOLTIP_VERTICAL_OFFSET,
VALID_COLOR, VALID_COLOR,
} from '../util/mxConstants'; } from '../util/mxConstants';
@ -927,7 +922,7 @@ class mxConnectionHandler extends mxEventSource {
cy = size.height !== 0 ? state.y + (size.height * scale) / 2 : cy; cy = size.height !== 0 ? state.y + (size.height * scale) / 2 : cy;
const alpha = mxUtils.toRadians( const alpha = mxUtils.toRadians(
mxUtils.getValue(state.style, STYLE_ROTATION) || 0 mxUtils.getValue(state.style, 'rotation') || 0
); );
if (alpha !== 0) { if (alpha !== 0) {
@ -1565,16 +1560,16 @@ class mxConnectionHandler extends mxEventSource {
updateEdgeState(current, constraint) { updateEdgeState(current, constraint) {
// TODO: Use generic method for writing constraint to style // TODO: Use generic method for writing constraint to style
if (this.sourceConstraint != null && this.sourceConstraint.point != null) { if (this.sourceConstraint != null && this.sourceConstraint.point != null) {
this.edgeState.style[STYLE_EXIT_X] = this.sourceConstraint.point.x; this.edgeState.style.exitX = this.sourceConstraint.point.x;
this.edgeState.style[STYLE_EXIT_Y] = this.sourceConstraint.point.y; this.edgeState.style.exitY = this.sourceConstraint.point.y;
} }
if (constraint != null && constraint.point != null) { if (constraint != null && constraint.point != null) {
this.edgeState.style[STYLE_ENTRY_X] = constraint.point.x; this.edgeState.style.entryX = constraint.point.x;
this.edgeState.style[STYLE_ENTRY_Y] = constraint.point.y; this.edgeState.style.entryY = constraint.point.y;
} else { } else {
delete this.edgeState.style[STYLE_ENTRY_X]; delete this.edgeState.style.entryX;
delete this.edgeState.style[STYLE_ENTRY_Y]; delete this.edgeState.style.entryY;
} }
this.edgeState.absolutePoints = [ this.edgeState.absolutePoints = [
@ -1690,7 +1685,7 @@ class mxConnectionHandler extends mxEventSource {
const c = new mxPoint(state.getCenterX(), state.getCenterY()); const c = new mxPoint(state.getCenterX(), state.getCenterY());
if (sourcePerimeter != null) { 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); const rad = -theta * (Math.PI / 180);
if (theta !== 0) { if (theta !== 0) {

26
packages/core/src/handler/mxEdgeHandler.js
View File

@ -30,14 +30,6 @@ import {
NONE, NONE,
OUTLINE_HIGHLIGHT_COLOR, OUTLINE_HIGHLIGHT_COLOR,
OUTLINE_HIGHLIGHT_STROKEWIDTH, 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'; } from '../util/mxConstants';
import mxUtils from '../util/mxUtils'; import mxUtils from '../util/mxUtils';
import mxImageShape from '../shape/node/mxImageShape'; import mxImageShape from '../shape/node/mxImageShape';
@ -360,7 +352,7 @@ class mxEdgeHandler {
this.parentHighlight.dialect = DIALECT_SVG; this.parentHighlight.dialect = DIALECT_SVG;
this.parentHighlight.pointerEvents = false; this.parentHighlight.pointerEvents = false;
this.parentHighlight.rotation = Number( this.parentHighlight.rotation = Number(
pstate.style[STYLE_ROTATION] || '0' pstate.style.rotation || '0'
); );
this.parentHighlight.init(this.graph.getView().getOverlayPane()); this.parentHighlight.init(this.graph.getView().getOverlayPane());
this.parentHighlight.redraw(); this.parentHighlight.redraw();
@ -474,10 +466,10 @@ class mxEdgeHandler {
isVirtualBendsEnabled(evt) { isVirtualBendsEnabled(evt) {
return ( return (
this.virtualBendsEnabled && this.virtualBendsEnabled &&
(this.state.style[STYLE_EDGE] == null || (this.state.style.edge == null ||
this.state.style[STYLE_EDGE] === NONE || this.state.style.edge === NONE ||
this.state.style[STYLE_NOEDGESTYLE] === 1) && this.state.style.noEdgeStyle == 1) &&
mxUtils.getValue(this.state.style, STYLE_SHAPE, null) != 'arrow' mxUtils.getValue(this.state.style, 'shape', null) != 'arrow'
); );
} }
@ -1560,13 +1552,13 @@ class mxEdgeHandler {
if (this.isSource || this.isTarget) { if (this.isSource || this.isTarget) {
if (constraint != null && constraint.point != null) { 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; constraint.point.x;
edge.style[this.isSource ? STYLE_EXIT_Y : STYLE_ENTRY_Y] = edge.style[this.isSource ? 'exitY' : 'entryY'] =
constraint.point.y; constraint.point.y;
} else { } else {
delete edge.style[this.isSource ? STYLE_EXIT_X : STYLE_ENTRY_X]; delete edge.style[this.isSource ? 'exitX' : 'entryX'];
delete edge.style[this.isSource ? STYLE_EXIT_Y : STYLE_ENTRY_Y]; delete edge.style[this.isSource ? 'exitY' : 'entryY'];
} }
} }

12
packages/core/src/handler/mxElbowEdgeHandler.js
View File

@ -11,8 +11,6 @@ import {
EDGESTYLE_TOPTOBOTTOM, EDGESTYLE_TOPTOBOTTOM,
ELBOW_VERTICAL, ELBOW_VERTICAL,
HANDLE_SIZE, HANDLE_SIZE,
STYLE_EDGE,
STYLE_ELBOW,
} from '../util/mxConstants'; } from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent'; import mxEvent from '../util/event/mxEvent';
import mxPoint from '../util/datatypes/mxPoint'; import mxPoint from '../util/datatypes/mxPoint';
@ -125,11 +123,11 @@ class mxElbowEdgeHandler extends mxEdgeHandler {
*/ */
// getCursorForBend(): string; // getCursorForBend(): string;
getCursorForBend() { getCursorForBend() {
return this.state.style[STYLE_EDGE] === mxEdgeStyle.TopToBottom || return this.state.style.edge === mxEdgeStyle.TopToBottom ||
this.state.style[STYLE_EDGE] === EDGESTYLE_TOPTOBOTTOM || this.state.style.edge === EDGESTYLE_TOPTOBOTTOM ||
((this.state.style[STYLE_EDGE] === mxEdgeStyle.ElbowConnector || ((this.state.style.edge === mxEdgeStyle.ElbowConnector ||
this.state.style[STYLE_EDGE] === EDGESTYLE_ELBOW) && this.state.style.edge === EDGESTYLE_ELBOW) &&
this.state.style[STYLE_ELBOW] === ELBOW_VERTICAL) this.state.style.elbow === ELBOW_VERTICAL)
? 'row-resize' ? 'row-resize'
: 'col-resize'; : 'col-resize';
} }

3
packages/core/src/handler/mxGraphHandler.js
View File

@ -18,7 +18,6 @@ import {
DIALECT_SVG, DIALECT_SVG,
DROP_TARGET_COLOR, DROP_TARGET_COLOR,
INVALID_CONNECT_TARGET_COLOR, INVALID_CONNECT_TARGET_COLOR,
STYLE_ROTATION,
VALID_COLOR, VALID_COLOR,
} from '../util/mxConstants'; } from '../util/mxConstants';
import mxDictionary from '../util/datatypes/mxDictionary'; import mxDictionary from '../util/datatypes/mxDictionary';
@ -1709,7 +1708,7 @@ class mxGraphHandler {
getClientY(evt) getClientY(evt)
); );
const alpha = mxUtils.toRadians( const alpha = mxUtils.toRadians(
mxUtils.getValue(pState.style, STYLE_ROTATION) || 0 mxUtils.getValue(pState.style, 'rotation') || 0
); );
if (alpha !== 0) { if (alpha !== 0) {

36
packages/core/src/handler/mxVertexHandler.js
View File

@ -16,8 +16,6 @@ import {
HANDLE_STROKECOLOR, HANDLE_STROKECOLOR,
LABEL_HANDLE_FILLCOLOR, LABEL_HANDLE_FILLCOLOR,
LABEL_HANDLE_SIZE, LABEL_HANDLE_SIZE,
STYLE_ASPECT,
STYLE_ROTATION,
VERTEX_SELECTION_COLOR, VERTEX_SELECTION_COLOR,
VERTEX_SELECTION_DASHED, VERTEX_SELECTION_DASHED,
VERTEX_SELECTION_STROKEWIDTH, VERTEX_SELECTION_STROKEWIDTH,
@ -250,7 +248,7 @@ class mxVertexHandler {
this.selectionBorder.dialect = DIALECT_SVG; this.selectionBorder.dialect = DIALECT_SVG;
this.selectionBorder.pointerEvents = false; this.selectionBorder.pointerEvents = false;
this.selectionBorder.rotation = Number( this.selectionBorder.rotation = Number(
this.state.style[STYLE_ROTATION] || '0' this.state.style.rotation || '0'
); );
this.selectionBorder.init(this.graph.getView().getOverlayPane()); this.selectionBorder.init(this.graph.getView().getOverlayPane());
mxEvent.redirectMouseEvents( mxEvent.redirectMouseEvents(
@ -369,7 +367,7 @@ class mxVertexHandler {
// isConstrainedEvent(me: mxMouseEvent): boolean; // isConstrainedEvent(me: mxMouseEvent): boolean;
isConstrainedEvent(me) { isConstrainedEvent(me) {
return ( 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 ( if (
!( !(
mxClient.IS_SVG && 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 != null &&
this.state.text.node.parentNode === this.graph.container this.state.text.node.parentNode === this.graph.container
@ -1082,7 +1080,7 @@ class mxVertexHandler {
// resizeVertex(me: mxMouseEvent): void; // resizeVertex(me: mxMouseEvent): void;
resizeVertex(me) { resizeVertex(me) {
const ct = new mxPoint(this.state.getCenterX(), this.state.getCenterY()); 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 point = new mxPoint(me.getGraphX(), me.getGraphY());
const tr = this.graph.view.translate; const tr = this.graph.view.translate;
const { scale } = this.graph.view; const { scale } = this.graph.view;
@ -1389,7 +1387,7 @@ class mxVertexHandler {
} else if (index === mxEvent.ROTATION_HANDLE) { } else if (index === mxEvent.ROTATION_HANDLE) {
if (this.currentAlpha != null) { if (this.currentAlpha != null) {
const delta = const delta =
this.currentAlpha - (this.state.style[STYLE_ROTATION] || 0); this.currentAlpha - (this.state.style.rotation || 0);
if (delta !== 0) { if (delta !== 0) {
this.rotateCell(this.state.cell, delta); this.rotateCell(this.state.cell, delta);
@ -1400,7 +1398,7 @@ class mxVertexHandler {
} else { } else {
const gridEnabled = this.graph.isGridEnabledEvent(me.getEvent()); const gridEnabled = this.graph.isGridEnabledEvent(me.getEvent());
const alpha = mxUtils.toRadians( const alpha = mxUtils.toRadians(
this.state.style[STYLE_ROTATION] || '0' this.state.style.rotation || '0'
); );
const cos = Math.cos(-alpha); const cos = Math.cos(-alpha);
const sin = Math.sin(-alpha); const sin = Math.sin(-alpha);
@ -1475,8 +1473,8 @@ class mxVertexHandler {
if (cell.isVertex() || cell.isEdge()) { if (cell.isVertex() || cell.isEdge()) {
if (!cell.isEdge()) { if (!cell.isEdge()) {
const style = this.graph.getCurrentCellStyle(cell); const style = this.graph.getCurrentCellStyle(cell);
const total = (style[STYLE_ROTATION] || 0) + angle; const total = (style.rotation || 0) + angle;
this.graph.setCellStyles(STYLE_ROTATION, total, [cell]); this.graph.setCellStyles('rotation', total, [cell]);
} }
let geo = cell.getGeometry(); let geo = cell.getGeometry();
@ -1591,7 +1589,7 @@ class mxVertexHandler {
if (geo != null) { if (geo != null) {
if (index === mxEvent.LABEL_HANDLE) { if (index === mxEvent.LABEL_HANDLE) {
const alpha = -mxUtils.toRadians( const alpha = -mxUtils.toRadians(
this.state.style[STYLE_ROTATION] || '0' this.state.style.rotation || '0'
); );
const cos = Math.cos(alpha); const cos = Math.cos(alpha);
const sin = Math.sin(alpha); const sin = Math.sin(alpha);
@ -1696,13 +1694,13 @@ class mxVertexHandler {
* let s = this.state; * let s = this.state;
* *
* if (this.graph.isHtmlLabel(s.cell) && (index == 3 || index == 4) && * 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 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 * 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; * return result;
@ -2002,7 +2000,7 @@ class mxVertexHandler {
]; ];
const alpha = mxUtils.toRadians( const alpha = mxUtils.toRadians(
this.state.style[STYLE_ROTATION] || '0' this.state.style.rotation || '0'
); );
const cos = Math.cos(alpha); const cos = Math.cos(alpha);
const sin = Math.sin(alpha); const sin = Math.sin(alpha);
@ -2075,7 +2073,7 @@ class mxVertexHandler {
const alpha = mxUtils.toRadians( const alpha = mxUtils.toRadians(
this.currentAlpha != null this.currentAlpha != null
? this.currentAlpha ? this.currentAlpha
: this.state.style[STYLE_ROTATION] || '0' : this.state.style.rotation || '0'
); );
const cos = Math.cos(alpha); const cos = Math.cos(alpha);
const sin = Math.sin(alpha); const sin = Math.sin(alpha);
@ -2101,7 +2099,7 @@ class mxVertexHandler {
if (this.selectionBorder != null) { if (this.selectionBorder != null) {
this.selectionBorder.rotation = Number( 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.dialect = DIALECT_SVG;
this.parentHighlight.pointerEvents = false; this.parentHighlight.pointerEvents = false;
this.parentHighlight.rotation = Number( this.parentHighlight.rotation = Number(
pstate.style[STYLE_ROTATION] || '0' pstate.style.rotation || '0'
); );
this.parentHighlight.init(this.graph.getView().getOverlayPane()); this.parentHighlight.init(this.graph.getView().getOverlayPane());
this.parentHighlight.redraw(); 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(); this.preview.redraw();
} }

5
packages/core/src/layout/mxGraphLayout.js
View File

@ -9,7 +9,6 @@ import mxDictionary from '../util/datatypes/mxDictionary';
import mxRectangle from '../util/datatypes/mxRectangle'; import mxRectangle from '../util/datatypes/mxRectangle';
import mxGeometry from '../util/datatypes/mxGeometry'; import mxGeometry from '../util/datatypes/mxGeometry';
import mxPoint from '../util/datatypes/mxPoint'; import mxPoint from '../util/datatypes/mxPoint';
import { STYLE_NOEDGESTYLE, STYLE_ORTHOGONAL } from '../util/mxConstants';
/** /**
* @class mxGraphLayout * @class mxGraphLayout
@ -238,7 +237,7 @@ class mxGraphLayout {
*/ */
// setEdgeStyleEnabled(edge: mxCell, value: any): void; // setEdgeStyleEnabled(edge: mxCell, value: any): void;
setEdgeStyleEnabled(edge, value) { 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: mxCell, value: any): void;
setOrthogonalEdge(edge, value) { setOrthogonalEdge(edge, value) {
this.graph.setCellStyles(STYLE_ORTHOGONAL, value ? '1' : '0', [edge]); this.graph.setCellStyles('orthogonal', value ? '1' : '0', [edge]);
} }
/** /**

9
packages/core/src/layout/mxStackLayout.js
View File

@ -9,9 +9,6 @@ import mxRectangle from '../util/datatypes/mxRectangle';
import mxUtils from '../util/mxUtils'; import mxUtils from '../util/mxUtils';
import { import {
DEFAULT_STARTSIZE, DEFAULT_STARTSIZE,
STYLE_HORIZONTAL,
STYLE_STARTSIZE,
STYLE_STROKEWIDTH,
} from '../util/mxConstants'; } from '../util/mxConstants';
/** /**
@ -316,10 +313,10 @@ class mxStackLayout extends mxGraphLayout {
const style = this.graph.getCellStyle(parent); const style = this.graph.getCellStyle(parent);
let start = mxUtils.getNumber( let start = mxUtils.getNumber(
style, style,
STYLE_STARTSIZE, 'startSize',
DEFAULT_STARTSIZE DEFAULT_STARTSIZE
); );
const horz = mxUtils.getValue(style, STYLE_HORIZONTAL, true) == 1; const horz = mxUtils.getValue(style, 'horizontal', true) == 1;
if (pgeo != null) { if (pgeo != null) {
if (horz) { if (horz) {
@ -381,7 +378,7 @@ class mxStackLayout extends mxGraphLayout {
if (!this.borderCollapse) { if (!this.borderCollapse) {
const childStyle = this.graph.getCellStyle(child); const childStyle = this.graph.getCellStyle(child);
sw = mxUtils.getNumber(childStyle, STYLE_STROKEWIDTH, 1); sw = mxUtils.getNumber(childStyle, 'strokeWidth', 1);
} }
if (last != null) { if (last != null) {

15
packages/core/src/shape/edge/mxArrowConnector.js
View File

@ -10,11 +10,6 @@ import {
ARROW_SPACING, ARROW_SPACING,
ARROW_WIDTH, ARROW_WIDTH,
NONE, NONE,
STYLE_ENDARROW,
STYLE_ENDSIZE,
STYLE_STARTARROW,
STYLE_STARTSIZE,
STYLE_STROKEWIDTH,
} from '../../util/mxConstants'; } from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils'; import mxUtils from '../../util/mxUtils';
@ -71,9 +66,9 @@ class mxArrowConnector extends mxShape {
if (this.style != null) { if (this.style != null) {
this.startSize = this.startSize =
mxUtils.getNumber(this.style, STYLE_STARTSIZE, ARROW_SIZE / 5) * 3; mxUtils.getNumber(this.style, 'startSize', ARROW_SIZE / 5) * 3;
this.endSize = 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) { if (this.outline) {
strokeWidth = Math.max( strokeWidth = Math.max(
1, 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(): boolean;
isMarkerStart() { 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(): boolean;
isMarkerEnd() { isMarkerEnd() {
return mxUtils.getValue(this.style, STYLE_ENDARROW, NONE) !== NONE; return mxUtils.getValue(this.style, 'endArrow', NONE) !== NONE;
} }
} }

23
packages/core/src/shape/edge/mxConnector.js
View File

@ -7,13 +7,6 @@
import { import {
DEFAULT_MARKERSIZE, DEFAULT_MARKERSIZE,
NONE, NONE,
STYLE_CURVED,
STYLE_ENDARROW,
STYLE_ENDFILL,
STYLE_ENDSIZE,
STYLE_STARTARROW,
STYLE_STARTFILL,
STYLE_STARTSIZE,
} from '../../util/mxConstants'; } from '../../util/mxConstants';
import mxPolyline from './mxPolyline'; import mxPolyline from './mxPolyline';
import mxUtils from '../../util/mxUtils'; import mxUtils from '../../util/mxUtils';
@ -39,7 +32,7 @@ class mxConnector extends mxPolyline {
// updateBoundingBox(): void; // updateBoundingBox(): void;
updateBoundingBox() { updateBoundingBox() {
this.useSvgBoundingBox = this.useSvgBoundingBox =
this.style != null && this.style[STYLE_CURVED] === 1; this.style != null && this.style.curved === 1;
super.updateBoundingBox(); super.updateBoundingBox();
} }
@ -79,7 +72,7 @@ class mxConnector extends mxPolyline {
const n = pts.length; const n = pts.length;
const type = mxUtils.getValue( const type = mxUtils.getValue(
this.style, this.style,
source ? STYLE_STARTARROW : STYLE_ENDARROW source ? 'startArrow' : 'endArrow'
); );
let p0 = source ? pts[1] : pts[n - 2]; let p0 = source ? pts[1] : pts[n - 2];
const pe = source ? pts[0] : pts[n - 1]; const pe = source ? pts[0] : pts[n - 1];
@ -108,13 +101,13 @@ class mxConnector extends mxPolyline {
const size = mxUtils.getNumber( const size = mxUtils.getNumber(
this.style, this.style,
source ? STYLE_STARTSIZE : STYLE_ENDSIZE, source ? 'startSize' : 'endSize',
DEFAULT_MARKERSIZE DEFAULT_MARKERSIZE
); );
// Allow for stroke width in the end point used and the // Allow for stroke width in the end point used and the
// orthogonal vectors describing the direction of the marker // 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( result = mxMarker.createMarker(
c, c,
@ -143,16 +136,16 @@ class mxConnector extends mxPolyline {
// Adds marker sizes // Adds marker sizes
let size = 0; let size = 0;
if (mxUtils.getValue(this.style, STYLE_STARTARROW, NONE) !== NONE) { if (mxUtils.getValue(this.style, 'startArrow', NONE) !== NONE) {
size = 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 = size =
Math.max( Math.max(
size, size,
mxUtils.getNumber(this.style, STYLE_ENDSIZE, DEFAULT_MARKERSIZE) mxUtils.getNumber(this.style, 'endSize', DEFAULT_MARKERSIZE)
) + 1; ) + 1;
} }

6
packages/core/src/shape/edge/mxPolyline.js
View File

@ -7,8 +7,6 @@
import mxShape from '../mxShape'; import mxShape from '../mxShape';
import { import {
LINE_ARCSIZE, LINE_ARCSIZE,
STYLE_ARCSIZE,
STYLE_CURVED,
} from '../../util/mxConstants'; } from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils'; import mxUtils from '../../util/mxUtils';
@ -72,7 +70,7 @@ class mxPolyline extends mxShape {
const prev = c.pointerEventsValue; const prev = c.pointerEventsValue;
c.pointerEventsValue = 'stroke'; 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); this.paintLine(c, pts, this.isRounded);
} else { } else {
this.paintCurvedLine(c, pts); this.paintCurvedLine(c, pts);
@ -87,7 +85,7 @@ class mxPolyline extends mxShape {
// paintLine(c: mxAbstractCanvas2D, pts: Array<mxPoint>, rounded?: boolean): void; // paintLine(c: mxAbstractCanvas2D, pts: Array<mxPoint>, rounded?: boolean): void;
paintLine(c, pts, rounded) { paintLine(c, pts, rounded) {
const arcSize = const arcSize =
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2; mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
c.begin(); c.begin();
this.addPoints(c, pts, rounded, arcSize, false); this.addPoints(c, pts, rounded, arcSize, false);
c.stroke(); c.stroke();

25
packages/core/src/shape/mxLabel.js
View File

@ -13,13 +13,6 @@ import {
ALIGN_RIGHT, ALIGN_RIGHT,
ALIGN_TOP, ALIGN_TOP,
DEFAULT_IMAGESIZE, 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'; } from '../util/mxConstants';
import mxRectangleShape from './node/mxRectangleShape'; import mxRectangleShape from './node/mxRectangleShape';
import mxUtils from '../util/mxUtils'; 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: number, y: number, w: number, h: number): mxRectangle;
getImageBounds(x, y, w, h) { 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( const valign = mxUtils.getValue(
this.style, this.style,
STYLE_IMAGE_VERTICAL_ALIGN, 'verticalAlign',
ALIGN_MIDDLE ALIGN_MIDDLE
); );
const width = mxUtils.getNumber( const width = mxUtils.getNumber(
this.style, this.style,
STYLE_IMAGE_WIDTH, 'imageWidth',
DEFAULT_IMAGESIZE DEFAULT_IMAGESIZE
); );
const height = mxUtils.getNumber( const height = mxUtils.getNumber(
this.style, this.style,
STYLE_IMAGE_HEIGHT, 'imageHeight',
DEFAULT_IMAGESIZE DEFAULT_IMAGESIZE
); );
const spacing = const spacing =
mxUtils.getNumber(this.style, STYLE_SPACING, this.spacing) + 5; mxUtils.getNumber(this.style, 'spacing', this.spacing) + 5;
if (align === ALIGN_CENTER) { if (align === ALIGN_CENTER) {
x += (w - width) / 2; x += (w - width) / 2;
@ -250,20 +243,20 @@ class mxLabel extends mxRectangleShape {
*/ */
// getIndicatorBounds(x: number, y: number, w: number, h: number): mxRectangle; // getIndicatorBounds(x: number, y: number, w: number, h: number): mxRectangle;
getIndicatorBounds(x, y, w, h) { 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( const valign = mxUtils.getValue(
this.style, this.style,
STYLE_IMAGE_VERTICAL_ALIGN, 'verticalAlign',
ALIGN_MIDDLE ALIGN_MIDDLE
); );
const width = mxUtils.getNumber( const width = mxUtils.getNumber(
this.style, this.style,
STYLE_INDICATOR_WIDTH, 'indicatorWidth',
this.indicatorSize this.indicatorSize
); );
const height = mxUtils.getNumber( const height = mxUtils.getNumber(
this.style, this.style,
STYLE_INDICATOR_HEIGHT, 'indicatorHeight',
this.indicatorSize this.indicatorSize
); );
const spacing = this.spacing + 5; const spacing = this.spacing + 5;

62
packages/core/src/shape/mxShape.ts
View File

@ -16,14 +16,6 @@ import {
RECTANGLE_ROUNDING_FACTOR, RECTANGLE_ROUNDING_FACTOR,
SHADOW_OFFSET_X, SHADOW_OFFSET_X,
SHADOW_OFFSET_Y, 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'; } from '../util/mxConstants';
import mxPoint from '../util/datatypes/mxPoint'; import mxPoint from '../util/datatypes/mxPoint';
import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D'; import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
@ -83,7 +75,7 @@ const toBool = (i: any): boolean => {
* @example * @example
* ```javascript * ```javascript
* var style = graph.getStylesheet().getDefaultVertexStyle(); * var style = graph.getStylesheet().getDefaultVertexStyle();
* style[mxConstants.STYLE_SHAPE] = 'customShape'; * style.shape = 'customShape';
* ``` * ```
*/ */
class mxShape { class mxShape {
@ -473,7 +465,7 @@ class mxShape {
*/ */
// getLabelBounds(rect: mxRectangle): mxRectangle; // getLabelBounds(rect: mxRectangle): mxRectangle;
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(); let bounds = rect.clone();
// Normalizes argument for getLabelMargins hook // Normalizes argument for getLabelMargins hook
@ -493,8 +485,8 @@ class mxShape {
if (labelMargins != null) { if (labelMargins != null) {
labelMargins = <mxRectangle>(<mxRectangle>labelMargins).clone(); labelMargins = <mxRectangle>(<mxRectangle>labelMargins).clone();
let flipH = toBool(mxUtils.getValue(this.style, STYLE_FLIPH, false)); let flipH = toBool(mxUtils.getValue(this.style, 'flipH', false));
let flipV = toBool(mxUtils.getValue(this.style, STYLE_FLIPV, false)); let flipV = toBool(mxUtils.getValue(this.style, 'flipV', false));
// Handles special case for vertical labels // Handles special case for vertical labels
if ( if (
@ -801,7 +793,7 @@ class mxShape {
c.setDashed( c.setDashed(
this.isDashed, this.isDashed,
this.style != null this.style != null
? toBool(mxUtils.getValue(this.style, STYLE_FIX_DASH, false)) ? toBool(mxUtils.getValue(this.style, 'fixDash', false))
: false : false
); );
} }
@ -894,7 +886,7 @@ class mxShape {
!this.outline || !this.outline ||
this.style == null || this.style == null ||
toBool( toBool(
mxUtils.getValue(this.style, STYLE_BACKGROUND_OUTLINE, 0) === false mxUtils.getValue(this.style, 'backgroundOutline', 0) === false
) )
) { ) {
c.setShadow(false); c.setShadow(false);
@ -945,12 +937,12 @@ class mxShape {
getArcSize(w: number, h: number): number { getArcSize(w: number, h: number): number {
let r = 0; let r = 0;
if (toBool(mxUtils.getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0))) { if (toBool(mxUtils.getValue(this.style, 'absoluteArcSize', 0))) {
r = Math.min( r = Math.min(
w / 2, w / 2,
Math.min( Math.min(
h / 2, h / 2,
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2 mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2
) )
); );
} else { } else {
@ -958,7 +950,7 @@ class mxShape {
String( String(
mxUtils.getValue( mxUtils.getValue(
this.style, this.style,
STYLE_ARCSIZE, 'arcSize',
RECTANGLE_ROUNDING_FACTOR * 100 RECTANGLE_ROUNDING_FACTOR * 100
) / 100 ) / 100
) )
@ -1142,25 +1134,25 @@ class mxShape {
* Applies the style of the given <mxCellState> to the shape. This * Applies the style of the given <mxCellState> to the shape. This
* implementation assigns the following styles to local fields: * implementation assigns the following styles to local fields:
* *
* - <mxConstants.STYLE_FILLCOLOR> => fill * - <'fillColor'> => fill
* - <mxConstants.STYLE_GRADIENTCOLOR> => gradient * - <'gradientColor'> => gradient
* - <mxConstants.STYLE_GRADIENT_DIRECTION> => gradientDirection * - <'gradientDirection'> => gradientDirection
* - <mxConstants.STYLE_OPACITY> => opacity * - <'opacity'> => opacity
* - <mxConstants.STYLE_FILL_OPACITY> => fillOpacity * - <mxConstants.STYLE_FILL_OPACITY> => fillOpacity
* - <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity * - <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity
* - <mxConstants.STYLE_STROKECOLOR> => stroke * - <'strokeColor'> => stroke
* - <mxConstants.STYLE_STROKEWIDTH> => strokewidth * - <'strokeWidth'> => strokewidth
* - <mxConstants.STYLE_SHADOW> => isShadow * - <'shadow'> => isShadow
* - <mxConstants.STYLE_DASHED> => isDashed * - <'dashed'> => isDashed
* - <mxConstants.STYLE_SPACING> => spacing * - <'spacing'> => spacing
* - <mxConstants.STYLE_STARTSIZE> => startSize * - <'startSize'> => startSize
* - <mxConstants.STYLE_ENDSIZE> => endSize * - <'endSize'> => endSize
* - <mxConstants.STYLE_ROUNDED> => isRounded * - <'rounded'> => isRounded
* - <mxConstants.STYLE_STARTARROW> => startArrow * - <'startArrow'> => startArrow
* - <mxConstants.STYLE_ENDARROW> => endArrow * - <'endArrow'> => endArrow
* - <mxConstants.STYLE_ROTATION> => rotation * - <'rotation'> => rotation
* - <mxConstants.STYLE_DIRECTION> => direction * - <'direction'> => direction
* - <mxConstants.STYLE_GLASS> => glass * - <'glass'> => glass
* *
* This keeps a reference to the <style>. If you need to keep a reference to * 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 * the cell, you can override this method and store a local reference to
@ -1408,7 +1400,7 @@ class mxShape {
// getTextRotation(): number; // getTextRotation(): number;
getTextRotation(): number { getTextRotation(): number {
let rot = this.getRotation(); 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!!!! =============================================================================================== rot += this.verticalTextRotation || -90; // WARNING WARNING!!!! ===============================================================================================
} }
return rot; return rot;

40
packages/core/src/shape/mxSwimlane.js
View File

@ -14,16 +14,6 @@ import {
LINE_ARCSIZE, LINE_ARCSIZE,
NONE, NONE,
RECTANGLE_ROUNDING_FACTOR, 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'; } from '../util/mxConstants';
import mxUtils from '../util/mxUtils'; import mxUtils from '../util/mxUtils';
@ -31,11 +21,11 @@ import mxUtils from '../util/mxUtils';
* Extends {@link mxShape} to implement a swimlane shape. * Extends {@link mxShape} to implement a swimlane shape.
* This shape is registered under {@link mxConstants.SHAPE_SWIMLANE} in {@link mxCellRenderer}. * 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 * 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, `'swimLaneFillColor'` for the content area fill,
* {@link mxConstants.STYLE_SEPARATORCOLOR} to draw an additional vertical separator and * `'separatorColor'` to draw an additional vertical separator and
* {@link mxConstants.STYLE_SWIMLANE_LINE} to hide the line between the title region and * {@link mxConstants.STYLE_SWIMLANE_LINE} to hide the line between the title region and
* the content area. * 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. * not only its label.
* *
* @class mxSwimlane * @class mxSwimlane
@ -81,7 +71,7 @@ class mxSwimlane extends mxShape {
getTitleSize() { getTitleSize() {
return Math.max( return Math.max(
0, 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 bounds = new mxRectangle(rect.x, rect.y, rect.width, rect.height);
const horizontal = this.isHorizontal(); const horizontal = this.isHorizontal();
const flipH = mxUtils.getValue(this.style, STYLE_FLIPH, 0) == 1; const flipH = mxUtils.getValue(this.style, 'flipH', 0) == 1;
const flipV = mxUtils.getValue(this.style, STYLE_FLIPV, 0) == 1; const flipV = mxUtils.getValue(this.style, 'flipV', 0) == 1;
// East is default // East is default
const shapeVertical = const shapeVertical =
@ -156,19 +146,19 @@ class mxSwimlane extends mxShape {
* Returns the arcsize for the swimlane. * Returns the arcsize for the swimlane.
*/ */
getSwimlaneArcSize(w, h, start) { 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( return Math.min(
w / 2, w / 2,
Math.min( Math.min(
h / 2, h / 2,
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2 mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2
) )
); );
} }
const f = const f =
mxUtils.getValue( mxUtils.getValue(
this.style, this.style,
STYLE_ARCSIZE, 'arcSize',
RECTANGLE_ROUNDING_FACTOR * 100 RECTANGLE_ROUNDING_FACTOR * 100
) / 100; ) / 100;
@ -180,7 +170,7 @@ class mxSwimlane extends mxShape {
*/ */
// isHorizontal(): boolean; // isHorizontal(): boolean;
isHorizontal() { 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: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
paintVertexShape(c, x, y, w, h) { paintVertexShape(c, x, y, w, h) {
let start = this.getTitleSize(); let start = this.getTitleSize();
const fill = mxUtils.getValue(this.style, STYLE_SWIMLANE_FILLCOLOR, NONE); const fill = mxUtils.getValue(this.style, 'swimlaneFillColor', NONE);
const swimlaneLine = const swimlaneLine =
mxUtils.getValue(this.style, STYLE_SWIMLANE_LINE, 1) == 1; mxUtils.getValue(this.style, 'swimlaneLine', 1) == 1;
let r = 0; let r = 0;
if (this.isHorizontal()) { if (this.isHorizontal()) {
@ -210,7 +200,7 @@ class mxSwimlane extends mxShape {
this.paintRoundedSwimlane(c, x, y, w, h, start, r, fill, swimlaneLine); 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); this.paintSeparator(c, x, y, w, h, start, sep);
if (this.image != null) { if (this.image != null) {
@ -244,7 +234,7 @@ class mxSwimlane extends mxShape {
let events = true; let events = true;
if (this.style != null) { 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)) { if (!events && (this.fill == null || this.fill === NONE)) {
@ -325,7 +315,7 @@ class mxSwimlane extends mxShape {
let events = true; let events = true;
if (this.style != null) { 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)) { if (!events && (this.fill == null || this.fill === NONE)) {

57
packages/core/src/shape/mxText.ts
View File

@ -23,23 +23,6 @@ import {
FONT_UNDERLINE, FONT_UNDERLINE,
LINE_HEIGHT, LINE_HEIGHT,
NONE, 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_AUTO,
TEXT_DIRECTION_LTR, TEXT_DIRECTION_LTR,
TEXT_DIRECTION_RTL, TEXT_DIRECTION_RTL,
@ -434,27 +417,23 @@ class mxText extends mxShape {
if (this.style != null) { if (this.style != null) {
this.fontStyle = this.style.fontStyle || this.fontStyle; this.fontStyle = this.style.fontStyle || this.fontStyle;
this.family = mxUtils.getValue(this.style, STYLE_FONTFAMILY, this.family); this.family = mxUtils.getValue(this.style, 'fontFamily', this.family);
this.size = mxUtils.getValue(this.style, STYLE_FONTSIZE, this.size); this.size = mxUtils.getValue(this.style, 'fontSize', this.size);
this.color = mxUtils.getValue(this.style, STYLE_FONTCOLOR, this.color); this.color = mxUtils.getValue(this.style, 'fontColor', this.color);
this.align = mxUtils.getValue(this.style, STYLE_ALIGN, this.align); this.align = mxUtils.getValue(this.style, 'align', this.align);
this.valign = mxUtils.getValue( this.valign = mxUtils.getValue(this.style, 'verticalAlign', this.valign);
this.style,
STYLE_VERTICAL_ALIGN,
this.valign
);
this.spacing = parseInt( this.spacing = parseInt(
mxUtils.getValue(this.style, STYLE_SPACING, this.spacing) mxUtils.getValue(this.style, 'spacing', this.spacing)
); );
this.spacingTop = this.spacingTop =
parseInt( parseInt(
mxUtils.getValue(this.style, STYLE_SPACING_TOP, this.spacingTop - old) mxUtils.getValue(this.style, 'spacingTop', this.spacingTop - old)
) + this.spacing; ) + this.spacing;
this.spacingRight = this.spacingRight =
parseInt( parseInt(
mxUtils.getValue( mxUtils.getValue(
this.style, this.style,
STYLE_SPACING_RIGHT, 'spacingRight',
this.spacingRight - old this.spacingRight - old
) )
) + this.spacing; ) + this.spacing;
@ -462,7 +441,7 @@ class mxText extends mxShape {
parseInt( parseInt(
mxUtils.getValue( mxUtils.getValue(
this.style, this.style,
STYLE_SPACING_BOTTOM, 'spacingBottom',
this.spacingBottom - old this.spacingBottom - old
) )
) + this.spacing; ) + this.spacing;
@ -470,31 +449,31 @@ class mxText extends mxShape {
parseInt( parseInt(
mxUtils.getValue( mxUtils.getValue(
this.style, this.style,
STYLE_SPACING_LEFT, 'spacingLeft',
this.spacingLeft - old this.spacingLeft - old
) )
) + this.spacing; ) + this.spacing;
this.horizontal = mxUtils.getValue( this.horizontal = mxUtils.getValue(
this.style, this.style,
STYLE_HORIZONTAL, 'horizontal',
this.horizontal this.horizontal
); );
this.background = mxUtils.getValue( this.background = mxUtils.getValue(
this.style, this.style,
STYLE_LABEL_BACKGROUNDCOLOR, 'backgroundColor',
this.background this.background
); );
this.border = mxUtils.getValue( this.border = mxUtils.getValue(
this.style, this.style,
STYLE_LABEL_BORDERCOLOR, 'labelBorderColor',
this.border this.border
); );
this.textDirection = mxUtils.getValue( this.textDirection = mxUtils.getValue(
this.style, this.style,
STYLE_TEXT_DIRECTION, 'textDirection',
DEFAULT_TEXT_DIRECTION DEFAULT_TEXT_DIRECTION
); );
this.opacity = mxUtils.getValue(this.style, STYLE_TEXT_OPACITY, 100); this.opacity = mxUtils.getValue(this.style, 'textOpacity', 100);
this.updateMargin(); this.updateMargin();
} }
@ -558,13 +537,13 @@ class mxText extends mxShape {
const h = const h =
this.style != null this.style != null
? mxUtils.getValue(this.style, STYLE_LABEL_POSITION, ALIGN_CENTER) ? mxUtils.getValue(this.style, 'labelPosition', ALIGN_CENTER)
: null; : null;
const v = const v =
this.style != null this.style != null
? mxUtils.getValue( ? mxUtils.getValue(
this.style, this.style,
STYLE_VERTICAL_LABEL_POSITION, 'verticalLabelPosition',
ALIGN_MIDDLE ALIGN_MIDDLE
) )
: null; : null;
@ -698,7 +677,7 @@ class mxText extends mxShape {
!this.horizontal && !this.horizontal &&
this.state != null && this.state != null &&
// @ts-ignore // @ts-ignore
this.state.view.graph.model.isVertex(this.state.cell) this.state.cell.isVertex()
); );
} }

4
packages/core/src/shape/mxTriangle.ts
View File

@ -8,7 +8,7 @@
import mxPoint from '../util/datatypes/mxPoint'; import mxPoint from '../util/datatypes/mxPoint';
import mxActor from './mxActor'; import mxActor from './mxActor';
import mxUtils from '../util/mxUtils'; 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'; import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
/** /**
@ -47,7 +47,7 @@ class mxTriangle extends mxActor {
h: number h: number
): void { ): void {
const arcSize: number = const arcSize: number =
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2; mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
this.addPoints( this.addPoints(
c, c,

3
packages/core/src/shape/node/mxCylinder.ts
View File

@ -5,7 +5,6 @@
* Type definitions from the typed-mxgraph project * Type definitions from the typed-mxgraph project
*/ */
import mxShape from '../mxShape'; import mxShape from '../mxShape';
import { STYLE_BACKGROUND_OUTLINE } from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils'; import mxUtils from '../../util/mxUtils';
import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D'; import mxAbstractCanvas2D from '../../util/canvas/mxAbstractCanvas2D';
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D'; import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
@ -62,7 +61,7 @@ class mxCylinder extends mxShape {
if ( if (
!this.outline || !this.outline ||
this.style == null || this.style == null ||
mxUtils.getValue(this.style, STYLE_BACKGROUND_OUTLINE, 0) == 0 mxUtils.getValue(this.style, 'backgroundOutline', 0) == 0
) { ) {
c.setShadow(false); c.setShadow(false);
c.begin(); c.begin();

7
packages/core/src/shape/node/mxDoubleEllipse.ts
View File

@ -7,7 +7,6 @@
import mxRectangle from '../../util/datatypes/mxRectangle'; import mxRectangle from '../../util/datatypes/mxRectangle';
import mxShape from '../mxShape'; import mxShape from '../mxShape';
import { STYLE_MARGIN } from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils'; import mxUtils from '../../util/mxUtils';
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D'; import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
@ -24,7 +23,7 @@ import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
* c.ellipse(x, y, w, h); * c.ellipse(x, y, w, h);
* c.stroke(); * 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, 'margin', Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
* x += inset; * x += inset;
* y += inset; * y += inset;
* w -= 2 * inset; * w -= 2 * inset;
@ -84,7 +83,7 @@ class mxDoubleEllipse extends mxShape {
if (!this.outline) { if (!this.outline) {
const margin = mxUtils.getValue( const margin = mxUtils.getValue(
this.style, this.style,
STYLE_MARGIN, 'margin',
Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)) Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5))
); );
x += margin; x += margin;
@ -109,7 +108,7 @@ class mxDoubleEllipse extends mxShape {
const margin = const margin =
mxUtils.getValue( mxUtils.getValue(
this.style, this.style,
STYLE_MARGIN, 'margin',
Math.min( Math.min(
3 + this.strokewidth, 3 + this.strokewidth,
Math.min(rect.width / 5 / this.scale, rect.height / 5 / this.scale) Math.min(rect.width / 5 / this.scale, rect.height / 5 / this.scale)

4
packages/core/src/shape/node/mxHexagon.ts
View File

@ -7,7 +7,7 @@
import mxActor from '../mxActor'; import mxActor from '../mxActor';
import mxPoint from '../../util/datatypes/mxPoint'; import mxPoint from '../../util/datatypes/mxPoint';
import mxUtils from '../../util/mxUtils'; 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'; 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: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
redrawPath(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number) { redrawPath(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number) {
const arcSize = const arcSize =
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2; mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
this.addPoints( this.addPoints(
c, c,
[ [

21
packages/core/src/shape/node/mxImageShape.ts
View File

@ -6,11 +6,6 @@
*/ */
import mxUtils from '../../util/mxUtils'; import mxUtils from '../../util/mxUtils';
import {
STYLE_IMAGE_ASPECT,
STYLE_IMAGE_BACKGROUND,
STYLE_IMAGE_BORDER,
} from '../../util/mxConstants';
import mxRectangleShape from './mxRectangleShape'; import mxRectangleShape from './mxRectangleShape';
import mxRectangle from '../../util/datatypes/mxRectangle'; import mxRectangle from '../../util/datatypes/mxRectangle';
import mxCellState from '../../view/cell/mxCellState'; 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 * Overrides {@link mxShape.apply} to replace the fill and stroke colors with the
* respective values from {@link mxConstants.STYLE_IMAGE_BACKGROUND} and * respective values from {@link 'imageBackground'} and
* {@link mxConstants.STYLE_IMAGE_BORDER}. * {@link 'imageBorder'}.
* *
* Applies the style of the given {@link mxCellState} to the shape. This * Applies the style of the given {@link mxCellState} to the shape. This
* implementation assigns the following styles to local fields: * implementation assigns the following styles to local fields:
* *
* - {@link mxConstants.STYLE_IMAGE_BACKGROUND} => fill * - {@link 'imageBackground'} => fill
* - {@link mxConstants.STYLE_IMAGE_BORDER} => stroke * - {@link 'imageBorder'} => stroke
* *
* @param {mxCellState} state {@link mxCellState} of the corresponding cell. * @param {mxCellState} state {@link mxCellState} of the corresponding cell.
*/ */
@ -87,7 +82,7 @@ class mxImageShape extends mxRectangleShape {
if (this.style != null) { if (this.style != null) {
this.preserveImageAspect = this.preserveImageAspect =
mxUtils.getNumber(this.style, STYLE_IMAGE_ASPECT, 1) == 1; mxUtils.getNumber(this.style, 'imageAspect', 1) == 1;
// Legacy support for imageFlipH/V // Legacy support for imageFlipH/V
this.flipH = this.flipH =
@ -144,8 +139,8 @@ class mxImageShape extends mxRectangleShape {
h: number h: number
) { ) {
if (this.image != null) { if (this.image != null) {
const fill = mxUtils.getValue(this.style, STYLE_IMAGE_BACKGROUND, null); const fill = mxUtils.getValue(this.style, 'imageBackground', null);
let stroke = mxUtils.getValue(this.style, STYLE_IMAGE_BORDER, null); let stroke = mxUtils.getValue(this.style, 'imageBorder', null);
if (fill != null) { if (fill != null) {
// Stroke rendering required for shadow // Stroke rendering required for shadow
@ -158,7 +153,7 @@ class mxImageShape extends mxRectangleShape {
// FlipH/V are implicit via mxShape.updateTransform // FlipH/V are implicit via mxShape.updateTransform
c.image(x, y, w, h, this.image, this.preserveImageAspect, false, false); 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) { if (stroke != null) {
c.setShadow(false); c.setShadow(false);

13
packages/core/src/shape/node/mxRectangleShape.ts
View File

@ -9,9 +9,6 @@ import {
LINE_ARCSIZE, LINE_ARCSIZE,
NONE, NONE,
RECTANGLE_ROUNDING_FACTOR, RECTANGLE_ROUNDING_FACTOR,
STYLE_ABSOLUTE_ARCSIZE,
STYLE_ARCSIZE,
STYLE_POINTER_EVENTS,
} from '../../util/mxConstants'; } from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils'; import mxUtils from '../../util/mxUtils';
import mxShape from '../mxShape'; import mxShape from '../mxShape';
@ -50,7 +47,7 @@ class mxRectangleShape extends mxShape {
let events = true; let events = true;
if (this.style != null) { if (this.style != null) {
events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1'; events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
} }
return ( return (
@ -75,7 +72,7 @@ class mxRectangleShape extends mxShape {
let events = true; let events = true;
if (this.style != null) { if (this.style != null) {
events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1'; events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
} }
if ( if (
@ -90,19 +87,19 @@ class mxRectangleShape extends mxShape {
if (this.isRounded) { if (this.isRounded) {
let r = 0; let r = 0;
if (mxUtils.getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0) == '1') { if (mxUtils.getValue(this.style, 'absoluteArcSize', 0) == '1') {
r = Math.min( r = Math.min(
w / 2, w / 2,
Math.min( Math.min(
h / 2, h / 2,
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2 mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2
) )
); );
} else { } else {
const f = const f =
mxUtils.getValue( mxUtils.getValue(
this.style, this.style,
STYLE_ARCSIZE, 'arcSize',
RECTANGLE_ROUNDING_FACTOR * 100 RECTANGLE_ROUNDING_FACTOR * 100
) / 100; ) / 100;
r = Math.min(w * f, h * f); r = Math.min(w * f, h * f);

4
packages/core/src/shape/node/mxRhombus.ts
View File

@ -7,7 +7,7 @@
import mxShape from '../mxShape'; import mxShape from '../mxShape';
import mxPoint from '../../util/datatypes/mxPoint'; import mxPoint from '../../util/datatypes/mxPoint';
import mxUtils from '../../util/mxUtils'; 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 mxRectangle from '../../util/datatypes/mxRectangle';
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D'; import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
@ -59,7 +59,7 @@ class mxRhombus extends mxShape {
const hh = h / 2; const hh = h / 2;
const arcSize = const arcSize =
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2; mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
c.begin(); c.begin();
this.addPoints( this.addPoints(
c, c,

18
packages/core/src/shape/node/mxStencil.js
View File

@ -16,12 +16,6 @@ import {
NODETYPE_ELEMENT, NODETYPE_ELEMENT,
NONE, NONE,
RECTANGLE_ROUNDING_FACTOR, RECTANGLE_ROUNDING_FACTOR,
STYLE_BACKGROUND_OUTLINE,
STYLE_DIRECTION,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_POINTER_EVENTS,
STYLE_STROKEWIDTH,
} from '../../util/mxConstants'; } from '../../util/mxConstants';
import mxStencilRegistry from './mxStencilRegistry'; import mxStencilRegistry from './mxStencilRegistry';
import { getChildNodes, getTextContent } from '../../util/mxDomUtils'; import { getChildNodes, getTextContent } from '../../util/mxDomUtils';
@ -248,19 +242,19 @@ class mxStencil extends mxShape {
// (start, segment, end blocks), pluggable markers, how to implement // (start, segment, end blocks), pluggable markers, how to implement
// swimlanes (title area) with this API, add icon, horizontal/vertical // swimlanes (title area) with this API, add icon, horizontal/vertical
// label, indicator for all shapes, rotation // 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 aspect = this.computeAspect(shape.style, x, y, w, h, direction);
const minScale = Math.min(aspect.width, aspect.height); const minScale = Math.min(aspect.width, aspect.height);
const sw = const sw =
this.strokewidth == 'inherit' this.strokewidth == 'inherit'
? Number(mxUtils.getNumber(shape.style, STYLE_STROKEWIDTH, 1)) ? Number(mxUtils.getNumber(shape.style, 'strokeWidth', 1))
: Number(this.strokewidth) * minScale; : Number(this.strokewidth) * minScale;
canvas.setStrokeWidth(sw); canvas.setStrokeWidth(sw);
// Draws a transparent rectangle for catching events // Draws a transparent rectangle for catching events
if ( if (
shape.style != null && shape.style != null &&
mxUtils.getValue(shape.style, STYLE_POINTER_EVENTS, '0') == '1' mxUtils.getValue(shape.style, 'pointerEvents', '0') == '1'
) { ) {
canvas.setStrokeColor(NONE); canvas.setStrokeColor(NONE);
canvas.rect(x, y, w, h); canvas.rect(x, y, w, h);
@ -292,7 +286,7 @@ class mxStencil extends mxShape {
true, true,
!shape.outline || !shape.outline ||
shape.style == null || 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 // Restores stack for unequal count of save/restore calls
@ -562,8 +556,8 @@ class mxStencil extends mxShape {
const dr = shape.rotation; const dr = shape.rotation;
// Depends on flipping // Depends on flipping
const flipH = mxUtils.getValue(shape.style, STYLE_FLIPH, 0) == 1; const flipH = mxUtils.getValue(shape.style, 'flipH', 0) == 1;
const flipV = mxUtils.getValue(shape.style, STYLE_FLIPV, 0) == 1; const flipV = mxUtils.getValue(shape.style, 'flipV', 0) == 1;
if (flipH && flipV) { if (flipH && flipV) {
rotation -= dr; rotation -= dr;

37
packages/core/src/util/datatypes/style/mxEdgeStyle.js
View File

@ -23,17 +23,6 @@ import {
ELBOW_VERTICAL, ELBOW_VERTICAL,
ENTITY_SEGMENT, ENTITY_SEGMENT,
NONE, 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'; } from '../../mxConstants';
import mxRectangle from '../mxRectangle'; import mxRectangle from '../mxRectangle';
@ -41,13 +30,13 @@ import mxRectangle from '../mxRectangle';
* Class: mxEdgeStyle * Class: mxEdgeStyle
* *
* Provides various edge styles to be used as the values for * Provides various edge styles to be used as the values for
* <mxConstants.STYLE_EDGE> in a cell style. * <'edge'> in a cell style.
* *
* Example: * Example:
* *
* (code) * (code)
* let style = stylesheet.getDefaultEdgeStyle(); * let style = stylesheet.getDefaultEdgeStyle();
* style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; * style.edge = mxEdgeStyle.ElbowConnector;
* (end) * (end)
* *
* Sets the default edge style to <ElbowConnector>. * Sets the default edge style to <ElbowConnector>.
@ -100,7 +89,7 @@ import mxRectangle from '../mxRectangle';
* *
* (code) * (code)
* let style = graph.getStylesheet().getDefaultEdgeStyle(); * let style = graph.getStylesheet().getDefaultEdgeStyle();
* style[mxConstants.STYLE_EDGE] = mxEdgeStyle.MyStyle; * style.edge = mxEdgeStyle.MyStyle;
* (end) * (end)
* *
* Note that the object can be used directly when programmatically setting * Note that the object can be used directly when programmatically setting
@ -134,7 +123,7 @@ class mxEdgeStyle {
const { view } = state; const { view } = state;
const { graph } = view; const { graph } = view;
const segment = 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 pts = state.absolutePoints;
const p0 = pts[0]; const p0 = pts[0];
@ -289,11 +278,11 @@ class mxEdgeStyle {
let dy = 0; let dy = 0;
const seg = const seg =
mxUtils.getValue(state.style, STYLE_SEGMENT, graph.gridSize) * mxUtils.getValue(state.style, 'segment', graph.gridSize) *
view.scale; view.scale;
const dir = mxUtils.getValue( const dir = mxUtils.getValue(
state.style, state.style,
STYLE_DIRECTION, 'direction',
DIRECTION_WEST DIRECTION_WEST
); );
@ -385,7 +374,7 @@ class mxEdgeStyle {
if ( if (
!horizontal && !horizontal &&
(vertical || state.style[STYLE_ELBOW] === ELBOW_VERTICAL) (vertical || state.style.elbow === ELBOW_VERTICAL)
) { ) {
mxEdgeStyle.TopToBottom(state, source, target, points, result); mxEdgeStyle.TopToBottom(state, source, target, points, result);
} else { } else {
@ -965,22 +954,22 @@ class mxEdgeStyle {
static getJettySize(state, isSource) { static getJettySize(state, isSource) {
let value = mxUtils.getValue( let value = mxUtils.getValue(
state.style, state.style,
isSource ? STYLE_SOURCE_JETTY_SIZE : STYLE_TARGET_JETTY_SIZE, isSource ? 'sourceJettySize' : 'targetJettySize',
mxUtils.getValue(state.style, STYLE_JETTY_SIZE, mxEdgeStyle.orthBuffer) mxUtils.getValue(state.style, 'jettySize', mxEdgeStyle.orthBuffer)
); );
if (value === 'auto') { if (value === 'auto') {
// Computes the automatic jetty size // Computes the automatic jetty size
const type = mxUtils.getValue( const type = mxUtils.getValue(
state.style, state.style,
isSource ? STYLE_STARTARROW : STYLE_ENDARROW, isSource ? 'startArrow' : 'endArrow',
NONE NONE
); );
if (type !== NONE) { if (type !== NONE) {
const size = mxUtils.getNumber( const size = mxUtils.getNumber(
state.style, state.style,
isSource ? STYLE_STARTSIZE : STYLE_ENDSIZE, isSource ? 'startSize' : 'endSize',
DEFAULT_MARKERSIZE DEFAULT_MARKERSIZE
); );
value = value =
@ -1160,7 +1149,7 @@ class mxEdgeStyle {
true, true,
DIRECTION_MASK_ALL DIRECTION_MASK_ALL
); );
rotation = mxUtils.getValue(source.style, STYLE_ROTATION, 0); rotation = mxUtils.getValue(source.style, 'rotation', 0);
// console.log('source rotation', rotation); // console.log('source rotation', rotation);
@ -1183,7 +1172,7 @@ class mxEdgeStyle {
false, false,
DIRECTION_MASK_ALL DIRECTION_MASK_ALL
); );
rotation = mxUtils.getValue(target.style, STYLE_ROTATION, 0); rotation = mxUtils.getValue(target.style, 'rotation', 0);
// console.log('target rotation', rotation); // console.log('target rotation', rotation);

9
packages/core/src/util/datatypes/style/mxPerimeter.ts
View File

@ -12,7 +12,6 @@ import {
DIRECTION_NORTH, DIRECTION_NORTH,
DIRECTION_SOUTH, DIRECTION_SOUTH,
DIRECTION_WEST, DIRECTION_WEST,
STYLE_DIRECTION,
} from '../../mxConstants'; } from '../../mxConstants';
import mxRectangle from '../mxRectangle'; import mxRectangle from '../mxRectangle';
import mxCellState from '../../../view/cell/mxCellState'; import mxCellState from '../../../view/cell/mxCellState';
@ -35,7 +34,7 @@ import mxCellState from '../../../view/cell/mxCellState';
* *
* @example * @example
* ```javascript * ```javascript
* style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; * style.perimiter = mxPerimeter.RectanglePerimeter;
* ``` * ```
* *
* When adding new perimeter functions, it is recommended to use the * When adding new perimeter functions, it is recommended to use the
@ -75,7 +74,7 @@ import mxCellState from '../../../view/cell/mxCellState';
* @example * @example
* ```javascript * ```javascript
* var style = graph.getStylesheet().getDefaultVertexStyle(); * 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 * Note that the object can be used directly when programmatically setting
@ -314,7 +313,7 @@ class mxPerimeter {
next: mxPoint, next: mxPoint,
orthogonal: boolean = false orthogonal: boolean = false
): mxPoint | null { ): mxPoint | null {
const direction = vertex != null ? vertex.style[STYLE_DIRECTION] : null; const direction = vertex != null ? vertex.style.direction : null;
const vertical = const vertical =
direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH; direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH;
@ -463,7 +462,7 @@ class mxPerimeter {
const direction = const direction =
vertex != null vertex != null
? mxUtils.getValue(vertex.style, STYLE_DIRECTION, DIRECTION_EAST) ? mxUtils.getValue(vertex.style, 'direction', DIRECTION_EAST)
: DIRECTION_EAST; : DIRECTION_EAST;
const vertical = const vertical =
direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH; direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH;

46
packages/core/src/util/datatypes/style/mxStylesheet.js
View File

@ -10,15 +10,7 @@ import {
ARROW_CLASSIC, ARROW_CLASSIC,
NONE, NONE,
SHAPE_CONNECTOR, SHAPE_CONNECTOR,
SHAPE_RECTANGLE, SHAPE_RECTANGLE
STYLE_ALIGN,
STYLE_ENDARROW,
STYLE_FILLCOLOR,
STYLE_FONTCOLOR,
STYLE_PERIMETER,
STYLE_SHAPE,
STYLE_STROKECOLOR,
STYLE_VERTICAL_ALIGN,
} from '../../mxConstants'; } from '../../mxConstants';
import mxPerimeter from './mxPerimeter'; import mxPerimeter from './mxPerimeter';
import mxUtils from '../../mxUtils'; import mxUtils from '../../mxUtils';
@ -45,9 +37,9 @@ import { clone } from '../../mxCloneUtils';
* *
* ```javascript * ```javascript
* var vertexStyle = stylesheet.getDefaultVertexStyle(); * var vertexStyle = stylesheet.getDefaultVertexStyle();
* vertexStyle[mxConstants.STYLE_ROUNDED] = true; * vertexStyle.rounded = true;
* var edgeStyle = stylesheet.getDefaultEdgeStyle(); * var edgeStyle = stylesheet.getDefaultEdgeStyle();
* edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation; * edgeStyle.edge = mxEdgeStyle.EntityRelation;
* ``` * ```
* *
* Modifies the built-in default styles. * Modifies the built-in default styles.
@ -94,13 +86,13 @@ class mxStylesheet {
// createDefaultVertexStyle(): StyleMap; // createDefaultVertexStyle(): StyleMap;
createDefaultVertexStyle() { createDefaultVertexStyle() {
const style = {}; const style = {};
style[STYLE_SHAPE] = SHAPE_RECTANGLE; style.shape = SHAPE_RECTANGLE;
style[STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimeter = mxPerimeter.RectanglePerimeter;
style[STYLE_VERTICAL_ALIGN] = ALIGN_MIDDLE; style.verticalAlign = ALIGN_MIDDLE;
style[STYLE_ALIGN] = ALIGN_CENTER; style.align = ALIGN_CENTER;
style[STYLE_FILLCOLOR] = '#C3D9FF'; style.fillColor = '#C3D9FF';
style[STYLE_STROKECOLOR] = '#6482B9'; style.strokeColor = '#6482B9';
style[STYLE_FONTCOLOR] = '#774400'; style.fontColor = '#774400';
return style; return style;
} }
@ -110,12 +102,12 @@ class mxStylesheet {
// createDefaultEdgeStyle(): StyleMap; // createDefaultEdgeStyle(): StyleMap;
createDefaultEdgeStyle() { createDefaultEdgeStyle() {
const style = {}; const style = {};
style[STYLE_SHAPE] = SHAPE_CONNECTOR; style.shape = SHAPE_CONNECTOR;
style[STYLE_ENDARROW] = ARROW_CLASSIC; style.endArrow = ARROW_CLASSIC;
style[STYLE_VERTICAL_ALIGN] = ALIGN_MIDDLE; style.verticalAlign = ALIGN_MIDDLE;
style[STYLE_ALIGN] = ALIGN_CENTER; style.align = ALIGN_CENTER;
style[STYLE_STROKECOLOR] = '#6482B9'; style.strokeColor = '#6482B9';
style[STYLE_FONTCOLOR] = '#446299'; style.fontColor = '#446299';
return style; return style;
} }
@ -164,9 +156,9 @@ class mxStylesheet {
* *
* ```javascript * ```javascript
* var style = new Object(); * var style = new Object();
* style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; * style.shape = mxConstants.SHAPE_RECTANGLE;
* style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; * style.perimiter = mxPerimeter.RectanglePerimeter;
* style[mxConstants.STYLE_ROUNDED] = true; * style.rounded = true;
* graph.getStylesheet().putCellStyle('rounded', style); * graph.getStylesheet().putCellStyle('rounded', style);
* ``` * ```
* *

1171
packages/core/src/util/mxConstants.js
View File

File diff suppressed because it is too large Load Diff

32
packages/core/src/util/mxUtils.js
View File

@ -34,16 +34,6 @@ import {
NODETYPE_TEXT, NODETYPE_TEXT,
NONE, NONE,
PAGE_FORMAT_A4_PORTRAIT, 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'; } from './mxConstants';
import mxPoint from './datatypes/mxPoint'; import mxPoint from './datatypes/mxPoint';
import mxDictionary from './datatypes/mxDictionary'; import mxDictionary from './datatypes/mxDictionary';
@ -905,10 +895,10 @@ const mxUtils = {
getPortConstraints: (terminal, edge, source, defaultValue) => { getPortConstraints: (terminal, edge, source, defaultValue) => {
const value = mxUtils.getValue( const value = mxUtils.getValue(
terminal.style, terminal.style,
STYLE_PORT_CONSTRAINT, 'portConstraint',
mxUtils.getValue( mxUtils.getValue(
edge.style, edge.style,
source ? STYLE_SOURCE_PORT_CONSTRAINT : STYLE_TARGET_PORT_CONSTRAINT, source ? 'sourcePortConstraint' : 'targetPortConstraint',
null null
) )
); );
@ -920,13 +910,13 @@ const mxUtils = {
let returnValue = DIRECTION_MASK_NONE; let returnValue = DIRECTION_MASK_NONE;
const constraintRotationEnabled = mxUtils.getValue( const constraintRotationEnabled = mxUtils.getValue(
terminal.style, terminal.style,
STYLE_PORT_CONSTRAINT_ROTATION, 'portConstraintRotation',
0 0
); );
let rotation = 0; let rotation = 0;
if (constraintRotationEnabled == 1) { if (constraintRotationEnabled == 1) {
rotation = mxUtils.getValue(terminal.style, STYLE_ROTATION, 0); rotation = mxUtils.getValue(terminal.style, 'rotation', 0);
} }
let quad = 0; let quad = 0;
@ -1073,9 +1063,9 @@ const mxUtils = {
* rectangle according to the respective styles in style. * rectangle according to the respective styles in style.
*/ */
getDirectedBounds(rect, m, style, flipH, flipV) { getDirectedBounds(rect, m, style, flipH, flipV) {
const d = mxUtils.getValue(style, STYLE_DIRECTION, DIRECTION_EAST); const d = mxUtils.getValue(style, 'direction', DIRECTION_EAST);
flipH = flipH != null ? flipH : mxUtils.getValue(style, STYLE_FLIPH, false); flipH = flipH != null ? flipH : mxUtils.getValue(style, 'flipH', false);
flipV = flipV != null ? flipV : mxUtils.getValue(style, STYLE_FLIPV, false); flipV = flipV != null ? flipV : mxUtils.getValue(style, 'flipV', false);
m.x = Math.round(Math.max(0, Math.min(rect.width, m.x))); 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))); m.y = Math.round(Math.max(0, Math.min(rect.height, m.y)));
@ -1321,10 +1311,10 @@ const mxUtils = {
let h = state.height; let h = state.height;
const start = const start =
mxUtils.getValue(state.style, STYLE_STARTSIZE) * state.view.scale; mxUtils.getValue(state.style, 'startSize') * state.view.scale;
if (start > 0) { if (start > 0) {
if (mxUtils.getValue(state.style, STYLE_HORIZONTAL, true)) { if (mxUtils.getValue(state.style, 'horizontal', true)) {
cy = state.y + start / 2; cy = state.y + start / 2;
h = start; h = start;
} else { } else {
@ -1343,7 +1333,7 @@ const mxUtils = {
const rect = new mxRectangle(cx - w / 2, cy - h / 2, w, h); const rect = new mxRectangle(cx - w / 2, cy - h / 2, w, h);
const alpha = mxUtils.toRadians( const alpha = mxUtils.toRadians(
mxUtils.getValue(state.style, STYLE_ROTATION) || 0 mxUtils.getValue(state.style, 'rotation') || 0
); );
if (alpha != 0) { if (alpha != 0) {
@ -2003,7 +1993,7 @@ const mxUtils = {
* let cells = graph.getSelectionCells(); * let cells = graph.getSelectionCells();
* mxUtils.setCellStyleFlags(graph.model, * mxUtils.setCellStyleFlags(graph.model,
* cells, * cells,
* mxConstants.STYLE_FONTSTYLE, * 'fontStyle',
* mxConstants.FONT_BOLD); * mxConstants.FONT_BOLD);
* (end) * (end)
* *

31
packages/core/src/view/cell/mxCellEditor.ts
View File

@ -23,13 +23,6 @@ import {
FONT_STRIKETHROUGH, FONT_STRIKETHROUGH,
FONT_UNDERLINE, FONT_UNDERLINE,
LINE_HEIGHT, LINE_HEIGHT,
STYLE_ALIGN,
STYLE_FONTCOLOR,
STYLE_LABEL_POSITION,
STYLE_LABEL_WIDTH,
STYLE_OVERFLOW,
STYLE_VERTICAL_ALIGN,
STYLE_VERTICAL_LABEL_POSITION,
WORD_WRAP, WORD_WRAP,
} from '../../util/mxConstants'; } from '../../util/mxConstants';
import mxText from '../../shape/mxText'; import mxText from '../../shape/mxText';
@ -610,14 +603,14 @@ class mxCellEditor {
} }
} }
} else { } 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; m = state.text != null && this.align == null ? state.text.margin : null;
if (m == null) { if (m == null) {
m = mxUtils.getAlignmentAsPoint( m = mxUtils.getAlignmentAsPoint(
this.align || this.align ||
mxUtils.getValue(state.style, STYLE_ALIGN, ALIGN_CENTER), mxUtils.getValue(state.style, 'align', ALIGN_CENTER),
mxUtils.getValue(state.style, STYLE_VERTICAL_ALIGN, ALIGN_MIDDLE) mxUtils.getValue(state.style, 'verticalAlign', ALIGN_MIDDLE)
); );
} }
@ -638,12 +631,12 @@ class mxCellEditor {
let bounds = mxRectangle.fromRectangle(state); let bounds = mxRectangle.fromRectangle(state);
let hpos = mxUtils.getValue( let hpos = mxUtils.getValue(
state.style, state.style,
STYLE_LABEL_POSITION, 'labelPosition',
ALIGN_CENTER ALIGN_CENTER
); );
let vpos = mxUtils.getValue( let vpos = mxUtils.getValue(
state.style, state.style,
STYLE_VERTICAL_LABEL_POSITION, 'verticalLabelPosition',
ALIGN_MIDDLE ALIGN_MIDDLE
); );
@ -658,7 +651,7 @@ class mxCellEditor {
if ( if (
!state.view.graph.cellRenderer.legacySpacing || !state.view.graph.cellRenderer.legacySpacing ||
state.style[STYLE_OVERFLOW] !== 'width' state.style.overflow !== 'width'
) { ) {
// @ts-ignore // @ts-ignore
const dummy = new mxText(); // FIXME!!!! =================================================================================================== const dummy = new mxText(); // FIXME!!!! ===================================================================================================
@ -840,8 +833,8 @@ class mxCellEditor {
state.style.fontFamily != null state.style.fontFamily != null
? state.style.fontFamily ? state.style.fontFamily
: DEFAULT_FONTFAMILY; : DEFAULT_FONTFAMILY;
const color = mxUtils.getValue(state.style, STYLE_FONTCOLOR, 'black'); const color = mxUtils.getValue(state.style, 'fontColor', 'black');
const align = mxUtils.getValue(state.style, STYLE_ALIGN, ALIGN_LEFT); const align = mxUtils.getValue(state.style, 'align', ALIGN_LEFT);
const bold = (state.style.fontStyle || 0) & FONT_BOLD; const bold = (state.style.fontStyle || 0) & FONT_BOLD;
const italic = (state.style.fontStyle || 0) & FONT_ITALIC; const italic = (state.style.fontStyle || 0) & FONT_ITALIC;
@ -923,7 +916,7 @@ class mxCellEditor {
this.autoSize && this.autoSize &&
// @ts-ignore // @ts-ignore
(this.graph.model.isEdge(state.cell) || (this.graph.model.isEdge(state.cell) ||
state.style[STYLE_OVERFLOW] !== 'fill') state.style.overflow !== 'fill')
) { ) {
window.setTimeout(() => { window.setTimeout(() => {
this.resize(); this.resize();
@ -1027,7 +1020,7 @@ class mxCellEditor {
} }
if (this.align != null) { if (this.align != null) {
this.graph.setCellStyles(STYLE_ALIGN, this.align, [state.cell]); this.graph.setCellStyles('align', this.align, [state.cell]);
} }
} finally { } finally {
this.graph.getModel().endUpdate(); this.graph.getModel().endUpdate();
@ -1101,7 +1094,7 @@ class mxCellEditor {
if ( if (
!isEdge && !isEdge &&
state.view.graph.cellRenderer.legacySpacing && state.view.graph.cellRenderer.legacySpacing &&
state.style[STYLE_OVERFLOW] === 'fill' state.style.overflow === 'fill'
) { ) {
result = (<mxShape>state.shape).getLabelBounds( result = (<mxShape>state.shape).getLabelBounds(
mxRectangle.fromRectangle(state) mxRectangle.fromRectangle(state)
@ -1187,7 +1180,7 @@ class mxCellEditor {
const horizontal: string = <string>( const horizontal: string = <string>(
mxUtils.getStringValue( mxUtils.getStringValue(
state.style, state.style,
STYLE_LABEL_POSITION, 'labelPosition',
ALIGN_CENTER ALIGN_CENTER
) )
); );

141
packages/core/src/view/cell/mxCellRenderer.ts
View File

@ -46,33 +46,6 @@ import {
SHAPE_RHOMBUS, SHAPE_RHOMBUS,
SHAPE_SWIMLANE, SHAPE_SWIMLANE,
SHAPE_TRIANGLE, 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'; } from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils'; import mxUtils from '../../util/mxUtils';
import mxRectangle from '../../util/datatypes/mxRectangle'; import mxRectangle from '../../util/datatypes/mxRectangle';
@ -248,7 +221,7 @@ class mxCellRenderer {
if (state.style != null) { if (state.style != null) {
// Checks if there is a stencil for the name and creates // Checks if there is a stencil for the name and creates
// a shape instance for the stencil if one exists // 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) { if (stencil != null) {
shape = new mxShape(stencil); shape = new mxShape(stencil);
} else { } else {
@ -294,7 +267,7 @@ class mxCellRenderer {
*/ */
// getShapeConstructor(state: mxCellState): any; // getShapeConstructor(state: mxCellState): any;
getShapeConstructor(state: mxCellState) { getShapeConstructor(state: mxCellState) {
let ctor = this.getShape(state.style[STYLE_SHAPE]); let ctor = this.getShape(state.style.shape);
if (ctor == null) { if (ctor == null) {
ctor = <typeof mxShape>( ctor = <typeof mxShape>(
(state.cell.isEdge() ? this.defaultEdgeShape : this.defaultVertexShape) (state.cell.isEdge() ? this.defaultEdgeShape : this.defaultVertexShape)
@ -318,11 +291,11 @@ class mxCellRenderer {
shape.apply(state); shape.apply(state);
shape.image = state.view.graph.getImage(state); shape.image = state.view.graph.getImage(state);
shape.indicatorColor = state.view.graph.getIndicatorColor(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( shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(
state state
); );
shape.indicatorDirection = state.style[STYLE_INDICATOR_DIRECTION]; shape.indicatorDirection = state.style.indicatorDirection;
shape.indicatorImage = state.view.graph.getIndicatorImage(state); shape.indicatorImage = state.view.graph.getIndicatorImage(state);
this.postConfigureShape(state); this.postConfigureShape(state);
} }
@ -338,11 +311,11 @@ class mxCellRenderer {
// postConfigureShape(state: mxCellState): void; // postConfigureShape(state: mxCellState): void;
postConfigureShape(state: mxCellState) { postConfigureShape(state: mxCellState) {
if (state.shape != null) { if (state.shape != null) {
this.resolveColor(state, 'indicatorGradientColor', STYLE_GRADIENTCOLOR); this.resolveColor(state, 'indicatorGradientColor', 'gradientColor');
this.resolveColor(state, 'indicatorColor', STYLE_FILLCOLOR); this.resolveColor(state, 'indicatorColor', 'fillColor');
this.resolveColor(state, 'gradient', STYLE_GRADIENTCOLOR); this.resolveColor(state, 'gradient', 'gradientColor');
this.resolveColor(state, 'stroke', STYLE_STROKECOLOR); this.resolveColor(state, 'stroke', 'strokeColor');
this.resolveColor(state, 'fill', STYLE_FILLCOLOR); this.resolveColor(state, 'fill', 'fillColor');
} }
} }
@ -358,10 +331,10 @@ class mxCellRenderer {
if (state.style != null) { if (state.style != null) {
const values = ['inherit', 'swimlane', 'indicated']; const values = ['inherit', 'swimlane', 'indicated'];
const styles = [ const styles = [
STYLE_FILLCOLOR, 'fillColor',
STYLE_STROKECOLOR, 'strokeColor',
STYLE_GRADIENTCOLOR, 'gradientColor',
STYLE_FONTCOLOR, 'fontColor',
]; ];
for (let i = 0; i < styles.length; i += 1) { 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): void;
resolveColor(state: mxCellState, field: string, key: string) { 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) { if (shape != null) {
const { graph } = state.view; const { graph } = state.view;
@ -391,18 +364,18 @@ class mxCellRenderer {
if (value === 'inherit') { if (value === 'inherit') {
// @ts-ignore // @ts-ignore
referenced = graph.model.getParent(state.cell); referenced = state.cell.getParent();
} else if (value === 'swimlane') { } else if (value === 'swimlane') {
// @ts-ignore // @ts-ignore
shape[field] = shape[field] =
key === STYLE_STROKECOLOR || key === STYLE_FONTCOLOR key === 'strokeColor' || key === 'fontColor'
? '#000000' ? '#000000'
: '#ffffff'; : '#ffffff';
// @ts-ignore // @ts-ignore
if (graph.model.getTerminal(state.cell, false) != null) { if (state.cell.getTerminal(false) != null) {
// @ts-ignore // @ts-ignore
referenced = graph.model.getTerminal(state.cell, false); referenced = state.cell.getTerminal(false);
} else { } else {
referenced = state.cell; referenced = state.cell;
} }
@ -413,19 +386,19 @@ class mxCellRenderer {
// @ts-ignore // @ts-ignore
shape[field] = state.shape.indicatorColor; shape[field] = state.shape.indicatorColor;
} else if ( } else if (
key !== STYLE_FILLCOLOR && key !== 'fillColor' &&
value === STYLE_FILLCOLOR && value === 'fillColor' &&
state.shape != null state.shape != null
) { ) {
// @ts-ignore // @ts-ignore
shape[field] = state.style[STYLE_FILLCOLOR]; shape[field] = state.style.fillColor;
} else if ( } else if (
key !== STYLE_STROKECOLOR && key !== 'strokeColor' &&
value === STYLE_STROKECOLOR && value === 'strokeColor' &&
state.shape != null state.shape != null
) { ) {
// @ts-ignore // @ts-ignore
shape[field] = state.style[STYLE_STROKECOLOR]; shape[field] = state.style.strokeColor;
} }
if (referenced != null) { if (referenced != null) {
@ -434,7 +407,7 @@ class mxCellRenderer {
shape[field] = null; shape[field] = null;
if (rstate != 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') { if (rshape != null && field !== 'indicatorColor') {
// @ts-ignore // @ts-ignore
@ -997,7 +970,7 @@ class mxCellRenderer {
state.view.graph.isHtmlLabel(state.cell) || state.view.graph.isHtmlLabel(state.cell) ||
(value != null && isNode(value)); (value != null && isNode(value));
const dialect = isForceHtml ? DIALECT_STRICTHTML : state.view.graph.dialect; const dialect = isForceHtml ? DIALECT_STRICTHTML : state.view.graph.dialect;
const overflow = state.style[STYLE_OVERFLOW] || 'visible'; const overflow = state.style.overflow || 'visible';
if ( if (
state.text != null && state.text != null &&
@ -1043,7 +1016,7 @@ class mxCellRenderer {
const bounds = this.getLabelBounds(state); const bounds = this.getLabelBounds(state);
const nextScale = this.getTextScale(state); const nextScale = this.getTextScale(state);
this.resolveColor(state, 'color', STYLE_FONTCOLOR); this.resolveColor(state, 'color', 'fontColor');
if ( if (
forced || forced ||
@ -1110,22 +1083,22 @@ class mxCellRenderer {
} }
return ( return (
check('fontStyle', STYLE_FONTSTYLE, DEFAULT_FONTSTYLE) || check('fontStyle', 'fontStyle', DEFAULT_FONTSTYLE) ||
check('family', STYLE_FONTFAMILY, DEFAULT_FONTFAMILY) || check('family', 'fontFamily', DEFAULT_FONTFAMILY) ||
check('size', STYLE_FONTSIZE, DEFAULT_FONTSIZE) || check('size', 'fontSize', DEFAULT_FONTSIZE) ||
check('color', STYLE_FONTCOLOR, 'black') || check('color', 'fontColor', 'black') ||
check('align', STYLE_ALIGN, '') || check('align', 'align', '') ||
check('valign', STYLE_VERTICAL_ALIGN, '') || check('valign', 'verticalAlign', '') ||
check('spacing', STYLE_SPACING, 2) || check('spacing', 'spacing', 2) ||
check('spacingTop', STYLE_SPACING_TOP, 0) || check('spacingTop', 'spacingTop', 0) ||
check('spacingRight', STYLE_SPACING_RIGHT, 0) || check('spacingRight', 'spacingRight', 0) ||
check('spacingBottom', STYLE_SPACING_BOTTOM, 0) || check('spacingBottom', 'spacingBottom', 0) ||
check('spacingLeft', STYLE_SPACING_LEFT, 0) || check('spacingLeft', 'spacingLeft', 0) ||
check('horizontal', STYLE_HORIZONTAL, true) || check('horizontal', 'horizontal', true) ||
check('background', STYLE_LABEL_BACKGROUNDCOLOR, null) || check('background', 'labelBackgroundColor', null) ||
check('border', STYLE_LABEL_BORDERCOLOR, null) || check('border', 'labelBorderColor', null) ||
check('opacity', STYLE_TEXT_OPACITY, 100) || check('opacity', 'textOpacity', 100) ||
check('textDirection', STYLE_TEXT_DIRECTION, DEFAULT_TEXT_DIRECTION) check('textDirection', 'textDirection', DEFAULT_TEXT_DIRECTION)
); );
} }
@ -1220,12 +1193,12 @@ class mxCellRenderer {
if (state.shape != null) { if (state.shape != null) {
const hpos = mxUtils.getValue( const hpos = mxUtils.getValue(
state.style, state.style,
STYLE_LABEL_POSITION, 'labelPosition',
ALIGN_CENTER ALIGN_CENTER
); );
const vpos = mxUtils.getValue( const vpos = mxUtils.getValue(
state.style, state.style,
STYLE_VERTICAL_LABEL_POSITION, 'verticalLabelPosition',
ALIGN_MIDDLE ALIGN_MIDDLE
); );
@ -1235,7 +1208,7 @@ class mxCellRenderer {
} }
// Label width style overrides actual label width // 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) { if (lw != null) {
bounds.width = parseFloat(lw) * scale; bounds.width = parseFloat(lw) * scale;
@ -1267,8 +1240,8 @@ class mxCellRenderer {
if ( if (
!this.legacySpacing || !this.legacySpacing ||
(state.style[STYLE_OVERFLOW] !== 'fill' && (state.style.overflow !== 'fill' &&
state.style[STYLE_OVERFLOW] !== 'width') state.style.overflow !== 'width')
) { ) {
const s = state.view.scale; const s = state.view.scale;
// @ts-ignore // @ts-ignore
@ -1278,15 +1251,15 @@ class mxCellRenderer {
const hpos = mxUtils.getValue( const hpos = mxUtils.getValue(
state.style, state.style,
STYLE_LABEL_POSITION, 'labelPosition',
ALIGN_CENTER ALIGN_CENTER
); );
const vpos = mxUtils.getValue( const vpos = mxUtils.getValue(
state.style, state.style,
STYLE_VERTICAL_LABEL_POSITION, 'verticalLabelPosition',
ALIGN_MIDDLE ALIGN_MIDDLE
); );
const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null); const lw = mxUtils.getValue(state.style, 'labelWidth', null);
bounds.width = Math.max( bounds.width = Math.max(
0, 0,
@ -1314,7 +1287,7 @@ class mxCellRenderer {
theta !== 0 && theta !== 0 &&
state != null && state != null &&
// @ts-ignore // @ts-ignore
state.view.graph.model.isVertex(state.cell) state.cell.isVertex()
) { ) {
const cx = state.getCenterX(); const cx = state.getCenterX();
const cy = state.getCenterY(); const cy = state.getCenterY();
@ -1349,7 +1322,7 @@ class mxCellRenderer {
if (state.overlays != null) { if (state.overlays != null) {
const rot = mxUtils.mod( const rot = mxUtils.mod(
mxUtils.getValue(state.style, STYLE_ROTATION, 0), mxUtils.getValue(state.style, 'rotation', 0),
90 90
); );
const rad = mxUtils.toRadians(rot); const rad = mxUtils.toRadians(rot);
@ -1410,7 +1383,7 @@ class mxCellRenderer {
const bounds = this.getControlBounds(state, image.width, image.height); const bounds = this.getControlBounds(state, image.width, image.height);
const r = this.legacyControlPosition const r = this.legacyControlPosition
? mxUtils.getValue(state.style, STYLE_ROTATION, 0) ? mxUtils.getValue(state.style, 'rotation', 0)
: // @ts-ignore : // @ts-ignore
state.shape.getTextRotation(); state.shape.getTextRotation();
const s = state.view.scale; const s = state.view.scale;
@ -1457,7 +1430,7 @@ class mxCellRenderer {
let rot = state.shape.getShapeRotation(); let rot = state.shape.getShapeRotation();
if (this.legacyControlPosition) { if (this.legacyControlPosition) {
rot = mxUtils.getValue(state.style, STYLE_ROTATION, 0); rot = mxUtils.getValue(state.style, 'rotation', 0);
} else if (state.shape.isPaintBoundsInverted()) { } else if (state.shape.isPaintBoundsInverted()) {
const t = (state.width - state.height) / 2; const t = (state.width - state.height) / 2;
cx += t; cx += t;
@ -1655,8 +1628,6 @@ class mxCellRenderer {
force: boolean = false, force: boolean = false,
rendering: boolean = true rendering: boolean = true
): boolean { ): boolean {
const model = <mxGraphModel>state.view.graph.model;
let shapeChanged = false; let shapeChanged = false;
// Forces creation of new shape if shape style has changed // Forces creation of new shape if shape style has changed
@ -1664,7 +1635,7 @@ class mxCellRenderer {
state.shape != null && state.shape != null &&
state.shape.style != null && state.shape.style != null &&
state.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.destroy();
state.shape = null; state.shape = null;

285
packages/core/src/view/graph/mxGraph.ts
View File

@ -55,62 +55,6 @@ import {
PAGE_FORMAT_A4_PORTRAIT, PAGE_FORMAT_A4_PORTRAIT,
SHAPE_LABEL, SHAPE_LABEL,
SHAPE_SWIMLANE, 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'; } from '../../util/mxConstants';
import mxMultiplicity from '../connection/mxMultiplicity'; 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 * The attribute used to find the color for the indicator if the indicator
* color is set to 'swimlane'. * color is set to 'swimlane'.
* @default {@link mxConstants.STYLE_FILLCOLOR} * @default {@link 'fillColor'}
*/ */
// swimlaneIndicatorColorAttribute: string; // swimlaneIndicatorColorAttribute: string;
swimlaneIndicatorColorAttribute: string = STYLE_FILLCOLOR; swimlaneIndicatorColorAttribute: string = 'fillColor';
/** /**
* Holds the list of image bundles. * Holds the list of image bundles.
@ -2708,11 +2652,11 @@ class mxGraph extends mxEventSource {
// postProcessCellStyle(style: StyleMap): StyleMap; // postProcessCellStyle(style: StyleMap): StyleMap;
postProcessCellStyle(style: any): any { postProcessCellStyle(style: any): any {
if (style != null) { if (style != null) {
const key = style[STYLE_IMAGE]; const key = style.image;
let image = this.getImageFromBundles(key); let image = this.getImageFromBundles(key);
if (image != null) { if (image != null) {
style[STYLE_IMAGE] = image; style.image = image;
} else { } else {
image = key; image = key;
} }
@ -2737,7 +2681,7 @@ class mxGraph extends mxEventSource {
} }
} }
style[STYLE_IMAGE] = image; style.image = image;
} }
} }
return style; 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 * 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 * 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 * 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: * Parameter:
* *
@ -2996,7 +2940,7 @@ class mxGraph extends mxEventSource {
* transaction is in progress. Returns the edge that was flipped. * transaction is in progress. Returns the edge that was flipped.
* *
* Here is an example that overrides this implementation to invert the * 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 * ```javascript
* graph.flipEdge = function(edge) * graph.flipEdge = function(edge)
@ -3004,11 +2948,11 @@ class mxGraph extends mxEventSource {
* if (edge != null) * if (edge != null)
* { * {
* var style = this.getCurrentCellStyle(edge); * var style = this.getCurrentCellStyle(edge);
* var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW, * var elbow = mxUtils.getValue(style, 'elbow',
* mxConstants.ELBOW_HORIZONTAL); * mxConstants.ELBOW_HORIZONTAL);
* var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ? * var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
* mxConstants.ELBOW_VERTICAL : 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) { if (tmp != null) {
bounds = <mxGeometry>tmp; bounds = <mxGeometry>tmp;
const startSize = mxUtils.getValue(style, STYLE_STARTSIZE); const startSize = mxUtils.getValue(style, 'startSize');
if (startSize > 0) { if (startSize > 0) {
bounds.height = Math.max(bounds.height, startSize); bounds.height = Math.max(bounds.height, startSize);
@ -4675,7 +4619,7 @@ class mxGraph extends mxEventSource {
geo.alternateBounds.x = geo.x; geo.alternateBounds.x = geo.x;
geo.alternateBounds.y = geo.y; geo.alternateBounds.y = geo.y;
const alpha = mxUtils.toRadians(style[STYLE_ROTATION] || 0); const alpha = mxUtils.toRadians(style.rotation || 0);
if (alpha !== 0) { if (alpha !== 0) {
const dx = geo.alternateBounds.getCenterX() - geo.getCenterX(); const dx = geo.alternateBounds.getCenterX() - geo.getCenterX();
@ -4786,10 +4730,10 @@ class mxGraph extends mxEventSource {
cellStyle = ''; cellStyle = '';
} }
if (mxUtils.getValue(style, STYLE_HORIZONTAL, true)) { if (mxUtils.getValue(style, 'horizontal', true)) {
cellStyle = mxUtils.setStyle( cellStyle = mxUtils.setStyle(
cellStyle, cellStyle,
STYLE_STARTSIZE, 'startSize',
size.height + 8 size.height + 8
); );
@ -4801,7 +4745,7 @@ class mxGraph extends mxEventSource {
} else { } else {
cellStyle = mxUtils.setStyle( cellStyle = mxUtils.setStyle(
cellStyle, cellStyle,
STYLE_STARTSIZE, 'startSize',
size.width + 8 size.width + 8
); );
@ -4815,7 +4759,7 @@ class mxGraph extends mxEventSource {
this.getModel().setStyle(cell, cellStyle); this.getModel().setStyle(cell, cellStyle);
} else { } else {
const state = this.getView().createState(cell); 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) { if (align === ALIGN_RIGHT) {
geo.x += geo.width - size.width; geo.x += geo.width - size.width;
@ -4870,9 +4814,9 @@ class mxGraph extends mxEventSource {
* var result = graphGetPreferredSizeForCell.apply(this, arguments); * var result = graphGetPreferredSizeForCell.apply(this, arguments);
* var style = this.getCellStyle(cell); * 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; * return result;
@ -4894,34 +4838,34 @@ class mxGraph extends mxEventSource {
const { style } = state; const { style } = state;
if (!cell.isEdge()) { if (!cell.isEdge()) {
const fontSize = style[STYLE_FONTSIZE] || DEFAULT_FONTSIZE; const fontSize = style.fontSize || DEFAULT_FONTSIZE;
let dx = 0; let dx = 0;
let dy = 0; let dy = 0;
// Adds dimension of image if shape is a label // Adds dimension of image if shape is a label
if (this.getImage(state) != null || style[STYLE_IMAGE] != null) { if (this.getImage(state) != null || style.image != null) {
if (style[STYLE_SHAPE] === SHAPE_LABEL) { if (style.shape === SHAPE_LABEL) {
if (style[STYLE_VERTICAL_ALIGN] === ALIGN_MIDDLE) { if (style.verticalAlign === ALIGN_MIDDLE) {
dx += 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 += dy +=
parseFloat(style[STYLE_IMAGE_HEIGHT]) || parseFloat(style.imageHeight) ||
new mxLabel().imageSize; new mxLabel().imageSize;
} }
} }
} }
// Adds spacings // Adds spacings
dx += 2 * (style[STYLE_SPACING] || 0); dx += 2 * (style.spacing || 0);
dx += style[STYLE_SPACING_LEFT] || 0; dx += style.spacingLeft || 0;
dx += style[STYLE_SPACING_RIGHT] || 0; dx += style.spacingRight || 0;
dy += 2 * (style[STYLE_SPACING] || 0); dy += 2 * (style.spacing || 0);
dy += style[STYLE_SPACING_TOP] || 0; dy += style.spacingTop || 0;
dy += style[STYLE_SPACING_BOTTOM] || 0; dy += style.spacingBottom || 0;
// Add spacing for collapse/expand icon // Add spacing for collapse/expand icon
// LATER: Check alignment and use constants // LATER: Check alignment and use constants
@ -4945,14 +4889,14 @@ class mxGraph extends mxEventSource {
const size = mxUtils.getSizeForString( const size = mxUtils.getSizeForString(
value, value,
fontSize, fontSize,
style[STYLE_FONTFAMILY], style.fontFamily,
textWidth, textWidth,
style[STYLE_FONTSTYLE] style.fontStyle
); );
let width = size.width + dx; let width = size.width + dx;
let height = size.height + dy; let height = size.height + dy;
if (!mxUtils.getValue(style, STYLE_HORIZONTAL, true)) { if (!mxUtils.getValue(style, 'horizontal', true)) {
const tmp = height; const tmp = height;
height = width; height = width;
width = tmp; width = tmp;
@ -5237,17 +5181,17 @@ class mxGraph extends mxEventSource {
const w = geo.width; const w = geo.width;
const h = geo.height; 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; geo.width = w * dx;
} else if (style[STYLE_RESIZE_WIDTH] == '0') { } else if (style.resizeWidth == '0') {
geo.width = w; geo.width = w;
} }
if (style[STYLE_RESIZE_HEIGHT] == '1') { if (style.resizeHeight == '1') {
geo.height = h * dy; geo.height = h * dy;
} else if (style[STYLE_RESIZE_HEIGHT] == '0') { } else if (style.resizeHeight == '0') {
geo.height = h; geo.height = h;
} }
@ -5576,7 +5520,7 @@ class mxGraph extends mxEventSource {
if (parent.isVertex()) { if (parent.isVertex()) {
const style = this.getCurrentCellStyle(parent); const style = this.getCurrentCellStyle(parent);
angle = mxUtils.getValue(style, STYLE_ROTATION, 0); angle = mxUtils.getValue(style, 'rotation', 0);
} }
if (angle !== 0) { if (angle !== 0) {
@ -5628,11 +5572,11 @@ class mxGraph extends mxEventSource {
const style = this.getCurrentCellStyle(parent); const style = this.getCurrentCellStyle(parent);
const dir = mxUtils.getValue( const dir = mxUtils.getValue(
style, style,
STYLE_DIRECTION, 'direction',
DIRECTION_EAST DIRECTION_EAST
); );
const flipH = mxUtils.getValue(style, STYLE_FLIPH, 0) == 1; const flipH = mxUtils.getValue(style, 'flipH', 0) == 1;
const flipV = mxUtils.getValue(style, STYLE_FLIPV, 0) == 1; const flipV = mxUtils.getValue(style, 'flipV', 0) == 1;
if (dir === DIRECTION_SOUTH || dir === DIRECTION_NORTH) { if (dir === DIRECTION_SOUTH || dir === DIRECTION_NORTH) {
const tmp = size.width; const tmp = size.width;
@ -5886,7 +5830,7 @@ class mxGraph extends mxEventSource {
const bounds = <mxRectangle>( const bounds = <mxRectangle>(
this.getView().getPerimeterBounds(terminalState) this.getView().getPerimeterBounds(terminalState)
); );
const direction = terminalState.style[STYLE_DIRECTION]; const direction = terminalState.style.direction;
if (direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH) { if (direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH) {
bounds.x += bounds.width / 2 - bounds.height / 2; bounds.x += bounds.width / 2 - bounds.height / 2;
@ -5913,8 +5857,8 @@ class mxGraph extends mxEventSource {
// LATER: Add flipping support for image shapes // LATER: Add flipping support for image shapes
if ((<mxCell>terminalState.cell).isVertex()) { if ((<mxCell>terminalState.cell).isVertex()) {
let flipH = terminalState.style[STYLE_FLIPH]; let flipH = terminalState.style.flipH;
let flipV = terminalState.style[STYLE_FLIPV]; let flipV = terminalState.style.flipV;
// Legacy support for stencilFlipH/V // Legacy support for stencilFlipH/V
if ( if (
@ -6004,11 +5948,11 @@ class mxGraph extends mxEventSource {
): mxConnectionConstraint { ): mxConnectionConstraint {
let point = null; let point = null;
// @ts-ignore // @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) { if (x != null) {
// @ts-ignore // @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) { if (y != null) {
point = new mxPoint(parseFloat(x), parseFloat(y)); point = new mxPoint(parseFloat(x), parseFloat(y));
@ -6022,18 +5966,18 @@ class mxGraph extends mxEventSource {
if (point != null) { if (point != null) {
perimeter = mxUtils.getValue( perimeter = mxUtils.getValue(
edge.style, edge.style,
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER, source ? 'exitPerimeter' : 'entryPerimeter',
true true
); );
// Add entry/exit offset // Add entry/exit offset
// @ts-ignore // @ts-ignore
dx = parseFloat( dx = parseFloat(
<string>edge.style[source ? STYLE_EXIT_DX : STYLE_ENTRY_DX] <string>edge.style[source ? 'exitDx' : 'entryDx']
); );
// @ts-ignore // @ts-ignore
dy = parseFloat( dy = parseFloat(
<string>edge.style[source ? STYLE_EXIT_DY : STYLE_ENTRY_DY] <string>edge.style[source ? 'exitDy' : 'entryDy']
); );
dx = Number.isFinite(dx) ? dx : 0; dx = Number.isFinite(dx) ? dx : 0;
@ -6066,41 +6010,41 @@ class mxGraph extends mxEventSource {
try { try {
if (constraint == null || constraint.point == null) { if (constraint == null || constraint.point == null) {
this.setCellStyles(source ? STYLE_EXIT_X : STYLE_ENTRY_X, null, [ this.setCellStyles(source ? 'exitX' : 'entryX', null, [
edge, edge,
]); ]);
this.setCellStyles(source ? STYLE_EXIT_Y : STYLE_ENTRY_Y, null, [ this.setCellStyles(source ? 'exitY' : 'entryY', null, [
edge, edge,
]); ]);
this.setCellStyles(source ? STYLE_EXIT_DX : STYLE_ENTRY_DX, null, [ this.setCellStyles(source ? 'exitDx' : 'entryDx', null, [
edge, edge,
]); ]);
this.setCellStyles(source ? STYLE_EXIT_DY : STYLE_ENTRY_DY, null, [ this.setCellStyles(source ? 'exitDy' : 'entryDy', null, [
edge, edge,
]); ]);
this.setCellStyles( this.setCellStyles(
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER, source ? 'exitPerimeter' : 'entryPerimeter',
null, null,
[edge] [edge]
); );
} else if (constraint.point != null) { } else if (constraint.point != null) {
this.setCellStyles( this.setCellStyles(
source ? STYLE_EXIT_X : STYLE_ENTRY_X, source ? 'exitX' : 'entryX',
constraint.point.x, constraint.point.x,
[edge] [edge]
); );
this.setCellStyles( this.setCellStyles(
source ? STYLE_EXIT_Y : STYLE_ENTRY_Y, source ? 'exitY' : 'entryY',
constraint.point.y, constraint.point.y,
[edge] [edge]
); );
this.setCellStyles( this.setCellStyles(
source ? STYLE_EXIT_DX : STYLE_ENTRY_DX, source ? 'exitDx' : 'entryDx',
constraint.dx, constraint.dx,
[edge] [edge]
); );
this.setCellStyles( this.setCellStyles(
source ? STYLE_EXIT_DY : STYLE_ENTRY_DY, source ? 'exitDy' : 'entryDy',
constraint.dy, constraint.dy,
[edge] [edge]
); );
@ -6108,13 +6052,13 @@ class mxGraph extends mxEventSource {
// Only writes 0 since 1 is default // Only writes 0 since 1 is default
if (!constraint.perimeter) { if (!constraint.perimeter) {
this.setCellStyles( this.setCellStyles(
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER, source ? 'exitPerimeter' : 'entryPerimeter',
'0', '0',
[edge] [edge]
); );
} else { } else {
this.setCellStyles( this.setCellStyles(
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER, source ? 'exitPerimeter' : 'entryPerimeter',
null, null,
[edge] [edge]
); );
@ -6145,13 +6089,13 @@ class mxGraph extends mxEventSource {
if (vertex != null && constraint.point != null) { if (vertex != null && constraint.point != null) {
const bounds = <mxRectangle>this.getView().getPerimeterBounds(vertex); const bounds = <mxRectangle>this.getView().getPerimeterBounds(vertex);
const cx = new mxPoint(bounds.getCenterX(), bounds.getCenterY()); const cx = new mxPoint(bounds.getCenterX(), bounds.getCenterY());
const direction = vertex.style[STYLE_DIRECTION]; const direction = vertex.style.direction;
let r1 = 0; let r1 = 0;
// Bounds need to be rotated by 90 degrees for further computation // Bounds need to be rotated by 90 degrees for further computation
if ( if (
direction != null && direction != null &&
mxUtils.getValue(vertex.style, STYLE_ANCHOR_POINT_DIRECTION, 1) == 1 mxUtils.getValue(vertex.style, 'anchorPointDirection', 1) == 1
) { ) {
if (direction === DIRECTION_NORTH) { if (direction === DIRECTION_NORTH) {
r1 += 270; r1 += 270;
@ -6178,7 +6122,7 @@ class mxGraph extends mxEventSource {
); );
// Rotation for direction before projection on perimeter // Rotation for direction before projection on perimeter
let r2 = vertex.style[STYLE_ROTATION] || 0; let r2 = vertex.style.rotation || 0;
if (constraint.perimeter) { if (constraint.perimeter) {
if (r1 !== 0) { if (r1 !== 0) {
@ -6202,8 +6146,8 @@ class mxGraph extends mxEventSource {
r2 += r1; r2 += r1;
if ((<mxCell>vertex.cell).isVertex()) { if ((<mxCell>vertex.cell).isVertex()) {
let flipH = vertex.style[STYLE_FLIPH] == 1; let flipH = vertex.style.flipH == 1;
let flipV = vertex.style[STYLE_FLIPV] == 1; let flipV = vertex.style.flipV == 1;
// Legacy support for stencilFlipH/V // Legacy support for stencilFlipH/V
if (vertex.shape != null && vertex.shape.stencil != null) { 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 // 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]); this.setCellStyles(key, id, [edge]);
} }
@ -6814,7 +6758,7 @@ class mxGraph extends mxEventSource {
const style = this.getCurrentCellStyle(cell); const style = this.getCurrentCellStyle(cell);
if (bbox != null) { if (bbox != null) {
const angle = mxUtils.getValue(style, STYLE_ROTATION, 0); const angle = mxUtils.getValue(style, 'rotation', 0);
if (angle !== 0) { if (angle !== 0) {
bbox = mxUtils.getBoundingBox(bbox, angle); bbox = mxUtils.getBoundingBox(bbox, angle);
@ -7517,7 +7461,14 @@ class mxGraph extends mxEventSource {
*/ */
// isOrthogonal(edge: mxCellState): boolean; // isOrthogonal(edge: mxCellState): boolean;
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) { if (orthogonal != null) {
return orthogonal; return orthogonal;
@ -8028,7 +7979,7 @@ class mxGraph extends mxEventSource {
if (this.labelsVisible && cell != null) { if (this.labelsVisible && cell != null) {
const style = this.getCurrentCellStyle(cell); const style = this.getCurrentCellStyle(cell);
if (!mxUtils.getValue(style, STYLE_NOLABEL, false)) { if (!mxUtils.getValue(style, 'noLabel', false)) {
result = this.convertValueToString(cell); 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 * Returns true if no white-space CSS style directive should be used for
* displaying the given cells label. This implementation returns true if * 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 * 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 * 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;
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 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. * 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'. * style of the given cell is 'hidden'.
* *
* @param state {@link mxCell} whose label should be clipped. * @param state {@link mxCell} whose label should be clipped.
*/ */
// isLabelClipped(cell: mxCell): boolean; // isLabelClipped(cell: mxCell): boolean;
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 result = new mxRectangle();
const style = this.getCurrentCellStyle(swimlane, ignoreState); const style = this.getCurrentCellStyle(swimlane, ignoreState);
const size = parseInt( 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; result.height = size;
} else { } else {
result.width = size; result.width = size;
@ -8286,10 +8237,10 @@ class mxGraph extends mxEventSource {
*/ */
// getSwimlaneDirection(style: string): string; // getSwimlaneDirection(style: string): string;
getSwimlaneDirection(style: any): string { getSwimlaneDirection(style: any): string {
const dir = mxUtils.getValue(style, STYLE_DIRECTION, DIRECTION_EAST); const dir = mxUtils.getValue(style, 'direction', DIRECTION_EAST);
const flipH = mxUtils.getValue(style, STYLE_FLIPH, 0) == 1; const flipH = mxUtils.getValue(style, 'flipH', 0) == 1;
const flipV = mxUtils.getValue(style, STYLE_FLIPV, 0) == 1; const flipV = mxUtils.getValue(style, 'flipV', 0) == 1;
const h = mxUtils.getValue(style, STYLE_HORIZONTAL, true); const h = mxUtils.getValue(style, 'horizontal', true);
let n = h ? 0 : 3; let n = h ? 0 : 3;
if (dir === DIRECTION_NORTH) { if (dir === DIRECTION_NORTH) {
@ -8334,7 +8285,7 @@ class mxGraph extends mxEventSource {
if (this.isSwimlane(swimlane, ignoreState)) { if (this.isSwimlane(swimlane, ignoreState)) {
const style = this.getCurrentCellStyle(swimlane, ignoreState); const style = this.getCurrentCellStyle(swimlane, ignoreState);
const size = parseInt( const size = parseInt(
mxUtils.getValue(style, STYLE_STARTSIZE, DEFAULT_STARTSIZE) mxUtils.getValue(style, 'startSize', DEFAULT_STARTSIZE)
); );
const dir = this.getSwimlaneDirection(style); 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 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. * style.
* *
* @param state {@link mxCellState} whose image URL should be returned. * @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): string;
getImage(state: mxCellState): mxImage | null { getImage(state: mxCellState): mxImage | null {
return state != null && state.style != null return state != null && state.style != null
? state.style[STYLE_IMAGE] ? state.style.image
: null; : null;
} }
@ -8374,8 +8325,8 @@ class mxGraph extends mxEventSource {
isTransparentState(state: mxCellState): boolean { isTransparentState(state: mxCellState): boolean {
let result = false; let result = false;
if (state != null) { if (state != null) {
const stroke = mxUtils.getValue(state.style, STYLE_STROKECOLOR, NONE); const stroke = mxUtils.getValue(state.style, 'strokeColor', NONE);
const fill = mxUtils.getValue(state.style, STYLE_FILLCOLOR, NONE); const fill = mxUtils.getValue(state.style, 'fillColor', NONE);
result = stroke === NONE && fill === NONE && this.getImage(state) == null; result = stroke === NONE && fill === NONE && this.getImage(state) == null;
} }
return result; return result;
@ -8384,7 +8335,7 @@ class mxGraph extends mxEventSource {
/** /**
* Returns the vertical alignment for the given cell state. This * Returns the vertical alignment for the given cell state. This
* implementation returns the value stored under * implementation returns the value stored under
* {@link mxConstants.STYLE_VERTICAL_ALIGN} in the cell style. * {@link 'verticalAlign'} in the cell style.
* *
* @param state {@link mxCellState} whose vertical alignment should be * @param state {@link mxCellState} whose vertical alignment should be
* returned. * returned.
@ -8392,7 +8343,7 @@ class mxGraph extends mxEventSource {
// getVerticalAlign(state: mxCellState): string; // getVerticalAlign(state: mxCellState): string;
getVerticalAlign(state: mxCellState): string | null { getVerticalAlign(state: mxCellState): string | null {
return state != null && state.style != null return state != null && state.style != null
? state.style[STYLE_VERTICAL_ALIGN] || ALIGN_MIDDLE ? state.style.verticalAlign || ALIGN_MIDDLE
: null; : null;
} }
@ -8407,7 +8358,7 @@ class mxGraph extends mxEventSource {
// getIndicatorColor(state: mxCellState): string; // getIndicatorColor(state: mxCellState): string;
getIndicatorColor(state: mxCellState): string | null { getIndicatorColor(state: mxCellState): string | null {
return state != null && state.style != null return state != null && state.style != null
? state.style[STYLE_INDICATOR_COLOR] ? state.style.indicatorColor
: null; : null;
} }
@ -8422,7 +8373,7 @@ class mxGraph extends mxEventSource {
// getIndicatorGradientColor(state: mxCellState): string; // getIndicatorGradientColor(state: mxCellState): string;
getIndicatorGradientColor(state: mxCellState): string | null { getIndicatorGradientColor(state: mxCellState): string | null {
return state != null && state.style != null return state != null && state.style != null
? state.style[STYLE_INDICATOR_GRADIENTCOLOR] ? state.style.gradientColor
: null; : null;
} }
@ -8436,7 +8387,7 @@ class mxGraph extends mxEventSource {
// getIndicatorShape(state: mxCellState): any; // getIndicatorShape(state: mxCellState): any;
getIndicatorShape(state: mxCellState): string | null { getIndicatorShape(state: mxCellState): string | null {
return state != null && state.style != null return state != null && state.style != null
? state.style[STYLE_INDICATOR_SHAPE] ? state.style.indicatorShape
: null; : null;
} }
@ -8450,7 +8401,7 @@ class mxGraph extends mxEventSource {
// getIndicatorImage(state: mxCellState): any; // getIndicatorImage(state: mxCellState): any;
getIndicatorImage(state: mxCellState): mxImage | null { getIndicatorImage(state: mxCellState): mxImage | null {
return state != null && state.style != null return state != null && state.style != null
? state.style[STYLE_INDICATOR_IMAGE] ? state.style.indicatorImage
: null; : null;
} }
@ -8488,7 +8439,7 @@ class mxGraph extends mxEventSource {
!cell.isEdge() !cell.isEdge()
) { ) {
return ( return (
this.getCurrentCellStyle(cell, ignoreState)[STYLE_SHAPE] === this.getCurrentCellStyle(cell, ignoreState).shape ===
SHAPE_SWIMLANE SHAPE_SWIMLANE
); );
} }
@ -8646,7 +8597,7 @@ class mxGraph extends mxEventSource {
// isCellCloneable(cell: mxCell): boolean; // isCellCloneable(cell: mxCell): boolean;
isCellCloneable(cell: mxCell): boolean { isCellCloneable(cell: mxCell): boolean {
const style = this.getCurrentCellStyle(cell); const style = this.getCurrentCellStyle(cell);
return this.isCellsCloneable() && style[STYLE_CLONEABLE] !== 0; return this.isCellsCloneable() && style.cloneable !== 0;
} }
/** /**
@ -8723,7 +8674,7 @@ class mxGraph extends mxEventSource {
* { * {
* var style = this.getCurrentCellStyle(cell); * var style = this.getCurrentCellStyle(cell);
* *
* return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0; * return this.isCellsSelectable() && !this.isCellLocked(cell) && style.selectable != 0;
* }; * };
* ``` * ```
* *
@ -8769,14 +8720,14 @@ class mxGraph extends mxEventSource {
/** /**
* Returns true if the given cell is moveable. This returns * Returns true if the given cell is moveable. This returns
* {@link cellsDeletable} for all given cells if a cells style does not specify * {@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. * @param cell {@link mxCell} whose deletable state should be returned.
*/ */
// isCellDeletable(cell: mxCell): boolean; // isCellDeletable(cell: mxCell): boolean;
isCellDeletable(cell: mxCell): boolean { isCellDeletable(cell: mxCell): boolean {
const style = this.getCurrentCellStyle(cell); 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 * 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. * @param cell {@link mxCell} whose rotatable state should be returned.
*/ */
// isCellRotatable(cell: mxCell): boolean; // isCellRotatable(cell: mxCell): boolean;
isCellRotatable(cell: mxCell): boolean { isCellRotatable(cell: mxCell): boolean {
const style = this.getCurrentCellStyle(cell); 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} * 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 * 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. * @param cell {@link mxCell} whose movable state should be returned.
*/ */
@ -8849,7 +8800,7 @@ class mxGraph extends mxEventSource {
return ( return (
this.isCellsMovable() && this.isCellsMovable() &&
!this.isCellLocked(cell) && !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 * Returns true if the given cell is resizable. This returns
* {@link cellsResizable} for all given cells if {@link isCellLocked} does not return * {@link cellsResizable} for all given cells if {@link isCellLocked} does not return
* true for the given cell and its style does not specify * 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. * @param cell {@link mxCell} whose resizable state should be returned.
*/ */
@ -9181,7 +9132,7 @@ class mxGraph extends mxEventSource {
const r = const r =
this.isCellsResizable() && this.isCellsResizable() &&
!this.isCellLocked(cell) && !this.isCellLocked(cell) &&
mxUtils.getValue(style, STYLE_RESIZABLE, '1') != '0'; mxUtils.getValue(style, 'resizeable', '1') != '0';
// alert(r); // alert(r);
return r; return r;
} }
@ -9235,7 +9186,7 @@ class mxGraph extends mxEventSource {
return ( return (
this.isCellsBendable() && this.isCellsBendable() &&
!this.isCellLocked(cell) && !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 * 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 * 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. * @param cell {@link mxCell} whose editable state should be returned.
*/ */
@ -9273,7 +9224,7 @@ class mxGraph extends mxEventSource {
return ( return (
this.isCellsEditable() && this.isCellsEditable() &&
!this.isCellLocked(cell) && !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 * Returns true if the size of the given cell should automatically be
* updated after a change of the label. This implementation returns * updated after a change of the label. This implementation returns
* {@link autoSizeCells} or checks if the cell style does specify * {@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. * @param cell {@link mxCell} that should be resized.
*/ */
@ -9444,7 +9395,7 @@ class mxGraph extends mxEventSource {
isAutoSizeCell(cell: mxCell) { isAutoSizeCell(cell: mxCell) {
const style = this.getCurrentCellStyle(cell); 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): boolean;
isCellFoldable(cell: mxCell, collapse: boolean = false): boolean { isCellFoldable(cell: mxCell, collapse: boolean = false): boolean {
const style = this.getCurrentCellStyle(cell); 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 { } else {
const alpha = mxUtils.toRadians( const alpha = mxUtils.toRadians(
mxUtils.getValue(state.style, STYLE_ROTATION) || 0 mxUtils.getValue(state.style, 'rotation') || 0
); );
if (alpha != 0) { if (alpha != 0) {
@ -10408,7 +10359,7 @@ class mxGraph extends mxEventSource {
cell.isVisible() && cell.isVisible() &&
(ignoreFn == null || !ignoreFn(state)) (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!!!! ========================================================== let box: mxCellState | mxRectangle = state; // TODO: CHECK ME!!!! ==========================================================
if (deg != 0) { if (deg != 0) {
@ -11140,7 +11091,7 @@ class mxGraph extends mxEventSource {
return ( return (
state.shape == null || state.shape == null ||
state.shape.paintBackground !== this.paintBackground || 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) (state.shape.fill != null && state.shape.fill !== NONE)
); );
}) })

59
packages/core/src/view/graph/mxGraphView.ts
View File

@ -18,25 +18,6 @@ import {
ALIGN_MIDDLE, ALIGN_MIDDLE,
ALIGN_RIGHT, ALIGN_RIGHT,
ALIGN_TOP, 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'; } from '../../util/mxConstants';
import mxClient from '../../mxClient'; import mxClient from '../../mxClient';
import mxEvent from '../../util/event/mxEvent'; import mxEvent from '../../util/event/mxEvent';
@ -1081,7 +1062,7 @@ class mxGraphView extends mxEventSource {
const pState = this.getState(state.cell.getParent()); const pState = this.getState(state.cell.getParent());
if (geo.relative && pState != null && !pState.cell.isEdge()) { 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) { if (alpha !== 0) {
const cos = Math.cos(alpha); const cos = Math.cos(alpha);
const sin = Math.sin(alpha); const sin = Math.sin(alpha);
@ -1146,10 +1127,10 @@ class mxGraphView extends mxEventSource {
*/ */
// updateVertexLabelOffset(state: mxCellState): void; // updateVertexLabelOffset(state: mxCellState): void;
updateVertexLabelOffset(state: mxCellState) { 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) { 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) { if (lw != null) {
lw *= this.scale; lw *= this.scale;
@ -1163,11 +1144,11 @@ class mxGraphView extends mxEventSource {
// @ts-ignore // @ts-ignore
state.absoluteOffset.x += state.width; state.absoluteOffset.x += state.width;
} else if (h === ALIGN_CENTER) { } 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) { if (lw != null) {
// Aligns text block with given width inside the vertex width // 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; let dx = 0;
if (align === ALIGN_CENTER) { if (align === ALIGN_CENTER) {
@ -1185,7 +1166,7 @@ class mxGraphView extends mxEventSource {
const v = mxUtils.getValue( const v = mxUtils.getValue(
state.style, state.style,
STYLE_VERTICAL_LABEL_POSITION, 'verticalLabelPosition',
ALIGN_MIDDLE ALIGN_MIDDLE
); );
@ -1481,7 +1462,7 @@ class mxGraphView extends mxEventSource {
if ( if (
(points == null || points.length < 2) && (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))) ((sc == null || sc.point == null) && (tc == null || tc.point == null)))
) { ) {
return source != null && source === target; return source != null && source === target;
@ -1502,11 +1483,11 @@ class mxGraphView extends mxEventSource {
let edgeStyle: any = this.isLoopStyleEnabled(edge, points, source, target) let edgeStyle: any = this.isLoopStyleEnabled(edge, points, source, target)
? mxUtils.getValue( ? mxUtils.getValue(
edge.style, edge.style,
STYLE_LOOP, 'loop',
(<mxGraph>this.graph).defaultLoopStyle (<mxGraph>this.graph).defaultLoopStyle
) )
: !mxUtils.getValue(edge.style, STYLE_NOEDGESTYLE, false) : !mxUtils.getValue(edge.style, 'noEdgeStyle', false)
? edge.style[STYLE_EDGE] ? edge.style.edge
: null; : null;
// Converts string values to objects // Converts string values to objects
@ -1593,7 +1574,7 @@ class mxGraphView extends mxEventSource {
let next = this.getNextPoint(edge, end, source); let next = this.getNextPoint(edge, end, source);
const orth = (<mxGraph>this.graph).isOrthogonal(edge); 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()); const center = new mxPoint(start.getCenterX(), start.getCenterY());
if (alpha !== 0) { if (alpha !== 0) {
@ -1602,10 +1583,10 @@ class mxGraphView extends mxEventSource {
next = mxUtils.getRotatedPoint(next, cos, sin, center); 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( border += parseFloat(
edge.style[ edge.style[
source ? STYLE_SOURCE_PERIMETER_SPACING : STYLE_TARGET_PERIMETER_SPACING source ? 'sourcePerimeterSpacing' : 'targetPerimeterSpacing'
] || 0 ] || 0
); );
let pt = this.getPerimeterPoint( let pt = this.getPerimeterPoint(
@ -1638,7 +1619,7 @@ class mxGraphView extends mxEventSource {
terminal: mxCellState, terminal: mxCellState,
source: boolean = false source: boolean = false
): mxCellState | null { ): mxCellState | null {
const key = source ? STYLE_SOURCE_PORT : STYLE_TARGET_PORT; const key = source ? 'sourcePort' : 'targetPort';
const id = mxUtils.getValue(state.style, key); const id = mxUtils.getValue(state.style, key);
if (id != null) { if (id != null) {
@ -1688,8 +1669,8 @@ class mxGraphView extends mxEventSource {
let flipV = false; let flipV = false;
if (terminal.cell.isVertex()) { if (terminal.cell.isVertex()) {
flipH = mxUtils.getValue(terminal.style, STYLE_FLIPH, 0) == 1; flipH = mxUtils.getValue(terminal.style, 'flipH', 0) == 1;
flipV = mxUtils.getValue(terminal.style, STYLE_FLIPV, 0) == 1; flipV = mxUtils.getValue(terminal.style, 'flipV', 0) == 1;
// Legacy support for stencilFlipH/V // Legacy support for stencilFlipH/V
if (terminal.shape != null && terminal.shape.stencil != null) { if (terminal.shape != null && terminal.shape.stencil != null) {
@ -1738,7 +1719,7 @@ class mxGraphView extends mxEventSource {
getRoutingCenterX(state: mxCellState) { getRoutingCenterX(state: mxCellState) {
const f = const f =
state.style != null state.style != null
? parseFloat(state.style[STYLE_ROUTING_CENTER_X]) || 0 ? parseFloat(state.style.routingCenterX) || 0
: 0; : 0;
return state.getCenterX() + f * state.width; return state.getCenterX() + f * state.width;
} }
@ -1750,7 +1731,7 @@ class mxGraphView extends mxEventSource {
getRoutingCenterY(state: mxCellState) { getRoutingCenterY(state: mxCellState) {
const f = const f =
state.style != null state.style != null
? parseFloat(state.style[STYLE_ROUTING_CENTER_Y]) || 0 ? parseFloat(state.style.routingCenterY) || 0
: 0; : 0;
return state.getCenterY() + f * state.height; return state.getCenterY() + f * state.height;
} }
@ -1801,7 +1782,7 @@ class mxGraphView extends mxEventSource {
border: number = 0 border: number = 0
): mxRectangle | null { ): mxRectangle | null {
if (terminal != 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); return (<mxCellState>terminal).getPerimeterBounds(border * this.scale);
} }
@ -1811,7 +1792,7 @@ class mxGraphView extends mxEventSource {
*/ */
// getPerimeterFunction(state: mxCellState): any; // getPerimeterFunction(state: mxCellState): any;
getPerimeterFunction(state: mxCellState): Function | null { getPerimeterFunction(state: mxCellState): Function | null {
let perimeter = state.style[STYLE_PERIMETER]; let perimeter = state.style.perimeter;
// Converts string values to objects // Converts string values to objects
if (typeof perimeter === 'string') { if (typeof perimeter === 'string') {

3
packages/core/src/view/graph/mxSwimlaneManager.ts
View File

@ -8,7 +8,6 @@
import mxEventSource from '../../util/event/mxEventSource'; import mxEventSource from '../../util/event/mxEventSource';
import mxUtils from '../../util/mxUtils'; import mxUtils from '../../util/mxUtils';
import mxEvent from '../../util/event/mxEvent'; import mxEvent from '../../util/event/mxEvent';
import { STYLE_HORIZONTAL } from '../../util/mxConstants';
import mxRectangle from '../../util/datatypes/mxRectangle'; import mxRectangle from '../../util/datatypes/mxRectangle';
import mxGraph from './mxGraph'; import mxGraph from './mxGraph';
import mxEventObject from '../../util/event/mxEventObject'; import mxEventObject from '../../util/event/mxEventObject';
@ -209,7 +208,7 @@ class mxSwimlaneManager extends mxEventSource {
isCellHorizontal(cell: mxCell): boolean { isCellHorizontal(cell: mxCell): boolean {
if ((<mxGraph>this.graph).isSwimlane(cell)) { if ((<mxGraph>this.graph).isSwimlane(cell)) {
const style = (<mxGraph>this.graph).getCellStyle(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(); return !this.isHorizontal();
} }

212
packages/core/typed_mxgraph_defs.json
View File

@ -853,9 +853,9 @@
" *", " *",
" * ```javascript", " * ```javascript",
" * var vertexStyle = stylesheet.getDefaultVertexStyle();", " * var vertexStyle = stylesheet.getDefaultVertexStyle();",
" * vertexStyle[mxConstants.STYLE_ROUNDED] = true;", " * vertexStyle.rounded = true;",
" * var edgeStyle = stylesheet.getDefaultEdgeStyle();", " * var edgeStyle = stylesheet.getDefaultEdgeStyle();",
" * edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;", " * edgeStyle.edge = mxEdgeStyle.EntityRelation;",
" * ```", " * ```",
" *", " *",
" * Modifies the built-in default styles.", " * Modifies the built-in default styles.",
@ -960,9 +960,9 @@
" *", " *",
" * ```javascript", " * ```javascript",
" * var style = new Object();", " * var style = new Object();",
" * style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;", " * style.shape = mxConstants.SHAPE_RECTANGLE;",
" * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;", " * style.perimiter = mxPerimeter.RectanglePerimeter;",
" * style[mxConstants.STYLE_ROUNDED] = true;", " * style.rounded = true;",
" * graph.getStylesheet().putCellStyle('rounded', style);", " * graph.getStylesheet().putCellStyle('rounded', style);",
" * ```", " * ```",
" *", " *",
@ -4629,7 +4629,7 @@
"/**", "/**",
" * The attribute used to find the color for the indicator if the indicator", " * The attribute used to find the color for the indicator if the indicator",
" * color is set to 'swimlane'.", " * 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", " * 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", " * 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", " * 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:", " * Parameter:",
" *", " *",
@ -5541,7 +5541,7 @@
" * transaction is in progress. Returns the edge that was flipped.", " * transaction is in progress. Returns the edge that was flipped.",
" *", " *",
" * Here is an example that overrides this implementation to invert the", " * 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", " * ```javascript",
" * graph.flipEdge = function(edge)", " * graph.flipEdge = function(edge)",
@ -5549,11 +5549,11 @@
" * if (edge != null)", " * if (edge != null)",
" * {", " * {",
" * var style = this.getCurrentCellStyle(edge);", " * var style = this.getCurrentCellStyle(edge);",
" * var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,", " * var elbow = mxUtils.getValue(style, 'elbow',",
" * mxConstants.ELBOW_HORIZONTAL);", " * mxConstants.ELBOW_HORIZONTAL);",
" * var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?", " * var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?",
" * mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;", " * mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;",
" * this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);", " * this.setCellStyles('elbow', value, [edge]);",
" * }", " * }",
" * };", " * };",
" * ```", " * ```",
@ -5999,9 +5999,9 @@
" * var result = graphGetPreferredSizeForCell.apply(this, arguments);", " * var result = graphGetPreferredSizeForCell.apply(this, arguments);",
" * var style = this.getCellStyle(cell);", " * 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;", " * return result;",
@ -7064,7 +7064,7 @@
" *", " *",
" * Returns true if no white-space CSS style directive should be used for", " * Returns true if no white-space CSS style directive should be used for",
" * displaying the given cells label. This implementation returns true if", " * 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", " * 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", " * 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 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.", " * style.",
" *", " *",
" * @param state {@link mxCellState} whose image URL should be returned.", " * @param state {@link mxCellState} whose image URL should be returned.",
@ -7255,7 +7255,7 @@
"/**", "/**",
" * Returns the vertical alignment for the given cell state. This", " * Returns the vertical alignment for the given cell state. This",
" * implementation returns the value stored under", " * implementation returns the value stored under",
" * {@link mxConstants.STYLE_VERTICAL_ALIGN} in the cell style.", " * {@link 'verticalAlign'} in the cell style.",
" *", " *",
" * @param state {@link mxCellState} whose vertical alignment should be", " * @param state {@link mxCellState} whose vertical alignment should be",
" * returned.", " * returned.",
@ -7558,7 +7558,7 @@
" * {", " * {",
" * var style = this.getCurrentCellStyle(cell);", " * var style = this.getCurrentCellStyle(cell);",
" *", " *",
" * return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0;", " * return this.isCellsSelectable() && !this.isCellLocked(cell) && style.selectable != 0;",
" * };", " * };",
" * ```", " * ```",
" *", " *",
@ -7602,7 +7602,7 @@
"/**", "/**",
" * Returns true if the given cell is moveable. This returns", " * Returns true if the given cell is moveable. This returns",
" * {@link cellsDeletable} for all given cells if a cells style does not specify", " * {@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.", " * @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", " * 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.", " * @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}", " * 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", " * 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.", " * @param cell {@link mxCell} whose movable state should be returned.",
" */" " */"
@ -7989,7 +7989,7 @@
" * Returns true if the given cell is resizable. This returns", " * Returns true if the given cell is resizable. This returns",
" * {@link cellsResizable} for all given cells if {@link isCellLocked} does not return", " * {@link cellsResizable} for all given cells if {@link isCellLocked} does not return",
" * true for the given cell and its style does not specify", " * 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.", " * @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", " * 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", " * 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.", " * @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", " * Returns true if the size of the given cell should automatically be",
" * updated after a change of the label. This implementation returns", " * updated after a change of the label. This implementation returns",
" * {@link autoSizeCells} or checks if the cell style does specify", " * {@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.", " * @param cell {@link mxCell} that should be resized.",
" */" " */"
@ -9221,7 +9221,7 @@
" *", " *",
" * @example", " * @example",
" * ```javascript", " * ```javascript",
" * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;", " * style.perimiter = mxPerimeter.RectanglePerimeter;",
" * ```", " * ```",
" *", " *",
" * When adding new perimeter functions, it is recommended to use the", " * When adding new perimeter functions, it is recommended to use the",
@ -9261,7 +9261,7 @@
" * @example", " * @example",
" * ```javascript", " * ```javascript",
" * var style = graph.getStylesheet().getDefaultVertexStyle();", " * 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", " * Note that the object can be used directly when programmatically setting",
@ -12393,7 +12393,7 @@
" * @example", " * @example",
" * ```javascript", " * ```javascript",
" * var style = graph.getStylesheet().getDefaultVertexStyle();", " * 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", " * Applies the style of the given <mxCellState> to the shape. This",
" * implementation assigns the following styles to local fields:", " * implementation assigns the following styles to local fields:",
" *", " *",
" * - <mxConstants.STYLE_FILLCOLOR> => fill", " * - <'fillColor'> => fill",
" * - <mxConstants.STYLE_GRADIENTCOLOR> => gradient", " * - <'gradientColor'> => gradient",
" * - <mxConstants.STYLE_GRADIENT_DIRECTION> => gradientDirection", " * - <'gradientDirection'> => gradientDirection",
" * - <mxConstants.STYLE_OPACITY> => opacity", " * - <'opacity'> => opacity",
" * - <mxConstants.STYLE_FILL_OPACITY> => fillOpacity", " * - <mxConstants.STYLE_FILL_OPACITY> => fillOpacity",
" * - <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity", " * - <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity",
" * - <mxConstants.STYLE_STROKECOLOR> => stroke", " * - <'strokeColor'> => stroke",
" * - <mxConstants.STYLE_STROKEWIDTH> => strokewidth", " * - <'strokeWidth'> => strokewidth",
" * - <mxConstants.STYLE_SHADOW> => isShadow", " * - <'shadow'> => isShadow",
" * - <mxConstants.STYLE_DASHED> => isDashed", " * - <'dashed'> => isDashed",
" * - <mxConstants.STYLE_SPACING> => spacing", " * - <'spacing'> => spacing",
" * - <mxConstants.STYLE_STARTSIZE> => startSize", " * - <'startSize'> => startSize",
" * - <mxConstants.STYLE_ENDSIZE> => endSize", " * - <'endSize'> => endSize",
" * - <mxConstants.STYLE_ROUNDED> => isRounded", " * - <'rounded'> => isRounded",
" * - <mxConstants.STYLE_STARTARROW> => startArrow", " * - <'startArrow'> => startArrow",
" * - <mxConstants.STYLE_ENDARROW> => endArrow", " * - <'endArrow'> => endArrow",
" * - <mxConstants.STYLE_ROTATION> => rotation", " * - <'rotation'> => rotation",
" * - <mxConstants.STYLE_DIRECTION> => direction", " * - <'direction'> => direction",
" * - <mxConstants.STYLE_GLASS> => glass", " * - <'glass'> => glass",
" *", " *",
" * This keeps a reference to the <style>. If you need to keep a reference to", " * 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", " * 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.", " * Extends {@link mxShape} to implement a swimlane shape.",
" * This shape is registered under {@link mxConstants.SHAPE_SWIMLANE} in {@link mxCellRenderer}.", " * 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", " * 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_SEPARATORCOLOR} to draw an additional vertical separator and",
" * {@link mxConstants.STYLE_SWIMLANE_LINE} to hide the line between the title region and", " * {@link mxConstants.STYLE_SWIMLANE_LINE} to hide the line between the title region and",
" * the content area.", " * 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.", " * not only its label.",
" *", " *",
" * @class mxSwimlane", " * @class mxSwimlane",
@ -14731,14 +14731,14 @@
[ [
"/**", "/**",
" * Overrides {@link mxShape.apply} to replace the fill and stroke colors with the", " * Overrides {@link mxShape.apply} to replace the fill and stroke colors with the",
" * respective values from {@link mxConstants.STYLE_IMAGE_BACKGROUND} and", " * respective values from {@link 'imageBackground'} and",
" * {@link mxConstants.STYLE_IMAGE_BORDER}.", " * {@link 'imageBorder'}.",
" *", " *",
" * Applies the style of the given {@link mxCellState} to the shape. This", " * Applies the style of the given {@link mxCellState} to the shape. This",
" * implementation assigns the following styles to local fields:", " * implementation assigns the following styles to local fields:",
" *", " *",
" * - {@link mxConstants.STYLE_IMAGE_BACKGROUND} => fill", " * - {@link 'imageBackground'} => fill",
" * - {@link mxConstants.STYLE_IMAGE_BORDER} => stroke", " * - {@link 'imageBorder'} => stroke",
" *", " *",
" * @param {mxCellState} state {@link mxCellState} of the corresponding cell.", " * @param {mxCellState} state {@link mxCellState} of the corresponding cell.",
" */" " */"
@ -14848,7 +14848,7 @@
" * c.ellipse(x, y, w, h);", " * c.ellipse(x, y, w, h);",
" * c.stroke();", " * 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, 'margin', Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));",
" * x += inset;", " * x += inset;",
" * y += inset;", " * y += inset;",
" * w -= 2 * inset;", " * w -= 2 * inset;",
@ -23736,7 +23736,7 @@
[ [
"/**", "/**",
" * Defines the length of the horizontal segment of an Entity Relation.", " * 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 <'segment'> style.",
" * Default is 30.", " * Default is 30.",
" */" " */"
] ]
@ -24075,8 +24075,8 @@
" */" " */"
] ]
], ],
"static STYLE_POINTER_EVENTS": [ "static 'pointerEvents'": [
"static STYLE_POINTER_EVENTS: 'pointerEvents';", "static 'pointerEvents': 'pointerEvents';",
[ [
"/**", "/**",
" * Specifies if pointer events should be fired on transparent backgrounds.", " * Specifies if pointer events should be fired on transparent backgrounds.",
@ -24097,8 +24097,8 @@
" */" " */"
] ]
], ],
"static STYLE_MARGIN": [ "static 'margin'": [
"static STYLE_MARGIN: 'margin';", "static 'margin': 'margin';",
[ [
"/**", "/**",
" * Defines the key for the margin between the ellipses in the double ellipse shape.", " * Defines the key for the margin between the ellipses in the double ellipse shape.",
@ -24133,8 +24133,8 @@
" */" " */"
] ]
], ],
"static STYLE_STROKECOLOR": [ "static 'strokeColor'": [
"static STYLE_STROKECOLOR: 'strokeColor';", "static 'strokeColor': 'strokeColor';",
[ [
"/**", "/**",
" * Defines the key for the strokeColor style. Possible values are all HTML", " * Defines the key for the strokeColor style. Possible values are all HTML",
@ -24154,8 +24154,8 @@
" */" " */"
] ]
], ],
"static STYLE_STROKEWIDTH": [ "static 'strokeWidth'": [
"static STYLE_STROKEWIDTH: 'strokeWidth';", "static 'strokeWidth': 'strokeWidth';",
[ [
"/**", "/**",
" * Defines the key for the strokeWidth style. The type of the value is", " * Defines the key for the strokeWidth style. The type of the value is",
@ -24165,8 +24165,8 @@
" */" " */"
] ]
], ],
"static STYLE_ALIGN": [ "static 'align'": [
"static STYLE_ALIGN: 'align';", "static 'align': 'align';",
[ [
"/**", "/**",
" * Defines the key for the align style. Possible values are <ALIGN_LEFT>;", " * 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", " * 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", " * affect the positioning of the overall label bounds relative to the",
" * vertex, to move the label bounds horizontally, use", " * vertex, to move the label bounds horizontally, use",
" * <STYLE_LABEL_POSITION>. Value is \"align\".", " * <'labelPosition'>. Value is \"align\".",
" */" " */"
] ]
], ],
"static STYLE_VERTICAL_ALIGN": [ "static 'verticalAlign'": [
"static STYLE_VERTICAL_ALIGN: 'verticalAlign';", "static 'verticalAlign': 'verticalAlign';",
[ [
"/**", "/**",
" * Defines the key for the verticalAlign style. Possible values are", " * 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 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", " * bounds. Note this value doesn't affect the positioning of the overall",
" * label bounds relative to the vertex, to move the label bounds", " * 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 'labelWidth'": [
"static STYLE_LABEL_WIDTH: 'labelWidth';", "static 'labelWidth': 'labelWidth';",
[ [
"/**", "/**",
" * Defines the key for the width of the label if the label position is not", " * Defines the key for the width of the label if the label position is not",
@ -24208,8 +24208,8 @@
" */" " */"
] ]
], ],
"static STYLE_LABEL_POSITION": [ "static 'labelPosition'": [
"static STYLE_LABEL_POSITION: 'labelPosition';", "static 'labelPosition': 'labelPosition';",
[ [
"/**", "/**",
" * Defines the key for the horizontal label position of vertices. Possible", " * 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", " * adjust to the right and <ALIGN_CENTER> means the label bounds are",
" * vertically aligned with the bounds of the vertex. Note this value", " * vertically aligned with the bounds of the vertex. Note this value",
" * doesn't affect the positioning of label within the label bounds, to move", " * 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\".", " * Value is \"labelPosition\".",
" */" " */"
] ]
], ],
"static STYLE_VERTICAL_LABEL_POSITION": [ "static 'verticalLabelPosition'": [
"static STYLE_VERTICAL_LABEL_POSITION: 'verticalLabelPosition';", "static 'verticalLabelPosition': 'verticalLabelPosition';",
[ [
"/**", "/**",
" * Defines the key for the vertical label position of vertices. Possible", " * 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", " * horizontally aligned with the bounds of the vertex. Note this value",
" * doesn't affect the positioning of label within the label bounds, to move", " * doesn't affect the positioning of label within the label bounds, to move",
" * the label vertically within the label bounds, use", " * 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 'indicatorStrokeColor'": [
"static STYLE_INDICATOR_STROKECOLOR: 'indicatorStrokeColor';", "static 'indicatorStrokeColor': 'indicatorStrokeColor';",
[ [
"/**", "/**",
" * Defines the key for the indicator stroke color in <mxLabel>.", " * Defines the key for the indicator stroke color in <mxLabel>.",
@ -24482,8 +24482,8 @@
" */" " */"
] ]
], ],
"static STYLE_INDICATOR_DIRECTION": [ "static 'indicatorDirection'": [
"static STYLE_INDICATOR_DIRECTION: 'indicatorDirection';", "static 'indicatorDirection': 'indicatorDirection';",
[ [
"/**", "/**",
" * Defines the key for the indicatorDirection style. The direction style is", " * Defines the key for the indicatorDirection style. The direction style is",
@ -24502,8 +24502,8 @@
" */" " */"
] ]
], ],
"static STYLE_SEGMENT": [ "static 'segment'": [
"static STYLE_SEGMENT: 'segment';", "static 'segment': 'segment';",
[ [
"/**", "/**",
" * Defines the key for the segment style. The type of this value is float", " * Defines the key for the segment style. The type of this value is float",
@ -24512,8 +24512,8 @@
" */" " */"
] ]
], ],
"static STYLE_ENDARROW": [ "static 'endArrow'": [
"static STYLE_ENDARROW: 'endArrow';", "static 'endArrow': 'endArrow';",
[ [
"/**", "/**",
" * Defines the key for the end arrow marker. Possible values are all", " * Defines the key for the end arrow marker. Possible values are all",
@ -24522,18 +24522,18 @@
" *", " *",
" * Example:", " * Example:",
" * (code)", " * (code)",
" * style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;", " * style.endArrow = mxConstants.ARROW_CLASSIC;",
" * (end)", " * (end)",
" */" " */"
] ]
], ],
"static STYLE_STARTARROW": [ "static 'startArrow'": [
"static STYLE_STARTARROW: 'startArrow';", "static 'startArrow': 'startArrow';",
[ [
"/**", "/**",
" * Defines the key for the start arrow marker. Possible values are all", " * Defines the key for the start arrow marker. Possible values are all",
" * constants with an ARROW-prefix. This is only used in <mxConnector>.", " * 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 'arcSize'": [
"static STYLE_ARCSIZE: 'arcSize';", "static 'arcSize': 'arcSize';",
[ [
"/**", "/**",
" * Defines the rounding factor for a rounded rectangle in percent (without", " * 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", " * 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", " * is \"SHAPE_SWIMLANE\" a value of false indicates that the",
" * swimlane should be drawn vertically, true indicates to draw it", " * swimlane should be drawn vertically, true indicates to draw it",
" * horizontally. If the shape style does not indicate that this vertex is a", " * horizontally. If the shape style does not indicate that this vertex is a",
@ -24791,8 +24791,8 @@
" */" " */"
] ]
], ],
"static STYLE_ELBOW": [ "static 'elbow'": [
"static STYLE_ELBOW: 'elbow';", "static 'elbow': 'elbow';",
[ [
"/**", "/**",
" * Defines the key for the elbow style. Possible values are", " * Defines the key for the elbow style. Possible values are",
@ -24803,8 +24803,8 @@
" */" " */"
] ]
], ],
"static STYLE_FONTCOLOR": [ "static 'fontColor'": [
"static STYLE_FONTCOLOR: 'fontColor';", "static 'fontColor': 'fontColor';",
[ [
"/**", "/**",
" * Defines the key for the fontColor style. Possible values are all HTML", " * Defines the key for the fontColor style. Possible values are all HTML",
@ -24882,8 +24882,8 @@
" */" " */"
] ]
], ],
"static STYLE_BACKGROUND_OUTLINE": [ "static 'backgroundOutline'": [
"static STYLE_BACKGROUND_OUTLINE: 'backgroundOutline';", "static 'backgroundOutline': 'backgroundOutline';",
[ [
"/**", "/**",
" * Defines the key for the backgroundOutline style. This specifies if a", " * Defines the key for the backgroundOutline style. This specifies if a",
@ -24976,8 +24976,8 @@
" */" " */"
] ]
], ],
"static STYLE_SHAPE": [ "static 'shape'": [
"static STYLE_SHAPE: 'shape';", "static 'shape': 'shape';",
[ [
"/**", "/**",
" * Defines the key for the shape. Possible values are all constants with", " * Defines the key for the shape. Possible values are all constants with",
@ -24994,8 +24994,8 @@
" */" " */"
] ]
], ],
"static STYLE_JETTY_SIZE": [ "static 'jettySize'": [
"static STYLE_JETTY_SIZE: 'jettySize';", "static 'jettySize': 'jettySize';",
[ [
"/**", "/**",
" * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.", " * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.",
@ -25004,23 +25004,23 @@
" */" " */"
] ]
], ],
"static STYLE_SOURCE_JETTY_SIZE": [ "static 'sourceJettySize'": [
"static STYLE_SOURCE_JETTY_SIZE: 'sourceJettySize';", "static 'sourceJettySize': 'sourceJettySize';",
[ [
"/**", "/**",
" * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.", " * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.",
" * Default is 10. Possible values are numeric values or \"auto\". This has", " * 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 'targetJettySize'": [
"static STYLE_TARGET_JETTY_SIZE: 'targetJettySize';", "static 'targetJettySize': 'targetJettySize';",
[ [
"/**", "/**",
" * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.", " * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.",
" * Default is 10. Possible values are numeric values or \"auto\". This has", " * 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;", " * var s = this.state;",
" *", " *",
" * if (this.graph.isHtmlLabel(s.cell) && (index == 3 || index == 4) &&", " * 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 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", " * 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;", " * return result;",

11
packages/html/stories/Animation.stories.js
View File

@ -33,8 +33,8 @@ const Template = ({ label, ...args }) => {
'shape=cylinder;strokeWidth=2;fillColor=#ffffff;strokeColor=black;' + 'shape=cylinder;strokeWidth=2;fillColor=#ffffff;strokeColor=black;' +
'gradientColor=#a0a0a0;fontColor=black;fontStyle=1;spacingTop=14;'; 'gradientColor=#a0a0a0;fontColor=black;fontStyle=1;spacingTop=14;';
graph.getModel().beginUpdate(); let e1;
try { graph.batchUpdate(() => {
const v1 = graph.insertVertex({ const v1 = graph.insertVertex({
parent, parent,
value: 'Pump', value: 'Pump',
@ -49,7 +49,7 @@ const Template = ({ label, ...args }) => {
size: [60, 60], size: [60, 60],
style: vertexStyle, style: vertexStyle,
}); });
var e1 = graph.insertEdge({ e1 = graph.insertEdge({
parent, parent,
source: v1, source: v1,
target: v2, target: v2,
@ -58,10 +58,7 @@ const Template = ({ label, ...args }) => {
}); });
e1.geometry.points = [new mxPoint(230, 50)]; e1.geometry.points = [new mxPoint(230, 50)];
graph.orderCells(true, [e1]); graph.orderCells(true, [e1]);
} finally { });
// Updates the display
graph.getModel().endUpdate();
}
// Adds animation to edge shape and makes "pipe" visible // Adds animation to edge shape and makes "pipe" visible
const state = graph.view.getState(e1); const state = graph.view.getState(e1);

11
packages/html/stories/AutoLayout.stories.js
View File

@ -104,6 +104,8 @@ const Template = ({ label, ...args }) => {
const parent = graph.getDefaultParent(); const parent = graph.getDefaultParent();
const layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST); const layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
let v1;
const executeLayout = (change, post) => { const executeLayout = (change, post) => {
graph.getModel().beginUpdate(); graph.getModel().beginUpdate();
try { try {
@ -187,9 +189,7 @@ const Template = ({ label, ...args }) => {
}; };
// Adds cells to the model in a single step // Adds cells to the model in a single step
graph.getModel().beginUpdate(); graph.batchUpdate(() => {
let v1;
try {
v1 = graph.insertVertex({ v1 = graph.insertVertex({
parent, parent,
value: 'Hello,', value: 'Hello,',
@ -197,10 +197,7 @@ const Template = ({ label, ...args }) => {
size: [80, 30], size: [80, 30],
}); });
addOverlay(v1); addOverlay(v1);
} finally { });
// Updates the display
graph.getModel().endUpdate();
}
graph.resizeCell = function() { graph.resizeCell = function() {
mxGraph.prototype.resizeCell.apply(this, arguments); mxGraph.prototype.resizeCell.apply(this, arguments);

16
packages/html/stories/Boundary.stories.js
View File

@ -23,7 +23,7 @@ const Template = ({ label, ...args }) => {
mxEvent, mxEvent,
mxRubberband, mxRubberband,
mxPoint, mxPoint,
mxConstants, mxGraphHandler,
mxUtils mxUtils
} = mxgraph; } = mxgraph;
@ -132,13 +132,13 @@ const Template = ({ label, ...args }) => {
// Sets the base style for all vertices // Sets the base style for all vertices
const style = graph.getStylesheet().getDefaultVertexStyle(); const style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_FILLCOLOR] = '#ffffff'; style.fillColor = '#ffffff';
style[mxConstants.STYLE_STROKECOLOR] = '#000000'; style.strokeColor = '#000000';
style[mxConstants.STYLE_STROKEWIDTH] = '2'; style.strokeWidth = '2';
style[mxConstants.STYLE_FONTCOLOR] = '#000000'; style.fontColor = '#000000';
style[mxConstants.STYLE_FONTSIZE] = '12'; style.fontSize = '12';
style[mxConstants.STYLE_FONTSTYLE] = 1; style.fontStyle = 1;
graph.getStylesheet().putDefaultVertexStyle(style); graph.getStylesheet().putDefaultVertexStyle(style);
// Replaces move preview for relative children // Replaces move preview for relative children

6
packages/html/stories/DynamicLoading.stories.js
View File

@ -52,9 +52,9 @@ const Template = ({ label, ...args }) => {
// Changes the default vertex style in-place // Changes the default vertex style in-place
const style = graph.getStylesheet().getDefaultVertexStyle(); const style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE; style.shape = mxConstants.SHAPE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter; style.perimiter = mxPerimeter.EllipsePerimeter;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).

2
packages/html/stories/DynamicStyle.stories.js
View File

@ -60,7 +60,7 @@ const Template = ({ label, ...args }) => {
const targetStyle = graph.getCurrentCellStyle(target); const targetStyle = graph.getCurrentCellStyle(target);
const fill = mxUtils.getValue( const fill = mxUtils.getValue(
targetStyle, targetStyle,
mxConstants.STYLE_FILLCOLOR 'fillColor'
); );
if (fill != null) { if (fill != null) {

4
packages/html/stories/Events.stories.js
View File

@ -93,8 +93,8 @@ const Template = ({ label, ...args }) => {
// of the edge. The ElbowConnector edge style switches to TopToBottom // of the edge. The ElbowConnector edge style switches to TopToBottom
// if the horizontal style is true. // if the horizontal style is true.
const style = graph.getStylesheet().getDefaultEdgeStyle(); const style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; style.edge = mxEdgeStyle.ElbowConnector;
// Installs a popupmenu handler using local function (see below). // Installs a popupmenu handler using local function (see below).
graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => { graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => {

14
packages/html/stories/FileIO.stories.js
View File

@ -49,17 +49,17 @@ const Template = ({ label, ...args }) => {
// Changes the default vertex style in-place // Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ROUNDED; style.shape = mxConstants.SHAPE_ROUNDED;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_PERIMETER_SPACING] = 4; style.perimeterSpacing = 4;
style[mxConstants.STYLE_SHADOW] = true; style.shadow = true;
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white'; style.labelBackgroundColor = 'white';
style = mxUtils.clone(style); style = mxUtils.clone(style);
style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_CLASSIC; style.startArrow = mxConstants.ARROW_CLASSIC;
graph.getStylesheet().putCellStyle('2way', style); graph.getStylesheet().putCellStyle('2way', style);
graph.isHtmlLabel = function(cell) { graph.isHtmlLabel = function(cell) {

4
packages/html/stories/FixedIcons.stories.js
View File

@ -35,12 +35,12 @@ const Template = ({ label, ...args }) => {
mxLabel.prototype.getImageBounds = function(x, y, w, h) { mxLabel.prototype.getImageBounds = function(x, y, w, h) {
const iw = mxUtils.getValue( const iw = mxUtils.getValue(
this.style, this.style,
mxConstants.STYLE_IMAGE_WIDTH, 'imageWidth',
mxConstants.DEFAULT_IMAGESIZE mxConstants.DEFAULT_IMAGESIZE
); );
const ih = mxUtils.getValue( const ih = mxUtils.getValue(
this.style, this.style,
mxConstants.STYLE_IMAGE_HEIGHT, 'imageHeight',
mxConstants.DEFAULT_IMAGESIZE mxConstants.DEFAULT_IMAGESIZE
); );

6
packages/html/stories/FixedPoints.stories.js
View File

@ -86,10 +86,10 @@ const Template = ({ label, ...args }) => {
} }
// In case the edge style must be changed during the preview: // 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, // And to use the new edge style in the new edge inserted into the graph,
// update the cell style as follows: // 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); return super.updateEdgeState(pt, constraint);
} }
@ -134,7 +134,7 @@ const Template = ({ label, ...args }) => {
} }
getAllConnectionConstraints(terminal) { getAllConnectionConstraints(terminal) {
if (terminal != null && this.model.isVertex(terminal.cell)) { if (terminal != null && terminal.cell.isVertex()) {
return [ return [
new mxConnectionConstraint(new mxPoint(0, 0), true), new mxConnectionConstraint(new mxPoint(0, 0), true),
new mxConnectionConstraint(new mxPoint(0.5, 0), true), new mxConnectionConstraint(new mxPoint(0.5, 0), true),

18
packages/html/stories/Folding.stories.js
View File

@ -43,19 +43,19 @@ const Template = ({ label, ...args }) => {
// Sets global styles // Sets global styles
let style = graph.getStylesheet().getDefaultEdgeStyle(); let style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation; style.edge = mxEdgeStyle.EntityRelation;
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style = graph.getStylesheet().getDefaultVertexStyle(); style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_FILLCOLOR] = '#ffffff'; style.fillColor = '#ffffff';
style[mxConstants.STYLE_SHAPE] = 'swimlane'; style.shape = 'swimlane';
style[mxConstants.STYLE_STARTSIZE] = 30; style.startSize = 30;
style = []; style = [];
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; style.shape = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_STROKECOLOR] = 'none'; style.strokeColor = 'none';
style[mxConstants.STYLE_FILLCOLOR] = 'none'; style.fillColor = 'none';
style[mxConstants.STYLE_FOLDABLE] = false; style.foldable = false;
graph.getStylesheet().putCellStyle('column', style); graph.getStylesheet().putCellStyle('column', style);
// Installs auto layout for all levels // Installs auto layout for all levels

4
packages/html/stories/Guides.stories.js
View File

@ -60,8 +60,8 @@ const Template = ({ label, ...args }) => {
// of the edge. The ElbowConnector edge style switches to TopToBottom // of the edge. The ElbowConnector edge style switches to TopToBottom
// if the horizontal style is true. // if the horizontal style is true.
const style = graph.getStylesheet().getDefaultEdgeStyle(); const style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; style.edge = mxEdgeStyle.ElbowConnector;
graph.alternateEdgeStyle = 'elbow=vertical'; graph.alternateEdgeStyle = 'elbow=vertical';
// Enables rubberband selection // Enables rubberband selection

2
packages/html/stories/HelloPort.stories.js
View File

@ -44,7 +44,7 @@ const Template = ({ label, ...args }) => {
// Sets the default edge style // Sets the default edge style
const style = graph.getStylesheet().getDefaultEdgeStyle(); 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 // Ports are not used as terminals for edges, they are
// only used to compute the graphical connection point // only used to compute the graphical connection point

12
packages/html/stories/HierarchicalLayout.stories.js
View File

@ -49,14 +49,14 @@ const Template = ({ label, ...args }) => {
// Changes the default vertex style in-place // Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_PERIMETER_SPACING] = 6; style.perimeterSpacing = 6;
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_SHADOW] = true; style.shadow = true;
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
// Creates a layout algorithm to be used // Creates a layout algorithm to be used
// with the graph // with the graph

8
packages/html/stories/HoverStyle.stories.js
View File

@ -34,15 +34,15 @@ const Template = ({ label, ...args }) => {
function updateStyle(state, hover) { function updateStyle(state, hover) {
if (hover) { if (hover) {
state.style[mxConstants.STYLE_FILLCOLOR] = '#ff0000'; state.style.fillColor = '#ff0000';
} }
// Sets rounded style for both cases since the rounded style // Sets rounded style for both cases since the rounded style
// is not set in the default style and is therefore inherited // is not set in the default style and is therefore inherited
// once it is set, whereas the above overrides the default value // once it is set, whereas the above overrides the default value
state.style[mxConstants.STYLE_ROUNDED] = hover ? '1' : '0'; state.style.rounded = hover ? '1' : '0';
state.style[mxConstants.STYLE_STROKEWIDTH] = hover ? '4' : '1'; state.style.strokeWidth = hover ? '4' : '1';
state.style[mxConstants.STYLE_FONTSTYLE] = hover state.style.fontStyle = hover
? mxConstants.FONT_BOLD ? mxConstants.FONT_BOLD
: '0'; : '0';
} }

58
packages/html/stories/Images.stories.js
View File

@ -99,47 +99,47 @@ const Template = ({ label, ...args }) => {
function configureStylesheet(graph) { function configureStylesheet(graph) {
let style = {}; let style = {};
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE; style.shape = mxConstants.SHAPE_IMAGE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_IMAGE] = 'images/icons48/keys.png'; style.image = 'images/icons48/keys.png';
style[mxConstants.STYLE_FONTCOLOR] = '#FFFFFF'; style.fontColor = '#FFFFFF';
graph.getStylesheet().putCellStyle('image', style); graph.getStylesheet().putCellStyle('image', style);
style = mxCloneUtils.clone(style); style = mxCloneUtils.clone(style);
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL; style.shape = mxConstants.SHAPE_LABEL;
style[mxConstants.STYLE_STROKECOLOR] = '#000000'; style.strokeColor = '#000000';
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style.align = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; style.verticalAlign = mxConstants.ALIGN_TOP;
style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER; style.imageAlign = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; style.imageVerticalAlign = mxConstants.ALIGN_TOP;
style[mxConstants.STYLE_IMAGE] = 'images/icons48/gear.png'; style.image = 'images/icons48/gear.png';
style[mxConstants.STYLE_IMAGE_WIDTH] = '48'; style.imageWidth = '48';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48'; style.imageHeight = '48';
style[mxConstants.STYLE_SPACING_TOP] = '56'; style.spacingTop = '56';
style[mxConstants.STYLE_SPACING] = '8'; style.spacing = '8';
graph.getStylesheet().putCellStyle('bottom', style); graph.getStylesheet().putCellStyle('bottom', style);
style = mxCloneUtils.clone(style); style = mxCloneUtils.clone(style);
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM; style.imageVerticalAlign = mxConstants.ALIGN_BOTTOM;
style[mxConstants.STYLE_IMAGE] = 'images/icons48/server.png'; style.image = 'images/icons48/server.png';
delete style[mxConstants.STYLE_SPACING_TOP]; delete style.spacingTop;
graph.getStylesheet().putCellStyle('top', style); graph.getStylesheet().putCellStyle('top', style);
style = mxCloneUtils.clone(style); style = mxCloneUtils.clone(style);
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT; style.align = mxConstants.ALIGN_LEFT;
style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_LEFT; style.imageAlign = mxConstants.ALIGN_LEFT;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style.imageVerticalAlign = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_IMAGE] = 'images/icons48/earth.png'; style.image = 'images/icons48/earth.png';
style[mxConstants.STYLE_SPACING_LEFT] = '55'; style.spacingLeft = '55';
style[mxConstants.STYLE_SPACING] = '4'; style.spacing = '4';
graph.getStylesheet().putCellStyle('right', style); graph.getStylesheet().putCellStyle('right', style);
style = mxCloneUtils.clone(style); style = mxCloneUtils.clone(style);
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_RIGHT; style.align = mxConstants.ALIGN_RIGHT;
style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_RIGHT; style.imageAlign = mxConstants.ALIGN_RIGHT;
delete style[mxConstants.STYLE_SPACING_LEFT]; delete style.spacingLeft;
style[mxConstants.STYLE_SPACING_RIGHT] = '55'; style.spacingRight = '55';
graph.getStylesheet().putCellStyle('left', style); graph.getStylesheet().putCellStyle('left', style);
} }

26
packages/html/stories/Indicators.stories.js
View File

@ -36,23 +36,23 @@ const Template = ({ label, ...args }) => {
// Creates a style with an indicator // Creates a style with an indicator
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'label'; style.shape = 'label';
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'bottom'; style.verticalAlign = 'bottom';
style[mxConstants.STYLE_INDICATOR_SHAPE] = 'ellipse'; style.indicatorShape = 'ellipse';
style[mxConstants.STYLE_INDICATOR_WIDTH] = 34; style.indicatorWidth = 34;
style[mxConstants.STYLE_INDICATOR_HEIGHT] = 34; style.indicatorHeight = 34;
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = 'top'; // indicator v-alignment style.imageVerticalAlign = 'top'; // indicator v-alignment
style[mxConstants.STYLE_IMAGE_ALIGN] = 'center'; style.imageAlign = 'center';
style[mxConstants.STYLE_INDICATOR_COLOR] = 'green'; style.indicatorColor = 'green';
delete style[mxConstants.STYLE_STROKECOLOR]; // transparent delete style.strokeColor; // transparent
delete style[mxConstants.STYLE_FILLCOLOR]; // transparent delete style.fillColor; // transparent
// Creates a style with an indicator // Creates a style with an indicator
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; style.edge = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_ELBOW] = mxConstants.ELBOW_VERTICAL; style.elbow = mxConstants.ELBOW_VERTICAL;
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).

2
packages/html/stories/Labels.stories.js
View File

@ -73,7 +73,7 @@ const Template = ({ label, ...args }) => {
) { ) {
const style = this.getCellStyle(cell); const style = this.getCellStyle(cell);
const fontSize = const fontSize =
style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE; style.fontSize || mxConstants.DEFAULT_FONTSIZE;
const max = geometry.width / (fontSize * 0.625); const max = geometry.width / (fontSize * 0.625);
if (max < label.length) { if (max < label.length) {

22
packages/html/stories/Merge.stories.js
View File

@ -39,20 +39,20 @@ const Template = ({ label, ...args }) => {
// Makes all cells round with a white, bold label // Makes all cells round with a white, bold label
let style = graph.stylesheet.getDefaultVertexStyle(); let style = graph.stylesheet.getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE; style.shape = mxConstants.SHAPE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter; style.perimiter = mxPerimeter.EllipsePerimeter;
style[mxConstants.STYLE_FONTCOLOR] = 'white'; style.fontColor = 'white';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD; style.fontStyle = mxConstants.FONT_BOLD;
style[mxConstants.STYLE_FONTSIZE] = 14; style.fontSize = 14;
style[mxConstants.STYLE_SHADOW] = true; style.shadow = true;
// Makes all edge labels gray with a white background // Makes all edge labels gray with a white background
style = graph.stylesheet.getDefaultEdgeStyle(); style = graph.stylesheet.getDefaultEdgeStyle();
style[mxConstants.STYLE_FONTCOLOR] = 'gray'; style.fontColor = 'gray';
style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD; style.fontStyle = mxConstants.FONT_BOLD;
style[mxConstants.STYLE_FONTCOLOR] = 'black'; style.fontColor = 'black';
style[mxConstants.STYLE_STROKEWIDTH] = 2; style.strokeWidth = 2;
// Enables rubberband selection // Enables rubberband selection
if (args.rubberBand) if (args.rubberBand)

98
packages/html/stories/Monitor.stories.js
View File

@ -124,7 +124,7 @@ const Template = ({ label, ...args }) => {
// Updates the cell color and adds some tooltip information // Updates the cell color and adds some tooltip information
if (cell != null) { if (cell != null) {
// Resets the fillcolor and the overlay // Resets the fillcolor and the overlay
graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, 'white', [ graph.setCellStyles('fillColor', 'white', [
cell, cell,
]); ]);
graph.removeCellOverlays(cell); graph.removeCellOverlays(cell);
@ -132,19 +132,19 @@ const Template = ({ label, ...args }) => {
// Changes the cell color for the known states // Changes the cell color for the known states
if (state == 'Running') { if (state == 'Running') {
graph.setCellStyles( graph.setCellStyles(
mxConstants.STYLE_FILLCOLOR, 'fillColor',
'#f8cecc', '#f8cecc',
[cell] [cell]
); );
} else if (state == 'Waiting') { } else if (state == 'Waiting') {
graph.setCellStyles( graph.setCellStyles(
mxConstants.STYLE_FILLCOLOR, 'fillColor',
'#fff2cc', '#fff2cc',
[cell] [cell]
); );
} else if (state == 'Completed') { } else if (state == 'Completed') {
graph.setCellStyles( graph.setCellStyles(
mxConstants.STYLE_FILLCOLOR, 'fillColor',
'#d4e1f5', '#d4e1f5',
[cell] [cell]
); );
@ -198,66 +198,66 @@ const Template = ({ label, ...args }) => {
// Creates the stylesheet for the process display // Creates the stylesheet for the process display
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_FONTSIZE] = 11; style.fontSize = 11;
style[mxConstants.STYLE_FONTCOLOR] = 'black'; style.fontColor = 'black';
style[mxConstants.STYLE_STROKECOLOR] = '#808080'; style.strokeColor = '#808080';
style[mxConstants.STYLE_FILLCOLOR] = 'white'; style.fillColor = 'white';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST; style.gradientDirection = mxConstants.DIRECTION_EAST;
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_SHADOW] = true; style.shadow = true;
style[mxConstants.STYLE_FONTSTYLE] = 1; style.fontStyle = 1;
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; style.edge = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_STROKECOLOR] = '#808080'; style.strokeColor = '#808080';
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_SHADOW] = true; style.shadow = true;
style = []; style = [];
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE; style.shape = mxConstants.SHAPE_SWIMLANE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_STROKECOLOR] = '#a0a0a0'; style.strokeColor = '#a0a0a0';
style[mxConstants.STYLE_FONTCOLOR] = '#606060'; style.fontColor = '#606060';
style[mxConstants.STYLE_FILLCOLOR] = '#E0E0DF'; style.fillColor = '#E0E0DF';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_STARTSIZE] = 30; style.startSize = 30;
style[mxConstants.STYLE_ROUNDED] = false; style.rounded = false;
style[mxConstants.STYLE_FONTSIZE] = 12; style.fontSize = 12;
style[mxConstants.STYLE_FONTSTYLE] = 0; style.fontStyle = 0;
style[mxConstants.STYLE_HORIZONTAL] = false; style.horizontal = false;
// To improve text quality for vertical labels in some old IE versions... // 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); graph.getStylesheet().putCellStyle('swimlane', style);
style = []; style = [];
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RHOMBUS; style.shape = mxConstants.SHAPE_RHOMBUS;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter; style.perimiter = mxPerimeter.RhombusPerimeter;
style[mxConstants.STYLE_STROKECOLOR] = '#91BCC0'; style.strokeColor = '#91BCC0';
style[mxConstants.STYLE_FONTCOLOR] = 'gray'; style.fontColor = 'gray';
style[mxConstants.STYLE_FILLCOLOR] = '#91BCC0'; style.fillColor = '#91BCC0';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style.align = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_FONTSIZE] = 16; style.fontSize = 16;
graph.getStylesheet().putCellStyle('step', style); graph.getStylesheet().putCellStyle('step', style);
style = []; style = [];
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE; style.shape = mxConstants.SHAPE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter; style.perimiter = mxPerimeter.EllipsePerimeter;
style[mxConstants.STYLE_FONTCOLOR] = 'gray'; style.fontColor = 'gray';
style[mxConstants.STYLE_FILLCOLOR] = '#A0C88F'; style.fillColor = '#A0C88F';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_STROKECOLOR] = '#A0C88F'; style.strokeColor = '#A0C88F';
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style.align = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_FONTSIZE] = 16; style.fontSize = 16;
graph.getStylesheet().putCellStyle('start', style); graph.getStylesheet().putCellStyle('start', style);
style = mxCloneUtils.clone(style); style = mxCloneUtils.clone(style);
style[mxConstants.STYLE_FILLCOLOR] = '#DACCBC'; style.fillColor = '#DACCBC';
style[mxConstants.STYLE_STROKECOLOR] = '#AF7F73'; style.strokeColor = '#AF7F73';
graph.getStylesheet().putCellStyle('end', style); graph.getStylesheet().putCellStyle('end', style);
return graph; return graph;

54
packages/html/stories/OrgChart.stories.js
View File

@ -85,43 +85,43 @@ const Template = ({ label, ...args }) => {
// Set some stylesheet options for the visual appearance of vertices // Set some stylesheet options for the visual appearance of vertices
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'label'; style.shape = 'label';
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT; style.align = mxConstants.ALIGN_LEFT;
style[mxConstants.STYLE_SPACING_LEFT] = 54; style.spacingLeft = 54;
style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df'; style.gradientColor = '#7d85df';
style[mxConstants.STYLE_STROKECOLOR] = '#5d65df'; style.strokeColor = '#5d65df';
style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff'; style.fillColor = '#adc5ff';
style[mxConstants.STYLE_FONTCOLOR] = '#1d258f'; style.fontColor = '#1d258f';
style[mxConstants.STYLE_FONTFAMILY] = 'Verdana'; style.fontFamily = 'Verdana';
style[mxConstants.STYLE_FONTSIZE] = '12'; style.fontSize = '12';
style[mxConstants.STYLE_FONTSTYLE] = '1'; style.fontStyle = '1';
style[mxConstants.STYLE_SHADOW] = '1'; style.shadow = '1';
style[mxConstants.STYLE_ROUNDED] = '1'; style.rounded = '1';
style[mxConstants.STYLE_GLASS] = '1'; style.glass = '1';
style[mxConstants.STYLE_IMAGE] = '/images/dude3.png'; style.image = '/images/dude3.png';
style[mxConstants.STYLE_IMAGE_WIDTH] = '48'; style.imageWidth = '48';
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48'; style.imageHeight = '48';
style[mxConstants.STYLE_SPACING] = 8; style.spacing = 8;
// Sets the default style for edges // Sets the default style for edges
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_STROKEWIDTH] = 3; style.strokeWidth = 3;
style[mxConstants.STYLE_EXIT_X] = 0.5; // center style.exitX = 0.5; // center
style[mxConstants.STYLE_EXIT_Y] = 1.0; // bottom style.exitY = 1.0; // bottom
style[mxConstants.STYLE_EXIT_PERIMETER] = 0; // disabled style.exitPerimeter = 0; // disabled
style[mxConstants.STYLE_ENTRY_X] = 0.5; // center style.entryX = 0.5; // center
style[mxConstants.STYLE_ENTRY_Y] = 0; // top style.entryY = 0; // top
style[mxConstants.STYLE_ENTRY_PERIMETER] = 0; // disabled style.entryPerimeter = 0; // disabled
// Disable the following for straight lines // Disable the following for straight lines
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom; style.edge = mxEdgeStyle.TopToBottom;
// Stops editing on enter or escape keypress // Stops editing on enter or escape keypress
const keyHandler = new mxKeyHandler(graph); const keyHandler = new mxKeyHandler(graph);

3
packages/html/stories/Orthogonal.stories.js
View File

@ -19,7 +19,8 @@ const Template = ({ label, ...args }) => {
mxPoint, mxPoint,
mxCellState, mxCellState,
mxEdgeHandler, mxEdgeHandler,
mxGraphView mxGraphView,
mxEvent
} = mxgraph; } = mxgraph;
const container = document.createElement('div'); const container = document.createElement('div');

8
packages/html/stories/PortRefs.stories.js
View File

@ -158,8 +158,8 @@ const Template = ({ label, ...args }) => {
) { ) {
if (constraint != null) { if (constraint != null) {
const key = source const key = source
? mxConstants.STYLE_SOURCE_PORT ? 'sourcePort'
: mxConstants.STYLE_TARGET_PORT; : 'targetPort';
if (constraint == null || constraint.id == null) { if (constraint == null || constraint.id == null) {
this.setCellStyles(key, null, [edge]); this.setCellStyles(key, null, [edge]);
@ -172,8 +172,8 @@ const Template = ({ label, ...args }) => {
// Returns the port for the given connection // Returns the port for the given connection
graph.getConnectionConstraint = function(edge, terminal, source) { graph.getConnectionConstraint = function(edge, terminal, source) {
const key = source const key = source
? mxConstants.STYLE_SOURCE_PORT ? 'sourcePort'
: mxConstants.STYLE_TARGET_PORT; : 'targetPort';
const id = edge.style[key]; const id = edge.style[key];
if (id != null) { if (id != null) {

12
packages/html/stories/RadialTreeLayout.stories.js
View File

@ -39,14 +39,14 @@ const Template = ({ label, ...args }) => {
// Changes the default vertex style in-place // Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_PERIMETER_SPACING] = 6; style.perimeterSpacing = 6;
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_SHADOW] = true; style.shadow = true;
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
// Creates a layout algorithm to be used // Creates a layout algorithm to be used
// with the graph // with the graph

10
packages/html/stories/Shape.stories.js
View File

@ -96,16 +96,16 @@ const Template = ({ label, ...args }) => {
// Changes the default style for vertices "in-place" // Changes the default style for vertices "in-place"
// to use the custom shape. // to use the custom shape.
const style = graph.getStylesheet().getDefaultVertexStyle(); const style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'box'; style.shape = 'box';
// Adds a spacing for the label that matches the // Adds a spacing for the label that matches the
// extrusion size // extrusion size
style[mxConstants.STYLE_SPACING_TOP] = BoxShape.prototype.extrude; style.spacingTop = BoxShape.prototype.extrude;
style[mxConstants.STYLE_SPACING_RIGHT] = BoxShape.prototype.extrude; style.spacingRight = BoxShape.prototype.extrude;
// Adds a gradient and shadow to improve the user experience // Adds a gradient and shadow to improve the user experience
style[mxConstants.STYLE_GRADIENTCOLOR] = '#FFFFFF'; style.gradientColor = '#FFFFFF';
style[mxConstants.STYLE_SHADOW] = true; style.shadow = true;
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).

24
packages/html/stories/Stencils.stories.js
View File

@ -68,7 +68,7 @@ const Template = ({ label, ...args }) => {
// Uses the shape for resize previews // Uses the shape for resize previews
mxVertexHandler.prototype.createSelectionShape = function(bounds) { mxVertexHandler.prototype.createSelectionShape = function(bounds) {
const key = this.state.style[mxConstants.STYLE_SHAPE]; const key = this.state.style.shape;
const stencil = mxStencilRegistry.getStencil(key); const stencil = mxStencilRegistry.getStencil(key);
let shape = null; let shape = null;
@ -159,11 +159,11 @@ const Template = ({ label, ...args }) => {
// Changes default styles // Changes default styles
let style = graph.getStylesheet().getDefaultEdgeStyle(); let style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = 'orthogonalEdgeStyle'; style.edge = 'orthogonalEdgeStyle';
style = graph.getStylesheet().getDefaultVertexStyle(); style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff'; style.fillColor = '#adc5ff';
style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df'; style.gradientColor = '#7d85df';
style[mxConstants.STYLE_SHADOW] = '1'; style.shadow = '1';
// Enables rubberband selection // Enables rubberband selection
if (args.rubberBand) if (args.rubberBand)
@ -273,13 +273,13 @@ const Template = ({ label, ...args }) => {
buttons.appendChild( buttons.appendChild(
mxDomHelpers.button('FlipH', function() { mxDomHelpers.button('FlipH', function() {
graph.toggleCellStyles(mxConstants.STYLE_FLIPH); graph.toggleCellStyles('flipH');
}) })
); );
buttons.appendChild( buttons.appendChild(
mxDomHelpers.button('FlipV', function() { mxDomHelpers.button('FlipV', function() {
graph.toggleCellStyles(mxConstants.STYLE_FLIPV); graph.toggleCellStyles('flipV');
}) })
); );
@ -312,7 +312,7 @@ const Template = ({ label, ...args }) => {
if (state != null) { if (state != null) {
let dir = let dir =
state.style[mxConstants.STYLE_DIRECTION] || state.style.direction ||
'east'; /* default */ 'east'; /* default */
if (dir === 'east') { if (dir === 'east') {
@ -325,7 +325,7 @@ const Template = ({ label, ...args }) => {
dir = 'east'; dir = 'east';
} }
graph.setCellStyles(mxConstants.STYLE_DIRECTION, dir, [cell]); graph.setCellStyles('direction', dir, [cell]);
} }
} finally { } finally {
graph.getModel().endUpdate(); graph.getModel().endUpdate();
@ -342,17 +342,17 @@ const Template = ({ label, ...args }) => {
buttons.appendChild( buttons.appendChild(
mxDomHelpers.button('And', function() { mxDomHelpers.button('And', function() {
graph.setCellStyles(mxConstants.STYLE_SHAPE, 'and'); graph.setCellStyles('shape', 'and');
}) })
); );
buttons.appendChild( buttons.appendChild(
mxDomHelpers.button('Or', function() { mxDomHelpers.button('Or', function() {
graph.setCellStyles(mxConstants.STYLE_SHAPE, 'or'); graph.setCellStyles('shape', 'or');
}) })
); );
buttons.appendChild( buttons.appendChild(
mxDomHelpers.button('Xor', function() { mxDomHelpers.button('Xor', function() {
graph.setCellStyles(mxConstants.STYLE_SHAPE, 'xor'); graph.setCellStyles('shape', 'xor');
}) })
); );

36
packages/html/stories/Stylesheet.stories.js
View File

@ -59,28 +59,28 @@ const Template = ({ label, ...args }) => {
// Creates the default style for vertices // Creates the default style for vertices
let style = []; let style = [];
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; style.shape = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style.perimiter = mxPerimeter.RectanglePerimeter;
style[mxConstants.STYLE_STROKECOLOR] = 'gray'; style.strokeColor = 'gray';
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_FILLCOLOR] = '#EEEEEE'; style.fillColor = '#EEEEEE';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_FONTCOLOR] = '#774400'; style.fontColor = '#774400';
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style.align = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_FONTSIZE] = '12'; style.fontSize = '12';
style[mxConstants.STYLE_FONTSTYLE] = 1; style.fontStyle = 1;
graph.getStylesheet().putDefaultVertexStyle(style); graph.getStylesheet().putDefaultVertexStyle(style);
// Creates the default style for edges // Creates the default style for edges
style = []; style = [];
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR; style.shape = mxConstants.SHAPE_CONNECTOR;
style[mxConstants.STYLE_STROKECOLOR] = '#6482B9'; style.strokeColor = '#6482B9';
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style.align = mxConstants.ALIGN_CENTER;
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style.verticalAlign = mxConstants.ALIGN_MIDDLE;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; style.edge = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC; style.endArrow = mxConstants.ARROW_CLASSIC;
style[mxConstants.STYLE_FONTSIZE] = '10'; style.fontSize = '10';
graph.getStylesheet().putDefaultEdgeStyle(style); graph.getStylesheet().putDefaultEdgeStyle(style);
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This

76
packages/html/stories/SwimLanes.stories.js
View File

@ -61,60 +61,60 @@ const Template = ({ label, ...args }) => {
// Changes the default vertex style in-place // Changes the default vertex style in-place
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE; style.shape = mxConstants.SHAPE_SWIMLANE;
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle'; style.verticalAlign = 'middle';
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white'; style.labelBackgroundColor = 'white';
style[mxConstants.STYLE_FONTSIZE] = 11; style.fontSize = 11;
style[mxConstants.STYLE_STARTSIZE] = 22; style.startSize = 22;
style[mxConstants.STYLE_HORIZONTAL] = false; style.horizontal = false;
style[mxConstants.STYLE_FONTCOLOR] = 'black'; style.fontColor = 'black';
style[mxConstants.STYLE_STROKECOLOR] = 'black'; style.strokeColor = 'black';
delete style[mxConstants.STYLE_FILLCOLOR]; delete style.fillColor;
style = mxCloneUtils.clone(style); style = mxCloneUtils.clone(style);
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; style.shape = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_FONTSIZE] = 10; style.fontSize = 10;
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_HORIZONTAL] = true; style.horizontal = true;
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle'; style.verticalAlign = 'middle';
delete style[mxConstants.STYLE_STARTSIZE]; delete style.startSize;
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'none'; style.labelBackgroundColor = 'none';
graph.getStylesheet().putCellStyle('process', style); graph.getStylesheet().putCellStyle('process', style);
style = mxCloneUtils.clone(style); style = mxCloneUtils.clone(style);
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE; style.shape = mxConstants.SHAPE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter; style.perimiter = mxPerimeter.EllipsePerimeter;
delete style[mxConstants.STYLE_ROUNDED]; delete style.rounded;
graph.getStylesheet().putCellStyle('state', style); graph.getStylesheet().putCellStyle('state', style);
style = mxCloneUtils.clone(style); style = mxCloneUtils.clone(style);
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RHOMBUS; style.shape = mxConstants.SHAPE_RHOMBUS;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter; style.perimiter = mxPerimeter.RhombusPerimeter;
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'top'; style.verticalAlign = 'top';
style[mxConstants.STYLE_SPACING_TOP] = 40; style.spacingTop = 40;
style[mxConstants.STYLE_SPACING_RIGHT] = 64; style.spacingRight = 64;
graph.getStylesheet().putCellStyle('condition', style); graph.getStylesheet().putCellStyle('condition', style);
style = mxCloneUtils.clone(style); style = mxCloneUtils.clone(style);
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_DOUBLE_ELLIPSE; style.shape = mxConstants.SHAPE_DOUBLE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter; style.perimiter = mxPerimeter.EllipsePerimeter;
style[mxConstants.STYLE_SPACING_TOP] = 28; style.spacingTop = 28;
style[mxConstants.STYLE_FONTSIZE] = 14; style.fontSize = 14;
style[mxConstants.STYLE_FONTSTYLE] = 1; style.fontStyle = 1;
delete style[mxConstants.STYLE_SPACING_RIGHT]; delete style.spacingRight;
graph.getStylesheet().putCellStyle('end', style); graph.getStylesheet().putCellStyle('end', style);
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; style.edge = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_BLOCK; style.endArrow = mxConstants.ARROW_BLOCK;
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_FONTCOLOR] = 'black'; style.fontColor = 'black';
style[mxConstants.STYLE_STROKECOLOR] = 'black'; style.strokeColor = 'black';
style = mxCloneUtils.clone(style); style = mxCloneUtils.clone(style);
style[mxConstants.STYLE_DASHED] = true; style.dashed = true;
style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_OPEN; style.endArrow = mxConstants.ARROW_OPEN;
style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_OVAL; style.startArrow = mxConstants.ARROW_OVAL;
graph.getStylesheet().putCellStyle('crossover', style); graph.getStylesheet().putCellStyle('crossover', style);
// Installs double click on middle control point and // Installs double click on middle control point and

10
packages/html/stories/Tree.stories.js
View File

@ -195,13 +195,13 @@ const Template = ({ label, ...args }) => {
// Set some stylesheet options for the visual appearance // Set some stylesheet options for the visual appearance
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'treenode'; style.shape = 'treenode';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_SHADOW] = true; style.shadow = true;
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom; style.edge = mxEdgeStyle.TopToBottom;
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
// Enables automatic sizing for vertices after editing and // Enables automatic sizing for vertices after editing and
// panning by using the left mouse button. // panning by using the left mouse button.

28
packages/html/stories/UserObject.stories.js
View File

@ -175,23 +175,23 @@ const Template = ({ label, ...args }) => {
// Changes the style for match the markup // Changes the style for match the markup
// Creates the default style for vertices // Creates the default style for vertices
let style = graph.getStylesheet().getDefaultVertexStyle(); let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_STROKECOLOR] = 'gray'; style.strokeColor = 'gray';
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_SHADOW] = true; style.shadow = true;
style[mxConstants.STYLE_FILLCOLOR] = '#DFDFDF'; style.fillColor = '#DFDFDF';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'; style.gradientColor = 'white';
style[mxConstants.STYLE_FONTCOLOR] = 'black'; style.fontColor = 'black';
style[mxConstants.STYLE_FONTSIZE] = '12'; style.fontSize = '12';
style[mxConstants.STYLE_SPACING] = 4; style.spacing = 4;
// Creates the default style for edges // Creates the default style for edges
style = graph.getStylesheet().getDefaultEdgeStyle(); style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_STROKECOLOR] = '#0C0C0C'; style.strokeColor = '#0C0C0C';
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white'; style.labelBackgroundColor = 'white';
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; style.edge = mxEdgeStyle.ElbowConnector;
style[mxConstants.STYLE_ROUNDED] = true; style.rounded = true;
style[mxConstants.STYLE_FONTCOLOR] = 'black'; style.fontColor = 'black';
style[mxConstants.STYLE_FONTSIZE] = '10'; style.fontSize = '10';
// Gets the default parent for inserting new cells. This // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0). // is normally the first child of the root (ie. layer 0).