svg.js icon indicating copy to clipboard operation
svg.js copied to clipboard

`text.rebuild()` overwrites `dy` if the `tspan` had previously had `newLine()` called on it

Open pragdave opened this issue 5 years ago • 6 comments

tspan.newLine() does two things

  1. It sets dy to the line height, and dx to the left margin
  2. It sets the newLined flag

When a text element is rebuilt, it looks at the newlined flag and it set it updates dy to the lineheight again.

However, I wanted my SVG text to have a number of extra blank lines, so I wrote:

              tspan.newLine()
              if (pendingNewlines > 1) {
                let lineHeight = tspan.dy()
                tspan.dy(pendingNewlines * lineHeight)
              }
              pendingNewlines = 0

This correctly sets dy in the dom initially. However, at some point test.rebuild gets called, and the extra line spacing is lost.

This pen illustrates the problem:

https://codepen.io/pragdave/pen/rNOEpgW

Suggested fix

Rather than have newLined be boolean, make it a count. Change the API of tspan.newLine() to be

newLine(factor=1) {
...
}

and have it set dy to factor*lineheight. Keep the factor in the dom entry (replacing newLined) and repeat the calculation on rebuild.

I'd be happy to generate a PR if this sounds reasonable. (I'd even update the docs :)

Dave

pragdave avatar May 28 '20 21:05 pragdave

If you need a blank line, just create an empty tspan. svg.js should handle the rest. Would that resolve your issue?

I'd be happy to generate a PR if this sounds reasonable. (I'd even update the docs :)

You are a true hero! :D

Fuzzyma avatar May 28 '20 21:05 Fuzzyma

Empty tspans are ignored, I believe...

pragdave avatar May 28 '20 21:05 pragdave

You are a 100% correct ;). But I believe in svg.js (no joke, that is a case that is handled in the rebuild function)

Fuzzyma avatar May 28 '20 21:05 Fuzzyma

See the updated pen... https://codepen.io/pragdave/pen/rNOEpgW

pragdave avatar May 28 '20 21:05 pragdave

Strange... let me investigate after I am back from work. If you want you can have a look yourself. In the rebuild function there is something like newLineOffset or so. Thats the place to look

Fuzzyma avatar May 28 '20 22:05 Fuzzyma

So jeah - you have to add an actual newline to the tspan for it to work :D. Is there even a usecase for this? I will look into it later. No free head for that

https://codepen.io/fuzzyma/pen/NWGZmqB

Fuzzyma avatar May 29 '20 10:05 Fuzzyma