How we can use drag n drop service for diagram using bower bundle bpmn-js?


#1

I am trying to invoke Dragging capability from bmpn-viewer-custom.js but i see error Error: No provider for "Dragging"! (Resolving: Dragging) it pops up this error when I use drag function Can someone please help on this how we can achieve drag n drop using bower bundle ?

angularClientCtrl.js

var BpmnViewer = window.BpmnJS;

    var bpmnModeler = new BpmnViewer({
      container: '#canvas',
      propertiesPanel:{
        parent: '#js-properties-panel'
      },
        elementTemplates: elementTemplates
    });

$scope.dragDiagram= function(){
        bpmnModeler.get('Dragging').start();
    }

#2

The Viewer does not contain the dragging functionality.

You may bundle it yourself in a custom bower bundle.

Coordinates of the Dragging service and module: diagram-js/lib/features/dragging.


#3

Thanks for your quick response, we have added dragging module as you can see below we are still not able to invoke Dragging module , can you please provide some example or hint how to use Dragging module in custom.js and client side.

index.js

var camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda');

var additionalModules = [
  require('bpmn-js-properties-panel'),

  // 1. require camunda provider instead of the bpmn one (!)
  require('bpmn-js-properties-panel/lib/provider/camunda'),
  require('diagram-js/lib/features/dragging')
];

BpmnViewer.prototype._modules = BpmnViewer.prototype._modules.concat(additionalModules);

// 2. include camunda moddle descriptor
BpmnViewer.prototype._moddleExtensions = { camunda: camundaModdleDescriptor };
//BpmnViewer.prototype.elementTemplates = { camunda: elementTemplates };

clientCtrl.js

$scope.startDrag = function(){
   bpmnModeler.get('Dragging').start();
}

#4

The dragging service instance is published with the name dragging.

Lower + camel case is the naming convention for service names.