removed all mxConstants.STYLE_* references, now referring to keys directly
mcyph
parent
e976ab30dd
commit
707605cedd
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -141,13 +141,13 @@ export default Map;
|
|||
|
||||
// Sets default vertex style
|
||||
let style = {};
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_OPACITY] = '50';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '16';
|
||||
style.shape = mxConstants.SHAPE_ELLIPSE;
|
||||
style.perimiter = mxPerimeter.EllipsePerimeter;
|
||||
style.fillColor = '#8CCDF5';
|
||||
style.strokeColor = '#1B78C8';
|
||||
style.strokeColor = '#000000';
|
||||
style['opacity'] = '50';
|
||||
style.fontSize = '16';
|
||||
graph.getStylesheet().putDefaultVertexStyle(style);
|
||||
|
||||
// Gets label from custom user object
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ export default Ports;
|
|||
// Uses the port icon while connections are previewed
|
||||
graph.connectionHandler.getConnectImage = function(state)
|
||||
{
|
||||
return new mxImage(state.style[mxConstants.STYLE_IMAGE], 16, 16);
|
||||
return new mxImage(state.style.image, 16, 16);
|
||||
};
|
||||
|
||||
// Centers the port icon on the target port
|
||||
|
|
@ -516,79 +516,79 @@ export default Ports;
|
|||
function configureStylesheet(graph)
|
||||
{
|
||||
let style = {};
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5';
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_OPACITY] = '80';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '12';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 0;
|
||||
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
|
||||
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
|
||||
style.shape = mxConstants.SHAPE_RECTANGLE;
|
||||
style.perimiter = mxPerimeter.RectanglePerimeter;
|
||||
style.align = mxConstants.ALIGN_CENTER;
|
||||
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
|
||||
style.gradientColor = '#41B9F5';
|
||||
style.fillColor = '#8CCDF5';
|
||||
style.strokeColor = '#1B78C8';
|
||||
style.strokeColor = '#000000';
|
||||
style.rounded = true;
|
||||
style['opacity'] = '80';
|
||||
style.fontSize = '12';
|
||||
style.fontStyle = 0;
|
||||
style.imageWidth = '48';
|
||||
style.imageHeight = '48';
|
||||
graph.getStylesheet().putDefaultVertexStyle(style);
|
||||
|
||||
// NOTE: Alternative vertex style for non-HTML labels should be as
|
||||
// follows. This repaces the above style for HTML labels.
|
||||
/*let style = {};
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
|
||||
style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;
|
||||
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
|
||||
style[mxConstants.STYLE_SPACING_TOP] = '56';
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#5d65df';
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#1d258f';
|
||||
style[mxConstants.STYLE_FONTFAMILY] = 'Verdana';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '12';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = '1';
|
||||
style[mxConstants.STYLE_ROUNDED] = '1';
|
||||
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
|
||||
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
|
||||
style[mxConstants.STYLE_OPACITY] = '80';
|
||||
style.shape = mxConstants.SHAPE_LABEL;
|
||||
style.perimiter = mxPerimeter.RectanglePerimeter;
|
||||
style.verticalAlign = mxConstants.ALIGN_TOP;
|
||||
style.align = mxConstants.ALIGN_CENTER;
|
||||
style.imageAlign = mxConstants.ALIGN_CENTER;
|
||||
style.imageVerticalAlign = mxConstants.ALIGN_TOP;
|
||||
style.spacingTop = '56';
|
||||
style.gradientColor = '#7d85df';
|
||||
style.strokeColor = '#5d65df';
|
||||
style.fillColor = '#adc5ff';
|
||||
style.strokeColor = '#1d258f';
|
||||
style.fontFamily = 'Verdana';
|
||||
style.fontSize = '12';
|
||||
style.fontStyle = '1';
|
||||
style.rounded = '1';
|
||||
style.imageWidth = '48';
|
||||
style.imageHeight = '48';
|
||||
style['opacity'] = '80';
|
||||
graph.getStylesheet().putDefaultVertexStyle(style);*/
|
||||
|
||||
style = {};
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#FF9103';
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = '#F8C48B';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#E86A00';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_OPACITY] = '80';
|
||||
style[mxConstants.STYLE_STARTSIZE] = '30';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '16';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 1;
|
||||
style.shape = mxConstants.SHAPE_SWIMLANE;
|
||||
style.perimiter = mxPerimeter.RectanglePerimeter;
|
||||
style.align = mxConstants.ALIGN_CENTER;
|
||||
style.verticalAlign = mxConstants.ALIGN_TOP;
|
||||
style.fillColor = '#FF9103';
|
||||
style.gradientColor = '#F8C48B';
|
||||
style.strokeColor = '#E86A00';
|
||||
style.strokeColor = '#000000';
|
||||
style.rounded = true;
|
||||
style['opacity'] = '80';
|
||||
style.startSize = '30';
|
||||
style.fontSize = '16';
|
||||
style.fontStyle = 1;
|
||||
graph.getStylesheet().putCellStyle('group', style);
|
||||
|
||||
style = {};
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#774400';
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
|
||||
style[mxConstants.STYLE_PERIMETER_SPACING] = '6';
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_FONTSIZE] = '10';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 2;
|
||||
style[mxConstants.STYLE_IMAGE_WIDTH] = '16';
|
||||
style[mxConstants.STYLE_IMAGE_HEIGHT] = '16';
|
||||
style.shape = mxConstants.SHAPE_IMAGE;
|
||||
style.strokeColor = '#774400';
|
||||
style.perimiter = mxPerimeter.RectanglePerimeter;
|
||||
style.perimeterSpacing = '6';
|
||||
style.align = mxConstants.ALIGN_LEFT;
|
||||
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
|
||||
style.fontSize = '10';
|
||||
style.fontStyle = 2;
|
||||
style.imageWidth = '16';
|
||||
style.imageHeight = '16';
|
||||
graph.getStylesheet().putCellStyle('port', style);
|
||||
|
||||
style = graph.getStylesheet().getDefaultEdgeStyle();
|
||||
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
|
||||
style[mxConstants.STYLE_STROKEWIDTH] = '2';
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
|
||||
style.labelBackgroundColor = '#FFFFFF';
|
||||
style.strokeWidth = '2';
|
||||
style.rounded = true;
|
||||
style.edge = mxEdgeStyle.EntityRelation;
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -648,44 +648,44 @@ export default MYNAMEHERE;
|
|||
function configureStylesheet(graph)
|
||||
{
|
||||
let style = {};
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '11';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 0;
|
||||
style[mxConstants.STYLE_SPACING_LEFT] = '4';
|
||||
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
|
||||
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
|
||||
style.shape = mxConstants.SHAPE_RECTANGLE;
|
||||
style.perimiter = mxPerimeter.RectanglePerimeter;
|
||||
style.align = mxConstants.ALIGN_LEFT;
|
||||
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
|
||||
style.strokeColor = '#000000';
|
||||
style.fontSize = '11';
|
||||
style.fontStyle = 0;
|
||||
style.spacingLeft = '4';
|
||||
style.imageWidth = '48';
|
||||
style.imageHeight = '48';
|
||||
graph.getStylesheet().putDefaultVertexStyle(style);
|
||||
|
||||
style = {};
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5';
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5';
|
||||
style[mxConstants.STYLE_SWIMLANE_FILLCOLOR] = '#ffffff';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_STROKEWIDTH] = '2';
|
||||
style[mxConstants.STYLE_STARTSIZE] = '28';
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '12';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 1;
|
||||
style[mxConstants.STYLE_IMAGE] = 'images/icons48/table.png';
|
||||
style.shape = mxConstants.SHAPE_SWIMLANE;
|
||||
style.perimiter = mxPerimeter.RectanglePerimeter;
|
||||
style.align = mxConstants.ALIGN_CENTER;
|
||||
style.verticalAlign = mxConstants.ALIGN_TOP;
|
||||
style.gradientColor = '#41B9F5';
|
||||
style.fillColor = '#8CCDF5';
|
||||
style['swimlaneFillColor'] = '#ffffff';
|
||||
style.strokeColor = '#1B78C8';
|
||||
style.strokeColor = '#000000';
|
||||
style.strokeWidth = '2';
|
||||
style.startSize = '28';
|
||||
style.verticalAlign = 'middle';
|
||||
style.fontSize = '12';
|
||||
style.fontStyle = 1;
|
||||
style.image = 'images/icons48/table.png';
|
||||
// Looks better without opacity if shadow is enabled
|
||||
//style[mxConstants.STYLE_OPACITY] = '80';
|
||||
style[mxConstants.STYLE_SHADOW] = 1;
|
||||
//style['opacity'] = '80';
|
||||
style.shadow = 1;
|
||||
graph.getStylesheet().putCellStyle('table', style);
|
||||
|
||||
style = graph.stylesheet.getDefaultEdgeStyle();
|
||||
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
|
||||
style[mxConstants.STYLE_STROKEWIDTH] = '2';
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
|
||||
style.labelBackgroundColor = '#FFFFFF';
|
||||
style.strokeWidth = '2';
|
||||
style.rounded = true;
|
||||
style.edge = mxEdgeStyle.EntityRelation;
|
||||
};
|
||||
|
||||
// Function to create the entries in the popupmenu
|
||||
|
|
|
|||
|
|
@ -168,23 +168,23 @@ export default Scrollbars;
|
|||
let graph = new mxGraph(container);
|
||||
|
||||
// Uses the entity perimeter (below) as default
|
||||
graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
|
||||
graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_PERIMETER] =
|
||||
graph.stylesheet.getDefaultVertexStyle().verticalAlign = mxConstants.ALIGN_TOP;
|
||||
graph.stylesheet.getDefaultVertexStyle().perimiter =
|
||||
mxPerimeter.EntityPerimeter;
|
||||
graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_SHADOW] = true;
|
||||
graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_FILLCOLOR] = '#DDEAFF';
|
||||
graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_GRADIENTCOLOR] = '#A9C4EB';
|
||||
delete graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_STROKECOLOR];
|
||||
graph.stylesheet.getDefaultVertexStyle().shadow = true;
|
||||
graph.stylesheet.getDefaultVertexStyle().fillColor = '#DDEAFF';
|
||||
graph.stylesheet.getDefaultVertexStyle().gradientColor = '#A9C4EB';
|
||||
delete graph.stylesheet.getDefaultVertexStyle().strokeColor;
|
||||
|
||||
// Used for HTML labels that use up the complete vertex space (see
|
||||
// graph.cellRenderer.redrawLabel below for syncing the size)
|
||||
graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_OVERFLOW] = 'fill';
|
||||
graph.stylesheet.getDefaultVertexStyle().overflow = 'fill';
|
||||
|
||||
// Uses the entity edge style as default
|
||||
graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_EDGE] =
|
||||
graph.stylesheet.getDefaultEdgeStyle().edge =
|
||||
mxEdgeStyle.EntityRelation;
|
||||
graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_STROKECOLOR] = 'black';
|
||||
graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_FONTCOLOR] = 'black';
|
||||
graph.stylesheet.getDefaultEdgeStyle().strokeColor = 'black';
|
||||
graph.stylesheet.getDefaultEdgeStyle().strokeColor = 'black';
|
||||
|
||||
// Allows new connections to be made but do not allow existing
|
||||
// connections to be changed for the sake of simplicity of this
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ export default MYNAMEHERE;
|
|||
let geo = (terminal != null) ? terminal.cell.getGeometry() : null;
|
||||
|
||||
if ((geo != null ? !geo.relative : false) &&
|
||||
this.getModel().isVertex(terminal.cell) &&
|
||||
terminal.cell.isVertex() &&
|
||||
this.getModel().getChildCount(terminal.cell) == 0)
|
||||
{
|
||||
return [new mxConnectionConstraint(new mxPoint(0, 0.5), false),
|
||||
|
|
@ -182,7 +182,7 @@ export default MYNAMEHERE;
|
|||
|
||||
let parent = this.getModel().getParent(cell);
|
||||
|
||||
if (this.getModel().isVertex(parent))
|
||||
if (parent.isVertex())
|
||||
{
|
||||
tip += this.getTooltipForCell(parent) + '.';
|
||||
}
|
||||
|
|
@ -581,8 +581,8 @@ export default MYNAMEHERE;
|
|||
|
||||
if (this.sourceConstraint != null && this.previous != null)
|
||||
{
|
||||
edge.style = mxConstants.STYLE_EXIT_X+'='+this.sourceConstraint.point.x+';'+
|
||||
mxConstants.STYLE_EXIT_Y+'='+this.sourceConstraint.point.y+';';
|
||||
edge.style = 'exitX'+'='+this.sourceConstraint.point.x+';'+
|
||||
'exitY'+'='+this.sourceConstraint.point.y+';';
|
||||
}
|
||||
else if (this.graph.model.isEdge(me.getCell()))
|
||||
{
|
||||
|
|
@ -845,7 +845,7 @@ export default MYNAMEHERE;
|
|||
horizontal = source.style['portConstraint'] != 'vertical';
|
||||
|
||||
// Checks the direction of the shape and rotates
|
||||
let direction = source.style[mxConstants.STYLE_DIRECTION];
|
||||
let direction = source.style.direction;
|
||||
|
||||
if (direction == 'north' || direction == 'south')
|
||||
{
|
||||
|
|
|
|||
|
|
@ -283,11 +283,11 @@ Actions.prototype.init = function()
|
|||
try
|
||||
{
|
||||
let defaultValue = graph.isCellMovable(graph.getSelectionCell()) ? 1 : 0;
|
||||
graph.toggleCellStyles(mxConstants.STYLE_MOVABLE, defaultValue);
|
||||
graph.toggleCellStyles(mxConstants.STYLE_RESIZABLE, defaultValue);
|
||||
graph.toggleCellStyles(mxConstants.STYLE_ROTATABLE, defaultValue);
|
||||
graph.toggleCellStyles(mxConstants.STYLE_DELETABLE, defaultValue);
|
||||
graph.toggleCellStyles(mxConstants.STYLE_EDITABLE, defaultValue);
|
||||
graph.toggleCellStyles('movable', defaultValue);
|
||||
graph.toggleCellStyles('resizable', defaultValue);
|
||||
graph.toggleCellStyles('rotatable', defaultValue);
|
||||
graph.toggleCellStyles('deletable', defaultValue);
|
||||
graph.toggleCellStyles('editable', defaultValue);
|
||||
graph.toggleCellStyles('connectable', defaultValue);
|
||||
}
|
||||
finally
|
||||
|
|
@ -696,12 +696,12 @@ Actions.prototype.init = function()
|
|||
|
||||
graph.stopEditing();
|
||||
|
||||
if (state != null && state.style[mxConstants.STYLE_WHITE_SPACE] == 'wrap')
|
||||
if (state != null && state.style.whiteSpace == 'wrap')
|
||||
{
|
||||
value = null;
|
||||
}
|
||||
|
||||
graph.setCellStyles(mxConstants.STYLE_WHITE_SPACE, value);
|
||||
graph.setCellStyles('whiteSpace', value);
|
||||
});
|
||||
this.addAction('rotation', function()
|
||||
{
|
||||
|
|
@ -710,14 +710,14 @@ Actions.prototype.init = function()
|
|||
|
||||
if (state != null)
|
||||
{
|
||||
value = state.style[mxConstants.STYLE_ROTATION] || value;
|
||||
value = state.style.rotation || value;
|
||||
}
|
||||
|
||||
let dlg = new FilenameDialog(ui, value, mxResources.get('apply'), function(newValue)
|
||||
{
|
||||
if (newValue != null && newValue.length > 0)
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_ROTATION, newValue);
|
||||
graph.setCellStyles('rotation', newValue);
|
||||
}
|
||||
}, mxResources.get('enterValue') + ' (' + mxResources.get('rotation') + ' 0-360)');
|
||||
|
||||
|
|
@ -1004,7 +1004,7 @@ Actions.prototype.init = function()
|
|||
try
|
||||
{
|
||||
let cells = graph.getSelectionCells();
|
||||
graph.toggleCellStyleFlags(mxConstants.STYLE_FONTSTYLE, style, cells);
|
||||
graph.toggleCellStyleFlags('fontStyle', style, cells);
|
||||
|
||||
// Removes bold and italic tags and CSS styles inside labels
|
||||
if ((style & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD)
|
||||
|
|
@ -1065,24 +1065,24 @@ Actions.prototype.init = function()
|
|||
toggleFontStyle('underline', mxConstants.FONT_UNDERLINE, function() { document.execCommand('underline', false, null); }, Editor.ctrlKey + '+U');
|
||||
|
||||
// Color actions
|
||||
this.addAction('fontColor...', function() { ui.menus.pickColor(mxConstants.STYLE_FONTCOLOR, 'forecolor', '000000'); });
|
||||
this.addAction('strokeColor...', function() { ui.menus.pickColor(mxConstants.STYLE_STROKECOLOR); });
|
||||
this.addAction('fillColor...', function() { ui.menus.pickColor(mxConstants.STYLE_FILLCOLOR); });
|
||||
this.addAction('gradientColor...', function() { ui.menus.pickColor(mxConstants.STYLE_GRADIENTCOLOR); });
|
||||
this.addAction('backgroundColor...', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, 'backcolor'); });
|
||||
this.addAction('borderColor...', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BORDERCOLOR); });
|
||||
this.addAction('fontColor...', function() { ui.menus.pickColor('fontColor', 'forecolor', '000000'); });
|
||||
this.addAction('strokeColor...', function() { ui.menus.pickColor('strokeColor'); });
|
||||
this.addAction('fillColor...', function() { ui.menus.pickColor('fillColor'); });
|
||||
this.addAction('gradientColor...', function() { ui.menus.pickColor('gradientColor'); });
|
||||
this.addAction('backgroundColor...', function() { ui.menus.pickColor('backgroundColor', 'backcolor'); });
|
||||
this.addAction('borderColor...', function() { ui.menus.pickColor('labelBorderColor'); });
|
||||
|
||||
// Format actions
|
||||
this.addAction('vertical', function() { ui.menus.toggleStyle(mxConstants.STYLE_HORIZONTAL, true); });
|
||||
this.addAction('shadow', function() { ui.menus.toggleStyle(mxConstants.STYLE_SHADOW); });
|
||||
this.addAction('vertical', function() { ui.menus.toggleStyle('horizontal', true); });
|
||||
this.addAction('shadow', function() { ui.menus.toggleStyle('shadow'); });
|
||||
this.addAction('solid', function()
|
||||
{
|
||||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_DASHED, null);
|
||||
graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, null);
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
|
||||
graph.setCellStyles('dashed', null);
|
||||
graph.setCellStyles('dashPattern', null);
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'],
|
||||
'values', [null, null], 'cells', graph.getSelectionCells()));
|
||||
}
|
||||
finally
|
||||
|
|
@ -1095,9 +1095,9 @@ Actions.prototype.init = function()
|
|||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_DASHED, '1');
|
||||
graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, null);
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
|
||||
graph.setCellStyles('dashed', '1');
|
||||
graph.setCellStyles('dashPattern', null);
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'],
|
||||
'values', ['1', null], 'cells', graph.getSelectionCells()));
|
||||
}
|
||||
finally
|
||||
|
|
@ -1110,9 +1110,9 @@ Actions.prototype.init = function()
|
|||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_DASHED, '1');
|
||||
graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, '1 4');
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
|
||||
graph.setCellStyles('dashed', '1');
|
||||
graph.setCellStyles('dashPattern', '1 4');
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'],
|
||||
'values', ['1', '1 4'], 'cells', graph.getSelectionCells()));
|
||||
}
|
||||
finally
|
||||
|
|
@ -1125,9 +1125,9 @@ Actions.prototype.init = function()
|
|||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_ROUNDED, '0');
|
||||
graph.setCellStyles(mxConstants.STYLE_CURVED, '0');
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED],
|
||||
graph.setCellStyles('rounded', '0');
|
||||
graph.setCellStyles('curved', '0');
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
|
||||
'values', ['0', '0'], 'cells', graph.getSelectionCells()));
|
||||
}
|
||||
finally
|
||||
|
|
@ -1140,9 +1140,9 @@ Actions.prototype.init = function()
|
|||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_ROUNDED, '1');
|
||||
graph.setCellStyles(mxConstants.STYLE_CURVED, '0');
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED],
|
||||
graph.setCellStyles('rounded', '1');
|
||||
graph.setCellStyles('curved', '0');
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
|
||||
'values', ['1', '0'], 'cells', graph.getSelectionCells()));
|
||||
}
|
||||
finally
|
||||
|
|
@ -1159,11 +1159,11 @@ Actions.prototype.init = function()
|
|||
{
|
||||
let cells = graph.getSelectionCells();
|
||||
let style = graph.getCurrentCellStyle(cells[0]);
|
||||
let value = (mxUtils.getValue(style, mxConstants.STYLE_ROUNDED, '0') == '1') ? '0' : '1';
|
||||
let value = (mxUtils.getValue(style, 'rounded', '0') == '1') ? '0' : '1';
|
||||
|
||||
graph.setCellStyles(mxConstants.STYLE_ROUNDED, value);
|
||||
graph.setCellStyles(mxConstants.STYLE_CURVED, null);
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED],
|
||||
graph.setCellStyles('rounded', value);
|
||||
graph.setCellStyles('curved', null);
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
|
||||
'values', [value, '0'], 'cells', graph.getSelectionCells()));
|
||||
}
|
||||
finally
|
||||
|
|
@ -1177,9 +1177,9 @@ Actions.prototype.init = function()
|
|||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_ROUNDED, '0');
|
||||
graph.setCellStyles(mxConstants.STYLE_CURVED, '1');
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED],
|
||||
graph.setCellStyles('rounded', '0');
|
||||
graph.setCellStyles('curved', '1');
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'],
|
||||
'values', ['0', '1'], 'cells', graph.getSelectionCells()));
|
||||
}
|
||||
finally
|
||||
|
|
@ -1347,7 +1347,7 @@ Actions.prototype.init = function()
|
|||
|
||||
if (state != null)
|
||||
{
|
||||
value = state.style[mxConstants.STYLE_IMAGE] || value;
|
||||
value = state.style.image || value;
|
||||
}
|
||||
|
||||
let selectionState = graph.cellEditor.saveSelection();
|
||||
|
|
@ -1384,18 +1384,18 @@ Actions.prototype.init = function()
|
|||
graph.fireEvent(new mxEventObject('cellsInserted', 'cells', select));
|
||||
}
|
||||
|
||||
graph.setCellStyles(mxConstants.STYLE_IMAGE, (newValue.length > 0) ? newValue : null, cells);
|
||||
graph.setCellStyles('image', (newValue.length > 0) ? newValue : null, cells);
|
||||
|
||||
// Sets shape only if not already shape with image (label or image)
|
||||
let style = graph.getCurrentCellStyle(cells[0]);
|
||||
|
||||
if (style[mxConstants.STYLE_SHAPE] != 'image' && style[mxConstants.STYLE_SHAPE] != 'label')
|
||||
if (style.shape != 'image' && style.shape != 'label')
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_SHAPE, 'image', cells);
|
||||
graph.setCellStyles('shape', 'image', cells);
|
||||
}
|
||||
else if (newValue.length == 0)
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_SHAPE, null, cells);
|
||||
graph.setCellStyles('shape', null, cells);
|
||||
}
|
||||
|
||||
if (graph.getSelectionCount() == 1)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells)
|
|||
result.fill = result.fill && this.isFillState(state);
|
||||
result.stroke = result.stroke && this.isStrokeState(state);
|
||||
|
||||
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
|
||||
let shape = mxUtils.getValue(state.style, 'shape', null);
|
||||
result.containsImage = result.containsImage || shape == 'image';
|
||||
|
||||
for (var key in state.style)
|
||||
|
|
@ -251,11 +251,11 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells)
|
|||
*/
|
||||
Format.prototype.isFillState = function(state)
|
||||
{
|
||||
return !this.isSpecialColor(state.style[mxConstants.STYLE_FILLCOLOR]) &&
|
||||
return !this.isSpecialColor(state.style.fillColor) &&
|
||||
(state.cell.isVertex() ||
|
||||
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'arrow' ||
|
||||
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'filledEdge' ||
|
||||
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'flexArrow');
|
||||
mxUtils.getValue(state.style, 'shape', null) == 'arrow' ||
|
||||
mxUtils.getValue(state.style, 'shape', null) == 'filledEdge' ||
|
||||
mxUtils.getValue(state.style, 'shape', null) == 'flexArrow');
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -263,7 +263,7 @@ Format.prototype.isFillState = function(state)
|
|||
*/
|
||||
Format.prototype.isStrokeState = function(state)
|
||||
{
|
||||
return !this.isSpecialColor(state.style[mxConstants.STYLE_STROKECOLOR]);
|
||||
return !this.isSpecialColor(state.style.strokeColor);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -271,8 +271,8 @@ Format.prototype.isStrokeState = function(state)
|
|||
*/
|
||||
Format.prototype.isSpecialColor = function(color)
|
||||
{
|
||||
return mxUtils.indexOf([mxConstants.STYLE_STROKECOLOR,
|
||||
mxConstants.STYLE_FILLCOLOR, 'inherit', 'swimlane',
|
||||
return mxUtils.indexOf(['strokeColor',
|
||||
'fillColor', 'inherit', 'swimlane',
|
||||
'indicated'], color) >= 0;
|
||||
};
|
||||
|
||||
|
|
@ -281,7 +281,7 @@ Format.prototype.isSpecialColor = function(color)
|
|||
*/
|
||||
Format.prototype.isGlassState = function(state)
|
||||
{
|
||||
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
|
||||
let shape = mxUtils.getValue(state.style, 'shape', null);
|
||||
|
||||
return (shape == 'label' || shape == 'rectangle' || shape == 'internalStorage' ||
|
||||
shape == 'ext' || shape == 'umlLifeline' || shape == 'swimlane' ||
|
||||
|
|
@ -295,7 +295,7 @@ Format.prototype.isRoundedState = function(state)
|
|||
{
|
||||
return (state.shape != null) ? state.shape.isRoundable() :
|
||||
mxUtils.indexOf(this.roundableShapes, mxUtils.getValue(state.style,
|
||||
mxConstants.STYLE_SHAPE, null)) >= 0;
|
||||
'shape', null)) >= 0;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -303,8 +303,8 @@ Format.prototype.isRoundedState = function(state)
|
|||
*/
|
||||
Format.prototype.isLineJumpState = function(state)
|
||||
{
|
||||
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
|
||||
let curved = mxUtils.getValue(state.style, mxConstants.STYLE_CURVED, false);
|
||||
let shape = mxUtils.getValue(state.style, 'shape', null);
|
||||
let curved = mxUtils.getValue(state.style, 'curved', false);
|
||||
|
||||
return !curved && (shape == 'connector' || shape == 'filledEdge');
|
||||
};
|
||||
|
|
@ -314,7 +314,7 @@ Format.prototype.isLineJumpState = function(state)
|
|||
*/
|
||||
Format.prototype.isAutoSizeState = function(state)
|
||||
{
|
||||
return mxUtils.getValue(state.style, mxConstants.STYLE_AUTOSIZE, null) == '1';
|
||||
return mxUtils.getValue(state.style, 'autoSize', null) == '1';
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -322,7 +322,7 @@ Format.prototype.isAutoSizeState = function(state)
|
|||
*/
|
||||
Format.prototype.isImageState = function(state)
|
||||
{
|
||||
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
|
||||
let shape = mxUtils.getValue(state.style, 'shape', null);
|
||||
|
||||
return (shape == 'label' || shape == 'image');
|
||||
};
|
||||
|
|
@ -332,7 +332,7 @@ Format.prototype.isImageState = function(state)
|
|||
*/
|
||||
Format.prototype.isShadowState = function(state)
|
||||
{
|
||||
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
|
||||
let shape = mxUtils.getValue(state.style, 'shape', null);
|
||||
|
||||
return (shape != 'image');
|
||||
};
|
||||
|
|
@ -628,7 +628,7 @@ BaseFormatPanel.prototype.getSelectionState = function()
|
|||
|
||||
if (state != null)
|
||||
{
|
||||
let tmp = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
|
||||
let tmp = mxUtils.getValue(state.style, 'shape', null);
|
||||
|
||||
if (tmp != null)
|
||||
{
|
||||
|
|
@ -670,7 +670,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu
|
|||
let value = (isFloat) ? parseFloat(input.value) : parseInt(input.value);
|
||||
|
||||
// Special case: angle mod 360
|
||||
if (!isNaN(value) && key == mxConstants.STYLE_ROTATION)
|
||||
if (!isNaN(value) && key == 'rotation')
|
||||
{
|
||||
// Workaround for decimal rounding errors in floats is to
|
||||
// use integer and round all numbers to two decimal point
|
||||
|
|
@ -712,7 +712,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu
|
|||
graph.setCellStyles(key, value, cells);
|
||||
|
||||
// Handles special case for fontSize where HTML labels are parsed and updated
|
||||
if (key == mxConstants.STYLE_FONTSIZE)
|
||||
if (key == 'fontSize')
|
||||
{
|
||||
graph.updateLabelElements(graph.getSelectionCells(), function(elt)
|
||||
{
|
||||
|
|
@ -1937,7 +1937,7 @@ ArrangePanel.prototype.addFlip = function(div)
|
|||
|
||||
let btn = mxUtils.button(mxResources.get('horizontal'), function(evt)
|
||||
{
|
||||
graph.toggleCellStyles(mxConstants.STYLE_FLIPH, false);
|
||||
graph.toggleCellStyles('flipH', false);
|
||||
})
|
||||
|
||||
btn.setAttribute('title', mxResources.get('horizontal'));
|
||||
|
|
@ -1947,7 +1947,7 @@ ArrangePanel.prototype.addFlip = function(div)
|
|||
|
||||
let btn = mxUtils.button(mxResources.get('vertical'), function(evt)
|
||||
{
|
||||
graph.toggleCellStyles(mxConstants.STYLE_FLIPV, false);
|
||||
graph.toggleCellStyles('flipV', false);
|
||||
})
|
||||
|
||||
btn.setAttribute('title', mxResources.get('vertical'));
|
||||
|
|
@ -2067,12 +2067,12 @@ ArrangePanel.prototype.addAngle = function(div)
|
|||
if (force || document.activeElement != input)
|
||||
{
|
||||
ss = this.format.getSelectionState();
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_ROTATION, 0));
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, 'rotation', 0));
|
||||
input.value = (isNaN(tmp)) ? '' : tmp + '°';
|
||||
}
|
||||
});
|
||||
|
||||
update = this.installInputHandler(input, mxConstants.STYLE_ROTATION, 0, 0, 360, '°', null, true);
|
||||
update = this.installInputHandler(input, 'rotation', 0, 0, 360, '°', null, true);
|
||||
this.addKeyHandler(input, listener);
|
||||
|
||||
graph.getModel().addListener(mxEvent.CHANGE, listener);
|
||||
|
|
@ -2215,7 +2215,7 @@ ArrangePanel.prototype.addGeometry = function(container)
|
|||
wrapper.style.whiteSpace = 'nowrap';
|
||||
wrapper.style.textAlign = 'right';
|
||||
let opt = this.createCellOption(mxResources.get('constrainProportions'),
|
||||
mxConstants.STYLE_ASPECT, null, 'fixed', 'null');
|
||||
'aspect', null, 'fixed', 'null');
|
||||
opt.style.width = '100%';
|
||||
wrapper.appendChild(opt);
|
||||
|
||||
|
|
@ -2828,19 +2828,19 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
function(evt)
|
||||
{
|
||||
graph.cellEditor.alignText(mxConstants.ALIGN_LEFT, evt);
|
||||
} : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_LEFT])), stylePanel3);
|
||||
} : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_LEFT])), stylePanel3);
|
||||
let center = this.editorUi.toolbar.addButton('geSprite-center', mxResources.get('center'),
|
||||
(graph.cellEditor.isContentEditing()) ?
|
||||
function(evt)
|
||||
{
|
||||
graph.cellEditor.alignText(mxConstants.ALIGN_CENTER, evt);
|
||||
} : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_CENTER])), stylePanel3);
|
||||
} : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_CENTER])), stylePanel3);
|
||||
let right = this.editorUi.toolbar.addButton('geSprite-right', mxResources.get('right'),
|
||||
(graph.cellEditor.isContentEditing()) ?
|
||||
function(evt)
|
||||
{
|
||||
graph.cellEditor.alignText(mxConstants.ALIGN_RIGHT, evt);
|
||||
} : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_RIGHT])), stylePanel3);
|
||||
} : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_RIGHT])), stylePanel3);
|
||||
|
||||
this.styleButtons([left, center, right]);
|
||||
|
||||
|
|
@ -2863,11 +2863,11 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
}
|
||||
|
||||
let top = this.editorUi.toolbar.addButton('geSprite-top', mxResources.get('top'),
|
||||
callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_TOP])), stylePanel3);
|
||||
callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_TOP])), stylePanel3);
|
||||
let middle = this.editorUi.toolbar.addButton('geSprite-middle', mxResources.get('middle'),
|
||||
callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_MIDDLE])), stylePanel3);
|
||||
callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_MIDDLE])), stylePanel3);
|
||||
let bottom = this.editorUi.toolbar.addButton('geSprite-bottom', mxResources.get('bottom'),
|
||||
callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_BOTTOM])), stylePanel3);
|
||||
callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_BOTTOM])), stylePanel3);
|
||||
|
||||
this.styleButtons([top, middle, bottom]);
|
||||
|
||||
|
|
@ -3038,10 +3038,10 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
|
||||
if (vals != null)
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_LABEL_POSITION, vals[0], graph.getSelectionCells());
|
||||
graph.setCellStyles(mxConstants.STYLE_VERTICAL_LABEL_POSITION, vals[1], graph.getSelectionCells());
|
||||
graph.setCellStyles(mxConstants.STYLE_ALIGN, vals[2], graph.getSelectionCells());
|
||||
graph.setCellStyles(mxConstants.STYLE_VERTICAL_ALIGN, vals[3], graph.getSelectionCells());
|
||||
graph.setCellStyles(mxConstants.'labelPosition', vals[0], graph.getSelectionCells());
|
||||
graph.setCellStyles(mxConstants.'verticalLabelPosition', vals[1], graph.getSelectionCells());
|
||||
graph.setCellStyles(mxConstants.'align', vals[2], graph.getSelectionCells());
|
||||
graph.setCellStyles(mxConstants.'verticalAlign', vals[3], graph.getSelectionCells());
|
||||
}
|
||||
}
|
||||
finally
|
||||
|
|
@ -3058,7 +3058,7 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
|
||||
mxEvent.addListener(dirSelect, 'change', function(evt)
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_TEXT_DIRECTION, dirSet[dirSelect.value], graph.getSelectionCells());
|
||||
graph.setCellStyles('textDirection', dirSet[dirSelect.value], graph.getSelectionCells());
|
||||
mxEvent.consume(evt);
|
||||
});
|
||||
}
|
||||
|
|
@ -3077,7 +3077,7 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
// after first character was entered (as the font element is lazy created)
|
||||
let pendingFontSize = null;
|
||||
|
||||
let inputUpdate = this.installInputHandler(input, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize, 1, 999, ' pt',
|
||||
let inputUpdate = this.installInputHandler(input, 'fontSize', Menus.prototype.defaultFontSize, 1, 999, ' pt',
|
||||
function(fontSize)
|
||||
{
|
||||
// IE does not support containsNode
|
||||
|
|
@ -3234,7 +3234,7 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
{
|
||||
install: function(apply) { bgColorApply = apply; },
|
||||
destroy: function() { bgColorApply = null; }
|
||||
}, null, true) : this.createCellColorOption(mxResources.get('backgroundColor'), mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, '#ffffff', null, function(color)
|
||||
}, null, true) : this.createCellColorOption(mxResources.get('backgroundColor'), 'backgroundColor', '#ffffff', null, function(color)
|
||||
{
|
||||
graph.updateLabelElements(graph.getSelectionCells(), function(elt)
|
||||
{
|
||||
|
|
@ -3243,7 +3243,7 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
});
|
||||
bgPanel.style.fontWeight = 'bold';
|
||||
|
||||
let borderPanel = this.createCellColorOption(mxResources.get('borderColor'), mxConstants.STYLE_LABEL_BORDERCOLOR, '#000000');
|
||||
let borderPanel = this.createCellColorOption(mxResources.get('borderColor'), 'labelBorderColor', '#000000');
|
||||
borderPanel.style.fontWeight = 'bold';
|
||||
|
||||
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
|
||||
|
|
@ -3311,12 +3311,12 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
document.execCommand('forecolor', false, (color != mxConstants.NONE) ?
|
||||
color : 'transparent');
|
||||
}
|
||||
}, (defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : '#000000',
|
||||
}, (defs.strokeColor != null) ? defs.strokeColor : '#000000',
|
||||
{
|
||||
install: function(apply) { fontColorApply = apply; },
|
||||
destroy: function() { fontColorApply = null; }
|
||||
}, null, true) : this.createCellColorOption(mxResources.get('fontColor'), mxConstants.STYLE_FONTCOLOR,
|
||||
(defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : '#000000', function(color)
|
||||
}, null, true) : this.createCellColorOption(mxResources.get('fontColor'), 'fontColor',
|
||||
(defs.strokeColor != null) ? defs.strokeColor : '#000000', function(color)
|
||||
{
|
||||
if (color == mxConstants.NONE)
|
||||
{
|
||||
|
|
@ -3332,14 +3332,14 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
{
|
||||
if (color == mxConstants.NONE)
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_NOLABEL, '1', graph.getSelectionCells());
|
||||
graph.setCellStyles('noLabel', '1', graph.getSelectionCells());
|
||||
}
|
||||
else
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_NOLABEL, null, graph.getSelectionCells());
|
||||
graph.setCellStyles('noLabel', null, graph.getSelectionCells());
|
||||
}
|
||||
|
||||
graph.updateCellStyles(mxConstants.STYLE_FONTCOLOR, color, graph.getSelectionCells());
|
||||
graph.updateCellStyles('fontColor', color, graph.getSelectionCells());
|
||||
|
||||
graph.updateLabelElements(graph.getSelectionCells(), function(elt)
|
||||
{
|
||||
|
|
@ -3364,7 +3364,7 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
extraPanel.style.paddingBottom = '4px';
|
||||
|
||||
// LATER: Fix toggle using '' instead of 'null'
|
||||
let wwOpt = this.createCellOption(mxResources.get('wordWrap'), mxConstants.STYLE_WHITE_SPACE, null, 'wrap', 'null', null, null, true);
|
||||
let wwOpt = this.createCellOption(mxResources.get('wordWrap'), 'whiteSpace', null, 'wrap', 'null', null, null, true);
|
||||
wwOpt.style.fontWeight = 'bold';
|
||||
|
||||
// Word wrap in edge labels only supported via labelWidth style
|
||||
|
|
@ -3429,7 +3429,7 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
if (!graph.cellEditor.isContentEditing())
|
||||
{
|
||||
container.appendChild(extraPanel);
|
||||
container.appendChild(this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_TEXT_OPACITY));
|
||||
container.appendChild(this.createRelativeOption(mxResources.get('opacity'), 'textOpacity'));
|
||||
container.appendChild(spacingPanel);
|
||||
}
|
||||
else
|
||||
|
|
@ -3759,32 +3759,32 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
let listener = mxUtils.bind(this, function(sender, evt, force)
|
||||
{
|
||||
ss = this.format.getSelectionState();
|
||||
let fontStyle = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSTYLE, 0);
|
||||
let fontStyle = mxUtils.getValue(ss.style, 'fontStyle', 0);
|
||||
setSelected(fontStyleItems[0], (fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD);
|
||||
setSelected(fontStyleItems[1], (fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC);
|
||||
setSelected(fontStyleItems[2], (fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE);
|
||||
fontMenu.firstChild.nodeValue = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTFAMILY, Menus.prototype.defaultFont);
|
||||
fontMenu.firstChild.nodeValue = mxUtils.getValue(ss.style, 'fontFamily', Menus.prototype.defaultFont);
|
||||
|
||||
setSelected(verticalItem, mxUtils.getValue(ss.style, mxConstants.STYLE_HORIZONTAL, '1') == '0');
|
||||
setSelected(verticalItem, mxUtils.getValue(ss.style, 'horizontal', '1') == '0');
|
||||
|
||||
if (force || document.activeElement != input)
|
||||
{
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize));
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, 'fontSize', Menus.prototype.defaultFontSize));
|
||||
input.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
|
||||
let align = mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER);
|
||||
let align = mxUtils.getValue(ss.style, mxConstants.'align', mxConstants.ALIGN_CENTER);
|
||||
setSelected(left, align == mxConstants.ALIGN_LEFT);
|
||||
setSelected(center, align == mxConstants.ALIGN_CENTER);
|
||||
setSelected(right, align == mxConstants.ALIGN_RIGHT);
|
||||
|
||||
let valign = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE);
|
||||
let valign = mxUtils.getValue(ss.style, mxConstants.'verticalAlign', mxConstants.ALIGN_MIDDLE);
|
||||
setSelected(top, valign == mxConstants.ALIGN_TOP);
|
||||
setSelected(middle, valign == mxConstants.ALIGN_MIDDLE);
|
||||
setSelected(bottom, valign == mxConstants.ALIGN_BOTTOM);
|
||||
|
||||
let pos = mxUtils.getValue(ss.style, mxConstants.STYLE_LABEL_POSITION, mxConstants.ALIGN_CENTER);
|
||||
let vpos = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE);
|
||||
let pos = mxUtils.getValue(ss.style, mxConstants.'labelPosition', mxConstants.ALIGN_CENTER);
|
||||
let vpos = mxUtils.getValue(ss.style, mxConstants.'verticalLabelPosition', mxConstants.ALIGN_MIDDLE);
|
||||
|
||||
if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_TOP)
|
||||
{
|
||||
|
|
@ -3823,7 +3823,7 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
positionSelect.value = 'center';
|
||||
}
|
||||
|
||||
let dir = mxUtils.getValue(ss.style, mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION);
|
||||
let dir = mxUtils.getValue(ss.style, 'textDirection', mxConstants.DEFAULT_TEXT_DIRECTION);
|
||||
|
||||
if (dir == mxConstants.TEXT_DIRECTION_RTL)
|
||||
{
|
||||
|
|
@ -3840,40 +3840,40 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
|
||||
if (force || document.activeElement != globalSpacing)
|
||||
{
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING, 2));
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacing', 2));
|
||||
globalSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
|
||||
if (force || document.activeElement != topSpacing)
|
||||
{
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_TOP, 0));
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingTop', 0));
|
||||
topSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
|
||||
if (force || document.activeElement != rightSpacing)
|
||||
{
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_RIGHT, 0));
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingRight', 0));
|
||||
rightSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
|
||||
if (force || document.activeElement != bottomSpacing)
|
||||
{
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_BOTTOM, 0));
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingBottom', 0));
|
||||
bottomSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
|
||||
if (force || document.activeElement != leftSpacing)
|
||||
{
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_LEFT, 0));
|
||||
let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingLeft', 0));
|
||||
leftSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
});
|
||||
|
||||
globalUpdate = this.installInputHandler(globalSpacing, mxConstants.STYLE_SPACING, 2, -999, 999, ' pt');
|
||||
topUpdate = this.installInputHandler(topSpacing, mxConstants.STYLE_SPACING_TOP, 0, -999, 999, ' pt');
|
||||
rightUpdate = this.installInputHandler(rightSpacing, mxConstants.STYLE_SPACING_RIGHT, 0, -999, 999, ' pt');
|
||||
bottomUpdate = this.installInputHandler(bottomSpacing, mxConstants.STYLE_SPACING_BOTTOM, 0, -999, 999, ' pt');
|
||||
leftUpdate = this.installInputHandler(leftSpacing, mxConstants.STYLE_SPACING_LEFT, 0, -999, 999, ' pt');
|
||||
globalUpdate = this.installInputHandler(globalSpacing, 'spacing', 2, -999, 999, ' pt');
|
||||
topUpdate = this.installInputHandler(topSpacing, 'spacingTop', 0, -999, 999, ' pt');
|
||||
rightUpdate = this.installInputHandler(rightSpacing, 'spacingRight', 0, -999, 999, ' pt');
|
||||
bottomUpdate = this.installInputHandler(bottomSpacing, 'spacingBottom', 0, -999, 999, ' pt');
|
||||
leftUpdate = this.installInputHandler(leftSpacing, 'spacingLeft', 0, -999, 999, ' pt');
|
||||
|
||||
this.addKeyHandler(input, listener);
|
||||
this.addKeyHandler(globalSpacing, listener);
|
||||
|
|
@ -4020,7 +4020,7 @@ TextFormatPanel.prototype.addFont = function(container)
|
|||
|
||||
if (!graph.cellEditor.isTableSelected())
|
||||
{
|
||||
let align = graph.cellEditor.align || mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER);
|
||||
let align = graph.cellEditor.align || mxUtils.getValue(ss.style, mxConstants.'align', mxConstants.ALIGN_CENTER);
|
||||
|
||||
if (isEqualOrPrefixed(css.textAlign, 'justify'))
|
||||
{
|
||||
|
|
@ -4191,7 +4191,7 @@ StyleFormatPanel.prototype.init = function()
|
|||
|
||||
this.container.appendChild(this.addStroke(this.createPanel()));
|
||||
this.container.appendChild(this.addLineJumps(this.createPanel()));
|
||||
let opacityPanel = this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_OPACITY, 41);
|
||||
let opacityPanel = this.createRelativeOption(mxResources.get('opacity'), 'opacity', 41);
|
||||
opacityPanel.style.paddingTop = '8px';
|
||||
opacityPanel.style.paddingBottom = '8px';
|
||||
this.container.appendChild(opacityPanel);
|
||||
|
|
@ -4313,7 +4313,7 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem
|
|||
styleElem.textContent = cssTxt;
|
||||
let xml = mxUtils.getXml(svg.documentElement);
|
||||
|
||||
graph.setCellStyles(mxConstants.STYLE_IMAGE, 'data:image/svg+xml,' +
|
||||
graph.setCellStyles('image', 'data:image/svg+xml,' +
|
||||
((window.btoa) ? btoa(xml) : Base64.encode(xml, true)),
|
||||
graph.getSelectionCells());
|
||||
}, '#ffffff',
|
||||
|
|
@ -4421,8 +4421,8 @@ StyleFormatPanel.prototype.addFill = function(container)
|
|||
});
|
||||
|
||||
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
|
||||
let gradientPanel = this.createCellColorOption(mxResources.get('gradient'), mxConstants.STYLE_GRADIENTCOLOR,
|
||||
(defs[mxConstants.STYLE_GRADIENTCOLOR] != null) ? defs[mxConstants.STYLE_GRADIENTCOLOR] : '#ffffff', function(color)
|
||||
let gradientPanel = this.createCellColorOption(mxResources.get('gradient'), 'gradientColor',
|
||||
(defs.gradientColor != null) ? defs.gradientColor : '#ffffff', function(color)
|
||||
{
|
||||
if (color == null || color == mxConstants.NONE)
|
||||
{
|
||||
|
|
@ -4434,10 +4434,10 @@ StyleFormatPanel.prototype.addFill = function(container)
|
|||
}
|
||||
}, function(color)
|
||||
{
|
||||
graph.updateCellStyles(mxConstants.STYLE_GRADIENTCOLOR, color, graph.getSelectionCells());
|
||||
graph.updateCellStyles('gradientColor', color, graph.getSelectionCells());
|
||||
});
|
||||
|
||||
let fillKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BACKGROUND : mxConstants.STYLE_FILLCOLOR;
|
||||
let fillKey = (ss.style.shape == 'image') ? 'imageBackground' : 'fillColor';
|
||||
let label = (ss.style.shape == 'image') ? mxResources.get('background') : mxResources.get('fill');
|
||||
|
||||
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
|
||||
|
|
@ -4477,7 +4477,7 @@ StyleFormatPanel.prototype.addFill = function(container)
|
|||
let listener = mxUtils.bind(this, function()
|
||||
{
|
||||
ss = this.format.getSelectionState();
|
||||
let value = mxUtils.getValue(ss.style, mxConstants.STYLE_GRADIENT_DIRECTION, mxConstants.DIRECTION_SOUTH);
|
||||
let value = mxUtils.getValue(ss.style, 'gradientDirection', mxConstants.DIRECTION_SOUTH);
|
||||
let fillStyle = mxUtils.getValue(ss.style, 'fillStyle', 'auto');
|
||||
|
||||
// Handles empty string which is not allowed as a value
|
||||
|
|
@ -4490,7 +4490,7 @@ StyleFormatPanel.prototype.addFill = function(container)
|
|||
fillStyleSelect.value = fillStyle;
|
||||
container.style.display = (ss.fill) ? '' : 'none';
|
||||
|
||||
let fillColor = mxUtils.getValue(ss.style, mxConstants.STYLE_FILLCOLOR, null);
|
||||
let fillColor = mxUtils.getValue(ss.style, 'fillColor', null);
|
||||
|
||||
if (!ss.fill || ss.containsImage || fillColor == null || fillColor == mxConstants.NONE || ss.style.shape == 'filledEdge')
|
||||
{
|
||||
|
|
@ -4510,7 +4510,7 @@ StyleFormatPanel.prototype.addFill = function(container)
|
|||
|
||||
mxEvent.addListener(gradientSelect, 'change', function(evt)
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_GRADIENT_DIRECTION, gradientSelect.value, graph.getSelectionCells());
|
||||
graph.setCellStyles('gradientDirection', gradientSelect.value, graph.getSelectionCells());
|
||||
mxEvent.consume(evt);
|
||||
});
|
||||
|
||||
|
|
@ -4593,7 +4593,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
graph.getModel().beginUpdate();
|
||||
try
|
||||
{
|
||||
let keys = [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED];
|
||||
let keys = ['rounded', 'curved'];
|
||||
// Default for rounded is 1
|
||||
let values = ['0', null];
|
||||
|
||||
|
|
@ -4628,7 +4628,7 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
mxEvent.consume(evt);
|
||||
});
|
||||
|
||||
let strokeKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BORDER : mxConstants.STYLE_STROKECOLOR;
|
||||
let strokeKey = (ss.style.shape == 'image') ? 'imageBorder' : 'strokeColor';
|
||||
let label = (ss.style.shape == 'image') ? mxResources.get('border') : mxResources.get('line');
|
||||
|
||||
let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle();
|
||||
|
|
@ -4669,11 +4669,11 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
|
||||
let pattern = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu)
|
||||
{
|
||||
addItem(menu, 75, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid'));
|
||||
addItem(menu, 75, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed'));
|
||||
addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
|
||||
addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
|
||||
addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
|
||||
addItem(menu, 75, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', mxResources.get('solid'));
|
||||
addItem(menu, 75, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', mxResources.get('dashed'));
|
||||
addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
|
||||
addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
|
||||
addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
|
||||
}));
|
||||
|
||||
// Used for mixed selection (vertices and edges)
|
||||
|
|
@ -4681,19 +4681,19 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
|
||||
let edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-connection', mxResources.get('connection'), false, mxUtils.bind(this, function(menu)
|
||||
{
|
||||
this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line'));
|
||||
this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link'));
|
||||
this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['flexArrow', null, null, null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow'));
|
||||
this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow'));
|
||||
this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line'));
|
||||
this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link'));
|
||||
this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['flexArrow', null, null, null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow'));
|
||||
this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow'));
|
||||
}));
|
||||
|
||||
let altPattern = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu)
|
||||
{
|
||||
addItem(menu, 33, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid'));
|
||||
addItem(menu, 33, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed'));
|
||||
addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
|
||||
addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
|
||||
addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
|
||||
addItem(menu, 33, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', mxResources.get('solid'));
|
||||
addItem(menu, 33, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', mxResources.get('dashed'));
|
||||
addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)');
|
||||
addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)');
|
||||
addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)');
|
||||
}));
|
||||
|
||||
var stylePanel2 = stylePanel.cloneNode(false);
|
||||
|
|
@ -4716,10 +4716,10 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
let value = parseInt(input.value);
|
||||
value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value));
|
||||
|
||||
if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1))
|
||||
if (value != mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1))
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells());
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH],
|
||||
graph.setCellStyles(mxConstants.'strokeWidth', value, graph.getSelectionCells());
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth,
|
||||
'values', [value], 'cells', graph.getSelectionCells()));
|
||||
}
|
||||
|
||||
|
|
@ -4733,10 +4733,10 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
let value = parseInt(altInput.value);
|
||||
value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value));
|
||||
|
||||
if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1))
|
||||
if (value != mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1))
|
||||
{
|
||||
graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells());
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH],
|
||||
graph.setCellStyles(mxConstants.'strokeWidth', value, graph.getSelectionCells());
|
||||
ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth,
|
||||
'values', [value], 'cells', graph.getSelectionCells()));
|
||||
}
|
||||
|
||||
|
|
@ -4774,19 +4774,19 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
{
|
||||
if (ss.style.shape != 'arrow')
|
||||
{
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric'));
|
||||
|
||||
if (ss.style.shape == 'connector')
|
||||
{
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved'));
|
||||
}
|
||||
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation'));
|
||||
}
|
||||
}));
|
||||
|
||||
|
|
@ -4794,47 +4794,47 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
{
|
||||
if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge')
|
||||
{
|
||||
let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
|
||||
let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
|
||||
item.setAttribute('title', mxResources.get('none'));
|
||||
item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>';
|
||||
|
||||
if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge')
|
||||
{
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-startclassic', null, false).setAttribute('title', mxResources.get('classic'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-startclassicthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-startopen', null, false).setAttribute('title', mxResources.get('openArrow'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-startopenthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['openAsync', 0], 'geIcon geSprite geSprite-startopenasync', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-startblock', null, false).setAttribute('title', mxResources.get('block'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-startblockthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 1], 'geIcon geSprite geSprite-startasync', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-startoval', null, false).setAttribute('title', mxResources.get('oval'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-startdiamond', null, false).setAttribute('title', mxResources.get('diamond'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-startthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-startclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-startclassicthintrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-startblockthintrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 0], 'geIcon geSprite geSprite-startasynctrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-startovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-startdiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-startthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['box', 0], 'geIcon geSprite geSvgSprite geSprite-box', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geSprite-halfCircle', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['dash', 0], 'geIcon geSprite geSprite-startdash', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['cross', 0], 'geIcon geSprite geSprite-startcross', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-startcircleplus', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circle', 1], 'geIcon geSprite geSprite-startcircle', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERone', 0], 'geIcon geSprite geSprite-starterone', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-starteronetoone', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmany', 0], 'geIcon geSprite geSprite-startermany', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-starteronetomany', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-starteroneopt', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-startclassic', null, false).setAttribute('title', mxResources.get('classic'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-startclassicthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-startopen', null, false).setAttribute('title', mxResources.get('openArrow'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-startopenthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['openAsync', 0], 'geIcon geSprite geSprite-startopenasync', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-startblock', null, false).setAttribute('title', mxResources.get('block'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-startblockthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['async', 1], 'geIcon geSprite geSprite-startasync', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-startoval', null, false).setAttribute('title', mxResources.get('oval'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-startdiamond', null, false).setAttribute('title', mxResources.get('diamond'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-startthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-startclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-startclassicthintrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-startblockthintrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['async', 0], 'geIcon geSprite geSprite-startasynctrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-startovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-startdiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-startthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['box', 0], 'geIcon geSprite geSvgSprite geSprite-box', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geSprite-halfCircle', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['dash', 0], 'geIcon geSprite geSprite-startdash', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['cross', 0], 'geIcon geSprite geSprite-startcross', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-startcircleplus', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['circle', 1], 'geIcon geSprite geSprite-startcircle', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERone', 0], 'geIcon geSprite geSprite-starterone', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-starteronetoone', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERmany', 0], 'geIcon geSprite geSprite-startermany', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-starteronetomany', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-starteroneopt', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'startArrow', 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', .startArrow, [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block'));
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
|
@ -4843,47 +4843,47 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
{
|
||||
if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge')
|
||||
{
|
||||
let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
|
||||
let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false);
|
||||
item.setAttribute('title', mxResources.get('none'));
|
||||
item.firstChild.firstChild.innerHTML = '<font style="font-size:10px;">' + mxUtils.htmlEntities(mxResources.get('none')) + '</font>';
|
||||
|
||||
if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge')
|
||||
{
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-endclassic', null, false).setAttribute('title', mxResources.get('classic'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-endclassicthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-endopen', null, false).setAttribute('title', mxResources.get('openArrow'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-endopenthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['openAsync', 0], 'geIcon geSprite geSprite-endopenasync', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-endblock', null, false).setAttribute('title', mxResources.get('block'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-endblockthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 1], 'geIcon geSprite geSprite-endasync', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-endoval', null, false).setAttribute('title', mxResources.get('oval'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-enddiamond', null, false).setAttribute('title', mxResources.get('diamond'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-endthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-endclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-endclassicthintrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-endblockthintrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 0], 'geIcon geSprite geSprite-endasynctrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-endovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-enddiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-endthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['box', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-box', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-halfCircle', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['dash', 0], 'geIcon geSprite geSprite-enddash', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['cross', 0], 'geIcon geSprite geSprite-endcross', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-endcircleplus', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circle', 1], 'geIcon geSprite geSprite-endcircle', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERone', 0], 'geIcon geSprite geSprite-enderone', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-enderonetoone', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmany', 0], 'geIcon geSprite geSprite-endermany', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-enderonetomany', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-enderoneopt', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-endclassic', null, false).setAttribute('title', mxResources.get('classic'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-endclassicthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-endopen', null, false).setAttribute('title', mxResources.get('openArrow'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-endopenthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['openAsync', 0], 'geIcon geSprite geSprite-endopenasync', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-endblock', null, false).setAttribute('title', mxResources.get('block'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-endblockthin', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['async', 1], 'geIcon geSprite geSprite-endasync', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-endoval', null, false).setAttribute('title', mxResources.get('oval'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-enddiamond', null, false).setAttribute('title', mxResources.get('diamond'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-endthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-endclassictrans', null, false).setAttribute('title', mxResources.get('classic'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-endclassicthintrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-endblockthintrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['async', 0], 'geIcon geSprite geSprite-endasynctrans', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-endovaltrans', null, false).setAttribute('title', mxResources.get('oval'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-enddiamondtrans', null, false).setAttribute('title', mxResources.get('diamond'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-endthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['box', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-box', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-halfCircle', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['dash', 0], 'geIcon geSprite geSprite-enddash', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['cross', 0], 'geIcon geSprite geSprite-endcross', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-endcircleplus', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['circle', 1], 'geIcon geSprite geSprite-endcircle', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERone', 0], 'geIcon geSprite geSprite-enderone', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-enderonetoone', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERmany', 0], 'geIcon geSprite geSprite-endermany', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-enderonetomany', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-enderoneopt', null, false);
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.'endArrow', 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
|
||||
this.editorUi.menus.edgeStyleChange(menu, '', .endArrow, [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block'));
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
|
@ -5021,30 +5021,30 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
|
||||
if (force || document.activeElement != input)
|
||||
{
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1));
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1));
|
||||
input.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
|
||||
if (force || document.activeElement != altInput)
|
||||
{
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1));
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.'strokeWidth', 1));
|
||||
altInput.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
|
||||
styleSelect.style.visibility = (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') ? '' : 'hidden';
|
||||
|
||||
if (mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1')
|
||||
if (mxUtils.getValue(ss.style, 'curved', null) == '1')
|
||||
{
|
||||
styleSelect.value = 'curved';
|
||||
}
|
||||
else if (mxUtils.getValue(ss.style, mxConstants.STYLE_ROUNDED, null) == '1')
|
||||
else if (mxUtils.getValue(ss.style, 'rounded', null) == '1')
|
||||
{
|
||||
styleSelect.value = 'rounded';
|
||||
}
|
||||
|
||||
if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASHED, null) == '1')
|
||||
if (mxUtils.getValue(ss.style, 'dashed', null) == '1')
|
||||
{
|
||||
if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, null) == null)
|
||||
if (mxUtils.getValue(ss.style, 'dashPattern', null) == null)
|
||||
{
|
||||
solid.style.borderBottom = '1px dashed ' + this.defaultStrokeColor;
|
||||
}
|
||||
|
|
@ -5065,14 +5065,14 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
|
||||
if (edgeStyleDiv != null)
|
||||
{
|
||||
let es = mxUtils.getValue(ss.style, mxConstants.STYLE_EDGE, null);
|
||||
let es = mxUtils.getValue(ss.style, 'edge', null);
|
||||
|
||||
if (mxUtils.getValue(ss.style, mxConstants.STYLE_NOEDGESTYLE, null) == '1')
|
||||
if (mxUtils.getValue(ss.style, 'noEdgeStyle', null) == '1')
|
||||
{
|
||||
es = null;
|
||||
}
|
||||
|
||||
if (es == 'orthogonalEdgeStyle' && mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1')
|
||||
if (es == 'orthogonalEdgeStyle' && mxUtils.getValue(ss.style, 'curved', null) == '1')
|
||||
{
|
||||
edgeStyleDiv.className = 'geSprite geSprite-curved';
|
||||
}
|
||||
|
|
@ -5087,13 +5087,13 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
else if (es == 'elbowEdgeStyle')
|
||||
{
|
||||
edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style,
|
||||
mxConstants.STYLE_ELBOW, null) == 'vertical') ?
|
||||
'elbow', null) == 'vertical') ?
|
||||
'geSprite-verticalelbow' : 'geSprite-horizontalelbow');
|
||||
}
|
||||
else if (es == 'isometricEdgeStyle')
|
||||
{
|
||||
edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style,
|
||||
mxConstants.STYLE_ELBOW, null) == 'vertical') ?
|
||||
'elbow', null) == 'vertical') ?
|
||||
'geSprite-verticalisometric' : 'geSprite-horizontalisometric');
|
||||
}
|
||||
else
|
||||
|
|
@ -5160,9 +5160,9 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
return markerDiv;
|
||||
};
|
||||
|
||||
let sourceDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTARROW, null),
|
||||
let sourceDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.'startArrow', null),
|
||||
mxUtils.getValue(ss.style, 'startFill', '1'), lineStart, 'start');
|
||||
let targetDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDARROW, null),
|
||||
let targetDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.'endArrow', null),
|
||||
mxUtils.getValue(ss.style, 'endFill', '1'), lineEnd, 'end');
|
||||
|
||||
// Special cases for markers
|
||||
|
|
@ -5195,40 +5195,40 @@ StyleFormatPanel.prototype.addStroke = function(container)
|
|||
|
||||
if (force || document.activeElement != startSize)
|
||||
{
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE));
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, 'startSize', mxConstants.DEFAULT_MARKERSIZE));
|
||||
startSize.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
|
||||
if (force || document.activeElement != startSpacing)
|
||||
{
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0));
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, 'sourcePerimeterSpacing', 0));
|
||||
startSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
|
||||
if (force || document.activeElement != endSize)
|
||||
{
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE));
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, 'endSize', mxConstants.DEFAULT_MARKERSIZE));
|
||||
endSize.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
|
||||
if (force || document.activeElement != startSpacing)
|
||||
{
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0));
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, 'targetPerimeterSpacing', 0));
|
||||
endSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
|
||||
if (force || document.activeElement != perimeterSpacing)
|
||||
{
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_PERIMETER_SPACING, 0));
|
||||
let tmp = parseInt(mxUtils.getValue(ss.style, 'perimeterSpacing', 0));
|
||||
perimeterSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt';
|
||||
}
|
||||
});
|
||||
|
||||
startSizeUpdate = this.installInputHandler(startSize, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
|
||||
startSpacingUpdate = this.installInputHandler(startSpacing, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0, -999, 999, ' pt');
|
||||
endSizeUpdate = this.installInputHandler(endSize, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
|
||||
endSpacingUpdate = this.installInputHandler(endSpacing, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0, -999, 999, ' pt');
|
||||
perimeterUpdate = this.installInputHandler(perimeterSpacing, mxConstants.STYLE_PERIMETER_SPACING, 0, 0, 999, ' pt');
|
||||
startSizeUpdate = this.installInputHandler(startSize, 'startSize', mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
|
||||
startSpacingUpdate = this.installInputHandler(startSpacing, 'sourcePerimeterSpacing', 0, -999, 999, ' pt');
|
||||
endSizeUpdate = this.installInputHandler(endSize, 'endSize', mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt');
|
||||
endSpacingUpdate = this.installInputHandler(endSpacing, 'targetPerimeterSpacing', 0, -999, 999, ' pt');
|
||||
perimeterUpdate = this.installInputHandler(perimeterSpacing, 'perimeterSpacing', 0, 0, 999, ' pt');
|
||||
|
||||
this.addKeyHandler(input, listener);
|
||||
this.addKeyHandler(startSize, listener);
|
||||
|
|
@ -5401,7 +5401,7 @@ StyleFormatPanel.prototype.addEffects = function(div)
|
|||
|
||||
if (ss.rounded)
|
||||
{
|
||||
addOption(mxResources.get('rounded'), mxConstants.STYLE_ROUNDED, 0);
|
||||
addOption(mxResources.get('rounded'), 'rounded', 0);
|
||||
}
|
||||
|
||||
if (ss.style.shape == 'swimlane')
|
||||
|
|
@ -5411,12 +5411,12 @@ StyleFormatPanel.prototype.addEffects = function(div)
|
|||
|
||||
if (!ss.containsImage)
|
||||
{
|
||||
addOption(mxResources.get('shadow'), mxConstants.STYLE_SHADOW, 0);
|
||||
addOption(mxResources.get('shadow'), 'shadow', 0);
|
||||
}
|
||||
|
||||
if (ss.glass)
|
||||
{
|
||||
addOption(mxResources.get('glass'), mxConstants.STYLE_GLASS, 0);
|
||||
addOption(mxResources.get('glass'), 'glass', 0);
|
||||
}
|
||||
|
||||
addOption(mxResources.get('sketch'), 'sketch', 0);
|
||||
|
|
@ -5621,8 +5621,8 @@ DiagramStylePanel.prototype.addView = function(div)
|
|||
for (let j = 0; j < styles.length; j++)
|
||||
{
|
||||
if ((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) ||
|
||||
(styles[j] != mxConstants.STYLE_FILLCOLOR &&
|
||||
styles[j] != mxConstants.STYLE_STROKECOLOR))
|
||||
(styles[j] != 'fillColor' &&
|
||||
styles[j] != 'strokeColor'))
|
||||
{
|
||||
newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]);
|
||||
}
|
||||
|
|
@ -5645,8 +5645,8 @@ DiagramStylePanel.prototype.addView = function(div)
|
|||
{
|
||||
if (((style[styles[j]] != null &&
|
||||
style[styles[j]] != mxConstants.NONE) ||
|
||||
(styles[j] != mxConstants.STYLE_FILLCOLOR &&
|
||||
styles[j] != mxConstants.STYLE_STROKECOLOR)))
|
||||
(styles[j] != 'fillColor' &&
|
||||
styles[j] != 'strokeColor')))
|
||||
{
|
||||
style[styles[j]] = defaultStyle[styles[j]];
|
||||
}
|
||||
|
|
@ -5684,8 +5684,8 @@ DiagramStylePanel.prototype.addView = function(div)
|
|||
{
|
||||
if (cell == null || ((result[key] != null &&
|
||||
result[key] != mxConstants.NONE) ||
|
||||
(key != mxConstants.STYLE_FILLCOLOR &&
|
||||
key != mxConstants.STYLE_STROKECOLOR)))
|
||||
(key != 'fillColor' &&
|
||||
key != 'strokeColor')))
|
||||
{
|
||||
result[key] = style[key];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -204,7 +204,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone)
|
|||
{
|
||||
let style = this.getCurrentCellStyle(cell);
|
||||
|
||||
return (style != null) ? (style['html'] == '1' || style[mxConstants.STYLE_WHITE_SPACE] == 'wrap') : false;
|
||||
return (style != null) ? (style['html'] == '1' || style.whiteSpace == 'wrap') : false;
|
||||
};
|
||||
|
||||
// Implements a listener for hover and click handling on edges
|
||||
|
|
@ -1692,7 +1692,7 @@ Graph.prototype.init = function(container)
|
|||
{
|
||||
// Redirect editing for tables
|
||||
let style = this.getCellStyle(cell);
|
||||
let size = parseInt(mxUtils.getValue(style, mxConstants.STYLE_STARTSIZE, 0));
|
||||
let size = parseInt(mxUtils.getValue(style, 'startSize', 0));
|
||||
|
||||
if (this.isTable(cell) && (!this.isSwimlane(cell) ||
|
||||
size == 0) && this.getLabel(cell) == '' &&
|
||||
|
|
@ -1701,7 +1701,7 @@ Graph.prototype.init = function(container)
|
|||
cell = cell.getChildAt(0);
|
||||
|
||||
style = this.getCellStyle(cell);
|
||||
size = parseInt(mxUtils.getValue(style, mxConstants.STYLE_STARTSIZE, 0));
|
||||
size = parseInt(mxUtils.getValue(style, 'startSize', 0));
|
||||
}
|
||||
|
||||
// Redirect editing for table rows
|
||||
|
|
@ -3404,7 +3404,7 @@ Graph.prototype.getCellStyle = function(cell)
|
|||
|
||||
if (layout != null && layout.constructor == mxStackLayout)
|
||||
{
|
||||
style[mxConstants.STYLE_HORIZONTAL] = !layout.horizontal;
|
||||
style.horizontal = !layout.horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4392,7 +4392,7 @@ HoverIcons.prototype.drag = function(evt, x, y)
|
|||
let es = this.graph.connectionHandler.edgeState;
|
||||
|
||||
if (evt != null && mxEvent.isShiftDown(evt) && mxEvent.isControlDown(evt) && es != null &&
|
||||
mxUtils.getValue(es.style, mxConstants.STYLE_EDGE, null) === 'orthogonalEdgeStyle')
|
||||
mxUtils.getValue(es.style, 'edge', null) === 'orthogonalEdgeStyle')
|
||||
{
|
||||
let direction = this.getDirection();
|
||||
es.cell.style = mxUtils.setStyle(es.cell.style, 'sourcePortConstraint', direction);
|
||||
|
|
@ -4916,7 +4916,7 @@ Graph.prototype.createCrossFunctionalSwimlane = function(rowCount, colCount, w,
|
|||
|
||||
let table = this.createVertex(null, null, '', 0, 0,
|
||||
colCount * w, rowCount * h, tableStyle);
|
||||
let t = mxUtils.getValue(this.getCellStyle(table), mxConstants.STYLE_STARTSIZE,
|
||||
let t = mxUtils.getValue(this.getCellStyle(table), 'startSize',
|
||||
mxConstants.DEFAULT_STARTSIZE);
|
||||
table.geometry.width += t;
|
||||
table.geometry.height += t;
|
||||
|
|
@ -5391,7 +5391,7 @@ TableLayout.prototype.execute = function(parent)
|
|||
|
||||
// Forces repaint if jumps change on a valid edge
|
||||
if (state != null && recurse && state.cell.isEdge() &&
|
||||
state.style != null && state.style[mxConstants.STYLE_CURVED] != 1 &&
|
||||
state.style != null && state.style.curved != 1 &&
|
||||
!state.invalid && this.updateLineJumps(state))
|
||||
{
|
||||
this.graph.cellRenderer.redraw(state, false, this.isRendering());
|
||||
|
|
@ -5401,7 +5401,7 @@ TableLayout.prototype.execute = function(parent)
|
|||
|
||||
// Adds to the list of edges that may intersect with later edges
|
||||
if (state != null && recurse && state.cell.isEdge() &&
|
||||
state.style != null && state.style[mxConstants.STYLE_CURVED] != 1)
|
||||
state.style != null && state.style.curved != 1)
|
||||
{
|
||||
// LATER: Reuse jumps for valid edges
|
||||
this.validEdges.push(state);
|
||||
|
|
@ -5431,7 +5431,7 @@ TableLayout.prototype.execute = function(parent)
|
|||
|
||||
// Updates jumps on invalid edge before repaint
|
||||
if (state.cell.isEdge() &&
|
||||
state.style[mxConstants.STYLE_CURVED] != 1)
|
||||
state.style.curved != 1)
|
||||
{
|
||||
this.updateLineJumps(state);
|
||||
}
|
||||
|
|
@ -5592,7 +5592,7 @@ TableLayout.prototype.execute = function(parent)
|
|||
}
|
||||
else
|
||||
{
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize',
|
||||
mxConstants.LINE_ARCSIZE) / 2;
|
||||
let size = (parseInt(mxUtils.getValue(this.style, 'jumpSize',
|
||||
Graph.defaultJumpSize)) - 2) / 2 + this.strokewidth;
|
||||
|
|
@ -5720,7 +5720,7 @@ TableLayout.prototype.execute = function(parent)
|
|||
let next = this.getNextPoint(edge, end, source);
|
||||
|
||||
let orth = this.graph.isOrthogonal(edge);
|
||||
let alpha = mxUtils.toRadians(Number(start.style[mxConstants.STYLE_ROTATION] || '0'));
|
||||
let alpha = mxUtils.toRadians(Number(start.style.rotation || '0'));
|
||||
let center = new mxPoint(start.getCenterX(), start.getCenterY());
|
||||
|
||||
if (alpha != 0)
|
||||
|
|
@ -5730,10 +5730,10 @@ TableLayout.prototype.execute = function(parent)
|
|||
next = mxUtils.getRotatedPoint(next, cos, sin, center);
|
||||
}
|
||||
|
||||
let border = parseFloat(edge.style[mxConstants.STYLE_PERIMETER_SPACING] || 0);
|
||||
let border = parseFloat(edge.style.perimeterSpacing || 0);
|
||||
border += parseFloat(edge.style[(source) ?
|
||||
mxConstants.STYLE_SOURCE_PERIMETER_SPACING :
|
||||
mxConstants.STYLE_TARGET_PERIMETER_SPACING] || 0);
|
||||
'sourcePerimeterSpacing' :
|
||||
'targetPerimeterSpacing'] || 0);
|
||||
let pt = this.getPerimeterPoint(start, next, alpha == 0 && orth, border);
|
||||
|
||||
if (alpha != 0)
|
||||
|
|
@ -5817,7 +5817,7 @@ TableLayout.prototype.execute = function(parent)
|
|||
{
|
||||
if (state.style != null && typeof(pako) !== 'undefined')
|
||||
{
|
||||
let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null);
|
||||
let shape = mxUtils.getValue(state.style, 'shape', null);
|
||||
|
||||
// Extracts and decodes stencil XML if shape has the form shape=stencil(value)
|
||||
if (shape != null && typeof shape === 'string' && shape.substring(0, 8) == 'stencil(')
|
||||
|
|
@ -6200,7 +6200,7 @@ if (typeof mxVertexHandler != 'undefined')
|
|||
{
|
||||
let shape = connectionHandlerCreateShape.apply(this, arguments);
|
||||
|
||||
shape.isDashed = this.graph.currentEdgeStyle[mxConstants.STYLE_DASHED] == '1';
|
||||
shape.isDashed = this.graph.currentEdgeStyle.dashed == '1';
|
||||
|
||||
return shape;
|
||||
}
|
||||
|
|
@ -6548,7 +6548,7 @@ if (typeof mxVertexHandler != 'undefined')
|
|||
!cell.isEdge())
|
||||
{
|
||||
let shape = this.getCurrentCellStyle(cell, ignoreState)
|
||||
[mxConstants.STYLE_SHAPE];
|
||||
.shape;
|
||||
|
||||
return shape == mxConstants.SHAPE_SWIMLANE || shape == 'table';
|
||||
}
|
||||
|
|
@ -6985,11 +6985,11 @@ if (typeof mxVertexHandler != 'undefined')
|
|||
if (edge != null)
|
||||
{
|
||||
let style = this.getCurrentCellStyle(edge);
|
||||
let elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,
|
||||
let elbow = mxUtils.getValue(style, 'elbow',
|
||||
mxConstants.ELBOW_HORIZONTAL);
|
||||
let value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
|
||||
mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;
|
||||
this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);
|
||||
this.setCellStyles('elbow', value, [edge]);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -7185,9 +7185,9 @@ if (typeof mxVertexHandler != 'undefined')
|
|||
{
|
||||
let dirs = [mxConstants.DIRECTION_EAST, mxConstants.DIRECTION_SOUTH,
|
||||
mxConstants.DIRECTION_WEST, mxConstants.DIRECTION_NORTH];
|
||||
let dir = mxUtils.getValue(state.style, mxConstants.STYLE_DIRECTION,
|
||||
let dir = mxUtils.getValue(state.style, 'direction',
|
||||
mxConstants.DIRECTION_EAST);
|
||||
this.setCellStyles(mxConstants.STYLE_DIRECTION,
|
||||
this.setCellStyles('direction',
|
||||
dirs[mxUtils.mod(mxUtils.indexOf(dirs, dir) +
|
||||
((backwards) ? -1 : 1), dirs.length)], [cell]);
|
||||
}
|
||||
|
|
@ -8235,8 +8235,8 @@ if (typeof mxVertexHandler != 'undefined')
|
|||
let style = this.getCurrentCellStyle(cell);
|
||||
|
||||
return !this.isTableCell(cell) && !this.isTableRow(cell) && (result ||
|
||||
(mxUtils.getValue(style, mxConstants.STYLE_RESIZABLE, '1') != '0' &&
|
||||
style[mxConstants.STYLE_WHITE_SPACE] == 'wrap'));
|
||||
(mxUtils.getValue(style, 'resizable', '1') != '0' &&
|
||||
style.whiteSpace == 'wrap'));
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -9818,22 +9818,22 @@ if (typeof mxVertexHandler != 'undefined')
|
|||
content = this.graph.sanitizeHtml((nl2Br) ? content.replace(/\n/g, '<br/>') : content, true)
|
||||
this.textarea.className = 'mxCellEditor geContentEditable';
|
||||
|
||||
let size = mxUtils.getValue(state.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE);
|
||||
let family = mxUtils.getValue(state.style, mxConstants.STYLE_FONTFAMILY, mxConstants.DEFAULT_FONTFAMILY);
|
||||
let align = mxUtils.getValue(state.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_LEFT);
|
||||
let bold = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
|
||||
let size = mxUtils.getValue(state.style, 'fontSize', mxConstants.DEFAULT_FONTSIZE);
|
||||
let family = mxUtils.getValue(state.style, 'fontFamily', mxConstants.DEFAULT_FONTFAMILY);
|
||||
let align = mxUtils.getValue(state.style, mxConstants.'align', mxConstants.ALIGN_LEFT);
|
||||
let bold = (mxUtils.getValue(state.style, 'fontStyle', 0) &
|
||||
mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD;
|
||||
let italic = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
|
||||
let italic = (mxUtils.getValue(state.style, 'fontStyle', 0) &
|
||||
mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC;
|
||||
let txtDecor = [];
|
||||
|
||||
if ((mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
|
||||
if ((mxUtils.getValue(state.style, 'fontStyle', 0) &
|
||||
mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE)
|
||||
{
|
||||
txtDecor.push('underline');
|
||||
}
|
||||
|
||||
if ((mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) &
|
||||
if ((mxUtils.getValue(state.style, 'fontStyle', 0) &
|
||||
mxConstants.FONT_STRIKETHROUGH) == mxConstants.FONT_STRIKETHROUGH)
|
||||
{
|
||||
txtDecor.push('line-through');
|
||||
|
|
@ -9897,8 +9897,8 @@ if (typeof mxVertexHandler != 'undefined')
|
|||
|
||||
if (m == null)
|
||||
{
|
||||
m = mxUtils.getAlignmentAsPoint(mxUtils.getValue(state.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER),
|
||||
mxUtils.getValue(state.style, mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE));
|
||||
m = mxUtils.getAlignmentAsPoint(mxUtils.getValue(state.style, mxConstants.'align', mxConstants.ALIGN_CENTER),
|
||||
mxUtils.getValue(state.style, mxConstants.'verticalAlign', mxConstants.ALIGN_MIDDLE));
|
||||
}
|
||||
|
||||
this.bounds.x += m.x * this.bounds.width;
|
||||
|
|
@ -10038,14 +10038,14 @@ if (typeof mxVertexHandler != 'undefined')
|
|||
*/
|
||||
mxCellEditor.prototype.getBackgroundColor = function(state)
|
||||
{
|
||||
let color = mxUtils.getValue(state.style, mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, null);
|
||||
let color = mxUtils.getValue(state.style, 'backgroundColor', null);
|
||||
|
||||
if ((color == null || color == mxConstants.NONE) &&
|
||||
(state.cell.geometry != null && state.cell.geometry.width > 0) &&
|
||||
(mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0) != 0 ||
|
||||
mxUtils.getValue(state.style, mxConstants.STYLE_HORIZONTAL, 1) == 0))
|
||||
(mxUtils.getValue(state.style, 'rotation', 0) != 0 ||
|
||||
mxUtils.getValue(state.style, 'horizontal', 1) == 0))
|
||||
{
|
||||
color = mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, null);
|
||||
color = mxUtils.getValue(state.style, 'fillColor', null);
|
||||
}
|
||||
|
||||
if (color == mxConstants.NONE)
|
||||
|
|
@ -10760,7 +10760,7 @@ if (typeof mxVertexHandler != 'undefined')
|
|||
formatHintText(this.roundLength(this.bounds.height / s), unit);
|
||||
}
|
||||
|
||||
let rot = (this.currentAlpha != null) ? this.currentAlpha : this.state.style[mxConstants.STYLE_ROTATION] || '0';
|
||||
let rot = (this.currentAlpha != null) ? this.currentAlpha : this.state.style.rotation || '0';
|
||||
let bb = mxUtils.getBoundingBox(this.bounds, rot);
|
||||
|
||||
if (bb == null)
|
||||
|
|
@ -11413,14 +11413,14 @@ if (typeof mxVertexHandler != 'undefined')
|
|||
// Invokes turn on single click on rotation handle
|
||||
mxVertexHandler.prototype.rotateClick = function()
|
||||
{
|
||||
let stroke = mxUtils.getValue(this.state.style, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE);
|
||||
let fill = mxUtils.getValue(this.state.style, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE);
|
||||
let stroke = mxUtils.getValue(this.state.style, 'strokeColor', mxConstants.NONE);
|
||||
let fill = mxUtils.getValue(this.state.style, 'fillColor', mxConstants.NONE);
|
||||
|
||||
if (this.state.cell.isVertex() &&
|
||||
stroke == mxConstants.NONE && fill == mxConstants.NONE)
|
||||
{
|
||||
let angle = mxUtils.mod(mxUtils.getValue(this.state.style, mxConstants.STYLE_ROTATION, 0) + 90, 360);
|
||||
this.state.view.graph.setCellStyles(mxConstants.STYLE_ROTATION, angle, [this.state.cell]);
|
||||
let angle = mxUtils.mod(mxUtils.getValue(this.state.style, 'rotation', 0) + 90, 360);
|
||||
this.state.view.graph.setCellStyles('rotation', angle, [this.state.cell]);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
|
@ -11755,9 +11755,9 @@ if (typeof mxVertexHandler != 'undefined')
|
|||
{
|
||||
let c = new mxPoint(this.state.getCenterX(), this.state.getCenterY());
|
||||
let tmp = new mxRectangle(this.state.x, this.state.y - 22, this.state.width + 24, this.state.height + 22);
|
||||
let bb = mxUtils.getBoundingBox(tmp, this.state.style[mxConstants.STYLE_ROTATION] || '0', c);
|
||||
let bb = mxUtils.getBoundingBox(tmp, this.state.style.rotation || '0', c);
|
||||
let rs = (bb != null) ? mxUtils.getBoundingBox(this.state,
|
||||
this.state.style[mxConstants.STYLE_ROTATION] || '0') : this.state;
|
||||
this.state.style.rotation || '0') : this.state;
|
||||
let tb = (this.state.text != null) ? this.state.text.boundingBox : null;
|
||||
|
||||
if (bb == null)
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ Menus.prototype.init = function()
|
|||
{
|
||||
let addItem = mxUtils.bind(this, function(fontname)
|
||||
{
|
||||
let tr = this.styleChange(menu, fontname, [mxConstants.STYLE_FONTFAMILY], [fontname], null, parent, function()
|
||||
let tr = this.styleChange(menu, fontname, .fontFamily, [fontname], null, parent, function()
|
||||
{
|
||||
document.execCommand('fontname', false, fontname);
|
||||
}, function()
|
||||
|
|
@ -97,7 +97,7 @@ Menus.prototype.init = function()
|
|||
menu.addSeparator(parent);
|
||||
}
|
||||
|
||||
this.promptChange(menu, mxResources.get('custom') + '...', '', mxConstants.DEFAULT_FONTFAMILY, mxConstants.STYLE_FONTFAMILY, parent, true, mxUtils.bind(this, function(newValue)
|
||||
this.promptChange(menu, mxResources.get('custom') + '...', '', mxConstants.DEFAULT_FONTFAMILY, 'fontFamily', parent, true, mxUtils.bind(this, function(newValue)
|
||||
{
|
||||
if (mxUtils.indexOf(this.customFonts, newValue) < 0)
|
||||
{
|
||||
|
|
@ -139,7 +139,7 @@ Menus.prototype.init = function()
|
|||
|
||||
let addItem = mxUtils.bind(this, function(fontsize)
|
||||
{
|
||||
this.styleChange(menu, fontsize, [mxConstants.STYLE_FONTSIZE], [fontsize], null, parent, function()
|
||||
this.styleChange(menu, fontsize, .fontSize, [fontsize], null, parent, function()
|
||||
{
|
||||
if (graph.cellEditor.textarea != null)
|
||||
{
|
||||
|
|
@ -189,15 +189,15 @@ Menus.prototype.init = function()
|
|||
menu.addSeparator(parent);
|
||||
}
|
||||
|
||||
this.promptChange(menu, mxResources.get('custom') + '...', '(pt)', '12', mxConstants.STYLE_FONTSIZE, parent, true, mxUtils.bind(this, function(newValue)
|
||||
this.promptChange(menu, mxResources.get('custom') + '...', '(pt)', '12', 'fontSize', parent, true, mxUtils.bind(this, function(newValue)
|
||||
{
|
||||
this.customFontSizes.push(newValue);
|
||||
}));
|
||||
})));
|
||||
this.put('direction', new Menu(mxUtils.bind(this, function(menu, parent)
|
||||
{
|
||||
menu.addItem(mxResources.get('flipH'), null, function() { graph.toggleCellStyles(mxConstants.STYLE_FLIPH, false); }, parent);
|
||||
menu.addItem(mxResources.get('flipV'), null, function() { graph.toggleCellStyles(mxConstants.STYLE_FLIPV, false); }, parent);
|
||||
menu.addItem(mxResources.get('flipH'), null, function() { graph.toggleCellStyles('flipH', false); }, parent);
|
||||
menu.addItem(mxResources.get('flipV'), null, function() { graph.toggleCellStyles('flipV', false); }, parent);
|
||||
this.addMenuItems(menu, ['-', 'rotation'], parent);
|
||||
})));
|
||||
this.put('align', new Menu(mxUtils.bind(this, function(menu, parent)
|
||||
|
|
@ -863,7 +863,7 @@ Menus.prototype.createStyleChangeFunction = function(keys, values)
|
|||
graph.setCellStyles(keys[i], values[i], cells);
|
||||
|
||||
// Removes CSS alignment to produce consistent output
|
||||
if (keys[i] == mxConstants.STYLE_ALIGN)
|
||||
if (keys[i] == mxConstants.'align')
|
||||
{
|
||||
graph.updateLabelElements(cells, function(elt)
|
||||
{
|
||||
|
|
@ -873,7 +873,7 @@ Menus.prototype.createStyleChangeFunction = function(keys, values)
|
|||
}
|
||||
|
||||
// Updates autosize after font changes
|
||||
if (keys[i] == mxConstants.STYLE_FONTFAMILY)
|
||||
if (keys[i] == 'fontFamily')
|
||||
{
|
||||
for (let j = 0; j < cells.length; j++)
|
||||
{
|
||||
|
|
@ -1164,8 +1164,8 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt)
|
|||
{
|
||||
let hasWaypoints = false;
|
||||
|
||||
if (cell.isEdge() && mxUtils.getValue(state.style, mxConstants.STYLE_EDGE, null) != 'entityRelationEdgeStyle' &&
|
||||
mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) != 'arrow')
|
||||
if (cell.isEdge() && mxUtils.getValue(state.style, 'edge', null) != 'entityRelationEdgeStyle' &&
|
||||
mxUtils.getValue(state.style, 'shape', null) != 'arrow')
|
||||
{
|
||||
let handler = graph.selectionCellsHandler.getHandler(cell);
|
||||
let isWaypoint = false;
|
||||
|
|
@ -1203,7 +1203,7 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt)
|
|||
this.addMenuItems(menu, ['-', 'editStyle', 'editData', 'editLink'], null, evt);
|
||||
|
||||
// Shows edit image action if there is an image in the style
|
||||
if (cell.isVertex() && mxUtils.getValue(state.style, mxConstants.STYLE_IMAGE, null) != null)
|
||||
if (cell.isVertex() && mxUtils.getValue(state.style, 'image', null) != null)
|
||||
{
|
||||
menu.addSeparator();
|
||||
this.addMenuItem(menu, 'image', null, evt).firstChild.nextSibling.innerHTML = mxResources.get('editImage') + '...';
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
if (this.style != null)
|
||||
{
|
||||
events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
|
||||
events = mxUtils.getValue(this.style, mxConstants.'pointerEvents', '1') == '1';
|
||||
}
|
||||
|
||||
if (!events)
|
||||
|
|
@ -866,7 +866,7 @@
|
|||
CardShape.prototype.redrawPath = function(c, x, y, w, h)
|
||||
{
|
||||
let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))));
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w, 0), new mxPoint(w, h), new mxPoint(0, h), new mxPoint(0, s)],
|
||||
this.isRounded, arcSize, true);
|
||||
c.end();
|
||||
|
|
@ -1093,7 +1093,7 @@
|
|||
let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
|
||||
|
||||
let dx = (fixed) ? Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w, 0), new mxPoint(w - dx, h)],
|
||||
this.isRounded, arcSize, true);
|
||||
c.end();
|
||||
|
|
@ -1119,7 +1119,7 @@
|
|||
let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
|
||||
|
||||
let dx = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w - dx, 0), new mxPoint(w, h)],
|
||||
this.isRounded, arcSize, true);
|
||||
};
|
||||
|
|
@ -1137,7 +1137,7 @@
|
|||
{
|
||||
c.setFillColor(null);
|
||||
let s = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(w, 0), new mxPoint(s, 0), new mxPoint(s, h / 2),
|
||||
new mxPoint(0, h / 2), new mxPoint(s, h / 2), new mxPoint(s, h),
|
||||
new mxPoint(w, h)], this.isRounded, arcSize, false);
|
||||
|
|
@ -1377,7 +1377,7 @@
|
|||
|
||||
if (this.style != null)
|
||||
{
|
||||
events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
|
||||
events = mxUtils.getValue(this.style, mxConstants.'pointerEvents', '1') == '1';
|
||||
}
|
||||
|
||||
if (events || (this.fill != null && this.fill != mxConstants.NONE) ||
|
||||
|
|
@ -1394,14 +1394,14 @@
|
|||
{
|
||||
let r = 0;
|
||||
|
||||
if (mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1')
|
||||
if (mxUtils.getValue(this.style, 'absoluteArcSize', 0) == '1')
|
||||
{
|
||||
r = Math.min(w / 2, Math.min(h / 2, mxUtils.getValue(this.style,
|
||||
mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2));
|
||||
'arcSize', mxConstants.LINE_ARCSIZE) / 2));
|
||||
}
|
||||
else
|
||||
{
|
||||
let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
|
||||
let f = mxUtils.getValue(this.style, 'arcSize',
|
||||
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
|
||||
r = Math.min(w * f, h * f);
|
||||
}
|
||||
|
|
@ -1463,7 +1463,7 @@
|
|||
};
|
||||
ProcessShape.prototype.getLabelBounds = function(rect)
|
||||
{
|
||||
if (mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, true) ==
|
||||
if (mxUtils.getValue(this.state.style, 'horizontal', true) ==
|
||||
(this.direction == null ||
|
||||
this.direction == mxConstants.DIRECTION_EAST ||
|
||||
this.direction == mxConstants.DIRECTION_WEST))
|
||||
|
|
@ -1476,7 +1476,7 @@
|
|||
|
||||
if (this.isRounded)
|
||||
{
|
||||
let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
|
||||
let f = mxUtils.getValue(this.style, 'arcSize',
|
||||
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
|
||||
inset = Math.max(inset, Math.min(w * f, h * f));
|
||||
}
|
||||
|
|
@ -1506,7 +1506,7 @@
|
|||
|
||||
if (this.isRounded)
|
||||
{
|
||||
let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
|
||||
let f = mxUtils.getValue(this.style, 'arcSize',
|
||||
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
|
||||
inset = Math.max(inset, Math.min(w * f, h * f));
|
||||
}
|
||||
|
|
@ -1563,7 +1563,7 @@
|
|||
};
|
||||
CalloutShape.prototype.redrawPath = function(c, x, y, w, h)
|
||||
{
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
let s = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
||||
let dx = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position', this.position))));
|
||||
var dx2 = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position2', this.position2))));
|
||||
|
|
@ -1594,7 +1594,7 @@
|
|||
let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
|
||||
let s = (fixed) ? Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) :
|
||||
w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w - s, 0), new mxPoint(w, h / 2), new mxPoint(w - s, h),
|
||||
new mxPoint(0, h), new mxPoint(s, h / 2)], this.isRounded, arcSize, true);
|
||||
c.end();
|
||||
|
|
@ -1619,7 +1619,7 @@
|
|||
let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0';
|
||||
let s = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) :
|
||||
w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w - s, 0), new mxPoint(w, 0.5 * h), new mxPoint(w - s, h),
|
||||
new mxPoint(s, h), new mxPoint(0, 0.5 * h)], this.isRounded, arcSize, true);
|
||||
};
|
||||
|
|
@ -1659,7 +1659,7 @@
|
|||
if (this.style['double'] == 1)
|
||||
{
|
||||
let margin = (Math.max(2, this.strokewidth + 1) * 2 + parseFloat(
|
||||
this.style[mxConstants.STYLE_MARGIN] || 0)) * this.scale;
|
||||
this.style[mxConstants.'margin'] || 0)) * this.scale;
|
||||
|
||||
return new mxRectangle(rect.x + margin, rect.y + margin,
|
||||
rect.width - 2 * margin, rect.height - 2 * margin);
|
||||
|
|
@ -1674,7 +1674,7 @@
|
|||
if (!this.outline && this.style['double'] == 1)
|
||||
{
|
||||
let margin = Math.max(2, this.strokewidth + 1) * 2 +
|
||||
parseFloat(this.style[mxConstants.STYLE_MARGIN] || 0);
|
||||
parseFloat(this.style[mxConstants.'margin'] || 0);
|
||||
x += margin;
|
||||
y += margin;
|
||||
w -= 2 * margin;
|
||||
|
|
@ -1706,7 +1706,7 @@
|
|||
if (this.style['double'] == 1)
|
||||
{
|
||||
let margin = (Math.max(2, this.strokewidth + 1) + parseFloat(
|
||||
this.style[mxConstants.STYLE_MARGIN] || 0)) * this.scale;
|
||||
this.style[mxConstants.'margin'] || 0)) * this.scale;
|
||||
|
||||
return new mxRectangle(rect.x + margin, rect.y + margin,
|
||||
rect.width - 2 * margin, rect.height - 2 * margin);
|
||||
|
|
@ -1721,7 +1721,7 @@
|
|||
{
|
||||
if (!this.outline && this.style['double'] == 1)
|
||||
{
|
||||
let margin = Math.max(2, this.strokewidth + 1) + parseFloat(this.style[mxConstants.STYLE_MARGIN] || 0);
|
||||
let margin = Math.max(2, this.strokewidth + 1) + parseFloat(this.style[mxConstants.'margin'] || 0);
|
||||
x += margin;
|
||||
y += margin;
|
||||
w -= 2 * margin;
|
||||
|
|
@ -2069,7 +2069,7 @@
|
|||
let co = this.corner;
|
||||
var w0 = Math.min(w, Math.max(co, parseFloat(mxUtils.getValue(this.style, 'width', this.width))));
|
||||
var h0 = Math.min(h, Math.max(co * 1.5, parseFloat(mxUtils.getValue(this.style, 'height', this.height))));
|
||||
let bg = mxUtils.getValue(this.style, mxConstants.STYLE_SWIMLANE_FILLCOLOR, mxConstants.NONE);
|
||||
let bg = mxUtils.getValue(this.style, 'swimlaneFillColor', mxConstants.NONE);
|
||||
|
||||
if (bg != mxConstants.NONE)
|
||||
{
|
||||
|
|
@ -2117,7 +2117,7 @@
|
|||
size = mxUtils.getValue(vertex.style, 'size', size) * vertex.view.scale;
|
||||
}
|
||||
|
||||
let sw = (parseFloat(vertex.style[mxConstants.STYLE_STROKEWIDTH] || 1) * vertex.view.scale / 2) - 1;
|
||||
let sw = (parseFloat(vertex.style.strokeWidth || 1) * vertex.view.scale / 2) - 1;
|
||||
|
||||
if (next.x < bounds.getCenterX())
|
||||
{
|
||||
|
|
@ -2142,15 +2142,15 @@
|
|||
|
||||
mxPerimeter.BackbonePerimeter = (bounds, vertex, next, orthogonal) =>
|
||||
{
|
||||
let sw = (parseFloat(vertex.style[mxConstants.STYLE_STROKEWIDTH] || 1) * vertex.view.scale / 2) - 1;
|
||||
let sw = (parseFloat(vertex.style.strokeWidth || 1) * vertex.view.scale / 2) - 1;
|
||||
|
||||
if (vertex.style['backboneSize'] != null)
|
||||
{
|
||||
sw += (parseFloat(vertex.style['backboneSize']) * vertex.view.scale / 2) - 1;
|
||||
}
|
||||
|
||||
if (vertex.style[mxConstants.STYLE_DIRECTION] == 'south' ||
|
||||
vertex.style[mxConstants.STYLE_DIRECTION] == 'north')
|
||||
if (vertex.style.direction == 'south' ||
|
||||
vertex.style.direction == 'north')
|
||||
{
|
||||
if (next.x < bounds.getCenterX())
|
||||
{
|
||||
|
|
@ -2209,7 +2209,7 @@
|
|||
let h = bounds.height;
|
||||
|
||||
let direction = (vertex != null) ? mxUtils.getValue(
|
||||
vertex.style, mxConstants.STYLE_DIRECTION,
|
||||
vertex.style, 'direction',
|
||||
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
|
||||
let vertical = direction == mxConstants.DIRECTION_NORTH ||
|
||||
direction == mxConstants.DIRECTION_SOUTH;
|
||||
|
|
@ -2272,7 +2272,7 @@
|
|||
let h = bounds.height;
|
||||
|
||||
let direction = (vertex != null) ? mxUtils.getValue(
|
||||
vertex.style, mxConstants.STYLE_DIRECTION,
|
||||
vertex.style, 'direction',
|
||||
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
|
||||
let points = [];
|
||||
|
||||
|
|
@ -2348,7 +2348,7 @@
|
|||
let cy = bounds.getCenterY();
|
||||
|
||||
let direction = (vertex != null) ? mxUtils.getValue(
|
||||
vertex.style, mxConstants.STYLE_DIRECTION,
|
||||
vertex.style, 'direction',
|
||||
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
|
||||
var points;
|
||||
|
||||
|
|
@ -2425,7 +2425,7 @@
|
|||
let cy = bounds.getCenterY();
|
||||
|
||||
let direction = (vertex != null) ? mxUtils.getValue(
|
||||
vertex.style, mxConstants.STYLE_DIRECTION,
|
||||
vertex.style, 'direction',
|
||||
mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST;
|
||||
let vertical = direction == mxConstants.DIRECTION_NORTH ||
|
||||
direction == mxConstants.DIRECTION_SOUTH;
|
||||
|
|
@ -2676,7 +2676,7 @@
|
|||
let hw = w / 2;
|
||||
let hh = h / 2;
|
||||
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
c.begin();
|
||||
this.addPoints(c, [new mxPoint(x + hw, y), new mxPoint(x + w, y + hh), new mxPoint(x + hw, y + h),
|
||||
new mxPoint(x, y + hh)], this.isRounded, arcSize, true);
|
||||
|
|
@ -2793,7 +2793,7 @@
|
|||
ManualInputShape.prototype.redrawPath = function(c, x, y, w, h)
|
||||
{
|
||||
let s = Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)));
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(0, h), new mxPoint(0, s), new mxPoint(w, 0), new mxPoint(w, h)],
|
||||
this.isRounded, arcSize, true);
|
||||
c.end();
|
||||
|
|
@ -2820,7 +2820,7 @@
|
|||
|
||||
if (this.isRounded)
|
||||
{
|
||||
let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE,
|
||||
let f = mxUtils.getValue(this.style, 'arcSize',
|
||||
mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100;
|
||||
inset = Math.max(inset, Math.min(w * f, h * f));
|
||||
}
|
||||
|
|
@ -2859,7 +2859,7 @@
|
|||
let dy = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy))));
|
||||
|
||||
let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, dy), new mxPoint(dx, dy),
|
||||
new mxPoint(dx, h), new mxPoint(0, h)], this.isRounded, arcSize, true);
|
||||
c.end();
|
||||
|
|
@ -2908,7 +2908,7 @@
|
|||
var w2 = Math.abs(w - dx) / 2;
|
||||
|
||||
let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, dy), new mxPoint((w + dx) / 2, dy),
|
||||
new mxPoint((w + dx) / 2, h), new mxPoint((w - dx) / 2, h), new mxPoint((w - dx) / 2, dy),
|
||||
new mxPoint(0, dy)], this.isRounded, arcSize, true);
|
||||
|
|
@ -2932,7 +2932,7 @@
|
|||
let at = (h - aw) / 2;
|
||||
let ab = at + aw;
|
||||
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(0, at), new mxPoint(w - as, at), new mxPoint(w - as, 0), new mxPoint(w, h / 2),
|
||||
new mxPoint(w - as, h), new mxPoint(w - as, ab), new mxPoint(0, ab)],
|
||||
this.isRounded, arcSize, true);
|
||||
|
|
@ -2954,7 +2954,7 @@
|
|||
let at = (h - aw) / 2;
|
||||
let ab = at + aw;
|
||||
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(0, h / 2), new mxPoint(as, 0), new mxPoint(as, at), new mxPoint(w - as, at),
|
||||
new mxPoint(w - as, 0), new mxPoint(w, h / 2), new mxPoint(w - as, h),
|
||||
new mxPoint(w - as, ab), new mxPoint(as, ab), new mxPoint(as, h)],
|
||||
|
|
@ -3038,7 +3038,7 @@
|
|||
LoopLimitShape.prototype.redrawPath = function(c, x, y, w, h)
|
||||
{
|
||||
let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w - s, 0), new mxPoint(w, s * 0.8), new mxPoint(w, h),
|
||||
new mxPoint(0, h), new mxPoint(0, s * 0.8)], this.isRounded, arcSize, true);
|
||||
c.end();
|
||||
|
|
@ -3060,7 +3060,7 @@
|
|||
OffPageConnectorShape.prototype.redrawPath = function(c, x, y, w, h)
|
||||
{
|
||||
let s = h * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, h - s), new mxPoint(w / 2, h),
|
||||
new mxPoint(0, h - s)], this.isRounded, arcSize, true);
|
||||
c.end();
|
||||
|
|
@ -3236,7 +3236,7 @@
|
|||
if (this.style != null)
|
||||
{
|
||||
let pointerEvents = c.pointerEvents;
|
||||
let events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1';
|
||||
let events = mxUtils.getValue(this.style, mxConstants.'pointerEvents', '1') == '1';
|
||||
|
||||
if (!events && (this.fill == null || this.fill == mxConstants.NONE))
|
||||
{
|
||||
|
|
@ -3760,36 +3760,36 @@
|
|||
|
||||
function createArcHandle(state, yOffset)
|
||||
{
|
||||
return createHandle(state, [mxConstants.STYLE_ARCSIZE], function(bounds)
|
||||
return createHandle(state, ['arcSize'], function(bounds)
|
||||
{
|
||||
let tmp = (yOffset != null) ? yOffset : bounds.height / 8;
|
||||
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1')
|
||||
if (mxUtils.getValue(state.style, 'absoluteArcSize', 0) == '1')
|
||||
{
|
||||
let arcSize = mxUtils.getValue(state.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(state.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
|
||||
return new mxPoint(bounds.x + bounds.width - Math.min(bounds.width / 2, arcSize), bounds.y + tmp);
|
||||
}
|
||||
else
|
||||
{
|
||||
let arcSize = Math.max(0, parseFloat(mxUtils.getValue(state.style,
|
||||
mxConstants.STYLE_ARCSIZE, mxConstants.RECTANGLE_ROUNDING_FACTOR * 100))) / 100;
|
||||
'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100))) / 100;
|
||||
|
||||
return new mxPoint(bounds.x + bounds.width - Math.min(Math.max(bounds.width / 2, bounds.height / 2),
|
||||
Math.min(bounds.width, bounds.height) * arcSize), bounds.y + tmp);
|
||||
}
|
||||
}, function(bounds, pt, me)
|
||||
{
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1')
|
||||
if (mxUtils.getValue(state.style, 'absoluteArcSize', 0) == '1')
|
||||
{
|
||||
this.state.style[mxConstants.STYLE_ARCSIZE] = Math.round(Math.max(0, Math.min(bounds.width,
|
||||
this.state.style['arcSize'] = Math.round(Math.max(0, Math.min(bounds.width,
|
||||
(bounds.x + bounds.width - pt.x) * 2)));
|
||||
}
|
||||
else
|
||||
{
|
||||
let f = Math.min(50, Math.max(0, (bounds.width - pt.x + bounds.x) * 100 /
|
||||
Math.min(bounds.width, bounds.height)));
|
||||
this.state.style[mxConstants.STYLE_ARCSIZE] = Math.round(f);
|
||||
this.state.style['arcSize'] = Math.round(f);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -3800,7 +3800,7 @@
|
|||
{
|
||||
let handles = [];
|
||||
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
|
||||
if (mxUtils.getValue(state.style, 'rounded', false))
|
||||
{
|
||||
handles.push(createArcHandle(state));
|
||||
}
|
||||
|
|
@ -3829,7 +3829,7 @@
|
|||
this.state.style['size'] = size;
|
||||
}, false, true)];
|
||||
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
|
||||
if (mxUtils.getValue(state.style, 'rounded', false))
|
||||
{
|
||||
handles.push(createArcHandle(state));
|
||||
}
|
||||
|
|
@ -3858,7 +3858,7 @@
|
|||
this.state.style['size'] = size;
|
||||
}, false, redrawEdges)];
|
||||
|
||||
if (allowArcHandle && mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
|
||||
if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false))
|
||||
{
|
||||
handles.push(createArcHandle(state));
|
||||
}
|
||||
|
|
@ -3883,7 +3883,7 @@
|
|||
Math.min(bounds.height, pt.y - bounds.y))) / factor);
|
||||
}, false)];
|
||||
|
||||
if (allowArcHandle && mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
|
||||
if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false))
|
||||
{
|
||||
handles.push(createArcHandle(state));
|
||||
}
|
||||
|
|
@ -3999,12 +3999,12 @@
|
|||
let tol = state.view.graph.gridSize / state.view.scale;
|
||||
let handles = [];
|
||||
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_STARTARROW, mxConstants.NONE) != mxConstants.NONE)
|
||||
if (mxUtils.getValue(state.style, mxConstants.'startArrow', mxConstants.NONE) != mxConstants.NONE)
|
||||
{
|
||||
handles.push(createEdgeHandle(state, ['width', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], true, function(dist, nx, ny, p0, p1)
|
||||
handles.push(createEdgeHandle(state, ['width', 'startSize', 'endSize'], true, function(dist, nx, ny, p0, p1)
|
||||
{
|
||||
let w = (state.shape.getEdgeWidth() - state.shape.strokewidth) * state.view.scale;
|
||||
let l = mxUtils.getNumber(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
|
||||
let l = mxUtils.getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
|
||||
|
||||
return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) + ny * w / 2,
|
||||
p0.y + ny * (l + state.shape.strokewidth * state.view.scale) - nx * w / 2);
|
||||
|
|
@ -4013,29 +4013,29 @@
|
|||
let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
|
||||
let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
|
||||
|
||||
state.style[mxConstants.STYLE_STARTSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
|
||||
state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
|
||||
state.style['width'] = Math.round(w * 2) / state.view.scale;
|
||||
|
||||
// Applies to opposite side
|
||||
if (mxEvent.isControlDown(me.getEvent()))
|
||||
{
|
||||
state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
|
||||
state.style.endSize = state.style.startSize;
|
||||
}
|
||||
|
||||
// Snaps to end geometry
|
||||
if (!mxEvent.isAltDown(me.getEvent()))
|
||||
{
|
||||
if (Math.abs(parseFloat(state.style[mxConstants.STYLE_STARTSIZE]) - parseFloat(state.style[mxConstants.STYLE_ENDSIZE])) < tol / 6)
|
||||
if (Math.abs(parseFloat(state.style.startSize) - parseFloat(state.style.endSize)) < tol / 6)
|
||||
{
|
||||
state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
|
||||
state.style.startSize = state.style.endSize;
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], true, function(dist, nx, ny, p0, p1)
|
||||
handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', 'startSize', 'endSize'], true, function(dist, nx, ny, p0, p1)
|
||||
{
|
||||
let w = (state.shape.getStartArrowWidth() - state.shape.strokewidth) * state.view.scale;
|
||||
let l = mxUtils.getNumber(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
|
||||
let l = mxUtils.getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
|
||||
|
||||
return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) + ny * w / 2,
|
||||
p0.y + ny * (l + state.shape.strokewidth * state.view.scale) - nx * w / 2);
|
||||
|
|
@ -4044,22 +4044,22 @@
|
|||
let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
|
||||
let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
|
||||
|
||||
state.style[mxConstants.STYLE_STARTSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
|
||||
state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
|
||||
state.style['startWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
|
||||
|
||||
// Applies to opposite side
|
||||
if (mxEvent.isControlDown(me.getEvent()))
|
||||
{
|
||||
state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
|
||||
state.style.endSize = state.style.startSize;
|
||||
state.style['endWidth'] = state.style['startWidth'];
|
||||
}
|
||||
|
||||
// Snaps to endWidth
|
||||
if (!mxEvent.isAltDown(me.getEvent()))
|
||||
{
|
||||
if (Math.abs(parseFloat(state.style[mxConstants.STYLE_STARTSIZE]) - parseFloat(state.style[mxConstants.STYLE_ENDSIZE])) < tol / 6)
|
||||
if (Math.abs(parseFloat(state.style.startSize) - parseFloat(state.style.endSize)) < tol / 6)
|
||||
{
|
||||
state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
|
||||
state.style.startSize = state.style.endSize;
|
||||
}
|
||||
|
||||
if (Math.abs(parseFloat(state.style['startWidth']) - parseFloat(state.style['endWidth'])) < tol)
|
||||
|
|
@ -4070,12 +4070,12 @@
|
|||
}));
|
||||
}
|
||||
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_ENDARROW, mxConstants.NONE) != mxConstants.NONE)
|
||||
if (mxUtils.getValue(state.style, mxConstants.'endArrow', mxConstants.NONE) != mxConstants.NONE)
|
||||
{
|
||||
handles.push(createEdgeHandle(state, ['width', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], false, function(dist, nx, ny, p0, p1)
|
||||
handles.push(createEdgeHandle(state, ['width', 'startSize', 'endSize'], false, function(dist, nx, ny, p0, p1)
|
||||
{
|
||||
let w = (state.shape.getEdgeWidth() - state.shape.strokewidth) * state.view.scale;
|
||||
let l = mxUtils.getNumber(state.style, mxConstants.STYLE_ENDSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
|
||||
let l = mxUtils.getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
|
||||
|
||||
return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) - ny * w / 2,
|
||||
p0.y + ny * (l + state.shape.strokewidth * state.view.scale) + nx * w / 2);
|
||||
|
|
@ -4084,29 +4084,29 @@
|
|||
let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
|
||||
let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
|
||||
|
||||
state.style[mxConstants.STYLE_ENDSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
|
||||
state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
|
||||
state.style['width'] = Math.round(w * 2) / state.view.scale;
|
||||
|
||||
// Applies to opposite side
|
||||
if (mxEvent.isControlDown(me.getEvent()))
|
||||
{
|
||||
state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
|
||||
state.style.startSize = state.style.endSize;
|
||||
}
|
||||
|
||||
// Snaps to start geometry
|
||||
if (!mxEvent.isAltDown(me.getEvent()))
|
||||
{
|
||||
if (Math.abs(parseFloat(state.style[mxConstants.STYLE_ENDSIZE]) - parseFloat(state.style[mxConstants.STYLE_STARTSIZE])) < tol / 6)
|
||||
if (Math.abs(parseFloat(state.style.endSize) - parseFloat(state.style.startSize)) < tol / 6)
|
||||
{
|
||||
state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
|
||||
state.style.endSize = state.style.startSize;
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], false, function(dist, nx, ny, p0, p1)
|
||||
handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', 'startSize', 'endSize'], false, function(dist, nx, ny, p0, p1)
|
||||
{
|
||||
let w = (state.shape.getEndArrowWidth() - state.shape.strokewidth) * state.view.scale;
|
||||
let l = mxUtils.getNumber(state.style, mxConstants.STYLE_ENDSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
|
||||
let l = mxUtils.getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale;
|
||||
|
||||
return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) - ny * w / 2,
|
||||
p0.y + ny * (l + state.shape.strokewidth * state.view.scale) + nx * w / 2);
|
||||
|
|
@ -4115,22 +4115,22 @@
|
|||
let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y));
|
||||
let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y);
|
||||
|
||||
state.style[mxConstants.STYLE_ENDSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
|
||||
state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale;
|
||||
state.style['endWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale;
|
||||
|
||||
// Applies to opposite side
|
||||
if (mxEvent.isControlDown(me.getEvent()))
|
||||
{
|
||||
state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE];
|
||||
state.style.startSize = state.style.endSize;
|
||||
state.style['startWidth'] = state.style['endWidth'];
|
||||
}
|
||||
|
||||
// Snaps to start geometry
|
||||
if (!mxEvent.isAltDown(me.getEvent()))
|
||||
{
|
||||
if (Math.abs(parseFloat(state.style[mxConstants.STYLE_ENDSIZE]) - parseFloat(state.style[mxConstants.STYLE_STARTSIZE])) < tol / 6)
|
||||
if (Math.abs(parseFloat(state.style.endSize) - parseFloat(state.style.startSize)) < tol / 6)
|
||||
{
|
||||
state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE];
|
||||
state.style.endSize = state.style.startSize;
|
||||
}
|
||||
|
||||
if (Math.abs(parseFloat(state.style['endWidth']) - parseFloat(state.style['startWidth'])) < tol)
|
||||
|
|
@ -4147,18 +4147,18 @@
|
|||
{
|
||||
let handles = [];
|
||||
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED))
|
||||
if (mxUtils.getValue(state.style, 'rounded'))
|
||||
{
|
||||
let size = parseFloat(mxUtils.getValue(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_STARTSIZE));
|
||||
let size = parseFloat(mxUtils.getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE));
|
||||
handles.push(createArcHandle(state, size / 2));
|
||||
}
|
||||
|
||||
// Start size handle must be last item in handles for hover to work in tables (see mouse event handler in Graph)
|
||||
handles.push(createHandle(state, [mxConstants.STYLE_STARTSIZE], function(bounds)
|
||||
handles.push(createHandle(state, .startSize, function(bounds)
|
||||
{
|
||||
let size = parseFloat(mxUtils.getValue(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_STARTSIZE));
|
||||
let size = parseFloat(mxUtils.getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE));
|
||||
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_HORIZONTAL, 1) == 1)
|
||||
if (mxUtils.getValue(state.style, 'horizontal', 1) == 1)
|
||||
{
|
||||
return new mxPoint(bounds.getCenterX(), bounds.y + Math.max(0, Math.min(bounds.height, size)));
|
||||
}
|
||||
|
|
@ -4168,8 +4168,8 @@
|
|||
}
|
||||
}, function(bounds, pt)
|
||||
{
|
||||
state.style[mxConstants.STYLE_STARTSIZE] =
|
||||
(mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, 1) == 1) ?
|
||||
state.style.startSize =
|
||||
(mxUtils.getValue(this.state.style, 'horizontal', 1) == 1) ?
|
||||
Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))) :
|
||||
Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)));
|
||||
}, false, null, function(me)
|
||||
|
|
@ -4196,8 +4196,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
graph.setCellStyles(mxConstants.STYLE_STARTSIZE,
|
||||
state.style[mxConstants.STYLE_STARTSIZE], temp);
|
||||
graph.setCellStyles('startSize',
|
||||
state.style.startSize, temp);
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
|
@ -4253,7 +4253,7 @@
|
|||
this.state.style['size'] = size;
|
||||
}, false)];
|
||||
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
|
||||
if (mxUtils.getValue(state.style, 'rounded', false))
|
||||
{
|
||||
handles.push(createArcHandle(state));
|
||||
}
|
||||
|
|
@ -4315,7 +4315,7 @@
|
|||
this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * 4 / 3)));
|
||||
}, false)];
|
||||
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
|
||||
if (mxUtils.getValue(state.style, 'rounded', false))
|
||||
{
|
||||
handles.push(createArcHandle(state));
|
||||
}
|
||||
|
|
@ -4374,7 +4374,7 @@
|
|||
this.state.style['base'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x - position * bounds.width)));
|
||||
}, false)];
|
||||
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
|
||||
if (mxUtils.getValue(state.style, 'rounded', false))
|
||||
{
|
||||
handles.push(createArcHandle(state));
|
||||
}
|
||||
|
|
@ -4395,7 +4395,7 @@
|
|||
this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)));
|
||||
}, false)];
|
||||
|
||||
if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false))
|
||||
if (mxUtils.getValue(state.style, 'rounded', false))
|
||||
{
|
||||
handles.push(createArcHandle(state));
|
||||
}
|
||||
|
|
@ -4777,7 +4777,7 @@
|
|||
CalloutShape.prototype.getConstraints = function(style, w, h)
|
||||
{
|
||||
let constr = [];
|
||||
let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2;
|
||||
let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2;
|
||||
let s = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))));
|
||||
let dx = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position', this.position))));
|
||||
var dx2 = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position2', this.position2))));
|
||||
|
|
|
|||
|
|
@ -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())))
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import {
|
|||
DIALECT_SVG,
|
||||
HIGHLIGHT_OPACITY,
|
||||
HIGHLIGHT_STROKEWIDTH,
|
||||
STYLE_ROTATION,
|
||||
} from '../util/mxConstants';
|
||||
import mxEvent from '../util/event/mxEvent';
|
||||
import mxRectangle from '../util/datatypes/mxRectangle';
|
||||
|
|
@ -216,7 +215,7 @@ class mxCellHighlight {
|
|||
this.state.width + 2 * this.spacing,
|
||||
this.state.height + 2 * this.spacing
|
||||
);
|
||||
this.shape.rotation = Number(this.state.style[STYLE_ROTATION] || '0');
|
||||
this.shape.rotation = Number(this.state.style.rotation || '0');
|
||||
this.shape.strokewidth =
|
||||
<number>this.getStrokeWidth() / this.state.view.scale;
|
||||
this.shape.outline = true;
|
||||
|
|
|
|||
|
|
@ -16,11 +16,6 @@ import {
|
|||
INVALID_COLOR,
|
||||
OUTLINE_HIGHLIGHT_COLOR,
|
||||
OUTLINE_HIGHLIGHT_STROKEWIDTH,
|
||||
STYLE_ENTRY_X,
|
||||
STYLE_ENTRY_Y,
|
||||
STYLE_EXIT_X,
|
||||
STYLE_EXIT_Y,
|
||||
STYLE_ROTATION,
|
||||
TOOLTIP_VERTICAL_OFFSET,
|
||||
VALID_COLOR,
|
||||
} from '../util/mxConstants';
|
||||
|
|
@ -927,7 +922,7 @@ class mxConnectionHandler extends mxEventSource {
|
|||
cy = size.height !== 0 ? state.y + (size.height * scale) / 2 : cy;
|
||||
|
||||
const alpha = mxUtils.toRadians(
|
||||
mxUtils.getValue(state.style, STYLE_ROTATION) || 0
|
||||
mxUtils.getValue(state.style, 'rotation') || 0
|
||||
);
|
||||
|
||||
if (alpha !== 0) {
|
||||
|
|
@ -1565,16 +1560,16 @@ class mxConnectionHandler extends mxEventSource {
|
|||
updateEdgeState(current, constraint) {
|
||||
// TODO: Use generic method for writing constraint to style
|
||||
if (this.sourceConstraint != null && this.sourceConstraint.point != null) {
|
||||
this.edgeState.style[STYLE_EXIT_X] = this.sourceConstraint.point.x;
|
||||
this.edgeState.style[STYLE_EXIT_Y] = this.sourceConstraint.point.y;
|
||||
this.edgeState.style.exitX = this.sourceConstraint.point.x;
|
||||
this.edgeState.style.exitY = this.sourceConstraint.point.y;
|
||||
}
|
||||
|
||||
if (constraint != null && constraint.point != null) {
|
||||
this.edgeState.style[STYLE_ENTRY_X] = constraint.point.x;
|
||||
this.edgeState.style[STYLE_ENTRY_Y] = constraint.point.y;
|
||||
this.edgeState.style.entryX = constraint.point.x;
|
||||
this.edgeState.style.entryY = constraint.point.y;
|
||||
} else {
|
||||
delete this.edgeState.style[STYLE_ENTRY_X];
|
||||
delete this.edgeState.style[STYLE_ENTRY_Y];
|
||||
delete this.edgeState.style.entryX;
|
||||
delete this.edgeState.style.entryY;
|
||||
}
|
||||
|
||||
this.edgeState.absolutePoints = [
|
||||
|
|
@ -1690,7 +1685,7 @@ class mxConnectionHandler extends mxEventSource {
|
|||
const c = new mxPoint(state.getCenterX(), state.getCenterY());
|
||||
|
||||
if (sourcePerimeter != null) {
|
||||
const theta = mxUtils.getValue(state.style, STYLE_ROTATION, 0);
|
||||
const theta = mxUtils.getValue(state.style, 'rotation', 0);
|
||||
const rad = -theta * (Math.PI / 180);
|
||||
|
||||
if (theta !== 0) {
|
||||
|
|
|
|||
|
|
@ -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'];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -16,14 +16,6 @@ import {
|
|||
RECTANGLE_ROUNDING_FACTOR,
|
||||
SHADOW_OFFSET_X,
|
||||
SHADOW_OFFSET_Y,
|
||||
STYLE_ABSOLUTE_ARCSIZE,
|
||||
STYLE_ARCSIZE,
|
||||
STYLE_BACKGROUND_OUTLINE,
|
||||
STYLE_DIRECTION,
|
||||
STYLE_FIX_DASH,
|
||||
STYLE_FLIPH,
|
||||
STYLE_FLIPV,
|
||||
STYLE_HORIZONTAL,
|
||||
} from '../util/mxConstants';
|
||||
import mxPoint from '../util/datatypes/mxPoint';
|
||||
import mxSvgCanvas2D from '../util/canvas/mxSvgCanvas2D';
|
||||
|
|
@ -83,7 +75,7 @@ const toBool = (i: any): boolean => {
|
|||
* @example
|
||||
* ```javascript
|
||||
* var style = graph.getStylesheet().getDefaultVertexStyle();
|
||||
* style[mxConstants.STYLE_SHAPE] = 'customShape';
|
||||
* style.shape = 'customShape';
|
||||
* ```
|
||||
*/
|
||||
class mxShape {
|
||||
|
|
@ -473,7 +465,7 @@ class mxShape {
|
|||
*/
|
||||
// getLabelBounds(rect: mxRectangle): mxRectangle;
|
||||
getLabelBounds(rect: mxRectangle): mxRectangle {
|
||||
const d = mxUtils.getValue(this.style, STYLE_DIRECTION, DIRECTION_EAST);
|
||||
const d = mxUtils.getValue(this.style, 'direction', DIRECTION_EAST);
|
||||
let bounds = rect.clone();
|
||||
|
||||
// Normalizes argument for getLabelMargins hook
|
||||
|
|
@ -493,8 +485,8 @@ class mxShape {
|
|||
if (labelMargins != null) {
|
||||
labelMargins = <mxRectangle>(<mxRectangle>labelMargins).clone();
|
||||
|
||||
let flipH = toBool(mxUtils.getValue(this.style, STYLE_FLIPH, false));
|
||||
let flipV = toBool(mxUtils.getValue(this.style, STYLE_FLIPV, false));
|
||||
let flipH = toBool(mxUtils.getValue(this.style, 'flipH', false));
|
||||
let flipV = toBool(mxUtils.getValue(this.style, 'flipV', false));
|
||||
|
||||
// Handles special case for vertical labels
|
||||
if (
|
||||
|
|
@ -801,7 +793,7 @@ class mxShape {
|
|||
c.setDashed(
|
||||
this.isDashed,
|
||||
this.style != null
|
||||
? toBool(mxUtils.getValue(this.style, STYLE_FIX_DASH, false))
|
||||
? toBool(mxUtils.getValue(this.style, 'fixDash', false))
|
||||
: false
|
||||
);
|
||||
}
|
||||
|
|
@ -894,7 +886,7 @@ class mxShape {
|
|||
!this.outline ||
|
||||
this.style == null ||
|
||||
toBool(
|
||||
mxUtils.getValue(this.style, STYLE_BACKGROUND_OUTLINE, 0) === false
|
||||
mxUtils.getValue(this.style, 'backgroundOutline', 0) === false
|
||||
)
|
||||
) {
|
||||
c.setShadow(false);
|
||||
|
|
@ -945,12 +937,12 @@ class mxShape {
|
|||
getArcSize(w: number, h: number): number {
|
||||
let r = 0;
|
||||
|
||||
if (toBool(mxUtils.getValue(this.style, STYLE_ABSOLUTE_ARCSIZE, 0))) {
|
||||
if (toBool(mxUtils.getValue(this.style, 'absoluteArcSize', 0))) {
|
||||
r = Math.min(
|
||||
w / 2,
|
||||
Math.min(
|
||||
h / 2,
|
||||
mxUtils.getValue(this.style, STYLE_ARCSIZE, LINE_ARCSIZE) / 2
|
||||
mxUtils.getValue(this.style, 'arcSize', LINE_ARCSIZE) / 2
|
||||
)
|
||||
);
|
||||
} else {
|
||||
|
|
@ -958,7 +950,7 @@ class mxShape {
|
|||
String(
|
||||
mxUtils.getValue(
|
||||
this.style,
|
||||
STYLE_ARCSIZE,
|
||||
'arcSize',
|
||||
RECTANGLE_ROUNDING_FACTOR * 100
|
||||
) / 100
|
||||
)
|
||||
|
|
@ -1142,25 +1134,25 @@ class mxShape {
|
|||
* Applies the style of the given <mxCellState> to the shape. This
|
||||
* implementation assigns the following styles to local fields:
|
||||
*
|
||||
* - <mxConstants.STYLE_FILLCOLOR> => fill
|
||||
* - <mxConstants.STYLE_GRADIENTCOLOR> => gradient
|
||||
* - <mxConstants.STYLE_GRADIENT_DIRECTION> => gradientDirection
|
||||
* - <mxConstants.STYLE_OPACITY> => opacity
|
||||
* - <'fillColor'> => fill
|
||||
* - <'gradientColor'> => gradient
|
||||
* - <'gradientDirection'> => gradientDirection
|
||||
* - <'opacity'> => opacity
|
||||
* - <mxConstants.STYLE_FILL_OPACITY> => fillOpacity
|
||||
* - <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity
|
||||
* - <mxConstants.STYLE_STROKECOLOR> => stroke
|
||||
* - <mxConstants.STYLE_STROKEWIDTH> => strokewidth
|
||||
* - <mxConstants.STYLE_SHADOW> => isShadow
|
||||
* - <mxConstants.STYLE_DASHED> => isDashed
|
||||
* - <mxConstants.STYLE_SPACING> => spacing
|
||||
* - <mxConstants.STYLE_STARTSIZE> => startSize
|
||||
* - <mxConstants.STYLE_ENDSIZE> => endSize
|
||||
* - <mxConstants.STYLE_ROUNDED> => isRounded
|
||||
* - <mxConstants.STYLE_STARTARROW> => startArrow
|
||||
* - <mxConstants.STYLE_ENDARROW> => endArrow
|
||||
* - <mxConstants.STYLE_ROTATION> => rotation
|
||||
* - <mxConstants.STYLE_DIRECTION> => direction
|
||||
* - <mxConstants.STYLE_GLASS> => glass
|
||||
* - <'strokeColor'> => stroke
|
||||
* - <mxConstants.'strokeWidth'> => strokewidth
|
||||
* - <'shadow'> => isShadow
|
||||
* - <'dashed'> => isDashed
|
||||
* - <'spacing'> => spacing
|
||||
* - <'startSize'> => startSize
|
||||
* - <'endSize'> => endSize
|
||||
* - <'rounded'> => isRounded
|
||||
* - <mxConstants.'startArrow'> => startArrow
|
||||
* - <mxConstants.'endArrow'> => endArrow
|
||||
* - <'rotation'> => rotation
|
||||
* - <'direction'> => direction
|
||||
* - <'glass'> => glass
|
||||
*
|
||||
* This keeps a reference to the <style>. If you need to keep a reference to
|
||||
* the cell, you can override this method and store a local reference to
|
||||
|
|
@ -1408,7 +1400,7 @@ class mxShape {
|
|||
// getTextRotation(): number;
|
||||
getTextRotation(): number {
|
||||
let rot = this.getRotation();
|
||||
if (!toBool(mxUtils.getValue(this.style, STYLE_HORIZONTAL, 1))) {
|
||||
if (!toBool(mxUtils.getValue(this.style, 'horizontal', 1))) {
|
||||
rot += this.verticalTextRotation || -90; // WARNING WARNING!!!! ===============================================================================================
|
||||
}
|
||||
return rot;
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,7 +7,6 @@
|
|||
|
||||
import mxRectangle from '../../util/datatypes/mxRectangle';
|
||||
import mxShape from '../mxShape';
|
||||
import { STYLE_MARGIN } from '../../util/mxConstants';
|
||||
import mxUtils from '../../util/mxUtils';
|
||||
import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
|
||||
|
||||
|
|
@ -24,7 +23,7 @@ import mxSvgCanvas2D from '../../util/canvas/mxSvgCanvas2D';
|
|||
* c.ellipse(x, y, w, h);
|
||||
* c.stroke();
|
||||
*
|
||||
* var inset = mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
|
||||
* var inset = mxUtils.getValue(this.style, mxConstants.'margin', Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));
|
||||
* x += inset;
|
||||
* y += inset;
|
||||
* w -= 2 * inset;
|
||||
|
|
@ -84,7 +83,7 @@ class mxDoubleEllipse extends mxShape {
|
|||
if (!this.outline) {
|
||||
const margin = mxUtils.getValue(
|
||||
this.style,
|
||||
STYLE_MARGIN,
|
||||
'margin',
|
||||
Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5))
|
||||
);
|
||||
x += margin;
|
||||
|
|
@ -109,7 +108,7 @@ class mxDoubleEllipse extends mxShape {
|
|||
const margin =
|
||||
mxUtils.getValue(
|
||||
this.style,
|
||||
STYLE_MARGIN,
|
||||
'margin',
|
||||
Math.min(
|
||||
3 + this.strokewidth,
|
||||
Math.min(rect.width / 5 / this.scale, rect.height / 5 / this.scale)
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
[
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -16,12 +16,6 @@ import {
|
|||
NODETYPE_ELEMENT,
|
||||
NONE,
|
||||
RECTANGLE_ROUNDING_FACTOR,
|
||||
STYLE_BACKGROUND_OUTLINE,
|
||||
STYLE_DIRECTION,
|
||||
STYLE_FLIPH,
|
||||
STYLE_FLIPV,
|
||||
STYLE_POINTER_EVENTS,
|
||||
STYLE_STROKEWIDTH,
|
||||
} from '../../util/mxConstants';
|
||||
import mxStencilRegistry from './mxStencilRegistry';
|
||||
import { getChildNodes, getTextContent } from '../../util/mxDomUtils';
|
||||
|
|
@ -248,19 +242,19 @@ class mxStencil extends mxShape {
|
|||
// (start, segment, end blocks), pluggable markers, how to implement
|
||||
// swimlanes (title area) with this API, add icon, horizontal/vertical
|
||||
// label, indicator for all shapes, rotation
|
||||
const direction = mxUtils.getValue(shape.style, STYLE_DIRECTION, null);
|
||||
const direction = mxUtils.getValue(shape.style, 'direction', null);
|
||||
const aspect = this.computeAspect(shape.style, x, y, w, h, direction);
|
||||
const minScale = Math.min(aspect.width, aspect.height);
|
||||
const sw =
|
||||
this.strokewidth == 'inherit'
|
||||
? Number(mxUtils.getNumber(shape.style, STYLE_STROKEWIDTH, 1))
|
||||
? Number(mxUtils.getNumber(shape.style, 'strokeWidth', 1))
|
||||
: Number(this.strokewidth) * minScale;
|
||||
canvas.setStrokeWidth(sw);
|
||||
|
||||
// Draws a transparent rectangle for catching events
|
||||
if (
|
||||
shape.style != null &&
|
||||
mxUtils.getValue(shape.style, STYLE_POINTER_EVENTS, '0') == '1'
|
||||
mxUtils.getValue(shape.style, 'pointerEvents', '0') == '1'
|
||||
) {
|
||||
canvas.setStrokeColor(NONE);
|
||||
canvas.rect(x, y, w, h);
|
||||
|
|
@ -292,7 +286,7 @@ class mxStencil extends mxShape {
|
|||
true,
|
||||
!shape.outline ||
|
||||
shape.style == null ||
|
||||
mxUtils.getValue(shape.style, STYLE_BACKGROUND_OUTLINE, 0) == 0
|
||||
mxUtils.getValue(shape.style, 'backgroundOutline', 0) == 0
|
||||
);
|
||||
|
||||
// Restores stack for unequal count of save/restore calls
|
||||
|
|
@ -562,8 +556,8 @@ class mxStencil extends mxShape {
|
|||
const dr = shape.rotation;
|
||||
|
||||
// Depends on flipping
|
||||
const flipH = mxUtils.getValue(shape.style, STYLE_FLIPH, 0) == 1;
|
||||
const flipV = mxUtils.getValue(shape.style, STYLE_FLIPV, 0) == 1;
|
||||
const flipH = mxUtils.getValue(shape.style, 'flipH', 0) == 1;
|
||||
const flipV = mxUtils.getValue(shape.style, 'flipV', 0) == 1;
|
||||
|
||||
if (flipH && flipV) {
|
||||
rotation -= dr;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
* ```
|
||||
*
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -34,16 +34,6 @@ import {
|
|||
NODETYPE_TEXT,
|
||||
NONE,
|
||||
PAGE_FORMAT_A4_PORTRAIT,
|
||||
STYLE_DIRECTION,
|
||||
STYLE_FLIPH,
|
||||
STYLE_FLIPV,
|
||||
STYLE_HORIZONTAL,
|
||||
STYLE_PORT_CONSTRAINT,
|
||||
STYLE_PORT_CONSTRAINT_ROTATION,
|
||||
STYLE_ROTATION,
|
||||
STYLE_SOURCE_PORT_CONSTRAINT,
|
||||
STYLE_STARTSIZE,
|
||||
STYLE_TARGET_PORT_CONSTRAINT,
|
||||
} from './mxConstants';
|
||||
import mxPoint from './datatypes/mxPoint';
|
||||
import mxDictionary from './datatypes/mxDictionary';
|
||||
|
|
@ -905,10 +895,10 @@ const mxUtils = {
|
|||
getPortConstraints: (terminal, edge, source, defaultValue) => {
|
||||
const value = mxUtils.getValue(
|
||||
terminal.style,
|
||||
STYLE_PORT_CONSTRAINT,
|
||||
'portConstraint',
|
||||
mxUtils.getValue(
|
||||
edge.style,
|
||||
source ? STYLE_SOURCE_PORT_CONSTRAINT : STYLE_TARGET_PORT_CONSTRAINT,
|
||||
source ? 'sourcePortConstraint' : 'targetPortConstraint',
|
||||
null
|
||||
)
|
||||
);
|
||||
|
|
@ -920,13 +910,13 @@ const mxUtils = {
|
|||
let returnValue = DIRECTION_MASK_NONE;
|
||||
const constraintRotationEnabled = mxUtils.getValue(
|
||||
terminal.style,
|
||||
STYLE_PORT_CONSTRAINT_ROTATION,
|
||||
'portConstraintRotation',
|
||||
0
|
||||
);
|
||||
let rotation = 0;
|
||||
|
||||
if (constraintRotationEnabled == 1) {
|
||||
rotation = mxUtils.getValue(terminal.style, STYLE_ROTATION, 0);
|
||||
rotation = mxUtils.getValue(terminal.style, 'rotation', 0);
|
||||
}
|
||||
|
||||
let quad = 0;
|
||||
|
|
@ -1073,9 +1063,9 @@ const mxUtils = {
|
|||
* rectangle according to the respective styles in style.
|
||||
*/
|
||||
getDirectedBounds(rect, m, style, flipH, flipV) {
|
||||
const d = mxUtils.getValue(style, STYLE_DIRECTION, DIRECTION_EAST);
|
||||
flipH = flipH != null ? flipH : mxUtils.getValue(style, STYLE_FLIPH, false);
|
||||
flipV = flipV != null ? flipV : mxUtils.getValue(style, STYLE_FLIPV, false);
|
||||
const d = mxUtils.getValue(style, 'direction', DIRECTION_EAST);
|
||||
flipH = flipH != null ? flipH : mxUtils.getValue(style, 'flipH', false);
|
||||
flipV = flipV != null ? flipV : mxUtils.getValue(style, 'flipV', false);
|
||||
|
||||
m.x = Math.round(Math.max(0, Math.min(rect.width, m.x)));
|
||||
m.y = Math.round(Math.max(0, Math.min(rect.height, m.y)));
|
||||
|
|
@ -1321,10 +1311,10 @@ const mxUtils = {
|
|||
let h = state.height;
|
||||
|
||||
const start =
|
||||
mxUtils.getValue(state.style, STYLE_STARTSIZE) * state.view.scale;
|
||||
mxUtils.getValue(state.style, 'startSize') * state.view.scale;
|
||||
|
||||
if (start > 0) {
|
||||
if (mxUtils.getValue(state.style, STYLE_HORIZONTAL, true)) {
|
||||
if (mxUtils.getValue(state.style, 'horizontal', true)) {
|
||||
cy = state.y + start / 2;
|
||||
h = start;
|
||||
} else {
|
||||
|
|
@ -1343,7 +1333,7 @@ const mxUtils = {
|
|||
|
||||
const rect = new mxRectangle(cx - w / 2, cy - h / 2, w, h);
|
||||
const alpha = mxUtils.toRadians(
|
||||
mxUtils.getValue(state.style, STYLE_ROTATION) || 0
|
||||
mxUtils.getValue(state.style, 'rotation') || 0
|
||||
);
|
||||
|
||||
if (alpha != 0) {
|
||||
|
|
@ -2003,7 +1993,7 @@ const mxUtils = {
|
|||
* let cells = graph.getSelectionCells();
|
||||
* mxUtils.setCellStyleFlags(graph.model,
|
||||
* cells,
|
||||
* mxConstants.STYLE_FONTSTYLE,
|
||||
* 'fontStyle',
|
||||
* mxConstants.FONT_BOLD);
|
||||
* (end)
|
||||
*
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -46,33 +46,6 @@ import {
|
|||
SHAPE_RHOMBUS,
|
||||
SHAPE_SWIMLANE,
|
||||
SHAPE_TRIANGLE,
|
||||
STYLE_ALIGN,
|
||||
STYLE_FILLCOLOR,
|
||||
STYLE_FONTCOLOR,
|
||||
STYLE_FONTFAMILY,
|
||||
STYLE_FONTSIZE,
|
||||
STYLE_FONTSTYLE,
|
||||
STYLE_GRADIENTCOLOR,
|
||||
STYLE_HORIZONTAL,
|
||||
STYLE_INDICATOR_DIRECTION,
|
||||
STYLE_INDICATOR_STROKECOLOR,
|
||||
STYLE_LABEL_BACKGROUNDCOLOR,
|
||||
STYLE_LABEL_BORDERCOLOR,
|
||||
STYLE_LABEL_POSITION,
|
||||
STYLE_LABEL_WIDTH,
|
||||
STYLE_OVERFLOW,
|
||||
STYLE_ROTATION,
|
||||
STYLE_SHAPE,
|
||||
STYLE_SPACING,
|
||||
STYLE_SPACING_BOTTOM,
|
||||
STYLE_SPACING_LEFT,
|
||||
STYLE_SPACING_RIGHT,
|
||||
STYLE_SPACING_TOP,
|
||||
STYLE_STROKECOLOR,
|
||||
STYLE_TEXT_DIRECTION,
|
||||
STYLE_TEXT_OPACITY,
|
||||
STYLE_VERTICAL_ALIGN,
|
||||
STYLE_VERTICAL_LABEL_POSITION,
|
||||
} from '../../util/mxConstants';
|
||||
import mxUtils from '../../util/mxUtils';
|
||||
import mxRectangle from '../../util/datatypes/mxRectangle';
|
||||
|
|
@ -248,7 +221,7 @@ class mxCellRenderer {
|
|||
if (state.style != null) {
|
||||
// Checks if there is a stencil for the name and creates
|
||||
// a shape instance for the stencil if one exists
|
||||
const stencil = mxStencilRegistry.getStencil(state.style[STYLE_SHAPE]);
|
||||
const stencil = mxStencilRegistry.getStencil(state.style.shape);
|
||||
if (stencil != null) {
|
||||
shape = new mxShape(stencil);
|
||||
} else {
|
||||
|
|
@ -294,7 +267,7 @@ class mxCellRenderer {
|
|||
*/
|
||||
// getShapeConstructor(state: mxCellState): any;
|
||||
getShapeConstructor(state: mxCellState) {
|
||||
let ctor = this.getShape(state.style[STYLE_SHAPE]);
|
||||
let ctor = this.getShape(state.style.shape);
|
||||
if (ctor == null) {
|
||||
ctor = <typeof mxShape>(
|
||||
(state.cell.isEdge() ? this.defaultEdgeShape : this.defaultVertexShape)
|
||||
|
|
@ -318,11 +291,11 @@ class mxCellRenderer {
|
|||
shape.apply(state);
|
||||
shape.image = state.view.graph.getImage(state);
|
||||
shape.indicatorColor = state.view.graph.getIndicatorColor(state);
|
||||
shape.indicatorStrokeColor = state.style[STYLE_INDICATOR_STROKECOLOR];
|
||||
shape.indicatorStrokeColor = state.style['indicatorStrokeColor'];
|
||||
shape.indicatorGradientColor = state.view.graph.getIndicatorGradientColor(
|
||||
state
|
||||
);
|
||||
shape.indicatorDirection = state.style[STYLE_INDICATOR_DIRECTION];
|
||||
shape.indicatorDirection = state.style['indicatorDirection'];
|
||||
shape.indicatorImage = state.view.graph.getIndicatorImage(state);
|
||||
this.postConfigureShape(state);
|
||||
}
|
||||
|
|
@ -338,11 +311,11 @@ class mxCellRenderer {
|
|||
// postConfigureShape(state: mxCellState): void;
|
||||
postConfigureShape(state: mxCellState) {
|
||||
if (state.shape != null) {
|
||||
this.resolveColor(state, 'indicatorGradientColor', STYLE_GRADIENTCOLOR);
|
||||
this.resolveColor(state, 'indicatorColor', STYLE_FILLCOLOR);
|
||||
this.resolveColor(state, 'gradient', STYLE_GRADIENTCOLOR);
|
||||
this.resolveColor(state, 'stroke', STYLE_STROKECOLOR);
|
||||
this.resolveColor(state, 'fill', STYLE_FILLCOLOR);
|
||||
this.resolveColor(state, 'indicatorGradientColor', 'gradientColor');
|
||||
this.resolveColor(state, 'indicatorColor', 'fillColor');
|
||||
this.resolveColor(state, 'gradient', 'gradientColor');
|
||||
this.resolveColor(state, 'stroke', 'strokeColor');
|
||||
this.resolveColor(state, 'fill', 'fillColor');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -358,10 +331,10 @@ class mxCellRenderer {
|
|||
if (state.style != null) {
|
||||
const values = ['inherit', 'swimlane', 'indicated'];
|
||||
const styles = [
|
||||
STYLE_FILLCOLOR,
|
||||
STYLE_STROKECOLOR,
|
||||
STYLE_GRADIENTCOLOR,
|
||||
STYLE_FONTCOLOR,
|
||||
'fillColor',
|
||||
'strokeColor',
|
||||
'gradientColor',
|
||||
'fontColor',
|
||||
];
|
||||
|
||||
for (let i = 0; i < styles.length; i += 1) {
|
||||
|
|
@ -381,7 +354,7 @@ class mxCellRenderer {
|
|||
*/
|
||||
// resolveColor(state: mxCellState, field: string, key: string): void;
|
||||
resolveColor(state: mxCellState, field: string, key: string) {
|
||||
const shape = key === STYLE_FONTCOLOR ? state.text : state.shape;
|
||||
const shape = key === 'fontColor' ? state.text : state.shape;
|
||||
|
||||
if (shape != null) {
|
||||
const { graph } = state.view;
|
||||
|
|
@ -391,18 +364,18 @@ class mxCellRenderer {
|
|||
|
||||
if (value === 'inherit') {
|
||||
// @ts-ignore
|
||||
referenced = graph.model.getParent(state.cell);
|
||||
referenced = state.cell.getParent();
|
||||
} else if (value === 'swimlane') {
|
||||
// @ts-ignore
|
||||
shape[field] =
|
||||
key === STYLE_STROKECOLOR || key === STYLE_FONTCOLOR
|
||||
key === 'strokeColor' || key === 'fontColor'
|
||||
? '#000000'
|
||||
: '#ffffff';
|
||||
|
||||
// @ts-ignore
|
||||
if (graph.model.getTerminal(state.cell, false) != null) {
|
||||
if (state.cell.getTerminal(false) != null) {
|
||||
// @ts-ignore
|
||||
referenced = graph.model.getTerminal(state.cell, false);
|
||||
referenced = state.cell.getTerminal(false);
|
||||
} else {
|
||||
referenced = state.cell;
|
||||
}
|
||||
|
|
@ -413,19 +386,19 @@ class mxCellRenderer {
|
|||
// @ts-ignore
|
||||
shape[field] = state.shape.indicatorColor;
|
||||
} else if (
|
||||
key !== STYLE_FILLCOLOR &&
|
||||
value === STYLE_FILLCOLOR &&
|
||||
key !== 'fillColor' &&
|
||||
value === 'fillColor' &&
|
||||
state.shape != null
|
||||
) {
|
||||
// @ts-ignore
|
||||
shape[field] = state.style[STYLE_FILLCOLOR];
|
||||
shape[field] = state.style.fillColor;
|
||||
} else if (
|
||||
key !== STYLE_STROKECOLOR &&
|
||||
value === STYLE_STROKECOLOR &&
|
||||
key !== 'strokeColor' &&
|
||||
value === 'strokeColor' &&
|
||||
state.shape != null
|
||||
) {
|
||||
// @ts-ignore
|
||||
shape[field] = state.style[STYLE_STROKECOLOR];
|
||||
shape[field] = state.style.strokeColor;
|
||||
}
|
||||
|
||||
if (referenced != null) {
|
||||
|
|
@ -434,7 +407,7 @@ class mxCellRenderer {
|
|||
shape[field] = null;
|
||||
|
||||
if (rstate != null) {
|
||||
const rshape = key === STYLE_FONTCOLOR ? rstate.text : rstate.shape;
|
||||
const rshape = key === 'fontColor' ? rstate.text : rstate.shape;
|
||||
|
||||
if (rshape != null && field !== 'indicatorColor') {
|
||||
// @ts-ignore
|
||||
|
|
@ -997,7 +970,7 @@ class mxCellRenderer {
|
|||
state.view.graph.isHtmlLabel(state.cell) ||
|
||||
(value != null && isNode(value));
|
||||
const dialect = isForceHtml ? DIALECT_STRICTHTML : state.view.graph.dialect;
|
||||
const overflow = state.style[STYLE_OVERFLOW] || 'visible';
|
||||
const overflow = state.style.overflow || 'visible';
|
||||
|
||||
if (
|
||||
state.text != null &&
|
||||
|
|
@ -1043,7 +1016,7 @@ class mxCellRenderer {
|
|||
|
||||
const bounds = this.getLabelBounds(state);
|
||||
const nextScale = this.getTextScale(state);
|
||||
this.resolveColor(state, 'color', STYLE_FONTCOLOR);
|
||||
this.resolveColor(state, 'color', 'fontColor');
|
||||
|
||||
if (
|
||||
forced ||
|
||||
|
|
@ -1110,22 +1083,22 @@ class mxCellRenderer {
|
|||
}
|
||||
|
||||
return (
|
||||
check('fontStyle', STYLE_FONTSTYLE, DEFAULT_FONTSTYLE) ||
|
||||
check('family', STYLE_FONTFAMILY, DEFAULT_FONTFAMILY) ||
|
||||
check('size', STYLE_FONTSIZE, DEFAULT_FONTSIZE) ||
|
||||
check('color', STYLE_FONTCOLOR, 'black') ||
|
||||
check('align', STYLE_ALIGN, '') ||
|
||||
check('valign', STYLE_VERTICAL_ALIGN, '') ||
|
||||
check('spacing', STYLE_SPACING, 2) ||
|
||||
check('spacingTop', STYLE_SPACING_TOP, 0) ||
|
||||
check('spacingRight', STYLE_SPACING_RIGHT, 0) ||
|
||||
check('spacingBottom', STYLE_SPACING_BOTTOM, 0) ||
|
||||
check('spacingLeft', STYLE_SPACING_LEFT, 0) ||
|
||||
check('horizontal', STYLE_HORIZONTAL, true) ||
|
||||
check('background', STYLE_LABEL_BACKGROUNDCOLOR, null) ||
|
||||
check('border', STYLE_LABEL_BORDERCOLOR, null) ||
|
||||
check('opacity', STYLE_TEXT_OPACITY, 100) ||
|
||||
check('textDirection', STYLE_TEXT_DIRECTION, DEFAULT_TEXT_DIRECTION)
|
||||
check('fontStyle', 'fontStyle', DEFAULT_FONTSTYLE) ||
|
||||
check('family', 'fontFamily', DEFAULT_FONTFAMILY) ||
|
||||
check('size', 'fontSize', DEFAULT_FONTSIZE) ||
|
||||
check('color', 'fontColor', 'black') ||
|
||||
check('align', 'align', '') ||
|
||||
check('valign', 'verticalAlign', '') ||
|
||||
check('spacing', 'spacing', 2) ||
|
||||
check('spacingTop', 'spacingTop', 0) ||
|
||||
check('spacingRight', 'spacingRight', 0) ||
|
||||
check('spacingBottom', 'spacingBottom', 0) ||
|
||||
check('spacingLeft', 'spacingLeft', 0) ||
|
||||
check('horizontal', 'horizontal', true) ||
|
||||
check('background', 'labelBackgroundColor', null) ||
|
||||
check('border', 'labelBorderColor', null) ||
|
||||
check('opacity', 'textOpacity', 100) ||
|
||||
check('textDirection', 'textDirection', DEFAULT_TEXT_DIRECTION)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1220,12 +1193,12 @@ class mxCellRenderer {
|
|||
if (state.shape != null) {
|
||||
const hpos = mxUtils.getValue(
|
||||
state.style,
|
||||
STYLE_LABEL_POSITION,
|
||||
'labelPosition',
|
||||
ALIGN_CENTER
|
||||
);
|
||||
const vpos = mxUtils.getValue(
|
||||
state.style,
|
||||
STYLE_VERTICAL_LABEL_POSITION,
|
||||
'verticalLabelPosition',
|
||||
ALIGN_MIDDLE
|
||||
);
|
||||
|
||||
|
|
@ -1235,7 +1208,7 @@ class mxCellRenderer {
|
|||
}
|
||||
|
||||
// Label width style overrides actual label width
|
||||
const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
|
||||
const lw = mxUtils.getValue(state.style, 'labelWidth', null);
|
||||
|
||||
if (lw != null) {
|
||||
bounds.width = parseFloat(lw) * scale;
|
||||
|
|
@ -1267,8 +1240,8 @@ class mxCellRenderer {
|
|||
|
||||
if (
|
||||
!this.legacySpacing ||
|
||||
(state.style[STYLE_OVERFLOW] !== 'fill' &&
|
||||
state.style[STYLE_OVERFLOW] !== 'width')
|
||||
(state.style.overflow !== 'fill' &&
|
||||
state.style.overflow !== 'width')
|
||||
) {
|
||||
const s = state.view.scale;
|
||||
// @ts-ignore
|
||||
|
|
@ -1278,15 +1251,15 @@ class mxCellRenderer {
|
|||
|
||||
const hpos = mxUtils.getValue(
|
||||
state.style,
|
||||
STYLE_LABEL_POSITION,
|
||||
'labelPosition',
|
||||
ALIGN_CENTER
|
||||
);
|
||||
const vpos = mxUtils.getValue(
|
||||
state.style,
|
||||
STYLE_VERTICAL_LABEL_POSITION,
|
||||
'verticalLabelPosition',
|
||||
ALIGN_MIDDLE
|
||||
);
|
||||
const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
|
||||
const lw = mxUtils.getValue(state.style, 'labelWidth', null);
|
||||
|
||||
bounds.width = Math.max(
|
||||
0,
|
||||
|
|
@ -1314,7 +1287,7 @@ class mxCellRenderer {
|
|||
theta !== 0 &&
|
||||
state != null &&
|
||||
// @ts-ignore
|
||||
state.view.graph.model.isVertex(state.cell)
|
||||
state.cell.isVertex()
|
||||
) {
|
||||
const cx = state.getCenterX();
|
||||
const cy = state.getCenterY();
|
||||
|
|
@ -1349,7 +1322,7 @@ class mxCellRenderer {
|
|||
|
||||
if (state.overlays != null) {
|
||||
const rot = mxUtils.mod(
|
||||
mxUtils.getValue(state.style, STYLE_ROTATION, 0),
|
||||
mxUtils.getValue(state.style, 'rotation', 0),
|
||||
90
|
||||
);
|
||||
const rad = mxUtils.toRadians(rot);
|
||||
|
|
@ -1410,7 +1383,7 @@ class mxCellRenderer {
|
|||
const bounds = this.getControlBounds(state, image.width, image.height);
|
||||
|
||||
const r = this.legacyControlPosition
|
||||
? mxUtils.getValue(state.style, STYLE_ROTATION, 0)
|
||||
? mxUtils.getValue(state.style, 'rotation', 0)
|
||||
: // @ts-ignore
|
||||
state.shape.getTextRotation();
|
||||
const s = state.view.scale;
|
||||
|
|
@ -1457,7 +1430,7 @@ class mxCellRenderer {
|
|||
let rot = state.shape.getShapeRotation();
|
||||
|
||||
if (this.legacyControlPosition) {
|
||||
rot = mxUtils.getValue(state.style, STYLE_ROTATION, 0);
|
||||
rot = mxUtils.getValue(state.style, 'rotation', 0);
|
||||
} else if (state.shape.isPaintBoundsInverted()) {
|
||||
const t = (state.width - state.height) / 2;
|
||||
cx += t;
|
||||
|
|
@ -1655,8 +1628,6 @@ class mxCellRenderer {
|
|||
force: boolean = false,
|
||||
rendering: boolean = true
|
||||
): boolean {
|
||||
const model = <mxGraphModel>state.view.graph.model;
|
||||
|
||||
let shapeChanged = false;
|
||||
|
||||
// Forces creation of new shape if shape style has changed
|
||||
|
|
@ -1664,7 +1635,7 @@ class mxCellRenderer {
|
|||
state.shape != null &&
|
||||
state.shape.style != null &&
|
||||
state.style != null &&
|
||||
state.shape.style[STYLE_SHAPE] !== state.style[STYLE_SHAPE]
|
||||
state.shape.style.shape !== state.style.shape
|
||||
) {
|
||||
state.shape.destroy();
|
||||
state.shape = null;
|
||||
|
|
|
|||
|
|
@ -55,62 +55,6 @@ import {
|
|||
PAGE_FORMAT_A4_PORTRAIT,
|
||||
SHAPE_LABEL,
|
||||
SHAPE_SWIMLANE,
|
||||
STYLE_ALIGN,
|
||||
STYLE_ANCHOR_POINT_DIRECTION,
|
||||
STYLE_ASPECT,
|
||||
STYLE_AUTOSIZE,
|
||||
STYLE_BENDABLE,
|
||||
STYLE_CLONEABLE,
|
||||
STYLE_DELETABLE,
|
||||
STYLE_DIRECTION,
|
||||
STYLE_EDITABLE,
|
||||
STYLE_ENTRY_DX,
|
||||
STYLE_ENTRY_DY,
|
||||
STYLE_ENTRY_PERIMETER,
|
||||
STYLE_ENTRY_X,
|
||||
STYLE_ENTRY_Y,
|
||||
STYLE_EXIT_DX,
|
||||
STYLE_EXIT_DY,
|
||||
STYLE_EXIT_PERIMETER,
|
||||
STYLE_EXIT_X,
|
||||
STYLE_EXIT_Y,
|
||||
STYLE_FILLCOLOR,
|
||||
STYLE_FLIPH,
|
||||
STYLE_FLIPV,
|
||||
STYLE_FOLDABLE,
|
||||
STYLE_FONTFAMILY,
|
||||
STYLE_FONTSIZE,
|
||||
STYLE_FONTSTYLE,
|
||||
STYLE_HORIZONTAL,
|
||||
STYLE_IMAGE,
|
||||
STYLE_IMAGE_HEIGHT,
|
||||
STYLE_IMAGE_WIDTH,
|
||||
STYLE_INDICATOR_COLOR,
|
||||
STYLE_INDICATOR_GRADIENTCOLOR,
|
||||
STYLE_INDICATOR_IMAGE,
|
||||
STYLE_INDICATOR_SHAPE,
|
||||
STYLE_MOVABLE,
|
||||
STYLE_NOLABEL,
|
||||
STYLE_ORTHOGONAL,
|
||||
STYLE_OVERFLOW,
|
||||
STYLE_POINTER_EVENTS,
|
||||
STYLE_RESIZABLE,
|
||||
STYLE_RESIZE_HEIGHT,
|
||||
STYLE_RESIZE_WIDTH,
|
||||
STYLE_ROTATABLE,
|
||||
STYLE_ROTATION,
|
||||
STYLE_SHAPE,
|
||||
STYLE_SOURCE_PORT,
|
||||
STYLE_SPACING,
|
||||
STYLE_SPACING_BOTTOM,
|
||||
STYLE_SPACING_LEFT,
|
||||
STYLE_SPACING_RIGHT,
|
||||
STYLE_SPACING_TOP,
|
||||
STYLE_STARTSIZE,
|
||||
STYLE_STROKECOLOR,
|
||||
STYLE_TARGET_PORT,
|
||||
STYLE_VERTICAL_ALIGN,
|
||||
STYLE_WHITE_SPACE,
|
||||
} from '../../util/mxConstants';
|
||||
import mxMultiplicity from '../connection/mxMultiplicity';
|
||||
|
||||
|
|
@ -1069,10 +1013,10 @@ class mxGraph extends mxEventSource {
|
|||
/**
|
||||
* The attribute used to find the color for the indicator if the indicator
|
||||
* color is set to 'swimlane'.
|
||||
* @default {@link mxConstants.STYLE_FILLCOLOR}
|
||||
* @default {@link 'fillColor'}
|
||||
*/
|
||||
// swimlaneIndicatorColorAttribute: string;
|
||||
swimlaneIndicatorColorAttribute: string = STYLE_FILLCOLOR;
|
||||
swimlaneIndicatorColorAttribute: string = 'fillColor';
|
||||
|
||||
/**
|
||||
* Holds the list of image bundles.
|
||||
|
|
@ -2708,11 +2652,11 @@ class mxGraph extends mxEventSource {
|
|||
// postProcessCellStyle(style: StyleMap): StyleMap;
|
||||
postProcessCellStyle(style: any): any {
|
||||
if (style != null) {
|
||||
const key = style[STYLE_IMAGE];
|
||||
const key = style.image;
|
||||
let image = this.getImageFromBundles(key);
|
||||
|
||||
if (image != null) {
|
||||
style[STYLE_IMAGE] = image;
|
||||
style.image = image;
|
||||
} else {
|
||||
image = key;
|
||||
}
|
||||
|
|
@ -2737,7 +2681,7 @@ class mxGraph extends mxEventSource {
|
|||
}
|
||||
}
|
||||
|
||||
style[STYLE_IMAGE] = image;
|
||||
style.image = image;
|
||||
}
|
||||
}
|
||||
return style;
|
||||
|
|
@ -2791,7 +2735,7 @@ class mxGraph extends mxEventSource {
|
|||
* Toggles the boolean value for the given key in the style of the given cells
|
||||
* and returns the new value as 0 or 1. If no cells are specified, then the
|
||||
* selection cells are used. For example, this can be used to toggle
|
||||
* {@link mxConstants.STYLE_ROUNDED} or any other style with a boolean value.
|
||||
* {@link 'rounded'} or any other style with a boolean value.
|
||||
*
|
||||
* Parameter:
|
||||
*
|
||||
|
|
@ -2996,7 +2940,7 @@ class mxGraph extends mxEventSource {
|
|||
* transaction is in progress. Returns the edge that was flipped.
|
||||
*
|
||||
* Here is an example that overrides this implementation to invert the
|
||||
* value of {@link mxConstants.STYLE_ELBOW} without removing any existing styles.
|
||||
* value of {@link 'elbow'} without removing any existing styles.
|
||||
*
|
||||
* ```javascript
|
||||
* graph.flipEdge = function(edge)
|
||||
|
|
@ -3004,11 +2948,11 @@ class mxGraph extends mxEventSource {
|
|||
* if (edge != null)
|
||||
* {
|
||||
* var style = this.getCurrentCellStyle(edge);
|
||||
* var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,
|
||||
* var elbow = mxUtils.getValue(style, 'elbow',
|
||||
* mxConstants.ELBOW_HORIZONTAL);
|
||||
* var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
|
||||
* mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;
|
||||
* this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);
|
||||
* this.setCellStyles('elbow', value, [edge]);
|
||||
* }
|
||||
* };
|
||||
* ```
|
||||
|
|
@ -4655,7 +4599,7 @@ class mxGraph extends mxEventSource {
|
|||
if (tmp != null) {
|
||||
bounds = <mxGeometry>tmp;
|
||||
|
||||
const startSize = mxUtils.getValue(style, STYLE_STARTSIZE);
|
||||
const startSize = mxUtils.getValue(style, 'startSize');
|
||||
|
||||
if (startSize > 0) {
|
||||
bounds.height = Math.max(bounds.height, startSize);
|
||||
|
|
@ -4675,7 +4619,7 @@ class mxGraph extends mxEventSource {
|
|||
geo.alternateBounds.x = geo.x;
|
||||
geo.alternateBounds.y = geo.y;
|
||||
|
||||
const alpha = mxUtils.toRadians(style[STYLE_ROTATION] || 0);
|
||||
const alpha = mxUtils.toRadians(style.rotation || 0);
|
||||
|
||||
if (alpha !== 0) {
|
||||
const dx = geo.alternateBounds.getCenterX() - geo.getCenterX();
|
||||
|
|
@ -4786,10 +4730,10 @@ class mxGraph extends mxEventSource {
|
|||
cellStyle = '';
|
||||
}
|
||||
|
||||
if (mxUtils.getValue(style, STYLE_HORIZONTAL, true)) {
|
||||
if (mxUtils.getValue(style, 'horizontal', true)) {
|
||||
cellStyle = mxUtils.setStyle(
|
||||
cellStyle,
|
||||
STYLE_STARTSIZE,
|
||||
'startSize',
|
||||
size.height + 8
|
||||
);
|
||||
|
||||
|
|
@ -4801,7 +4745,7 @@ class mxGraph extends mxEventSource {
|
|||
} else {
|
||||
cellStyle = mxUtils.setStyle(
|
||||
cellStyle,
|
||||
STYLE_STARTSIZE,
|
||||
'startSize',
|
||||
size.width + 8
|
||||
);
|
||||
|
||||
|
|
@ -4815,7 +4759,7 @@ class mxGraph extends mxEventSource {
|
|||
this.getModel().setStyle(cell, cellStyle);
|
||||
} else {
|
||||
const state = this.getView().createState(cell);
|
||||
const align = state.style[STYLE_ALIGN] || ALIGN_CENTER;
|
||||
const align = state.style.align || ALIGN_CENTER;
|
||||
|
||||
if (align === ALIGN_RIGHT) {
|
||||
geo.x += geo.width - size.width;
|
||||
|
|
@ -4894,34 +4838,34 @@ class mxGraph extends mxEventSource {
|
|||
const { style } = state;
|
||||
|
||||
if (!cell.isEdge()) {
|
||||
const fontSize = style[STYLE_FONTSIZE] || DEFAULT_FONTSIZE;
|
||||
const fontSize = style.fontSize || DEFAULT_FONTSIZE;
|
||||
let dx = 0;
|
||||
let dy = 0;
|
||||
|
||||
// Adds dimension of image if shape is a label
|
||||
if (this.getImage(state) != null || style[STYLE_IMAGE] != null) {
|
||||
if (style[STYLE_SHAPE] === SHAPE_LABEL) {
|
||||
if (style[STYLE_VERTICAL_ALIGN] === ALIGN_MIDDLE) {
|
||||
if (this.getImage(state) != null || style.image != null) {
|
||||
if (style.shape === SHAPE_LABEL) {
|
||||
if (style.verticalAlign === ALIGN_MIDDLE) {
|
||||
dx +=
|
||||
parseFloat(style[STYLE_IMAGE_WIDTH]) || new mxLabel().imageSize;
|
||||
parseFloat(style.imageWidth) || new mxLabel().imageSize;
|
||||
}
|
||||
|
||||
if (style[STYLE_ALIGN] !== ALIGN_CENTER) {
|
||||
if (style.align !== ALIGN_CENTER) {
|
||||
dy +=
|
||||
parseFloat(style[STYLE_IMAGE_HEIGHT]) ||
|
||||
parseFloat(style.imageHeight) ||
|
||||
new mxLabel().imageSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adds spacings
|
||||
dx += 2 * (style[STYLE_SPACING] || 0);
|
||||
dx += style[STYLE_SPACING_LEFT] || 0;
|
||||
dx += style[STYLE_SPACING_RIGHT] || 0;
|
||||
dx += 2 * (style.spacing || 0);
|
||||
dx += style.spacingLeft || 0;
|
||||
dx += style.spacingRight || 0;
|
||||
|
||||
dy += 2 * (style[STYLE_SPACING] || 0);
|
||||
dy += style[STYLE_SPACING_TOP] || 0;
|
||||
dy += style[STYLE_SPACING_BOTTOM] || 0;
|
||||
dy += 2 * (style.spacing || 0);
|
||||
dy += style.spacingTop || 0;
|
||||
dy += style.spacingBottom || 0;
|
||||
|
||||
// Add spacing for collapse/expand icon
|
||||
// LATER: Check alignment and use constants
|
||||
|
|
@ -4945,14 +4889,14 @@ class mxGraph extends mxEventSource {
|
|||
const size = mxUtils.getSizeForString(
|
||||
value,
|
||||
fontSize,
|
||||
style[STYLE_FONTFAMILY],
|
||||
style.fontFamily,
|
||||
textWidth,
|
||||
style[STYLE_FONTSTYLE]
|
||||
style.fontStyle
|
||||
);
|
||||
let width = size.width + dx;
|
||||
let height = size.height + dy;
|
||||
|
||||
if (!mxUtils.getValue(style, STYLE_HORIZONTAL, true)) {
|
||||
if (!mxUtils.getValue(style, 'horizontal', true)) {
|
||||
const tmp = height;
|
||||
height = width;
|
||||
width = tmp;
|
||||
|
|
@ -5237,17 +5181,17 @@ class mxGraph extends mxEventSource {
|
|||
const w = geo.width;
|
||||
const h = geo.height;
|
||||
|
||||
geo.scale(dx, dy, style[STYLE_ASPECT] === 'fixed');
|
||||
geo.scale(dx, dy, style.aspect === 'fixed');
|
||||
|
||||
if (style[STYLE_RESIZE_WIDTH] == '1') {
|
||||
if (style.resizeWidth == '1') {
|
||||
geo.width = w * dx;
|
||||
} else if (style[STYLE_RESIZE_WIDTH] == '0') {
|
||||
} else if (style.resizeWidth == '0') {
|
||||
geo.width = w;
|
||||
}
|
||||
|
||||
if (style[STYLE_RESIZE_HEIGHT] == '1') {
|
||||
if (style.resizeHeight == '1') {
|
||||
geo.height = h * dy;
|
||||
} else if (style[STYLE_RESIZE_HEIGHT] == '0') {
|
||||
} else if (style.resizeHeight == '0') {
|
||||
geo.height = h;
|
||||
}
|
||||
|
||||
|
|
@ -5576,7 +5520,7 @@ class mxGraph extends mxEventSource {
|
|||
|
||||
if (parent.isVertex()) {
|
||||
const style = this.getCurrentCellStyle(parent);
|
||||
angle = mxUtils.getValue(style, STYLE_ROTATION, 0);
|
||||
angle = mxUtils.getValue(style, 'rotation', 0);
|
||||
}
|
||||
|
||||
if (angle !== 0) {
|
||||
|
|
@ -5628,11 +5572,11 @@ class mxGraph extends mxEventSource {
|
|||
const style = this.getCurrentCellStyle(parent);
|
||||
const dir = mxUtils.getValue(
|
||||
style,
|
||||
STYLE_DIRECTION,
|
||||
'direction',
|
||||
DIRECTION_EAST
|
||||
);
|
||||
const flipH = mxUtils.getValue(style, STYLE_FLIPH, 0) == 1;
|
||||
const flipV = mxUtils.getValue(style, STYLE_FLIPV, 0) == 1;
|
||||
const flipH = mxUtils.getValue(style, 'flipH', 0) == 1;
|
||||
const flipV = mxUtils.getValue(style, 'flipV', 0) == 1;
|
||||
|
||||
if (dir === DIRECTION_SOUTH || dir === DIRECTION_NORTH) {
|
||||
const tmp = size.width;
|
||||
|
|
@ -5886,7 +5830,7 @@ class mxGraph extends mxEventSource {
|
|||
const bounds = <mxRectangle>(
|
||||
this.getView().getPerimeterBounds(terminalState)
|
||||
);
|
||||
const direction = terminalState.style[STYLE_DIRECTION];
|
||||
const direction = terminalState.style.direction;
|
||||
|
||||
if (direction === DIRECTION_NORTH || direction === DIRECTION_SOUTH) {
|
||||
bounds.x += bounds.width / 2 - bounds.height / 2;
|
||||
|
|
@ -5913,8 +5857,8 @@ class mxGraph extends mxEventSource {
|
|||
|
||||
// LATER: Add flipping support for image shapes
|
||||
if ((<mxCell>terminalState.cell).isVertex()) {
|
||||
let flipH = terminalState.style[STYLE_FLIPH];
|
||||
let flipV = terminalState.style[STYLE_FLIPV];
|
||||
let flipH = terminalState.style.flipH;
|
||||
let flipV = terminalState.style.flipV;
|
||||
|
||||
// Legacy support for stencilFlipH/V
|
||||
if (
|
||||
|
|
@ -6004,11 +5948,11 @@ class mxGraph extends mxEventSource {
|
|||
): mxConnectionConstraint {
|
||||
let point = null;
|
||||
// @ts-ignore
|
||||
const x = <string>edge.style[source ? STYLE_EXIT_X : STYLE_ENTRY_X];
|
||||
const x = <string>edge.style[source ? 'exitX' : 'entryX'];
|
||||
|
||||
if (x != null) {
|
||||
// @ts-ignore
|
||||
const y = <string>edge.style[source ? STYLE_EXIT_Y : STYLE_ENTRY_Y];
|
||||
const y = <string>edge.style[source ? 'exitY' : 'entryY'];
|
||||
|
||||
if (y != null) {
|
||||
point = new mxPoint(parseFloat(x), parseFloat(y));
|
||||
|
|
@ -6022,18 +5966,18 @@ class mxGraph extends mxEventSource {
|
|||
if (point != null) {
|
||||
perimeter = mxUtils.getValue(
|
||||
edge.style,
|
||||
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
|
||||
source ? 'exitPerimeter' : 'entryPerimeter',
|
||||
true
|
||||
);
|
||||
|
||||
// Add entry/exit offset
|
||||
// @ts-ignore
|
||||
dx = parseFloat(
|
||||
<string>edge.style[source ? STYLE_EXIT_DX : STYLE_ENTRY_DX]
|
||||
<string>edge.style[source ? 'exitDx' : 'entryDx']
|
||||
);
|
||||
// @ts-ignore
|
||||
dy = parseFloat(
|
||||
<string>edge.style[source ? STYLE_EXIT_DY : STYLE_ENTRY_DY]
|
||||
<string>edge.style[source ? 'exitDy' : 'entryDy']
|
||||
);
|
||||
|
||||
dx = Number.isFinite(dx) ? dx : 0;
|
||||
|
|
@ -6066,41 +6010,41 @@ class mxGraph extends mxEventSource {
|
|||
|
||||
try {
|
||||
if (constraint == null || constraint.point == null) {
|
||||
this.setCellStyles(source ? STYLE_EXIT_X : STYLE_ENTRY_X, null, [
|
||||
this.setCellStyles(source ? 'exitX' : 'entryX', null, [
|
||||
edge,
|
||||
]);
|
||||
this.setCellStyles(source ? STYLE_EXIT_Y : STYLE_ENTRY_Y, null, [
|
||||
this.setCellStyles(source ? 'exitY' : 'entryY', null, [
|
||||
edge,
|
||||
]);
|
||||
this.setCellStyles(source ? STYLE_EXIT_DX : STYLE_ENTRY_DX, null, [
|
||||
this.setCellStyles(source ? 'exitDx' : 'entryDx', null, [
|
||||
edge,
|
||||
]);
|
||||
this.setCellStyles(source ? STYLE_EXIT_DY : STYLE_ENTRY_DY, null, [
|
||||
this.setCellStyles(source ? 'exitDy' : 'entryDy', null, [
|
||||
edge,
|
||||
]);
|
||||
this.setCellStyles(
|
||||
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
|
||||
source ? 'exitPerimeter' : 'entryPerimeter',
|
||||
null,
|
||||
[edge]
|
||||
);
|
||||
} else if (constraint.point != null) {
|
||||
this.setCellStyles(
|
||||
source ? STYLE_EXIT_X : STYLE_ENTRY_X,
|
||||
source ? 'exitX' : 'entryX',
|
||||
constraint.point.x,
|
||||
[edge]
|
||||
);
|
||||
this.setCellStyles(
|
||||
source ? STYLE_EXIT_Y : STYLE_ENTRY_Y,
|
||||
source ? 'exitY' : 'entryY',
|
||||
constraint.point.y,
|
||||
[edge]
|
||||
);
|
||||
this.setCellStyles(
|
||||
source ? STYLE_EXIT_DX : STYLE_ENTRY_DX,
|
||||
source ? 'exitDx' : 'entryDx',
|
||||
constraint.dx,
|
||||
[edge]
|
||||
);
|
||||
this.setCellStyles(
|
||||
source ? STYLE_EXIT_DY : STYLE_ENTRY_DY,
|
||||
source ? 'exitDy' : 'entryDy',
|
||||
constraint.dy,
|
||||
[edge]
|
||||
);
|
||||
|
|
@ -6108,13 +6052,13 @@ class mxGraph extends mxEventSource {
|
|||
// Only writes 0 since 1 is default
|
||||
if (!constraint.perimeter) {
|
||||
this.setCellStyles(
|
||||
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
|
||||
source ? 'exitPerimeter' : 'entryPerimeter',
|
||||
'0',
|
||||
[edge]
|
||||
);
|
||||
} else {
|
||||
this.setCellStyles(
|
||||
source ? STYLE_EXIT_PERIMETER : STYLE_ENTRY_PERIMETER,
|
||||
source ? 'exitPerimeter' : 'entryPerimeter',
|
||||
null,
|
||||
[edge]
|
||||
);
|
||||
|
|
@ -6145,13 +6089,13 @@ class mxGraph extends mxEventSource {
|
|||
if (vertex != null && constraint.point != null) {
|
||||
const bounds = <mxRectangle>this.getView().getPerimeterBounds(vertex);
|
||||
const cx = new mxPoint(bounds.getCenterX(), bounds.getCenterY());
|
||||
const direction = vertex.style[STYLE_DIRECTION];
|
||||
const direction = vertex.style.direction;
|
||||
let r1 = 0;
|
||||
|
||||
// Bounds need to be rotated by 90 degrees for further computation
|
||||
if (
|
||||
direction != null &&
|
||||
mxUtils.getValue(vertex.style, STYLE_ANCHOR_POINT_DIRECTION, 1) == 1
|
||||
mxUtils.getValue(vertex.style, 'anchorPointDirection', 1) == 1
|
||||
) {
|
||||
if (direction === DIRECTION_NORTH) {
|
||||
r1 += 270;
|
||||
|
|
@ -6178,7 +6122,7 @@ class mxGraph extends mxEventSource {
|
|||
);
|
||||
|
||||
// Rotation for direction before projection on perimeter
|
||||
let r2 = vertex.style[STYLE_ROTATION] || 0;
|
||||
let r2 = vertex.style.rotation || 0;
|
||||
|
||||
if (constraint.perimeter) {
|
||||
if (r1 !== 0) {
|
||||
|
|
@ -6202,8 +6146,8 @@ class mxGraph extends mxEventSource {
|
|||
r2 += r1;
|
||||
|
||||
if ((<mxCell>vertex.cell).isVertex()) {
|
||||
let flipH = vertex.style[STYLE_FLIPH] == 1;
|
||||
let flipV = vertex.style[STYLE_FLIPV] == 1;
|
||||
let flipH = vertex.style.flipH == 1;
|
||||
let flipV = vertex.style.flipV == 1;
|
||||
|
||||
// Legacy support for stencilFlipH/V
|
||||
if (vertex.shape != null && vertex.shape.stencil != null) {
|
||||
|
|
@ -6323,7 +6267,7 @@ class mxGraph extends mxEventSource {
|
|||
}
|
||||
|
||||
// Sets or resets all previous information for connecting to a child port
|
||||
const key = source ? STYLE_SOURCE_PORT : STYLE_TARGET_PORT;
|
||||
const key = source ? 'sourcePort' : 'targetPort';
|
||||
this.setCellStyles(key, id, [edge]);
|
||||
}
|
||||
|
||||
|
|
@ -6814,7 +6758,7 @@ class mxGraph extends mxEventSource {
|
|||
const style = this.getCurrentCellStyle(cell);
|
||||
|
||||
if (bbox != null) {
|
||||
const angle = mxUtils.getValue(style, STYLE_ROTATION, 0);
|
||||
const angle = mxUtils.getValue(style, 'rotation', 0);
|
||||
|
||||
if (angle !== 0) {
|
||||
bbox = mxUtils.getBoundingBox(bbox, angle);
|
||||
|
|
@ -7517,7 +7461,14 @@ class mxGraph extends mxEventSource {
|
|||
*/
|
||||
// isOrthogonal(edge: mxCellState): boolean;
|
||||
isOrthogonal(edge: mxCellState): boolean {
|
||||
const orthogonal = edge.style[STYLE_ORTHOGONAL];
|
||||
/*
|
||||
'orthogonal' defines if the connection points on either end of the edge should
|
||||
be computed so that the edge is vertical or horizontal if possible
|
||||
and if the point is not at a fixed location. Default is false.
|
||||
This also returns true if the edgeStyle of the edge is an elbow or
|
||||
entity.
|
||||
*/
|
||||
const orthogonal = edge.style.orthogonal;
|
||||
|
||||
if (orthogonal != null) {
|
||||
return orthogonal;
|
||||
|
|
@ -8028,7 +7979,7 @@ class mxGraph extends mxEventSource {
|
|||
if (this.labelsVisible && cell != null) {
|
||||
const style = this.getCurrentCellStyle(cell);
|
||||
|
||||
if (!mxUtils.getValue(style, STYLE_NOLABEL, false)) {
|
||||
if (!mxUtils.getValue(style, 'noLabel', false)) {
|
||||
result = this.convertValueToString(cell);
|
||||
}
|
||||
}
|
||||
|
|
@ -8067,7 +8018,7 @@ class mxGraph extends mxEventSource {
|
|||
*
|
||||
* Returns true if no white-space CSS style directive should be used for
|
||||
* displaying the given cells label. This implementation returns true if
|
||||
* {@link mxConstants.STYLE_WHITE_SPACE} in the style of the given cell is 'wrap'.
|
||||
* {@link 'whiteSpace'} in the style of the given cell is 'wrap'.
|
||||
*
|
||||
* This is used as a workaround for IE ignoring the white-space directive
|
||||
* of child elements if the directive appears in a parent element. It
|
||||
|
|
@ -8105,20 +8056,20 @@ class mxGraph extends mxEventSource {
|
|||
*/
|
||||
// isWrapping(cell: mxCell): boolean;
|
||||
isWrapping(cell: mxCell): boolean {
|
||||
return this.getCurrentCellStyle(cell)[STYLE_WHITE_SPACE] === 'wrap';
|
||||
return this.getCurrentCellStyle(cell).whiteSpace === 'wrap';
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the overflow portion of labels should be hidden. If this
|
||||
* returns true then vertex labels will be clipped to the size of the vertices.
|
||||
* This implementation returns true if {@link STYLE_OVERFLOW} in the
|
||||
* This implementation returns true if `overflow` in the
|
||||
* style of the given cell is 'hidden'.
|
||||
*
|
||||
* @param state {@link mxCell} whose label should be clipped.
|
||||
*/
|
||||
// isLabelClipped(cell: mxCell): boolean;
|
||||
isLabelClipped(cell: mxCell): boolean {
|
||||
return this.getCurrentCellStyle(cell)[STYLE_OVERFLOW] === 'hidden';
|
||||
return this.getCurrentCellStyle(cell).overflow === 'hidden';
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -8270,10 +8221,10 @@ class mxGraph extends mxEventSource {
|
|||
const result = new mxRectangle();
|
||||
const style = this.getCurrentCellStyle(swimlane, ignoreState);
|
||||
const size = parseInt(
|
||||
mxUtils.getValue(style, STYLE_STARTSIZE, DEFAULT_STARTSIZE)
|
||||
mxUtils.getValue(style, 'startSize', DEFAULT_STARTSIZE)
|
||||
);
|
||||
|
||||
if (mxUtils.getValue(style, STYLE_HORIZONTAL, true)) {
|
||||
if (mxUtils.getValue(style, 'horizontal', true)) {
|
||||
result.height = size;
|
||||
} else {
|
||||
result.width = size;
|
||||
|
|
@ -8286,10 +8237,10 @@ class mxGraph extends mxEventSource {
|
|||
*/
|
||||
// getSwimlaneDirection(style: string): string;
|
||||
getSwimlaneDirection(style: any): string {
|
||||
const dir = mxUtils.getValue(style, STYLE_DIRECTION, DIRECTION_EAST);
|
||||
const flipH = mxUtils.getValue(style, STYLE_FLIPH, 0) == 1;
|
||||
const flipV = mxUtils.getValue(style, STYLE_FLIPV, 0) == 1;
|
||||
const h = mxUtils.getValue(style, STYLE_HORIZONTAL, true);
|
||||
const dir = mxUtils.getValue(style, 'direction', DIRECTION_EAST);
|
||||
const flipH = mxUtils.getValue(style, 'flipH', 0) == 1;
|
||||
const flipV = mxUtils.getValue(style, 'flipV', 0) == 1;
|
||||
const h = mxUtils.getValue(style, 'horizontal', true);
|
||||
let n = h ? 0 : 3;
|
||||
|
||||
if (dir === DIRECTION_NORTH) {
|
||||
|
|
@ -8334,7 +8285,7 @@ class mxGraph extends mxEventSource {
|
|||
if (this.isSwimlane(swimlane, ignoreState)) {
|
||||
const style = this.getCurrentCellStyle(swimlane, ignoreState);
|
||||
const size = parseInt(
|
||||
mxUtils.getValue(style, STYLE_STARTSIZE, DEFAULT_STARTSIZE)
|
||||
mxUtils.getValue(style, 'startSize', DEFAULT_STARTSIZE)
|
||||
);
|
||||
const dir = this.getSwimlaneDirection(style);
|
||||
|
||||
|
|
@ -8353,7 +8304,7 @@ class mxGraph extends mxEventSource {
|
|||
|
||||
/**
|
||||
* Returns the image URL for the given cell state. This implementation
|
||||
* returns the value stored under {@link mxConstants.STYLE_IMAGE} in the cell
|
||||
* returns the value stored under {@link 'image'} in the cell
|
||||
* style.
|
||||
*
|
||||
* @param state {@link mxCellState} whose image URL should be returned.
|
||||
|
|
@ -8361,7 +8312,7 @@ class mxGraph extends mxEventSource {
|
|||
// getImage(state: mxCellState): string;
|
||||
getImage(state: mxCellState): mxImage | null {
|
||||
return state != null && state.style != null
|
||||
? state.style[STYLE_IMAGE]
|
||||
? state.style.image
|
||||
: null;
|
||||
}
|
||||
|
||||
|
|
@ -8374,8 +8325,8 @@ class mxGraph extends mxEventSource {
|
|||
isTransparentState(state: mxCellState): boolean {
|
||||
let result = false;
|
||||
if (state != null) {
|
||||
const stroke = mxUtils.getValue(state.style, STYLE_STROKECOLOR, NONE);
|
||||
const fill = mxUtils.getValue(state.style, STYLE_FILLCOLOR, NONE);
|
||||
const stroke = mxUtils.getValue(state.style, 'strokeColor', NONE);
|
||||
const fill = mxUtils.getValue(state.style, 'fillColor', NONE);
|
||||
result = stroke === NONE && fill === NONE && this.getImage(state) == null;
|
||||
}
|
||||
return result;
|
||||
|
|
@ -8384,7 +8335,7 @@ class mxGraph extends mxEventSource {
|
|||
/**
|
||||
* Returns the vertical alignment for the given cell state. This
|
||||
* implementation returns the value stored under
|
||||
* {@link mxConstants.STYLE_VERTICAL_ALIGN} in the cell style.
|
||||
* {@link mxConstants.'verticalAlign'} in the cell style.
|
||||
*
|
||||
* @param state {@link mxCellState} whose vertical alignment should be
|
||||
* returned.
|
||||
|
|
@ -8392,7 +8343,7 @@ class mxGraph extends mxEventSource {
|
|||
// getVerticalAlign(state: mxCellState): string;
|
||||
getVerticalAlign(state: mxCellState): string | null {
|
||||
return state != null && state.style != null
|
||||
? state.style[STYLE_VERTICAL_ALIGN] || ALIGN_MIDDLE
|
||||
? state.style.verticalAlign || ALIGN_MIDDLE
|
||||
: null;
|
||||
}
|
||||
|
||||
|
|
@ -8407,7 +8358,7 @@ class mxGraph extends mxEventSource {
|
|||
// getIndicatorColor(state: mxCellState): string;
|
||||
getIndicatorColor(state: mxCellState): string | null {
|
||||
return state != null && state.style != null
|
||||
? state.style[STYLE_INDICATOR_COLOR]
|
||||
? state.style.indicatorColor
|
||||
: null;
|
||||
}
|
||||
|
||||
|
|
@ -8422,7 +8373,7 @@ class mxGraph extends mxEventSource {
|
|||
// getIndicatorGradientColor(state: mxCellState): string;
|
||||
getIndicatorGradientColor(state: mxCellState): string | null {
|
||||
return state != null && state.style != null
|
||||
? state.style[STYLE_INDICATOR_GRADIENTCOLOR]
|
||||
? state.style.gradientColor
|
||||
: null;
|
||||
}
|
||||
|
||||
|
|
@ -8436,7 +8387,7 @@ class mxGraph extends mxEventSource {
|
|||
// getIndicatorShape(state: mxCellState): any;
|
||||
getIndicatorShape(state: mxCellState): string | null {
|
||||
return state != null && state.style != null
|
||||
? state.style[STYLE_INDICATOR_SHAPE]
|
||||
? state.style.indicatorShape
|
||||
: null;
|
||||
}
|
||||
|
||||
|
|
@ -8450,7 +8401,7 @@ class mxGraph extends mxEventSource {
|
|||
// getIndicatorImage(state: mxCellState): any;
|
||||
getIndicatorImage(state: mxCellState): mxImage | null {
|
||||
return state != null && state.style != null
|
||||
? state.style[STYLE_INDICATOR_IMAGE]
|
||||
? state.style.indicatorImage
|
||||
: null;
|
||||
}
|
||||
|
||||
|
|
@ -8488,7 +8439,7 @@ class mxGraph extends mxEventSource {
|
|||
!cell.isEdge()
|
||||
) {
|
||||
return (
|
||||
this.getCurrentCellStyle(cell, ignoreState)[STYLE_SHAPE] ===
|
||||
this.getCurrentCellStyle(cell, ignoreState).shape ===
|
||||
SHAPE_SWIMLANE
|
||||
);
|
||||
}
|
||||
|
|
@ -8646,7 +8597,7 @@ class mxGraph extends mxEventSource {
|
|||
// isCellCloneable(cell: mxCell): boolean;
|
||||
isCellCloneable(cell: mxCell): boolean {
|
||||
const style = this.getCurrentCellStyle(cell);
|
||||
return this.isCellsCloneable() && style[STYLE_CLONEABLE] !== 0;
|
||||
return this.isCellsCloneable() && style.cloneable !== 0;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -8769,14 +8720,14 @@ class mxGraph extends mxEventSource {
|
|||
/**
|
||||
* Returns true if the given cell is moveable. This returns
|
||||
* {@link cellsDeletable} for all given cells if a cells style does not specify
|
||||
* {@link mxConstants.STYLE_DELETABLE} to be 0.
|
||||
* {@link 'deletable'} to be 0.
|
||||
*
|
||||
* @param cell {@link mxCell} whose deletable state should be returned.
|
||||
*/
|
||||
// isCellDeletable(cell: mxCell): boolean;
|
||||
isCellDeletable(cell: mxCell): boolean {
|
||||
const style = this.getCurrentCellStyle(cell);
|
||||
return this.isCellsDeletable() && style[STYLE_DELETABLE] !== 0;
|
||||
return this.isCellsDeletable() && style.deletable !== 0;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -8815,14 +8766,14 @@ class mxGraph extends mxEventSource {
|
|||
|
||||
/**
|
||||
* Returns true if the given cell is rotatable. This returns true for the given
|
||||
* cell if its style does not specify {@link mxConstants.STYLE_ROTATABLE} to be 0.
|
||||
* cell if its style does not specify {@link 'rotatable'} to be 0.
|
||||
*
|
||||
* @param cell {@link mxCell} whose rotatable state should be returned.
|
||||
*/
|
||||
// isCellRotatable(cell: mxCell): boolean;
|
||||
isCellRotatable(cell: mxCell): boolean {
|
||||
const style = this.getCurrentCellStyle(cell);
|
||||
return style[STYLE_ROTATABLE] !== 0;
|
||||
return style.rotatable !== 0;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -8838,7 +8789,7 @@ class mxGraph extends mxEventSource {
|
|||
/**
|
||||
* Returns true if the given cell is moveable. This returns {@link cellsMovable}
|
||||
* for all given cells if {@link isCellLocked} does not return true for the given
|
||||
* cell and its style does not specify {@link mxConstants.STYLE_MOVABLE} to be 0.
|
||||
* cell and its style does not specify {@link 'movable'} to be 0.
|
||||
*
|
||||
* @param cell {@link mxCell} whose movable state should be returned.
|
||||
*/
|
||||
|
|
@ -8849,7 +8800,7 @@ class mxGraph extends mxEventSource {
|
|||
return (
|
||||
this.isCellsMovable() &&
|
||||
!this.isCellLocked(cell) &&
|
||||
style[STYLE_MOVABLE] !== 0
|
||||
style.movable !== 0
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -9170,7 +9121,7 @@ class mxGraph extends mxEventSource {
|
|||
* Returns true if the given cell is resizable. This returns
|
||||
* {@link cellsResizable} for all given cells if {@link isCellLocked} does not return
|
||||
* true for the given cell and its style does not specify
|
||||
* {@link mxConstants.STYLE_RESIZABLE} to be 0.
|
||||
* {@link 'resizable'} to be 0.
|
||||
*
|
||||
* @param cell {@link mxCell} whose resizable state should be returned.
|
||||
*/
|
||||
|
|
@ -9181,7 +9132,7 @@ class mxGraph extends mxEventSource {
|
|||
const r =
|
||||
this.isCellsResizable() &&
|
||||
!this.isCellLocked(cell) &&
|
||||
mxUtils.getValue(style, STYLE_RESIZABLE, '1') != '0';
|
||||
mxUtils.getValue(style, 'resizeable', '1') != '0';
|
||||
// alert(r);
|
||||
return r;
|
||||
}
|
||||
|
|
@ -9235,7 +9186,7 @@ class mxGraph extends mxEventSource {
|
|||
return (
|
||||
this.isCellsBendable() &&
|
||||
!this.isCellLocked(cell) &&
|
||||
style[STYLE_BENDABLE] !== 0
|
||||
style.bendable !== 0
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -9262,7 +9213,7 @@ class mxGraph extends mxEventSource {
|
|||
/**
|
||||
* Returns true if the given cell is editable. This returns {@link cellsEditable} for
|
||||
* all given cells if {@link isCellLocked} does not return true for the given cell
|
||||
* and its style does not specify {@link mxConstants.STYLE_EDITABLE} to be 0.
|
||||
* and its style does not specify {@link 'editable'} to be 0.
|
||||
*
|
||||
* @param cell {@link mxCell} whose editable state should be returned.
|
||||
*/
|
||||
|
|
@ -9273,7 +9224,7 @@ class mxGraph extends mxEventSource {
|
|||
return (
|
||||
this.isCellsEditable() &&
|
||||
!this.isCellLocked(cell) &&
|
||||
style[STYLE_EDITABLE] != 0
|
||||
style.editable != 0
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -9436,7 +9387,7 @@ class mxGraph extends mxEventSource {
|
|||
* Returns true if the size of the given cell should automatically be
|
||||
* updated after a change of the label. This implementation returns
|
||||
* {@link autoSizeCells} or checks if the cell style does specify
|
||||
* {@link mxConstants.STYLE_AUTOSIZE} to be 1.
|
||||
* {@link 'autoSize'} to be 1.
|
||||
*
|
||||
* @param cell {@link mxCell} that should be resized.
|
||||
*/
|
||||
|
|
@ -9444,7 +9395,7 @@ class mxGraph extends mxEventSource {
|
|||
isAutoSizeCell(cell: mxCell) {
|
||||
const style = this.getCurrentCellStyle(cell);
|
||||
|
||||
return this.isAutoSizeCells() || style[STYLE_AUTOSIZE] == 1;
|
||||
return this.isAutoSizeCells() || style.autosize == 1;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -9669,7 +9620,7 @@ class mxGraph extends mxEventSource {
|
|||
// isCellFoldable(cell: mxCell, collapse: boolean): boolean;
|
||||
isCellFoldable(cell: mxCell, collapse: boolean = false): boolean {
|
||||
const style = this.getCurrentCellStyle(cell);
|
||||
return cell.getChildCount() > 0 && style[STYLE_FOLDABLE] != 0;
|
||||
return cell.getChildCount() > 0 && style.foldable != 0;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -9987,7 +9938,7 @@ class mxGraph extends mxEventSource {
|
|||
}
|
||||
} else {
|
||||
const alpha = mxUtils.toRadians(
|
||||
mxUtils.getValue(state.style, STYLE_ROTATION) || 0
|
||||
mxUtils.getValue(state.style, 'rotation') || 0
|
||||
);
|
||||
|
||||
if (alpha != 0) {
|
||||
|
|
@ -10408,7 +10359,7 @@ class mxGraph extends mxEventSource {
|
|||
cell.isVisible() &&
|
||||
(ignoreFn == null || !ignoreFn(state))
|
||||
) {
|
||||
const deg = mxUtils.getValue(state.style, STYLE_ROTATION) || 0;
|
||||
const deg = mxUtils.getValue(state.style, 'rotation') || 0;
|
||||
|
||||
let box: mxCellState | mxRectangle = state; // TODO: CHECK ME!!!! ==========================================================
|
||||
if (deg != 0) {
|
||||
|
|
@ -11140,7 +11091,7 @@ class mxGraph extends mxEventSource {
|
|||
return (
|
||||
state.shape == null ||
|
||||
state.shape.paintBackground !== this.paintBackground ||
|
||||
mxUtils.getValue(state.style, STYLE_POINTER_EVENTS, '1') == '1' ||
|
||||
mxUtils.getValue(state.style, 'pointerEvents', '1') == '1' ||
|
||||
(state.shape.fill != null && state.shape.fill !== NONE)
|
||||
);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -18,25 +18,6 @@ import {
|
|||
ALIGN_MIDDLE,
|
||||
ALIGN_RIGHT,
|
||||
ALIGN_TOP,
|
||||
STYLE_ALIGN,
|
||||
STYLE_EDGE,
|
||||
STYLE_FLIPH,
|
||||
STYLE_FLIPV,
|
||||
STYLE_LABEL_POSITION,
|
||||
STYLE_LABEL_WIDTH,
|
||||
STYLE_LOOP,
|
||||
STYLE_NOEDGESTYLE,
|
||||
STYLE_ORTHOGONAL_LOOP,
|
||||
STYLE_PERIMETER,
|
||||
STYLE_PERIMETER_SPACING,
|
||||
STYLE_ROTATION,
|
||||
STYLE_ROUTING_CENTER_X,
|
||||
STYLE_ROUTING_CENTER_Y,
|
||||
STYLE_SOURCE_PERIMETER_SPACING,
|
||||
STYLE_SOURCE_PORT,
|
||||
STYLE_TARGET_PERIMETER_SPACING,
|
||||
STYLE_TARGET_PORT,
|
||||
STYLE_VERTICAL_LABEL_POSITION,
|
||||
} from '../../util/mxConstants';
|
||||
import mxClient from '../../mxClient';
|
||||
import mxEvent from '../../util/event/mxEvent';
|
||||
|
|
@ -1081,7 +1062,7 @@ class mxGraphView extends mxEventSource {
|
|||
const pState = this.getState(state.cell.getParent());
|
||||
|
||||
if (geo.relative && pState != null && !pState.cell.isEdge()) {
|
||||
const alpha = mxUtils.toRadians(pState.style[STYLE_ROTATION] || '0');
|
||||
const alpha = mxUtils.toRadians(pState.style.rotation || '0');
|
||||
if (alpha !== 0) {
|
||||
const cos = Math.cos(alpha);
|
||||
const sin = Math.sin(alpha);
|
||||
|
|
@ -1146,10 +1127,10 @@ class mxGraphView extends mxEventSource {
|
|||
*/
|
||||
// updateVertexLabelOffset(state: mxCellState): void;
|
||||
updateVertexLabelOffset(state: mxCellState) {
|
||||
const h = mxUtils.getValue(state.style, STYLE_LABEL_POSITION, ALIGN_CENTER);
|
||||
const h = mxUtils.getValue(state.style, 'labelPosition', ALIGN_CENTER);
|
||||
|
||||
if (h === ALIGN_LEFT) {
|
||||
let lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
|
||||
let lw = mxUtils.getValue(state.style, 'labelWidth', null);
|
||||
|
||||
if (lw != null) {
|
||||
lw *= this.scale;
|
||||
|
|
@ -1163,11 +1144,11 @@ class mxGraphView extends mxEventSource {
|
|||
// @ts-ignore
|
||||
state.absoluteOffset.x += state.width;
|
||||
} else if (h === ALIGN_CENTER) {
|
||||
const lw = mxUtils.getValue(state.style, STYLE_LABEL_WIDTH, null);
|
||||
const lw = mxUtils.getValue(state.style, 'labelWidth', null);
|
||||
|
||||
if (lw != null) {
|
||||
// Aligns text block with given width inside the vertex width
|
||||
const align = mxUtils.getValue(state.style, STYLE_ALIGN, ALIGN_CENTER);
|
||||
const align = mxUtils.getValue(state.style, 'align', ALIGN_CENTER);
|
||||
let dx = 0;
|
||||
|
||||
if (align === ALIGN_CENTER) {
|
||||
|
|
@ -1185,7 +1166,7 @@ class mxGraphView extends mxEventSource {
|
|||
|
||||
const v = mxUtils.getValue(
|
||||
state.style,
|
||||
STYLE_VERTICAL_LABEL_POSITION,
|
||||
'verticalLabelPosition',
|
||||
ALIGN_MIDDLE
|
||||
);
|
||||
|
||||
|
|
@ -1481,7 +1462,7 @@ class mxGraphView extends mxEventSource {
|
|||
|
||||
if (
|
||||
(points == null || points.length < 2) &&
|
||||
(!mxUtils.getValue(edge.style, STYLE_ORTHOGONAL_LOOP, false) ||
|
||||
(!mxUtils.getValue(edge.style, 'orthogonalLoop', false) ||
|
||||
((sc == null || sc.point == null) && (tc == null || tc.point == null)))
|
||||
) {
|
||||
return source != null && source === target;
|
||||
|
|
@ -1502,11 +1483,11 @@ class mxGraphView extends mxEventSource {
|
|||
let edgeStyle: any = this.isLoopStyleEnabled(edge, points, source, target)
|
||||
? mxUtils.getValue(
|
||||
edge.style,
|
||||
STYLE_LOOP,
|
||||
'loop',
|
||||
(<mxGraph>this.graph).defaultLoopStyle
|
||||
)
|
||||
: !mxUtils.getValue(edge.style, STYLE_NOEDGESTYLE, false)
|
||||
? edge.style[STYLE_EDGE]
|
||||
: !mxUtils.getValue(edge.style, 'noEdgeStyle', false)
|
||||
? edge.style.edge
|
||||
: null;
|
||||
|
||||
// Converts string values to objects
|
||||
|
|
@ -1593,7 +1574,7 @@ class mxGraphView extends mxEventSource {
|
|||
let next = this.getNextPoint(edge, end, source);
|
||||
|
||||
const orth = (<mxGraph>this.graph).isOrthogonal(edge);
|
||||
const alpha = mxUtils.toRadians(Number(start.style[STYLE_ROTATION] || '0'));
|
||||
const alpha = mxUtils.toRadians(Number(start.style.rotation || '0'));
|
||||
const center = new mxPoint(start.getCenterX(), start.getCenterY());
|
||||
|
||||
if (alpha !== 0) {
|
||||
|
|
@ -1602,10 +1583,10 @@ class mxGraphView extends mxEventSource {
|
|||
next = mxUtils.getRotatedPoint(next, cos, sin, center);
|
||||
}
|
||||
|
||||
let border = parseFloat(edge.style[STYLE_PERIMETER_SPACING] || 0);
|
||||
let border = parseFloat(edge.style.perimeterSpacing || 0);
|
||||
border += parseFloat(
|
||||
edge.style[
|
||||
source ? STYLE_SOURCE_PERIMETER_SPACING : STYLE_TARGET_PERIMETER_SPACING
|
||||
source ? 'sourcePerimeterSpacing' : 'targetPerimeterSpacing'
|
||||
] || 0
|
||||
);
|
||||
let pt = this.getPerimeterPoint(
|
||||
|
|
@ -1638,7 +1619,7 @@ class mxGraphView extends mxEventSource {
|
|||
terminal: mxCellState,
|
||||
source: boolean = false
|
||||
): mxCellState | null {
|
||||
const key = source ? STYLE_SOURCE_PORT : STYLE_TARGET_PORT;
|
||||
const key = source ? 'sourcePort' : 'targetPort';
|
||||
const id = mxUtils.getValue(state.style, key);
|
||||
|
||||
if (id != null) {
|
||||
|
|
@ -1688,8 +1669,8 @@ class mxGraphView extends mxEventSource {
|
|||
let flipV = false;
|
||||
|
||||
if (terminal.cell.isVertex()) {
|
||||
flipH = mxUtils.getValue(terminal.style, STYLE_FLIPH, 0) == 1;
|
||||
flipV = mxUtils.getValue(terminal.style, STYLE_FLIPV, 0) == 1;
|
||||
flipH = mxUtils.getValue(terminal.style, 'flipH', 0) == 1;
|
||||
flipV = mxUtils.getValue(terminal.style, 'flipV', 0) == 1;
|
||||
|
||||
// Legacy support for stencilFlipH/V
|
||||
if (terminal.shape != null && terminal.shape.stencil != null) {
|
||||
|
|
@ -1738,7 +1719,7 @@ class mxGraphView extends mxEventSource {
|
|||
getRoutingCenterX(state: mxCellState) {
|
||||
const f =
|
||||
state.style != null
|
||||
? parseFloat(state.style[STYLE_ROUTING_CENTER_X]) || 0
|
||||
? parseFloat(state.style.routingCenterX) || 0
|
||||
: 0;
|
||||
return state.getCenterX() + f * state.width;
|
||||
}
|
||||
|
|
@ -1750,7 +1731,7 @@ class mxGraphView extends mxEventSource {
|
|||
getRoutingCenterY(state: mxCellState) {
|
||||
const f =
|
||||
state.style != null
|
||||
? parseFloat(state.style[STYLE_ROUTING_CENTER_Y]) || 0
|
||||
? parseFloat(state.style.routingCenterY) || 0
|
||||
: 0;
|
||||
return state.getCenterY() + f * state.height;
|
||||
}
|
||||
|
|
@ -1801,7 +1782,7 @@ class mxGraphView extends mxEventSource {
|
|||
border: number = 0
|
||||
): mxRectangle | null {
|
||||
if (terminal != null) {
|
||||
border += parseFloat(terminal.style[STYLE_PERIMETER_SPACING] || 0);
|
||||
border += parseFloat(terminal.style.perimeterSpacing || 0);
|
||||
}
|
||||
return (<mxCellState>terminal).getPerimeterBounds(border * this.scale);
|
||||
}
|
||||
|
|
@ -1811,7 +1792,7 @@ class mxGraphView extends mxEventSource {
|
|||
*/
|
||||
// getPerimeterFunction(state: mxCellState): any;
|
||||
getPerimeterFunction(state: mxCellState): Function | null {
|
||||
let perimeter = state.style[STYLE_PERIMETER];
|
||||
let perimeter = state.style.perimeter;
|
||||
|
||||
// Converts string values to objects
|
||||
if (typeof perimeter === 'string') {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
import mxEventSource from '../../util/event/mxEventSource';
|
||||
import mxUtils from '../../util/mxUtils';
|
||||
import mxEvent from '../../util/event/mxEvent';
|
||||
import { STYLE_HORIZONTAL } from '../../util/mxConstants';
|
||||
import mxRectangle from '../../util/datatypes/mxRectangle';
|
||||
import mxGraph from './mxGraph';
|
||||
import mxEventObject from '../../util/event/mxEventObject';
|
||||
|
|
@ -209,7 +208,7 @@ class mxSwimlaneManager extends mxEventSource {
|
|||
isCellHorizontal(cell: mxCell): boolean {
|
||||
if ((<mxGraph>this.graph).isSwimlane(cell)) {
|
||||
const style = (<mxGraph>this.graph).getCellStyle(cell);
|
||||
return mxUtils.getValue(style, STYLE_HORIZONTAL, 1) == 1;
|
||||
return mxUtils.getValue(style, 'horizontal', 1) == 1;
|
||||
}
|
||||
return !this.isHorizontal();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -853,9 +853,9 @@
|
|||
" *",
|
||||
" * ```javascript",
|
||||
" * var vertexStyle = stylesheet.getDefaultVertexStyle();",
|
||||
" * vertexStyle[mxConstants.STYLE_ROUNDED] = true;",
|
||||
" * vertexStyle.rounded = true;",
|
||||
" * var edgeStyle = stylesheet.getDefaultEdgeStyle();",
|
||||
" * edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;",
|
||||
" * edgeStyle.edge = mxEdgeStyle.EntityRelation;",
|
||||
" * ```",
|
||||
" *",
|
||||
" * Modifies the built-in default styles.",
|
||||
|
|
@ -960,9 +960,9 @@
|
|||
" *",
|
||||
" * ```javascript",
|
||||
" * var style = new Object();",
|
||||
" * style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;",
|
||||
" * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;",
|
||||
" * style[mxConstants.STYLE_ROUNDED] = true;",
|
||||
" * style.shape = mxConstants.SHAPE_RECTANGLE;",
|
||||
" * style.perimiter = mxPerimeter.RectanglePerimeter;",
|
||||
" * style.rounded = true;",
|
||||
" * graph.getStylesheet().putCellStyle('rounded', style);",
|
||||
" * ```",
|
||||
" *",
|
||||
|
|
@ -4629,7 +4629,7 @@
|
|||
"/**",
|
||||
" * The attribute used to find the color for the indicator if the indicator",
|
||||
" * color is set to 'swimlane'.",
|
||||
" * @default {@link mxConstants.STYLE_FILLCOLOR}",
|
||||
" * @default {@link 'fillColor'}",
|
||||
" */"
|
||||
]
|
||||
],
|
||||
|
|
@ -5460,7 +5460,7 @@
|
|||
" * Toggles the boolean value for the given key in the style of the given cells",
|
||||
" * and returns the new value as 0 or 1. If no cells are specified, then the",
|
||||
" * selection cells are used. For example, this can be used to toggle",
|
||||
" * {@link mxConstants.STYLE_ROUNDED} or any other style with a boolean value.",
|
||||
" * {@link 'rounded'} or any other style with a boolean value.",
|
||||
" *",
|
||||
" * Parameter:",
|
||||
" *",
|
||||
|
|
@ -5541,7 +5541,7 @@
|
|||
" * transaction is in progress. Returns the edge that was flipped.",
|
||||
" *",
|
||||
" * Here is an example that overrides this implementation to invert the",
|
||||
" * value of {@link mxConstants.STYLE_ELBOW} without removing any existing styles.",
|
||||
" * value of {@link 'elbow'} without removing any existing styles.",
|
||||
" *",
|
||||
" * ```javascript",
|
||||
" * graph.flipEdge = function(edge)",
|
||||
|
|
@ -5549,11 +5549,11 @@
|
|||
" * if (edge != null)",
|
||||
" * {",
|
||||
" * var style = this.getCurrentCellStyle(edge);",
|
||||
" * var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,",
|
||||
" * var elbow = mxUtils.getValue(style, 'elbow',",
|
||||
" * mxConstants.ELBOW_HORIZONTAL);",
|
||||
" * var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?",
|
||||
" * mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;",
|
||||
" * this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);",
|
||||
" * this.setCellStyles('elbow', value, [edge]);",
|
||||
" * }",
|
||||
" * };",
|
||||
" * ```",
|
||||
|
|
@ -7064,7 +7064,7 @@
|
|||
" *",
|
||||
" * Returns true if no white-space CSS style directive should be used for",
|
||||
" * displaying the given cells label. This implementation returns true if",
|
||||
" * {@link mxConstants.STYLE_WHITE_SPACE} in the style of the given cell is 'wrap'.",
|
||||
" * {@link 'whiteSpace'} in the style of the given cell is 'wrap'.",
|
||||
" *",
|
||||
" * This is used as a workaround for IE ignoring the white-space directive",
|
||||
" * of child elements if the directive appears in a parent element. It",
|
||||
|
|
@ -7232,7 +7232,7 @@
|
|||
[
|
||||
"/**",
|
||||
" * Returns the image URL for the given cell state. This implementation",
|
||||
" * returns the value stored under {@link mxConstants.STYLE_IMAGE} in the cell",
|
||||
" * returns the value stored under {@link 'image'} in the cell",
|
||||
" * style.",
|
||||
" *",
|
||||
" * @param state {@link mxCellState} whose image URL should be returned.",
|
||||
|
|
@ -7255,7 +7255,7 @@
|
|||
"/**",
|
||||
" * Returns the vertical alignment for the given cell state. This",
|
||||
" * implementation returns the value stored under",
|
||||
" * {@link mxConstants.STYLE_VERTICAL_ALIGN} in the cell style.",
|
||||
" * {@link mxConstants.'verticalAlign'} in the cell style.",
|
||||
" *",
|
||||
" * @param state {@link mxCellState} whose vertical alignment should be",
|
||||
" * returned.",
|
||||
|
|
@ -7602,7 +7602,7 @@
|
|||
"/**",
|
||||
" * Returns true if the given cell is moveable. This returns",
|
||||
" * {@link cellsDeletable} for all given cells if a cells style does not specify",
|
||||
" * {@link mxConstants.STYLE_DELETABLE} to be 0.",
|
||||
" * {@link 'deletable'} to be 0.",
|
||||
" *",
|
||||
" * @param cell {@link mxCell} whose deletable state should be returned.",
|
||||
" */"
|
||||
|
|
@ -7643,7 +7643,7 @@
|
|||
[
|
||||
"/**",
|
||||
" * Returns true if the given cell is rotatable. This returns true for the given",
|
||||
" * cell if its style does not specify {@link mxConstants.STYLE_ROTATABLE} to be 0.",
|
||||
" * cell if its style does not specify {@link 'rotatable'} to be 0.",
|
||||
" *",
|
||||
" * @param cell {@link mxCell} whose rotatable state should be returned.",
|
||||
" */"
|
||||
|
|
@ -7663,7 +7663,7 @@
|
|||
"/**",
|
||||
" * Returns true if the given cell is moveable. This returns {@link cellsMovable}",
|
||||
" * for all given cells if {@link isCellLocked} does not return true for the given",
|
||||
" * cell and its style does not specify {@link mxConstants.STYLE_MOVABLE} to be 0.",
|
||||
" * cell and its style does not specify {@link 'movable'} to be 0.",
|
||||
" *",
|
||||
" * @param cell {@link mxCell} whose movable state should be returned.",
|
||||
" */"
|
||||
|
|
@ -7989,7 +7989,7 @@
|
|||
" * Returns true if the given cell is resizable. This returns",
|
||||
" * {@link cellsResizable} for all given cells if {@link isCellLocked} does not return",
|
||||
" * true for the given cell and its style does not specify",
|
||||
" * {@link mxConstants.STYLE_RESIZABLE} to be 0.",
|
||||
" * {@link 'resizable'} to be 0.",
|
||||
" *",
|
||||
" * @param cell {@link mxCell} whose resizable state should be returned.",
|
||||
" */"
|
||||
|
|
@ -8068,7 +8068,7 @@
|
|||
"/**",
|
||||
" * Returns true if the given cell is editable. This returns {@link cellsEditable} for",
|
||||
" * all given cells if {@link isCellLocked} does not return true for the given cell",
|
||||
" * and its style does not specify {@link mxConstants.STYLE_EDITABLE} to be 0.",
|
||||
" * and its style does not specify {@link 'editable'} to be 0.",
|
||||
" *",
|
||||
" * @param cell {@link mxCell} whose editable state should be returned.",
|
||||
" */"
|
||||
|
|
@ -8223,7 +8223,7 @@
|
|||
" * Returns true if the size of the given cell should automatically be",
|
||||
" * updated after a change of the label. This implementation returns",
|
||||
" * {@link autoSizeCells} or checks if the cell style does specify",
|
||||
" * {@link mxConstants.STYLE_AUTOSIZE} to be 1.",
|
||||
" * {@link 'autoSize'} to be 1.",
|
||||
" *",
|
||||
" * @param cell {@link mxCell} that should be resized.",
|
||||
" */"
|
||||
|
|
@ -9221,7 +9221,7 @@
|
|||
" *",
|
||||
" * @example",
|
||||
" * ```javascript",
|
||||
" * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;",
|
||||
" * style.perimiter = mxPerimeter.RectanglePerimeter;",
|
||||
" * ```",
|
||||
" *",
|
||||
" * When adding new perimeter functions, it is recommended to use the",
|
||||
|
|
@ -9261,7 +9261,7 @@
|
|||
" * @example",
|
||||
" * ```javascript",
|
||||
" * var style = graph.getStylesheet().getDefaultVertexStyle();",
|
||||
" * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.CustomPerimeter;",
|
||||
" * style.perimiter = mxPerimeter.CustomPerimeter;",
|
||||
" * ```",
|
||||
" *",
|
||||
" * Note that the object can be used directly when programmatically setting",
|
||||
|
|
@ -12393,7 +12393,7 @@
|
|||
" * @example",
|
||||
" * ```javascript",
|
||||
" * var style = graph.getStylesheet().getDefaultVertexStyle();",
|
||||
" * style[mxConstants.STYLE_SHAPE] = 'customShape';",
|
||||
" * style.shape = 'customShape';",
|
||||
" * ```",
|
||||
" */"
|
||||
],
|
||||
|
|
@ -13213,25 +13213,25 @@
|
|||
" * Applies the style of the given <mxCellState> to the shape. This",
|
||||
" * implementation assigns the following styles to local fields:",
|
||||
" *",
|
||||
" * - <mxConstants.STYLE_FILLCOLOR> => fill",
|
||||
" * - <mxConstants.STYLE_GRADIENTCOLOR> => gradient",
|
||||
" * - <mxConstants.STYLE_GRADIENT_DIRECTION> => gradientDirection",
|
||||
" * - <mxConstants.STYLE_OPACITY> => opacity",
|
||||
" * - <'fillColor'> => fill",
|
||||
" * - <'gradientColor'> => gradient",
|
||||
" * - <'gradientDirection'> => gradientDirection",
|
||||
" * - <'opacity'> => opacity",
|
||||
" * - <mxConstants.STYLE_FILL_OPACITY> => fillOpacity",
|
||||
" * - <mxConstants.STYLE_STROKE_OPACITY> => strokeOpacity",
|
||||
" * - <mxConstants.STYLE_STROKECOLOR> => stroke",
|
||||
" * - <mxConstants.STYLE_STROKEWIDTH> => strokewidth",
|
||||
" * - <mxConstants.STYLE_SHADOW> => isShadow",
|
||||
" * - <mxConstants.STYLE_DASHED> => isDashed",
|
||||
" * - <mxConstants.STYLE_SPACING> => spacing",
|
||||
" * - <mxConstants.STYLE_STARTSIZE> => startSize",
|
||||
" * - <mxConstants.STYLE_ENDSIZE> => endSize",
|
||||
" * - <mxConstants.STYLE_ROUNDED> => isRounded",
|
||||
" * - <mxConstants.STYLE_STARTARROW> => startArrow",
|
||||
" * - <mxConstants.STYLE_ENDARROW> => endArrow",
|
||||
" * - <mxConstants.STYLE_ROTATION> => rotation",
|
||||
" * - <mxConstants.STYLE_DIRECTION> => direction",
|
||||
" * - <mxConstants.STYLE_GLASS> => glass",
|
||||
" * - <'strokeColor'> => stroke",
|
||||
" * - <mxConstants.'strokeWidth'> => strokewidth",
|
||||
" * - <'shadow'> => isShadow",
|
||||
" * - <'dashed'> => isDashed",
|
||||
" * - <'spacing'> => spacing",
|
||||
" * - <'startSize'> => startSize",
|
||||
" * - <'endSize'> => endSize",
|
||||
" * - <'rounded'> => isRounded",
|
||||
" * - <mxConstants.'startArrow'> => startArrow",
|
||||
" * - <mxConstants.'endArrow'> => endArrow",
|
||||
" * - <'rotation'> => rotation",
|
||||
" * - <'direction'> => direction",
|
||||
" * - <'glass'> => glass",
|
||||
" *",
|
||||
" * This keeps a reference to the <style>. If you need to keep a reference to",
|
||||
" * the cell, you can override this method and store a local reference to",
|
||||
|
|
@ -13677,11 +13677,11 @@
|
|||
" * Extends {@link mxShape} to implement a swimlane shape.",
|
||||
" * This shape is registered under {@link mxConstants.SHAPE_SWIMLANE} in {@link mxCellRenderer}.",
|
||||
" * Use the {@link mxConstants.STYLE_STYLE_STARTSIZE} to define the size of the title",
|
||||
" * region, {@link mxConstants.STYLE_SWIMLANE_FILLCOLOR} for the content area fill,",
|
||||
" * region, {@link 'swimlaneFillColor'} for the content area fill,",
|
||||
" * {@link mxConstants.STYLE_SEPARATORCOLOR} to draw an additional vertical separator and",
|
||||
" * {@link mxConstants.STYLE_SWIMLANE_LINE} to hide the line between the title region and",
|
||||
" * the content area.",
|
||||
" * The {@link mxConstants.STYLE_HORIZONTAL} affects the orientation of this shape,",
|
||||
" * The {@link 'horizontal'} affects the orientation of this shape,",
|
||||
" * not only its label.",
|
||||
" *",
|
||||
" * @class mxSwimlane",
|
||||
|
|
@ -14731,14 +14731,14 @@
|
|||
[
|
||||
"/**",
|
||||
" * Overrides {@link mxShape.apply} to replace the fill and stroke colors with the",
|
||||
" * respective values from {@link mxConstants.STYLE_IMAGE_BACKGROUND} and",
|
||||
" * {@link mxConstants.STYLE_IMAGE_BORDER}.",
|
||||
" * respective values from {@link 'imageBackground'} and",
|
||||
" * {@link 'imageBorder'}.",
|
||||
" *",
|
||||
" * Applies the style of the given {@link mxCellState} to the shape. This",
|
||||
" * implementation assigns the following styles to local fields:",
|
||||
" *",
|
||||
" * - {@link mxConstants.STYLE_IMAGE_BACKGROUND} => fill",
|
||||
" * - {@link mxConstants.STYLE_IMAGE_BORDER} => stroke",
|
||||
" * - {@link 'imageBackground'} => fill",
|
||||
" * - {@link 'imageBorder'} => stroke",
|
||||
" *",
|
||||
" * @param {mxCellState} state {@link mxCellState} of the corresponding cell.",
|
||||
" */"
|
||||
|
|
@ -14848,7 +14848,7 @@
|
|||
" * c.ellipse(x, y, w, h);",
|
||||
" * c.stroke();",
|
||||
" *",
|
||||
" * var inset = mxUtils.getValue(this.style, mxConstants.STYLE_MARGIN, Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));",
|
||||
" * var inset = mxUtils.getValue(this.style, mxConstants.'margin', Math.min(3 + this.strokewidth, Math.min(w / 5, h / 5)));",
|
||||
" * x += inset;",
|
||||
" * y += inset;",
|
||||
" * w -= 2 * inset;",
|
||||
|
|
@ -23736,7 +23736,7 @@
|
|||
[
|
||||
"/**",
|
||||
" * Defines the length of the horizontal segment of an Entity Relation.",
|
||||
" * This can be overridden using <mxConstants.STYLE_SEGMENT> style.",
|
||||
" * This can be overridden using <mxConstants.'segment'> style.",
|
||||
" * Default is 30.",
|
||||
" */"
|
||||
]
|
||||
|
|
@ -24075,8 +24075,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_POINTER_EVENTS": [
|
||||
"static STYLE_POINTER_EVENTS: 'pointerEvents';",
|
||||
"static 'pointerEvents'": [
|
||||
"static 'pointerEvents': 'pointerEvents';",
|
||||
[
|
||||
"/**",
|
||||
" * Specifies if pointer events should be fired on transparent backgrounds.",
|
||||
|
|
@ -24097,8 +24097,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_MARGIN": [
|
||||
"static STYLE_MARGIN: 'margin';",
|
||||
"static 'margin'": [
|
||||
"static 'margin': 'margin';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the margin between the ellipses in the double ellipse shape.",
|
||||
|
|
@ -24133,8 +24133,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_STROKECOLOR": [
|
||||
"static STYLE_STROKECOLOR: 'strokeColor';",
|
||||
"static 'strokeColor'": [
|
||||
"static 'strokeColor': 'strokeColor';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the strokeColor style. Possible values are all HTML",
|
||||
|
|
@ -24154,8 +24154,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_STROKEWIDTH": [
|
||||
"static STYLE_STROKEWIDTH: 'strokeWidth';",
|
||||
"static 'strokeWidth'": [
|
||||
"static 'strokeWidth': 'strokeWidth';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the strokeWidth style. The type of the value is",
|
||||
|
|
@ -24165,8 +24165,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_ALIGN": [
|
||||
"static STYLE_ALIGN: 'align';",
|
||||
"static 'align'": [
|
||||
"static 'align': 'align';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the align style. Possible values are <ALIGN_LEFT>;",
|
||||
|
|
@ -24177,12 +24177,12 @@
|
|||
" * are aligned in the center of the label bounds. Note this value doesn't",
|
||||
" * affect the positioning of the overall label bounds relative to the",
|
||||
" * vertex, to move the label bounds horizontally, use",
|
||||
" * <STYLE_LABEL_POSITION>. Value is \"align\".",
|
||||
" * <'labelPosition'>. Value is \"align\".",
|
||||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_VERTICAL_ALIGN": [
|
||||
"static STYLE_VERTICAL_ALIGN: 'verticalAlign';",
|
||||
"static 'verticalAlign'": [
|
||||
"static 'verticalAlign': 'verticalAlign';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the verticalAlign style. Possible values are",
|
||||
|
|
@ -24195,12 +24195,12 @@
|
|||
" * bounds and the bottom-most text label line and the bottom of the label",
|
||||
" * bounds. Note this value doesn't affect the positioning of the overall",
|
||||
" * label bounds relative to the vertex, to move the label bounds",
|
||||
" * vertically, use <STYLE_VERTICAL_LABEL_POSITION>. Value is \"verticalAlign\".",
|
||||
" * vertically, use <'verticalLabelPosition'>. Value is \"verticalAlign\".",
|
||||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_LABEL_WIDTH": [
|
||||
"static STYLE_LABEL_WIDTH: 'labelWidth';",
|
||||
"static 'labelWidth'": [
|
||||
"static 'labelWidth': 'labelWidth';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the width of the label if the label position is not",
|
||||
|
|
@ -24208,8 +24208,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_LABEL_POSITION": [
|
||||
"static STYLE_LABEL_POSITION: 'labelPosition';",
|
||||
"static 'labelPosition'": [
|
||||
"static 'labelPosition': 'labelPosition';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the horizontal label position of vertices. Possible",
|
||||
|
|
@ -24220,13 +24220,13 @@
|
|||
" * adjust to the right and <ALIGN_CENTER> means the label bounds are",
|
||||
" * vertically aligned with the bounds of the vertex. Note this value",
|
||||
" * doesn't affect the positioning of label within the label bounds, to move",
|
||||
" * the label horizontally within the label bounds, use <STYLE_ALIGN>.",
|
||||
" * the label horizontally within the label bounds, use <'align'>.",
|
||||
" * Value is \"labelPosition\".",
|
||||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_VERTICAL_LABEL_POSITION": [
|
||||
"static STYLE_VERTICAL_LABEL_POSITION: 'verticalLabelPosition';",
|
||||
"static 'verticalLabelPosition'": [
|
||||
"static 'verticalLabelPosition': 'verticalLabelPosition';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the vertical label position of vertices. Possible",
|
||||
|
|
@ -24238,7 +24238,7 @@
|
|||
" * horizontally aligned with the bounds of the vertex. Note this value",
|
||||
" * doesn't affect the positioning of label within the label bounds, to move",
|
||||
" * the label vertically within the label bounds, use",
|
||||
" * <STYLE_VERTICAL_ALIGN>. Value is \"verticalLabelPosition\".",
|
||||
" * <'verticalAlign'>. Value is \"verticalLabelPosition\".",
|
||||
" */"
|
||||
]
|
||||
],
|
||||
|
|
@ -24435,8 +24435,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_INDICATOR_STROKECOLOR": [
|
||||
"static STYLE_INDICATOR_STROKECOLOR: 'indicatorStrokeColor';",
|
||||
"static 'indicatorStrokeColor'": [
|
||||
"static 'indicatorStrokeColor': 'indicatorStrokeColor';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the indicator stroke color in <mxLabel>.",
|
||||
|
|
@ -24482,8 +24482,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_INDICATOR_DIRECTION": [
|
||||
"static STYLE_INDICATOR_DIRECTION: 'indicatorDirection';",
|
||||
"static 'indicatorDirection'": [
|
||||
"static 'indicatorDirection': 'indicatorDirection';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the indicatorDirection style. The direction style is",
|
||||
|
|
@ -24502,8 +24502,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_SEGMENT": [
|
||||
"static STYLE_SEGMENT: 'segment';",
|
||||
"static 'segment'": [
|
||||
"static 'segment': 'segment';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the segment style. The type of this value is float",
|
||||
|
|
@ -24512,8 +24512,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_ENDARROW": [
|
||||
"static STYLE_ENDARROW: 'endArrow';",
|
||||
"static 'endArrow'": [
|
||||
"static 'endArrow': 'endArrow';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the end arrow marker. Possible values are all",
|
||||
|
|
@ -24522,18 +24522,18 @@
|
|||
" *",
|
||||
" * Example:",
|
||||
" * (code)",
|
||||
" * style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;",
|
||||
" * style.endArrow = mxConstants.ARROW_CLASSIC;",
|
||||
" * (end)",
|
||||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_STARTARROW": [
|
||||
"static STYLE_STARTARROW: 'startArrow';",
|
||||
"static 'startArrow'": [
|
||||
"static 'startArrow': 'startArrow';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the start arrow marker. Possible values are all",
|
||||
" * constants with an ARROW-prefix. This is only used in <mxConnector>.",
|
||||
" * See <STYLE_ENDARROW>. Value is \"startArrow\".",
|
||||
" * See <'endArrow'>. Value is \"startArrow\".",
|
||||
" */"
|
||||
]
|
||||
],
|
||||
|
|
@ -24645,8 +24645,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_ARCSIZE": [
|
||||
"static STYLE_ARCSIZE: 'arcSize';",
|
||||
"static 'arcSize'": [
|
||||
"static 'arcSize': 'arcSize';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the rounding factor for a rounded rectangle in percent (without",
|
||||
|
|
@ -24759,7 +24759,7 @@
|
|||
[
|
||||
"/**",
|
||||
" * Defines the key for the horizontal style. Possible values are",
|
||||
" * true or false. This value only applies to vertices. If the <STYLE_SHAPE>",
|
||||
" * true or false. This value only applies to vertices. If the <'shape'>",
|
||||
" * is \"SHAPE_SWIMLANE\" a value of false indicates that the",
|
||||
" * swimlane should be drawn vertically, true indicates to draw it",
|
||||
" * horizontally. If the shape style does not indicate that this vertex is a",
|
||||
|
|
@ -24791,8 +24791,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_ELBOW": [
|
||||
"static STYLE_ELBOW: 'elbow';",
|
||||
"static 'elbow'": [
|
||||
"static 'elbow': 'elbow';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the elbow style. Possible values are",
|
||||
|
|
@ -24803,8 +24803,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_FONTCOLOR": [
|
||||
"static STYLE_FONTCOLOR: 'fontColor';",
|
||||
"static 'fontColor'": [
|
||||
"static 'fontColor': 'fontColor';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the fontColor style. Possible values are all HTML",
|
||||
|
|
@ -24882,8 +24882,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_BACKGROUND_OUTLINE": [
|
||||
"static STYLE_BACKGROUND_OUTLINE: 'backgroundOutline';",
|
||||
"static 'backgroundOutline'": [
|
||||
"static 'backgroundOutline': 'backgroundOutline';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the backgroundOutline style. This specifies if a",
|
||||
|
|
@ -24976,8 +24976,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_SHAPE": [
|
||||
"static STYLE_SHAPE: 'shape';",
|
||||
"static 'shape'": [
|
||||
"static 'shape': 'shape';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the shape. Possible values are all constants with",
|
||||
|
|
@ -24994,8 +24994,8 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_JETTY_SIZE": [
|
||||
"static STYLE_JETTY_SIZE: 'jettySize';",
|
||||
"static 'jettySize'": [
|
||||
"static 'jettySize': 'jettySize';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.",
|
||||
|
|
@ -25004,23 +25004,23 @@
|
|||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_SOURCE_JETTY_SIZE": [
|
||||
"static STYLE_SOURCE_JETTY_SIZE: 'sourceJettySize';",
|
||||
"static 'sourceJettySize'": [
|
||||
"static 'sourceJettySize': 'sourceJettySize';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.",
|
||||
" * Default is 10. Possible values are numeric values or \"auto\". This has",
|
||||
" * precedence over <STYLE_JETTY_SIZE>. Value is \"sourceJettySize\".",
|
||||
" * precedence over <'jettySize'>. Value is \"sourceJettySize\".",
|
||||
" */"
|
||||
]
|
||||
],
|
||||
"static STYLE_TARGET_JETTY_SIZE": [
|
||||
"static STYLE_TARGET_JETTY_SIZE: 'targetJettySize';",
|
||||
"static 'targetJettySize'": [
|
||||
"static 'targetJettySize': 'targetJettySize';",
|
||||
[
|
||||
"/**",
|
||||
" * Defines the key for the jetty size in <mxEdgeStyle.OrthConnector>.",
|
||||
" * Default is 10. Possible values are numeric values or \"auto\". This has",
|
||||
" * precedence over <STYLE_JETTY_SIZE>. Value is \"targetJettySize\".",
|
||||
" * precedence over <'jettySize'>. Value is \"targetJettySize\".",
|
||||
" */"
|
||||
]
|
||||
],
|
||||
|
|
@ -34713,13 +34713,13 @@
|
|||
" * var s = this.state;",
|
||||
" *",
|
||||
" * if (this.graph.isHtmlLabel(s.cell) && (index == 3 || index == 4) &&",
|
||||
" * s.text != null && s.style[mxConstants.STYLE_WHITE_SPACE] == 'wrap')",
|
||||
" * s.text != null && s.style.whiteSpace == 'wrap')",
|
||||
" * {",
|
||||
" * var label = this.graph.getLabel(s.cell);",
|
||||
" * var fontSize = mxUtils.getNumber(s.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE);",
|
||||
" * var fontSize = mxUtils.getNumber(s.style, 'fontSize', mxConstants.DEFAULT_FONTSIZE);",
|
||||
" * var ww = result.width / s.view.scale - s.text.spacingRight - s.text.spacingLeft",
|
||||
" *",
|
||||
" * result.height = mxUtils.getSizeForString(label, fontSize, s.style[mxConstants.STYLE_FONTFAMILY], ww).height;",
|
||||
" * result.height = mxUtils.getSizeForString(label, fontSize, s.style.fontFamily, ww).height;",
|
||||
" * }",
|
||||
" *",
|
||||
" * return result;",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const Template = ({ label, ...args }) => {
|
|||
mxEvent,
|
||||
mxRubberband,
|
||||
mxPoint,
|
||||
mxConstants,
|
||||
mxGraphHandler,
|
||||
mxUtils
|
||||
} = mxgraph;
|
||||
|
||||
|
|
@ -132,13 +132,13 @@ const Template = ({ label, ...args }) => {
|
|||
|
||||
// Sets the base style for all vertices
|
||||
const style = graph.getStylesheet().getDefaultVertexStyle();
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#ffffff';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_STROKEWIDTH] = '2';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '12';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 1;
|
||||
style.rounded = true;
|
||||
style.fillColor = '#ffffff';
|
||||
style.strokeColor = '#000000';
|
||||
style.strokeWidth = '2';
|
||||
style.strokeColor = '#000000';
|
||||
style.fontSize = '12';
|
||||
style.fontStyle = 1;
|
||||
graph.getStylesheet().putDefaultVertexStyle(style);
|
||||
|
||||
// Replaces move preview for relative children
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,47 +99,47 @@ const Template = ({ label, ...args }) => {
|
|||
|
||||
function configureStylesheet(graph) {
|
||||
let style = {};
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
|
||||
style[mxConstants.STYLE_IMAGE] = 'images/icons48/keys.png';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#FFFFFF';
|
||||
style.shape = mxConstants.SHAPE_IMAGE;
|
||||
style.perimiter = mxPerimeter.RectanglePerimeter;
|
||||
style.image = 'images/icons48/keys.png';
|
||||
style.strokeColor = '#FFFFFF';
|
||||
graph.getStylesheet().putCellStyle('image', style);
|
||||
|
||||
style = mxCloneUtils.clone(style);
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#000000';
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
|
||||
style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;
|
||||
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;
|
||||
style[mxConstants.STYLE_IMAGE] = 'images/icons48/gear.png';
|
||||
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
|
||||
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
|
||||
style[mxConstants.STYLE_SPACING_TOP] = '56';
|
||||
style[mxConstants.STYLE_SPACING] = '8';
|
||||
style.shape = mxConstants.SHAPE_LABEL;
|
||||
style.strokeColor = '#000000';
|
||||
style.align = mxConstants.ALIGN_CENTER;
|
||||
style.verticalAlign = mxConstants.ALIGN_TOP;
|
||||
style.imageAlign = mxConstants.ALIGN_CENTER;
|
||||
style.imageVerticalAlign = mxConstants.ALIGN_TOP;
|
||||
style.image = 'images/icons48/gear.png';
|
||||
style.imageWidth = '48';
|
||||
style.imageHeight = '48';
|
||||
style.spacingTop = '56';
|
||||
style.spacing = '8';
|
||||
graph.getStylesheet().putCellStyle('bottom', style);
|
||||
|
||||
style = mxCloneUtils.clone(style);
|
||||
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
|
||||
style[mxConstants.STYLE_IMAGE] = 'images/icons48/server.png';
|
||||
delete style[mxConstants.STYLE_SPACING_TOP];
|
||||
style.imageVerticalAlign = mxConstants.ALIGN_BOTTOM;
|
||||
style.image = 'images/icons48/server.png';
|
||||
delete style.spacingTop;
|
||||
graph.getStylesheet().putCellStyle('top', style);
|
||||
|
||||
style = mxCloneUtils.clone(style);
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
|
||||
style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_LEFT;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_IMAGE] = 'images/icons48/earth.png';
|
||||
style[mxConstants.STYLE_SPACING_LEFT] = '55';
|
||||
style[mxConstants.STYLE_SPACING] = '4';
|
||||
style.align = mxConstants.ALIGN_LEFT;
|
||||
style.imageAlign = mxConstants.ALIGN_LEFT;
|
||||
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
|
||||
style.imageVerticalAlign = mxConstants.ALIGN_MIDDLE;
|
||||
style.image = 'images/icons48/earth.png';
|
||||
style.spacingLeft = '55';
|
||||
style.spacing = '4';
|
||||
graph.getStylesheet().putCellStyle('right', style);
|
||||
|
||||
style = mxCloneUtils.clone(style);
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_RIGHT;
|
||||
style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_RIGHT;
|
||||
delete style[mxConstants.STYLE_SPACING_LEFT];
|
||||
style[mxConstants.STYLE_SPACING_RIGHT] = '55';
|
||||
style.align = mxConstants.ALIGN_RIGHT;
|
||||
style.imageAlign = mxConstants.ALIGN_RIGHT;
|
||||
delete style.spacingLeft;
|
||||
style.spacingRight = '55';
|
||||
graph.getStylesheet().putCellStyle('left', style);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -39,20 +39,20 @@ const Template = ({ label, ...args }) => {
|
|||
|
||||
// Makes all cells round with a white, bold label
|
||||
let style = graph.stylesheet.getDefaultVertexStyle();
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
|
||||
style[mxConstants.STYLE_FONTCOLOR] = 'white';
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;
|
||||
style[mxConstants.STYLE_FONTSIZE] = 14;
|
||||
style[mxConstants.STYLE_SHADOW] = true;
|
||||
style.shape = mxConstants.SHAPE_ELLIPSE;
|
||||
style.perimiter = mxPerimeter.EllipsePerimeter;
|
||||
style.strokeColor = 'white';
|
||||
style.gradientColor = 'white';
|
||||
style.fontStyle = mxConstants.FONT_BOLD;
|
||||
style.fontSize = 14;
|
||||
style.shadow = true;
|
||||
|
||||
// Makes all edge labels gray with a white background
|
||||
style = graph.stylesheet.getDefaultEdgeStyle();
|
||||
style[mxConstants.STYLE_FONTCOLOR] = 'gray';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = mxConstants.FONT_BOLD;
|
||||
style[mxConstants.STYLE_FONTCOLOR] = 'black';
|
||||
style[mxConstants.STYLE_STROKEWIDTH] = 2;
|
||||
style.strokeColor = 'gray';
|
||||
style.fontStyle = mxConstants.FONT_BOLD;
|
||||
style.strokeColor = 'black';
|
||||
style.strokeWidth = 2;
|
||||
|
||||
// Enables rubberband selection
|
||||
if (args.rubberBand)
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ const Template = ({ label, ...args }) => {
|
|||
// Updates the cell color and adds some tooltip information
|
||||
if (cell != null) {
|
||||
// Resets the fillcolor and the overlay
|
||||
graph.setCellStyles(mxConstants.STYLE_FILLCOLOR, 'white', [
|
||||
graph.setCellStyles('fillColor', 'white', [
|
||||
cell,
|
||||
]);
|
||||
graph.removeCellOverlays(cell);
|
||||
|
|
@ -132,19 +132,19 @@ const Template = ({ label, ...args }) => {
|
|||
// Changes the cell color for the known states
|
||||
if (state == 'Running') {
|
||||
graph.setCellStyles(
|
||||
mxConstants.STYLE_FILLCOLOR,
|
||||
'fillColor',
|
||||
'#f8cecc',
|
||||
[cell]
|
||||
);
|
||||
} else if (state == 'Waiting') {
|
||||
graph.setCellStyles(
|
||||
mxConstants.STYLE_FILLCOLOR,
|
||||
'fillColor',
|
||||
'#fff2cc',
|
||||
[cell]
|
||||
);
|
||||
} else if (state == 'Completed') {
|
||||
graph.setCellStyles(
|
||||
mxConstants.STYLE_FILLCOLOR,
|
||||
'fillColor',
|
||||
'#d4e1f5',
|
||||
[cell]
|
||||
);
|
||||
|
|
@ -198,66 +198,66 @@ const Template = ({ label, ...args }) => {
|
|||
|
||||
// Creates the stylesheet for the process display
|
||||
let style = graph.getStylesheet().getDefaultVertexStyle();
|
||||
style[mxConstants.STYLE_FONTSIZE] = 11;
|
||||
style[mxConstants.STYLE_FONTCOLOR] = 'black';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#808080';
|
||||
style[mxConstants.STYLE_FILLCOLOR] = 'white';
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
|
||||
style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST;
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_SHADOW] = true;
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 1;
|
||||
style.fontSize = 11;
|
||||
style.strokeColor = 'black';
|
||||
style.strokeColor = '#808080';
|
||||
style.fillColor = 'white';
|
||||
style.gradientColor = 'white';
|
||||
style.gradientDirection = mxConstants.DIRECTION_EAST;
|
||||
style.rounded = true;
|
||||
style.shadow = true;
|
||||
style.fontStyle = 1;
|
||||
|
||||
style = graph.getStylesheet().getDefaultEdgeStyle();
|
||||
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#808080';
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_SHADOW] = true;
|
||||
style.edge = mxEdgeStyle.ElbowConnector;
|
||||
style.strokeColor = '#808080';
|
||||
style.rounded = true;
|
||||
style.shadow = true;
|
||||
|
||||
style = [];
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#a0a0a0';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#606060';
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#E0E0DF';
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
|
||||
style[mxConstants.STYLE_STARTSIZE] = 30;
|
||||
style[mxConstants.STYLE_ROUNDED] = false;
|
||||
style[mxConstants.STYLE_FONTSIZE] = 12;
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 0;
|
||||
style[mxConstants.STYLE_HORIZONTAL] = false;
|
||||
style.shape = mxConstants.SHAPE_SWIMLANE;
|
||||
style.perimiter = mxPerimeter.RectanglePerimeter;
|
||||
style.strokeColor = '#a0a0a0';
|
||||
style.strokeColor = '#606060';
|
||||
style.fillColor = '#E0E0DF';
|
||||
style.gradientColor = 'white';
|
||||
style.startSize = 30;
|
||||
style.rounded = false;
|
||||
style.fontSize = 12;
|
||||
style.fontStyle = 0;
|
||||
style.horizontal = false;
|
||||
// To improve text quality for vertical labels in some old IE versions...
|
||||
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#efefef';
|
||||
style.labelBackgroundColor = '#efefef';
|
||||
|
||||
graph.getStylesheet().putCellStyle('swimlane', style);
|
||||
|
||||
style = [];
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RHOMBUS;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter;
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#91BCC0';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = 'gray';
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#91BCC0';
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_FONTSIZE] = 16;
|
||||
style.shape = mxConstants.SHAPE_RHOMBUS;
|
||||
style.perimiter = mxPerimeter.RhombusPerimeter;
|
||||
style.strokeColor = '#91BCC0';
|
||||
style.strokeColor = 'gray';
|
||||
style.fillColor = '#91BCC0';
|
||||
style.gradientColor = 'white';
|
||||
style.align = mxConstants.ALIGN_CENTER;
|
||||
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
|
||||
style.fontSize = 16;
|
||||
graph.getStylesheet().putCellStyle('step', style);
|
||||
|
||||
style = [];
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
|
||||
style[mxConstants.STYLE_FONTCOLOR] = 'gray';
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#A0C88F';
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#A0C88F';
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_FONTSIZE] = 16;
|
||||
style.shape = mxConstants.SHAPE_ELLIPSE;
|
||||
style.perimiter = mxPerimeter.EllipsePerimeter;
|
||||
style.strokeColor = 'gray';
|
||||
style.fillColor = '#A0C88F';
|
||||
style.gradientColor = 'white';
|
||||
style.strokeColor = '#A0C88F';
|
||||
style.align = mxConstants.ALIGN_CENTER;
|
||||
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
|
||||
style.fontSize = 16;
|
||||
graph.getStylesheet().putCellStyle('start', style);
|
||||
|
||||
style = mxCloneUtils.clone(style);
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#DACCBC';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#AF7F73';
|
||||
style.fillColor = '#DACCBC';
|
||||
style.strokeColor = '#AF7F73';
|
||||
graph.getStylesheet().putCellStyle('end', style);
|
||||
|
||||
return graph;
|
||||
|
|
|
|||
|
|
@ -85,43 +85,43 @@ const Template = ({ label, ...args }) => {
|
|||
|
||||
// Set some stylesheet options for the visual appearance of vertices
|
||||
let style = graph.getStylesheet().getDefaultVertexStyle();
|
||||
style[mxConstants.STYLE_SHAPE] = 'label';
|
||||
style.shape = 'label';
|
||||
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT;
|
||||
style[mxConstants.STYLE_SPACING_LEFT] = 54;
|
||||
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
|
||||
style.align = mxConstants.ALIGN_LEFT;
|
||||
style.spacingLeft = 54;
|
||||
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#5d65df';
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff';
|
||||
style.gradientColor = '#7d85df';
|
||||
style.strokeColor = '#5d65df';
|
||||
style.fillColor = '#adc5ff';
|
||||
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#1d258f';
|
||||
style[mxConstants.STYLE_FONTFAMILY] = 'Verdana';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '12';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = '1';
|
||||
style.strokeColor = '#1d258f';
|
||||
style.fontFamily = 'Verdana';
|
||||
style.fontSize = '12';
|
||||
style.fontStyle = '1';
|
||||
|
||||
style[mxConstants.STYLE_SHADOW] = '1';
|
||||
style[mxConstants.STYLE_ROUNDED] = '1';
|
||||
style[mxConstants.STYLE_GLASS] = '1';
|
||||
style.shadow = '1';
|
||||
style.rounded = '1';
|
||||
style.glass = '1';
|
||||
|
||||
style[mxConstants.STYLE_IMAGE] = '/images/dude3.png';
|
||||
style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
|
||||
style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
|
||||
style[mxConstants.STYLE_SPACING] = 8;
|
||||
style.image = '/images/dude3.png';
|
||||
style.imageWidth = '48';
|
||||
style.imageHeight = '48';
|
||||
style.spacing = 8;
|
||||
|
||||
// Sets the default style for edges
|
||||
style = graph.getStylesheet().getDefaultEdgeStyle();
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_STROKEWIDTH] = 3;
|
||||
style[mxConstants.STYLE_EXIT_X] = 0.5; // center
|
||||
style[mxConstants.STYLE_EXIT_Y] = 1.0; // bottom
|
||||
style[mxConstants.STYLE_EXIT_PERIMETER] = 0; // disabled
|
||||
style[mxConstants.STYLE_ENTRY_X] = 0.5; // center
|
||||
style[mxConstants.STYLE_ENTRY_Y] = 0; // top
|
||||
style[mxConstants.STYLE_ENTRY_PERIMETER] = 0; // disabled
|
||||
style.rounded = true;
|
||||
style.strokeWidth = 3;
|
||||
style.exitX = 0.5; // center
|
||||
style.exitY = 1.0; // bottom
|
||||
style.exitPerimeter = 0; // disabled
|
||||
style.entryX = 0.5; // center
|
||||
style.entryY = 0; // top
|
||||
style.entryPerimeter = 0; // disabled
|
||||
|
||||
// Disable the following for straight lines
|
||||
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
|
||||
style.edge = mxEdgeStyle.TopToBottom;
|
||||
|
||||
// Stops editing on enter or escape keypress
|
||||
const keyHandler = new mxKeyHandler(graph);
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@ const Template = ({ label, ...args }) => {
|
|||
mxPoint,
|
||||
mxCellState,
|
||||
mxEdgeHandler,
|
||||
mxGraphView
|
||||
mxGraphView,
|
||||
mxEvent
|
||||
} = mxgraph;
|
||||
|
||||
const container = document.createElement('div');
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
})
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -59,28 +59,28 @@ const Template = ({ label, ...args }) => {
|
|||
|
||||
// Creates the default style for vertices
|
||||
let style = [];
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
|
||||
style[mxConstants.STYLE_STROKECOLOR] = 'gray';
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#EEEEEE';
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = '#774400';
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_FONTSIZE] = '12';
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 1;
|
||||
style.shape = mxConstants.SHAPE_RECTANGLE;
|
||||
style.perimiter = mxPerimeter.RectanglePerimeter;
|
||||
style.strokeColor = 'gray';
|
||||
style.rounded = true;
|
||||
style.fillColor = '#EEEEEE';
|
||||
style.gradientColor = 'white';
|
||||
style.strokeColor = '#774400';
|
||||
style.align = mxConstants.ALIGN_CENTER;
|
||||
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
|
||||
style.fontSize = '12';
|
||||
style.fontStyle = 1;
|
||||
graph.getStylesheet().putDefaultVertexStyle(style);
|
||||
|
||||
// Creates the default style for edges
|
||||
style = [];
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR;
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#6482B9';
|
||||
style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE;
|
||||
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
|
||||
style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC;
|
||||
style[mxConstants.STYLE_FONTSIZE] = '10';
|
||||
style.shape = mxConstants.SHAPE_CONNECTOR;
|
||||
style.strokeColor = '#6482B9';
|
||||
style.align = mxConstants.ALIGN_CENTER;
|
||||
style.verticalAlign = mxConstants.ALIGN_MIDDLE;
|
||||
style.edge = mxEdgeStyle.ElbowConnector;
|
||||
style.endArrow = mxConstants.ARROW_CLASSIC;
|
||||
style.fontSize = '10';
|
||||
graph.getStylesheet().putDefaultEdgeStyle(style);
|
||||
|
||||
// Gets the default parent for inserting new cells. This
|
||||
|
|
|
|||
|
|
@ -61,60 +61,60 @@ const Template = ({ label, ...args }) => {
|
|||
|
||||
// Changes the default vertex style in-place
|
||||
let style = graph.getStylesheet().getDefaultVertexStyle();
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
|
||||
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
|
||||
style[mxConstants.STYLE_FONTSIZE] = 11;
|
||||
style[mxConstants.STYLE_STARTSIZE] = 22;
|
||||
style[mxConstants.STYLE_HORIZONTAL] = false;
|
||||
style[mxConstants.STYLE_FONTCOLOR] = 'black';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = 'black';
|
||||
delete style[mxConstants.STYLE_FILLCOLOR];
|
||||
style.shape = mxConstants.SHAPE_SWIMLANE;
|
||||
style.verticalAlign = 'middle';
|
||||
style.labelBackgroundColor = 'white';
|
||||
style.fontSize = 11;
|
||||
style.startSize = 22;
|
||||
style.horizontal = false;
|
||||
style.strokeColor = 'black';
|
||||
style.strokeColor = 'black';
|
||||
delete style.fillColor;
|
||||
|
||||
style = mxCloneUtils.clone(style);
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
|
||||
style[mxConstants.STYLE_FONTSIZE] = 10;
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_HORIZONTAL] = true;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
|
||||
delete style[mxConstants.STYLE_STARTSIZE];
|
||||
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'none';
|
||||
style.shape = mxConstants.SHAPE_RECTANGLE;
|
||||
style.fontSize = 10;
|
||||
style.rounded = true;
|
||||
style.horizontal = true;
|
||||
style.verticalAlign = 'middle';
|
||||
delete style.startSize;
|
||||
style.labelBackgroundColor = 'none';
|
||||
graph.getStylesheet().putCellStyle('process', style);
|
||||
|
||||
style = mxCloneUtils.clone(style);
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
|
||||
delete style[mxConstants.STYLE_ROUNDED];
|
||||
style.shape = mxConstants.SHAPE_ELLIPSE;
|
||||
style.perimiter = mxPerimeter.EllipsePerimeter;
|
||||
delete style.rounded;
|
||||
graph.getStylesheet().putCellStyle('state', style);
|
||||
|
||||
style = mxCloneUtils.clone(style);
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RHOMBUS;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter;
|
||||
style[mxConstants.STYLE_VERTICAL_ALIGN] = 'top';
|
||||
style[mxConstants.STYLE_SPACING_TOP] = 40;
|
||||
style[mxConstants.STYLE_SPACING_RIGHT] = 64;
|
||||
style.shape = mxConstants.SHAPE_RHOMBUS;
|
||||
style.perimiter = mxPerimeter.RhombusPerimeter;
|
||||
style.verticalAlign = 'top';
|
||||
style.spacingTop = 40;
|
||||
style.spacingRight = 64;
|
||||
graph.getStylesheet().putCellStyle('condition', style);
|
||||
|
||||
style = mxCloneUtils.clone(style);
|
||||
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_DOUBLE_ELLIPSE;
|
||||
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
|
||||
style[mxConstants.STYLE_SPACING_TOP] = 28;
|
||||
style[mxConstants.STYLE_FONTSIZE] = 14;
|
||||
style[mxConstants.STYLE_FONTSTYLE] = 1;
|
||||
delete style[mxConstants.STYLE_SPACING_RIGHT];
|
||||
style.shape = mxConstants.SHAPE_DOUBLE_ELLIPSE;
|
||||
style.perimiter = mxPerimeter.EllipsePerimeter;
|
||||
style.spacingTop = 28;
|
||||
style.fontSize = 14;
|
||||
style.fontStyle = 1;
|
||||
delete style.spacingRight;
|
||||
graph.getStylesheet().putCellStyle('end', style);
|
||||
|
||||
style = graph.getStylesheet().getDefaultEdgeStyle();
|
||||
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
|
||||
style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_BLOCK;
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_FONTCOLOR] = 'black';
|
||||
style[mxConstants.STYLE_STROKECOLOR] = 'black';
|
||||
style.edge = mxEdgeStyle.ElbowConnector;
|
||||
style.endArrow = mxConstants.ARROW_BLOCK;
|
||||
style.rounded = true;
|
||||
style.strokeColor = 'black';
|
||||
style.strokeColor = 'black';
|
||||
|
||||
style = mxCloneUtils.clone(style);
|
||||
style[mxConstants.STYLE_DASHED] = true;
|
||||
style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_OPEN;
|
||||
style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_OVAL;
|
||||
style.dashed = true;
|
||||
style.endArrow = mxConstants.ARROW_OPEN;
|
||||
style.startArrow = mxConstants.ARROW_OVAL;
|
||||
graph.getStylesheet().putCellStyle('crossover', style);
|
||||
|
||||
// Installs double click on middle control point and
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -175,23 +175,23 @@ const Template = ({ label, ...args }) => {
|
|||
// Changes the style for match the markup
|
||||
// Creates the default style for vertices
|
||||
let style = graph.getStylesheet().getDefaultVertexStyle();
|
||||
style[mxConstants.STYLE_STROKECOLOR] = 'gray';
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_SHADOW] = true;
|
||||
style[mxConstants.STYLE_FILLCOLOR] = '#DFDFDF';
|
||||
style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
|
||||
style[mxConstants.STYLE_FONTCOLOR] = 'black';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '12';
|
||||
style[mxConstants.STYLE_SPACING] = 4;
|
||||
style.strokeColor = 'gray';
|
||||
style.rounded = true;
|
||||
style.shadow = true;
|
||||
style.fillColor = '#DFDFDF';
|
||||
style.gradientColor = 'white';
|
||||
style.strokeColor = 'black';
|
||||
style.fontSize = '12';
|
||||
style.spacing = 4;
|
||||
|
||||
// Creates the default style for edges
|
||||
style = graph.getStylesheet().getDefaultEdgeStyle();
|
||||
style[mxConstants.STYLE_STROKECOLOR] = '#0C0C0C';
|
||||
style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = 'white';
|
||||
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
|
||||
style[mxConstants.STYLE_ROUNDED] = true;
|
||||
style[mxConstants.STYLE_FONTCOLOR] = 'black';
|
||||
style[mxConstants.STYLE_FONTSIZE] = '10';
|
||||
style.strokeColor = '#0C0C0C';
|
||||
style.labelBackgroundColor = 'white';
|
||||
style.edge = mxEdgeStyle.ElbowConnector;
|
||||
style.rounded = true;
|
||||
style.strokeColor = 'black';
|
||||
style.fontSize = '10';
|
||||
|
||||
// Gets the default parent for inserting new cells. This
|
||||
// is normally the first child of the root (ie. layer 0).
|
||||
|
|
|
|||
Loading…
Reference in New Issue