Fix rtl legend text alignment (#9199)

* Start fixing RTL

* Broken test

* Fix right alignment for horizontal legends

diff --git a/src/helpers/helpers.extras.js b/src/helpers/helpers.extras.js
index 89ffa418c57af0ee6b004ac361622363dd20bd31..09739ce8671037bd860f5a3c1b30e0a5ede71d8d 100644 (file)
--- 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 b30ba41d30135468e90e9d904bf61bb96bf39388..206f1add94f5b8b2e30ff880cfeedd72bbfff0bb 100644 (file)
--- 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 (file)
index 0000000..46458c5
--- /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 (file)
index 0000000..8490765
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 (file)
index 0000000..729c663
--- /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 (file)
index 0000000..8490765
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 (file)
index 0000000..5fff9c7
--- /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 (file)
index 0000000..7964211
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 (file)
index 0000000..ae90051
--- /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 (file)
index 0000000..7964211
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 80789d65f036ffbc69cf5cad40488aafc7c065a0..294d61dd6fbfa83ce0ff0ebf548a778a79e16915 100644 (file)
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 294d61dd6fbfa83ce0ff0ebf548a778a79e16915..80789d65f036ffbc69cf5cad40488aafc7c065a0 100644 (file)
Binary files a/test/fixtures/plugin.legend/label-textAlign/rtl-right.png and b/test/fixtures/plugin.legend/label-textAlign/rtl-right.png differ