Is it possible to only have the color picker available on bpmn:Task elements? See my current solution

[vesper8]

This is the code I came up with that hides the color picker on all elements except bpmn:Task. But it causes a micro-flicker. Is there a better way? If you remove the setTimeout below then it does not work.

export default function SelectiveColorPicker(modeler) {
  const eventBus = modeler.get('eventBus');

  // Intercept the display of the context pad
  eventBus.on('contextPad.create', function (event) {
    if (event.target.type !== 'bpmn:Task') {
      setTimeout(() => {
        const colorPickerEntry = event.pad.html.querySelector('[data-action="set-color"]');

        if (colorPickerEntry) {
          colorPickerEntry.style.display = 'none';
        }
      });
    }
  });
}

[philippfromme]

Your solution is a bit hacky since it’s relying on internals but it works, so…

The color picker currently isn’t configurable to only be enabled for certain element types so for the time being this is an okay solution. Feel free to open a feature request and possibly even contribute it to GitHub - bpmn-io/bpmn-js-color-picker: A simple color picker for your BPMN elements..

[Maliyah]

@vesper8

This is the code I came up with that hides the color picker on all elements except bpmn:Task. But it causes a micro-flicker. Is there a better way? If you remove the setTimeout below then it does not work.

export default function SelectiveColorPicker(modeler) {
  const eventBus = modeler.get('eventBus');

  // Intercept the display of the context pad
  eventBus.on('contextPad.create', function (event) {
    if (event.target.type !== 'bpmn:Task') {
      setTimeout(() => {
        const colorPickerEntry = event.pad.html.querySelector('[data-action="set-color"]');

        if (colorPickerEntry) {
          colorPickerEntry.style.display = 'none';
        }
      });
    }
  });
}

The setTimeout function is typically used to introduce a delay before executing a piece of code. In this case, you are using it to delay the hiding of the color picker entry. However, relying on timeouts can sometimes lead to undesired side effects, such as micro-flickering.