<divid=Content><divclass="CClass"><divclass=CTopicid=MainTopic><h1class=CTitle><aname="mxOutline"></a>mxOutline</h1><divclass=CBody><p>Implements an outline (aka overview) for a graph. Set <ahref="#mxOutline.updateOnPan"class=LVariableid=link28onMouseOver="ShowTip(event, 'tt6', 'link28')"onMouseOut="HideTip('tt6')">updateOnPan</a> to true to enable updates while the source graph is panning.</p><h4class=CHeading>Example</h4><blockquote><preclass="prettyprint">var outline = new mxOutline(graph, div);</pre></blockquote><p>If the selection border in the outline appears behind the contents of the graph, then you can use the following code. (This may happen when using a transparent container for the outline in IE.)</p><blockquote><preclass="prettyprint">mxOutline.prototype.graphRenderHint = mxConstants.RENDERING_HINT_EXACT;</pre></blockquote><p>To move the graph to the top, left corner the following code can be used.</p><blockquote><preclass="prettyprint">var scale = graph.view.scale;
graph.view.setTranslate(-bounds.x / scale, -bounds.y / scale);</pre></blockquote><p>To toggle the suspended mode, the following can be used.</p><blockquote><preclass="prettyprint">outline.suspended = !outln.suspended;
}</pre></blockquote><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SMain"><tdclass=SEntry><ahref="#mxOutline">mxOutline</a></td><tdclass=SDescription>Implements an outline (aka overview) for a graph. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxOutline.Functions">Functions</a></td><tdclass=SDescription></td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxOutline.mxOutline"id=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">mxOutline</a></td><tdclass=SDescription>Constructs a new outline for the specified graph inside the given container.</td></tr><trclass="SFunction SIndent2"><tdclass=SEntry><ahref="#mxOutline.source">source</a></td><tdclass=SDescription>Reference to the source <ahref="mxGraph-js.html#mxGraph"class=LClassid=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">mxGraph</a>.</td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxOutline.outline">outline</a></td><tdclass=SDescription>Reference to the outline <ahref="mxGraph-js.html#mxGraph"class=LClassid=link3onMouseOver="ShowTip(event, 'tt2', 'link3')"onMouseOut="HideTip('tt2')">mxGraph</a>.</td></tr><trclass="SFunction SIndent2"><tdclass=SEntry><ahref="#mxOutline.graphRenderHint">graphRenderHint</a></td><tdclass=SDescription>Renderhint to be used for the outline graph. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxOutline.Variables">Variables</a></td><tdclass=SDescription></td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxOutline.enabled"id=link4onMouseOver="ShowTip(event, 'tt3', 'link4')"onMouseOut="HideTip('tt3')">enabled</a></td><tdclass=SDescription>Specifies if events are handled. </td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxOutline.showViewport"id=link5onMouseOver="ShowTip(event, 'tt4', 'link5')"onMouseOut="HideTip('tt4')">showViewport</a></td><tdclass=SDescription>Specifies a viewport rectangle should be shown. </td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxOutline.border"id=link6onMouseOver="ShowTip(event, 'tt5', 'link6')"onMouseOut="HideTip('tt5')">border</a></td><tdclass=SDescription>Border to be added at the bottom and right. </td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxOutline.enabled">enabled</a></td><tdclass=SDescription>Specifies the size of the sizer handler. </td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxOutline.updateOnPan"id=link7onMouseOver="ShowTip(event, 'tt6', 'link7')"onMouseOut="HideTip('tt6')">updateOnPan</a></td><tdclass=SDescription>Specifies if <ahref="#mxOutline.update"class=LFunctionid=link8onMouseOver="ShowTip(event, 'tt7', 'link8')"onMouseOut="HideTip('tt7')">update</a> should be called for <ahref="../util/mxEvent-js.html#mxEvent.PAN"class=LVariableid=link9onMouseOver="ShowTip(event, 'tt8', 'link9')"onMouseOut="HideTip('tt8')">mxEvent.PAN</a> in the source graph. </td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxOutline.sizerImage"id=link10onMouseOver="ShowTip(event, 'tt9', 'link10')"onMouseOut="HideTip('tt9')">sizerImage</a></td><tdclass=SDescription>Optional <ahref="../util/mxImage-js.html#mxImage"class=LClassid=link11onMouseOver="ShowTip(event, 'tt10', 'link11')"onMouseOut="HideTip('tt10')">mxImage</a> to be used for the sizer. </td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxOutline.suspended"id=link12onMouseOver="ShowTip(event, 'tt11', 'link12')"onMouseOut="HideTip('tt11')">suspended</a></td><tdclass=SDescription>Optional boolean flag to suspend updates. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxOutline.Functions">Functions</a></td><tdclass=SDescription></td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxOutline.init"id=link13onMouseOver="ShowTip(event,'t
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.mxOutline"></a>mxOutline</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>function mxOutline(</td><tdclass=PParameternowrap>source,</td></tr><tr><td></td><tdclass=PParameternowrap>container</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Constructs a new outline for the specified graph inside the given container.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>source</td><tdclass=CDLDescription><ahref="mxGraph-js.html#mxGraph"class=LClassid=link29onMouseOver="ShowTip(event, 'tt2', 'link29')"onMouseOut="HideTip('tt2')">mxGraph</a> to create the outline for.</td></tr><tr><tdclass=CDLEntry>container</td><tdclass=CDLDescription>DOM node that will contain the outline.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.source"></a>source</h3><divclass=CBody><p>Reference to the source <ahref="mxGraph-js.html#mxGraph"class=LClassid=link30onMouseOver="ShowTip(event, 'tt2', 'link30')"onMouseOut="HideTip('tt2')">mxGraph</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.outline"></a>outline</h3><divclass=CBody><p>Reference to the outline <ahref="mxGraph-js.html#mxGraph"class=LClassid=link31onMouseOver="ShowTip(event, 'tt2', 'link31')"onMouseOut="HideTip('tt2')">mxGraph</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.graphRenderHint"></a>graphRenderHint</h3><divclass=CBody><p>Renderhint to be used for the outline graph. Default is faster.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxOutline.enabled"></a>enabled</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.enabled</td></tr></table></blockquote><p>Specifies if events are handled. Default is true.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxOutline.showViewport"></a>showViewport</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.showViewport</td></tr></table></blockquote><p>Specifies a viewport rectangle should be shown. Default is true.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxOutline.border"></a>border</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.border</td></tr></table></blockquote><p>Border to be added at the bottom and right. Default is 10.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxOutline.enabled"></a>enabled</h3><divclass=CBody><p>Specifies the size of the sizer handler. Default is 8.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxOutline.updateOnPan"></a>updateOnPan</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.updateOnPan</td></tr></table></blockquote><p>Specifies if <ahref="#mxOutline.update"class=LFunctionid=link32onMouseOver="ShowTip(event, 'tt7', 'link32')"onMouseOut="HideTip('tt7')">update</a> should be called for <ahref="../util/mxEvent-js.html#mxEvent.PAN"class=LVariableid=link33onMouseOver="ShowTip(event, 'tt8', 'link33')"onMouseOut="HideTip('tt8')">mxEvent.PAN</a> in the source graph. Default is false.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxOutline.sizerImage"></a>sizerImage</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.sizerImage</td></tr></table></blockquote><p>Optional <ahref="../util/mxImage-js.html#mxImage"class=LClassid=link34onMouseOver="ShowTip(event, 'tt10', 'link34')"onMouseOut="HideTip('tt10')">mxImage</a> to be used for the sizer. Default is null.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxOutline.suspended"></a>suspended</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.suspended</td></tr></table></blockquote><p>Optional boolean flag to suspend updates. Default is false. This flag will also suspend repaints of the outline. To toggle this switch, use the following code.</p><blockquote><preclass="prettyprint">nav.suspended = !nav.suspended;
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.init"></a>init</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxOutline.prototype.init = function(</td><tdclass=PParameternowrap>container</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Initializes the outline inside the given container.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.isEnabled"></a>isEnabled</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.isEnabled = function()</td></tr></table></blockquote><p>Returns true if events are handled. This implementation returns <ahref="#mxOutline.enabled"class=LVariableid=link35onMouseOver="ShowTip(event, 'tt3', 'link35')"onMouseOut="HideTip('tt3')">enabled</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.setEnabled"></a>setEnabled</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxOutline.prototype.setEnabled = function(</td><tdclass=PParameternowrap>value</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Enables or disables event handling. This implementation updates <ahref="#mxOutline.enabled"class=LVariableid=link36onMouseOver="ShowTip(event, 'tt3', 'link36')"onMouseOut="HideTip('tt3')">enabled</a>.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>value</td><tdclass=CDLDescription>Boolean that specifies the new enabled state.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.setZoomEnabled"></a>setZoomEnabled</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxOutline.prototype.setZoomEnabled = function(</td><tdclass=PParameternowrap>value</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Enables or disables the zoom handling by showing or hiding the respective handle.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>value</td><tdclass=CDLDescription>Boolean that specifies the new enabled state.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.refresh"></a>refresh</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.refresh = function()</td></tr></table></blockquote><p>Invokes <ahref="#mxOutline.update"class=LFunctionid=link37onMouseOver="ShowTip(event, 'tt7', 'link37')"onMouseOut="HideTip('tt7')">update</a> and revalidate the outline. This method is deprecated.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.createSizer"></a>createSizer</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.createSizer = function()</td></tr></table></blockquote><p>Creates the shape used as the sizer.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.getSourceContainerSize"></a>getSourceContainerSize</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.getSourceContainerSize = function()</td></tr></table></blockquote><p>Returns the size of the source container.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.getOutlineOffset"></a>getOutlineOffset</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxOutline.prototype.getOutlineOffset = function(</td><tdclass=PParameternowrap>scale</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the offset for drawing the outline graph.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.update"></a>update</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxOutline.prototype.update = function(</td><tdclass=PParameternowrap>revalidate</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Updates the outline.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.mouseDown"></a>mouseDown</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxOutline.prototype.mouseDown = function(</td><tdclass=PParameternowrap>sender,</td></tr><tr><td></td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by starting a translation or zoom.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.mouseMove"></a>mouseMove</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxOutline.prototype.mouseMove = function(</td><tdclass=PParameternowrap>sender,</td></tr><tr><td></td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by previewing the viewrect in <graph> and updating the rectangle that represents the viewrect in the outline.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.mouseUp"></a>mouseUp</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxOutline.prototype.mouseUp = function(</td><tdclass=PParameternowrap>sender,</td></tr><tr><td></td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by applying the translation or zoom to <graph>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxOutline.destroy"></a>destroy</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.destroy = function()</td></tr></table></blockquote><p>Destroy this outline and removes all listeners from <ahref="#mxOutline.source"class=LFunctionid=link38onMouseOver="ShowTip(event, 'tt24', 'link38')"onMouseOut="HideTip('tt24')">source</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 mxOutline(</td><tdclass=PParameternowrap>source,</td></tr><tr><td></td><tdclass=PParameternowrap>container</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote>Constructs a new outline for the specified graph inside the given container.</div></div><divclass=CToolTipid="tt2"><divclass=CClass>Extends mxEventSource to implement a graph component for the browser. </div></div><divclass=CToolTipid="tt3"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.enabled</td></tr></table></blockquote>Specifies if events are handled. </div></div><divclass=CToolTipid="tt4"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.showViewport</td></tr></table></blockquote>Specifies a viewport rectangle should be shown. </div></div><divclass=CToolTipid="tt5"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.border</td></tr></table></blockquote>Border to be added at the bottom and right. </div></div><divclass=CToolTipid="tt6"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.updateOnPan</td></tr></table></blockquote>Specifies if update should be called for mxEvent.PAN in the source graph. </div></div><divclass=CToolTipid="tt7"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxOutline.prototype.update = function(</td><tdclass=PParameternowrap>revalidate</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote>Updates the outline.</div></div><divclass=CToolTipid="tt8"><divclass=CVariable>Specifies the event name for pan.</div></div><divclass=CToolTipid="tt9"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.sizerImage</td></tr></table></blockquote>Optional mxImage to be used for the sizer. </div></div><divclass=CToolTipid="tt10"><divclass=CClass>Encapsulates the URL, width and height of an image.</div></div><divclass=CToolTipid="tt11"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.suspended</td></tr></table></blockquote>Optional boolean flag to suspend updates. </div></div><divclass=CToolTipid="tt12"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxOutline.prototype.init = function(</td><tdclass=PParameternowrap>container</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote>Initializes the outline inside the given container.</div></div><divclass=CToolTipid="tt13"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxOutline.prototype.isEnabled = function()</td></tr></table></blockquote>Returns true if events are handled. </div></div><divclass=CToolTipid="tt14"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxOutline.prototype.setEnabled = function(</td><tdclass=PParameternowrap>value</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote>Enables or disables event handling. </div></div><divclass=CToolTipid="tt15"><divclass=CFunction><block
