Replace xshift and yshift with x0shift and y0shift

my-tien · my-tien · commit 99215223b704 · 2024-06-10T11:01:10.000+02:00
diff --git a/src/components/selections/attributes.js b/src/components/selections/attributes.js
@@ -54,26 +54,48 @@ module.exports = overrideAll(templatedArray('selection', {
         description: 'Sets the selection\'s end y position.'
     },
 
-    xshift: {
+    x0shift: {
         valType: 'number',
         dflt: 0,
-        min: -0.5,
-        max: 0.5,
+        min: -1,
+        max: 1,
+        editType: 'calc',
+        description: [
+            'Only relevant if xref is a (multi-)category axes. Shifts x0 by a fraction of the',
+            'reference unit.'
+        ].join(' ')
+    },
+    x1shift: {
+        valType: 'number',
+        dflt: 0,
+        min: -1,
+        max: 1,
         editType: 'calc',
         description: [
-            'Only relevant if xref is a (multi-)category axes. Shifts x0 and x1 by a fraction of',
-            'the reference unit.'
+            'Only relevant if xref is a (multi-)category axes. Shifts x1 by a fraction of the',
+            'reference unit.'
         ].join(' ')
     },
-    yshift: {
+    y0shift: {
         valType: 'number',
         dflt: 0,
-        min: -0.5,
-        max: 0.5,
+        min: -1,
+        max: 1,
+        editType: 'calc',
+        description: [
+            'Only relevant if yref is a (multi-)category axes. Shifts y0 by a fraction of the',
+            'reference unit.'
+        ].join(' ')
+    },
+    y1shift: {
+        valType: 'number',
+        dflt: 0,
+        min: -1,
+        max: 1,
         editType: 'calc',
         description: [
-            'Only relevant if yref is a (multi-)category axes. Shifts y0 and y1 by a fraction of',
-            'the reference unit.'
+            'Only relevant if yref is a (multi-)category axes. Shifts y1 by a fraction of the',
+            'reference unit.'
         ].join(' ')
     },
 
diff --git a/src/components/selections/defaults.js b/src/components/selections/defaults.js
@@ -49,8 +49,10 @@ function handleSelectionDefaults(selectionIn, selectionOut, fullLayout) {
     coerce('line.color');
     coerce('line.width');
     coerce('line.dash');
-    coerce('xshift');
-    coerce('yshift');
+    coerce('x0shift');
+    coerce('x1shift');
+    coerce('y0shift');
+    coerce('y1shift');
 
     // positioning
     var axLetters = ['x', 'y'];
diff --git a/src/components/shapes/attributes.js b/src/components/shapes/attributes.js
@@ -169,15 +169,26 @@ module.exports = templatedArray('shape', {
             'See `type` and `xsizemode` for more info.'
         ].join(' ')
     },
-    xshift: {
+    x0shift: {
         valType: 'number',
         dflt: 0,
-        min: -0.5,
-        max: 0.5,
+        min: -1,
+        max: 1,
+        editType: 'calc',
+        description: [
+            'Only relevant if xref is a (multi-)category axes. Shifts x0 by a fraction of the',
+            'reference unit.'
+        ].join(' ')
+    },
+    x1shift: {
+        valType: 'number',
+        dflt: 0,
+        min: -1,
+        max: 1,
         editType: 'calc',
         description: [
-            'Only relevant if xref is a (multi-)category axes. Shifts x0 and x1 by a fraction of',
-            'the reference unit.'
+            'Only relevant if xref is a (multi-)category axes. Shifts x1 by a fraction of the',
+            'reference unit.'
         ].join(' ')
     },
     yref: extendFlat({}, annAttrs.yref, {
@@ -230,15 +241,26 @@ module.exports = templatedArray('shape', {
             'See `type` and `ysizemode` for more info.'
         ].join(' ')
     },
-    yshift: {
+    y0shift: {
         valType: 'number',
         dflt: 0,
-        min: -0.5,
-        max: 0.5,
+        min: -1,
+        max: 1,
+        editType: 'calc',
+        description: [
+            'Only relevant if yref is a (multi-)category axes. Shifts y0 by a fraction of the',
+            'reference unit.'
+        ].join(' ')
+    },
+    y1shift: {
+        valType: 'number',
+        dflt: 0,
+        min: -1,
+        max: 1,
         editType: 'calc',
         description: [
-            'Only relevant if yref is a (multi-)category axes. Shifts y0 and y1 by a fraction of',
-            'the reference unit.'
+            'Only relevant if yref is a (multi-)category axes. Shifts y1 by a fraction of the',
+            'reference unit.'
         ].join(' ')
     },
     path: {
diff --git a/src/components/shapes/calc_autorange.js b/src/components/shapes/calc_autorange.js
@@ -23,22 +23,18 @@ module.exports = function calcAutorange(gd) {
 
         // paper and axis domain referenced shapes don't affect autorange
         if(shape.xref !== 'paper' && xRefType !== 'domain') {
-            var vx0 = shape.xsizemode === 'pixel' ? shape.xanchor : shape.x0;
-            var vx1 = shape.xsizemode === 'pixel' ? shape.xanchor : shape.x1;
             ax = Axes.getFromId(gd, shape.xref);
 
-            bounds = shapeBounds(ax, vx0, vx1, shape.path, shape.xshift, constants.paramIsX);
+            bounds = shapeBounds(ax, shape, constants.paramIsX);
             if(bounds) {
                 shape._extremes[ax._id] = Axes.findExtremes(ax, bounds, calcXPaddingOptions(shape));
             }
         }
 
         if(shape.yref !== 'paper' && yRefType !== 'domain') {
-            var vy0 = shape.ysizemode === 'pixel' ? shape.yanchor : shape.y0;
-            var vy1 = shape.ysizemode === 'pixel' ? shape.yanchor : shape.y1;
             ax = Axes.getFromId(gd, shape.yref);
 
-            bounds = shapeBounds(ax, vy0, vy1, shape.path, shape.yshift, constants.paramIsY);
+            bounds = shapeBounds(ax, shape, constants.paramIsY);
             if(bounds) {
                 shape._extremes[ax._id] = Axes.findExtremes(ax, bounds, calcYPaddingOptions(shape));
             }
@@ -77,20 +73,35 @@ function calcPaddingOptions(lineWidth, sizeMode, v0, v1, path, isYAxis) {
     }
 }
 
-function shapeBounds(ax, v0, v1, path, shift, paramsToUse) {
-    var convertVal;
-    if(ax.type === 'category' || ax.type === 'multicategory') {
-        convertVal = function(v) { return ax.r2c(v) + shift; };
+function shapeBounds(ax, shape, paramsToUse) {
+    var dim = ax._id.charAt(0) === 'x' ? 'x' : 'y';
+    var isCategory = ax.type === 'category' || ax.type === 'multicategory';
+    var v0;
+    var v1;
+    var shiftStart = 0;
+    var shiftEnd = 0;
+
+    var convertVal = isCategory ? ax.r2c : ax.d2c;
+
+    var isSizeModeScale = shape[dim + 'sizemode'] === 'scale';
+    if(isSizeModeScale) {
+        v0 = shape[dim + '0'];
+        v1 = shape[dim + '1'];
+        if(isCategory) {
+            shiftStart = shape[dim + '0shift'];
+            shiftEnd = shape[dim + '1shift'];
+        }
     } else {
-        convertVal = ax.d2c;
+        v0 = shape[dim + 'anchor'];
+        v1 = shape[dim + 'anchor'];
     }
 
-    if(v0 !== undefined) return [convertVal(v0), convertVal(v1)];
-    if(!path) return;
+    if(v0 !== undefined) return [convertVal(v0) + shiftStart, convertVal(v1) + shiftEnd];
+    if(!shape.path) return;
 
     var min = Infinity;
     var max = -Infinity;
-    var segments = path.match(constants.segmentRE);
+    var segments = shape.path.match(constants.segmentRE);
     var i;
     var segment;
     var drawnParam;
diff --git a/src/components/shapes/defaults.js b/src/components/shapes/defaults.js
@@ -75,8 +75,10 @@ function handleShapeDefaults(shapeIn, shapeOut, fullLayout) {
         var pos2r;
         var r2pos;
 
-        coerce('xshift');
-        coerce('yshift');
+        coerce('x0shift');
+        coerce('x1shift');
+        coerce('y0shift');
+        coerce('y1shift');
 
         // xref, yref
         var axRef = Axes.coerceRef(shapeIn, shapeOut, gdMock, axLetter, undefined,
diff --git a/src/components/shapes/display_labels.js b/src/components/shapes/display_labels.js
@@ -88,17 +88,25 @@ module.exports = function drawLabel(gd, index, options, shapeGroup) {
         // and convert them to pixel coordinates
         // Setup conversion functions
         var xa = Axes.getFromId(gd, options.xref);
+        var xShiftStart = options.x0shift;
+        var xShiftEnd = options.x1shift;
         var xRefType = Axes.getRefType(options.xref);
-        var xShift = options.xshift;
         var ya = Axes.getFromId(gd, options.yref);
+        var yShiftStart = options.y0shift;
+        var yShiftEnd = options.y1shift;
         var yRefType = Axes.getRefType(options.yref);
-        var yShift = options.yshift;
-        var x2p = helpers.getDataToPixel(gd, xa, xShift, false, xRefType);
-        var y2p = helpers.getDataToPixel(gd, ya, yShift, true, yRefType);
-        shapex0 = x2p(options.x0);
-        shapex1 = x2p(options.x1);
-        shapey0 = y2p(options.y0);
-        shapey1 = y2p(options.y1);
+        var x2p = function(v, shift) {
+            var dataToPixel = helpers.getDataToPixel(gd, xa, shift, false, xRefType);
+            return dataToPixel(v);
+        };
+        var y2p = function(v, shift) {
+            var dataToPixel = helpers.getDataToPixel(gd, ya, shift, true, yRefType);
+            return dataToPixel(v);
+        };
+        shapex0 = x2p(options.x0, xShiftStart);
+        shapex1 = x2p(options.x1, xShiftEnd);
+        shapey0 = y2p(options.y0, yShiftStart);
+        shapey1 = y2p(options.y1, yShiftEnd);
     }
 
     // Handle `auto` angle
diff --git a/src/components/shapes/draw.js b/src/components/shapes/draw.js
@@ -225,12 +225,20 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer, editHe
     // setup conversion functions
     var xa = Axes.getFromId(gd, shapeOptions.xref);
     var xRefType = Axes.getRefType(shapeOptions.xref);
-    var xShift = shapeOptions.xshift;
     var ya = Axes.getFromId(gd, shapeOptions.yref);
     var yRefType = Axes.getRefType(shapeOptions.yref);
-    var yShift = shapeOptions.yshift;
-    var x2p = helpers.getDataToPixel(gd, xa, xShift, false, xRefType);
-    var y2p = helpers.getDataToPixel(gd, ya, yShift, true, yRefType);
+    var shiftXStart = shapeOptions.x0shift;
+    var shiftXEnd = shapeOptions.x1shift;
+    var shiftYStart = shapeOptions.y0shift;
+    var shiftYEnd = shapeOptions.y1shift;
+    var x2p = function(v, shift) {
+        var dataToPixel = helpers.getDataToPixel(gd, xa, shift, false, xRefType);
+        return dataToPixel(v);
+    };
+    var y2p = function(v, shift) {
+        var dataToPixel = helpers.getDataToPixel(gd, ya, shift, true, yRefType);
+        return dataToPixel(v);
+    };
     var p2x = helpers.getPixelToData(gd, xa, false, xRefType);
     var p2y = helpers.getPixelToData(gd, ya, true, yRefType);
 
@@ -281,8 +289,8 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer, editHe
         g.append('circle')
           .attr({
               'data-line-point': 'start-point',
-              cx: xPixelSized ? x2p(shapeOptions.xanchor) + shapeOptions.x0 : x2p(shapeOptions.x0),
-              cy: yPixelSized ? y2p(shapeOptions.yanchor) - shapeOptions.y0 : y2p(shapeOptions.y0),
+              cx: xPixelSized ? x2p(shapeOptions.xanchor) + shapeOptions.x0 : x2p(shapeOptions.x0, shiftXStart),
+              cy: yPixelSized ? y2p(shapeOptions.yanchor) - shapeOptions.y0 : y2p(shapeOptions.y0, shiftYStart),
               r: circleRadius
           })
           .style(circleStyle)
@@ -291,8 +299,8 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer, editHe
         g.append('circle')
           .attr({
               'data-line-point': 'end-point',
-              cx: xPixelSized ? x2p(shapeOptions.xanchor) + shapeOptions.x1 : x2p(shapeOptions.x1),
-              cy: yPixelSized ? y2p(shapeOptions.yanchor) - shapeOptions.y1 : y2p(shapeOptions.y1),
+              cx: xPixelSized ? x2p(shapeOptions.xanchor) + shapeOptions.x1 : x2p(shapeOptions.x1, shiftXEnd),
+              cy: yPixelSized ? y2p(shapeOptions.yanchor) - shapeOptions.y1 : y2p(shapeOptions.y1, shiftYEnd),
               r: circleRadius
           })
           .style(circleStyle)
diff --git a/src/components/shapes/helpers.js b/src/components/shapes/helpers.js
@@ -69,12 +69,12 @@ exports.getDataToPixel = function(gd, axis, shift, isVertical, refType) {
                 var shiftPixels = 0;
                 if(axis.type === 'category' || axis.type === 'multicategory') {
                     if(isVertical) {
-                        shiftPixels = -1 * ((gs.h - axis.r2p(d2r(0.5, true))) * shift);
+                        shiftPixels = ((axis.r2p(1) - axis.r2p(0)) * shift);
                     } else {
-                        shiftPixels = axis.r2p(d2r(0.5, true)) * shift;
+                        shiftPixels = axis.r2p(0.5) * shift;
                     }
                 }
-                return axis._offset + axis.r2p(d2r(v, true)) + (shiftPixels || 0);
+                return axis._offset + axis.r2p(d2r(v, true)) + shiftPixels;
             };
 
             if(axis.type === 'date') dataToPixel = exports.decodeDate(dataToPixel);
@@ -187,8 +187,10 @@ exports.getPathString = function(gd, options) {
     var ya = Axes.getFromId(gd, options.yref);
     var gs = gd._fullLayout._size;
     var x2r, x2p, y2r, y2p;
-    var shiftUnitX = 0;
-    var shiftUnitY = 0;
+    var xShiftStart = 0;
+    var xShiftEnd = 0;
+    var yShiftStart = 0;
+    var yShiftEnd = 0;
     var x0, x1, y0, y1;
 
     if(xa) {
@@ -198,7 +200,9 @@ exports.getPathString = function(gd, options) {
             x2r = exports.shapePositionToRange(xa);
             x2p = function(v) { return xa._offset + xa.r2p(x2r(v, true)); };
             if(xa.type === 'category' || xa.type === 'multicategory') {
-                shiftUnitX = xa.r2p(x2r(0.5, true));
+                var shiftUnitX = xa.r2p(0.5);
+                xShiftStart = shiftUnitX * options.x0shift;
+                xShiftEnd = shiftUnitX * options.x1shift;
             }
         }
     } else {
@@ -212,7 +216,9 @@ exports.getPathString = function(gd, options) {
             y2r = exports.shapePositionToRange(ya);
             y2p = function(v) { return ya._offset + ya.r2p(y2r(v, true)); };
             if(ya.type === 'category' || ya.type === 'multicategory') {
-                shiftUnitY = gs.h - ya.r2p(y2r(0.5, true));
+                var shiftUnitY = ya.r2p(0) - ya.r2p(1);
+                yShiftStart = shiftUnitY * options.y0shift;
+                yShiftEnd = shiftUnitY * options.y1shift;
             }
         }
     } else {
@@ -226,20 +232,20 @@ exports.getPathString = function(gd, options) {
     }
     if(options.xsizemode === 'pixel') {
         var xAnchorPos = x2p(options.xanchor);
-        x0 = xAnchorPos + options.x0 + shiftUnitX * options.xshift;
-        x1 = xAnchorPos + options.x1 + shiftUnitX * options.xshift;
+        x0 = xAnchorPos + options.x0 + xShiftStart;
+        x1 = xAnchorPos + options.x1 + xShiftEnd;
     } else {
-        x0 = x2p(options.x0) + shiftUnitX * options.xshift;
-        x1 = x2p(options.x1) + shiftUnitX * options.xshift;
+        x0 = x2p(options.x0) + xShiftStart;
+        x1 = x2p(options.x1) + xShiftEnd;
     }
 
     if(options.ysizemode === 'pixel') {
         var yAnchorPos = y2p(options.yanchor);
-        y0 = yAnchorPos - options.y0 - shiftUnitY * options.yshift;
-        y1 = yAnchorPos - options.y1 - shiftUnitY * options.yshift;
+        y0 = yAnchorPos - options.y0 - yShiftStart;
+        y1 = yAnchorPos - options.y1 - yShiftEnd;
     } else {
-        y0 = y2p(options.y0) - shiftUnitY * options.yshift;
-        y1 = y2p(options.y1) - shiftUnitY * options.yshift;
+        y0 = y2p(options.y0) - yShiftStart;
+        y1 = y2p(options.y1) - yShiftEnd;
     }
 
     if(type === 'line') return 'M' + x0 + ',' + y0 + 'L' + x1 + ',' + y1;
diff --git a/test/image/mocks/zzz_shape_shift_horizontal.json b/test/image/mocks/zzz_shape_shift_horizontal.json
diff --git a/test/image/mocks/zzz_shape_shift_vertical.json b/test/image/mocks/zzz_shape_shift_vertical.json
diff --git a/test/jasmine/tests/shapes_test.js b/test/jasmine/tests/shapes_test.js
diff --git a/test/plot-schema.json b/test/plot-schema.json
