How to change shape properties by clicking

[makleo2002]

Introduction

Let's say I have a button to change the color. How can I change the properties of a shape by clicking on it?I have to click on the shape, then change the color of the outline on the button and the shape should also change it. Even when you click on an element, the button should update and display the color of the currently selected element. I have the boundary tool and highlights installed on the figures.

Steps to reproduce

No response

Restrictions & Constraints

No response

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

JointJS

[VADDIJASWANT]

Hi @makleo2002,

Check out this tutorial on how to use click events in JointJS. When you click on a shape, it triggers a click event. This event gives you access to the shape’s details (model),which contains all the elements properties including its color. You can then use this color and assign it for a button. Similarly, when you change the button’s color, you can update the shape’s color with the new one. This way, the shape on your screen will reflect the new color.

[makleo2002]

I know how to set the property, but how can I get it?

[VADDIJASWANT]

I believe you’re setting a property using the syntax model.attr("rect/fill","newColor"). If that’s the case, you can retrieve that property using model.attr("rect/fill"). OR
Since model is an object, you can access its properties in the same way you would with any other object. In other words, you can get their values directly from the model.

[makleo2002]

Thanks

[makleo2002]

and how to set properties for Paper, they are not set through this method

[kumilingus]

What paper properties do you have in mind?

Here's the paper API: https://resources.jointjs.com/docs/jointjs/v4.0/joint.html#dia.Paper