Skip to main content

SurfaceOptions

This interface defines the allowed parameters on a render call that will create a new Surface.

Extends​

Extended by​

Properties​

activeFiltering?​

optional activeFiltering: boolean

Whether or not to disable drop targets on which an edge from some current source may not be dropped when drag starts. Defaults to true.

allowLoopbackEdges?​

optional allowLoopbackEdges: boolean

Whether or not the edge drag/relocate handlers should support dragging edges from some element to itself. Defaults to false.

autoExitSelectMode?​

optional autoExitSelectMode: boolean

Whether or not to automatically exit from 'select' mode after a lasso operation.

canCollapseGroup()?​

optional canCollapseGroup: (group, currentSize) => boolean | ObjectData

Returns whether or not the given group can be collapsed

Parameters​

group​

Group

Group in question

currentSize​

Size

The group's current size.

Returns​

boolean | ObjectData

Either a boolean value indicating the operation may or may not proceed, or a set of values. In the case that a set of values are returned, the operation is approved, and the data returned is updated onto the group's dataset. This is useful when your UI wants to stored specific information related to the collapsed group.

Inherited from​

BrowserUIOptions.canCollapseGroup

canExpandGroup()?​

optional canExpandGroup: (group, currentSize) => boolean | ObjectData

Returns whether or not the given group can be expanded

Parameters​

group​

Group

Group in question

currentSize​

Size

The group's current (collapsed) size.

Returns​

boolean | ObjectData

Either a boolean value indicating the operation may or may not proceed, or a set of values. In the case that a set of values are returned, the operation is approved, and the data returned is updated onto the group's dataset. This is useful when your UI wants to stored specific information related to the expanded group.

Inherited from​

BrowserUIOptions.canExpandGroup

clamp?​

optional clamp: boolean

Whether or not to limit the canvas movement when dragging or zooming so that some part of the dataset is always visible. Defaults to true.

clampToBackground?​

optional clampToBackground: boolean

When a background is in use, whether or not to clamp movement of the canvas so that some portion of the background is always visible.

clampToBackgroundExtents?​

optional clampToBackgroundExtents: boolean

When a background is in use, whether or not to clamp movement of the canvas so that the entire background is always visible.

consumeRightClick?​

optional consumeRightClick: boolean

Whether or not to consume right clicks, which ordinarily will cause a browser to show a context menu with some native browser functions. This defaults to true.

Inherited from​

BrowserUIOptions.consumeRightClick

decorators?​

optional decorators: (DecoratorSpec | IDecorator<BrowserElement>)[]

Optional list of decorators to attach to the Surface.

defaultCollapsedGroupSize?​

optional defaultCollapsedGroupSize: Size

Optional default size for a collapsed group. Defaults to 200x150.

Inherited from​

BrowserUIOptions.defaultCollapsedGroupSize

defaults?​

optional defaults: BrowserUIDefaults

Optional default settings

Inherited from​

BrowserUIOptions.defaults

dragOptions?​

optional dragOptions: DragOptions<BrowserElement>

Options for dragging vertices.

Inherited from​

BrowserUIOptions.dragOptions

edges?​

optional edges: BrowserUIEdgeOptions

Options for edges

Inherited from​

BrowserUIOptions.edges

edgeSnap?​

optional edgeSnap: EdgeSnapOptions

Options for edge snapping.

elementsDraggable?​

optional elementsDraggable: boolean

Whether or not the elements in the UI should be draggable. Defaults to true.

Inherited from​

BrowserUIOptions.elementsDraggable

enableAnimation?​

optional enableAnimation: boolean

Whether or not to support animation of pan/zoom operations.

events?​

optional events: SurfaceEventOptions

Optional map of handlers for various events generated by the Surface.

getCollapsedGroupSize()?​

optional getCollapsedGroupSize: (group, currentSize) => Size

Optional function to determine the size of a collapsed group. This is given precedence over any default or per-type specification for a collapsed group's size.

Parameters​

group​

Group

The group that is being collapsed.

currentSize​

Size

Returns​

Size

The size for the collapsed group.

Inherited from​

BrowserUIOptions.getCollapsedGroupSize

grid?​

optional grid: GridOptions

Options for imposing a grid onto the elements in the UI

Inherited from​

BrowserUIOptions.grid

id?​

optional id: string

Optional ID for the UI. Allows you to retrieve this UI from a model's getRenderer(id) method.

Inherited from​

BrowserUIOptions.id

layout?​

optional layout: LayoutSpec

Defines the layout to use.

Inherited from​

BrowserUIOptions.layout

logicalPorts?​

optional logicalPorts: boolean

Defaults to false. When true, the UI treats the vertex's element as the element for the port if it cannot find a specific element for the port.

Inherited from​

BrowserUIOptions.logicalPorts

mode?​

optional mode: SurfaceMode

Mode to start in. Defaults to 'pan'.

modelEvents?​

optional modelEvents: ModelEventSpec[]

Optional map of event handlers. Each entry consists of the event name, a CSS selector to target, and a callback function. Supplying this is equivalent to calling bindModelEvent(..) on a Surface.

pan?​

