Dependencies

Feature that draws dependencies between events. Uses a DependencyStore to determine which dependencies to draw, if none is defined one will be created automatically. Dependencies can also be specified as scheduler.dependencies, see example below:

Dependencies

//<code-header>
fiddle.title = 'Dependencies';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    // makes scheduler as high as it needs to be to fit rows
    autoHeight : true,

    startDate : new Date(2018, 4, 6),
    endDate   : new Date(2018, 4, 13),

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ],

    resources : [
        { id : 1, name : 'Bernard' },
        { id : 2, name : 'Bianca' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Interview', startDate : '2018-05-06', endDate : '2018-05-07' },
        { id : 2, resourceId : 1, name : 'Press meeting', startDate : '2018-05-08', endDate : '2018-05-09' },
        { id : 3, resourceId : 2, name : 'Audition', startDate : '2018-05-07', endDate : '2018-05-09' },
        { id : 4, resourceId : 2, name : 'Script deadline', startDate : '2018-05-11', endDate : '2018-05-11' }
    ],

    features : {
        dependencies : {
            clickWidth : 15
        },
        dependencyMenu : true,
        dependencyEdit : {
            editorConfig : {
                items : {
                    // Custom label for the type field
                    typeField : {
                        label : 'Kind'
                    }
                },

                bbar : {
                    items : {
                        // Hiding save button
                        saveButton : {
                            hidden : true
                        }
                    }
                }
            }
        }
    },

    dependencies : [
        { id : 1, from : 1, to : 2, cls : 'dev-path' },
        { id : 2, from : 2, to : 4 }
    ]
});

Dependencies also work in vertical mode:

Dependencies vertical

//<code-header>
fiddle.title = 'Dependencies vertical';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    height : '22em',

    startDate : new Date(2022, 4, 1),
    endDate   : new Date(2022, 4, 7),
    mode      : 'vertical',

    resources : [
        { id : 1, name : 'Greta' },
        { id : 2, name : 'Ingrid' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Interview', startDate : '2022-05-02', endDate : '2022-05-03' },
        { id : 2, resourceId : 1, name : 'Press meeting', startDate : '2022-05-04', endDate : '2022-05-05' },
        { id : 3, resourceId : 2, name : 'Audition', startDate : '2022-05-03', endDate : '2022-05-05' }
    ],

    features : {
        dependencies   : true,
        dependencyEdit : true
    },

    dependencies : [
        { id : 1, from : 1, to : 2 },
        { id : 2, from : 1, to : 3, fromSide : 'right' }
    ]
});

To customize the dependency tooltip, you can use the tooltipTemplate. For example:

