Skip to main content

PaletteComponent

Properties​

allowClickToAdd?​

optional allowClickToAdd: 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 approach also still works)

allowDropOnCanvas?​

optional allowDropOnCanvas: boolean

Defaults to true. Allows items to be dropped onto whitespace.

Input​

allowDropOnEdge?​

optional allowDropOnEdge: boolean | CanDropOnEdgeFilter = false

Defaults to true. Allows items to be dropped onto edges in the canvas.

Input​

allowDropOnGroup?​

optional allowDropOnGroup: boolean

Defaults to true. Allows items to be dropped onto groups in the canvas.

Input​

allowDropOnNode?​

optional allowDropOnNode: 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.

Input​

allowRotation?​

optional allowRotation: boolean

Whether or not to allow rotation of elements being dragged. Defaults to true.

autoEdgeConnect?​

optional autoEdgeConnect: 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.

Input​

canvasDropFilter?​

optional canvasDropFilter: CanvasDropFilter

Optional filter to test if objects may be dropped on the canvas. This method is invoked at the start of a drag and is passed the candidate drag object's data.

Input​

clickToAddOnly?​

optional clickToAddOnly: 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?​

optional dataGenerator: DataGeneratorFunction

Function to use to generate an initial payload when the user starts to drag something from this component, or taps on an item in tap/draw mode. Optional, and if omitted Visually JS will use a default data generator that extracts data values from any data-vjs-*** attributes on the element being dragged.

Input​

dragSize?​

optional dragSize: Size

Optional size to use for dragged elements.

Input​

groupIdentifier?​

optional groupIdentifier: GroupIdentifierFunction

Optional function to use to determine if the object that is being dragged represents a group. If this function is present, and returns true, then the drag object is considered to be a group. In all other cases the drag object is considered to be a node.

Input​

mode?​

optional mode: PaletteMode

Mode to use - drag or tap. Defaults to drag.

Input​

onVertexAdded?​

optional onVertexAdded: OnVertexAddedCallback

Optional callback for when a new vertex has been added via this component.

Input​

rotationSpeed?​

optional rotationSpeed: 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?​

optional selectAfterAdd: boolean

Defaults to false. When true, a newly added vertex is set as the model's current selection.

Input​

selector?​

optional selector: string

CSS3 selector identifying the child elements of the the element on which this directive was declared that act as drag sources. Optional; if omitted Visually JS will use [data-vjs-type].

Input​

typeGenerator?​

optional typeGenerator: TypeGeneratorFunction

Optional function to use to determine the type of object that a user has just started dragging or tapped on

Input​