Surface

Returns

void

alignContentLeft()

alignContentLeft(options?): void

Pan the canvas to align the content such that the left edge of the leftmost element is at the left of the viewport.

Parameters

options?

Returns

void

alignContentRight()

alignContentRight(options?): void

Pan the canvas to align the content such that the right edge of the rightmost element is at the right of the viewport.

Parameters

options?

Returns

void

alignContentTop()

alignContentTop(options?): void

Pan the canvas to align the content such that the top edge of the topmost element is at the top of the viewport.

Parameters

options?

BrowserUI.autoSizeGroup

Returns

void

attachMiniview()

attachMiniview(options): void

Attach a miniview to this Surface. This is a shortcut for adding one via addPlugin.

Parameters

options

MiniviewPluginOptions

Returns

void

autoSizeGroup()

autoSizeGroup(group, force?): GroupResizeResult<BrowserElement>

Run the group auto size routine on a given group (as well as any ancestor groups), and moves elements around as necessary

Parameters

group

Group

The group to auto size

force?

boolean

If true, this flag will override an autoSize:false directive on the Group (and any ancestors).

Returns

GroupResizeResult<BrowserElement>

Implementation of

SupportsElementDragging.autoSizeGroup

Inherited from

autoSizeGroups()

autoSizeGroups(groups?, force?): Record<string, GroupResizeResult<EL>>

Update the size of the given list of groups so that its content area encompasses all of the child elements of the group, unless force is not specified and a specific group has autoSize set to false.

Parameters

groups?

Group[]

Groups to size. If null, every group is auto sized.

force?

boolean

If true, this flag will override an autoSize:false directive on the Group (and any ancestors)

Returns

Record<string, GroupResizeResult<EL>>

Inherited from

BrowserUI.autoSizeGroups

batch()

batch(fn): void

Wraps the underlying model's batch function with the added step of first suspending events being fired from this renderer.

Parameters

fn

() => any

Function to run while rendering and events are both suspended.

Returns

void

Inherited from

BrowserUI.batch

bind()

bind<T>(event, listener, insertAtStart?): EventGenerator

Bind a listener to the named event, optionally inserting the listener at the head of the queue for the given event.

Type Parameters

T

T = any

The type of the payload you expect to be passed to your callback. Using this is helpful to ensure your callbacks are typed correctly.

Parameters

event

Name of the event to bind

listener

(payload, evt?) => any

Function to bind to the event

insertAtStart?

boolean

Defaults to false. If true, this handler is inserted at the head of the list of listeners for the given event.

Returns

EventGenerator

Inherited from

BrowserUI.bind

bindAll()

bindAll<T>(events, listener, insertAtStart?): EventGenerator

Bind a listener to all of the named events, optionally inserting each one at the head of the queue for the given event.

Type Parameters

T

T = any

The type of the payload you expect to be passed to your callback. Using this is helpful to ensure your callbacks are typed correctly.

Parameters

events

listener

(payload, evt?) => any

insertAtStart?

boolean

Returns

EventGenerator

Inherited from

BrowserUI.bindAll

bindModelEvent()

bindModelEvent<T>(event, selector, callback): void

Binds to a mouse event occurring on a given model object. This is a wrapper around the on event binding method, which searches for an associated model object for the given event. For instance, you might have a node template that has a button inside of it that you want to respond to. When the button is clicked you want to know the node associated with the button. This method provides that. It is possible to find the associated model object yourself, via the getObjectInfo method of the Surface, called with the event's target, but this method does that for you.

You can, optionally, provide a type hint to this method in order to fix the type of the returned model object, but note that this is erased at runtime and the type of the returned object is not guaranteed by the surface.

This method binds a delegated event handler on the container element used by the surface. You do not need to provide an element to which to bind; you just need to provide an appropriate selector

Type Parameters

T

T extends Node | Edge | Group | Vertex | Port

Parameters

event

string

Name of the event to bind to.

selector

string

CSS3 selector that identifies children of a vertex DOM element on which the event handler should be bound.

callback

ModelEventCallback<T>

Function to call when the event is fired.

Returns

void

bindUnchecked()

bindUnchecked<T>(event, listener, insertAtStart?): EventGenerator

Bind an event listener. This method can be used with a type parameter by call sites; although it's not necessary it can be helpful to use this to ensure you've thought about what the payload to your event handler is going to be.

Type Parameters

T

T = any

The type of the payload you expect to be passed to your callback. Using this is helpful to ensure your callbacks are typed correctly.

Parameters

event

string

Name of the event(s) to bind to.

listener

(a, e?) => any

Function to bind to the given event(s)

insertAtStart?

boolean

Whether or not to insert this listener at the head of the listener queue. Defaults to false.

Returns

EventGenerator

Inherited from

BrowserUI.bindUnchecked

centerBackground()

centerBackground(params): void

Position the surface so the background is centered in the viewport, without changing the current zoom.

Parameters

params

doNotAnimate?

boolean

If true, centering content will not use animation.

onComplete?

(p) => any

Optional function to call on operation complete (centering may be animated).

Returns

void

centerContent()

centerContent(options?): void

Centers the tracked content inside the viewport, but does not adjust the current zoom (so the content may still extend past the viewport bounds)

