Text object styling not set correctly when loading canvas from serialized data - konvajs

Question

I have created a custom label maker using the Konvajs library. I provided the user with a label library to choose from as a starting point or the option to create a label from scratch. If the user selects from the label library I load the label via Json and I provide the user with the ability to edit any text elements with external controls. The user has the ability to set the following properties:
fontFamily
fontSize
fontStyle
fontVariant
lineHeight
fill
align
When the user clicks on a text object on the canvas the external controls are set with the text objects properties allowing the user to modify any of the properties listed above.
The issue I'm having is when the label is loaded the text format is the default until the user clicks on the text to edit, then all the pre-set properties are applied. I need the pre-set properties to display when first loaded.
Here is my function for loading the Json:
function loadCanvasFromJson(json) {
//Remove the disable class from action buttons...
$('.dropdown-action-btn').addClass('disabled');
stage = Konva.Node.create(json, 'labelcontainer');
stage.find('Image').forEach((imageNode) => {
const src = imageNode.getAttr('src');
const image = new Image();
image.onload = () => {
imageNode.image(image);
imageNode.getLayer().batchDraw();
}
image.src = src;
});
stage.find('Text').forEach((textNode) => {
textNode.on("mouseover", function(e){
document.body.style.cursor = 'pointer';
});
textNode.on('mouseout', function() {
document.body.style.cursor = 'default';
});
textNode.on('click', function(evt) {
var text = evt.target;
$('#add-label-text').addClass('hidden');
$('#update-label-text').removeClass('hidden');
$('#delete-label-text').removeClass('hidden');
setTextClickValues(text);
});
});
}
Here is the function for setting the external editor controls when a text object is clicked:
function setTextClickValues(text) {
var textObj = text.getAttrs();
console.log(textObj);
for (attr in textObj) {
if (attr == 'align') {
$('#text-align').val(text.getAttr(attr));
if (text.getAttr(attr) == 'center')
$('.text-format-text-align-center').addClass('active');
if (text.getAttr(attr) == 'left')
$('.text-format-text-align-left').addClass('active');
if (text.getAttr(attr) == 'right')
$('.text-format-text-align-right').addClass('active');
}
if (attr == 'id') $('#text-group').val(text.getAttr(attr).replace('text',''));
if (attr == 'text') $('#label-text').val(text.getAttr(attr));
if (attr == 'lineHeight') {
$('#text-lineheight').val(text.getAttr(attr));
$('#lineHeight').val(text.getAttr(attr));
}
if (attr == 'fontSize') {
$('#text-size').val(text.getAttr(attr));
$('#fontSize').val(text.getAttr(attr));
}
if (attr == 'fill') {
$('#text-fill').val(text.getAttr(attr));
$('.colorPickSelector.fill').css('background-color', text.getAttr(attr));
$('.colorPickSelector.fill').css('color', text.getAttr(attr));
if (text.getAttr(attr) == '#ffffff') {
$('.colorPickSelector.fill').css('border','1px solid rgb(221, 221, 221)');
}
}
if (attr == 'fontFamily') {
$('.text-format-dropdown-current').val(text.getAttr(attr));
$('#text-font').val(text.getAttr(attr));
}
if (attr == 'fontVariant') {
$('#text-fontVariant').val(text.getAttr(attr));
if (text.getAttr(attr) == 'small-caps')
$('.text-format-text-variant').addClass('active');
}
if (attr == 'textDecoration') {
$('#text-textDecoration').val(text.getAttr(attr));
if (text.getAttr(attr) == 'underline')
$('.text-format-text-underline').addClass('active');
}
if (attr == 'fontStyle') {
$('#text-fontStyle').val(text.getAttr(attr));
if (text.getAttr(attr).indexOf('bold') > -1) {
$('.text-format-text-bold').addClass('active');
}
if (text.getAttr(attr).indexOf('italic') > -1) {
$('.text-format-text-italic').addClass('active');
}
}
}
}

Answer 1

I guess on your first stage load, the font is not loaded yet. So you need to wait until the font is loaded and then redraw a layer.
For the best solution you should use something like font observer:
How to be notified once a web font has loaded
Or you can simply redraw layer on timeout (but this solution is not perfect).