property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates

draftlogs/7005_add.md

@@ -0,0 +1 @@
+ - Add property x0shift, x1shift, y0shift, y1shift for shapes referencing (multi-)category axes, with thanks to @my-tien for the contribution! [[#7005](https://github.com/plotly/plotly.js/pull/7005)]

src/components/shapes/attributes.js

@@ -169,7 +169,30 @@ module.exports = templatedArray('shape', {
             'See `type` and `xsizemode` for more info.'
         ].join(' ')
     },
-
+    x0shift: {
+        valType: 'number',
+        dflt: 0,
+        min: -1,
+        max: 1,
+        editType: 'calc',
+        description: [
+            'Shifts `x0` away from the center of the category when `xref` is a *category* or',
+            '*multicategory* axis. -0.5 corresponds to the start of the category and 0.5',
+            'corresponds to the end of the category.'
+        ].join(' ')
+    },
+    x1shift: {
+        valType: 'number',
+        dflt: 0,
+        min: -1,
+        max: 1,
+        editType: 'calc',
+        description: [
+            'Shifts `x1` away from the center of the category when `xref` is a *category* or',
+            '*multicategory* axis. -0.5 corresponds to the start of the category and 0.5',
+            'corresponds to the end of the category.'
+        ].join(' ')
+    },
     yref: extendFlat({}, annAttrs.yref, {
         description: [
             'Sets the shape\'s y coordinate axis.',
@@ -220,7 +243,30 @@ module.exports = templatedArray('shape', {
             'See `type` and `ysizemode` for more info.'
         ].join(' ')
     },
-
+    y0shift: {
+        valType: 'number',
+        dflt: 0,
+        min: -1,
+        max: 1,
+        editType: 'calc',
+        description: [
+            'Shifts `y0` away from the center of the category when `yref` is a *category* or',
+            '*multicategory* axis. -0.5 corresponds to the start of the category and 0.5',
+            'corresponds to the end of the category.'
+        ].join(' ')
+    },
+    y1shift: {
+        valType: 'number',
+        dflt: 0,
+        min: -1,
+        max: 1,
+        editType: 'calc',
+        description: [
+            'Shifts `y1` away from the center of the category when `yref` is a *category* or',
+            '*multicategory* axis. -0.5 corresponds to the start of the category and 0.5',
+            'corresponds to the end of the category.'
+        ].join(' ')
+    },
     path: {
         valType: 'string',
         editType: 'calc+arraydraw',

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, 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, constants.paramIsY);
+            bounds = shapeBounds(ax, shape, constants.paramIsY);
             if(bounds) {
                 shape._extremes[ax._id] = Axes.findExtremes(ax, bounds, calcYPaddingOptions(shape));
             }
@@ -77,15 +73,35 @@ function calcPaddingOptions(lineWidth, sizeMode, v0, v1, path, isYAxis) {
     }
 }
 
-function shapeBounds(ax, v0, v1, path, paramsToUse) {
-    var convertVal = (ax.type === 'category' || ax.type === 'multicategory') ? ax.r2c : ax.d2c;
+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'] === 'scaled';
+    if(isSizeModeScale) {
+        v0 = shape[dim + '0'];
+        v1 = shape[dim + '1'];
+        if(isCategory) {
+            shiftStart = shape[dim + '0shift'];
+            shiftEnd = shape[dim + '1shift'];
+        }
+    } else {
+        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;

src/components/shapes/defaults.js

@@ -85,6 +85,10 @@ function handleShapeDefaults(shapeIn, shapeOut, fullLayout) {
             ax._shapeIndices.push(shapeOut._index);
             r2pos = helpers.rangeToShapePosition(ax);
             pos2r = helpers.shapePositionToRange(ax);
+            if(ax.type === 'category' || ax.type === 'multicategory') {
+                coerce(axLetter + '0shift');
+                coerce(axLetter + '1shift');
+            }
         } else {
             pos2r = r2pos = Lib.identity;
         }

src/components/shapes/display_labels.js

@@ -88,15 +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 ya = Axes.getFromId(gd, options.yref);
+        var yShiftStart = options.y0shift;
+        var yShiftEnd = options.y1shift;
         var yRefType = Axes.getRefType(options.yref);
-        var x2p = helpers.getDataToPixel(gd, xa, false, xRefType);
-        var y2p = helpers.getDataToPixel(gd, ya, 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

src/components/shapes/draw.js

@@ -227,8 +227,18 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer, editHe
     var xRefType = Axes.getRefType(shapeOptions.xref);
     var ya = Axes.getFromId(gd, shapeOptions.yref);
     var yRefType = Axes.getRefType(shapeOptions.yref);
-    var x2p = helpers.getDataToPixel(gd, xa, false, xRefType);
-    var y2p = helpers.getDataToPixel(gd, ya, 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);
 
@@ -279,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)
@@ -289,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)

src/components/shapes/draw_newshape/newshapes.js

@@ -84,10 +84,10 @@ function newShapes(outlines, dragOptions) {
                 case 'line':
                 case 'rect':
                 case 'circle':
-                    modifyItem('x0', afterEdit.x0);
-                    modifyItem('x1', afterEdit.x1);
-                    modifyItem('y0', afterEdit.y0);
-                    modifyItem('y1', afterEdit.y1);
+                    modifyItem('x0', afterEdit.x0 - (beforeEdit.x0shift || 0));
+                    modifyItem('x1', afterEdit.x1 - (beforeEdit.x1shift || 0));
+                    modifyItem('y0', afterEdit.y0 - (beforeEdit.y0shift || 0));
+                    modifyItem('y1', afterEdit.y1 - (beforeEdit.y1shift || 0));
                     break;
 
                 case 'path':

src/components/shapes/helpers.js

@@ -53,7 +53,7 @@ exports.extractPathCoords = function(path, paramsToUse, isRaw) {
     return extractedCoordinates;
 };
 
-exports.getDataToPixel = function(gd, axis, isVertical, refType) {
+exports.getDataToPixel = function(gd, axis, shift, isVertical, refType) {
     var gs = gd._fullLayout._size;
     var dataToPixel;
 
@@ -66,7 +66,8 @@ exports.getDataToPixel = function(gd, axis, isVertical, refType) {
             var d2r = exports.shapePositionToRange(axis);
 
             dataToPixel = function(v) {
-                return axis._offset + axis.r2p(d2r(v, true));
+                var shiftPixels = getPixelShift(axis, shift);
+                return axis._offset + axis.r2p(d2r(v, true)) + shiftPixels;
             };
 
             if(axis.type === 'date') dataToPixel = exports.decodeDate(dataToPixel);
@@ -179,6 +180,10 @@ exports.getPathString = function(gd, options) {
     var ya = Axes.getFromId(gd, options.yref);
     var gs = gd._fullLayout._size;
     var x2r, x2p, y2r, y2p;
+    var xShiftStart = getPixelShift(xa, options.x0shift);
+    var xShiftEnd = getPixelShift(xa, options.x1shift);
+    var yShiftStart = getPixelShift(ya, options.y0shift);
+    var yShiftEnd = getPixelShift(ya, options.y1shift);
     var x0, x1, y0, y1;
 
     if(xa) {
@@ -208,23 +213,22 @@ exports.getPathString = function(gd, options) {
         if(ya && ya.type === 'date') y2p = exports.decodeDate(y2p);
         return convertPath(options, x2p, y2p);
     }
-
     if(options.xsizemode === 'pixel') {
         var xAnchorPos = x2p(options.xanchor);
-        x0 = xAnchorPos + options.x0;
-        x1 = xAnchorPos + options.x1;
+        x0 = xAnchorPos + options.x0 + xShiftStart;
+        x1 = xAnchorPos + options.x1 + xShiftEnd;
     } else {
-        x0 = x2p(options.x0);
-        x1 = x2p(options.x1);
+        x0 = x2p(options.x0) + xShiftStart;
+        x1 = x2p(options.x1) + xShiftEnd;
     }
 
     if(options.ysizemode === 'pixel') {
         var yAnchorPos = y2p(options.yanchor);
-        y0 = yAnchorPos - options.y0;
-        y1 = yAnchorPos - options.y1;
+        y0 = yAnchorPos - options.y0 + yShiftStart;
+        y1 = yAnchorPos - options.y1 + yShiftEnd;
     } else {
-        y0 = y2p(options.y0);
-        y1 = y2p(options.y1);
+        y0 = y2p(options.y0) + yShiftStart;
+        y1 = y2p(options.y1) + yShiftEnd;
     }
 
     if(type === 'line') return 'M' + x0 + ',' + y0 + 'L' + x1 + ',' + y1;
@@ -279,3 +283,12 @@ function convertPath(options, x2p, y2p) {
         return segmentType + paramString;
     });
 }
+
+function getPixelShift(axis, shift) {
+    shift = shift || 0;
+    var shiftPixels = 0;
+    if(shift && axis && (axis.type === 'category' || axis.type === 'multicategory')) {
+        shiftPixels = (axis.r2p(1) - axis.r2p(0)) * shift;
+    }
+    return shiftPixels;
+}

src/components/shapes/label_texttemplate.js

@@ -16,12 +16,17 @@ function x1Fn(shape) { return shape.x1; }
 function y0Fn(shape) { return shape.y0; }
 function y1Fn(shape) { return shape.y1; }
 
+function x0shiftFn(shape) { return shape.x0shift || 0; }
+function x1shiftFn(shape) { return shape.x1shift || 0; }
+function y0shiftFn(shape) { return shape.y0shift || 0; }
+function y1shiftFn(shape) { return shape.y1shift || 0; }
+
 function dxFn(shape, xa) {
-    return d2l(shape.x1, xa) - d2l(shape.x0, xa);
+    return d2l(shape.x1, xa) + x1shiftFn(shape) - d2l(shape.x0, xa) - x0shiftFn(shape);
 }
 
 function dyFn(shape, xa, ya) {
-    return d2l(shape.y1, ya) - d2l(shape.y0, ya);
+    return d2l(shape.y1, ya) + y1shiftFn(shape) - d2l(shape.y0, ya) - y0shiftFn(shape);
 }
 
 function widthFn(shape, xa) {
@@ -41,11 +46,11 @@ function lengthFn(shape, xa, ya) {
 }
 
 function xcenterFn(shape, xa) {
-    return l2d((d2l(shape.x1, xa) + d2l(shape.x0, xa)) / 2, xa);
+    return l2d((d2l(shape.x1, xa) + x1shiftFn(shape) + d2l(shape.x0, xa) + x0shiftFn(shape)) / 2, xa);
 }
 
 function ycenterFn(shape, xa, ya) {
-    return l2d((d2l(shape.y1, ya) + d2l(shape.y0, ya)) / 2, ya);
+    return l2d((d2l(shape.y1, ya) + y1shiftFn(shape) + d2l(shape.y0, ya) + y0shiftFn(shape)) / 2, ya);
 }
 
 function slopeFn(shape, xa, ya) {