Parameters

options?

CenterContentOptions

Method parameters.

Returns

void

Canvas Positioning

centerContentHorizontally()

centerContentHorizontally(options?): void

Centers the tracked content horizontally inside the viewport, but does not adjust the current zoom (so the content may still extend past the viewport bounds)

Parameters

options?

CenterContentHorizontallyOptions

Method parameters.

Returns

void

Canvas Positioning

centerContentVertically()

centerContentVertically(options?): void

Centers the tracked content vertically inside the viewport, but does not adjust the current zoom (so the content may still extend past the viewport bounds)

Parameters

options?

CenterContentVerticallyOptions

Method parameters.

Returns

void

Canvas Positioning

centerOn()

centerOn(element, doNotAnimate?): void

Takes a single node/group, or an array of nodes/groups, and positions the surface canvas such that the given vertex/vertices is/are at the center in both axes. It does NOT change the zoom.

Parameters

element

The element(s) to center. Can be a DOM element, vertex id, or a Node/Group, or an array of these.

doNotAnimate?

boolean

Returns

void

Canvas Position

Implementation of

SupportsViewportManipulation.centerOn

centerOnAndZoom()

centerOnAndZoom(element, fillRatio?, doNotAnimate?): void

Center on the current object/objects and zoom in on it/them.

Parameters

element

The element(s) to center. Can be a DOM element, vertex id, or a Node/Group, or an array of these.

fillRatio?

number

How much of the viewport to fill with the object we zoom in on. This will be limited by the current zoom range. Defaults to 0.6.

doNotAnimate?

boolean

by default, this operation will be animated.

Returns

void

Canvas Position

Implementation of

SupportsViewportManipulation.centerOnAndZoom

centerOnHorizontally()

centerOnHorizontally(element): void

Takes a node/group as argument and positions the surface canvas such that the given node is at the center in the horizontal axis.

Parameters

element

The element to center. Can be a DOM element, vertex id, or a Node/Group

string | Element | Vertex

Returns

void

Canvas Position

centerOnVertically()

centerOnVertically(element): void

Takes a node/group as argument and positions the surface canvas such that the given node is at the center in the vertical axis.

Parameters

element

The element to center. Can be a DOM element, vertex id, or a Node/Group

string | Element | Vertex

Returns

void

Canvas Position

clearDragGroup()

clearDragGroup(name): void

Removes all members from the drag group with the given name.

Parameters

name

string

Returns

void

clearPathEdits()

clearPathEdits(edgeOrConnection): boolean

Clear the edits for the given connection, returning its path to the automatically computed path.

Parameters

edgeOrConnection

string | Edge | Connection<BrowserElement>

Returns

boolean

Implementation of

SupportsPathEditing.clearPathEdits

cloneVertex()

cloneVertex(vertex, options?): Node | Group

Clones the given vertex. NOTE: this does not clone the children of a group. Only the group will be cloned, and it will be empty.

Parameters

vertex

string | Element | Node | Group

options?

SurfaceVertexCloneOptions

Optional position to use for the new vertex. May be null.

Returns

Node | Group

Overrides

BrowserUI.cloneVertex

collapseGroup()

collapseGroup(groupIdOrGroup): void

Collapse the given group, hiding all of its internal edges and proxying any edges to internal members to the collapsed element (unless the group definition for this group specifies proxied:false). Every edge with a source/target that is a descendant of this group is a candidate for proxying.

Parameters

groupIdOrGroup

string | Group

Returns

void

Inherited from

BrowserUI.collapseGroup

destroy()

destroy(): void

Cleans up the Surface. When using a library integration such as Angular/React/Vue/Svelte, this method will be called automatically when the associated component is unloaded. If you're using vanilla VisaullyJs, you might want to call this method if you're cleaning up your UI and you don't need this Surface any longer.

Returns

void

Overrides

BrowserUI.destroy

expandGroup()

expandGroup(groupIdOrGroup): void

Expand a collapsed group, unproxying any connections from the collapsed group to their original destination

Parameters

groupIdOrGroup

string | Group

Returns

void

Inherited from

BrowserUI.expandGroup

findEnclosedVertices()

findEnclosedVertices(options): IntersectingVertex<BrowserElement>[]

Finds all of the vertices that are enclosed by the rectangle described by origin and dimensions.

Parameters

options

EnclosedVerticesOptions

Options for the find operation.

Returns

IntersectingVertex<BrowserElement>[]

Inherited from

BrowserUI.findEnclosedVertices

findIntersectingVertices()

findIntersectingVertices(options): IntersectingVertex<BrowserElement>[]

Finds all of the vertices that intersect the rectangle described by origin and dimensions.

Parameters

options

IntersectingVerticesOptions

Options for the find operation.

Returns

IntersectingVertex<BrowserElement>[]

Inherited from

BrowserUI.findIntersectingVertices

fixElement()

fixElement(el, pos, constraints?, id?, onTop?): FixedElement

Appends an element to the viewport such that it is zoomed with everything else, but constrains placement in one or both axes so that the element remains fixed with respect to the viewport origin as the canvas pans and/or zooms. Note that this method will set position:absolute on the element you are fixing, because otherwise it would mess up the placement of the other content on the canvas. If you subsequently unfix an element, the UI does not remove the position:absolute style.

