PaletteComponentProps
Extends
DOMAttributes<HTMLDivElement>
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)
allowDropOnCanvas?
optionalallowDropOnCanvas:boolean
Whether or not to allow drop on whitespace in the canvas. Defaults to true.
allowDropOnEdge?
optionalallowDropOnEdge:boolean|CanDropOnEdgeFilter
Whether or not to allow drop on edge. Defaults to false.
allowDropOnGroup?
optionalallowDropOnGroup:boolean
Whether or not to allow drop on existing vertices. Defaults to true.
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.
allowRotation?
optionalallowRotation:boolean
Whether or not to allow rotation of elements being dragged. Defaults to true.
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.
canvasDropFilter?
optionalcanvasDropFilter:CanvasDropFilter
Optional filter to use to decide at run time which elements may be dragged/dropped
className?
optionalclassName:string
Optional class name to set on the component's root element.
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.
dataGenerator?
optionaldataGenerator:DataGeneratorFunction
Function to invoke to get a payload for an element that is being dragged/has been tapped. Defaults to a function that extracts type from the element via its data-vjs-type attribute.
dragSize?
optionaldragSize:Size
Optional size for elements dragged from the palette; used in drag mode only.
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.
mode?
optionalmode:PaletteMode
Mode to operate in - 'drag', 'tap' or 'draw'. Defaults to 'drag'.
onVertexAdded?
optionalonVertexAdded:OnVertexAddedCallback
Optional function to invoke after a vertex has been added
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.
selectAfterAdd?
optionalselectAfterAdd:boolean
Defaults to false. When true, a newly added vertex is set as the model's current selection.
selector?
optionalselector:string
CSS selector identifying draggable elements. Defaults to '[data-vjs-type]'
showGroups?
optionalshowGroups:boolean
Whether or not to show groups in the palette. Defaults to true.