How to remove dots on connection lines that cause them to be bent?

[qahar]

Hello,
I would like to remove the points (line breakers) the let users have non straight lines as illustrated below.

I would like only straight lines for connecting models. I have read @philippfromme 's answer to extend BpmnLayouter. through this I know it’s possible to reform the lines . But what I am trying to do is remove points that let user to create a diagonal line in the first place.

Also disabling bendpoint feature doesn’t solve the issue because it takes away the users ability to change the line altogether.
is there a way to achieve this?
Thanks

[philippfromme]

So you want to allow creating straight lines only?

[qahar]

@philippfromme Yes, That’s what I am going for

[philippfromme]

Can you link to the answer you mentioned?

[qahar]

disable-connection-layouting-direct-lines
how-to-create-direct-lines-of-sequenceflow-by-default-when-connecting-elements-bpmn-diagram
These are the links of the two answers I have mentioned in my question. I appreciate your assistance.

[philippfromme]

Right, so you need to do 2 things:

1. Change the layout to always render straight lines
2. Disable the bend points feature

[LincolnJaxon]

Hi, I also need help in same scenario, I am trying to figure out for 4 days

[qahar]

I researched this problem a lot also. but wasn’t able to solve it. in the end our team decided to stop using bpmn-js and create our own solution. If you somehow find the solution please post it here. it may be useful for someone else.

[philippfromme]

I created an example that renders connections as straight lines: bpmn-js Simple Layout Example - CodeSandbox

Here’s what I did:

1. Change layout

That one was easy. I simply replaced the layout module with a simpler one that is part of diagram-js.

layouter: ["type", BaseLayouter]

2. Disable Segment Move

Disabling only parts of the bendpoints feature was tricky. We still want to be able to reconnect the start or end of a connection but not move segments or add bendpoints.

First I removed the UI:

.djs-bendpoint.floating,
.djs-segment-dragger {
  display: none !important;
}

Then I realized that the segment move feature cannot be disabled simply by overriding it with an empty module since other modules will try and use this module. So I replaced it with a module that does nothing:

connectionSegmentMove: ["value", { start() {} }],

3. Disable Bendpoint Move

This one was the hardest. The bendpoint move feature is currently implemented in a way that makes it hard to override methods. So I had to use a factory function that creates an instance of this module first and then overrides a method.

function createBendPointMove(
  injector,
  eventBus,
  canvas,
  dragging,
  rules,
  modeling
) {
  const bendpointMove = new BendpointMove(
    injector,
    eventBus,
    canvas,
    dragging,
    rules,
    modeling
  );

  const start = bendpointMove.start.bind(bendpointMove);

  bendpointMove.start = (event, connection, bendpointIndex, insert) => {
    if (insert) {
      return;
    }

    start(event, connection, bendpointIndex, insert);
  };

  return bendpointMove;
}

...

bendpointMove: [
  "factory",
  [
    "injector",
    "eventBus",
    "canvas",
    "dragging",
    "rules",
    "modeling",
    createBendPointMove
  ]
],

This way you can still reconnect the start or end of a connection but not add bendpoints.

Summary

All of your requirements can be implemented due to the flexibility of bpmn-js but sometimes it’s not as straight forward as it should be.