Parameters

el

The BrowserElement to append.

pos

FixedElementConstraints

Location of the element's origin.

constraints?

Flags to indicate optional constraint to each axis.

id?

string

Optional ID to assign to the element, for future retrieval

onTop?

boolean

Returns

FixedElement

flashSelection()

flashSelection(sel, duration, animName): void

Flash the nodes and groups in the given selection.

Parameters

sel

VisuallyJsSelection

Selection to flash nodes and groups for

duration

number = 1000

Optional; defaults to 1000ms. Duration of the animation, in milliseconds.

animName

string

Optional; the name of the CSS animation to apply. Defaults to ANIM_SURFACE_ELEMENT_FLASH.

Returns

void

Inherited from

BrowserUI.flashSelection

flashVertex()

flashVertex(vertices, duration, animName): void

Flash the given vertex or vertices.

Parameters

vertices

Either a vertex, a vertex id, or an element, or an array of any of these.

duration

number = 1000

Optional; defaults to 1000ms. Duration of the animation in milliseconds.

animName

string = ANIM_SURFACE_ELEMENT_FLASH

Optional; the name of the CSS animation to apply. Defaults to ANIM_SURFACE_ELEMENT_FLASH.

Returns

void

Inherited from

BrowserUI.flashVertex

floatElement()

floatElement(el, pos): void

Appends an element to the viewport so that it floats above the content that is being zoomed and panned. The element will have position:absolute set on it. You can float any element you like, but note that the responsibility for setting an appropriate z index is yours.

Parameters

el

Element to float.

pos

Position to float the element at. This is in page coordinates, ie. it ignores the pan/zoom of the surface, and defines a position relative to the viewport's top/left corner.

Returns

void

fromPageLocation()

fromPageLocation(left, top, roundValues?): PointXY

Maps the given page location to a value relative to the canvas origin, allowing for zoom and pan of the canvas. This takes into account the offset of the canvas in the page so that what you get back is the mapped position relative to the target element's [left,top] corner

Parameters

left

number

X location

top

number

Y location

roundValues?

boolean

If true, the location is returned as integers for x/y.

Returns

BrowserUI.fromPageLocation

The mapped location, as a PointXY object.

Overrides

fromWindowLocation()

fromWindowLocation(left, top, roundValues?): PointXY

Maps the given window location to a value relative to the canvas origin. The window means the browser's visible window, and is not the same as the page, because of scroll.

Parameters

left

number

top

number

roundValues?

boolean

Returns

BrowserUI.fromWindowLocation

Overrides

gather()

gather(focus?): void

Gather the elements in the display. If focus is provided the elements will be gathered around it. Otherwise, the elements will be gathered around the computed center of all the elements.

Parameters

focus?

Optional ID of a Vertex, or the Vertex itself, around which to gather elements.

string | Vertex

Returns

void

Magnetizer

Inherited from

BrowserUI.gather

getDecorator()

getDecorator<T>(id): T

Gets the decorator with the given id, or null if not found.

Type Parameters

T

T extends Decorator = Decorator

Parameters

id

string

Returns

T

getEffectiveVisibleZoom()

getEffectiveVisibleZoom(): number

Gets the zoom as seen by the user, which is a function of the zoom of this surface and of any parent surface, plus any other scale transforms that may be in place in the DOM.

Returns

number

Implementation of

SupportsElementDragging.getEffectiveVisibleZoom

Overrides

BrowserUI.getEffectiveVisibleZoom

getElementFromEvent()

getElementFromEvent(e): ViewportElement<BrowserElement>

Get the model object + DOM element on which the given event occurred.

Parameters

e

MouseEvent

Returns

ViewportElement<BrowserElement>

Inherited from

BrowserUI.getElementFromEvent

getGrid()

getGrid(): Grid

Get the grid for this instance. May be null.

Returns

BrowserUI.getGroupContentExtents

Inherited from

BrowserUI.getGrid

getGroupContentExtents()

getGroupContentExtents(group, relativeToCanvasOrigin?): Extents

Compute the extents of all the child members of the given group, by default with respect to the group's origin, which effectively gives you the internal size required by the group, or, if you set relativeToCanvasOrigin, with respect to the canvas origin.

Parameters

group

Group

The group to find extents for

relativeToCanvasOrigin?

boolean

Defaults to false.

Returns

Extents

Inherited from

getLabelLocationAttribute()

getLabelLocationAttribute(edge): string

Gets the name of the attribute that is used to determine the label for the given edge.

Parameters

edge

Edge

Returns

string

Inherited from

BrowserUI.getLabelLocationAttribute

getLayout()

getLayout(): AbstractLayout<any>

Gets the Layout this surface is currently using.

Returns

AbstractLayout<any>

Inherited from

BrowserUI.getLayout

getModelPositionAttributes()

getModelPositionAttributes(): object

Returns the names of the attributes used to store positioning information in the model. Mostly an internal method but exposed in case it proves useful to someone.

Returns

object

x

x: string

y

y: string

Inherited from

BrowserUI.getModelPositionAttributes

getObjectInfo()

