Our application is written using Sencha Ext JS framework which includes GoJS for the modeling pieces. When the SelectionDeleting event is fired we put up a confirmation dialog which doesn’t block (async) like a normal JavaScript alert does. When the user clicks a button it invokes a callback. The problem with this is when the dialog is shown the function continues and GoJS deletes the nodes.
Any ideas on how to do this? Can I do e.cancel = true in the event function and later tell the diagram to delete those nodes? Then I wonder if the SelectionDeleting event will get fired again causing more problems?
I’m unsure about non-blocking dialogs. What is supposed to happen when the user clicks the Delete key several times in a row in very quick succession? If mode-less dialogs are supposed to eventually show up, might there be several of them? What happens if the user says “no” in one window and “yes” in another (contradictory answers)? If there aren’t multiple dialogs, how is the system supposed to know to ignore events that occur after the call to CommandHandler.deleteSelection()? For example, what should happen if the user clicks Delete and then quickly changes the selection – what should be deleted?
Anyway, I suspect you do not want to implement a “SelectionDeleting” DiagramEvent listener. Instead, override CommandHandler.deleteSelection and (eventually) call the base method when you really want to perform the deletion. You’ll probably want to temporarily set Diagram.isEnabled to false, to avoid dealing with any events that might happen while you are waiting for the user’s response.
These are model dialogs so the user can’t delete multiple times or click anywhere else on the screen. They are asynchronous so the JavaScript code continues through the method even though the dialog is showing. The dialog has a callback function when a button is clicked.
So, when a dialog is shown, the user can’t interact with the GoJS diagram but the JavaScript code continues and the nodes are deleted.
onSelectionDeleting: function(e) {
var me = this,
iter;
Ext.log(‘Process.onSelectionDeleting’);
Ext.Msg.alert(’[Confirm]’, ‘[Do you want to delete all selected nodes?’, function(btn) {
if (btn == OK) {
e.cancel = true;
}
}, me);
// code keeps running to end of method and GoJS deleted nodes before user clicks button in dialog
…
}