<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. 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 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 color that drawing paths will be rendered
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStencil.mxStencil"></a>mxStencil</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>function mxStencil(</td><tdclass=PParameternowrap>desc</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Constructs a new generic shape by setting <ahref="#mxStencil.desc"class=LVariableid=link34onMouseOver="ShowTip(event, 'tt2', 'link34')"onMouseOut="HideTip('tt2')">desc</a> to the given XML node and invoking <ahref="#mxStencil.parseDescription"class=LFunctionid=link35onMouseOver="ShowTip(event, 'tt3', 'link35')"onMouseOut="HideTip('tt3')">parseDescription</a> and <ahref="#mxStencil.parseConstraints"class=LFunctionid=link36onMouseOver="ShowTip(event, 'tt4', 'link36')"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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>mxStencil.prototype.constraints</td></tr></table></blockquote><p>Holds an array of <ahref="../view/mxConnectionConstraint-js.html#mxConnectionConstraint"class=LClassid=link37onMouseOver="ShowTip(event, 'tt7', 'link37')"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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>mxStencil.prototype.parseConstraints = function()</td></tr></table></blockquote><p>Reads the constraints from <ahref="#mxStencil.desc"class=LVariableid=link44onMouseOver="ShowTip(event, 'tt2', 'link44')"onMouseOut="HideTip('tt2')">desc</a> into <ahref="#mxStencil.constraints"class=LVariableid=link45onMouseOver="ShowTip(event, 'tt6', 'link45')"onMouseOut="HideTip('tt6')">constraints</a> using <ahref="#mxStencil.parseConstraint"class=LFunctionid=link46onMouseOver="ShowTip(event, 'tt14', 'link46')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStencil.prototype.parseConstraint = function(</td><tdclass=PParameternowrap>node</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Parses the given XML node and returns its <ahref="../view/mxConnectionConstraint-js.html#mxConnectionConstraint"class=LClassid=link47onMouseOver="ShowTip(event, 'tt7', 'link47')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStencil.prototype.evaluateTextAttribute = function(</td><tdclass=PParameternowrap>node,</td></tr><tr><td></td><tdclass=PParameternowrap>attribute,</td></tr><tr><td></td><tdclass=PParameternowrap>state</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Gets the given attribute as a text. The return value from <ahref="#mxStencil.evaluateAttribute"class=LFunctionid=link48onMouseOver="ShowTip(event, 'tt16', 'link48')"onMouseOut="HideTip('tt16')">evaluateAttribute</a> is used as a key to <ahref="../util/mxResources-js.html#mxResources.get"class=LFunctionid=link49onMouseOver="ShowTip(event, 'tt22', 'link49')"onMouseOut="HideTip('tt22')">mxResources.get</a> if the localized attribute in the text node is 1 or if <ahref="#mxStencil.defaultLocalized"class=LVariableid=link50onMouseOver="ShowTip(event, 'tt5', 'link50')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStencil.prototype.evaluateAttribute = function(</td><tdclass=PParameternowrap>node,</td></tr><tr><td></td><tdclass=PParameternowrap>attribute,</td></tr><tr><td></td><tdclass=PParameternowrap>shape</td><tdclass=PAfterParametersnowrap>)</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 <state> 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.drawShape"></a>drawShape</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStencil.prototype.drawShape = function(</td><tdclass=PParameternowrap>canvas,</td></tr><tr><td></td><tdclass=PParameternowrap>shape,</td></tr><tr><td></td><tdclass=PParameternowrap>x,</td></tr><tr><td></td><tdclass=PParameternowrap>y,</td></tr><tr><td></td><tdclass=PParameternowrap>w,</td></tr><tr><td></td><tdclass=PParameternowrap>h</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Draws this stencil inside the given bounds.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStencil.drawChildren"></a>drawChildren</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStencil.prototype.drawChildren = function(</td><tdclass=PParameternowrap>canvas,</td></tr><tr><td></td><tdclass=PParameternowrap>shape,</td></tr><tr><td></td><tdclass=PParameternowrap>x,</td></tr><tr><td></td><tdclass=PParameternowrap>y,</td></tr><tr><td></td><tdclass=PParameternowrap>w,</td></tr><tr><td></td><tdclass=PParameternowrap>h,</td></tr><tr><td></td><tdclass=PParameternowrap>node,</td></tr><tr><td></td><tdclass=PParameternowrap>aspect,</td></tr><tr><td></td><tdclass=PParameternowrap>disableShadow</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Draws this stencil inside the given bounds.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStencil.computeAspect"></a>computeAspect</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStencil.prototype.computeAspect = function(</td><tdclass=PParameternowrap>shape,</td></tr><tr><td></td><tdclass=PParameternowrap>x,</td></tr><tr><td></td><tdclass=PParameternowrap>y,</td></tr><tr><td></td><tdclass=PParameternowrap>w,</td></tr><tr><td></td><tdclass=PParameternowrap>h,</td></tr><tr><td></td><tdclass=PParameternowrap>direction</td><tdclass=PAfterParametersnowrap>)</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=link51onMouseOver="ShowTip(event, 'tt20', 'link51')"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=link52onMouseOver="ShowTip(event, 'tt23', 'link52')"onMouseOut="HideTip('tt23')">mxShape</a> to be drawn.</td></tr><tr><tdclass=CDLEntry>bounds</td><tdclass=CDLDescription><ahref="../util/mxRectangle-js.html#mxRectangle"class=LClassid=link53onMouseOver="ShowTip(event, 'tt20', 'link53')"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="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxStencil.drawNode"></a>drawNode</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStencil.prototype.drawNode = function(</td><tdclass=PParameternowrap>canvas,</td></tr><tr><td></td><tdclass=PParameternowrap>shape,</td></tr><tr><td></td><tdclass=PParameternowrap>node,</td></tr><tr><td></td><tdclass=PParameternowrap>aspect,</td></tr><tr><td></td><tdclass=PParameternowrap>disableShadow</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Draws this stencil inside the given bounds.</p></div></div></div>
<divclass=CToolTipid="tt1"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>function mxStencil(</td><tdclass=PParameternowrap>desc</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStencil.prototype.parseConstraint = function(</td><tdclass=PParameternowrap>node</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxStencil.prototype.evaluateTextAttribute = fun