getObjectInfo<V>(obj, createMissingPorts): UIObjectInfo<V, BrowserElement>

Decodes the given input into a data structure containing a model object, its type, its ID, and the element used to represent it. Always returns a value even if no model object could be resolved for the given input, because in some circumstances the given input represents an element from the UI that is not in the model (such as when dragging a new edge)

Type Parameters

V

V extends Base

The type of object you're expecting back from the method. This is for convenience, so that the obj member of the return value is typed conveniently for what you want to do with it.

Parameters

obj

Object to decode. Can be in many different forms - an existing model object, a vertex id, an element, a Connection, some backing data.

string | Base | ObjectData | BrowserElement | Connection<BrowserElement>

createMissingPorts

boolean

Returns

UIObjectInfo<V, BrowserElement>

Inherited from

BrowserUI.getObjectInfo

getPan()

getPan(): PointXY

Gets the current origin of the panned content.

Returns

Connection<BrowserElement>

Position, in pixels, of the panned content, where 0,0 is the origin of the viewport.

getPath()

getPath(params): UIPath

Gets a Path from some source Vertex to some target Vertex. This method is a wrapper around the model's getPath method, adding a few ui specific functions to the result.

Parameters

params

PathOptions

Path spec params

Returns

UIPath

A Path object. Even if no path exists you will get a return value - but it will just be empty.

getPlugin()

getPlugin<P>(pluginType): P

Gets the plugin registered for the given type, null if nothing matching found.

Type Parameters

P

P extends UIPlugin<BrowserElement, any, any>

Parameters

pluginType

string

Returns

P

Inherited from

BrowserUI.getPlugin

getRenderedConnection()

getRenderedConnection(edgeId): Connection<BrowserElement>

Gets the underlying connection that was rendered for the Edge with the given id.

Parameters

edgeId

string

ID of the Edge to retrieve the Connection for.

Returns

A Connection, null if not found.

Inherited from

BrowserUI.getRenderedConnection

getRenderedElement()

getRenderedElement(obj): BrowserElement

For some node/group, get the element that was used to render it.

Parameters

obj

string | Base

Returns

BrowserUI.getRenderedElement

Inherited from

getRenderedPort()

getRenderedPort(portIdOrPort): BrowserElement

Gets the DOM node that was rendered for the Port with the given id (does not retrieve vjs-endpoint elements)

Parameters

portIdOrPort

Either the port, or the id of the port for which to retrieve the rendered element. Note that you must supply a "full" id here, that is in dotted notation with the id of the Node/Group on which the port resides.

string | Port

Returns

BrowserUI.getRenderedPort

DOM element for the given Port, null if not found.

Inherited from

getViewportBoundsInfo()

getViewportBoundsInfo(): ViewportBounds

Gets the current bounds information.

Returns

ViewportBounds

Overrides

BrowserUI.getViewportBoundsInfo

getZoom()

getZoom(): number

Gets the current zoom.

Returns

number

Current zoom value

Implementation of

SupportsElementDragging.getZoom

Overrides

BrowserUI.getZoom

getZoomRange()

getZoomRange(): ZoomRange

Gets the current zoom range.

Returns

ZoomRange

Array of [min, max] current zoom values.

Tags

zoom

hasClass()

hasClass(el, clazz): boolean

Returns whether the DOM element represented by el - which can be an Edge, Connection, Node, Group, DOM element, or ID of some model object - has the given class.

Parameters

el

SupportsClassManipulationElement

clazz

string

Returns

boolean

Inherited from

BrowserUI.hasClass

isDraggable()

isDraggable(el): boolean

Helper method to get the draggable state of some element. Under the hood all this does is check for the existence of the data-vjs-not-draggable attribute.

Parameters

el

BrowserUI.isDraggable

Element to get draggable state for.

Returns

boolean

Implementation of

SupportsElementDragging.isDraggable

Inherited from

isInViewport()

isInViewport(x, y): boolean

Returns whether or not the given point (relative to page origin) is within the viewport for the widget.

Parameters

x

number

X location of point to test

y

number

Y location of point to test

Returns

boolean

true if the point is within the viewport, false if not.

isPageLocationInViewport()

isPageLocationInViewport(x, y): boolean

Returns whether or not the given point (relative to page origin) is within the viewport for the widget.

Parameters

x

number

X location of point to test

y

number

Y location of point to test

Returns

boolean

True if the point is within the viewport, false if not.

isVisible()

isVisible(obj): any

Returns whether or not the given model object is visible.

Parameters

obj

Base

Returns

any

Inherited from

BrowserUI.isVisible

load()

load(data, onload?): void

Load the dataset and the current state of the Surface - its pan and zoom settings, as well as data for any registered data hooks.

Parameters

data

SurfaceSaveData

onload?

Function

Optional function to invoke after load.

Returns

void

Tags

input/output

Overrides

BrowserUI.load

lockGroup()

lockGroup(groupIdOrGroup): void

Mark a group as "locked" : edges inside of it cannot be detached, removed or have their paths edited, edges cannot be established to child vertices.

Parameters

groupIdOrGroup

string | Group

Returns

void

Inherited from

BrowserUI.lockGroup

magnetize()

