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>

Author: LeeLenaleee

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);
+		}
 	}
 
 	/**

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
+		}
+	}
+};

test/fixtures/core.scale/crossAlignment/cross-align-left-far-clipped.png

@@ -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
+};