<divid=Content><divclass="CClass"><divclass=CTopicid=MainTopic><h1class=CTitle><aname="mxStencil"></a>mxStencil</h1><divclass=CBody><p>Implements a generic shape which is based on a XML node as a description.</p><h4class=CHeading>shape</h4><h4class=CHeading>The outer element is <b>shape</b>, that has attributes</h4><ul><li>”name”, string, required. The stencil name that uniquely identifies the shape.</li><li>”w” and “h” are optional decimal view bounds. This defines your co-ordinate system for the graphics operations in the shape. The default is 100,100.</li><li>”aspect”, optional string. Either “variable”, the default, or “fixed”. Fixed means always render the shape with the aspect ratio defined by the ratio w/h. Variable causes the ratio to match that of the geometry of the current vertex.</li><li>”strokewidth”, optional string. Either an integer or the string “inherit”. “inherit” indicates that the strokeWidth of the cell is only changed on scaling, not on resizing. Default is “1”. If numeric values are used, the strokeWidth of the cell is changed on both scaling and resizing and the value defines the multiple that is applied to the width.</li></ul><h4class=CHeading>connections</h4><p>If you want to define specific fixed connection points on the shape use the <b>connections</b> element. Each <b>constraint</b> element within connections defines a fixed connection point on the shape. Constraints have attributes:</p><ul><li>”perimeter”, required. 1 or 0. 0 sets the connection point where specified by x,y. 1 Causes the position of the connection point to be extrapolated from the center of the shape, through x,y to the point of intersection with the perimeter of the shape.</li><li>”x” and “y” are the position of the fixed point relative to the bounds of the shape. They can be automatically adjusted if perimeter=1. So, (0,0) is top left, (0.5,0.5) the center, (1,0.5) the center of the right hand edge of the bounds, etc. Values may be less than 0 or greater than 1 to be positioned outside of the shape.</li><li>”name”, optional string. A unique identifier for the port on the shape.</li></ul><h4class=CHeading>background and foreground</h4><p>The path of the graphics drawing is split into two elements, <b>foreground</b> and <b>background</b>. The split is to define which part any shadow applied to the shape is derived from (the background). This, generally, means the background is the line tracing of the outside of the shape, but not always.</p><p>Any stroke, fill or fillstroke of a background must be the first element of the foreground element, they must not be used within <b>background</b>. If the background is empty, this is not required.</p><p>Because the background cannot have any fill or stroke, it can contain only one <b>path</b>, <b>rect</b>, <b>roundrect</b> or <b>ellipse</b> element (or none). It can also not include <b>image</b>, <b>text</b> or <b>include-shape</b>.</p><p>Note that the state, styling and drawing in mxGraph stencils is very close in design to that of HTML 5 canvas. Tutorials on this subject, if you’re not familiar with the topic, will give a good high-level introduction to the concepts used.</p><h4class=CHeading>State</h4><p>Rendering within the foreground and background elements has the concept of state. There are two types of operations other than state save/load, styling and drawing. The styling operations change the current state, so you can save the current state with <save/> and pull the last saved state from the state stack using <restore/>.</p><h4class=CHeading>Styling</h4><p>The elements that change colors within the current state all take a hash prefixed hex color code (“#FFEA80”).</p><ul><li><b>strokecolor</b>, this sets the colo
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStencil.mxStencil"></a>mxStencil</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>function mxStencil(</td><tdclass="PParameter prettyprint "nowrap>desc</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Constructs a new generic shape by setting <ahref="#mxStencil.desc"class=LVariableid=link36onMouseOver="ShowTip(event, 'tt2', 'link36')"onMouseOut="HideTip('tt2')">desc</a> to the given XML node and invoking <ahref="#mxStencil.parseDescription"class=LFunctionid=link37onMouseOver="ShowTip(event, 'tt3', 'link37')"onMouseOut="HideTip('tt3')">parseDescription</a> and <ahref="#mxStencil.parseConstraints"class=LFunctionid=link38onMouseOver="ShowTip(event, 'tt4', 'link38')"onMouseOut="HideTip('tt4')">parseConstraints</a>.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>desc</td><tdclass=CDLDescription>XML node that contains the stencil description.</td></tr></table></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxStencil.defaultLocalized"></a>defaultLocalized</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.defaultLocalized</td></tr></table></blockquote><p>Static global variable that specifies the default value for the localized attribute of the text element. Default is false.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStencil.allowEval"></a>allowEval</h3><divclass=CBody><p>Static global switch that specifies if the use of eval is allowed for evaluating text content and images. Default is false. Set this to true if stencils can not contain user input.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxStencil.desc"></a>desc</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.desc</td></tr></table></blockquote><p>Holds the XML node with the stencil description.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxStencil.constraints"></a>constraints</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.constraints</td></tr></table></blockquote><p>Holds an array of <ahref="../view/mxConnectionConstraint-js.html#mxConnectionConstraint"class=LClassid=link39onMouseOver="ShowTip(event, 'tt7', 'link39')"onMouseOut="HideTip('tt7')">mxConnectionConstraints</a> as defined in the shape.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxStencil.aspect"></a>aspect</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.aspect</td></tr></table></blockquote><p>Holds the aspect of the shape. Default is ‘auto’.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxStencil.w0"></a>w0</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.w0</td></tr></table></blockquote><p>Holds the width of the shape. Default is 100.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxStencil.h0"></a>h0</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.h0</td></tr></table></blockquote><p>Holds the height of the shape. Default is 100.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxStencil.bgNodes"></a>bgNodes</h3><divclass=CBody><p>Holds the XML node with the stencil description.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxStencil.fgNodes"></a>fgNodes</h3><divclass=CBody><p>Holds the XML node with the stencil description.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxStencil.strokewidth"></a>strokewidth</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.strokewidth</td></tr></table></blockquote><p>Holds the strokewidth direction from the description.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStencil.parseConstraints"></a>parseConstraints</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.parseConstraints = function()</td></tr></table></blockquote><p>Reads the constraints from <ahref="#mxStencil.desc"class=LVariableid=link46onMouseOver="ShowTip(event, 'tt2', 'link46')"onMouseOut="HideTip('tt2')">desc</a> into <ahref="#mxStencil.constraints"class=LVariableid=link47onMouseOver="ShowTip(event, 'tt6', 'link47')"onMouseOut="HideTip('tt6')">constraints</a> using <ahref="#mxStencil.parseConstraint"class=LFunctionid=link48onMouseOver="ShowTip(event, 'tt14', 'link48')"onMouseOut="HideTip('tt14')">parseConstraint</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStencil.parseConstraint"></a>parseConstraint</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStencil.prototype.parseConstraint = function(</td><tdclass="PParameter prettyprint "nowrap>node</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Parses the given XML node and returns its <ahref="../view/mxConnectionConstraint-js.html#mxConnectionConstraint"class=LClassid=link49onMouseOver="ShowTip(event, 'tt7', 'link49')"onMouseOut="HideTip('tt7')">mxConnectionConstraint</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStencil.evaluateTextAttribute"></a>evaluateTextAttribute</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStencil.prototype.evaluateTextAttribute = function(</td><tdclass="PParameter prettyprint "nowrap>node,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>attribute,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>shape</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Gets the given attribute as a text. The return value from <ahref="#mxStencil.evaluateAttribute"class=LFunctionid=link50onMouseOver="ShowTip(event, 'tt16', 'link50')"onMouseOut="HideTip('tt16')">evaluateAttribute</a> is used as a key to <ahref="../util/mxResources-js.html#mxResources.get"class=LFunctionid=link51onMouseOver="ShowTip(event, 'tt23', 'link51')"onMouseOut="HideTip('tt23')">mxResources.get</a> if the localized attribute in the text node is 1 or if <ahref="#mxStencil.defaultLocalized"class=LVariableid=link52onMouseOver="ShowTip(event, 'tt5', 'link52')"onMouseOut="HideTip('tt5')">defaultLocalized</a> is true.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStencil.evaluateAttribute"></a>evaluateAttribute</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStencil.prototype.evaluateAttribute = function(</td><tdclass="PParameter prettyprint "nowrap>node,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>attribute,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>shape</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Gets the attribute for the given name from the given node. If the attribute does not exist then the text content of the node is evaluated and if it is a function it is invoked with <shape> as the only argument and the return value is used as the attribute value to be returned.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStencil.computeAspect"></a>computeAspect</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStencil.prototype.computeAspect = function(</td><tdclass="PParameter prettyprint "nowrap>shape,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>x,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>y,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>w,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>h,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>direction</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns a rectangle that contains the offset in x and y and the horizontal and vertical scale in width and height used to draw this shape inside the given <ahref="../util/mxRectangle-js.html#mxRectangle"class=LClassid=link53onMouseOver="ShowTip(event, 'tt20', 'link53')"onMouseOut="HideTip('tt20')">mxRectangle</a>.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>shape</td><tdclass=CDLDescription><ahref="mxShape-js.html#mxShape"class=LClassid=link54onMouseOver="ShowTip(event, 'tt24', 'link54')"onMouseOut="HideTip('tt24')">mxShape</a> to be drawn.</td></tr><tr><tdclass=CDLEntry>bounds</td><tdclass=CDLDescription><ahref="../util/mxRectangle-js.html#mxRectangle"class=LClassid=link55onMouseOver="ShowTip(event, 'tt20', 'link55')"onMouseOut="HideTip('tt20')">mxRectangle</a> that should contain the stencil.</td></tr><tr><tdclass=CDLEntry>direction</td><tdclass=CDLDescription>Optional direction of the shape to be darwn.</td></tr></table></div></div></div>
<divclass=CToolTipid="tt1"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>function mxStencil(</td><tdclass="PParameter prettyprint "nowrap>desc</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Constructs a new generic shape by setting desc to the given XML node and invoking parseDescription and parseConstraints.</div></div><divclass=CToolTipid="tt2"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.desc</td></tr></table></blockquote>Holds the XML node with the stencil description.</div></div><divclass=CToolTipid="tt3"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.parseDescription = function()</td></tr></table></blockquote>Reads w0, h0, aspect, bgNodes and fgNodes from desc.</div></div><divclass=CToolTipid="tt4"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.parseConstraints = function()</td></tr></table></blockquote>Reads the constraints from desc into constraints using parseConstraint.</div></div><divclass=CToolTipid="tt5"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.defaultLocalized</td></tr></table></blockquote>Static global variable that specifies the default value for the localized attribute of the text element. </div></div><divclass=CToolTipid="tt6"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.constraints</td></tr></table></blockquote>Holds an array of mxConnectionConstraints as defined in the shape.</div></div><divclass=CToolTipid="tt7"><divclass=CClass>Defines an object that contains the constraints about how to connect one side of an edge to its terminal.</div></div><divclass=CToolTipid="tt8"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.aspect</td></tr></table></blockquote>Holds the aspect of the shape. </div></div><divclass=CToolTipid="tt9"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.w0</td></tr></table></blockquote>Holds the width of the shape. </div></div><divclass=CToolTipid="tt10"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.h0</td></tr></table></blockquote>Holds the height of the shape. </div></div><divclass=CToolTipid="tt11"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxStencil.prototype.strokewidth</td></tr></table></blockquote>Holds the strokewidth direction from the description.</div></div><divclass=CToolTipid="tt12"><divclass=CVariable>Holds the XML node with the stencil description.</div></div><divclass=CToolTipid="tt13"><divclass=CVariable>Holds the XML node with the stencil description.</div></div><divclass=CToolTipid="tt14"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxStencil.prototype.parseConstraint = function(</td><tdclass="PParameter prettyprint "nowrap>node</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Parses the given XML node and returns its mxConnectionConstraint.</div></div><divclass=CToolTipid="tt15"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><t
