Automatic connection between the elements

Developers Modeler
1

Hello! When I overridden, the context panel provider, the automatic connection between the elements, stopped working. What needs to be done to make it work? Thanks for answers!

2

Hi @kirill.voyshnarovich,

Can you please share the code of your custom ContextPadProvider? It will help us to understand the problem.

3

import ContextPadProvider from ‘bpmn-js/lib/features/context-pad/ContextPadProvider.js’;

import inherits from ‘inherits’;

export default class CustomContextPad{

constructor(bpmnFactory, config, contextPad, create, elementFactory, injector, translate, modeling) {
this.bpmnFactory = bpmnFactory;
this.create = create;
this.elementFactory = elementFactory;
this.translate = translate;
this._modeling = modeling;
if (config.autoPlace !== false) {
this.autoPlace = injector.get(‘autoPlace’, false);
}

contextPad.registerProvider(this);

}

removeElement(e) {
this.modeling.removeElements([ element ]);
}

getContextPadEntries(element) {
const {
autoPlace,
bpmnFactory,
create,
elementFactory,
translate,
modeling = this._modeling,
} = this;

function appendTask(type, typeAttr = type){
  const bpmnType = type;

  return function(event, element) {
    
    const type = bpmnType;

    if (autoPlace) {
      const businessObject = bpmnFactory.create(type);
      
      businessObject.typeAttr = typeAttr;

      const shape = elementFactory.createShape({
        type: type,
        businessObject: businessObject
      });

      autoPlace.append(element, shape);
    } else {
      appendTaskStart(event, element);
    }
  }
}

function appendTaskStart(type, typeAttr = type){
  const bpmnType = type;
  return function(event, element){
    const type = bpmnType;

    businessObject.typeAttr = typeAttr;

    const businessObject = bpmnFactory.create(type);

    const shape = elementFactory.createShape({
      type: type,
      businessObject: businessObject
    });

    create.start(event, shape, element);
  }
}

function removeElement(e) {
  modeling.removeElements([ element ]);
}

function createTimerEvent(attr) {
  return function(event, element) {

    const target = attr;

    businessObject.typeAttr = typeAttr;

    if (autoPlace) {
      const businessObject = bpmnFactory.create(target['type'], target['eventDefinitionType']);
      const shape = elementFactory.createShape({
        type: attr['type'],
        businessObject: businessObject,

      });

      autoPlace.append(element, shape);
    } else {
      appendTaskStart(event, element);
    }
  }
}

return {
  'append.start-event': {
    group: 'events',
    className: 'bpmn-icon-start-event-none',
    title: translate('Create start event'),
    action: {
      click: appendTask('bpmn:StartEvent'),
      dragstart: appendTaskStart('bpmn:StartEvent')
    }
  },
  'append.end-event': {
    group:'events',
    className: 'bpmn-icon-end-event-none',
    title: translate('Create end event'),
    action: {
      click: appendTask('bpmn:EndEvent'),
      dragstart: appendTaskStart('bpmn:EndEvent')
    }
  },
  'append.timer-start': {
    group:'events',
    className:'bpmn-icon-start-event-timer',
    title: translate('Start timer'),
    action: {
      click: createTimerEvent({
        type: 'bpmn:StartEvent',
        eventDefinitionType: 'bpmn:TimerEventDefinition'
      })
    }
  },
  'append.task': {
    group:'model',
    className:'bpmn-icon-task',
    title: translate('Create task'),
    action: {
      click: appendTask('bpmn:Task'),
      dragstart: appendTaskStart('bpmn:Task')
    }
  },
  'append.gateway-two-way': {
    group:'model',
    className:'bpmn-icon-gateway-xor',
    title: translate('Create gateway two way'),
    action: {
      click: appendTask('bpmn:ExclusiveGateway', 'gateway-two-way'),
      dragstart: appendTaskStart('bpmn:ExclusiveGateway')
    }
  },
  'append.gateway-three-way': {
    group:'model',
    className:'bpmn-icon-gateway-xor',
    title: translate('Create gateway three way'),
    action: {
      click: appendTask('bpmn:ExclusiveGateway', 'gateway-three-way'),
      dragstart: appendTaskStart('bpmn:ExclusiveGateway')
    }
  },
  'append.text-annotation': {
    group:'model',
    className:'bpmn-icon-text-annotation',
    title: translate('Create text annotation'),
    action: {
      click: appendTask('bpmn:TextAnnotation'),
      dragstart: appendTaskStart('bpmn:TextAnnotation')
    }
  },
  'delete': {
    group: 'edit',
    className: 'bpmn-icon-trash',
    title: translate('Remove'),
    action: {
      click: removeElement,
    }
  }
};

}
}

CustomContextPad.$inject = [
‘bpmnFactory’,
‘config’,
‘contextPad’,
‘create’,
‘elementFactory’,
‘injector’,
‘translate’,
‘modeling’
];

1 Like
4

Please make sure to format your code samples: https://help.github.com/en/articles/creating-and-highlighting-code-blocks