Export custom-components/images

Developers
1

I’m not able to save my custom components with their custom image, where am I going wrong, any help is appreciated.
Thanks in advance.
See excerpts from the code:

ngAfterContentInit(): void {
    this.modeler = new BpmnModeler({
      container: this.el.nativeElement,
      propertiesPanel: {
        parent: '#js-properties-panel'
      },
      additionalModules: [
        customModule,
        minimapModule,
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        customPropertiesProvider,
        diagramProps,

      ],
      moddleExtensions: {
        config: propertiesPanelConfig,
        tasksdoa: customComponentExtension
      }


    });
    this.modeler.attachTo(this.el.nativeElement);
    this.modeler.on('import.done', (event: any) => {
      if (!event.error) {
        (this.modeler.get('canvas') as any)
      }
    });
    setBpmnModelingInstance(this.modeler);
    setSiaService(this.adutoraService);
    this.loadUrl(this.url);
  }


{
  "name": "paletteConfig",
  "prefix": "tasksdoa",
  "uri": "http://config/custom-component-config",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "BewitchedStartEvent",
      "extends": [
        "bpmn:Task"
      ],
      "properties": [
        {
          "name": "suitable",
          "isAttr": true,
          "type": "Float"
        },
        {
          "name": "image",
          "isAttr": true,
          "type": "svg"
        }
       
      ]
    }
  ]
}



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

    this.bpmnRenderer = bpmnRenderer;
  }

  canRender(element) {
    console.log('canRender ' + element.type)
    // ignore labels
    return !element.labelTarget;
  }

  drawShape(parentNode, element) {
    console.log('drawShape ' + element.type)
    const shape = this.bpmnRenderer.drawShape(parentNode, element);

    const suitabilityScore = this.getSuitabilityScore(element);

    if (!isNil(suitabilityScore)) {
      console.log('entrooou ' + suitabilityScore)
      const color = this.getColor(suitabilityScore);
      const image = this.getCustomImage(suitabilityScore);

      const rect = drawRect(parentNode, 50, 20, TASK_BORDER_RADIUS, color);
      svgAttr(rect, {
        transform: 'translate(-20, -10)'
      });

      const img = svgCreate('image', {
        x: 0,
        y: 0,
        width: element.width,
        height: element.height,
        href: image,
      });
      svgAppend(parentNode, img);

      const text = svgCreate('text');

      svgAttr(text, {
        fill: '#fff',
        transform: 'translate(-15, 5)'
      });

      svgClasses(text).add('djs-label');

      svgAppend(text, document.createTextNode(suitabilityScore));

      svgAppend(parentNode, text);
    }
   /* Coloca fundo nos labels
    if (element.type === 'bpmn:TextAnnotation') {
      const rect = svgCreate('rect');

      svgAttr(rect, {
        width: element.width,
        height: element.height,
        fill: 'white' // Altere para a cor de fundo desejada
      });

      svgAppend(parentNode, rect);
    }*/
    return shape;
  } 

  getShapePath(shape) {
    console.log('getShapePath ')
    if (is(shape, 'bpmn:Task')) {
      return getRoundRectPath(shape, TASK_BORDER_RADIUS);
    }

    return this.bpmnRenderer.getShapePath(shape);
  }

  getSuitabilityScore(element) {
    console.log('getSuitabilityScore ' + element.type)
    const businessObject = getBusinessObject(element);

    const { suitable } = businessObject;

    return Number.isFinite(suitable) ? suitable : null;
  }

  getColor(suitabilityScore) {
    console.log('getColor ' + suitabilityScore)
    if (suitabilityScore > 75) {
      return COLOR_GREEN;
    } else if (suitabilityScore > 25) {
      return COLOR_YELLOW;
    }

    return COLOR_RED;
  }

 /*  getCustomImage(suitabilityScore) {
    console.log('getCustomImagem ' + suitabilityScore)
    if (suitabilityScore > 75) {
      return Reservatorio.dataURL;
    } else if (suitabilityScore > 25) {
      return UT.dataURL;
    }

    return Captacao.dataURL;
  } */

  getCustomImage(suitabilityScore) {
    
    if (suitabilityScore == 100) {
      return Reservatorio.dataURL;
    } else if (suitabilityScore == 25) {
      return Captacao.dataURL;
    } else if (suitabilityScore == 15) {
      return Poco.dataURL;
    }
    else if (suitabilityScore == 5) {
      return Rio.dataURL;
    }
    else if (suitabilityScore == 50) {
      return UT.dataURL;
    }

    // return Captacao.dataURL;
  }





}

CustomRenderer.$inject = [ 'eventBus', 'bpmnRenderer' ];

// helpers //////////

// copied from https://github.com/bpmn-io/bpmn-js/blob/master/lib/draw/BpmnRenderer.js
function drawRect(parentNode, width, height, borderRadius, color) {
  const rect = svgCreate('rect');

  svgAttr(rect, {
    width: width,
    height: height,
    rx: borderRadius,
    ry: borderRadius,
    stroke: color,
    strokeWidth: 2,
    fill: color
  });

  svgAppend(parentNode, rect);

  return rect;
2

I’m not able to save my custom components with their custom image, where am I going wrong, any help is appreciated.

What exactly do you try to do? What is your expected outcome, what is actually happening?