Panning

The Diagram widget includes a viewport, the content of which is frequently larger than the viewport itself. The diagram has two scroll bars representing the region of the navigable content that is currently visible. The navigable content is the area covered by the graph with an optional surrounding space called content air.
To navigate through this content you can also use the panning and zooming mechanisms. Panning means moving the viewport to visualize other areas of the content, which can usually be performed using the scroll bars.
To pan the graph:
  • Press and hold the Shift key, click the diagram, and move the cursor. The content of the viewport moves, together with the scroll bars. The process ends when the mouse button is released.
To activate the panning function (combination of Alt, Ctrl and Shift):
  • Use the following method:
    assignInteractorInputs( "pan", spec )
    The following code configures the panning action only on left-clicks when the Ctrl and Shift keys are pressed.
    dijit.byId("myDiagram").assignInteractorInputs("pan",{start:{button:0,ctrl:true,shift:true}});
    The following code configures the panning action when the user starts to drag on a graph shape.
    dijit.byId("myDiagram").setPanOnShapes(true);
    It is enabled by default, however it can be disabled when the action of dragging shapes might collide with panning configurations.
To disable the panning function:
  • Set the pan attribute to false or use the method setPanEnabled on the Diagram object.