magnetize(focus?, repositionFocus?): void

Magnetize the elements in the display. If focus is provided it will be used as the origin for magnetization, and not moved (unless repositionFocus is true). If no focus is provided, the computed center of all the elements will be used as the origin.

Parameters

focus?

string | Vertex

repositionFocus?

boolean

Returns

void

Inherited from

BrowserUI.magnetize

magnetizeAtEvent()

magnetizeAtEvent(event): void

Magnetize the elements in the display, using the location of the given MouseEvent as the origin.

Parameters

event

MouseEvent

Returns

void

Magnetizer

magnetizeAtPoint()

magnetizeAtPoint(origin): void

Magnetize the elements in the display, using the given point as the origin.

Parameters

origin

BrowserUI.magnetizeAtPoint

Returns

void

Tags

magnetizer,foo

Inherited from

mapEventLocation()

mapEventLocation(event): PointXY

Maps the location of the given event on the page onto the coordinate space of this widget, returning a value representing where the given event appears to be with respect to the origin of the Surface's viewport.

Parameters

event

MouseEvent

Returns

BrowserUI.mapEventLocation

Overrides

nudgeZoom()

nudgeZoom(delta, e?): number

Nudges the zoom by the given amount. Zoom will be clamped to the current zoom range in effect and the value that was ultimately set is returned from this function. The value you pass in here is multiplied by 100 to give a percentage value: 1 is 100%, for instance, 0.05 is 5%.

Parameters

delta

number

Amount to change zoom by.

e?

any

Original event that caused the nudge. May be null.

Returns

number

The zoom that was set. Zoom will be clamped to the allowed range.

Tags

zoom

off()

off(el, event, callback): Surface

Remove an event binding from the given element or elements.

Parameters

el

Element, or elements, from which to remove the event binding.

Document | BrowserElement | NodeListOf<BrowserElement>

event

string

Name of the event to unbind.

callback

Function

The function you wish to unbind.

Returns

Surface

Inherited from

BrowserUI.off

on()

on(el, event, callbackOrSelector, callback?): Surface

Bind an event listener to the given element or elements.

Parameters

el

Element, or elements, to bind the event listener to.

Document | BrowserElement | NodeListOf<BrowserElement>

event

string

Name of the event to bind to.

callbackOrSelector

Either a callback function, or a CSS 3 selector. When this is a selector the event listener is bound as a "delegate", ie. the event listeners listens to events on children of the given el that match the selector.

string | Function

callback?

Function

Callback function for event. Only supplied when you're binding a delegated event handler.

Returns

Surface

Inherited from

BrowserUI.on

pan()

pan(dx, dy, doNotAnimate?): void

Pans the canvas by a given amount in X and Y.

Parameters

dx

number

Amount to pan in X direction

dy

number

Amount to pan in Y direction

doNotAnimate?

boolean

By default this operation uses animation.

Returns

void

refresh()

refresh(doNotRepaintConnections?): void

Refreshes the layout. For some layouts this is the same as a full relayout.

Parameters

doNotRepaintConnections?

boolean

Returns

void

Inherited from

BrowserUI.refresh

registerDataHook()

registerDataHook(hook): void

Register a DataHook - a pair of functions that are invoked during a load and a save. This mechanism is a means you can use for storing/retrieving custom data from the payload the UI exports: in the save method you can decorate the data provided to you with anything you like, but you must ensure that it is serializable, ie. it must be pure data. In your load method you can read out this data and take appropriate action.

Parameters

hook

DataHook

Returns

void

Tags

input/output

Inherited from

BrowserUI.registerDataHook

registerTag()

registerTag(tagName, handlers): void

Parameters

tagName

string

handlers

CustomTagOptions

Returns

void

Inherited from

BrowserUI.registerTag

relayout()

relayout(newParameters?, doNotRepaintConnections?): void

Runs a relayout of all vertices in the canvas, and of each group.

Parameters

newParameters?

any

doNotRepaintConnections?

boolean

Returns

void

Inherited from

BrowserUI.relayout

relayoutGroup()

relayoutGroup(groupOrId, reason?): void

Relayout the given group.

Parameters

groupOrId

The group - or the ID of the group - to relayout.

string | Group

reason?

GroupRelayoutReason

Returns

void

Inherited from

BrowserUI.relayoutGroup

reload()

reload(): void

When the UI is rendering a Selection, this method triggers a reload on the selection, causing the UI to be cleared and recreated.

Returns

void

Inherited from

BrowserUI.reload

removeClass()

removeClass(el, clazz): void

Removes a class from the DOM element represented by el, which can be a Selection, or an instance of many different types - see the SupportsClassManipulation interface for a complete list.

Parameters

el

VisuallyJsSelection | SupportsClassManipulation

clazz

string

Returns

void

Inherited from

BrowserUI.removeClass

removeDragClassnameFilter()

removeDragClassnameFilter(clazz): void

Removes a CSS class filter from the drag handler.

Parameters

clazz

Either a single class name, or a comma separated list of classnames, or an array of classnames.

string | string[]

Returns

void

removeFromDragGroup()

removeFromDragGroup(...els): void

Removes the given element(s) from any drag group they may be in. You don't need to supply the drag group id, as elements can only be in one drag group anyway.

