Editable text/label

Developers Modeler
1

I’m trying to make the text of this svg component editable, but it never allows me to edit it, I’ve already tried several approaches, does anyone have any tips, follow my code:

import BaseRenderer from “diagram-js/lib/draw/BaseRenderer”;

import { append as svgAppend, attr as svgAttr, classes as svgClasses, create as svgCreate } from “tiny-svg”;

import { getRoundRectPath } from “bpmn-js/lib/draw/BpmnRenderUtil”;

import { getBusinessObject, is } from “bpmn-js/lib/util/ModelUtil”;

import { isNil } from “min-dash”;
import { Captacao, Poco, Reservatorio, Rio, UT } from “./Images”;

const HIGH_PRIORITY = 1500,
TASK_BORDER_RADIUS = 2,
COLOR_GREEN = ‘#52B415’,
COLOR_YELLOW = ‘#ffc800’,
COLOR_RED = ‘#cc0000’;

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);
}

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 == 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 bpmn-js/lib/draw/BpmnRenderer.js at main · bpmn-io/bpmn-js · GitHub
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

The code snippet you posted is not formatted correctly. To share code examples that illustrate your problem, please adhere to the following rules:

  • Do not post screenshots of your code
  • Focus your snippets on the few lines that matter for the topic at hand
  • Format your code

Please update your post according to these rules. We may not be able to help you otherwise. In extreme cases we may also close your topic if we regard it as spam.

Hint: To share complete setups, create and link a CodeSandbox. This way, we can inspect the problem at hand in action and, thus, can help you in a timely and more effective manner.

Thanks :heart:

2 Likes