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!

Lashawnda

Can you provide more information about the extra information that you want to store? – Backboard

a vector of strings ['1','2','3'....] – Lashawnda

Answer 1

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.

Coomb

@Coomb 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()`? – Grenville

@Grenville 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 jointjs.com/downloads/joint.js and search for "removeProp", you'll find it. It's signature is simple: removeProp(path[, opt]). – Coomb

Answer 2

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

Testamentary

What is the difference between prop() and set()? – Grenville

Prop is specific to custom data properties. – Polley