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 style = this.getCellStyle(cell);
if (style['minWidth'] > 0)
if (style.minWidth > 0)
{
result.width = Math.max(style['minWidth'], result.width);
result.width = Math.max(style.minWidth, result.width);
}
return result;
@ -1032,7 +1032,7 @@ graph.isWrapping = function(state)
{
let style = this.getCurrentCellStyle(cell);
return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0;
return this.isCellsSelectable() && !this.isCellLocked(cell) && style.selectable != 0;
};</pre></blockquote><p>You can then use the new style as shown in this example.</p><blockquote><pre class="prettyprint">graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'selectable=0');</pre></blockquote><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>cell</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link1306 onMouseOver="ShowTip(event, 'tt246', 'link1306')" onMouseOut="HideTip('tt246')">mxCell</a> whose selectable state should be returned.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxGraph.isCellsSelectable"></a>isCellsSelectable</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype"><tr><td class="prettyprint">mxGraph.prototype.isCellsSelectable = function()</td></tr></table></blockquote><p>Returns <a href="#mxGraph.cellsSelectable" class=LVariable id=link1307 onMouseOver="ShowTip(event, 'tt120', 'link1307')" onMouseOut="HideTip('tt120')">cellsSelectable</a>.</p></div></div></div>

2
docs/stashed/Codec.js
View File

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

8
docs/stashed/GraphLayout.js
View File

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

2
docs/stashed/JQuery.js
View File

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

14
docs/stashed/Map.js
View File

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

62
docs/stashed/Schema.js
View File

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

20
docs/stashed/Scrollbars.js
View File

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

