I created a custom item using the JointJS library. The object has two nested rectangles with two related texts.
I want to change my attributes inside the model ... I only get through JQUERY changing its attributes and css through my identifiers.
I want to change attrs in the model, and then update the node to show its new look.
Sorry if I cannot explain this well enough, I leave jsFiddle →
http://jsfiddle.net/y9ucn/
If you need more information, please ask.
Thanks.
Here is the class that defines my custom object and on jsfiddle, you can reproduce the example:
MyRect = joint.shapes.basic.Generic.extend({ markup: [ '<g class="rotatable">', '<g class="scalable">', '<rect class="firstRect"/><rect class="secondRect"/>', '</g>', '<text class="textFirstRect"/><text class="textSecondRect"/>', '</g>'].join(''), defaults: joint.util.deepSupplement({ type: 'basic.MyRect', attrs: { '.firstRect': { 'stroke': '#0A1317', 'stroke-width': 1, 'fill': '#DBF024', 'width': 100, 'height': 30, }, '.secondRect': { 'stroke': '#0A1317', 'stroke-width': 1, 'fill': '#DBF024', 'width': 100, 'height': 30, }, '.textFirstRect': { 'ref': '.firstRect', 'ref-x': .5, 'ref-y': .5, 'y-alignment': 'middle', 'x-alignment': 'middle', 'fill': '#333', 'font-size': 12, 'font-family': 'Calibri,Arial', }, '.textSecondRect': { 'ref': '.secondRect', 'ref-y': .5, 'ref-x': .5, 'y-alignment': 'middle', 'x-alignment': 'middle', 'fill': '#333', 'font-size': 12, 'font-family': 'Calibri,Arial' } } }, joint.shapes.basic.Generic.prototype.defaults), initialize: function () { _.bindAll(this, 'format'); this.format(); joint.shapes.basic.Generic.prototype.initialize.apply(this, arguments); }, format: function () { var attrs = this.get('attrs'); attrs['.secondRect'].transform = 'translate(0,30)'; } });