Formatting Text within a shape. #2543
Replies: 2 comments
-
You have to define the margins on a logical level using 'label': {
'textAnchor': 'middle',
'x': 'calc(w/2 + 10)',
'textWrap': {
'height': -10,
'width': -20
}
} For your particular element, where the rectangle on the left side is roughly 20% of the width of the whole shape, the solution may be as follows: const textMargin = 5; // keep 5px margin around text
const sidebarRatio = 5; // the sidebar width (on the left) is 20% of the width (100/20)
el.attr({
label: {
'x': `calc(w/2 + calc(w / ${2 * sidebarRatio}))`,
'textWrap': {
'height': -2 * textMargin,
'width': `calc(w - calc(w / ${sidebarRatio} + ${2 * textMargin}))`
}
}
}); Here's a JSFiddle of this. |
Beta Was this translation helpful? Give feedback.
0 replies
-
Thanks for your thorough answer and example. Works as expected. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Introduction
I want to add margins and/or padding for a shape label. Need to be able to add a margin for text within a shape. There is a lot of documentation on link label, but not so much on shape labels. See old and new shape so that it doesn't overwrite part of the text.
Shape.json.txt
Steps to reproduce
No response
Restrictions & Constraints
No response
Does your question relate to JointJS or JointJS+. Select both if applicable.
JointJS
Beta Was this translation helpful? Give feedback.
All reactions