Fabric.js: Textbox Selection Box Incorrect For Textboxes With Dynamically Loaded Font

[jwbats]

Problem

@asturur Here is the reproduction of the bug I've discussed earlier with you.

Json is loaded to the canvas. The json contains a textbox that has the "Erica One" google font family applied to it. The font does not exist on the page yet. The font is then dynamically loaded. After having loaded the font, the same json, the font is applied, but the cursor and the selection box will be off.

Version

2.2.2

Test Case

https://jsbin.com/makinuj/1/edit?html,css,js,output

Steps to reproduce

Double click on the text and press right cursor key to make the cursor move all the way to the right. You will see that the cursor is positioned incorrectly. Also, a part of the text is cut off. Resizing the selection box will visualize this even more clearly.

Expected Behavior

After loading the Erica One font and reapplying the json to the canvas, you'd expect there was a total reset and that the textbox selection will be correct. As a matter of fact, I was expecting a call to requestRenderAll() to fix this, especially if I have set the textbox's dirty property to true. But once a selection box has gone awry, nothing seems to work in order to coax FabricJS into rendering the selection box correctly.

Actual Behavior

Selection boxes are off for textboxes that have first been loaded onto the canvas without the required google font already on the page. Loading the font and then attempting to get the selection box to render correctly, won't work. Not even with a complete reloading of the json.

[asturur]

i think this is a doc issues.
In fabric.util you can find:

    /**
     * Clear char widths cache for a font family.
     * @memberOf fabric.util
     * @param {String} [fontFamily] font family to clear
     */
    clearFabricFontCache: function(fontFamily) {
      if (!fontFamily) {
        fabric.charWidthsCache = { };
      }
      else if (fabric.charWidthsCache[fontFamily]) {
        delete fabric.charWidthsCache[fontFamily];
      }
    },

So after a font Load you should do:

fabric.util.clearFabricFontCache(fontFamily.toLowerCase());

where toLowerCase should be handled by fabricJS and not being your duty.

We should document this better.

[asturur]

@stefanhayden @keyurpatel or simply @jwbats if someone of you wants to take care of the change in the util and more importantly to documenting it somewhere

[jwbats]

Which change in the util?

Anyway, it's in the documentation already. I just hadn't come across it yet.

[asturur]

Yes but that line of doc does not specify that you can clear either everything or a single font family
Also the change is about the fontFamily provided that needs to be make 'toLowerCase'

The jsdoc could be more exhaustive explaining that this may be used after a async font loading and that if the cache is not cleared fabricJS is not recalculating sizes no matter what.

This note could also be added in this demo:
http://fabricjs.com/loadfonts

[asturur]

added jsdocs and toLowercase to the code.