Disable double click default events from Modeler

I’m using Bpmn modeler with React for a project and trying to disable dblclick default event i.e edit label. Below are the current node types I’m supporting.

export const BPMN_NODE_TYPES = {
  TASK: 'bpmn:Task',
  START_EVENT: 'bpmn:StartEvent',
  END_EVENT: 'bpmn:EndEvent',
  SEQUENCE_FLOW: 'bpmn:SequenceFlow',
  SUB_TASK: 'bpmn:SubProcess',
  GATEWAY: 'bpmn:ExclusiveGateway',
};

Here is my eventBus. I have already tried e.stopPropagation() as you can see in below code.

  const handleEventBus = useCallback(() => {
    const eventBus = modelerRef.current?.get('eventBus');

    eventBus.on('element.dblclick', (e) => {
      setCurrentElementEvent(e);
      if (is(e.element, [BPMN_NODE_TYPES.SEQUENCE_FLOW])) {
        setSourceID(e.element.businessObject.sourceRef.$attrs.value);
      }
      openModalBasedOnBPMNNodeType(e);
      e.stopPropagation();
    });
  }, [modelerRef]);

So, the event behaviour is Select Node → Double Click → Opens Up a Modal → Select value from modals dropdown → Reflects selected value as Node label. The flow is already functional the only problem is label is still manually editable by default modeler functionality.

openModalBasedOnBPMNNodeType() = Its a function with switch that open different modal based on NodeType

:x: Scenario-
Select Sequence → double click → modal opens → selects value from dropdown → sets value as sequence label. Now, if I dont dblclick sequence but its label instead than the label value is editable by default dblclick event of modeler this break the purpose of the expect behaviour.

I did not add event listener priority that seems to be the solution

  const handleEventBus = useCallback(() => {
    const eventBus = modelerRef.current?.get('eventBus');

    eventBus.on('element.dblclick', 1500 , (e) => {
      setCurrentElementEvent(e);
      if (is(e.element, [BPMN_NODE_TYPES.SEQUENCE_FLOW])) {
        setSourceID(e.element.businessObject.sourceRef.$attrs.value);
      }
      openModalBasedOnBPMNNodeType(e);
      e.stopPropagation();
    });
  }, [modelerRef]);
1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.