Class PanInteraction

Interaction handler for panning the scene, which is achieved by clicking and moving the scene.

For examples, head to the Pan Interaction documentation page.

Hierarchy

Constructors

constructor

Accessors

currentOptions

Methods

destroy removeCallback toggleGlobalTextSelection updateCallback updateTargets

Constructors

constructor

  • new PanInteraction(nvl, options?): PanInteraction

  • Creates a new instance of the pan interaction handler.

    Parameters

    Returns PanInteraction

Accessors

currentOptions

  • get currentOptions(): P

  • Returns the current options of the interaction.

    Returns P

    The current options of the interaction.

Methods

destroy

  • destroy(): void

  • Removes the related event listeners from the canvas.

    Returns void

removeCallback

  • removeCallback(name): void

  • Remove a callback for a given event of type.

    Parameters

    • name: string

      The name of the event.

    Returns void

toggleGlobalTextSelection

  • toggleGlobalTextSelection(enable, eventFunction?): void

  • Enables or disables global text selection during a drag or pan operation.

    Parameters

    • enable: boolean

      Whether to enable or disable global text selection.

    • OptionaleventFunction: ((this: HTMLElement, ev: MouseEvent) => void)

      The event function to be added/removed when text selection is disabled/enabled.

        • (this, ev): void

        • Parameters

          • this: HTMLElement
          • ev: MouseEvent

          Returns void

    Returns void

updateCallback

  • updateCallback(name, callback): void

  • Add or update a callback for a given event of type.

    Parameters

    • name: string

      The name of the event.

    • callback: undefined | boolean | ((panning: {
          x: number;
          y: number;
      }, event: MouseEvent) => void)

      The callback to be called when the event is triggered.

    Returns void

updateTargets

  • updateTargets(targets, excludeNodeMargin): void

  • Updates which type of graph elements should hinder panning.

    Parameters

    • targets: ("node" | "relationship")[]

      The graph elements that should hinder panning.

    • excludeNodeMargin: boolean

      If true, the node margin will not hinder panning. By default, panning is hindered by nodes and relationships.

    Returns void

    Example

    import { NVL } from '@neo4j-nvl/base'
    import { PanInteraction } from '@neo4j-nvl/interaction-handlers'

    const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
    const panInteraction = new PanInteraction(nvl)

    // Pan canvas even when dragging on nodes and relationships
    panInteraction.updateTargets([], true)

Settings

On This Page

Constructors
Accessors
Methods