Replacing graphs

Developers
1

Now that I have a custom svg image, how do I replace the default graphic element svg image in bpmnjs without affecting the label display
image

2

I solved the problem, I created a new svg with tiny-svg and appended it to the graphics context. Then we override label with the help of svg’s foreignObject. like this:

const addLabel = (parentNode: SVGElement, element: Shape) => {
  if (element?.businessObject?.name) {
    const text = svgCreate('foreignObject', {
      x: 0,
      y: 0,
      width: '100px',
      height: '80px',
      'font-size': 12,
      fill: '#000'
    }) as SVGElement
    const div = document.createElement('div')
    div.innerHTML = element.businessObject.name
    div.setAttribute('class', 'bpmn-task-label')
    svgAppend(text, div)
    svgAppend(parentNode, text)
  }
}

const typeRender: { [key: string]: Function } = {
  'bpmn:ServiceTask': (element: Shape) => {
      const g = svgCreate('g')
      innerSVG(g, `
        <rect stroke-width="1.9544" stroke="#22242A" fill="white" rx="9.93485" height="80" width="100" y="1" x="1"/>
        <g>
         <path fill="#22242A" d="m20.4553,19.4556l1.2668,0l0,1.2668l-12.66741,0l0,-1.2668l1.26671,0l0,-4.4336c0,-2.7984 2.2686,-5.06692 5.067,-5.06692c2.7984,0 5.0669,2.26852 5.0669,5.06692l0,4.4336zm-1.2667,0l0,-4.4336c0,-2.0988 -1.7014,-3.8002 -3.8002,-3.8002c-2.0988,0 -3.8002,1.7014 -3.8002,3.8002l0,4.4336l7.6004,0zm-5.7003,2.5335l3.8002,0l0,1.2667l-3.8002,0l0,-1.2667z"/>
        </g>
      `)
      return g
  }
}

const ShapeRender = (parentNode: any, element: Shape) => {
  const type = element.type
  if (typeRender[type]) {
    const render = typeRender[type]
    const shape = render(element)
    svgAppend(parentNode, shape)
    addLabel(parentNode, element)
    return shape
  } else {
    return false
  }
}

export default function CustomRenderer(eventBus, styles, bpmnRenderer) { // 继承BaseRenderer
  BaseRenderer.call(this, eventBus, 2000)

  this.drawCustomElements = function (parentNode, element) {
    const shape = ShapeRender(parentNode, element)
    if (shape) {
      return shape
    } else {
      return bpmnRenderer.drawShape(parentNode, element)
    }
  }
}
3

In the preceding code, you add a div to foreignObject that has the same width and height as shape. I think it’s convenient to use foreignObject because it allows me to use the full set of css properties in svg, which makes it easier to deal with issues like long text.

4

So you only want to change the icon?

6

Yes, is there a more concise way

7

A custom renderer is the way to go. What exactly are you struggling with?

8

I’ve created a custom renderer, but the new shape will look similar to the original shape, and in later iterations it could be any shape

9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.