Editable text input on shapes

Question

How to have text area input/text input inside rectangle in joint js?

I have few rectangles. I would like to have text input into rectangles to begin with. Do I have to create custom element for this or can I use pre-defined shapes?

Here's my 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 from input ports.
                        if (magnetS && magnetS.getAttribute('type') === 'input')
                            return false;
                        // Prevent linking from output ports to input ports within one element.
                        if (cellViewS === cellViewT)
                            return false;
                        // Prevent loop linking
                        return (magnetS !== magnetT);
                        // Prevent linking to 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 the cell that has just been grabbed by the user.
                paper.on('cell:pointerdown', function (cellView, evt, x, y) {

                    var cell = cellView.model;
                    if (!cell.get('embeds') || cell.get('embeds').length === 0) {
                        // Show the dragged element above all the other cells (except when the
                        // element is a parent).
                        cell.toFront();
                    }

                    if (cell.get('parent')) {
                        graph.getCell(cell.get('parent')).unembed(cell);
                    }
                });
                // When the dragged cell is dropped over another cell, let it become a child of the
                //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 that the findViewsFromPoint() returns the view for the `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]);

Answer 1

you have to create a 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 a 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 a custom view for that element that displays an 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 from handling pointerdown.
            this.$box.find('input,select').on('mousedown click', function(evt) {
                evt.stopPropagation();
            });
            // This is an example of reacting on the input change and storing the input data in the 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 the box position whenever the underlying model changes.
            this.model.on('change', this.updateBox, this);
            // Remove the box when the model gets removed from the 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 the position and dimension of the box so that it covers the JointJS element.
            var bbox = this.model.getBBox();
            // Example of updating the HTML with a data stored in the 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 and add them to the graph as usual.
// -----------------------------------------------------------

    var el1 = new joint.shapes.html.Element({
        position: { x: 80, y: 80 },
        size: { width: 170, height: 100 },
        label: 'I am 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 this link http://resources.jointjs.com/tutorial/html-elements