Search code examples
javascriptpluginswindowcapturefigma

Can I capture the mouse pointer in a Figma plugin window?


I have some code that I've used to create controls for a long time, and it works well, in that it properly captures and releases the mouse (at least in chrome).

function createSlider(slider, width, height)
{
    slider.width  = width;
    slider.height = height;

    slider.style.display = 'inline';

    //

    slider.onchange = new Event('onchange');

    //

    slider.addEventListener('mousedown', function(e)
    {
        var e = window.event || e;

        if (e.button == 0)
        {
            e.preventDefault();
     
            if (slider.setCapture)
                slider.setCapture();
            
            slider.mouseDown0 = true;
            slider.sx         = e.clientX;
            slider.sv         = slider.value;
        }
    });

    slider.addEventListener('losecapture', function()
    {
        slider.mouseDown0 = false;
    });

    document.addEventListener('mouseup', function(e)
    {
        var e = window.event || e;

        if (e.button == 0 && slider.mouseDown0)
            slider.mouseDown0 = false;
    }, true);

    (slider.setCapture ? slider : document).addEventListener('mousemove', function(e)
    {
        if (slider.mouseDown0)
        {
            var dx = slider.sx - e.clientX;
            var adaptive = 10 * Math.pow(Math.abs(dx), slider.acc);

            slider.value = Math.min(Math.max(slider.min, slider.sv - dx*slider.scale*adaptive), slider.max);
            //TODO: if (log) do log scaling
            slider.paint();
            slider.dispatchEvent(slider.onchange);
        }
    }, true);

    slider.onmousewheel = function(e)
    {
        e.preventDefault();

        var s = e.target;

        s.value = Math.min(Math.max(s.min, s.value + (e.wheelDeltaY > 0 ? 1 : -1) * s.scale), s.max);
        s.dispatchEvent(s.onchange);
        s.paint();
    };

    slider.paint = function()
    {
        //...
    };

    //

    slider.paint();
}

But when I tried using this code inside of a Figma plugin window, it loses mouse capture as soon as the mouse leaves the window. Is there something that I need to adjust for this to work?


Solution

  • Apparently you cannot, but you can use pointer lock to solve the issue for some situations.