feat: get element svg

[sandrewTx08]

Proposed Changes

This feature allows rendering a specific element from the diagram.

This pull request introduces a new method to the ElementRegistry class and updates the corresponding unit tests. The most important changes include the addition of the getGraphicsSvg method and its usage in the test file.

How I use it on my Angular application:

Component:

getElementById(id: string) {
    const elementRegistry: any = this.viewer.get('elementRegistry');
    const element = elementRegistry.get(id);
    return element ? elementRegistry.getGraphicsSvg(element).outerHTML : '';
}

Template:

      <h2>
        <span
          [innerHTML]="
            domSanitizer.bypassSecurityTrustHtml(
              appViewer.getElementById(documentation.id)
            )
          "
        ></span>
        {{ documentation.name || documentation.id }}
      </h2>

My application looks like:

Enhancements to ElementRegistry:

• lib/core/ElementRegistry.js: Added the getGraphicsSvg method to return the graphical SVG representation of an element.

Unit test updates:

• lib/core/ElementRegistry.spec.ts: Added calls to getGraphicsSvg to test the new method with different element types.

Add relevant context (issue fixed or related to),
a capture of the UI changes (if any) as well as
steps to try out your changes.

Checklist

• Brief textual description of the changes present
• Visual demo attached
• Steps to try out present, i.e. using the @bpmn-io/sr tool
• Related issue linked via Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}

[CLAassistant]

All committers have signed the CLA.

[nikku]

Thanks for your contribution! From what I understand you want to retrieve an SVG from a given element on the diagram.

We have not seen this use-case in the past, hence I'm hesitant to make this an addition of the core editor API. If we added it to the core editor, then ElementRegistry would not be the right place as we want to keep it a simple registry, not a graphics generator.

I'm inclined to not have this as part of the core. You can easily add this as a (well tested!) utility to your application.