<!-- saved from url=(0026)http://www.naturaldocs.org -->
<divid=Content><divclass="CClass"><divclass=CTopicid=MainTopic><h1class=CTitle><aname="mxStylesheet"></a>mxStylesheet</h1><divclass=CBody><p>Defines the appearance of the cells in a graph. See <ahref="#mxStylesheet.putCellStyle"class=LFunctionid=link11onMouseOver="ShowTip(event, 'tt8', 'link11')"onMouseOut="HideTip('tt8')">putCellStyle</a> 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 <ahref="../util/mxUtils-js.html#mxUtils.clone"class=LFunctionid=link12onMouseOver="ShowTip(event, 'tt11', 'link12')"onMouseOut="HideTip('tt11')">mxUtils.clone</a> and turned into a string for debugging using <ahref="../util/mxUtils-js.html#mxUtils.toString"class=LFunctionid=link13onMouseOver="ShowTip(event, 'tt12', 'link13')"onMouseOut="HideTip('tt12')">mxUtils.toString</a>.</p><h4class=CHeading>Default Styles</h4><p>The stylesheet contains two built-in styles, which are used if no style is defined for a cell:</p><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>defaultVertex</td><tdclass=CDLDescription>Default style for vertices</td></tr><tr><tdclass=CDLEntry>defaultEdge</td><tdclass=CDLDescription>Default style for edges</td></tr></table><h4class=CHeading>Example</h4><blockquote><preclass="prettyprint">var vertexStyle = stylesheet.getDefaultVertexStyle();
vertexStyle[mxConstants.ROUNDED] = true;
var edgeStyle = stylesheet.getDefaultEdgeStyle();
edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;</pre></blockquote><p>Modifies the built-in default styles.</p><p>To avoid the default style for a cell, add a leading semicolon to the style definition, eg.</p><blockquote><preclass="prettyprint">;shadow=1</pre></blockquote><h4class=CHeading>Removing keys</h4><p>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</p><p>See also the helper methods in mxUtils to modify strings of this format, namely <ahref="../util/mxUtils-js.html#mxUtils.setStyle"class=LFunctionid=link14onMouseOver="ShowTip(event, 'tt13', 'link14')"onMouseOut="HideTip('tt13')">mxUtils.setStyle</a>, <ahref="../util/mxUtils-js.html#mxUtils.indexOfStylename"class=LFunctionid=link15onMouseOver="ShowTip(event, 'tt14', 'link15')"onMouseOut="HideTip('tt14')">mxUtils.indexOfStylename</a>, <ahref="../util/mxUtils-js.html#mxUtils.addStylename"class=LFunctionid=link16onMouseOver="ShowTip(event, 'tt15', 'link16')"onMouseOut="HideTip('tt15')">mxUtils.addStylename</a>, <ahref="../util/mxUtils-js.html#mxUtils.removeStylename"class=LFunctionid=link17onMouseOver="ShowTip(event, 'tt16', 'link17')"onMouseOut="HideTip('tt16')">mxUtils.removeStylename</a>, <ahref="../util/mxUtils-js.html#mxUtils.removeAllStylenames"class=LFunctionid=link18onMouseOver="ShowTip(event, 'tt17', 'link18')"onMouseOut="HideTip('tt17')">mxUtils.removeAllStylenames</a> and <ahref="../util/mxUtils-js.html#mxUtils.setStyleFlag"class=LFunctionid=link19onMouseOver="ShowTip(event, 'tt18', 'link19')"onMouseOut="HideTip('tt18')">mxUtils.setStyleFlag</a>.</p><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SMain"><tdclass=SEntry><ahref="#mxStylesheet">mxStylesheet</a></td><tdclass=SDescription>Defines the appearance of the cells in a graph. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxStylesheet.Functions">Functions</a></td><tdclass=SDescription></td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxStylesheet.mxStylesheet"id=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">mxStylesheet</a></td><tdclass=SDescription>Constructs a new stylesheet and assigns default styles.</td></tr><trclass="SFunction SIndent2"><tdclass=SEntry><ahref="#mxStylesheet.styles">styles</a></td><tdclass=SDescription>Maps from names to cell styles. </td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxStylesheet.createDefaultVertexStyle"id=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">createDefaultVertexStyle</a></td><tdclass=SDescription>Creates and returns the default vertex style.</td></tr><trclass="SFunction SIndent2"><tdclass=SEntry><ahref="#mxStylesheet.createDefaultEdgeStyle"id=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">createDefaultEdgeStyle</a></td><tdclass=SDescription>Creates and returns the default edge style.</td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxStylesheet.putDefaultVertexStyle"id=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">putDefaultVertexStyle</a></td><tdclass=SDescription>Sets the default style for vertices using defaultVertex as the stylename.</td></tr><trclass="SFunction SIndent2"><tdclass=SEntry><ahref="#mxStylesheet.putDefaultEdgeStyle"id=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">putDefaultEdgeStyle</a></td><tdclass=SDescription>Sets the default style for edges using defaultEdge as the stylename.</td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxStylesheet.getDefaultVertexStyle"id=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">getDefaultVertexStyle</a></td><tdclass=SDescription>Returns the default style for vertices.</td></tr><trclass="SFunction SIndent2"><tdclass=SE
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStylesheet.mxStylesheet"></a>mxStylesheet</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">function mxStylesheet()</td></tr></table></blockquote><p>Constructs a new stylesheet and assigns default styles.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStylesheet.styles"></a>styles</h3><divclass=CBody><p>Maps from names to cell styles. Each cell style is a map of key, value pairs.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStylesheet.createDefaultVertexStyle"></a>createDefaultVertexStyle</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStylesheet.prototype.createDefaultVertexStyle = function()</td></tr></table></blockquote><p>Creates and returns the default vertex style.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStylesheet.createDefaultEdgeStyle"></a>createDefaultEdgeStyle</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStylesheet.prototype.createDefaultEdgeStyle = function()</td></tr></table></blockquote><p>Creates and returns the default edge style.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStylesheet.putDefaultVertexStyle"></a>putDefaultVertexStyle</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStylesheet.prototype.putDefaultVertexStyle = function(</td><tdclass="PParameter prettyprint "nowrap>style</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Sets the default style for vertices using defaultVertex as the stylename.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>style</td><tdclass=CDLDescription>Key, value pairs that define the style.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStylesheet.putDefaultEdgeStyle"></a>putDefaultEdgeStyle</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStylesheet.prototype.putDefaultEdgeStyle = function(</td><tdclass="PParameter prettyprint "nowrap>style</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Sets the default style for edges using defaultEdge as the stylename.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStylesheet.getDefaultVertexStyle"></a>getDefaultVertexStyle</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStylesheet.prototype.getDefaultVertexStyle = function()</td></tr></table></blockquote><p>Returns the default style for vertices.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStylesheet.getDefaultEdgeStyle"></a>getDefaultEdgeStyle</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStylesheet.prototype.getDefaultEdgeStyle = function()</td></tr></table></blockquote><p>Sets the default style for edges.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStylesheet.putCellStyle"></a>putCellStyle</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStylesheet.prototype.putCellStyle = function(</td><tdclass="PParameter prettyprint "nowrap>name,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>style</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Stores the given map of key, value pairs under the given name in <ahref="#mxStylesheet.styles"class=LFunctionid=link20onMouseOver="ShowTip(event, 'tt9', 'link20')"onMouseOut="HideTip('tt9')">styles</a>.</p><h4class=CHeading>Example</h4><p>The following example adds a new style called ‘rounded’ into an existing stylesheet:</p><blockquote><preclass="prettyprint">var style = new Object();
graph.getStylesheet().putCellStyle('rounded', style);</pre></blockquote><p>In the above example, the new style is an object. The possible keys of the object are all the constants in <ahref="../util/mxConstants-js.html#mxConstants"class=LClassid=link21onMouseOver="ShowTip(event, 'tt19', 'link21')"onMouseOut="HideTip('tt19')">mxConstants</a> 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:</p><blockquote><preclass="prettyprint">model.setStyle(cell, 'rounded');</pre></blockquote><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>name</td><tdclass=CDLDescription>Name for the style to be stored.</td></tr><tr><tdclass=CDLEntry>style</td><tdclass=CDLDescription>Key, value pairs that define the style.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStylesheet.getCellStyle"></a>getCellStyle</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStylesheet.prototype.getCellStyle = function(</td><tdclass="PParameter prettyprint "nowrap>name,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>defaultStyle</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>name</td><tdclass=CDLDescription>String of the form [(stylename|key=value);] that represents the style.</td></tr><tr><tdclass=CDLEntry>defaultStyle</td><tdclass=CDLDescription>Default style to be returned if no style can be found.</td></tr></table></div></div></div>
<divclass=CToolTipid="tt1"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">function mxStylesheet()</td></tr></table></blockquote>Constructs a new stylesheet and assigns default styles.</div></div><divclass=CToolTipid="tt2"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStylesheet.prototype.createDefaultVertexStyle = function()</td></tr></table></blockquote>Creates and returns the default vertex style.</div></div><divclass=CToolTipid="tt3"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStylesheet.prototype.createDefaultEdgeStyle = function()</td></tr></table></blockquote>Creates and returns the default edge style.</div></div><divclass=CToolTipid="tt4"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStylesheet.prototype.putDefaultVertexStyle = function(</td><tdclass="PParameter prettyprint "nowrap>style</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Sets the default style for vertices using defaultVertex as the stylename.</div></div><divclass=CToolTipid="tt5"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStylesheet.prototype.putDefaultEdgeStyle = function(</td><tdclass="PParameter prettyprint "nowrap>style</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Sets the default style for edges using defaultEdge as the stylename.</div></div><divclass=CToolTipid="tt6"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStylesheet.prototype.getDefaultVertexStyle = function()</td></tr></table></blockquote>Returns the default style for vertices.</div></div><divclass=CToolTipid="tt7"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStylesheet.prototype.getDefaultEdgeStyle = function()</td></tr></table></blockquote>Sets the default style for edges.</div></div><divclass=CToolTipid="tt8"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStylesheet.prototype.putCellStyle = function(</td><tdclass="PParameter prettyprint "nowrap>name,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>style</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Stores the given map of key, value pairs under the given name in styles.</div></div><divclass=CToolTipid="tt9"><divclass=CFunction>Maps from names to cell styles. </div></div><divclass=CToolTipid="tt10"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStylesheet.prototype.getCellStyle = function(</td><tdclass="PParameter prettyprint "nowrap>name,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>defaultStyle</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the cell style for the specified stylename or the given defaultStyle if no style can be found for the given stylename.</div></div><divclass=CToolTipid="tt11"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>clone: function(</td><tdclass="
