MoveViewportInputMode

Show usages

An IInputMode implementation that can be used to pan or zoom the viewport of a CanvasComponent via mouse, stylus, and multitouch gestures.

Inheritance Hierarchy

MoveViewportInputMode

Implemented Interfaces

IInputMode

Remarks

This implementation will request the mutex as soon as it recognizes a drag with the pointers or touch devices.

If allowPinchZoom is enabled, zooming is done with two touch pointers using the pinch zoom gesture. If the primary pointer is released during pinch, the secondary pointer is used for moving the viewpoint. The pinch zoom then can be restarted by touching another pointer that is recognized as the primary pointer.

If allowSinglePointerMovement is enabled, moving the viewport can be started with a single pointer, i.e., touching with one finger. Disabling this property is especially useful for applications that allow editing. When disabled, other gestures like moving items, or creating edges can be configured to start without a long press.

This mode is exclusive by default.

Examples

Typically, the MoveViewportInputMode is installed as child mode of a GraphEditorInputMode or GraphViewerInputMode and can be retrieved from the moveViewportInputMode property. Note that in these scenarios, the configuration may be different from the documentation of the defaults of this type.

Getting the MoveViewportInputMode from its parent input mode

const moveViewportInputMode = mode.moveViewportInputMode

Type Details

yFiles module: view

Constructors

MoveViewportInputMode

()

Creates a new instance of the move viewport mode

ParametersOptions Overload

options - Object
A map of options to pass to the method.

priority - number

exclusive - boolean

A value indicating whether this mode will be the only one running when it has the mutex. This option sets the exclusive property on the created object.

enabled - boolean

The enabled state of this input mode. This option sets the enabled property on the created object.

beginRecognizerTouch - function(EventArgs, unknown):boolean

The event recognizer that determines whether to start the 'move viewport' gesture with TOUCH input. This option sets the beginRecognizerTouch property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

moveRecognizerTouch - function(EventArgs, unknown):boolean

The event recognizer that determines whether to move the viewport or zoom the canvas with TOUCH input. This option sets the moveRecognizerTouch property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

finishRecognizerTouch - function(EventArgs, unknown):boolean

The event recognizer that determines whether to finish the 'move viewport' or 'pinch' gesture with TOUCH input. This option sets the finishRecognizerTouch property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

beginPinchZoomRecognizer - function(EventArgs, unknown):boolean

The event recognizer that determines whether to start the 'pinch' gesture with TOUCH input. This option sets the beginPinchZoomRecognizer property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

pinchZoomRecognizer - function(EventArgs, unknown):boolean

The event recognizer that determines whether to zoom the canvas using the 'pinch' gesture or move the viewport if no primary device is down. This option sets the pinchZoomRecognizer property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

finishPinchZoomRecognizer - function(EventArgs, unknown):boolean

The event recognizer that determines whether to finish the pinch zoom gesture or finish the move if no primary device is down. This option sets the finishPinchZoomRecognizer property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

inertiaDuration - TimeSpan

The duration of the inertia movement. This option sets the inertiaDuration property on the created object.

inertia - InertiaPolicies

The mode that determines when to use inertia when dragging the viewport. This option sets the inertia property on the created object.

allowPinchZoom - boolean

A value indicating whether to allow the pinch zoom gesture. This option sets the allowPinchZoom property on the created object.

allowSinglePointerMovement - boolean

A value indicating whether moving the viewport can be started with a single pointer, i.e., touching with one finger. This option sets the allowSinglePointerMovement property on the created object.

snapPanning - SnapPanningBehaviors

A value indicating whether touch panning should snap to the x- or y-axis. This option sets the snapPanning property on the created object.

snapPanningThreshold - number

A value that determines how far the pointer has to move away from the snapped axis in order to start with free panning. This option sets the snapPanningThreshold property on the created object.

pinchZoomThreshold - number

A value that determines how far the two pointers have to move apart while panning with two fingers in order to start a zoom gesture. This option sets the pinchZoomThreshold property on the created object.

pinchLockZoomThreshold - number

The distance threshold for returning from pinch zoom to two-finger panning with locked zoom level. This option sets the pinchLockZoomThreshold property on the created object.

validBeginCursor - Cursor

The cursor to use when beginning to move the viewport is valid. This option sets the validBeginCursor property on the created object.

dragCursor - Cursor

The cursor to use during dragging. This option sets the dragCursor property on the created object.

validBeginRecognizer - function(EventArgs, unknown):boolean

The event recognizer that determines whether it is valid to begin moving the viewport. This option sets the validBeginRecognizer property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

beginRecognizer - function(EventArgs, unknown):boolean

The event recognizer that determines whether to start moving the viewport. This option sets the beginRecognizer property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

moveRecognizer - function(EventArgs, unknown):boolean

The event recognizer that determines whether to move the viewport. This option sets the moveRecognizer property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

finishRecognizer - function(EventArgs, unknown):boolean

The event recognizer that determines whether to finish moving the viewport. This option sets the finishRecognizer property on the created object.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

Properties

allowPinchZoom

: boolean

Gets or sets a value indicating whether to allow the pinch zoom gesture.

Property Value

