Custom start and stop icons issue on diagram loads

Developers Modeler
1

I customized start and stop icons in palette and renderer, when I drag and drop them, it works fine, but when I save and load diagram with start and stop, it shows no icon. What am I doing wrong?

Added actions from palette
Image 233

Save and load diagram
Image 234

CustomPalette.js

PaletteProvider.prototype.getPaletteEntries = function (element) {
  var actions = {},
    create = this._create,
    elementFactory = this._elementFactory;

  function createAction(type, group, className, title, options, url) {
    function createListener(event) {
      var shape = elementFactory.createShape(assign({ type: type }, options));
      console.log(type, url);
      shape.url = url;

      if (options) {
        shape.businessObject.di.isExpanded = options.isExpanded;
      }

      create.start(event, shape);
    }

    var shortType = type.replace(/^bpmn:/, '');

    return {
      group: group,
      className: className,
      imageUrl: url,
      title: title || 'Create ' + shortType,
      action: {
        dragstart: createListener,
        click: createListener,
      },
    };
  }

  assign(actions, {
    'create.start-event': createAction('bpmn:StartEvent', 'event', '', 'Start', null, '/assets/images/play-circle.svg'),
    'create.end-event': createAction('bpmn:EndEvent', 'event', '', 'Stop', null, '/assets/images/stop-circle.svg'),
  });

  return actions;
};

CustomRenderer.js

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

    this.bpmnRenderer = bpmnRenderer;
  }

  canRender(element) {
    return isAny(element, ['bpmn:StartEvent', 'bpmn:EndEvent']) && !element.labelTarget;
  }

  drawShape(parentNode, element) {
    var url = element.url;

    var iconSvg = svgCreate('image', {
      x: 0,
      y: 0,
      width: element.width,
      height: element.height,
      href: url,
    });

    svgAppend(parentNode, iconSvg);

    return iconSvg;
  }
}
2

Hi @kickercms, welcome to the forum!

How do you persist the image URL to your diagram? Did you create a custom meta-model for your extension? Otherwise, the renderer won’t be able to properly access the URL from an element.