React-diagrams: There is no way to temporarily suppress the delete behaviour

[Azim-Palmer]

Steps to reproduce

1. Visit The simple demo
2. Select a node
3. Click on anything other than the diagram inside the center panel (so you're still within the storybook iframe that holds the diagram)
4. Press backspace

Expected
As the diagram doesn't have focus it shouldn't respond to the backspace key event. Nothing should happen.

Actual
The currently selected node is deleted.

This is an issue because I'm building a details edit panel, when I delete a character from the name it deletes the node. See this to get a better idea.

https://github.com/projectstorm/react-diagrams/blob/40b4e14f156457acbd200db859172c99bd8251f4/src/widgets/DiagramWidget.tsx#L128

Poking into the code I can see that it's registering a page wide key hook and doesn't seem to:

1. Have any context if the diagram is focused
2. Have a way to temporarily disable the behaviour.

Let me know if I've missed something, but if you let me know your preferred solution I'll submit a pull request (because this library is awesome).

[Azim-Palmer]

Here's my naive/interim solution : https://github.com/Azim-Palmer/react-diagrams/commit/7ec6315d1ea7bc7d3b336cd404b33cb5ea9f3c1c

[dylanvorster]

Fixed in storm-react-canvas (the new foundation for react-diagrams thats currently in development) (you have full control over the event bus)

[ajboni]

Hi! Is there any fix for this project? should I move to react canvas instead? Im having the exact same problem, a popup or a focus on another element will still delete the node on backspace/delete.
thanks,

[sjy]

@rodobodolfo set deleteKeys as empty array
```jsx
..
deleteKeys={[]}

...

[ajboni]

@sjy perfect, worked like a charm!! Thank you!!

[gj1118]

@sjy @rodobodolfo , Can you please let me know where should I make this change ? I am facing the same issue.

Thanks
Gagan

[ajboni]

@sjy @rodobodolfo , Can you please let me know where should I make this change ? I am facing the same issue.

Thanks
Gagan

pass it as a prop:

< SRD.DiagramWidget
                deleteKeys={[]}
                allowLooseLinks={false}
                className="srd-diagram"
                diagramEngine={this.engine} 
/>

[mitkpl]

Also its bad pattern, but in entityRemoved listener you can throw an error

  handleNodeRemoved = event => {
    const userConfirmation = window.confirm('message');
    if (!userConfirmation) {
      throw new Error();
    }
    // delete instructions...
  };

[riyadshauk]

@Azim-Palmer @rodobodolfo @sjy @gj1118

Here's a more complete example that you can run and interact with. The end result is that I modified the delete functionality to only fire when shift is simultaneously pressed down. https://github.com/riyadshauk/oracle-digital-assistant-flow-js/blob/master/builder-web-app/src/base-components/ModifiedDiagramWidget.js

This example is built off of the Large Application example, but in the BodyWidget file, just use your own ModifiedDiagramWidget instead of { DiagramWidget } from 'storm-react-diagrams'.

[rascidomrani]

node.registerListener({
entityRemoved :(e:any)=>{
e.stopPropagation();
}
});

then you can delete the node in your code