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

Properties

callbackMap

Accessors

containerInstance currentOptions nvlInstance

Methods

addEventListener callCallbackIfRegistered destroy removeCallback removeEventListener toggleGlobalTextSelection updateCallback updateTargets

Constructors

constructor

  • new PanInteraction(nvl, options?): PanInteraction

  • Creates a new instance of the pan interaction handler.

    Parameters

    Returns PanInteraction

Properties

InternalcallbackMap

callbackMap: Map<"onPan", undefined | boolean | ((panning: {
    x: number;
    y: number;
}, event: MouseEvent) => void)>

Accessors

containerInstance

  • get containerInstance(): HTMLElement
  • Internal

    Returns HTMLElement

currentOptions

  • get currentOptions(): P

  • Returns P

nvlInstance

  • get nvlInstance(): NVL
  • Internal

    Returns NVL

Methods

addEventListener

  • addEventListener(type, listener, options?): void
  • Internal

    Parameters

    • type: keyof HTMLElementEventMap
    • listener: ((event: Event) => void)
        • (event): void

        • Parameters

          • event: Event

          Returns void

    • Optionaloptions: boolean | AddEventListenerOptions

    Returns void

callCallbackIfRegistered

  • callCallbackIfRegistered(name, ...args): void
  • Internal

    Parameters

    • name: "onPan"
    • Rest...args: unknown[]

    Returns void

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

removeEventListener

  • removeEventListener(type, listener, options?): void
  • Internal

    Parameters

    • type: keyof HTMLElementEventMap
    • listener: ((event: Event) => void)
        • (event): void

        • Parameters

          • event: Event

          Returns void

    • Optionaloptions: boolean | EventListenerOptions

    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

Member Visibility

On This Page

Constructors
Properties
Accessors
Methods