A Multiline-TextNode-Viewer Component

[rsoika]

Today I want to share my implementation of a client side viewer component showing a multi-line label. The idea of this component is to display a long label or text wrap over multiple lines. The line break automatically adjusts to the size of the container. The implementation if 100% SVG so the text can be exported as a SVG graphic too:

The component expects the text to display in the model attribute 'text'. I will explain the implementation details below:

@injectable()
export class MultiLineTextNodeView extends ShapeView {
    render(label: Readonly<MultiLineTextNode>, context: RenderingContext): VNode | undefined {
        if (!this.isVisible(label, context)) {
            return undefined;
        }
        let nodeWidth=100;
        const parent=label.parent;
        if (isBoundsAware(parent)) {
            nodeWidth=parent.bounds.width;
        }

        // split text into words and lines...
        let line='';
        const lines: string[] = [];
        const words=splitWords(label.args.text);
        for (let i = 0; i < words.length; i++) {
            const word = words[i];
            line+=word+ ' ';
            if (line.length>(nodeWidth/6)) { // very naive approach ;-) 
                line=line.substring(0,line.length-word.length-2);
                lines.push(line);
                line=word +' ';
            }
        }
        lines.push(line); // last line

        // depending on the attribute 'align' we move the text element into the center
        let xOffset=5;
        if (label.args.align==='middle') {
            xOffset= nodeWidth*0.5;
        }
        const vnode = <g class-sprotty-node={label instanceof SNode}>
            <text class-sprotty-label={true} transform={'translate(' + xOffset + ',0)'}>
                {lines!.map((_line , _index)  => (
                   <tspan x="0" dy={_index===0?10:15}>{_line}</tspan>
                ))}
            </text>
        </g>;

        const subType = getSubType(label);
        if (subType) {
            setAttr(vnode, 'class', subType);
        }
        return vnode;
    }
}

function splitWords(text: any): string {
    return text.split(' ');
}

export class MultiLineTextNode extends SShapeElement implements SArgumentable {
	static readonly DEFAULT_FEATURES = [
		boundsFeature];
	layout: string;
	readonly args: Args;
    text = '';
	align = '';
}

As you can see from my implementation the viewer splits the text into words and build line by line. The method tests how many words fit in one line by comparing the line length with the component width. To display the text lines I use <tspan> elements. The text can be displayed centred, left or right aligned.

The computation of the number of lines is very naive as I simply count the characters assuming a average character width. A more elegant solution would be testing the real width of the Tspan. I think this is possible with currentTspan.getComputedTextLength():

  let currentTspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
  svgElement.appendChild(currentTspan);

  for (let i = 0; i < words.length; i++) {
    const word = words[i];
    currentTspan.textContent += word + ' ';
    // verify length of text...
    if (currentTspan.getComputedTextLength() > maxWidth) {
      currentTspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
      currentTspan.textContent = word + ' ';
      svgElement.appendChild(currentTspan);
    }
  }

But I wasn't able to implement this myself because my knowledge of JSX and React is not sufficient. I think this kind of width-calculation only works when the tspan element is already visible.

Maybe someone find this component helpful. And maybe someone will find a way to further improve the component.

[CamilleLetavernier]

Hi Ralph,

Thanks for the (partial) contribution!

My experience with a similar use case was that, by moving the behavior to an IVNodePostprocessor (instead of the View itself), we could adjust the SVG Element after it has been rendered, making it possible to actually test the real rendered size of the text spans (rather than trying to estimate it).

This is similar to how Sprotty uses a (hidden) rendered SVG Diagram, to compute the actual size of the rendered nodes, and then uses this data to apply layout.

[rsoika]

Hi @CamilleLetavernier can you please explain this IVNodePostprocessor a little bit? What is this and how does this work. Can you give me a short example?

[CamilleLetavernier]

Hey,

IVNodePostprocessors are registered globally in your Diagram Module, and are invoked after all views are created (but not rendered yet). They have access to the VNode (rendered by the View), which in turns gives access to the actual DOM Element.

You can use Hooks (https://github.com/snabbdom/snabbdom#hooks) on the VNode to detect that an SVG DOM Element has been added to the DOM, and then access the size property of this element. You can also manipulate the DOM directly from here (e.g. splitting lines by adding more text spans).

Unfortunately, I don't have an example, and the Snabbdom documentation is pretty scarce when it comes to JSX/Typescript usage. It seems that the hooks are part of the data attribute of the VNode, so it might look like this (untested code):

decorate(vnode: VNode, element: SModelElementImpl): VNode {
    if (element.type === 'multiline-text-element') {
        if (!vnode.data) {
            vnode.data = {};
        }
        vnode.data.hooks = {
            insert: (node: VNode) => {
                // From this point you have access to vnode.elm. You can start manipulating Text Spans and measuring their length.
                // You will likely have to fall back to low-level js/ts, instead of the nicer tsx/jsx syntax, but I don't think there is a way around
                // this, as using jsx/tsx would create more Virtual Nodes, without the ability to measure anything directly.
                if (node.elm && isSVGGraphicsElement(node.elm)) {
                   const bounds = node.elm.getBBox();
                }
            },
        };
    }
    return vnode;
}

I guess the best example to read SVG Element sizes is Sprotty's HiddenBoundsUpdater (https://github.com/eclipse-sprotty/sprotty/blob/3342e6620f0306ec0c362ee12b6227cf968ffab3/packages/sprotty/src/features/bounds/hidden-bounds-updater.ts#L50), although it doesn't use hooks (instead, it waits for the entire hidden diagram to be fully rendered). But I think hooks are a better approach for individual DOM Element, such as Text/Text spans.

[planger]

Thank you very much for sharing this work @rsoika! This certainly looks better than resorting to HTML for this use case.
I also like the idea of @CamilleLetavernier to try moving this into a post processor as it could make this even more precise.

@rsoika Can you please open a PR against glsp-client with your proposal, we could then continue the discussion there. Thank you very much!

[rsoika]

Hi @planger , I don't think that I can get a working pull request build for the glsp-client project.
You can take a look here, but I'm already failing at the import instructions because I don't know the project structure well enough.
Setting this up correctly to get a working example within glsp-client project would take me more than a day of work.

[tortmayr]

@rsoika Could you please simply open a draft PR with the changes of your link. It's ok if the PR does not compile.

From a legal perspective it's far easier for us to adopt/ build on top of your solution if it has been contributed via a PR.
Thanks!