true if the pinch zoom gesture is allowed to change the zoom level; otherwise, false.

allowSinglePointerMovement

: boolean

Gets or sets a value indicating whether moving the viewport can be started with a single pointer, i.e., touching with one finger.

Remarks

The default value is true.

Examples

Setting this property to false is especially useful for applications that allow editing. When disabled, other gestures like moving items, or creating edges can be configured to start without a long press.

Configure touch gestures without long press

mode.moveViewportInputMode.allowSinglePointerMovement = true
mode.createBendInputMode.beginRecognizerTouch =
  EventRecognizers.TOUCH_PRIMARY_DOWN
mode.createEdgeInputMode.beginRecognizerTouch =
  EventRecognizers.TOUCH_PRIMARY_DOWN
mode.handleInputMode.beginRecognizerTouch =
  EventRecognizers.TOUCH_PRIMARY_DOWN
mode.lassoSelectionInputMode.beginRecognizerTouch =
  EventRecognizers.TOUCH_PRIMARY_DOWN
mode.marqueeSelectionInputMode.beginRecognizerTouch =
  EventRecognizers.TOUCH_PRIMARY_DOWN
mode.moveSelectedItemsInputMode.beginRecognizerTouch =
  EventRecognizers.TOUCH_PRIMARY_DOWN

beginPinchZoomRecognizer

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines whether to start the 'pinch' gesture with TOUCH input.

Property Value

The default recognizer detects down events of the secondary touch device.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

beginRecognizer

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines whether to start moving the viewport.

Remarks

The default instance detects MOUSE or PEN DOWN events with the MOUSE_LEFT or MOUSE_MIDDLE button.

If this input mode is a child mode of GraphEditorInputMode, the default is another recognizer which additionally requires the Ctrl modifier or Space key to be held down.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

beginRecognizerTouch

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines whether to start the 'move viewport' gesture with TOUCH input.

Property Value

The default recognizer is TOUCH_PRIMARY_DOWN.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

controller

: ConcurrencyController?

Gets the installed controller.

dragCursor

: Cursor?

Gets or sets the cursor to use during dragging.

Remarks

The default is POINTER.

enabled

: boolean

Gets or sets the enabled state of this input mode.

Remarks

Clients can use this property to disable or reenable this instance. This will set the enabled property of the installed controller so a disabled instance should never try to acquire the input mutex.

Examples

Disabling the MoveViewportInputMode on its parent input mode

mode.moveViewportInputMode.enabled = false

exclusive

: boolean

Gets or sets a value indicating whether this mode will be the only one running when it has the mutex.

Remarks

The value of this property will be delegated to the exclusive property of the controller.

If this mode is marked as exclusive and has the mutex, all other modes added to the same MultiplexingInputMode will be deactivated. Otherwise, it will always run concurrently with all other modes.

finishPinchZoomRecognizer

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines whether to finish the pinch zoom gesture or finish the move if no primary device is down.

Property Value

The default instance detects detects up events of the secondary touch device, CANCEL, and DRAG_CAPTURE_LOST events.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

finishRecognizer

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines whether to finish moving the viewport.

Remarks

The default instance detects UP events with the MOUSE_LEFT button, MOUSE_MIDDLE button, CANCEL, or DRAG_CAPTURE_LOST events for MOUSE or PEN input.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

finishRecognizerTouch

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines whether to finish the 'move viewport' or 'pinch' gesture with TOUCH input.

Property Value

The default instance detects primary touch up, CANCEL and DRAG_CAPTURE_LOST events.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

inertia

: InertiaPolicies

Gets or sets the mode that determines when to use inertia when dragging the viewport.

inertiaDuration

: TimeSpan

Gets or sets the duration of the inertia movement.

Remarks

The default value is 1.5 seconds.

moveRecognizer

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines whether to move the viewport.

Property Value

The default recognizer is MOUSE_DRAG.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

moveRecognizerTouch

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines whether to move the viewport or zoom the canvas with TOUCH input.

Property Value

The default recognizer is TOUCH_PRIMARY_DRAG.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

parentInputModeContext

: IInputModeContext?

Retrieves the IInputModeContext this mode has been installed in.

Remarks

The value will be null if this mode is currently not installed.

pinchLockZoomThreshold

: number

Gets or sets the distance threshold for returning from pinch zoom to two-finger panning with locked zoom level.

pinchZoomRecognizer

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines whether to zoom the canvas using the 'pinch' gesture or move the viewport if no primary device is down.

Property Value

The default recognizer detects move events of the secondary touch device.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

pinchZoomThreshold

: number

Gets or sets a value that determines how far the two pointers have to move apart while panning with two fingers in order to start a zoom gesture.

Remarks

Moving the fingers away from each other right from the start will instantly result in a pinch zoom.

priority

: number

Gets the priority of this input mode.

Remarks

The priority will influence the order in which the modes will be installed into the CanvasComponent. The lower the priority value, the earlier it will be installed. If two modes are using the same priority value, the first one to be registered will be installed earlier.

Implements

IInputMode

snapPanning

: SnapPanningBehaviors

Gets or sets a value indicating whether touch panning should snap to the x- or y-axis.

