Paraline/rendererLoop.js at main · SamXop123/Paraline · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
(function (globalScope) {
  function createRendererLoop({
    renderFrame,
    clearCanvas,
    resetTiming,
    initialHidden = false,
    requestFrame = globalScope.requestAnimationFrame.bind(globalScope),
    cancelFrame = globalScope.cancelAnimationFrame.bind(globalScope)
  }) {
    let animationFrameId = null;
    let hidden = initialHidden;
    let started = false;
    let destroyed = false;

    function scheduleFrame() {
      if (destroyed || !started || hidden || animationFrameId !== null) {
        return;
      }

      let scheduledFrameId = null;
      scheduledFrameId = requestFrame((now) => handleFrame(scheduledFrameId, now));
      animationFrameId = scheduledFrameId;
    }

    function handleFrame(frameId, now) {
      if (animationFrameId !== frameId) {
        return;
      }

      animationFrameId = null;

      if (destroyed || !started || hidden) {
        return;
      }

      renderFrame(now);
      scheduleFrame();
    }

    function cancelPendingFrame() {
      if (animationFrameId === null) {
        return;
      }

      cancelFrame(animationFrameId);
      animationFrameId = null;
    }

    return {
      start() {
        if (destroyed || started) {
          return;
        }

        started = true;
        scheduleFrame();
      },

      setHidden(nextHidden) {
        const normalizedHidden = Boolean(nextHidden);
        if (destroyed || normalizedHidden === hidden) {
          return;
        }

        hidden = normalizedHidden;
        if (hidden) {
          cancelPendingFrame();
          clearCanvas();
          return;
        }

        resetTiming();
        scheduleFrame();
      },

      destroy() {
        if (destroyed) {
          return;
        }

        destroyed = true;
        started = false;
        cancelPendingFrame();
      }
    };
  }

  if (typeof module !== "undefined" && module.exports) {
    module.exports = { createRendererLoop };
  } else {
    globalScope.createRendererLoop = createRendererLoop;
  }
})(typeof globalThis !== "undefined" ? globalThis : window);