Interface JsPlumbToolkitOptions

Constructor options for a Toolkit instance.

interface JsPlumbToolkitOptions {
    autoSave?: boolean;
    autoSaveDebounceTimeout?: number;
    autoSaveHandler?: ((instance) => any);
    autoSaveType?: string;
    beforeConnect?: BeforeConnectInterceptor;
    beforeDetach?: BeforeDetachInterceptor;
    beforeMoveConnection?: BeforeMoveConnectionInterceptor;
    beforeStartConnect?: BeforeStartConnectInterceptor;
    beforeStartDetach?: BeforeStartDetachInterceptor;
    data?: any;
    defaultCost?: number;
    defaultDirected?: boolean;
    doNotUpdateOriginalData?: boolean;
    edgeIdFunction?: IdFunction;
    edgeTypeFunction?: TypeFunction;
    edgeTypeProperty?: string;
    idFunction?: IdFunction;
    maxSelectedEdges?: number;
    maxSelectedGroups?: number;
    maxSelectedNodes?: number;
    modelHeightAttribute?: string;
    modelLeftAttribute?: string;
    modelTopAttribute?: string;
    modelWidthAttribute?: string;
    onAfterAutoSave?: (() => any);
    onAutoSaveError?: (() => any);
    onAutoSaveSuccess?: (() => any);
    onBeforeAutoSave?: (() => any);
    portDataProperty?: string;
    portExtractor?: ((o) => ObjectData[]);
    portIdFunction?: IdFunction;
    portOrderProperty?: string;
    portSeparator?: string;
    portTypeFunction?: TypeFunction;
    portTypeProperty?: string;
    portUpdater?: Function;
    saveHeaders?: any;
    saveUrl?: string;
    selectionCapacityPolicy?: string;
    selectionMode?: "mixed" | "isolated" | "nodesOnly" | "groupsOnly" | "edgesOnly";
    typeFunction?: TypeFunction;
    typeProperty?: string;
    undoRedo?: {
        enabled?: boolean;
        maximumSize?: number;
    };
}

Properties

autoSave? autoSaveDebounceTimeout? autoSaveHandler? autoSaveType? beforeConnect? beforeDetach? beforeMoveConnection? beforeStartConnect? beforeStartDetach? data? defaultCost? defaultDirected? doNotUpdateOriginalData? edgeIdFunction? edgeTypeFunction? edgeTypeProperty? idFunction? maxSelectedEdges? maxSelectedGroups? maxSelectedNodes? modelHeightAttribute? modelLeftAttribute? modelTopAttribute? modelWidthAttribute? onAfterAutoSave? onAutoSaveError? onAutoSaveSuccess? onBeforeAutoSave? portDataProperty? portExtractor? portIdFunction? portOrderProperty? portSeparator? portTypeFunction? portTypeProperty? portUpdater? saveHeaders? saveUrl? selectionCapacityPolicy? selectionMode? typeFunction? typeProperty? undoRedo?

Properties

Optional autoSave

autoSave?: boolean

Whether or not to automatically save the data when an update to a model object occurs. If you set this then you need to provide saveUrl or autoSaveHandler.

Optional autoSaveDebounceTimeout

autoSaveDebounceTimeout?: number

A debounce timeout to use when the autoSave functionality is turned on. You can use this to reduce the number of calls to your auto save endpoint.

Optional autoSaveHandler

autoSaveHandler?: ((instance) => any)

A handler for the auto save operation. You need to provide this or saveUrl if you set autoSave:true.

Type declaration

Optional autoSaveType

autoSaveType?: string

Optional type to use for auto save. Defaults to "json", the default input/output format the Toolkit uses. If you have registered your own exporter you can use this parameter to instruct the Toolkit to auto save via that exporter.

Optional beforeConnect

beforeConnect?: BeforeConnectInterceptor

Definition of a function to use as a beforeConnect interceptor.

Param: source

The source vertex for the new edge

Param: target

The target vertex for the new edge

Param: userInstigated

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 the Toolkit.

