Dependencies

Add support for dependency links between tasks using jsPlumb.

Dependency

jsPlumb

Usage

angular.module('myApp', ['gantt', 'gantt.dependencies']);

<div gantt>
    <gantt-dependencies enabled="true"
                        read-only="false"
                        js-plumb-defaults="{
                                         Endpoint: ['Dot', {radius: 7}],
                                         Connector: 'Flowchart'
                                         }"
                        endpoints="[...]"
                        fallback-endpoints="[...]">
    </gantt-dependencies>
</div>

Attributes

• enabled

  Enable dependencies display.

  default: true

• read-only

  If enabled, existing dependencies will be displayed, but it won't be possible to edit existing dependencies or create new dependencies using mouse.

  default: false

• js-plumb-defaults

  Default settings object for the underlying jsPlumb instance. See Configuring Defaults of jsPlumb documentation.

  default:

  Endpoint: ['Dot', {radius: 4}],
  EndpointStyle: {fillStyle: '#456', strokeStyle: '#456', lineWidth: 1},
  PaintStyle: {
      strokeWidth: 3,
      stroke: 'rgb(68, 85, 102)'
  },
  Connector: 'Flowchart',
  ConnectionOverlays: [['Arrow', {location: 1, length: 12, width: 12}]]
  

• endpoints

  Array of endpoints that will be create for each task. See Endpoint class of jsPlumb documentation.

  default:

  [ { anchor:'Left', isSource:false, isTarget:true, maxConnections: -1, cssClass: 'gantt-endpoint start-endpoint target-endpoint' overlays:[ ['Custom', {create:createLeftOverlay}] ] }, { anchor:'Right', isSource:true, isTarget:false, maxConnections: -1, cssClass: 'gantt-endpoint end-endpoint source-endpoint' overlays:[ ['Custom', {create:createRightOverlay}] ] } ];

• fallback-endpoints

  Endpoints used to display start/end of connections that links invisible tasks (out of range, collapsed, ...).

  default :

  [
      {
          endpoint: 'Blank',
          anchor: 'Left',
          isSource: false,
          isTarget: true,
          maxConnections: 0,
          cssClass: 'gantt-endpoint start-endpoint fallback-endpoint',
          overlays: [
              ['Custom', {create: createLeftFallbackOverlay}]
          ]
      },
      {
          endpoint: 'Blank',
          anchor: 'Right',
          isSource: true,
          isTarget: false,
          maxConnections: 0,
          cssClass: 'gantt-endpoint end-endpoint fallback-endpoint',
          overlays: [
              ['Custom', {create: createRightFallbackOverlay}]
          ]
      }
  ]
  

• conflict-checker

  Check for conflicts in dependent tasks and mark invalid tasks with gantt-task-overlaps CSS class.

  default : false

Model

Task can specify a dependencies field containing a single or a list of objects.

Each object defines the opposite side or the dependency, using either from or to property. connectParameters field can optionnaly be set to an object that will be used for each related jsPlumb.connect(...) function call.

{
  ...
  // Inside Task object
  'dependencies': [{
    'from': <taskId>,
    'connectParameters': {...} // Parameters given to jsPlumb.connect() function call.
  }]
}

{
  ...
  // Inside Task object
  'dependencies': [{
    'to': <taskId>,
    'connectParameters': {...} // Parameters given to jsPlumb.connect() function call.
  }]
}

{
  ...
  // Inside Task object or Row object
  'dependencies': false // Disable dependencies support for this task or row
}

API

Methods

• api.dependencies.refresh(tasks)

Refresh the view with dependencies data from the model. tasks is an array of Task objects to refresh, or undefined to refresh the whole chart.

Events

• api.dependencies.on.add(dependency), api.dependencies.on.remove(dependency), api.dependencies.on.change(dependency, oldDependency)

A dependency was created, removed or changed.

Tips

• Display dependencies related to a task only

data-fromId and data-toId attributes are added to svg canvas used to display dependency links.

So it's possible with CSS to hide all dependencies but thoses related to a given task id.

.jtk-connector {
    display: none;
}

.jtk-connector.jtk-dragging {
    display: inherit;
}

.jtk-connector[data-fromId='Product list view'] {
    display: inherit;
}

.jtk-connector[data-toId='Product list view'] {
    display: inherit;
}

For more information, see Styling via css from jsPlumb documentation.