bpmn-js-copy-paste-example

This example shows how to copy and paste elements programatically using bpmn-js.

Features

• copy and paste between different BPMN modeler instances
• works across browser windows (synchronized via local storage)
• fully scriptable
• may be operated by humans, too 😉

How it works

You need the BPMN Modeler to use copy and paste.

Copy

To copy an element, specify it via its elementId. From that point on, we'll use only APIs the BPMN modeler provides:

// element to be copied
var elementId = ...;

var clipboard = modeler.get('clipboard'),
    copyPaste = modeler.get('copyPaste'),
    elementRegistry = modeler.get('elementRegistry');

// get element to be copied
var element = elementRegistry.get(elementId);

// copy!
copyPaste.copy(element);

// retrieve clipboard contents
var copied = clipboard.get();

// persist in local storage, encoded as json
localStorage.setItem('bpmnClipboard', JSON.stringify(copied));

Paste

To paste an element we need to specify the target, as well as the location where the element needs to be pasted:

// to be pasted onto...
var targetId = ...;
var position = ...;

var clipboard = modeler.get('clipboard'),
    copyPaste = modeler.get('copyPaste'),
    elementRegistry = modeler.get('elementRegistry'),
    moddle = modeler.get('moddle');

// retrieve from local storage
var serializedCopy = localStorage.getItem('bpmnClipboard');

// parse tree, reinstantiating contained objects
var parsedCopy = JSON.parse(serializedCopy, createReviver(moddle));

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

// paste tree directly
copyPaste.paste({
  element: elementRegistry.get(targetId),
  point: position
});

// alternatively paste using two-step pasting
copyPaste.paste();

The Paste Catch

During JSON parsing of the serialized copy tree, we use a reviver function to re-construct model types:

function createReviver(moddle) {

  var elCache = {};

  /**
   * The actual reviewer that creates model instances
   * for elements with a $type attribute.
   *
   * Elements with ids will be re-used, if already
   * created.
   *
   * @param  {String} key
   * @param  {Object} object
   *
   * @return {Object} actual element
   */
  return function(key, object) {

    if (typeof object === 'object' && typeof object.$type === 'string') {

      var objectId = object.id;

      if (objectId && elCache[objectId]) {
        return elCache[objectId];
      }

      var type = object.$type;
      var attrs = Object.assign({}, object);

      delete attrs.$type;

      var newEl = moddle.create(type, attrs);

      if (objectId) {
        elCache[objectId] = newEl;
      }

      return newEl;
    }

    return object;
  };
}

Checkout the full example here.

Run the Example

# install dependencies
npm install

# run in browser
npm run dev

Open multiple instances of the test site and copy/paste across.

License

MIT

❤️