[Question] Is there a way to bind custom events on custom HTML element?

Hi @kumilingus,

I’m trying to add a custom event on my custom HTML element using official demo from here https://github.com/clientIO/joint/blob/master/demo/shapes/html.html https://github.com/clientIO/joint/blob/master/demo/shapes/src/html.js

I’ve only made a few tweaks like the following:

in html.html

.my-html-element input,
.my-html-element button {
  pointer-events: auto;
}

In the html.js

• Added a button element to the existing template

template: [
    '<div class="my-html-element">',
    '<label data-attribute="mylabel"></label>',
    '<input data-attribute="myinput" type="text"/>',
    '<button>Custom button</button>',
    '</div>'
].join(''),

• Binding the events in paper

paper.on('element:pointerdown', (event) => {
    console.log('clicked on the element!');
});

paper.on('element:button:pointerdown', (event) => {
    console.log('clicked on the button');
});

A repro sample: https://codepen.io/JoshuaMilton/pen/povZpzv?editors=1111

Now, if you click on the element, the regular event will be triggered and logged out “clicked on the element!” But if you click on the button I added, the custom event won’t trigger. The problem here is I don’t know how to correctly bind these custom events on my custom HTML elements. I’ve googled and searched everything that I can possibly find but still cannot figure out how to do so 😅

Thank you for the help!

[konekoya]

@kumilingus Thank you so much for the help. This works perfectly 👍 💯

[kumilingus]

I see. The simplest way would be this:

// onRender();
// `this` is an elementView
$box.find('button').on('click', function() {
  this.notify('element:button:pointerclick', evt);
}.bind(this));

// later
paper.on('element:button:pointerclick', (elementView, evt) => {});

Note, this solution is fine as long as you don’t have thousands of elements. If there is a lot of elements in the graph, then there is also a lot of event handlers in memory. In that case, it is better to bind a single event handler.

var MyPaper = joint.dia.Paper.extend({

  events: Object.assign({
     'click button': 'onButtonClick'
   }, joint.dia.Paper.prototype.events)

  onButtonClick: function(evt) {
    // find view from evt.target
    // trigger `element:button:pointerclick` on the paper
  }
});

For the built-in event attribute, you need to add event attribute to your markup first <button event="element:button:pointerclick">Custom button</button>. It does not work though, I guess, it is because it is guarded by paper.options.guard. I need to investigate it.