diff --git a/src/helpers/helpers.extras.js b/src/helpers/helpers.extras.js index 89ffa418c57..09739ce8671 100644 --- a/src/helpers/helpers.extras.js +++ b/src/helpers/helpers.extras.js @@ -81,6 +81,10 @@ export const _alignStartEnd = (align, start, end) => align === 'start' ? start : * @param {string} align start, end, center * @param {number} left value for start * @param {number} right value for end + * @param {boolean} rtl Is this an RTL draw * @private */ -export const _textX = (align, left, right) => align === 'right' ? right : align === 'center' ? (left + right) / 2 : left; +export const _textX = (align, left, right, rtl) => { + const check = rtl ? 'left' : 'right'; + return align === check ? right : align === 'center' ? (left + right) / 2 : left; +}; diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index b30ba41d301..206f1add94f 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -371,7 +371,7 @@ export class Legend extends Element { const fillText = function(x, y, legendItem) { renderText(ctx, legendItem.text, x, y + (itemHeight / 2), labelFont, { strikethrough: legendItem.hidden, - textAlign: legendItem.textAlign + textAlign: rtlHelper.textAlign(legendItem.textAlign) }); }; @@ -402,7 +402,7 @@ export class Legend extends Element { const textWidth = ctx.measureText(legendItem.text).width; const textAlign = rtlHelper.textAlign(legendItem.textAlign || (legendItem.textAlign = labelOpts.textAlign)); - const width = boxWidth + (fontSize / 2) + textWidth; + const width = boxWidth + halfFontSize + textWidth; let x = cursor.x; let y = cursor.y; @@ -424,7 +424,7 @@ export class Legend extends Element { drawLegendBox(realX, y, legendItem); - x = _textX(textAlign, x + boxWidth + halfFontSize, me.right); + x = _textX(textAlign, x + boxWidth + halfFontSize, isHorizontal ? x + width : me.right, opts.rtl); // Fill the actual label fillText(rtlHelper.x(x), y, legendItem); diff --git a/test/fixtures/plugin.legend/label-textAlign/horizontal-left.js b/test/fixtures/plugin.legend/label-textAlign/horizontal-left.js new file mode 100644 index 00000000000..46458c532e4 --- /dev/null +++ b/test/fixtures/plugin.legend/label-textAlign/horizontal-left.js @@ -0,0 +1,30 @@ +module.exports = { + config: { + type: 'pie', + data: { + labels: ['aaaa', 'bb', 'c'], + datasets: [ + { + data: [1, 2, 3] + } + ] + }, + options: { + plugins: { + legend: { + position: 'top', + labels: { + textAlign: 'left' + } + } + } + } + }, + options: { + spriteText: true, + canvas: { + width: 256, + height: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/label-textAlign/horizontal-left.png b/test/fixtures/plugin.legend/label-textAlign/horizontal-left.png new file mode 100644 index 00000000000..84907658eba Binary files /dev/null and b/test/fixtures/plugin.legend/label-textAlign/horizontal-left.png differ diff --git a/test/fixtures/plugin.legend/label-textAlign/horizontal-right.js b/test/fixtures/plugin.legend/label-textAlign/horizontal-right.js new file mode 100644 index 00000000000..729c663ac0a --- /dev/null +++ b/test/fixtures/plugin.legend/label-textAlign/horizontal-right.js @@ -0,0 +1,30 @@ +module.exports = { + config: { + type: 'pie', + data: { + labels: ['aaaa', 'bb', 'c'], + datasets: [ + { + data: [1, 2, 3] + } + ] + }, + options: { + plugins: { + legend: { + position: 'top', + labels: { + textAlign: 'right' + } + } + } + } + }, + options: { + spriteText: true, + canvas: { + width: 256, + height: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/label-textAlign/horizontal-right.png b/test/fixtures/plugin.legend/label-textAlign/horizontal-right.png new file mode 100644 index 00000000000..84907658eba Binary files /dev/null and b/test/fixtures/plugin.legend/label-textAlign/horizontal-right.png differ diff --git a/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-left.js b/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-left.js new file mode 100644 index 00000000000..5fff9c72a2b --- /dev/null +++ b/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-left.js @@ -0,0 +1,31 @@ +module.exports = { + config: { + type: 'pie', + data: { + labels: ['aaaa', 'bb', 'c'], + datasets: [ + { + data: [1, 2, 3] + } + ] + }, + options: { + plugins: { + legend: { + position: 'top', + rtl: true, + labels: { + textAlign: 'left' + } + } + } + } + }, + options: { + spriteText: true, + canvas: { + width: 256, + height: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-left.png b/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-left.png new file mode 100644 index 00000000000..79642112e73 Binary files /dev/null and b/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-left.png differ diff --git a/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-right.js b/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-right.js new file mode 100644 index 00000000000..ae900510368 --- /dev/null +++ b/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-right.js @@ -0,0 +1,31 @@ +module.exports = { + config: { + type: 'pie', + data: { + labels: ['aaaa', 'bb', 'c'], + datasets: [ + { + data: [1, 2, 3] + } + ] + }, + options: { + plugins: { + legend: { + rtl: true, + position: 'top', + labels: { + textAlign: 'right' + } + } + } + } + }, + options: { + spriteText: true, + canvas: { + width: 256, + height: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-right.png b/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-right.png new file mode 100644 index 00000000000..79642112e73 Binary files /dev/null and b/test/fixtures/plugin.legend/label-textAlign/horizontal-rtl-right.png differ diff --git a/test/fixtures/plugin.legend/label-textAlign/rtl-left.png b/test/fixtures/plugin.legend/label-textAlign/rtl-left.png index 80789d65f03..294d61dd6fb 100644 Binary files a/test/fixtures/plugin.legend/label-textAlign/rtl-left.png and b/test/fixtures/plugin.legend/label-textAlign/rtl-left.png differ diff --git a/test/fixtures/plugin.legend/label-textAlign/rtl-right.png b/test/fixtures/plugin.legend/label-textAlign/rtl-right.png index 294d61dd6fb..80789d65f03 100644 Binary files a/test/fixtures/plugin.legend/label-textAlign/rtl-right.png and b/test/fixtures/plugin.legend/label-textAlign/rtl-right.png differ