requestAnimationFrame in enable.js not needed

In cornerstone/src/enable.js we have:

https://github.com/cornerstonejs/cornerstone/blob/master/src/enable.js#L77-#L94

   function draw (timestamp) {
    if (enabledElement.canvas === undefined) {
      return;
    }

    const eventDetails = {
      enabledElement,
      timestamp
    };

    triggerEvent(enabledElement.element, EVENTS.PRE_RENDER, eventDetails);

    if (enabledElement.needsRedraw && hasImageOrLayers(enabledElement)) {
      drawImageSync(enabledElement, enabledElement.invalid);
    }

    requestAnimationFrame(draw);
  }

That is draw keeps being called 60 time a sec

The mechanism of setting needsRedraw to true and waiting for the draw callback to catch it is very inefficient and unnecessary. since needsRedraw is only set to true in two places (invalidate.js and drawImage.js) it would be much more efficient to add a drawAsyncImage like this:

function hasImageOrLayers(enabledElement) {
  return enabledElement.image !== undefined || enabledElement.layers.length > 0;
}

export function drawImageAsync(enabledElement) {
  const eventDetails = {
    enabledElement,
    timestamp: performance.now()
  };

  triggerEvent(enabledElement.element, 'cornerstoneprerender', eventDetails);

  window.setTimeout(() => {
    if (enabledElement.needsRedraw && hasImageOrLayers(enabledElement)) {
      drawImageSync(enabledElement, enabledElement.invalid);
    }
  }, 1000 / 60);
}

and simply call it in these two places which will execute it only once and only when needed. needsRedraw is not needed anymore and can be removed.

I have this change working here without issues and stopped various slowdowns/freezes issues I had.

Please let me know your thoughts.

Thanks!

[kofifus]

We have a fix and have been working with it for over a year. I can submit a PR if it helps you but I doubt it will get merged, it seems the cornerstone team is reluctant to change this even though as you say it can totally cripple cornerstone.

[kofifus]

@IbrahimCSAE since the PR is not merged you will have to patch your code manually using my PR here https://github.com/cornerstonejs/cornerstone/pull/374