Why connection drawn behind the group/subprocess


#1

com-crop

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

<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


#2

Please provide a fully functional version of what you’re trying to achieve using our modeler starter or this jsfiddle setup as a starting point.

A running example allows us to dive into your issue and help you out.


#3

ProcessModeler.js

export class ProcessModeler {
  constructor(option) {
    let self = this, options;
    let addModules =  {
      additionalModules: [
        {
        __init__: [ 'labelEditingPreview', 'customRules'],
        labelEditingPreview: [ 'type', LabelEditingPreview ],
        customRules: [ 'type', CustomRules ],
        zoomScroll: [ 'type', zoomScroll ]
      }
      ]};

    if (option.useMinimap) {
      addModules.additionalModules.push(minimapModule);
    }

    options = $.extend(true, {}, option, addModules);

    self.modeler = new CustomModeler(options);

    self.emptyXml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
      '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
      '  <bpmn:process id="Process_1" isExecutable="false" />\n' +
      '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
      '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1" />\n' +
      '  </bpmndi:BPMNDiagram>\n' +
      '</bpmn:definitions>\n';

    self.start(self.emptyXml);
  }

  start(bpmnXML) {
    let self = this;
    self._openDiagram(bpmnXML);
  }

  _openDiagram() {
    let self = this;
    let modeler = self.modeler;
    modeler.createDiagram(function (err) {
        if (err) {
          return console.error('could not import BPMN 2.0 diagram', err);
        }
      }
    )
  }
}

bpmn-js version is 2.5.2
diagram-js version is 2.6.1