The connect.start method failed to specify connectionStart

Developers
1

Hi. I custom the contextPadProvider and specific the connection start. But when fire the event “connect.end”, the connectionStart is not the location I settled, the connectionStart seems like still the mid of source shape. I wonder if I missed anything?

getContextPadEntries(element) {
		const { translate, connect, modeling } = this;
		const startConnect = (event, element) => {
		    const connectStartMid = getMid(element);
		    connect.start(event, element, { x: connectStartMid.x - 75, y: connectStartMid.y});
		};
        const connectActionLeft = {
			group: 'model',
			className: 'connection-multi',
			title: translate('Connect using DataInputAssociation'),
			action: {
				click: startConnect,
				dragstart: startConnect,
			},
		};
        return {connectLeft: connectActionLeft}
}

I want to achieve it like the example of x6. The user can start connect via drag from the specific link circle. I am already achieve the styles by change the style sheet.
image

This is the original code of connect.start().

/**
   * Start connect operation.
   *
   * @param {DOMEvent} event
   * @param {djs.model.Base} start
   * @param {Point} [connectionStart]
   * @param {boolean} [autoActivate=false]
   */
  this.start = function(event, start, connectionStart, autoActivate) {
    if (!isObject(connectionStart)) {
      autoActivate = connectionStart;
      connectionStart = getMid(start);
    }

    dragging.init(event, 'connect', {
      autoActivate: autoActivate,
      data: {
        shape: start,
        context: {
          start: start,
          connectionStart: connectionStart
        }
      }
    });
  };

Thank you for your help!