Parameters

els

...(string | Node | Group | BrowserElement)[]

Elements to remove from drag groups.

Returns

void

repaintEdge()

repaintEdge(edge): void

Repaint this edge.

Parameters

edge

Edge

Returns

void

Inherited from

BrowserUI.repaintEdge

repaintEdges()

repaintEdges(edges): void

Repaint this set of edges.

Parameters

edges

Edge[]

Returns

void

Inherited from

BrowserUI.repaintEdges

repaintEverything()

repaintEverything(doNotRefreshElements?): void

Repaint every connection in the instance.

Parameters

doNotRefreshElements?

boolean

Returns

void

Inherited from

BrowserUI.repaintEverything

reset()

reset(): void

Clears all connections and managed elements from the instance of the UI. Does not also clear out event listeners, selectors, or connection types - for that, use destroy().

Returns

void

Inherited from

BrowserUI.reset

rotate()

rotate(obj, amountInDegrees): void

Rotate the given vertex by the given number of degrees. The UI element representing the vertex is rotated and the view is updated, and an event is pushed to the undo stack.

Parameters

obj

Either a vertex ID, or a Node/Group

string | Vertex

amountInDegrees

number

Amount - in degrees - to rotate.

Returns

void

Inherited from

BrowserUI.rotate

save()

save(options?): SurfaceSaveData

Save the dataset and the current state of the Surface - its pan and zoom settings, as well as data for any registered data hooks.

Parameters

options?

UIExportOptions

Returns

SurfaceSaveData

Tags

input/output

Overrides

BrowserUI.save

saveToUrl()

saveToUrl(options): void

Saves the return value of this object's save method via ajax POST to a given URL.

Parameters

options

SaveOptions

Save options

Returns

void

Tags

input/output

Inherited from

BrowserUI.saveToUrl

setApparentCanvasLocation()

setApparentCanvasLocation(left, top): PointXY

Sets the apparent canvas location - see the notes for getApparentCanvasLocation.

Parameters

left

number

Value in pixels for left edge of canvas.

top

number

Value in pixels for top edge of canvas.

Returns

BrowserUI.setDraggable

Location of the actual origin set, after clamping.

setClamping()

setClamping(clamping): void

Sets whether or not the widget clamps the movement of the canvas during pan/zoom to ensure that the managed content never disappears from view.

Parameters

clamping

boolean

Whether or not to clamp movement.

Returns

void

setDraggable()

setDraggable(element, draggable): void

Sets whether or not the given element, or element representing the given vertex, is draggable.

Parameters

element

Vertex id, vertex, or DOM element

string | Vertex | BrowserElement

draggable

boolean

Returns

void

Inherited from

setDragGroupState()

setDragGroupState(state, ...els): void

Sets the active/passive state for the given element(s) in their respective drag groups (if any). You don't need to supply the drag group id, as elements can only be in one drag group anyway.

Parameters

state

boolean

true for active, false for passive.

els

...(string | Node | Group | BrowserElement)[]

Returns

void

setEnabled()

setEnabled(v, state): boolean

Sets whether the given vertex is enabled for connection drag/drop.

Parameters

v

Vertex

The vertex to set enabled state for.

state

boolean

Returns

boolean

Inherited from

BrowserUI.setEnabled

setGrid()

setGrid(grid): void

Sets the current grid for element dragging, magnetization and group sizing.

Parameters

grid

BrowserUI.setMagnetizedPosition

Grid to use. If you provide null as the value the grid will be cleared.

Returns

void

Inherited from

BrowserUI.setGrid

setLayout()

setLayout<LP>(layoutParams, doNotRefresh?): void

Apply the given layout to the viewport, by default refreshing the viewport afterwards.

Type Parameters

LP

LP extends LayoutParameters

Parameters

layoutParams

Spec for the layout to set.

options?

LP

type

string

doNotRefresh?

boolean

Defaults to true. Whether or not to repaint the UI after setting the layout.

Returns

void

Inherited from

BrowserUI.setLayout

setMagnetizedPosition()

setMagnetizedPosition(vertex, x, y): void

Sets the position of the given node/group and runs the magnetizer, updating the UI and storing results in the model. This operation is wrapped in a transaction so if undo is called then every element affected by the magnetize is relocated.

Parameters

vertex

string | Node | Group | BrowserElement

x

number

y

number

Returns

void

Magnetizer

Inherited from

setMode()

setMode(mode, doNotClearSelection?): void

Sets the current mode for the surface.

Parameters

mode

SurfaceMode

doNotClearSelection?

boolean

Defaults to false - when true, a mode change will not first cause the selection in the underlying model to be cleared.

Returns

void

Overrides

BrowserUI.setMode

setOverlayVisible()

setOverlayVisible(o, visible): void

Sets the visibility of some overlay.

Parameters

o

Overlay<BrowserElement>

Overlay to hide or show

visible

boolean

If true, make the overlay visible, if false, make the overlay invisible.

Returns

void

Inherited from

BrowserUI.setOverlayVisible

setPan()

setPan(left, top, animate?, onComplete?): void

Sets the position of the panned content's origin.

Parameters

left

number

Position in pixels of the left edge of the panned content.

