How do I get the link halo location to be right above the mouse click?

[james-ep01]

Introduction

The link halo location changes depending on the paper size. Below is the sauce I made. I don't know the coordinates of the ebt and the coordinates of link clicks such as x and y.

this.paper.on('link:pointerclick', function(linkView,evt,x,y) {
joint.ui.Halo.clear(linkView.paper);
var coodinate = {x: x, y:y , width: 20,height: 20 };
createLinkHalo( linkView , coodinate );
});

//...............
createLinkHalo = function (cellView , coodinate ) {
const cell = cellView.model;
const options = {
cellView: cellView,
type: 'toolbar',
bbox: coodinate,
};
const halo = new joint.ui.Halo(options);
halo.render();
};

This is the location image of the first working halo.

If i change the size of the paper, the position of the halo is changed to a strange place.

What I want is that even if the screen scale changes, I want the halo to come out just above the click position of Link.

Thank you.

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

I expects paper coordinates here. You can also define it as function, so it reevaluated when the paper transformation changes.

new Halo({
      bbox: () => paper.localToPaperRect({ x, y , width: 20, height: 20 }),
});

Note: this should be defined in the model coordinates (we will change this in the next major version).

[james-ep01]

It's working well, thank you.
It's so hard. There's so much I can't do without you teaching me.

[kumilingus]

Well, you are welcome. There is definitely room for improvement in our documentation.