mxStylesheet

Defines the appearance of the cells in a graph.  See putCellStyle 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 mxUtils.clone and turned into a string for debugging using mxUtils.toString.

Default Styles

The stylesheet contains two built-in styles, which are used if no style is defined for a cell:

defaultVertexDefault style for vertices
defaultEdgeDefault style for edges

Example

var vertexStyle = stylesheet.getDefaultVertexStyle();
vertexStyle[mxConstants.STYLE_ROUNDED] = true;
var edgeStyle = stylesheet.getDefaultEdgeStyle();
edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;

Modifies the built-in default styles.

To avoid the default style for a cell, add a leading semicolon to the style definition, eg.

;shadow=1

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 mxUtils.setStyle, mxUtils.indexOfStylename, mxUtils.addStylename, mxUtils.removeStylename, mxUtils.removeAllStylenames and mxUtils.setStyleFlag.

Summary
mxStylesheetDefines the appearance of the cells in a graph.
Functions
mxStylesheetConstructs a new stylesheet and assigns default styles.
stylesMaps from names to cell styles.
createDefaultVertexStyleCreates and returns the default vertex style.
createDefaultEdgeStyleCreates and returns the default edge style.
putDefaultVertexStyleSets the default style for vertices using defaultVertex as the stylename.
putDefaultEdgeStyleSets the default style for edges using defaultEdge as the stylename.
getDefaultVertexStyleReturns the default style for vertices.
getDefaultEdgeStyleSets the default style for edges.
putCellStyleStores the given map of key, value pairs under the given name in styles.
getCellStyleReturns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.

Functions

mxStylesheet

function mxStylesheet()

Constructs a new stylesheet and assigns default styles.

styles

Maps from names to cell styles.  Each cell style is a map of key, value pairs.

createDefaultVertexStyle

mxStylesheet.prototype.createDefaultVertexStyle = function()

Creates and returns the default vertex style.

createDefaultEdgeStyle

mxStylesheet.prototype.createDefaultEdgeStyle = function()

Creates and returns the default edge style.

putDefaultVertexStyle

mxStylesheet.prototype.putDefaultVertexStyle = function(style)

Sets the default style for vertices using defaultVertex as the stylename.

Parameters

styleKey, value pairs that define the style.

putDefaultEdgeStyle

mxStylesheet.prototype.putDefaultEdgeStyle = function(style)

Sets the default style for edges using defaultEdge as the stylename.

getDefaultVertexStyle

mxStylesheet.prototype.getDefaultVertexStyle = function()

Returns the default style for vertices.

getDefaultEdgeStyle

mxStylesheet.prototype.getDefaultEdgeStyle = function()

Sets the default style for edges.

putCellStyle

mxStylesheet.prototype.putCellStyle = function(name,
style)

Stores the given map of key, value pairs under the given name in styles.

Example

The following example adds a new style called ‘rounded’ into an existing stylesheet:

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

In the above example, the new style is an object.  The possible keys of the object are all the constants in mxConstants that start with STYLE and the values are either JavaScript objects, such as <mxPerimeter.RightAngleRectanglePerimeter> (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:

model.setStyle(cell, 'rounded');

Parameters

nameName for the style to be stored.
styleKey, value pairs that define the style.

getCellStyle

mxStylesheet.prototype.getCellStyle = function(name,
defaultStyle)

Returns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.

Parameters

nameString of the form [(stylename|key=value);] that represents the style.
defaultStyleDefault style to be returned if no style can be found.
function mxStylesheet()
Constructs a new stylesheet and assigns default styles.
mxStylesheet.prototype.createDefaultVertexStyle = function()
Creates and returns the default vertex style.
mxStylesheet.prototype.createDefaultEdgeStyle = function()
Creates and returns the default edge style.
mxStylesheet.prototype.putDefaultVertexStyle = function(style)
Sets the default style for vertices using defaultVertex as the stylename.
mxStylesheet.prototype.putDefaultEdgeStyle = function(style)
Sets the default style for edges using defaultEdge as the stylename.
mxStylesheet.prototype.getDefaultVertexStyle = function()
Returns the default style for vertices.
mxStylesheet.prototype.getDefaultEdgeStyle = function()
Sets the default style for edges.
mxStylesheet.prototype.putCellStyle = function(name,
style)
Stores the given map of key, value pairs under the given name in styles.
Maps from names to cell styles.
mxStylesheet.prototype.getCellStyle = function(name,
defaultStyle)
Returns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.
clone: function(obj,
transients,
shallow)
Recursively clones the specified object ignoring all fieldnames in the given array of transient fields.
toString: function(obj)
Returns a textual representation of the specified object.
setStyle: function(style,
key,
value)
Adds or removes the given key, value pair to the style and returns the new style.
indexOfStylename: function(style,
stylename)
Returns the index of the given stylename in the given style.
addStylename: function(style,
stylename)
Adds the specified stylename to the given style if it does not already contain the stylename.
removeStylename: function(style,
stylename)
Removes all occurrences of the specified stylename in the given style and returns the updated style.
removeAllStylenames: function(style)
Removes all stylenames from the given style and returns the updated style.
setStyleFlag: function(style,
key,
flag,
value)
Sets or removes the given key from the specified style and returns the new style.
Defines various global constants.
Close