Debouncing in the engine sometimes locks pan in the CanvasWidget

Author: aaron-michauxCreated Oct 14, 2021Updated May 14, 2025

When I create the engine like so...

  const engine = createEngine({
    repaintDebounceMs: 5
  })

Occasionally the pan stops working on the CanvasWidget. I jumped into the code, and figured out that the debounce function is created afresh during each "engine.repaintCanvas" call... thus effectively acting as a delay on execution, and not a debounce. When setting up the debounce correctly, redraw becomes jittery, and the "pan locking" issue becomes worse. (Still intermittent.)

It seems that the debounce function needs to execute on the leading edge.

  // Outside engine.repaintCanvas
  const repaint = () => {
    engine.iterateListeners((listener) => {
      if (listener.repaintCanvas) {
        listener.repaintCanvas()
      }
    })
  }
  const repaintFn = _.debounce(repaint, repaintDebounceMs, { leading: true })

Source: projectstorm/react-diagrams