Label text does not wrap correctly when custom font-size is applied.

[iamsid]

Introduction

Consider the following label attribute of a custom element.

label: {
      fontFamily: "Inter",
      fontSize: "0.565rem",
      fontWeight: 500,
      fill: "#5032AF",
      x: 100,
      y: 8,
      textAnchor: "middle",
      textVerticalAnchor: "top",
      textWrap: {
        maxLineCount: 1,
        width: "calc(w - 20)",
        height: null,
        ellipsis: true
      }
    },

On page load, we add a cell of this element with the value in the label. But, it wraps and applies ellipsis on the text based on the default font-size, and not the font-size defined.
Then, if I update the label value, the label is rendered correctly.
Also, when I save and load the same JSON later, the updated label value is again shown with incorrect wrapping.

Have tested without the custom font-size and it works fine. Haven't tried it with JointJS, only with JointJS+.

Steps to reproduce

1. Create a diagram with above label definition - which has custom font-size.
2. Render the cell with some default label value and see the incorrect wrapping.
3. Use inspector to update the text value slightly - add a character or remove one - and see the wrapping working correctly.
4. Save the current JSON and re-render graph with that JSON to see the incorrect wrapping behaviour again.

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

You need to render the diagram when the font is loaded. For instance, please see: https://stackoverflow.com/a/52763507/2921495

Alternatively update the element views in the paper once the fonts are loaded.