Customize node view with html content inside an svg element #167

zairiint · 2023-02-05T22:24:29Z

zairiint
Feb 5, 2023

Hello !

Thank you very much for this open-bpmn project.

I'm trying to customize node view with html content (interactive dropdown) inside an svg element.

export class InteractiveHtmlView implements IView {
    render(
      node: Readonly<SNode>,
      context: RenderingContext
    ): VNode | undefined {
        const radius = this.getRadius(node);
      const vnode: any = (
        <g>
          <rect
              x=".5"
              y=".5"
              width="33"
              height="33"
              rx="1.5"
              stroke="var(--theia-editorWidget-border)"
              fill="var(--theia-editorWidget-background)"
          >
            <text x={radius} y={radius + 7} class-sprotty-text={true}>{node.id.substr(4)}</text>
        {this.buildMenu(node)}

          </rect>
          {context.renderChildren(node) as unknown as React.ReactNode}
        </g>
      );
      return vnode;
    }

actually the svg rectangle is shown but when i add an html content instead i cant display it.
can you please help by an example or idea !

Answered by rsoika

Feb 10, 2023

Your embedded code should look like this:

<foreignObject
        requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
        height="125"
        width="720"
        x="0"
        y="0"
      >
        <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nam at tellus quis lacus auctor congue vel sit amet lectus.
        Cras interdum lectus vel enim mollis maximus.
        </div>
      </foreignObject>

Remove the body tag, change the tag name to foreignObject (case sensitive) and add the 'requiredFeatures'.

Also see the chapter ForeignObjectView here

I did a short test about this:

View full answer

rsoika · 2023-02-06T10:38:16Z

rsoika
Feb 6, 2023
Maintainer

Have you bound your InteractiveHtmlView in your diagram view - di.config.ts

const bpmnDiagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {
    .....
    configureModelElement(context, 'task', TaskNode, InteractiveHtmlView);
    .....
}

1 reply

zairiint Feb 7, 2023
Author

Yes i did that
configureModelElement(context, 'htmlcomp', HTMLNode, InteractiveHtmlView);

rsoika · 2023-02-07T18:34:14Z

rsoika
Feb 7, 2023
Maintainer

Ok, I think I understand now your problem. It is more related to SVG itself.
In SVG there is a support for so called "foreign objects" within the SVG graph, where you can provide HTML code directly to a ForeignObjectElement.

You code should look something like this:

<g class-sprotty-node={element instanceof SNode}>
                <rect class-sprotty-node={element instanceof SNode} x="1" y="1" width="28" height={headerHeight}></rect>
                  <foreignobject class="node" x="46" y="22" width="100" height="100">
                    <div style="border:1px green solid">I'm a div inside a SVG.</div>                
                  </foreignobject>
             .....
</g>

We use this for embedded text areas. Please let me know if this solves your problem.

1 reply

zairiint Feb 8, 2023
Author

I tested that. When I inspect my page, I see the code of my div but in the graph it doesn't appear

this is the whole view's code

import {
  RenderingContext,
  SModelElement,
  SNode,
  svg,
  IView,
} from "@eclipse-glsp/client";
import { injectable } from "inversify";
import { VNode } from "snabbdom";

const JSX = { createElement: svg };

@injectable()
export class InteractiveHtmlView implements IView {
  render(node: Readonly<SNode>, context: RenderingContext): VNode | undefined {
    const radius = this.getRadius(node);
    const vnode: any = (
      <g>
        <rect
          x=".5"
          y=".5"
          width="33"
          height="33"
          rx="1.5"
          stroke="var(--theia-editorWidget-border)"
          fill="var(--theia-editorWidget-background)"
        >
          <text x={radius} y={radius + 7} class-sprotty-text={true}>
            {node.id.substr(4)}
          </text>
        </rect>{" "}
        <foreignobject  x={radius +7} y={radius + 7} width="10" height="10">
        <body>
          <div>Im a div inside a SVG.</div>
          </body>
        </foreignobject>
        {context.renderChildren(node) as unknown as React.ReactNode}
      </g>
    );
    return vnode;
  }

rsoika · 2023-02-10T14:41:47Z

rsoika
Feb 10, 2023
Maintainer

Your embedded code should look like this:

<foreignObject
        requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
        height="125"
        width="720"
        x="0"
        y="0"
      >
        <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nam at tellus quis lacus auctor congue vel sit amet lectus.
        Cras interdum lectus vel enim mollis maximus.
        </div>
      </foreignObject>

Remove the body tag, change the tag name to foreignObject (case sensitive) and add the 'requiredFeatures'.

Also see the chapter ForeignObjectView here

I did a short test about this:

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Customize node view with html content inside an svg element #167

{{title}}

Replies: 3 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Customize node view with html content inside an svg element #167

zairiint Feb 5, 2023

Replies: 3 comments · 2 replies

rsoika Feb 6, 2023 Maintainer

zairiint Feb 7, 2023 Author

rsoika Feb 7, 2023 Maintainer

zairiint Feb 8, 2023 Author

rsoika Feb 10, 2023 Maintainer

zairiint
Feb 5, 2023

Replies: 3 comments 2 replies

rsoika
Feb 6, 2023
Maintainer

zairiint Feb 7, 2023
Author

rsoika
Feb 7, 2023
Maintainer

zairiint Feb 8, 2023
Author

rsoika
Feb 10, 2023
Maintainer