Stalling mouse move events with lower frame rate

Hi everybody,

I am working on a browser interface to control audio hardware. The page itself should have the lowest possible impact on the computer's performance, so we manually lowered the render framerate by setting app.ticker.maxFPS and app.ticker.minFPS.

Within the app, we draw graphics using Graphics's bezierCurveTo and such, so we can't use readily shaped graphics like rects. We want those graphics to change their color and the mouse to change its shape when hovering them. But seemingly, whenever the mouse is moved too quickly over the graphic's area, the mouse events come too quickliy for the shape to be rendered completely, this only happens if maxFPS and minFPS are set manually. However, the mouse pointer constantly flickers changing its shape from the arrow to the hand and back while it moves across the graphic's area. Whenever the mouse movement is stopped, the rendering will take place accordingly and the expected behaviour happens: The graphic changes its color. Note, that this only happens while the mouse moves.

I tried setting app.renderer.plugins.interaction.interactionFrequency to avoid the mouse events being fired too often, but it only makes the behaviour growing less predictable.

Is there any way to actually slow down the mouse event frequency? Why does this only happen if I draw shapes using connected lines? Can you think of any way to solve this issue?

Thanks and best wishes,

AnStef

Feel free to test for yourself:

import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: 100,
    height: 100,
});

document.body.appendChild(app.view);

app.ticker.maxFPS = 15;
app.ticker.minFPS = 10;

const graphics = new PIXI.Graphics();
graphics.interactive = true;
graphics.buttonMode = true;

const renderGraphics = (color) => {
    graphics.clear();
    graphics.lineTo(0, 0);
    graphics.lineStyle(1, color);
    graphics.beginFill(color);

    // draw a square using connected lines as minimal example
    graphics.lineTo(100, 0);
    graphics.lineTo(100, 100);
    graphics.lineTo(0, 100);
    graphics.lineTo(0, 0);
};

renderGraphics(0xcccccc);

graphics.on('pointerover', () => renderGraphics(0));

graphics.on('pointerout', () => renderGraphics(0xcccccc));

app.stage.addChild(graphics)