In KonvaJS, is it possible to make a layer inactive (but not invisible) upon clicking a button, then active on clicking another button? I've tried "text_overlay.listening(false);" but it doesn't work. I can deactivate individual textNodes with "textNode0.listening(false);", which does prevent the user from editing that text, but these textNodes are positioned over polygons, some of which are quite small (e.g., Luxembourg on a map of Europe) and the textarea prevents the user from clicking the polygon underneath (e.g., to change its fill color). Also, there will be over 40 textNodes to deal with, so deactivating 1 layer is far preferable!
Here's the button section of the HTML file:
<script src="js/text-input21.js"></script>
<!-- button events -->
<script>
// button states on load
var btnLabelClicked = true;
var btnColorClicked = false;
var btnDrawLinesClicked = false;
//color chip buttons
var btnViolet = document.getElementById("fillViolet");
var btnOrange = document.getElementById("fillOrange");
var btnYellow = document.getElementById("fillYellow");
//color chip buttons' fill when btnLabelClicked = true
btnViolet.style.background = disableBtnFill;
btnOrange.style.background = disableBtnFill;
btnYellow.style.background = disableBtnFill;
var buttonID = 'btnLabel';
function replyClick(clickedID) {
buttonID = (clickedID);
if (buttonID === 'btnColor') {
textNode0.listening(false);
textNode15.listening(false);
textNode16.listening(false);
btnViolet.disabled = false;
btnViolet.style.background = '#842dce';
btnOrange.disabled = false;
btnOrange.style.background = '#ffa500';
btnYellow.disabled = false;
btnYellow.style.background = '#ffff00';
btnLabelClicked = false;
btnColorClicked = true;
btnDrawLinesClicked = false;
} else if (btnColorClicked && (buttonID === 'fillViolet' || buttonID === 'fillOrange' || buttonID === 'fillYellow')) {
//text_overlay.listening(false);
textNode0.listening(false);
textNode15.listening(false);
textNode16.listening(false);
newFill = document.getElementById(buttonID).style.background;
} else if (buttonID === 'btnLabel' || buttonID === 'btnDrawLines' || buttonID === 'btnEraseLines' || buttonID === 'btnExport') {
//disable color buttons
btnColorClicked = false;
btnViolet.disabled = true;
btnViolet.style.background = disableBtnFill;
btnOrange.disabled = true;
btnOrange.style.background = disableBtnFill;
btnYellow.disabled = true;
btnYellow.style.background = disableBtnFill;
if (buttonID === 'btnLabel') {
textNode0.listening(true);
textNode15.listening(true);
textNode16.listening(true);
btnLabelClicked = true;
btnDrawLinesClicked = false;
} else { //buttonID is not btnLabel or any of the color buttons
textNode0.listening(false);
textNode15.listening(false);
textNode16.listening(false);
btnLabelClicked = false;
btnDrawLinesClicked = true;
}
}
}
</script>
And here's the text-input21.js file containing the text_overlay layer:
var text_overlay = new Konva.Layer({
listening: true
});
stage.add(text_overlay);
var textNode0 = new Konva.Text({
text: 'X',
x: 80, // centered between Ireland & Great Britain
y: 125,
width: 150,
height: 15,
fontFamily: 'Arial, Helvetica, "sans-serif"',
fontSize: 14,
align: 'center',
listening: true
});
var textNode15 = new Konva.Text({
text: 'X',
x: 230, // Luxembourg
y: 225,
width: 100,
height: 15,
fontFamily: 'Arial, Helvetica, "sans-serif"',
fontSize: 14,
align: 'center',
listening: true
});
var textNode16 = new Konva.Text({
text: 'X',
x: 175, // France
y: 290,
width: 100,
height: 15,
fontFamily: 'Arial, Helvetica, "sans-serif"',
fontSize: 14,
align: 'center',
listening: true
});
text_overlay.add(textNode0);
text_overlay.add(textNode15);
text_overlay.add(textNode16);
text_overlay.draw();
console.log(text_overlay.getZIndex());
textNode0.on('click', () => {
// create textarea over canvas with absolute position
// first we need to find its position
var textPosition = textNode0.getAbsolutePosition();
var stageBox = stage.getContainer().getBoundingClientRect();
var areaPosition = {
x: textPosition.x + stageBox.left,
y: textPosition.y + stageBox.top
};
// create textarea and style it
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = textNode0.text();
textarea.style.textAlign = 'center';
textarea.style.resize = 'none';
textarea.style.position = 'absolute';
textarea.style.left = areaPosition.x + 'px'; //positioning needs work
textarea.style.top = areaPosition.y + 'px';
textarea.style.width = textNode0.width();
textarea.style.background = 'transparent';
textarea.style.border = 1; // final border = 0
textarea.style.outline = 'none';
textarea.style.fontFamily = 'Arial, Helvetica, "sans-serif"';
textarea.style.fontSize = 14;
textarea.focus();
textarea.addEventListener('keydown', function (e) {
// hide on enter
if (e.keyCode === 13) {
textNode0.text(textarea.value);
text_overlay.draw();
document.body.removeChild(textarea);
}
});
})
textNode15.on('click', () => {
// create textarea over canvas with absolute position
// first we need to find its position
var textPosition = textNode15.getAbsolutePosition();
var stageBox = stage.getContainer().getBoundingClientRect();
var areaPosition = {
x: textPosition.x + stageBox.left,
y: textPosition.y + stageBox.top
};
// create textarea and style it
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = textNode15.text();
textarea.style.textAlign = 'center';
textarea.style.resize = 'none';
textarea.style.position = 'absolute';
textarea.style.left = areaPosition.x - 20 + 'px'; //positioning needs work
textarea.style.top = areaPosition.y - 20 + 'px';
textarea.style.width = textNode15.width();
textarea.style.background = 'transparent';
textarea.style.border = 1; // final border = 0
textarea.style.outline = 'none';
textarea.style.fontFamily = 'Arial, Helvetica, "sans-serif"';
textarea.style.fontSize = 14;
textarea.focus();
textarea.addEventListener('keydown', function (e) {
// hide on enter
if (e.keyCode === 13) {
textNode15.text(textarea.value);
text_overlay.draw();
document.body.removeChild(textarea);
}
});
})
textNode16.on('click', () => {
// create textarea over canvas with absolute position
// first we need to find its position
var textPosition = textNode16.getAbsolutePosition();
var stageBox = stage.getContainer().getBoundingClientRect();
var areaPosition = {
x: textPosition.x + stageBox.left,
y: textPosition.y + stageBox.top
};
// create textarea and style it
var textarea = document.createElement('textarea');
document.body.appendChild(textarea);
textarea.value = textNode16.text();
textarea.style.textAlign = 'center';
textarea.style.resize = 'none';
textarea.style.position = 'absolute';
textarea.style.left = areaPosition.x - 45 + 'px'; //positioning needs work
textarea.style.top = areaPosition.y - 20 + 'px';
textarea.style.width = textNode16.width();
textarea.style.background = 'transparent';
textarea.style.border = 1; // final border = 0
textarea.style.outline = 'none';
textarea.style.fontFamily = 'Arial, Helvetica, "sans-serif"';
textarea.style.fontSize = 14;
textarea.focus();
textarea.addEventListener('keydown', function (e) {
// hide on enter
if (e.keyCode === 13) {
textNode16.text(textarea.value);
text_overlay.draw();
document.body.removeChild(textarea);
}
});
})
// add the layer to the stage
stage.add(text_overlay);
From experiment, layer.listening() sets listening on the layer but not its contents. Its not intuitive, but it makes sense because a layer is actually an HTML5 canvas. For example, you could want to toggle tracking of mouse movement over the layer background but have the layers child shapes still be listening continuously, so then you need this.
You can set listening on the children using the getchildren function
// get all children
var children = layer.getChildren();
Then iterate the list and use setListening() on each member. The getChildren() function can be combined with the className filter to create subsets of child objects, so you could toggle all text elements, or all polygons, or all circles, etc. It's quite funky.
As a side note, and don't take this as criticism, your coding style seems not to be DRY. What I mean is, your click events for the textNode0, textNode15 and textNode16 are repetitive - I guess each time you realise you need to make a change to one you have to make it manually to all. That leaves you open to bugs by cut & paste or omission. Better to make a standard myTextNode object and have it include all the functionality that you want in a textNode, then pass in the unique parameters when you create each object. That way making a change to the myTextNode 'class' affects all of them at once. The label for this is 'JS Objects', but if you Google that you will be overloaded with information. Have a read of this at W3 Schools for a 'way in' to the subject. Forgive me if you know all this but there are a lot of countries for your textNodes.