How to resize rectangle based on text in jointjs - Rappid

Question

I use jointjs/rappid where I use the default rectangle to draw elements on my graph.

I can change the text inside the elements by extending the standard.rectangle and changing the attribute:

joint.shapes.standard.Rectangle = joint.shapes.standard.Rectangle.extend({
    setText: function (text) {
        this.attr('text/text', text);      
    } });

This works but the element doesn't autoresize to the length of the text.

How can I resize the element (rectangle) so the text fits in it?

Answer 1

A bit late, but maybe someone else will need it. Just add an autosize function:

function autosize(element) {
    var view = paper.findViewByModel(element);
    var text = view.findBySelector('label')[0];
    if (text) {
        var padding = 50;
        // Use bounding box without transformations so that our auto-sizing works
        // even on e.g. rotated element.
        var bbox = text.getBBox();
        // Give the element some padding on the right/bottom.
        element.resize(bbox.width + padding, bbox.height + padding);
    }
}

Add this event handler so autosize will be called on element change:

graph.on('change', function(cell, opt) {
    if (cell.isLink()) return;
    autosize(cell);
});

Check working example: https://resources.jointjs.com/docs/rappid/v3.5/demo/ui/TextEditor/js/inline.js