How to catch pointer position of the mouse when pressing the right button?

[rmnsfx]

Introduction

The documentation says there is an event to handle right mouse button clicks "contextmenu", this trigger is fired on a mousedown event. Is it possible to detect the movement of the pointer while pressing the right button? And also is it possible to detect a mouseup event for right button?

Steps to reproduce

No response

Restrictions & Constraints

No response

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

JointJS

[kumilingus]

See #2658 (comment).

It's possible. But before I provide you with a code, please describe your use-case. Thank you!

[rmnsfx]

The main use case is highlighting elements while right mouse button is pressing.

[kumilingus]

Do you mean you need to right click to highlight? Or does the user draw an area with the mouse (holding down the right button) and highlight all the elements in that area?

[rmnsfx]

draw an area with the mouse (holding down the right button) and highlight all the elements in that area

[kumilingus]

For now please use something similar to this:

paper.on('blank:contextmenu', (evt) => {

    joint.highlighters.mask.removeAll(paper, 'my-highlighter');

    const lasso = V('rect', {
        'fill': 'red',
        'fill-opacity': 0.2,
        'stroke': 'red'
    });
    lasso.appendTo(paper.viewport);

    const { x, y } = paper.clientToLocalPoint(evt.clientX, evt.clientY);
    const startX = x;
    const startY = y;

    function getBBox(evt) {
        const { x, y } = paper.clientToLocalPoint(evt.clientX, evt.clientY);
        return new g.Rect(startX, startY, (x - startX) || 1, (y - startY) || 1).normalize();
    }

    function onPointermove(evt) {
        lasso.attr(getBBox(evt).normalize().toJSON());
    }

    function onPointerup(evt) {

        paper.findViewsInArea(getBBox(evt)).forEach(view => {
            joint.highlighters.mask.add(view, 'root', 'my-highlighter');
        });

        lasso.remove();
        document.removeEventListener('pointermove', onPointermove);
        document.removeEventListener('pointerup', onPointerup);
    }

    document.addEventListener('pointermove', onPointermove);
    document.addEventListener('pointerup', onPointerup);

});