Hittest not working after 2.2?

I’ve used ‘hitTest’ code to auto-center on items in collections. And it works with 2.2.0, but nothing later. Could someone point me in the right direction to enable it in newer versions?

Example of working using 2.2.0 -> https://chattanoogahistory.com/marr-field

Example of same page using 2.4.1 (not working / not throwing errors): -> https://chattanoogahistory.com/marr

hitTest code:

var hitTest = function(position) {
            var box;
            var count = viewer.world.getItemCount();
            for (var i = 0; i < count; i++) {
              box = viewer.world.getItemAt(i).getBounds();
              if (position.x > box.x && 
                  position.y > box.y && 
                  position.x < box.x + box.width &&
                  position.y < box.y + box.height) {
                return i;
              }
            }
            return -1;
          };
          var $viewerElement = $('#openseadragon-canvas')
          .on('mousemove', function(event) {
            var pixel = new OpenSeadragon.Point(event.clientX, event.clientY);
            pixel.y -= $viewerElement.position().top;
            var index = hitTest(viewer.viewport.pointFromPixel(pixel));
            $('.output').text(index === -1 ? '' : 'Image ' + index);
          }
             );
          viewer.addHandler('canvas-click', function(event) {
            if (!event.quick) {
              return;
            }
            var index = hitTest(viewer.viewport.pointFromPixel(event.position));
            if (index !== -1) {
              viewer.viewport.fitBounds(viewer.world.getItemAt(index).getBounds());
            }
          }
                           );

[iangilman]

I still don’t understand what you mean by it not working. If you don’t disable clickToZoom, the hit detection doesn’t happen at all? Or the hit detection happens, but in response it doesn’t zoom correctly? If it’s the latter, that makes sense, because the click to zoom behavior would override any additional navigation you might be adding.

If you want to override the click to zoom behavior dynamically, you can use event.preventDefaultAction = true like so:

viewer.addHandler('canvas-click', function(event) {
  if (!event.quick) {
    return;
  }
  
  var index = hitTest(viewer.viewport.pointFromPixel(event.position));
  if (index !== -1) {
    event.preventDefaultAction = true;
    viewer.viewport.fitBounds(viewer.world.getItemAt(index).getBounds());
  }
});

[iangilman]

Excellent 😃