How to set font-size dynamically in JointJs?

Question

I am developing a JointJs Application,I need to set font-size for a text inside a rectangle.

    $('#FText,#FTextHeight,#FTextWidth,#FTextSize').on('keyup change', function () {
    var FtHeight = $('#FTextHeight').val();
    var FtWidth = $('#FTextWidth').val();
    var FtSize = parseInt($('#FTextSize').val());
    var txt = $('#FText').val();
    graph2.clear();
    if (txt.length > 0) {
        $('#FTexterror').empty();
        var myFtext = new joint.shapes.basic.Rect({
            position: { x: 50, y: 50 },
            size: { width: FtWidth, height: FtHeight },
            attrs: {
                rect: {
                    fill: 'white', stroke: outerColor, 'class': 'customtext',
                },
                text: {
                    text: txt, 'letter-spacing': 1, 'font-size': FtSize,
                    fill: outerColor, 'font-size': 11, 'y-alignment': 'middle',
                }
            }
        });
        graph2.addCells([myFtext]);
    }
    else {
        $('#FTexterror').empty().append('*Enter valid text');
    }
});

the above code is not working while setting font-size for the text. Kindly help me on this

Answer 1

try this

$('.input-text')
    .val(rect.attr('text/font-size')) //set initial value
    .on('keyup', function () {

        var val = $(this).val();
        rect.attr('text/font-size', val);
});

complete demo: https://jsfiddle.net/vtalas/sav49mj4/