Custom view

[NourEldin-Ali]

Hello!
Greetings!

Thank you very much for this open-bpmn project.
I'm currently a PhD student, and I'm trying to use it for my thesis .

Could please help me to define a new shape design in the client side? (like this for example
)

Thank you in advance for taking the time to read my question.
Hoping for a response.

Ali

[rsoika]

Hi,
this is more a general GLSP question but we use the concept in Open-BPMN too. You can define new layouts for any BPMN elements by adding a new View Mapping in the di.config file.

We do this for example for the TextAnnotationNode:

open-bpmn/open-bpmn.glsp-client/open-bpmn-glsp/src/di.config.ts

Line 122 in f132809

configureModelElement(context, 'textAnnotation', TextAnnotationNode, TextAnnotationNodeView);

In the bpmn-element-view we define than the layout for this node:

open-bpmn/open-bpmn.glsp-client/open-bpmn-glsp/src/bpmn-element-views.tsx

Line 310 in f132809

export class TextAnnotationNodeView extends ShapeView {

The node layout can be a combination of a general SVG elements like a rect and also polyline elements

@injectable()
export class TextAnnotationNodeView extends ShapeView {
    render(node: Readonly<SShapeElement & Hoverable & Selectable>, context: RenderingContext, args?: IViewArgs): VNode | undefined {
        if (!this.isVisible(node, context)) {
            return undefined;
        }
        const textBorder='20,0 0,0 0,' + node.size.height + ' 20,' + node.size.height;
        return <g>
             <rect class-sprotty-node={node instanceof SNode} class-sprotty-port={node instanceof SPort}
             class-mouseover={node.hoverFeedback} class-selected={node.selected}
                  x="0" y="0" width={Math.max(node.size.width, 0)} height={Math.max(node.size.height, 0)}></rect>
            <polyline points={textBorder} />
            {context.renderChildren(node)}
        </g>;
    }
}

Of course you could also examine your node element and test if it is from a special subtype to overwrite the default layout. You will find more examples of BPMN node layouts in the file bpmn-element-views.tsx

I hope this helps you.