Graph search for element by element's name in jointJS

Question

I have a problem in Rappid/jointJS

I have in stencil.js 4 shapes(2 basic.Circle and 2 basic.Rect) with names START(basic.Circle), END(basic.Circle), Activity(basic.Rect) and Workitem( basic.Rect) and I want in my main.js from all my graph to get the basic shape with name(I mean with attrs text ) "Activity".

This is the Stencil description for "Activity" :

new joint.shapes.basic.Rect({ size: { width: 5, height: 3 },
attrs: {
    rect: {
         rx: 2, ry: 2, width: 50, height: 30,
         fill: '#0000FF'
       },
       text: { text: 'Activity', fill: '#ffffff', 'font-size': 10, 
       stroke: '#000000', 'stroke-width': 0 }
     }
}),

How wil I get it? The only way I can search in my graph so far is if a cell has type basic.Circle(use of get('type') === 'basic.Circle')). but with type Circle I have two items:Activity and Workitem.

Is it so difficult to search for the graph element with name : "Activity"?

Thank you in advance

What do you mean by name? Did you specify it as an attribute property of the model? — Sajith Edirisinghe, Sep 21 '16 at 16:13
Yes @SajithDilshan I have the attribute "text". can you help me access Activity? This is the Stencil description for "Activity" : new joint.shapes.basic.Rect({ size: { width: 5, height: 3 }, attrs: { rect: { rx: 2, ry: 2, width: 50, height: 30, fill: '#0000FF' }, text: { text: 'Activity', fill: '#ffffff', 'font-size': 10, stroke: '#000000', 'stroke-width': 0 } } }), — Reputated_Enginius, Sep 22 '16 at 06:35

score 2 · Answer 1 · answered Sep 23 '16 at 06:24

You can obtain all the elements (except for links) from following method

var allElement = graph.getElements()

Next if you want to obtain elements with 'Activity' do as follows

var activityElements = [];

allElement.forEach(elem => {
    var textVal = elem.attributes.attrs.text.text;
    if(textVal !== undefined && textVal === 'Activity') {
        activityElements.push(elem);
    }
});

Now the activityElements array will contain all the elements you require.

Reputated_Enginius · Accepted Answer · 2016-09-25T20:30:10.190

1

I solved my problem by taking element data in JSON format:

 _.each(this.graph.getElements(), function(element) {


             if(element.attributes.attrs["text"]["text"] == "Activity"){
             //alert("YEAHHHHHH");
             }

            });

edited Sep 25 '16 at 20:30

answered Sep 23 '16 at 07:42

Reputated_Enginius

336
3
22

1

JSON.stringify() and JSON.parse() lines are redundant. the 'element' variable is already a Javascript object. – Sajith Edirisinghe Sep 23 '16 at 09:55
Thank you @SajithDilshan but if(element.attrs["text"]["text"] == "Activity"){ //alert("YEAHHHHHH"); } doesn't work in my case. Do you know how to do it? – Reputated_Enginius Sep 23 '16 at 12:23
1

It should be if(element.attributes.attrs["text"]["text"] == "Activity"). Further, you can inspect the full structure of element object by executing console.log(element) and this will print the object into browser console. – Sajith Edirisinghe Sep 23 '16 at 12:36

score 1 · Answer 3 · answered Oct 03 '16 at 14:51

1

you could use the api on element as well, element.attr('text') returns the text object from the shape: { text: 'Activity', fill: '#ffffff', 'font-size': 10, stroke: '#000000', 'stroke-width': 0 }

answered Oct 03 '16 at 14:51

vt.

1,398
7
15

score 0 · Answer 4 · answered Jun 29 '18 at 04:56

0

You could also set an "id" attribute to your shape and use graph.getCell('id_name_goes_here'); which would be much simpler if you didn't mind adding an id field to each shape.

answered Jun 29 '18 at 04:56

Dominic Holt

162
1
12

Graph search for element by element's name in jointJS

4 Answers4