Why connection draw behind group?


#1

11

I connected the connection using customRules,
but the connection is drawn behind the group.

What’s the problem with this?
Which part should I look at ??


#2

What element type are the white rectangles?


#3

That’s Bpmn:SubProcess


#4

There is two places you’d need to look into:

  • Ensure that the diagram is imported in the correct manner
  • Ensure that the connection is rendered / recognized in the correct order, cf. BpmnOrderingProvider that implements this for message flows (always rendered on top),.

I want to implement CustomRules
#5

Share an example of what you’re doing and we’ll be able to help you in a more focussed / efficient manner.


#6

i implemented

 var orders = [
    { type: 'bpmn:SubProcess', order: { level: 6 } },
    {
      type: 'bpmn:SequenceFlow',
      order: {
        level: 9,
        containers: [
          'bpmn:Participant',
          'bpmn:SubProcess',
          'bpmn:FlowElementsContainer'
        ]
      }
    },
    // handle DataAssociation(s) like message flows and render them always on top
    {
      type: 'bpmn:DataAssociation',
      order: {
        level: 9,
        containers: [
          'bpmn:Collaboration',
          'bpmn:Process'
        ]
      }
    },
    {
      type: 'bpmn:MessageFlow', order: {
        level: 9,
        containers: [ 'bpmn:Collaboration' ]
      }
    },
    {
      type: 'bpmn:Association',
      order: {
        level: 6,
        containers: [
          'bpmn:Participant',
          'bpmn:FlowElementsContainer',
          'bpmn:Collaboration'
        ]
      }
    },
    { type: 'bpmn:BoundaryEvent', order: { level: 8 } },
    { type: 'bpmn:FlowElement', order: { level: 5 } },
    { type: 'bpmn:Participant', order: { level: -2 } },
    { type: 'bpmn:Lane', order: { level: -1 } }
  ];

‘bpmn:SequenceFlow’ is higher level than bpmn:SubProcess.
but drawn behind ‘bpmn:SubProcess’


#7

com-crop

It is now working like this.
Please give me a solution.
There is no change in BpmnOrderingProvider,


#8

To be more precise: Share a complete, runnable example of what you are doing and we are able to help you.


#9

<CustomRules.js>

function canConnectSequenceFlow(source, target) {
  return isSequenceFlowSource(source) &&
    isSequenceFlowTarget(target) &&
    // isSameScope(source, target) && // deleted
    !(is(source, 'bpmn:EventBasedGateway') && !isEventBasedTarget(target));
}

<CustomReplaceConnectionBehavior.js>

function fixConnection(connection) {

    var source = connection.source,
      target = connection.target,
      parent = connection.parent;

    // do not do anything if connection
    // is already deleted (may happen due to other
    // behaviors plugged-in before)
    if (!parent) {
      return;
    }

    var replacementType,
      remove;

    /**
     * Check if incoming or outgoing connections
     * can stay or could be substituted with an
     * appropriate replacement.
     *
     * This holds true for SequenceFlow <> MessageFlow.
     */

    if (is(connection, 'bpmn:SequenceFlow')) {
      if (!customRules.canConnectSequenceFlow(source, target)) {
        // remove = true;
      }

      if (customRules.canConnectMessageFlow(source, target)) {
        replacementType = 'bpmn:MessageFlow';
      }
    }

    // transform message flows into sequence flows, if possible

    if (is(connection, 'bpmn:MessageFlow')) {

      if (!customRules.canConnectMessageFlow(source, target)) {
        remove = true;
      }

      if (customRules.canConnectSequenceFlow(source, target)) {
        replacementType = 'bpmn:SequenceFlow';
      }
    }

    if (is(connection, 'bpmn:Association') && !bpmnRules.canConnectAssociation(source, target)) {
      remove = true;
    }


    // remove invalid connection, // deleted
    // unless it has been removed already
    // if (remove) {
    //   modeling.removeConnection(connection);
    // }

    // replace SequenceFlow <> MessageFlow

    // if (replacementType) { // deleted
    //   modeling.connect(source, target, {
    //     type: replacementType,
    //     waypoints: connection.waypoints.slice()
    //   });
    // }
  }

and, white rectangle is ‘Bpmn:SubProcess’, blue rectangle is ‘Bpmn:Task’.
and connection is ‘Bpmn:SequenceFlow’.
and other source is same