diff --git a/docs/js-api/files/view/mxGraph-js.html b/docs/js-api/files/view/mxGraph-js.html index 072a098c7..871c6fc15 100644 --- a/docs/js-api/files/view/mxGraph-js.html +++ b/docs/js-api/files/view/mxGraph-js.html @@ -655,9 +655,9 @@ graph.getPreferredSizeForCell = function(cell) let result = graphGetPreferredSizeForCell.apply(this, arguments); let style = this.getCellStyle(cell); - if (style['minWidth'] > 0) + if (style.minWidth > 0) { - result.width = Math.max(style['minWidth'], result.width); + result.width = Math.max(style.minWidth, result.width); } return result; @@ -1032,7 +1032,7 @@ graph.isWrapping = function(state) { let style = this.getCurrentCellStyle(cell); - return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0; + return this.isCellsSelectable() && !this.isCellLocked(cell) && style.selectable != 0; };

You can then use the new style as shown in this example.

graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'selectable=0');

Parameters

cellmxCell whose selectable state should be returned.

isCellsSelectable

mxGraph.prototype.isCellsSelectable = function()

Returns cellsSelectable.

diff --git a/docs/stashed/Codec.js b/docs/stashed/Codec.js index f258d2413..2d93e6813 100644 --- a/docs/stashed/Codec.js +++ b/docs/stashed/Codec.js @@ -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; diff --git a/docs/stashed/GraphLayout.js b/docs/stashed/GraphLayout.js index c414ddcec..18a9e569c 100644 --- a/docs/stashed/GraphLayout.js +++ b/docs/stashed/GraphLayout.js @@ -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 diff --git a/docs/stashed/JQuery.js b/docs/stashed/JQuery.js index 54a629e58..068f0a9b2 100644 --- a/docs/stashed/JQuery.js +++ b/docs/stashed/JQuery.js @@ -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); diff --git a/docs/stashed/Map.js b/docs/stashed/Map.js index f2984baa7..5369852eb 100644 --- a/docs/stashed/Map.js +++ b/docs/stashed/Map.js @@ -141,13 +141,13 @@ export default Map; // Sets default vertex style let style = {}; - style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE; - style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter; - style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5'; - style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8'; - style[mxConstants.STYLE_FONTCOLOR] = '#000000'; - style[mxConstants.STYLE_OPACITY] = '50'; - style[mxConstants.STYLE_FONTSIZE] = '16'; + style.shape = mxConstants.SHAPE_ELLIPSE; + style.perimiter = mxPerimeter.EllipsePerimeter; + style.fillColor = '#8CCDF5'; + style.strokeColor = '#1B78C8'; + style.fontColor = '#000000'; + style.opacity = '50'; + style.fontSize = '16'; graph.getStylesheet().putDefaultVertexStyle(style); // Gets label from custom user object diff --git a/docs/stashed/Ports.js b/docs/stashed/Ports.js index 00d7f670f..aabbac404 100644 --- a/docs/stashed/Ports.js +++ b/docs/stashed/Ports.js @@ -99,7 +99,7 @@ export default Ports; // Uses the port icon while connections are previewed graph.connectionHandler.getConnectImage = function(state) { - return new mxImage(state.style[mxConstants.STYLE_IMAGE], 16, 16); + return new mxImage(state.style.image, 16, 16); }; // Centers the port icon on the target port @@ -516,79 +516,79 @@ export default Ports; function configureStylesheet(graph) { let style = {}; - style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; - style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; - style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; - style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; - style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5'; - style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5'; - style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8'; - style[mxConstants.STYLE_FONTCOLOR] = '#000000'; - style[mxConstants.STYLE_ROUNDED] = true; - style[mxConstants.STYLE_OPACITY] = '80'; - style[mxConstants.STYLE_FONTSIZE] = '12'; - style[mxConstants.STYLE_FONTSTYLE] = 0; - style[mxConstants.STYLE_IMAGE_WIDTH] = '48'; - style[mxConstants.STYLE_IMAGE_HEIGHT] = '48'; + style.shape = mxConstants.SHAPE_RECTANGLE; + style.perimiter = mxPerimeter.RectanglePerimeter; + style.align = mxConstants.ALIGN_CENTER; + style.verticalAlign = mxConstants.ALIGN_MIDDLE; + style.gradientColor = '#41B9F5'; + style.fillColor = '#8CCDF5'; + style.strokeColor = '#1B78C8'; + style.fontColor = '#000000'; + style.rounded = true; + style.opacity = '80'; + style.fontSize = '12'; + style.fontStyle = 0; + style.imageWidth = '48'; + style.imageHeight = '48'; graph.getStylesheet().putDefaultVertexStyle(style); // NOTE: Alternative vertex style for non-HTML labels should be as // follows. This repaces the above style for HTML labels. /*let style = {}; - style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL; - style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; - style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; - style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; - style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER; - style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; - style[mxConstants.STYLE_SPACING_TOP] = '56'; - style[mxConstants.STYLE_GRADIENTCOLOR] = '#7d85df'; - style[mxConstants.STYLE_STROKECOLOR] = '#5d65df'; - style[mxConstants.STYLE_FILLCOLOR] = '#adc5ff'; - style[mxConstants.STYLE_FONTCOLOR] = '#1d258f'; - style[mxConstants.STYLE_FONTFAMILY] = 'Verdana'; - style[mxConstants.STYLE_FONTSIZE] = '12'; - style[mxConstants.STYLE_FONTSTYLE] = '1'; - style[mxConstants.STYLE_ROUNDED] = '1'; - style[mxConstants.STYLE_IMAGE_WIDTH] = '48'; - style[mxConstants.STYLE_IMAGE_HEIGHT] = '48'; - style[mxConstants.STYLE_OPACITY] = '80'; + style.shape = mxConstants.SHAPE_LABEL; + style.perimiter = mxPerimeter.RectanglePerimeter; + style.verticalAlign = mxConstants.ALIGN_TOP; + style.align = mxConstants.ALIGN_CENTER; + style.imageAlign = mxConstants.ALIGN_CENTER; + style.imageVerticalAlign = mxConstants.ALIGN_TOP; + style.spacingTop = '56'; + style.gradientColor = '#7d85df'; + style.strokeColor = '#5d65df'; + style.fillColor = '#adc5ff'; + style.fontColor = '#1d258f'; + style.fontFamily = 'Verdana'; + style.fontSize = '12'; + style.fontStyle = '1'; + style.rounded = '1'; + style.imageWidth = '48'; + style.imageHeight = '48'; + style.opacity = '80'; graph.getStylesheet().putDefaultVertexStyle(style);*/ style = {}; - style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE; - style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; - style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; - style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; - style[mxConstants.STYLE_FILLCOLOR] = '#FF9103'; - style[mxConstants.STYLE_GRADIENTCOLOR] = '#F8C48B'; - style[mxConstants.STYLE_STROKECOLOR] = '#E86A00'; - style[mxConstants.STYLE_FONTCOLOR] = '#000000'; - style[mxConstants.STYLE_ROUNDED] = true; - style[mxConstants.STYLE_OPACITY] = '80'; - style[mxConstants.STYLE_STARTSIZE] = '30'; - style[mxConstants.STYLE_FONTSIZE] = '16'; - style[mxConstants.STYLE_FONTSTYLE] = 1; + style.shape = mxConstants.SHAPE_SWIMLANE; + style.perimiter = mxPerimeter.RectanglePerimeter; + style.align = mxConstants.ALIGN_CENTER; + style.verticalAlign = mxConstants.ALIGN_TOP; + style.fillColor = '#FF9103'; + style.gradientColor = '#F8C48B'; + style.strokeColor = '#E86A00'; + style.fontColor = '#000000'; + style.rounded = true; + style.opacity = '80'; + style.startSize = '30'; + style.fontSize = '16'; + style.fontStyle = 1; graph.getStylesheet().putCellStyle('group', style); style = {}; - style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE; - style[mxConstants.STYLE_FONTCOLOR] = '#774400'; - style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; - style[mxConstants.STYLE_PERIMETER_SPACING] = '6'; - style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT; - style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; - style[mxConstants.STYLE_FONTSIZE] = '10'; - style[mxConstants.STYLE_FONTSTYLE] = 2; - style[mxConstants.STYLE_IMAGE_WIDTH] = '16'; - style[mxConstants.STYLE_IMAGE_HEIGHT] = '16'; + style.shape = mxConstants.SHAPE_IMAGE; + style.fontColor = '#774400'; + style.perimiter = mxPerimeter.RectanglePerimeter; + style.perimeterSpacing = '6'; + style.align = mxConstants.ALIGN_LEFT; + style.verticalAlign = mxConstants.ALIGN_MIDDLE; + style.fontSize = '10'; + style.fontStyle = 2; + style.imageWidth = '16'; + style.imageHeight = '16'; graph.getStylesheet().putCellStyle('port', style); style = graph.getStylesheet().getDefaultEdgeStyle(); - style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF'; - style[mxConstants.STYLE_STROKEWIDTH] = '2'; - style[mxConstants.STYLE_ROUNDED] = true; - style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation; + style.labelBackgroundColor = '#FFFFFF'; + style.strokeWidth = '2'; + style.rounded = true; + style.edge = mxEdgeStyle.EntityRelation; }; diff --git a/docs/stashed/Schema.js b/docs/stashed/Schema.js index 0d26725c9..0c1a11165 100644 --- a/docs/stashed/Schema.js +++ b/docs/stashed/Schema.js @@ -648,44 +648,44 @@ export default MYNAMEHERE; function configureStylesheet(graph) { let style = {}; - style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; - style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; - style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT; - style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; - style[mxConstants.STYLE_FONTCOLOR] = '#000000'; - style[mxConstants.STYLE_FONTSIZE] = '11'; - style[mxConstants.STYLE_FONTSTYLE] = 0; - style[mxConstants.STYLE_SPACING_LEFT] = '4'; - style[mxConstants.STYLE_IMAGE_WIDTH] = '48'; - style[mxConstants.STYLE_IMAGE_HEIGHT] = '48'; + style.shape = mxConstants.SHAPE_RECTANGLE; + style.perimiter = mxPerimeter.RectanglePerimeter; + style.align = mxConstants.ALIGN_LEFT; + style.verticalAlign = mxConstants.ALIGN_MIDDLE; + style.fontColor = '#000000'; + style.fontSize = '11'; + style.fontStyle = 0; + style.spacingLeft = '4'; + style.imageWidth = '48'; + style.imageHeight = '48'; graph.getStylesheet().putDefaultVertexStyle(style); style = {}; - style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE; - style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; - style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; - style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; - style[mxConstants.STYLE_GRADIENTCOLOR] = '#41B9F5'; - style[mxConstants.STYLE_FILLCOLOR] = '#8CCDF5'; - style[mxConstants.STYLE_SWIMLANE_FILLCOLOR] = '#ffffff'; - style[mxConstants.STYLE_STROKECOLOR] = '#1B78C8'; - style[mxConstants.STYLE_FONTCOLOR] = '#000000'; - style[mxConstants.STYLE_STROKEWIDTH] = '2'; - style[mxConstants.STYLE_STARTSIZE] = '28'; - style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle'; - style[mxConstants.STYLE_FONTSIZE] = '12'; - style[mxConstants.STYLE_FONTSTYLE] = 1; - style[mxConstants.STYLE_IMAGE] = 'images/icons48/table.png'; + style.shape = mxConstants.SHAPE_SWIMLANE; + style.perimiter = mxPerimeter.RectanglePerimeter; + style.align = mxConstants.ALIGN_CENTER; + style.verticalAlign = mxConstants.ALIGN_TOP; + style.gradientColor = '#41B9F5'; + style.fillColor = '#8CCDF5'; + style.swimlaneFillColor = '#ffffff'; + style.strokeColor = '#1B78C8'; + style.fontColor = '#000000'; + style.strokeWidth = '2'; + style.startSize = '28'; + style.verticalAlign = 'middle'; + style.fontSize = '12'; + style.fontStyle = 1; + style.image = 'images/icons48/table.png'; // Looks better without opacity if shadow is enabled - //style[mxConstants.STYLE_OPACITY] = '80'; - style[mxConstants.STYLE_SHADOW] = 1; + //style.opacity = '80'; + style.shadow = 1; graph.getStylesheet().putCellStyle('table', style); style = graph.stylesheet.getDefaultEdgeStyle(); - style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF'; - style[mxConstants.STYLE_STROKEWIDTH] = '2'; - style[mxConstants.STYLE_ROUNDED] = true; - style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation; + style.labelBackgroundColor = '#FFFFFF'; + style.strokeWidth = '2'; + style.rounded = true; + style.edge = mxEdgeStyle.EntityRelation; }; // Function to create the entries in the popupmenu diff --git a/docs/stashed/Scrollbars.js b/docs/stashed/Scrollbars.js index b7fc75ead..feb5f8dea 100644 --- a/docs/stashed/Scrollbars.js +++ b/docs/stashed/Scrollbars.js @@ -168,23 +168,23 @@ export default Scrollbars; let graph = new mxGraph(container); // Uses the entity perimeter (below) as default - graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; - graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_PERIMETER] = + graph.stylesheet.getDefaultVertexStyle().verticalAlign = mxConstants.ALIGN_TOP; + graph.stylesheet.getDefaultVertexStyle().perimiter = mxPerimeter.EntityPerimeter; - graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_SHADOW] = true; - graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_FILLCOLOR] = '#DDEAFF'; - graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_GRADIENTCOLOR] = '#A9C4EB'; - delete graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_STROKECOLOR]; + graph.stylesheet.getDefaultVertexStyle().shadow = true; + graph.stylesheet.getDefaultVertexStyle().fillColor = '#DDEAFF'; + graph.stylesheet.getDefaultVertexStyle().gradientColor = '#A9C4EB'; + delete graph.stylesheet.getDefaultVertexStyle().strokeColor; // Used for HTML labels that use up the complete vertex space (see // graph.cellRenderer.redrawLabel below for syncing the size) - graph.stylesheet.getDefaultVertexStyle()[mxConstants.STYLE_OVERFLOW] = 'fill'; + graph.stylesheet.getDefaultVertexStyle().overflow = 'fill'; // Uses the entity edge style as default - graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_EDGE] = + graph.stylesheet.getDefaultEdgeStyle().edge = mxEdgeStyle.EntityRelation; - graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_STROKECOLOR] = 'black'; - graph.stylesheet.getDefaultEdgeStyle()[mxConstants.STYLE_FONTCOLOR] = 'black'; + graph.stylesheet.getDefaultEdgeStyle().strokeColor = 'black'; + graph.stylesheet.getDefaultEdgeStyle().fontColor = 'black'; // Allows new connections to be made but do not allow existing // connections to be changed for the sake of simplicity of this diff --git a/docs/stashed/ServerView.js b/docs/stashed/ServerView.js index 736e4f819..4aff42ce7 100644 --- a/docs/stashed/ServerView.js +++ b/docs/stashed/ServerView.js @@ -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; } }; diff --git a/docs/stashed/Touch.js b/docs/stashed/Touch.js index 478cc86f4..c89c71c3b 100644 --- a/docs/stashed/Touch.js +++ b/docs/stashed/Touch.js @@ -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) { diff --git a/docs/stashed/Wires.js b/docs/stashed/Wires.js index 1d4c318a9..4efa4d6d3 100644 --- a/docs/stashed/Wires.js +++ b/docs/stashed/Wires.js @@ -134,7 +134,7 @@ export default MYNAMEHERE; let geo = (terminal != null) ? terminal.cell.getGeometry() : null; if ((geo != null ? !geo.relative : false) && - this.getModel().isVertex(terminal.cell) && + terminal.cell.isVertex() && this.getModel().getChildCount(terminal.cell) == 0) { return [new mxConnectionConstraint(new mxPoint(0, 0.5), false), @@ -182,7 +182,7 @@ export default MYNAMEHERE; let parent = this.getModel().getParent(cell); - if (this.getModel().isVertex(parent)) + if (parent.isVertex()) { tip += this.getTooltipForCell(parent) + '.'; } @@ -228,32 +228,32 @@ export default MYNAMEHERE; let fillColor = (invert) ? 'none' : '#FFFFFF'; let style = graph.getStylesheet().getDefaultEdgeStyle(); - delete style['endArrow']; - style['strokeColor'] = strokeColor; - style['labelBackgroundColor'] = labelBackground; - style['edgeStyle'] = 'wireEdgeStyle'; - style['fontColor'] = fontColor; - style['fontSize'] = '9'; - style['movable'] = '0'; - style['strokeWidth'] = strokeWidth; - //style['rounded'] = '1'; + delete style.endArrow; + style.strokeColor = strokeColor; + style.labelBackgroundColor = labelBackground; + style.edgeStyle = 'wireEdgeStyle'; + style.fontColor = fontColor; + style.fontSize = '9'; + style.movable = '0'; + style.strokeWidth = strokeWidth; + //style.rounded = '1'; // Sets join node size - style['startSize'] = joinNodeSize; - style['endSize'] = joinNodeSize; + style.startSize = joinNodeSize; + style.endSize = joinNodeSize; style = graph.getStylesheet().getDefaultVertexStyle(); - style['gradientDirection'] = 'south'; - //style['gradientColor'] = '#909090'; - style['strokeColor'] = strokeColor; - //style['fillColor'] = '#e0e0e0'; - style['fillColor'] = 'none'; - style['fontColor'] = fontColor; - style['fontStyle'] = '1'; - style['fontSize'] = '12'; - style['resizable'] = '0'; - style['rounded'] = '1'; - style['strokeWidth'] = strokeWidth; + style.gradientDirection = 'south'; + //style.gradientColor = '#909090'; + style.strokeColor = strokeColor; + //style.fillColor = '#e0e0e0'; + style.fillColor = 'none'; + style.fontColor = fontColor; + style.fontStyle = '1'; + style.fontSize = '12'; + style.resizable = '0'; + style.rounded = '1'; + style.strokeWidth = strokeWidth; let parent = graph.getDefaultParent(); @@ -581,8 +581,8 @@ export default MYNAMEHERE; if (this.sourceConstraint != null && this.previous != null) { - edge.style = mxConstants.STYLE_EXIT_X+'='+this.sourceConstraint.point.x+';'+ - mxConstants.STYLE_EXIT_Y+'='+this.sourceConstraint.point.y+';'; + edge.style = 'exitX'+'='+this.sourceConstraint.point.x+';'+ + 'exitY'+'='+this.sourceConstraint.point.y+';'; } else if (this.graph.model.isEdge(me.getCell())) { @@ -724,8 +724,8 @@ export default MYNAMEHERE; this.state.style = this.lastStyle; // Workaround for shape using current stroke width if no strokewidth defined - this.state.style['strokeWidth'] = this.state.style['strokeWidth'] || '1'; - this.state.style['strokeColor'] = this.state.style['strokeColor'] || 'none'; + this.state.style.strokeWidth = this.state.style.strokeWidth || '1'; + this.state.style.strokeColor = this.state.style.strokeColor || 'none'; if (this.state.shape != null) { @@ -738,8 +738,8 @@ export default MYNAMEHERE; { this.lastStyle = state.style; state.style = mxUtils.clone(state.style); - state.style['strokeColor'] = '#00ff00'; - state.style['strokeWidth'] = '3'; + state.style.strokeColor = '#00ff00'; + state.style.strokeWidth = '3'; if (state.shape != null) { @@ -781,12 +781,12 @@ export default MYNAMEHERE; if (this.model.isEdge(this.model.getTerminal(cell, true))) { - style['startArrow'] = 'oval'; + style.startArrow = 'oval'; } if (this.model.isEdge(this.model.getTerminal(cell, false))) { - style['endArrow'] = 'oval'; + style.endArrow = 'oval'; } } @@ -838,14 +838,14 @@ export default MYNAMEHERE; // Gets the initial connection from the source terminal or edge if (source != null && state.view.graph.model.isEdge(source.cell)) { - horizontal = state.style['sourceConstraint'] == 'horizontal'; + horizontal = state.style.sourceConstraint == 'horizontal'; } else if (source != null) { - horizontal = source.style['portConstraint'] != 'vertical'; + horizontal = source.style.portConstraint != 'vertical'; // Checks the direction of the shape and rotates - let direction = source.style[mxConstants.STYLE_DIRECTION]; + let direction = source.style.direction; if (direction == 'north' || direction == 'south') { diff --git a/docs/stashed/grapheditor/www/js/Actions.js b/docs/stashed/grapheditor/www/js/Actions.js index e9190dc6d..f3b0cc18a 100644 --- a/docs/stashed/grapheditor/www/js/Actions.js +++ b/docs/stashed/grapheditor/www/js/Actions.js @@ -283,11 +283,11 @@ Actions.prototype.init = function() try { let defaultValue = graph.isCellMovable(graph.getSelectionCell()) ? 1 : 0; - graph.toggleCellStyles(mxConstants.STYLE_MOVABLE, defaultValue); - graph.toggleCellStyles(mxConstants.STYLE_RESIZABLE, defaultValue); - graph.toggleCellStyles(mxConstants.STYLE_ROTATABLE, defaultValue); - graph.toggleCellStyles(mxConstants.STYLE_DELETABLE, defaultValue); - graph.toggleCellStyles(mxConstants.STYLE_EDITABLE, defaultValue); + graph.toggleCellStyles('movable', defaultValue); + graph.toggleCellStyles('resizable', defaultValue); + graph.toggleCellStyles('rotatable', defaultValue); + graph.toggleCellStyles('deletable', defaultValue); + graph.toggleCellStyles('editable', defaultValue); graph.toggleCellStyles('connectable', defaultValue); } finally @@ -628,7 +628,7 @@ Actions.prototype.init = function() if (refState != null) { graph.stopEditing(); - let value = (refState.style['html'] == '1') ? null : '1'; + let value = (refState.style.html == '1') ? null : '1'; graph.getModel().beginUpdate(); try @@ -696,12 +696,12 @@ Actions.prototype.init = function() graph.stopEditing(); - if (state != null && state.style[mxConstants.STYLE_WHITE_SPACE] == 'wrap') + if (state != null && state.style.whiteSpace == 'wrap') { value = null; } - graph.setCellStyles(mxConstants.STYLE_WHITE_SPACE, value); + graph.setCellStyles('whiteSpace', value); }); this.addAction('rotation', function() { @@ -710,14 +710,14 @@ Actions.prototype.init = function() if (state != null) { - value = state.style[mxConstants.STYLE_ROTATION] || value; + value = state.style.rotation || value; } let dlg = new FilenameDialog(ui, value, mxResources.get('apply'), function(newValue) { if (newValue != null && newValue.length > 0) { - graph.setCellStyles(mxConstants.STYLE_ROTATION, newValue); + graph.setCellStyles('rotation', newValue); } }, mxResources.get('enterValue') + ' (' + mxResources.get('rotation') + ' 0-360)'); @@ -1004,7 +1004,7 @@ Actions.prototype.init = function() try { let cells = graph.getSelectionCells(); - graph.toggleCellStyleFlags(mxConstants.STYLE_FONTSTYLE, style, cells); + graph.toggleCellStyleFlags('fontStyle', style, cells); // Removes bold and italic tags and CSS styles inside labels if ((style & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD) @@ -1065,24 +1065,24 @@ Actions.prototype.init = function() toggleFontStyle('underline', mxConstants.FONT_UNDERLINE, function() { document.execCommand('underline', false, null); }, Editor.ctrlKey + '+U'); // Color actions - this.addAction('fontColor...', function() { ui.menus.pickColor(mxConstants.STYLE_FONTCOLOR, 'forecolor', '000000'); }); - this.addAction('strokeColor...', function() { ui.menus.pickColor(mxConstants.STYLE_STROKECOLOR); }); - this.addAction('fillColor...', function() { ui.menus.pickColor(mxConstants.STYLE_FILLCOLOR); }); - this.addAction('gradientColor...', function() { ui.menus.pickColor(mxConstants.STYLE_GRADIENTCOLOR); }); - this.addAction('backgroundColor...', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, 'backcolor'); }); - this.addAction('borderColor...', function() { ui.menus.pickColor(mxConstants.STYLE_LABEL_BORDERCOLOR); }); + this.addAction('fontColor...', function() { ui.menus.pickColor('fontColor', 'forecolor', '000000'); }); + this.addAction('strokeColor...', function() { ui.menus.pickColor('strokeColor'); }); + this.addAction('fillColor...', function() { ui.menus.pickColor('fillColor'); }); + this.addAction('gradientColor...', function() { ui.menus.pickColor('gradientColor'); }); + this.addAction('backgroundColor...', function() { ui.menus.pickColor('backgroundColor', 'backcolor'); }); + this.addAction('borderColor...', function() { ui.menus.pickColor('labelBorderColor'); }); // Format actions - this.addAction('vertical', function() { ui.menus.toggleStyle(mxConstants.STYLE_HORIZONTAL, true); }); - this.addAction('shadow', function() { ui.menus.toggleStyle(mxConstants.STYLE_SHADOW); }); + this.addAction('vertical', function() { ui.menus.toggleStyle('horizontal', true); }); + this.addAction('shadow', function() { ui.menus.toggleStyle('shadow'); }); this.addAction('solid', function() { graph.getModel().beginUpdate(); try { - graph.setCellStyles(mxConstants.STYLE_DASHED, null); - graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, null); - ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], + graph.setCellStyles('dashed', null); + graph.setCellStyles('dashPattern', null); + ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'], 'values', [null, null], 'cells', graph.getSelectionCells())); } finally @@ -1095,9 +1095,9 @@ Actions.prototype.init = function() graph.getModel().beginUpdate(); try { - graph.setCellStyles(mxConstants.STYLE_DASHED, '1'); - graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, null); - ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], + graph.setCellStyles('dashed', '1'); + graph.setCellStyles('dashPattern', null); + ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'], 'values', ['1', null], 'cells', graph.getSelectionCells())); } finally @@ -1110,9 +1110,9 @@ Actions.prototype.init = function() graph.getModel().beginUpdate(); try { - graph.setCellStyles(mxConstants.STYLE_DASHED, '1'); - graph.setCellStyles(mxConstants.STYLE_DASH_PATTERN, '1 4'); - ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], + graph.setCellStyles('dashed', '1'); + graph.setCellStyles('dashPattern', '1 4'); + ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['dashed', 'dashPattern'], 'values', ['1', '1 4'], 'cells', graph.getSelectionCells())); } finally @@ -1125,9 +1125,9 @@ Actions.prototype.init = function() graph.getModel().beginUpdate(); try { - graph.setCellStyles(mxConstants.STYLE_ROUNDED, '0'); - graph.setCellStyles(mxConstants.STYLE_CURVED, '0'); - ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED], + graph.setCellStyles('rounded', '0'); + graph.setCellStyles('curved', '0'); + ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'], 'values', ['0', '0'], 'cells', graph.getSelectionCells())); } finally @@ -1140,9 +1140,9 @@ Actions.prototype.init = function() graph.getModel().beginUpdate(); try { - graph.setCellStyles(mxConstants.STYLE_ROUNDED, '1'); - graph.setCellStyles(mxConstants.STYLE_CURVED, '0'); - ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED], + graph.setCellStyles('rounded', '1'); + graph.setCellStyles('curved', '0'); + ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'], 'values', ['1', '0'], 'cells', graph.getSelectionCells())); } finally @@ -1159,11 +1159,11 @@ Actions.prototype.init = function() { let cells = graph.getSelectionCells(); let style = graph.getCurrentCellStyle(cells[0]); - let value = (mxUtils.getValue(style, mxConstants.STYLE_ROUNDED, '0') == '1') ? '0' : '1'; + let value = (mxUtils.getValue(style, 'rounded', '0') == '1') ? '0' : '1'; - graph.setCellStyles(mxConstants.STYLE_ROUNDED, value); - graph.setCellStyles(mxConstants.STYLE_CURVED, null); - ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED], + graph.setCellStyles('rounded', value); + graph.setCellStyles('curved', null); + ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'], 'values', [value, '0'], 'cells', graph.getSelectionCells())); } finally @@ -1177,9 +1177,9 @@ Actions.prototype.init = function() graph.getModel().beginUpdate(); try { - graph.setCellStyles(mxConstants.STYLE_ROUNDED, '0'); - graph.setCellStyles(mxConstants.STYLE_CURVED, '1'); - ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED], + graph.setCellStyles('rounded', '0'); + graph.setCellStyles('curved', '1'); + ui.fireEvent(new mxEventObject('styleChanged', 'keys', ['rounded', 'curved'], 'values', ['0', '1'], 'cells', graph.getSelectionCells())); } finally @@ -1347,7 +1347,7 @@ Actions.prototype.init = function() if (state != null) { - value = state.style[mxConstants.STYLE_IMAGE] || value; + value = state.style.image || value; } let selectionState = graph.cellEditor.saveSelection(); @@ -1384,18 +1384,18 @@ Actions.prototype.init = function() graph.fireEvent(new mxEventObject('cellsInserted', 'cells', select)); } - graph.setCellStyles(mxConstants.STYLE_IMAGE, (newValue.length > 0) ? newValue : null, cells); + graph.setCellStyles('image', (newValue.length > 0) ? newValue : null, cells); // Sets shape only if not already shape with image (label or image) let style = graph.getCurrentCellStyle(cells[0]); - if (style[mxConstants.STYLE_SHAPE] != 'image' && style[mxConstants.STYLE_SHAPE] != 'label') + if (style.shape != 'image' && style.shape != 'label') { - graph.setCellStyles(mxConstants.STYLE_SHAPE, 'image', cells); + graph.setCellStyles('shape', 'image', cells); } else if (newValue.length == 0) { - graph.setCellStyles(mxConstants.STYLE_SHAPE, null, cells); + graph.setCellStyles('shape', null, cells); } if (graph.getSelectionCount() == 1) diff --git a/docs/stashed/grapheditor/www/js/EditorUi.js b/docs/stashed/grapheditor/www/js/EditorUi.js index 40f5c34c9..6c810ebfc 100644 --- a/docs/stashed/grapheditor/www/js/EditorUi.js +++ b/docs/stashed/grapheditor/www/js/EditorUi.js @@ -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); } diff --git a/docs/stashed/grapheditor/www/js/Format.js b/docs/stashed/grapheditor/www/js/Format.js index 57635449f..994edd900 100644 --- a/docs/stashed/grapheditor/www/js/Format.js +++ b/docs/stashed/grapheditor/www/js/Format.js @@ -224,7 +224,7 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells) result.fill = result.fill && this.isFillState(state); result.stroke = result.stroke && this.isStrokeState(state); - let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null); + let shape = mxUtils.getValue(state.style, 'shape', null); result.containsImage = result.containsImage || shape == 'image'; for (var key in state.style) @@ -251,11 +251,11 @@ Format.prototype.updateSelectionStateForCell = function(result, cell, cells) */ Format.prototype.isFillState = function(state) { - return !this.isSpecialColor(state.style[mxConstants.STYLE_FILLCOLOR]) && + return !this.isSpecialColor(state.style.fillColor) && (state.cell.isVertex() || - mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'arrow' || - mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'filledEdge' || - mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) == 'flexArrow'); + mxUtils.getValue(state.style, 'shape', null) == 'arrow' || + mxUtils.getValue(state.style, 'shape', null) == 'filledEdge' || + mxUtils.getValue(state.style, 'shape', null) == 'flexArrow'); }; /** @@ -263,7 +263,7 @@ Format.prototype.isFillState = function(state) */ Format.prototype.isStrokeState = function(state) { - return !this.isSpecialColor(state.style[mxConstants.STYLE_STROKECOLOR]); + return !this.isSpecialColor(state.style.strokeColor); }; /** @@ -271,8 +271,8 @@ Format.prototype.isStrokeState = function(state) */ Format.prototype.isSpecialColor = function(color) { - return mxUtils.indexOf([mxConstants.STYLE_STROKECOLOR, - mxConstants.STYLE_FILLCOLOR, 'inherit', 'swimlane', + return mxUtils.indexOf(['strokeColor', + 'fillColor', 'inherit', 'swimlane', 'indicated'], color) >= 0; }; @@ -281,7 +281,7 @@ Format.prototype.isSpecialColor = function(color) */ Format.prototype.isGlassState = function(state) { - let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null); + let shape = mxUtils.getValue(state.style, 'shape', null); return (shape == 'label' || shape == 'rectangle' || shape == 'internalStorage' || shape == 'ext' || shape == 'umlLifeline' || shape == 'swimlane' || @@ -295,7 +295,7 @@ Format.prototype.isRoundedState = function(state) { return (state.shape != null) ? state.shape.isRoundable() : mxUtils.indexOf(this.roundableShapes, mxUtils.getValue(state.style, - mxConstants.STYLE_SHAPE, null)) >= 0; + 'shape', null)) >= 0; }; /** @@ -303,8 +303,8 @@ Format.prototype.isRoundedState = function(state) */ Format.prototype.isLineJumpState = function(state) { - let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null); - let curved = mxUtils.getValue(state.style, mxConstants.STYLE_CURVED, false); + let shape = mxUtils.getValue(state.style, 'shape', null); + let curved = mxUtils.getValue(state.style, 'curved', false); return !curved && (shape == 'connector' || shape == 'filledEdge'); }; @@ -314,7 +314,7 @@ Format.prototype.isLineJumpState = function(state) */ Format.prototype.isAutoSizeState = function(state) { - return mxUtils.getValue(state.style, mxConstants.STYLE_AUTOSIZE, null) == '1'; + return mxUtils.getValue(state.style, 'autoSize', null) == '1'; }; /** @@ -322,7 +322,7 @@ Format.prototype.isAutoSizeState = function(state) */ Format.prototype.isImageState = function(state) { - let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null); + let shape = mxUtils.getValue(state.style, 'shape', null); return (shape == 'label' || shape == 'image'); }; @@ -332,7 +332,7 @@ Format.prototype.isImageState = function(state) */ Format.prototype.isShadowState = function(state) { - let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null); + let shape = mxUtils.getValue(state.style, 'shape', null); return (shape != 'image'); }; @@ -628,7 +628,7 @@ BaseFormatPanel.prototype.getSelectionState = function() if (state != null) { - let tmp = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null); + let tmp = mxUtils.getValue(state.style, 'shape', null); if (tmp != null) { @@ -670,7 +670,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu let value = (isFloat) ? parseFloat(input.value) : parseInt(input.value); // Special case: angle mod 360 - if (!isNaN(value) && key == mxConstants.STYLE_ROTATION) + if (!isNaN(value) && key == 'rotation') { // Workaround for decimal rounding errors in floats is to // use integer and round all numbers to two decimal point @@ -712,7 +712,7 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu graph.setCellStyles(key, value, cells); // Handles special case for fontSize where HTML labels are parsed and updated - if (key == mxConstants.STYLE_FONTSIZE) + if (key == 'fontSize') { graph.updateLabelElements(graph.getSelectionCells(), function(elt) { @@ -1937,7 +1937,7 @@ ArrangePanel.prototype.addFlip = function(div) let btn = mxUtils.button(mxResources.get('horizontal'), function(evt) { - graph.toggleCellStyles(mxConstants.STYLE_FLIPH, false); + graph.toggleCellStyles('flipH', false); }) btn.setAttribute('title', mxResources.get('horizontal')); @@ -1947,7 +1947,7 @@ ArrangePanel.prototype.addFlip = function(div) let btn = mxUtils.button(mxResources.get('vertical'), function(evt) { - graph.toggleCellStyles(mxConstants.STYLE_FLIPV, false); + graph.toggleCellStyles('flipV', false); }) btn.setAttribute('title', mxResources.get('vertical')); @@ -2067,12 +2067,12 @@ ArrangePanel.prototype.addAngle = function(div) if (force || document.activeElement != input) { ss = this.format.getSelectionState(); - let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_ROTATION, 0)); + let tmp = parseFloat(mxUtils.getValue(ss.style, 'rotation', 0)); input.value = (isNaN(tmp)) ? '' : tmp + '°'; } }); - update = this.installInputHandler(input, mxConstants.STYLE_ROTATION, 0, 0, 360, '°', null, true); + update = this.installInputHandler(input, 'rotation', 0, 0, 360, '°', null, true); this.addKeyHandler(input, listener); graph.getModel().addListener(mxEvent.CHANGE, listener); @@ -2215,7 +2215,7 @@ ArrangePanel.prototype.addGeometry = function(container) wrapper.style.whiteSpace = 'nowrap'; wrapper.style.textAlign = 'right'; let opt = this.createCellOption(mxResources.get('constrainProportions'), - mxConstants.STYLE_ASPECT, null, 'fixed', 'null'); + 'aspect', null, 'fixed', 'null'); opt.style.width = '100%'; wrapper.appendChild(opt); @@ -2828,19 +2828,19 @@ TextFormatPanel.prototype.addFont = function(container) function(evt) { graph.cellEditor.alignText(mxConstants.ALIGN_LEFT, evt); - } : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_LEFT])), stylePanel3); + } : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_LEFT])), stylePanel3); let center = this.editorUi.toolbar.addButton('geSprite-center', mxResources.get('center'), (graph.cellEditor.isContentEditing()) ? function(evt) { graph.cellEditor.alignText(mxConstants.ALIGN_CENTER, evt); - } : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_CENTER])), stylePanel3); + } : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_CENTER])), stylePanel3); let right = this.editorUi.toolbar.addButton('geSprite-right', mxResources.get('right'), (graph.cellEditor.isContentEditing()) ? function(evt) { graph.cellEditor.alignText(mxConstants.ALIGN_RIGHT, evt); - } : callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_ALIGN], [mxConstants.ALIGN_RIGHT])), stylePanel3); + } : callFn(this.editorUi.menus.createStyleChangeFunction(.align, [mxConstants.ALIGN_RIGHT])), stylePanel3); this.styleButtons([left, center, right]); @@ -2863,11 +2863,11 @@ TextFormatPanel.prototype.addFont = function(container) } let top = this.editorUi.toolbar.addButton('geSprite-top', mxResources.get('top'), - callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_TOP])), stylePanel3); + callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_TOP])), stylePanel3); let middle = this.editorUi.toolbar.addButton('geSprite-middle', mxResources.get('middle'), - callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_MIDDLE])), stylePanel3); + callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_MIDDLE])), stylePanel3); let bottom = this.editorUi.toolbar.addButton('geSprite-bottom', mxResources.get('bottom'), - callFn(this.editorUi.menus.createStyleChangeFunction([mxConstants.STYLE_VERTICAL_ALIGN], [mxConstants.ALIGN_BOTTOM])), stylePanel3); + callFn(this.editorUi.menus.createStyleChangeFunction(.verticalAlign, [mxConstants.ALIGN_BOTTOM])), stylePanel3); this.styleButtons([top, middle, bottom]); @@ -3038,10 +3038,10 @@ TextFormatPanel.prototype.addFont = function(container) if (vals != null) { - graph.setCellStyles(mxConstants.STYLE_LABEL_POSITION, vals[0], graph.getSelectionCells()); - graph.setCellStyles(mxConstants.STYLE_VERTICAL_LABEL_POSITION, vals[1], graph.getSelectionCells()); - graph.setCellStyles(mxConstants.STYLE_ALIGN, vals[2], graph.getSelectionCells()); - graph.setCellStyles(mxConstants.STYLE_VERTICAL_ALIGN, vals[3], graph.getSelectionCells()); + graph.setCellStyles('labelPosition', vals[0], graph.getSelectionCells()); + graph.setCellStyles('verticalLabelPosition', vals[1], graph.getSelectionCells()); + graph.setCellStyles('align', vals[2], graph.getSelectionCells()); + graph.setCellStyles('verticalAlign', vals[3], graph.getSelectionCells()); } } finally @@ -3058,7 +3058,7 @@ TextFormatPanel.prototype.addFont = function(container) mxEvent.addListener(dirSelect, 'change', function(evt) { - graph.setCellStyles(mxConstants.STYLE_TEXT_DIRECTION, dirSet[dirSelect.value], graph.getSelectionCells()); + graph.setCellStyles('textDirection', dirSet[dirSelect.value], graph.getSelectionCells()); mxEvent.consume(evt); }); } @@ -3077,7 +3077,7 @@ TextFormatPanel.prototype.addFont = function(container) // after first character was entered (as the font element is lazy created) let pendingFontSize = null; - let inputUpdate = this.installInputHandler(input, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize, 1, 999, ' pt', + let inputUpdate = this.installInputHandler(input, 'fontSize', Menus.prototype.defaultFontSize, 1, 999, ' pt', function(fontSize) { // IE does not support containsNode @@ -3234,7 +3234,7 @@ TextFormatPanel.prototype.addFont = function(container) { install: function(apply) { bgColorApply = apply; }, destroy: function() { bgColorApply = null; } - }, null, true) : this.createCellColorOption(mxResources.get('backgroundColor'), mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, '#ffffff', null, function(color) + }, null, true) : this.createCellColorOption(mxResources.get('backgroundColor'), 'backgroundColor', '#ffffff', null, function(color) { graph.updateLabelElements(graph.getSelectionCells(), function(elt) { @@ -3243,7 +3243,7 @@ TextFormatPanel.prototype.addFont = function(container) }); bgPanel.style.fontWeight = 'bold'; - let borderPanel = this.createCellColorOption(mxResources.get('borderColor'), mxConstants.STYLE_LABEL_BORDERCOLOR, '#000000'); + let borderPanel = this.createCellColorOption(mxResources.get('borderColor'), 'labelBorderColor', '#000000'); borderPanel.style.fontWeight = 'bold'; let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); @@ -3311,12 +3311,12 @@ TextFormatPanel.prototype.addFont = function(container) document.execCommand('forecolor', false, (color != mxConstants.NONE) ? color : 'transparent'); } - }, (defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : '#000000', + }, (defs.strokeColor != null) ? defs.strokeColor : '#000000', { install: function(apply) { fontColorApply = apply; }, destroy: function() { fontColorApply = null; } - }, null, true) : this.createCellColorOption(mxResources.get('fontColor'), mxConstants.STYLE_FONTCOLOR, - (defs[mxConstants.STYLE_FONTCOLOR] != null) ? defs[mxConstants.STYLE_FONTCOLOR] : '#000000', function(color) + }, null, true) : this.createCellColorOption(mxResources.get('fontColor'), 'fontColor', + (defs.strokeColor != null) ? defs.strokeColor : '#000000', function(color) { if (color == mxConstants.NONE) { @@ -3332,14 +3332,14 @@ TextFormatPanel.prototype.addFont = function(container) { if (color == mxConstants.NONE) { - graph.setCellStyles(mxConstants.STYLE_NOLABEL, '1', graph.getSelectionCells()); + graph.setCellStyles('noLabel', '1', graph.getSelectionCells()); } else { - graph.setCellStyles(mxConstants.STYLE_NOLABEL, null, graph.getSelectionCells()); + graph.setCellStyles('noLabel', null, graph.getSelectionCells()); } - graph.updateCellStyles(mxConstants.STYLE_FONTCOLOR, color, graph.getSelectionCells()); + graph.updateCellStyles('fontColor', color, graph.getSelectionCells()); graph.updateLabelElements(graph.getSelectionCells(), function(elt) { @@ -3364,7 +3364,7 @@ TextFormatPanel.prototype.addFont = function(container) extraPanel.style.paddingBottom = '4px'; // LATER: Fix toggle using '' instead of 'null' - let wwOpt = this.createCellOption(mxResources.get('wordWrap'), mxConstants.STYLE_WHITE_SPACE, null, 'wrap', 'null', null, null, true); + let wwOpt = this.createCellOption(mxResources.get('wordWrap'), 'whiteSpace', null, 'wrap', 'null', null, null, true); wwOpt.style.fontWeight = 'bold'; // Word wrap in edge labels only supported via labelWidth style @@ -3429,7 +3429,7 @@ TextFormatPanel.prototype.addFont = function(container) if (!graph.cellEditor.isContentEditing()) { container.appendChild(extraPanel); - container.appendChild(this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_TEXT_OPACITY)); + container.appendChild(this.createRelativeOption(mxResources.get('opacity'), 'textOpacity')); container.appendChild(spacingPanel); } else @@ -3759,32 +3759,32 @@ TextFormatPanel.prototype.addFont = function(container) let listener = mxUtils.bind(this, function(sender, evt, force) { ss = this.format.getSelectionState(); - let fontStyle = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSTYLE, 0); + let fontStyle = mxUtils.getValue(ss.style, 'fontStyle', 0); setSelected(fontStyleItems[0], (fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD); setSelected(fontStyleItems[1], (fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC); setSelected(fontStyleItems[2], (fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE); - fontMenu.firstChild.nodeValue = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTFAMILY, Menus.prototype.defaultFont); + fontMenu.firstChild.nodeValue = mxUtils.getValue(ss.style, 'fontFamily', Menus.prototype.defaultFont); - setSelected(verticalItem, mxUtils.getValue(ss.style, mxConstants.STYLE_HORIZONTAL, '1') == '0'); + setSelected(verticalItem, mxUtils.getValue(ss.style, 'horizontal', '1') == '0'); if (force || document.activeElement != input) { - let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSIZE, Menus.prototype.defaultFontSize)); + let tmp = parseFloat(mxUtils.getValue(ss.style, 'fontSize', Menus.prototype.defaultFontSize)); input.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } - let align = mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER); + let align = mxUtils.getValue(ss.style, 'align', mxConstants.ALIGN_CENTER); setSelected(left, align == mxConstants.ALIGN_LEFT); setSelected(center, align == mxConstants.ALIGN_CENTER); setSelected(right, align == mxConstants.ALIGN_RIGHT); - let valign = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE); + let valign = mxUtils.getValue(ss.style, 'verticalAlign', mxConstants.ALIGN_MIDDLE); setSelected(top, valign == mxConstants.ALIGN_TOP); setSelected(middle, valign == mxConstants.ALIGN_MIDDLE); setSelected(bottom, valign == mxConstants.ALIGN_BOTTOM); - let pos = mxUtils.getValue(ss.style, mxConstants.STYLE_LABEL_POSITION, mxConstants.ALIGN_CENTER); - let vpos = mxUtils.getValue(ss.style, mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE); + let pos = mxUtils.getValue(ss.style, 'labelPosition', mxConstants.ALIGN_CENTER); + let vpos = mxUtils.getValue(ss.style, 'verticalLabelPosition', mxConstants.ALIGN_MIDDLE); if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_TOP) { @@ -3823,7 +3823,7 @@ TextFormatPanel.prototype.addFont = function(container) positionSelect.value = 'center'; } - let dir = mxUtils.getValue(ss.style, mxConstants.STYLE_TEXT_DIRECTION, mxConstants.DEFAULT_TEXT_DIRECTION); + let dir = mxUtils.getValue(ss.style, 'textDirection', mxConstants.DEFAULT_TEXT_DIRECTION); if (dir == mxConstants.TEXT_DIRECTION_RTL) { @@ -3840,40 +3840,40 @@ TextFormatPanel.prototype.addFont = function(container) if (force || document.activeElement != globalSpacing) { - let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING, 2)); + let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacing', 2)); globalSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != topSpacing) { - let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_TOP, 0)); + let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingTop', 0)); topSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != rightSpacing) { - let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_RIGHT, 0)); + let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingRight', 0)); rightSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != bottomSpacing) { - let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_BOTTOM, 0)); + let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingBottom', 0)); bottomSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != leftSpacing) { - let tmp = parseFloat(mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_LEFT, 0)); + let tmp = parseFloat(mxUtils.getValue(ss.style, 'spacingLeft', 0)); leftSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } }); - globalUpdate = this.installInputHandler(globalSpacing, mxConstants.STYLE_SPACING, 2, -999, 999, ' pt'); - topUpdate = this.installInputHandler(topSpacing, mxConstants.STYLE_SPACING_TOP, 0, -999, 999, ' pt'); - rightUpdate = this.installInputHandler(rightSpacing, mxConstants.STYLE_SPACING_RIGHT, 0, -999, 999, ' pt'); - bottomUpdate = this.installInputHandler(bottomSpacing, mxConstants.STYLE_SPACING_BOTTOM, 0, -999, 999, ' pt'); - leftUpdate = this.installInputHandler(leftSpacing, mxConstants.STYLE_SPACING_LEFT, 0, -999, 999, ' pt'); + globalUpdate = this.installInputHandler(globalSpacing, 'spacing', 2, -999, 999, ' pt'); + topUpdate = this.installInputHandler(topSpacing, 'spacingTop', 0, -999, 999, ' pt'); + rightUpdate = this.installInputHandler(rightSpacing, 'spacingRight', 0, -999, 999, ' pt'); + bottomUpdate = this.installInputHandler(bottomSpacing, 'spacingBottom', 0, -999, 999, ' pt'); + leftUpdate = this.installInputHandler(leftSpacing, 'spacingLeft', 0, -999, 999, ' pt'); this.addKeyHandler(input, listener); this.addKeyHandler(globalSpacing, listener); @@ -4020,7 +4020,7 @@ TextFormatPanel.prototype.addFont = function(container) if (!graph.cellEditor.isTableSelected()) { - let align = graph.cellEditor.align || mxUtils.getValue(ss.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER); + let align = graph.cellEditor.align || mxUtils.getValue(ss.style, 'align', mxConstants.ALIGN_CENTER); if (isEqualOrPrefixed(css.textAlign, 'justify')) { @@ -4191,7 +4191,7 @@ StyleFormatPanel.prototype.init = function() this.container.appendChild(this.addStroke(this.createPanel())); this.container.appendChild(this.addLineJumps(this.createPanel())); - let opacityPanel = this.createRelativeOption(mxResources.get('opacity'), mxConstants.STYLE_OPACITY, 41); + let opacityPanel = this.createRelativeOption(mxResources.get('opacity'), 'opacity', 41); opacityPanel.style.paddingTop = '8px'; opacityPanel.style.paddingBottom = '8px'; this.container.appendChild(opacityPanel); @@ -4313,7 +4313,7 @@ StyleFormatPanel.prototype.addSvgRule = function(container, rule, svg, styleElem styleElem.textContent = cssTxt; let xml = mxUtils.getXml(svg.documentElement); - graph.setCellStyles(mxConstants.STYLE_IMAGE, 'data:image/svg+xml,' + + graph.setCellStyles('image', 'data:image/svg+xml,' + ((window.btoa) ? btoa(xml) : Base64.encode(xml, true)), graph.getSelectionCells()); }, '#ffffff', @@ -4421,8 +4421,8 @@ StyleFormatPanel.prototype.addFill = function(container) }); let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); - let gradientPanel = this.createCellColorOption(mxResources.get('gradient'), mxConstants.STYLE_GRADIENTCOLOR, - (defs[mxConstants.STYLE_GRADIENTCOLOR] != null) ? defs[mxConstants.STYLE_GRADIENTCOLOR] : '#ffffff', function(color) + let gradientPanel = this.createCellColorOption(mxResources.get('gradient'), 'gradientColor', + (defs.gradientColor != null) ? defs.gradientColor : '#ffffff', function(color) { if (color == null || color == mxConstants.NONE) { @@ -4434,10 +4434,10 @@ StyleFormatPanel.prototype.addFill = function(container) } }, function(color) { - graph.updateCellStyles(mxConstants.STYLE_GRADIENTCOLOR, color, graph.getSelectionCells()); + graph.updateCellStyles('gradientColor', color, graph.getSelectionCells()); }); - let fillKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BACKGROUND : mxConstants.STYLE_FILLCOLOR; + let fillKey = (ss.style.shape == 'image') ? 'imageBackground' : 'fillColor'; let label = (ss.style.shape == 'image') ? mxResources.get('background') : mxResources.get('fill'); let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); @@ -4477,7 +4477,7 @@ StyleFormatPanel.prototype.addFill = function(container) let listener = mxUtils.bind(this, function() { ss = this.format.getSelectionState(); - let value = mxUtils.getValue(ss.style, mxConstants.STYLE_GRADIENT_DIRECTION, mxConstants.DIRECTION_SOUTH); + let value = mxUtils.getValue(ss.style, 'gradientDirection', mxConstants.DIRECTION_SOUTH); let fillStyle = mxUtils.getValue(ss.style, 'fillStyle', 'auto'); // Handles empty string which is not allowed as a value @@ -4490,7 +4490,7 @@ StyleFormatPanel.prototype.addFill = function(container) fillStyleSelect.value = fillStyle; container.style.display = (ss.fill) ? '' : 'none'; - let fillColor = mxUtils.getValue(ss.style, mxConstants.STYLE_FILLCOLOR, null); + let fillColor = mxUtils.getValue(ss.style, 'fillColor', null); if (!ss.fill || ss.containsImage || fillColor == null || fillColor == mxConstants.NONE || ss.style.shape == 'filledEdge') { @@ -4510,7 +4510,7 @@ StyleFormatPanel.prototype.addFill = function(container) mxEvent.addListener(gradientSelect, 'change', function(evt) { - graph.setCellStyles(mxConstants.STYLE_GRADIENT_DIRECTION, gradientSelect.value, graph.getSelectionCells()); + graph.setCellStyles('gradientDirection', gradientSelect.value, graph.getSelectionCells()); mxEvent.consume(evt); }); @@ -4593,7 +4593,7 @@ StyleFormatPanel.prototype.addStroke = function(container) graph.getModel().beginUpdate(); try { - let keys = [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED]; + let keys = ['rounded', 'curved']; // Default for rounded is 1 let values = ['0', null]; @@ -4628,7 +4628,7 @@ StyleFormatPanel.prototype.addStroke = function(container) mxEvent.consume(evt); }); - let strokeKey = (ss.style.shape == 'image') ? mxConstants.STYLE_IMAGE_BORDER : mxConstants.STYLE_STROKECOLOR; + let strokeKey = (ss.style.shape == 'image') ? 'imageBorder' : 'strokeColor'; let label = (ss.style.shape == 'image') ? mxResources.get('border') : mxResources.get('line'); let defs = (ss.vertices.length >= 1) ? graph.stylesheet.getDefaultVertexStyle() : graph.stylesheet.getDefaultEdgeStyle(); @@ -4669,11 +4669,11 @@ StyleFormatPanel.prototype.addStroke = function(container) let pattern = this.editorUi.toolbar.addMenuFunctionInContainer(stylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu) { - addItem(menu, 75, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid')); - addItem(menu, 75, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed')); - addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)'); - addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)'); - addItem(menu, 75, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)'); + addItem(menu, 75, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', mxResources.get('solid')); + addItem(menu, 75, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', mxResources.get('dashed')); + addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)'); + addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)'); + addItem(menu, 75, 'dotted', ['dashed', 'dashPattern'], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)'); })); // Used for mixed selection (vertices and edges) @@ -4681,19 +4681,19 @@ StyleFormatPanel.prototype.addStroke = function(container) let edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-connection', mxResources.get('connection'), false, mxUtils.bind(this, function(menu) { - this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line')); - this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link')); - this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['flexArrow', null, null, null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow')); - this.editorUi.menus.styleChange(menu, '', [mxConstants.STYLE_SHAPE, mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE, 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow')); + this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], [null, null, null, null], 'geIcon geSprite geSprite-connection', null, true).setAttribute('title', mxResources.get('line')); + this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['link', null, null, null], 'geIcon geSprite geSprite-linkedge', null, true).setAttribute('title', mxResources.get('link')); + this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['flexArrow', null, null, null], 'geIcon geSprite geSprite-arrow', null, true).setAttribute('title', mxResources.get('arrow')); + this.editorUi.menus.styleChange(menu, '', ['shape', 'startSize', 'endSize', 'width'], ['arrow', null, null, null], 'geIcon geSprite geSprite-simplearrow', null, true).setAttribute('title', mxResources.get('simpleArrow')); })); let altPattern = this.editorUi.toolbar.addMenuFunctionInContainer(altStylePanel, 'geSprite-orthogonal', mxResources.get('pattern'), false, mxUtils.bind(this, function(menu) { - addItem(menu, 33, 'solid', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], [null, null]).setAttribute('title', mxResources.get('solid')); - addItem(menu, 33, 'dashed', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', null]).setAttribute('title', mxResources.get('dashed')); - addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)'); - addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)'); - addItem(menu, 33, 'dotted', [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)'); + addItem(menu, 33, 'solid', ['dashed', 'dashPattern'], [null, null]).setAttribute('title', mxResources.get('solid')); + addItem(menu, 33, 'dashed', ['dashed', 'dashPattern'], ['1', null]).setAttribute('title', mxResources.get('dashed')); + addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 1']).setAttribute('title', mxResources.get('dotted') + ' (1)'); + addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 2']).setAttribute('title', mxResources.get('dotted') + ' (2)'); + addItem(menu, 33, 'dotted', ['dashed', 'dashPattern'], ['1', '1 4']).setAttribute('title', mxResources.get('dotted') + ' (3)'); })); var stylePanel2 = stylePanel.cloneNode(false); @@ -4716,10 +4716,10 @@ StyleFormatPanel.prototype.addStroke = function(container) let value = parseInt(input.value); value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value)); - if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)) + if (value != mxUtils.getValue(ss.style, 'strokeWidth', 1)) { - graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells()); - ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH], + graph.setCellStyles('strokeWidth', value, graph.getSelectionCells()); + ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth, 'values', [value], 'cells', graph.getSelectionCells())); } @@ -4733,10 +4733,10 @@ StyleFormatPanel.prototype.addStroke = function(container) let value = parseInt(altInput.value); value = Math.min(999, Math.max(1, (isNaN(value)) ? 1 : value)); - if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)) + if (value != mxUtils.getValue(ss.style, 'strokeWidth', 1)) { - graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, graph.getSelectionCells()); - ui.fireEvent(new mxEventObject('styleChanged', 'keys', [mxConstants.STYLE_STROKEWIDTH], + graph.setCellStyles('strokeWidth', value, graph.getSelectionCells()); + ui.fireEvent(new mxEventObject('styleChanged', 'keys', .strokeWidth, 'values', [value], 'cells', graph.getSelectionCells())); } @@ -4774,19 +4774,19 @@ StyleFormatPanel.prototype.addStroke = function(container) { if (ss.style.shape != 'arrow') { - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_ELBOW, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric')); + this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], [null, null, null], 'geIcon geSprite geSprite-straight', null, true).setAttribute('title', mxResources.get('straight')); + this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', null, null], 'geIcon geSprite geSprite-orthogonal', null, true).setAttribute('title', mxResources.get('orthogonal')); + this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalelbow', null, true).setAttribute('title', mxResources.get('simple')); + this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['elbowEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalelbow', null, true).setAttribute('title', mxResources.get('simple')); + this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', null, null, null], 'geIcon geSprite geSprite-horizontalisometric', null, true).setAttribute('title', mxResources.get('isometric')); + this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'elbow', 'curved', 'noEdgeStyle'], ['isometricEdgeStyle', 'vertical', null, null], 'geIcon geSprite geSprite-verticalisometric', null, true).setAttribute('title', mxResources.get('isometric')); if (ss.style.shape == 'connector') { - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved')); + this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['orthogonalEdgeStyle', '1', null], 'geIcon geSprite geSprite-curved', null, true).setAttribute('title', mxResources.get('curved')); } - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_EDGE, mxConstants.STYLE_CURVED, mxConstants.STYLE_NOEDGESTYLE], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation')); + this.editorUi.menus.edgeStyleChange(menu, '', ['edge', 'curved', 'noEdgeStyle'], ['entityRelationEdgeStyle', null, null], 'geIcon geSprite geSprite-entity', null, true).setAttribute('title', mxResources.get('entityRelation')); } })); @@ -4794,47 +4794,47 @@ StyleFormatPanel.prototype.addStroke = function(container) { if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge') { - let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false); + let item = this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.NONE, 0], 'geIcon', null, false); item.setAttribute('title', mxResources.get('none')); item.firstChild.firstChild.innerHTML = '' + mxUtils.htmlEntities(mxResources.get('none')) + ''; if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') { - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-startclassic', null, false).setAttribute('title', mxResources.get('classic')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-startclassicthin', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-startopen', null, false).setAttribute('title', mxResources.get('openArrow')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-startopenthin', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['openAsync', 0], 'geIcon geSprite geSprite-startopenasync', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-startblock', null, false).setAttribute('title', mxResources.get('block')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-startblockthin', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 1], 'geIcon geSprite geSprite-startasync', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-startoval', null, false).setAttribute('title', mxResources.get('oval')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-startdiamond', null, false).setAttribute('title', mxResources.get('diamond')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-startthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-startclassictrans', null, false).setAttribute('title', mxResources.get('classic')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-startclassicthintrans', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-startblockthintrans', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['async', 0], 'geIcon geSprite geSprite-startasynctrans', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-startovaltrans', null, false).setAttribute('title', mxResources.get('oval')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-startdiamondtrans', null, false).setAttribute('title', mxResources.get('diamond')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-startthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['box', 0], 'geIcon geSprite geSvgSprite geSprite-box', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geSprite-halfCircle', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['dash', 0], 'geIcon geSprite geSprite-startdash', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['cross', 0], 'geIcon geSprite geSprite-startcross', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-startcircleplus', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['circle', 1], 'geIcon geSprite geSprite-startcircle', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERone', 0], 'geIcon geSprite geSprite-starterone', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-starteronetoone', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERmany', 0], 'geIcon geSprite geSprite-startermany', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-starteronetomany', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-starteroneopt', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW, 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-startclassic', null, false).setAttribute('title', mxResources.get('classic')); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-startclassicthin', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-startopen', null, false).setAttribute('title', mxResources.get('openArrow')); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-startopenthin', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['openAsync', 0], 'geIcon geSprite geSprite-startopenasync', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-startblock', null, false).setAttribute('title', mxResources.get('block')); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-startblockthin', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['async', 1], 'geIcon geSprite geSprite-startasync', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-startoval', null, false).setAttribute('title', mxResources.get('oval')); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-startdiamond', null, false).setAttribute('title', mxResources.get('diamond')); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-startthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin')); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-startclassictrans', null, false).setAttribute('title', mxResources.get('classic')); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-startclassicthintrans', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block')); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-startblockthintrans', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['async', 0], 'geIcon geSprite geSprite-startasynctrans', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-startovaltrans', null, false).setAttribute('title', mxResources.get('oval')); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-startdiamondtrans', null, false).setAttribute('title', mxResources.get('diamond')); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-startthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin')); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['box', 0], 'geIcon geSprite geSvgSprite geSprite-box', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geSprite-halfCircle', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['dash', 0], 'geIcon geSprite geSprite-startdash', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['cross', 0], 'geIcon geSprite geSprite-startcross', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-startcircleplus', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['circle', 1], 'geIcon geSprite geSprite-startcircle', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERone', 0], 'geIcon geSprite geSprite-starterone', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-starteronetoone', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERmany', 0], 'geIcon geSprite geSprite-startermany', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-starteronetomany', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-starteroneopt', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['startArrow', 'startFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-startermanyopt', null, false); } else { - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_STARTARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block')); + this.editorUi.menus.edgeStyleChange(menu, '', .startArrow, [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-startblocktrans', null, false).setAttribute('title', mxResources.get('block')); } } })); @@ -4843,47 +4843,47 @@ StyleFormatPanel.prototype.addStroke = function(container) { if (ss.style.shape == 'connector' || ss.style.shape == 'flexArrow' || ss.style.shape == 'filledEdge') { - let item = this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false); + let item = this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.NONE, 0], 'geIcon', null, false); item.setAttribute('title', mxResources.get('none')); item.firstChild.firstChild.innerHTML = '' + mxUtils.htmlEntities(mxResources.get('none')) + ''; if (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') { - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-endclassic', null, false).setAttribute('title', mxResources.get('classic')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-endclassicthin', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-endopen', null, false).setAttribute('title', mxResources.get('openArrow')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-endopenthin', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['openAsync', 0], 'geIcon geSprite geSprite-endopenasync', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-endblock', null, false).setAttribute('title', mxResources.get('block')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-endblockthin', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 1], 'geIcon geSprite geSprite-endasync', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-endoval', null, false).setAttribute('title', mxResources.get('oval')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-enddiamond', null, false).setAttribute('title', mxResources.get('diamond')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-endthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-endclassictrans', null, false).setAttribute('title', mxResources.get('classic')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-endclassicthintrans', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-endblockthintrans', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['async', 0], 'geIcon geSprite geSprite-endasynctrans', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-endovaltrans', null, false).setAttribute('title', mxResources.get('oval')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-enddiamondtrans', null, false).setAttribute('title', mxResources.get('diamond')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-endthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin')); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['box', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-box', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-halfCircle', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['dash', 0], 'geIcon geSprite geSprite-enddash', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['cross', 0], 'geIcon geSprite geSprite-endcross', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-endcircleplus', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['circle', 1], 'geIcon geSprite geSprite-endcircle', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERone', 0], 'geIcon geSprite geSprite-enderone', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-enderonetoone', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERmany', 0], 'geIcon geSprite geSprite-endermany', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-enderonetomany', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-enderoneopt', null, false); - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW, 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 1], 'geIcon geSprite geSprite-endclassic', null, false).setAttribute('title', mxResources.get('classic')); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 1], 'geIcon geSprite geSprite-endclassicthin', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OPEN, 0], 'geIcon geSprite geSprite-endopen', null, false).setAttribute('title', mxResources.get('openArrow')); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OPEN_THIN, 0], 'geIcon geSprite geSprite-endopenthin', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['openAsync', 0], 'geIcon geSprite geSprite-endopenasync', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 1], 'geIcon geSprite geSprite-endblock', null, false).setAttribute('title', mxResources.get('block')); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 1], 'geIcon geSprite geSprite-endblockthin', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['async', 1], 'geIcon geSprite geSprite-endasync', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 1], 'geIcon geSprite geSprite-endoval', null, false).setAttribute('title', mxResources.get('oval')); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 1], 'geIcon geSprite geSprite-enddiamond', null, false).setAttribute('title', mxResources.get('diamond')); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 1], 'geIcon geSprite geSprite-endthindiamond', null, false).setAttribute('title', mxResources.get('diamondThin')); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC, 0], 'geIcon geSprite geSprite-endclassictrans', null, false).setAttribute('title', mxResources.get('classic')); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_CLASSIC_THIN, 0], 'geIcon geSprite geSprite-endclassicthintrans', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK, 0], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block')); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_BLOCK_THIN, 0], 'geIcon geSprite geSprite-endblockthintrans', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['async', 0], 'geIcon geSprite geSprite-endasynctrans', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_OVAL, 0], 'geIcon geSprite geSprite-endovaltrans', null, false).setAttribute('title', mxResources.get('oval')); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND, 0], 'geIcon geSprite geSprite-enddiamondtrans', null, false).setAttribute('title', mxResources.get('diamond')); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], [mxConstants.ARROW_DIAMOND_THIN, 0], 'geIcon geSprite geSprite-endthindiamondtrans', null, false).setAttribute('title', mxResources.get('diamondThin')); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['box', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-box', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['halfCircle', 0], 'geIcon geSprite geSvgSprite geFlipSprite geSprite-halfCircle', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['dash', 0], 'geIcon geSprite geSprite-enddash', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['cross', 0], 'geIcon geSprite geSprite-endcross', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['circlePlus', 0], 'geIcon geSprite geSprite-endcircleplus', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['circle', 1], 'geIcon geSprite geSprite-endcircle', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERone', 0], 'geIcon geSprite geSprite-enderone', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERmandOne', 0], 'geIcon geSprite geSprite-enderonetoone', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERmany', 0], 'geIcon geSprite geSprite-endermany', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERoneToMany', 0], 'geIcon geSprite geSprite-enderonetomany', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERzeroToOne', 1], 'geIcon geSprite geSprite-enderoneopt', null, false); + this.editorUi.menus.edgeStyleChange(menu, '', ['endArrow', 'endFill'], ['ERzeroToMany', 1], 'geIcon geSprite geSprite-endermanyopt', null, false); } else { - this.editorUi.menus.edgeStyleChange(menu, '', [mxConstants.STYLE_ENDARROW], [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block')); + this.editorUi.menus.edgeStyleChange(menu, '', .endArrow, [mxConstants.ARROW_BLOCK], 'geIcon geSprite geSprite-endblocktrans', null, false).setAttribute('title', mxResources.get('block')); } } })); @@ -5021,30 +5021,30 @@ StyleFormatPanel.prototype.addStroke = function(container) if (force || document.activeElement != input) { - let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)); + let tmp = parseInt(mxUtils.getValue(ss.style, 'strokeWidth', 1)); input.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != altInput) { - let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)); + let tmp = parseInt(mxUtils.getValue(ss.style, 'strokeWidth', 1)); altInput.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } styleSelect.style.visibility = (ss.style.shape == 'connector' || ss.style.shape == 'filledEdge') ? '' : 'hidden'; - if (mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1') + if (mxUtils.getValue(ss.style, 'curved', null) == '1') { styleSelect.value = 'curved'; } - else if (mxUtils.getValue(ss.style, mxConstants.STYLE_ROUNDED, null) == '1') + else if (mxUtils.getValue(ss.style, 'rounded', null) == '1') { styleSelect.value = 'rounded'; } - if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASHED, null) == '1') + if (mxUtils.getValue(ss.style, 'dashed', null) == '1') { - if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, null) == null) + if (mxUtils.getValue(ss.style, 'dashPattern', null) == null) { solid.style.borderBottom = '1px dashed ' + this.defaultStrokeColor; } @@ -5065,14 +5065,14 @@ StyleFormatPanel.prototype.addStroke = function(container) if (edgeStyleDiv != null) { - let es = mxUtils.getValue(ss.style, mxConstants.STYLE_EDGE, null); + let es = mxUtils.getValue(ss.style, 'edge', null); - if (mxUtils.getValue(ss.style, mxConstants.STYLE_NOEDGESTYLE, null) == '1') + if (mxUtils.getValue(ss.style, 'noEdgeStyle', null) == '1') { es = null; } - if (es == 'orthogonalEdgeStyle' && mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == '1') + if (es == 'orthogonalEdgeStyle' && mxUtils.getValue(ss.style, 'curved', null) == '1') { edgeStyleDiv.className = 'geSprite geSprite-curved'; } @@ -5087,13 +5087,13 @@ StyleFormatPanel.prototype.addStroke = function(container) else if (es == 'elbowEdgeStyle') { edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style, - mxConstants.STYLE_ELBOW, null) == 'vertical') ? + 'elbow', null) == 'vertical') ? 'geSprite-verticalelbow' : 'geSprite-horizontalelbow'); } else if (es == 'isometricEdgeStyle') { edgeStyleDiv.className = 'geSprite ' + ((mxUtils.getValue(ss.style, - mxConstants.STYLE_ELBOW, null) == 'vertical') ? + 'elbow', null) == 'vertical') ? 'geSprite-verticalisometric' : 'geSprite-horizontalisometric'); } else @@ -5160,9 +5160,9 @@ StyleFormatPanel.prototype.addStroke = function(container) return markerDiv; }; - let sourceDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTARROW, null), + let sourceDiv = updateArrow(mxUtils.getValue(ss.style, 'startArrow', null), mxUtils.getValue(ss.style, 'startFill', '1'), lineStart, 'start'); - let targetDiv = updateArrow(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDARROW, null), + let targetDiv = updateArrow(mxUtils.getValue(ss.style, 'endArrow', null), mxUtils.getValue(ss.style, 'endFill', '1'), lineEnd, 'end'); // Special cases for markers @@ -5195,40 +5195,40 @@ StyleFormatPanel.prototype.addStroke = function(container) if (force || document.activeElement != startSize) { - let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE)); + let tmp = parseInt(mxUtils.getValue(ss.style, 'startSize', mxConstants.DEFAULT_MARKERSIZE)); startSize.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != startSpacing) { - let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0)); + let tmp = parseInt(mxUtils.getValue(ss.style, 'sourcePerimeterSpacing', 0)); startSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != endSize) { - let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE)); + let tmp = parseInt(mxUtils.getValue(ss.style, 'endSize', mxConstants.DEFAULT_MARKERSIZE)); endSize.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != startSpacing) { - let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0)); + let tmp = parseInt(mxUtils.getValue(ss.style, 'targetPerimeterSpacing', 0)); endSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } if (force || document.activeElement != perimeterSpacing) { - let tmp = parseInt(mxUtils.getValue(ss.style, mxConstants.STYLE_PERIMETER_SPACING, 0)); + let tmp = parseInt(mxUtils.getValue(ss.style, 'perimeterSpacing', 0)); perimeterSpacing.value = (isNaN(tmp)) ? '' : tmp + ' pt'; } }); - startSizeUpdate = this.installInputHandler(startSize, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt'); - startSpacingUpdate = this.installInputHandler(startSpacing, mxConstants.STYLE_SOURCE_PERIMETER_SPACING, 0, -999, 999, ' pt'); - endSizeUpdate = this.installInputHandler(endSize, mxConstants.STYLE_ENDSIZE, mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt'); - endSpacingUpdate = this.installInputHandler(endSpacing, mxConstants.STYLE_TARGET_PERIMETER_SPACING, 0, -999, 999, ' pt'); - perimeterUpdate = this.installInputHandler(perimeterSpacing, mxConstants.STYLE_PERIMETER_SPACING, 0, 0, 999, ' pt'); + startSizeUpdate = this.installInputHandler(startSize, 'startSize', mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt'); + startSpacingUpdate = this.installInputHandler(startSpacing, 'sourcePerimeterSpacing', 0, -999, 999, ' pt'); + endSizeUpdate = this.installInputHandler(endSize, 'endSize', mxConstants.DEFAULT_MARKERSIZE, 0, 999, ' pt'); + endSpacingUpdate = this.installInputHandler(endSpacing, 'targetPerimeterSpacing', 0, -999, 999, ' pt'); + perimeterUpdate = this.installInputHandler(perimeterSpacing, 'perimeterSpacing', 0, 0, 999, ' pt'); this.addKeyHandler(input, listener); this.addKeyHandler(startSize, listener); @@ -5401,7 +5401,7 @@ StyleFormatPanel.prototype.addEffects = function(div) if (ss.rounded) { - addOption(mxResources.get('rounded'), mxConstants.STYLE_ROUNDED, 0); + addOption(mxResources.get('rounded'), 'rounded', 0); } if (ss.style.shape == 'swimlane') @@ -5411,12 +5411,12 @@ StyleFormatPanel.prototype.addEffects = function(div) if (!ss.containsImage) { - addOption(mxResources.get('shadow'), mxConstants.STYLE_SHADOW, 0); + addOption(mxResources.get('shadow'), 'shadow', 0); } if (ss.glass) { - addOption(mxResources.get('glass'), mxConstants.STYLE_GLASS, 0); + addOption(mxResources.get('glass'), 'glass', 0); } addOption(mxResources.get('sketch'), 'sketch', 0); @@ -5608,7 +5608,7 @@ DiagramStylePanel.prototype.addView = function(div) let style = graph.getCellStyle(cells[i]); // Handles special label background color - if (style['labelBackgroundColor'] != null) + if (style.labelBackgroundColor != null) { graph.updateCellStyles('labelBackgroundColor', (graphStyle != null) ? graphStyle.background : null, [cells[i]]); @@ -5621,8 +5621,8 @@ DiagramStylePanel.prototype.addView = function(div) for (let j = 0; j < styles.length; j++) { if ((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) || - (styles[j] != mxConstants.STYLE_FILLCOLOR && - styles[j] != mxConstants.STYLE_STROKECOLOR)) + (styles[j] != 'fillColor' && + styles[j] != 'strokeColor')) { newStyle = mxUtils.setStyle(newStyle, styles[j], current[styles[j]]); } @@ -5645,8 +5645,8 @@ DiagramStylePanel.prototype.addView = function(div) { if (((style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) || - (styles[j] != mxConstants.STYLE_FILLCOLOR && - styles[j] != mxConstants.STYLE_STROKECOLOR))) + (styles[j] != 'fillColor' && + styles[j] != 'strokeColor'))) { style[styles[j]] = defaultStyle[styles[j]]; } @@ -5684,8 +5684,8 @@ DiagramStylePanel.prototype.addView = function(div) { if (cell == null || ((result[key] != null && result[key] != mxConstants.NONE) || - (key != mxConstants.STYLE_FILLCOLOR && - key != mxConstants.STYLE_STROKECOLOR))) + (key != 'fillColor' && + key != 'strokeColor'))) { result[key] = style[key]; } diff --git a/docs/stashed/grapheditor/www/js/Graph.js b/docs/stashed/grapheditor/www/js/Graph.js index e19a9ff08..14aefb5af 100644 --- a/docs/stashed/grapheditor/www/js/Graph.js +++ b/docs/stashed/grapheditor/www/js/Graph.js @@ -204,7 +204,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) { let style = this.getCurrentCellStyle(cell); - return (style != null) ? (style['html'] == '1' || style[mxConstants.STYLE_WHITE_SPACE] == 'wrap') : false; + return (style != null) ? (style.html == '1' || style.whiteSpace == 'wrap') : false; }; // Implements a listener for hover and click handling on edges @@ -625,7 +625,7 @@ Graph = function(container, model, renderHint, stylesheet, themes, standalone) if (state.view.graph.isHtmlLabel(state.cell)) { - if (state.style['html'] != 1) + if (state.style.html != 1) { result = mxUtils.htmlEntities(result, false); } @@ -1692,7 +1692,7 @@ Graph.prototype.init = function(container) { // Redirect editing for tables let style = this.getCellStyle(cell); - let size = parseInt(mxUtils.getValue(style, mxConstants.STYLE_STARTSIZE, 0)); + let size = parseInt(mxUtils.getValue(style, 'startSize', 0)); if (this.isTable(cell) && (!this.isSwimlane(cell) || size == 0) && this.getLabel(cell) == '' && @@ -1701,7 +1701,7 @@ Graph.prototype.init = function(container) cell = cell.getChildAt(0); style = this.getCellStyle(cell); - size = parseInt(mxUtils.getValue(style, mxConstants.STYLE_STARTSIZE, 0)); + size = parseInt(mxUtils.getValue(style, 'startSize', 0)); } // Redirect editing for table rows @@ -2358,20 +2358,20 @@ Graph.prototype.initLayoutManager = function() { let style = this.graph.getCellStyle(cell); - if (style['childLayout'] == 'stackLayout') + if (style.childLayout == 'stackLayout') { let stackLayout = new mxStackLayout(this.graph, true); stackLayout.resizeParentMax = mxUtils.getValue(style, 'resizeParentMax', '1') == '1'; stackLayout.horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1'; stackLayout.resizeParent = mxUtils.getValue(style, 'resizeParent', '1') == '1'; stackLayout.resizeLast = mxUtils.getValue(style, 'resizeLast', '0') == '1'; - stackLayout.spacing = style['stackSpacing'] || stackLayout.spacing; - stackLayout.border = style['stackBorder'] || stackLayout.border; - stackLayout.marginLeft = style['marginLeft'] || 0; - stackLayout.marginRight = style['marginRight'] || 0; - stackLayout.marginTop = style['marginTop'] || 0; - stackLayout.marginBottom = style['marginBottom'] || 0; - stackLayout.allowGaps = style['allowGaps'] || 0; + stackLayout.spacing = style.stackSpacing || stackLayout.spacing; + stackLayout.border = style.stackBorder || stackLayout.border; + stackLayout.marginLeft = style.marginLeft || 0; + stackLayout.marginRight = style.marginRight || 0; + stackLayout.marginTop = style.marginTop || 0; + stackLayout.marginBottom = style.marginBottom || 0; + stackLayout.allowGaps = style.allowGaps || 0; stackLayout.fill = true; if (stackLayout.allowGaps) @@ -2381,7 +2381,7 @@ Graph.prototype.initLayoutManager = function() return stackLayout; } - else if (style['childLayout'] == 'treeLayout') + else if (style.childLayout == 'treeLayout') { let treeLayout = new mxCompactTreeLayout(this.graph); treeLayout.horizontal = mxUtils.getValue(style, 'horizontalTree', '1') == '1'; @@ -2394,7 +2394,7 @@ Graph.prototype.initLayoutManager = function() return treeLayout; } - else if (style['childLayout'] == 'flowLayout') + else if (style.childLayout == 'flowLayout') { let flowLayout = new mxHierarchicalLayout(this.graph, mxUtils.getValue(style, 'flowOrientation', mxConstants.DIRECTION_EAST)); @@ -2414,15 +2414,15 @@ Graph.prototype.initLayoutManager = function() return flowLayout; } - else if (style['childLayout'] == 'circleLayout') + else if (style.childLayout == 'circleLayout') { return new mxCircleLayout(this.graph); } - else if (style['childLayout'] == 'organicLayout') + else if (style.childLayout == 'organicLayout') { return new mxFastOrganicLayout(this.graph); } - else if (style['childLayout'] == 'tableLayout') + else if (style.childLayout == 'tableLayout') { return new TableLayout(this.graph); } @@ -3404,7 +3404,7 @@ Graph.prototype.getCellStyle = function(cell) if (layout != null && layout.constructor == mxStackLayout) { - style[mxConstants.STYLE_HORIZONTAL] = !layout.horizontal; + style.horizontal = !layout.horizontal; } } } @@ -3602,11 +3602,11 @@ Graph.prototype.isContainer = function(cell) if (this.isSwimlane(cell)) { - return style['container'] != '0'; + return style.container != '0'; } else { - return style['container'] == '1'; + return style.container == '1'; } }; @@ -3617,7 +3617,7 @@ Graph.prototype.isCellConnectable = function(cell) { let style = this.getCurrentCellStyle(cell); - return (style['connectable'] != null) ? style['connectable'] != '0' : + return (style.connectable != null) ? style.connectable != '0' : mxGraph.prototype.isCellConnectable.apply(this, arguments); }; @@ -3628,7 +3628,7 @@ Graph.prototype.isLabelMovable = function(cell) { let style = this.getCurrentCellStyle(cell); - return (style['movableLabel'] != null) ? style['movableLabel'] != '0' : + return (style.movableLabel != null) ? style.movableLabel != '0' : mxGraph.prototype.isLabelMovable.apply(this, arguments); }; @@ -3711,10 +3711,10 @@ Graph.prototype.isCellFoldable = function(cell) { let style = this.getCurrentCellStyle(cell); - return this.foldingEnabled && (style['treeFolding'] == '1' || + return this.foldingEnabled && (style.treeFolding == '1' || (!this.isCellLocked(cell) && - ((this.isContainer(cell) && style['collapsible'] != '0') || - (!this.isContainer(cell) && style['collapsible'] == '1')))); + ((this.isContainer(cell) && style.collapsible != '0') || + (!this.isContainer(cell) && style.collapsible == '1')))); }; /** @@ -4392,11 +4392,11 @@ HoverIcons.prototype.drag = function(evt, x, y) let es = this.graph.connectionHandler.edgeState; if (evt != null && mxEvent.isShiftDown(evt) && mxEvent.isControlDown(evt) && es != null && - mxUtils.getValue(es.style, mxConstants.STYLE_EDGE, null) === 'orthogonalEdgeStyle') + mxUtils.getValue(es.style, 'edge', null) === 'orthogonalEdgeStyle') { let direction = this.getDirection(); es.cell.style = mxUtils.setStyle(es.cell.style, 'sourcePortConstraint', direction); - es.style['sourcePortConstraint'] = direction; + es.style.sourcePortConstraint = direction; } } }; @@ -4809,7 +4809,7 @@ HoverIcons.prototype.update = function(state, x, y) */ HoverIcons.prototype.setCurrentState = function(state) { - if (state.style['portConstraint'] != 'eastwest') + if (state.style.portConstraint != 'eastwest') { this.graph.container.appendChild(this.arrowUp); this.graph.container.appendChild(this.arrowDown); @@ -4916,7 +4916,7 @@ Graph.prototype.createCrossFunctionalSwimlane = function(rowCount, colCount, w, let table = this.createVertex(null, null, '', 0, 0, colCount * w, rowCount * h, tableStyle); - let t = mxUtils.getValue(this.getCellStyle(table), mxConstants.STYLE_STARTSIZE, + let t = mxUtils.getValue(this.getCellStyle(table), 'startSize', mxConstants.DEFAULT_STARTSIZE); table.geometry.width += t; table.geometry.height += t; @@ -4962,7 +4962,7 @@ Graph.prototype.isTable = function(cell) { let style = this.getCellStyle(cell); - return style != null && style['childLayout'] == 'tableLayout'; + return style != null && style.childLayout == 'tableLayout'; }; /** @@ -5391,7 +5391,7 @@ TableLayout.prototype.execute = function(parent) // Forces repaint if jumps change on a valid edge if (state != null && recurse && state.cell.isEdge() && - state.style != null && state.style[mxConstants.STYLE_CURVED] != 1 && + state.style != null && state.style.curved != 1 && !state.invalid && this.updateLineJumps(state)) { this.graph.cellRenderer.redraw(state, false, this.isRendering()); @@ -5401,7 +5401,7 @@ TableLayout.prototype.execute = function(parent) // Adds to the list of edges that may intersect with later edges if (state != null && recurse && state.cell.isEdge() && - state.style != null && state.style[mxConstants.STYLE_CURVED] != 1) + state.style != null && state.style.curved != 1) { // LATER: Reuse jumps for valid edges this.validEdges.push(state); @@ -5431,7 +5431,7 @@ TableLayout.prototype.execute = function(parent) // Updates jumps on invalid edge before repaint if (state.cell.isEdge() && - state.style[mxConstants.STYLE_CURVED] != 1) + state.style.curved != 1) { this.updateLineJumps(state); } @@ -5494,7 +5494,7 @@ TableLayout.prototype.execute = function(parent) var state2 = this.validEdges[e]; var pts2 = state2.absolutePoints; - if (pts2 != null && mxUtils.intersects(state, state2) && state2.style['noJump'] != '1') + if (pts2 != null && mxUtils.intersects(state, state2) && state2.style.noJump != '1') { // Compares each segment of the edge with the current segment for (let j = 0; j < pts2.length - 1; j++) @@ -5592,7 +5592,7 @@ TableLayout.prototype.execute = function(parent) } else { - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; let size = (parseInt(mxUtils.getValue(this.style, 'jumpSize', Graph.defaultJumpSize)) - 2) / 2 + this.strokewidth; @@ -5713,14 +5713,14 @@ TableLayout.prototype.execute = function(parent) mxGraphView.prototype.updateFloatingTerminalPoint = function(edge, start, end, source) { if (start != null && edge != null && - (start.style['snapToPoint'] == '1' || - edge.style['snapToPoint'] == '1')) + (start.style.snapToPoint == '1' || + edge.style.snapToPoint == '1')) { start = this.getTerminalPort(edge, start, source); let next = this.getNextPoint(edge, end, source); let orth = this.graph.isOrthogonal(edge); - let alpha = mxUtils.toRadians(Number(start.style[mxConstants.STYLE_ROTATION] || '0')); + let alpha = mxUtils.toRadians(Number(start.style.rotation || '0')); let center = new mxPoint(start.getCenterX(), start.getCenterY()); if (alpha != 0) @@ -5730,10 +5730,10 @@ TableLayout.prototype.execute = function(parent) next = mxUtils.getRotatedPoint(next, cos, sin, center); } - let border = parseFloat(edge.style[mxConstants.STYLE_PERIMETER_SPACING] || 0); + let border = parseFloat(edge.style.perimeterSpacing || 0); border += parseFloat(edge.style[(source) ? - mxConstants.STYLE_SOURCE_PERIMETER_SPACING : - mxConstants.STYLE_TARGET_PERIMETER_SPACING] || 0); + 'sourcePerimeterSpacing' : + 'targetPerimeterSpacing'] || 0); let pt = this.getPerimeterPoint(start, next, alpha == 0 && orth, border); if (alpha != 0) @@ -5817,7 +5817,7 @@ TableLayout.prototype.execute = function(parent) { if (state.style != null && typeof(pako) !== 'undefined') { - let shape = mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null); + let shape = mxUtils.getValue(state.style, 'shape', null); // Extracts and decodes stencil XML if shape has the form shape=stencil(value) if (shape != null && typeof shape === 'string' && shape.substring(0, 8) == 'stencil(') @@ -6200,7 +6200,7 @@ if (typeof mxVertexHandler != 'undefined') { let shape = connectionHandlerCreateShape.apply(this, arguments); - shape.isDashed = this.graph.currentEdgeStyle[mxConstants.STYLE_DASHED] == '1'; + shape.isDashed = this.graph.currentEdgeStyle.dashed == '1'; return shape; } @@ -6548,7 +6548,7 @@ if (typeof mxVertexHandler != 'undefined') !cell.isEdge()) { let shape = this.getCurrentCellStyle(cell, ignoreState) - [mxConstants.STYLE_SHAPE]; + .shape; return shape == mxConstants.SHAPE_SWIMLANE || shape == 'table'; } @@ -6568,9 +6568,9 @@ if (typeof mxVertexHandler != 'undefined') { let style = this.getCurrentCellStyle(parent); - if (style['expand'] != null) + if (style.expand != null) { - return style['expand'] != '0'; + return style.expand != '0'; } } @@ -6985,11 +6985,11 @@ if (typeof mxVertexHandler != 'undefined') if (edge != null) { let style = this.getCurrentCellStyle(edge); - let elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW, + let elbow = mxUtils.getValue(style, 'elbow', mxConstants.ELBOW_HORIZONTAL); let value = (elbow == mxConstants.ELBOW_HORIZONTAL) ? mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL; - this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]); + this.setCellStyles('elbow', value, [edge]); } }; @@ -7185,9 +7185,9 @@ if (typeof mxVertexHandler != 'undefined') { let dirs = [mxConstants.DIRECTION_EAST, mxConstants.DIRECTION_SOUTH, mxConstants.DIRECTION_WEST, mxConstants.DIRECTION_NORTH]; - let dir = mxUtils.getValue(state.style, mxConstants.STYLE_DIRECTION, + let dir = mxUtils.getValue(state.style, 'direction', mxConstants.DIRECTION_EAST); - this.setCellStyles(mxConstants.STYLE_DIRECTION, + this.setCellStyles('direction', dirs[mxUtils.mod(mxUtils.indexOf(dirs, dir) + ((backwards) ? -1 : 1), dirs.length)], [cell]); } @@ -8235,8 +8235,8 @@ if (typeof mxVertexHandler != 'undefined') let style = this.getCurrentCellStyle(cell); return !this.isTableCell(cell) && !this.isTableRow(cell) && (result || - (mxUtils.getValue(style, mxConstants.STYLE_RESIZABLE, '1') != '0' && - style[mxConstants.STYLE_WHITE_SPACE] == 'wrap')); + (mxUtils.getValue(style, 'resizable', '1') != '0' && + style.whiteSpace == 'wrap')); }; /** @@ -9428,7 +9428,7 @@ if (typeof mxVertexHandler != 'undefined') { let state = this.graph.view.getState(this.editingCell); - return state != null && state.style['html'] == 1; + return state != null && state.style.html == 1; }; /** @@ -9597,7 +9597,7 @@ if (typeof mxVertexHandler != 'undefined') // dashed borders for divs and table cells let state = this.graph.view.getState(cell); - if (state != null && state.style['html'] == 1) + if (state != null && state.style.html == 1) { this.textarea.className = 'mxCellEditor geContentEditable'; } @@ -9818,22 +9818,22 @@ if (typeof mxVertexHandler != 'undefined') content = this.graph.sanitizeHtml((nl2Br) ? content.replace(/\n/g, '
') : content, true) this.textarea.className = 'mxCellEditor geContentEditable'; - let size = mxUtils.getValue(state.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE); - let family = mxUtils.getValue(state.style, mxConstants.STYLE_FONTFAMILY, mxConstants.DEFAULT_FONTFAMILY); - let align = mxUtils.getValue(state.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_LEFT); - let bold = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) & + let size = mxUtils.getValue(state.style, 'fontSize', mxConstants.DEFAULT_FONTSIZE); + let family = mxUtils.getValue(state.style, 'fontFamily', mxConstants.DEFAULT_FONTFAMILY); + let align = mxUtils.getValue(state.style, 'align', mxConstants.ALIGN_LEFT); + let bold = (mxUtils.getValue(state.style, 'fontStyle', 0) & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD; - let italic = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) & + let italic = (mxUtils.getValue(state.style, 'fontStyle', 0) & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC; let txtDecor = []; - if ((mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) & + if ((mxUtils.getValue(state.style, 'fontStyle', 0) & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE) { txtDecor.push('underline'); } - if ((mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) & + if ((mxUtils.getValue(state.style, 'fontStyle', 0) & mxConstants.FONT_STRIKETHROUGH) == mxConstants.FONT_STRIKETHROUGH) { txtDecor.push('line-through'); @@ -9897,8 +9897,8 @@ if (typeof mxVertexHandler != 'undefined') if (m == null) { - m = mxUtils.getAlignmentAsPoint(mxUtils.getValue(state.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER), - mxUtils.getValue(state.style, mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_MIDDLE)); + m = mxUtils.getAlignmentAsPoint(mxUtils.getValue(state.style, 'align', mxConstants.ALIGN_CENTER), + mxUtils.getValue(state.style, 'verticalAlign', mxConstants.ALIGN_MIDDLE)); } this.bounds.x += m.x * this.bounds.width; @@ -10038,14 +10038,14 @@ if (typeof mxVertexHandler != 'undefined') */ mxCellEditor.prototype.getBackgroundColor = function(state) { - let color = mxUtils.getValue(state.style, mxConstants.STYLE_LABEL_BACKGROUNDCOLOR, null); + let color = mxUtils.getValue(state.style, 'backgroundColor', null); if ((color == null || color == mxConstants.NONE) && (state.cell.geometry != null && state.cell.geometry.width > 0) && - (mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0) != 0 || - mxUtils.getValue(state.style, mxConstants.STYLE_HORIZONTAL, 1) == 0)) + (mxUtils.getValue(state.style, 'rotation', 0) != 0 || + mxUtils.getValue(state.style, 'horizontal', 1) == 0)) { - color = mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, null); + color = mxUtils.getValue(state.style, 'fillColor', null); } if (color == mxConstants.NONE) @@ -10157,7 +10157,7 @@ if (typeof mxVertexHandler != 'undefined') stackLayoutResizeCell.apply(this, arguments); let style = this.graph.getCellStyle(cell); - if (style['childLayout'] == null) + if (style.childLayout == null) { let parent = cell.getParent(); let geo = (parent != null) ? parent.getGeometry() : null; @@ -10166,7 +10166,7 @@ if (typeof mxVertexHandler != 'undefined') { style = this.graph.getCellStyle(parent); - if (style['childLayout'] == 'stackLayout') + if (style.childLayout == 'stackLayout') { let border = parseFloat(mxUtils.getValue(style, 'stackBorder', mxStackLayout.prototype.border)); let horizontal = mxUtils.getValue(style, 'horizontalStack', '1') == '1'; @@ -10675,7 +10675,7 @@ if (typeof mxVertexHandler != 'undefined') { let result = new mxPoint(0, 0); let tol = this.tolerance; - let name = this.state.style['shape']; + let name = this.state.style.shape; if (mxCellRenderer.defaultShapes[name] == null && mxStencilRegistry.getStencil(name) == null) @@ -10760,7 +10760,7 @@ if (typeof mxVertexHandler != 'undefined') formatHintText(this.roundLength(this.bounds.height / s), unit); } - let rot = (this.currentAlpha != null) ? this.currentAlpha : this.state.style[mxConstants.STYLE_ROTATION] || '0'; + let rot = (this.currentAlpha != null) ? this.currentAlpha : this.state.style.rotation || '0'; let bb = mxUtils.getBoundingBox(this.bounds, rot); if (bb == null) @@ -11413,14 +11413,14 @@ if (typeof mxVertexHandler != 'undefined') // Invokes turn on single click on rotation handle mxVertexHandler.prototype.rotateClick = function() { - let stroke = mxUtils.getValue(this.state.style, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE); - let fill = mxUtils.getValue(this.state.style, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE); + let stroke = mxUtils.getValue(this.state.style, 'strokeColor', mxConstants.NONE); + let fill = mxUtils.getValue(this.state.style, 'fillColor', mxConstants.NONE); if (this.state.cell.isVertex() && stroke == mxConstants.NONE && fill == mxConstants.NONE) { - let angle = mxUtils.mod(mxUtils.getValue(this.state.style, mxConstants.STYLE_ROTATION, 0) + 90, 360); - this.state.view.graph.setCellStyles(mxConstants.STYLE_ROTATION, angle, [this.state.cell]); + let angle = mxUtils.mod(mxUtils.getValue(this.state.style, 'rotation', 0) + 90, 360); + this.state.view.graph.setCellStyles('rotation', angle, [this.state.cell]); } else { @@ -11755,9 +11755,9 @@ if (typeof mxVertexHandler != 'undefined') { let c = new mxPoint(this.state.getCenterX(), this.state.getCenterY()); let tmp = new mxRectangle(this.state.x, this.state.y - 22, this.state.width + 24, this.state.height + 22); - let bb = mxUtils.getBoundingBox(tmp, this.state.style[mxConstants.STYLE_ROTATION] || '0', c); + let bb = mxUtils.getBoundingBox(tmp, this.state.style.rotation || '0', c); let rs = (bb != null) ? mxUtils.getBoundingBox(this.state, - this.state.style[mxConstants.STYLE_ROTATION] || '0') : this.state; + this.state.style.rotation || '0') : this.state; let tb = (this.state.text != null) ? this.state.text.boundingBox : null; if (bb == null) diff --git a/docs/stashed/grapheditor/www/js/Menus.js b/docs/stashed/grapheditor/www/js/Menus.js index a94d9785b..bfd157a6d 100644 --- a/docs/stashed/grapheditor/www/js/Menus.js +++ b/docs/stashed/grapheditor/www/js/Menus.js @@ -53,7 +53,7 @@ Menus.prototype.init = function() { let addItem = mxUtils.bind(this, function(fontname) { - let tr = this.styleChange(menu, fontname, [mxConstants.STYLE_FONTFAMILY], [fontname], null, parent, function() + let tr = this.styleChange(menu, fontname, .fontFamily, [fontname], null, parent, function() { document.execCommand('fontname', false, fontname); }, function() @@ -97,7 +97,7 @@ Menus.prototype.init = function() menu.addSeparator(parent); } - this.promptChange(menu, mxResources.get('custom') + '...', '', mxConstants.DEFAULT_FONTFAMILY, mxConstants.STYLE_FONTFAMILY, parent, true, mxUtils.bind(this, function(newValue) + this.promptChange(menu, mxResources.get('custom') + '...', '', mxConstants.DEFAULT_FONTFAMILY, 'fontFamily', parent, true, mxUtils.bind(this, function(newValue) { if (mxUtils.indexOf(this.customFonts, newValue) < 0) { @@ -139,7 +139,7 @@ Menus.prototype.init = function() let addItem = mxUtils.bind(this, function(fontsize) { - this.styleChange(menu, fontsize, [mxConstants.STYLE_FONTSIZE], [fontsize], null, parent, function() + this.styleChange(menu, fontsize, .fontSize, [fontsize], null, parent, function() { if (graph.cellEditor.textarea != null) { @@ -189,15 +189,15 @@ Menus.prototype.init = function() menu.addSeparator(parent); } - this.promptChange(menu, mxResources.get('custom') + '...', '(pt)', '12', mxConstants.STYLE_FONTSIZE, parent, true, mxUtils.bind(this, function(newValue) + this.promptChange(menu, mxResources.get('custom') + '...', '(pt)', '12', 'fontSize', parent, true, mxUtils.bind(this, function(newValue) { this.customFontSizes.push(newValue); })); }))); this.put('direction', new Menu(mxUtils.bind(this, function(menu, parent) { - menu.addItem(mxResources.get('flipH'), null, function() { graph.toggleCellStyles(mxConstants.STYLE_FLIPH, false); }, parent); - menu.addItem(mxResources.get('flipV'), null, function() { graph.toggleCellStyles(mxConstants.STYLE_FLIPV, false); }, parent); + menu.addItem(mxResources.get('flipH'), null, function() { graph.toggleCellStyles('flipH', false); }, parent); + menu.addItem(mxResources.get('flipV'), null, function() { graph.toggleCellStyles('flipV', false); }, parent); this.addMenuItems(menu, ['-', 'rotation'], parent); }))); this.put('align', new Menu(mxUtils.bind(this, function(menu, parent) @@ -863,7 +863,7 @@ Menus.prototype.createStyleChangeFunction = function(keys, values) graph.setCellStyles(keys[i], values[i], cells); // Removes CSS alignment to produce consistent output - if (keys[i] == mxConstants.STYLE_ALIGN) + if (keys[i] == 'align') { graph.updateLabelElements(cells, function(elt) { @@ -873,7 +873,7 @@ Menus.prototype.createStyleChangeFunction = function(keys, values) } // Updates autosize after font changes - if (keys[i] == mxConstants.STYLE_FONTFAMILY) + if (keys[i] == 'fontFamily') { for (let j = 0; j < cells.length; j++) { @@ -1164,8 +1164,8 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt) { let hasWaypoints = false; - if (cell.isEdge() && mxUtils.getValue(state.style, mxConstants.STYLE_EDGE, null) != 'entityRelationEdgeStyle' && - mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE, null) != 'arrow') + if (cell.isEdge() && mxUtils.getValue(state.style, 'edge', null) != 'entityRelationEdgeStyle' && + mxUtils.getValue(state.style, 'shape', null) != 'arrow') { let handler = graph.selectionCellsHandler.getHandler(cell); let isWaypoint = false; @@ -1203,7 +1203,7 @@ Menus.prototype.addPopupMenuCellItems = function(menu, cell, evt) this.addMenuItems(menu, ['-', 'editStyle', 'editData', 'editLink'], null, evt); // Shows edit image action if there is an image in the style - if (cell.isVertex() && mxUtils.getValue(state.style, mxConstants.STYLE_IMAGE, null) != null) + if (cell.isVertex() && mxUtils.getValue(state.style, 'image', null) != null) { menu.addSeparator(); this.addMenuItem(menu, 'image', null, evt).firstChild.nextSibling.innerHTML = mxResources.get('editImage') + '...'; diff --git a/docs/stashed/grapheditor/www/js/Shapes.js b/docs/stashed/grapheditor/www/js/Shapes.js index a324a71d4..497844f29 100644 --- a/docs/stashed/grapheditor/www/js/Shapes.js +++ b/docs/stashed/grapheditor/www/js/Shapes.js @@ -22,7 +22,7 @@ if (this.style != null) { - events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1'; + events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1'; } if (!events) @@ -866,7 +866,7 @@ CardShape.prototype.redrawPath = function(c, x, y, w, h) { let s = Math.max(0, Math.min(w, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))))); - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w, 0), new mxPoint(w, h), new mxPoint(0, h), new mxPoint(0, s)], this.isRounded, arcSize, true); c.end(); @@ -1093,7 +1093,7 @@ let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0'; let dx = (fixed) ? Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w, 0), new mxPoint(w - dx, h)], this.isRounded, arcSize, true); c.end(); @@ -1119,7 +1119,7 @@ let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0'; let dx = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(0, h), new mxPoint(dx, 0), new mxPoint(w - dx, 0), new mxPoint(w, h)], this.isRounded, arcSize, true); }; @@ -1137,7 +1137,7 @@ { c.setFillColor(null); let s = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(w, 0), new mxPoint(s, 0), new mxPoint(s, h / 2), new mxPoint(0, h / 2), new mxPoint(s, h / 2), new mxPoint(s, h), new mxPoint(w, h)], this.isRounded, arcSize, false); @@ -1377,7 +1377,7 @@ if (this.style != null) { - events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1'; + events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1'; } if (events || (this.fill != null && this.fill != mxConstants.NONE) || @@ -1394,14 +1394,14 @@ { let r = 0; - if (mxUtils.getValue(this.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1') + if (mxUtils.getValue(this.style, 'absoluteArcSize', 0) == '1') { r = Math.min(w / 2, Math.min(h / 2, mxUtils.getValue(this.style, - mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2)); + 'arcSize', mxConstants.LINE_ARCSIZE) / 2)); } else { - let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, + let f = mxUtils.getValue(this.style, 'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100; r = Math.min(w * f, h * f); } @@ -1463,7 +1463,7 @@ }; ProcessShape.prototype.getLabelBounds = function(rect) { - if (mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, true) == + if (mxUtils.getValue(this.state.style, 'horizontal', true) == (this.direction == null || this.direction == mxConstants.DIRECTION_EAST || this.direction == mxConstants.DIRECTION_WEST)) @@ -1476,7 +1476,7 @@ if (this.isRounded) { - let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, + let f = mxUtils.getValue(this.style, 'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100; inset = Math.max(inset, Math.min(w * f, h * f)); } @@ -1506,7 +1506,7 @@ if (this.isRounded) { - let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, + let f = mxUtils.getValue(this.style, 'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100; inset = Math.max(inset, Math.min(w * f, h * f)); } @@ -1563,7 +1563,7 @@ }; CalloutShape.prototype.redrawPath = function(c, x, y, w, h) { - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; let s = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); let dx = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position', this.position)))); var dx2 = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position2', this.position2)))); @@ -1594,7 +1594,7 @@ let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0'; let s = (fixed) ? Math.max(0, Math.min(w, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w - s, 0), new mxPoint(w, h / 2), new mxPoint(w - s, h), new mxPoint(0, h), new mxPoint(s, h / 2)], this.isRounded, arcSize, true); c.end(); @@ -1619,7 +1619,7 @@ let fixed = mxUtils.getValue(this.style, 'fixedSize', '0') != '0'; let s = (fixed) ? Math.max(0, Math.min(w * 0.5, parseFloat(mxUtils.getValue(this.style, 'size', this.fixedSize)))) : w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w - s, 0), new mxPoint(w, 0.5 * h), new mxPoint(w - s, h), new mxPoint(s, h), new mxPoint(0, 0.5 * h)], this.isRounded, arcSize, true); }; @@ -1656,10 +1656,10 @@ let mxRhombusPaintVertexShape = mxRhombus.prototype.paintVertexShape; mxRhombus.prototype.getLabelBounds = function(rect) { - if (this.style['double'] == 1) + if (this.style.double == 1) { let margin = (Math.max(2, this.strokewidth + 1) * 2 + parseFloat( - this.style[mxConstants.STYLE_MARGIN] || 0)) * this.scale; + this.style['margin'] || 0)) * this.scale; return new mxRectangle(rect.x + margin, rect.y + margin, rect.width - 2 * margin, rect.height - 2 * margin); @@ -1671,10 +1671,10 @@ { mxRhombusPaintVertexShape.apply(this, arguments); - if (!this.outline && this.style['double'] == 1) + if (!this.outline && this.style.double == 1) { let margin = Math.max(2, this.strokewidth + 1) * 2 + - parseFloat(this.style[mxConstants.STYLE_MARGIN] || 0); + parseFloat(this.style['margin'] || 0); x += margin; y += margin; w -= 2 * margin; @@ -1703,10 +1703,10 @@ }; ExtendedShape.prototype.getLabelBounds = function(rect) { - if (this.style['double'] == 1) + if (this.style.double == 1) { let margin = (Math.max(2, this.strokewidth + 1) + parseFloat( - this.style[mxConstants.STYLE_MARGIN] || 0)) * this.scale; + this.style['margin'] || 0)) * this.scale; return new mxRectangle(rect.x + margin, rect.y + margin, rect.width - 2 * margin, rect.height - 2 * margin); @@ -1719,9 +1719,9 @@ { if (this.style != null) { - if (!this.outline && this.style['double'] == 1) + if (!this.outline && this.style.double == 1) { - let margin = Math.max(2, this.strokewidth + 1) + parseFloat(this.style[mxConstants.STYLE_MARGIN] || 0); + let margin = Math.max(2, this.strokewidth + 1) + parseFloat(this.style['margin'] || 0); x += margin; y += margin; w -= 2 * margin; @@ -2069,7 +2069,7 @@ let co = this.corner; var w0 = Math.min(w, Math.max(co, parseFloat(mxUtils.getValue(this.style, 'width', this.width)))); var h0 = Math.min(h, Math.max(co * 1.5, parseFloat(mxUtils.getValue(this.style, 'height', this.height)))); - let bg = mxUtils.getValue(this.style, mxConstants.STYLE_SWIMLANE_FILLCOLOR, mxConstants.NONE); + let bg = mxUtils.getValue(this.style, 'swimlaneFillColor', mxConstants.NONE); if (bg != mxConstants.NONE) { @@ -2117,7 +2117,7 @@ size = mxUtils.getValue(vertex.style, 'size', size) * vertex.view.scale; } - let sw = (parseFloat(vertex.style[mxConstants.STYLE_STROKEWIDTH] || 1) * vertex.view.scale / 2) - 1; + let sw = (parseFloat(vertex.style.strokeWidth || 1) * vertex.view.scale / 2) - 1; if (next.x < bounds.getCenterX()) { @@ -2142,15 +2142,15 @@ mxPerimeter.BackbonePerimeter = (bounds, vertex, next, orthogonal) => { - let sw = (parseFloat(vertex.style[mxConstants.STYLE_STROKEWIDTH] || 1) * vertex.view.scale / 2) - 1; + let sw = (parseFloat(vertex.style.strokeWidth || 1) * vertex.view.scale / 2) - 1; - if (vertex.style['backboneSize'] != null) + if (vertex.style.backboneSize != null) { - sw += (parseFloat(vertex.style['backboneSize']) * vertex.view.scale / 2) - 1; + sw += (parseFloat(vertex.style.backboneSize) * vertex.view.scale / 2) - 1; } - if (vertex.style[mxConstants.STYLE_DIRECTION] == 'south' || - vertex.style[mxConstants.STYLE_DIRECTION] == 'north') + if (vertex.style.direction == 'south' || + vertex.style.direction == 'north') { if (next.x < bounds.getCenterX()) { @@ -2209,7 +2209,7 @@ let h = bounds.height; let direction = (vertex != null) ? mxUtils.getValue( - vertex.style, mxConstants.STYLE_DIRECTION, + vertex.style, 'direction', mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; let vertical = direction == mxConstants.DIRECTION_NORTH || direction == mxConstants.DIRECTION_SOUTH; @@ -2272,7 +2272,7 @@ let h = bounds.height; let direction = (vertex != null) ? mxUtils.getValue( - vertex.style, mxConstants.STYLE_DIRECTION, + vertex.style, 'direction', mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; let points = []; @@ -2348,7 +2348,7 @@ let cy = bounds.getCenterY(); let direction = (vertex != null) ? mxUtils.getValue( - vertex.style, mxConstants.STYLE_DIRECTION, + vertex.style, 'direction', mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; var points; @@ -2425,7 +2425,7 @@ let cy = bounds.getCenterY(); let direction = (vertex != null) ? mxUtils.getValue( - vertex.style, mxConstants.STYLE_DIRECTION, + vertex.style, 'direction', mxConstants.DIRECTION_EAST) : mxConstants.DIRECTION_EAST; let vertical = direction == mxConstants.DIRECTION_NORTH || direction == mxConstants.DIRECTION_SOUTH; @@ -2676,7 +2676,7 @@ let hw = w / 2; let hh = h / 2; - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; c.begin(); this.addPoints(c, [new mxPoint(x + hw, y), new mxPoint(x + w, y + hh), new mxPoint(x + hw, y + h), new mxPoint(x, y + hh)], this.isRounded, arcSize, true); @@ -2793,7 +2793,7 @@ ManualInputShape.prototype.redrawPath = function(c, x, y, w, h) { let s = Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size))); - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(0, h), new mxPoint(0, s), new mxPoint(w, 0), new mxPoint(w, h)], this.isRounded, arcSize, true); c.end(); @@ -2820,7 +2820,7 @@ if (this.isRounded) { - let f = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, + let f = mxUtils.getValue(this.style, 'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100) / 100; inset = Math.max(inset, Math.min(w * f, h * f)); } @@ -2859,7 +2859,7 @@ let dy = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'dy', this.dy)))); let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, dy), new mxPoint(dx, dy), new mxPoint(dx, h), new mxPoint(0, h)], this.isRounded, arcSize, true); c.end(); @@ -2908,7 +2908,7 @@ var w2 = Math.abs(w - dx) / 2; let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, dy), new mxPoint((w + dx) / 2, dy), new mxPoint((w + dx) / 2, h), new mxPoint((w - dx) / 2, h), new mxPoint((w - dx) / 2, dy), new mxPoint(0, dy)], this.isRounded, arcSize, true); @@ -2932,7 +2932,7 @@ let at = (h - aw) / 2; let ab = at + aw; - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(0, at), new mxPoint(w - as, at), new mxPoint(w - as, 0), new mxPoint(w, h / 2), new mxPoint(w - as, h), new mxPoint(w - as, ab), new mxPoint(0, ab)], this.isRounded, arcSize, true); @@ -2954,7 +2954,7 @@ let at = (h - aw) / 2; let ab = at + aw; - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(0, h / 2), new mxPoint(as, 0), new mxPoint(as, at), new mxPoint(w - as, at), new mxPoint(w - as, 0), new mxPoint(w, h / 2), new mxPoint(w - as, h), new mxPoint(w - as, ab), new mxPoint(as, ab), new mxPoint(as, h)], @@ -3038,7 +3038,7 @@ LoopLimitShape.prototype.redrawPath = function(c, x, y, w, h) { let s = Math.min(w / 2, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(s, 0), new mxPoint(w - s, 0), new mxPoint(w, s * 0.8), new mxPoint(w, h), new mxPoint(0, h), new mxPoint(0, s * 0.8)], this.isRounded, arcSize, true); c.end(); @@ -3060,7 +3060,7 @@ OffPageConnectorShape.prototype.redrawPath = function(c, x, y, w, h) { let s = h * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; this.addPoints(c, [new mxPoint(0, 0), new mxPoint(w, 0), new mxPoint(w, h - s), new mxPoint(w / 2, h), new mxPoint(0, h - s)], this.isRounded, arcSize, true); c.end(); @@ -3236,7 +3236,7 @@ if (this.style != null) { let pointerEvents = c.pointerEvents; - let events = mxUtils.getValue(this.style, mxConstants.STYLE_POINTER_EVENTS, '1') == '1'; + let events = mxUtils.getValue(this.style, 'pointerEvents', '1') == '1'; if (!events && (this.fill == null || this.fill == mxConstants.NONE)) { @@ -3760,36 +3760,36 @@ function createArcHandle(state, yOffset) { - return createHandle(state, [mxConstants.STYLE_ARCSIZE], function(bounds) + return createHandle(state, ['arcSize'], function(bounds) { let tmp = (yOffset != null) ? yOffset : bounds.height / 8; - if (mxUtils.getValue(state.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1') + if (mxUtils.getValue(state.style, 'absoluteArcSize', 0) == '1') { - let arcSize = mxUtils.getValue(state.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(state.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; return new mxPoint(bounds.x + bounds.width - Math.min(bounds.width / 2, arcSize), bounds.y + tmp); } else { let arcSize = Math.max(0, parseFloat(mxUtils.getValue(state.style, - mxConstants.STYLE_ARCSIZE, mxConstants.RECTANGLE_ROUNDING_FACTOR * 100))) / 100; + 'arcSize', mxConstants.RECTANGLE_ROUNDING_FACTOR * 100))) / 100; return new mxPoint(bounds.x + bounds.width - Math.min(Math.max(bounds.width / 2, bounds.height / 2), Math.min(bounds.width, bounds.height) * arcSize), bounds.y + tmp); } }, function(bounds, pt, me) { - if (mxUtils.getValue(state.style, mxConstants.STYLE_ABSOLUTE_ARCSIZE, 0) == '1') + if (mxUtils.getValue(state.style, 'absoluteArcSize', 0) == '1') { - this.state.style[mxConstants.STYLE_ARCSIZE] = Math.round(Math.max(0, Math.min(bounds.width, + this.state.style.arcSize = Math.round(Math.max(0, Math.min(bounds.width, (bounds.x + bounds.width - pt.x) * 2))); } else { let f = Math.min(50, Math.max(0, (bounds.width - pt.x + bounds.x) * 100 / Math.min(bounds.width, bounds.height))); - this.state.style[mxConstants.STYLE_ARCSIZE] = Math.round(f); + this.state.style.arcSize = Math.round(f); } }); } @@ -3800,7 +3800,7 @@ { let handles = []; - if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) + if (mxUtils.getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -3826,10 +3826,10 @@ let fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null; let size = (fixed) ? (pt.x - bounds.x) : Math.max(0, Math.min(max, (pt.x - bounds.x) / bounds.width * 0.75)); - this.state.style['size'] = size; + this.state.style.size = size; }, false, true)]; - if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) + if (mxUtils.getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -3855,10 +3855,10 @@ let fixed = (fixedDefaultValue != null) ? mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0' : null; let size = (fixed) ? (pt.x - bounds.x) : Math.max(0, Math.min(max, (pt.x - bounds.x) / bounds.width)); - this.state.style['size'] = size; + this.state.style.size = size; }, false, redrawEdges)]; - if (allowArcHandle && mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) + if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -3879,11 +3879,11 @@ return new mxPoint(bounds.x + size, bounds.y + size); }, function(bounds, pt) { - this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, pt.x - bounds.x), + this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, pt.x - bounds.x), Math.min(bounds.height, pt.y - bounds.y))) / factor); }, false)]; - if (allowArcHandle && mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) + if (allowArcHandle && mxUtils.getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -3903,7 +3903,7 @@ return new mxPoint(bounds.x, bounds.y + size); }, function(bounds, pt) { - this.state.style['size'] = Math.max(0, pt.y - bounds.y); + this.state.style.size = Math.max(0, pt.y - bounds.y); }, true)]; } }; @@ -3920,8 +3920,8 @@ return new mxPoint(bounds.x + (1 - as) * bounds.width, bounds.y + (1 - aw) * bounds.height / 2); }, function(bounds, pt) { - this.state.style['arrowWidth'] = Math.max(0, Math.min(1, Math.abs(bounds.y + bounds.height / 2 - pt.y) / bounds.height * 2)); - this.state.style['arrowSize'] = Math.max(0, Math.min(maxSize, (bounds.x + bounds.width - pt.x) / (bounds.width))); + this.state.style.arrowWidth = Math.max(0, Math.min(1, Math.abs(bounds.y + bounds.height / 2 - pt.y) / bounds.height * 2)); + this.state.style.arrowSize = Math.max(0, Math.min(maxSize, (bounds.x + bounds.width - pt.x) / (bounds.width))); })]; }; }; @@ -3977,7 +3977,7 @@ }, function(dist, nx, ny, p0, p1, pt) { let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); - state.style['width'] = Math.round(w * 2) / state.view.scale - spacing; + state.style.width = Math.round(w * 2) / state.view.scale - spacing; }); }; @@ -3999,12 +3999,12 @@ let tol = state.view.graph.gridSize / state.view.scale; let handles = []; - if (mxUtils.getValue(state.style, mxConstants.STYLE_STARTARROW, mxConstants.NONE) != mxConstants.NONE) + if (mxUtils.getValue(state.style, 'startArrow', mxConstants.NONE) != mxConstants.NONE) { - handles.push(createEdgeHandle(state, ['width', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], true, function(dist, nx, ny, p0, p1) + handles.push(createEdgeHandle(state, ['width', 'startSize', 'endSize'], true, function(dist, nx, ny, p0, p1) { let w = (state.shape.getEdgeWidth() - state.shape.strokewidth) * state.view.scale; - let l = mxUtils.getNumber(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; + let l = mxUtils.getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) + ny * w / 2, p0.y + ny * (l + state.shape.strokewidth * state.view.scale) - nx * w / 2); @@ -4013,29 +4013,29 @@ let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); - state.style[mxConstants.STYLE_STARTSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; - state.style['width'] = Math.round(w * 2) / state.view.scale; + state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; + state.style.width = Math.round(w * 2) / state.view.scale; // Applies to opposite side if (mxEvent.isControlDown(me.getEvent())) { - state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE]; + state.style.endSize = state.style.startSize; } // Snaps to end geometry if (!mxEvent.isAltDown(me.getEvent())) { - if (Math.abs(parseFloat(state.style[mxConstants.STYLE_STARTSIZE]) - parseFloat(state.style[mxConstants.STYLE_ENDSIZE])) < tol / 6) + if (Math.abs(parseFloat(state.style.startSize) - parseFloat(state.style.endSize)) < tol / 6) { - state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE]; + state.style.startSize = state.style.endSize; } } })); - handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], true, function(dist, nx, ny, p0, p1) + handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', 'startSize', 'endSize'], true, function(dist, nx, ny, p0, p1) { let w = (state.shape.getStartArrowWidth() - state.shape.strokewidth) * state.view.scale; - let l = mxUtils.getNumber(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; + let l = mxUtils.getNumber(state.style, 'startSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) + ny * w / 2, p0.y + ny * (l + state.shape.strokewidth * state.view.scale) - nx * w / 2); @@ -4044,38 +4044,38 @@ let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); - state.style[mxConstants.STYLE_STARTSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; - state.style['startWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale; + state.style.startSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; + state.style.startWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale; // Applies to opposite side if (mxEvent.isControlDown(me.getEvent())) { - state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE]; - state.style['endWidth'] = state.style['startWidth']; + state.style.endSize = state.style.startSize; + state.style.endWidth = state.style.startWidth; } // Snaps to endWidth if (!mxEvent.isAltDown(me.getEvent())) { - if (Math.abs(parseFloat(state.style[mxConstants.STYLE_STARTSIZE]) - parseFloat(state.style[mxConstants.STYLE_ENDSIZE])) < tol / 6) + if (Math.abs(parseFloat(state.style.startSize) - parseFloat(state.style.endSize)) < tol / 6) { - state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE]; + state.style.startSize = state.style.endSize; } - if (Math.abs(parseFloat(state.style['startWidth']) - parseFloat(state.style['endWidth'])) < tol) + if (Math.abs(parseFloat(state.style.startWidth) - parseFloat(state.style.endWidth)) < tol) { - state.style['startWidth'] = state.style['endWidth']; + state.style.startWidth = state.style.endWidth; } } })); } - if (mxUtils.getValue(state.style, mxConstants.STYLE_ENDARROW, mxConstants.NONE) != mxConstants.NONE) + if (mxUtils.getValue(state.style, 'endArrow', mxConstants.NONE) != mxConstants.NONE) { - handles.push(createEdgeHandle(state, ['width', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], false, function(dist, nx, ny, p0, p1) + handles.push(createEdgeHandle(state, ['width', 'startSize', 'endSize'], false, function(dist, nx, ny, p0, p1) { let w = (state.shape.getEdgeWidth() - state.shape.strokewidth) * state.view.scale; - let l = mxUtils.getNumber(state.style, mxConstants.STYLE_ENDSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; + let l = mxUtils.getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) - ny * w / 2, p0.y + ny * (l + state.shape.strokewidth * state.view.scale) + nx * w / 2); @@ -4084,29 +4084,29 @@ let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); - state.style[mxConstants.STYLE_ENDSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; - state.style['width'] = Math.round(w * 2) / state.view.scale; + state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; + state.style.width = Math.round(w * 2) / state.view.scale; // Applies to opposite side if (mxEvent.isControlDown(me.getEvent())) { - state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE]; + state.style.startSize = state.style.endSize; } // Snaps to start geometry if (!mxEvent.isAltDown(me.getEvent())) { - if (Math.abs(parseFloat(state.style[mxConstants.STYLE_ENDSIZE]) - parseFloat(state.style[mxConstants.STYLE_STARTSIZE])) < tol / 6) + if (Math.abs(parseFloat(state.style.endSize) - parseFloat(state.style.startSize)) < tol / 6) { - state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE]; + state.style.endSize = state.style.startSize; } } })); - handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', mxConstants.STYLE_STARTSIZE, mxConstants.STYLE_ENDSIZE], false, function(dist, nx, ny, p0, p1) + handles.push(createEdgeHandle(state, ['startWidth', 'endWidth', 'startSize', 'endSize'], false, function(dist, nx, ny, p0, p1) { let w = (state.shape.getEndArrowWidth() - state.shape.strokewidth) * state.view.scale; - let l = mxUtils.getNumber(state.style, mxConstants.STYLE_ENDSIZE, mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; + let l = mxUtils.getNumber(state.style, 'endSize', mxConstants.ARROW_SIZE / 5) * 3 * state.view.scale; return new mxPoint(p0.x + nx * (l + state.shape.strokewidth * state.view.scale) - ny * w / 2, p0.y + ny * (l + state.shape.strokewidth * state.view.scale) + nx * w / 2); @@ -4115,27 +4115,27 @@ let w = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, p1.x, p1.y, pt.x, pt.y)); let l = mxUtils.ptLineDist(p0.x, p0.y, p0.x + ny, p0.y - nx, pt.x, pt.y); - state.style[mxConstants.STYLE_ENDSIZE] = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; - state.style['endWidth'] = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale; + state.style.endSize = Math.round((l - state.shape.strokewidth) * 100 / 3) / 100 / state.view.scale; + state.style.endWidth = Math.max(0, Math.round(w * 2) - state.shape.getEdgeWidth()) / state.view.scale; // Applies to opposite side if (mxEvent.isControlDown(me.getEvent())) { - state.style[mxConstants.STYLE_STARTSIZE] = state.style[mxConstants.STYLE_ENDSIZE]; - state.style['startWidth'] = state.style['endWidth']; + state.style.startSize = state.style.endSize; + state.style.startWidth = state.style.endWidth; } // Snaps to start geometry if (!mxEvent.isAltDown(me.getEvent())) { - if (Math.abs(parseFloat(state.style[mxConstants.STYLE_ENDSIZE]) - parseFloat(state.style[mxConstants.STYLE_STARTSIZE])) < tol / 6) + if (Math.abs(parseFloat(state.style.endSize) - parseFloat(state.style.startSize)) < tol / 6) { - state.style[mxConstants.STYLE_ENDSIZE] = state.style[mxConstants.STYLE_STARTSIZE]; + state.style.endSize = state.style.startSize; } - if (Math.abs(parseFloat(state.style['endWidth']) - parseFloat(state.style['startWidth'])) < tol) + if (Math.abs(parseFloat(state.style.endWidth) - parseFloat(state.style.startWidth)) < tol) { - state.style['endWidth'] = state.style['startWidth']; + state.style.endWidth = state.style.startWidth; } } })); @@ -4147,18 +4147,18 @@ { let handles = []; - if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED)) + if (mxUtils.getValue(state.style, 'rounded')) { - let size = parseFloat(mxUtils.getValue(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_STARTSIZE)); + let size = parseFloat(mxUtils.getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE)); handles.push(createArcHandle(state, size / 2)); } // Start size handle must be last item in handles for hover to work in tables (see mouse event handler in Graph) - handles.push(createHandle(state, [mxConstants.STYLE_STARTSIZE], function(bounds) + handles.push(createHandle(state, .startSize, function(bounds) { - let size = parseFloat(mxUtils.getValue(state.style, mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_STARTSIZE)); + let size = parseFloat(mxUtils.getValue(state.style, 'startSize', mxConstants.DEFAULT_STARTSIZE)); - if (mxUtils.getValue(state.style, mxConstants.STYLE_HORIZONTAL, 1) == 1) + if (mxUtils.getValue(state.style, 'horizontal', 1) == 1) { return new mxPoint(bounds.getCenterX(), bounds.y + Math.max(0, Math.min(bounds.height, size))); } @@ -4168,8 +4168,8 @@ } }, function(bounds, pt) { - state.style[mxConstants.STYLE_STARTSIZE] = - (mxUtils.getValue(this.state.style, mxConstants.STYLE_HORIZONTAL, 1) == 1) ? + state.style.startSize = + (mxUtils.getValue(this.state.style, 'horizontal', 1) == 1) ? Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))) : Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x))); }, false, null, function(me) @@ -4196,8 +4196,8 @@ } } - graph.setCellStyles(mxConstants.STYLE_STARTSIZE, - state.style[mxConstants.STYLE_STARTSIZE], temp); + graph.setCellStyles('startSize', + state.style.startSize, temp); } } })); @@ -4218,7 +4218,7 @@ return new mxPoint(bounds.getCenterX(), bounds.y + size); }, function(bounds, pt) { - this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; }, 'umlFrame': function(state) @@ -4231,8 +4231,8 @@ return new mxPoint(bounds.x + w0, bounds.y + h0); }, function(bounds, pt) { - this.state.style['width'] = Math.round(Math.max(UmlFrame.prototype.corner, Math.min(bounds.width, pt.x - bounds.x))); - this.state.style['height'] = Math.round(Math.max(UmlFrame.prototype.corner * 1.5, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.width = Math.round(Math.max(UmlFrame.prototype.corner, Math.min(bounds.width, pt.x - bounds.x))); + this.state.style.height = Math.round(Math.max(UmlFrame.prototype.corner * 1.5, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; return handles; @@ -4250,10 +4250,10 @@ { let fixed = mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0'; let size = (fixed) ? Math.max(0, Math.min(bounds.width * 0.5, (pt.x - bounds.x))) : Math.max(0, Math.min(0.5, (pt.x - bounds.x) / bounds.width)); - this.state.style['size'] = size; + this.state.style.size = size; }, false)]; - if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) + if (mxUtils.getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -4271,7 +4271,7 @@ }, function(bounds, pt) { let m = Math.min(bounds.width, bounds.height); - this.state.style['size'] = Math.max(0, Math.min(1, Math.min((Math.max(0, bounds.getCenterY() - pt.y) / m) * 2, + this.state.style.size = Math.max(0, Math.min(1, Math.min((Math.max(0, bounds.getCenterY() - pt.y) / m) * 2, (Math.max(0, bounds.getCenterX() - pt.x) / m) * 2))); })]; }, @@ -4285,7 +4285,7 @@ return new mxPoint(bounds.x + bounds.width - size, bounds.y + size); }, function(bounds, pt) { - this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x), + this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x), Math.min(bounds.height, pt.y - bounds.y)))); })]; }, @@ -4299,7 +4299,7 @@ return new mxPoint(bounds.x + bounds.width - size, bounds.y + size); }, function(bounds, pt) { - this.state.style['size'] = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x), + this.state.style.size = Math.round(Math.max(0, Math.min(Math.min(bounds.width, bounds.x + bounds.width - pt.x), Math.min(bounds.height, pt.y - bounds.y)))); })]; }, @@ -4312,10 +4312,10 @@ return new mxPoint(bounds.x + bounds.width / 4, bounds.y + size * 3 / 4); }, function(bounds, pt) { - this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * 4 / 3))); + this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, (pt.y - bounds.y) * 4 / 3))); }, false)]; - if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) + if (mxUtils.getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -4335,7 +4335,7 @@ let fixed = mxUtils.getValue(this.state.style, 'fixedSize', '0') != '0'; let size = (fixed) ? Math.max(0, Math.min(bounds.width, (bounds.x + bounds.width - pt.x))) : Math.max(0, Math.min(1, (bounds.x + bounds.width - pt.x) / bounds.width)); - this.state.style['size'] = size; + this.state.style.size = size; }, false)]; }, 'callout': function(state) @@ -4350,8 +4350,8 @@ }, function(bounds, pt) { let base = Math.max(0, Math.min(bounds.width, mxUtils.getValue(this.state.style, 'base', CalloutShape.prototype.base))); - this.state.style['size'] = Math.round(Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y))); - this.state.style['position'] = Math.round(Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width)) * 100) / 100; + this.state.style.size = Math.round(Math.max(0, Math.min(bounds.height, bounds.y + bounds.height - pt.y))); + this.state.style.position = Math.round(Math.max(0, Math.min(1, (pt.x - bounds.x) / bounds.width)) * 100) / 100; }, false), createHandle(state, ['position2'], function(bounds) { var position2 = Math.max(0, Math.min(1, mxUtils.getValue(this.state.style, 'position2', CalloutShape.prototype.position2))); @@ -4371,10 +4371,10 @@ { let position = Math.max(0, Math.min(1, mxUtils.getValue(this.state.style, 'position', CalloutShape.prototype.position))); - this.state.style['base'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x - position * bounds.width))); + this.state.style.base = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x - position * bounds.width))); }, false)]; - if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) + if (mxUtils.getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -4391,11 +4391,11 @@ return new mxPoint(bounds.x + dx, bounds.y + dy); }, function(bounds, pt) { - this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x))); - this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x))); + this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; - if (mxUtils.getValue(state.style, mxConstants.STYLE_ROUNDED, false)) + if (mxUtils.getValue(state.style, 'rounded', false)) { handles.push(createArcHandle(state)); } @@ -4412,8 +4412,8 @@ return new mxPoint(bounds.x + dx / 2, bounds.y + dy * 2); }, function(bounds, pt) { - this.state.style['jettyWidth'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)) * 2); - this.state.style['jettyHeight'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)) / 2); + this.state.style.jettyWidth = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x)) * 2); + this.state.style.jettyHeight = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y)) / 2); })]; return handles; @@ -4428,8 +4428,8 @@ return new mxPoint(bounds.x + dx, bounds.y + dy); }, function(bounds, pt) { - this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x))); - this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width, pt.x - bounds.x))); + this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; }, 'tee': function(state) @@ -4442,8 +4442,8 @@ return new mxPoint(bounds.x + (bounds.width + dx) / 2, bounds.y + dy); }, function(bounds, pt) { - this.state.style['dx'] = Math.round(Math.max(0, Math.min(bounds.width / 2, (pt.x - bounds.x - bounds.width / 2)) * 2)); - this.state.style['dy'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.dx = Math.round(Math.max(0, Math.min(bounds.width / 2, (pt.x - bounds.x - bounds.width / 2)) * 2)); + this.state.style.dy = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; }, 'singleArrow': createArrowHandleFunction(1), @@ -4470,8 +4470,8 @@ tw = bounds.width - tw; } - this.state.style['tabWidth'] = Math.round(tw); - this.state.style['tabHeight'] = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); + this.state.style.tabWidth = Math.round(tw); + this.state.style.tabHeight = Math.round(Math.max(0, Math.min(bounds.height, pt.y - bounds.y))); }, false)]; }, 'document': function(state) @@ -4483,7 +4483,7 @@ return new mxPoint(bounds.x + 3 * bounds.width / 4, bounds.y + (1 - size) * bounds.height); }, function(bounds, pt) { - this.state.style['size'] = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height)); + this.state.style.size = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height)); }, false)]; }, 'tape': function(state) @@ -4495,7 +4495,7 @@ return new mxPoint(bounds.getCenterX(), bounds.y + size * bounds.height / 2); }, function(bounds, pt) { - this.state.style['size'] = Math.max(0, Math.min(1, ((pt.y - bounds.y) / bounds.height) * 2)); + this.state.style.size = Math.max(0, Math.min(1, ((pt.y - bounds.y) / bounds.height) * 2)); }, false)]; }, 'isoCube2' : function(state) @@ -4508,7 +4508,7 @@ return new mxPoint(bounds.x, bounds.y + isoH); }, function(bounds, pt) { - this.state.style['isoAngle'] = Math.max(0, (pt.y - bounds.y) * 50 / bounds.height); + this.state.style.isoAngle = Math.max(0, (pt.y - bounds.y) * 50 / bounds.height); }, true)]; }, 'cylinder2' : createCylinderHandleFunction(CylinderShape.prototype.size), @@ -4522,7 +4522,7 @@ return new mxPoint(bounds.getCenterX(), bounds.y + (1 - size) * bounds.height); }, function(bounds, pt) { - this.state.style['size'] = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height)); + this.state.style.size = Math.max(0, Math.min(1, (bounds.y + bounds.height - pt.y) / bounds.height)); }, false)]; }, 'step': createDisplayHandleFunction(StepShape.prototype.size, true, null, true, StepShape.prototype.fixedSize), @@ -4550,7 +4550,7 @@ // LATER: Make locked state independent of rotatable flag, fix toggle if default is false //if (this.graph.isCellResizable(this.state.cell) || this.graph.isCellMovable(this.state.cell)) { - let name = this.state.style['shape']; + let name = this.state.style.shape; if (mxCellRenderer.defaultShapes[name] == null && mxStencilRegistry.getStencil(name) == null) @@ -4592,7 +4592,7 @@ mxEdgeHandler.prototype.createCustomHandles = function() { - let name = this.state.style['shape']; + let name = this.state.style.shape; if (mxCellRenderer.defaultShapes[name] == null && mxStencilRegistry.getStencil(name) == null) @@ -4777,7 +4777,7 @@ CalloutShape.prototype.getConstraints = function(style, w, h) { let constr = []; - let arcSize = mxUtils.getValue(this.style, mxConstants.STYLE_ARCSIZE, mxConstants.LINE_ARCSIZE) / 2; + let arcSize = mxUtils.getValue(this.style, 'arcSize', mxConstants.LINE_ARCSIZE) / 2; let s = Math.max(0, Math.min(h, parseFloat(mxUtils.getValue(this.style, 'size', this.size)))); let dx = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position', this.position)))); var dx2 = w * Math.max(0, Math.min(1, parseFloat(mxUtils.getValue(this.style, 'position2', this.position2)))); diff --git a/docs/stashed/grapheditor/www/js/Sidebar.js b/docs/stashed/grapheditor/www/js/Sidebar.js index eda6492cf..cf890203d 100644 --- a/docs/stashed/grapheditor/www/js/Sidebar.js +++ b/docs/stashed/grapheditor/www/js/Sidebar.js @@ -2639,11 +2639,11 @@ Sidebar.prototype.updateShapes = function(source, targets) } // Replaces the participant style in the lifeline shape with the target shape - if (style[mxConstants.STYLE_SHAPE] == 'umlLifeline' && - sourceCellStyle[mxConstants.STYLE_SHAPE] != 'umlLifeline') + if (style.shape == 'umlLifeline' && + sourceCellStyle.shape != 'umlLifeline') { - graph.setCellStyles(mxConstants.STYLE_SHAPE, 'umlLifeline', [targetCell]); - graph.setCellStyles('participant', sourceCellStyle[mxConstants.STYLE_SHAPE], [targetCell]); + graph.setCellStyles('shape', 'umlLifeline', [targetCell]); + graph.setCellStyles('participant', sourceCellStyle.shape, [targetCell]); } for (let j = 0; j < styles.length; j++) @@ -3143,8 +3143,8 @@ Sidebar.prototype.isDropStyleEnabled = function(cells, firstVertex) if (vstyle != null) { - result = mxUtils.getValue(vstyle, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE) != mxConstants.NONE || - mxUtils.getValue(vstyle, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) != mxConstants.NONE; + result = mxUtils.getValue(vstyle, 'strokeColor', mxConstants.NONE) != mxConstants.NONE || + mxUtils.getValue(vstyle, 'fillColor', mxConstants.NONE) != mxConstants.NONE; } } @@ -3498,11 +3498,11 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, // Shift means disabled, delayed on cells with children, shows after this.dropTargetDelay, hides after 2500ms if (dropStyleEnabled && (timeOnTarget < 2500) && state != null && !mxEvent.isShiftDown(evt) && // If shape is equal or target has no stroke, fill and gradient then use longer delay except for images - (((mxUtils.getValue(state.style, mxConstants.STYLE_SHAPE) != mxUtils.getValue(sourceCellStyle, mxConstants.STYLE_SHAPE) && - (mxUtils.getValue(state.style, mxConstants.STYLE_STROKECOLOR, mxConstants.NONE) != mxConstants.NONE || - mxUtils.getValue(state.style, mxConstants.STYLE_FILLCOLOR, mxConstants.NONE) != mxConstants.NONE || - mxUtils.getValue(state.style, mxConstants.STYLE_GRADIENTCOLOR, mxConstants.NONE) != mxConstants.NONE)) || - mxUtils.getValue(sourceCellStyle, mxConstants.STYLE_SHAPE) == 'image') || + (((mxUtils.getValue(state.style, 'shape') != mxUtils.getValue(sourceCellStyle, 'shape') && + (mxUtils.getValue(state.style, 'strokeColor', mxConstants.NONE) != mxConstants.NONE || + mxUtils.getValue(state.style, 'fillColor', mxConstants.NONE) != mxConstants.NONE || + mxUtils.getValue(state.style, 'gradientColor', mxConstants.NONE) != mxConstants.NONE)) || + mxUtils.getValue(sourceCellStyle, 'shape') == 'image') || timeOnTarget > 1500 || state.cell.isEdge()) && (timeOnTarget > this.dropTargetDelay) && !this.isDropStyleTargetIgnored(state) && ((state.cell.isVertex() && firstVertex != null) || (state.cell.isEdge() && cells[0].isEdge()))) @@ -3739,7 +3739,7 @@ Sidebar.prototype.createDragSource = function(elt, dropHandler, preview, cells, arrowLeft.style.left = Math.floor(bds.x - this.triangleLeft.width) + 'px'; arrowLeft.style.top = arrowRight.style.top; - if (state.style['portConstraint'] != 'eastwest') + if (state.style.portConstraint != 'eastwest') { graph.container.appendChild(arrowUp); graph.container.appendChild(arrowDown); diff --git a/docs/stashed/grapheditor/www/js/Toolbar.js b/docs/stashed/grapheditor/www/js/Toolbar.js index 5e7423f9c..ce4f48857 100644 --- a/docs/stashed/grapheditor/www/js/Toolbar.js +++ b/docs/stashed/grapheditor/www/js/Toolbar.js @@ -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); diff --git a/packages/core/src/editor/mxEditor.js b/packages/core/src/editor/mxEditor.js index c028428c6..6f16647a3 100644 --- a/packages/core/src/editor/mxEditor.js +++ b/packages/core/src/editor/mxEditor.js @@ -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); } }); diff --git a/packages/core/src/handler/mxCellHighlight.ts b/packages/core/src/handler/mxCellHighlight.ts index cc26f32bc..8540804ad 100644 --- a/packages/core/src/handler/mxCellHighlight.ts +++ b/packages/core/src/handler/mxCellHighlight.ts @@ -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 = this.getStrokeWidth() / this.state.view.scale; this.shape.outline = true; diff --git a/packages/core/src/handler/mxConnectionHandler.js b/packages/core/src/handler/mxConnectionHandler.js index dd60bf6fe..1fed24390 100644 --- a/packages/core/src/handler/mxConnectionHandler.js +++ b/packages/core/src/handler/mxConnectionHandler.js @@ -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) { diff --git a/packages/core/src/handler/mxEdgeHandler.js b/packages/core/src/handler/mxEdgeHandler.js index c4a46129f..b8f7f72b7 100644 --- a/packages/core/src/handler/mxEdgeHandler.js +++ b/packages/core/src/handler/mxEdgeHandler.js @@ -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']; } } diff --git a/packages/core/src/handler/mxElbowEdgeHandler.js b/packages/core/src/handler/mxElbowEdgeHandler.js index cdc805ab5..1722900c1 100644 --- a/packages/core/src/handler/mxElbowEdgeHandler.js +++ b/packages/core/src/handler/mxElbowEdgeHandler.js @@ -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'; } diff --git a/packages/core/src/handler/mxGraphHandler.js b/packages/core/src/handler/mxGraphHandler.js index 0f0a4e4bb..e16fa9367 100644 --- a/packages/core/src/handler/mxGraphHandler.js +++ b/packages/core/src/handler/mxGraphHandler.js @@ -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) { diff --git a/packages/core/src/handler/mxVertexHandler.js b/packages/core/src/handler/mxVertexHandler.js index db7935d02..5408b6e70 100644 --- a/packages/core/src/handler/mxVertexHandler.js +++ b/packages/core/src/handler/mxVertexHandler.js @@ -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(); } diff --git a/packages/core/src/layout/mxGraphLayout.js b/packages/core/src/layout/mxGraphLayout.js index 35422b799..00b3a85fe 100644 --- a/packages/core/src/layout/mxGraphLayout.js +++ b/packages/core/src/layout/mxGraphLayout.js @@ -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]); } /** diff --git a/packages/core/src/layout/mxStackLayout.js b/packages/core/src/layout/mxStackLayout.js index 03fecdf84..b8221cd96 100644 --- a/packages/core/src/layout/mxStackLayout.js +++ b/packages/core/src/layout/mxStackLayout.js @@ -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) { diff --git a/packages/core/src/shape/edge/mxArrowConnector.js b/packages/core/src/shape/edge/mxArrowConnector.js index 4488399a4..186fc956a 100644 --- a/packages/core/src/shape/edge/mxArrowConnector.js +++ b/packages/core/src/shape/edge/mxArrowConnector.js @@ -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; } } diff --git a/packages/core/src/shape/edge/mxConnector.js b/packages/core/src/shape/edge/mxConnector.js index 5ce7da18a..c71a28150 100644 --- a/packages/core/src/shape/edge/mxConnector.js +++ b/packages/core/src/shape/edge/mxConnector.js @@ -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; } diff --git a/packages/core/src/shape/edge/mxPolyline.js b/packages/core/src/shape/edge/mxPolyline.js index 20fb146a9..4d07f82f0 100644 --- a/packages/core/src/shape/edge/mxPolyline.js +++ b/packages/core/src/shape/edge/mxPolyline.js @@ -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, 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(); diff --git a/packages/core/src/shape/mxLabel.js b/packages/core/src/shape/mxLabel.js index 86fb5f3b5..ee8783c8c 100644 --- a/packages/core/src/shape/mxLabel.js +++ b/packages/core/src/shape/mxLabel.js @@ -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; diff --git a/packages/core/src/shape/mxShape.ts b/packages/core/src/shape/mxShape.ts index e417a2485..cac4e552c 100644 --- a/packages/core/src/shape/mxShape.ts +++ b/packages/core/src/shape/mxShape.ts @@ -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 = (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 to the shape. This * implementation assigns the following styles to local fields: * - * - => fill - * - => gradient - * - => gradientDirection - * - => opacity + * - <'fillColor'> => fill + * - <'gradientColor'> => gradient + * - <'gradientDirection'> => gradientDirection + * - <'opacity'> => opacity * - => fillOpacity * - => strokeOpacity - * - => stroke - * - => strokewidth - * - => isShadow - * - => isDashed - * - => spacing - * - => startSize - * - => endSize - * - => isRounded - * - => startArrow - * - => endArrow - * - => rotation - * - => direction - * - => glass + * - <'strokeColor'> => stroke + * - <'strokeWidth'> => strokewidth + * - <'shadow'> => isShadow + * - <'dashed'> => isDashed + * - <'spacing'> => spacing + * - <'startSize'> => startSize + * - <'endSize'> => endSize + * - <'rounded'> => isRounded + * - <'startArrow'> => startArrow + * - <'endArrow'> => endArrow + * - <'rotation'> => rotation + * - <'direction'> => direction + * - <'glass'> => glass * * This keeps a reference to the