JointJS - how to change the content of a joint.elementTools.Button when clicked

userchEl1 0
Viewed 24

I used the example code to create an info button (https://resources.jointjs.com/tutorial/element-tools). But I would like it to change when clicked. (I actually modified the example to show a "+" instead of a blue info circle, by using text and textContent instead of a path in the markup definition. But I would be happy to learn how to make the original example change when clicked, too.)

So when you click it I want it to show some info and change to a "-". And then if you click the "-", change back to a "+". I don't see how to change the textContent of the elementTools.Button programmatically or in an event. It was easy enough to change the label of the associated Rectangle. Inside the event I just did this.model.attr("label/text", "whatever"). But how to do it to the element tool Button?

There is an example that's pretty good, using a custom element containing subelements not tools (halfway through https://resources.jointjs.com/tutorial/events). Does it mean I can't use an element tool, that element tools can't change on an event?

jointjs
1 Answers

The behaviour of the Button tool can be adjusted in the callback function in options.action.

joint.elementTools.InfoButton = joint.elementTools.Button.extend({
      name: 'info-button',
      options: { 
           action: function(evt, elementView, buttonView) {
                // your action
           }
       }
});

Although, in your case I would probably go with the example using custom events you linked in your question. It is probably more flexible to work with an element rather than a tool in this instance.

useryiNf10
Related