How to automatically connect two custom elements

[lhzxxy]

Hi,
I look at the demo custom-elements, and I want to connect two custom elements automatically when I click the first custom element like this:

This is part of the source code I added to CustomContextPadProvider.js:
But these two custom elements are not automatically connected. I think I miss part of the source code. How can I solve this problem? Thank you very much.

    function appendAction(type, className, title, options) {

      if (typeof title !== 'string') {
          options = title;
          title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
      }

      function appendStart(event, element) {

          var shape = elementFactory.createShape(assign({ type: type }, options));
          create.start(event, shape, element);
      }


      var append = autoPlace ? function(event, element) {
          var shape = elementFactory.createShape(assign({ type: type }, options));

          autoPlace.append(element, shape);
      } : appendStart;


      return {
          group: 'model',
          className: className,
          title: title,
          action: {
              dragstart: appendStart,
              click: append
          }
      };
  }

if (isAny(businessObject, [ 'custom:triangle', 'custom:circle'])) {
  assign(actions, {
    'connect': {
      group: 'connect',
      className: 'bpmn-icon-connection-multi',
      title: translate('Connect using custom connection'),
      action: {
        click: startConnect,
        dragstart: startConnect
      }
    },
      'append.custom:circle': appendAction(
          'custom:circle',
          'icon-custom-circle'
      )
  });
}

[philippfromme]

Have a look at CustomRules. They don’t allow connecting two custom elements. You can adjust these rules to your preferences.

[lhzxxy]

Thank you for your reply. When I modify CustomRules.js as follow, I can implement the function of the second gif, but I still need to connect them manually. What I want to achieve is the automatic connection shown in the third gif.

if (!isCustom(source) && !isCustom(target)) {
  return ;
}

if (isCustom(source)) {
  if (is(target, 'bpmn:Task')) {
    return { type: 'custom:connection' };
  } else {
    return { type: 'custom:connection' };
  }
} else if (isCustom(target)) {
  if (is(source, 'bpmn:Task')) {
    return { type: 'custom:connection' };
  } else {
    return { type: 'custom:connection' };
  }
}

Now, as shown in the first gif, when I click the option for the first custom element, the second custom element can be automatically generated, but they can not be automatically connected as shown in third gif.

[philippfromme]

Creating a new element using AutoPlace should create a connection as well. First of all you can simplify the rule to:

if (isCustom(source) || isCustom(target)) {
  return { type: 'custom:connection' };
}

Please try to debug AppendShapeHandler and check if it’s trying to connect the elements and why it doesn’t work.

[lhzxxy]

Finally, I found that when I modified function canConnect(source, target, connection) of BpmnRules.js, the custom element could implement the function of the third gif.

[philippfromme]

I’m sorry, but there’s a bug preventing your custom connect rule to be used when appending a shape: https://github.com/bpmn-io/bpmn-js/issues/933

In the meantime there’s no way of overriding the rules for creating connections in certain cases such as appending a shape.