Manually Call Space Tool

Developers
1

Hi

I am using bpmn.js to create a custom application such that the user can only drop a Sub Process from pellete by dropping it on the connection on a predefined bpmn document. After adding this new sub process, we also append a sub flow inside it which is also predefined.

Is there a way to manually call the space tool so as to create space such that the entire tree is equally distributed ? In the attached image i want to make space between “Submit Task” and “End”

steps

2

Hey,

have a look at the tests coverage of the space tool. When testing we need to programmatically use the space tool. You can do it the same way.

3

As per diagram-js >>

It requires Diagram Object to create the event. I am confused as to how to get this object after creating my custom bpmn modeller. Right now I am only able to access the canvas object.

var modeler = new WorkFlowModeler({ container: root.find('#js-canvas')[0], keyboard: { bindTo: document },
		  propertiesPanel: {
		    parent: root.find('#js-properties-panel')[0]
		  },
		  extOpts : extOpts,
		  additionalModules: [
		    propertiesPanelModule,
		    propertiesProviderModule
		  ],
		  moddleExtensions: {
		    floawble: flowableModdleDescriptor
		  }
		  });
	  var canvas = modeler.get("canvas"),
          elementRegistry = modeler.get("elementRegistry"),
	   overlays = modeler.get('overlays') ,
	   eventBus = modeler.get('eventBus');
          
          // This is a custom event that i fire from inside my custom 
         //  CommandInterceptor
          eventBus.on("after.shape.create",function(shape){

                 	var spaceTool = modeler.get('spaceTool');
                       /*
                              Must create space here
                       */
          }
4

Diagram is the constructor of the Diagram instance. Since the bpmn-js Viewer and Modeler both inherit from Diagram

var modeler = new WorkFlowModeler({
  // ...
});

creates an instance of Diagram. So there is no Diagram object you need to access.

After creating the instance and importing a diagram you can get hold of all the modules you need. You can use this example as a starting point.

5

Unfortunately due to my limited knowledge of bpmn js I am unable understand the issue but I would like to make one last attempt.Thanks for be being patient.

As per this >>
After adding the composite shape (Sub process + sub flow inside it ) I am trying to create the event object which will be passed to spaceTool.activateSelection

I am stuck at how to create the event object itself at the specified position.

6

Apparently I was using an older version where eventBus didn’t have createEvent function. :frowning: Issue solved.

eventBus.on("space.create",function(position){
			  
			 
			    var spaceTool = modeler.get('spaceTool');
			    var dragging = spaceTool._dragging;
			    //dragging.setOptions({ manual: true });
			     
				var event_start = modeler.createCanvasEvent( {x:position.x-100 ,y:position.y} );
			 	 
			  	var event_end = modeler.createCanvasEvent( {x:position.x+500,y:position.y} );
			  	
			  	spaceTool.activateMakeSpace(event_start);
			 	 
			    dragging.move(event_end);
			    dragging.end();
			    // dragging.cancel();
			  	
			    
			   // dragging.setOptions({ manual: false });

			  
		  })

Custom Modeler

WorkFlowModeler.prototype.createCanvasEvent = function(position, data) {

	var that = this;
	  return this.invoke(function(canvas) {

	    var target = canvas._svg;

	    var clientRect = canvas._container.getBoundingClientRect();

	    var absolutePosition = {
	      x: position.x + clientRect.left,
	      y: position.y + clientRect.top
	    };

	    return that.createEvent(target, absolutePosition, data);
	  });
	
}
WorkFlowModeler.prototype.createEvent = function(target, position, data) {

	  return this.invoke(function(eventBus) {
	    data = assign({
	      target: target,
	      clientX: position.x,
	      clientY: position.y,
	      offsetX: position.x,
	      offsetY: position.y
	    }, data || {});

	    return eventBus.createEvent(data);
	  });
	
}
2 Likes