Features

Features can be viewed as a set of functionalities that a given element can support. They can enrich the behavior and usability of the diagram model.

SModelElements can have default features that will apply to all model elements that are instance of this SModelElement.Default features are specified in the DEFAULT_FEATURES field, which can be overridden in inherited classes. This way, the default features will be enabled for all instances of the class.

Let’s have a look at the SNodeImpl class and how it implements default features:

export class SNodeImpl extends SConnectableElementImpl implements Selectable, Fadeable, Hoverable {
    static readonly DEFAULT_FEATURES = [connectableFeature, deletableFeature, selectFeature, boundsFeature,
        moveFeature, layoutContainerFeature, fadeFeature, hoverFeedbackFeature, popupFeature];
    ...
}

It is possible to fine-tune the behavior in the dependency injection container by enabling or disabling features for a given model element type.

configureElement('my-node-type', SNodeImpl, RectangularNodeView, {enable: [layoutableChildFeature], disable: [moveFeature]})

To ensure that the required additional properties are present on the model element, Sprotty comes with a set of interfaces to ensure correct implementation in the model element class. These interfaces must extend SModelExtension.

Controls the position adjustment of an element. It is given by the alignment: Point property of an element. It applies a translate to the svg element. This translation is applied in addition to the translation that may be applied by the layout engine.

Interface: Alignable

export interface Alignable extends SModelExtension {
    alignment: Point
}

Controls if the bounds of an element can be calculated and updated. The element needs a position and size.

Interface: BoundsAware

export interface BoundsAware extends SModelExtension{
    bounds: Bounds
}

Controls if an element can be connected to other elements. To be connectable, the element must be an SRoutableElementImpl and have a role of source or target.

Interface: Connectable

export interface Connectable extends SModelExtension{
    canConnect(routable: SRoutableElementImpl, role: 'source' | 'target'): boolean
}

Controls if an element is created on drag. The element needs to implement a createAction method that returns an Action that creates the element.

Interface: CreatingOnDrag

export interface CreatingOnDrag extends SModelExtension {
    createAction(id: string): Action
}

Controls if an element is a decoration. It is generally used to show error or warning markers on model elements.

Interface: Decoration

export interface Decoration extends SModelExtension {}

Controls if an element can be deleted from the diagram. To be deletable, an element needs to be an SChildElementImpl.

Interface: Deletable

export interface Deletable extends SModelExtension {}

Controls if an element is layoutable on an edge. The element must be an SChildElementImpl, its parent must be an SRoutableElementImpl, the element must have the edgePlacement property, and must have the boundsFeature. This is commonly used for labels that are displayed on an edge.

edgePlacement: {
    position: number, // between 0 and 1, from the source (0) to the target (1)
    side: 'bottom' | 'top' | 'left' | 'right' | 'on',
    rotate: boolean,
    offset: number,
    moveMode: 'edge' | 'free' | 'none'
}

Interface: EdgeLayoutable

export interface EdgeLayoutable extends SModelExtension {
    edgePlacement: EdgePlacement
}

Controls if an edge routing can be edited. The edge must be an SRoutableElementImpl.

Controls if a label can be edited. The label must have the text property.

Interface: EditableLabel

export interface EditableLabel extends SModelExtension {
    text: string
    readonly isMultiline?: boolean
    readonly editControlDimension?: Dimension
    readonly editControlPositionCorrection?: Point
}

Controls if an element can be expanded. The element must have the property expanded.

Interface: Expandable

export interface Expandable extends SModelExtension {
    expanded: boolean
}

Controls if an element can be exported. It is enabled by default to the ViewportRootElement making the entire diagram exportable.

Controls if an element can change its opacity. The element must have the opacity property.

Interface: Fadeable

export interface Fadeable extends SModelExtension {
    opacity: number
}

Controls if the element can show hover feedback. The element must have the hoverFeedback property.

Interface: Hoverable

export interface Hoverable extends SModelExtension {
    hoverFeedback: boolean
}

Controls if an element obeys its parent’s layout options. The element must use the boundsFeature.

Interface: LayoutableChild

export interface LayoutableChild extends SModelExtension, BoundsAware {
    layoutOptions?: ModelLayoutOptions
}

Controls if an element can layout its children. The element must have the layout property.

Interface: LayoutContainer

export interface LayoutContainer extends LayoutableChild {
    layout: string
}

Controls if an element is moveable. The element must have the position property.

Interface: Locateable

export interface Locateable extends SModelExtension {
    position: Point
}

Controls if an element has a name. This feature is used during renaming to change the name attribute on the model element.

Interface: Nameable

export interface Nameable extends SModelExtension {
    name: string
}

Controls if an element can be opened.

Controls if an element display a popup on hover.

Controls if an element can be selected. When an element is selected, its selected property is set to true.

Interface: Selectable

export interface Selectable extends SModelExtension {
    selected: boolean
}

Controls if an element is a viewport. The element must be a SModelRootImpl and have the zoom and scroll properties.

Controls if an element has an editable label. The element must have the editableLabel property.

Interface: WithEditableLabel

export interface WithEditableLabel extends SModelExtension {
    readonly editableLabel?: EditableLabel & SModelElementImpl;
}