Optional beforeDetach

beforeDetach?: BeforeDetachInterceptor

A function to run before the given edge is detached from the given source vertex. If this method returns false, the detach will be aborted.

Param: source

Edge's source.

Param: target

Candidate target for the edge

Param: edge

The edge that is being detached.

Optional beforeMoveConnection

beforeMoveConnection?: BeforeMoveConnectionInterceptor

A function to run before an edge of the given type is relocated from its current source or target to a new source or target. Returning false from this method will abort the move.

Param: source

Candidate source. May be the edge's current source, or may be a new source.

Param: target

Candidate target. May be the edge's current target, or may be a new target.

Param: edge

The edge that is being moved.

Optional beforeStartConnect

beforeStartConnect?: BeforeStartConnectInterceptor

A function to run before an edge of the given type is dragged from the given source. Returning false from this method will abort the connection.

Param: source

Param: type

Optional beforeStartDetach

beforeStartDetach?: BeforeStartDetachInterceptor

A function to run before the given edge is detached from the given source vertex. If this method returns false, the detach will be aborted. The difference between this and beforeDetach is that this method is fired as soon as a user tries to detach an edge from an endpoint in the UI, whereas beforeDetach allows a user to detach the edge in the UI.

Param: source

Param: edge

Optional data

data?: any

Data to load directly after Toolkit has been created.

Optional defaultCost

defaultCost?: number

The default cost for an edge. Default value is 1.

Optional defaultDirected

defaultDirected?: boolean

Whether edges are directed by default. The default value for this is true - edges are directed by default.

Optional doNotUpdateOriginalData

doNotUpdateOriginalData?: boolean

Sets whether or not the Toolkit manipulates the original dataset when updates are made. Defaults to true.

See

setDoNotUpdateOriginalData

Optional edgeIdFunction

edgeIdFunction?: IdFunction

A function to use to determine the ID of some edge from its data. By default the Toolkit uses the value of the object's id property.

Optional edgeTypeFunction

edgeTypeFunction?: TypeFunction

A function to use to determine the type of some edge from its data object. By default the Toolkit uses the value of the object's type property.

Optional edgeTypeProperty

edgeTypeProperty?: string

The name of the property that identifies a given edge's type. By default this is the type property. If you do not set this but you do set typeProperty, that value will be used.

Optional idFunction

idFunction?: IdFunction

A function to use to determine the ID of some data object. By default the Toolkit uses the value of the object's id property.

Optional maxSelectedEdges

maxSelectedEdges?: number

The maximum number of edges that can be selected at any one time. Defaults to Infinity.

Optional maxSelectedGroups

maxSelectedGroups?: number

The maximum number of groups that can be selected at any one time. Defaults to Infinity.

Optional maxSelectedNodes

maxSelectedNodes?: number

The maximum number of nodes that can be selected at any one time. Defaults to Infinity.

Optional modelHeightAttribute

modelHeightAttribute?: string

The name of the property inside a vertex's data that identifies its height. Defaults to height.

Optional modelLeftAttribute

modelLeftAttribute?: string

The name of the property inside a vertex's data that identifies its location in the y axis. Defaults to top.

Optional modelTopAttribute

modelTopAttribute?: string

The name of the property inside a vertex's data that identifies its location in the x axis. Defaults to left.

Optional modelWidthAttribute

modelWidthAttribute?: string

The name of the property inside a vertex's data that identifies its width. Defaults to width.

Optional onAfterAutoSave

onAfterAutoSave?: (() => any)

A function to run after the auto save has run.

Type declaration

    • (): any

    • Returns any

Optional onAutoSaveError

onAutoSaveError?: (() => any)

A function to call when an auto save operation experienced an error.

Type declaration

    • (): any

    • Returns any

Optional onAutoSaveSuccess

onAutoSaveSuccess?: (() => any)

A function to call when an auto save operation was successful.

Type declaration

    • (): any

    • Returns any

Optional onBeforeAutoSave

onBeforeAutoSave?: (() => any)

