How to support rich text with automatic text wrapping in JointJS?

[Willia-Yang]

Introduction

Hi JointJS team,

I have a question about text rendering in dia.Element regarding automatic text wrapping and styled text.

Originally, my implementation was using textWrap only, because at that time:

1. The text was plainOriginally
2. No need for different colors or font weights
   textWrap worked perfectly for automatic line wrapping based on element width

export const GenericMarkup: dia.MarkupJSON = [
  {
    tagName: 'rect',
    selector: 'body'
  },
   // titleText + bodyText
  {
    tagName: 'g',
    selector: 'textGroup',
    children: [
      {
        tagName: 'path',
        selector: 'textGroupBg'
      },
      {
        tagName: 'text',
        selector: 'titleText'
      },
      {
        tagName: 'text',
        selector: 'bodyText',
      }
    ]
  }
];

// attr setting
bodyText: {
    x: 'calc(w / 2)',
    y: 44,
    fontSize: 14,
    fontWeight: 700,
    text: e.bodyText ?? '',
    textAnchor: 'middle',
    dominantBaseline: 'auto',
    textWrap: {
        width: 'calc(w - 20)',
        height: undefined,
        preserveSpaces: true
    },
    displayEmpty: true,
    lineHeight: 17,
    fill: 'var(--theia-diagram-${typeName}-header-text-color)'
}

Later, new requirements were introduced:

Different parts of the same text need different styles
the first half of this text needs to be bold or colored, but the second half does not, and the entire text needs the textwrap function.Just like the following case: ' namecontent : typecontent'

i try to add children under bodyText like:

 {
        tagName: 'text',
        selector: 'bodyText',
        children: []
      }

then set the children content:

cell.attr('bodytext/children', buildBodyText())
export function buildBodyText(): dia.MarkupNodeJSON['children'] {
    const children: dia.MarkupNodeJSON['children'] = [];

    children.push({
        tagName: 'tspan',
        attributes: {
            fontWeight: 'bold',
            fill: '#cf7e7eff'
        },
        textContent: 'nameContent,nameContent.nameContent,nameContent,nameContent'
    });

    children.push({
        tagName: 'tspan',
        attributes: {
            fontWeight: 'bold',
            fill: '#6d7ff5ff'
        },
        textContent: 'nameryping'
    });

    return children;
}

but it doesn't wrok.

My question:
Is there any official or recommended approach in JointJS to support:

• Automatic line wrapping (like textWrap)
• AND Different parts of the same text need different styles

at the same time?

Thanks for your help.

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[Geliogabalus]

Hello! Currently our annotations functionality is not supported with text wrap enabled. To achieve your goal you should use foreignObject with styled html inside. Here is a tutorial on how to use foreign object inside of the JointJS shapes.

[Willia-Yang]

because my model is complex, the content in the red box is dynamically added to the markup, and I have to recalculate the position of the dividing line and the content below every time I resize the model

[kumilingus]

Can both parts be implemented in HTML (both part of the same foreignObject), and the divider being just the top-border of the bottom part?

[Willia-Yang]

the bottom part is dynamically added, now i implemented this by build markup, do you also recommend using html for this kind of dynamically added content?

[kumilingus]

I am not sure I follow.

• If you use HTML for the all 3 blocks inside a single foreignObject, you don't need to position the separators because it will be done automatically by HTML layout engine (it does not matter if the markup is static or dynamic).
• You can use SVG and use text-wrap on each line in the shape (maxLineCount: 1) and determine position of each block from number of lines times line height.

[Willia-Yang]

Okay, I'll think about it all and thank you for your suggestion