Dependencies
Feature

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 also work in vertical mode:

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:

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

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:

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

Useful configs and functions

Member	Description
dependencyClick	Fires when a dependency line is clicked
dependencyDblClick	Fires on dependency double-click
dependencyContextMenu	Fires on dependency right-click
dependenciesDrawn	Fires after all dependency lines are drawn
dependencyMouseOver	Fires when pointer enters a dependency

Configs

Configs are options you supply in a configuration object when creating an instance of this class

baseCls : Stringb-sch-dependency

private

The CSS class applied to dependency lines
clickWidth : Number5

The clickable/touchable width of the dependency line in pixels. Draws an invisible but wider line along the same path as each dependency, making lines much easier to click and tap on touch devices. The tradeoff is that twice as many SVG lines will be drawn, which can affect performance with many visible dependencies. Set to null to disable the wider hit area and only use the visible line width.

Has a corresponding runtime clickWidth property.
drawAroundParents : Boolean

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.

Has a corresponding runtime drawAroundParents property.
drawOnEventInteraction : Booleantrue

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.

Has a corresponding runtime drawOnEventInteraction property.
drawOnScroll : Booleantrue

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.

Has a corresponding runtime drawOnScroll property.
enableDelete : Booleantrue

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

Has a corresponding runtime enableDelete property.
highlightDependenciesOnEventHover : Boolean

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

Has a corresponding runtime highlightDependenciesOnEventHover property.
immediateRefresh : Booleanfalse

private

By default, the refresh of dependencies is buffered by 10 milliseconds so that multiple changes which may cause the dependency lines to become invalid are coalesced into one refresh. This is more efficient, but may mean the dependency lines may lag behind expectations when moving a pointer.

Set this to true to update dependency lines immediately upon any change which causes them to require an update.

Has a corresponding runtime immediateRefresh property.

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'
        }
    }
});

noMarkerCls : Stringb-sch-dependency-markerless

private

The CSS class applied to a too narrow dependency line (to hide markers)
overCls : Stringb-sch-dependency-over

private

The CSS class to add to a dependency line when hovering over it
radius : Number5
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

Has a corresponding runtime radius property.
removeIconCls : Stringb-icon b-icon-remove-circle

The CSS class representing a delete icon shown when clicking a dependency line
renderer : Function
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;
            }
        }
    }
}
```
Parameters
- context : Object
  
  Renderer context data
- domConfig : DomConfig
  
  that will be used to create the dependency line, can be manipulated by the renderer
- dependencyRecord : DependencyModel
  
  The dependency being rendered
- fromAssignmentRecord : AssignmentModel
  
  Drawing line from this assignment
- toAssignmentRecord : AssignmentModel
  
  Drawing line to this assignment
- 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
- fromBox : Rectangle
  
  Bounds for the fromAssignment's element
- toBox : Rectangle
  
  Bounds for the toAssignment's element
- fromSide : 'top'/'right'/'bottom'/'left'
  
  Drawn from this side of the fromAssignment
- toSide : 'top'/'right'/'bottom'/'left'
  
  Drawn to this side of the fromAssignment
Returns

void
Has a corresponding runtime renderer property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isDependencies : Booleantrue

READONLY

static

ADVANCED

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

clickWidth : Number5

The clickable/touchable width of the dependency line in pixels. Draws an invisible but wider line along the same path as each dependency, making lines much easier to click and tap on touch devices. The tradeoff is that twice as many SVG lines will be drawn, which can affect performance with many visible dependencies. Set to null to disable the wider hit area and only use the visible line width.

Has a corresponding clickWidth config.
drawAroundParents : Boolean

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.

Has a corresponding drawAroundParents config.
drawOnEventInteraction : Booleantrue

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.

Has a corresponding drawOnEventInteraction config.
drawOnScroll : Booleantrue

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.

Has a corresponding drawOnScroll config.
enableDelete : Booleantrue

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

Has a corresponding enableDelete config.
highlightDependenciesOnEventHover : Boolean

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

Has a corresponding highlightDependenciesOnEventHover config.
immediateRefresh : Booleanfalse

private

By default, the refresh of dependencies is buffered by 10 milliseconds so that multiple changes which may cause the dependency lines to become invalid are coalesced into one refresh. This is more efficient, but may mean the dependency lines may lag behind expectations when moving a pointer.

Set this to true to update dependency lines immediately upon any change which causes them to require an update.

Has a corresponding immediateRefresh config.
radius : Number5
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

Has a corresponding radius config.
isDependencies : Booleantrue

READONLY

ADVANCED

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

renderer : Function

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;
            }
        }
    }
}

Has a corresponding renderer config.

Functions

Functions are methods available for calling on the class

deselectDependency( )

Deselects the dependency record
refresh( )

Redraws dependencies on the next animation frame
resolveDependencyRecord( element )
: DependencyModel

Returns the dependency record for a DOM element
selectDependency( element )

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.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

dependenciesDrawn

ON-OWNER

Fired when dependencies are rendered

Note that this event is triggered on the owning widget:
dependencyClick

ON-OWNER

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

Note that this event is triggered on the owning widget:
dependencyContextMenu

ON-OWNER

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

Note that this event is triggered on the owning widget:
dependencyDblClick

ON-OWNER

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

Note that this event is triggered on the owning widget:
dependencyMouseOut

ON-OWNER

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

Note that this event is triggered on the owning widget:
dependencyMouseOver

ON-OWNER

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

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onDependenciesDrawn

ON-OWNER

Called when dependencies are rendered

Note that this handler is called on the owning widget:
onDependencyClick

ON-OWNER

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

Note that this handler is called on the owning widget:
onDependencyContextMenu

ON-OWNER

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

Note that this handler is called on the owning widget:
onDependencyDblClick

ON-OWNER

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

Note that this handler is called on the owning widget:
onDependencyMouseOut

ON-OWNER

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

Note that this handler is called on the owning widget:
onDependencyMouseOver

ON-OWNER

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

Note that this handler is called on the owning widget:

CSS variables

CSS variables that can be set to adjust appearance

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

id: dependencies

Source path

Scheduler/feature/Dependencies.js

Demo

examples/dependencies

Dependencies
Feature

Styling dependency lines

Adjusting terminals

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree3

Mixins5

Contents

Dependencies Feature

Styling dependency lines

Adjusting terminals

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree3

Mixins5

Contents

Dependencies
Feature