Interface CoreViewportManipulation

http://js.cytoscape.org/#core/viewport-manipulation

interface CoreViewportManipulation {
    autolock(): boolean;
    autolock(bool?: boolean): this;
    autoungrabify(): boolean;
    autoungrabify(bool?: boolean): this;
    autounselectify(): boolean;
    autounselectify(bool?: boolean): this;
    boxSelectionEnabled(): boolean;
    boxSelectionEnabled(bool?: boolean): this;
    center(eles?: CollectionArgument): this;
    centre(eles?: CollectionArgument): this;
    container(): null | HTMLElement;
    extent(): {
        h: number;
        w: number;
        x1: number;
        x2: number;
        y1: number;
        y2: number;
    };
    fit(eles?: CollectionArgument, padding?: number): this;
    forceRender(): this;
    height(): number;
    invalidateDimensions(): this;
    maxZoom(): number;
    maxZoom(zoom: number): this;
    minZoom(): number;
    minZoom(zoom: number): this;
    pan(): Position;
    pan(renderedPosition?: Position): this;
    panBy(renderedPosition: Position): this;
    panningEnabled(): boolean;
    panningEnabled(bool?: boolean): this;
    reset(): this;
    resize(): this;
    selectionType(): SelectionType;
    selectionType(type: SelectionType): this;
    userPanningEnabled(): boolean;
    userPanningEnabled(bool?: boolean): this;
    userZoomingEnabled(): boolean;
    userZoomingEnabled(bool?: boolean): this;
    viewport(options: {
        pan: Position;
        zoom: number;
    }): this;
    width(): number;
    zoom(): number;
    zoom(level?: ZoomOptions): this;
    zoomingEnabled(bool?: boolean): this;
}

Hierarchy (view full)

CoreViewportManipulation
- cytoscape.Core

Methods

autolock

autolock(): boolean
Get whether nodes are automatically locked (i.e. if true, nodes are locked despite their individual state). http://js.cytoscape.org/#cy.autolock

Returns boolean
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:989
autolock(bool?): this
Set whether nodes are automatically locked (i.e. if true, nodes are locked despite their individual state). http://js.cytoscape.org/#cy.autolock
Parameters
- Optionalbool: boolean
  A truthy value enables autolocking; a falsey value disables it.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:997

autoungrabify

autoungrabify(): boolean
Get whether nodes are automatically ungrabified (i.e. if true, nodes are ungrabbale despite their individual state). http://js.cytoscape.org/#cy.autoungrabify

Returns boolean
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:1004
autoungrabify(bool?): this
Set whether nodes are automatically ungrabified (i.e. if true, nodes are ungrabbale despite their individual state). http://js.cytoscape.org/#cy.autoungrabify
Parameters
- Optionalbool: boolean
  A truthy value enables autolocking; a falsey value disables it.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:1012

autounselectify

autounselectify(): boolean
Get whether nodes are automatically unselectified (i.e. if true, nodes are unselectable despite their individual state). http://js.cytoscape.org/#cy.autounselectify

Returns boolean
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:1019
autounselectify(bool?): this
Set whether nodes are automatically unselectified (i.e. if true, nodes are unselectable despite their individual state). http://js.cytoscape.org/#cy.autounselectify
Parameters
- Optionalbool: boolean
  A truthy value enables autolocking; a falsey value disables it.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:1027

boxSelectionEnabled

boxSelectionEnabled(): boolean
Get whether box selection is enabled. If enabled, the user must hold left-click to initiate panning. http://js.cytoscape.org/#cy.boxSelectionEnabled

Returns boolean
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:934
boxSelectionEnabled(bool?): this
Set whether box selection is enabled. If enabled, the user must hold left-click to initiate panning. http://js.cytoscape.org/#cy.boxSelectionEnabled
Parameters
- Optionalbool: boolean
  A truthy value enables box selection; a falsey value disables it.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:942

center

center(eles?): this
Pan the graph to the centre of a collection.
Parameters
- Optionaleles: CollectionArgument
  The collection to centre upon.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:781