A function to run before auto save runs.

Type declaration

    • (): any

    • Returns any

Optional portDataProperty

portDataProperty?: string

The name of a property that will exist inside the backing data for nodes/group, and which represents a list of ports pertaining to that node/group. When a node/group is rendered, if this property is set, the Toolkit will consider the value of this property to be a list of port data object. So this property's value should be of type Array<ObjectData>

Optional portExtractor

portExtractor?: ((o) => ObjectData[])

A function to use to extract an array of ports from the data representing some node/group. Whenever a node/group is rendered, the Toolkit will use this method, if provided, to determine a list of ports for that node/group. If you use this you probably also want to define a portUpdater. Note that if you provide the portDataProperty then you do not need to set this.

Type declaration

    • (o): ObjectData[]

    • Parameters

      • o: ObjectData

      Returns ObjectData[]

Optional portIdFunction

portIdFunction?: IdFunction

A function to use to determine the ID of some port from its data. By default the Toolkit uses the value of the object's id property.

Optional portOrderProperty

portOrderProperty?: string

The name of a property inside of each port's data that can be used to order the ports. For instance, you might have ports that have a rank property, which is a number. The Toolkit will sort the ports according to the natural ordering of this property.

Optional portSeparator

portSeparator?: string

The character to use in port identifiers. Defaults to ., eg. someVertex.somePort.

Optional portTypeFunction

portTypeFunction?: TypeFunction

A function to use to determine the type of some port from its data object. By default the Toolkit uses the value of the object's type property.

Optional portTypeProperty

portTypeProperty?: string

The name of the property that identifies a given port's type. By default this is the type property. If you do not set this but you do set typeProperty, that value will be used.

Optional portUpdater

portUpdater?: Function

A function to use to update a given node/group's list of ports. Note that if you provide the portDataProperty then you do not need to set this.

Optional saveHeaders

saveHeaders?: any

A map of HTTP headers to send along with an auto save request.

Optional saveUrl

saveUrl?: string

URL for auto save endpoint.

Optional selectionCapacityPolicy

selectionCapacityPolicy?: string

Defines the action taken when appending an object that would take the selection above its limit for the given object type. This can be either Selection.DISCARD_EXISTING (the default) or Selection.DISCARD_NEW.

Optional selectionMode

selectionMode?: "mixed" | "isolated" | "nodesOnly" | "groupsOnly" | "edgesOnly"

Optional mode for the Toolkit's current selection. Defaults to the Selection default - SelectionModes.mixed.

Optional typeFunction

typeFunction?: TypeFunction

A function to use to determine the type of some data object. By default the Toolkit uses the value of the object's type property.

Optional typeProperty

typeProperty?: string

The name of the property that identifies a given object's type. By default this is the type property.

Optional undoRedo

undoRedo?: {
    enabled?: boolean;
    maximumSize?: number;
}

Configuration for undo/redo

Type declaration

  • Optional enabled?: boolean

    Whether or not undo/redo is enabled. Defaults to true.

  • Optional maximumSize?: number

    Maximum size of the undo stack. Defaults to 50.

Settings

Member Visibility

Theme

On This Page

autoSaveautoSaveDebounceTimeoutautoSaveHandlerautoSaveTypebeforeConnectbeforeDetachbeforeMoveConnectionbeforeStartConnectbeforeStartDetachdatadefaultCostdefaultDirecteddoNotUpdateOriginalDataedgeIdFunctionedgeTypeFunctionedgeTypePropertyidFunctionmaxSelectedEdgesmaxSelectedGroupsmaxSelectedNodesmodelHeightAttributemodelLeftAttributemodelTopAttributemodelWidthAttributeonAfterAutoSaveonAutoSaveErroronAutoSaveSuccessonBeforeAutoSaveportDataPropertyportExtractorportIdFunctionportOrderPropertyportSeparatorportTypeFunctionportTypePropertyportUpdatersaveHeaderssaveUrlselectionCapacityPolicyselectionModetypeFunctiontypePropertyundoRedo