optional pan: PanOptions

Options to control how a user pans the canvas.

plugins?​

optional plugins: UIPluginSpec<any>[]

Optional list of plugins to attach to the UI.

Inherited from​

BrowserUIOptions.plugins

relayoutOnEdgeConnect?​

optional relayoutOnEdgeConnect: boolean

When true, the UI will run a refresh of the underlying layout whenever a new edge is established. This defaults to false, but you might want to set this to true if you're using the Hierarchical or Hierarchy layouts, because it has a bearing on the way they paint. However, if your users are able to drag vertices around, you may not wish for the layout to move things that they have placed, which is why this defaults to false.

Inherited from​

BrowserUIOptions.relayoutOnEdgeConnect

relayoutOnGroupUpdate?​

optional relayoutOnGroupUpdate: boolean

Defaults to false. When true, changes to a group cause the entire surface to perform a relayout.

relayoutOnResize?​

optional relayoutOnResize: boolean

Whether or not to relayout the UI when an element's size changes as a result of content changes in its element. Defaults to false.

Inherited from​

BrowserUIOptions.relayoutOnResize

relayoutOnVertexRemove?​

optional relayoutOnVertexRemove: boolean

Whether or not to relayout the UI when a vertex is removed. Defaults to false. For some layouts, like the Hierarchy layout, you may wish to switch this on.

Inherited from​

BrowserUIOptions.relayoutOnVertexRemove

router()?​

optional router: (u) => Router<BrowserElement>

Optional factory method to instantiate a router. This is only for certain advanced usages in which you wish to route all of the edges yourself. Most applications do not need to consider this.

Parameters​

u​

UICore<BrowserElement>

Returns​

Router<BrowserElement>

Inherited from​

BrowserUIOptions.router

selection?​

optional selection: Function | VisuallyJsSelection

Optional Selection - or generator - to use as the dataset to render. If you supply this the UI will render the contents of the selection, or the list of vertices that the given function returns. This is useful for such things as inspector windows for parts of your UI.

Inherited from​

BrowserUIOptions.selection

shapes?​

optional shapes: ShapesOptions

Optional shape library that can render SVG shapes into node elements. When you provide a shape library to a surface, two things happen: - firstly, the surface registers a vjs-shape tag that your templates can use. The type of each node is used to extract an appropriate SVG shape definition from the shape library. Secondly, the 'exportToSvg()' method becomes available. Note that SVG export has a few constraints/requirements - see the docs for a discussion.

Inherited from​

BrowserUIOptions.shapes

templates?​

optional templates: Record<string, string>

When using 'vanilla' VisuallyJs, you can provide a map of templates here rather than including them somewhere in the HTML of the page. This is ignored when you are using a library integration.

Inherited from​

BrowserUIOptions.templates

useModelForPositions?​

optional useModelForPositions: boolean

Defaults to true - we get positions for elements from our layout. In some use cases you may wish to use element positions retrieved from the DOM.

Inherited from​

BrowserUIOptions.useModelForPositions

useModelForSizes?​

optional useModelForSizes: boolean

Defaults to false. When true, newly created nodes are sized according to values in their backing data, using the modelWidthAttribute and modelHeightAttribute as keys. NOTE: when this flag is set, VisuallyJs will write the size onto each element as it is created. Depending on your app, you may not need it to do this - if you know your node sizes are set via css, for instance, or you know the template rendering your vertices writes out the size in an element's style or an SVG element's width/height. If that is the case, you can set writeSizeToElements to be false, and you'll get a performance boost.

Inherited from​

BrowserUIOptions.useModelForSizes

useSvgContainer?​

optional useSvgContainer: boolean

Defaults to false. When true, VisuallyJs will use an SVG element as the container for all the other elements. You will need to ensure your templates/components write out SVG elements, and you will have to stick to SVG elements in any Decorators. You may wish to consider looking at the Diagram class if you want to build an SVG diagram.

Inherited from​

BrowserUIOptions.useSvgContainer

wheel?​

optional wheel: WheelOptions

Options for the behaviour of the mousewheel (which also covers two finger scrolling on a mac trackpad)

writeSizeToElements?​

optional writeSizeToElements: boolean

When useModelForSizes is true, VisuallyJs will write out the model size onto each element rendered. But if you know your node sizes are set via css, or you know the template rendering your vertices writes out the size in an element's style or an SVG element's width/height, you can instruct VisuallyJs not to bother writing out the size to the element itself, by setting this flag to true (the default is false). This can provide a performance boost.

Inherited from​

BrowserUIOptions.writeSizeToElements

zoom?​

optional zoom: ZoomOptions

Options to control how a user manages zoom on the canvas.

zoomToFit?​

optional zoomToFit: boolean

If true, zoom the display so that the dataset is entirely visible after initialisation.

Inherited from​

BrowserUIOptions.zoomToFit

zoomToFitIfNecessary?​

optional zoomToFitIfNecessary: boolean

If true, zoom the display so that the dataset is entirely visible after initialisation, but only adjust the zoom level if the dataset is not already visible at the default zoom level.

Inherited from​

BrowserUIOptions.zoomToFitIfNecessary