Custom rules, move element lines and disappear

After customizing the rule, the drag element connection is lost?
image
After dragging an element
image
package.json

  "dependencies": {
    "bpmn-js": "^7.3.1",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },

image
CustomRules.js

import inherits from 'inherits'
import {
  is
} from 'bpmn-js/lib/util/ModelUtil';

import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider'

export default function CustomRules(eventBus, CustomRules) {
  RuleProvider.call(this, eventBus, CustomRules);
  this._CustomRules = CustomRules;
}

inherits(CustomRules, RuleProvider)

CustomRules.$inject = ['eventBus', 'bpmnRules'];

CustomRules.prototype.init = function () {

  function canConnect(source, target) {
    return { type: 'bpmn:SequenceFlow' };
  }

  this.addRule(['connection.create'], 1234, function (context) {
    var source = context.source,
      target = context.target,
      hints = context.hints || {},
    return canConnect(source, target);
  });
}

Online example

problem :

After connecting two elements, drag one element and the line disappears. Thank you for how to solve this problem!!!

As I’ve mentioned here the reason that the connection disappears is that a sequence flow is not allowed between data stores.

In between data stores only associations and data associations are allowed. What is not allowed is cleaned up upon modeling. That behavior is by design.

Consider using a bpmn:Association to connect anything with anything.