Fix inconsistent axis title standoff when title is one text line vs. multiple lines

[my-tien]

Fixes: #6971.
The bug (codepen):
Notice the different spacing between ticklabels and axis title!

Previously, the standoff was calculated in the same way for all axis sides, but since the renderer draws from top left to bottom right, the code must be different for top/left axes titles and bottom/right axes titles: For top/left axes all lines after the first of a multiline title require extra space before the ticklabels, whereas for bottom/right axes, the drawing baseline needs to be shifted 1 line after the ticklabels to prevent overlap. This is what this PR does.

FYI if you want to try out the code yourself: Debugging this is difficult because there are multiple drawing passes. One way to simplify this is to comment out scootTitle in Titles.draw (src/components/titles.index.js:120) whose only purpose is to shift the axis title in case it overlaps with either the paper border or another rendering object:

function titleLayout(titleEl) {
    Lib.syncOrAsync([drawTitle, /*scootTitle*/], titleEl);
}

Disclaimer

I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

[archmoj]

Brilliant fix. 🎖️ 🏅 🥇
Please pick 1e69c85 or alternatively download and extract baselines.tar form Artifacts tab of https://app.circleci.com/pipelines/github/plotly/plotly.js/10216/workflows/f4a86aee-e57b-43a7-a0df-2fe27560ebb2/jobs/223383/artifacts and place the files in test/image/baselines/.

[archmoj]

💃