<!-- 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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStylesheet.prototype.putDefaultVertexStyle = function(</td><tdclass=PParameternowrap>style</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStylesheet.prototype.putDefaultEdgeStyle = function(</td><tdclass=PParameternowrap>style</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStylesheet.prototype.putCellStyle = function(</td><tdclass=PParameternowrap>name,</td></tr><tr><td></td><tdclass=PParameternowrap>style</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStylesheet.prototype.getCellStyle = function(</td><tdclass=PParameternowrap>name,</td></tr><tr><td></td><tdclass=PParameternowrap>defaultStyle</td><tdclass=PAfterParametersnowrap>)</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>
</div><!--Content-->
<divid=Footer><ahref="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->
<divclass=CToolTipid="tt1"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStylesheet.prototype.putDefaultVertexStyle = function(</td><tdclass=PParameternowrap>style</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStylesheet.prototype.putDefaultEdgeStyle = function(</td><tdclass=PParameternowrap>style</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStylesheet.prototype.putCellStyle = function(</td><tdclass=PParameternowrap>name,</td></tr><tr><td></td><tdclass=PParameternowrap>style</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStylesheet.prototype.getCellStyle = function(</td><tdclass=PParameternowrap>name,</td></tr><tr><td></td><tdclass=PParameternowrap>defaultStyle</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>clone: function(</td><tdclass=PParameternowrap>obj,</td></tr><tr><td></td><tdclass=PParameternowrap>transients,</td></tr><tr><td></td><tdclass=PParameternowrap>shallow</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></
