<!-- saved from url=(0026)http://www.naturaldocs.org -->
<divid=Content><divclass="CClass"><divclass=CTopicid=MainTopic><h1class=CTitle><aname="mxCellOverlay"></a>mxCellOverlay</h1><divclass=CBody><p>Extends <ahref="../util/mxEventSource-js.html#mxEventSource"class=LClassid=link16onMouseOver="ShowTip(event, 'tt1', 'link16')"onMouseOut="HideTip('tt1')">mxEventSource</a> to implement a graph overlay, represented by an icon and a tooltip. Overlays can handle and fire <click> events and are added to the graph using <ahref="mxGraph-js.html#mxGraph.addCellOverlay"class=LFunctionid=link17onMouseOver="ShowTip(event, 'tt16', 'link17')"onMouseOut="HideTip('tt16')">mxGraph.addCellOverlay</a>, and removed using <ahref="mxGraph-js.html#mxGraph.removeCellOverlay"class=LFunctionid=link18onMouseOver="ShowTip(event, 'tt17', 'link18')"onMouseOut="HideTip('tt17')">mxGraph.removeCellOverlay</a>, or <ahref="mxGraph-js.html#mxGraph.removeCellOverlays"class=LFunctionid=link19onMouseOver="ShowTip(event, 'tt18', 'link19')"onMouseOut="HideTip('tt18')">mxGraph.removeCellOverlays</a> to remove all overlays. The <ahref="mxGraph-js.html#mxGraph.getCellOverlays"class=LFunctionid=link20onMouseOver="ShowTip(event, 'tt19', 'link20')"onMouseOut="HideTip('tt19')">mxGraph.getCellOverlays</a> function returns the array of overlays for a given cell in a graph. If multiple overlays exist for the same cell, then <ahref="#mxCellOverlay.getBounds"class=LFunctionid=link21onMouseOver="ShowTip(event, 'tt12', 'link21')"onMouseOut="HideTip('tt12')">getBounds</a> should be overridden in at least one of the overlays.</p><p>Overlays appear on top of all cells in a special layer. If this is not desirable, then the image must be rendered as part of the shape or label of the cell instead.</p><h4class=CHeading>Example</h4><p>The following adds a new overlays for a given vertex and selects the cell if the overlay is clicked.</p><blockquote><preclass="prettyprint">var overlay = new mxCellOverlay(img, html);
});</pre></blockquote><p>For cell overlays to be printed use <ahref="mxPrintPreview-js.html#mxPrintPreview.printOverlays"class=LVariableid=link22onMouseOver="ShowTip(event, 'tt20', 'link22')"onMouseOut="HideTip('tt20')">mxPrintPreview.printOverlays</a>.</p><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SMain"><tdclass=SEntry><ahref="#mxCellOverlay">mxCellOverlay</a></td><tdclass=SDescription>Extends <ahref="../util/mxEventSource-js.html#mxEventSource"class=LClassid=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">mxEventSource</a> to implement a graph overlay, represented by an icon and a tooltip. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxCellOverlay.Events">Events</a></td><tdclass=SDescription></td></tr><trclass="SEvent SIndent2 SMarked"><tdclass=SEntry><ahref="#mxCellOverlay.mxEvent.CLICK">mxEvent.<wbr>CLICK</a></td><tdclass=SDescription>Fires when the user clicks on the overlay. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxCellOverlay.Functions">Functions</a></td><tdclass=SDescription></td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxCellOverlay.mxCellOverlay"id=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">mxCellOverlay</a></td><tdclass=SDescription>Constructs a new overlay using the given image and tooltip.</td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxCellOverlay.Variables">Variables</a></td><tdclass=SDescription></td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxCellOverlay.image"id=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">image</a></td><tdclass=SDescription>Holds the <ahref="../util/mxImage-js.html#mxImage"class=LClassid=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">mxImage</a> to be used as the icon.</td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxCellOverlay.tooltip"id=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">tooltip</a></td><tdclass=SDescription>Holds the optional string to be used as the tooltip.</td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxCellOverlay.align"id=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">align</a></td><tdclass=SDescription>Holds the horizontal alignment for the overlay. </td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxCellOverlay.verticalAlign"id=link7onMouseOver="ShowTip(event, 'tt7', 'link7')"onMouseOut="HideTip('tt7')">verticalAlign</a></td><tdclass=SDescription>Holds the vertical alignment for the overlay. </td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxCellOverlay.offset"id=link8onMouseOver="ShowTip(event, 'tt8', 'link8')"onMouseOut="HideTip('tt8')">offset</a></td><tdclass=SDescription>Holds the offset as an <ahref="../util/mxPoint-js.html#mxPoint"class=LClassid=link9onMouseOver="ShowTip(event, 'tt9', 'link9')"onMouseOut="HideTip('tt9')">mxPoint</a>. </td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxCellOverlay.cursor"id=link10onMouseOver="ShowTip(event, 'tt10', 'link10')"onMouseOut="HideTip('tt10')">cursor</a></td><tdclass=SDescription>Holds the cursor for the overlay. </td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxCellOverlay.defaultOverlap"id=link11onMouseOver="ShowTip(event, 'tt11', 'link11')"onMouseOut="HideTip('tt11')">defaultOverlap</a></td><tdclass=SDescription>Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxCellOverlay.Functions">Functions</a></td><tdclass=SDescription></td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxCellOverlay.getBounds"id=link12onMouseOver
<divclass="CEvent"><divclass=CTopic><h3class=CTitle><aname="mxCellOverlay.mxEvent.CLICK"></a>mxEvent.<wbr>CLICK</h3><divclass=CBody><p>Fires when the user clicks on the overlay. The <code>event</code> property contains the corresponding mouse event and the <code>cell</code> property contains the cell. For touch devices this is fired if the element receives a touchend event.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxCellOverlay.mxCellOverlay"></a>mxCellOverlay</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>function mxCellOverlay(</td><tdclass="PParameter prettyprint "nowrap>image,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>tooltip,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>align,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>verticalAlign,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>offset,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>cursor</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Constructs a new overlay using the given image and tooltip.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>image</td><tdclass=CDLDescription><ahref="../util/mxImage-js.html#mxImage"class=LClassid=link23onMouseOver="ShowTip(event, 'tt4', 'link23')"onMouseOut="HideTip('tt4')">mxImage</a> that represents the icon to be displayed.</td></tr><tr><tdclass=CDLEntry>tooltip</td><tdclass=CDLDescription>Optional string that specifies the tooltip.</td></tr><tr><tdclass=CDLEntry>align</td><tdclass=CDLDescription>Optional horizontal alignment for the overlay. Possible values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT> (default).</td></tr><tr><tdclass=CDLEntry>verticalAlign</td><tdclass=CDLDescription>Vertical alignment for the overlay. Possible values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM> (default).</td></tr></table></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxCellOverlay.image"></a>image</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.image</td></tr></table></blockquote><p>Holds the <ahref="../util/mxImage-js.html#mxImage"class=LClassid=link24onMouseOver="ShowTip(event, 'tt4', 'link24')"onMouseOut="HideTip('tt4')">mxImage</a> to be used as the icon.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxCellOverlay.tooltip"></a>tooltip</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.tooltip</td></tr></table></blockquote><p>Holds the optional string to be used as the tooltip.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxCellOverlay.align"></a>align</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.align</td></tr></table></blockquote><p>Holds the horizontal alignment for the overlay. Default is <ahref="../util/mxConstants-js.html#mxConstants.ALIGN_RIGHT"class=LVariableid=link25onMouseOver="ShowTip(event, 'tt21', 'link25')"onMouseOut="HideTip('tt21')">mxConstants.ALIGN_RIGHT</a>. For edges, the overlay always appears in the center of the edge.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxCellOverlay.verticalAlign"></a>verticalAlign</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.verticalAlign</td></tr></table></blockquote><p>Holds the vertical alignment for the overlay. Default is <ahref="../util/mxConstants-js.html#mxConstants.ALIGN_BOTTOM"class=LVariableid=link26onMouseOver="ShowTip(event, 'tt22', 'link26')"onMouseOut="HideTip('tt22')">mxConstants.ALIGN_BOTTOM</a>. For edges, the overlay always appears in the center of the edge.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxCellOverlay.offset"></a>offset</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.offset</td></tr></table></blockquote><p>Holds the offset as an <ahref="../util/mxPoint-js.html#mxPoint"class=LClassid=link27onMouseOver="ShowTip(event, 'tt9', 'link27')"onMouseOut="HideTip('tt9')">mxPoint</a>. The offset will be scaled according to the current scale.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxCellOverlay.cursor"></a>cursor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.cursor</td></tr></table></blockquote><p>Holds the cursor for the overlay. Default is ‘help’.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxCellOverlay.defaultOverlap"></a>defaultOverlap</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.defaultOverlap</td></tr></table></blockquote><p>Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment. Default is 0.5.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxCellOverlay.getBounds"></a>getBounds</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxCellOverlay.prototype.getBounds = function(</td><tdclass="PParameter prettyprint "nowrap>state</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the bounds of the overlay for the given <ahref="mxCellState-js.html#mxCellState"class=LClassid=link28onMouseOver="ShowTip(event, 'tt13', 'link28')"onMouseOut="HideTip('tt13')">mxCellState</a> as an <ahref="../util/mxRectangle-js.html#mxRectangle"class=LClassid=link29onMouseOver="ShowTip(event, 'tt14', 'link29')"onMouseOut="HideTip('tt14')">mxRectangle</a>. This should be overridden when using multiple overlays per cell so that the overlays do not overlap.</p><p>The following example will place the overlay along an edge (where x=[-1..1] from the start to the end of the edge and y is the orthogonal offset in px).</p><blockquote><preclass="prettyprint">overlay.getBounds = function(state)
var bounds = mxCellOverlay.prototype.getBounds.apply(this, arguments);
if (state.view.graph.getModel().isEdge(state.cell))
{
var pt = state.view.getPoint(state, {x: 0, y: 0, relative: true});
bounds.x = pt.x - bounds.width / 2;
bounds.y = pt.y - bounds.height / 2;
}
return bounds;
};</pre></blockquote><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>state</td><tdclass=CDLDescription><ahref="mxCellState-js.html#mxCellState"class=LClassid=link30onMouseOver="ShowTip(event, 'tt13', 'link30')"onMouseOut="HideTip('tt13')">mxCellState</a> that represents the current state of the associated cell.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxCellOverlay.toString"></a>toString</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.toString = function()</td></tr></table></blockquote><p>Returns the textual representation of the overlay to be used as the tooltip. This implementation returns <ahref="#mxCellOverlay.tooltip"class=LVariableid=link31onMouseOver="ShowTip(event, 'tt5', 'link31')"onMouseOut="HideTip('tt5')">tooltip</a>.</p></div></div></div>
<divclass=CToolTipid="tt1"><divclass=CClass>Base class for objects that dispatch named events. </div></div><divclass=CToolTipid="tt2"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>function mxCellOverlay(</td><tdclass="PParameter prettyprint "nowrap>image,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>tooltip,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>align,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>verticalAlign,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>offset,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>cursor</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Constructs a new overlay using the given image and tooltip.</div></div><divclass=CToolTipid="tt3"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.image</td></tr></table></blockquote>Holds the mxImage to be used as the icon.</div></div><divclass=CToolTipid="tt4"><divclass=CClass>Encapsulates the URL, width and height of an image.</div></div><divclass=CToolTipid="tt5"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.tooltip</td></tr></table></blockquote>Holds the optional string to be used as the tooltip.</div></div><divclass=CToolTipid="tt6"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.align</td></tr></table></blockquote>Holds the horizontal alignment for the overlay. </div></div><divclass=CToolTipid="tt7"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.verticalAlign</td></tr></table></blockquote>Holds the vertical alignment for the overlay. </div></div><divclass=CToolTipid="tt8"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.offset</td></tr></table></blockquote>Holds the offset as an mxPoint. </div></div><divclass=CToolTipid="tt9"><divclass=CClass>Implements a 2-dimensional vector with double precision coordinates.</div></div><divclass=CToolTipid="tt10"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.cursor</td></tr></table></blockquote>Holds the cursor for the overlay. </div></div><divclass=CToolTipid="tt11"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxCellOverlay.prototype.defaultOverlap</td></tr></table></blockquote>Defines the overlapping for the overlay, that is, the proportional distance from the origin to the point defined by the alignment. </div></div><divclass=CToolTipid="tt12"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxCellOverlay.prototype.getBounds = function(</td><tdclass="PParameter prettyprint "nowrap>state</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the bounds of the overlay for the given mxCellState as an mxRectangle. </div></div><divclass=CToolTipid="tt13"><divclass=CClass>Represents the current state of a cell in a given mxGraphView.</div></div><divclass=CToolTipid="tt14"><divclass=CClass>Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.</div></div><divclass=CToolTipid="tt15"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prot
