text flow/wrap in actor box of sequence diagram

[whyzdev]

I tried the latest today. It seems to me that text no-wrap and "overflow" problem still exist in actor (within <text>), and in note with longs word with no-space (within <tsspan>)

Saw several existing issues on wrap, svg text, tspan, and foreignObject. Looks like tspan is the preferred direction over foreignObject. Is this correct? Any thoughts on using svg 1.2 feature? (Tried version="1.2" attribut in svg but no luck.)

If the tspan approach is agreed upon, drawActor needs similar code as in drawNote to break description string into tspan, with/without explict <br> or \n. Otherwise, is it still acceptable to change it with foreignObject/switch div/div+text/tspan?

I tried changing the current code:

exports.drawActor = function (elem, left, verticalPos, description, conf) {
...
    g.append('text') // text label for the x axis
    .attr('x', center).attr('y', verticalPos + conf.height / 2 + 5).attr('class', 'actor').style('text-anchor', 'middle').text(description);

to something like below

    var s = g.append('switch');
    var f =s.append("foreignObject")
    .attr('x',rect.x).attr('y',rect.y)
    .attr('width',rect.width).attr('height',rect.height);

    f.append('div').style('display','table')
       .style('height','100%').style('width','100%')
       .append('div').style('display','table-cell')
         .style('text-align','center').style('vertical-align','middle')
         .text(description)

    //same as before, or change to text+tspan
    s.append('text')
    .attr('x', center).attr('y', verticalPos + conf.height / 2 + 5).attr('class', 'actor').style('text-anchor', 'middle').text(description);

which produce something like below.

<switch><foreignObject x="400" y="0" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">very very very vyer vyer very long</div></div></foreignObject><text x="475" y="37.5" class="actor" style="text-anchor: middle;">very very very vyer vyer very long</text></switch>

which worked for me locally.

Thanks,

[knsv]

Good work! If you make a pull request I will merge! Get Outlook for iOS

…

_____________________________ From: whyzdev <notifications@github.com> Sent: onsdag, november 30, 2016 6:03 fm Subject: [knsv/mermaid] text flow/wrap in actor box of sequence diagram (#422) To: knsv/mermaid <mermaid@noreply.github.com> I tried the latest today. It seems to me that text no-wrap and "overflow" problem still exist in actor (within <text>), and in note with longs word with no-space (within <tsspan>) Saw several existing issues on wrap, svg text, tspan, and foreignObject. Looks like tspan is the preferred direction over foreignObject. Is this correct? Any thoughts on using svg 1.2 feature? (Tried version="1.2" attribut in svg but no luck.) If the tspan approach is agreed upon, drawActor needs similar code as in drawNote to break description string into tspan, with/without explict <br> or . Otherwise, is it still acceptable to change it with foreignObject/switch div/div+text/tspan? I tried changing the current code:exports.drawActor = function (elem, left, verticalPos, description, conf) {... g.append('text') // text label for the x axis .attr('x', center).attr('y', verticalPos + conf.height / 2 + 5).attr('class', 'actor').style('text-anchor', 'middle').text(description); to something like below var s = g.append('switch'); var f =s.append("foreignObject") .attr('x',rect.x).attr('y',rect.y) .attr('width',rect.width).attr('height',rect.height); f.append('div').style('display','table') .style('height','100%').style('width','100%') .append('div').style('display','table-cell') .style('text-align','center').style('vertical-align','middle') .text(description) //same as before, or change to text+tspan s.append('text') .attr('x', center).attr('y', verticalPos + conf.height / 2 + 5).attr('class', 'actor').style('text-anchor', 'middle').text(description); which produce something like below.<switch><foreignObject x="400" y="0" width="150" height="65"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; height: 100%; width: 100%;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; text-align: center; vertical-align: middle;">very very very vyer vyer very long</div></div></foreignObject><text x="475" y="37.5" class="actor" style="text-anchor: middle;">very very very vyer vyer very long</text></switch> which worked for me locally. Thanks, — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[whyzdev]

i am quite close to add a candidate function for drawing actor text similar to d3textwrap, also made vertical alignment to middle works as much as possible. However, the d3textwrap for some reason in Firefox 5x misses the word "long" 3rd line for the above example, only showing two lines. Chrome works okay. So keep looking.

Before further consolidation drawText, we shall see which text render method is better, using d3textwrap with PR there, or not.

I would like to be able to just add some tests on the text placement. Like put text in a box to verify the code.

[whyzdev]

this should be fixed for text in sequence diagram actor. text placement default to use "tspan" method (alternatives being "fo" and "old"). Will move on beyond actor text to text in other places such as flow chart.

Please reopen or open new issue if there is problems.