top

number

Position in pixels of the top edge of the panned content.

animate?

boolean

Whether or not to animate the pan. Defaults to false.

onComplete?

(p) => any

If animate is set to true, an optional callback for the end of the pan

Returns

void

Implementation of

SupportsViewportManipulation.setPan

setPanAndZoom()

setPanAndZoom(x, y, zoom, animate?): void

Sets the pan and zoom for the Surface in one pass.

Parameters

x

number

Value for pan in x axis

y

number

Value for pan in Y axis

zoom

number

Value fo zoom

animate?

boolean

Defaults to false. If true, the changes will be made with the widget animating.

Returns

void

setPosition()

setPosition(vertex, x, y, magnetize?, force?): void

Sets the position of some vertex and updates the model. This method will honour any grid that is currently in effect.

Parameters

vertex

Node/group id, or some node/group, or the element representing some node/group.

string | Node | Group | BrowserElement

x

number

X position, in canvas coordinates, to set.

y

number

Y position, in canvas coordinates, to set.

magnetize?

boolean

Whether or not to apply the magnetizer to move other vertices out of this vertex's way.

force?

boolean

Used in conjunction with magnetize. When null, or true, the element is positioned where requested and other elements move. When false, the element is positioned as close to the requested position as possible, without moving any other elements.

Returns

void

Inherited from

BrowserUI.setPosition

setSize()

setSize(obj, width, height): void

Sets the width and height of the given vertex, updating the UI and the model, and adding an event to the undo stack. NOTE this method may not have entirely the effect you want unless you have useModelForSizes set in the constructor options for this UI instance.

Parameters

obj

string | Vertex

width

number

height

number

Returns

void

Inherited from

BrowserUI.setSize

setSuspendRendering()

setSuspendRendering(val, thenRefresh?): void

Sets whether rendering is suspended or not.

Parameters

val

boolean

thenRefresh?

boolean

If true, the surface will refresh after the change in state.

Returns

void

Inherited from

BrowserUI.setSuspendRendering

setViewportCenter()

setViewportCenter(xy): void

Sets the location of the canvas such that the given point appears at the center of the viewport.

Parameters

xy

location of the point on the canvas to position in the center of the viewport.

Returns

void

setVisible()

setVisible(obj, state, doNotCascade?): void

Sets the visible state of some model object or group of model objects. If the object is a vertex, the visible state will be applied to all edges connected to the given vertex.

By default this method will, for groups and nodes, cascade down to any nested vertices.

Parameters

obj

Edge, Group, Node or Port, and array of these, or a FilterableDataset, such as a Selection.

state

boolean

True if edges should be visible, false otherwise.

doNotCascade?

boolean

Defaults to false. If true, don't cascade down to any nested vertices.

Returns

void

Inherited from

BrowserUI.setVisible

setZoom()

setZoom(zoom, animate?): number

Sets the current zoom, clamping it to the allowed range. Returns the new zoom level - which may or may not be the value you asked for, as it might have been clamped to the current allowed zoom range.

Parameters

zoom

number

Zoom value. If this is outside the allowed bounds it will be clamped.

animate?

boolean

If true, the surface will animate the transition in zoom by stepping through several intermediate levels in succession.

Returns

number

Current zoom. This may or may not be the value you asked for - it might have been clamped to the current allowed zoom range.

Tags

zoom

Implementation of

SupportsViewportManipulation.setZoom

Overrides

BrowserUI.setZoom

setZoomRange()

setZoomRange(zr, doNotClamp?): ZoomRange

Sets the current zoom range. By default, this method checks if the current zoom is within the new range, and if it is not then setZoom is called, which will cause the zoom to be clamped to an allowed value in the new range. You can disable this by passing true for doNotClamp.

Parameters

zr

ZoomRange

New range, as an array consisting of [lower, upper] values. Lower must be less than upper.

doNotClamp?

boolean

If true, will not check the current zoom to ensure it falls within the new range.

Returns

ZoomRange

Array of [min, max] current zoom values.

Tags

zoom

snapPageLocationToGrid()

snapPageLocationToGrid(x, y, grid): PointXY

Maps the given x,y to canvas coordinates via fromPageLocation, snaps that canvas location to the given grid, and then converts the snapped canvas location back to page coordinates.

Parameters

x

number

X position, in page coordinates.

y

number

Y position, in page coordinates

grid

Grid to apply - in canvas coordinates.

Returns

BrowserUI.snapPageLocationToGrid

The given page location snapped to the given grid, in page coordinates.

Inherited from

snapToGrid()

snapToGrid(el?, grid?): MagnetizeResult

Snaps one or all vertices to the current grid or to the grid provided to this method.

Parameters

el?

ID of vertex, Vertex, or DOM element representing a Vertex.

string | Vertex | BrowserElement

grid?

BrowserUI.storePositionsInModel

Optional grid to snap to. If not provided, the Surface will use the grid passed in to its constructor. If that is also null, nothing will be snapped.

Returns

MagnetizeResult

Inherited from

BrowserUI.snapToGrid

startEditingPath()

startEditingPath<T>(edgeOrConnection, params?): void

Start editing the given edge or connection, optionally with the given edit parameters.

