JointJS / Rappid change inspector / cell model value without using an inspector

Question

So, I'm trying to update the value of the text attribute (name) in the cell model without using the inspector, I need this to update both the inspector field and the value of the associated cell. I don’t know how to do it. Is it possible?

Answer 1

It’s a little difficult to say exactly what you mean from your question, plus I do not have a Rappid license, so I can’t test the UI inspector part: o (However, assuming I understand you correctly ...

... if you extend the prototype of the form with a property, which you can then bind to it in Angular as usual, and it automatically updates the form when the property changes.

I think this will also update the inspector cell, but I cannot verify this because I do not have a Rappid license, as I said.

So, if you add the name property to the form as follows:

Object.defineProperty(joint.shapes.basic.Rect.prototype, 'name', { get: function () { return this.attr('text/text'); }, set: function (value) { this.attr('text/text', value); } }); 

You can set the item you want to change in the area of ​​your controller and link it. HTML:

 <div ng-app> <div ng-controller="MyCtrl"> <div id="paper"/> <div> <label>Type here:</label> <input type="text" ng-model="element.name" /> </div> </div> </div> 

Controller:

 function MyCtrl($scope) { var graph = new joint.dia.Graph; var paper = new joint.dia.Paper({ el: $('#paper'), width: 400, height: 400, model: graph, gridSize: 1, interactive: false }); var element = new joint.shapes.basic.Rect({ position: {x:100, y:30}, attrs: {text: {text: 'edit my name'}}, size: { height: 92.7051, width: 150} }); $scope.element = element; graph.addCell(element); Object.defineProperty(joint.shapes.basic.Rect.prototype, 'name', { get: function () { return this.attr('text/text'); }, set: function (value) { this.attr('text/text', value); } }); } 

Jsfiddle work here: http://jsfiddle.net/r7n9t9s6/3/