Events

The architecture of the framework is built on the event-based model, that allowed to achieve weak connectivity between components and modifying the editor with plugins

The editor can trigger the following events:

Event name	Parameters	Preventable	Note
nodecreate	node	✓
nodecreated	node
noderemove	node	✓
noderemoved	node
connectioncreate	{ output, input }	✓
connectioncreated	connection
connectionremove	connection	✓
connectionremoved	connection
nodetranslate	{ node, x, y }	✓
nodetranslated	{ node }
selectnode	node
nodeselect	node	✓
nodeselected	node
rendernode	{ el, node, component, bindSocket, bindControl }		el is a HTMLElement
rendersocket	{ el, input, output, socket }
rendercontrol	{ el, control }
renderconnection	{ el, connection:, x1, y1, x2, y2 }
componentregister	component		it is used both in the editor and in the engine
keydown	e		parameter is a KeyboardEvent
keyup	e		parameter is a KeyboardEvent
translate	{ transform, x, y }	✓	triggered when moving the scene
zoom	{ translate, zoom }	✓	triggered when zooming the scene
click	{ e, container }		e is a MouseEvent
mousemove	{ x, y }		constantly updates the position of the mouse relative to the working area
contextmenu	{ e, view, node }		depending on the object on which the menu is called, the view or node will be passed
import	data
export	data
process			is intended for external use (does not have internal triggers)
error	{ message, data }
warn	message

Subscribe to events using the method on()

editor.on('process', () => {
  // for instance, call the editor.process()
});

Preventable events are performed before the action and give you control to make a decision to prevent them

editor.on('nodecreate', node => {
   // trigger after each of the first six events

   /// check if there is already a node with that name
  var haveSomeNode = editor.nodes.some(item => item.name === node.name); 
  return !haveSomeNode; // prevent the addition of a new node
});

Before the action, all listeners of the event are checked, and if at least one returns false, then the action will not be executed. By default return true is not needed.

You can handle multiple events. It may be necessary to perform the processing not with every change in the editor, but only with those, that can influence the processing result (for example, there is no sense in executing the processing if the user has only changed the position of the node)

editor.on('nodecreated connectioncreated noderemoved connectionremoved', () => {
    await engine.abort();
    await engine.process(editor.toJSON());
});