Prevent delete shape

Developers
#1

Hello,

i would like to make validation before delete task phase and if is validation is not correct i would like to prevent to delete it.

image

I tried to make a Rule for this action. But i’m not sure, when i make it correctly.

I created custom rule for shape.remove

import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';

export class CustomRulesProvider extends RuleProvider {
  constructor(eventBus) {
    super(eventBus);
  }

  init() {
    super.addRule('shape.remove', function (context) {
      const condition = null;

      return condition ? true : false;
    });
  }
}

export const CustomRulesProviderModule = {
  __init__: ['customRuleProvider'],
  customRuleProvider: ['type', CustomRulesProvider],
};

And imported it to new modeler instance, where i had a few next modules and it is works fine. Problably is problem with my custom rule provider. Maybe bad event (‘shape.remove’) or something else ? Condition is for illustration, but this rule is not executed.

Thank you for your help.

#2

Hi @tomas90, welcome to the forum!

You can give your custom rule a higher priority to make sure it will be called before the default one

this.addRule('shape.remove', 2000, function(context) { ... });

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

#3

Maybe you can also have a look inside this thread.

#4

Oh thank you, i will try it and how can i make the prevent delete ? Should i only return false from this rule method and phase won’t be removed ?

#5

Ok, priority and event elements.delete from recommended topic works fine, icon with trash - delete element is hidden. But i would like to show icon (trash) for delete and in my rule show some notification for user, why he can’t to delete this element and after this notification return false and element won’t be deleted. Exists something like this event ? Thank you.

#6

What you’re looking for seems to be a custom action inside the context pad

  1. Click the trash icon
  2. Check with your rule whether the element can be deleted or not
    2a. If yes: execute element removal
    2b. If no: show notification

I think it would make sense to override the existing deleting action with your custom one.

#7

Oh thanks a lot, i will try it.

#8

I’m little confused, how i should start with overriding deleting action.

I have empty skelet, extend ContextPadProvider, but i don’t know how should i to start. Which method should i override ? You sent to me link to this part : … var deleteAllowed = rules.allowed(‘elements.delete’, { elements: [ element ] });

But i don’t know, how i integrate it to me custom class. Thanks a lot for advice.

import ContextPadProvider from 'bpmn-js/lib/features/context-pad/ContextPadProvider';

export class CustomContextPadProvider extends ContextPadProvider {}

export const CustomContextPadProviderModule = {
  __init__: ['contextPadProvider'],
  contextPadProvider: ['type', CustomContextPadProvider],
};
#9

With your custom ContextPadProvider you can simply override any existing entry, for example

getContextPadEntries(element) {
    return function (entries) {

      // delete an entry
      delete entries["delete"];

      // customize an entry
      entries["delete"] = {
        group: "edit",
        className: "bpmn-icon-trash",
        title: "Remove",
        action: {
          click: function (event) {
             console.log(element);
          }
        }
      };

      return entries;
    };
}

In this manner, it’s also possible to customize the delete action in the way you want it to have (e.g. displaying notifications).

You can hook into this CodeSandbox example to get an example with a simple alert.

#10

Ok, this is more clear for me, thanks a lot :).

1 Like