Create custom start or task in REACT

Developers
1

How to create a custom start which is of oval in shape or a custom task which is in a shape other than rectangle in REACT.
Can we reduce the size of task element border ??

Thanks in advance

2

Hi @Akhil1515,

to answer this, and your second question, there exists a custom element example on how to render shapes differently. This does not depend on React.js or any other javascript library. There also exists different examples on how to integrate bpmn-js to React.js applications, e.g. this.

3

Okay thank you so much. May I know which methods and files should I modify in this to customize my model

Thank you,
Akhil

4

Please don’t open 3 topics about the same thing. For customization start here: https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-elements

5

I want to change the height of the usertask now

export default class CustomRenderer extends BaseRenderer {
  constructor(eventBus, bpmnRenderer) {
    super(eventBus, HIGH_PRIORITY);

    this.bpmnRenderer = bpmnRenderer;
  }

  canRender(element) {

    // ignore labels
    return !element.labelTarget;
  }
  drawShape(parentNode, element) {
   
    
    const shape = this.bpmnRenderer.drawShape(parentNode, element);

    if(element.type=='bpmn:UserTask'){
      element.height=50;
}
.....

is ok.
image

But when I change the type by setting

image

It’s moving up 15 pixels overall.

image

6

What should I do? Thank you

7

Hi Akhil, If U resolved the issue, can u send me your react code?