I am adding markers on openseadragon viewer. This is the function I am using for this
if (cellLabeler) {
if (!viewer) return;
console.log("calling celllabel", cellLabeler);
viewer.addHandler("canvas-click", function (event) {
const viewerPoint = viewer.viewport.pointFromPixel(event.position);
console.log("Clicking coordinates:", viewerPoint.x, viewerPoint.y);
var img = document.createElement("img");
img.src = { logo };
viewer.addOverlay(img, viewerPoint);
});}
Celllabeler is a state variable I am using for toggling modes for adding markers. There is a button which toggles celllabeler state variable. It works when celllabeler is true, but it also works if I toggle it to false after labelling. Is this an issue with addHandler event that I am using?
EDIT: Code currently looks like this:
if (viewer){
console.log("calling celllabel", cellLabeler);
viewer.addHandler("canvas-click", function (event) {
if (cellLabeler) {
if (!viewer) return;
const viewerPoint = viewer.viewport.pointFromPixel(event.position);
console.log("Clicking coordinates:", viewerPoint.x, viewerPoint.y);
var img = document.createElement("img");
img.src = "https://dummyimage.com/10x10/000/11ff00";
viewer.addOverlay(img, viewerPoint);
}
});
}
Once you have done the addHandler, it'll always run regardless of the cellLabeler state. What you need to do is put the if (cellLabeler) inside the addHandler.
EDIT: here's an example of what I'm talking about:
// Set up label mode buttons
var cellLabeler = false;
document.getElementById('start-labeling').addEventListener('click', function() {
cellLabeler = true;
});
document.getElementById('stop-labeling').addEventListener('click', function() {
cellLabeler = false;
});
// Set up OpenSeadragon
var viewer = OpenSeadragon( ... );
viewer.addHandler("canvas-click", function (event) {
if (cellLabeler) {
const viewerPoint = viewer.viewport.pointFromPixel(event.position);
console.log("Clicking coordinates:", viewerPoint.x, viewerPoint.y);
var img = document.createElement("img");
img.src = "https://dummyimage.com/10x10/000/11ff00";
viewer.addOverlay(img, viewerPoint);
}
});