Merge branch 'main' into rc-v1.9.0

* main:
  Click handler on scaled image getting clipped (#4094)

NEWS.md

@@ -27,6 +27,7 @@ If either 1 or 2 leads to undesirable behavior in your app, you can disable them
 * Output bindings that are removed, invalidated, then inserted again (while invalidated) now correctly include the `.recalculating` CSS class. (#4039)
 
 * Fixed a recent issue with `uiOutput()` and `conditionalPanel()` not properly lower opacity when recalculation (in a Bootstrap 5 context). (#4027)
+* Image outputs that were scaled by CSS had certain regions that were unresponsive to hover/click/brush handlers. (#3234)
 
 # shiny 1.8.1.1
 

inst/www/shared/shiny.js

@@ -14507,8 +14507,8 @@
       var bounds = {
         top: 0,
         left: 0,
-        right: img.clientWidth - 1,
-        bottom: img.clientHeight - 1
+        right: img.naturalWidth - 1,
+        bottom: img.naturalHeight - 1
       };
       coordmap_.panels[0] = {
         domain: bounds,
@@ -14581,10 +14581,15 @@
       };
       var matches = [];
       var dists = [];
-      var b3;
       var i5;
       for (i5 = 0; i5 < coordmap.panels.length; i5++) {
-        b3 = coordmap.panels[i5].range;
+        var panelRange = coordmap.panels[i5].range;
+        var b3 = {
+          top: panelRange.top * cssToImgRatio.y,
+          bottom: panelRange.bottom * cssToImgRatio.y,
+          left: panelRange.left * cssToImgRatio.x,
+          right: panelRange.right * cssToImgRatio.x
+        };
         if (x2 <= b3.right + expandImg.x && x2 >= b3.left - expandImg.x && y4 <= b3.bottom + expandImg.y && y4 >= b3.top - expandImg.y) {
           matches.push(coordmap.panels[i5]);
           var xdist = 0;

srcts/src/imageutils/initCoordmap.ts

@@ -162,8 +162,8 @@ function initCoordmap(
     const bounds = {
       top: 0,
       left: 0,
-      right: img.clientWidth - 1,
-      bottom: img.clientHeight - 1,
+      right: img.naturalWidth - 1,
+      bottom: img.naturalHeight - 1,
     };
 
     coordmap_.panels[0] = {
@@ -290,11 +290,16 @@ function initCoordmap(
 
     const matches = []; // Panels that match
     const dists = []; // Distance of offset to each matching panel
-    let b;
     let i;
 
     for (i = 0; i < coordmap.panels.length; i++) {
-      b = coordmap.panels[i].range;
+      const panelRange = coordmap.panels[i].range;
+      const b = {
+        top: panelRange.top * cssToImgRatio.y,
+        bottom: panelRange.bottom * cssToImgRatio.y,
+        left: panelRange.left * cssToImgRatio.x,
+        right: panelRange.right * cssToImgRatio.x,
+      };
 
       if (
         x <= b.right + expandImg.x &&
@@ -413,5 +418,5 @@ function initCoordmap(
   return coordmap;
 }
 
+export { findOrigin, initCoordmap };
 export type { Coordmap, CoordmapInit };
-export { initCoordmap, findOrigin };

srcts/types/src/imageutils/initCoordmap.d.ts

@@ -48,5 +48,5 @@ type Coordmap = {
     mouseCoordinateSender: (inputId: string, clip?: boolean, nullOutside?: boolean) => (e: JQuery.MouseDownEvent | JQuery.MouseMoveEvent | null) => void;
 };
 declare function initCoordmap($el: JQuery<HTMLElement>, coordmap_: CoordmapInit): Coordmap;
+export { findOrigin, initCoordmap };
 export type { Coordmap, CoordmapInit };
-export { initCoordmap, findOrigin };

yarn.lock

@@ -1853,7 +1853,7 @@ __metadata:
   peerDependenciesMeta:
     jquery-ui:
       optional: true
-  checksum: ba260ba5804c16b1455ff79f9d00ce860e12ae36e29d7a5f702da6b384c9454497421b8e06fe683d10fac53e2dc6ec008da4fa129a153cbbfe5396e027eb4247
+  checksum: 8718ebda1068894fc1267459b603f492045723ed1000fdbe798f2fab78fed8536b1906f56c53e9bd0ff9dce24aed176045618d0a1eddcf48f7d0313ad4ad67e9
   languageName: node
   linkType: hard