The mapping for the definition of a group inside a view.

interface ViewGroupOptions {
    allowLoopback?: boolean;
    allowShrinkFromOrigin?: boolean;
    allowVertexLoopback?: boolean;
    anchor?: AnchorSpec;
    anchorPositionFinder?: ((el, pos, vertex, def, evt) => ArrayAnchorSpec);
    anchorPositions?: ObjectAnchorSpec[];
    autoGrow?: boolean;
    autoShrink?: boolean;
    autoSize?: boolean;
    constrain?: boolean;
    defaultSize?: Size;
    dropOverride?: boolean;
    droppable?: boolean;
    elastic?: boolean;
    elementsDraggable?: boolean;
    endpoint?: EndpointSpec;
    events?: ViewEventOptions;
    ghost?: boolean;
    layout?: {
        options?: LayoutParameters;
        type: string;
    maxConnections?: number;
    maxSize?: Size;
    mergeStrategy?: string;
    minSize?: Size;
    orphan?: boolean;
    padding?: number;
    parameters?: Record<string, any>;
    parent?: string | string[];
    prune?: boolean;
    revert?: boolean;
    template?: string;
    templateId?: string;

Hierarchy (view full)


allowLoopback?: boolean

Whether or not to allow edges from this vertex back to itself. Defaults to true. This flag will not prevent an edge from a port back to the node/group to which it belongs - for that, see allowVertexLoopback.

allowShrinkFromOrigin?: boolean

When autoShrink or autoSize is set to true, this is also implicitly true, meaning that a group can be shrunk from its left/top edge. Set this to default if you do not want that behaviour.

allowVertexLoopback?: boolean

Whether or not to allow edges from a port back to the vertex it belongs to. Defaults to true.

anchor?: AnchorSpec

Spec for the anchor to use for connections to children of the group when they are transferred to the group in its collapsed state.

anchorPositionFinder?: ((el, pos, vertex, def, evt) => ArrayAnchorSpec)

Optional function to call on connection drop, to determine the location for the target anchor for the new connection. Returning null from this indicates no preference, and the Toolkit will use its own computed value. Note that the return value from this method is ArrayAnchorSpec, meaning an array in the format [ x, y, orientationX, orientationY, offsetX, offsetY ]. Note also that offsetX and offsetY are optional, and will be defaulted to 0.

Type declaration

anchorPositions?: ObjectAnchorSpec[]

Optional array of anchor positions to use.

autoGrow?: boolean

Defaults to false, meaning that the group will not be resized if an item addition/removal or drag causes the bounds of the child members to change and the new size is greater than the previous size.

autoShrink?: boolean

False by default. If true indicates that if a child member is dragged/added/removed and the group's size is recalculated to be smaller than the previous size, the new size should be applied. From 6.10.0 this also works if the group needs to shrink from its left and/or top edge. If you don't want that behaviour, set allowShrinkFromOrigin to false.

autoSize?: boolean

False by default. From version 6.10.0 onwards this flag switches on both autoShrink and autoGrow and also enables support for shrinking a group from its left or top edge, a feature that was not available in previous versions. If you're on 6.10.0+ and you want to setup your UI to be how it used to be with just this flag set, also set autoShrink to false. If you previously had autoShrink set to true but you don't like the shrink from left/top functionality, set allowShrinkFromOrigin to false.

constrain?: boolean

False by default - nodes/groups may be dragged outside of the bounds of the group. When you do drag a node/group outside of the bounds of its parent, what happens next depends on the other flags you have set and where you have dropped it. orphan:true, for instance, will cause the node/group to be removed from its parent group. revert will reinstate the node/group's position inside its parent, unless it was dropped on another group.

defaultSize?: Size

Optional default size to use for the vertex. This is not used to set the size in the DOM for a vertex - it is used to insert width and height values into the backing data for any vertex of this type that does not have them set.

dropOverride?: boolean

False by default. If true, Nodes dropped onto other Groups first have any rules established by this Group applied. For instance, if the Groups stated prune:true, then the Node would be removed from the dataset rather than be dropped onto another Group.

droppable?: boolean

True by default - indicates that nodes/groups may be dropped onto the group, either from some other group or from the main canvas.

elastic?: boolean

Similar to autoGrow, but with a couple of differences:

  • elements cannot be dragged out of the group, unless the user holds down SHIFT while dragging
  • shows a visual prompt when a group will be resized as a result of
elementsDraggable?: boolean

True by default - indicates that child members may be dragged around inside the group.

endpoint?: EndpointSpec

Spec for the endpoint to use for connections to children of the group when they are transferred to the group in its collapsed state.

events?: ViewEventOptions

Optional map of event bindings.

ghost?: boolean

Whether or not to show a 'ghost' element when an element inside the group is dragged to the point that it extends outside the bounds of the group. The original element remains inside the group. Defaults to false.

layout?: {
    options?: LayoutParameters;
    type: string;

Options for the group's layout.

Type declaration

maxConnections?: number

Maximum number of connections this vertex supports. Default is 1. A value of -1 means no limit.

maxSize?: Size

Maximum size the group can grow to. If not specified the group can grow to an arbitrary size. Note that this behaviour can also be enforced via CSS.

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'.

minSize?: Size

Minimum size the group can be. This is only used when

orphan?: boolean

False by default. If true, nodes/groups dropped outside of the group (and not dropped onto another group) are removed from the group (but remain in the dataset). When you set this to true, revert is automatically forced to false.

padding?: number

Optional padding to set inside a group when computing an auto size.

parameters?: Record<string, any>

A map of parameters that the template engine will merge with the backing data when rendering the vertex.

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.

prune?: boolean

False by default. If true, Nodes dropped outside of the Group (and not dropped onto another Group) are removed from the dataset (not just the Group...the entire dataset).

revert?: boolean

True by default - a node/group dragged outside of its parent group will, unless dropped on another group, revert back to its position inside the group.

template?: string

Template to use for a vertex of this type. This is only for 'vanilla' Toolkit: if you are using an integration such as React/Angular/Vue/Svelte, you will not need to provide this. If you provide this and also templateId, this will take precedence.

templateId?: string

ID of the template to use for a vertex of this type. This is only for 'vanilla' Toolkit: if you are using an integration such as React/Angular/Vue, you will not need to provide this. This parameter is distinct from template in that when you provide templateId you are expecting the Toolkit to resolve the template for you, either from a templates block in a render call, or by looking for a script element in the DOM with the appropriate ID. If you provide this and also template, template will take precedence.