Adding event handlers to buttons in foreignObject html

[cam-m]

Introduction

I'm using html in ports (via foreignObject) - is there a (recommended/supported) way to attach event handlers to buttons using jointjs? Or should I build this part using svg support?

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

Here's our tutorial on HTML shapes.

You need to add a custom element view. Here's an example:

const FormView = dia.ElementView.extend({

    events: {
        'submit form': 'onSubmit',
        'change input': 'onChange'
    },

    onSubmit: function (evt) {
        evt.preventDefault();
        this.model.attr('name/props/value', '');
    },

    onChange: function (evt) {
        this.model.attr('name/props/value', evt.target.value);
    }
});

[cam-m]

Thanks @kumilingus

Ok I didn't understand the syntax of the keys to 'events' but did some digging and found this so that clears that up. So would this be the correct syntax for adding an event to a button (that has a class on it)?

  events: {
        'click button.my-class': 'onButtonClick'
    },
    onButtonClick: function (evt) {
        evt.preventDefault();
    },

I'm still unclear how to apply this approach to a Port's view though - i.e. how do I override a Port's view?

[kumilingus]

There is no difference. The element view contains the element and the ports.
Each port has .joint-port class.

events: {
  'click .joint-port button': 'onPortButtonClick'
},
onPortButtonClick: function(evt) {
    evt.stopPropagation();
    const portId = this.findAttribute('port', evt.target);
    /* ... */
}

[cam-m]

Ahhh...ok. excellent, thanks so much