jointjs - Editable text input on shapes -

how have text area input/text input inside rectangle in joint js?

i have few rectangles. have text input rectangles begin with. have create custom element or can use pre-defined shapes?

here's code:

                var graph = new joint.dia.graph;                 var paper = new joint.dia.paper({                     el: $('#myholder'),                     width: 1000,                     height: 680,                     model: graph,                     gridsize: 1,                     defaultlink: new joint.dia.link({                         attrs: {'.marker-target': {d: 'm 10 0 l 0 5 l 10 10 z'}}                     }),                     validateconnection: function (cellviews, magnets, cellviewt, magnett, end, linkview) {                         // prevent linking input ports.                         if (magnets && magnets.getattribute('type') === 'input')                             return false;                         // prevent linking output ports input ports within 1 element.                         if (cellviews === cellviewt)                             return false;                         // prevent loop linking                         return (magnets !== magnett);                         // prevent linking input ports.                         return magnett && magnett.getattribute('type') === 'input';                     },                     snaplinks: {radius: 75},                     interactive: function (cellview, methodname)                     {                         if (cellview.model.get('isinteractive') === false)                             return false;                         return true;                     }                 });                  joint.shapes.devs.circlemodelview = joint.shapes.devs.modelview;                  var rect = new joint.shapes.basic.rect({                     isinteractive: false,                     position: {x: 10, y: 50},                     size: {width: 51, height: 41},                     attrs: {rect: {fill: '#d6f2fc', stroke: '#7e7e7e'}}                 });                  var rectgroup0 = new joint.shapes.basic.rect({                     isinteractive: false,                     position: {x: 10, y: 170},                     size: {width: 51, height: 41},                     attrs: {rectgroup0: {fill: 'white', stroke: '#7e7e7e'}}                 });                  paper.on('cell:pointerdblclick', function (cellview, evt, x, y)                 {                     var clone = cellview.model.clone();                     if (rect.id === cellview.model.id)                     {                         clone = new joint.shapes.devs.model({                             position: {x: 160, y: 50},                             size: {width: 111, height: 61},                             inports: [''],                             outports: [''],                             attrs: {                                 '.': {magnet: false},                                 '.label': {text: '', 'ref-x': .4, 'ref-y': .2},                                 '.inports circle': {type: 'input'},                                 '.outports circle': {type: 'output'},                                 '.port-body': {r: 3}                             }                         });                         graph.addcell(clone);                     }                     else if (rectgroup0.id === cellview.model.id)                     {                         clone = new joint.shapes.devs.model({                             position: {x: 160, y: 170},                             size: {width: 551, height: 150},                             attrs: {                                 '.label': {text: 'group', 'ref-y': 0.1, 'y-alignment': 'middle'},                                 rectgroup0: {fill: ''},                                 '.': {magnet: true}                             }                         });                         graph.addcell(clone);                     }                 });  //                // first, unembed cell has been grabbed user.                 paper.on('cell:pointerdown', function (cellview, evt, x, y) {                      var cell = cellview.model;                     if (!cell.get('embeds') || cell.get('embeds').length === 0) {                         // show dragged element above other cells (except when                         // element parent).                         cell.tofront();                     }                      if (cell.get('parent')) {                         graph.getcell(cell.get('parent')).unembed(cell);                     }                 });                 // when dragged cell dropped on cell, let become child of                 //element below.                 paper.on('cell:pointerup', function (cellview, evt, x, y) {                      if (cellview.model.islink())                         return;                      var cell = cellview.model;                     var cellviewsbelow = paper.findviewsfrompoint(cell.getbbox().center());                     if (cellviewsbelow.length) {                         // note findviewsfrompoint() returns view `cell` itself.                         var cellviewbelow = _.find(cellviewsbelow, function (c) {                             return c.model.id !== cell.id;                         });                         // prevent recursive embedding.                         if (cellviewbelow && cellviewbelow.model.get('parent') !== cell.id) {                             cellviewbelow.model.embed(cell);                         }                     }                 });                 graph.addcells([rect, rectgroup0]); 

you have create custom html element.

    var graph = new joint.dia.graph;     var paper = new joint.dia.paper({ el: $('#paper-html-elements'), width: 650, height: 400, gridsize: 1, model: graph });  // create custom element. // ------------------------      joint.shapes.html = {};     joint.shapes.html.element = joint.shapes.basic.rect.extend({         defaults: joint.util.deepsupplement({             type: 'html.element',             attrs: {                 rect: { stroke: 'none', 'fill-opacity': 0 }             }         }, joint.shapes.basic.rect.prototype.defaults)     });  // create custom view element displays html div above it. // -------------------------------------------------------------------------      joint.shapes.html.elementview = joint.dia.elementview.extend({          template: [             '<div class="html-element">',             '<button class="delete">x</button>',             '<input type="text" value="i\'m html input" />',             '</div>'         ].join(''),          initialize: function() {             _.bindall(this, 'updatebox');             joint.dia.elementview.prototype.initialize.apply(this, arguments);              this.$box = $(_.template(this.template)());             // prevent paper handling pointerdown.             this.$box.find('input,select').on('mousedown click', function(evt) {                 evt.stoppropagation();             });             // example of reacting on input change , storing input data in cell model.             this.$box.find('input').on('change', _.bind(function(evt) {                 this.model.set('input', $(evt.target).val());             }, this));             this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));             // update box position whenever underlying model changes.             this.model.on('change', this.updatebox, this);             // remove box when model gets removed graph.             this.model.on('remove', this.removebox, this);              this.updatebox();         },         render: function() {             joint.dia.elementview.prototype.render.apply(this, arguments);             this.paper.$el.prepend(this.$box);             this.updatebox();             return this;         },         updatebox: function() {             // set position , dimension of box covers jointjs element.             var bbox = this.model.getbbox();             // example of updating html data stored in cell model.             this.$box.find('label').text(this.model.get('label'));             this.$box.find('span').text(this.model.get('select'));             this.$box.css({                 width: bbox.width,                 height: bbox.height,                 left: bbox.x,                 top: bbox.y,                 transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'             });         },         removebox: function(evt) {             this.$box.remove();         }     });  // create jointjs elements , add them graph usual. // -----------------------------------------------------------      var el1 = new joint.shapes.html.element({         position: { x: 80, y: 80 },         size: { width: 170, height: 100 },         label: 'i html',         select: 'one'     });     var el2 = new joint.shapes.html.element({         position: { x: 370, y: 160 },         size: { width: 170, height: 100 },         label: 'me too',         select: 'two'     });     var l = new joint.dia.link({         source: { id: el1.id },         target: { id: el2.id },         attrs: { '.connection': { 'stroke-width': 5, stroke: '#34495e' } }     });      graph.addcells([el1, el2, l]);  }) 

please check out link http://resources.jointjs.com/tutorial/html-elements