Type Parameters

T

T extends ConnectorEditorActivateParams<BrowserElement>

Parameters

edgeOrConnection

Edge | Connection<BrowserElement>

params?

T

Returns

void

Implementation of

SupportsPathEditing.startEditingPath

stopEditingPath()

stopEditingPath(): void

Stop editing any connector paths.

Returns

void

Implementation of

SupportsPathEditing.stopEditingPath

storePositionsInModel()

storePositionsInModel(params?): void

Writes the current position for each node into the data model. A common use case is to run an auto layout the first time some dataset is seen, and then to save the locations of all the vertices once a human being has moved things around.

Parameters

params?

Parameters

leftAttribute?

string

Name of the attribute to use for the left position. Default is 'left'

topAttribute?

string

Name of the attribute to use for the top position. Default is 'top'

Returns

void

Inherited from

toBack()

toBack(v, alsoSendAncestorsToBack?): void

Moves the specified element or vertex to the back of its parent’s children in the DOM order. Optionally moves its ancestors to the back as well.

Parameters

v

The element, vertex, or browser element to be moved to the back.

string | Vertex | BrowserElement

alsoSendAncestorsToBack?

boolean

If true, the ancestors of the specified element are also moved to the back.

Returns

void

No return value.

Inherited from

BrowserUI.toBack

toFront()

toFront(v, alsoBringAncestorsToFront?): void

Brings the specified element or vertex to the front within its parent container. Optionally, this method can also ensure all ancestor elements are brought to the front.

Parameters

v

The element or vertex to be brought to the front. This can be a string identifier, a Vertex object, or a BrowserElement.

string | Vertex | BrowserElement

alsoBringAncestorsToFront?

boolean

Indicates whether the ancestors of the specified element should also be brought to the front. Defaults to false.

Returns

void

This method does not return a value.

Inherited from

BrowserUI.toFront

toggleClass()

toggleClass(el, clazz): void

Toggles a class on the DOM element represented by el, which can be a Selection, or an instance of many different types - see the SupportsClassManipulation type for a complete list.

Parameters

el

VisuallyJsSelection | SupportsClassManipulation

clazz

string

Returns

void

Inherited from

BrowserUI.toggleClass

toggleGroup()

toggleGroup(group): void

Expand a group if it is collapsed, or collapse it if it is expanded.

Parameters

group

string | Group

Returns

void

Inherited from

BrowserUI.toggleGroup

toPageLocation()

toPageLocation(left, top): PointXY

Maps the given canvas location to a page location, allowing for zoom and pan of the canvas. Note that page in this method takes scroll into account. If you wish to map to just the visible section of the browser, use toWindowLocation.

Parameters

left

number

X location

top

number

Y location

Returns

BrowserUI.toPageLocation

The mapped location, as a PointXY object.

Overrides

toViewportLocation()

toViewportLocation(left, top): PointXY

Maps the given canvas location to a point, in page coordinates, relative to the surface container's origin. A return value of [0,0] from this method indicates the top left corner of the surface's container as seen by the user; negative values for x and/or y mean that the point is not in the visible viewport. Similarly, values for x greater the container width, or y greater than the container height, indicate that the point is not in the visible viewport.

This method is useful when you want to position an element over the canvas at some specific canvas location. For instance, the SurfacePopup components use this to position themselves relative to the vertex they are currently referencing.

Parameters

left

number

top

number

Returns

trigger()

trigger(el, event, originalEvent?, payload?, detail?): void

Trigger an event on the given element. Exposed for API users but mostly intended for internal use.

Parameters

el

Element to trigger the event on.

Document | BrowserElement

event

string

Name of the event to trigger.

originalEvent?

Event

Optional event that gave rise to this method being called.

payload?

any

Optional payload to set on the Event that is created.

detail?

number

Optional detail for the Event that is created.

Returns

void

Inherited from

BrowserUI.trigger

unbind()

unbind(eventOrListener?, listener?): EventGenerator

Unbind the given event listener, or all listeners. If you call this method with no arguments then all event listeners are unbound.

Parameters

eventOrListener?

Either an event name, or an event handler function

string | Function

listener?

Function

If eventOrListener is defined, this is the event handler to unbind.

Returns

EventGenerator

Inherited from

BrowserUI.unbind

unbindModelEvent()

unbindModelEvent<T>(event, handler): void

Unbinds a listener for a model event.

Type Parameters

T

T = any

Parameters

event

string

Name of the event to unbind.

handler

ModelEventCallback<T>

Function to unbind.

Returns

void

unfixElement()

unfixElement(el): void

Removes an element that was previously fixed via the fixElement method.

Parameters

el

BrowserUI.unlockGroup

Returns

void

unlockGroup()

unlockGroup(groupIdOrGroup): void

Unlock a group.

Parameters

groupIdOrGroup

string | Group

Returns

void

Inherited from

zoomIn()

zoomIn(canvasLoc?): void

Zooms in by one step, within the allowed zoom range.

Parameters

canvasLoc?

Returns

void

Overrides

BrowserUI.zoomIn

zoomOut()

zoomOut(canvasLoc?): void

Zooms out by one step, within the allowed zoom range.

Parameters

canvasLoc?