<divid=Content><divclass="CClass"><divclass=CTopicid=MainTopic><h1class=CTitle><aname="mxShape"></a>mxShape</h1><divclass=CBody><p>Base class for all shapes. A shape in mxGraph is a separate implementation for SVG, VML and HTML. Which implementation to use is controlled by the <ahref="#mxShape.dialect"class=LVariableid=link78onMouseOver="ShowTip(event, 'tt2', 'link78')"onMouseOut="HideTip('tt2')">dialect</a> property which is assigned from within the <ahref="../view/mxCellRenderer-js.html#mxCellRenderer"class=LClassid=link79onMouseOver="ShowTip(event, 'tt70', 'link79')"onMouseOut="HideTip('tt70')">mxCellRenderer</a> when the shape is created. The dialect must be assigned for a shape, and it does normally depend on the browser and the confiuration of the graph (see <ahref="../view/mxGraph-js.html#mxGraph"class=LClassid=link80onMouseOver="ShowTip(event, 'tt71', 'link80')"onMouseOut="HideTip('tt71')">mxGraph</a> rendering hint).</p><p>For each supported shape in SVG and VML, a corresponding shape exists in mxGraph, namely for text, image, rectangle, rhombus, ellipse and polyline. The other shapes are a combination of these shapes (eg. label and swimlane) or they consist of one or more (filled) path objects (eg. actor and cylinder). The HTML implementation is optional but may be required for a HTML-only view of the graph.</p><h4class=CHeading>Custom Shapes</h4><p>To extend from this class, the basic code looks as follows. In the special case where the custom shape consists only of one filled region or one filled region and an additional stroke the <ahref="mxActor-js.html#mxActor"class=LClassid=link81onMouseOver="ShowTip(event, 'tt72', 'link81')"onMouseOut="HideTip('tt72')">mxActor</a> and <ahref="mxCylinder-js.html#mxCylinder"class=LClassid=link82onMouseOver="ShowTip(event, 'tt73', 'link82')"onMouseOut="HideTip('tt73')">mxCylinder</a> should be subclassed, respectively.</p><blockquote><preclass="prettyprint">function CustomShape() { }
CustomShape.prototype.constructor = CustomShape;</pre></blockquote><p>To register a custom shape in an existing graph instance, one must register the shape under a new name in the graph’s cell renderer as follows:</p><blockquote><preclass="prettyprint">mxCellRenderer.registerShape('customShape', CustomShape);</pre></blockquote><p>The second argument is the name of the constructor.</p><p>In order to use the shape you can refer to the given name above in a stylesheet. For example, to change the shape for the default vertex style, the following code is used:</p><blockquote><preclass="prettyprint">var style = graph.getStylesheet().getDefaultVertexStyle();
style[mxConstants.STYLE_SHAPE] = 'customShape';</pre></blockquote><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SMain"><tdclass=SEntry><ahref="#mxShape">mxShape</a></td><tdclass=SDescription>Base class for all shapes. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxShape.Functions">Functions</a></td><tdclass=SDescription></td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxShape.mxShape"id=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">mxShape</a></td><tdclass=SDescription>Constructs a new shape.</td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxShape.Variables">Variables</a></td><tdclass=SDescription></td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxShape.dialect"id=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">dialect</a></td><tdclass=SDescription>Holds the dialect in which the shape is to be painted. </td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxShape.scale"id=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">scale</a></td><tdclass=SDescription>Holds the scale in which the shape is being painted.</td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxShape.bounds"id=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">bounds</a></td><tdclass=SDescription>Holds the <ahref="../util/mxRectangle-js.html#mxRectangle"class=LClassid=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">mxRectangle</a> that specifies the bounds of this shape.</td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxShape.points"id=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">points</a></td><tdclass=SDescription>Holds the array of <ahref="../util/mxPoint-js.html#mxPoint"class=LClassid=link7onMouseOver="ShowTip(event, 'tt7', 'link7')"onMouseOut="HideTip('tt7')">mxPoints</a> that specify the points of this shape.</td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxShape.node"id=link8onMouseOver="ShowTip(event, 'tt8', 'link8')"onMouseOut="HideTip('tt8')">node</a></td><tdclass=SDescription>Holds the outermost DOM node that represents this shape.</td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxShape.state"id=link9onMouseOver="ShowTip(event, 'tt9', 'link9')"onMouseOut="HideTip('tt9')">state</a></td><tdclass=SDescription>Optional reference to the corresponding <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link10onMouseOver="ShowTip(event, 'tt10', 'link10')"onMouseOut="HideTip('tt10')">mxCellState</a>.</td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxShape.style"id=link11onMouseOver="ShowTip(event, 'tt11', 'link11')"onMouseOut="HideTip('tt11')">style</a></td><tdclass=SDescription>Optional reference to the style of the corresponding <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link12onMouseOver="ShowTip(event, 'tt10', 'link12')"onMouseOut="HideTip('tt10')">mxCellState</a>.</td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxShape.boundingBox"id=link13onMouseOver="ShowTip(event, 'tt12', 'link13')"onMouseOut="HideTip('tt12')">boundingBox</a></td><tdclass=SDescription>Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.</td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxShape.stencil"id=link14onMouseOver="ShowTip(event, 'tt13', 'link14')"onMouseOut="HideTip('tt13')">stencil</a></td><tdclass=SDescription>Holds the <ahref="mxStencil-js.html#mxStencil"class=LClassid=link15onMouseOver="ShowTip(event, 'tt14', 'link15')"onMouseOut="HideTip('tt14')">mxStencil</a> that defines the shape.</td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxShape.svgS
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.mxShape"></a>mxShape</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>function mxShape(</td><tdclass=PParameternowrap>stencil</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Constructs a new shape.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.dialect"></a>dialect</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.dialect</td></tr></table></blockquote><p>Holds the dialect in which the shape is to be painted. This can be one of the DIALECT constants in <ahref="../util/mxConstants-js.html#mxConstants"class=LClassid=link83onMouseOver="ShowTip(event, 'tt74', 'link83')"onMouseOut="HideTip('tt74')">mxConstants</a>.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.scale"></a>scale</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.scale</td></tr></table></blockquote><p>Holds the scale in which the shape is being painted.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.bounds"></a>bounds</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.bounds</td></tr></table></blockquote><p>Holds the <ahref="../util/mxRectangle-js.html#mxRectangle"class=LClassid=link84onMouseOver="ShowTip(event, 'tt5', 'link84')"onMouseOut="HideTip('tt5')">mxRectangle</a> that specifies the bounds of this shape.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.points"></a>points</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.points</td></tr></table></blockquote><p>Holds the array of <ahref="../util/mxPoint-js.html#mxPoint"class=LClassid=link85onMouseOver="ShowTip(event, 'tt7', 'link85')"onMouseOut="HideTip('tt7')">mxPoints</a> that specify the points of this shape.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.node"></a>node</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.node</td></tr></table></blockquote><p>Holds the outermost DOM node that represents this shape.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.state"></a>state</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.state</td></tr></table></blockquote><p>Optional reference to the corresponding <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link86onMouseOver="ShowTip(event, 'tt10', 'link86')"onMouseOut="HideTip('tt10')">mxCellState</a>.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.style"></a>style</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.style</td></tr></table></blockquote><p>Optional reference to the style of the corresponding <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link87onMouseOver="ShowTip(event, 'tt10', 'link87')"onMouseOut="HideTip('tt10')">mxCellState</a>.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.boundingBox"></a>boundingBox</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.boundingBox</td></tr></table></blockquote><p>Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.stencil"></a>stencil</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.stencil</td></tr></table></blockquote><p>Holds the <ahref="mxStencil-js.html#mxStencil"class=LClassid=link88onMouseOver="ShowTip(event, 'tt14', 'link88')"onMouseOut="HideTip('tt14')">mxStencil</a> that defines the shape.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.svgStrokeTolerance"></a>svgStrokeTolerance</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.svgStrokeTolerance</td></tr></table></blockquote><p>Event-tolerance for SVG strokes (in px). Default is 6. This is only passed to the canvas in <ahref="#mxShape.createSvgCanvas"class=LFunctionid=link89onMouseOver="ShowTip(event, 'tt37', 'link89')"onMouseOut="HideTip('tt37')">createSvgCanvas</a> if <ahref="#mxShape.pointerEvents"class=LVariableid=link90onMouseOver="ShowTip(event, 'tt16', 'link90')"onMouseOut="HideTip('tt16')">pointerEvents</a> is true.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.pointerEvents"></a>pointerEvents</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.pointerEvents</td></tr></table></blockquote><p>Specifies if pointer events should be handled. Default is true.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.shapePointerEvents"></a>shapePointerEvents</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.shapePointerEvents</td></tr></table></blockquote><p>Specifies if pointer events outside of shape should be handled. Default is false.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.stencilPointerEvents"></a>stencilPointerEvents</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.stencilPointerEvents</td></tr></table></blockquote><p>Specifies if pointer events outside of stencils should be handled. Default is false. Set this to true for backwards compatibility with the 1.x branch.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxShape.vmlScale"></a>vmlScale</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.vmlScale</td></tr></table></blockquote><p>Scale for improving the precision of VML rendering. Default is 1.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.init"></a>init</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.init = function(</td><tdclass=PParameternowrap>container</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Initializes the shape by creaing the DOM node using <ahref="#mxShape.create"class=LFunctionid=link91onMouseOver="ShowTip(event, 'tt21', 'link91')"onMouseOut="HideTip('tt21')">create</a> and adding it into the given container.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>container</td><tdclass=CDLDescription>DOM node that will contain the shape.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.isParseVml"></a>isParseVml</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.isParseVml = function()</td></tr></table></blockquote><p>Specifies if any VML should be added via insertAdjacentHtml to the DOM. This is only needed in IE8 and only if the shape contains VML markup. This method returns true.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.isHtmlAllowed"></a>isHtmlAllowed</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.isHtmlAllowed = function()</td></tr></table></blockquote><p>Returns true if HTML is allowed for this shape. This implementation always returns false.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.create"></a>create</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.create = function(</td><tdclass=PParameternowrap>container</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates and returns the DOM node(s) for the shape in the given container. This implementation invokes <ahref="#mxShape.createSvg"class=LFunctionid=link92onMouseOver="ShowTip(event, 'tt25', 'link92')"onMouseOut="HideTip('tt25')">createSvg</a>, <ahref="#mxShape.createHtml"class=LFunctionid=link93onMouseOver="ShowTip(event, 'tt27', 'link93')"onMouseOut="HideTip('tt27')">createHtml</a> or <ahref="#mxShape.createVml"class=LFunctionid=link94onMouseOver="ShowTip(event, 'tt26', 'link94')"onMouseOut="HideTip('tt26')">createVml</a> depending on the <ahref="#mxShape.dialect"class=LVariableid=link95onMouseOver="ShowTip(event, 'tt2', 'link95')"onMouseOut="HideTip('tt2')">dialect</a> and style settings.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>container</td><tdclass=CDLDescription>DOM node that will contain the shape.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.createSvg"></a>createSvg</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.createSvg = function()</td></tr></table></blockquote><p>Creates and returns the SVG node(s) to represent this shape.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.createVml"></a>createVml</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.createVml = function()</td></tr></table></blockquote><p>Creates and returns the VML node to represent this shape.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.createHtml"></a>createHtml</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.createHtml = function()</td></tr></table></blockquote><p>Creates and returns the HTML DOM node(s) to represent this shape. This implementation falls back to <ahref="#mxShape.createVml"class=LFunctionid=link96onMouseOver="ShowTip(event, 'tt26', 'link96')"onMouseOut="HideTip('tt26')">createVml</a> so that the HTML creation is optional.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.reconfigure"></a>reconfigure</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.reconfigure = function()</td></tr></table></blockquote><p>Reconfigures this shape. This will update the colors etc in addition to the bounds or points.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.redraw"></a>redraw</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.redraw = function()</td></tr></table></blockquote><p>Creates and returns the SVG node(s) to represent this shape.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.clear"></a>clear</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.clear = function()</td></tr></table></blockquote><p>Removes all child nodes and resets all CSS.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.updateBoundsFromPoints"></a>updateBoundsFromPoints</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.updateBoundsFromPoints = function()</td></tr></table></blockquote><p>Updates the bounds based on the points.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.getLabelBounds"></a>getLabelBounds</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.getLabelBounds = function(</td><tdclass=PParameternowrap>rect</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the <ahref="../util/mxRectangle-js.html#mxRectangle"class=LClassid=link97onMouseOver="ShowTip(event, 'tt5', 'link97')"onMouseOut="HideTip('tt5')">mxRectangle</a> for the label bounds of this shape, based on the given scaled and translated bounds of the shape. This method should not change the rectangle in-place. This implementation returns the given rect.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.checkBounds"></a>checkBounds</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.checkBounds = function()</td></tr></table></blockquote><p>Returns true if the bounds are not null and all of its variables are numeric.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.createVmlGroup"></a>createVmlGroup</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.createVmlGroup = function()</td></tr></table></blockquote><p>Returns the temporary element used for rendering in IE8 standards mode.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.redrawShape"></a>redrawShape</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.redrawShape = function()</td></tr></table></blockquote><p>Updates the SVG or VML shape.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.createCanvas"></a>createCanvas</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.createCanvas = function()</td></tr></table></blockquote><p>Destroys the given canvas which was used for drawing. This implementation increments the reference counts on all shared gradients used in the canvas.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.createSvgCanvas"></a>createSvgCanvas</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.createSvgCanvas = function()</td></tr></table></blockquote><p>Creates and returns an <ahref="../util/mxSvgCanvas2D-js.html#mxSvgCanvas2D"class=LClassid=link98onMouseOver="ShowTip(event, 'tt38', 'link98')"onMouseOut="HideTip('tt38')">mxSvgCanvas2D</a> for rendering this shape.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.createVmlCanvas"></a>createVmlCanvas</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.createVmlCanvas = function()</td></tr></table></blockquote><p>Creates and returns an <ahref="../util/mxVmlCanvas2D-js.html#mxVmlCanvas2D"class=LClassid=link99onMouseOver="ShowTip(event, 'tt40', 'link99')"onMouseOut="HideTip('tt40')">mxVmlCanvas2D</a> for rendering this shape.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.updateVmlContainer"></a>updateVmlContainer</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.updateVmlContainer = function()</td></tr></table></blockquote><p>Updates the bounds of the VML container.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.redrawHtml"></a>redrawHtml</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.redrawHtmlShape = function()</td></tr></table></blockquote><p>Allow optimization by replacing VML with HTML.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.updateHtmlFilters"></a>updateHtmlFilters</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.updateHtmlFilters = function(</td><tdclass=PParameternowrap>node</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Allow optimization by replacing VML with HTML.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.mixedModeHtml"></a>mixedModeHtml</h3><divclass=CBody><p>Allow optimization by replacing VML with HTML.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.mixedModeHtml"></a>mixedModeHtml</h3><divclass=CBody><p>Allow optimization by replacing VML with HTML.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.destroyCanvas"></a>destroyCanvas</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.destroyCanvas = function(</td><tdclass=PParameternowrap>canvas</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Destroys the given canvas which was used for drawing. This implementation increments the reference counts on all shared gradients used in the canvas.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.configureCanvas"></a>configureCanvas</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.configureCanvas = function(</td><tdclass=PParameternowrap>c,</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>Sets the state of the canvas for drawing the shape.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.getGradientBounds"></a>getGradientBounds</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.getGradientBounds = function(</td><tdclass=PParameternowrap>c,</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>Returns the bounding box for the gradient box for this shape.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.updateTransform"></a>updateTransform</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.updateTransform = function(</td><tdclass=PParameternowrap>c,</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>Sets the scale and rotation on the given canvas.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.paintBackground"></a>paintBackground</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.paintBackground = function(</td><tdclass=PParameternowrap>c,</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>Hook for subclassers. This implementation is empty.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.paintForeground"></a>paintForeground</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.paintForeground = function(</td><tdclass=PParameternowrap>c,</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>Hook for subclassers. This implementation is empty.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.paintEdgeShape"></a>paintEdgeShape</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.paintEdgeShape = function(</td><tdclass=PParameternowrap>c,</td></tr><tr><td></td><tdclass=PParameternowrap>pts</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook for subclassers. This implementation is empty.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.getArcSize"></a>getArcSize</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.getArcSize = function(</td><tdclass=PParameternowrap>w,</td></tr><tr><td></td><tdclass=PParameternowrap>h</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the arc size for the given dimension.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.setCursor"></a>setCursor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.setCursor = function(</td><tdclass=PParameternowrap>cursor</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Sets the cursor on the given shape.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>cursor</td><tdclass=CDLDescription>The cursor to be used.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.getCursor"></a>getCursor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.getCursor = function()</td></tr></table></blockquote><p>Returns the current cursor.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.updateBoundingBox"></a>updateBoundingBox</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.updateBoundingBox = function()</td></tr></table></blockquote><p>Updates the <ahref="#mxShape.boundingBox"class=LVariableid=link121onMouseOver="ShowTip(event, 'tt12', 'link121')"onMouseOut="HideTip('tt12')">boundingBox</a> for this shape using <ahref="#mxShape.createBoundingBox"class=LFunctionid=link122onMouseOver="ShowTip(event, 'tt59', 'link122')"onMouseOut="HideTip('tt59')">createBoundingBox</a> and <ahref="#mxShape.augmentBoundingBox"class=LFunctionid=link123onMouseOver="ShowTip(event, 'tt60', 'link123')"onMouseOut="HideTip('tt60')">augmentBoundingBox</a> and stores the result in <ahref="#mxShape.boundingBox"class=LVariableid=link124onMouseOver="ShowTip(event, 'tt12', 'link124')"onMouseOut="HideTip('tt12')">boundingBox</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.createBoundingBox"></a>createBoundingBox</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.createBoundingBox = function()</td></tr></table></blockquote><p>Returns a new rectangle that represents the bounding box of the bare shape with no shadows or strokewidths.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.augmentBoundingBox"></a>augmentBoundingBox</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.augmentBoundingBox = function(</td><tdclass=PParameternowrap>bbox</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Augments the bounding box with the strokewidth and shadow offsets.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.isPaintBoundsInverted"></a>isPaintBoundsInverted</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.isPaintBoundsInverted = function()</td></tr></table></blockquote><p>Returns true if the bounds should be inverted.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.getRotation"></a>getRotation</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.getRotation = function()</td></tr></table></blockquote><p>Returns the rotation from the style.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.getTextRotation"></a>getTextRotation</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.getTextRotation = function()</td></tr></table></blockquote><p>Returns the rotation for the text label.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.getShapeRotation"></a>getShapeRotation</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.getShapeRotation = function()</td></tr></table></blockquote><p>Returns the actual rotation of the shape.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.createTransparentSvgRectangle"></a>createTransparentSvgRectangle</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.createTransparentSvgRectangle = function(</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>Adds a transparent rectangle that catches all events.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.setTransparentBackgroundImage"></a>setTransparentBackgroundImage</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.setTransparentBackgroundImage = function(</td><tdclass=PParameternowrap>node</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Sets a transparent background CSS style to catch all events.</p><p>Paints the line shape.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.releaseSvgGradients"></a>releaseSvgGradients</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxShape.prototype.releaseSvgGradients = function(</td><tdclass=PParameternowrap>grads</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Paints the line shape.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxShape.destroy"></a>destroy</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.destroy = function()</td></tr></table></blockquote><p>Destroys the shape by removing it from the DOM and releasing the DOM node associated with the shape using <ahref="../util/mxEvent-js.html#mxEvent.release"class=LFunctionid=link125onMouseOver="ShowTip(event, 'tt69', 'link125')"onMouseOut="HideTip('tt69')">mxEvent.release</a>.</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 mxShape(</td><tdclass=PParameternowrap>stencil</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote>Constructs a new shape.</div></div><divclass=CToolTipid="tt2"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.dialect</td></tr></table></blockquote>Holds the dialect in which the shape is to be painted. </div></div><divclass=CToolTipid="tt3"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.scale</td></tr></table></blockquote>Holds the scale in which the shape is being painted.</div></div><divclass=CToolTipid="tt4"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.bounds</td></tr></table></blockquote>Holds the mxRectangle that specifies the bounds of this shape.</div></div><divclass=CToolTipid="tt5"><divclass=CClass>Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.</div></div><divclass=CToolTipid="tt6"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.points</td></tr></table></blockquote>Holds the array of mxPoints that specify the points of this shape.</div></div><divclass=CToolTipid="tt7"><divclass=CClass>Implements a 2-dimensional vector with double precision coordinates.</div></div><divclass=CToolTipid="tt8"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.node</td></tr></table></blockquote>Holds the outermost DOM node that represents this shape.</div></div><divclass=CToolTipid="tt9"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.state</td></tr></table></blockquote>Optional reference to the corresponding mxCellState.</div></div><divclass=CToolTipid="tt10"><divclass=CClass>Represents the current state of a cell in a given mxGraphView.</div></div><divclass=CToolTipid="tt11"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.style</td></tr></table></blockquote>Optional reference to the style of the corresponding mxCellState.</div></div><divclass=CToolTipid="tt12"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.boundingBox</td></tr></table></blockquote>Contains the bounding box of the shape, that is, the smallest rectangle that includes all pixels of the shape.</div></div><divclass=CToolTipid="tt13"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.stencil</td></tr></table></blockquote>Holds the mxStencil that defines the shape.</div></div><divclass=CToolTipid="tt14"><divclass=CClass>Implements a generic shape which is based on a XML node as a description. </div></div><divclass=CToolTipid="tt15"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.svgStrokeTolerance</td></tr></table></blockquote>Event-tolerance for SVG strokes (in px). </div></div><divclass=CToolTipid="tt16"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototype.pointerEvents</td></tr></table></blockquote>Specifies if pointer events should be handled. </div></div><divclass=CToolTipid="tt17"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxShape.prototy
