Can we create custom node with the custom events

[Yevheniia]

Hello, we need the ability to create our own node with the custom events, this node should support click events on '+' buttons and show an alert window for example. The main thing that we should be able to add this node from the code,

this.diagram.add(ShapeFactory.CreateShape(ShapeType.FILTER));

How is it possible to do?

For now I'm able to do this bypassing the HTML template as a string to 'shape.content' property, but in this case I don't have the ability to call a click function, I need to bind it manually by the element id.

const node: NodeModel = {
      id: this.name,
      width: 122,
      height: 122,
      shape: {
        type: 'HTML',
        content: '<div class="custom-connector"><div class="plus-btn" id="test">+</div></div>'
      }
};

// Assigning click event
const element = document.getElementById(`test`);
element .onclick = this.LeftPortClick.bind(this);

Maybe you knows a more graceful solution of how to do this?

Because I would like to interact with buttons by this way:

const node: NodeModel = {
      id: this.name,
      width: 122,
      height: 122,
      shape: {
        type: 'HTML',
        content: '<div class="custom-connector"><div class="plus-btn" (click)="myClickFunc">+</div>/div>'
      }
};

myClickFunc() {

    alert('test');
}

[Gobinath Dhamotharan]

Hi Yevheniia,

In your code example, you have rendered HTML node by setting string to the node content property. So, the event binding will not work in string HTML content. Please use HTML node as a template to achieve your requirement.  Please find the sample below.

https://stackblitz.com/edit/angular-esr7xm

Regards,

Gobinath

[Chhavi]

Hi Team,

I want to achieve the same thing but not in angular, as I am using React Diagram component. I have few needs-

1. I want to add this custom actionable node into symbol pallete.
2.  And when drag that node from pallete to canvas it should be actionable like all the events of that component should work

[Sivaranjith Jeyabalan]

Hi Chhavi,

We have created a sample to achieve your requirement. Currently we don’t have support to render html template node in symbol palette so, we have rendered an image node in palette and converted it to html template node on drop event. Now the button click is triggered properly. Please find the sample below.

Sample: 3sobwz (forked) - StackBlitz

[Chhavi]

thanks for your response

[Preethi Rajakandham]

Hi Chhavi,

You're welcome! Please let us know if you have any further queries on this. We will be happy to assist.

Regards,

Preethi R