Nature Preceded Machines

    ovh-angular-jsplumb

    3.0.5 • Public • Published

    ovh-angular-jsplumb

    githubbanner

    Maintenance Chat on gitter Build Status

    NPM

    Allow to draw links between elements using jsplumb toolkit.

    Table of contents

    Dependencies

    If you are using grunt and grunt wiredep, overrides the jsplumb dependency like this :

    ...
    wiredep: {
       overrides : {
           jsplumb: {
               main : 'dist/js/jquery.jsPlumb-1.7.3-min.js'
           },
           'jquery-ui' : {
               main : [
                   'ui/minified/core.min.js',
                   'ui/minified/widget.min.js',
                   'ui/minified/mouse.min.js',
                   'ui/minified/draggable.min.js',
                   'ui/minified/droppable.min.js'
               ]
           }
       }
    }
    ...

    For jqueryUI, we only need draggable and droppable functionnalities (and the few core functionnalities). So we can load only these files.

    Example

    First, make sure jsplumb is ready by calling jsPlumbService.jsplumbInit method :

    angular.module('app').controller('myAppCtrl', function ($scope, jsPlumbService) {
        $scope.jsplumbReady = false;
     
        jsPlumbService.jsplumbInit()['finally'](function () {
            $scope.jsplumbReady = true;
        });
    });

    Create an instance of ovh-angular-jsplumb with the jsplumbInstance directive :

    <div data-ng-if="jsplumbReady"
         data-jsplumb-instance>
     
        ...
     
    </div>

    Installation

    Bower

    bower install ovh-angular-jsplumb --save
    

    NPM

    npm install ovh-angular-jsplumb --save
    

    Get the sources

    git clone https://github.com/ovh-ux/ovh-angular-jsplumb.git
    cd ovh-angular-jsplumb
    npm install
    bower install

    You've developed a new cool feature? Fixed an annoying bug? We'd be happy to hear from you!

    Have a look in CONTRIBUTING.md

    Run the tests

    npm test
    

    Build the documentation

    grunt ngdocs
    

    Related links

    License

    See https://github.com/ovh-ux/ovh-angular-jsplumb/blob/master/LICENSE

    Then include ovh-angular-jsplumb.js in your HTML with it's dependencies (Note : As mentionned above, you can only load jquery ui dependency files) :

    <script src="jquery.js">
    <script src="jquery-ui.js">
    <script src="jsplumb.js">
    <script src="angular.js">
    <script src="ovh-angular-jsplumb.js">
    

    And then load the module in your application by adding it as a dependent module:

    angular.module('app', ['ovh-angular-jsplumb']);
    

    Keywords

    none

    Install

    npm i ovh-angular-jsplumb

    DownloadsWeekly Downloads

    3

    Version

    3.0.5

    License

    BSD-3-Clause

    Last publish

    Collaborators

    • marie-j
    • jisay
    • axelpeter
    • blary_jp
    • antleblanc
    • cbourgois
    • ovh-ux-cds
    • lizardk
    • ovh
    • gioindahouz
    • jleveugle
    • bnjjj
    • khuang