Remarks

This only applies to panning with touch gestures.

snapPanningThreshold

: number

Gets or sets a value that determines how far the pointer has to move away from the snapped axis in order to start with free panning.

Remarks

This only applies to panning with touch gestures.

validBeginCursor

: Cursor?

Gets or sets the cursor to use when beginning to move the viewport is valid.

Remarks

The default is null

validBeginRecognizer

: function(EventArgs, unknown):boolean

Gets or sets the event recognizer that determines whether it is valid to begin moving the viewport.

Remarks

The default recognizer is ALWAYS.

Signature Details

function(evt: EventArgs, eventSource: unknown) : boolean

A callback that recognizes events.

Given a sender and an event argument, delegates decide whether the event is treated as a match depending on the context.

Parameters

evt - EventArgs: The arguments of the event to be decided to handle.
eventSource - unknown: The source of the event.

Returns

boolean: true if the evt is considered to be handled.

Methods

arm

()

Called to prepare moving the viewport when the mouse is pressed.

Remarks

This will set the mouse cursor to dragCursor.

cancel

()

Cancels navigation.

Implements

IInputMode

disarm

()

Called after moving the viewport is finished or canceled.

Remarks

This will reset the mouse cursor.

install

(context: IInputModeContext, controller: ConcurrencyController)

Installs this mode into the given context that is provided by the canvas.

Remarks

In general a mode can only be installed into a single canvas at all times.

This method is called to initialize this instance. Subclasses should override this method to register the corresponding event handler delegates for the various input events they need to register with.

Overriding implementations should call the base implementation first.

Parameters

options - Object
A map of options to pass to the method.

context - IInputModeContext: The context that this instance shall be installed into. The same instance will be passed to this instance during uninstall. A reference to the context may be kept and queried during the time the mode is installed.
controller - ConcurrencyController: The controller for this mode.

Implements

IInputMode

onCanceled

()

Called after cancel has been called.

Remarks

Can be overridden in subclasses to perform additional actions after the mode has been canceled.

This implementation does nothing.

onConcurrencyControllerActivated

()

Called after the active property of the installed ConcurrencyController has been set to true.

Remarks

Can be overridden in subclasses to perform additional actions after the mode has been activated.

Overriding implementations should call the base implementation.

onConcurrencyControllerDeactivated

()

Called after the active property of the installed ConcurrencyController has been set to false.

Remarks

Can be overridden in subclasses to perform additional actions after the mode has been deactivated.

Overriding implementations should call the base implementation.

onDragCanceled

(evt: InputModeEventArgs)

Triggers the drag-canceled event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onDragCanceling

(evt: InputModeEventArgs)

Triggers the drag-canceling event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onDragFinished

(evt: InputModeEventArgs)

Called once the drag has been finalized.

Remarks

This method triggers the drag-finished event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onDragFinishing

(evt: InputModeEventArgs)

Called before the drag will be finalized.

Remarks

This method triggers the drag-finishing event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onDragged

(evt: InputModeEventArgs)

Called at the end of each drag.

Remarks

This method triggers the dragged event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onDragging

(evt: InputModeEventArgs)

Called at the start of each drag.

Remarks

This method triggers the dragging event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onDragStarted

(evt: InputModeEventArgs)

Triggers the drag-started event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onDragStarting

(evt: InputModeEventArgs)

Triggers the drag-starting event.

Parameters

options - Object
A map of options to pass to the method.

evt - InputModeEventArgs: The event argument that contains context information.

onStopped

()

Called after tryStop has been called.

Remarks

Can be overridden in subclasses to perform additional actions after the mode has been stopped.

This implementation does nothing.

tryStop

() : boolean

Will be called to request a stop of the current editing progress.

Remarks

This should stop the current edit, if one is in progress, and possibly commit all pending changes. If stopping is not possible, this method can return false

Returns

↪boolean: true if and only if the editing has been stopped or there was no edit in progress

Implements

IInputMode

uninstall

(context: IInputModeContext)

Uninstalls this mode from the given context that is provided by the canvas.

Remarks

This method is called to unregister this instance. Subclasses should override this method to unregister the event handler delegates and free resources which were registered in the install method.

Overriding implementations should call the base implementation at the end.

Parameters

options - Object
A map of options to pass to the method.

context - IInputModeContext: The context that this instance shall be uninstalled from.

Implements

IInputMode

Events

'drag-canceled'

: function(InputModeEventArgs, this):void

Occurs when the drag has been canceled.

'drag-canceling'

: function(InputModeEventArgs, this):void

Occurs before the drag will be canceled.

'drag-finished'

: function(InputModeEventArgs, this):void

Occurs once the drag has been finished.

'drag-finishing'

: function(InputModeEventArgs, this):void

Occurs before the drag will be finished.

'drag-started'

: function(InputModeEventArgs, this):void

Occurs once the drag is initialized and has started.

'drag-starting'

: function(InputModeEventArgs, this):void

Occurs once the drag is starting.

'dragged'

: function(InputModeEventArgs, this):void

Occurs at the end of every drag.

'dragging'

: function(InputModeEventArgs, this):void

Occurs at the start of every drag.