DependencyCreation
Mixin

Mixin for Dependencies feature that handles dependency creation (drag & drop from terminals which are shown on hover). Requires Delayable to be mixed in alongside.

No results

Configs

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

allowCreate : Booleantrue

Set to false to not allow creating dependencies
allowCreateOnlyParent : Booleanfalse

Set it to true to allow dependency creation only for parent events (only applies to Scheduler Pro using the NestedEvents feature). Normally the nested event container inside parent events cannot be scrolled when using dependencies, but by enabling this setting and limiting to where dependencies can be drawn scrolling will be enabled.
allowDropOnEventBar : Booleantrue

false to require a drop on a target event bar side circle to define the dependency type. If dropped on the event bar, the defaultValue of the DependencyModel type field will be used to determine the target task side.

Has a corresponding runtime allowDropOnEventBar property.
creationTooltip : TooltipConfig

A tooltip config object that will be applied to the dependency creation Tooltip
creationTooltipTemplate : Function
A template function that will be called to generate the HTML contents of the dependency creation tooltip. You can return either an HTML string or a DomConfig object.
Parameters
- data : Object
  
  Data about the dependency being created
- source : TimeSpan
  
  The from event
- target : TimeSpan
  
  The target event
- fromSide : String
  
  The from side (start, end, top, bottom)
- toSide : String
  
  The target side (start, end, top, bottom)
- valid : Boolean
  
  The validity of the dependency
Returns

String/DomConfig
Has a corresponding runtime creationTooltipTemplate property.
showCreationTooltip : Booleantrue

false to not show a tooltip while creating a dependency
terminalCls : Stringb-sch-terminal

CSS class used for terminals
terminalHideDelay : Number0

Delay in ms before hiding the terminals when the mouse leaves an event bar or terminal.

Can be used to make the UI more forgiving, accidentally leaving the event bar or terminal will not immediately hide the terminals.

Can also be used to play a hide animation, set a terminalHideDelay that is longer than your animation's duration. The b-hiding-terminals CSS class is added to the event wrapper while the terminals are being hidden.

Has a corresponding runtime terminalHideDelay property.
terminalOffset : Number

Terminal offset from their initial position, in px. Positive values move terminals further away from the event bar, negative values inside the event bar.

When unset, the value specified in the --b-dependency-terminal-offset CSS variable is used.

Has a corresponding runtime terminalOffset property.
terminalShowDelay : Number0

Delay in ms before showing the terminals when hovering over an event bar.

Can be used for a more "stable" UI, where the terminals are not shown immediately when hovering over an event bar and thus have fewer things moving when mouse is moved quickly over multiple event bars.

Has a corresponding runtime terminalShowDelay property.
terminalSides : String[]

Where (on event bar edges) to display terminals. The sides are 'start', 'top', 'end' and 'bottom'
terminalSize : Number/String

Terminal diameter in px, overrides the default CSS value for it (which might depend on theme).

Use an even number to avoid cropped terminals.

Also accepts a string value representing a CSS size, e.g. '1.5em'.

When unset, the value specified in the --b-dependency-terminal-size CSS variable is used.

Has a corresponding runtime terminalSize property.

Properties

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

isDependencyCreation : Booleantrue

READONLY

static

ADVANCED

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

isDependencyCreation : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of DependencyCreation class, or subclass thereof.
allowDropOnEventBar : Booleantrue

false to require a drop on a target event bar side circle to define the dependency type. If dropped on the event bar, the defaultValue of the DependencyModel type field will be used to determine the target task side.

Has a corresponding allowDropOnEventBar config.
creationTooltipTemplate : Function

A template function that will be called to generate the HTML contents of the dependency creation tooltip. You can return either an HTML string or a DomConfig object.

Has a corresponding creationTooltipTemplate config.
terminalHideDelay : Number0

Delay in ms before hiding the terminals when the mouse leaves an event bar or terminal.

Can be used to make the UI more forgiving, accidentally leaving the event bar or terminal will not immediately hide the terminals.

Can also be used to play a hide animation, set a terminalHideDelay that is longer than your animation's duration. The b-hiding-terminals CSS class is added to the event wrapper while the terminals are being hidden.

Has a corresponding terminalHideDelay config.
terminalOffset : Number

Terminal offset from their initial position, in px. Positive values move terminals further away from the event bar, negative values inside the event bar.

When unset, the value specified in the --b-dependency-terminal-offset CSS variable is used.

Has a corresponding terminalOffset config.
terminalShowDelay : Number0

Delay in ms before showing the terminals when hovering over an event bar.

Can be used for a more "stable" UI, where the terminals are not shown immediately when hovering over an event bar and thus have fewer things moving when mouse is moved quickly over multiple event bars.

Has a corresponding terminalShowDelay config.
terminalSize : Number/String

Terminal diameter in px, overrides the default CSS value for it (which might depend on theme).

Use an even number to avoid cropped terminals.

