Search code examples
javascriptjquerynode.jsyuialloy-ui

AlloyUI: react to node - click event in Diagram Builder


i want to react in a different way to the event when a user clicks on a node in the diagram builder.

I know how to create custom nodes (I found the discussion here on stackoverflow) but I do not know how to overwrite the code that gets called when a user clicks the node.

I tried it with extending the "custom node" example :

 Y.DiagramNodeCustom = Y.Component.create({
    NAME: 'diagram-node',

    ATTRS: {
        type: {
            value: 'custom'
        },
    },
    on: {
  render: function(event) {                        alert('render node');                      
     },
      click: function(event) {                        alert('click node');                    
     },
      select: function(event) {                        alert('select node');                      
     }

    },

    EXTENDS: Y.DiagramNodeTask
});

... but no luck

Who can tell me how I can replace the click event listener ?


Solution

  • you can change the function on the library

    _onNodeClick: function(event) {
        var instance = this;
        //get the object
        var diagramNode = A.Widget.getByNode(event.currentTarget);
        //mark as selected
        instance.select(diagramNode);
        //open edit pannel
        instance._onNodeEdit(event);
    
        event.stopPropagation();
    },