const scheduler = new Scheduler({
    features : {
        dependencies : {
            tooltipTemplate(dependencyModel) {
                const { fromEvent, toEvent } = dependencyModel;

                return `${fromEvent.name} (${fromEvent.id}) -> ${toEvent.name} (${toEvent.id})`;
            }
        }
    }
}

Styling dependency lines

You can easily customize the arrows drawn between events. To change all arrows, apply the following basic SVG CSS:

.b-sch-dependency {
   stroke-width: 2;
   stroke : red;
}

.b-sch-dependency-arrow {
    fill: red;
}

To style an individual dependency line, you can provide a cls in your data:

{
    "id"   : 9,
    "from" : 7,
    "to"   : 8,
    "cls"  : "special-dependency"
}

// Make line dashed
.b-sch-dependency.special-dependency {
   stroke-dasharray: 5, 5;
}

To customize the marker used for the lines (the arrow header), you can supply a SVG path definition to the markerDef config:

Dependencies marker

//<code-header>
fiddle.title = 'Dependencies marker';
//</code-header>
CSSHelper.insertRule(`.b-sch-dependency.b-sch-dependency-special {
   stroke-dasharray: 5, 5;
   stroke : orange;
}`, targetElement.getRootNode());

const scheduler = new Scheduler({
    appendTo : targetElement,

    // makes scheduler as high as it needs to be to fit rows
    autoHeight : true,

    startDate : new Date(2018, 4, 6),
    endDate   : new Date(2018, 4, 13),

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ],

    features : {
        dependencies : {
            // Circular arrow heads (marker)
            markerDef : 'M 2,3 a 3,3 0 1,0 6,0 a 3,3 0 1,0 -6,0'
        }
    },

    resources : [
        { id : 1, name : 'Bernard' },
        { id : 2, name : 'Bianca' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Interview', startDate : '2018-05-06', endDate : '2018-05-07' },
        { id : 2, resourceId : 1, name : 'Press meeting', startDate : '2018-05-08', endDate : '2018-05-09' },
        { id : 3, resourceId : 2, name : 'Audition', startDate : '2018-05-07', endDate : '2018-05-09' },
        { id : 4, resourceId : 2, name : 'Script deadline', startDate : '2018-05-11', endDate : '2018-05-11' }
    ],

    dependencies : [
        { id : 1, from : 1, to : 2, cls : 'b-sch-dependency-special' },
        { id : 2, from : 2, to : 4 }
    ]
});

You can also specify a radius to get lines with rounded "corners", for a less boxy look:

Dependencies radius

//<code-header>
fiddle.title = 'Dependencies radius';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    // makes scheduler as high as it needs to be to fit rows
    autoHeight : true,

    startDate : new Date(2018, 4, 6),
    endDate   : new Date(2018, 4, 13),

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ],

    resources : [
        { id : 1, name : 'Bernard' },
        { id : 2, name : 'Bianca' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Interview', startDate : '2018-05-06', endDate : '2018-05-07', style : 'border-radius:5px' },
        { id : 2, resourceId : 1, name : 'Press meeting', startDate : '2018-05-08', endDate : '2018-05-09', style : 'border-radius:5px' },
        { id : 3, resourceId : 2, name : 'Audition', startDate : '2018-05-07', endDate : '2018-05-09', style : 'border-radius:5px' },
        { id : 4, resourceId : 2, name : 'Script deadline', startDate : '2018-05-11', endDate : '2018-05-11', style : 'border-radius:5px' }
    ],

    features : {
        dependencies : {
            radius : 15
        }
    },

    dependencies : [
        { id : 1, from : 1, to : 3 },
        { id : 2, from : 2, to : 4 }
    ]
});

For advanced use cases, you can also manipulate the DomConfig used to create a dependency line in a renderer function.

Adjusting terminals

When hovering an event bar, terminals (connection points) for creating new dependencies are shown. By default, they have a diameter of 12px and are positioned at the edge of the event bar. You can customize this by setting terminalSize and terminalOffset. The example below uses larger terminals offset to outside the event bar:

Dependencies terminals

//<code-header>
fiddle.title = 'Dependencies terminals';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    // makes scheduler as high as it needs to be to fit rows
    autoHeight : true,

    startDate : new Date(2023, 4, 7),
    endDate   : new Date(2023, 4, 14),

    eventStyle     : 'outlined',
    resourceMargin : 20,
    rowHeight      : 70,

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ],

    resources : [
        { id : 1, name : 'Bernard' },
        { id : 2, name : 'Bianca' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Interview', startDate : '2023-05-08', endDate : '2023-05-09' },
        { id : 2, resourceId : 1, name : 'Press meeting', startDate : '2023-05-10', endDate : '2023-05-11' },
        { id : 3, resourceId : 2, name : 'Audition', startDate : '2023-05-09', endDate : '2023-05-11' },
        { id : 4, resourceId : 2, name : 'Script deadline', startDate : '2023-05-12', endDate : '2023-05-12' }
    ],

    features : {
        dependencies : {
            terminalSize   : 16,
            terminalOffset : 8,
            radius         : 5
        }
    },

    dependencies : [
        { id : 1, from : 1, to : 3 }
    ]
});

This feature is disabled by default. For info on enabling it, see GridFeatures.

Configs

Common

disabledInstancePlugin

listenersEvents

Other

clickWidth: NumberAlso a property

The clickable/touchable width of the dependency line in pixels. Setting this to a number greater than 1 will draw an invisible but clickable line along the same path as the dependency line, making it easier to click. The tradeoff is that twice as many lines will be drawn, which can affect performance.

drawAroundParents: BooleanAlso a property

Experimental - This setting only applies when using dependencies with the nested events feature. In such scenarios, enabling this config will cause the dependency lines to, when the algorithm determines it is possible, be drawn around parent events, instead of through them.

Note that enabling this feature increases the complexity of dependency drawing, and it does have a negative impact on performance.

drawOnEventInteraction: Boolean= trueAlso a property

