fix: Handle 'pixel' size mode for shape labels

[camdecoster]

Description

Update shape label positioning logic to handle pixel size mode.

Closes #7749.

Changes

• Update position calculations
• Export helper to aid in calculations
• Add tests
• Add mock with baseline image

Screenshots

Before	After

Testing

• Be on master
• Run devtools
• Add new mock temporarily on branch
• Load the mock
• Note that the labels are missing
• Switch to this branch
• Load the mock again
• Notes that the labels are positioned correctly

[camdecoster]

The initial mock validation failed because one of the shape types was listed as "rectangle", which isn't valid. "rect" is what should have been listed. I didn't notice this because the default shape used when an invalid type is passed in is... "rect". Thanks CI, for keeping us honest.

[emilykl]

If I'm understanding the issue correctly (when xsizemode is "pixel", we are supposed to determine shapex0 and shapex1 by first converting xanchor from data to pixels and THEN adding x0 and x1 which are already given in pixels)

... would something like the following work? It feels more intuitive to me, but could be just me.

Suggested change

	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);
	}
	var x2p, y2p;
	// When using pixel offset mode it's necessary to compute position relative to xanchor/yanchor
	if (options.xsizemode === 'pixel') {
	x2p = (v, shift, xa, xRefType) => helpers.getDataToPixel(gd, xa, shift, false, xRefType)(options.xanchor) + v;
	} else {
	x2p = (v, shift, xa, xRefType) => helpers.getDataToPixel(gd, xa, shift, false, xRefType)(v);
	}
	if (options.ysizemode === 'pixel') {
	y2p = (v, shift, ya, yRefType) => helpers.getDataToPixel(gd, ya, shift, true, yRefType)(options.yanchor) + v;
	} else {
	y2p = (v, shift, ya, yRefType) => 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);

[camdecoster]

Your understanding is correct. I actually think the current code is clearer for me, so I'd like to stick with that.

[emilykl]

@camdecoster Would it be possible to edit the existing shape label mock rather than adding a new one?

[camdecoster]

Which mock are you referring to?

[emilykl]

Any of the ones starting with text_on_shapes_.

text_on_shapes_basic is probably the easiest to add to.

[emilykl]

@camdecoster Looks good as-is, left a couple comments with suggestions