the controlbar customize & event listen

[ChenRenHu]

1. how can i put an extend control icon into controlbar，and then it can do something else like save action ；
2. an event-listen is in need ，such as the remove control bar， when i use the remove bar for delete a sequence cmp，it can get which cmp had been removed；

[b4rtaz]

Hi @ChenRenHu!

1. The control bar doesn't support external buttons, but I like this idea. I will add this feature in the future. You may increase the priority under a consulting service.
2. Basically you may track changes in the definition by listening all changes.

designer.onDefinitionChanged.subscribe((newDef) => { /* ... */);

Now you need to compare the previous definition with the current one. Do you need to listen on all changes or only deletion?

[ChenRenHu]

1. external control bar button： Is there a way to realize this by modifying the source code?
2. the newDef parameter is the whole sequence def？

[b4rtaz]

1. If you fork the repo you may do everything, but you need to maintain the repo alone.
2. Yes.
   BTW: the canDeleteStep callback is called just before deletion (docs: https://nocode-js.com/docs/sequential-workflow-designer/features/editing-restrictions) so you could use this fact.

let deletedStep = null;

const configuration = {
  steps: {
    canDeleteStep: (step) => {
      deletedStep = step;
      return true;
    },
    canInsertStep: () => {
      deletedStep = null;
      return true;
    },
    canMoveStep: () => {
      deletedStep = null;
      return true;
    }
  },
  // ...
}

// ...

designer.onDefinitionChanged.subscribe((newDefinition) => {
  if (deletedStep) {
    console.log('deletedStep', deletedStep);
    deletedStep = null;
  }
});

[ChenRenHu]

thx a lot；