Custom CommandHandler

Developers Modeler
1

I created a command handler following this post Update custom BPMN meta data so it can be undone via CTRL+Z - #4 by nikku. I am trying to implement Ctrl+Z, Ctrl+Y for my custom shapes.

Originally I had this code for my custom ContextPadProvider:


function createLoopShapes(event, elementFactory, create) {
  const source = elementFactory.createShape({
    type: ElementType.ExclusiveGateway,
    gatewayType: GatewayTypeValue.Open,
    looped: true,
    x: 350,
    y: 0,
  });

  const target = elementFactory.createShape({
    type: ElementType.ExclusiveGateway,
    gatewayType: GatewayTypeValue.Close,
    looped: true,
    x: 0,
    y: 0,
  });

  const sequenceFlow = elementFactory.createConnection({
    type: ElementType.SequenceFlow,
    looped: true,
    source,
    target,
    waypoints: [
      { x: 375, y: 50 },
      { x: 375, y: 150 },
      { x: 25, y: 150 },
      { x: 25, y: 50 },
    ],
  });

  create.start(event, [target, source, sequenceFlow]);
}

and I converted that into the following code, for the custom command handler, but it is not adding the shapes and no errors that I can see:

export default function CreateLoopHandler(elementFactory, create, canvas, modeling) {

    this._elementFactory = elementFactory;
    this._create = create;
    this._canvas = canvas;
    this._modeling = modeling;
}

    CreateLoopHandler.$inject = [
        'modeling',
        'create',
        'canvas',
        'elementFactory'
    ];

    CreateLoopHandler.prototype.postExecute = function(context) {
        const elementFactory = this._elementFactory,
            create = this._create,
            canvas = this._canvas,
            modeling = this._modeling;
        const sourceDataObject = {
            type: ElementType.ExclusiveGateway,
            gatewayType: GatewayTypeValue.Open,
            looped: true};

        const sourceShape =modeling.createShape(sourceDataObject,{x: 350, y: 0,}, canvas.getRootElement());

        const targetDataObject = {
            type: ElementType.ExclusiveGateway,
            gatewayType: GatewayTypeValue.Close,
            looped: true};

        const targetShape = modeling.createShape(targetDataObject, {x: 0, y: 0}, canvas.getRootElement());

modeling.createConnection({
            type: ElementType.SequenceFlow,
            looped: true,
            sourceShape,
            targetShape,
            waypoints: [
                { x: 375, y: 50 },
                { x: 375, y: 150 },
                { x: 25, y: 150 },
                { x: 25, y: 50 },
            ],
        },canvas.getRootElement());

    };

What is the correct code for what I’m trying to achieve?

2

Can you provide a bit more context? What is it you want to achieve? Can you describe it in simple terms? I can’t see where you are executing this command.

3

Yes, I have a item called loop on my custom PaletteProvider that creates the shapes on click or drag, in order to implement ctrl + z and ctrl + z I am trying to create a custom command handler.

this is the code I have for the palette provider:

assign(actions, 'create.loop': Object.assign(getExclusiveGatewayLoopObject(), {
          action: {
            click: function (event, element) {
              commandStack.execute('createLoop', {
                event, element
              });
            },
            dragstart: function (event) {
              commandStack.execute('createLoop', {
                event, element
              });
            },
          }
        })
      });

I register the command in another part of my code

 this._eventBus.on('diagram.init', function() {

    commandStack.registerHandler('createLoop', CreateLoopHandler);
  });

I am able to debug the command postExecute code when is being called on click the Palette Provider icon but I do not see any shape added to the modeler canvas or any error on the console.

4

The code looks okay to me. Is there no error in the console at all?

5

No errors on the console. I debugged and it looks is passing through all the lines.

There is one thing, my project is on and old version of the library, Is there a chance an old versions do not allowed to do those commands?

this is what I have on my package.json as today

    "bpmn-js": "^9.4.1",
    "bpmn-js-bpmnlint": "^0.19.0",
    "bpmnlint": "^8.1.0",
    "diagram-js": "^9.0.0",
6

The code should work with older versions, too. But updating to the latest version is always a good idea.