Also accepts a string value representing a CSS size, e.g. '1.5em'.

When unset, the value specified in the --b-dependency-terminal-size CSS variable is used.

Has a corresponding terminalSize config.

Functions

Functions are methods available for calling on the class

createConnector( )

private

Creates a connector line that visualizes dependency source & target
createDependency( )

internal

Create a new dependency from source terminal to target terminal
onMouseMove( )

private

Update connector line showing dependency between source and target when mouse moves. Also check if mouse is over a valid target terminal
onMouseUp( )
: Promise

private

ASYNC

Create a new dependency if mouse release over valid terminal. Hides connector
onTerminalMouseOut( )

private

Remove hover styling when mouse leaves terminal. Also hides terminals when mouse leaves one it and not creating a dependency.
onTerminalPointerDown( )

private

Start creating a dependency when mouse is pressed over terminal
onTimeSpanMouseEnter( )

private

Show terminals when mouse enters event/task element
onTimeSpanMouseLeave( )

private

Hide terminals when mouse leaves event/task element
refreshCreationTooltip( )

private

Update dependency creation tooltip
removeConnector( )

private

Remove connector
abort( )

Aborts dependency creation, removes proxy and cleans up listeners
hideTerminals( eventElement )

Hide terminals for specified event
showTerminals( timeSpanRecord, element )

Show terminals for specified event at sides defined in #terminalSides.

Events

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

afterDependencyCreateDrop

ON-OWNER

Fired on the owning Scheduler/Gantt after a dependency drag creation operation finished, no matter to outcome

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

PREVENTABLE

ON-OWNER

Fired on the owning Scheduler/Gantt before a dependency creation drag operation starts. Return false to prevent it

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

ASYNC

PREVENTABLE

ON-OWNER

Fired on the owning Scheduler/Gantt when a dependency drag creation operation is about to finalize

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

PREVENTABLE

ON-OWNER

Fired on the owning Scheduler/Gantt before showing dependency terminals on a task or event. Return false to prevent it

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

ON-OWNER

Fired on the owning Scheduler/Gantt when a dependency creation drag operation starts

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

ON-OWNER

Fired on the owning Scheduler/Gantt when a dependency drag creation operation succeeds

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

ON-OWNER

Fired on the owning Scheduler/Gantt when asynchronous dependency validation completes

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

ON-OWNER

Fired on the owning Scheduler/Gantt when asynchronous dependency validation starts

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

onAfterDependencyCreateDrop

ON-OWNER

Called on the owning Scheduler/Gantt after a dependency drag creation operation finished, no matter to outcome

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

PREVENTABLE

ON-OWNER

Called on the owning Scheduler/Gantt before a dependency creation drag operation starts. Return false to prevent it

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

ASYNC

PREVENTABLE

ON-OWNER

Called on the owning Scheduler/Gantt when a dependency drag creation operation is about to finalize

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

PREVENTABLE

ON-OWNER

Called on the owning Scheduler/Gantt before showing dependency terminals on a task or event. Return false to prevent it

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

ON-OWNER

Called on the owning Scheduler/Gantt when a dependency creation drag operation starts

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

ON-OWNER

Called on the owning Scheduler/Gantt when a dependency drag creation operation succeeds

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

ON-OWNER

Called on the owning Scheduler/Gantt when asynchronous dependency validation completes

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

ON-OWNER

Called on the owning Scheduler/Gantt when asynchronous dependency validation starts

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-invalid-color	Color for an invalid dependency line during creation
--b-dependency-terminal-border-color	Dependency terminal border color. By default it matches event border color to match its look
--b-dependency-terminal-border-style	Dependency terminal border style
--b-dependency-terminal-border-width	Dependency terminal border width
--b-dependency-terminal-color	Dependency terminal fill color
--b-dependency-terminal-invalid-color	Color for an invalid dependency terminal during creation
--b-dependency-terminal-offset	Dependency terminal offset from the event edge, negative values move away from the event
--b-dependency-terminal-size	Dependency terminal size
--b-dependency-terminal-valid-color	Color for a valid dependency terminal during creation
--b-dependency-terminal-z-index	Dependency terminal z-index
--b-dependency-tooltip-invalid-header-background	Background used in the header of the dependency creation tooltip when the dependency is invalid
--b-dependency-tooltip-invalid-header-color	Color used in the header of the dependency creation tooltip when the dependency is invalid
--b-dependency-tooltip-valid-header-background	Background used in the header of the dependency creation tooltip when the dependency is valid
--b-dependency-tooltip-valid-header-color	Color used in the header of the dependency creation tooltip when the dependency is valid
--b-dependency-valid-color	Color for a valid dependency line during creation
Hovered
--b-dependency-terminal-hover-color	Dependency terminal hover fill color

Source path

Scheduler/feature/mixin/DependencyCreation.js

Inheritance tree1

DependencyCreation

DependencyCreation Mixin