70
docs/stashed/Wires.js
View File

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

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

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

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

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.stroke = result.stroke && this.isStrokeState(state);
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
let shape = mxUtils.getValue(state.style, 'shape', null);
result.containsImage = result.containsImage || shape == 'image';
for (var key in state.style)
@ -251,11 +251,11 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells)
*/
Format.prototype.isFillState = function(state)
{
return !this.isSpecialColor(state.style[mxConstants.STYLE_FILLCOLOR]) &&
return !this.isSpecialColor(state.style.fillColor) &&
(state.cell.isVertex() ||
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'arrow' ||
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'filledEdge' ||
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'flexArrow');
mxUtils.getValue(state.style, 'shape', null) == 'arrow' ||
mxUtils.getValue(state.style, 'shape', null) == 'filledEdge' ||
mxUtils.getValue(state.style, 'shape', null) == 'flexArrow');
};
/**
@ -263,7 +263,7 @@ Format.prototype.isFillState = function(state)
*/
Format.prototype.isStrokeState = function(state)
{
return !this.isSpecialColor(state.style[mxConstants.STYLE_STROKECOLOR]);
return !this.isSpecialColor(state.style.strokeColor);
};
/**
@ -271,8 +271,8 @@ Format.prototype.isStrokeState = function(state)
*/
Format.prototype.isSpecialColor = function(color)
{
return mxUtils.indexOf([mxConstants.STYLE_STROKECOLOR,
mxConstants.STYLE_FILLCOLOR, 'inherit', 'swimlane',
return mxUtils.indexOf(['strokeColor',
'fillColor', 'inherit', 'swimlane',
'indicated'], color) >= 0;
};
@ -281,7 +281,7 @@ Format.prototype.isSpecialColor = function(color)
*/
Format.prototype.isGlassState = function(state)
{
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
let shape = mxUtils.getValue(state.style, 'shape', null);
return (shape == 'label' || shape == 'rectangle' || shape == 'internalStorage' ||
shape == 'ext' || shape == 'umlLifeline' || shape == 'swimlane' ||
@ -295,7 +295,7 @@ Format.prototype.isRoundedState = function(state)
{
return (state.shape != null) ? state.shape.isRoundable() :
mxUtils.indexOf(this.roundableShapes, mxUtils.getValue(state.style,
mxConstants.STYLE_SHAPE, null)) >= 0;
'shape', null)) >= 0;
};
/**
@ -303,8 +303,8 @@ Format.prototype.isRoundedState = function(state)
*/
Format.prototype.isLineJumpState = function(state)
{
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
let curved = mxUtils.getValue(state.style, mxConstants.STYLE_CURVED, false);
let shape = mxUtils.getValue(state.style, 'shape', null);
let curved = mxUtils.getValue(state.style, 'curved', false);
return !curved && (shape == 'connector' || shape == 'filledEdge');
};
@ -314,7 +314,7 @@ Format.prototype.isLineJumpState = function(state)
*/
Format.prototype.isAutoSizeState = function(state)
{
return mxUtils.getValue(state.style, mxConstants.STYLE_AUTOSIZE, null) == '1';
return mxUtils.getValue(state.style, 'autoSize', null) == '1';
};
/**
@ -322,7 +322,7 @@ Format.prototype.isAutoSizeState = function(state)
*/
Format.prototype.isImageState = function(state)
{
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
let shape = mxUtils.getValue(state.style, 'shape', null);
return (shape == 'label' || shape == 'image');
};
@ -332,7 +332,7 @@ Format.prototype.isImageState = function(state)
*/
Format.prototype.isShadowState = function(state)
{
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
let shape = mxUtils.getValue(state.style, 'shape', null);
return (shape != 'image');
};
@ -628,7 +628,7 @@ BaseFormatPanel.prototype.getSelectionState = function()
if (state != null)
{
let tmp = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
let tmp = mxUtils.getValue(state.style, 'shape', null);
if (tmp != null)
{
@ -670,7 +670,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu
let value = (isFloat) ? parseFloat(input.value) : parseInt(input.value);
// Special case: angle mod 360
if (!isNaN(value) && key == mxConstants.STYLE_ROTATION)
if (!isNaN(value) && key == 'rotation')
{
// Workaround for decimal rounding errors in floats is to
// use integer and round all numbers to two decimal point
@ -712,7 +712,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu
graph.setCellStyles(key, value, cells);
// Handles special case for fontSize where HTML labels are parsed and updated
if (key == mxConstants.STYLE_FONTSIZE)
if (key == 'fontSize')
{
graph.updateLabelElements(graph.getSelectionCells(), function(elt)
{
@ -1937,7 +1937,7 @@ ArrangePanel.prototype.addFlip = function(div)
let btn = mxUtils.button(mxResources.get('horizontal'), function(evt)
{
graph.toggleCellStyles(mxConstants.STYLE_FLIPH, false);
graph.toggleCellStyles('flipH', false);
})
btn.setAttribute('title', mxResources.get('horizontal'));
@ -1947,7 +1947,7 @@ ArrangePanel.prototype.addFlip = function(div)
let btn = mxUtils.button(mxResources.get('vertical'), function(evt)
{
graph.toggleCellStyles(mxConstants.STYLE_FLIPV, false);
graph.toggleCellStyles('flipV', false);
})
btn.setAttribute('title', mxResources.get('vertical'));
@ -2067,12 +2067,12 @@ ArrangePanel.prototype.addAngle = function(div)
if (force || document.activeElement != input)
{
ss = this.format.getSelectionState();
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_ROTATION, 0));
let tmp = parseFloat(mxUtils.getValue(ss.style, 'rotation', 0));
input.value = (isNaN(tmp)) ? '' : tmp + '°';
}
});
update = this.installInputHandler(input, mxConstants.STYLE_ROTATION, 0, 0, 360, '°', null, true);
update = this.installInputHandler(input, 'rotation', 0, 0, 360, '°', null, true);
this.addKeyHandler(input, listener);
graph.getModel().addListener(mxEvent.CHANGE, listener);
@ -2215,7 +2215,7 @@ ArrangePanel.prototype.addGeometry = function(container)
wrapper.style.whiteSpace = 'nowrap';
wrapper.style.textAlign = 'right';
let opt = this.createCellOption(mxResources.get('constrainProportions'),
mxConstants.STYLE_ASPECT, null, 'fixed', 'null');
'aspect', null, 'fixed', 'null');
opt.style.width = '100%';
wrapper.appendChild(opt);
@ -2828,19 +2828,19 @@ TextFormatPanel.prototype.addFont = function(container)
function(evt)
{
graph.cellEditor.alignText(mxConstants.ALIGN_LEFT, evt);
} : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_LEFT])), stylePanel3);
} : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_LEFT])), stylePanel3);
let center = this.editorUi.toolbar.addButton('geSprite-center', mxResources.get('center'),
(graph.cellEditor.isContentEditing()) ?
function(evt)
{
graph.cellEditor.alignText(mxConstants.ALIGN_CENTER, evt);
} : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_CENTER])), stylePanel3);
} : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_CENTER])), stylePanel3);
let right = this.editorUi.toolbar.addButton('geSprite-right', mxResources.get('right'),
(graph.cellEditor.isContentEditing()) ?
function(evt)
{
graph.cellEditor.alignText(mxConstants.ALIGN_RIGHT, evt);
} : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_RIGHT])), stylePanel3);
} : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_RIGHT])), stylePanel3);
this.styleButtons([left, center, right]);
@ -2863,11 +2863,11 @@ TextFormatPanel.prototype.addFont = function(container)
}
let top = this.editorUi.toolbar.addButton('geSprite-top', mxResources.get('top'),
callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_TOP])), stylePanel3);
callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_TOP])), stylePanel3);
let middle = this.editorUi.toolbar.addButton('geSprite-middle', mxResources.get('middle'),
callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_MIDDLE])), stylePanel3);
callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_MIDDLE])), stylePanel3);
let bottom = this.editorUi.toolbar.addButton('geSprite-bottom', mxResources.get('bottom'),
callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_BOTTOM])), stylePanel3);
callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_BOTTOM])), stylePanel3);
this.styleButtons([top, middle, bottom]);
@ -3038,10 +3038,10 @@ TextFormatPanel.prototype.addFont = function(container)
if (vals != null)
{
graph.setCellStyles(mxConstants.STYLE_LABEL_POSITION, vals[0], graph.getSelectionCells());
graph.setCellStyles(mxConstants.STYLE_VERTICAL_LABEL_POSITION, vals[1], graph.getSelectionCells());
graph.setCellStyles(mxConstants.STYLE_ALIGN, vals[2], graph.getSelectionCells());
graph.setCellStyles(mxConstants.STYLE_VERTICAL_ALIGN, vals[3], graph.getSelectionCells());
graph.setCellStyles('labelPosition', vals[0], graph.getSelectionCells());
graph.setCellStyles('verticalLabelPosition', vals[1], graph.getSelectionCells());
graph.setCellStyles('align', vals[2], graph.getSelectionCells());
graph.setCellStyles('verticalAlign', vals[3], graph.getSelectionCells());
}
}
finally
@ -3058,7 +3058,7 @@ TextFormatPanel.prototype.addFont = function(container)
mxEvent.addListener(dirSelect, 'change', function(evt)
{
graph.setCellStyles(mxConstants.STYLE_TEXT_DIRECTION, dirSet[dirSelect.value], graph.getSelectionCells());
graph.setCellStyles('textDirection', dirSet[dirSelect.value], graph.getSelectionCells());
mxEvent.consume(evt);
});
}
@ -3077,7 +3077,7 @@ TextFormatPanel.prototype.addFont = function(container)
// after first character was entered (as the font element is lazy created)
let pendingFontSize = null;
let inputUpdate = this.installInputHandler(input, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize, 1, 999, ' pt',
let inputUpdate = this.installInputHandler(input, 'fontSize', Menus.prototype.defaultFontSize, 1, 999, ' pt',
function(fontSize)
{
// IE does not support containsNode
@ -3234,7 +3234,7 @@ TextFormatPanel.prototype.addFont = function(container)
{
install: function(apply) { bgColorApply = apply; },
destroy: function() { bgColorApply = null; }
}, null, true) : this.createCellColorOption(mxResources.get('backgroundColor'), mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, '#ffffff', null, function(color)
}, null, true) : this.createCellColorOption(mxResources.get('backgroundColor'), 'backgroundColor', '#ffffff', null, function(color)
{
graph.updateLabelElements(graph.getSelectionCells(), function(elt)
{
@ -3243,7 +3243,7 @@ TextFormatPanel.prototype.addFont = function(container)
});
bgPanel.style.fontWeight = 'bold';
let borderPanel = this.createCellColorOption(mxResources.get('borderColor'), mxConstants.STYLE_LABEL_BORDERCOLOR, '#000000');
let borderPanel = this.createCellColorOption(mxResources.get('borderColor'), 'labelBorderColor', '#000000');
borderPanel.style.fontWeight = 'bold';
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
@ -3311,12 +3311,12 @@ TextFormatPanel.prototype.addFont = function(container)
document.execCommand('forecolor', false, (color != mxConstants.NONE) ?
color : 'transparent');
}
}, (defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : '#000000',
}, (defs.strokeColor != null) ? defs.strokeColor : '#000000',
{
install: function(apply) { fontColorApply = apply; },
destroy: function() { fontColorApply = null; }
}, null, true) : this.createCellColorOption(mxResources.get('fontColor'), mxConstants.STYLE_FONTCOLOR,
(defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : '#000000', function(color)
}, null, true) : this.createCellColorOption(mxResources.get('fontColor'), 'fontColor',
(defs.strokeColor != null) ? defs.strokeColor : '#000000', function(color)
{
if (color == mxConstants.NONE)
{
@ -3332,14 +3332,14 @@ TextFormatPanel.prototype.addFont = function(container)
{
if (color == mxConstants.NONE)
{
graph.setCellStyles(mxConstants.STYLE_NOLABEL, '1', graph.getSelectionCells());
graph.setCellStyles('noLabel', '1', graph.getSelectionCells());
}
else
{
graph.setCellStyles(mxConstants.STYLE_NOLABEL, null, graph.getSelectionCells());
graph.setCellStyles('noLabel', null, graph.getSelectionCells());
}
graph.updateCellStyles(mxConstants.STYLE_FONTCOLOR, color, graph.getSelectionCells());
graph.updateCellStyles('fontColor', color, graph.getSelectionCells());
graph.updateLabelElements(graph.getSelectionCells(), function(elt)
{
@ -3364,7 +3364,7 @@ TextFormatPanel.prototype.addFont = function(container)
extraPanel.style.paddingBottom = '4px';
// LATER: Fix toggle using '' instead of 'null'
let wwOpt = this.createCellOption(mxResources.get('wordWrap'), mxConstants.STYLE_WHITE_SPACE, null, 'wrap', 'null', null, null, true);
let wwOpt = this.createCellOption(mxResources.get('wordWrap'), 'whiteSpace', null, 'wrap', 'null', null, null, true);
wwOpt.style.fontWeight = 'bold';
// Word wrap in edge labels only supported via labelWidth style
@ -3429,7 +3429,7 @@ TextFormatPanel.prototype.addFont = function(container)
if (!graph.cellEditor.isContentEditing())
{
container.appendChild(extraPanel);
container.appendChild(this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_TEXT_OPACITY));
container.appendChild(this.createRelativeOption(mxResources.get('opacity'), 'textOpacity'));
container.appendChild(spacingPanel);
}
else
@ -3759,32 +3759,32 @@ TextFormatPanel.prototype.addFont = function(container)
let listener = mxUtils.bind(this, function(sender, evt, force)
{
ss = this.format.getSelectionState();
let fontStyle = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSTYLE, 0);
let fontStyle = mxUtils.getValue(ss.style, 'fontStyle', 0);
setSelected(fontStyleItems[0], (fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD);
setSelected(fontStyleItems[1], (fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC);
setSelected(fontStyleItems[2], (fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE);
fontMenu.firstChild.nodeValue = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTFAMILY, Menus.prototype.defaultFont);
fontMenu.firstChild.nodeValue = mxUtils.getValue(ss.style, 'fontFamily', Menus.prototype.defaultFont);
setSelected(verticalItem, mxUtils.getValue(ss.style, mxConstants.STYLE_HORIZONTAL, '1') == '0');
setSelected(verticalItem, mxUtils.getValue(ss.style, 'horizontal', '1') == '0');
if (force || document.activeElement != input)
{
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize));
let tmp = parseFloat(mxUtils.getValue(ss.style, 'fontSize', Menus.prototype.defaultFontSize));
input.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
let align = mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER);
let align = mxUtils.getValue(ss.style, 'align', mxConstants.ALIGN_CENTER);
setSelected(left, align == mxConstants.ALIGN_LEFT);
setSelected(center, align == mxConstants.ALIGN_CENTER);
setSelected(right, align == mxConstants.ALIGN_RIGHT);
let valign = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
let valign = mxUtils.getValue(ss.style, 'verticalAlign', mxConstants.ALIGN_MIDDLE);
setSelected(top, valign == mxConstants.ALIGN_TOP);
setSelected(middle, valign == mxConstants.ALIGN_MIDDLE);
setSelected(bottom, valign == mxConstants.ALIGN_BOTTOM);
let pos = mxUtils.getValue(ss.style, mxConstants.STYLE_LABEL_POSITION, mxConstants.ALIGN_CENTER);
let vpos = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE);
let pos = mxUtils.getValue(ss.style, 'labelPosition', mxConstants.ALIGN_CENTER);
let vpos = mxUtils.getValue(ss.style, 'verticalLabelPosition', mxConstants.ALIGN_MIDDLE);
if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_TOP)
{
@ -3823,7 +3823,7 @@ TextFormatPanel.prototype.addFont = function(container)
positionSelect.value = 'center';
}
let dir = mxUtils.getValue(ss.style, mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION);
let dir = mxUtils.getValue(ss.style, 'textDirection', mxConstants.DEFAULT_TEXT_DIRECTION);
if (dir == mxConstants.TEXT_DIRECTION_RTL)
{
@ -3840,40 +3840,40 @@ TextFormatPanel.prototype.addFont = function(container)
if (force || document.activeElement != globalSpacing)
{
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING, 2));
let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacing', 2));
globalSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
if (force || document.activeElement != topSpacing)
{
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_TOP, 0));
let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingTop', 0));
topSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
if (force || document.activeElement != rightSpacing)
{
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_RIGHT, 0));
let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingRight', 0));
rightSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
if (force || document.activeElement != bottomSpacing)
{
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_BOTTOM, 0));
let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingBottom', 0));
bottomSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
if (force || document.activeElement != leftSpacing)
{
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_LEFT, 0));
let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingLeft', 0));
leftSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
});
globalUpdate = this.installInputHandler(globalSpacing, mxConstants.STYLE_SPACING, 2, -999, 999, ' pt');
topUpdate = this.installInputHandler(topSpacing, mxConstants.STYLE_SPACING_TOP, 0, -999, 999, ' pt');
rightUpdate = this.installInputHandler(rightSpacing, mxConstants.STYLE_SPACING_RIGHT, 0, -999, 999, ' pt');
bottomUpdate = this.installInputHandler(bottomSpacing, mxConstants.STYLE_SPACING_BOTTOM, 0, -999, 999, ' pt');
leftUpdate = this.installInputHandler(leftSpacing, mxConstants.STYLE_SPACING_LEFT, 0, -999, 999, ' pt');
globalUpdate = this.installInputHandler(globalSpacing, 'spacing', 2, -999, 999, ' pt');
topUpdate = this.installInputHandler(topSpacing, 'spacingTop', 0, -999, 999, ' pt');
rightUpdate = this.installInputHandler(rightSpacing, 'spacingRight', 0, -999, 999, ' pt');
bottomUpdate = this.installInputHandler(bottomSpacing, 'spacingBottom', 0, -999, 999, ' pt');
leftUpdate = this.installInputHandler(leftSpacing, 'spacingLeft', 0, -999, 999, ' pt');
this.addKeyHandler(input, listener);
this.addKeyHandler(globalSpacing, listener);
@ -4020,7 +4020,7 @@ TextFormatPanel.prototype.addFont = function(container)
if (!graph.cellEditor.isTableSelected())
{
let align = graph.cellEditor.align || mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER);
let align = graph.cellEditor.align || mxUtils.getValue(ss.style, 'align', mxConstants.ALIGN_CENTER);
if (isEqualOrPrefixed(css.textAlign, 'justify'))
{
@ -4191,7 +4191,7 @@ StyleFormatPanel.prototype.init = function()
this.container.appendChild(this.addStroke(this.createPanel()));
this.container.appendChild(this.addLineJumps(this.createPanel()));
let opacityPanel = this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_OPACITY, 41);
let opacityPanel = this.createRelativeOption(mxResources.get('opacity'), 'opacity', 41);
opacityPanel.style.paddingTop = '8px';
opacityPanel.style.paddingBottom = '8px';
this.container.appendChild(opacityPanel);
@ -4313,7 +4313,7 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem
styleElem.textContent = cssTxt;
let xml = mxUtils.getXml(svg.documentElement);
graph.setCellStyles(mxConstants.STYLE_IMAGE, 'data:image/svg+xml,' +
graph.setCellStyles('image', 'data:image/svg+xml,' +
((window.btoa) ? btoa(xml) : Base64.encode(xml, true)),
graph.getSelectionCells());
}, '#ffffff',
@ -4421,8 +4421,8 @@ StyleFormatPanel.prototype.addFill = function(container)
});
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
let gradientPanel = this.createCellColorOption(mxResources.get('gradient'), mxConstants.STYLE_GRADIENTCOLOR,
(defs[mxConstants.STYLE_GRADIENTCOLOR] != null) ? defs[mxConstants.STYLE_GRADIENTCOLOR] : '#ffffff', function(color)
let gradientPanel = this.createCellColorOption(mxResources.get('gradient'), 'gradientColor',
(defs.gradientColor != null) ? defs.gradientColor : '#ffffff', function(color)
{
if (color == null || color == mxConstants.NONE)
{
@ -4434,10 +4434,10 @@ StyleFormatPanel.prototype.addFill = function(container)
}
}, function(color)
{
graph.updateCellStyles(mxConstants.STYLE_GRADIENTCOLOR, color, graph.getSelectionCells());
graph.updateCellStyles('gradientColor', color, graph.getSelectionCells());
});
let fillKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BACKGROUND : mxConstants.STYLE_FILLCOLOR;
let fillKey = (ss.style.shape == 'image') ? 'imageBackground' : 'fillColor';
let label = (ss.style.shape == 'image') ? mxResources.get('background') : mxResources.get('fill');
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
@ -4477,7 +4477,7 @@ StyleFormatPanel.prototype.addFill = function(container)
let listener = mxUtils.bind(this, function()
{
ss = this.format.getSelectionState();
let value = mxUtils.getValue(ss.style, mxConstants.STYLE_GRADIENT_DIRECTION, mxConstants.DIRECTION_SOUTH);
let value = mxUtils.getValue(ss.style, 'gradientDirection', mxConstants.DIRECTION_SOUTH);
let fillStyle = mxUtils.getValue(ss.style, 'fillStyle', 'auto');
// Handles empty string which is not allowed as a value
@ -4490,7 +4490,7 @@ StyleFormatPanel.prototype.addFill = function(container)
fillStyleSelect.value = fillStyle;
container.style.display = (ss.fill) ? '' : 'none';
let fillColor = mxUtils.getValue(ss.style, mxConstants.STYLE_FILLCOLOR, null);
let fillColor = mxUtils.getValue(ss.style, 'fillColor', null);
if (!ss.fill || ss.containsImage || fillColor == null || fillColor == mxConstants.NONE || ss.style.shape == 'filledEdge')
{
@ -4510,7 +4510,7 @@ StyleFormatPanel.prototype.addFill = function(container)
mxEvent.addListener(gradientSelect, 'change', function(evt)
{
graph.setCellStyles(mxConstants.STYLE_GRADIENT_DIRECTION, gradientSelect.value, graph.getSelectionCells());
graph.setCellStyles('gradientDirection', gradientSelect.value, graph.getSelectionCells());
mxEvent.consume(evt);
});
@ -4593,7 +4593,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
graph.getModel().beginUpdate();
try
{
let keys = [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED];
let keys = ['rounded', 'curved'];
// Default for rounded is 1
let values = ['0', null];
@ -4628,7 +4628,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
mxEvent.consume(evt);
});
let strokeKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BORDER : mxConstants.STYLE_STROKECOLOR;
let strokeKey = (ss.style.shape == 'image') ? 'imageBorder' : 'strokeColor';
let label = (ss.style.shape == 'image') ? mxResources.get('border') : mxResources.get('line');
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
@ -4669,11 +4669,11 @@ StyleFormatPanel.prototype.addStroke = function(container)
let pattern = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu)
{
addItem(menu, 75, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid'));
addItem(menu, 75, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed'));
addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
addItem(menu, 75, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', mxResources.get('solid'));
addItem(menu, 75, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', mxResources.get('dashed'));
addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
}));
// Used for mixed selection (vertices and edges)
@ -4681,19 +4681,19 @@ StyleFormatPanel.prototype.addStroke = function(container)
let edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-connection', mxResources.get('connection'), false, mxUtils.bind(this, function(menu)
{
this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line'));
this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link'));
this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['flexArrow', null, null, null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow'));
this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow'));
this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line'));
this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link'));
this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['flexArrow', null, null, null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow'));
this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow'));
}));
let altPattern = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu)
{
addItem(menu, 33, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid'));
addItem(menu, 33, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed'));
addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
addItem(menu, 33, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', mxResources.get('solid'));
addItem(menu, 33, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', mxResources.get('dashed'));
addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
}));
var stylePanel2 = stylePanel.cloneNode(false);
@ -4716,10 +4716,10 @@ StyleFormatPanel.prototype.addStroke = function(container)
let value = parseInt(input.value);
value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value));
if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1))
if (value != mxUtils.getValue(ss.style, 'strokeWidth', 1))
{
graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells());
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH],
graph.setCellStyles('strokeWidth', value, graph.getSelectionCells());
ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth,
'values', [value], 'cells', graph.getSelectionCells()));
}
@ -4733,10 +4733,10 @@ StyleFormatPanel.prototype.addStroke = function(container)
let value = parseInt(altInput.value);
value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value));
if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1))
if (value != mxUtils.getValue(ss.style, 'strokeWidth', 1))
{
graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells());
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH],
graph.setCellStyles('strokeWidth', value, graph.getSelectionCells());
ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth,
'values', [value], 'cells', graph.getSelectionCells()));
}
@ -4774,19 +4774,19 @@ StyleFormatPanel.prototype.addStroke = function(container)
{
if (ss.style.shape != 'arrow')
{
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
if (ss.style.shape == 'connector')
{
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved'));
}
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation'));
}
}));
@ -4794,47 +4794,47 @@ StyleFormatPanel.prototype.addStroke = function(container)
{
if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge')
{
let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
let item = this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
item.setAttribute('title', mxResources.get('none'));
item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>';
if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge')
{
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-startclassic', null, false).setAttribute('title', mxResources.get('classic'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-startclassicthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-startopen', null, false).setAttribute('title', mxResources.get('openArrow'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-startopenthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['openAsync', 0], 'geIcon geSprite geSprite-startopenasync', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-startblock', null, false).setAttribute('title', mxResources.get('block'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-startblockthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 1], 'geIcon geSprite geSprite-startasync', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-startoval', null, false).setAttribute('title', mxResources.get('oval'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-startdiamond', null, false).setAttribute('title', mxResources.get('diamond'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-startthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-startclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-startclassicthintrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-startblockthintrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 0], 'geIcon geSprite geSprite-startasynctrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-startovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-startdiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-startthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['box', 0], 'geIcon geSprite geSvgSprite geSprite-box', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geSprite-halfCircle', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['dash', 0], 'geIcon geSprite geSprite-startdash', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['cross', 0], 'geIcon geSprite geSprite-startcross', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-startcircleplus', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circle', 1], 'geIcon geSprite geSprite-startcircle', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERone', 0], 'geIcon geSprite geSprite-starterone', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-starteronetoone', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmany', 0], 'geIcon geSprite geSprite-startermany', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-starteronetomany', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-starteroneopt', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-startclassic', null, false).setAttribute('title', mxResources.get('classic'));
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-startclassicthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-startopen', null, false).setAttribute('title', mxResources.get('openArrow'));
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-startopenthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['openAsync', 0], 'geIcon geSprite geSprite-startopenasync', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-startblock', null, false).setAttribute('title', mxResources.get('block'));
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-startblockthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['async', 1], 'geIcon geSprite geSprite-startasync', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-startoval', null, false).setAttribute('title', mxResources.get('oval'));
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-startdiamond', null, false).setAttribute('title', mxResources.get('diamond'));
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-startthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-startclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-startclassicthintrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-startblockthintrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['async', 0], 'geIcon geSprite geSprite-startasynctrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-startovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-startdiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-startthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['box', 0], 'geIcon geSprite geSvgSprite geSprite-box', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geSprite-halfCircle', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['dash', 0], 'geIcon geSprite geSprite-startdash', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['cross', 0], 'geIcon geSprite geSprite-startcross', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-startcircleplus', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['circle', 1], 'geIcon geSprite geSprite-startcircle', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERone', 0], 'geIcon geSprite geSprite-starterone', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-starteronetoone', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERmany', 0], 'geIcon geSprite geSprite-startermany', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-starteronetomany', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-starteroneopt', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false);
}
else
{
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
this.editorUi.menus.edgeStyleChange(menu, '', .startArrow, [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
}
}
}));
@ -4843,47 +4843,47 @@ StyleFormatPanel.prototype.addStroke = function(container)
{
if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge')
{
let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
let item = this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
item.setAttribute('title', mxResources.get('none'));
item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>';
if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge')
{
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-endclassic', null, false).setAttribute('title', mxResources.get('classic'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-endclassicthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-endopen', null, false).setAttribute('title', mxResources.get('openArrow'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-endopenthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['openAsync', 0], 'geIcon geSprite geSprite-endopenasync', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-endblock', null, false).setAttribute('title', mxResources.get('block'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-endblockthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 1], 'geIcon geSprite geSprite-endasync', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-endoval', null, false).setAttribute('title', mxResources.get('oval'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-enddiamond', null, false).setAttribute('title', mxResources.get('diamond'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-endthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-endclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-endclassicthintrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-endblockthintrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 0], 'geIcon geSprite geSprite-endasynctrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-endovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-enddiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-endthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['box', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-box', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-halfCircle', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['dash', 0], 'geIcon geSprite geSprite-enddash', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['cross', 0], 'geIcon geSprite geSprite-endcross', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-endcircleplus', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circle', 1], 'geIcon geSprite geSprite-endcircle', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERone', 0], 'geIcon geSprite geSprite-enderone', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-enderonetoone', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmany', 0], 'geIcon geSprite geSprite-endermany', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-enderonetomany', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-enderoneopt', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-endclassic', null, false).setAttribute('title', mxResources.get('classic'));
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-endclassicthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-endopen', null, false).setAttribute('title', mxResources.get('openArrow'));
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-endopenthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['openAsync', 0], 'geIcon geSprite geSprite-endopenasync', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-endblock', null, false).setAttribute('title', mxResources.get('block'));
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-endblockthin', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['async', 1], 'geIcon geSprite geSprite-endasync', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-endoval', null, false).setAttribute('title', mxResources.get('oval'));
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-enddiamond', null, false).setAttribute('title', mxResources.get('diamond'));
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-endthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-endclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-endclassicthintrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-endblockthintrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['async', 0], 'geIcon geSprite geSprite-endasynctrans', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-endovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-enddiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-endthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['box', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-box', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-halfCircle', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['dash', 0], 'geIcon geSprite geSprite-enddash', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['cross', 0], 'geIcon geSprite geSprite-endcross', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-endcircleplus', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['circle', 1], 'geIcon geSprite geSprite-endcircle', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERone', 0], 'geIcon geSprite geSprite-enderone', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-enderonetoone', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERmany', 0], 'geIcon geSprite geSprite-endermany', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-enderonetomany', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-enderoneopt', null, false);
this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false);
}
else
{
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
this.editorUi.menus.edgeStyleChange(menu, '', .endArrow, [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
}
}
}));
@ -5021,30 +5021,30 @@ StyleFormatPanel.prototype.addStroke = function(container)
if (force || document.activeElement != input)
{
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1));
let tmp = parseInt(mxUtils.getValue(ss.style, 'strokeWidth', 1));
input.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
if (force || document.activeElement != altInput)
{
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1));
let tmp = parseInt(mxUtils.getValue(ss.style, 'strokeWidth', 1));
altInput.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
styleSelect.style.visibility = (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') ? '' : 'hidden';
if (mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1')
if (mxUtils.getValue(ss.style, 'curved', null) == '1')
{
styleSelect.value = 'curved';
}
else if (mxUtils.getValue(ss.style, mxConstants.STYLE_ROUNDED, null) == '1')
else if (mxUtils.getValue(ss.style, 'rounded', null) == '1')
{
styleSelect.value = 'rounded';
}
if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASHED, null) == '1')
if (mxUtils.getValue(ss.style, 'dashed', null) == '1')
{
if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, null) == null)
if (mxUtils.getValue(ss.style, 'dashPattern', null) == null)
{
solid.style.borderBottom = '1px dashed ' + this.defaultStrokeColor;
}
@ -5065,14 +5065,14 @@ StyleFormatPanel.prototype.addStroke = function(container)
if (edgeStyleDiv != null)
{
let es = mxUtils.getValue(ss.style, mxConstants.STYLE_EDGE, null);
let es = mxUtils.getValue(ss.style, 'edge', null);
if (mxUtils.getValue(ss.style, mxConstants.STYLE_NOEDGESTYLE, null) == '1')
if (mxUtils.getValue(ss.style, 'noEdgeStyle', null) == '1')
{
es = null;
}
if (es == 'orthogonalEdgeStyle' && mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1')
if (es == 'orthogonalEdgeStyle' && mxUtils.getValue(ss.style, 'curved', null) == '1')
{
edgeStyleDiv.className = 'geSprite geSprite-curved';
}
@ -5087,13 +5087,13 @@ StyleFormatPanel.prototype.addStroke = function(container)
else if (es == 'elbowEdgeStyle')
{
edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style,
mxConstants.STYLE_ELBOW, null) == 'vertical') ?
'elbow', null) == 'vertical') ?
'geSprite-verticalelbow' : 'geSprite-horizontalelbow');
}
else if (es == 'isometricEdgeStyle')
{
edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style,
mxConstants.STYLE_ELBOW, null) == 'vertical') ?
'elbow', null) == 'vertical') ?
'geSprite-verticalisometric' : 'geSprite-horizontalisometric');
}
else
@ -5160,9 +5160,9 @@ StyleFormatPanel.prototype.addStroke = function(container)
return markerDiv;
};
let sourceDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTARROW, null),
let sourceDiv = updateArrow(mxUtils.getValue(ss.style, 'startArrow', null),
mxUtils.getValue(ss.style, 'startFill', '1'), lineStart, 'start');
let targetDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDARROW, null),
let targetDiv = updateArrow(mxUtils.getValue(ss.style, 'endArrow', null),
mxUtils.getValue(ss.style, 'endFill', '1'), lineEnd, 'end');
// Special cases for markers
@ -5195,40 +5195,40 @@ StyleFormatPanel.prototype.addStroke = function(container)
if (force || document.activeElement != startSize)
{
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE));
let tmp = parseInt(mxUtils.getValue(ss.style, 'startSize', mxConstants.DEFAULT_MARKERSIZE));
startSize.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
if (force || document.activeElement != startSpacing)
{
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0));
let tmp = parseInt(mxUtils.getValue(ss.style, 'sourcePerimeterSpacing', 0));
startSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
if (force || document.activeElement != endSize)
{
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE));
let tmp = parseInt(mxUtils.getValue(ss.style, 'endSize', mxConstants.DEFAULT_MARKERSIZE));
endSize.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
if (force || document.activeElement != startSpacing)
{
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0));
let tmp = parseInt(mxUtils.getValue(ss.style, 'targetPerimeterSpacing', 0));
endSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
if (force || document.activeElement != perimeterSpacing)
{
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_PERIMETER_SPACING, 0));
let tmp = parseInt(mxUtils.getValue(ss.style, 'perimeterSpacing', 0));
perimeterSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
}
});
startSizeUpdate = this.installInputHandler(startSize, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
startSpacingUpdate = this.installInputHandler(startSpacing, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0, -999, 999, ' pt');
endSizeUpdate = this.installInputHandler(endSize, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
endSpacingUpdate = this.installInputHandler(endSpacing, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0, -999, 999, ' pt');
perimeterUpdate = this.installInputHandler(perimeterSpacing, mxConstants.STYLE_PERIMETER_SPACING, 0, 0, 999, ' pt');
startSizeUpdate = this.installInputHandler(startSize, 'startSize', mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
startSpacingUpdate = this.installInputHandler(startSpacing, 'sourcePerimeterSpacing', 0, -999, 999, ' pt');
endSizeUpdate = this.installInputHandler(endSize, 'endSize', mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
endSpacingUpdate = this.installInputHandler(endSpacing, 'targetPerimeterSpacing', 0, -999, 999, ' pt');
perimeterUpdate = this.installInputHandler(perimeterSpacing, 'perimeterSpacing', 0, 0, 999, ' pt');
this.addKeyHandler(input, listener);
this.addKeyHandler(startSize, listener);
@ -5401,7 +5401,7 @@ StyleFormatPanel.prototype.addEffects = function(div)
if (ss.rounded)
{
addOption(mxResources.get('rounded'), mxConstants.STYLE_ROUNDED, 0);
addOption(mxResources.get('rounded'), 'rounded', 0);
}
if (ss.style.shape == 'swimlane')
@ -5411,12 +5411,12 @@ StyleFormatPanel.prototype.addEffects = function(div)
if (!ss.containsImage)
{
addOption(mxResources.get('shadow'), mxConstants.STYLE_SHADOW, 0);
addOption(mxResources.get('shadow'), 'shadow', 0);
}
if (ss.glass)
{
addOption(mxResources.get('glass'), mxConstants.STYLE_GLASS, 0);
addOption(mxResources.get('glass'), 'glass', 0);
}
addOption(mxResources.get('sketch'), 'sketch', 0);
@ -5608,7 +5608,7 @@ DiagramStylePanel.prototype.addView = function(div)
let style = graph.getCellStyle(cells[i]);
// Handles special label background color
if (style['labelBackgroundColor'] != null)
if (style.labelBackgroundColor != null)
{
graph.updateCellStyles('labelBackgroundColor', (graphStyle != null) ?
graphStyle.background : null, [cells[i]]);
@ -5621,8 +5621,8 @@ DiagramStylePanel.prototype.addView = function(div)
for (let j = 0; j < styles.length; j++)
{
if ((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) ||
(styles[j] != mxConstants.STYLE_FILLCOLOR &&
styles[j] != mxConstants.STYLE_STROKECOLOR))
(styles[j] != 'fillColor' &&
styles[j] != 'strokeColor'))
{
newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]);
}
@ -5645,8 +5645,8 @@ DiagramStylePanel.prototype.addView = function(div)
{
if (((style[styles[j]] != null &&
style[styles[j]] != mxConstants.NONE) ||
(styles[j] != mxConstants.STYLE_FILLCOLOR &&
styles[j] != mxConstants.STYLE_STROKECOLOR)))
(styles[j] != 'fillColor' &&
styles[j] != 'strokeColor')))
{
style[styles[j]] = defaultStyle[styles[j]];
}
@ -5684,8 +5684,8 @@ DiagramStylePanel.prototype.addView = function(div)
{
if (cell == null || ((result[key] != null &&
result[key] != mxConstants.NONE) ||
(key != mxConstants.STYLE_FILLCOLOR &&
key != mxConstants.STYLE_STROKECOLOR)))
(key != 'fillColor' &&
key != 'strokeColor')))
{
result[key] = style[key];
}

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

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

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

@ -22,7 +22,7 @@
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)
@ -866,7 +866,7 @@
CardShape.prototype.redrawPath = function(c, x, y, w, h)
{
let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))));
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w, 0), new mxPoint(w, h), new mxPoint(0, h), new mxPoint(0, s)],
this.isRounded, arcSize, true);
c.end();
@ -1093,7 +1093,7 @@
let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
let dx = (fixed) ? Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w, 0), new mxPoint(w - dx, h)],
this.isRounded, arcSize, true);
c.end();
@ -1119,7 +1119,7 @@
let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
let dx = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w - dx, 0), new mxPoint(w, h)],
this.isRounded, arcSize, true);
};
@ -1137,7 +1137,7 @@
{
c.setFillColor(null);
let s = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(w, 0), new mxPoint(s, 0), new mxPoint(s, h / 2),
new mxPoint(0, h / 2), new mxPoint(s, h / 2), new mxPoint(s, h),
new mxPoint(w, h)], this.isRounded, arcSize, false);
@ -1377,7 +1377,7 @@
if (this.style != null)
{
events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
}
if (events || (this.fill != null && this.fill != mxConstants.NONE) ||
@ -1394,14 +1394,14 @@
{
let r = 0;
if (mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1')
if (mxUtils.getValue(this.style, 'absoluteArcSize', 0) == '1')
{
r = Math.min(w / 2, Math.min(h / 2, mxUtils.getValue(this.style,
mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2));
'arcSize', mxConstants.LINE_ARCSIZE) / 2));
}
else
{
let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
let f = mxUtils.getValue(this.style, 'arcSize',
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
r = Math.min(w * f, h * f);
}
@ -1463,7 +1463,7 @@
};
ProcessShape.prototype.getLabelBounds = function(rect)
{
if (mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, true) ==
if (mxUtils.getValue(this.state.style, 'horizontal', true) ==
(this.direction == null ||
this.direction == mxConstants.DIRECTION_EAST ||
this.direction == mxConstants.DIRECTION_WEST))
@ -1476,7 +1476,7 @@
if (this.isRounded)
{
let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
let f = mxUtils.getValue(this.style, 'arcSize',
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
inset = Math.max(inset, Math.min(w * f, h * f));
}
@ -1506,7 +1506,7 @@
if (this.isRounded)
{
let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
let f = mxUtils.getValue(this.style, 'arcSize',
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
inset = Math.max(inset, Math.min(w * f, h * f));
}
@ -1563,7 +1563,7 @@
};
CalloutShape.prototype.redrawPath = function(c, x, y, w, h)
{
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
let s = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
let dx = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position', this.position))));
var dx2 = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position2', this.position2))));
@ -1594,7 +1594,7 @@
let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
let s = (fixed) ? Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) :
w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w - s, 0), new mxPoint(w, h / 2), new mxPoint(w - s, h),
new mxPoint(0, h), new mxPoint(s, h / 2)], this.isRounded, arcSize, true);
c.end();
@ -1619,7 +1619,7 @@
let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
let s = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) :
w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w - s, 0), new mxPoint(w, 0.5 * h), new mxPoint(w - s, h),
new mxPoint(s, h), new mxPoint(0, 0.5 * h)], this.isRounded, arcSize, true);
};
@ -1656,10 +1656,10 @@
let mxRhombusPaintVertexShape = mxRhombus.prototype.paintVertexShape;
mxRhombus.prototype.getLabelBounds = function(rect)
{
if (this.style['double'] == 1)
if (this.style.double == 1)
{
let margin = (Math.max(2, this.strokewidth + 1) * 2 + parseFloat(
this.style[mxConstants.STYLE_MARGIN] || 0)) * this.scale;
this.style['margin'] || 0)) * this.scale;
return new mxRectangle(rect.x + margin, rect.y + margin,
rect.width - 2 * margin, rect.height - 2 * margin);
@ -1671,10 +1671,10 @@
{
mxRhombusPaintVertexShape.apply(this, arguments);
if (!this.outline && this.style['double'] == 1)
if (!this.outline && this.style.double == 1)
{
let margin = Math.max(2, this.strokewidth + 1) * 2 +
parseFloat(this.style[mxConstants.STYLE_MARGIN] || 0);
parseFloat(this.style['margin'] || 0);
x += margin;
y += margin;
w -= 2 * margin;
@ -1703,10 +1703,10 @@
};
ExtendedShape.prototype.getLabelBounds = function(rect)
{
if (this.style['double'] == 1)
if (this.style.double == 1)
{
let margin = (Math.max(2, this.strokewidth + 1) + parseFloat(
this.style[mxConstants.STYLE_MARGIN] || 0)) * this.scale;
this.style['margin'] || 0)) * this.scale;
return new mxRectangle(rect.x + margin, rect.y + margin,
rect.width - 2 * margin, rect.height - 2 * margin);
@ -1719,9 +1719,9 @@
{
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;
y += margin;
w -= 2 * margin;
@ -2069,7 +2069,7 @@
let co = this.corner;
var w0 = Math.min(w, Math.max(co, parseFloat(mxUtils.getValue(this.style, 'width', this.width))));
var h0 = Math.min(h, Math.max(co * 1.5, parseFloat(mxUtils.getValue(this.style, 'height', this.height))));
let bg = mxUtils.getValue(this.style, mxConstants.STYLE_SWIMLANE_FILLCOLOR, mxConstants.NONE);
let bg = mxUtils.getValue(this.style, 'swimlaneFillColor', mxConstants.NONE);
if (bg != mxConstants.NONE)
{
@ -2117,7 +2117,7 @@
size = mxUtils.getValue(vertex.style, 'size', size) * vertex.view.scale;
}
let sw = (parseFloat(vertex.style[mxConstants.STYLE_STROKEWIDTH] || 1) * vertex.view.scale / 2) - 1;
let sw = (parseFloat(vertex.style.strokeWidth || 1) * vertex.view.scale / 2) - 1;
if (next.x < bounds.getCenterX())
{
@ -2142,15 +2142,15 @@
mxPerimeter.BackbonePerimeter = (bounds, vertex, next, orthogonal) =>
{
let sw = (parseFloat(vertex.style[mxConstants.STYLE_STROKEWIDTH] || 1) * vertex.view.scale / 2) - 1;
let sw = (parseFloat(vertex.style.strokeWidth || 1) * vertex.view.scale / 2) - 1;
if (vertex.style['backboneSize'] != null)
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' ||
vertex.style[mxConstants.STYLE_DIRECTION] == 'north')
if (vertex.style.direction == 'south' ||
vertex.style.direction == 'north')
{
if (next.x < bounds.getCenterX())
{
@ -2209,7 +2209,7 @@
let h = bounds.height;
let direction = (vertex != null) ? mxUtils.getValue(
vertex.style, mxConstants.STYLE_DIRECTION,
vertex.style, 'direction',
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
let vertical = direction == mxConstants.DIRECTION_NORTH ||
direction == mxConstants.DIRECTION_SOUTH;
@ -2272,7 +2272,7 @@
let h = bounds.height;
let direction = (vertex != null) ? mxUtils.getValue(
vertex.style, mxConstants.STYLE_DIRECTION,
vertex.style, 'direction',
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
let points = [];
@ -2348,7 +2348,7 @@
let cy = bounds.getCenterY();
let direction = (vertex != null) ? mxUtils.getValue(
vertex.style, mxConstants.STYLE_DIRECTION,
vertex.style, 'direction',
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
var points;
@ -2425,7 +2425,7 @@
let cy = bounds.getCenterY();
let direction = (vertex != null) ? mxUtils.getValue(
vertex.style, mxConstants.STYLE_DIRECTION,
vertex.style, 'direction',
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
let vertical = direction == mxConstants.DIRECTION_NORTH ||
direction == mxConstants.DIRECTION_SOUTH;
@ -2676,7 +2676,7 @@
let hw = w / 2;
let hh = h / 2;
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
c.begin();
this.addPoints(c, [new mxPoint(x + hw, y), new mxPoint(x + w, y + hh), new mxPoint(x + hw, y + h),
new mxPoint(x, y + hh)], this.isRounded, arcSize, true);
@ -2793,7 +2793,7 @@
ManualInputShape.prototype.redrawPath = function(c, x, y, w, h)
{
let s = Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)));
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(0, h), new mxPoint(0, s), new mxPoint(w, 0), new mxPoint(w, h)],
this.isRounded, arcSize, true);
c.end();
@ -2820,7 +2820,7 @@
if (this.isRounded)
{
let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
let f = mxUtils.getValue(this.style, 'arcSize',
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
inset = Math.max(inset, Math.min(w * f, h * f));
}
@ -2859,7 +2859,7 @@
let dy = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, dy), new mxPoint(dx, dy),
new mxPoint(dx, h), new mxPoint(0, h)], this.isRounded, arcSize, true);
c.end();
@ -2908,7 +2908,7 @@
var w2 = Math.abs(w - dx) / 2;
let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, dy), new mxPoint((w + dx) / 2, dy),
new mxPoint((w + dx) / 2, h), new mxPoint((w - dx) / 2, h), new mxPoint((w - dx) / 2, dy),
new mxPoint(0, dy)], this.isRounded, arcSize, true);
@ -2932,7 +2932,7 @@
let at = (h - aw) / 2;
let ab = at + aw;
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(0, at), new mxPoint(w - as, at), new mxPoint(w - as, 0), new mxPoint(w, h / 2),
new mxPoint(w - as, h), new mxPoint(w - as, ab), new mxPoint(0, ab)],
this.isRounded, arcSize, true);
@ -2954,7 +2954,7 @@
let at = (h - aw) / 2;
let ab = at + aw;
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(0, h / 2), new mxPoint(as, 0), new mxPoint(as, at), new mxPoint(w - as, at),
new mxPoint(w - as, 0), new mxPoint(w, h / 2), new mxPoint(w - as, h),
new mxPoint(w - as, ab), new mxPoint(as, ab), new mxPoint(as, h)],
@ -3038,7 +3038,7 @@
LoopLimitShape.prototype.redrawPath = function(c, x, y, w, h)
{
let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w - s, 0), new mxPoint(w, s * 0.8), new mxPoint(w, h),
new mxPoint(0, h), new mxPoint(0, s * 0.8)], this.isRounded, arcSize, true);
c.end();
@ -3060,7 +3060,7 @@
OffPageConnectorShape.prototype.redrawPath = function(c, x, y, w, h)
{
let s = h * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, h - s), new mxPoint(w / 2, h),
new mxPoint(0, h - s)], this.isRounded, arcSize, true);
c.end();
@ -3236,7 +3236,7 @@
if (this.style != null)
{
let pointerEvents = c.pointerEvents;
let events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
let events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
if (!events && (this.fill == null || this.fill == mxConstants.NONE))
{
@ -3760,36 +3760,36 @@
function createArcHandle(state, yOffset)
{
return createHandle(state, [mxConstants.STYLE_ARCSIZE], function(bounds)
return createHandle(state, ['arcSize'], function(bounds)
{
let tmp = (yOffset != null) ? yOffset : bounds.height / 8;
if (mxUtils.getValue(state.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1')
if (mxUtils.getValue(state.style, 'absoluteArcSize', 0) == '1')
{
let arcSize = mxUtils.getValue(state.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(state.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
return new mxPoint(bounds.x + bounds.width - Math.min(bounds.width / 2, arcSize), bounds.y + tmp);
}
else
{
let arcSize = Math.max(0, parseFloat(mxUtils.getValue(state.style,
mxConstants.STYLE_ARCSIZE, mxConstants.RECTANGLE_ROUNDING_FACTOR * 100))) / 100;
'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100))) / 100;
return new mxPoint(bounds.x + bounds.width - Math.min(Math.max(bounds.width / 2, bounds.height / 2),
Math.min(bounds.width, bounds.height) * arcSize), bounds.y + tmp);
}
}, function(bounds, pt, me)
{
if (mxUtils.getValue(state.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1')
if (mxUtils.getValue(state.style, 'absoluteArcSize', 0) == '1')
{
this.state.style[mxConstants.STYLE_ARCSIZE] = Math.round(Math.max(0, Math.min(bounds.width,
this.state.style.arcSize = Math.round(Math.max(0, Math.min(bounds.width,
(bounds.x + bounds.width - pt.x) * 2)));
}
else
{
let f = Math.min(50, Math.max(0, (bounds.width - pt.x + bounds.x) * 100 /
Math.min(bounds.width, bounds.height)));
this.state.style[mxConstants.STYLE_ARCSIZE] = Math.round(f);
this.state.style.arcSize = Math.round(f);
}
});
}
@ -3800,7 +3800,7 @@
{
let handles = [];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
if (mxUtils.getValue(state.style, 'rounded', false))
{
handles.push(createArcHandle(state));
}
@ -3826,10 +3826,10 @@
let fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null;
let size = (fixed) ? (pt.x - bounds.x) : Math.max(0, Math.min(max, (pt.x - bounds.x) / bounds.width * 0.75));
this.state.style['size'] = size;
this.state.style.size = size;
}, false, true)];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
if (mxUtils.getValue(state.style, 'rounded', false))
{
handles.push(createArcHandle(state));
}
@ -3855,10 +3855,10 @@
let fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null;
let size = (fixed) ? (pt.x - bounds.x) : Math.max(0, Math.min(max, (pt.x - bounds.x) / bounds.width));
this.state.style['size'] = size;
this.state.style.size = size;
}, false, redrawEdges)];
if (allowArcHandle && mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false))
{
handles.push(createArcHandle(state));
}
@ -3879,11 +3879,11 @@
return new mxPoint(bounds.x + size, bounds.y + size);
}, function(bounds, pt)
{
this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, pt.x - bounds.x),
this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, pt.x - bounds.x),
Math.min(bounds.height, pt.y - bounds.y))) / factor);
}, false)];
if (allowArcHandle && mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false))
{
handles.push(createArcHandle(state));
}
@ -3903,7 +3903,7 @@
return new mxPoint(bounds.x, bounds.y + size);
}, function(bounds, pt)
{
this.state.style['size'] = Math.max(0, pt.y - bounds.y);
this.state.style.size = Math.max(0, pt.y - bounds.y);
}, true)];
}
};
@ -3920,8 +3920,8 @@
return new mxPoint(bounds.x + (1 - as) * bounds.width, bounds.y + (1 - aw) * bounds.height / 2);
}, function(bounds, pt)
{
this.state.style['arrowWidth'] = Math.max(0, Math.min(1, Math.abs(bounds.y + bounds.height / 2 - pt.y) / bounds.height * 2));
this.state.style['arrowSize'] = Math.max(0, Math.min(maxSize, (bounds.x + bounds.width - pt.x) / (bounds.width)));
this.state.style.arrowWidth = Math.max(0, Math.min(1, Math.abs(bounds.y + bounds.height / 2 - pt.y) / bounds.height * 2));
this.state.style.arrowSize = Math.max(0, Math.min(maxSize, (bounds.x + bounds.width - pt.x) / (bounds.width)));
})];
};
};
@ -3977,7 +3977,7 @@
}, function(dist, nx, ny, p0, p1, pt)
{
let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
state.style['width'] = Math.round(w * 2) / state.view.scale - spacing;
state.style.width = Math.round(w * 2) / state.view.scale - spacing;
});
};
@ -3999,12 +3999,12 @@
let tol = state.view.graph.gridSize / state.view.scale;
let handles = [];
if (mxUtils.getValue(state.style, mxConstants.STYLE_STARTARROW, mxConstants.NONE) != mxConstants.NONE)
if (mxUtils.getValue(state.style, 'startArrow', mxConstants.NONE) != mxConstants.NONE)
{
handles.push(createEdgeHandle(state, ['width', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], true, function(dist, nx, ny, p0, p1)
handles.push(createEdgeHandle(state, ['width', 'startSize', 'endSize'], true, function(dist, nx, ny, p0, p1)
{
let w = (state.shape.getEdgeWidth() - state.shape.strokewidth) * state.view.scale;
let l = mxUtils.getNumber(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
let l = mxUtils.getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) + ny * w / 2,
p0.y + ny * (l + state.shape.strokewidth * state.view.scale) - nx * w / 2);
@ -4013,29 +4013,29 @@
let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
state.style[mxConstants.STYLE_STARTSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
state.style['width'] = Math.round(w * 2) / state.view.scale;
state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
state.style.width = Math.round(w * 2) / state.view.scale;
// Applies to opposite side
if (mxEvent.isControlDown(me.getEvent()))
{
state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
state.style.endSize = state.style.startSize;
}
// Snaps to end geometry
if (!mxEvent.isAltDown(me.getEvent()))
{
if (Math.abs(parseFloat(state.style[mxConstants.STYLE_STARTSIZE]) - parseFloat(state.style[mxConstants.STYLE_ENDSIZE])) < tol / 6)
if (Math.abs(parseFloat(state.style.startSize) - parseFloat(state.style.endSize)) < tol / 6)
{
state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
state.style.startSize = state.style.endSize;
}
}
}));
handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], true, function(dist, nx, ny, p0, p1)
handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', 'startSize', 'endSize'], true, function(dist, nx, ny, p0, p1)
{
let w = (state.shape.getStartArrowWidth() - state.shape.strokewidth) * state.view.scale;
let l = mxUtils.getNumber(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
let l = mxUtils.getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) + ny * w / 2,
p0.y + ny * (l + state.shape.strokewidth * state.view.scale) - nx * w / 2);
@ -4044,38 +4044,38 @@
let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
state.style[mxConstants.STYLE_STARTSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
state.style['startWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
state.style.startWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
// Applies to opposite side
if (mxEvent.isControlDown(me.getEvent()))
{
state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
state.style['endWidth'] = state.style['startWidth'];
state.style.endSize = state.style.startSize;
state.style.endWidth = state.style.startWidth;
}
// Snaps to endWidth
if (!mxEvent.isAltDown(me.getEvent()))
{
if (Math.abs(parseFloat(state.style[mxConstants.STYLE_STARTSIZE]) - parseFloat(state.style[mxConstants.STYLE_ENDSIZE])) < tol / 6)
if (Math.abs(parseFloat(state.style.startSize) - parseFloat(state.style.endSize)) < tol / 6)
{
state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
state.style.startSize = state.style.endSize;
}
if (Math.abs(parseFloat(state.style['startWidth']) - parseFloat(state.style['endWidth'])) < tol)
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 l = mxUtils.getNumber(state.style, mxConstants.STYLE_ENDSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
let l = mxUtils.getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) - ny * w / 2,
p0.y + ny * (l + state.shape.strokewidth * state.view.scale) + nx * w / 2);
@ -4084,29 +4084,29 @@
let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
state.style[mxConstants.STYLE_ENDSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
state.style['width'] = Math.round(w * 2) / state.view.scale;
state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
state.style.width = Math.round(w * 2) / state.view.scale;
// Applies to opposite side
if (mxEvent.isControlDown(me.getEvent()))
{
state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
state.style.startSize = state.style.endSize;
}
// Snaps to start geometry
if (!mxEvent.isAltDown(me.getEvent()))
{
if (Math.abs(parseFloat(state.style[mxConstants.STYLE_ENDSIZE]) - parseFloat(state.style[mxConstants.STYLE_STARTSIZE])) < tol / 6)
if (Math.abs(parseFloat(state.style.endSize) - parseFloat(state.style.startSize)) < tol / 6)
{
state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
state.style.endSize = state.style.startSize;
}
}
}));
handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], false, function(dist, nx, ny, p0, p1)
handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', 'startSize', 'endSize'], false, function(dist, nx, ny, p0, p1)
{
let w = (state.shape.getEndArrowWidth() - state.shape.strokewidth) * state.view.scale;
let l = mxUtils.getNumber(state.style, mxConstants.STYLE_ENDSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
let l = mxUtils.getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) - ny * w / 2,
p0.y + ny * (l + state.shape.strokewidth * state.view.scale) + nx * w / 2);
@ -4115,27 +4115,27 @@
let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
state.style[mxConstants.STYLE_ENDSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
state.style['endWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
state.style.endWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
// Applies to opposite side
if (mxEvent.isControlDown(me.getEvent()))
{
state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
state.style['startWidth'] = state.style['endWidth'];
state.style.startSize = state.style.endSize;
state.style.startWidth = state.style.endWidth;
}
// Snaps to start geometry
if (!mxEvent.isAltDown(me.getEvent()))
{
if (Math.abs(parseFloat(state.style[mxConstants.STYLE_ENDSIZE]) - parseFloat(state.style[mxConstants.STYLE_STARTSIZE])) < tol / 6)
if (Math.abs(parseFloat(state.style.endSize) - parseFloat(state.style.startSize)) < tol / 6)
{
state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
state.style.endSize = state.style.startSize;
}
if (Math.abs(parseFloat(state.style['endWidth']) - parseFloat(state.style['startWidth'])) < tol)
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 = [];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED))
if (mxUtils.getValue(state.style, 'rounded'))
{
let size = parseFloat(mxUtils.getValue(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_STARTSIZE));
let size = parseFloat(mxUtils.getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE));
handles.push(createArcHandle(state, size / 2));
}
// Start size handle must be last item in handles for hover to work in tables (see mouse event handler in Graph)
handles.push(createHandle(state, [mxConstants.STYLE_STARTSIZE], function(bounds)
handles.push(createHandle(state, .startSize, function(bounds)
{
let size = parseFloat(mxUtils.getValue(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_STARTSIZE));
let size = parseFloat(mxUtils.getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE));
if (mxUtils.getValue(state.style, mxConstants.STYLE_HORIZONTAL, 1) == 1)
if (mxUtils.getValue(state.style, 'horizontal', 1) == 1)
{
return new mxPoint(bounds.getCenterX(), bounds.y + Math.max(0, Math.min(bounds.height, size)));
}
@ -4168,8 +4168,8 @@
}
}, function(bounds, pt)
{
state.style[mxConstants.STYLE_STARTSIZE] =
(mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, 1) == 1) ?
state.style.startSize =
(mxUtils.getValue(this.state.style, 'horizontal', 1) == 1) ?
Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))) :
Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
}, false, null, function(me)
@ -4196,8 +4196,8 @@
}
}
graph.setCellStyles(mxConstants.STYLE_STARTSIZE,
state.style[mxConstants.STYLE_STARTSIZE], temp);
graph.setCellStyles('startSize',
state.style.startSize, temp);
}
}
}));
@ -4218,7 +4218,7 @@
return new mxPoint(bounds.getCenterX(), bounds.y + size);
}, function(bounds, pt)
{
this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
}, false)];
},
'umlFrame': function(state)
@ -4231,8 +4231,8 @@
return new mxPoint(bounds.x + w0, bounds.y + h0);
}, function(bounds, pt)
{
this.state.style['width'] = Math.round(Math.max(UmlFrame.prototype.corner, Math.min(bounds.width, pt.x - bounds.x)));
this.state.style['height'] = Math.round(Math.max(UmlFrame.prototype.corner * 1.5, Math.min(bounds.height, pt.y - bounds.y)));
this.state.style.width = Math.round(Math.max(UmlFrame.prototype.corner, Math.min(bounds.width, pt.x - bounds.x)));
this.state.style.height = Math.round(Math.max(UmlFrame.prototype.corner * 1.5, Math.min(bounds.height, pt.y - bounds.y)));
}, false)];
return handles;
@ -4250,10 +4250,10 @@
{
let fixed = mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0';
let size = (fixed) ? Math.max(0, Math.min(bounds.width * 0.5, (pt.x - bounds.x))) : Math.max(0, Math.min(0.5, (pt.x - bounds.x) / bounds.width));
this.state.style['size'] = size;
this.state.style.size = size;
}, false)];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
if (mxUtils.getValue(state.style, 'rounded', false))
{
handles.push(createArcHandle(state));
}
@ -4271,7 +4271,7 @@
}, function(bounds, pt)
{
let m = Math.min(bounds.width, bounds.height);
this.state.style['size'] = Math.max(0, Math.min(1, Math.min((Math.max(0, bounds.getCenterY() - pt.y) / m) * 2,
this.state.style.size = Math.max(0, Math.min(1, Math.min((Math.max(0, bounds.getCenterY() - pt.y) / m) * 2,
(Math.max(0, bounds.getCenterX() - pt.x) / m) * 2)));
})];
},
@ -4285,7 +4285,7 @@
return new mxPoint(bounds.x + bounds.width - size, bounds.y + size);
}, function(bounds, pt)
{
this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x),
this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x),
Math.min(bounds.height, pt.y - bounds.y))));
})];
},
@ -4299,7 +4299,7 @@
return new mxPoint(bounds.x + bounds.width - size, bounds.y + size);
}, function(bounds, pt)
{
this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x),
this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x),
Math.min(bounds.height, pt.y - bounds.y))));
})];
},
@ -4312,10 +4312,10 @@
return new mxPoint(bounds.x + bounds.width / 4, bounds.y + size * 3 / 4);
}, function(bounds, pt)
{
this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * 4 / 3)));
this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * 4 / 3)));
}, false)];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
if (mxUtils.getValue(state.style, 'rounded', false))
{
handles.push(createArcHandle(state));
}
@ -4335,7 +4335,7 @@
let fixed = mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0';
let size = (fixed) ? Math.max(0, Math.min(bounds.width, (bounds.x + bounds.width - pt.x))) : Math.max(0, Math.min(1, (bounds.x + bounds.width - pt.x) / bounds.width));
this.state.style['size'] = size;
this.state.style.size = size;
}, false)];
},
'callout': function(state)
@ -4350,8 +4350,8 @@
}, function(bounds, pt)
{
let base = Math.max(0, Math.min(bounds.width, mxUtils.getValue(this.state.style, 'base', CalloutShape.prototype.base)));
this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y)));
this.state.style['position'] = Math.round(Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width)) * 100) / 100;
this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y)));
this.state.style.position = Math.round(Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width)) * 100) / 100;
}, false), createHandle(state, ['position2'], function(bounds)
{
var position2 = Math.max(0, Math.min(1, mxUtils.getValue(this.state.style, 'position2', CalloutShape.prototype.position2)));
@ -4371,10 +4371,10 @@
{
let position = Math.max(0, Math.min(1, mxUtils.getValue(this.state.style, 'position', CalloutShape.prototype.position)));
this.state.style['base'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x - position * bounds.width)));
this.state.style.base = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x - position * bounds.width)));
}, false)];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
if (mxUtils.getValue(state.style, 'rounded', false))
{
handles.push(createArcHandle(state));
}
@ -4391,11 +4391,11 @@
return new mxPoint(bounds.x + dx, bounds.y + dy);
}, function(bounds, pt)
{
this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
}, false)];
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
if (mxUtils.getValue(state.style, 'rounded', false))
{
handles.push(createArcHandle(state));
}
@ -4412,8 +4412,8 @@
return new mxPoint(bounds.x + dx / 2, bounds.y + dy * 2);
}, function(bounds, pt)
{
this.state.style['jettyWidth'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)) * 2);
this.state.style['jettyHeight'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)) / 2);
this.state.style.jettyWidth = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)) * 2);
this.state.style.jettyHeight = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)) / 2);
})];
return handles;
@ -4428,8 +4428,8 @@
return new mxPoint(bounds.x + dx, bounds.y + dy);
}, function(bounds, pt)
{
this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
}, false)];
},
'tee': function(state)
@ -4442,8 +4442,8 @@
return new mxPoint(bounds.x + (bounds.width + dx) / 2, bounds.y + dy);
}, function(bounds, pt)
{
this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width / 2, (pt.x - bounds.x - bounds.width / 2)) * 2));
this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width / 2, (pt.x - bounds.x - bounds.width / 2)) * 2));
this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
}, false)];
},
'singleArrow': createArrowHandleFunction(1),
@ -4470,8 +4470,8 @@
tw = bounds.width - tw;
}
this.state.style['tabWidth'] = Math.round(tw);
this.state.style['tabHeight'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
this.state.style.tabWidth = Math.round(tw);
this.state.style.tabHeight = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
}, false)];
},
'document': function(state)
@ -4483,7 +4483,7 @@
return new mxPoint(bounds.x + 3 * bounds.width / 4, bounds.y + (1 - size) * bounds.height);
}, function(bounds, pt)
{
this.state.style['size'] = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height));
this.state.style.size = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height));
}, false)];
},
'tape': function(state)
@ -4495,7 +4495,7 @@
return new mxPoint(bounds.getCenterX(), bounds.y + size * bounds.height / 2);
}, function(bounds, pt)
{
this.state.style['size'] = Math.max(0, Math.min(1, ((pt.y - bounds.y) / bounds.height) * 2));
this.state.style.size = Math.max(0, Math.min(1, ((pt.y - bounds.y) / bounds.height) * 2));
}, false)];
},
'isoCube2' : function(state)
@ -4508,7 +4508,7 @@
return new mxPoint(bounds.x, bounds.y + isoH);
}, function(bounds, pt)
{
this.state.style['isoAngle'] = Math.max(0, (pt.y - bounds.y) * 50 / bounds.height);
this.state.style.isoAngle = Math.max(0, (pt.y - bounds.y) * 50 / bounds.height);
}, true)];
},
'cylinder2' : createCylinderHandleFunction(CylinderShape.prototype.size),
@ -4522,7 +4522,7 @@
return new mxPoint(bounds.getCenterX(), bounds.y + (1 - size) * bounds.height);
}, function(bounds, pt)
{
this.state.style['size'] = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height));
this.state.style.size = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height));
}, false)];
},
'step': createDisplayHandleFunction(StepShape.prototype.size, true, null, true, StepShape.prototype.fixedSize),
@ -4550,7 +4550,7 @@
// LATER: Make locked state independent of rotatable flag, fix toggle if default is false
//if (this.graph.isCellResizable(this.state.cell) || this.graph.isCellMovable(this.state.cell))
{
let name = this.state.style['shape'];
let name = this.state.style.shape;
if (mxCellRenderer.defaultShapes[name] == null &&
mxStencilRegistry.getStencil(name) == null)
@ -4592,7 +4592,7 @@
mxEdgeHandler.prototype.createCustomHandles = function()
{
let name = this.state.style['shape'];
let name = this.state.style.shape;
if (mxCellRenderer.defaultShapes[name] == null &&
mxStencilRegistry.getStencil(name) == null)
@ -4777,7 +4777,7 @@
CalloutShape.prototype.getConstraints = function(style, w, h)
{
let constr = [];
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
let s = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
let dx = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position', this.position))));
var dx2 = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position2', this.position2))));

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
if (style[mxConstants.STYLE_SHAPE] == 'umlLifeline' &&
sourceCellStyle[mxConstants.STYLE_SHAPE] != 'umlLifeline')
if (style.shape == 'umlLifeline' &&
sourceCellStyle.shape != 'umlLifeline')
{
graph.setCellStyles(mxConstants.STYLE_SHAPE, 'umlLifeline', [targetCell]);
graph.setCellStyles('participant', sourceCellStyle[mxConstants.STYLE_SHAPE], [targetCell]);
graph.setCellStyles('shape', 'umlLifeline', [targetCell]);
graph.setCellStyles('participant', sourceCellStyle.shape, [targetCell]);
}
for (let j = 0; j < styles.length; j++)
@ -3143,8 +3143,8 @@ Sidebar.prototype.isDropStyleEnabled = function(cells, firstVertex)
if (vstyle != null)
{
result = mxUtils.getValue(vstyle, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE) != mxConstants.NONE ||
mxUtils.getValue(vstyle, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) != mxConstants.NONE;
result = mxUtils.getValue(vstyle, 'strokeColor', mxConstants.NONE) != mxConstants.NONE ||
mxUtils.getValue(vstyle, 'fillColor', mxConstants.NONE) != mxConstants.NONE;
}
}
@ -3498,11 +3498,11 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
// Shift means disabled, delayed on cells with children, shows after this.dropTargetDelay, hides after 2500ms
if (dropStyleEnabled && (timeOnTarget < 2500) && state != null && !mxEvent.isShiftDown(evt) &&
// If shape is equal or target has no stroke, fill and gradient then use longer delay except for images
(((mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE) != mxUtils.getValue(sourceCellStyle, mxConstants.STYLE_SHAPE) &&
(mxUtils.getValue(state.style, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE) != mxConstants.NONE ||
mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) != mxConstants.NONE ||
mxUtils.getValue(state.style, mxConstants.STYLE_GRADIENTCOLOR, mxConstants.NONE) != mxConstants.NONE)) ||
mxUtils.getValue(sourceCellStyle, mxConstants.STYLE_SHAPE) == 'image') ||
(((mxUtils.getValue(state.style, 'shape') != mxUtils.getValue(sourceCellStyle, 'shape') &&
(mxUtils.getValue(state.style, 'strokeColor', mxConstants.NONE) != mxConstants.NONE ||
mxUtils.getValue(state.style, 'fillColor', mxConstants.NONE) != mxConstants.NONE ||
mxUtils.getValue(state.style, 'gradientColor', mxConstants.NONE) != mxConstants.NONE)) ||
mxUtils.getValue(sourceCellStyle, 'shape') == 'image') ||
timeOnTarget > 1500 || state.cell.isEdge()) && (timeOnTarget > this.dropTargetDelay) &&
!this.isDropStyleTargetIgnored(state) && ((state.cell.isVertex() && firstVertex != null) ||
(state.cell.isEdge() && cells[0].isEdge())))
@ -3739,7 +3739,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells,
arrowLeft.style.left = Math.floor(bds.x - this.triangleLeft.width) + 'px';
arrowLeft.style.top = arrowRight.style.top;
if (state.style['portConstraint'] != 'eastwest')
if (state.style.portConstraint != 'eastwest')
{
graph.container.appendChild(arrowUp);
graph.container.appendChild(arrowDown);

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.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_SHAPE, 'width'], [null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_SHAPE, 'width'], ['link', null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_SHAPE, 'width'], ['flexArrow', null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_SHAPE, 'width'], ['arrow', null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow'));
this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], [null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line'));
this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], ['link', null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link'));
this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], ['flexArrow', null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow'));
this.editorUi.menus.edgeStyleChange(menu, '', ['shape', 'width'], ['arrow', null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow'));
}));
this.addDropDownArrow(this.edgeShapeMenu, 'geSprite-connection', 44, 50, 0, 0, 22, -4);
@ -154,14 +154,14 @@ Toolbar.prototype.init = function()
this.edgeStyleMenu = this.addMenuFunction('geSprite-orthogonal', mxResources.get('waypoints'), false, mxUtils.bind(this, function(menu)
{
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved'));
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved'));
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation'));
}));
this.addDropDownArrow(this.edgeStyleMenu, 'geSprite-orthogonal', 44, 50, 0, 0, 22, -4);

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

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

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

@ -9,13 +9,13 @@ import {
DIALECT_SVG,
HIGHLIGHT_OPACITY,
HIGHLIGHT_STROKEWIDTH,
STYLE_ROTATION,
} from '../util/mxConstants';
import mxEvent from '../util/event/mxEvent';
import mxRectangle from '../util/datatypes/mxRectangle';
import mxCellState from '../view/cell/mxCellState';
import mxGraph from '../view/graph/mxGraph';
import mxShape from '../shape/mxShape';
import { ColorValue } from '../types';
/**
* 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 {
constructor(
graph: mxGraph | null = null,
highlightColor: string = DEFAULT_VALID_COLOR,
strokeWidth: number = HIGHLIGHT_STROKEWIDTH,
dashed: boolean = false
graph: mxGraph,
highlightColor: ColorValue = DEFAULT_VALID_COLOR,
strokeWidth = HIGHLIGHT_STROKEWIDTH,
dashed = false
) {
if (graph != null) {
this.graph = graph;
this.highlightColor = highlightColor;
this.strokeWidth = strokeWidth;
@ -71,16 +70,15 @@ class mxCellHighlight {
this.graph.getView().addListener(mxEvent.DOWN, this.resetHandler);
this.graph.getView().addListener(mxEvent.UP, this.resetHandler);
}
}
// 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;
@ -90,35 +88,30 @@ class mxCellHighlight {
* Specifies if the highlights should appear on top of everything else in the overlay pane.
* @default false
*/
// keepOnTop: boolean;
keepOnTop: boolean = false;
keepOnTop = false;
/**
* Reference to the enclosing {@link mxGraph}.
* @default true
*/
// graph: boolean;
graph: mxGraph | null = null;
graph: mxGraph;
/**
* Reference to the {@link mxCellState}.
* @default null
*/
// state: mxCellState;
state: mxCellState | null = null;
/**
* Specifies the spacing between the highlight for vertices and the vertex.
* @default 2
*/
// spacing: number;
spacing: number = 2;
spacing = 2;
/**
* Holds the handler that automatically invokes reset if the highlight should be hidden.
* @default null
*/
// resetHandler: any;
resetHandler: Function | null = null;
/**
@ -126,11 +119,10 @@ class mxCellHighlight {
*
* @param {string} color - String that represents the new highlight color.
*/
// setHighlightColor(color: string): void;
setHighlightColor(color: string): void {
setHighlightColor(color: ColorValue) {
this.highlightColor = color;
if (this.shape != null) {
if (this.shape) {
this.shape.stroke = color;
}
}
@ -138,21 +130,17 @@ class mxCellHighlight {
/**
* Creates and returns the highlight shape for the given state.
*/
// drawHighlight(): void;
drawHighlight(): void {
drawHighlight() {
this.shape = this.createShape();
this.repaint();
const node = this.shape?.node;
if (
!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(
// @ts-ignore
this.shape.node,
// @ts-ignore
this.shape.node.parentNode.firstChild
);
}
@ -161,10 +149,9 @@ class mxCellHighlight {
/**
* Creates and returns the highlight shape for the given state.
*/
// createShape(): mxShape;
createShape(): mxShape {
createShape() {
const shape = <mxShape>(
(<mxGraph>this.graph).cellRenderer.createShape(<mxCellState>this.state)
this.graph.cellRenderer.createShape(<mxCellState>this.state)
);
shape.svgStrokeTolerance = (<mxGraph>this.graph).tolerance;
@ -216,7 +203,7 @@ class mxCellHighlight {
this.state.width + 2 * this.spacing,
this.state.height + 2 * this.spacing
);
this.shape.rotation = Number(this.state.style[STYLE_ROTATION] || '0');
this.shape.rotation = Number(this.state.style.rotation || '0');
this.shape.strokewidth =
<number>this.getStrokeWidth() / this.state.view.scale;
this.shape.outline = true;

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 mxEvent from '../util/event/mxEvent';
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
@ -58,34 +63,33 @@ import mxUtils from '../util/mxUtils';
* <mxConstants.DEFAULT_HOTSPOT>.
*/
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();
if (graph != null) {
this.graph = graph;
this.validColor = validColor != null ? validColor : DEFAULT_VALID_COLOR;
this.invalidColor =
invalidColor != null ? invalidColor : DEFAULT_INVALID_COLOR;
this.hotspot = hotspot != null ? hotspot : DEFAULT_HOTSPOT;
this.validColor = validColor;
this.invalidColor = invalidColor;
this.hotspot = hotspot;
this.highlight = new mxCellHighlight(graph);
}
}
/**
* Variable: graph
*
* Reference to the enclosing <mxGraph>.
*/
// graph: mxGraph;
graph = null;
graph: mxGraph;
/**
* Variable: enabled
*
* Specifies if the marker is enabled. Default is true.
*/
// enabled: boolean;
enabled = true;
/**
@ -96,7 +100,6 @@ class mxCellMarker extends mxEventSource {
* as the hotspot. Possible values are between 0 and 1. Default is
* mxConstants.DEFAULT_HOTSPOT.
*/
// hotspot: number;
hotspot = DEFAULT_HOTSPOT;
/**
@ -104,7 +107,6 @@ class mxCellMarker extends mxEventSource {
*
* Specifies if the hotspot is enabled. Default is false.
*/
// hotspotEnabled: boolean;
hotspotEnabled = false;
/**
@ -112,40 +114,37 @@ class mxCellMarker extends mxEventSource {
*
* Holds the valid marker color.
*/
// validColor: string;
validColor = null;
validColor: ColorValue;
/**
* Variable: invalidColor
*
* Holds the invalid marker color.
*/
// invalidColor: string;
invalidColor = null;
invalidColor: ColorValue;
/**
* Variable: currentColor
*
* Holds the current marker color.
*/
// currentColor: string;
currentColor = null;
currentColor: ColorValue | null = null;
/**
* Variable: validState
*
* Holds the marked <mxCellState> if it is valid.
*/
// validState: mxCellState;
validState = null;
validState: mxCellState | null = null;
/**
* Variable: markedState
*
* Holds the marked <mxCellState>.
*/
// markedState: mxCellState;
markedState = null;
markedState: mxCellState | null = null;
highlight: mxCellHighlight;
/**
* Function: setEnabled
@ -157,8 +156,7 @@ class mxCellMarker extends mxEventSource {
*
* enabled - Boolean that specifies the new enabled state.
*/
// setEnabled(enabled: boolean): void;
setEnabled(enabled) {
setEnabled(enabled: boolean) {
this.enabled = enabled;
}
@ -168,7 +166,6 @@ class mxCellMarker extends mxEventSource {
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
// isEnabled(): boolean;
isEnabled() {
return this.enabled;
}
@ -178,8 +175,7 @@ class mxCellMarker extends mxEventSource {
*
* Sets the <hotspot>.
*/
// setHotspot(hotspot: number): void;
setHotspot(hotspot) {
setHotspot(hotspot: number) {
this.hotspot = hotspot;
}
@ -188,7 +184,6 @@ class mxCellMarker extends mxEventSource {
*
* Returns the <hotspot>.
*/
// getHotspot(): number;
getHotspot() {
return this.hotspot;
}
@ -198,8 +193,7 @@ class mxCellMarker extends mxEventSource {
*
* Specifies whether the hotspot should be used in <intersects>.
*/
// setHotspotEnabled(enabled: boolean): void;
setHotspotEnabled(enabled) {
setHotspotEnabled(enabled: boolean) {
this.hotspotEnabled = enabled;
}
@ -208,7 +202,6 @@ class mxCellMarker extends mxEventSource {
*
* Returns true if hotspot is used in <intersects>.
*/
// isHotspotEnabled(): boolean;
isHotspotEnabled() {
return this.hotspotEnabled;
}
@ -218,9 +211,8 @@ class mxCellMarker extends mxEventSource {
*
* Returns true if <validState> is not null.
*/
// hasValidState(): boolean;
hasValidState() {
return this.validState != null;
return !!this.validState;
}
/**
@ -228,7 +220,6 @@ class mxCellMarker extends mxEventSource {
*
* Returns the <validState>.
*/
// getValidState(): mxCellState;
getValidState() {
return this.validState;
}
@ -238,7 +229,6 @@ class mxCellMarker extends mxEventSource {
*
* Returns the <markedState>.
*/
// getMarkedState(): mxCellState;
getMarkedState() {
return this.markedState;
}
@ -248,11 +238,10 @@ class mxCellMarker extends mxEventSource {
*
* Resets the state of the cell marker.
*/
// reset(): void;
reset() {
this.validState = null;
if (this.markedState != null) {
if (this.markedState) {
this.markedState = null;
this.unmark();
}
@ -268,8 +257,7 @@ class mxCellMarker extends mxEventSource {
* regardless of the marker color. The state is returned regardless of the
* marker color and valid state.
*/
// process(me: mxMouseEvent): mxCellState;
process(me) {
process(me: mxMouseEvent) {
let state = null;
if (this.isEnabled()) {
@ -285,13 +273,13 @@ class mxCellMarker extends mxEventSource {
*
* Sets and marks the current valid state.
*/
// setCurrentState(state: mxCellState, me: mxMouseEvent, color: string): void;
setCurrentState(state, me, color) {
const isValid = state != null ? this.isValidState(state) : false;
color =
color != null
? color
: this.getMarkerColor(me.getEvent(), state, isValid);
setCurrentState(
state: mxCellState,
me: mxMouseEvent,
color: ColorValue = null
) {
const isValid = state ? this.isValidState(state) : false;
color = color ?? this.getMarkerColor(me.getEvent(), state, isValid);
if (isValid) {
this.validState = state;
@ -302,10 +290,10 @@ class mxCellMarker extends mxEventSource {
if (state !== this.markedState || color !== this.currentColor) {
this.currentColor = color;
if (state != null && this.currentColor != null) {
if (state && this.currentColor) {
this.markedState = state;
this.mark();
} else if (this.markedState != null) {
} else if (this.markedState) {
this.markedState = null;
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.
*/
// markCell(cell: mxCell, color: string): void;
markCell(cell, color) {
markCell(cell: mxCell, color: ColorValue) {
const state = this.graph.getView().getState(cell);
if (state != null) {
this.currentColor = color != null ? color : this.validColor;
if (state) {
this.currentColor = color ?? this.validColor;
this.markedState = state;
this.mark();
}
@ -333,7 +320,6 @@ class mxCellMarker extends mxEventSource {
*
* Marks the <markedState> and fires a <mark> event.
*/
// mark(): void;
mark() {
this.highlight.setHighlightColor(this.currentColor);
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,
OUTLINE_HIGHLIGHT_COLOR,
OUTLINE_HIGHLIGHT_STROKEWIDTH,
STYLE_ENTRY_X,
STYLE_ENTRY_Y,
STYLE_EXIT_X,
STYLE_EXIT_Y,
STYLE_ROTATION,
TOOLTIP_VERTICAL_OFFSET,
VALID_COLOR,
} from '../util/mxConstants';
@ -40,6 +35,11 @@ import {
isConsumed,
isShiftDown,
} 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
@ -198,22 +198,20 @@ import {
* the <mxCell> that represents the new edge.
*/
class mxConnectionHandler extends mxEventSource {
constructor(graph, factoryMethod) {
constructor(graph: mxGraph, factoryMethod: FactoryMethod | null = null) {
super();
if (graph != null) {
this.graph = graph;
this.factoryMethod = factoryMethod;
this.init();
// Handles escape keystrokes
this.escapeHandler = (sender, evt) => {
this.escapeHandler = () => {
this.reset();
};
this.graph.addListener(mxEvent.ESCAPE, this.escapeHandler);
}
}
/**
* Variable: graph
@ -221,7 +219,7 @@ class mxConnectionHandler extends mxEventSource {
* Reference to the enclosing <mxGraph>.
*/
// graph: mxGraph;
graph = null;
graph: mxGraph;
/**
* Variable: factoryMethod
@ -231,7 +229,7 @@ class mxConnectionHandler extends mxEventSource {
* a new <mxCell> that represents the edge. This is used in <createEdge>.
*/
// factoryMethod: (source: mxCell, target: mxCell, style?: string) => mxCell;
factoryMethod = true;
factoryMethod: FactoryMethod | null = null;
/**
* Variable: moveIconFront
@ -241,7 +239,6 @@ class mxConnectionHandler extends mxEventSource {
* the connect icon. This has precendence over <moveIconBack> when set
* to true. Default is false.
*/
// moveIconFront: boolean;
moveIconFront = false;
/**
@ -251,7 +248,6 @@ class mxConnectionHandler extends mxEventSource {
* 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.
*/
// moveIconBack: boolean;
moveIconBack = false;
/**
@ -260,8 +256,8 @@ class mxConnectionHandler extends mxEventSource {
* <mxImage> that is used to trigger the creation of a new connection. This
* is used in <createIcons>. Default is null.
*/
// connectImage: mxImage;
connectImage = null;
connectImage: mxImage | null = null;
/**
* Variable: targetConnectImage
@ -269,7 +265,6 @@ class mxConnectionHandler extends mxEventSource {
* Specifies if the connect icon should be centered on the target state
* while connections are being previewed. Default is false.
*/
// targetConnectImage: boolean;
targetConnectImage = false;
/**
@ -277,7 +272,6 @@ class mxConnectionHandler extends mxEventSource {
*
* Specifies if events are handled. Default is true.
*/
// enabled: boolean;
enabled = true;
/**
@ -285,7 +279,6 @@ class mxConnectionHandler extends mxEventSource {
*
* Specifies if new edges should be selected. Default is true.
*/
// select: boolean;
select = true;
/**
@ -298,7 +291,6 @@ class mxConnectionHandler extends mxEventSource {
* the source cell and the newly created vertex in <createTargetVertex>, which
* can be overridden to create a new target. Default is false.
*/
// createTarget: boolean;
createTarget = false;
/**
@ -306,8 +298,7 @@ class mxConnectionHandler extends mxEventSource {
*
* Holds the <mxTerminalMarker> used for finding source and target cells.
*/
// marker: any;
marker = null;
marker: mxCellMarker | null = null;
/**
* Variable: constraintHandler
@ -315,8 +306,7 @@ class mxConnectionHandler extends mxEventSource {
* Holds the <mxConstraintHandler> used for drawing and highlighting
* constraints.
*/
// constraintHandler: mxConstraintHandler;
constraintHandler = null;
constraintHandler: mxConstraintHandler | null = null;
/**
* Variable: error
@ -332,7 +322,6 @@ class mxConnectionHandler extends mxEventSource {
* Specifies if single clicks should add waypoints on the new edge. Default is
* false.
*/
// waypointsEnabled: boolean;
waypointsEnabled = false;
/**
@ -342,7 +331,6 @@ class mxConnectionHandler extends mxEventSource {
* button when highlighting the source. Default is false, that is, the
* handler only highlights the source if no button is being pressed.
*/
// ignoreMouseDown: boolean;
ignoreMouseDown = false;
/**
@ -351,8 +339,7 @@ class mxConnectionHandler extends mxEventSource {
* Holds the <mxPoint> where the mouseDown took place while the handler is
* active.
*/
// first: mxPoint;
first = null;
first: mxPoint | null = null;
/**
* Variable: connectIconOffset
@ -362,7 +349,6 @@ class mxConnectionHandler extends mxEventSource {
* Note that placing the icon under the mouse pointer with an
* offset of (0,0) will affect hit detection.
*/
// connectIconOffset: mxPoint;
connectIconOffset = new mxPoint(0, TOOLTIP_VERTICAL_OFFSET);
/**
@ -371,8 +357,7 @@ class mxConnectionHandler extends mxEventSource {
* Optional <mxCellState> that represents the preview edge while the
* handler is active. This is created in <createEdgeState>.
*/
// edgeState: mxCellState;
edgeState = null;
edgeState: mxCellState | null = null;
/**
* Variable: changeHandler
@ -396,7 +381,6 @@ class mxConnectionHandler extends mxEventSource {
* Counts the number of mouseDown events since the start. The initial mouse
* down event counts as 1.
*/
// mouseDownCounter: number;
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
* the HTML elements in the page should be used. Default is the value of <mxClient.IS_VML>.
*/
// movePreviewAway: boolean;
movePreviewAway = false;
/**
@ -416,7 +399,6 @@ class mxConnectionHandler extends mxEventSource {
* enabled. This will allow to place the connection point along the outline of
* the highlighted target. Default is false.
*/
// outlineConnect: boolean;
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.
* Default is false. (Ignored if no edge state is created in <createEdgeState>.)
*/
// livePreview: boolean;
livePreview = false;
/**
@ -442,16 +423,16 @@ class mxConnectionHandler extends mxEventSource {
* Specifies if new edges should be inserted before the source vertex in the
* cell hierarchy. Default is false for backwards compatibility.
*/
// insertBeforeSource: boolean;
insertBeforeSource = false;
escapeHandler: () => void;
/**
* Function: isEnabled
*
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
// isEnabled(): boolean;
isEnabled() {
return this.enabled;
}
@ -466,8 +447,7 @@ class mxConnectionHandler extends mxEventSource {
*
* enabled - Boolean that specifies the new enabled state.
*/
// setEnabled(enabled: boolean): void;
setEnabled(enabled) {
setEnabled(enabled: boolean) {
this.enabled = enabled;
}
@ -485,8 +465,13 @@ class mxConnectionHandler extends mxEventSource {
* dropTarget - <mxCell> that represents the cell under the mouse when it was
* released.
*/
// isInsertBefore(edge: mxCell, source: mxCell, target: mxCell, evt: MouseEvent, dropTarget: mxCell): boolean;
isInsertBefore(edge, source, target, evt, dropTarget) {
isInsertBefore(
edge: mxCell,
source: mxCell,
target: mxCell,
evt: MouseEvent,
dropTarget: mxCell
) {
return this.insertBeforeSource && source !== target;
}
@ -499,8 +484,7 @@ class mxConnectionHandler extends mxEventSource {
*
* evt - Current active native pointer event.
*/
// isCreateTarget(evt: Event): boolean;
isCreateTarget(evt) {
isCreateTarget(evt: Event) {
return this.createTarget;
}
@ -509,8 +493,7 @@ class mxConnectionHandler extends mxEventSource {
*
* Sets <createTarget>.
*/
// setCreateTarget(value: boolean): void;
setCreateTarget(value) {
setCreateTarget(value: boolean) {
this.createTarget = value;
}
@ -519,19 +502,21 @@ class mxConnectionHandler extends mxEventSource {
*
* Creates the preview shape for new connections.
*/
// createShape(): mxShape;
createShape() {
// Creates the edge preview
const shape =
this.livePreview && this.edgeState != null
this.livePreview && this.edgeState
? this.graph.cellRenderer.createShape(this.edgeState)
: new mxPolyline([], INVALID_COLOR);
if (shape && shape.node) {
shape.dialect = DIALECT_SVG;
shape.scale = this.graph.view.scale;
shape.pointerEvents = false;
shape.isDashed = true;
shape.init(this.graph.getView().getOverlayPane());
mxEvent.redirectMouseEvents(shape.node, this.graph, null);
}
return shape;
}
@ -589,8 +574,7 @@ class mxConnectionHandler extends mxEventSource {
* Returns true if the given cell is connectable. This is a hook to
* disable floating connections. This implementation returns true.
*/
// isConnectableCell(cell: mxCell): boolean;
isConnectableCell(cell) {
isConnectableCell(cell: mxCell) {
return true;
}
@ -599,7 +583,6 @@ class mxConnectionHandler extends mxEventSource {
*
* Creates and returns the <mxCellMarker> used in <marker>.
*/
// createMarker(): mxCellMarker;
createMarker() {
const self = this;
@ -927,7 +910,7 @@ class mxConnectionHandler extends mxEventSource {
cy = size.height !== 0 ? state.y + (size.height * scale) / 2 : cy;
const alpha = mxUtils.toRadians(
mxUtils.getValue(state.style, STYLE_ROTATION) || 0
mxUtils.getValue(state.style, 'rotation') || 0
);
if (alpha !== 0) {
@ -1565,16 +1548,16 @@ class mxConnectionHandler extends mxEventSource {
updateEdgeState(current, constraint) {
// TODO: Use generic method for writing constraint to style
if (this.sourceConstraint != null && this.sourceConstraint.point != null) {
this.edgeState.style[STYLE_EXIT_X] = this.sourceConstraint.point.x;
this.edgeState.style[STYLE_EXIT_Y] = this.sourceConstraint.point.y;
this.edgeState.style.exitX = this.sourceConstraint.point.x;
this.edgeState.style.exitY = this.sourceConstraint.point.y;
}
if (constraint != null && constraint.point != null) {
this.edgeState.style[STYLE_ENTRY_X] = constraint.point.x;
this.edgeState.style[STYLE_ENTRY_Y] = constraint.point.y;
this.edgeState.style.entryX = constraint.point.x;
this.edgeState.style.entryY = constraint.point.y;
} else {
delete this.edgeState.style[STYLE_ENTRY_X];
delete this.edgeState.style[STYLE_ENTRY_Y];
delete this.edgeState.style.entryX;
delete this.edgeState.style.entryY;
}
this.edgeState.absolutePoints = [
@ -1690,7 +1673,7 @@ class mxConnectionHandler extends mxEventSource {
const c = new mxPoint(state.getCenterX(), state.getCenterY());
if (sourcePerimeter != null) {
const theta = mxUtils.getValue(state.style, STYLE_ROTATION, 0);
const theta = mxUtils.getValue(state.style, 'rotation', 0);
const rad = -theta * (Math.PI / 180);
if (theta !== 0) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -9,6 +9,7 @@ import {
getBoundingBox,
getDirectedBounds,
getValue,
isNotNullish,
mod,
} from '../util/mxUtils';
import {
@ -21,14 +22,6 @@ import {
RECTANGLE_ROUNDING_FACTOR,
SHADOW_OFFSET_X,
SHADOW_OFFSET_Y,
STYLE_ABSOLUTE_ARCSIZE,
STYLE_ARCSIZE,
STYLE_BACKGROUND_OUTLINE,
STYLE_DIRECTION,
STYLE_FIX_DASH,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_HORIZONTAL,
} from '../util/mxConstants';
import mxPoint from '../util/datatypes/mxPoint';
import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
@ -37,7 +30,14 @@ import mxClient from '../mxClient';
import mxCellState from '../view/cell/mxCellState';
import mxStencil from './node/mxStencil';
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) => {
if (i === 0) return false;
@ -89,7 +89,7 @@ const toBool = (i: any) => {
* @example
* ```javascript
* var style = graph.getStylesheet().getDefaultVertexStyle();
* style[mxConstants.STYLE_SHAPE] = 'customShape';
* style.shape = 'customShape';
* ```
*/
class mxShape {
@ -109,7 +109,6 @@ class mxShape {
*
* container - DOM node that will contain the shape.
*/
// init(container: Element): void;
init(container: SVGElement | null = null) {
if (!this.node) {
this.node = this.create();
@ -171,7 +170,7 @@ class mxShape {
endArrow: string | null = null;
direction: string | null = null;
direction: DirectionValue | null = null;
flipH = false;
@ -187,7 +186,7 @@ class mxShape {
verticalTextRotation: number | null = null;
oldGradients: any[] | null = null;
oldGradients: GradientMap = {};
glass = false;
@ -333,6 +332,16 @@ class mxShape {
*/
useSvgBoundingBox = true;
image: mxImage | null = null;
indicatorColor: ColorValue = null;
indicatorStrokeColor: ColorValue = null;
indicatorGradientColor: ColorValue = null;
indicatorDirection: DirectionValue = null;
/**
* Function: isHtmlAllowed
*
@ -352,7 +361,7 @@ class mxShape {
const sw =
this.stencil && this.stencil.strokewidth !== 'inherit'
? 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;
}
@ -390,6 +399,7 @@ class mxShape {
*/
redraw() {
if (!this.node) return;
this.updateBoundsFromPoints();
if (this.visible && this.checkBounds()) {
@ -450,7 +460,7 @@ class mxShape {
* change the rectangle in-place. This implementation returns the given rect.
*/
getLabelBounds(rect: mxRectangle) {
const d = getValue(this.style, STYLE_DIRECTION, DIRECTION_EAST);
const d = getValue(this.style, 'direction', DIRECTION_EAST);
let bounds = rect.clone();
// Normalizes argument for getLabelMargins hook
@ -470,8 +480,8 @@ class mxShape {
if (labelMargins) {
labelMargins = labelMargins.clone();
let flipH = toBool(getValue(this.style, STYLE_FLIPH, false));
let flipV = toBool(getValue(this.style, STYLE_FLIPV, false));
let flipH = toBool(getValue(this.style, 'flipH', false));
let flipV = toBool(getValue(this.style, 'flipV', false));
// Handles special case for vertical labels
if (
@ -529,7 +539,7 @@ class mxShape {
*
* Updates the SVG or VML shape.
*/
redrawShape(): void {
redrawShape() {
if (!this.node) return;
const canvas = this.createCanvas();
@ -584,27 +594,29 @@ class mxShape {
* Creates and returns an <mxSvgCanvas2D> for rendering this shape.
*/
createSvgCanvas() {
if (!this.node) return null;
const canvas = new mxSvgCanvas2D(this.node, false);
canvas.strokeTolerance = this.pointerEvents ? this.svgStrokeTolerance : 0;
canvas.pointerEventsValue = this.svgPointerEvents;
const off = this.getSvgScreenOffset();
if (this.node) {
if (off !== 0) {
this.node.setAttribute('transform', `translate(${off},${off})`);
} else {
this.node.removeAttribute('transform');
}
}
canvas.minStrokeWidth = this.minSvgStrokeWidth;
if (!this.antiAlias) {
// Rounds all numbers in the SVG output to integers
canvas.format = (value) => {
return Math.round(parseFloat(value));
return Math.round(value);
};
}
return canvas;
}
@ -651,7 +663,7 @@ class mxShape {
paint(c: mxSvgCanvas2D) {
let strokeDrawn = false;
if (c != null && this.outline) {
if (c && this.outline) {
const { stroke } = c;
c.stroke = (...args) => {
@ -669,7 +681,9 @@ class mxShape {
// Scale is passed-through to canvas
const s = this.scale;
const bounds = <mxRectangle>this.bounds;
const bounds = this.bounds;
if (bounds) {
let x = bounds.x / s;
let y = bounds.y / s;
let w = bounds.width / s;
@ -691,30 +705,39 @@ class mxShape {
let bg = null;
if (
(this.stencil == null &&
this.points == null &&
(!this.stencil &&
this.points.length === 0 &&
this.shapePointerEvents) ||
(this.stencil != null && this.stencilPointerEvents)
(this.stencil && this.stencilPointerEvents)
) {
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);
} else {
// Stencils have separate strokewidth
c.setStrokeWidth(this.strokewidth);
if (this.points != null) {
if (this.points.length > 0) {
// Paints edge shape
const pts = [];
for (let i = 0; i < this.points.length; i += 1) {
if (this.points[i] != null) {
// @ts-ignore
pts.push(new mxPoint(this.points[i].x / s, this.points[i].y / s));
const p = this.points[i];
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) {
bg.setAttribute('transform', c.state.transform);
if (bg && c.state && isNotNullish(c.state.transform)) {
bg.setAttribute('transform', <string>c.state.transform);
}
// 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.stroke();
}
}
}
/**
* Sets the state of the canvas for drawing the shape.
@ -767,7 +791,7 @@ class mxShape {
c.setDashed(
this.isDashed,
this.style != null
? toBool(getValue(this.style, STYLE_FIX_DASH, false))
? toBool(getValue(this.style, 'fixDash', false))
: false
);
}
@ -859,7 +883,7 @@ class mxShape {
if (
!this.outline ||
this.style == null ||
toBool(getValue(this.style, STYLE_BACKGROUND_OUTLINE, 0) === false)
toBool(getValue(this.style, 'backgroundOutline', 0) === false)
) {
c.setShadow(false);
this.paintForeground(c, x, y, w, h);
@ -909,16 +933,15 @@ class mxShape {
getArcSize(w: number, h: number): number {
let r = 0;
if (toBool(getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0))) {
if (toBool(getValue(this.style, 'absoluteArcSize', 0))) {
r = Math.min(
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 {
const f = parseFloat(
String(
getValue(this.style, STYLE_ARCSIZE, RECTANGLE_ROUNDING_FACTOR * 100) /
100
getValue(this.style, 'arcSize', RECTANGLE_ROUNDING_FACTOR * 100) / 100
)
);
r = Math.min(w * f, h * f);
@ -939,8 +962,8 @@ class mxShape {
w: number,
h: number,
arc: number
): void {
const sw = Math.ceil(<number>this.strokewidth / 2);
) {
const sw = Math.ceil((this.strokewidth ?? 0) / 2);
const size = 0.4;
c.setGradient('#ffffff', '#ffffff', x, y, w, h * 0.6, 'south', 0.9, 0.1);
@ -972,14 +995,14 @@ class mxShape {
*/
addPoints(
c: mxSvgCanvas2D,
pts: mxPoint[] | null = null,
pts: mxPoint[],
rounded: boolean = false,
arcSize: number,
close: boolean = false,
exclude: number[] | null = null,
exclude: number[] = [],
initialMove: boolean = true
) {
if (pts != null && pts.length > 0) {
if (pts.length > 0) {
const pe = pts[pts.length - 1];
// Adds virtual waypoint in the center between start and end point
@ -1008,11 +1031,7 @@ class mxShape {
let dx = pt.x - tmp.x;
let dy = pt.y - tmp.y;
if (
rounded &&
(dx !== 0 || dy !== 0) &&
(exclude == null || exclude.indexOf(i - 1) < 0)
) {
if (rounded && (dx !== 0 || dy !== 0) && exclude.indexOf(i - 1) < 0) {
// Draws a line from the last point to the current
// point with a spacing of size off the current point
// into direction of the last point
@ -1072,7 +1091,6 @@ class mxShape {
*
* Resets all styles.
*/
// resetStyles(): void;
resetStyles() {
this.initStyles();
@ -1100,25 +1118,25 @@ class mxShape {
* Applies the style of the given <mxCellState> to the shape. This
* implementation assigns the following styles to local fields:
*
* - <mxConstants.STYLE_FILLCOLOR> => fill
* - <mxConstants.STYLE_GRADIENTCOLOR> => gradient
* - <mxConstants.STYLE_GRADIENT_DIRECTION> => gradientDirection
* - <mxConstants.STYLE_OPACITY> => opacity
* - <'fillColor'> => fill
* - <'gradientColor'> => gradient
* - <'gradientDirection'> => gradientDirection
* - <'opacity'> => opacity
* - <mxConstants.STYLE_FILL_OPACITY> => fillOpacity
* - <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity
* - <mxConstants.STYLE_STROKECOLOR> => stroke
* - <mxConstants.STYLE_STROKEWIDTH> => strokewidth
* - <mxConstants.STYLE_SHADOW> => isShadow
* - <mxConstants.STYLE_DASHED> => isDashed
* - <mxConstants.STYLE_SPACING> => spacing
* - <mxConstants.STYLE_STARTSIZE> => startSize
* - <mxConstants.STYLE_ENDSIZE> => endSize
* - <mxConstants.STYLE_ROUNDED> => isRounded
* - <mxConstants.STYLE_STARTARROW> => startArrow
* - <mxConstants.STYLE_ENDARROW> => endArrow
* - <mxConstants.STYLE_ROTATION> => rotation
* - <mxConstants.STYLE_DIRECTION> => direction
* - <mxConstants.STYLE_GLASS> => glass
* - <'strokeColor'> => stroke
* - <'strokeWidth'> => strokewidth
* - <'shadow'> => isShadow
* - <'dashed'> => isDashed
* - <'spacing'> => spacing
* - <'startSize'> => startSize
* - <'endSize'> => endSize
* - <'rounded'> => isRounded
* - <'startArrow'> => startArrow
* - <'endArrow'> => endArrow
* - <'rotation'> => rotation
* - <'direction'> => direction
* - <'glass'> => glass
*
* This keeps a reference to the <style>. If you need to keep a reference to
* the cell, you can override this method and store a local reference to
@ -1129,19 +1147,19 @@ class mxShape {
*
* state - <mxCellState> of the corresponding cell.
*/
// apply(state: mxCellState): void;
apply(state: mxCellState) {
this.state = state;
this.style = state.style;
const ifNotNullElse = (value1: any, default_: any): any => {
if (value1 != null) {
return value1;
const ifNotNullElse = (value: any, defaultValue: any) => {
if (isNotNullish(value)) {
return value;
}
return default_;
return defaultValue;
};
if (this.style != null) {
if (this.style) {
this.fill = ifNotNullElse(this.style.fillColor, this.fill);
this.gradient = ifNotNullElse(this.style.gradientColor, this.gradient);
this.gradientDirection = ifNotNullElse(
@ -1174,7 +1192,7 @@ class mxShape {
this.flipV = toBool(ifNotNullElse(this.style.flipV, 0));
// Legacy support for stencilFlipH/V
if (this.stencil != null) {
if (this.stencil) {
this.flipH = toBool(
ifNotNullElse(this.style.stencilFlipH, this.flipH || 0)
);
@ -1220,13 +1238,10 @@ class mxShape {
*
* cursor - The cursor to be used.
*/
// setCursor(cursor: string): void;
setCursor(cursor: string | null = null): void {
if (cursor == null) {
cursor = '';
}
setCursor(cursor: string) {
this.cursor = cursor;
if (this.node != null) {
if (this.node) {
this.node.style.cursor = cursor;
}
}
@ -1236,22 +1251,14 @@ class mxShape {
*
* Returns the current cursor.
*/
// getCursor(): string;
getCursor(): string {
return <string>this.cursor;
getCursor() {
return this.cursor;
}
/**
* Hook for subclassers.
*/
// isRoundable(): boolean;
isRoundable(
c: mxSvgCanvas2D,
x: number,
y: number,
w: number,
h: number
): boolean {
isRoundable(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number) {
return false;
}
@ -1261,15 +1268,10 @@ class mxShape {
* Updates the <boundingBox> for this shape using <createBoundingBox> and
* <augmentBoundingBox> and stores the result in <boundingBox>.
*/
// updateBoundingBox(): void;
updateBoundingBox() {
// Tries to get bounding box from SVG subsystem
// LATER: Use getBoundingClientRect for fallback in VML
if (
this.useSvgBoundingBox &&
this.node != null &&
this.node.ownerSVGElement != null
) {
if (this.useSvgBoundingBox && this.node && this.node.ownerSVGElement) {
try {
const b = this.node.getBBox();
@ -1277,7 +1279,7 @@ class mxShape {
this.boundingBox = new mxRectangle(b.x, b.y, b.width, b.height);
// Adds strokeWidth
this.boundingBox.grow((<number>this.strokewidth * this.scale) / 2);
this.boundingBox.grow(((this.strokewidth ?? 0) * this.scale) / 2);
return;
}
@ -1286,10 +1288,10 @@ class mxShape {
}
}
if (this.bounds != null) {
let bbox: mxRectangle | null = this.createBoundingBox();
if (this.bounds) {
let bbox = this.createBoundingBox();
if (bbox != null) {
if (bbox) {
this.augmentBoundingBox(bbox);
const rot = this.getShapeRotation();
@ -1297,6 +1299,7 @@ class mxShape {
bbox = getBoundingBox(bbox, rot);
}
}
this.boundingBox = bbox;
}
}
@ -1307,31 +1310,32 @@ class mxShape {
* Returns a new rectangle that represents the bounding box of the bare shape
* with no shadows or strokewidths.
*/
// createBoundingBox(): mxRectangle;
createBoundingBox() {
const bb = (<mxRectangle>this.bounds).clone();
if (!this.bounds) return null;
const bb = this.bounds.clone();
if (
(this.stencil != null &&
(this.stencil &&
(this.direction === DIRECTION_NORTH ||
this.direction === DIRECTION_SOUTH)) ||
this.isPaintBoundsInverted()
) {
bb.rotate90();
}
return bb;
}
/**
* Augments the bounding box with the strokewidth and shadow offsets.
*/
// augmentBoundingBox(bbox: mxRectangle): void;
augmentBoundingBox(bbox: mxRectangle): void {
augmentBoundingBox(bbox: mxRectangle) {
if (this.isShadow) {
bbox.width += Math.ceil(SHADOW_OFFSET_X * this.scale);
bbox.height += Math.ceil(SHADOW_OFFSET_Y * this.scale);
}
// 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.
*/
// isPaintBoundsInverted(): boolean;
isPaintBoundsInverted(): boolean {
isPaintBoundsInverted() {
// Stencil implements inversion via aspect
return (
this.stencil == null &&
!this.stencil &&
(this.direction === DIRECTION_NORTH || this.direction === DIRECTION_SOUTH)
);
}
@ -1353,9 +1356,8 @@ class mxShape {
*
* Returns the rotation from the style.
*/
// getRotation(): number;
getRotation(): number {
return this.rotation != null ? this.rotation : 0;
getRotation() {
return this.rotation;
}
/**
@ -1363,12 +1365,13 @@ class mxShape {
*
* Returns the rotation for the text label.
*/
// getTextRotation(): number;
getTextRotation(): number {
getTextRotation() {
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!!!! ===============================================================================================
}
return rot;
}
@ -1377,10 +1380,10 @@ class mxShape {
*
* Returns the actual rotation of the shape.
*/
// getShapeRotation(): number;
getShapeRotation(): number {
getShapeRotation() {
let rot = this.getRotation();
if (this.direction != null) {
if (this.direction) {
if (this.direction === DIRECTION_NORTH) {
rot += 270;
} else if (this.direction === DIRECTION_WEST) {
@ -1389,6 +1392,7 @@ class mxShape {
rot += 90;
}
}
return rot;
}
@ -1397,13 +1401,7 @@ class mxShape {
*
* 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
): SVGElement {
createTransparentSvgRectangle(x: number, y: number, w: number, h: number) {
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', String(x));
rect.setAttribute('y', String(y));
@ -1422,8 +1420,7 @@ class mxShape {
*
* Paints the line shape.
*/
// setTransparentBackgroundImage(node: Element): void;
setTransparentBackgroundImage(node: SVGElement): void {
setTransparentBackgroundImage(node: SVGElement) {
node.style.backgroundImage = `url('${mxClient.imageBasePath}/transparent.gif')`;
}
@ -1432,22 +1429,19 @@ class mxShape {
*
* Paints the line shape.
*/
// releaseSvgGradients(grads: any[]): void;
releaseSvgGradients(grads: any): void {
if (grads != null) {
releaseSvgGradients(grads: GradientMap) {
for (const key in grads) {
const gradient = grads[key];
if (gradient != null) {
if (gradient) {
gradient.mxRefCount = (gradient.mxRefCount || 0) - 1;
if (gradient.mxRefCount === 0 && gradient.parentNode != null) {
if (gradient.mxRefCount === 0 && gradient.parentNode) {
gradient.parentNode.removeChild(gradient);
}
}
}
}
}
/**
* Function: destroy
@ -1455,20 +1449,20 @@ class mxShape {
* Destroys the shape by removing it from the DOM and releasing the DOM
* node associated with the shape using <mxEvent.release>.
*/
// destroy(): void;
destroy(): void {
if (this.node != null) {
destroy() {
if (this.node) {
mxEvent.release(this.node);
if (this.node.parentNode != null) {
if (this.node.parentNode) {
this.node.parentNode.removeChild(this.node);
}
this.node = null;
}
// Decrements refCount and removes unused
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,
NONE,
RECTANGLE_ROUNDING_FACTOR,
STYLE_ABSOLUTE_ARCSIZE,
STYLE_ARCSIZE,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_HORIZONTAL,
STYLE_POINTER_EVENTS,
STYLE_SEPARATORCOLOR,
STYLE_STARTSIZE,
STYLE_SWIMLANE_FILLCOLOR,
STYLE_SWIMLANE_LINE,
} from '../util/mxConstants';
import mxUtils from '../util/mxUtils';
@ -31,11 +21,11 @@ import mxUtils from '../util/mxUtils';
* Extends {@link mxShape} to implement a swimlane shape.
* This shape is registered under {@link mxConstants.SHAPE_SWIMLANE} in {@link mxCellRenderer}.
* Use the {@link mxConstants.STYLE_STYLE_STARTSIZE} to define the size of the title
* region, {@link mxConstants.STYLE_SWIMLANE_FILLCOLOR} for the content area fill,
* {@link mxConstants.STYLE_SEPARATORCOLOR} to draw an additional vertical separator and
* region, `'swimLaneFillColor'` for the content area fill,
* `'separatorColor'` to draw an additional vertical separator and
* {@link mxConstants.STYLE_SWIMLANE_LINE} to hide the line between the title region and
* the content area.
* The {@link mxConstants.STYLE_HORIZONTAL} affects the orientation of this shape,
* The {@link 'horizontal'} affects the orientation of this shape,
* not only its label.
*
* @class mxSwimlane
@ -81,7 +71,7 @@ class mxSwimlane extends mxShape {
getTitleSize() {
return Math.max(
0,
mxUtils.getValue(this.style, STYLE_STARTSIZE, DEFAULT_STARTSIZE)
mxUtils.getValue(this.style, 'startSize', DEFAULT_STARTSIZE)
);
}
@ -94,8 +84,8 @@ class mxSwimlane extends mxShape {
const bounds = new mxRectangle(rect.x, rect.y, rect.width, rect.height);
const horizontal = this.isHorizontal();
const flipH = mxUtils.getValue(this.style, STYLE_FLIPH, 0) == 1;
const flipV = mxUtils.getValue(this.style, STYLE_FLIPV, 0) == 1;
const flipH = mxUtils.getValue(this.style, 'flipH', 0) == 1;
const flipV = mxUtils.getValue(this.style, 'flipV', 0) == 1;
// East is default
const shapeVertical =
@ -156,19 +146,19 @@ class mxSwimlane extends mxShape {
* Returns the arcsize for the swimlane.
*/
getSwimlaneArcSize(w, h, start) {
if (mxUtils.getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0) == '1') {
if (mxUtils.getValue(this.style, 'absoluteArcSize', 0) == '1') {
return Math.min(
w / 2,
Math.min(
h / 2,
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2
mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2
)
);
}
const f =
mxUtils.getValue(
this.style,
STYLE_ARCSIZE,
'arcSize',
RECTANGLE_ROUNDING_FACTOR * 100
) / 100;
@ -180,7 +170,7 @@ class mxSwimlane extends mxShape {
*/
// isHorizontal(): boolean;
isHorizontal() {
return mxUtils.getValue(this.style, STYLE_HORIZONTAL, 1) == 1;
return mxUtils.getValue(this.style, 'horizontal', 1) == 1;
}
/**
@ -189,9 +179,9 @@ class mxSwimlane extends mxShape {
// paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
paintVertexShape(c, x, y, w, h) {
let start = this.getTitleSize();
const fill = mxUtils.getValue(this.style, STYLE_SWIMLANE_FILLCOLOR, NONE);
const fill = mxUtils.getValue(this.style, 'swimlaneFillColor', NONE);
const swimlaneLine =
mxUtils.getValue(this.style, STYLE_SWIMLANE_LINE, 1) == 1;
mxUtils.getValue(this.style, 'swimlaneLine', 1) == 1;
let r = 0;
if (this.isHorizontal()) {
@ -210,7 +200,7 @@ class mxSwimlane extends mxShape {
this.paintRoundedSwimlane(c, x, y, w, h, start, r, fill, swimlaneLine);
}
const sep = mxUtils.getValue(this.style, STYLE_SEPARATORCOLOR, NONE);
const sep = mxUtils.getValue(this.style, 'separatorColor', NONE);
this.paintSeparator(c, x, y, w, h, start, sep);
if (this.image != null) {
@ -244,7 +234,7 @@ class mxSwimlane extends mxShape {
let events = true;
if (this.style != null) {
events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1';
events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
}
if (!events && (this.fill == null || this.fill === NONE)) {
@ -325,7 +315,7 @@ class mxSwimlane extends mxShape {
let events = true;
if (this.style != null) {
events = mxUtils.getValue(this.style, STYLE_POINTER_EVENTS, '1') == '1';
events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1';
}
if (!events && (this.fill == null || this.fill === NONE)) {

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

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

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

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

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

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

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

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

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

@ -7,7 +7,7 @@
import mxActor from '../mxActor';
import mxPoint from '../../util/datatypes/mxPoint';
import mxUtils from '../../util/mxUtils';
import { LINE_ARCSIZE, STYLE_ARCSIZE } from '../../util/mxConstants';
import { LINE_ARCSIZE } from '../../util/mxConstants';
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
/**
@ -31,7 +31,7 @@ class mxHexagon extends mxActor {
// redrawPath(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void;
redrawPath(c: mxSvgCanvas2D, x: number, y: number, w: number, h: number) {
const arcSize =
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2;
mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2;
this.addPoints(
c,
[

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

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

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

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

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

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

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 mxShape from '../mxShape';
import mxResources from '../../util/mxResources';
import mxUtils from '../../util/mxUtils';
import mxUtils, { getNumber, getValue, isNotNullish } from '../../util/mxUtils';
import {
DIRECTION_NORTH,
DIRECTION_SOUTH,
NODETYPE_ELEMENT,
NONE,
RECTANGLE_ROUNDING_FACTOR,
STYLE_BACKGROUND_OUTLINE,
STYLE_DIRECTION,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_POINTER_EVENTS,
STYLE_STROKEWIDTH,
} from '../../util/mxConstants';
import mxStencilRegistry from './mxStencilRegistry';
import { getChildNodes, getTextContent } from '../../util/mxDomUtils';
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.
@ -32,7 +28,7 @@ import { getChildNodes, getTextContent } from '../../util/mxDomUtils';
* @class mxStencil
*/
class mxStencil extends mxShape {
constructor(desc) {
constructor(desc: Element) {
super();
this.desc = desc;
this.parseDescription();
@ -45,8 +41,7 @@ class mxStencil extends mxShape {
* Static global variable that specifies the default value for the localized
* attribute of the text element. Default is false.
*/
// defaultLocalized: boolean;
defaultLocalized = false;
static defaultLocalized = false;
/**
* Function: allowEval
@ -55,48 +50,42 @@ class mxStencil extends mxShape {
* evaluating text content and images. Default is false. Set this to true
* if stencils can not contain user input.
*/
// allowEval: boolean;
allowEval = false;
static allowEval = false;
/**
* Variable: desc
*
* Holds the XML node with the stencil description.
*/
// desc: Element;
desc = null;
desc: Element;
/**
* Variable: constraints
*
* Holds an array of <mxConnectionConstraints> as defined in the shape.
*/
// constraints: mxConnectionConstraint[];
constraints = null;
constraints: mxConnectionConstraint[] = [];
/**
* Variable: aspect
*
* Holds the aspect of the shape. Default is 'auto'.
*/
// aspect: string;
aspect = null;
aspect = 'auto';
/**
* Variable: w0
*
* Holds the width of the shape. Default is 100.
*/
// w0: number;
w0 = null;
w0 = 100;
/**
* Variable: h0
*
* Holds the height of the shape. Default is 100.
*/
// h0: number;
h0 = null;
h0 = 100;
/**
* Variable: bgNodes
@ -104,30 +93,27 @@ class mxStencil extends mxShape {
* Holds the XML node with the stencil description.
*/
// bgNode: Element;
bgNode = null;
bgNode: Element | null = null;
/**
* Variable: fgNodes
*
* Holds the XML node with the stencil description.
*/
// fgNode: Element;
fgNode = null;
fgNode: Element | null = null;
/**
* Variable: strokewidth
*
* Holds the strokewidth direction from the description.
*/
// strokewidth: number;
strokewidth = null;
strokeWidth: string | null = null;
/**
* Function: parseDescription
*
* Reads <w0>, <h0>, <aspect>, <bgNodes> and <fgNodes> from <desc>.
*/
// parseDescription(): void;
parseDescription() {
// LATER: Preprocess nodes for faster painting
this.fgNode = this.desc.getElementsByTagName('foreground')[0];
@ -139,14 +125,14 @@ class mxStencil extends mxShape {
// variable means fill the available space and fixed means
// use w0 and h0 to compute the 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"
// where the inherit means take the value from the style (ie. the
// user-defined stroke-width). Note that the strokewidth is scaled
// by the minimum scaling that is used to draw the shape (sx, sy).
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
* <parseConstraint>.
*/
// parseConstraints(): void;
parseConstraints() {
const conns = this.desc.getElementsByTagName('connections')[0];
@ -177,8 +162,7 @@ class mxStencil extends mxShape {
*
* Parses the given XML node and returns its <mxConnectionConstraint>.
*/
// parseConstraint(node: Element): void;
parseConstraint(node) {
parseConstraint(node: Element) {
const x = Number(node.getAttribute('x'));
const y = Number(node.getAttribute('y'));
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
* node is 1 or if <defaultLocalized> is true.
*/
// evaluateTextAttribute(node: string, attribute: string, shape: string): string;
evaluateTextAttribute(node, attribute, shape) {
evaluateTextAttribute(node: Element, attribute: string, shape: mxShape) {
let result = this.evaluateAttribute(node, attribute, shape);
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
* value is used as the attribute value to be returned.
*/
// evaluateAttribute(node: string, attribute: string, shape: string): string;
evaluateAttribute(node, attribute, shape) {
evaluateAttribute(node: Element, attribute: string, shape: mxShape) {
let result = node.getAttribute(attribute);
if (result == null) {
@ -238,8 +220,14 @@ class mxStencil extends mxShape {
*
* Draws this stencil inside the given bounds.
*/
// drawShape(canvas: mxAbstractCanvas2D, shape: string, x: number, y: number, w: number, h: number): void;
drawShape(canvas, shape, x, y, w, h) {
drawShape(
canvas: mxSvgCanvas2D,
shape: mxShape,
x: number,
y: number,
w: number,
h: number
) {
const stack = canvas.states.slice();
// 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
// swimlanes (title area) with this API, add icon, horizontal/vertical
// label, indicator for all shapes, rotation
const direction = mxUtils.getValue(shape.style, STYLE_DIRECTION, null);
const aspect = this.computeAspect(shape.style, x, y, w, h, direction);
const direction = getValue(shape.style, 'direction', null);
const aspect = this.computeAspect(shape, x, y, w, h, direction);
const minScale = Math.min(aspect.width, aspect.height);
const sw =
this.strokewidth == 'inherit'
? Number(mxUtils.getNumber(shape.style, STYLE_STROKEWIDTH, 1))
: Number(this.strokewidth) * minScale;
this.strokeWidth == 'inherit'
? Number(getNumber(shape.style, 'strokeWidth', 1))
: Number(this.strokeWidth) * minScale;
canvas.setStrokeWidth(sw);
// Draws a transparent rectangle for catching events
if (
shape.style != null &&
mxUtils.getValue(shape.style, STYLE_POINTER_EVENTS, '0') == '1'
getValue(shape.style, 'pointerEvents', '0') == '1'
) {
canvas.setStrokeColor(NONE);
canvas.rect(x, y, w, h);
@ -292,7 +280,7 @@ class mxStencil extends mxShape {
true,
!shape.outline ||
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
@ -306,7 +294,18 @@ class mxStencil extends mxShape {
*
* 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) {
let tmp = node.firstChild;
@ -333,8 +332,14 @@ class mxStencil extends mxShape {
* bounds - <mxRectangle> that should contain the stencil.
* direction - Optional direction of the shape to be darwn.
*/
// computeAspect(shape: string, x: number, y: number, w: number, h: number, direction?: string): mxRectangle;
computeAspect(shape, x, y, w, h, direction) {
computeAspect(
shape: mxShape,
x: number,
y: number,
w: number,
h: number,
direction?: string
) {
let x0 = x;
let y0 = y;
let sx = w / this.w0;
@ -375,7 +380,14 @@ class mxStencil extends mxShape {
*
* 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 x0 = aspect.x;
const y0 = aspect.y;
@ -499,7 +511,7 @@ class mxStencil extends mxShape {
Number(node.getAttribute('rx')) * sx,
Number(node.getAttribute('ry')) * sy,
Number(node.getAttribute('x-axis-rotation')),
Number(node.getAttribute('large-arc-flag')),
Boolean(node.getAttribute('large-arc-flag')),
Number(node.getAttribute('sweep-flag')),
x0 + Number(node.getAttribute('x')) * sx,
y0 + Number(node.getAttribute('y')) * sy
@ -562,8 +574,8 @@ class mxStencil extends mxShape {
const dr = shape.rotation;
// Depends on flipping
const flipH = mxUtils.getValue(shape.style, STYLE_FLIPH, 0) == 1;
const flipV = mxUtils.getValue(shape.style, STYLE_FLIPV, 0) == 1;
const flipH = getValue(shape.style, 'flipH', 0) == 1;
const flipV = getValue(shape.style, 'flipV', 0) == 1;
if (flipH && flipV) {
rotation -= dr;

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

@ -26,17 +26,16 @@ export type CellStateStyles = {
[k: string]: string;
};
export type ColorInputValue = string | 'none';
export type ColorValue = string | null;
export type DirectionValue = 'north' | 'south' | 'east' | 'west';
export type DirectionValue = 'north' | 'south' | 'east' | 'west' | null;
export type AlignValue =
| 'left'
| 'center'
| 'right'
| 'top'
| 'middle'
| 'bottom';
| 'bottom'
| null;
export type CanvasState = {
dx: number;
@ -51,7 +50,7 @@ export type CanvasState = {
gradientAlpha: number;
gradientDirection: string | null;
strokeColor: ColorValue;
strokeWidth: number;
strokeWidth: number | null;
dashed: boolean;
dashPattern: string;
fixDash: boolean;
@ -72,4 +71,13 @@ export type CanvasState = {
rotation: number;
rotationCx: 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 { clone } from '../mxCloneUtils';
import type { CanvasState, ColorInputValue, ColorValue } from '../../types';
import type { CanvasState, ColorValue } from '../../types';
/**
* Class: mxAbstractCanvas2D
@ -272,7 +272,8 @@ class mxAbstractCanvas2D {
*/
scale(value: number) {
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.
*/
setFillColor(value: ColorInputValue) {
setFillColor(value: ColorValue) {
const v = value === NONE ? null : value;
this.state.fillColor = v;
@ -368,7 +369,7 @@ class mxAbstractCanvas2D {
*
* Sets the current stroke color.
*/
setStrokeColor(value: ColorInputValue) {
setStrokeColor(value: ColorValue) {
const v = value === NONE ? null : value;
this.state.strokeColor = v;
}
@ -378,7 +379,7 @@ class mxAbstractCanvas2D {
*
* Sets the current stroke width.
*/
setStrokeWidth(value: number) {
setStrokeWidth(value: number | null) {
this.state.strokeWidth = value;
}
@ -387,7 +388,7 @@ class mxAbstractCanvas2D {
*
* Enables or disables dashed lines.
*/
setDashed(value: boolean, fixDash: boolean) {
setDashed(value: boolean, fixDash = false) {
this.state.dashed = value;
this.state.fixDash = fixDash;
}
@ -433,7 +434,7 @@ class mxAbstractCanvas2D {
*
* Sets the current font color.
*/
setFontColor(value: ColorInputValue) {
setFontColor(value: ColorValue) {
const v = value === NONE ? null : value;
this.state.fontColor = v;
}
@ -443,7 +444,7 @@ class mxAbstractCanvas2D {
*
* Sets the current font background color.
*/
setFontBackgroundColor(value: ColorInputValue) {
setFontBackgroundColor(value: ColorValue) {
const v = value === NONE ? null : value;
this.state.fontBackgroundColor = v;
}
@ -453,7 +454,7 @@ class mxAbstractCanvas2D {
*
* Sets the current font border color.
*/
setFontBorderColor(value: ColorInputValue) {
setFontBorderColor(value: ColorValue) {
const v = value === NONE ? null : value;
this.state.fontBorderColor = v;
}
@ -499,7 +500,7 @@ class mxAbstractCanvas2D {
*
* Enables or disables and configures the current shadow.
*/
setShadowColor(value: ColorInputValue) {
setShadowColor(value: ColorValue) {
const v = value === NONE ? null : value;
this.state.shadowColor = v;
}
@ -624,12 +625,12 @@ class mxAbstractCanvas2D {
* Closes the current path.
*/
close(
x1: number,
y1: number,
x2: number,
y2: number,
x3: number,
y3: number
x1?: number,
y1?: number,
x2?: number,
y2?: number,
x3?: number,
y3?: number
) {
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 { importNodeImplementation, isNode, write } from '../mxDomUtils';
import { htmlEntities, trim } from '../mxStringUtils';
import { AlignValue, ColorValue, DirectionValue } from '../../types';
type GradientMap = {
[k: string]: SVGLinearGradientElement;
};
import {
AlignValue,
ColorValue,
DirectionValue,
GradientMap,
} from '../../types';
// Activates workaround for gradient ID resolution if base tag is used.
const useAbsoluteIds =

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

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

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

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

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

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

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

@ -246,11 +246,11 @@ class mxEvent {
static redirectMouseEvents(
node: Listenable,
graph: mxGraph,
state: mxCellState | ((evt: Event) => mxCellState),
down: EventListener | null,
move: EventListener | null,
up: EventListener | null,
dblClick: EventListener | null
state: mxCellState | ((evt: Event) => mxCellState) | null = null,
down: EventListener | null = null,
move: EventListener | null = null,
up: EventListener | null = null,
dblClick: EventListener | null = null
) {
const getState = (evt: Event) => {
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,
NONE,
PAGE_FORMAT_A4_PORTRAIT,
STYLE_DIRECTION,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_HORIZONTAL,
STYLE_PORT_CONSTRAINT,
STYLE_PORT_CONSTRAINT_ROTATION,
STYLE_ROTATION,
STYLE_SOURCE_PORT_CONSTRAINT,
STYLE_STARTSIZE,
STYLE_TARGET_PORT_CONSTRAINT,
} from './mxConstants';
import mxPoint from './datatypes/mxPoint';
import mxDictionary from './datatypes/mxDictionary';
@ -753,10 +743,10 @@ export const getPortConstraints = (
) => {
const value = getValue(
terminal.style,
STYLE_PORT_CONSTRAINT,
'portConstraint',
getValue(
edge.style,
source ? STYLE_SOURCE_PORT_CONSTRAINT : STYLE_TARGET_PORT_CONSTRAINT,
source ? 'sourcePortConstraint' : 'targetPortConstraint',
null
)
);
@ -769,13 +759,13 @@ export const getPortConstraints = (
let returnValue = DIRECTION_MASK_NONE;
const constraintRotationEnabled = getValue(
terminal.style,
STYLE_PORT_CONSTRAINT_ROTATION,
'portConstraintRotation',
0
);
let rotation = 0;
if (constraintRotationEnabled == 1) {
rotation = getValue(terminal.style, STYLE_ROTATION, 0);
rotation = getValue(terminal.style, 'rotation', 0);
}
let quad = 0;
@ -928,9 +918,9 @@ export const getDirectedBounds = (
flipH: boolean,
flipV: boolean
) => {
const d = getValue(style, STYLE_DIRECTION, DIRECTION_EAST);
flipH = flipH != null ? flipH : getValue(style, STYLE_FLIPH, false);
flipV = flipV != null ? flipV : getValue(style, STYLE_FLIPV, false);
const d = getValue(style, 'direction', DIRECTION_EAST);
flipH = flipH != null ? flipH : getValue(style, 'flipH', false);
flipV = flipV != null ? flipV : getValue(style, 'flipV', false);
m.x = Math.round(Math.max(0, Math.min(rect.width, m.x)));
m.y = Math.round(Math.max(0, Math.min(rect.height, m.y)));
@ -1190,10 +1180,10 @@ export const intersectsHotspot = (
let w = state.width;
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 (getValue(state.style, STYLE_HORIZONTAL, true)) {
if (getValue(state.style, 'horizontal', true)) {
cy = state.y + start / 2;
h = start;
} else {
@ -1211,7 +1201,7 @@ export const intersectsHotspot = (
}
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) {
const cos = Math.cos(-alpha);

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

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

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

@ -46,35 +46,8 @@ import {
SHAPE_RHOMBUS,
SHAPE_SWIMLANE,
SHAPE_TRIANGLE,
STYLE_ALIGN,
STYLE_FILLCOLOR,
STYLE_FONTCOLOR,
STYLE_FONTFAMILY,
STYLE_FONTSIZE,
STYLE_FONTSTYLE,
STYLE_GRADIENTCOLOR,
STYLE_HORIZONTAL,
STYLE_INDICATOR_DIRECTION,
STYLE_INDICATOR_STROKECOLOR,
STYLE_LABEL_BACKGROUNDCOLOR,
STYLE_LABEL_BORDERCOLOR,
STYLE_LABEL_POSITION,
STYLE_LABEL_WIDTH,
STYLE_OVERFLOW,
STYLE_ROTATION,
STYLE_SHAPE,
STYLE_SPACING,
STYLE_SPACING_BOTTOM,
STYLE_SPACING_LEFT,
STYLE_SPACING_RIGHT,
STYLE_SPACING_TOP,
STYLE_STROKECOLOR,
STYLE_TEXT_DIRECTION,
STYLE_TEXT_OPACITY,
STYLE_VERTICAL_ALIGN,
STYLE_VERTICAL_LABEL_POSITION,
} from '../../util/mxConstants';
import mxUtils from '../../util/mxUtils';
import mxUtils, { convertPoint, getValue } from '../../util/mxUtils';
import mxRectangle from '../../util/datatypes/mxRectangle';
import mxStencilRegistry from '../../shape/node/mxStencilRegistry';
import mxEvent from '../../util/event/mxEvent';
@ -233,20 +206,19 @@ class mxCellRenderer {
*
* state - <mxCellState> for which the shape should be created.
*/
createShape(state: mxCellState): mxShape | null {
createShape(state: mxCellState) {
let shape = null;
if (state.style) {
// Checks if there is a stencil for the name and creates
// a shape instance for the stencil if one exists
const stencil = mxStencilRegistry.getStencil(state.style[STYLE_SHAPE]);
const stencil = mxStencilRegistry.getStencil(state.style.shape);
if (stencil) {
shape = new mxShape(stencil);
} else {
const ctor = this.getShapeConstructor(state);
shape = new ctor();
}
}
return shape;
}
@ -283,7 +255,7 @@ class mxCellRenderer {
* Returns the constructor to be used for creating the shape.
*/
getShapeConstructor(state: mxCellState) {
let ctor = this.getShape(state.style[STYLE_SHAPE]);
let ctor = this.getShape(state.style.shape);
if (!ctor) {
ctor = <typeof mxShape>(
@ -310,11 +282,11 @@ class mxCellRenderer {
shape.apply(state);
shape.image = state.view.graph.getImage(state);
shape.indicatorColor = state.view.graph.getIndicatorColor(state);
shape.indicatorStrokeColor = state.style[STYLE_INDICATOR_STROKECOLOR];
shape.indicatorStrokeColor = state.style.indicatorStrokeColor;
shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(
state
);
shape.indicatorDirection = state.style[STYLE_INDICATOR_DIRECTION];
shape.indicatorDirection = state.style.indicatorDirection;
shape.indicatorImage = state.view.graph.getIndicatorImage(state);
this.postConfigureShape(state);
}
@ -331,11 +303,11 @@ class mxCellRenderer {
// postConfigureShape(state: mxCellState): void;
postConfigureShape(state: mxCellState) {
if (state.shape != null) {
this.resolveColor(state, 'indicatorGradientColor', STYLE_GRADIENTCOLOR);
this.resolveColor(state, 'indicatorColor', STYLE_FILLCOLOR);
this.resolveColor(state, 'gradient', STYLE_GRADIENTCOLOR);
this.resolveColor(state, 'stroke', STYLE_STROKECOLOR);
this.resolveColor(state, 'fill', STYLE_FILLCOLOR);
this.resolveColor(state, 'indicatorGradientColor', 'gradientColor');
this.resolveColor(state, 'indicatorColor', 'fillColor');
this.resolveColor(state, 'gradient', 'gradientColor');
this.resolveColor(state, 'stroke', 'strokeColor');
this.resolveColor(state, 'fill', 'fillColor');
}
}
@ -350,12 +322,7 @@ class mxCellRenderer {
// LATER: Check if the color has actually changed
if (state.style != null) {
const values = ['inherit', 'swimlane', 'indicated'];
const styles = [
STYLE_FILLCOLOR,
STYLE_STROKECOLOR,
STYLE_GRADIENTCOLOR,
STYLE_FONTCOLOR,
];
const styles = ['fillColor', 'strokeColor', 'gradientColor', 'fontColor'];
for (let i = 0; i < styles.length; i += 1) {
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) {
const shape = key === STYLE_FONTCOLOR ? state.text : state.shape;
const shape = key === 'fontColor' ? state.text : state.shape;
if (shape != null) {
const { graph } = state.view;
@ -384,18 +351,16 @@ class mxCellRenderer {
if (value === 'inherit') {
// @ts-ignore
referenced = graph.model.getParent(state.cell);
referenced = state.cell.getParent();
} else if (value === 'swimlane') {
// @ts-ignore
shape[field] =
key === STYLE_STROKECOLOR || key === STYLE_FONTCOLOR
? '#000000'
: '#ffffff';
key === 'strokeColor' || key === 'fontColor' ? '#000000' : '#ffffff';
// @ts-ignore
if (graph.model.getTerminal(state.cell, false) != null) {
if (state.cell.getTerminal(false) != null) {
// @ts-ignore
referenced = graph.model.getTerminal(state.cell, false);
referenced = state.cell.getTerminal(false);
} else {
referenced = state.cell;
}
@ -406,19 +371,19 @@ class mxCellRenderer {
// @ts-ignore
shape[field] = state.shape.indicatorColor;
} else if (
key !== STYLE_FILLCOLOR &&
value === STYLE_FILLCOLOR &&
key !== 'fillColor' &&
value === 'fillColor' &&
state.shape != null
) {
// @ts-ignore
shape[field] = state.style[STYLE_FILLCOLOR];
shape[field] = state.style.fillColor;
} else if (
key !== STYLE_STROKECOLOR &&
value === STYLE_STROKECOLOR &&
key !== 'strokeColor' &&
value === 'strokeColor' &&
state.shape != null
) {
// @ts-ignore
shape[field] = state.style[STYLE_STROKECOLOR];
shape[field] = state.style.strokeColor;
}
if (referenced != null) {
@ -427,7 +392,7 @@ class mxCellRenderer {
shape[field] = null;
if (rstate != null) {
const rshape = key === STYLE_FONTCOLOR ? rstate.text : rstate.shape;
const rshape = key === 'fontColor' ? rstate.text : rstate.shape;
if (rshape != null && field !== 'indicatorColor') {
// @ts-ignore
@ -522,7 +487,7 @@ class mxCellRenderer {
// Dispatches the drop event to the graph which
// 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))
);
@ -923,7 +888,7 @@ class mxCellRenderer {
// Dispatches the drop event to the graph which
// 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));
}
@ -990,7 +955,7 @@ class mxCellRenderer {
state.view.graph.isHtmlLabel(state.cell) ||
(value != null && isNode(value));
const dialect = isForceHtml ? DIALECT_STRICTHTML : state.view.graph.dialect;
const overflow = state.style[STYLE_OVERFLOW] || 'visible';
const overflow = state.style.overflow || 'visible';
if (
state.text != null &&
@ -1036,7 +1001,7 @@ class mxCellRenderer {
const bounds = this.getLabelBounds(state);
const nextScale = this.getTextScale(state);
this.resolveColor(state, 'color', STYLE_FONTCOLOR);
this.resolveColor(state, 'color', 'fontColor');
if (
forced ||
@ -1103,22 +1068,22 @@ class mxCellRenderer {
}
return (
check('fontStyle', STYLE_FONTSTYLE, DEFAULT_FONTSTYLE) ||
check('family', STYLE_FONTFAMILY, DEFAULT_FONTFAMILY) ||
check('size', STYLE_FONTSIZE, DEFAULT_FONTSIZE) ||
check('color', STYLE_FONTCOLOR, 'black') ||
check('align', STYLE_ALIGN, '') ||
check('valign', STYLE_VERTICAL_ALIGN, '') ||
check('spacing', STYLE_SPACING, 2) ||
check('spacingTop', STYLE_SPACING_TOP, 0) ||
check('spacingRight', STYLE_SPACING_RIGHT, 0) ||
check('spacingBottom', STYLE_SPACING_BOTTOM, 0) ||
check('spacingLeft', STYLE_SPACING_LEFT, 0) ||
check('horizontal', STYLE_HORIZONTAL, true) ||
check('background', STYLE_LABEL_BACKGROUNDCOLOR, null) ||
check('border', STYLE_LABEL_BORDERCOLOR, null) ||
check('opacity', STYLE_TEXT_OPACITY, 100) ||
check('textDirection', STYLE_TEXT_DIRECTION, DEFAULT_TEXT_DIRECTION)
check('fontStyle', 'fontStyle', DEFAULT_FONTSTYLE) ||
check('family', 'fontFamily', DEFAULT_FONTFAMILY) ||
check('size', 'fontSize', DEFAULT_FONTSIZE) ||
check('color', 'fontColor', 'black') ||
check('align', 'align', '') ||
check('valign', 'verticalAlign', '') ||
check('spacing', 'spacing', 2) ||
check('spacingTop', 'spacingTop', 0) ||
check('spacingRight', 'spacingRight', 0) ||
check('spacingBottom', 'spacingBottom', 0) ||
check('spacingLeft', 'spacingLeft', 0) ||
check('horizontal', 'horizontal', true) ||
check('background', 'labelBackgroundColor', null) ||
check('border', 'labelBorderColor', null) ||
check('opacity', 'textOpacity', 100) ||
check('textDirection', 'textDirection', DEFAULT_TEXT_DIRECTION)
);
}
@ -1211,16 +1176,8 @@ class mxCellRenderer {
// Shape can modify its label bounds
if (state.shape != null) {
const hpos = mxUtils.getValue(
state.style,
STYLE_LABEL_POSITION,
ALIGN_CENTER
);
const vpos = mxUtils.getValue(
state.style,
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
);
const hpos = getValue(state.style, 'labelPosition', ALIGN_CENTER);
const vpos = getValue(state.style, 'verticalLabelPosition', ALIGN_MIDDLE);
if (hpos === ALIGN_CENTER && vpos === ALIGN_MIDDLE) {
bounds = state.shape.getLabelBounds(bounds);
@ -1228,7 +1185,7 @@ class mxCellRenderer {
}
// 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) {
bounds.width = parseFloat(lw) * scale;
@ -1260,8 +1217,7 @@ class mxCellRenderer {
if (
!this.legacySpacing ||
(state.style[STYLE_OVERFLOW] !== 'fill' &&
state.style[STYLE_OVERFLOW] !== 'width')
(state.style.overflow !== 'fill' && state.style.overflow !== 'width')
) {
const s = state.view.scale;
// @ts-ignore
@ -1269,17 +1225,9 @@ class mxCellRenderer {
bounds.x += spacing.x * s;
bounds.y += spacing.y * s;
const hpos = mxUtils.getValue(
state.style,
STYLE_LABEL_POSITION,
ALIGN_CENTER
);
const vpos = mxUtils.getValue(
state.style,
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
);
const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
const hpos = getValue(state.style, 'labelPosition', ALIGN_CENTER);
const vpos = getValue(state.style, 'verticalLabelPosition', ALIGN_MIDDLE);
const lw = getValue(state.style, 'labelWidth', null);
bounds.width = Math.max(
0,
@ -1307,14 +1255,14 @@ class mxCellRenderer {
theta !== 0 &&
state != null &&
// @ts-ignore
state.view.graph.model.isVertex(state.cell)
state.cell.isVertex()
) {
const cx = state.getCenterX();
const cy = state.getCenterY();
if (bounds.x !== cx || bounds.y !== cy) {
const rad = theta * (Math.PI / 180);
const pt = mxUtils.getRotatedPoint(
const pt = getRotatedPoint(
new mxPoint(bounds.x, bounds.y),
Math.cos(rad),
Math.sin(rad),
@ -1341,11 +1289,8 @@ class mxCellRenderer {
this.createCellOverlays(state);
if (state.overlays != null) {
const rot = mxUtils.mod(
mxUtils.getValue(state.style, STYLE_ROTATION, 0),
90
);
const rad = mxUtils.toRadians(rot);
const rot = mod(getValue(state.style, 'rotation', 0), 90);
const rad = toRadians(rot);
const cos = Math.cos(rad);
const sin = Math.sin(rad);
@ -1358,7 +1303,7 @@ class mxCellRenderer {
let cx = bounds.getCenterX();
let cy = bounds.getCenterY();
const point = mxUtils.getRotatedPoint(
const point = getRotatedPoint(
new mxPoint(cx, cy),
cos,
sin,
@ -1403,7 +1348,7 @@ class mxCellRenderer {
const bounds = this.getControlBounds(state, image.width, image.height);
const r = this.legacyControlPosition
? mxUtils.getValue(state.style, STYLE_ROTATION, 0)
? getValue(state.style, 'rotation', 0)
: // @ts-ignore
state.shape.getTextRotation();
const s = state.view.scale;
@ -1450,7 +1395,7 @@ class mxCellRenderer {
let rot = state.shape.getShapeRotation();
if (this.legacyControlPosition) {
rot = mxUtils.getValue(state.style, STYLE_ROTATION, 0);
rot = getValue(state.style, 'rotation', 0);
} else if (state.shape.isPaintBoundsInverted()) {
const t = (state.width - state.height) / 2;
cx += t;
@ -1458,11 +1403,11 @@ class mxCellRenderer {
}
if (rot !== 0) {
const rad = mxUtils.toRadians(rot);
const rad = toRadians(rot);
const cos = Math.cos(rad);
const sin = Math.sin(rad);
const point = mxUtils.getRotatedPoint(
const point = getRotatedPoint(
new mxPoint(cx, cy),
cos,
sin,
@ -1648,8 +1593,6 @@ class mxCellRenderer {
force: boolean = false,
rendering: boolean = true
): boolean {
const model = <mxGraphModel>state.view.graph.model;
let shapeChanged = false;
// Forces creation of new shape if shape style has changed
@ -1657,7 +1600,7 @@ class mxCellRenderer {
state.shape != null &&
state.shape.style != null &&
state.style != null &&
state.shape.style[STYLE_SHAPE] !== state.style[STYLE_SHAPE]
state.shape.style.shape !== state.style.shape
) {
state.shape.destroy();
state.shape = null;
@ -1687,7 +1630,7 @@ class mxCellRenderer {
} else if (
!force &&
state.shape != null &&
(!mxUtils.equalEntries(state.shape.style, state.style) ||
(!equalEntries(state.shape.style, state.style) ||
this.checkPlaceholderStyles(state))
) {
state.shape.resetStyles();
@ -1776,7 +1719,7 @@ class mxCellRenderer {
shape.scale !== state.view.scale ||
(state.absolutePoints == null && !shape.bounds.equals(state)) ||
(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,
SHAPE_LABEL,
SHAPE_SWIMLANE,
STYLE_ALIGN,
STYLE_ANCHOR_POINT_DIRECTION,
STYLE_ASPECT,
STYLE_AUTOSIZE,
STYLE_BENDABLE,
STYLE_CLONEABLE,
STYLE_DELETABLE,
STYLE_DIRECTION,
STYLE_EDITABLE,
STYLE_ENTRY_DX,
STYLE_ENTRY_DY,
STYLE_ENTRY_PERIMETER,
STYLE_ENTRY_X,
STYLE_ENTRY_Y,
STYLE_EXIT_DX,
STYLE_EXIT_DY,
STYLE_EXIT_PERIMETER,
STYLE_EXIT_X,
STYLE_EXIT_Y,
STYLE_FILLCOLOR,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_FOLDABLE,
STYLE_FONTFAMILY,
STYLE_FONTSIZE,
STYLE_FONTSTYLE,
STYLE_HORIZONTAL,
STYLE_IMAGE,
STYLE_IMAGE_HEIGHT,
STYLE_IMAGE_WIDTH,
STYLE_INDICATOR_COLOR,
STYLE_INDICATOR_GRADIENTCOLOR,
STYLE_INDICATOR_IMAGE,
STYLE_INDICATOR_SHAPE,
STYLE_MOVABLE,
STYLE_NOLABEL,
STYLE_ORTHOGONAL,
STYLE_OVERFLOW,
STYLE_POINTER_EVENTS,
STYLE_RESIZABLE,
STYLE_RESIZE_HEIGHT,
STYLE_RESIZE_WIDTH,
STYLE_ROTATABLE,
STYLE_ROTATION,
STYLE_SHAPE,
STYLE_SOURCE_PORT,
STYLE_SPACING,
STYLE_SPACING_BOTTOM,
STYLE_SPACING_LEFT,
STYLE_SPACING_RIGHT,
STYLE_SPACING_TOP,
STYLE_STARTSIZE,
STYLE_STROKECOLOR,
STYLE_TARGET_PORT,
STYLE_VERTICAL_ALIGN,
STYLE_WHITE_SPACE,
} from '../../util/mxConstants';
import mxMultiplicity from '../connection/mxMultiplicity';
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
* color is set to 'swimlane'.
* @default {@link mxConstants.STYLE_FILLCOLOR}
* @default {@link 'fillColor'}
*/
// swimlaneIndicatorColorAttribute: string;
swimlaneIndicatorColorAttribute: string = STYLE_FILLCOLOR;
swimlaneIndicatorColorAttribute: string = 'fillColor';
/**
* Holds the list of image bundles.
@ -2700,11 +2644,11 @@ class mxGraph extends mxEventSource {
// postProcessCellStyle(style: StyleMap): StyleMap;
postProcessCellStyle(style: any): any {
if (style != null) {
const key = style[STYLE_IMAGE];
const key = style.image;
let image = this.getImageFromBundles(key);
if (image != null) {
style[STYLE_IMAGE] = image;
style.image = image;
} else {
image = key;
}
@ -2729,7 +2673,7 @@ class mxGraph extends mxEventSource {
}
}
style[STYLE_IMAGE] = image;
style.image = image;
}
}
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
* and returns the new value as 0 or 1. If no cells are specified, then the
* selection cells are used. For example, this can be used to toggle
* {@link mxConstants.STYLE_ROUNDED} or any other style with a boolean value.
* {@link 'rounded'} or any other style with a boolean value.
*
* Parameter:
*
@ -2988,7 +2932,7 @@ class mxGraph extends mxEventSource {
* transaction is in progress. Returns the edge that was flipped.
*
* Here is an example that overrides this implementation to invert the
* value of {@link mxConstants.STYLE_ELBOW} without removing any existing styles.
* value of {@link 'elbow'} without removing any existing styles.
*
* ```javascript
* graph.flipEdge = function(edge)
@ -2996,11 +2940,11 @@ class mxGraph extends mxEventSource {
* if (edge != null)
* {
* var style = this.getCurrentCellStyle(edge);
* var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,
* var elbow = mxUtils.getValue(style, 'elbow',
* mxConstants.ELBOW_HORIZONTAL);
* var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
* mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;
* this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);
* this.setCellStyles('elbow', value, [edge]);
* }
* };
* ```
@ -4647,7 +4591,7 @@ class mxGraph extends mxEventSource {
if (tmp != null) {
bounds = <mxGeometry>tmp;
const startSize = mxUtils.getValue(style, STYLE_STARTSIZE);
const startSize = mxUtils.getValue(style, 'startSize');
if (startSize > 0) {
bounds.height = Math.max(bounds.height, startSize);
@ -4667,7 +4611,7 @@ class mxGraph extends mxEventSource {
geo.alternateBounds.x = geo.x;
geo.alternateBounds.y = geo.y;
const alpha = mxUtils.toRadians(style[STYLE_ROTATION] || 0);
const alpha = mxUtils.toRadians(style.rotation || 0);
if (alpha !== 0) {
const dx = geo.alternateBounds.getCenterX() - geo.getCenterX();
@ -4778,10 +4722,10 @@ class mxGraph extends mxEventSource {
cellStyle = '';
}
if (mxUtils.getValue(style, STYLE_HORIZONTAL, true)) {
if (mxUtils.getValue(style, 'horizontal', true)) {
cellStyle = mxUtils.setStyle(
cellStyle,
STYLE_STARTSIZE,
'startSize',
size.height + 8
);
@ -4793,7 +4737,7 @@ class mxGraph extends mxEventSource {
} else {
cellStyle = mxUtils.setStyle(
cellStyle,
STYLE_STARTSIZE,
'startSize',
size.width + 8
);
@ -4807,7 +4751,7 @@ class mxGraph extends mxEventSource {
this.getModel().setStyle(cell, cellStyle);
} else {
const state = this.getView().createState(cell);
const align = state.style[STYLE_ALIGN] || ALIGN_CENTER;
const align = state.style.align || ALIGN_CENTER;
if (align === ALIGN_RIGHT) {
geo.x += geo.width - size.width;
@ -4862,9 +4806,9 @@ class mxGraph extends mxEventSource {
* var result = graphGetPreferredSizeForCell.apply(this, arguments);
* var style = this.getCellStyle(cell);
*
* if (style['minWidth'] > 0)
* if (style.minWidth > 0)
* {
* result.width = Math.max(style['minWidth'], result.width);
* result.width = Math.max(style.minWidth, result.width);
* }
*
* return result;
@ -4886,34 +4830,34 @@ class mxGraph extends mxEventSource {
const { style } = state;
if (!cell.isEdge()) {
const fontSize = style[STYLE_FONTSIZE] || DEFAULT_FONTSIZE;
const fontSize = style.fontSize || DEFAULT_FONTSIZE;
let dx = 0;
let dy = 0;
// Adds dimension of image if shape is a label
if (this.getImage(state) != null || style[STYLE_IMAGE] != null) {
if (style[STYLE_SHAPE] === SHAPE_LABEL) {
if (style[STYLE_VERTICAL_ALIGN] === ALIGN_MIDDLE) {
if (this.getImage(state) != null || style.image != null) {
if (style.shape === SHAPE_LABEL) {
if (style.verticalAlign === ALIGN_MIDDLE) {
dx +=
parseFloat(style[STYLE_IMAGE_WIDTH]) || new mxLabel().imageSize;
parseFloat(style.imageWidth) || new mxLabel().imageSize;
}
if (style[STYLE_ALIGN] !== ALIGN_CENTER) {
if (style.align !== ALIGN_CENTER) {
dy +=
parseFloat(style[STYLE_IMAGE_HEIGHT]) ||
parseFloat(style.imageHeight) ||
new mxLabel().imageSize;
}
}
}
// Adds spacings
dx += 2 * (style[STYLE_SPACING] || 0);
dx += style[STYLE_SPACING_LEFT] || 0;
dx += style[STYLE_SPACING_RIGHT] || 0;
dx += 2 * (style.spacing || 0);
dx += style.spacingLeft || 0;
dx += style.spacingRight || 0;
dy += 2 * (style[STYLE_SPACING] || 0);
dy += style[STYLE_SPACING_TOP] || 0;
dy += style[STYLE_SPACING_BOTTOM] || 0;
dy += 2 * (style.spacing || 0);
dy += style.spacingTop || 0;
dy += style.spacingBottom || 0;
// Add spacing for collapse/expand icon
// LATER: Check alignment and use constants
@ -4937,14 +4881,14 @@ class mxGraph extends mxEventSource {
const size = mxUtils.getSizeForString(
value,
fontSize,
style[STYLE_FONTFAMILY],
style.fontFamily,
textWidth,
style[STYLE_FONTSTYLE]
style.fontStyle
);
let width = size.width + dx;
let height = size.height + dy;
if (!mxUtils.getValue(style, STYLE_HORIZONTAL, true)) {
if (!mxUtils.getValue(style, 'horizontal', true)) {
const tmp = height;
height = width;
width = tmp;
@ -5229,17 +5173,17 @@ class mxGraph extends mxEventSource {
const w = geo.width;
const h = geo.height;
geo.scale(dx, dy, style[STYLE_ASPECT] === 'fixed');
geo.scale(dx, dy, style.aspect === 'fixed');
if (style[STYLE_RESIZE_WIDTH] == '1') {
if (style.resizeWidth == '1') {
geo.width = w * dx;
} else if (style[STYLE_RESIZE_WIDTH] == '0') {
} else if (style.resizeWidth == '0') {
geo.width = w;
}
if (style[STYLE_RESIZE_HEIGHT] == '1') {
if (style.resizeHeight == '1') {
geo.height = h * dy;
} else if (style[STYLE_RESIZE_HEIGHT] == '0') {
} else if (style.resizeHeight == '0') {
geo.height = h;
}
@ -5568,7 +5512,7 @@ class mxGraph extends mxEventSource {
if (parent.isVertex()) {
const style = this.getCurrentCellStyle(parent);
angle = mxUtils.getValue(style, STYLE_ROTATION, 0);
angle = mxUtils.getValue(style, 'rotation', 0);
}
if (angle !== 0) {
@ -5620,11 +5564,11 @@ class mxGraph extends mxEventSource {
const style = this.getCurrentCellStyle(parent);
const dir = mxUtils.getValue(
style,
STYLE_DIRECTION,
'direction',
DIRECTION_EAST
);
const flipH = mxUtils.getValue(style, STYLE_FLIPH, 0) == 1;
const flipV = mxUtils.getValue(style, STYLE_FLIPV, 0) == 1;
const flipH = mxUtils.getValue(style, 'flipH', 0) == 1;
const flipV = mxUtils.getValue(style, 'flipV', 0) == 1;
if (dir === DIRECTION_SOUTH || dir === DIRECTION_NORTH) {
const tmp = size.width;
@ -5878,7 +5822,7 @@ class mxGraph extends mxEventSource {
const bounds = <mxRectangle>(
this.getView().getPerimeterBounds(terminalState)
);
const direction = terminalState.style[STYLE_DIRECTION];
const direction = terminalState.style.direction;
if (direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH) {
bounds.x += bounds.width / 2 - bounds.height / 2;
@ -5905,8 +5849,8 @@ class mxGraph extends mxEventSource {
// LATER: Add flipping support for image shapes
if ((<mxCell>terminalState.cell).isVertex()) {
let flipH = terminalState.style[STYLE_FLIPH];
let flipV = terminalState.style[STYLE_FLIPV];
let flipH = terminalState.style.flipH;
let flipV = terminalState.style.flipV;
// Legacy support for stencilFlipH/V
if (
@ -5996,11 +5940,11 @@ class mxGraph extends mxEventSource {
): mxConnectionConstraint {
let point = null;
// @ts-ignore
const x = <string>edge.style[source ? STYLE_EXIT_X : STYLE_ENTRY_X];
const x = <string>edge.style[source ? 'exitX' : 'entryX'];
if (x != null) {
// @ts-ignore
const y = <string>edge.style[source ? STYLE_EXIT_Y : STYLE_ENTRY_Y];
const y = <string>edge.style[source ? 'exitY' : 'entryY'];
if (y != null) {
point = new mxPoint(parseFloat(x), parseFloat(y));
@ -6014,18 +5958,18 @@ class mxGraph extends mxEventSource {
if (point != null) {
perimeter = mxUtils.getValue(
edge.style,
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
source ? 'exitPerimeter' : 'entryPerimeter',
true
);
// Add entry/exit offset
// @ts-ignore
dx = parseFloat(
<string>edge.style[source ? STYLE_EXIT_DX : STYLE_ENTRY_DX]
<string>edge.style[source ? 'exitDx' : 'entryDx']
);
// @ts-ignore
dy = parseFloat(
<string>edge.style[source ? STYLE_EXIT_DY : STYLE_ENTRY_DY]
<string>edge.style[source ? 'exitDy' : 'entryDy']
);
dx = Number.isFinite(dx) ? dx : 0;
@ -6058,41 +6002,41 @@ class mxGraph extends mxEventSource {
try {
if (constraint == null || constraint.point == null) {
this.setCellStyles(source ? STYLE_EXIT_X : STYLE_ENTRY_X, null, [
this.setCellStyles(source ? 'exitX' : 'entryX', null, [
edge,
]);
this.setCellStyles(source ? STYLE_EXIT_Y : STYLE_ENTRY_Y, null, [
this.setCellStyles(source ? 'exitY' : 'entryY', null, [
edge,
]);
this.setCellStyles(source ? STYLE_EXIT_DX : STYLE_ENTRY_DX, null, [
this.setCellStyles(source ? 'exitDx' : 'entryDx', null, [
edge,
]);
this.setCellStyles(source ? STYLE_EXIT_DY : STYLE_ENTRY_DY, null, [
this.setCellStyles(source ? 'exitDy' : 'entryDy', null, [
edge,
]);
this.setCellStyles(
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
source ? 'exitPerimeter' : 'entryPerimeter',
null,
[edge]
);
} else if (constraint.point != null) {
this.setCellStyles(
source ? STYLE_EXIT_X : STYLE_ENTRY_X,
source ? 'exitX' : 'entryX',
constraint.point.x,
[edge]
);
this.setCellStyles(
source ? STYLE_EXIT_Y : STYLE_ENTRY_Y,
source ? 'exitY' : 'entryY',
constraint.point.y,
[edge]
);
this.setCellStyles(
source ? STYLE_EXIT_DX : STYLE_ENTRY_DX,
source ? 'exitDx' : 'entryDx',
constraint.dx,
[edge]
);
this.setCellStyles(
source ? STYLE_EXIT_DY : STYLE_ENTRY_DY,
source ? 'exitDy' : 'entryDy',
constraint.dy,
[edge]
);
@ -6100,13 +6044,13 @@ class mxGraph extends mxEventSource {
// Only writes 0 since 1 is default
if (!constraint.perimeter) {
this.setCellStyles(
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
source ? 'exitPerimeter' : 'entryPerimeter',
'0',
[edge]
);
} else {
this.setCellStyles(
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
source ? 'exitPerimeter' : 'entryPerimeter',
null,
[edge]
);
@ -6137,13 +6081,13 @@ class mxGraph extends mxEventSource {
if (vertex != null && constraint.point != null) {
const bounds = <mxRectangle>this.getView().getPerimeterBounds(vertex);
const cx = new mxPoint(bounds.getCenterX(), bounds.getCenterY());
const direction = vertex.style[STYLE_DIRECTION];
const direction = vertex.style.direction;
let r1 = 0;
// Bounds need to be rotated by 90 degrees for further computation
if (
direction != null &&
mxUtils.getValue(vertex.style, STYLE_ANCHOR_POINT_DIRECTION, 1) == 1
mxUtils.getValue(vertex.style, 'anchorPointDirection', 1) == 1
) {
if (direction === DIRECTION_NORTH) {
r1 += 270;
@ -6170,7 +6114,7 @@ class mxGraph extends mxEventSource {
);
// Rotation for direction before projection on perimeter
let r2 = vertex.style[STYLE_ROTATION] || 0;
let r2 = vertex.style.rotation || 0;
if (constraint.perimeter) {
if (r1 !== 0) {
@ -6194,8 +6138,8 @@ class mxGraph extends mxEventSource {
r2 += r1;
if ((<mxCell>vertex.cell).isVertex()) {
let flipH = vertex.style[STYLE_FLIPH] == 1;
let flipV = vertex.style[STYLE_FLIPV] == 1;
let flipH = vertex.style.flipH == 1;
let flipV = vertex.style.flipV == 1;
// Legacy support for stencilFlipH/V
if (vertex.shape != null && vertex.shape.stencil != null) {
@ -6315,7 +6259,7 @@ class mxGraph extends mxEventSource {
}
// Sets or resets all previous information for connecting to a child port
const key = source ? STYLE_SOURCE_PORT : STYLE_TARGET_PORT;
const key = source ? 'sourcePort' : 'targetPort';
this.setCellStyles(key, id, [edge]);
}
@ -6806,7 +6750,7 @@ class mxGraph extends mxEventSource {
const style = this.getCurrentCellStyle(cell);
if (bbox != null) {
const angle = mxUtils.getValue(style, STYLE_ROTATION, 0);
const angle = mxUtils.getValue(style, 'rotation', 0);
if (angle !== 0) {
bbox = mxUtils.getBoundingBox(bbox, angle);
@ -7509,7 +7453,14 @@ class mxGraph extends mxEventSource {
*/
// isOrthogonal(edge: mxCellState): boolean;
isOrthogonal(edge: mxCellState): boolean {
const orthogonal = edge.style[STYLE_ORTHOGONAL];
/*
'orthogonal' defines if the connection points on either end of the edge should
be computed so that the edge is vertical or horizontal if possible
and if the point is not at a fixed location. Default is false.
This also returns true if the edgeStyle of the edge is an elbow or
entity.
*/
const orthogonal = edge.style.orthogonal;
if (orthogonal != null) {
return orthogonal;
@ -8016,7 +7967,7 @@ class mxGraph extends mxEventSource {
if (this.labelsVisible && cell != null) {
const style = this.getCurrentCellStyle(cell);
if (!mxUtils.getValue(style, STYLE_NOLABEL, false)) {
if (!mxUtils.getValue(style, 'noLabel', false)) {
result = this.convertValueToString(cell);
}
}
@ -8055,7 +8006,7 @@ class mxGraph extends mxEventSource {
*
* Returns true if no white-space CSS style directive should be used for
* displaying the given cells label. This implementation returns true if
* {@link mxConstants.STYLE_WHITE_SPACE} in the style of the given cell is 'wrap'.
* {@link 'whiteSpace'} in the style of the given cell is 'wrap'.
*
* This is used as a workaround for IE ignoring the white-space directive
* of child elements if the directive appears in a parent element. It
@ -8093,20 +8044,20 @@ class mxGraph extends mxEventSource {
*/
// isWrapping(cell: mxCell): boolean;
isWrapping(cell: mxCell): boolean {
return this.getCurrentCellStyle(cell)[STYLE_WHITE_SPACE] === 'wrap';
return this.getCurrentCellStyle(cell).whiteSpace === 'wrap';
}
/**
* Returns true if the overflow portion of labels should be hidden. If this
* returns true then vertex labels will be clipped to the size of the vertices.
* This implementation returns true if {@link STYLE_OVERFLOW} in the
* This implementation returns true if `overflow` in the
* style of the given cell is 'hidden'.
*
* @param state {@link mxCell} whose label should be clipped.
*/
// isLabelClipped(cell: mxCell): boolean;
isLabelClipped(cell: mxCell): boolean {
return this.getCurrentCellStyle(cell)[STYLE_OVERFLOW] === 'hidden';
return this.getCurrentCellStyle(cell).overflow === 'hidden';
}
/**
@ -8258,10 +8209,10 @@ class mxGraph extends mxEventSource {
const result = new mxRectangle();
const style = this.getCurrentCellStyle(swimlane, ignoreState);
const size = parseInt(
mxUtils.getValue(style, STYLE_STARTSIZE, DEFAULT_STARTSIZE)
mxUtils.getValue(style, 'startSize', DEFAULT_STARTSIZE)
);
if (mxUtils.getValue(style, STYLE_HORIZONTAL, true)) {
if (mxUtils.getValue(style, 'horizontal', true)) {
result.height = size;
} else {
result.width = size;
@ -8274,10 +8225,10 @@ class mxGraph extends mxEventSource {
*/
// getSwimlaneDirection(style: string): string;
getSwimlaneDirection(style: any): string {
const dir = mxUtils.getValue(style, STYLE_DIRECTION, DIRECTION_EAST);
const flipH = mxUtils.getValue(style, STYLE_FLIPH, 0) == 1;
const flipV = mxUtils.getValue(style, STYLE_FLIPV, 0) == 1;
const h = mxUtils.getValue(style, STYLE_HORIZONTAL, true);
const dir = mxUtils.getValue(style, 'direction', DIRECTION_EAST);
const flipH = mxUtils.getValue(style, 'flipH', 0) == 1;
const flipV = mxUtils.getValue(style, 'flipV', 0) == 1;
const h = mxUtils.getValue(style, 'horizontal', true);
let n = h ? 0 : 3;
if (dir === DIRECTION_NORTH) {
@ -8322,7 +8273,7 @@ class mxGraph extends mxEventSource {
if (this.isSwimlane(swimlane, ignoreState)) {
const style = this.getCurrentCellStyle(swimlane, ignoreState);
const size = parseInt(
mxUtils.getValue(style, STYLE_STARTSIZE, DEFAULT_STARTSIZE)
mxUtils.getValue(style, 'startSize', DEFAULT_STARTSIZE)
);
const dir = this.getSwimlaneDirection(style);
@ -8341,7 +8292,7 @@ class mxGraph extends mxEventSource {
/**
* Returns the image URL for the given cell state. This implementation
* returns the value stored under {@link mxConstants.STYLE_IMAGE} in the cell
* returns the value stored under {@link 'image'} in the cell
* style.
*
* @param state {@link mxCellState} whose image URL should be returned.
@ -8349,7 +8300,7 @@ class mxGraph extends mxEventSource {
// getImage(state: mxCellState): string;
getImage(state: mxCellState): mxImage | null {
return state != null && state.style != null
? state.style[STYLE_IMAGE]
? state.style.image
: null;
}
@ -8362,8 +8313,8 @@ class mxGraph extends mxEventSource {
isTransparentState(state: mxCellState): boolean {
let result = false;
if (state != null) {
const stroke = mxUtils.getValue(state.style, STYLE_STROKECOLOR, NONE);
const fill = mxUtils.getValue(state.style, STYLE_FILLCOLOR, NONE);
const stroke = mxUtils.getValue(state.style, 'strokeColor', NONE);
const fill = mxUtils.getValue(state.style, 'fillColor', NONE);
result = stroke === NONE && fill === NONE && this.getImage(state) == null;
}
return result;
@ -8372,7 +8323,7 @@ class mxGraph extends mxEventSource {
/**
* Returns the vertical alignment for the given cell state. This
* implementation returns the value stored under
* {@link mxConstants.STYLE_VERTICAL_ALIGN} in the cell style.
* {@link 'verticalAlign'} in the cell style.
*
* @param state {@link mxCellState} whose vertical alignment should be
* returned.
@ -8380,7 +8331,7 @@ class mxGraph extends mxEventSource {
// getVerticalAlign(state: mxCellState): string;
getVerticalAlign(state: mxCellState): string | null {
return state != null && state.style != null
? state.style[STYLE_VERTICAL_ALIGN] || ALIGN_MIDDLE
? state.style.verticalAlign || ALIGN_MIDDLE
: null;
}
@ -8395,7 +8346,7 @@ class mxGraph extends mxEventSource {
// getIndicatorColor(state: mxCellState): string;
getIndicatorColor(state: mxCellState): string | null {
return state != null && state.style != null
? state.style[STYLE_INDICATOR_COLOR]
? state.style.indicatorColor
: null;
}
@ -8410,7 +8361,7 @@ class mxGraph extends mxEventSource {
// getIndicatorGradientColor(state: mxCellState): string;
getIndicatorGradientColor(state: mxCellState): string | null {
return state != null && state.style != null
? state.style[STYLE_INDICATOR_GRADIENTCOLOR]
? state.style.gradientColor
: null;
}
@ -8424,7 +8375,7 @@ class mxGraph extends mxEventSource {
// getIndicatorShape(state: mxCellState): any;
getIndicatorShape(state: mxCellState): string | null {
return state != null && state.style != null
? state.style[STYLE_INDICATOR_SHAPE]
? state.style.indicatorShape
: null;
}
@ -8438,7 +8389,7 @@ class mxGraph extends mxEventSource {
// getIndicatorImage(state: mxCellState): any;
getIndicatorImage(state: mxCellState): mxImage | null {
return state != null && state.style != null
? state.style[STYLE_INDICATOR_IMAGE]
? state.style.indicatorImage
: null;
}
@ -8476,7 +8427,7 @@ class mxGraph extends mxEventSource {
!cell.isEdge()
) {
return (
this.getCurrentCellStyle(cell, ignoreState)[STYLE_SHAPE] ===
this.getCurrentCellStyle(cell, ignoreState).shape ===
SHAPE_SWIMLANE
);
}
@ -8634,7 +8585,7 @@ class mxGraph extends mxEventSource {
// isCellCloneable(cell: mxCell): boolean;
isCellCloneable(cell: mxCell): boolean {
const style = this.getCurrentCellStyle(cell);
return this.isCellsCloneable() && style[STYLE_CLONEABLE] !== 0;
return this.isCellsCloneable() && style.cloneable !== 0;
}
/**
@ -8711,7 +8662,7 @@ class mxGraph extends mxEventSource {
* {
* var style = this.getCurrentCellStyle(cell);
*
* return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0;
* return this.isCellsSelectable() && !this.isCellLocked(cell) && style.selectable != 0;
* };
* ```
*
@ -8757,14 +8708,14 @@ class mxGraph extends mxEventSource {
/**
* Returns true if the given cell is moveable. This returns
* {@link cellsDeletable} for all given cells if a cells style does not specify
* {@link mxConstants.STYLE_DELETABLE} to be 0.
* {@link 'deletable'} to be 0.
*
* @param cell {@link mxCell} whose deletable state should be returned.
*/
// isCellDeletable(cell: mxCell): boolean;
isCellDeletable(cell: mxCell): boolean {
const style = this.getCurrentCellStyle(cell);
return this.isCellsDeletable() && style[STYLE_DELETABLE] !== 0;
return this.isCellsDeletable() && style.deletable !== 0;
}
/**
@ -8803,14 +8754,14 @@ class mxGraph extends mxEventSource {
/**
* Returns true if the given cell is rotatable. This returns true for the given
* cell if its style does not specify {@link mxConstants.STYLE_ROTATABLE} to be 0.
* cell if its style does not specify {@link 'rotatable'} to be 0.
*
* @param cell {@link mxCell} whose rotatable state should be returned.
*/
// isCellRotatable(cell: mxCell): boolean;
isCellRotatable(cell: mxCell): boolean {
const style = this.getCurrentCellStyle(cell);
return style[STYLE_ROTATABLE] !== 0;
return style.rotatable !== 0;
}
/**
@ -8826,7 +8777,7 @@ class mxGraph extends mxEventSource {
/**
* Returns true if the given cell is moveable. This returns {@link cellsMovable}
* for all given cells if {@link isCellLocked} does not return true for the given
* cell and its style does not specify {@link mxConstants.STYLE_MOVABLE} to be 0.
* cell and its style does not specify {@link 'movable'} to be 0.
*
* @param cell {@link mxCell} whose movable state should be returned.
*/
@ -8837,7 +8788,7 @@ class mxGraph extends mxEventSource {
return (
this.isCellsMovable() &&
!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
* {@link cellsResizable} for all given cells if {@link isCellLocked} does not return
* true for the given cell and its style does not specify
* {@link mxConstants.STYLE_RESIZABLE} to be 0.
* {@link 'resizable'} to be 0.
*
* @param cell {@link mxCell} whose resizable state should be returned.
*/
@ -9169,7 +9120,7 @@ class mxGraph extends mxEventSource {
const r =
this.isCellsResizable() &&
!this.isCellLocked(cell) &&
mxUtils.getValue(style, STYLE_RESIZABLE, '1') != '0';
mxUtils.getValue(style, 'resizeable', '1') != '0';
// alert(r);
return r;
}
@ -9223,7 +9174,7 @@ class mxGraph extends mxEventSource {
return (
this.isCellsBendable() &&
!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
* 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.
*/
@ -9261,7 +9212,7 @@ class mxGraph extends mxEventSource {
return (
this.isCellsEditable() &&
!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
* updated after a change of the label. This implementation returns
* {@link autoSizeCells} or checks if the cell style does specify
* {@link mxConstants.STYLE_AUTOSIZE} to be 1.
* {@link 'autoSize'} to be 1.
*
* @param cell {@link mxCell} that should be resized.
*/
@ -9432,7 +9383,7 @@ class mxGraph extends mxEventSource {
isAutoSizeCell(cell: mxCell) {
const style = this.getCurrentCellStyle(cell);
return this.isAutoSizeCells() || style[STYLE_AUTOSIZE] == 1;
return this.isAutoSizeCells() || style.autosize == 1;
}
/**
@ -9657,7 +9608,7 @@ class mxGraph extends mxEventSource {
// isCellFoldable(cell: mxCell, collapse: boolean): boolean;
isCellFoldable(cell: mxCell, collapse: boolean = false): boolean {
const style = this.getCurrentCellStyle(cell);
return cell.getChildCount() > 0 && style[STYLE_FOLDABLE] != 0;
return cell.getChildCount() > 0 && style.foldable != 0;
}
/**
@ -9975,7 +9926,7 @@ class mxGraph extends mxEventSource {
}
} else {
const alpha = mxUtils.toRadians(
mxUtils.getValue(state.style, STYLE_ROTATION) || 0
mxUtils.getValue(state.style, 'rotation') || 0
);
if (alpha != 0) {
@ -10396,7 +10347,7 @@ class mxGraph extends mxEventSource {
cell.isVisible() &&
(ignoreFn == null || !ignoreFn(state))
) {
const deg = mxUtils.getValue(state.style, STYLE_ROTATION) || 0;
const deg = mxUtils.getValue(state.style, 'rotation') || 0;
let box: mxCellState | mxRectangle = state; // TODO: CHECK ME!!!! ==========================================================
if (deg != 0) {
@ -11128,7 +11079,7 @@ class mxGraph extends mxEventSource {
return (
state.shape == null ||
state.shape.paintBackground !== this.paintBackground ||
mxUtils.getValue(state.style, STYLE_POINTER_EVENTS, '1') == '1' ||
mxUtils.getValue(state.style, 'pointerEvents', '1') == '1' ||
(state.shape.fill != null && state.shape.fill !== NONE)
);
})

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

@ -18,25 +18,6 @@ import {
ALIGN_MIDDLE,
ALIGN_RIGHT,
ALIGN_TOP,
STYLE_ALIGN,
STYLE_EDGE,
STYLE_FLIPH,
STYLE_FLIPV,
STYLE_LABEL_POSITION,
STYLE_LABEL_WIDTH,
STYLE_LOOP,
STYLE_NOEDGESTYLE,
STYLE_ORTHOGONAL_LOOP,
STYLE_PERIMETER,
STYLE_PERIMETER_SPACING,
STYLE_ROTATION,
STYLE_ROUTING_CENTER_X,
STYLE_ROUTING_CENTER_Y,
STYLE_SOURCE_PERIMETER_SPACING,
STYLE_SOURCE_PORT,
STYLE_TARGET_PERIMETER_SPACING,
STYLE_TARGET_PORT,
STYLE_VERTICAL_LABEL_POSITION,
} from '../../util/mxConstants';
import mxClient from '../../mxClient';
import mxEvent from '../../util/event/mxEvent';
@ -1073,7 +1054,8 @@ class mxGraphView extends mxEventSource {
const pState = this.getState(state.cell.getParent());
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) {
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
@ -1138,10 +1120,10 @@ class mxGraphView extends mxEventSource {
*/
// updateVertexLabelOffset(state: mxCellState): void;
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) {
let lw = getValue(state.style, STYLE_LABEL_WIDTH, null);
let lw = getValue(state.style, 'labelWidth', null);
if (lw != null) {
lw *= this.scale;
@ -1155,11 +1137,11 @@ class mxGraphView extends mxEventSource {
// @ts-ignore
state.absoluteOffset.x += state.width;
} else if (h === ALIGN_CENTER) {
const lw = getValue(state.style, STYLE_LABEL_WIDTH, null);
const lw = getValue(state.style, 'labelWidth', null);
if (lw != null) {
// 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;
if (align === ALIGN_CENTER) {
@ -1175,11 +1157,7 @@ class mxGraphView extends mxEventSource {
}
}
const v = getValue(
state.style,
STYLE_VERTICAL_LABEL_POSITION,
ALIGN_MIDDLE
);
const v = getValue(state.style, 'verticalLabelPosition', ALIGN_MIDDLE);
if (v === ALIGN_TOP) {
// @ts-ignore
@ -1473,7 +1451,7 @@ class mxGraphView extends mxEventSource {
if (
(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)))
) {
return source != null && source === target;
@ -1492,9 +1470,9 @@ class mxGraphView extends mxEventSource {
target: mxCellState | null = null
): any {
let edgeStyle: any = this.isLoopStyleEnabled(edge, points, source, target)
? getValue(edge.style, STYLE_LOOP, (<mxGraph>this.graph).defaultLoopStyle)
: !getValue(edge.style, STYLE_NOEDGESTYLE, false)
? edge.style[STYLE_EDGE]
? getValue(edge.style, 'loop', (<mxGraph>this.graph).defaultLoopStyle)
: !getValue(edge.style, 'noEdgeStyle', false)
? edge.style.edge
: null;
// Converts string values to objects
@ -1581,7 +1559,7 @@ class mxGraphView extends mxEventSource {
let next = this.getNextPoint(edge, end, source);
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());
if (alpha !== 0) {
@ -1590,10 +1568,10 @@ class mxGraphView extends mxEventSource {
next = getRotatedPoint(next, cos, sin, center);
}
let border = parseFloat(edge.style[STYLE_PERIMETER_SPACING] || 0);
let border = parseFloat(edge.style.perimeterSpacing || 0);
border += parseFloat(
edge.style[
source ? STYLE_SOURCE_PERIMETER_SPACING : STYLE_TARGET_PERIMETER_SPACING
source ? 'sourcePerimeterSpacing' : 'targetPerimeterSpacing'
] || 0
);
let pt = this.getPerimeterPoint(
@ -1626,7 +1604,7 @@ class mxGraphView extends mxEventSource {
terminal: mxCellState,
source: boolean = false
): mxCellState | null {
const key = source ? STYLE_SOURCE_PORT : STYLE_TARGET_PORT;
const key = source ? 'sourcePort' : 'targetPort';
const id = getValue(state.style, key);
if (id != null) {
@ -1676,8 +1654,8 @@ class mxGraphView extends mxEventSource {
let flipV = false;
if (terminal.cell.isVertex()) {
flipH = getValue(terminal.style, STYLE_FLIPH, 0) == 1;
flipV = getValue(terminal.style, STYLE_FLIPV, 0) == 1;
flipH = getValue(terminal.style, 'flipH', 0) == 1;
flipV = getValue(terminal.style, 'flipV', 0) == 1;
// Legacy support for stencilFlipH/V
if (terminal.shape != null && terminal.shape.stencil != null) {
@ -1721,9 +1699,7 @@ class mxGraphView extends mxEventSource {
// getRoutingCenterX(state: mxCellState): number;
getRoutingCenterX(state: mxCellState) {
const f =
state.style != null
? parseFloat(state.style[STYLE_ROUTING_CENTER_X]) || 0
: 0;
state.style != null ? parseFloat(state.style.routingCenterX) || 0 : 0;
return state.getCenterX() + f * state.width;
}
@ -1733,9 +1709,7 @@ class mxGraphView extends mxEventSource {
// getRoutingCenterY(state: mxCellState): number;
getRoutingCenterY(state: mxCellState) {
const f =
state.style != null
? parseFloat(state.style[STYLE_ROUTING_CENTER_Y]) || 0
: 0;
state.style != null ? parseFloat(state.style.routingCenterY) || 0 : 0;
return state.getCenterY() + f * state.height;
}
@ -1785,7 +1759,7 @@ class mxGraphView extends mxEventSource {
border: number = 0
): mxRectangle | null {
if (terminal != null) {
border += parseFloat(terminal.style[STYLE_PERIMETER_SPACING] || 0);
border += parseFloat(terminal.style.perimeterSpacing || 0);
}
return (<mxCellState>terminal).getPerimeterBounds(border * this.scale);
}
@ -1795,7 +1769,7 @@ class mxGraphView extends mxEventSource {
*/
// getPerimeterFunction(state: mxCellState): any;
getPerimeterFunction(state: mxCellState): Function | null {
let perimeter = state.style[STYLE_PERIMETER];
let perimeter = state.style.perimeter;
// Converts string values to objects
if (typeof perimeter === 'string') {

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

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

212
packages/core/typed_mxgraph_defs.json
View File

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

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

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

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

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

@ -23,7 +23,7 @@ const Template = ({ label, ...args }) => {
mxEvent,
mxRubberband,
mxPoint,
mxConstants,
mxGraphHandler,
mxUtils
} = mxgraph;
@ -132,13 +132,13 @@ const Template = ({ label, ...args }) => {
// Sets the base style for all vertices
const style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';
style[mxConstants.STYLE_STROKECOLOR] = '#000000';
style[mxConstants.STYLE_STROKEWIDTH] = '2';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
style[mxConstants.STYLE_FONTSIZE] = '12';
style[mxConstants.STYLE_FONTSTYLE] = 1;
style.rounded = true;
style.fillColor = '#ffffff';
style.strokeColor = '#000000';
style.strokeWidth = '2';
style.fontColor = '#000000';
style.fontSize = '12';
style.fontStyle = 1;
graph.getStylesheet().putDefaultVertexStyle(style);
// 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
const style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
style.shape = mxConstants.SHAPE_ELLIPSE;
style.perimiter = mxPerimeter.EllipsePerimeter;
style.gradientColor = 'white';
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).

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

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

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
// if the horizontal style is true.
const style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style.rounded = true;
style.edge = mxEdgeStyle.ElbowConnector;
// Installs a popupmenu handler using local function (see below).
graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => {

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

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

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) {
const iw = mxUtils.getValue(
this.style,
mxConstants.STYLE_IMAGE_WIDTH,
'imageWidth',
mxConstants.DEFAULT_IMAGESIZE
);
const ih = mxUtils.getValue(
this.style,
mxConstants.STYLE_IMAGE_HEIGHT,
'imageHeight',
mxConstants.DEFAULT_IMAGESIZE
);

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:
// this.edgeState.style['edgeStyle'] = 'orthogonalEdgeStyle';
// this.edgeState.style.edgeStyle = 'orthogonalEdgeStyle';
// And to use the new edge style in the new edge inserted into the graph,
// update the cell style as follows:
// this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style['edgeStyle']);
// this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style.edgeStyle);
}
return super.updateEdgeState(pt, constraint);
}
@ -134,7 +134,7 @@ const Template = ({ label, ...args }) => {
}
getAllConnectionConstraints(terminal) {
if (terminal != null && this.model.isVertex(terminal.cell)) {
if (terminal != null && terminal.cell.isVertex()) {
return [
new mxConnectionConstraint(new mxPoint(0, 0), true),
new mxConnectionConstraint(new mxPoint(0.5, 0), true),

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

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

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
// if the horizontal style is true.
const style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style.rounded = true;
style.edge = mxEdgeStyle.ElbowConnector;
graph.alternateEdgeStyle = 'elbow=vertical';
// Enables rubberband selection

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

@ -44,7 +44,7 @@ const Template = ({ label, ...args }) => {
// Sets the default edge style
const style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
style.edge = mxEdgeStyle.ElbowConnector;
// Ports are not used as terminals for edges, they are
// only used to compute the graphical connection point

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -19,7 +19,8 @@ const Template = ({ label, ...args }) => {
mxPoint,
mxCellState,
mxEdgeHandler,
mxGraphView
mxGraphView,
mxEvent
} = mxgraph;
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) {
const key = source
? mxConstants.STYLE_SOURCE_PORT
: mxConstants.STYLE_TARGET_PORT;
? 'sourcePort'
: 'targetPort';
if (constraint == null || constraint.id == null) {
this.setCellStyles(key, null, [edge]);
@ -172,8 +172,8 @@ const Template = ({ label, ...args }) => {
// Returns the port for the given connection
graph.getConnectionConstraint = function(edge, terminal, source) {
const key = source
? mxConstants.STYLE_SOURCE_PORT
: mxConstants.STYLE_TARGET_PORT;
? 'sourcePort'
: 'targetPort';
const id = edge.style[key];
if (id != null) {

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

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

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"
// to use the custom shape.
const style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'box';
style.shape = 'box';
// Adds a spacing for the label that matches the
// extrusion size
style[mxConstants.STYLE_SPACING_TOP] = BoxShape.prototype.extrude;
style[mxConstants.STYLE_SPACING_RIGHT] = BoxShape.prototype.extrude;
style.spacingTop = BoxShape.prototype.extrude;
style.spacingRight = BoxShape.prototype.extrude;
// Adds a gradient and shadow to improve the user experience
style[mxConstants.STYLE_GRADIENTCOLOR] = '#FFFFFF';
style[mxConstants.STYLE_SHADOW] = true;
style.gradientColor = '#FFFFFF';
style.shadow = true;
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).

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

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

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

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

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

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

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
let style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'treenode';
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
style[mxConstants.STYLE_SHADOW] = true;
style.shape = 'treenode';
style.gradientColor = 'white';
style.shadow = true;
style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
style[mxConstants.STYLE_ROUNDED] = true;
style.edge = mxEdgeStyle.TopToBottom;
style.rounded = true;
// Enables automatic sizing for vertices after editing and
// panning by using the left mouse button.

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

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