Estoy agregando marcadores en el visor openseadragon. Esta es la función que estoy usando para esto.
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 es una variable de estado que estoy usando para alternar modos para agregar marcadores. Hay un botón que alterna la variable de estado del etiquetador de celdas. Funciona cuando celllabeler es verdadero, pero también funciona si lo cambio a falso después del etiquetado. ¿Es este un problema con el evento addHandler que estoy usando?
EDITAR: el código actualmente se ve así:
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); } });}
Una vez que haya realizado addHandler, siempre se ejecutará independientemente del estado de cellLabeler. Lo que debe hacer es colocar if (cellLabeler) dentro de addHandler .
EDITAR: aquí hay un ejemplo de lo que estoy hablando:
// 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); } });