commit 25c2aeed9ad5dce5df20ef02232ea912187f7aba
author Ovilia <zwl.sjtu@gmail.com> Mon Feb 21 15:33:31 2022 +0800
committer Ovilia <zwl.sjtu@gmail.com> Mon Feb 21 15:33:31 2022 +0800
tree 0ef8261aa10bb9e673c4e97e707612039b1be322
parent ebc588c6430df7f598af0ebf25af0312dd02c98f

WIP: stoppable raq mocking

src/components/BBody.vue

diff --git a/src/components/BBody.vue b/src/components/BBody.vue
index 8a60a1f..6b69e45 100644
--- a/src/components/BBody.vue
+++ b/src/components/BBody.vue
@@ -245,16 +245,15 @@
             });
         },
 
-        onTitleChanged(event) {
-            console.log(event.target.value)
-            if (this.selectedDemo === 'simple') {
+        onTitleChanged(demoName) {
+            if (demoName === 'simple') {
                 this.demoData = fruit;
-                this.title = this.titleComplicated;
+                this.title = this.titleSimple;
                 this.maxDataCnt = null;
             }
-            else if (this.selectedDemo === 'complicated') {
+            else if (demoName === 'complicated') {
                 this.demoData = expectancy;
-                this.title = this.titleSimple;
+                this.title = this.titleComplicated;
                 this.maxDataCnt = 10;
             }
             else {

src/components/BChart.vue

diff --git a/src/components/BChart.vue b/src/components/BChart.vue
index b1e9d41..5f683fd 100644
--- a/src/components/BChart.vue
+++ b/src/components/BChart.vue
@@ -21,9 +21,9 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue';
+import * as timeline from '../helper/timeline';
 import * as echarts from 'echarts';
 import canvasRecord from 'canvas-record';
-import * as timeline from '../helper/timeline';
 
 const headerLength = 2;
 let chart: echarts.ECharts;

src/helper/timeline.ts

diff --git a/src/helper/timeline.ts b/src/helper/timeline.ts
index 57a23f8..fbf3feb 100644
--- a/src/helper/timeline.ts
+++ b/src/helper/timeline.ts
@@ -28,11 +28,14 @@
 if (typeof __VRT_PLAYBACK_SPEED__ === 'undefined') {
     window.__VRT_PLAYBACK_SPEED__ = 1;
 }
+
+let isMocking = false;
 const nativeRaf = window.requestAnimationFrame;
 const nativeSetTimeout = window.setTimeout;
 const nativeSetInterval = window.setInterval;
 const nativeClearTimeout = window.clearTimeout;
 const nativeClearInterval = window.clearInterval;
+const nativeDate = window.Date;
 
 const FIXED_FRAME_TIME = 16;
 const MAX_FRAME_TIME = 80;
@@ -67,12 +70,14 @@
     flushIntervalHandlers();
 }
 function timelineLoop() {
+    if (!isMocking) {
+        return;
+    }
     if (!__VRT_TIMELINE_PAUSED__) {
         runFrame();
     }
     nativeRaf(timelineLoop);
 }
-nativeRaf(timelineLoop);
 
 mockedRaf = function (cb) {
     rafCbs.push(cb);
@@ -189,8 +194,6 @@
 }
 MockDate.prototype = Object.create(NativeDate.prototype);
 Object.setPrototypeOf(MockDate, NativeDate);
-MockDate.now = mockNow;
-window.Date = MockDate;
 
 // TODO Do we need to mock performance? Or leave some API that can keep real.
 
@@ -207,20 +210,37 @@
     window.__VRT_TIMELINE_PAUSED__ = false;
 }
 
+window.requestAnimationFrame = function (cb) {
+    if (isMocking) {
+        mockedRaf(cb);
+    }
+    else {
+        nativeRaf(cb);
+    }
+};
+
 export function startMock() {
-    window.requestAnimationFrame = mockedRaf;
+    isMocking = true;
     window.setTimeout = mockedTimeout;
     window.setInterval = mockedInterval;
     window.clearTimeout = mockedTimeoutClear;
     window.clearInterval = mockedIntervalClear;
+    (MockDate as any).now = mockNow;
+    window.Date = MockDate;
+    rafCbs = [];
+    frameIdx = 0;
+    timelineTime = 0;
+    nativeRaf(timelineLoop);
 }
 
 export function stopMock() {
+    isMocking = false;
     window.requestAnimationFrame = nativeRaf;
     window.setTimeout = nativeSetTimeout;
     window.setInterval = nativeSetInterval;
     window.clearTimeout = nativeClearTimeout;
     window.clearInterval = nativeClearInterval;
+    window.Date = nativeDate;
 }
 
 export { nativeRaf, nativeSetInterval, nativeSetTimeout };