Jointjs/rappid Change Inspector/cell Model Value Without Using Inspector

So I'm trying to update the value of a the text attribute (name) in a cell model without using the inspector, I need this to update both the inspector field and linked cell model v

Solution 1:

It is a little hard to tell exactly what you mean from your question, plus I don't have a Rappid license so I can't test the UI Inspector part :o( However assuming I understand you properly...

...if you extend the prototype of a shape with a property you can then databind to it in Angular as normal and it automagically updates the shape as you change the property.

I guess this will also update the inspector cell too, but I can't test this because I don't have a Rappid license as I said.

So if you add a name property to a shape like this:

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

You can expose the element you want to edit on your controllers scope and bind to it. The HTML:

<divng-app><divng-controller="MyCtrl"><divid="paper"/><div><label>Type here:</label><inputtype="text"ng-model="element.name"  /></div></div></div>

The controller:

functionMyCtrl($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 () { returnthis.attr('text/text'); },
      set: function (value) { this.attr('text/text', value); }
  });

}

Working jsfiddle here: http://jsfiddle.net/r7n9t9s6/3/