Can I add new attributes in jointjs element?

Question

I want to create a custom element with new attributes, I created my custom element like that but I need a new attribute to store information about the element.

joint.shapes.basic.newRect = joint.shapes.basic.Generic.extend({

markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',

defaults: joint.util.deepSupplement({

    type: 'basic.newRect',
    attrs: {
        'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
        'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' }
    }

}, joint.shapes.basic.Generic.prototype.defaults)

Thanks!

Can you provide more information about the extra information that you want to store? — Ryan G, May 30 '14 at 17:51

score 13 · Accepted Answer · answered May 31 '14 at 07:18

You can add new properties next to the type and attrs. These will be your default properties for your element, like so:

joint.shapes.basic.newRect = joint.shapes.basic.Generic.extend({

markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',

defaults: joint.util.deepSupplement({

    type: 'basic.newRect',
    attrs: {
        'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
        'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' }
    },
    mycustom: 'foo'

}, joint.shapes.basic.Generic.prototype.defaults)

Later when you instantiate your element, you can also add properties only to that specific element:

var myNewRect = new joint.shapes.basic.newRect({ position: { x: 1, y: 1 }});
myNewRect.set('mycustom2', 'bar')
myNewRect.get('mycustom') // 'foo'
myNewRect.get('mycustom2') // 'bar'

All these properties will be taken into account when serializing the graph as well.

@dave What should I prefer in this example: `myNewRect.set('mycustom', 'foo')` or 'myNewRect.prop('mycustom', 'foo')`? And how can I remove this element as there is no `removeProp()`? — user3142695, Oct 31 '15 at 18:35
@user3142695 both set() and prop() are good for flat properties. The power of prop() is in nested properties. el.prop('mycustom/nested/object/property', 'foo'). Good catch with removeProp()! It is actually there but somehow we skipped it in our API docs. If you download http://jointjs.com/downloads/joint.js and search for "removeProp", you'll find it. It's signature is simple: removeProp(path[, opt]). — dave, Nov 03 '15 at 15:20

score 2 · Answer 2 · answered Sep 04 '15 at 16:18

2

You can also use the provided Element#prop. See http://jointjs.com/api#joint.dia.Element:prop

answered Sep 04 '15 at 16:18

Archit Baweja

973
7
18

What is the difference between `prop()` and `set()`? – user3142695 Oct 31 '15 at 18:35
Prop is specific to custom data properties. – Diogo Garcia Dec 11 '17 at 10:30

Can I add new attributes in jointjs element?

2 Answers2