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');
}
}
}
}
