Allow to import collapsed subprocesses through API (similar toimportXML)

[rajgoel]

Is your feature request related to a problem? Please describe.

Currently it is possible to use importXMLto load a full process model. However, there is no possibility (afaik) to load a partial model that is used to populate a subprocess.

Describe the solution you'd like

It would be great to have a function like importSubProcessXML that allows to populate the details of a collapsed subprocess.

Describe alternatives you've considered

As suggested by @philippfromme in https://forum.bpmn.io/t/import-subprocesses/7522/2 the details of subprocesses could be manually copied using the Camunda Model. However, I am searching for a way to programmatically achieve this. @nikku suggested to file an issue.

Additional context

In my particular use case I want to populate collapsed custom subprocesses as described here: https://forum.bpmn.io/t/programmatically-populate-collapsed-subprocess/7504/2. The problem is that the details of these subprocesses are prone to changes and cumbersome to include by adding elements line-by-line. Loading the subprocess details from a file and inserting them would be much more convenient.

Furthermore, such a feature would also be helpful for anyone dealing with a complex process landscape in which subprocesses are modelled in independently. An importSubProcessXML function would allow to create integrated models from these subprocess-models automatically.

[rajgoel]

Based on my solution for a particular use case (https://forum.bpmn.io/t/programmatically-copy-paste-extensionelements-within-subprocesses and https://forum.bpmn.io/t/programmatically-populate-collapsed-subprocess-from-xml/7549) I believe such a functionality could be implemented like this:

function selectChildren(elementRegistry, id) {
  const elements = elementRegistry.getAll().filter(function(element) {
    // determine children to be copied 
    return element.parent && element.parent.id == id + '_plane';
  });
  return elements;
}

function importSubProcessXML({source_id, target_id, xml, options}) {
  // create modeller to load source subprocess 
  // 'options' need to be passed if custom extension elements shall be copied as well
  const subProcessModeler = new BpmnModeler( options );
  // load xml into new modeller
  subProcessModeler.importXML( xml ).then( function() {
    const sourceClipboard = subProcessModeler.get('clipboard'),
          sourceCopyPaste = subProcessModeler.get('copyPaste'),
          sourceElementRegistry = subProcessModeler.get('elementRegistry');

    // copy children of source element
    sourceCopyPaste.copy( selectChildren( sourceElementRegistry, source_id ) );
    // retrieve clipboard contents
    clipboard = sourceClipboard.get();

   const targetClipboard = modeler.get('clipboard'),
         targetCopyPaste = modeler.get('copyPaste'),
         targetElementRegistry = modeler.get('elementRegistry');

    // put into clipboard
    targetClipboard.set(clipboard);

    const element = targetElementRegistry.getAll().find(function(el) {
      // determine target element
      return el.id == target_id;
    });

    // paste tree
    const pasteContext = {
        element,
      point: {x:0, y:0}
    };
    targetCopyPaste.paste(pasteContext);
  });
}

Please note that above code is not tested and only serves as a summary of the steps I needed for my use case. There are two problems though:

1. The target subprocess is implicitly resized (see workaround at https://forum.bpmn.io/t/programmatically-populate-collapsed-subprocess-from-xml/7549/4)
2. Since v9.04 of bpmnjs, labels copied from within the source subprocess are misplaced to the parent of the target subprocess (see Labels misplaced after copy & paste #1690)

P.S. In above code it is assumed that modeler is the target modeler.

[rajgoel]

I just realised that both problems I mentioned above had the same cause. In the code

const element = targetElementRegistry.getAll().find(function(el) {
  // determine target element
  return el.id == target_id;
});

should be replaced by

// paste tree
const element = targetElementRegistry.getAll().find(function(el) {
  // determine plane element to paste children
  return el.id == target_id + '_plane';
});

Then, the sketch of the solution should work.

[nikku]

Awesome! If this solution works end-to-end I'd love you to ping it back to the forum. Pretty cool use case. Is there anything else we should look into or shall we close this issue?

[rajgoel]

Apparently, something appears to still be wrong when copy/pasting event-subprocesses with non-interrupting start events which also appears to be an issue in https://demo.bpmn.io/new (see #1696).

@nikku What exactly do you mean with "ping it back to the forum"? Do you mean to post the solution there in a new topic? If so I can do this once I have a complete version, but it might take some time because I'll soon be off for summer vacation :-)

[philippfromme]

Apparently, something appears to still be wrong when copy/pasting event-subprocesses with non-interrupting start events which also appears to be an issue in https://demo.bpmn.io/new (see #1696).

I've commented on the issue you mentioned: #1696

[nikku]

Moving this to backlog.

[rajgoel]

Just uploaded a module that provide this functionality: https://github.com/bpmn-os/bpmn-js-subprocess-importer

Only problem is that moddleExtensions are not yet supported (#1), because I haven't found a way to pass them to the temporary modeller required to import the XML.

[rajgoel]

The moddleExtensions can now be set allowing to import subprocess with cutom extensions.

[nikku]

🎉

[nikku]

@rajgoel Consider adding your extension to the bpmn.io awesome list if you want others to pick it up.