fix: Handle 'pixel' size mode for shape labels

draftlogs/7790_fix.md

@@ -0,0 +1 @@
+- Handle 'pixel' size mode for shape labels [[#7790](https://github.com/plotly/plotly.js/pull/7790)]

src/components/shapes/display_labels.js

@@ -104,16 +104,30 @@ module.exports = function drawLabel(gd, index, options, shapeGroup) {
         const xRefType1 = Axes.getRefType(isArrayXref ? options.xref[1] : options.xref);
         const yRefType0 = Axes.getRefType(isArrayYref ? options.yref[0] : options.yref);
         const yRefType1 = Axes.getRefType(isArrayYref ? options.yref[1] : options.yref);
-        const x2p = function(v, shift, xa, xRefType) {
-            return helpers.getDataToPixel(gd, xa, shift, false, xRefType)(v);
-        };
-        const y2p = function(v, shift, ya, yRefType) {
-            return helpers.getDataToPixel(gd, ya, shift, true, yRefType)(v);
-        };
-        shapex0 = x2p(options.x0, options.x0shift, xa0, xRefType0);
-        shapex1 = x2p(options.x1, options.x1shift, xa1, xRefType1);
-        shapey0 = y2p(options.y0, options.y0shift, ya0, yRefType0);
-        shapey1 = y2p(options.y1, options.y1shift, ya1, yRefType1);
+        const x2p = (v, shift, xa, xRefType) => helpers.getDataToPixel(gd, xa, shift, false, xRefType)(v);
+        const y2p = (v, shift, ya, yRefType) => helpers.getDataToPixel(gd, ya, shift, true, yRefType)(v);
+        // When using pixel offset mode it's necessary to add the anchor position for the
+        // correct final value
+        if (options.xsizemode === 'pixel') {
+            const xAnchorPos = x2p(options.xanchor, undefined, xa0, xRefType0);
+            const xShift0 = helpers.getPixelShift(xa0, options.x0shift);
+            const xShift1 = helpers.getPixelShift(xa0, options.x1shift);
+            shapex0 = xAnchorPos + options.x0 + xShift0;
+            shapex1 = xAnchorPos + options.x1 + xShift1;
+        } else {
+            shapex0 = x2p(options.x0, options.x0shift, xa0, xRefType0);
+            shapex1 = x2p(options.x1, options.x1shift, xa1, xRefType1);
+        }
+        if (options.ysizemode === 'pixel') {
+            const yAnchorPos = y2p(options.yanchor, undefined, ya0, yRefType0);
+            const yShift0 = helpers.getPixelShift(ya0, options.y0shift);
+            const yShift1 = helpers.getPixelShift(ya0, options.y1shift);
+            shapey0 = yAnchorPos - options.y0 + yShift0;
+            shapey1 = yAnchorPos - options.y1 + yShift1;
+        } else {
+            shapey0 = y2p(options.y0, options.y0shift, ya0, yRefType0);
+            shapey1 = y2p(options.y1, options.y1shift, ya1, yRefType1);
+        }
     }
 
     // Handle `auto` angle

src/components/shapes/helpers.js

@@ -352,6 +352,7 @@ function convertPath(options, x2p, y2p) {
     });
 }
 
+exports.getPixelShift = getPixelShift;
 function getPixelShift(axis, shift) {
     shift = shift || 0;
     var shiftPixels = 0;

test/image/mocks/shape_label_pixel_sizemode.json

@@ -0,0 +1,52 @@
+{
+  "data": [{ "type": "scatter", "x": [1, 2], "y": [1, 2] }],
+  "layout": {
+    "margin": { "t": 92 },
+    "shapes": [
+      {
+        "label": {
+          "text": "Circle",
+          "textangle": 0,
+          "textposition": "middle center",
+          "xanchor": "center",
+          "yanchor": "middle"
+        },
+        "showlegend": false,
+        "type": "circle",
+        "x0": -25,
+        "x1": 25,
+        "xanchor": 1,
+        "xref": "x",
+        "xsizemode": "pixel",
+        "y0": 25,
+        "y1": 75,
+        "yanchor": 1,
+        "yref": "paper",
+        "ysizemode": "pixel"
+      },
+      {
+        "label": {
+          "text": "Rect",
+          "textangle": 0,
+          "textposition": "middle center",
+          "xanchor": "center",
+          "yanchor": "middle"
+        },
+        "showlegend": false,
+        "type": "rect",
+        "x0": -25,
+        "x1": 25,
+        "xanchor": 2,
+        "xref": "x",
+        "xsizemode": "pixel",
+        "y0": 25,
+        "y1": 75,
+        "yanchor": 1,
+        "yref": "paper",
+        "ysizemode": "pixel"
+      }
+    ],
+    "width": 500,
+    "height": 500
+  }
+}