UNPKG

angular-gantt

Version:

Gantt chart component for AngularJS

430 lines (347 loc) 14.6 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="canonical" href="https://www.angular-gantt.com/plugins/dependencies/"> <link rel="shortcut icon" href="../../img/favicon.ico"> <title>Dependencies - angular-gantt</title> <link href="../../css/bootstrap-custom.min.css" rel="stylesheet"> <link href="../../css/font-awesome-4.0.3.css" rel="stylesheet"> <link href="../../css/prettify-1.0.css" rel="stylesheet"> <link href="../../css/base.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- Collapsed navigation --> <div class="navbar-header"> <!-- Expander button --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Main title --> <a class="navbar-brand" href="../..">angular-gantt</a> </div> <!-- Expanded navigation --> <div class="navbar-collapse collapse"> <!-- Main navigation --> <ul class="nav navbar-nav"> <li > <a href="../../get-started">Get Started</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a> <ul class="dropdown-menu"> <li > <a href="../../configuration/data">Data</a> </li> <li > <a href="../../configuration/timespans">Timespans</a> </li> <li > <a href="../../configuration/attributes">Attributes</a> </li> <li > <a href="../../configuration/plugins">Plugins</a> </li> <li > <a href="../../configuration/customize">Customize</a> </li> <li > <a href="../../configuration/api">API</a> </li> <li > <a href="../../configuration/write_plugin">Write a Plugin</a> </li> </ul> </li> <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a> <ul class="dropdown-menu"> <li > <a href="../labels">Labels</a> </li> <li > <a href="../table">Table</a> </li> <li > <a href="../tree">Tree</a> </li> <li > <a href="../corner">Corner</a> </li> <li > <a href="../groups">Groups</a> </li> <li class="active"> <a href=".">Dependencies</a> </li> <li > <a href="../sortable">Sortable</a> </li> <li > <a href="../movable">Movable</a> </li> <li > <a href="../drawtask">Draw Task</a> </li> <li > <a href="../tooltips">Tooltips</a> </li> <li > <a href="../bounds">Bounds</a> </li> <li > <a href="../sections">Sections</a> </li> <li > <a href="../progress">Progress</a> </li> <li > <a href="../overlap">Overlap</a> </li> <li > <a href="../resizeSensor">Resize Sensor</a> </li> </ul> </li> <li > <a href="../../sources">Sources</a> </li> <li > <a href="../../contribute">Contribute</a> </li> <li > <a href="../../faq">FAQ</a> </li> <li > <a href="../../about">About</a> </li> </ul> <!-- Search, Navigation and Repo links --> <ul class="nav navbar-nav navbar-right"> <li > <a rel="next" href="../groups"> <i class="fa fa-arrow-left"></i> Previous </a> </li> <li > <a rel="prev" href="../sortable"> Next <i class="fa fa-arrow-right"></i> </a> </li> <li> <a href="https://github.com/angular-gantt/angular-gantt"> <i class="fa fa-github"></i> GitHub </a> </li> </ul> </div> </div> </div> <div class="container"> <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary"> <ul class="nav bs-sidenav"> <li class="main active"><a href="#dependencies">Dependencies</a></li> <li><a href="#dependency">Dependency</a></li> <li><a href="#usage">Usage</a></li> <li><a href="#attributes">Attributes</a></li> <li><a href="#model">Model</a></li> <li><a href="#api">API</a></li> <li><a href="#tips">Tips</a></li> </ul> </div></div> <div class="col-md-9" role="main"> <h1 id="dependencies">Dependencies</h1> <p>Add support for dependency links between tasks using <a href="https://jsplumbtoolkit.com/">jsPlumb</a>.</p> <h2 id="dependency">Dependency</h2> <p><a href="https://jsplumbtoolkit.com/">jsPlumb</a></p> <h2 id="usage">Usage</h2> <pre><code>angular.module('myApp', ['gantt', 'gantt.dependencies']); </code></pre> <!-- --> <pre><code>&lt;div gantt&gt; &lt;gantt-dependencies enabled="true" read-only="false" js-plumb-defaults="{ Endpoint: ['Dot', {radius: 7}], Connector: 'Flowchart' }" endpoints="[...]" fallback-endpoints="[...]"&gt; &lt;/gantt-dependencies&gt; &lt;/div&gt; </code></pre> <h2 id="attributes">Attributes</h2> <ul> <li> <h3 id="enabled">enabled</h3> <p>Enable dependencies display.</p> <p>default: <code>true</code></p> </li> <li> <h3 id="read-only">read-only</h3> <p>If enabled, existing dependencies will be displayed, but it won't be possible to edit existing dependencies or create new dependencies using mouse.</p> <p>default: <code>false</code></p> </li> <li> <h3 id="js-plumb-defaults">js-plumb-defaults</h3> <p>Default settings object for the underlying jsPlumb instance. See <a href="https://jsplumbtoolkit.com/community/doc/defaults.html">Configuring Defaults</a> of <a href="https://jsplumbtoolkit.com/community/doc/home.html">jsPlumb documentation</a>.</p> <p>default: </p> <pre><code>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}]] </code></pre> </li> <li> <h3 id="endpoints">endpoints</h3> <p>Array of endpoints that will be create for each task. See <a href="https://jsplumbtoolkit.com/community/apidocs/classes/Endpoint.html">Endpoint class</a> of <a href="https://jsplumbtoolkit.com/community/doc/home.html">jsPlumb documentation</a>.</p> <p>default:</p> <p>[ { 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}] ] } ];</p> </li> <li> <h3 id="fallback-endpoints">fallback-endpoints</h3> <p>Endpoints used to display start/end of connections that links invisible tasks (out of range, collapsed, ...).</p> <p>default : </p> <pre><code>[ { 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}] ] } ] </code></pre> </li> <li> <h3 id="conflict-checker">conflict-checker</h3> <p>Check for conflicts in dependent tasks and mark invalid tasks with <code>gantt-task-overlaps</code> CSS class.</p> <p>default : false</p> </li> </ul> <h2 id="model">Model</h2> <p>Task can specify a <code>dependencies</code> field containing a single or a list of objects.</p> <p>Each object defines the opposite side or the dependency, using either <code>from</code> or <code>to</code> property. <code>connectParameters</code> field can optionnaly be set to an object that will be used for each related <a href="https://jsplumbtoolkit.com/community/doc/connections.html#programmatic">jsPlumb.connect(...)</a> function call.</p> <pre><code>{ ... // Inside Task object 'dependencies': [{ 'from': &lt;taskId&gt;, 'connectParameters': {...} // Parameters given to jsPlumb.connect() function call. }] } { ... // Inside Task object 'dependencies': [{ 'to': &lt;taskId&gt;, 'connectParameters': {...} // Parameters given to jsPlumb.connect() function call. }] } { ... // Inside Task object or Row object 'dependencies': false // Disable dependencies support for this task or row } </code></pre> <h2 id="api">API</h2> <h3 id="methods">Methods</h3> <ul> <li><strong>api.dependencies.refresh(tasks)</strong></li> </ul> <p>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.</p> <h3 id="events">Events</h3> <ul> <li><strong>api.dependencies.on.add(dependency)</strong>, <strong>api.dependencies.on.remove(dependency)</strong>, <strong>api.dependencies.on.change(dependency, oldDependency)</strong></li> </ul> <p>A dependency was created, removed or changed.</p> <h2 id="tips">Tips</h2> <ul> <li>Display dependencies related to a task only</li> </ul> <p><code>data-fromId</code> and <code>data-toId</code> attributes are added to svg canvas used to display dependency links.</p> <p>So it's possible with CSS to hide all dependencies but thoses related to a given task id.</p> <pre><code class="css">.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; } </code></pre> <p>For more information, see <a href="https://jsplumbtoolkit.com/community/doc/styling-via-css.html">Styling via css</a> from <a href="https://jsplumbtoolkit.com/community/doc/home.html">jsPlumb documentation</a>.</p> </div> </div> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="../../js/bootstrap-3.0.3.min.js"></script> <script src="../../js/prettify-1.0.min.js"></script> <script src="../../js/base.js"></script> <script src="../../skeletons/plugin.js"></script> </body> </html>