align text inside chart for far-aligned labels passing test (#8359)

* align text inside chart for far-aligned labels

* added fix for failing test on suggestion of @kurkle

Co-authored-by: Marcel Samyn <marcel.samyn@lab900.com>

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 785d2d868d97d4fdeb14af21da4fbe26c4b272b1..94b15468b973451cb14745b37ef054934947d143 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -1,6 +1,6 @@
 import defaults from './core.defaults';
 import Element from './core.element';
-import {_alignPixel, _measureText, renderText} from '../helpers/helpers.canvas';
+import {_alignPixel, _measureText, renderText, clipArea, unclipArea} from '../helpers/helpers.canvas';
 import {callback as call, each, finiteOrDefault, isArray, isFinite, isNullOrUndef, isObject, valueOrDefault} from '../helpers/helpers.core';
 import {_factorize, toDegrees, toRadians, _int16Range, HALF_PI} from '../helpers/helpers.math';
 import {toFont, resolve, toPadding} from '../helpers/helpers.options';
@@ -1468,6 +1468,7 @@ export default class Scale extends Element {
                const labelSizes = me._getLabelSizes();
                const tickAndPadding = tl + padding;
                const widest = labelSizes.widest.width;
+               const lineSpace = labelSizes.highest.offset * 0.8;
 
                let textAlign;
                let x;
@@ -1486,7 +1487,7 @@ export default class Scale extends Element {
                                        x -= (widest / 2);
                                } else {
                                        textAlign = 'left';
-                                       x -= widest;
+                                       x = me.left + lineSpace;
                                }
                        }
                } else if (position === 'right') {
@@ -1503,7 +1504,7 @@ export default class Scale extends Element {
                                        x += widest / 2;
                                } else {
                                        textAlign = 'right';
-                                       x += widest;
+                                       x = me.right - lineSpace;
                                }
                        }
                } else {
@@ -1513,6 +1514,23 @@ export default class Scale extends Element {
                return {textAlign, x};
        }
 
+       /**
+        * @private
+        */
+       _computeLabelArea() {
+               const me = this;
+               const chart = me.chart;
+               const position = me.options.position;
+
+               if (position === 'left' || position === 'right') {
+                       return {top: 0, left: me.left, bottom: chart.height, right: me.right};
+               } if (position === 'top' || position === 'bottom') {
+                       return {top: me.top, left: 0, bottom: me.bottom, right: chart.width};
+               }
+
+               return null;
+       }
+
        /**
         * @protected
         */
@@ -1604,6 +1622,12 @@ export default class Scale extends Element {
                }
 
                const ctx = me.ctx;
+
+               const area = me._computeLabelArea();
+               if (area) {
+                       clipArea(ctx, area);
+               }
+
                const items = me._labelItems || (me._labelItems = me._computeLabelItems(chartArea));
                let i, ilen;
 
@@ -1614,6 +1638,10 @@ export default class Scale extends Element {
                        let y = item.textOffset;
                        renderText(ctx, label, 0, y, tickFont, item);
                }
+
+               if (area) {
+                       unclipArea(ctx);
+               }
        }
 
        /**

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.js b/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.js
new file mode 100644 (file)
index 0000000..27a936d
--- /dev/null
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.js
@@ -0,0 +1,32 @@
+module.exports = {
+       config: {
+               type: 'bar',
+               data: {
+                       datasets: [{
+                               data: [1, 2, 3],
+                       }],
+                       labels: ['Long long long long label 1', 'Label 2', 'Less more longer label 3']
+               },
+               options: {
+                       indexAxis: 'y',
+                       scales: {
+                               y: {
+                                       position: 'left',
+                                       ticks: {
+                                               crossAlign: 'far',
+                                       },
+                                       afterFit: axis => {
+                                               axis.width = 64;
+                                       },
+                               },
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 512
+               }
+       }
+};

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.png b/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.png
new file mode 100644 (file)
index 0000000..75258b7
Binary files /dev/null and b/test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.png differ

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.js b/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.js
new file mode 100644 (file)
index 0000000..893b293
--- /dev/null
+++ b/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.js
@@ -0,0 +1,33 @@
+module.exports = {
+       config: {
+               type: 'bar',
+               data: {
+                       datasets: [{
+                               data: [1, 2, 3],
+                       }],
+                       labels: ['Long long long long label 1', 'Label 2', 'Less more longer label 3']
+               },
+               options: {
+                       indexAxis: 'y',
+                       scales: {
+                               y: {
+                                       position: 'right',
+                                       ticks: {
+                                               crossAlign: 'far',
+                                       },
+                                       afterFit: axis => {
+                                               axis.width = 64;
+                                       },
+                               },
+                       }
+               }
+       },
+       options: {
+               spriteText: true,
+               canvas: {
+                       height: 256,
+                       width: 512
+               }
+       },
+       tolerance: 0.1
+};

diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.png b/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.png
new file mode 100644 (file)
index 0000000..5339510
Binary files /dev/null and b/test/fixtures/core.scale/crossAlignment/cross-align-right-far-clipped.png differ