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

- Export each constants in mxConstants. 

- Converting JS files to TS.
development
Junsik Shim 2021-05-14 13:42:49 +09:00
parent 92e4970cca 57b118f893
commit 14ce27e49e
89 changed files with 3057 additions and 4511 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);
} }
}); });

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

@ -9,13 +9,13 @@ 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';
import mxCellState from '../view/cell/mxCellState'; import mxCellState from '../view/cell/mxCellState';
import mxGraph from '../view/graph/mxGraph'; import mxGraph from '../view/graph/mxGraph';
import mxShape from '../shape/mxShape'; import mxShape from '../shape/mxShape';
import { ColorValue } from '../types';
/** /**
* A helper class to highlight cells. Here is an example for a given cell. * A helper class to highlight cells. Here is an example for a given cell.
@ -28,12 +28,11 @@ import mxShape from '../shape/mxShape';
*/ */
class mxCellHighlight { class mxCellHighlight {
constructor( constructor(
graph: mxGraph | null = null, graph: mxGraph,
highlightColor: string = DEFAULT_VALID_COLOR, highlightColor: ColorValue = DEFAULT_VALID_COLOR,
strokeWidth: number = HIGHLIGHT_STROKEWIDTH, strokeWidth = HIGHLIGHT_STROKEWIDTH,
dashed: boolean = false dashed = false
) { ) {
if (graph != null) {
this.graph = graph; this.graph = graph;
this.highlightColor = highlightColor; this.highlightColor = highlightColor;
this.strokeWidth = strokeWidth; this.strokeWidth = strokeWidth;
@ -71,16 +70,15 @@ class mxCellHighlight {
this.graph.getView().addListener(mxEvent.DOWN, this.resetHandler); this.graph.getView().addListener(mxEvent.DOWN, this.resetHandler);
this.graph.getView().addListener(mxEvent.UP, this.resetHandler); this.graph.getView().addListener(mxEvent.UP, this.resetHandler);
} }
}
// TODO: Document me!! // TODO: Document me!!
highlightColor: string | null = null; highlightColor: ColorValue = null;
strokeWidth: number | null = null; strokeWidth: number = 0;
dashed: boolean = false; dashed = false;
opacity: number = 100; opacity = 100;
repaintHandler: Function | null = null; repaintHandler: Function | null = null;
@ -90,35 +88,30 @@ class mxCellHighlight {
* Specifies if the highlights should appear on top of everything else in the overlay pane. * Specifies if the highlights should appear on top of everything else in the overlay pane.
* @default false * @default false
*/ */
// keepOnTop: boolean; keepOnTop = false;
keepOnTop: boolean = false;
/** /**
* Reference to the enclosing {@link mxGraph}. * Reference to the enclosing {@link mxGraph}.
* @default true * @default true
*/ */
// graph: boolean; graph: mxGraph;
graph: mxGraph | null = null;
/** /**
* Reference to the {@link mxCellState}. * Reference to the {@link mxCellState}.
* @default null * @default null
*/ */
// state: mxCellState;
state: mxCellState | null = null; state: mxCellState | null = null;
/** /**
* Specifies the spacing between the highlight for vertices and the vertex. * Specifies the spacing between the highlight for vertices and the vertex.
* @default 2 * @default 2
*/ */
// spacing: number; spacing = 2;
spacing: number = 2;
/** /**
* Holds the handler that automatically invokes reset if the highlight should be hidden. * Holds the handler that automatically invokes reset if the highlight should be hidden.
* @default null * @default null
*/ */
// resetHandler: any;
resetHandler: Function | null = null; resetHandler: Function | null = null;
/** /**
@ -126,11 +119,10 @@ class mxCellHighlight {
* *
* @param {string} color - String that represents the new highlight color. * @param {string} color - String that represents the new highlight color.
*/ */
// setHighlightColor(color: string): void; setHighlightColor(color: ColorValue) {
setHighlightColor(color: string): void {
this.highlightColor = color; this.highlightColor = color;
if (this.shape != null) { if (this.shape) {
this.shape.stroke = color; this.shape.stroke = color;
} }
} }
@ -138,21 +130,17 @@ class mxCellHighlight {
/** /**
* Creates and returns the highlight shape for the given state. * Creates and returns the highlight shape for the given state.
*/ */
// drawHighlight(): void; drawHighlight() {
drawHighlight(): void {
this.shape = this.createShape(); this.shape = this.createShape();
this.repaint(); this.repaint();
const node = this.shape?.node;
if ( if (
!this.keepOnTop && !this.keepOnTop &&
// @ts-ignore this.shape.node?.parentNode?.firstChild !== this.shape.node
this.shape.node.parentNode.firstChild !== this.shape.node
) { ) {
// @ts-ignore
this.shape.node.parentNode.insertBefore( this.shape.node.parentNode.insertBefore(
// @ts-ignore
this.shape.node, this.shape.node,
// @ts-ignore
this.shape.node.parentNode.firstChild this.shape.node.parentNode.firstChild
); );
} }
@ -161,10 +149,9 @@ class mxCellHighlight {
/** /**
* Creates and returns the highlight shape for the given state. * Creates and returns the highlight shape for the given state.
*/ */
// createShape(): mxShape; createShape() {
createShape(): mxShape {
const shape = <mxShape>( const shape = <mxShape>(
(<mxGraph>this.graph).cellRenderer.createShape(<mxCellState>this.state) this.graph.cellRenderer.createShape(<mxCellState>this.state)
); );
shape.svgStrokeTolerance = (<mxGraph>this.graph).tolerance; shape.svgStrokeTolerance = (<mxGraph>this.graph).tolerance;
@ -216,7 +203,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;

94
packages/core/src/handler/mxCellMarker.js → packages/core/src/handler/mxCellMarker.ts
View File

@ -16,6 +16,11 @@ import mxCellHighlight from './mxCellHighlight';
import mxEventObject from '../util/event/mxEventObject'; import mxEventObject from '../util/event/mxEventObject';
import mxEvent from '../util/event/mxEvent'; import mxEvent from '../util/event/mxEvent';
import mxUtils from '../util/mxUtils'; import mxUtils from '../util/mxUtils';
import mxGraph from '../view/graph/mxGraph';
import { ColorValue } from '../types';
import mxCellState from '../view/cell/mxCellState';
import mxMouseEvent from '../util/event/mxMouseEvent';
import mxCell from '../view/cell/mxCell';
/** /**
* Class: mxCellMarker * Class: mxCellMarker
@ -58,34 +63,33 @@ import mxUtils from '../util/mxUtils';
* <mxConstants.DEFAULT_HOTSPOT>. * <mxConstants.DEFAULT_HOTSPOT>.
*/ */
class mxCellMarker extends mxEventSource { class mxCellMarker extends mxEventSource {
constructor(graph, validColor, invalidColor, hotspot) { constructor(
graph: mxGraph,
validColor: ColorValue = DEFAULT_VALID_COLOR,
invalidColor: ColorValue = DEFAULT_INVALID_COLOR,
hotspot: number = DEFAULT_HOTSPOT
) {
super(); super();
if (graph != null) {
this.graph = graph; this.graph = graph;
this.validColor = validColor != null ? validColor : DEFAULT_VALID_COLOR; this.validColor = validColor;
this.invalidColor = this.invalidColor = invalidColor;
invalidColor != null ? invalidColor : DEFAULT_INVALID_COLOR; this.hotspot = hotspot;
this.hotspot = hotspot != null ? hotspot : DEFAULT_HOTSPOT;
this.highlight = new mxCellHighlight(graph); this.highlight = new mxCellHighlight(graph);
} }
}
/** /**
* Variable: graph * Variable: graph
* *
* Reference to the enclosing <mxGraph>. * Reference to the enclosing <mxGraph>.
*/ */
// graph: mxGraph; graph: mxGraph;
graph = null;
/** /**
* Variable: enabled * Variable: enabled
* *
* Specifies if the marker is enabled. Default is true. * Specifies if the marker is enabled. Default is true.
*/ */
// enabled: boolean;
enabled = true; enabled = true;
/** /**
@ -96,7 +100,6 @@ class mxCellMarker extends mxEventSource {
* as the hotspot. Possible values are between 0 and 1. Default is * as the hotspot. Possible values are between 0 and 1. Default is
* mxConstants.DEFAULT_HOTSPOT. * mxConstants.DEFAULT_HOTSPOT.
*/ */
// hotspot: number;
hotspot = DEFAULT_HOTSPOT; hotspot = DEFAULT_HOTSPOT;
/** /**
@ -104,7 +107,6 @@ class mxCellMarker extends mxEventSource {
* *
* Specifies if the hotspot is enabled. Default is false. * Specifies if the hotspot is enabled. Default is false.
*/ */
// hotspotEnabled: boolean;
hotspotEnabled = false; hotspotEnabled = false;
/** /**
@ -112,40 +114,37 @@ class mxCellMarker extends mxEventSource {
* *
* Holds the valid marker color. * Holds the valid marker color.
*/ */
// validColor: string; validColor: ColorValue;
validColor = null;
/** /**
* Variable: invalidColor * Variable: invalidColor
* *
* Holds the invalid marker color. * Holds the invalid marker color.
*/ */
// invalidColor: string; invalidColor: ColorValue;
invalidColor = null;
/** /**
* Variable: currentColor * Variable: currentColor
* *
* Holds the current marker color. * Holds the current marker color.
*/ */
// currentColor: string; currentColor: ColorValue | null = null;
currentColor = null;
/** /**
* Variable: validState * Variable: validState
* *
* Holds the marked <mxCellState> if it is valid. * Holds the marked <mxCellState> if it is valid.
*/ */
// validState: mxCellState; validState: mxCellState | null = null;
validState = null;
/** /**
* Variable: markedState * Variable: markedState
* *
* Holds the marked <mxCellState>. * Holds the marked <mxCellState>.
*/ */
// markedState: mxCellState; markedState: mxCellState | null = null;
markedState = null;
highlight: mxCellHighlight;
/** /**
* Function: setEnabled * Function: setEnabled
@ -157,8 +156,7 @@ class mxCellMarker extends mxEventSource {
* *
* enabled - Boolean that specifies the new enabled state. * enabled - Boolean that specifies the new enabled state.
*/ */
// setEnabled(enabled: boolean): void; setEnabled(enabled: boolean) {
setEnabled(enabled) {
this.enabled = enabled; this.enabled = enabled;
} }
@ -168,7 +166,6 @@ class mxCellMarker extends mxEventSource {
* Returns true if events are handled. This implementation * Returns true if events are handled. This implementation
* returns <enabled>. * returns <enabled>.
*/ */
// isEnabled(): boolean;
isEnabled() { isEnabled() {
return this.enabled; return this.enabled;
} }
@ -178,8 +175,7 @@ class mxCellMarker extends mxEventSource {
* *
* Sets the <hotspot>. * Sets the <hotspot>.
*/ */
// setHotspot(hotspot: number): void; setHotspot(hotspot: number) {
setHotspot(hotspot) {
this.hotspot = hotspot; this.hotspot = hotspot;
} }
@ -188,7 +184,6 @@ class mxCellMarker extends mxEventSource {
* *
* Returns the <hotspot>. * Returns the <hotspot>.
*/ */
// getHotspot(): number;
getHotspot() { getHotspot() {
return this.hotspot; return this.hotspot;
} }
@ -198,8 +193,7 @@ class mxCellMarker extends mxEventSource {
* *
* Specifies whether the hotspot should be used in <intersects>. * Specifies whether the hotspot should be used in <intersects>.
*/ */
// setHotspotEnabled(enabled: boolean): void; setHotspotEnabled(enabled: boolean) {
setHotspotEnabled(enabled) {
this.hotspotEnabled = enabled; this.hotspotEnabled = enabled;
} }
@ -208,7 +202,6 @@ class mxCellMarker extends mxEventSource {
* *
* Returns true if hotspot is used in <intersects>. * Returns true if hotspot is used in <intersects>.
*/ */
// isHotspotEnabled(): boolean;
isHotspotEnabled() { isHotspotEnabled() {
return this.hotspotEnabled; return this.hotspotEnabled;
} }
@ -218,9 +211,8 @@ class mxCellMarker extends mxEventSource {
* *
* Returns true if <validState> is not null. * Returns true if <validState> is not null.
*/ */
// hasValidState(): boolean;
hasValidState() { hasValidState() {
return this.validState != null; return !!this.validState;
} }
/** /**
@ -228,7 +220,6 @@ class mxCellMarker extends mxEventSource {
* *
* Returns the <validState>. * Returns the <validState>.
*/ */
// getValidState(): mxCellState;
getValidState() { getValidState() {
return this.validState; return this.validState;
} }
@ -238,7 +229,6 @@ class mxCellMarker extends mxEventSource {
* *
* Returns the <markedState>. * Returns the <markedState>.
*/ */
// getMarkedState(): mxCellState;
getMarkedState() { getMarkedState() {
return this.markedState; return this.markedState;
} }
@ -248,11 +238,10 @@ class mxCellMarker extends mxEventSource {
* *
* Resets the state of the cell marker. * Resets the state of the cell marker.
*/ */
// reset(): void;
reset() { reset() {
this.validState = null; this.validState = null;
if (this.markedState != null) { if (this.markedState) {
this.markedState = null; this.markedState = null;
this.unmark(); this.unmark();
} }
@ -268,8 +257,7 @@ class mxCellMarker extends mxEventSource {
* regardless of the marker color. The state is returned regardless of the * regardless of the marker color. The state is returned regardless of the
* marker color and valid state. * marker color and valid state.
*/ */
// process(me: mxMouseEvent): mxCellState; process(me: mxMouseEvent) {
process(me) {
let state = null; let state = null;
if (this.isEnabled()) { if (this.isEnabled()) {
@ -285,13 +273,13 @@ class mxCellMarker extends mxEventSource {
* *
* Sets and marks the current valid state. * Sets and marks the current valid state.
*/ */
// setCurrentState(state: mxCellState, me: mxMouseEvent, color: string): void; setCurrentState(
setCurrentState(state, me, color) { state: mxCellState,
const isValid = state != null ? this.isValidState(state) : false; me: mxMouseEvent,
color = color: ColorValue = null
color != null ) {
? color const isValid = state ? this.isValidState(state) : false;
: this.getMarkerColor(me.getEvent(), state, isValid); color = color ?? this.getMarkerColor(me.getEvent(), state, isValid);
if (isValid) { if (isValid) {
this.validState = state; this.validState = state;
@ -302,10 +290,10 @@ class mxCellMarker extends mxEventSource {
if (state !== this.markedState || color !== this.currentColor) { if (state !== this.markedState || color !== this.currentColor) {
this.currentColor = color; this.currentColor = color;
if (state != null && this.currentColor != null) { if (state && this.currentColor) {
this.markedState = state; this.markedState = state;
this.mark(); this.mark();
} else if (this.markedState != null) { } else if (this.markedState) {
this.markedState = null; this.markedState = null;
this.unmark(); this.unmark();
} }
@ -317,12 +305,11 @@ class mxCellMarker extends mxEventSource {
* *
* Marks the given cell using the given color, or <validColor> if no color is specified. * Marks the given cell using the given color, or <validColor> if no color is specified.
*/ */
// markCell(cell: mxCell, color: string): void; markCell(cell: mxCell, color: ColorValue) {
markCell(cell, color) {
const state = this.graph.getView().getState(cell); const state = this.graph.getView().getState(cell);
if (state != null) { if (state) {
this.currentColor = color != null ? color : this.validColor; this.currentColor = color ?? this.validColor;
this.markedState = state; this.markedState = state;
this.mark(); this.mark();
} }
@ -333,7 +320,6 @@ class mxCellMarker extends mxEventSource {
* *
* Marks the <markedState> and fires a <mark> event. * Marks the <markedState> and fires a <mark> event.
*/ */
// mark(): void;
mark() { mark() {
this.highlight.setHighlightColor(this.currentColor); this.highlight.setHighlightColor(this.currentColor);
this.highlight.highlight(this.markedState); this.highlight.highlight(this.markedState);

97
packages/core/src/handler/mxConnectionHandler.js → packages/core/src/handler/mxConnectionHandler.ts
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';
@ -40,6 +35,11 @@ import {
isConsumed, isConsumed,
isShiftDown, isShiftDown,
} from '../util/mxEventUtils'; } from '../util/mxEventUtils';
import mxGraph from '../view/graph/mxGraph';
import mxImage from '../util/image/mxImage';
import mxCellState from '../view/cell/mxCellState';
type FactoryMethod = (source: mxCell, target: mxCell, style?: string) => mxCell;
/** /**
* Class: mxConnectionHandler * Class: mxConnectionHandler
@ -198,22 +198,20 @@ import {
* the <mxCell> that represents the new edge. * the <mxCell> that represents the new edge.
*/ */
class mxConnectionHandler extends mxEventSource { class mxConnectionHandler extends mxEventSource {
constructor(graph, factoryMethod) { constructor(graph: mxGraph, factoryMethod: FactoryMethod | null = null) {
super(); super();
if (graph != null) {
this.graph = graph; this.graph = graph;
this.factoryMethod = factoryMethod; this.factoryMethod = factoryMethod;
this.init(); this.init();
// Handles escape keystrokes // Handles escape keystrokes
this.escapeHandler = (sender, evt) => { this.escapeHandler = () => {
this.reset(); this.reset();
}; };
this.graph.addListener(mxEvent.ESCAPE, this.escapeHandler); this.graph.addListener(mxEvent.ESCAPE, this.escapeHandler);
} }
}
/** /**
* Variable: graph * Variable: graph
@ -221,7 +219,7 @@ class mxConnectionHandler extends mxEventSource {
* Reference to the enclosing <mxGraph>. * Reference to the enclosing <mxGraph>.
*/ */
// graph: mxGraph; // graph: mxGraph;
graph = null; graph: mxGraph;
/** /**
* Variable: factoryMethod * Variable: factoryMethod
@ -231,7 +229,7 @@ class mxConnectionHandler extends mxEventSource {
* a new <mxCell> that represents the edge. This is used in <createEdge>. * a new <mxCell> that represents the edge. This is used in <createEdge>.
*/ */
// factoryMethod: (source: mxCell, target: mxCell, style?: string) => mxCell; // factoryMethod: (source: mxCell, target: mxCell, style?: string) => mxCell;
factoryMethod = true; factoryMethod: FactoryMethod | null = null;
/** /**
* Variable: moveIconFront * Variable: moveIconFront
@ -241,7 +239,6 @@ class mxConnectionHandler extends mxEventSource {
* the connect icon. This has precendence over <moveIconBack> when set * the connect icon. This has precendence over <moveIconBack> when set
* to true. Default is false. * to true. Default is false.
*/ */
// moveIconFront: boolean;
moveIconFront = false; moveIconFront = false;
/** /**
@ -251,7 +248,6 @@ class mxConnectionHandler extends mxEventSource {
* be set to true if the icons of the connection handler conflict with other * be set to true if the icons of the connection handler conflict with other
* handles, such as the vertex label move handle. Default is false. * handles, such as the vertex label move handle. Default is false.
*/ */
// moveIconBack: boolean;
moveIconBack = false; moveIconBack = false;
/** /**
@ -260,8 +256,8 @@ class mxConnectionHandler extends mxEventSource {
* <mxImage> that is used to trigger the creation of a new connection. This * <mxImage> that is used to trigger the creation of a new connection. This
* is used in <createIcons>. Default is null. * is used in <createIcons>. Default is null.
*/ */
// connectImage: mxImage;
connectImage = null; connectImage: mxImage | null = null;
/** /**
* Variable: targetConnectImage * Variable: targetConnectImage
@ -269,7 +265,6 @@ class mxConnectionHandler extends mxEventSource {
* Specifies if the connect icon should be centered on the target state * Specifies if the connect icon should be centered on the target state
* while connections are being previewed. Default is false. * while connections are being previewed. Default is false.
*/ */
// targetConnectImage: boolean;
targetConnectImage = false; targetConnectImage = false;
/** /**
@ -277,7 +272,6 @@ class mxConnectionHandler extends mxEventSource {
* *
* Specifies if events are handled. Default is true. * Specifies if events are handled. Default is true.
*/ */
// enabled: boolean;
enabled = true; enabled = true;
/** /**
@ -285,7 +279,6 @@ class mxConnectionHandler extends mxEventSource {
* *
* Specifies if new edges should be selected. Default is true. * Specifies if new edges should be selected. Default is true.
*/ */
// select: boolean;
select = true; select = true;
/** /**
@ -298,7 +291,6 @@ class mxConnectionHandler extends mxEventSource {
* the source cell and the newly created vertex in <createTargetVertex>, which * the source cell and the newly created vertex in <createTargetVertex>, which
* can be overridden to create a new target. Default is false. * can be overridden to create a new target. Default is false.
*/ */
// createTarget: boolean;
createTarget = false; createTarget = false;
/** /**
@ -306,8 +298,7 @@ class mxConnectionHandler extends mxEventSource {
* *
* Holds the <mxTerminalMarker> used for finding source and target cells. * Holds the <mxTerminalMarker> used for finding source and target cells.
*/ */
// marker: any; marker: mxCellMarker | null = null;
marker = null;
/** /**
* Variable: constraintHandler * Variable: constraintHandler
@ -315,8 +306,7 @@ class mxConnectionHandler extends mxEventSource {
* Holds the <mxConstraintHandler> used for drawing and highlighting * Holds the <mxConstraintHandler> used for drawing and highlighting
* constraints. * constraints.
*/ */
// constraintHandler: mxConstraintHandler; constraintHandler: mxConstraintHandler | null = null;
constraintHandler = null;
/** /**
* Variable: error * Variable: error
@ -332,7 +322,6 @@ class mxConnectionHandler extends mxEventSource {
* Specifies if single clicks should add waypoints on the new edge. Default is * Specifies if single clicks should add waypoints on the new edge. Default is
* false. * false.
*/ */
// waypointsEnabled: boolean;
waypointsEnabled = false; waypointsEnabled = false;
/** /**
@ -342,7 +331,6 @@ class mxConnectionHandler extends mxEventSource {
* button when highlighting the source. Default is false, that is, the * button when highlighting the source. Default is false, that is, the
* handler only highlights the source if no button is being pressed. * handler only highlights the source if no button is being pressed.
*/ */
// ignoreMouseDown: boolean;
ignoreMouseDown = false; ignoreMouseDown = false;
/** /**
@ -351,8 +339,7 @@ class mxConnectionHandler extends mxEventSource {
* Holds the <mxPoint> where the mouseDown took place while the handler is * Holds the <mxPoint> where the mouseDown took place while the handler is
* active. * active.
*/ */
// first: mxPoint; first: mxPoint | null = null;
first = null;
/** /**
* Variable: connectIconOffset * Variable: connectIconOffset
@ -362,7 +349,6 @@ class mxConnectionHandler extends mxEventSource {
* Note that placing the icon under the mouse pointer with an * Note that placing the icon under the mouse pointer with an
* offset of (0,0) will affect hit detection. * offset of (0,0) will affect hit detection.
*/ */
// connectIconOffset: mxPoint;
connectIconOffset = new mxPoint(0, TOOLTIP_VERTICAL_OFFSET); connectIconOffset = new mxPoint(0, TOOLTIP_VERTICAL_OFFSET);
/** /**
@ -371,8 +357,7 @@ class mxConnectionHandler extends mxEventSource {
* Optional <mxCellState> that represents the preview edge while the * Optional <mxCellState> that represents the preview edge while the
* handler is active. This is created in <createEdgeState>. * handler is active. This is created in <createEdgeState>.
*/ */
// edgeState: mxCellState; edgeState: mxCellState | null = null;
edgeState = null;
/** /**
* Variable: changeHandler * Variable: changeHandler
@ -396,7 +381,6 @@ class mxConnectionHandler extends mxEventSource {
* Counts the number of mouseDown events since the start. The initial mouse * Counts the number of mouseDown events since the start. The initial mouse
* down event counts as 1. * down event counts as 1.
*/ */
// mouseDownCounter: number;
mouseDownCounter = 0; mouseDownCounter = 0;
/** /**
@ -406,7 +390,6 @@ class mxConnectionHandler extends mxEventSource {
* where the preview cannot be made transparent to events and if the built-in hit detection on * where the preview cannot be made transparent to events and if the built-in hit detection on
* the HTML elements in the page should be used. Default is the value of <mxClient.IS_VML>. * the HTML elements in the page should be used. Default is the value of <mxClient.IS_VML>.
*/ */
// movePreviewAway: boolean;
movePreviewAway = false; movePreviewAway = false;
/** /**
@ -416,7 +399,6 @@ class mxConnectionHandler extends mxEventSource {
* enabled. This will allow to place the connection point along the outline of * enabled. This will allow to place the connection point along the outline of
* the highlighted target. Default is false. * the highlighted target. Default is false.
*/ */
// outlineConnect: boolean;
outlineConnect = false; outlineConnect = false;
/** /**
@ -425,7 +407,6 @@ class mxConnectionHandler extends mxEventSource {
* Specifies if the actual shape of the edge state should be used for the preview. * Specifies if the actual shape of the edge state should be used for the preview.
* Default is false. (Ignored if no edge state is created in <createEdgeState>.) * Default is false. (Ignored if no edge state is created in <createEdgeState>.)
*/ */
// livePreview: boolean;
livePreview = false; livePreview = false;
/** /**
@ -442,16 +423,16 @@ class mxConnectionHandler extends mxEventSource {
* Specifies if new edges should be inserted before the source vertex in the * Specifies if new edges should be inserted before the source vertex in the
* cell hierarchy. Default is false for backwards compatibility. * cell hierarchy. Default is false for backwards compatibility.
*/ */
// insertBeforeSource: boolean;
insertBeforeSource = false; insertBeforeSource = false;
escapeHandler: () => void;
/** /**
* Function: isEnabled * Function: isEnabled
* *
* Returns true if events are handled. This implementation * Returns true if events are handled. This implementation
* returns <enabled>. * returns <enabled>.
*/ */
// isEnabled(): boolean;
isEnabled() { isEnabled() {
return this.enabled; return this.enabled;
} }
@ -466,8 +447,7 @@ class mxConnectionHandler extends mxEventSource {
* *
* enabled - Boolean that specifies the new enabled state. * enabled - Boolean that specifies the new enabled state.
*/ */
// setEnabled(enabled: boolean): void; setEnabled(enabled: boolean) {
setEnabled(enabled) {
this.enabled = enabled; this.enabled = enabled;
} }
@ -485,8 +465,13 @@ class mxConnectionHandler extends mxEventSource {
* dropTarget - <mxCell> that represents the cell under the mouse when it was * dropTarget - <mxCell> that represents the cell under the mouse when it was
* released. * released.
*/ */
// isInsertBefore(edge: mxCell, source: mxCell, target: mxCell, evt: MouseEvent, dropTarget: mxCell): boolean; isInsertBefore(
isInsertBefore(edge, source, target, evt, dropTarget) { edge: mxCell,
source: mxCell,
target: mxCell,
evt: MouseEvent,
dropTarget: mxCell
) {
return this.insertBeforeSource && source !== target; return this.insertBeforeSource && source !== target;
} }
@ -499,8 +484,7 @@ class mxConnectionHandler extends mxEventSource {
* *
* evt - Current active native pointer event. * evt - Current active native pointer event.
*/ */
// isCreateTarget(evt: Event): boolean; isCreateTarget(evt: Event) {
isCreateTarget(evt) {
return this.createTarget; return this.createTarget;
} }
@ -509,8 +493,7 @@ class mxConnectionHandler extends mxEventSource {
* *
* Sets <createTarget>. * Sets <createTarget>.
*/ */
// setCreateTarget(value: boolean): void; setCreateTarget(value: boolean) {
setCreateTarget(value) {
this.createTarget = value; this.createTarget = value;
} }
@ -519,19 +502,21 @@ class mxConnectionHandler extends mxEventSource {
* *
* Creates the preview shape for new connections. * Creates the preview shape for new connections.
*/ */
// createShape(): mxShape;
createShape() { createShape() {
// Creates the edge preview // Creates the edge preview
const shape = const shape =
this.livePreview && this.edgeState != null this.livePreview && this.edgeState
? this.graph.cellRenderer.createShape(this.edgeState) ? this.graph.cellRenderer.createShape(this.edgeState)
: new mxPolyline([], INVALID_COLOR); : new mxPolyline([], INVALID_COLOR);
if (shape && shape.node) {
shape.dialect = DIALECT_SVG; shape.dialect = DIALECT_SVG;
shape.scale = this.graph.view.scale; shape.scale = this.graph.view.scale;
shape.pointerEvents = false; shape.pointerEvents = false;
shape.isDashed = true; shape.isDashed = true;
shape.init(this.graph.getView().getOverlayPane()); shape.init(this.graph.getView().getOverlayPane());
mxEvent.redirectMouseEvents(shape.node, this.graph, null); mxEvent.redirectMouseEvents(shape.node, this.graph, null);
}
return shape; return shape;
} }
@ -589,8 +574,7 @@ class mxConnectionHandler extends mxEventSource {
* Returns true if the given cell is connectable. This is a hook to * Returns true if the given cell is connectable. This is a hook to
* disable floating connections. This implementation returns true. * disable floating connections. This implementation returns true.
*/ */
// isConnectableCell(cell: mxCell): boolean; isConnectableCell(cell: mxCell) {
isConnectableCell(cell) {
return true; return true;
} }
@ -599,7 +583,6 @@ class mxConnectionHandler extends mxEventSource {
* *
* Creates and returns the <mxCellMarker> used in <marker>. * Creates and returns the <mxCellMarker> used in <marker>.
*/ */
// createMarker(): mxCellMarker;
createMarker() { createMarker() {
const self = this; const self = this;
@ -927,7 +910,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 +1548,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 +1673,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;

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

@ -9,6 +9,7 @@ import {
getBoundingBox, getBoundingBox,
getDirectedBounds, getDirectedBounds,
getValue, getValue,
isNotNullish,
mod, mod,
} from '../util/mxUtils'; } from '../util/mxUtils';
import { import {
@ -21,14 +22,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';
@ -37,7 +30,14 @@ import mxClient from '../mxClient';
import mxCellState from '../view/cell/mxCellState'; import mxCellState from '../view/cell/mxCellState';
import mxStencil from './node/mxStencil'; import mxStencil from './node/mxStencil';
import mxCellOverlay from '../view/cell/mxCellOverlay'; import mxCellOverlay from '../view/cell/mxCellOverlay';
import { CellStateStyles } from '../types';
import type {
CellStateStyles,
ColorValue,
DirectionValue,
GradientMap,
} from '../types';
import mxImage from '../util/image/mxImage';
const toBool = (i: any) => { const toBool = (i: any) => {
if (i === 0) return false; if (i === 0) return false;
@ -89,7 +89,7 @@ const toBool = (i: any) => {
* @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 {
@ -109,7 +109,6 @@ class mxShape {
* *
* container - DOM node that will contain the shape. * container - DOM node that will contain the shape.
*/ */
// init(container: Element): void;
init(container: SVGElement | null = null) { init(container: SVGElement | null = null) {
if (!this.node) { if (!this.node) {
this.node = this.create(); this.node = this.create();
@ -171,7 +170,7 @@ class mxShape {
endArrow: string | null = null; endArrow: string | null = null;
direction: string | null = null; direction: DirectionValue | null = null;
flipH = false; flipH = false;
@ -187,7 +186,7 @@ class mxShape {
verticalTextRotation: number | null = null; verticalTextRotation: number | null = null;
oldGradients: any[] | null = null; oldGradients: GradientMap = {};
glass = false; glass = false;
@ -333,6 +332,16 @@ class mxShape {
*/ */
useSvgBoundingBox = true; useSvgBoundingBox = true;
image: mxImage | null = null;
indicatorColor: ColorValue = null;
indicatorStrokeColor: ColorValue = null;
indicatorGradientColor: ColorValue = null;
indicatorDirection: DirectionValue = null;
/** /**
* Function: isHtmlAllowed * Function: isHtmlAllowed
* *
@ -352,7 +361,7 @@ class mxShape {
const sw = const sw =
this.stencil && this.stencil.strokewidth !== 'inherit' this.stencil && this.stencil.strokewidth !== 'inherit'
? Number(this.stencil.strokewidth) ? Number(this.stencil.strokewidth)
: <number>this.strokewidth; : this.strokewidth ?? 0;
return mod(Math.max(1, Math.round(sw * this.scale)), 2) === 1 ? 0.5 : 0; return mod(Math.max(1, Math.round(sw * this.scale)), 2) === 1 ? 0.5 : 0;
} }
@ -390,6 +399,7 @@ class mxShape {
*/ */
redraw() { redraw() {
if (!this.node) return; if (!this.node) return;
this.updateBoundsFromPoints(); this.updateBoundsFromPoints();
if (this.visible && this.checkBounds()) { if (this.visible && this.checkBounds()) {
@ -450,7 +460,7 @@ class mxShape {
* change the rectangle in-place. This implementation returns the given rect. * change the rectangle in-place. This implementation returns the given rect.
*/ */
getLabelBounds(rect: mxRectangle) { getLabelBounds(rect: mxRectangle) {
const d = getValue(this.style, STYLE_DIRECTION, DIRECTION_EAST); const d = getValue(this.style, 'direction', DIRECTION_EAST);
let bounds = rect.clone(); let bounds = rect.clone();
// Normalizes argument for getLabelMargins hook // Normalizes argument for getLabelMargins hook
@ -470,8 +480,8 @@ class mxShape {
if (labelMargins) { if (labelMargins) {
labelMargins = labelMargins.clone(); labelMargins = labelMargins.clone();
let flipH = toBool(getValue(this.style, STYLE_FLIPH, false)); let flipH = toBool(getValue(this.style, 'flipH', false));
let flipV = toBool(getValue(this.style, STYLE_FLIPV, false)); let flipV = toBool(getValue(this.style, 'flipV', false));
// Handles special case for vertical labels // Handles special case for vertical labels
if ( if (
@ -529,7 +539,7 @@ class mxShape {
* *
* Updates the SVG or VML shape. * Updates the SVG or VML shape.
*/ */
redrawShape(): void { redrawShape() {
if (!this.node) return; if (!this.node) return;
const canvas = this.createCanvas(); const canvas = this.createCanvas();
@ -584,27 +594,29 @@ class mxShape {
* Creates and returns an <mxSvgCanvas2D> for rendering this shape. * Creates and returns an <mxSvgCanvas2D> for rendering this shape.
*/ */
createSvgCanvas() { createSvgCanvas() {
if (!this.node) return null;
const canvas = new mxSvgCanvas2D(this.node, false); const canvas = new mxSvgCanvas2D(this.node, false);
canvas.strokeTolerance = this.pointerEvents ? this.svgStrokeTolerance : 0; canvas.strokeTolerance = this.pointerEvents ? this.svgStrokeTolerance : 0;
canvas.pointerEventsValue = this.svgPointerEvents; canvas.pointerEventsValue = this.svgPointerEvents;
const off = this.getSvgScreenOffset(); const off = this.getSvgScreenOffset();
if (this.node) {
if (off !== 0) { if (off !== 0) {
this.node.setAttribute('transform', `translate(${off},${off})`); this.node.setAttribute('transform', `translate(${off},${off})`);
} else { } else {
this.node.removeAttribute('transform'); this.node.removeAttribute('transform');
} }
}
canvas.minStrokeWidth = this.minSvgStrokeWidth; canvas.minStrokeWidth = this.minSvgStrokeWidth;
if (!this.antiAlias) { if (!this.antiAlias) {
// Rounds all numbers in the SVG output to integers // Rounds all numbers in the SVG output to integers
canvas.format = (value) => { canvas.format = (value) => {
return Math.round(parseFloat(value)); return Math.round(value);
}; };
} }
return canvas; return canvas;
} }
@ -651,7 +663,7 @@ class mxShape {
paint(c: mxSvgCanvas2D) { paint(c: mxSvgCanvas2D) {
let strokeDrawn = false; let strokeDrawn = false;
if (c != null && this.outline) { if (c && this.outline) {
const { stroke } = c; const { stroke } = c;
c.stroke = (...args) => { c.stroke = (...args) => {
@ -669,7 +681,9 @@ class mxShape {
// Scale is passed-through to canvas // Scale is passed-through to canvas
const s = this.scale; const s = this.scale;
const bounds = <mxRectangle>this.bounds; const bounds = this.bounds;
if (bounds) {
let x = bounds.x / s; let x = bounds.x / s;
let y = bounds.y / s; let y = bounds.y / s;
let w = bounds.width / s; let w = bounds.width / s;
@ -691,30 +705,39 @@ class mxShape {
let bg = null; let bg = null;
if ( if (
(this.stencil == null && (!this.stencil &&
this.points == null && this.points.length === 0 &&
this.shapePointerEvents) || this.shapePointerEvents) ||
(this.stencil != null && this.stencilPointerEvents) (this.stencil && this.stencilPointerEvents)
) { ) {
const bb = this.createBoundingBox(); const bb = this.createBoundingBox();
bg = this.createTransparentSvgRectangle(bb.x, bb.y, bb.width, bb.height);
(<SVGGElement>this.node).appendChild(bg); if (bb && this.node) {
bg = this.createTransparentSvgRectangle(
bb.x,
bb.y,
bb.width,
bb.height
);
this.node.appendChild(bg);
}
} }
if (this.stencil != null) { if (this.stencil) {
this.stencil.drawShape(c, this, x, y, w, h); this.stencil.drawShape(c, this, x, y, w, h);
} else { } else {
// Stencils have separate strokewidth // Stencils have separate strokewidth
c.setStrokeWidth(this.strokewidth); c.setStrokeWidth(this.strokewidth);
if (this.points != null) { if (this.points.length > 0) {
// Paints edge shape // Paints edge shape
const pts = []; const pts = [];
for (let i = 0; i < this.points.length; i += 1) { for (let i = 0; i < this.points.length; i += 1) {
if (this.points[i] != null) { const p = this.points[i];
// @ts-ignore
pts.push(new mxPoint(this.points[i].x / s, this.points[i].y / s)); if (p) {
pts.push(new mxPoint(p.x / s, p.y / s));
} }
} }
@ -725,16 +748,17 @@ class mxShape {
} }
} }
if (bg != null && c.state != null && c.state.transform != null) { if (bg && c.state && isNotNullish(c.state.transform)) {
bg.setAttribute('transform', c.state.transform); bg.setAttribute('transform', <string>c.state.transform);
} }
// Draws highlight rectangle if no stroke was used // Draws highlight rectangle if no stroke was used
if (c != null && this.outline && !strokeDrawn) { if (c && this.outline && !strokeDrawn) {
c.rect(x, y, w, h); c.rect(x, y, w, h);
c.stroke(); c.stroke();
} }
} }
}
/** /**
* Sets the state of the canvas for drawing the shape. * Sets the state of the canvas for drawing the shape.
@ -767,7 +791,7 @@ class mxShape {
c.setDashed( c.setDashed(
this.isDashed, this.isDashed,
this.style != null this.style != null
? toBool(getValue(this.style, STYLE_FIX_DASH, false)) ? toBool(getValue(this.style, 'fixDash', false))
: false : false
); );
} }
@ -859,7 +883,7 @@ class mxShape {
if ( if (
!this.outline || !this.outline ||
this.style == null || this.style == null ||
toBool(getValue(this.style, STYLE_BACKGROUND_OUTLINE, 0) === false) toBool(getValue(this.style, 'backgroundOutline', 0) === false)
) { ) {
c.setShadow(false); c.setShadow(false);
this.paintForeground(c, x, y, w, h); this.paintForeground(c, x, y, w, h);
@ -909,16 +933,15 @@ class mxShape {
getArcSize(w: number, h: number): number { getArcSize(w: number, h: number): number {
let r = 0; let r = 0;
if (toBool(getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0))) { if (toBool(getValue(this.style, 'absoluteArcSize', 0))) {
r = Math.min( r = Math.min(
w / 2, w / 2,
Math.min(h / 2, getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2) Math.min(h / 2, getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2)
); );
} else { } else {
const f = parseFloat( const f = parseFloat(
String( String(
getValue(this.style, STYLE_ARCSIZE, RECTANGLE_ROUNDING_FACTOR * 100) / getValue(this.style, 'arcSize', RECTANGLE_ROUNDING_FACTOR * 100) / 100
100
) )
); );
r = Math.min(w * f, h * f); r = Math.min(w * f, h * f);
@ -939,8 +962,8 @@ class mxShape {
w: number, w: number,
h: number, h: number,
arc: number arc: number
): void { ) {
const sw = Math.ceil(<number>this.strokewidth / 2); const sw = Math.ceil((this.strokewidth ?? 0) / 2);
const size = 0.4; const size = 0.4;
c.setGradient('#ffffff', '#ffffff', x, y, w, h * 0.6, 'south', 0.9, 0.1); c.setGradient('#ffffff', '#ffffff', x, y, w, h * 0.6, 'south', 0.9, 0.1);
@ -972,14 +995,14 @@ class mxShape {
*/ */
addPoints( addPoints(
c: mxSvgCanvas2D, c: mxSvgCanvas2D,
pts: mxPoint[] | null = null, pts: mxPoint[],
rounded: boolean = false, rounded: boolean = false,
arcSize: number, arcSize: number,
close: boolean = false, close: boolean = false,
exclude: number[] | null = null, exclude: number[] = [],
initialMove: boolean = true initialMove: boolean = true
) { ) {
if (pts != null && pts.length > 0) { if (pts.length > 0) {
const pe = pts[pts.length - 1]; const pe = pts[pts.length - 1];
// Adds virtual waypoint in the center between start and end point // Adds virtual waypoint in the center between start and end point
@ -1008,11 +1031,7 @@ class mxShape {
let dx = pt.x - tmp.x; let dx = pt.x - tmp.x;
let dy = pt.y - tmp.y; let dy = pt.y - tmp.y;
if ( if (rounded && (dx !== 0 || dy !== 0) && exclude.indexOf(i - 1) < 0) {
rounded &&
(dx !== 0 || dy !== 0) &&
(exclude == null || exclude.indexOf(i - 1) < 0)
) {
// Draws a line from the last point to the current // Draws a line from the last point to the current
// point with a spacing of size off the current point // point with a spacing of size off the current point
// into direction of the last point // into direction of the last point
@ -1072,7 +1091,6 @@ class mxShape {
* *
* Resets all styles. * Resets all styles.
*/ */
// resetStyles(): void;
resetStyles() { resetStyles() {
this.initStyles(); this.initStyles();
@ -1100,25 +1118,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
@ -1129,19 +1147,19 @@ class mxShape {
* *
* state - <mxCellState> of the corresponding cell. * state - <mxCellState> of the corresponding cell.
*/ */
// apply(state: mxCellState): void;
apply(state: mxCellState) { apply(state: mxCellState) {
this.state = state; this.state = state;
this.style = state.style; this.style = state.style;
const ifNotNullElse = (value1: any, default_: any): any => { const ifNotNullElse = (value: any, defaultValue: any) => {
if (value1 != null) { if (isNotNullish(value)) {
return value1; return value;
} }
return default_;
return defaultValue;
}; };
if (this.style != null) { if (this.style) {
this.fill = ifNotNullElse(this.style.fillColor, this.fill); this.fill = ifNotNullElse(this.style.fillColor, this.fill);
this.gradient = ifNotNullElse(this.style.gradientColor, this.gradient); this.gradient = ifNotNullElse(this.style.gradientColor, this.gradient);
this.gradientDirection = ifNotNullElse( this.gradientDirection = ifNotNullElse(
@ -1174,7 +1192,7 @@ class mxShape {
this.flipV = toBool(ifNotNullElse(this.style.flipV, 0)); this.flipV = toBool(ifNotNullElse(this.style.flipV, 0));
// Legacy support for stencilFlipH/V // Legacy support for stencilFlipH/V
if (this.stencil != null) { if (this.stencil) {
this.flipH = toBool( this.flipH = toBool(
ifNotNullElse(this.style.stencilFlipH, this.flipH || 0) ifNotNullElse(this.style.stencilFlipH, this.flipH || 0)
); );
@ -1220,13 +1238,10 @@ class mxShape {
* *
* cursor - The cursor to be used. * cursor - The cursor to be used.
*/ */
// setCursor(cursor: string): void; setCursor(cursor: string) {
setCursor(cursor: string | null = null): void {
if (cursor == null) {
cursor = '';
}
this.cursor = cursor; this.cursor = cursor;
if (this.node != null) {
if (this.node) {
this.node.style.cursor = cursor; this.node.style.cursor = cursor;
} }
} }
@ -1236,22 +1251,14 @@ class mxShape {
* *
* Returns the current cursor. * Returns the current cursor.
*/ */
// getCursor(): string; getCursor() {
getCursor(): string { return this.cursor;
return <string>this.cursor;
} }
/** /**
* Hook for subclassers. * Hook for subclassers.
*/ */
// isRoundable(): boolean; isRoundable(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number) {
isRoundable(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number
): boolean {
return false; return false;
} }
@ -1261,15 +1268,10 @@ class mxShape {
* Updates the <boundingBox> for this shape using <createBoundingBox> and * Updates the <boundingBox> for this shape using <createBoundingBox> and
* <augmentBoundingBox> and stores the result in <boundingBox>. * <augmentBoundingBox> and stores the result in <boundingBox>.
*/ */
// updateBoundingBox(): void;
updateBoundingBox() { updateBoundingBox() {
// Tries to get bounding box from SVG subsystem // Tries to get bounding box from SVG subsystem
// LATER: Use getBoundingClientRect for fallback in VML // LATER: Use getBoundingClientRect for fallback in VML
if ( if (this.useSvgBoundingBox && this.node && this.node.ownerSVGElement) {
this.useSvgBoundingBox &&
this.node != null &&
this.node.ownerSVGElement != null
) {
try { try {
const b = this.node.getBBox(); const b = this.node.getBBox();
@ -1277,7 +1279,7 @@ class mxShape {
this.boundingBox = new mxRectangle(b.x, b.y, b.width, b.height); this.boundingBox = new mxRectangle(b.x, b.y, b.width, b.height);
// Adds strokeWidth // Adds strokeWidth
this.boundingBox.grow((<number>this.strokewidth * this.scale) / 2); this.boundingBox.grow(((this.strokewidth ?? 0) * this.scale) / 2);
return; return;
} }
@ -1286,10 +1288,10 @@ class mxShape {
} }
} }
if (this.bounds != null) { if (this.bounds) {
let bbox: mxRectangle | null = this.createBoundingBox(); let bbox = this.createBoundingBox();
if (bbox != null) { if (bbox) {
this.augmentBoundingBox(bbox); this.augmentBoundingBox(bbox);
const rot = this.getShapeRotation(); const rot = this.getShapeRotation();
@ -1297,6 +1299,7 @@ class mxShape {
bbox = getBoundingBox(bbox, rot); bbox = getBoundingBox(bbox, rot);
} }
} }
this.boundingBox = bbox; this.boundingBox = bbox;
} }
} }
@ -1307,31 +1310,32 @@ class mxShape {
* Returns a new rectangle that represents the bounding box of the bare shape * Returns a new rectangle that represents the bounding box of the bare shape
* with no shadows or strokewidths. * with no shadows or strokewidths.
*/ */
// createBoundingBox(): mxRectangle;
createBoundingBox() { createBoundingBox() {
const bb = (<mxRectangle>this.bounds).clone(); if (!this.bounds) return null;
const bb = this.bounds.clone();
if ( if (
(this.stencil != null && (this.stencil &&
(this.direction === DIRECTION_NORTH || (this.direction === DIRECTION_NORTH ||
this.direction === DIRECTION_SOUTH)) || this.direction === DIRECTION_SOUTH)) ||
this.isPaintBoundsInverted() this.isPaintBoundsInverted()
) { ) {
bb.rotate90(); bb.rotate90();
} }
return bb; return bb;
} }
/** /**
* Augments the bounding box with the strokewidth and shadow offsets. * Augments the bounding box with the strokewidth and shadow offsets.
*/ */
// augmentBoundingBox(bbox: mxRectangle): void; augmentBoundingBox(bbox: mxRectangle) {
augmentBoundingBox(bbox: mxRectangle): void {
if (this.isShadow) { if (this.isShadow) {
bbox.width += Math.ceil(SHADOW_OFFSET_X * this.scale); bbox.width += Math.ceil(SHADOW_OFFSET_X * this.scale);
bbox.height += Math.ceil(SHADOW_OFFSET_Y * this.scale); bbox.height += Math.ceil(SHADOW_OFFSET_Y * this.scale);
} }
// Adds strokeWidth // Adds strokeWidth
bbox.grow((<number>this.strokewidth * this.scale) / 2); bbox.grow(((this.strokewidth ?? 0) * this.scale) / 2);
} }
/** /**
@ -1339,11 +1343,10 @@ class mxShape {
* *
* Returns true if the bounds should be inverted. * Returns true if the bounds should be inverted.
*/ */
// isPaintBoundsInverted(): boolean; isPaintBoundsInverted() {
isPaintBoundsInverted(): boolean {
// Stencil implements inversion via aspect // Stencil implements inversion via aspect
return ( return (
this.stencil == null && !this.stencil &&
(this.direction === DIRECTION_NORTH || this.direction === DIRECTION_SOUTH) (this.direction === DIRECTION_NORTH || this.direction === DIRECTION_SOUTH)
); );
} }
@ -1353,9 +1356,8 @@ class mxShape {
* *
* Returns the rotation from the style. * Returns the rotation from the style.
*/ */
// getRotation(): number; getRotation() {
getRotation(): number { return this.rotation;
return this.rotation != null ? this.rotation : 0;
} }
/** /**
@ -1363,12 +1365,13 @@ class mxShape {
* *
* Returns the rotation for the text label. * Returns the rotation for the text label.
*/ */
// getTextRotation(): number; getTextRotation() {
getTextRotation(): number {
let rot = this.getRotation(); let rot = this.getRotation();
if (!toBool(getValue(this.style, STYLE_HORIZONTAL, 1))) {
if (!toBool(getValue(this.style, 'horizontal', 1))) {
rot += this.verticalTextRotation || -90; // WARNING WARNING!!!! =============================================================================================== rot += this.verticalTextRotation || -90; // WARNING WARNING!!!! ===============================================================================================
} }
return rot; return rot;
} }
@ -1377,10 +1380,10 @@ class mxShape {
* *
* Returns the actual rotation of the shape. * Returns the actual rotation of the shape.
*/ */
// getShapeRotation(): number; getShapeRotation() {
getShapeRotation(): number {
let rot = this.getRotation(); let rot = this.getRotation();
if (this.direction != null) {
if (this.direction) {
if (this.direction === DIRECTION_NORTH) { if (this.direction === DIRECTION_NORTH) {
rot += 270; rot += 270;
} else if (this.direction === DIRECTION_WEST) { } else if (this.direction === DIRECTION_WEST) {
@ -1389,6 +1392,7 @@ class mxShape {
rot += 90; rot += 90;
} }
} }
return rot; return rot;
} }
@ -1397,13 +1401,7 @@ class mxShape {
* *
* Adds a transparent rectangle that catches all events. * Adds a transparent rectangle that catches all events.
*/ */
// createTransparentSvgRectangle(x: number, y: number, w: number, h: number): Element; createTransparentSvgRectangle(x: number, y: number, w: number, h: number) {
createTransparentSvgRectangle(
x: number,
y: number,
w: number,
h: number
): SVGElement {
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', String(x)); rect.setAttribute('x', String(x));
rect.setAttribute('y', String(y)); rect.setAttribute('y', String(y));
@ -1422,8 +1420,7 @@ class mxShape {
* *
* Paints the line shape. * Paints the line shape.
*/ */
// setTransparentBackgroundImage(node: Element): void; setTransparentBackgroundImage(node: SVGElement) {
setTransparentBackgroundImage(node: SVGElement): void {
node.style.backgroundImage = `url('${mxClient.imageBasePath}/transparent.gif')`; node.style.backgroundImage = `url('${mxClient.imageBasePath}/transparent.gif')`;
} }
@ -1432,22 +1429,19 @@ class mxShape {
* *
* Paints the line shape. * Paints the line shape.
*/ */
// releaseSvgGradients(grads: any[]): void; releaseSvgGradients(grads: GradientMap) {
releaseSvgGradients(grads: any): void {
if (grads != null) {
for (const key in grads) { for (const key in grads) {
const gradient = grads[key]; const gradient = grads[key];
if (gradient != null) { if (gradient) {
gradient.mxRefCount = (gradient.mxRefCount || 0) - 1; gradient.mxRefCount = (gradient.mxRefCount || 0) - 1;
if (gradient.mxRefCount === 0 && gradient.parentNode != null) { if (gradient.mxRefCount === 0 && gradient.parentNode) {
gradient.parentNode.removeChild(gradient); gradient.parentNode.removeChild(gradient);
} }
} }
} }
} }
}
/** /**
* Function: destroy * Function: destroy
@ -1455,20 +1449,20 @@ class mxShape {
* Destroys the shape by removing it from the DOM and releasing the DOM * Destroys the shape by removing it from the DOM and releasing the DOM
* node associated with the shape using <mxEvent.release>. * node associated with the shape using <mxEvent.release>.
*/ */
// destroy(): void; destroy() {
destroy(): void { if (this.node) {
if (this.node != null) {
mxEvent.release(this.node); mxEvent.release(this.node);
if (this.node.parentNode != null) { if (this.node.parentNode) {
this.node.parentNode.removeChild(this.node); this.node.parentNode.removeChild(this.node);
} }
this.node = null; this.node = null;
} }
// Decrements refCount and removes unused // Decrements refCount and removes unused
this.releaseSvgGradients(this.oldGradients); this.releaseSvgGradients(this.oldGradients);
this.oldGradients = null; this.oldGradients = {};
} }
} }

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,

118
packages/core/src/shape/node/mxStencil.js → packages/core/src/shape/node/mxStencil.ts
View File

@ -9,22 +9,18 @@ import mxConnectionConstraint from '../../view/connection/mxConnectionConstraint
import mxRectangle from '../../util/datatypes/mxRectangle'; import mxRectangle from '../../util/datatypes/mxRectangle';
import mxShape from '../mxShape'; import mxShape from '../mxShape';
import mxResources from '../../util/mxResources'; import mxResources from '../../util/mxResources';
import mxUtils from '../../util/mxUtils'; import mxUtils, { getNumber, getValue, isNotNullish } from '../../util/mxUtils';
import { import {
DIRECTION_NORTH, DIRECTION_NORTH,
DIRECTION_SOUTH, DIRECTION_SOUTH,
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';
import mxPoint from '../../util/datatypes/mxPoint';
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
/** /**
* Implements a generic shape which is based on a XML node as a description. * Implements a generic shape which is based on a XML node as a description.
@ -32,7 +28,7 @@ import { getChildNodes, getTextContent } from '../../util/mxDomUtils';
* @class mxStencil * @class mxStencil
*/ */
class mxStencil extends mxShape { class mxStencil extends mxShape {
constructor(desc) { constructor(desc: Element) {
super(); super();
this.desc = desc; this.desc = desc;
this.parseDescription(); this.parseDescription();
@ -45,8 +41,7 @@ class mxStencil extends mxShape {
* Static global variable that specifies the default value for the localized * Static global variable that specifies the default value for the localized
* attribute of the text element. Default is false. * attribute of the text element. Default is false.
*/ */
// defaultLocalized: boolean; static defaultLocalized = false;
defaultLocalized = false;
/** /**
* Function: allowEval * Function: allowEval
@ -55,48 +50,42 @@ class mxStencil extends mxShape {
* evaluating text content and images. Default is false. Set this to true * evaluating text content and images. Default is false. Set this to true
* if stencils can not contain user input. * if stencils can not contain user input.
*/ */
// allowEval: boolean; static allowEval = false;
allowEval = false;
/** /**
* Variable: desc * Variable: desc
* *
* Holds the XML node with the stencil description. * Holds the XML node with the stencil description.
*/ */
// desc: Element; desc: Element;
desc = null;
/** /**
* Variable: constraints * Variable: constraints
* *
* Holds an array of <mxConnectionConstraints> as defined in the shape. * Holds an array of <mxConnectionConstraints> as defined in the shape.
*/ */
// constraints: mxConnectionConstraint[]; constraints: mxConnectionConstraint[] = [];
constraints = null;
/** /**
* Variable: aspect * Variable: aspect
* *
* Holds the aspect of the shape. Default is 'auto'. * Holds the aspect of the shape. Default is 'auto'.
*/ */
// aspect: string; aspect = 'auto';
aspect = null;
/** /**
* Variable: w0 * Variable: w0
* *
* Holds the width of the shape. Default is 100. * Holds the width of the shape. Default is 100.
*/ */
// w0: number; w0 = 100;
w0 = null;
/** /**
* Variable: h0 * Variable: h0
* *
* Holds the height of the shape. Default is 100. * Holds the height of the shape. Default is 100.
*/ */
// h0: number; h0 = 100;
h0 = null;
/** /**
* Variable: bgNodes * Variable: bgNodes
@ -104,30 +93,27 @@ class mxStencil extends mxShape {
* Holds the XML node with the stencil description. * Holds the XML node with the stencil description.
*/ */
// bgNode: Element; // bgNode: Element;
bgNode = null; bgNode: Element | null = null;
/** /**
* Variable: fgNodes * Variable: fgNodes
* *
* Holds the XML node with the stencil description. * Holds the XML node with the stencil description.
*/ */
// fgNode: Element; fgNode: Element | null = null;
fgNode = null;
/** /**
* Variable: strokewidth * Variable: strokewidth
* *
* Holds the strokewidth direction from the description. * Holds the strokewidth direction from the description.
*/ */
// strokewidth: number; strokeWidth: string | null = null;
strokewidth = null;
/** /**
* Function: parseDescription * Function: parseDescription
* *
* Reads <w0>, <h0>, <aspect>, <bgNodes> and <fgNodes> from <desc>. * Reads <w0>, <h0>, <aspect>, <bgNodes> and <fgNodes> from <desc>.
*/ */
// parseDescription(): void;
parseDescription() { parseDescription() {
// LATER: Preprocess nodes for faster painting // LATER: Preprocess nodes for faster painting
this.fgNode = this.desc.getElementsByTagName('foreground')[0]; this.fgNode = this.desc.getElementsByTagName('foreground')[0];
@ -139,14 +125,14 @@ class mxStencil extends mxShape {
// variable means fill the available space and fixed means // variable means fill the available space and fixed means
// use w0 and h0 to compute the aspect. // use w0 and h0 to compute the aspect.
const aspect = this.desc.getAttribute('aspect'); const aspect = this.desc.getAttribute('aspect');
this.aspect = aspect != null ? aspect : 'variable'; this.aspect = aspect ?? 'variable';
// Possible values for strokewidth are all numbers and "inherit" // Possible values for strokewidth are all numbers and "inherit"
// where the inherit means take the value from the style (ie. the // where the inherit means take the value from the style (ie. the
// user-defined stroke-width). Note that the strokewidth is scaled // user-defined stroke-width). Note that the strokewidth is scaled
// by the minimum scaling that is used to draw the shape (sx, sy). // by the minimum scaling that is used to draw the shape (sx, sy).
const sw = this.desc.getAttribute('strokewidth'); const sw = this.desc.getAttribute('strokewidth');
this.strokewidth = sw != null ? sw : '1'; this.strokeWidth = isNotNullish(sw) ? sw : '1';
} }
/** /**
@ -155,7 +141,6 @@ class mxStencil extends mxShape {
* Reads the constraints from <desc> into <constraints> using * Reads the constraints from <desc> into <constraints> using
* <parseConstraint>. * <parseConstraint>.
*/ */
// parseConstraints(): void;
parseConstraints() { parseConstraints() {
const conns = this.desc.getElementsByTagName('connections')[0]; const conns = this.desc.getElementsByTagName('connections')[0];
@ -177,8 +162,7 @@ class mxStencil extends mxShape {
* *
* Parses the given XML node and returns its <mxConnectionConstraint>. * Parses the given XML node and returns its <mxConnectionConstraint>.
*/ */
// parseConstraint(node: Element): void; parseConstraint(node: Element) {
parseConstraint(node) {
const x = Number(node.getAttribute('x')); const x = Number(node.getAttribute('x'));
const y = Number(node.getAttribute('y')); const y = Number(node.getAttribute('y'));
const perimeter = node.getAttribute('perimeter') == '1'; const perimeter = node.getAttribute('perimeter') == '1';
@ -194,8 +178,7 @@ class mxStencil extends mxShape {
* is used as a key to <mxResources.get> if the localized attribute in the text * is used as a key to <mxResources.get> if the localized attribute in the text
* node is 1 or if <defaultLocalized> is true. * node is 1 or if <defaultLocalized> is true.
*/ */
// evaluateTextAttribute(node: string, attribute: string, shape: string): string; evaluateTextAttribute(node: Element, attribute: string, shape: mxShape) {
evaluateTextAttribute(node, attribute, shape) {
let result = this.evaluateAttribute(node, attribute, shape); let result = this.evaluateAttribute(node, attribute, shape);
const loc = node.getAttribute('localized'); const loc = node.getAttribute('localized');
@ -214,8 +197,7 @@ class mxStencil extends mxShape {
* a function it is invoked with <shape> as the only argument and the return * a function it is invoked with <shape> as the only argument and the return
* value is used as the attribute value to be returned. * value is used as the attribute value to be returned.
*/ */
// evaluateAttribute(node: string, attribute: string, shape: string): string; evaluateAttribute(node: Element, attribute: string, shape: mxShape) {
evaluateAttribute(node, attribute, shape) {
let result = node.getAttribute(attribute); let result = node.getAttribute(attribute);
if (result == null) { if (result == null) {
@ -238,8 +220,14 @@ class mxStencil extends mxShape {
* *
* Draws this stencil inside the given bounds. * Draws this stencil inside the given bounds.
*/ */
// drawShape(canvas: mxAbstractCanvas2D, shape: string, x: number, y: number, w: number, h: number): void; drawShape(
drawShape(canvas, shape, x, y, w, h) { canvas: mxSvgCanvas2D,
shape: mxShape,
x: number,
y: number,
w: number,
h: number
) {
const stack = canvas.states.slice(); const stack = canvas.states.slice();
// TODO: Internal structure (array of special structs?), relative and absolute // TODO: Internal structure (array of special structs?), relative and absolute
@ -248,19 +236,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 = getValue(shape.style, 'direction', null);
const aspect = this.computeAspect(shape.style, x, y, w, h, direction); const aspect = this.computeAspect(shape, 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(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' 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 +280,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 getValue(shape.style, 'backgroundOutline', 0) == 0
); );
// Restores stack for unequal count of save/restore calls // Restores stack for unequal count of save/restore calls
@ -306,7 +294,18 @@ class mxStencil extends mxShape {
* *
* Draws this stencil inside the given bounds. * Draws this stencil inside the given bounds.
*/ */
drawChildren(canvas, shape, x, y, w, h, node, aspect, disableShadow, paint) { drawChildren(
canvas: mxSvgCanvas2D,
shape: mxShape,
x: number,
y: number,
w: number,
h: number,
node: Element | null,
aspect: string,
disableShadow: boolean,
paint: boolean
) {
if (node != null && w > 0 && h > 0) { if (node != null && w > 0 && h > 0) {
let tmp = node.firstChild; let tmp = node.firstChild;
@ -333,8 +332,14 @@ class mxStencil extends mxShape {
* bounds - <mxRectangle> that should contain the stencil. * bounds - <mxRectangle> that should contain the stencil.
* direction - Optional direction of the shape to be darwn. * direction - Optional direction of the shape to be darwn.
*/ */
// computeAspect(shape: string, x: number, y: number, w: number, h: number, direction?: string): mxRectangle; computeAspect(
computeAspect(shape, x, y, w, h, direction) { shape: mxShape,
x: number,
y: number,
w: number,
h: number,
direction?: string
) {
let x0 = x; let x0 = x;
let y0 = y; let y0 = y;
let sx = w / this.w0; let sx = w / this.w0;
@ -375,7 +380,14 @@ class mxStencil extends mxShape {
* *
* Draws this stencil inside the given bounds. * Draws this stencil inside the given bounds.
*/ */
drawNode(canvas, shape, node, aspect, disableShadow, paint) { drawNode(
canvas: mxSvgCanvas2D,
shape: mxShape,
node: Element,
aspect: mxRectangle,
disableShadow: boolean,
paint: boolean
) {
const name = node.nodeName; const name = node.nodeName;
const x0 = aspect.x; const x0 = aspect.x;
const y0 = aspect.y; const y0 = aspect.y;
@ -499,7 +511,7 @@ class mxStencil extends mxShape {
Number(node.getAttribute('rx')) * sx, Number(node.getAttribute('rx')) * sx,
Number(node.getAttribute('ry')) * sy, Number(node.getAttribute('ry')) * sy,
Number(node.getAttribute('x-axis-rotation')), Number(node.getAttribute('x-axis-rotation')),
Number(node.getAttribute('large-arc-flag')), Boolean(node.getAttribute('large-arc-flag')),
Number(node.getAttribute('sweep-flag')), Number(node.getAttribute('sweep-flag')),
x0 + Number(node.getAttribute('x')) * sx, x0 + Number(node.getAttribute('x')) * sx,
y0 + Number(node.getAttribute('y')) * sy y0 + Number(node.getAttribute('y')) * sy
@ -562,8 +574,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 = getValue(shape.style, 'flipH', 0) == 1;
const flipV = mxUtils.getValue(shape.style, STYLE_FLIPV, 0) == 1; const flipV = getValue(shape.style, 'flipV', 0) == 1;
if (flipH && flipV) { if (flipH && flipV) {
rotation -= dr; rotation -= dr;

18
packages/core/src/types.ts
View File

@ -26,17 +26,16 @@ export type CellStateStyles = {
[k: string]: string; [k: string]: string;
}; };
export type ColorInputValue = string | 'none';
export type ColorValue = string | null; export type ColorValue = string | null;
export type DirectionValue = 'north' | 'south' | 'east' | 'west' | null;
export type DirectionValue = 'north' | 'south' | 'east' | 'west';
export type AlignValue = export type AlignValue =
| 'left' | 'left'
| 'center' | 'center'
| 'right' | 'right'
| 'top' | 'top'
| 'middle' | 'middle'
| 'bottom'; | 'bottom'
| null;
export type CanvasState = { export type CanvasState = {
dx: number; dx: number;
@ -51,7 +50,7 @@ export type CanvasState = {
gradientAlpha: number; gradientAlpha: number;
gradientDirection: string | null; gradientDirection: string | null;
strokeColor: ColorValue; strokeColor: ColorValue;
strokeWidth: number; strokeWidth: number | null;
dashed: boolean; dashed: boolean;
dashPattern: string; dashPattern: string;
fixDash: boolean; fixDash: boolean;
@ -72,4 +71,13 @@ export type CanvasState = {
rotation: number; rotation: number;
rotationCx: number; rotationCx: number;
rotationCy: number; rotationCy: number;
transform: string | null;
};
export interface Gradient extends SVGLinearGradientElement {
mxRefCount: number;
}
export type GradientMap = {
[k: string]: Gradient;
}; };

33
packages/core/src/util/canvas/mxAbstractCanvas2D.ts
View File

@ -18,7 +18,7 @@ import mxUrlConverter from '../network/mxUrlConverter';
import mxPoint from '../datatypes/mxPoint'; import mxPoint from '../datatypes/mxPoint';
import { clone } from '../mxCloneUtils'; import { clone } from '../mxCloneUtils';
import type { CanvasState, ColorInputValue, ColorValue } from '../../types'; import type { CanvasState, ColorValue } from '../../types';
/** /**
* Class: mxAbstractCanvas2D * Class: mxAbstractCanvas2D
@ -272,7 +272,8 @@ class mxAbstractCanvas2D {
*/ */
scale(value: number) { scale(value: number) {
this.state.scale *= value; this.state.scale *= value;
this.state.strokeWidth *= value;
if (this.state.strokeWidth !== null) this.state.strokeWidth *= value;
} }
/** /**
@ -332,7 +333,7 @@ class mxAbstractCanvas2D {
* *
* Sets the current fill color. * Sets the current fill color.
*/ */
setFillColor(value: ColorInputValue) { setFillColor(value: ColorValue) {
const v = value === NONE ? null : value; const v = value === NONE ? null : value;
this.state.fillColor = v; this.state.fillColor = v;
@ -368,7 +369,7 @@ class mxAbstractCanvas2D {
* *
* Sets the current stroke color. * Sets the current stroke color.
*/ */
setStrokeColor(value: ColorInputValue) { setStrokeColor(value: ColorValue) {
const v = value === NONE ? null : value; const v = value === NONE ? null : value;
this.state.strokeColor = v; this.state.strokeColor = v;
} }
@ -378,7 +379,7 @@ class mxAbstractCanvas2D {
* *
* Sets the current stroke width. * Sets the current stroke width.
*/ */
setStrokeWidth(value: number) { setStrokeWidth(value: number | null) {
this.state.strokeWidth = value; this.state.strokeWidth = value;
} }
@ -387,7 +388,7 @@ class mxAbstractCanvas2D {
* *
* Enables or disables dashed lines. * Enables or disables dashed lines.
*/ */
setDashed(value: boolean, fixDash: boolean) { setDashed(value: boolean, fixDash = false) {
this.state.dashed = value; this.state.dashed = value;
this.state.fixDash = fixDash; this.state.fixDash = fixDash;
} }
@ -433,7 +434,7 @@ class mxAbstractCanvas2D {
* *
* Sets the current font color. * Sets the current font color.
*/ */
setFontColor(value: ColorInputValue) { setFontColor(value: ColorValue) {
const v = value === NONE ? null : value; const v = value === NONE ? null : value;
this.state.fontColor = v; this.state.fontColor = v;
} }
@ -443,7 +444,7 @@ class mxAbstractCanvas2D {
* *
* Sets the current font background color. * Sets the current font background color.
*/ */
setFontBackgroundColor(value: ColorInputValue) { setFontBackgroundColor(value: ColorValue) {
const v = value === NONE ? null : value; const v = value === NONE ? null : value;
this.state.fontBackgroundColor = v; this.state.fontBackgroundColor = v;
} }
@ -453,7 +454,7 @@ class mxAbstractCanvas2D {
* *
* Sets the current font border color. * Sets the current font border color.
*/ */
setFontBorderColor(value: ColorInputValue) { setFontBorderColor(value: ColorValue) {
const v = value === NONE ? null : value; const v = value === NONE ? null : value;
this.state.fontBorderColor = v; this.state.fontBorderColor = v;
} }
@ -499,7 +500,7 @@ class mxAbstractCanvas2D {
* *
* Enables or disables and configures the current shadow. * Enables or disables and configures the current shadow.
*/ */
setShadowColor(value: ColorInputValue) { setShadowColor(value: ColorValue) {
const v = value === NONE ? null : value; const v = value === NONE ? null : value;
this.state.shadowColor = v; this.state.shadowColor = v;
} }
@ -624,12 +625,12 @@ class mxAbstractCanvas2D {
* Closes the current path. * Closes the current path.
*/ */
close( close(
x1: number, x1?: number,
y1: number, y1?: number,
x2: number, x2?: number,
y2: number, y2?: number,
x3: number, x3?: number,
y3: number y3?: number
) { ) {
this.addOp(this.closeOp); this.addOp(this.closeOp);
} }

11
packages/core/src/util/canvas/mxSvgCanvas2D.ts
View File

@ -35,11 +35,12 @@ import mxAbstractCanvas2D from './mxAbstractCanvas2D';
import { parseXml } from '../mxXmlUtils'; import { parseXml } from '../mxXmlUtils';
import { importNodeImplementation, isNode, write } from '../mxDomUtils'; import { importNodeImplementation, isNode, write } from '../mxDomUtils';
import { htmlEntities, trim } from '../mxStringUtils'; import { htmlEntities, trim } from '../mxStringUtils';
import { AlignValue, ColorValue, DirectionValue } from '../../types'; import {
AlignValue,
type GradientMap = { ColorValue,
[k: string]: SVGLinearGradientElement; DirectionValue,
}; GradientMap,
} from '../../types';
// Activates workaround for gradient ID resolution if base tag is used. // Activates workaround for gradient ID resolution if base tag is used.
const useAbsoluteIds = const useAbsoluteIds =

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

10
packages/core/src/util/event/mxEvent.ts
View File

@ -246,11 +246,11 @@ class mxEvent {
static redirectMouseEvents( static redirectMouseEvents(
node: Listenable, node: Listenable,
graph: mxGraph, graph: mxGraph,
state: mxCellState | ((evt: Event) => mxCellState), state: mxCellState | ((evt: Event) => mxCellState) | null = null,
down: EventListener | null, down: EventListener | null = null,
move: EventListener | null, move: EventListener | null = null,
up: EventListener | null, up: EventListener | null = null,
dblClick: EventListener | null dblClick: EventListener | null = null
) { ) {
const getState = (evt: Event) => { const getState = (evt: Event) => {
return typeof state === 'function' ? state(evt) : state; return typeof state === 'function' ? state(evt) : state;

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

File diff suppressed because it is too large Load Diff

1164
packages/core/src/util/mxConstants.ts Normal file
View File

File diff suppressed because it is too large Load Diff

30
packages/core/src/util/mxUtils.ts
View File

@ -29,16 +29,6 @@ import {
NODETYPE_ELEMENT, NODETYPE_ELEMENT,
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';
@ -753,10 +743,10 @@ export const getPortConstraints = (
) => { ) => {
const value = getValue( const value = getValue(
terminal.style, terminal.style,
STYLE_PORT_CONSTRAINT, 'portConstraint',
getValue( getValue(
edge.style, edge.style,
source ? STYLE_SOURCE_PORT_CONSTRAINT : STYLE_TARGET_PORT_CONSTRAINT, source ? 'sourcePortConstraint' : 'targetPortConstraint',
null null
) )
); );
@ -769,13 +759,13 @@ export const getPortConstraints = (
let returnValue = DIRECTION_MASK_NONE; let returnValue = DIRECTION_MASK_NONE;
const constraintRotationEnabled = getValue( const constraintRotationEnabled = 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 = getValue(terminal.style, STYLE_ROTATION, 0); rotation = getValue(terminal.style, 'rotation', 0);
} }
let quad = 0; let quad = 0;
@ -928,9 +918,9 @@ export const getDirectedBounds = (
flipH: boolean, flipH: boolean,
flipV: boolean flipV: boolean
) => { ) => {
const d = getValue(style, STYLE_DIRECTION, DIRECTION_EAST); const d = getValue(style, 'direction', DIRECTION_EAST);
flipH = flipH != null ? flipH : getValue(style, STYLE_FLIPH, false); flipH = flipH != null ? flipH : getValue(style, 'flipH', false);
flipV = flipV != null ? flipV : getValue(style, STYLE_FLIPV, false); flipV = flipV != null ? flipV : 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)));
@ -1190,10 +1180,10 @@ export const intersectsHotspot = (
let w = state.width; let w = state.width;
let h = state.height; let h = state.height;
const start = getValue(state.style, STYLE_STARTSIZE) * state.view.scale; const start = getValue(state.style, 'startSize') * state.view.scale;
if (start > 0) { if (start > 0) {
if (getValue(state.style, STYLE_HORIZONTAL, true)) { if (getValue(state.style, 'horizontal', true)) {
cy = state.y + start / 2; cy = state.y + start / 2;
h = start; h = start;
} else { } else {
@ -1211,7 +1201,7 @@ export const intersectsHotspot = (
} }
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 = toRadians(getValue(state.style, STYLE_ROTATION) || 0); const alpha = toRadians(getValue(state.style, 'rotation') || 0);
if (alpha != 0) { if (alpha != 0) {
const cos = Math.cos(-alpha); const cos = Math.cos(-alpha);

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

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

@ -46,35 +46,8 @@ 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, { convertPoint, getValue } from '../../util/mxUtils';
import mxRectangle from '../../util/datatypes/mxRectangle'; import mxRectangle from '../../util/datatypes/mxRectangle';
import mxStencilRegistry from '../../shape/node/mxStencilRegistry'; import mxStencilRegistry from '../../shape/node/mxStencilRegistry';
import mxEvent from '../../util/event/mxEvent'; import mxEvent from '../../util/event/mxEvent';
@ -233,20 +206,19 @@ class mxCellRenderer {
* *
* state - <mxCellState> for which the shape should be created. * state - <mxCellState> for which the shape should be created.
*/ */
createShape(state: mxCellState): mxShape | null { createShape(state: mxCellState) {
let shape = null; let shape = null;
if (state.style) {
// 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) { if (stencil) {
shape = new mxShape(stencil); shape = new mxShape(stencil);
} else { } else {
const ctor = this.getShapeConstructor(state); const ctor = this.getShapeConstructor(state);
shape = new ctor(); shape = new ctor();
} }
}
return shape; return shape;
} }
@ -283,7 +255,7 @@ class mxCellRenderer {
* Returns the constructor to be used for creating the shape. * Returns the constructor to be used for creating the shape.
*/ */
getShapeConstructor(state: mxCellState) { getShapeConstructor(state: mxCellState) {
let ctor = this.getShape(state.style[STYLE_SHAPE]); let ctor = this.getShape(state.style.shape);
if (!ctor) { if (!ctor) {
ctor = <typeof mxShape>( ctor = <typeof mxShape>(
@ -310,11 +282,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);
} }
@ -331,11 +303,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');
} }
} }
@ -350,12 +322,7 @@ class mxCellRenderer {
// LATER: Check if the color has actually changed // LATER: Check if the color has actually changed
if (state.style != null) { if (state.style != null) {
const values = ['inherit', 'swimlane', 'indicated']; const values = ['inherit', 'swimlane', 'indicated'];
const styles = [ const styles = ['fillColor', 'strokeColor', 'gradientColor', 'fontColor'];
STYLE_FILLCOLOR,
STYLE_STROKECOLOR,
STYLE_GRADIENTCOLOR,
STYLE_FONTCOLOR,
];
for (let i = 0; i < styles.length; i += 1) { for (let i = 0; i < styles.length; i += 1) {
if (values.indexOf(state.style[styles[i]]) >= 0) { if (values.indexOf(state.style[styles[i]]) >= 0) {
@ -374,7 +341,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;
@ -384,18 +351,16 @@ 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' : '#ffffff';
? '#000000'
: '#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;
} }
@ -406,19 +371,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) {
@ -427,7 +392,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
@ -522,7 +487,7 @@ class mxCellRenderer {
// Dispatches the drop event to the graph which // Dispatches the drop event to the graph which
// consumes and executes the source function // consumes and executes the source function
const pt = mxUtils.convertPoint(graph.container, x, y); const pt = convertPoint(graph.container, x, y);
result = <mxCellState>( result = <mxCellState>(
graph.view.getState(graph.getCellAt(pt.x, pt.y)) graph.view.getState(graph.getCellAt(pt.x, pt.y))
); );
@ -923,7 +888,7 @@ class mxCellRenderer {
// Dispatches the drop event to the graph which // Dispatches the drop event to the graph which
// consumes and executes the source function // consumes and executes the source function
const pt = mxUtils.convertPoint(graph.container, x, y); const pt = convertPoint(graph.container, x, y);
result = <mxCellState>graph.view.getState(graph.getCellAt(pt.x, pt.y)); result = <mxCellState>graph.view.getState(graph.getCellAt(pt.x, pt.y));
} }
@ -990,7 +955,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 &&
@ -1036,7 +1001,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 ||
@ -1103,22 +1068,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)
); );
} }
@ -1211,16 +1176,8 @@ class mxCellRenderer {
// Shape can modify its label bounds // Shape can modify its label bounds
if (state.shape != null) { if (state.shape != null) {
const hpos = mxUtils.getValue( const hpos = getValue(state.style, 'labelPosition', ALIGN_CENTER);
state.style, const vpos = getValue(state.style, 'verticalLabelPosition', ALIGN_MIDDLE);
STYLE_LABEL_POSITION,
ALIGN_CENTER
);
const vpos = mxUtils.getValue(
state.style,
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
);
if (hpos === ALIGN_CENTER && vpos === ALIGN_MIDDLE) { if (hpos === ALIGN_CENTER && vpos === ALIGN_MIDDLE) {
bounds = state.shape.getLabelBounds(bounds); bounds = state.shape.getLabelBounds(bounds);
@ -1228,7 +1185,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 = getValue(state.style, 'labelWidth', null);
if (lw != null) { if (lw != null) {
bounds.width = parseFloat(lw) * scale; bounds.width = parseFloat(lw) * scale;
@ -1260,8 +1217,7 @@ class mxCellRenderer {
if ( if (
!this.legacySpacing || !this.legacySpacing ||
(state.style[STYLE_OVERFLOW] !== 'fill' && (state.style.overflow !== 'fill' && state.style.overflow !== 'width')
state.style[STYLE_OVERFLOW] !== 'width')
) { ) {
const s = state.view.scale; const s = state.view.scale;
// @ts-ignore // @ts-ignore
@ -1269,17 +1225,9 @@ class mxCellRenderer {
bounds.x += spacing.x * s; bounds.x += spacing.x * s;
bounds.y += spacing.y * s; bounds.y += spacing.y * s;
const hpos = mxUtils.getValue( const hpos = getValue(state.style, 'labelPosition', ALIGN_CENTER);
state.style, const vpos = getValue(state.style, 'verticalLabelPosition', ALIGN_MIDDLE);
STYLE_LABEL_POSITION, const lw = getValue(state.style, 'labelWidth', null);
ALIGN_CENTER
);
const vpos = mxUtils.getValue(
state.style,
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
);
const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
bounds.width = Math.max( bounds.width = Math.max(
0, 0,
@ -1307,14 +1255,14 @@ 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();
if (bounds.x !== cx || bounds.y !== cy) { if (bounds.x !== cx || bounds.y !== cy) {
const rad = theta * (Math.PI / 180); const rad = theta * (Math.PI / 180);
const pt = mxUtils.getRotatedPoint( const pt = getRotatedPoint(
new mxPoint(bounds.x, bounds.y), new mxPoint(bounds.x, bounds.y),
Math.cos(rad), Math.cos(rad),
Math.sin(rad), Math.sin(rad),
@ -1341,11 +1289,8 @@ class mxCellRenderer {
this.createCellOverlays(state); this.createCellOverlays(state);
if (state.overlays != null) { if (state.overlays != null) {
const rot = mxUtils.mod( const rot = mod(getValue(state.style, 'rotation', 0), 90);
mxUtils.getValue(state.style, STYLE_ROTATION, 0), const rad = toRadians(rot);
90
);
const rad = mxUtils.toRadians(rot);
const cos = Math.cos(rad); const cos = Math.cos(rad);
const sin = Math.sin(rad); const sin = Math.sin(rad);
@ -1358,7 +1303,7 @@ class mxCellRenderer {
let cx = bounds.getCenterX(); let cx = bounds.getCenterX();
let cy = bounds.getCenterY(); let cy = bounds.getCenterY();
const point = mxUtils.getRotatedPoint( const point = getRotatedPoint(
new mxPoint(cx, cy), new mxPoint(cx, cy),
cos, cos,
sin, sin,
@ -1403,7 +1348,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) ? 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;
@ -1450,7 +1395,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 = 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;
@ -1458,11 +1403,11 @@ class mxCellRenderer {
} }
if (rot !== 0) { if (rot !== 0) {
const rad = mxUtils.toRadians(rot); const rad = toRadians(rot);
const cos = Math.cos(rad); const cos = Math.cos(rad);
const sin = Math.sin(rad); const sin = Math.sin(rad);
const point = mxUtils.getRotatedPoint( const point = getRotatedPoint(
new mxPoint(cx, cy), new mxPoint(cx, cy),
cos, cos,
sin, sin,
@ -1648,8 +1593,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
@ -1657,7 +1600,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;
@ -1687,7 +1630,7 @@ class mxCellRenderer {
} else if ( } else if (
!force && !force &&
state.shape != null && state.shape != null &&
(!mxUtils.equalEntries(state.shape.style, state.style) || (!equalEntries(state.shape.style, state.style) ||
this.checkPlaceholderStyles(state)) this.checkPlaceholderStyles(state))
) { ) {
state.shape.resetStyles(); state.shape.resetStyles();
@ -1776,7 +1719,7 @@ class mxCellRenderer {
shape.scale !== state.view.scale || shape.scale !== state.view.scale ||
(state.absolutePoints == null && !shape.bounds.equals(state)) || (state.absolutePoints == null && !shape.bounds.equals(state)) ||
(state.absolutePoints != null && (state.absolutePoints != null &&
!mxUtils.equalPoints(shape.points, state.absolutePoints)) !equalPoints(shape.points, state.absolutePoints))
); );
} }

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';
import mxChildChange from '../../atomic_changes/mxChildChange'; import mxChildChange from '../../atomic_changes/mxChildChange';
@ -1068,10 +1012,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.
@ -2700,11 +2644,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;
} }
@ -2729,7 +2673,7 @@ class mxGraph extends mxEventSource {
} }
} }
style[STYLE_IMAGE] = image; style.image = image;
} }
} }
return style; return style;
@ -2783,7 +2727,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:
* *
@ -2988,7 +2932,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)
@ -2996,11 +2940,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]);
* } * }
* }; * };
* ``` * ```
@ -4647,7 +4591,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);
@ -4667,7 +4611,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();
@ -4778,10 +4722,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
); );
@ -4793,7 +4737,7 @@ class mxGraph extends mxEventSource {
} else { } else {
cellStyle = mxUtils.setStyle( cellStyle = mxUtils.setStyle(
cellStyle, cellStyle,
STYLE_STARTSIZE, 'startSize',
size.width + 8 size.width + 8
); );
@ -4807,7 +4751,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;
@ -4862,9 +4806,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;
@ -4886,34 +4830,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
@ -4937,14 +4881,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;
@ -5229,17 +5173,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;
} }
@ -5568,7 +5512,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) {
@ -5620,11 +5564,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;
@ -5878,7 +5822,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;
@ -5905,8 +5849,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 (
@ -5996,11 +5940,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));
@ -6014,18 +5958,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;
@ -6058,41 +6002,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]
); );
@ -6100,13 +6044,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]
); );
@ -6137,13 +6081,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;
@ -6170,7 +6114,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) {
@ -6194,8 +6138,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) {
@ -6315,7 +6259,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]);
} }
@ -6806,7 +6750,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);
@ -7509,7 +7453,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;
@ -8016,7 +7967,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);
} }
} }
@ -8055,7 +8006,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
@ -8093,20 +8044,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';
} }
/** /**
@ -8258,10 +8209,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;
@ -8274,10 +8225,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) {
@ -8322,7 +8273,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);
@ -8341,7 +8292,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.
@ -8349,7 +8300,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;
} }
@ -8362,8 +8313,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;
@ -8372,7 +8323,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.
@ -8380,7 +8331,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;
} }
@ -8395,7 +8346,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;
} }
@ -8410,7 +8361,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;
} }
@ -8424,7 +8375,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;
} }
@ -8438,7 +8389,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;
} }
@ -8476,7 +8427,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
); );
} }
@ -8634,7 +8585,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;
} }
/** /**
@ -8711,7 +8662,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;
* }; * };
* ``` * ```
* *
@ -8757,14 +8708,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;
} }
/** /**
@ -8803,14 +8754,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;
} }
/** /**
@ -8826,7 +8777,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.
*/ */
@ -8837,7 +8788,7 @@ class mxGraph extends mxEventSource {
return ( return (
this.isCellsMovable() && this.isCellsMovable() &&
!this.isCellLocked(cell) && !this.isCellLocked(cell) &&
style[STYLE_MOVABLE] !== 0 style.movable !== 0
); );
} }
@ -9158,7 +9109,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.
*/ */
@ -9169,7 +9120,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;
} }
@ -9223,7 +9174,7 @@ class mxGraph extends mxEventSource {
return ( return (
this.isCellsBendable() && this.isCellsBendable() &&
!this.isCellLocked(cell) && !this.isCellLocked(cell) &&
style[STYLE_BENDABLE] !== 0 style.bendable !== 0
); );
} }
@ -9250,7 +9201,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.
*/ */
@ -9261,7 +9212,7 @@ class mxGraph extends mxEventSource {
return ( return (
this.isCellsEditable() && this.isCellsEditable() &&
!this.isCellLocked(cell) && !this.isCellLocked(cell) &&
style[STYLE_EDITABLE] != 0 style.editable != 0
); );
} }
@ -9424,7 +9375,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.
*/ */
@ -9432,7 +9383,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;
} }
/** /**
@ -9657,7 +9608,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;
} }
/** /**
@ -9975,7 +9926,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) {
@ -10396,7 +10347,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) {
@ -11128,7 +11079,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)
); );
}) })

68
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';
@ -1073,7 +1054,8 @@ 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 = toRadians(pState.style[STYLE_ROTATION] || '0'); const alpha = 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);
@ -1138,10 +1120,10 @@ class mxGraphView extends mxEventSource {
*/ */
// updateVertexLabelOffset(state: mxCellState): void; // updateVertexLabelOffset(state: mxCellState): void;
updateVertexLabelOffset(state: mxCellState) { updateVertexLabelOffset(state: mxCellState) {
const h = getValue(state.style, STYLE_LABEL_POSITION, ALIGN_CENTER); const h = getValue(state.style, 'labelPosition', ALIGN_CENTER);
if (h === ALIGN_LEFT) { if (h === ALIGN_LEFT) {
let lw = getValue(state.style, STYLE_LABEL_WIDTH, null); let lw = getValue(state.style, 'labelWidth', null);
if (lw != null) { if (lw != null) {
lw *= this.scale; lw *= this.scale;
@ -1155,11 +1137,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 = getValue(state.style, STYLE_LABEL_WIDTH, null); const lw = 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 = getValue(state.style, STYLE_ALIGN, ALIGN_CENTER); const align = getValue(state.style, 'align', ALIGN_CENTER);
let dx = 0; let dx = 0;
if (align === ALIGN_CENTER) { if (align === ALIGN_CENTER) {
@ -1175,11 +1157,7 @@ class mxGraphView extends mxEventSource {
} }
} }
const v = getValue( const v = getValue(state.style, 'verticalLabelPosition', ALIGN_MIDDLE);
state.style,
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
);
if (v === ALIGN_TOP) { if (v === ALIGN_TOP) {
// @ts-ignore // @ts-ignore
@ -1473,7 +1451,7 @@ class mxGraphView extends mxEventSource {
if ( if (
(points == null || points.length < 2) && (points == null || points.length < 2) &&
(!getValue(edge.style, STYLE_ORTHOGONAL_LOOP, false) || (!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;
@ -1492,9 +1470,9 @@ class mxGraphView extends mxEventSource {
target: mxCellState | null = null target: mxCellState | null = null
): any { ): any {
let edgeStyle: any = this.isLoopStyleEnabled(edge, points, source, target) let edgeStyle: any = this.isLoopStyleEnabled(edge, points, source, target)
? getValue(edge.style, STYLE_LOOP, (<mxGraph>this.graph).defaultLoopStyle) ? getValue(edge.style, 'loop', (<mxGraph>this.graph).defaultLoopStyle)
: !getValue(edge.style, STYLE_NOEDGESTYLE, false) : !getValue(edge.style, 'noEdgeStyle', false)
? edge.style[STYLE_EDGE] ? edge.style.edge
: null; : null;
// Converts string values to objects // Converts string values to objects
@ -1581,7 +1559,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 = toRadians(Number(start.style[STYLE_ROTATION] || '0')); const alpha = 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) {
@ -1590,10 +1568,10 @@ class mxGraphView extends mxEventSource {
next = getRotatedPoint(next, cos, sin, center); next = 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(
@ -1626,7 +1604,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 = getValue(state.style, key); const id = getValue(state.style, key);
if (id != null) { if (id != null) {
@ -1676,8 +1654,8 @@ class mxGraphView extends mxEventSource {
let flipV = false; let flipV = false;
if (terminal.cell.isVertex()) { if (terminal.cell.isVertex()) {
flipH = getValue(terminal.style, STYLE_FLIPH, 0) == 1; flipH = getValue(terminal.style, 'flipH', 0) == 1;
flipV = getValue(terminal.style, STYLE_FLIPV, 0) == 1; flipV = 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) {
@ -1721,9 +1699,7 @@ class mxGraphView extends mxEventSource {
// getRoutingCenterX(state: mxCellState): number; // getRoutingCenterX(state: mxCellState): number;
getRoutingCenterX(state: mxCellState) { getRoutingCenterX(state: mxCellState) {
const f = const f =
state.style != null state.style != null ? parseFloat(state.style.routingCenterX) || 0 : 0;
? parseFloat(state.style[STYLE_ROUTING_CENTER_X]) || 0
: 0;
return state.getCenterX() + f * state.width; return state.getCenterX() + f * state.width;
} }
@ -1733,9 +1709,7 @@ class mxGraphView extends mxEventSource {
// getRoutingCenterY(state: mxCellState): number; // getRoutingCenterY(state: mxCellState): number;
getRoutingCenterY(state: mxCellState) { getRoutingCenterY(state: mxCellState) {
const f = const f =
state.style != null state.style != null ? parseFloat(state.style.routingCenterY) || 0 : 0;
? parseFloat(state.style[STYLE_ROUTING_CENTER_Y]) || 0
: 0;
return state.getCenterY() + f * state.height; return state.getCenterY() + f * state.height;
} }
@ -1785,7 +1759,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);
} }
@ -1795,7 +1769,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 { getValue } from '../../util/mxUtils'; import { getValue } 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 getValue(style, STYLE_HORIZONTAL, 1) == 1; return 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).