/** * Copyright (c) 2006-2015, JGraph Ltd * Copyright (c) 2006-2015, Gaudenz Alder */ /** * Class: mxStylesheet * * Defines the appearance of the cells in a graph. See for an * example of creating a new cell style. It is recommended to use objects, not * arrays for holding cell styles. Existing styles can be cloned using * and turned into a string for debugging using * . * * Default Styles: * * The stylesheet contains two built-in styles, which are used if no style is * defined for a cell: * * defaultVertex - Default style for vertices * defaultEdge - Default style for edges * * Example: * * (code) * var vertexStyle = stylesheet.getDefaultVertexStyle(); * vertexStyle[mxConstants.STYLE_ROUNDED] = true; * var edgeStyle = stylesheet.getDefaultEdgeStyle(); * edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation; * (end) * * Modifies the built-in default styles. * * To avoid the default style for a cell, add a leading semicolon * to the style definition, eg. * * (code) * ;shadow=1 * (end) * * Removing keys: * * For removing a key in a cell style of the form [stylename;|key=value;] the * special value none can be used, eg. highlight;fillColor=none * * See also the helper methods in mxUtils to modify strings of this format, * namely , , * , , * and . * * Constructor: mxStylesheet * * Constructs a new stylesheet and assigns default styles. */ function mxStylesheet() { this.styles = new Object(); this.putDefaultVertexStyle(this.createDefaultVertexStyle()); this.putDefaultEdgeStyle(this.createDefaultEdgeStyle()); }; /** * Function: styles * * Maps from names to cell styles. Each cell style is a map of key, * value pairs. */ mxStylesheet.prototype.styles; /** * Function: createDefaultVertexStyle * * Creates and returns the default vertex style. */ mxStylesheet.prototype.createDefaultVertexStyle = function() { var style = new Object(); style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style[mxConstants.STYLE_FILLCOLOR] = '#C3D9FF'; style[mxConstants.STYLE_STROKECOLOR] = '#6482B9'; style[mxConstants.STYLE_FONTCOLOR] = '#774400'; return style; }; /** * Function: createDefaultEdgeStyle * * Creates and returns the default edge style. */ mxStylesheet.prototype.createDefaultEdgeStyle = function() { var style = new Object(); style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR; style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC; style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; style[mxConstants.STYLE_STROKECOLOR] = '#6482B9'; style[mxConstants.STYLE_FONTCOLOR] = '#446299'; return style; }; /** * Function: putDefaultVertexStyle * * Sets the default style for vertices using defaultVertex as the * stylename. * * Parameters: * style - Key, value pairs that define the style. */ mxStylesheet.prototype.putDefaultVertexStyle = function(style) { this.putCellStyle('defaultVertex', style); }; /** * Function: putDefaultEdgeStyle * * Sets the default style for edges using defaultEdge as the stylename. */ mxStylesheet.prototype.putDefaultEdgeStyle = function(style) { this.putCellStyle('defaultEdge', style); }; /** * Function: getDefaultVertexStyle * * Returns the default style for vertices. */ mxStylesheet.prototype.getDefaultVertexStyle = function() { return this.styles['defaultVertex']; }; /** * Function: getDefaultEdgeStyle * * Sets the default style for edges. */ mxStylesheet.prototype.getDefaultEdgeStyle = function() { return this.styles['defaultEdge']; }; /** * Function: putCellStyle * * Stores the given map of key, value pairs under the given name in * . * * Example: * * The following example adds a new style called 'rounded' into an * existing stylesheet: * * (code) * var style = new Object(); * style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; * style[mxConstants.STYLE_ROUNDED] = true; * graph.getStylesheet().putCellStyle('rounded', style); * (end) * * In the above example, the new style is an object. The possible keys of * the object are all the constants in that start with STYLE * and the values are either JavaScript objects, such as * (which is in fact a function) * or expressions, such as true. Note that not all keys will be * interpreted by all shapes (eg. the line shape ignores the fill color). * The final call to this method associates the style with a name in the * stylesheet. The style is used in a cell with the following code: * * (code) * model.setStyle(cell, 'rounded'); * (end) * * Parameters: * * name - Name for the style to be stored. * style - Key, value pairs that define the style. */ mxStylesheet.prototype.putCellStyle = function(name, style) { this.styles[name] = style; }; /** * Function: getCellStyle * * Returns the cell style for the specified stylename or the given * defaultStyle if no style can be found for the given stylename. * * Parameters: * * name - String of the form [(stylename|key=value);] that represents the * style. * defaultStyle - Default style to be returned if no style can be found. */ mxStylesheet.prototype.getCellStyle = function(name, defaultStyle) { var style = defaultStyle; if (name != null && name.length > 0) { var pairs = name.split(';'); if (style != null && name.charAt(0) != ';') { style = mxUtils.clone(style); } else { style = new Object(); } // Parses each key, value pair into the existing style for (var i = 0; i < pairs.length; i++) { var tmp = pairs[i]; var pos = tmp.indexOf('='); if (pos >= 0) { var key = tmp.substring(0, pos); var value = tmp.substring(pos + 1); if (value == mxConstants.NONE) { delete style[key]; } else if (mxUtils.isNumeric(value)) { style[key] = parseFloat(value); } else { style[key] = value; } } else { // Merges the entries from a named style var tmpStyle = this.styles[tmp]; if (tmpStyle != null) { for (var key in tmpStyle) { style[key] = tmpStyle[key]; } } } } } return style; };