<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=link29onMouseOver="ShowTip(event, 'tt9', 'link29')"onMouseOut="HideTip('tt9')">useGrid</a>. This handler is built-into <mxGraph.panningHandler> and enabled using <ahref="../view/mxGraph-js.html#mxGraph.setPanning"class=LFunctionid=link30onMouseOver="ShowTip(event, 'tt24', 'link30')"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.useLeftButtonForPanning"id=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">useLeftButtonForPanning</a></td><tdclass=SDescription>Specifies if panning should be active for the left mouse button. </td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxPanningHandler.usePopupTrigger"id=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">usePopupTrigger</a></td><tdclass=SDescription>Specifies if <ahref="../util/mxEvent-js.html#mxEvent.isPopupTrigger"class=LFunctionid=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">mxEvent.isPopupTrigger</a> should also be used for panning.</td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxPanningHandler.ignoreCell"id=link7onMouseOver="ShowTip(event, 'tt7', 'link7')"onMouseOut="HideTip('tt7')">ignoreCell</a></td><tdclass=SDescription>Specifies if panning should be active even if there is a cell under the mousepointer. </td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=S
<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=link31onMouseOver="ShowTip(event, 'tt1', 'link31')"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=link32onMouseOver="ShowTip(event, 'tt15', 'link32')"onMouseOut="HideTip('tt15')">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=link33onMouseOver="ShowTip(event, 'tt15', 'link33')"onMouseOut="HideTip('tt15')">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=link34onMouseOver="ShowTip(event, 'tt15', 'link34')"onMouseOut="HideTip('tt15')">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=link35onMouseOver="ShowTip(event, 'tt3', 'link35')"onMouseOut="HideTip('tt3')">mxGraph</a>.</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, 'tt25', 'link36')"onMouseOut="HideTip('tt25')">mxRubberband</a>. Default is false.</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 <ahref="../util/mxEvent-js.html#mxEvent.isPopupTrigger"class=LFunctionid=link37onMouseOver="ShowTip(event, 'tt6', 'link37')"onMouseOut="HideTip('tt6')">mxEvent.isPopupTrigger</a> should also be used for panning.</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.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=link40onMouseOver="ShowTip(event, 'tt5', 'link40')"onMouseOut="HideTip('tt5')">usePopupTrigger</a> is true and the event is a popup trigger.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxPanningHandler.isForcePanningEvent"></a>isForcePanningEvent</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxPanningHandler.prototype.isForcePanningEvent = function(</td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given <ahref="../util/mxMouseEvent-js.html#mxMouseEvent"class=LClassid=link41onMouseOver="ShowTip(event, 'tt15', 'link41')"onMouseOut="HideTip('tt15')">mxMouseEvent</a> should start panning. This implementation always returns false.</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.start"></a>start</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxPanningHandler.prototype.start = function(</td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Starts panning at the given event.</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=link42onMouseOver="ShowTip(event, 'tt15', 'link42')"onMouseOut="HideTip('tt15')">mxMouseEvent</a> if it was a panning trigger in <ahref="#mxPanningHandler.mouseDown"class=LFunctionid=link43onMouseOver="ShowTip(event, 'tt16', 'link43')"onMouseOut="HideTip('tt16')">mouseDown</a>. The default is to invoke <ahref="../util/mxMouseEvent-js.html#mxMouseEvent.consume"class=LFunctionid=link44onMouseOver="ShowTip(event, 'tt26', 'link44')"onMouseOut="HideTip('tt26')">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.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=link45onMouseOver="ShowTip(event, 'tt2', 'link45')"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>Basic popup menu. </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.useLeftButtonForPanning</td></tr></table></blockquote>Specifies if panning should be active for the left mouse button. </div></div><divclass=CToolTipid="tt5"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxPanningHandler.prototype.usePopupTrigger</td></tr></table></blockquote>Specifies if mxEvent.isPopupTrigger should also be used for panning.</div></div><divclass=CToolTipid="tt6"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>isPopupTrigger: function(</td><tdclass=PParameternowrap>evt</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the event is a popup trigger. </div></div><divclass=CToolTipid="tt7"><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="tt8"><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="tt9"><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="tt10"><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="tt11"><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="tt12"><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="tt13"><divclass=CFunction><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>Returns true if the given event is a panning trigger for the optional given cell. </div></div><divclass=CToolTipid="tt14"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxPanningHandler.prot
