-
-
Notifications
You must be signed in to change notification settings - Fork 6.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
text flow/wrap in actor box of sequence diagram #422
Comments
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.
|
…t_by_fo #422 use foreignObject/div to place actor label in sequence diagram
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. |
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. |
Feat/RendererConfig
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:
to something like below
which produce something like below.
which worked for me locally.
Thanks,
The text was updated successfully, but these errors were encountered: