Name of TextAnnotation resize eventhandler

Users
1

I made it possible to resize the external label of a StartEvent, but the text in it stays wrapped at the same characters even when I resize(make it bigger) the box of the label.
Now I see this is not the case for TextAnnotations. When I resize an annototation the text follows the size of the box.
If you think you support this via a feature request I can file one, but if not then please help me and point me to the right direction. Where I can find the handler for the TextAnnotation resize event?
Thank you!

2

The name of the event is directEditing.resize.

Can you show a screenshot of the behavior you’re describing?

3

Hey Philipp,
sure thing, please let me know if possible in a few days if you decide to support this in bpmn-io or not.
Thank you!
starteventlabelresize

4

Hello,

I also ran into this issue while using the ResizeAllRules module included in bpmn-js-nyan. I have a simple fix for it, details below. I know you’ve made a point about not supporting resizing in the past, so I’m not sure if this is considered a bug. If it is, let me know and I’ll make a pull request.

The text box sizes are hard-coded to 90x30 in couple spots. I just changed it to use the element’s dimensions.

In bpmn-js/lib/draw/TextRenderer.js:

this.getExternalLabelBounds = function(bounds, text) {

    var layoutedDimensions = textUtil.getDimensions(text, {
      box: {
        width: !bounds.width ? 90 : bounds.width, //was hardcoded to 90
        height: !bounds.height ? 30 : bounds.height, //was hardcoded to 30
        x: bounds.width / 2 + bounds.x,
        y: bounds.height / 2 + bounds.y
      },
      style: externalStyle
    });

    // resize label shape to fit label text
    return {
      x: Math.round(bounds.x + bounds.width / 2 - layoutedDimensions.width / 2),
      y: Math.round(bounds.y),
      width: Math.ceil(layoutedDimensions.width),
      height: Math.ceil(layoutedDimensions.height)
    };

  };

In bpmn-js/lib/draw/BpmnRenderer.js:

  function renderExternalLabel(parentGfx, element) {
    var semantic = getSemantic(element);
    var box = {
      width: !element.width ? 90 : element.width, //was hardcoded to 90
      height: !element.height ? 30 : element.height, //was hardcoded to 30
      x: element.width / 2 + element.x,
      y: element.height / 2 + element.y
    };

Thanks,
John

1 Like
5

Hi @jclaxton

Big thanks for your contribution! I’m not sure whether this kind of resizing would be intended behavior. I really want to encourage you to open an pr in bpmn-js and describe the expected behavior so we can discuss it.