BrowserUI
Subclass of UICore that renders to the DOM in a browser, and supports dragging of elements/connections. This class is abstract and is not something users of the API will instantiate.
Extended by
Type Parameters
EVT
EVT = any
Methods
$getCapabilityConfig()
$getCapabilityConfig(
c):Record<string,any>
Gets the config for some capability. May be an empty object. A capability provider may be registered at the point that a capability is registered - the function is provided by the code that registers the capability.
Parameters
c
UICapabilities
Returns
Record<string, any>
Inherited from
UICore.$getCapabilityConfig
$getFixedViewportBoundsInfo()
abstract$getFixedViewportBoundsInfo():ViewportBounds
If the UI has a fixed viewport (not panning, zooming etc), it can opt to return a value from this method. A background can use this information to place itself.
Returns
Inherited from
UICore.$getFixedViewportBoundsInfo
$hasCapability()
$hasCapability(
c):boolean
Test whether the specific capability is available on this instance of the UI.
Parameters
c
UICapabilities
Returns
boolean
Inherited from
UICore.$hasCapability
addClass()
addClass(
el,clazz):void
Adds a class to 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
addElementEventFilter()
addElementEventFilter(
selector):void
Adds a CSS3 selector filter which will exclude the given element (and descendants) from reporting element events. Used internally by popups, but exposed in the API as it may be useful.
Parameters
selector
string
A valid CSS3 selector.
Returns
void
addPlugin()
addPlugin<
O,P>(pluginSpec):P
Add a plugin to the UI. You can provide a type parameter to this method to avoid having to cast the return value, if you need to retain a reference to the plugin.
Type Parameters
O
O extends UIPluginOptions
Defines the options type for the plugin to add
P
P extends UIPlugin<BrowserElement, O, any>
Defines the type of the plugin that will be returned from this method
Parameters
pluginSpec
UIPluginSpec<O>
Returns
P
Inherited from
UICore.addPlugin
adHocGroupLayout()
adHocGroupLayout(
group,layoutParams):void
Run an adhoc layout on the given group. The layout will be applied one time, and then the previous layout will be restored (but not run, of course, otherwise the results of this adhoc layout would be overwritten!).
Parameters
group
The group on which to run an adhoc layout.
string | Group
layoutParams
Params for the adhoc layout.
options
type
string
Returns
void
Inherited from
UICore.adHocGroupLayout
adHocLayout()
adHocLayout<
LP>(layoutParams):void
Run an adhoc layout on the viewport, inside a transaction, so the entire operation can be undone at once. Note that invoking this method also has the effect of clearing the geometry of every edge and resetting edge paths to the default computed values: edge paths are linked to their vertex locations, and this method can move any vertex from its current location.
Type Parameters
LP
LP extends LayoutParameters
Parameters
layoutParams
Spec for the layout to apply
options
LP
type
string
Returns
void
Inherited from
UICore.adHocLayout
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
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>
Inherited from
UICore.autoSizeGroup
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
UICore.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
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
"zoom" | "group:removed" | "edge:removed" | "node:removed" | "edge:geometry" | "edge:dragStart" | "edge:drag" | "edge:dragEnd" | "edge:dragAbort" | "group:move:start" | "group:move" | "group:move:end" | "internal:edge:redraw" | "node:move:start" | "node:move" | "node:move:end" | "node:move:abort" | "destroy" | "internal.connection" | "internal.element:repainted" | "group:collapse" | "group:expand" | "render:start" | "render:end" | "adhocLayout" | "afterLayoutRefresh" | "group:relayout" | "group:render" | "internal.vertex:updated" | "node:render" | "node:visibility" | "plugin:added" | "plugin:removed" | "relayout" | "vertex:click" | "vertex:dblclick" | "vertex:dbltap" | "vertex:mouseout" | "vertex:mouseover" | "vertex:mousemove" | "vertex:mouseup" | "vertex:mousedown" | "vertex:contextmenu" | "vertex:tap" | "edge:click" | "edge:dblclick" | "edge:mouseout" | "edge:mouseover" | "edge:mouseup" | "edge:mousedown" | "edge:contextmenu" | EVT
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
UICore.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
("zoom" | "group:removed" | "edge:removed" | "node:removed" | "edge:geometry" | "edge:dragStart" | "edge:drag" | "edge:dragEnd" | "edge:dragAbort" | "group:move:start" | "group:move" | "group:move:end" | "internal:edge:redraw" | "node:move:start" | "node:move" | "node:move:end" | "node:move:abort" | "destroy" | "internal.connection" | "internal.element:repainted" | "group:collapse" | "group:expand" | "render:start" | "render:end" | "adhocLayout" | "afterLayoutRefresh" | "group:relayout" | "group:render" | "internal.vertex:updated" | "node:render" | "node:visibility" | "plugin:added" | "plugin:removed" | "relayout" | "vertex:click" | "vertex:dblclick" | "vertex:dbltap" | "vertex:mouseout" | "vertex:mouseover" | "vertex:mousemove" | "vertex:mouseup" | "vertex:mousedown" | "vertex:contextmenu" | "vertex:tap" | "edge:click" | "edge:dblclick" | "edge:mouseout" | "edge:mouseover" | "edge:mouseup" | "edge:mousedown" | "edge:contextmenu" | EVT)[]
listener
(payload, evt?) => any
insertAtStart?
boolean
Returns
EventGenerator
Inherited from
UICore.bindAll
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
UICore.bindUnchecked
cloneVertex()
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?
Optional position to use for the new vertex. May be null.
Returns
Inherited from
UICore.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
UICore.collapseGroup
destroy()
destroy():
void
Clears the instance and unbinds any listeners on the instance. After you call this method you cannot use this instance of the UI again.
Returns
void
Overrides
UICore.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
UICore.expandGroup
findEnclosedVertices()
findEnclosedVertices(
options):IntersectingVertex<BrowserElement>[]
Finds all of the vertices that are enclosed by the rectangle described by origin and dimensions.
Parameters
options
Options for the find operation.
Returns
IntersectingVertex<BrowserElement>[]
Inherited from
UICore.findEnclosedVertices
findIntersectingVertices()
findIntersectingVertices(
options):IntersectingVertex<BrowserElement>[]
Finds all of the vertices that intersect the rectangle described by origin and dimensions.
Parameters
options
Options for the find operation.
Returns
IntersectingVertex<BrowserElement>[]
Inherited from
UICore.findIntersectingVertices
flashSelection()
flashSelection(
sel,duration,animName):void
Flash the nodes and groups in the given selection.
Parameters
sel
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
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.
string | Element | Node | Group | (string | Element | Node | Group)[]
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
fromPageLocation()
abstractfromPageLocation(x,y):PointXY
Maps the location of the given location on the page onto the coordinate space of this widget, returning a value representing a location in canvas coordinates with respect to the origin of the instance's canvas.
Parameters
x
number
y
number
Returns
fromWindowLocation()
abstractfromWindowLocation(x,y):PointXY
Maps the location of the given location in the window onto the coordinate space of this widget, returning a value representing a location in canvas coordinates with respect to the origin of the instance's canvas. The input values are in "window" coordinates, where the concept of the window is that it is the visible space the user can see. In a browser, for example, this means the visible area of the page; it does not necessarily correlate with page coordinates because the page may be scrolled.
Parameters
x
number
y
number
Returns
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
UICore.gather
getEffectiveVisibleZoom()
getEffectiveVisibleZoom():
number
Gets the zoom as seen by the user. This class does not attempt to implement this method, instead assuming that the zoom is as set on the instance. Subclasses will generally override this.
Returns
number
getElementFromEvent()
getElementFromEvent(
e):ViewportElement<BrowserElement>
Get the model object + DOM element on which the given event occurred.
Parameters
e
MouseEvent
Returns
ViewportElement<BrowserElement>
getGrid()
getGrid():
Grid
Get the grid for this instance. May be null.
Returns
Inherited from
UICore.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
The group to find extents for
relativeToCanvasOrigin?
boolean
Defaults to false.
Returns
Extents
Inherited from
UICore.getGroupContentExtents
getLabelLocationAttribute()
getLabelLocationAttribute(
edge):string
Gets the name of the attribute that is used to determine the label for the given edge.
Parameters
edge
Returns
string
getLayout()
getLayout():
AbstractLayout<any>
Gets the Layout this surface is currently using.
Returns
AbstractLayout<any>
Inherited from
UICore.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
UICore.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
UICore.getObjectInfo
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
UICore.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
UICore.getRenderedConnection
getRenderedElement()
getRenderedElement(
obj):BrowserElement
For some node/group, get the element that was used to render it.
Parameters
obj
string | Base
Returns
Overrides
UICore.getRenderedElement
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
DOM element for the given Port, null if not found.
Overrides
UICore.getRenderedPort
getViewportBoundsInfo()
abstractgetViewportBoundsInfo():ViewportBounds
Gets the current bounds of the UI's viewport.
Returns
Inherited from
UICore.getViewportBoundsInfo
getZoom()
getZoom():
number
Gets the current zoom. This class returns the programmatic zoom level, which may not be what the user sees. Subclasses will generally override this.
Returns
number
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
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
Element to get draggable state for.
Returns
boolean
isVisible()
isVisible(
obj):any
Returns whether or not the given model object is visible.
Parameters
obj
Returns
any
Inherited from
UICore.isVisible
load()
load(
data,onload?):void
Load the dataset and the current state of the UI - its zoom setting, but subclasses can override this method and extract other information.
Parameters
data
onload?
Function
Optional function to invoke after load.
Returns
void
Tags
input/output
Inherited from
UICore.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
UICore.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
UICore.magnetize
magnetizeAtPoint()
magnetizeAtPoint(
origin):void
Magnetize the elements in the display, using the given point as the origin.
Parameters
origin
Returns
void
Tags
magnetizer,foo
Inherited from
UICore.magnetizeAtPoint
mapEventLocation()
abstractmapEventLocation(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 UI's viewport.
Parameters
event
MouseEvent
Returns
off()
off(
el,event,callback):BrowserUI<EVT>
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
BrowserUI<EVT>
Overrides
UICore.off
on()
on(
el,event,callbackOrSelector,callback?):BrowserUI<EVT>
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
BrowserUI<EVT>
Overrides
UICore.on
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
UICore.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
Returns
void
Tags
input/output
Inherited from
UICore.registerDataHook
registerTag()
registerTag(
tagName,handlers):void
Register a custom tag on the UI. This will only take effect if the UI is using the default VisuallyJs template renderer.
Parameters
tagName
string
handlers
Returns
void
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
UICore.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
UICore.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
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
repaintEdge()
repaintEdge(
edge):void
Repaint this edge.
Parameters
edge
Returns
void
Inherited from
UICore.repaintEdge
repaintEdges()
repaintEdges(
edges):void
Repaint this set of edges.
Parameters
edges
Edge[]
Returns
void
Inherited from
UICore.repaintEdges
repaintEverything()
repaintEverything(
doNotRefreshElements?):void
Repaint every connection in the instance.
Parameters
doNotRefreshElements?
boolean
Returns
void
Inherited from
UICore.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
Overrides
UICore.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
UICore.rotate
save()
save(
options?):UISaveData
Export the dataset and the current state of the UI - its zoom setting, but subclasses can override this method and add other data.
Parameters
options?
Options for the save.
Returns
Tags
input/output
Inherited from
UICore.save
saveToUrl()
saveToUrl(
options):void
Saves the return value of this object's save method via ajax POST to a given URL.
Parameters
options
Save options
Returns
void
Tags
input/output
Inherited from
UICore.saveToUrl
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
setEnabled()
setEnabled(
v,state):boolean
Sets whether the given vertex is enabled for connection drag/drop.
Parameters
v
The vertex to set enabled state for.
state
boolean
Returns
boolean
setGrid()
setGrid(
grid):void
Sets the current grid for element dragging, magnetization and group sizing.
Parameters
grid
Grid to use. If you provide null as the value the grid will be cleared.
Returns
void
Inherited from
UICore.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
UICore.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
UICore.setMagnetizedPosition
setMode()
setMode(
mode,doNotClearSelection?):void
Sets the UI mode. In the base class this method has an empty implementation.
Parameters
mode
string
doNotClearSelection?
boolean
Returns
void
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
Overrides
UICore.setOverlayVisible
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
UICore.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
UICore.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
Overrides
UICore.setSuspendRendering
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.
Base | FilterableDataset | ArrayLike<Node | Edge | Group | Port>
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
UICore.setVisible
setZoom()
setZoom(
z,animate?):number
Sets the current zoom. Subclasses can/should override this to do anything specific related to their internal architecture.
Parameters
z
number
animate?
boolean
Returns
number
Inherited from
UICore.setZoom
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
The given page location snapped to the given grid, in page coordinates.
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?
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
Inherited from
UICore.snapToGrid
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
UICore.storePositionsInModel
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.
Overrides
UICore.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.
Overrides
UICore.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
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
UICore.toggleGroup
toPageLocation()
abstracttoPageLocation(left,top):PointXY
Maps the given location relative to the viewport origin, to a page location, allowing for zoom and pan of the canvas. This takes into account the offset of the viewport 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
Returns
The mapped location, as a PointXY object.
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
Overrides
UICore.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
UICore.unbind
unlockGroup()
unlockGroup(
groupIdOrGroup):void
Unlock a group.
Parameters
groupIdOrGroup
string | Group
Returns
void
Inherited from
UICore.unlockGroup
zoomIn()
abstractzoomIn(canvasLoc?):void
Zoom in by one zoom step.
Parameters
canvasLoc?
Returns
void
zoomOut()
abstractzoomOut(canvasLoc?):void
Zoom out by one zoom step.
Parameters
canvasLoc?
Returns
void
zoomToElements()
zoomToElements(
zParams):void
Zooms the viewport so that all of the given elements are visible.
Parameters
zParams
ZoomToElementsOptions<BrowserElement>
Returns
void
Tags
zoom
Inherited from
UICore.zoomToElements
zoomToFit()
zoomToFit(
params?):void
Zooms the display so that all the tracked elements fit inside the viewport. This method will also, by default, increase the zoom if necessary - meaning the default behaviour is to adjust the zoom so that the content fills the viewport. You can suppress zoom increase by setting doNotZoomIfVisible:true on the parameters to this method.
Parameters
params?
Returns
void
Tags
zoom
Inherited from
UICore.zoomToFit
zoomToFitIfNecessary()
zoomToFitIfNecessary(
params?):void
Zooms the display so that all the tracked elements fit inside the viewport, but does not make any adjustments to zoom if all the elements are currently visible (it still does center the content though).
Parameters
params?
Returns
void
Tags
zoom
Inherited from
UICore.zoomToFitIfNecessary
Properties
clipboard
clipboard:
BrowserUIClipboard
Clipboard for copy/paste of data.
dataSource
dataSource:
DataSource
The data model that is being rendered. In the majority of cases this points to the same object as model, but you can render some subset of a data model, such as a dynamically updated Selection.
Inherited from
UICore.dataSource
model
model:
VisuallyJsModel
The underlying data model. You can access this on any instance of the UI to manipulate the data model - to add, remove, update model objects, create selections, etc.
Inherited from
UICore.model
objectFilter()
objectFilter: (
b) =>boolean
Optional filter used to determine whether or not we want to render some specific object.
Parameters
b
Returns
boolean
Inherited from
UICore.objectFilter