PalettePluginOptions
Options for the palette plugin
Extends
Properties
allowClickToAdd?
optionalallowClickToAdd:boolean
When in draw mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drag to draw functionality also still works)
Inherited from
PaletteOptions.allowClickToAdd
allowDropOnCanvas?
optionalallowDropOnCanvas:boolean
Defaults to true. Allows items to be dropped onto whitespace.
Inherited from
PaletteOptions.allowDropOnCanvas
allowDropOnEdge?
optionalallowDropOnEdge:boolean|CanDropOnEdgeFilter
Defaults to false. Allows items to be dropped onto edges in the canvas. A drop on an edge causes that edge to be split, with one edge having the new vertex as a target, and another edge with the new vertex as source.
Inherited from
PaletteOptions.allowDropOnEdge
allowDropOnGroup?
optionalallowDropOnGroup:boolean
Defaults to true. Allows items to be dropped onto groups in the canvas.
Inherited from
PaletteOptions.allowDropOnGroup
allowDropOnNode?
optionalallowDropOnNode:boolean
Defaults to false. Allows items to be dropped onto nodes in the canvas. If this is true and an element is dropped onto a node, the result is the same as if the element has been dropped onto whitespace. Note that when this is false and the user has dragged something over a node, the drag item is still not considered to be over the canvas, and releasing the mouse button at that time will not cause a new node to be added. Use ignoreDropOnNode if that's the behaviour you want.
Inherited from
PaletteOptions.allowDropOnNode
allowRotation?
optionalallowRotation:boolean
Whether or not to allow rotation of elements being dragged. Defaults to true.
Inherited from
autoEdgeConnect?
optionalautoEdgeConnect:boolean|AutoEdgeConnectOptions
Controls whether the palette will automatically connect a new vertex being dragged onto the canvas to existing vertices, if the shape definitions for the new vertex and/or the existing vertices have source/target elements. You can set this to simply 'true', and use defaults, or you can provide values for various options.
Inherited from
PaletteOptions.autoEdgeConnect
canDrop()?
optionalcanDrop: (candidate,target?,onCanvas?) =>boolean
Optional function that is invoked at the start of a drag, and which identifies allowed drop targets. Each target - the canvas, nodes and groups - is passed in turn to this method; returning false indicates that the given target is not valid for that drag.
Parameters
candidate
target?
onCanvas?
boolean
Returns
boolean
Inherited from
canvasDropFilter?
optionalcanvasDropFilter:CanvasDropFilter
Optional function that you can use to inform the Palette that drop should be aborted. This method is invoked at the start of a drag (in drag mode) or when an item is tapped (in tap/draw mode) and is passed the candidate drag object's data.
Inherited from
PaletteOptions.canvasDropFilter
clickToAddOnly?
optionalclickToAddOnly:boolean
This flag relates to "draw" mode, and defaults to false. When true, the palette only supports click to draw new vertices, not drag. This flag is forced to true if the associated UI does not have useModelForSizes set, since there is no point in allowing a user to drag a vertex to some size if its not going to be honoured. When you set this flag and associated UI does have useModelForSizes set, the palette will use default sizes for new nodes/groups.
Inherited from
contentTemplate?
optionalcontentTemplate:string
Optional template that will be used in conjunction with data to generate the HTML content of the palette. The template can return any number of elements (ie. you're not limited to just a single root node)
Inherited from
PaletteOptions.contentTemplate
data?
optionaldata:ObjectData
Optional data that will be used in conjunction with contentTemplate to generate the HTML content of the palette.
Inherited from
dataGenerator?
optionaldataGenerator:DataGeneratorFunction
Optional function to generate an initial payload from an element that has started to be dragged/has been tapped.
Inherited from
dragActiveClass?
optionaldragActiveClass:string
Class to set on the UI canvas and any other drop targets when a new element is being dragged
Inherited from
PaletteOptions.dragActiveClass
dragElementClass?
optionaldragElementClass:string
Class to set on an element being dragged.
Inherited from
PaletteOptions.dragElementClass
dragHoverCannotDropClass?
optionaldragHoverCannotDropClass:string
Class to set on the UI canvas and any other drop targets when a drag element is hovering over it but drop is not allowed.s
Inherited from
PaletteOptions.dragHoverCannotDropClass
dragHoverClass?
optionaldragHoverClass:string
Class to set on the UI canvas and any other drop targets when a drag element is hovering over it.
Inherited from
dragSize?
optionaldragSize:Size
Optional size to use for elements dragged from the palette; used in drag mode only.
Inherited from
dragSizeGenerator()?
optionaldragSizeGenerator: (payload,el) =>Size
Optional function to generate the size to use for some object that is being dragged.
Parameters
payload
el
Returns
Inherited from
PaletteOptions.dragSizeGenerator
edgeDropHandler()?
optionaledgeDropHandler: (newVertex,originalEdge) =>EdgeDropInfo
If allowDropOnEdge is true, this function can be provided, to customise the behaviour of the drop. By default, the new vertex is used as the target of the original edge and the source of the new edge. But you might want to connect to ports on the new vertex, and this method allows you to do that: you can return the ID of a port to use for the existing edge's target, a port ID to use for the new edge's source, a source anchor or a target anchor.
Parameters
newVertex
The newly dropped vertex
originalEdge
The edge that the vertex was dropped on.
Returns
Advanced
Inherited from
PaletteOptions.edgeDropHandler
elementGenerator()?
optionalelementGenerator: (el,e) =>BrowserElement
Optional function you can provide which will be used to generate an element to use for dragging. The default behaviour is to use a clone of the element the user began dragging, but if you provide this method you can customise that.
Parameters
el
e
MouseEvent
Returns
Inherited from
PaletteOptions.elementGenerator
enabled?
optionalenabled:boolean
Defaults to true. Set to false if you wish to instantiate the Palette in a disabled state
Inherited from
groupIdentifier?
optionalgroupIdentifier:GroupIdentifierFunction
Optional function to use to determine if the element being dragged/has been tapped represents a group. If you do not provide this, the default behaviour is to check for the presence of a data-vjs-is-group attribute on the element, with a value of true.
Inherited from
PaletteOptions.groupIdentifier
ignoreDropOnNode?
optionalignoreDropOnNode:boolean
Defaults to false. When true, the palette treats nodes as if they are part of the canvas - a user can drag new items on top of existing nodes and the new item will be added to the canvas. If you want to force your users to drop on canvas whitespace, don't set this. Note that this flag will force allowDropOnNode to false.
Inherited from
PaletteOptions.ignoreDropOnNode
ignoreGrid?
optionalignoreGrid:boolean
Defaults to false. By default this class will conform to any grid in place in the surface to which it is attached when dragging items around.
Inherited from
ignoreZoom?
optionalignoreZoom:boolean
By default, the Palette will apply a scale transform to elements that are being dragged so that they appear at the same size as the UI they're being dragged to. Setting this flag to true will switch off that behaviour.
Inherited from
lassoClass?
optionallassoClass:string
When in 'draw' mode, you can optionally provide a class to set on the lasso used by the vertex drawing plugin.
Inherited from
mode?
optionalmode:PaletteMode
Mode to operate in - 'drag', 'tap' or 'draw'. Defaults to 'drag'.
Inherited from
onDrag?
optionalonDrag:DragFunction
Optional function to invoke as the user is dragging a new element, or has tapped an element and is moving the mouse over the canvas.
Inherited from
onVertexAdded?
optionalonVertexAdded:OnVertexAddedCallback
Optional callback that will be invoked after a new vertex has been dropped and added to the dataset.
Param
Inherited from
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.
Inherited from
selectAfterAdd?
optionalselectAfterAdd:boolean
Defaults to false. When true, a newly added vertex is set as the model's current selection.
Inherited from
selector?
optionalselector:string
A CSS selector identifying children of source that are draggable/can be tapped. If not provided, the Palette will use [data-vjs-type].
Inherited from
source
source:
BrowserElement
The element containing things that will be dragged/tapped.
Inherited from
typeGenerator?
optionaltypeGenerator:TypeGeneratorFunction
Optional function to determine the type of the data object from an element that is being dragged (in drag mode) or has been tapped (in draw/tap mode)
Inherited from
vertexPreviewGenerator()?
optionalvertexPreviewGenerator: (objectType,type,data,p,e) =>BrowserElement
When in draw mode, this function can be used to provide the element shown to the user as a new vertex is being drawn.
Parameters
objectType
string
Group or Node
type
string
The type will map to an item in your view
data
The return value from the dataGenerator
p
Location on the canvas where the mousedown event occurred.
e
MouseEvent
Mouse down event
Returns
Inherited from
PaletteOptions.vertexPreviewGenerator
vertexPreviewUpdater()?
optionalvertexPreviewUpdater: (el,origin,size,data) =>any
When in draw mode this function is repeatedly called as the mouse is dragging a new shape. It provides a hook for you to update the element's appearance. This is only called if you provided a vertexPreviewGenerator and it has returned a valid DOM element at the start of a drag.
Parameters
el
The element you returned from vertexPreviewGenerator.
origin
The canvas location of the new vertex's top/left corner.
size
The current size of the new vertex.
data
The return value from the dataGenerator
Returns
any