Programmatically populate collapsed subprocess

Developers
2

Thanks to the code provided in bpmn-js/CustomUpdater.js at develop · bpmn-io/bpmn-js · GitHub I was able to achieve my goal by creating my own updater:

import inherits from 'inherits';

import { is } from 'bpmn-js/lib/util/ModelUtil';

import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';

function ifNewResourceActivity(fn) {
  return function(event) {
    var context = event.context,
        element = context.shape;
    if (is(element, 'bpmn:SubProcess') && element.businessObject.type == 'Resource') {
      fn(event);
    }
  };
}

/**
 * A handler responsible for creating children to a resource subprocess when this is created
 */
export default function ResourceUpdater(eventBus, modeling, elementFactory) {

  CommandInterceptor.call(this, eventBus);

  function createResourceChildren(evt) {
    var context = evt.context,
	element = context.shape,
        businessObject = element.businessObject;

    // memorise position and size which are changed when adding children
    var x = element.x,
        y = element.y,
        height = element.height, 
        width = element.width;

    const testStart = elementFactory.createShape({
      type: 'bpmn:StartEvent'  
    });
    const testTask1 = elementFactory.createShape({
      type: 'bpmn:Task',
    });        

    modeling.createShape(testStart, {x:0, y:0}, element);
    modeling.appendShape(testStart, testTask1, {x:testStart.x+150, y:0}, element)

    // restore position and size which are changed when adding children
    element.x = x;
    element.y = y;
    element.width = width;
    element.height = height;
  }

  this.postExecute([
    'shape.create'
  ], ifNewResourceActivity(createResourceChildren));

}

inherits(ResourceUpdater, CommandInterceptor);

ResourceUpdater.$inject = [ 'eventBus', 'modeling', 'elementFactory' ];

The only strange thing is that I have to restore x, y, width, height because they are modified when adding the child elements. In my opinion this feels strange and shouldn’t be necessary. Is there a flag that I should set when adding the shapes?