Specify false to prevent dependencies from being redrawn during event interaction, such as dragging, resizing or rescheduling through other means, including when events animate into place. This makes interaction smoother, but dependency lines will not be updated until the interaction is finished.

drawOnScroll: Boolean= trueAlso a property

Specify false to prevent dependencies from being drawn during scroll, for smoother scrolling in schedules with lots of dependencies. Dependencies will be drawn when scrolling stops instead.

enableDelete: Boolean= trueAlso a property

Specify false to not enable simple deletion of dependencies by clicking on them.

highlightDependenciesOnEventHover: BooleanAlso a property

Specify true to highlight incoming and outgoing dependencies when hovering an event.

markerDef: String= 'M3,0 L3,6 L9,3 z'

SVG path definition used as marker (arrow head) for the dependency lines. Should fit in a viewBox that is 9 x 6.

const scheduler = new Scheduler({
    features : {
        dependencies : {
            // Circular marker
            markerDef : 'M 2,3 a 3,3 0 1,0 6,0 a 3,3 0 1,0 -6,0'
        }
    }
});

radius: Number= 5Also a property

Radius (in px) used to draw arcs where dependency line segments connect. Specify it to get a rounded look. The radius will during drawing be reduced as needed on a per segment basis to fit lines.

const scheduler = new Scheduler({
    features : {
        dependencies : {
            // Round the corner where line segments connect, similar to 'border-radius: 5px'
            radius : 5
        }
    }
});

Using a radius slightly degrades dependency rendering performance. If your app displays a lot of dependencies, it might be worth taking this into account when deciding if you want to use radius or not

removeIconCls: String= b-icon b-icon-remove-circle

The CSS class representing a delete icon shown when clicking a dependency line

catchEventHandlerExceptionsEvents

showLagInTooltipDependencyTooltip

Rendering

renderer: functionAlso a property

Renderer function, supply one if you want to manipulate the DomConfig object used to draw a dependency line between two assignments.

