How do I connect the icon and the start event?

Developers Modeler
1

I don’t quite understand how I can combine 2 parts into one BPMN element. At the moment, I have only the icon displayed on the diagram, without the event circle.

Here is my code:
Append Custom Shape

    function appendCustomShapeStart() {
      return function(event) {
        const businessObject = bpmnFactory.create('bpmn:Event');

        const shape = elementFactory.createShape({
          type: 'bpmn:MultipleEventDefinition',
          businessObject: businessObject,
          stroke: '#000000',
          fill: '#FFF00'
        });
  
        create.start(event, shape); 
      }
    }

    return {
      'append.custom-shape':{
        group: 'model',
        className: 'bpmn-icon-start-event-multiple',
        title: translate('Standart multiple element'),
        action: {
          click: appendCustomShape(),
          dragstart: appendCustomShapeStart()
        }
      }
    };

BPMN Render

    'bpmn:ParallelMultipleEventDefinition': function(parentGfx, event) {
      var pathData = pathMap.getScaledPath('EVENT_PARALLEL_MULTIPLE', {
        xScaleFactor: 1.2,
        yScaleFactor: 1.2,
        containerWidth: event.width,
        containerHeight: event.height,
        position: {
          mx: 0.458,
          my: 0.194
        }
      });

      return drawPath(parentGfx, pathData, {
        strokeWidth: 1,
        fill: getStrokeColor(event, defaultStrokeColor),
        stroke: getStrokeColor(event, defaultStrokeColor)
      });
    }

Result
image

2

Have a look at how other elements (e.g. intermediate events) are rendered: https://github.com/bpmn-io/bpmn-js/blob/develop/lib/draw/BpmnRenderer.js#L831

3

@philippfromme The code looks the same, but the result is completely different. Maybe I’m drawing the element somehow wrong?

4

See my reply in one of your other topics about the same topic: Unknown type <bpmn:MultipleEventDefinition>