<divid=Content><divclass="CClass"><divclass=CTopicid=MainTopic><h1class=CTitle><aname="mxPanningHandler"></a>mxPanningHandler</h1><divclass=CBody><p>Event handler that pans and creates popupmenus. To use the left mousebutton for panning without interfering with cell moving and resizing, use <isUseLeftButton> and <isIgnoreCell>. For grid size steps while panning, use <ahref="#mxPanningHandler.useGrid"class=LVariableid=link28onMouseOver="ShowTip(event, 'tt10', 'link28')"onMouseOut="HideTip('tt10')">useGrid</a>. This handler is built-into <mxGraph.panningHandler> and enabled using <ahref="../view/mxGraph-js.html#mxGraph.setPanning"class=LFunctionid=link29onMouseOver="ShowTip(event, 'tt24', 'link29')"onMouseOut="HideTip('tt24')">mxGraph.setPanning</a>.</p><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SMain"><tdclass=SEntry><ahref="#mxPanningHandler">mxPanningHandler</a></td><tdclass=SDescription>Event handler that pans and creates popupmenus. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxPanningHandler.Functions">Functions</a></td><tdclass=SDescription></td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxPanningHandler.mxPanningHandler">mxPanningHandler</a></td><tdclass=SDescription>Constructs an event handler that creates a <ahref="../util/mxPopupMenu-js.html#mxPopupMenu"class=LClassid=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">mxPopupMenu</a> and pans the graph.</td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxPanningHandler.Events">Events</a></td><tdclass=SDescription></td></tr><trclass="SEvent SIndent2 SMarked"><tdclass=SEntry><ahref="#mxPanningHandler.mxEvent.PAN_START">mxEvent.<wbr>PAN_START</a></td><tdclass=SDescription>Fires when the panning handler changes its <active> state to true. </td></tr><trclass="SEvent SIndent2"><tdclass=SEntry><ahref="#mxPanningHandler.mxEvent.PAN">mxEvent.PAN</a></td><tdclass=SDescription>Fires while handle is processing events. </td></tr><trclass="SEvent SIndent2 SMarked"><tdclass=SEntry><ahref="#mxPanningHandler.mxEvent.PAN_END">mxEvent.<wbr>PAN_END</a></td><tdclass=SDescription>Fires when the panning handler changes its <active> state to false. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxPanningHandler.Variables">Variables</a></td><tdclass=SDescription></td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxPanningHandler.graph"id=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">graph</a></td><tdclass=SDescription>Reference to the enclosing <ahref="../view/mxGraph-js.html#mxGraph"class=LClassid=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">mxGraph</a>.</td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxPanningHandler.usePopupTrigger"id=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">usePopupTrigger</a></td><tdclass=SDescription>Specifies if the <isPopupTrigger> should also be used for panning. </td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxPanningHandler.useLeftButtonForPanning"id=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">useLeftButtonForPanning</a></td><tdclass=SDescription>Specifies if panning should be active for the left mouse button. </td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxPanningHandler.selectOnPopup"id=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">selectOnPopup</a></td><tdclass=SDescription>Specifies if cells should be selected if a popupmenu is displayed for them. </td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxPanningHandler.clearSelectionOnBackground"id=link7onMouseOver="ShowTip(event, 'tt7', 'link7')"onMouseOut="HideTip('tt7')">clearSelectio
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.mxPanningHandler"></a>mxPanningHandler</h3><divclass=CBody><p>Constructs an event handler that creates a <ahref="../util/mxPopupMenu-js.html#mxPopupMenu"class=LClassid=link30onMouseOver="ShowTip(event, 'tt1', 'link30')"onMouseOut="HideTip('tt1')">mxPopupMenu</a> and pans the graph.</p></div></div></div>
<divclass="CEvent"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.mxEvent.PAN_START"></a>mxEvent.<wbr>PAN_START</h3><divclass=CBody><p>Fires when the panning handler changes its <active> state to true. The <code>event</code> property contains the corresponding <ahref="../util/mxMouseEvent-js.html#mxMouseEvent"class=LClassid=link31onMouseOver="ShowTip(event, 'tt18', 'link31')"onMouseOut="HideTip('tt18')">mxMouseEvent</a>.</p></div></div></div>
<divclass="CEvent"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.mxEvent.PAN"></a>mxEvent.PAN</h3><divclass=CBody><p>Fires while handle is processing events. The <code>event</code> property contains the corresponding <ahref="../util/mxMouseEvent-js.html#mxMouseEvent"class=LClassid=link32onMouseOver="ShowTip(event, 'tt18', 'link32')"onMouseOut="HideTip('tt18')">mxMouseEvent</a>.</p></div></div></div>
<divclass="CEvent"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.mxEvent.PAN_END"></a>mxEvent.<wbr>PAN_END</h3><divclass=CBody><p>Fires when the panning handler changes its <active> state to false. The <code>event</code> property contains the corresponding <ahref="../util/mxMouseEvent-js.html#mxMouseEvent"class=LClassid=link33onMouseOver="ShowTip(event, 'tt18', 'link33')"onMouseOut="HideTip('tt18')">mxMouseEvent</a>.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.graph"></a>graph</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.graph</td></tr></table></blockquote><p>Reference to the enclosing <ahref="../view/mxGraph-js.html#mxGraph"class=LClassid=link34onMouseOver="ShowTip(event, 'tt3', 'link34')"onMouseOut="HideTip('tt3')">mxGraph</a>.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.usePopupTrigger"></a>usePopupTrigger</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.usePopupTrigger</td></tr></table></blockquote><p>Specifies if the <isPopupTrigger> should also be used for panning. To avoid conflicts, the panning is only activated if the mouse was moved more than <ahref="../view/mxGraph-js.html#mxGraph.tolerance"class=LVariableid=link35onMouseOver="ShowTip(event, 'tt25', 'link35')"onMouseOut="HideTip('tt25')">mxGraph.tolerance</a>, otherwise, a single click is assumed and the popupmenu is displayed. Default is true.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.useLeftButtonForPanning"></a>useLeftButtonForPanning</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.useLeftButtonForPanning</td></tr></table></blockquote><p>Specifies if panning should be active for the left mouse button. Setting this to true may conflict with <ahref="mxRubberband-js.html#mxRubberband"class=LClassid=link36onMouseOver="ShowTip(event, 'tt26', 'link36')"onMouseOut="HideTip('tt26')">mxRubberband</a>. Default is false.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.selectOnPopup"></a>selectOnPopup</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.selectOnPopup</td></tr></table></blockquote><p>Specifies if cells should be selected if a popupmenu is displayed for them. Default is true.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.clearSelectionOnBackground"></a>clearSelectionOnBackground</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.clearSelectionOnBackground</td></tr></table></blockquote><p>Specifies if cells should be deselected if a popupmenu is displayed for the diagram background. Default is true.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.ignoreCell"></a>ignoreCell</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.ignoreCell</td></tr></table></blockquote><p>Specifies if panning should be active even if there is a cell under the mousepointer. Default is false.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.previewEnabled"></a>previewEnabled</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.previewEnabled</td></tr></table></blockquote><p>Specifies if the panning should be previewed. Default is true.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.useGrid"></a>useGrid</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.useGrid</td></tr></table></blockquote><p>Specifies if the panning steps should be aligned to the grid size. Default is false.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.panningEnabled"></a>panningEnabled</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.panningEnabled</td></tr></table></blockquote><p>Specifies if panning should be enabled. Default is true.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.init"></a>init</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.init = function()</td></tr></table></blockquote><p>Initializes the shapes required for this vertex handler.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.isPanningTrigger"></a>isPanningTrigger</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxPanningHandler.prototype.isPanningTrigger = function(</td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given event is a panning trigger for the optional given cell. This returns true if control-shift is pressed or if <ahref="#mxPanningHandler.usePopupTrigger"class=LVariableid=link39onMouseOver="ShowTip(event, 'tt4', 'link39')"onMouseOut="HideTip('tt4')">usePopupTrigger</a> is true and the event is a popup trigger.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.mouseDown"></a>mouseDown</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxPanningHandler.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 initiating the panning. By consuming the event all subsequent events of the gesture are redirected to this handler.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.consumePanningTrigger"></a>consumePanningTrigger</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxPanningHandler.prototype.consumePanningTrigger = function(</td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Consumes the given <ahref="../util/mxMouseEvent-js.html#mxMouseEvent"class=LClassid=link40onMouseOver="ShowTip(event, 'tt18', 'link40')"onMouseOut="HideTip('tt18')">mxMouseEvent</a> if it was a panning trigger in <ahref="#mxPanningHandler.mouseDown"class=LFunctionid=link41onMouseOver="ShowTip(event, 'tt16', 'link41')"onMouseOut="HideTip('tt16')">mouseDown</a>. The default is to invoke <ahref="../util/mxMouseEvent-js.html#mxMouseEvent.consume"class=LFunctionid=link42onMouseOver="ShowTip(event, 'tt27', 'link42')"onMouseOut="HideTip('tt27')">mxMouseEvent.consume</a>. Note that this will block any further event processing. If you haven’t disabled built-in context menus and require immediate selection of the cell on mouseDown in Safari and/or on the Mac, then use the following code:</p><blockquote><preclass="prettyprint">mxPanningHandler.prototype.consumePanningTrigger = function(me)
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.mouseMove"></a>mouseMove</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxPanningHandler.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 updating the panning on the graph.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.mouseUp"></a>mouseUp</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxPanningHandler.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 setting the translation on the view or showing the popupmenu.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.getCellForPopupEvent"></a>getCellForPopupEvent</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxPanningHandler.prototype.getCellForPopupEvent = function(</td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to return the cell for the mouse up popup trigger handling.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.panGraph"></a>panGraph</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxPanningHandler.prototype.panGraph = function(</td><tdclass=PParameternowrap>dx,</td></tr><tr><td></td><tdclass=PParameternowrap>dy</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Pans <ahref="#mxPanningHandler.graph"class=LVariableid=link43onMouseOver="ShowTip(event, 'tt2', 'link43')"onMouseOut="HideTip('tt2')">graph</a> by the given amount.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.destroy"></a>destroy</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.destroy = function()</td></tr></table></blockquote><p>Destroys the handler and all its resources and DOM nodes.</p></div></div></div>
</div><!--Content-->
<divid=Footer><ahref="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->
<divclass=CToolTipid="tt1"><divclass=CClass>Event handler that pans and creates popupmenus. </div></div><divclass=CToolTipid="tt2"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.graph</td></tr></table></blockquote>Reference to the enclosing mxGraph.</div></div><divclass=CToolTipid="tt3"><divclass=CClass>Extends mxEventSource to implement a graph component for the browser. </div></div><divclass=CToolTipid="tt4"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.usePopupTrigger</td></tr></table></blockquote>Specifies if the isPopupTrigger should also be used for panning. </div></div><divclass=CToolTipid="tt5"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.useLeftButtonForPanning</td></tr></table></blockquote>Specifies if panning should be active for the left mouse button. </div></div><divclass=CToolTipid="tt6"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.selectOnPopup</td></tr></table></blockquote>Specifies if cells should be selected if a popupmenu is displayed for them. </div></div><divclass=CToolTipid="tt7"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.clearSelectionOnBackground</td></tr></table></blockquote>Specifies if cells should be deselected if a popupmenu is displayed for the diagram background. </div></div><divclass=CToolTipid="tt8"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.ignoreCell</td></tr></table></blockquote>Specifies if panning should be active even if there is a cell under the mousepointer. </div></div><divclass=CToolTipid="tt9"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.previewEnabled</td></tr></table></blockquote>Specifies if the panning should be previewed. </div></div><divclass=CToolTipid="tt10"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.useGrid</td></tr></table></blockquote>Specifies if the panning steps should be aligned to the grid size. </div></div><divclass=CToolTipid="tt11"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.panningEnabled</td></tr></table></blockquote>Specifies if panning should be enabled. </div></div><divclass=CToolTipid="tt12"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.isPanningEnabled = function()</td></tr></table></blockquote>Returns panningEnabled.</div></div><divclass=CToolTipid="tt13"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxPanningHandler.prototype.setPanningEnabled = function(</td><tdclass=PParameternowrap>value</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote>Sets panningEnabled.</div></div><divclass=CToolTipid="tt14"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.init = function()</td></tr></table></blockquote>Initializes the shapes required for this vertex handler.</div></div><divclass=CToolTipid="tt15"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mx
