Fix interaction lock

canvas-context.ts

@@ -62,7 +62,6 @@ export class CanvasContext {
       handler()
     }
     if (this.tick && !this.tickNeeded) {
-      console.log('Timer cancelled')
       this.tick.cancel()
       this.tick = null
     }

flamechart-minimap-view.tsx

@@ -3,7 +3,7 @@ import { css } from 'aphrodite'
 import { Flamechart } from './flamechart'
 import { Rect, Vec2, AffineTransform, clamp } from './math'
 import { RectangleBatch } from "./rectangle-batch-renderer"
-import { atMostOnceAFrame, cachedMeasureTextWidth } from "./utils";
+import { cachedMeasureTextWidth } from "./utils";
 import { style, Sizes } from "./flamechart-style";
 import { FontFamily, FontSize, Colors } from "./style"
 import { CanvasContext } from './canvas-context'
@@ -193,6 +193,7 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
   }
 
   private onBeforeFrame = () => {
+    this.maybeClearInteractionLock()
     this.renderRects()
     this.renderOverlays()
   }
@@ -214,7 +215,7 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
   private frameHadWheelEvent = false
   private framesWithoutWheelEvents = 0
   private interactionLock: 'pan' | 'zoom' | null = null
-  private maybeClearInteractionLock = atMostOnceAFrame(() => {
+  private maybeClearInteractionLock = () => {
     if (this.interactionLock) {
       if (!this.frameHadWheelEvent) {
         this.framesWithoutWheelEvents++;
@@ -223,10 +224,10 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
           this.framesWithoutWheelEvents = 0
         }
       }
-      requestAnimationFrame(this.maybeClearInteractionLock)
+      this.props.canvasContext.requestFrame()
     }
     this.frameHadWheelEvent = false
-  })
+  }
 
   private pan(logicalViewSpaceDelta: Vec2) {
     this.interactionLock = 'pan'

flamechart-view.tsx

@@ -6,7 +6,7 @@ import { CallTreeNode } from './profile'
 import { Flamechart, FlamechartFrame } from './flamechart'
 
 import { Rect, Vec2, AffineTransform, clamp } from './math'
-import { atMostOnceAFrame, cachedMeasureTextWidth } from "./utils";
+import { cachedMeasureTextWidth } from "./utils";
 import { RectangleBatch } from "./rectangle-batch-renderer"
 import { FlamechartMinimapView } from "./flamechart-minimap-view"
 
@@ -355,7 +355,7 @@ export class FlamechartPanZoomView extends ReloadableComponent<FlamechartPanZoom
           this.framesWithoutWheelEvents = 0
         }
       }
-      requestAnimationFrame(this.maybeClearInteractionLock)
+      this.props.canvasContext.requestFrame()
     }
     this.frameHadWheelEvent = false
   }
@@ -363,6 +363,7 @@ export class FlamechartPanZoomView extends ReloadableComponent<FlamechartPanZoom
   private onBeforeFrame = () => {
     this.renderRects()
     this.renderOverlays()
+    this.maybeClearInteractionLock()
   }
 
   private renderCanvas = () => {

utils.ts

@@ -1,16 +1,3 @@
-export function atMostOnceAFrame<F extends Function>(fn: F) {
-  let frameRequest: number | null = null
-  function ret(...args: any[]) {
-    if (frameRequest == null) {
-      frameRequest = requestAnimationFrame(function () {
-        fn(...args)
-        frameRequest = null
-      })
-    }
-  }
-  return ret as any as F
-}
-
 export function lastOf<T>(ts: T[]): T | null {
   return ts[ts.length-1] || null
 }