Change font size

Hello!

Can anyone provide an example of adding an extra option to the main menu (Camunda Modeler).

I want to add a drop-list that will resize the text of BPMN elements, like in Word.

As an example, I want to take a color change mechanism. But I can’t find a place in the source yet.

Or can you give some examples vith hotkeys, like Shift+ and Shift-, which can resize text.

Maybe someone has already added this block for themselves?

Waiting for answer,
Denis

So you are only referring to the font size in the actual diagram, not in the surrounding application?

@philippfromme I would like to resize the text for each element right in the diagram

The font size of the diagram itself can be customized:

const bpmnJS = new BpmnJS({
  container,
  keyboard: {
    bindTo: document
  },
  textRenderer: {
    defaultStyle: {
      fontSize: "16px"
    },
    externalStyle: {
      fontSize: "16px"
    }
  }
});

CodeSandbox: https://codesandbox.io/s/bpmn-js-custom-font-size-example-6ppxc

@philippfromme But how can I add a custom block in main menu like a brush that paints blocks and changes the XML structure. Something like that is needed for the text size.

This is also a very cool thing, thanks

You’d need a Camunda Modeler plugin that adds a button to the toolbar and a way of changing the font size during runtime. That would mean changing the configuration of the text renderer during runtime and re-rendering all elements that have a label.

All this code I can get and use?

It works with fontSize. However, the labels dosen’t resize.
I’ve read that the labels should automatically resizing to fit their text.
How can I also change the label size?
I only want to set the default size bigger. No need of resizing them in the application.

Screen Shot 2022-08-30 at 16.06.04