How do I add a class to a JointJS cell?

Question

I can use the attr method to change attributes of a cell, e.g. to set the stroke of a link:

conn.attr({'.connection': { stroke: 'red' }});

But I would rather set such attributes in the css file, e.g. as in this

.connection {
    stroke: #999;
}

.connection.error {
    stroke: #F00;
}

Is there a way to add such classes to the generated SVG?

I tried

conn.attr({'.connection': { class: 'error' }});

but that removes the .connection class, which is important. It works to write

conn.attr({'.connection': { class: 'connection error' }});

but clearly that will not scale to having multiple orthogonal classes (error, highlighted...)

Did you try [Vectorizer > addClass(className)](http://jointjs.com/api#v:addClass)? — xmojmr, Aug 15 '15 at 06:29
No. I was under the impression that `Vectorizer` will work on the DOM objects, which are owned by the view (`ElementView`), while the above affects the model object (`Element`). — Joachim Breitner, Aug 15 '15 at 06:44
Hmm, the real code is of course part of something relatively large. Rebuilding that will take a while. — Joachim Breitner, Aug 15 '15 at 07:03
Hmm, you might be right after all, see my answer (about which I am not happy.) — Joachim Breitner, Aug 15 '15 at 07:15

score 3 · Accepted Answer · answered Aug 15 '15 at 07:14

3

In one of the official demos I find this code:

function toggleLive(model, signal) {
    // add 'live' class to the element if there is a positive signal
    V(paper.findViewByModel(model).el).toggleClass('live', signal > 0);
}

I must say that this looks rather like a violation of the model-view separation to me to directly interact with the view this way, but if that is used in the official code then I conclude that this is the most idiomatic way.

answered Aug 15 '15 at 07:14

Joachim Breitner

25,395
6
78
139

Thank you for finding this hidden gem. jQuery can also be used: `$(paper.findViewByModel(model).el).toggleClass('live')`. I know it looks wrong but it's especially useful to associate _data_ or other stuff to it (no `data` function in Vectorizer). If we use use the _$el_ jQuery reference, it becomes even simpler: `paper.findViewByModel(model).$el.data('liveID', 14214)`. – CPHPython Feb 08 '18 at 10:49

score 1 · Answer 2 · answered Aug 01 '18 at 13:24

Anyone looking for answer to this 2015 question in 2018, try this out as well.

I had a similar problem and solved it using highlighters.

cellView.highlight(null, {
    highlighter: {
        name: 'addClass',
        options: {
            className: 'some-custom-class'
        }
    }
});

The above code will add a class some-custom-class to the cell view element. To remove the class, use cellView.unhighlight(...) method with the exact same arguments. Note that now it'll only remove some-custom-class and other classes if present will stay as it is.

Ref: https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#highlighters.addClass

How do I add a class to a JointJS cell?

2 Answers2