const scheduler = new Scheduler({
    features : {
        dependencies : {
            renderer({ domConfig, fromAssignmentRecord : from, toAssignmentRecord : to }) {
                // Add a custom CSS class to dependencies between important assignments
                domConfig.class.important = from.important || to.important;
                domConfig.class.veryImportant = from.important && to.important;
            }
        }
    }
}

Parameter	Type	Description
`renderData`	Object
`renderData.domConfig`	DomConfig	that will be used to create the dependency line, can be manipulated by the renderer
`renderData.dependencyRecord`	DependencyModel	The dependency being rendered
`renderData.fromAssignmentRecord`	AssignmentModel	Drawing line from this assignment
`renderData.toAssignmentRecord`	AssignmentModel	Drawing line to this assignment
`renderData.points`	Object[]	A collection of points making up the line segments for the dependency line. Read-only in the renderer, any manipulation should be done to `domConfig`
`renderData.fromBox`	Rectangle	Bounds for the fromAssignment's element
`renderData.toBox`	Rectangle	Bounds for the toAssignment's element
`renderData.fromSide`	top \| right \| bottom \| left	Drawn from this side of the fromAssignment
`renderData.toSide`	top \| right \| bottom \| left	Drawn to this side of the fromAssignment

Returns: void

Dependency creation

allowCreateDependencyCreation

allowCreateOnlyParentDependencyCreation

allowDropOnEventBarDependencyCreation

creationTooltipDependencyCreation

creationTooltipTemplateDependencyCreation

showCreationTooltipDependencyCreation

Dependency terminals

terminalClsDependencyCreation

terminalHideDelayDependencyCreation

terminalOffsetDependencyCreation

terminalShowDelayDependencyCreation

terminalSidesDependencyCreation

terminalSizeDependencyCreation

Dependency tooltip

showTooltipDependencyTooltip

tooltipDependencyTooltip

tooltipTemplateDependencyTooltip

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isDependencies: Boolean= truereadonly

Identifies an object as an instance of Dependencies class, or subclass thereof.

isDependencies: Boolean= truereadonlystatic

Identifies an object as an instance of Dependencies class, or subclass thereof.

isDelayableDelayable

isDependencyCreationDependencyCreation

isDependencyTooltipDependencyTooltip

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

clickWidth: NumberAlso a config

drawAroundParents: BooleanAlso a config

Note that enabling this feature increases the complexity of dependency drawing, and it does have a negative impact on performance.

drawOnEventInteraction: Boolean= trueAlso a config

drawOnScroll: Boolean= trueAlso a config

Specify false to prevent dependencies from being drawn during scroll, for smoother scrolling in schedules with lots of dependencies. Dependencies will be drawn when scrolling stops instead.

enableDelete: Boolean= trueAlso a config

Specify false to not enable simple deletion of dependencies by clicking on them.

highlightDependenciesOnEventHover: BooleanAlso a config

Specify true to highlight incoming and outgoing dependencies when hovering an event.

radius: Number= 5Also a config

Radius (in px) used to draw arcs where dependency line segments connect. Specify it to get a rounded look. The radius will during drawing be reduced as needed on a per segment basis to fit lines.

const scheduler = new Scheduler({
    features : {
        dependencies : {
            // Round the corner where line segments connect, similar to 'border-radius: 5px'
            radius : 5
        }
    }
});

catchEventHandlerExceptionsEvents

Rendering

renderer: functionAlso a config

Renderer function, supply one if you want to manipulate the DomConfig object used to draw a dependency line between two assignments.

const scheduler = new Scheduler({
    features : {
        dependencies : {
            renderer({ domConfig, fromAssignmentRecord : from, toAssignmentRecord : to }) {
                // Add a custom CSS class to dependencies between important assignments
                domConfig.class.important = from.important || to.important;
                domConfig.class.veryImportant = from.important && to.important;
            }
        }
    }
}

Parameter	Type	Description
`renderData`	Object
`renderData.domConfig`	DomConfig	that will be used to create the dependency line, can be manipulated by the renderer
`renderData.dependencyRecord`	DependencyModel	The dependency being rendered
`renderData.fromAssignmentRecord`	AssignmentModel	Drawing line from this assignment
`renderData.toAssignmentRecord`	AssignmentModel	Drawing line to this assignment
`renderData.points`	Object[]	A collection of points making up the line segments for the dependency line. Read-only in the renderer, any manipulation should be done to `domConfig`
`renderData.fromBox`	Rectangle	Bounds for the fromAssignment's element
`renderData.toBox`	Rectangle	Bounds for the toAssignment's element
`renderData.fromSide`	top \| right \| bottom \| left	Drawn from this side of the fromAssignment
`renderData.toSide`	top \| right \| bottom \| left	Drawn to this side of the fromAssignment

Returns: void

Dependency creation

allowDropOnEventBarDependencyCreation

creationTooltipTemplateDependencyCreation

Dependency terminals

terminalHideDelayDependencyCreation

terminalOffsetDependencyCreation

terminalShowDelayDependencyCreation

terminalSizeDependencyCreation

Dependency tooltip

showTooltipDependencyTooltip

tooltipTemplateDependencyTooltip

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Functions

Other

deselectDependency

Deselects the dependency record

refresh

Redraws dependencies on the next animation frame

resolveDependencyRecord

Returns the dependency record for a DOM element

Parameter	Type	Description
`element`	HTMLElement	The dependency line element

Returns: DependencyModel -

The dependency record

selectDependency

Selects and visually highlights (by adding a b-selected CSS class) the elements of a dependency record, optionally showing a delete icon if enableDelete is true.

Parameter	Type	Description
`element`	DependencyModel	The dependency record

addListenerEvents

createOnFrameDelayable

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Configuration

applyDefaultsstaticBase

Dependency creation

abortDependencyCreation

hideTerminalsDependencyCreation

showTerminalsDependencyCreation

Events

detachListenersBase

Lifecycle

constructBase

constructorBase

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Events

dependenciesDrawn

Fired when dependencies are rendered

// Adding a listener using the "on" method
dependencies.on('dependenciesDrawn', ({  }) => {

});

dependencyClick

Fires on the owning Scheduler/Gantt when a click is registered on a dependency line.

// Adding a listener using the "on" method
dependencies.on('dependencyClick', ({ source, dependency, event }) => {

});

Parameter	Type	Description
`source`	Scheduler	The scheduler
`dependency`	DependencyModel
`event`	MouseEvent

dependencyContextMenu

Fires on the owning Scheduler/Gantt when a context menu event is registered on a dependency line.

// Adding a listener using the "on" method
dependencies.on('dependencyContextMenu', ({ source, dependency, event }) => {

});

Parameter	Type	Description
`source`	Scheduler	The scheduler
`dependency`	DependencyModel
`event`	MouseEvent

dependencyDblClick

Fires on the owning Scheduler/Gantt when a double click is registered on a dependency line.

// Adding a listener using the "on" method
dependencies.on('dependencyDblClick', ({ source, dependency, event }) => {

});

Parameter	Type	Description
`source`	Scheduler	The scheduler
`dependency`	DependencyModel
`event`	MouseEvent

dependencyMouseOut

Fires on the owning Scheduler/Gantt when the mouse moves out of a dependency line.

// Adding a listener using the "on" method
dependencies.on('dependencyMouseOut', ({ source, dependency, event }) => {

});

Parameter	Type	Description
`source`	Scheduler	The scheduler
`dependency`	DependencyModel
`event`	MouseEvent

dependencyMouseOver

Fires on the owning Scheduler/Gantt when the mouse moves over a dependency line.

// Adding a listener using the "on" method
dependencies.on('dependencyMouseOver', ({ source, dependency, event }) => {

});

Parameter	Type	Description
`source`	Scheduler	The scheduler
`dependency`	DependencyModel
`event`	MouseEvent

afterDependencyCreateDropDependencyCreation

beforeDependencyCreateDragDependencyCreation

beforeDependencyCreateFinalizeDependencyCreation

beforeDestroyEvents

beforeShowTerminalsDependencyCreation

catchAllEvents

dependencyCreateDragStartDependencyCreation

dependencyCreateDropDependencyCreation

dependencyValidationCompleteDependencyCreation

dependencyValidationStartDependencyCreation

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onDependenciesDrawn

Called when dependencies are rendered

new Dependencies({
    onDependenciesDrawn({  }) {

    }
});

onDependencyClick

Called on the owning Scheduler/Gantt when a click is registered on a dependency line.

new Dependencies({
    onDependencyClick({ source, dependency, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	The scheduler
`dependency`	DependencyModel
`event`	MouseEvent

onDependencyContextMenu

Called on the owning Scheduler/Gantt when a context menu event is registered on a dependency line.

new Dependencies({
    onDependencyContextMenu({ source, dependency, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	The scheduler
`dependency`	DependencyModel
`event`	MouseEvent

onDependencyDblClick

Called on the owning Scheduler/Gantt when a double click is registered on a dependency line.

new Dependencies({
    onDependencyDblClick({ source, dependency, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	The scheduler
`dependency`	DependencyModel
`event`	MouseEvent

onDependencyMouseOut

Called on the owning Scheduler/Gantt when the mouse moves out of a dependency line.

new Dependencies({
    onDependencyMouseOut({ source, dependency, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	The scheduler
`dependency`	DependencyModel
`event`	MouseEvent

onDependencyMouseOver

Called on the owning Scheduler/Gantt when the mouse moves over a dependency line.

new Dependencies({
    onDependencyMouseOver({ source, dependency, event }) {

    }
});

Parameter	Type	Description
`source`	Scheduler	The scheduler
`dependency`	DependencyModel
`event`	MouseEvent

onAfterDependencyCreateDropDependencyCreation

onBeforeDependencyCreateDragDependencyCreation

onBeforeDependencyCreateFinalizeDependencyCreation

onBeforeDestroyEvents

onBeforeShowTerminalsDependencyCreation

onCatchAllEvents

onDependencyCreateDragStartDependencyCreation

onDependencyCreateDropDependencyCreation

onDependencyValidationCompleteDependencyCreation

onDependencyValidationStartDependencyCreation

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

DelayableConfigDelayable

CSS variables

Name	Description
`--b-dependency-zindex`	Dependencies z-index
`--b-dependency-stroke-width`	Dependency stroke width (SVG)
`--b-dependency-hover-stroke-width`	Dependency hover stroke width (SVG)
`--b-dependency-tooltip-terminal-size`	Size of the illustrational terminals in the dependency tooltip
`--b-dependency-color`	Dependency line color (SVG stroke, also used as fill for markers)
`--b-dependency-tooltip-terminal-color`	Color of illustrational terminals in the dependency tooltip
`--b-dependency-tooltip-event-background`	Background of the illustrational events in the dependency tooltip
Selected
`--b-dependency-selected-color`	Dependency line color for selected dependencies (SVG stroke, also used as fill for markers)

Inherited

DependencyCreation16

DependencyTooltip1