Solution to extend the distance and length of sequence flow when creating an element in the context pad

[PLPL]

I’m looking for a solution to extend the default distance and length of the sequence flow when creating an element in the context pad. If someone has done something similar to this, please point me in the right direction. Below is my code structure. Thank you

import { i18nKey } from 'src/locales/i18n';
import {
  TYPES_APPROVAL,
  TYPES_SUBMISSION,
  TYPES_FINAL_APPROVAL,
  TYPES_FORWARD_SUB_PROCESS
} from './custom-palette';
import { convertFirstLetterToLowerCase } from 'src/helpers/common.utils';

export default class CustomContextPad {
  constructor(
    bpmnFactory,
    config,
    contextPad,
    create,
    elementFactory,
    injector,
    translate,
    eventBus
  ) {
    this.bpmnFactory = bpmnFactory;
    this.create = create;
    this.elementFactory = elementFactory;
    this.translate = translate;
    this.eventBus = eventBus;
    if (config.autoPlace !== false) {
      this.autoPlace = injector.get('autoPlace', false);
    }
    contextPad.registerProvider(this);
  }

  getContextPadEntries(element) {
    const { translate, autoPlace, bpmnFactory, create, elementFactory } = this;
    return function (entries) {
      const appendServiceTask = (types, autoPlaceFlag) => (event) => {
        const businessObject = bpmnFactory.create(`custom:${types}`);

        businessObject.name = translate(
          i18nKey.process.design.properties.name[convertFirstLetterToLowerCase(types)]
        );

        const shape = elementFactory.createShape({
          type: `custom:${types}`,
          businessObject
        });

        if (autoPlaceFlag && autoPlace) {
          autoPlace.append(element, shape);
        } else {
          create.start(event, shape, element);
        }
      };

      const contextPadEntries = {
        delete: {
          ...entries['delete'],
          title: translate(i18nKey.process.design.properties.name.deleteEvent)
        }
      };

      if (entries?.['append.end-event']) {
        contextPadEntries['append.end-event'] = {
          ...entries['append.end-event'],
          title: translate(i18nKey.process.design.properties.name.endEvent)
        };
        contextPadEntries['connect'] = {
          ...entries['connect'],
          title: translate(i18nKey.process.design.properties.name.connectEvent)
        };
        // contextPadEntries['append.gateway'] = entries['append.gateway'];
        contextPadEntries['append.editor'] = {
          group: 'activity',
          className: 'bpmn-icon-editor-context-pad',
          title: translate(i18nKey.process.design.properties.name.submission),
          action: {
            dragstart: appendServiceTask(TYPES_SUBMISSION, false),
            click: appendServiceTask(TYPES_SUBMISSION, true)
          }
        };

        contextPadEntries['append.advisor-at-the-deparment'] = {
          group: 'activity',
          className: 'bpmn-icon-advisor-context-pad',
          title: translate(i18nKey.process.design.properties.name.approval),
          action: {
            dragstart: appendServiceTask(TYPES_APPROVAL, false),
            click: appendServiceTask(TYPES_APPROVAL, true)
          }
        };

        contextPadEntries['append.approve'] = {
          group: 'activity',
          className: 'bpmn-icon-approve-context-pad',
          title: translate(i18nKey.process.design.properties.name.finalApproval),
          action: {
            dragstart: appendServiceTask(TYPES_FINAL_APPROVAL, false),
            click: appendServiceTask(TYPES_FINAL_APPROVAL, true)
          }
        };

        contextPadEntries['append.process-connection'] = {
          group: 'activity',
          className: 'bpmn-icon-process-connect-context-pad',
          title: translate(i18nKey.process.design.properties.name.forwardSubProcess),
          action: {
            dragstart: appendServiceTask(TYPES_FORWARD_SUB_PROCESS, false),
            click: appendServiceTask(TYPES_FORWARD_SUB_PROCESS, true)
          }
        };
      }

      return contextPadEntries;
    };
  }
}

CustomContextPad.$inject = [
  'bpmnFactory',
  'config',
  'contextPad',
  'create',
  'elementFactory',
  'injector',
  'translate',
  'eventBus'
];

import CustomContextPad from './custom-context-pad';
import CustomPalette from './custom-palette';
import CustomRenderer from './custom-renderer';

export default {
  __init__: ['customContextPad', 'customPalette', 'customRenderer'],
  customContextPad: ['type', CustomContextPad],
  customPalette: ['type', CustomPalette],
  customRenderer: ['type', CustomRenderer]
};

[philippfromme]

The AutoPlace feature is responsible for this behavior. You can add an event listener to override the position:

eventBus.on('autoPlace', function(context) {
    var shape = context.shape,
        source = context.source;

    return getNewShapePosition(source, shape);
  });

You can have a look at bpmn-js’s BpmnAutoPlaceUtil and base your custom implementation on that. There is currently no way to only customize the distance.

[PLPL]

I have resolved my issue. Thank you very much for your excellent support.