ng-ovh-jsplumb

Allow to draw links between elements using jsplumb toolkit.

Install

$ yarn add @ovh-ux/ng-ovh-jsplumb

Usage

import angular from 'angular';
import ngOvhJsplumb from '@ovh-ux/ng-ovh-jsplumb';

angular.module('myApp', [ngOvhJsplumb]);

For jQuery UI, we only need draggable and droppable functionalities (and the few core functionalities). So we can load only these files.

Example

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

import angular from 'angular';

angular.module('myApp').controller(
  'MyController',
  class {
    /* @ngInject */
    constructor($scope, jsPlumbService) {
      this.$scope = $scope;
      this.jsPlumbService = jsPlumbService;
    }

    $onInit() {
      this.$scope.jsplumbReady = false;

      this.jsPlumbService.jsplumbInit().finally(() => {
        this.$scope.jsplumbReady = true;
      });
    }
  },
);

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

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

Related

• jsPlumb
• jQuery UI as a dependency of jsPlumb.

Test

$ yarn test

Contributing

Always feel free to help out! Whether it's filing bugs and feature requests or working on some of the open issues, our contributing guide will help get you started.

License

BSD-3-Clause © OVH SAS