centre

centre(eles?): this
Pan the graph to the centre of a collection.
Parameters
- Optionaleles: CollectionArgument
  The collection to centre upon.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:788

container

container(): null | HTMLElement
Get the HTML DOM element in which the graph is visualised. A null value is returned if the Core is headless.

Returns null | HTMLElement
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:774

extent

extent(): {
    h: number;
    w: number;
    x1: number;
    x2: number;
    y1: number;
    y2: number;
}
Get the extent of the viewport, a bounding box in model coordinates that lets you know what model positions are visible in the viewport. http://js.cytoscape.org/#cy.extent

Returns {
    h: number;
    w: number;
    x1: number;
    x2: number;
    y1: number;
    y2: number;
}
- h: number
- w: number
- x1: number
- x2: number
- y1: number
- y2: number
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:975

fit

fit(eles?, padding?): this
Pan and zooms the graph to fit to a collection. http://js.cytoscape.org/#cy.fit
Parameters
- Optionaleles: CollectionArgument
  [optional] The collection to fit to.
- Optionalpadding: number
  [optional] An amount of padding (in pixels) to have around the graph
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:797

forceRender

forceRender(): this
Force the renderer to redraw (i.e. draw a new frame).

This function forces the renderer to draw a new frame. It is useful for very specific edgecases, such as in certain UI plugins, but it should not be needed for most developers. http://js.cytoscape.org/#cy.forceRender

Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:1037

height

height(): number
Get the on-screen height of the viewport in pixels. http://js.cytoscape.org/#cy.height

Returns number
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:967

invalidateDimensions

invalidateDimensions(): this
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:1053

maxZoom

maxZoom(): number
Get the maximum zoom level. http://js.cytoscape.org/#cy.maxZoom

Returns number
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:910
maxZoom(zoom): this
Set the maximum zoom level. http://js.cytoscape.org/#cy.maxZoom
Parameters
- zoom: number
  The new maximum zoom level to use.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:917

minZoom

minZoom(): number
Get the minimum zoom level. http://js.cytoscape.org/#cy.minZoom

Returns number
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:897
minZoom(zoom): this
Set the minimum zoom level. http://js.cytoscape.org/#cy.minZoom
Parameters
- zoom: number
  The new minimum zoom level to use.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:904

pan

pan(): Position
Get the panning position of the graph. http://js.cytoscape.org/#cy.pan

Returns Position
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:809
pan(renderedPosition?): this
Set the panning position of the graph. http://js.cytoscape.org/#cy.pan
Parameters
- OptionalrenderedPosition: Position
  The rendered position to pan the graph to.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:817

panBy

panBy(renderedPosition): this
Relatively pan the graph by a specified rendered position vector. http://js.cytoscape.org/#cy.panBy
Parameters
- renderedPosition: Position
  The rendered position vector to pan the graph by.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:825

panningEnabled

panningEnabled(): boolean
Get whether panning is enabled. If cy.boxSelectionEnabled() === true, then the user must taphold to initiate panning. http://js.cytoscape.org/#cy.panningEnabled

Returns boolean
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:833
panningEnabled(bool?): this
Set whether panning is enabled. If cy.boxSelectionEnabled() === true, then the user must taphold to initiate panning. http://js.cytoscape.org/#cy.panningEnabled
Parameters
- Optionalbool: boolean
  A truthy value enables panning; a falsey value disables it.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:841

reset

reset(): this
Reset the graph to the default zoom level and panning position. http://js.cytoscape.org/#cy.reset

Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:803

resize

resize(): this
Force the renderer to recalculate the viewport bounds.

If your code resizes the graph's dimensions or position (i.e. by changing the style of the HTML DOM element that holds the graph), you will want to call cy.resize() to have the graph resize and redraw itself.

Cytoscape.js can not automatically monitor the bounding box of the viewport, as querying the DOM for those dimensions can be expensive. Although cy.resize() is automatically called for you on the window's resize event, there is no resize or style event for arbitrary DOM elements. http://js.cytoscape.org/#cy.resize

Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:1052

