DiagramOptions
Options for a diagram.
Properties
allowMultipleSelections?
optionalallowMultipleSelections:boolean
Defaults to true - whether or not to allow multiple objects to be selected at the same time via shift+click.
allowRotation?
optionalallowRotation:boolean
Whether or not to allow rotation of elements being dragged from the palette. Defaults to true.
autoPan?
optionalautoPan:boolean
Defaults to true, meaning the canvas will pan automatically to track elements that have been dragged out of the visible area.
beforeConnect?
optionalbeforeConnect:BeforeConnectInterceptor
Definition of a function to use as a beforeConnect interceptor.
Param
The source vertex for the new edge
Param
The target vertex for the new edge
Param
If true, the new edge came from user activity, with a pointer device or touch input. This will be false whenever the edge is added programmatically, either during a data load or via the addEdge method of VisuallyJsModel.
beforeStartConnect?
optionalbeforeStartConnect:EdgeDataGenerator
This method is invoked when a user begins to drag a new edge. It is given the vertex the drag is starting from, and any derived type for the edge being dragged. This method can be used for two purposes: firstly, if you return false, the drag will be aborted. Secondly, if you return a data object from this method, that object will be used as the edge's backing data. So a common usage is to use this method to set properties that will define an edge's initial appearance.
cells?
optionalcells:object
Options for cells.
clonable?
optionalclonable:boolean
True by default - cells may be cloned when selected.
defaultHeight?
optionaldefaultHeight:number
The default height of a cell in this diagram. Defaults to 80 pixels.
defaultWidth?
optionaldefaultWidth:number
The default width of a cell in this diagram. Defaults to 100 pixels.
deletable?
optionaldeletable:boolean
True by default - cells may be deleted when selected.
draggable?
optionaldraggable:boolean
True by default - cells may be dragged.
editable?
optionaleditable:boolean
True by default. Set this to false to stop all forms of edit for cells - delete, rotate, resize, clone
events?
optionalevents:NodeEventOptions<any>
Optional event mappings for all cells.
font?
optionalfont:FontSpec
Optional spec for font size/style to apply to all shapes. Shapes that have their own font spec will override this.
getCollapsedGroupSize()?
optionalgetCollapsedGroupSize: (g,currentSize) =>Size
Optional function that can return the desired size for some group that is about to be collapsed. In certain diagrams it is useful to be able to decide what this should be at runtime.
Parameters
g
currentSize
Returns
groups?
optionalgroups:DiagramGroupMapping
Optional behaviour mapping for groups in the diagram. For many setups, you won't need to use this, as the other options in the cells config are quite extensive and can be used to configure many things. For some setups you may need to provide config for group behaviour, such as whether or not vertices can be dragged in/out, whether the group should be resizable, etc. You can also provide group-specific event mappings here. Any events you provide here will be merged with the internal event registrations made by the diagram, but if you provide a template it will be ignored.
heightProperty?
optionalheightProperty:string
The property containing each cell's height. Defaults to 'height'
labelBackground?
optionallabelBackground:boolean|LabelBackgroundOptions
Options for label background. Use true for defaults, or supply your own values (which will be merged on top of the defaults)
labelFillRatio?
optionallabelFillRatio:number
How much of the width of a shape a multiline label will take up before wrapping. Defaults to 0.8. You can set this to a number greater than 1, if you like, but that will allow the label to overflow.
labelPosition?
optionallabelPosition:LabelPosition
Default position for labels (will be overridden by a shape that defines its own position. Defaults to "center"
labelProperty?
optionallabelProperty:string
The property containing each cell's label. Defaults to 'label'
leftProperty?
optionalleftProperty:string
The property containing each cell's left position. Defaults to 'x'.
linkable?
optionallinkable:boolean
True by default - cells may be linked to other cells via edge drag
magnetizer?
optionalmagnetizer:MagnetizeOptions
Options for the magnetize functionality of the UI.
multilineLabels?
optionalmultilineLabels:boolean
Defaults to true - labels are split across multiple lines to fit inside their shape. Set this to false if you want labels to always be a single line.
nodes?
optionalnodes:DiagramNodeMapping
Optional mapping for nodes in the diagram. For many setups, you won't need to use this, as the other options in the cells config are quite extensive and can be used to configure many things. Any events you provide here will be merged with the internal event registrations made by the diagram, but if you provide a template it will be ignored.
outlineWidth?
optionaloutlineWidth:number
Stroke width to use for outline of svg shapes.
resizable?
optionalresizable:boolean
Whether or not the user should be able to resize cells in the diagram using mouse/pointer. Defaults to true. Ignored if editable is false.
resize?
optionalresize:object
resize.bordersVisible?
optionalbordersVisible:boolean
When method is "borders", set this to make the borders visible. Internally this just sets a CSS class on the draw skeleton's parent DOM element, and the appearance of the borders is then controlled via CSS.
resize.handlerFactory?
optionalhandlerFactory:ResizingToolsHandlerFactory
Optional factory that can return a resize handler for some given vertex. You can use this to override the default behaviour for any vertex you choose
resize.handleShape?
optionalhandleShape:"circle"|"rectangle"
Shape of resize handles. Defaults to circle.
resize.handleSize?
optionalhandleSize:number
Width/height to use for resize handles. Defaults to 20 pixels.
resize.ignoreGrid?
optionalignoreGrid:boolean
Defaults to false, meaning size changes conform to an underlying grid, if present
resize.method?
optionalmethod:ResizingToolsResizeMethod
Method to use for resize - handles on the corners, or borders. Defaults to handles.
resize.modelUpdater?
optionalmodelUpdater:ResizingToolsModelUpdater
Optional function that can attach extra model updates when a resize occurs
resize.resizeX?
optionalresizeX:boolean
Whether or not to support resize in the X axis. Defaults to true.
resize.resizeY?
optionalresizeY:boolean
Whether or not to support resize in the Y axis. Defaults to true.
rotatable?
optionalrotatable:boolean
Whether or not the user should be able to rotate cells in the diagram. Defaults to true. Ignored if editable is false.
rotationProperty?
optionalrotationProperty:string
The property containing each cell's rotation. Defaults to rotation
rotationStops?
optionalrotationStops:number
Optional number of stops to use when rotating cells. If not provided vertices can be rotated to any angle. If provided, the value is divided into 360 and the result is the angle between each stop. For example, a value of 12 means each stop is 30 degrees.
shouldDeleteGroupMembers()?
optionalshouldDeleteGroupMembers: (g,el) =>boolean
A function that you can provide to instruct the diagram whether or not, when removing a group via the diagram tools, to also remove its child members. You need to return boolean true from this method in order for group members to be deleted.
Parameters
g
el
Returns
boolean
showLabels?
optionalshowLabels:boolean
Whether or not to show labels. Defaults to true.
topProperty?
optionaltopProperty:string
The property containing each cell's top position. Defaults to 'y'.
widthProperty?
optionalwidthProperty:string
The property containing each cell's width. Defaults to 'width'
defaultColor?
optionaldefaultColor:string
Defaults to #000000
defaultFillColor?
optionaldefaultFillColor:string
Defaults to #FFFFFF
defaultOutlineColor?
optionaldefaultOutlineColor:string
Defaults to #000000
defaultOutlineWidth?
optionaldefaultOutlineWidth:number
Defaults to 2px
defaults?
optionaldefaults:UICoreDefaults
Defaults for connector/anchors etc
deselectOnCanvasTap?
optionaldeselectOnCanvasTap:boolean
Defaults to true - deselect any currently selected shapes when the user taps on canvas whitespace.
dragGroups?
optionaldragGroups:DragGroupsPluginOptions
Options for drag groups.
editable?
optionaleditable:boolean
Defaults to true, meaning the user can edit the diagram.
grid?
optionalgrid:DiagramGridOptions
Options for a grid for the diagram.
lasso?
optionallasso:boolean|LassoPluginOptions
Options for lasso, or just a boolean instructing the diagram to attach a lasso with default options, if true. If no value is set for this, the diagram will not have a lasso attached.
lineCrossings?
optionallineCrossings:boolean|LineCrossingsPluginOptions
Controls whether line crossings are shown by a visual cue. Defaults to false. You can either supply a boolean and have the panbuttons plugin initialize with its default settings, or supply your own settings.
mediator?
optionalmediator:DiagramActionMediator
Defines an object that can decide at runtime whether a given shape should offer various actions in its shape editing tools. Defaults to null.
miniview?
optionalminiview:MiniviewPluginOptions
Options for a miniview
pan?
optionalpan:PanOptions
Options to control how a user pans the canvas.
panButtons?
optionalpanButtons:boolean|PanButtonsPluginOptions
Controls whether pan buttons are displayed at the edges of the canvas, defaults to false. You can either supply a boolean and have the panbuttons plugin initialize with its default settings, or supply your own settings.
rotationSpeed?
optionalrotationSpeed:number
The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
selectShapeOnTap?
optionalselectShapeOnTap:boolean
Defaults to true - select a shape/edge if the user taps on it. This is valid also when the diagram is read only.
shapes?
Which shape sets to make available to this diagram.
snapLines?
optionalsnapLines:boolean|SnaplinesPluginOptions
Controls whether snaplines are displayed, defaults to false. You can either supply a boolean and have the snaplines plugin initialize with its default settings, or supply your own settings.
wheel?
optionalwheel:WheelOptions
Options for the behaviour of the mousewheel (which also covers two finger scrolling on a mac trackpad)
zoom?
optionalzoom:ZoomOptions
Options to control how a user manages zoom on the canvas.
zoomToFit?
optionalzoomToFit:boolean
If true, zoom the display so that the dataset is entirely visible after initialisation.
zoomToFitIfNecessary?
optionalzoomToFitIfNecessary: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.