bpmn-visualization-js icon indicating copy to clipboard operation
bpmn-visualization-js copied to clipboard

[FEAT] support custom image rendering

Open Andrii-Deiak opened this issue 1 year ago • 0 comments

Is your feature request related to a problem? Please describe. Render custom images inside of the BPMN models. I have cases where need to show custom images at any position and with possible connections:

image

Describe the solution you'd like

  1. If in the BPMN model xml presented custom image => display image.
  2. Display different type of images svg, png, jpg..

I am keeping the image in textAnnotation as base64 encoded string:

<bpmn:textAnnotation id="TextAnnotation_0gqg2sp">
            <bpmn:extensionElements>
                <x:attribute name="dataObjectType" value="IT-System"/>
                <x:attribute name="image"
                               value="{thumbnail=PD94bWwgdmVyc..."/>
            </bpmn:extensionElements>
        </bpmn:textAnnotation>

image

So I would expect if this attribute is presented in xml code, so bpmn-visualization lib can display the image.

Describe alternatives you've considered

I was inspired how bpmn-js handle rendering custom images: https://github.com/bpmn-io/bpmn-js-example-custom-rendering

image

Maybe we can apply the same/similar approach in bpmn-visualization lib?

Additional context Example xml file with image:

FEAT.support.custom.image.rendering-example.txt

### Tasks

Andrii-Deiak avatar Jun 05 '23 14:06 Andrii-Deiak