Newly added module does not appear - how to add to the menu object ?

[pkasson]

Prompting for the name:

var name = $('#modalInput').val();

editor.addModule(name); editor.changeModule(name);

... but the menu does not reflect the added module.

[jerosoler]

In the drawflow library there is no menu.

You have to add the object to the menu you have created yourself.

For example adding li to ul tag: https://stackoverflow.com/questions/20673959/how-to-add-new-li-to-ul-onclick-with-javascript

[pkasson]

thanks - I did experiment with this and got it add:

  var newModule = '<li onclick="editor.changeModule(' + singleQuote + name + singleQuote + ');  changeModule(event);" class>' + name + '</li>';

  $("#menu ul").append(newModule);

But, when I save it, it does not get restored when loading it back. Is there something else you need to do other than:

  editor.addModule(name);
  editor.changeModule(name);

[pkasson]

Add ... subsequently - how to add the right click delete, from a newly added module.

[jerosoler]

But, when I save it, it does not get restored when loading it back. Is there something else you need to do other than:

Reading JSON and reading modules created.

Add ... subsequently - how to add the right click delete, from a newly added module.

Add new event listener to element. https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener

[pkasson]

I see the collection and each parent level is a tab in that menu - thanks for clarification.

[pkasson]

I was not able to add a context menu to the 'menu' of modules -- don't know if its due to that already being handled by draw flow, but I was able to add a keyboard 'delete' key handler to delete tabs. Great thing to have ability to add and delete module tabs - here is the code to delete (don't forget, you need to be able to have something focusable to be able to delete, so added something to the module element itself ... added tabIndex = 0):

When I add a new module to the menu:

var newModule = '<li id=' + name + ' onclick="editor.changeModule(' + singleQuote + name + singleQuote + '); changeModule(event);" tabindex="0" class>' + name + '</li>';

and the js handler:

  $( "#menu" ).keydown(function(e) 
  {
  if (e.key === 'Delete' || (e.key === 'Backspace' && e.metaKey)) 
  {
   var selectedModule =  $(".selected").attr("id"); 

   editor.removeModule(selectedModule);

   $('#' + selectedModule + " li").remove();

   editor.changeModule('Home');
  }