Class CbnInfiniteViewer

Constructors

constructor

Properties

_viewerContainer onAfterPan onAfterZoom onPan options viewerInstance

Methods

_cbnDefaultPan _cbnDefaultZoom _create _disablePan _disableZoom _getViewportContentBoundingBox centerViewer

Constructors

constructor

  • new CbnInfiniteViewer(viewerContainer, options?): CbnInfiniteViewer

  • Creates a new InfiniteViewer instance. Provide the viewer container element and optionaly provide options for the viewer.

    The viewer container needs to be able to receive key events for disabling panning by keyboard. (e.g. you can achieve this by setting the "tabindex" property)

    Parameters

    Returns CbnInfiniteViewer

Properties

Private _viewerContainer

_viewerContainer: HTMLElement

onAfterPan

onAfterPan: ((viewer) => void)

Define a custom action which is executed after the pan.

Type declaration

    • (viewer): void

    • Parameters

      • viewer: default

      Returns void

onAfterZoom

onAfterZoom: ((viewer) => void)

Define a custom action which is executed after the zoom.

Type declaration

    • (viewer): void

    • Parameters

      • viewer: default

      Returns void

onPan

onPan: ((viewer) => void)

Define a custom action which is executed on pan.

Type declaration

    • (viewer): void

    • Parameters

      • viewer: default

      Returns void

options

options: Partial<CbnInfiniteViewerOptions>

viewerInstance

viewerInstance: default

Methods

Private _cbnDefaultPan

  • _cbnDefaultPan(): void

  • Handle panning of the viewer with standard CBN settings. Let the user pan the viewer using either right mouse button or middle mouse button. Exceute the onAfterPan on pan end.

    Returns void

Private _cbnDefaultZoom

  • _cbnDefaultZoom(): void

  • Handle zooming of the viewer with standard CBN settings. Zoom to the center of the current mouse cursor position. Execute the onAfterZoom after adjusting the zoom lvl.

    Returns void

Private _create

Private _disablePan

Private _disableZoom

Private _getViewportContentBoundingBox

  • _getViewportContentBoundingBox(): {
        maxHeight: number;
        maxWidth: number;
    }

  • Get the max-bounding-box of the viewport content.

    Returns {
        maxHeight: number;
        maxWidth: number;
    }

    • maxHeight: number
    • maxWidth: number

centerViewer

  • centerViewer(marginValue?, animationDuration?): Promise<void>

  • Automatically center the viewport based on the viewport content. Behavior can be customized using the margin value (space arround the content) and the animationDuration (how long the centerViewport will take)

    Parameters

    • marginValue: number = 1

      optional (default: 1)

    • animationDuration: number = 0

      optional (default: 0)

    Returns Promise<void>

Settings

Member Visibility

Theme

On This Page

constructor_viewerContaineronAfterPanonAfterZoomonPanoptionsviewerInstance_cbnDefaultPan_cbnDefaultZoom_create_disablePan_disableZoom_getViewportContentBoundingBoxcenterViewer