[Bug]: textWrap is not calculating properly text size when using custom fonts / size (Bootstrap repro)

[Alexander Nestorov]

What happened?

It seems that textWrap isn't working as expected when using css styling. A simple repro: https://codesandbox.io/s/textwrap-bug-76f2md?file=/src/index.js

Note that commenting the bootstrap import fixes the issue.

Version

3.7.5

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

What operating system are you seeing the problem on?

Mac

[Roman Bruckner]

Now you must explicitly set all font-related attributes in the <text> element for the textWrap function to work correctly. Back then, this decision was made consciously for performance reasons.

Now it is probably a good time to use the getComputedStyle() function to retrieve the actual font attributes needed to calculate the text wrap.

[Alexander Nestorov]

@kumilingus is this going to make it in the next patch release (3.7.6?) or will it land in 4.0.0? If the later, is there any workaround that I can apply?

[Roman Bruckner]

Sorry, haven't made the decision yet.

A workaround is to re-define the textWrap attribute. It can be done per element, as shown below.

class MyRect extends joint.dia.Element {

    static attributes = {
        textWrap: {
            qualify: joint.util.isPlainObject,
            set: function(value, refBBox, node, attrs) {
                const computedFontSize = parseFloat(getComputedStyle(node).fontSize);
                const computedAttrs = { ...attrs };
                computedAttrs.fontSize = computedFontSize;
                joint.dia.attributes.textWrap.set.call(this, value, refBBox, node, computedAttrs);
            }
        }
    };
}

Here's updated version of your codesandbox:
https://codesandbox.io/s/textwrap-bug-forked-svgjq9?file=/src/index.js