selectionType

selectionType(): SelectionType
Get the selection type. http://js.cytoscape.org/#cy.selectionType

Returns SelectionType
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:948
selectionType(type): this
Set the selection type. http://js.cytoscape.org/#cy.selectionType
Parameters
- type: SelectionType
  The selection type string; one of 'single' (default) or 'additive'.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:955

userPanningEnabled

userPanningEnabled(): boolean
Get whether panning by user events (e.g. dragging the graph background) is enabled. If cy.boxSelectionEnabled() === true, then the user must taphold to initiate panning. http://js.cytoscape.org/#cy.userPanningEnabled

Returns boolean
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:847
userPanningEnabled(bool?): this
Set whether panning by user events (e.g. dragging the graph background) is enabled. If cy.boxSelectionEnabled() === true, then the user must taphold to initiate panning. http://js.cytoscape.org/#cy.userPanningEnabled
Parameters
- Optionalbool: boolean
  A truthy value enables user panning; a falsey value disables it.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:855

userZoomingEnabled

userZoomingEnabled(): boolean
Get whether zooming by user events (e.g. mouse wheel, pinch-to-zoom) is enabled. http://js.cytoscape.org/#cy.userZoomingEnabled

Returns boolean
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:883
userZoomingEnabled(bool?): this
Get or set whether zooming by user events get if no parameter provided (e.g. mouse wheel, pinch-to-zoom) is enabled. http://js.cytoscape.org/#cy.userZoomingEnabled
Parameters
- Optionalbool: boolean
  A truthy value enables user zooming; a falsey value disables it.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:891

viewport

viewport(options): this
Set the viewport state (pan & zoom) in one call. http://js.cytoscape.org/#cy.viewport
Parameters
- options: {
  pan: Position;
  zoom: number;
  }
  The viewport options.
  - pan: Position
    The pan to set (a rendered position).
  - zoom: number
    The zoom level to set.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:927

width

width(): number
Get the on-screen width of the viewport in pixels. http://js.cytoscape.org/#cy.width

Returns number
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:961

zoom

zoom(): number
Get the zoom level. http://js.cytoscape.org/#cy.zoom

Returns number
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:860
zoom(level?): this
Set the zoom level. http://js.cytoscape.org/#cy.zoom
Parameters
- Optionallevel: ZoomOptions
  The zoom level to set.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:868

zoomingEnabled

zoomingEnabled(bool?): this
Set or get whether zooming is enabled. Get if no parameter provided. http://js.cytoscape.org/#cy.zoomingEnabled
Parameters
- Optionalbool: boolean
  A truthy value enables zooming; a falsey value disables it.
Returns this
- Defined in lara-framework/Lara-JS/src-api/libs/cytoscape-3.26.0.d.ts:876

Interface CoreViewportManipulation

Hierarchy (view full)

Index

Methods

Methods

autolock

Returns boolean

Parameters

Returns this

autoungrabify

Returns boolean

Parameters

Returns this

autounselectify

Returns boolean

Parameters

Returns this

boxSelectionEnabled

Returns boolean

Parameters

Returns this

center

Parameters

Returns this

centre

Parameters

Returns this

container

Returns null | HTMLElement

extent

Returns { h: number; w: number; x1: number; x2: number; y1: number; y2: number; }

h: number

w: number

x1: number

x2: number

y1: number

y2: number

fit

Parameters

Returns this

forceRender

Returns this

height

Returns number

invalidateDimensions

Returns this

maxZoom

Returns number

Parameters

Returns this

minZoom

Returns number

Parameters

Returns this

pan

Returns Position

Parameters

Returns this

panBy

Parameters

Returns this

panningEnabled

Returns boolean

Parameters

Returns this

reset

Returns this

resize

Returns this

selectionType

Returns SelectionType

Parameters

Returns this

userPanningEnabled

Returns boolean

Parameters

Returns this

userZoomingEnabled

Returns boolean

Parameters

Returns {
h: number;
w: number;
x1: number;
x2: number;
y1: number;
y2: number;
}