Skip to main content

EdgeMapping

The mapping for the definition of an edge inside a view.

Extends​

Properties​

allowUnattached?​

optional allowUnattached: boolean

Whether or not to allow this type of edge to have a source and/or target in whitespace rather than connected to a vertex. Defaults to false. When this is set to true, a user may drag a new edge of this type and drop it into whitespace, and they may also - subject to whether or not the edge is detachable - detach an edge of this type via the mouse/pointer events, and drop into whitespace. If you do not need this level of control you can also use the allowUnattached flag in the edges section of the UI render options. If you have this set on an edge type, it will override allowUnattached from the edges UI options.

anchor?​

optional anchor: AnchorSpec

Spec for the anchor to use for both source and target for edges of this type.

anchors?​

optional anchors: [AnchorSpec, AnchorSpec]

[source, target] anchor specs edges of this type.

avoidVertices?​

optional avoidVertices: boolean

If true, the edge will be routed to avoid any vertices. Note that if your edge has any user edits, or was loaded with a path specified, the edge will not be routed to avoid vertices.

color?​

optional color: string

Color to paint the edge's path

Inherited from​

LineStyle.color

connector?​

optional connector: ConnectorSpec

Name/definition of the connector to use. If you omit this, the default connector will be used.

cssClass?​

optional cssClass: string

CSS class to add to edges of the type in the UI

dashArray?​

optional dashArray: string

Definition of dash pattern to use to draw the edge path

Inherited from​

LineStyle.dashArray

deleteButton?​

optional deleteButton: boolean | OverlayVisibility

Optional delete button.

deleteButtonClass?​

optional deleteButtonClass: string

Optional class name to set on the delete button. Defaults to "vjs-edge-delete".

deleteButtonLocation?​

optional deleteButtonLocation: number | number[]

Location for an edge's delete button, if applicable. Defaults to 0.1. You can supply an array of locations if you want multiple buttons.

deleteConfirm?​

optional deleteConfirm: EdgeDeleteConfirmationFunction

An optional function to invoke if the user presses the delete button on some edge. When this is present and the user clicks an edge delete button, instead of just deleting the edge, this function is invoked. It is passed the edge that is a candidate for deletion, and a function which you must invoke if you wish to proceed.

Param​

Param​

detachable?​

optional detachable: boolean

Whether or not edges of this type should be detachable with the mouse. Defaults to true.

events?​

optional events: EdgeEventOptions

Optional map of event bindings.

gradient?​

optional gradient: [number, string][]

An array of color stops to use as a linear gradient for the edge path. When this is set, color is ignored.

Inherited from​

LineStyle.gradient

hoverPaintStyle?​

optional hoverPaintStyle: PaintStyle

Paint style to use for the edge when the pointer is hovering over it.

ignore?​

optional ignore: boolean

Whether or not to ignore (ie. exclude from the display) edges of this type.

label?​

optional label: string

Optional label to use for the edge. If this is set, a label overlay will be created and the value of label will be used as the overlay's label. This value can be parameterised, in order to extract a value from the edge's backing data, eg. if you set label:"{{name}}" then VisuallyJs would attempt to extract a property with key name from the edge's backing data, and use that property's value as the label.

Overrides​

LineStyle.label

labelBackgroundStyle?​

optional labelBackgroundStyle: LabelBackgroundStyle

Optional style for the label's background. This is ignored if useHTMLLabel is set to true.

labelClass?​

optional labelClass: string

Optional css class to set on the label overlay created if label is set. This is a static string and does not support parameterisation like label does.

labelFont?​

optional labelFont: FontSpec

Optional spec for label font. Will use browser defaults if not specified (or CSS, but remember that CSS is not taken into account when you export an SVG from a diagram or an app using an SVG container)

labelLocation?​

optional labelLocation: number

Optional location for the label. If not provided this defaults to 0.5, but the label location can be controlled via the labelLocationAttribute.

Overrides​

LineStyle.labelLocation

labelLocationAttribute?​

optional labelLocationAttribute: string

This defaults to labelLocation, and indicates the name of a property whose value can be expected to hold the location at which the label overlay should be located. The default value for this is labelLocation, but the key here is that VisuallyJs looks in the edge data for labelLocation, so the location is dynamic, and can be changed by updating labelLocation. This parameter allows you to change the name of the property that VisuallyJs will look for in the edge data.

labelsRotatable?​

optional labelsRotatable: boolean | "strict" | "legible"

Sets whether the label can be rotated to match the gradient of the connector at that location at which it is positioned. If you supply boolean true here, the label will be made rotatable in "legible" mode, in which VisuallyJs ensures that the label is always easy to read, by avoiding rotating the text so that it is upside down or other awkward to read. You can set "strict" mode, which will rotate the label to the appropriate angle regardless of whether or not it will make the label difficult to read.

lineWidth?​

optional lineWidth: number

Width of the edge path

Inherited from​

LineStyle.lineWidth

mergeStrategy?​

optional mergeStrategy: string

When merging a type description into its parent(s), values in the child for connector, anchor and anchors will always overwrite any such values in the parent. But other values, such as overlays, will be merged with their parent's entry for that key. You can force a child's type to override every corresponding value in its parent by setting mergeStrategy:'override'.

Inherited from​

BaseViewObjectMapping.mergeStrategy

outlineColor?​

optional outlineColor: string

Color to paint the edge's outline path

Inherited from​

LineStyle.outlineColor

outlineWidth?​

optional outlineWidth: number

Width to draw the edge's outline path

Inherited from​

LineStyle.outlineWidth

overlays?​

optional overlays: OverlaySpec[]

Array of overlays to add to edges of this type.

paintStyle?​

optional paintStyle: PaintStyle

Paint style to use for the edge.

parent?​

optional parent: string | string[]

Optional ID of one or more edge definitions to include in this definition. The child definition is merged on top of the parent definition(s). Circular references are not allowed and will throw an error.

Inherited from​

BaseViewObjectMapping.parent

reattach?​

optional reattach: boolean

Whether or not when a user detaches a edge of this type it should be automatically reattached. Defaults to false.

sourceMarker?​

optional sourceMarker: OverlaySpec

Optional overlay to place at the source of an edge of this type. Location will be set to 0 and direction will be set to -1. This is a shorthand for declaring an overlay at location 0 in the overlays array.

targetMarker?​

optional targetMarker: OverlaySpec

Optional overlay to place at the target of an edge of this type. Location will be set to 1 and direction will be set to 1. This is a shorthand for declaring an overlay at location 1 in the overlays array.

useHTMLLabel?​

optional useHTMLLabel: boolean

By default, an SVG element will be used for an edge's label overlay. This is good because the label can be exported as part of an SVG export of your canvas. If you wish to use an HTML element instead, set this flag.