Fix legend item layout issue

[nagix]

When layout.padding is specified, legend item layout goes wrong, and some items disappear or overlap with the chart.

In the the following examples, I added a blue frame to the legend box and red frames to the legend item boxes to make it easier to understand each box's position.

Version 2.7.3: https://jsfiddle.net/nagix/dy1etr8h/

The legend item for the dataset 'G' disappears in the first chart, and it overlaps with the chart in the second chart.

This PR: https://jsfiddle.net/nagix/4b8utyLv/

In this PR, calculation for item layout is fixed, and legend.labels.padding is correctly applied to the left most items.

Fixes #4112
Fixes #5491
Fixes #5606

[benmccann]

Does this fix also work in the case that there are three rows of labels?

[nagix]

Yes, you can see animations in the fiddle and how it works when the legend box becomes narrow.

[simonbrunel]

Thanks @nagix

[simonbrunel]

@nagix some of these tests now fail on my machine, what is your dev environment?

[nagix]

My environment is Mac OS. The cause of the failures is a floating point number error, correct?

[simonbrunel]

I'm not sure:

Expected 105 to be close to pixel 107.
@test/specs/plugin.legend.tests.js:213:48

Expected 53 to be close to pixel 56.
@test/specs/plugin.legend.tests.js:466:48

Expected 232 to be close to pixel 228.7.
@test/specs/plugin.legend.tests.js:493:30

Expected 121 to be close to pixel 119.
@test/specs/plugin.legend.tests.js:522:48

Expected 101 to be close to pixel 99.
@test/specs/plugin.legend.tests.js:524:49

[simonbrunel]

Firefox only (63.0.1), it works on Chrome

[nagix]

Ah, I'm sure this is due to the difference in the font size.

[simonbrunel]

Any idea how to make these tests more stable? maybe by setting empty labels for each dataset or find a stable character to repeat, or ...

[nagix]

The use of empty labels would be simplest. I will open a new PR for this.