@react-native-ohos/flash-list 1.6.4-rc.1

package/src/__tests__/ViewabilityHelper.test.ts

@@ -0,0 +1,283 @@
+import { Dimension, Layout } from "recyclerlistview";
+
+import CustomError from "../errors/CustomError";
+import ExceptionList from "../errors/ExceptionList";
+import ViewabilityHelper from "../viewability/ViewabilityHelper";
+
+describe("ViewabilityHelper", () => {
+  const viewableIndicesChanged = jest.fn();
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.useFakeTimers();
+  });
+
+  it("does not report any changes when indices have not changed", () => {
+    const viewabilityHelper = new ViewabilityHelper(
+      null,
+      viewableIndicesChanged
+    );
+    viewabilityHelper.possiblyViewableIndices = [0, 1, 2];
+    updateViewableItems({ viewabilityHelper });
+    // Initial call
+    expect(viewableIndicesChanged).toHaveBeenCalledWith(
+      [0, 1, 2],
+      [0, 1, 2],
+      []
+    );
+
+    // No changes
+    viewableIndicesChanged.mockReset();
+    updateViewableItems({ viewabilityHelper });
+    expect(viewableIndicesChanged).not.toHaveBeenCalled();
+  });
+
+  it("reports only viewable indices", () => {
+    const viewabilityHelper = new ViewabilityHelper(
+      null,
+      viewableIndicesChanged
+    );
+    viewabilityHelper.possiblyViewableIndices = [0, 1, 2, 3];
+    updateViewableItems({ viewabilityHelper });
+    // Items 0, 1, 2 are initially viewable
+    expect(viewableIndicesChanged).toHaveBeenCalledWith(
+      [0, 1, 2],
+      [0, 1, 2],
+      []
+    );
+
+    // After scroll, item 3 becomes viewable, too
+    updateViewableItems({ viewabilityHelper, scrollOffset: 50 });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith([0, 1, 2, 3], [3], []);
+
+    // After additional scroll, the first item is no longer viewable
+    updateViewableItems({ viewabilityHelper, scrollOffset: 100 });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith([1, 2, 3], [], [0]);
+  });
+
+  it("reports only viewable indices when horizontal", () => {
+    const viewabilityHelper = new ViewabilityHelper(
+      null,
+      viewableIndicesChanged
+    );
+    viewabilityHelper.possiblyViewableIndices = [0, 1, 2, 3];
+    const getLayout = (index: number) => {
+      return { x: index * 100, y: 0, height: 300, width: 100 } as Layout;
+    };
+    updateViewableItems({ viewabilityHelper, horizontal: true, getLayout });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith(
+      [0, 1, 2],
+      [0, 1, 2],
+      []
+    );
+
+    updateViewableItems({
+      viewabilityHelper,
+      horizontal: true,
+      scrollOffset: 50,
+      getLayout,
+    });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith([0, 1, 2, 3], [3], []);
+
+    updateViewableItems({
+      viewabilityHelper,
+      horizontal: true,
+      scrollOffset: 100,
+      getLayout,
+    });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith([1, 2, 3], [], [0]);
+  });
+
+  it("reports items only after minimumViewTime has elapsed", () => {
+    const viewabilityHelper = new ViewabilityHelper(
+      { minimumViewTime: 500 },
+      viewableIndicesChanged
+    );
+    viewabilityHelper.possiblyViewableIndices = [0, 1, 2, 3];
+    updateViewableItems({ viewabilityHelper, runAllTimers: false });
+    expect(viewableIndicesChanged).not.toHaveBeenCalled();
+    jest.advanceTimersByTime(400);
+    expect(viewableIndicesChanged).not.toHaveBeenCalled();
+    jest.advanceTimersByTime(100);
+    expect(viewableIndicesChanged).toHaveBeenCalledWith(
+      [0, 1, 2],
+      [0, 1, 2],
+      []
+    );
+
+    viewableIndicesChanged.mockReset();
+    updateViewableItems({
+      viewabilityHelper,
+      scrollOffset: 50,
+      runAllTimers: false,
+    });
+    expect(viewableIndicesChanged).not.toHaveBeenCalled();
+    jest.advanceTimersByTime(500);
+    expect(viewableIndicesChanged).toHaveBeenCalledWith([0, 1, 2, 3], [3], []);
+
+    viewableIndicesChanged.mockReset();
+    updateViewableItems({
+      viewabilityHelper,
+      scrollOffset: 100,
+      runAllTimers: false,
+    });
+    expect(viewableIndicesChanged).not.toHaveBeenCalled();
+    jest.advanceTimersByTime(500);
+    expect(viewableIndicesChanged).toHaveBeenCalledWith([1, 2, 3], [], [0]);
+  });
+
+  it("reports items that only satisfy itemVisiblePercentThreshold", () => {
+    const viewabilityHelper = new ViewabilityHelper(
+      { itemVisiblePercentThreshold: 50 },
+      viewableIndicesChanged
+    );
+    viewabilityHelper.possiblyViewableIndices = [0, 1, 2, 3];
+    updateViewableItems({
+      viewabilityHelper,
+    });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith(
+      [0, 1, 2],
+      [0, 1, 2],
+      []
+    );
+    viewableIndicesChanged.mockReset();
+
+    // User scrolled by 50 pixels, making both first and last item visible from 50 %
+    updateViewableItems({
+      viewabilityHelper,
+      scrollOffset: 50,
+    });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith([0, 1, 2, 3], [3], []);
+    viewableIndicesChanged.mockReset();
+
+    // User scrolled by 55 pixels, first item no longer satisfies threshold
+    updateViewableItems({
+      viewabilityHelper,
+      scrollOffset: 55,
+    });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith([1, 2, 3], [], [0]);
+  });
+
+  it("reports items that only satisfy viewAreaCoveragePercentThreshold", () => {
+    const getLayout = (index: number) => {
+      if (index === 4) {
+        return { x: 0, y: index * 100, width: 100, height: 25 } as Layout;
+      }
+      return { x: 0, y: index * 100, height: 100, width: 300 } as Layout;
+    };
+    const viewabilityHelper = new ViewabilityHelper(
+      { viewAreaCoveragePercentThreshold: 25 },
+      viewableIndicesChanged
+    );
+    viewabilityHelper.possiblyViewableIndices = [0, 1, 2, 3];
+    updateViewableItems({
+      viewabilityHelper,
+      getLayout,
+    });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith(
+      [0, 1, 2],
+      [0, 1, 2],
+      []
+    );
+    viewableIndicesChanged.mockReset();
+
+    // User scrolled by 75 pixels.
+    // First item is visible only from 25 pixels, not meeting the threshold.
+    // The last item is visible from 75 pixels, which is exactly the threshold (300 / 4 = 75 where 300 is height of the list)
+    updateViewableItems({
+      viewabilityHelper,
+      scrollOffset: 75,
+      getLayout,
+    });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith([1, 2, 3], [3], [0]);
+    viewableIndicesChanged.mockReset();
+
+    // User scrolled by 110 pixels, making the last small item only partially visible, not meeting the threshold.
+    viewabilityHelper.possiblyViewableIndices = [1, 2, 3, 4];
+    updateViewableItems({
+      viewabilityHelper,
+      scrollOffset: 110,
+      getLayout,
+    });
+    expect(viewableIndicesChanged).not.toHaveBeenCalled();
+
+    // User scrolled by 125 pixels, making the last small item completely visible, even when it is not meeting the threshold.
+    viewabilityHelper.possiblyViewableIndices = [1, 2, 3, 4];
+    updateViewableItems({
+      viewabilityHelper,
+      scrollOffset: 125,
+      getLayout,
+    });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith([1, 2, 3, 4], [4], []);
+  });
+
+  it("reports viewable items only after interaction if waitForInteraction is set to true", () => {
+    const viewabilityHelper = new ViewabilityHelper(
+      { waitForInteraction: true },
+      viewableIndicesChanged
+    );
+    // Even when elements are visible, viewableIndicesChanged will not be called since interaction has not been recorded, yet
+    viewabilityHelper.possiblyViewableIndices = [0, 1, 2, 3];
+    updateViewableItems({
+      viewabilityHelper,
+    });
+    // View is scrolled but programatically - not resulting in an interaction
+    updateViewableItems({
+      viewabilityHelper,
+      scrollOffset: 50,
+    });
+    expect(viewableIndicesChanged).not.toHaveBeenCalled();
+
+    // Interaction is recorded, leading to trigger of viewableIndicesChanged
+    viewabilityHelper.hasInteracted = true;
+    updateViewableItems({
+      viewabilityHelper,
+      scrollOffset: 50,
+    });
+    expect(viewableIndicesChanged).toHaveBeenCalledWith(
+      [0, 1, 2, 3],
+      [0, 1, 2, 3],
+      []
+    );
+  });
+
+  it("throws multipleViewabilityThresholdTypesNotSupported exception when both viewAreaCoveragePercentThreshold and itemVisiblePercentThreshold are defined", () => {
+    const viewabilityHelper = new ViewabilityHelper(
+      { viewAreaCoveragePercentThreshold: 1, itemVisiblePercentThreshold: 1 },
+      viewableIndicesChanged
+    );
+    expect(() => updateViewableItems({ viewabilityHelper })).toThrow(
+      new CustomError(
+        ExceptionList.multipleViewabilityThresholdTypesNotSupported
+      )
+    );
+  });
+
+  const updateViewableItems = ({
+    viewabilityHelper,
+    horizontal,
+    scrollOffset,
+    listSize,
+    getLayout,
+    runAllTimers,
+  }: {
+    viewabilityHelper: ViewabilityHelper;
+    horizontal?: boolean;
+    scrollOffset?: number;
+    listSize?: Dimension;
+    getLayout?: (index: number) => Layout | undefined;
+    runAllTimers?: boolean;
+  }) => {
+    viewabilityHelper.updateViewableItems(
+      horizontal ?? false,
+      scrollOffset ?? 0,
+      listSize ?? { height: 300, width: 300 },
+      getLayout ??
+        ((index) => {
+          return { x: 0, y: index * 100, height: 100, width: 300 } as Layout;
+        })
+    );
+    if (runAllTimers ?? true) {
+      jest.runAllTimers();
+    }
+  };
+});

package/src/__tests__/helpers/mountFlashList.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { Text } from "react-native";
+import "@quilted/react-testing/matchers";
+import { mount, Root } from "@quilted/react-testing";
+
+import FlashList from "../../FlashList";
+import { FlashListProps, ListRenderItem } from "../../FlashListProps";
+
+jest.mock("../../FlashList", () => {
+  const ActualFlashList = jest.requireActual("../../FlashList").default;
+  class MockFlashList extends ActualFlashList {
+    componentDidMount() {
+      super.componentDidMount();
+      this.rlvRef?._scrollComponent?._scrollViewRef?.props.onLayout({
+        nativeEvent: { layout: { height: 900, width: 400 } },
+      });
+    }
+  }
+  return MockFlashList;
+});
+export type MockFlashListProps = Omit<
+  FlashListProps<string>,
+  "estimatedItemSize" | "data" | "renderItem"
+> & {
+  estimatedItemSize?: number;
+  data?: string[];
+  renderItem?: ListRenderItem<string>;
+  disableDefaultEstimatedItemSize?: boolean;
+};
+/**
+ * Helper to mount FlashList for testing.
+ */
+export const mountFlashList = (
+  props?: MockFlashListProps,
+  ref?: React.RefObject<FlashList<string>>
+) => {
+  const flashList = mount(renderFlashList(props, ref)) as Omit<
+    Root<FlashListProps<string>>,
+    "instance"
+  > & {
+    instance: FlashList<string>;
+  };
+  return flashList;
+};
+
+export function renderFlashList(
+  props?: MockFlashListProps,
+  ref?: React.RefObject<FlashList<string> | null>|any
+) {
+  return (
+    <FlashList
+      {...props}
+      ref={ref}
+      renderItem={props?.renderItem || (({ item }) => <Text>{item}</Text>)}
+      estimatedItemSize={
+        props?.estimatedItemSize ??
+        (props?.disableDefaultEstimatedItemSize ? undefined : 200)
+      }
+      data={props?.data || ["One", "Two", "Three", "Four"]}
+    />
+  );
+}

package/src/__tests__/helpers/mountMasonryFlashList.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Text } from "react-native";
+import "@quilted/react-testing/matchers";
+import { mount, Root } from "@quilted/react-testing";
+
+import { ListRenderItem } from "../../FlashListProps";
+import {
+  MasonryFlashList,
+  MasonryFlashListProps,
+  MasonryFlashListRef,
+} from "../../MasonryFlashList";
+
+jest.mock("../../FlashList", () => {
+  const ActualFlashList = jest.requireActual("../../FlashList").default;
+  class MockFlashList extends ActualFlashList {
+    componentDidMount() {
+      super.componentDidMount();
+      this.rlvRef?._scrollComponent?._scrollViewRef?.props.onLayout({
+        nativeEvent: {
+          layout: {
+            height: this.props.estimatedListSize?.height ?? 900,
+            width: this.props.estimatedListSize?.width ?? 400,
+          },
+        },
+      });
+    }
+  }
+  return MockFlashList;
+});
+
+export type MockMasonryFlashListProps = Omit<
+  MasonryFlashListProps<string>,
+  "estimatedItemSize" | "data" | "renderItem"
+> & {
+  estimatedItemSize?: number;
+  data?: string[];
+  renderItem?: ListRenderItem<string>;
+};
+
+/**
+ * Helper to mount MasonryFlashList for testing.
+ */
+export const mountMasonryFlashList = (
+  props?: MockMasonryFlashListProps,
+  ref?: React.RefObject<MasonryFlashListRef<string> | null>
+) => {
+  const flashList = mount(renderMasonryFlashList(props, ref)) as Omit<
+    Root<MasonryFlashListProps<string>>,
+    "instance"
+  > & {
+    instance: MasonryFlashListRef<string>;
+  };
+  return flashList;
+};
+
+export function renderMasonryFlashList(
+  props?: MockMasonryFlashListProps,
+  ref?: React.RefObject<MasonryFlashListRef<string> | null>
+) {
+  return (
+    <MasonryFlashList
+      {...props}
+      ref={ref}
+      numColumns={props?.numColumns ?? 2}
+      renderItem={props?.renderItem || (({ item }) => <Text>{item}</Text>)}
+      estimatedItemSize={props?.estimatedItemSize ?? 200}
+      data={props?.data || ["One", "Two", "Three", "Four"]}
+    />
+  );
+}

package/src/__tests__/useBlankAreaTracker.test.tsx

@@ -0,0 +1,204 @@
+import React, { useEffect } from "react";
+import { mount } from "@quilted/react-testing";
+
+import {
+  BlankAreaTrackerConfig,
+  BlankAreaTrackerResult,
+  useBlankAreaTracker,
+} from "../benchmark/useBlankAreaTracker";
+import FlashList from "../FlashList";
+
+import { MockFlashListProps, renderFlashList } from "./helpers/mountFlashList";
+
+type BlankTrackingFlashListProps = MockFlashListProps & {
+  onCumulativeBlankAreaResult?: (result: BlankAreaTrackerResult) => void;
+  onCumulativeBlankAreaChange?: (updatedResult: BlankAreaTrackerResult) => void;
+  blankAreaTrackerConfig?: BlankAreaTrackerConfig;
+  instance?: React.RefObject<FlashList<any> | null>;
+};
+
+const BlankTrackingFlashList = (props?: BlankTrackingFlashListProps) => {
+  const ref = props?.instance!;
+  const [blankAreaTrackerResult, onBlankArea] = useBlankAreaTracker(
+    ref,
+    props?.onCumulativeBlankAreaChange,
+    {
+      startDelayInMs: props?.blankAreaTrackerConfig?.startDelayInMs ?? 500,
+      sumNegativeValues:
+        props?.blankAreaTrackerConfig?.sumNegativeValues ?? false,
+    }
+  );
+  useEffect(() => {
+    return () => {
+      props?.onCumulativeBlankAreaResult?.(blankAreaTrackerResult);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return renderFlashList(
+    { ...props, onBlankArea, estimatedItemSize: 400 },
+    ref
+  );
+};
+
+const mountBlankTrackingFlashList = (props?: BlankTrackingFlashListProps) => {
+  const flashListRef = React.createRef<FlashList<any>>();
+  const blankTrackingFlashList = mount(
+    <BlankTrackingFlashList {...props} instance={flashListRef} />
+  );
+  return {
+    root: blankTrackingFlashList,
+    instance: flashListRef.current!,
+  };
+};
+
+describe("useBlankAreaTracker Hook", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  it("ignores blank events for 500ms on mount and if content is not enough to fill the list", () => {
+    const onCumulativeBlankAreaChange = jest.fn();
+    const flashList = mountBlankTrackingFlashList({
+      onCumulativeBlankAreaChange,
+    });
+    flashList.instance.props.onBlankArea!({
+      blankArea: 100,
+      offsetEnd: 100,
+      offsetStart: 0,
+    });
+    flashList.instance.props.onBlankArea!({
+      blankArea: 100,
+      offsetEnd: 100,
+      offsetStart: 0,
+    });
+    jest.advanceTimersByTime(400);
+    flashList.instance.props.onBlankArea!({
+      blankArea: 100,
+      offsetEnd: 100,
+      offsetStart: 0,
+    });
+    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(0);
+    jest.advanceTimersByTime(100);
+    flashList.instance.props.onBlankArea!({
+      blankArea: 100,
+      offsetEnd: 100,
+      offsetStart: 0,
+    });
+    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(1);
+    onCumulativeBlankAreaChange.mockClear();
+
+    flashList.root.setProps({ data: ["1"] });
+    flashList.instance.props.onBlankArea!({
+      blankArea: 100,
+      offsetEnd: 100,
+      offsetStart: 0,
+    });
+    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(0);
+    flashList.root.unmount();
+  });
+  it("keeps result object updated with correct values on unmount", () => {
+    let resultObjectCopy: BlankAreaTrackerResult | undefined;
+    const onCumulativeBlankAreaChange = jest.fn(
+      (result: BlankAreaTrackerResult) => {
+        if (!resultObjectCopy) {
+          resultObjectCopy = result;
+        }
+      }
+    );
+    const onCumulativeBlankAreaResult = jest.fn();
+    const flashList = mountBlankTrackingFlashList({
+      onCumulativeBlankAreaResult,
+      onCumulativeBlankAreaChange,
+      blankAreaTrackerConfig: { startDelayInMs: 300 },
+    });
+    flashList.instance.props.onBlankArea!({
+      blankArea: 100,
+      offsetEnd: 100,
+      offsetStart: 0,
+    });
+    jest.advanceTimersByTime(300);
+    flashList.instance.props.onBlankArea!({
+      blankArea: 100,
+      offsetEnd: 100,
+      offsetStart: 0,
+    });
+    expect(resultObjectCopy!.cumulativeBlankArea).toBe(100);
+    expect(resultObjectCopy!.maxBlankArea).toBe(100);
+
+    flashList.instance.props.onBlankArea!({
+      blankArea: 200,
+      offsetEnd: 200,
+      offsetStart: 0,
+    });
+    flashList.instance.props.onBlankArea!({
+      blankArea: -200,
+      offsetEnd: -200,
+      offsetStart: 0,
+    });
+    expect(resultObjectCopy!.cumulativeBlankArea).toBe(300);
+    expect(resultObjectCopy!.maxBlankArea).toBe(200);
+
+    flashList.root.unmount();
+    expect(onCumulativeBlankAreaResult).toHaveBeenCalledWith(resultObjectCopy!);
+  });
+  it("can track negative values on demand", () => {
+    const onCumulativeBlankAreaResult = jest.fn();
+    const flashList = mountBlankTrackingFlashList({
+      onCumulativeBlankAreaResult,
+      blankAreaTrackerConfig: { sumNegativeValues: true },
+    });
+    flashList.instance.props.onBlankArea!({
+      blankArea: -200,
+      offsetEnd: -200,
+      offsetStart: 0,
+    });
+    jest.advanceTimersByTime(500);
+    flashList.instance.props.onBlankArea!({
+      blankArea: -200,
+      offsetEnd: -200,
+      offsetStart: 0,
+    });
+    flashList.instance.props.onBlankArea!({
+      blankArea: -200,
+      offsetEnd: -200,
+      offsetStart: 0,
+    });
+    flashList.root.unmount();
+    expect(onCumulativeBlankAreaResult).toHaveBeenCalledWith({
+      cumulativeBlankArea: -400,
+      maxBlankArea: 0,
+    });
+  });
+  it("only calls onCumulativeBlankAreaChange when values have a change", () => {
+    const onCumulativeBlankAreaChange = jest.fn();
+    const flashList = mountBlankTrackingFlashList({
+      onCumulativeBlankAreaChange,
+    });
+    flashList.instance.props.onBlankArea!({
+      blankArea: -200,
+      offsetEnd: -200,
+      offsetStart: 0,
+    });
+    jest.advanceTimersByTime(500);
+    flashList.instance.props.onBlankArea!({
+      blankArea: -200,
+      offsetEnd: -200,
+      offsetStart: 0,
+    });
+    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(0);
+    flashList.instance.props.onBlankArea!({
+      blankArea: -100,
+      offsetEnd: -100,
+      offsetStart: 0,
+    });
+    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(0);
+    flashList.instance.props.onBlankArea!({
+      blankArea: 100,
+      offsetEnd: 100,
+      offsetStart: 0,
+    });
+    expect(onCumulativeBlankAreaChange).toHaveBeenCalledTimes(1);
+    flashList.root.unmount();
+  });
+});

package/src/benchmark/AutoScrollHelper.ts

@@ -0,0 +1,70 @@
+/**
+ * This method can be used to trigger scroll events that can be forwarded to an element. Anything that implements scrollable can leverage this.
+ * @param scroll The scrollable element
+ * @param fromX The x offset to start from
+ * @param fromY The y offset to start from
+ * @param toX the x offset to end scroll at
+ * @param toY the y offset to end scroll at
+ * @param speedMultiplier  the speed multiplier to use
+ * @param cancellable can be used to cancel the scroll
+ * @returns Promise that resolves when the scroll is complete
+ */
+export function autoScroll(
+  scroll: (x: number, y: number, animated: boolean) => void,
+  fromX: number,
+  fromY: number,
+  toX: number,
+  toY: number,
+  speedMultiplier = 1,
+  cancellable: Cancellable = new Cancellable()
+): Promise<boolean> {
+  return new Promise((resolve) => {
+    scroll(fromX, fromY, false);
+    // Very fast scrolls on Android/iOS typically move content 7px every millisecond.
+    const incrementPerMs = 7 * speedMultiplier;
+    const directionMultiplierX = toX > fromX ? 1 : -1;
+    const directionMultiplierY = toY > fromY ? 1 : -1;
+    const comparatorX = toX > fromX ? Math.min : Math.max;
+    const comparatorY = toY > fromY ? Math.min : Math.max;
+    let startTime = Date.now();
+    let startX = fromX;
+    let startY = fromY;
+    // Computes the number of pixels to scroll in the given time
+    // Also invokes the scrollable to update the scroll position
+    const animationLoop = () => {
+      requestAnimationFrame(() => {
+        if (cancellable.isCancelled()) {
+          resolve(false);
+          return;
+        }
+        const currentTime = Date.now();
+        const timeElapsed = currentTime - startTime;
+        const distanceToCover = incrementPerMs * timeElapsed;
+        startX += distanceToCover * directionMultiplierX;
+        startY += distanceToCover * directionMultiplierY;
+        scroll(comparatorX(toX, startX), comparatorY(toY, startY), false);
+        startTime = currentTime;
+        if (
+          comparatorX(toX, startX) !== toX ||
+          comparatorY(toY, startY) !== toY
+        ) {
+          return animationLoop();
+        }
+        resolve(true);
+      });
+    };
+    animationLoop();
+  });
+}
+
+export class Cancellable {
+  public cancel() {
+    this._isCancelled = true;
+  }
+
+  public isCancelled(): boolean {
+    return this._isCancelled;
+  }
+
+  public _isCancelled = false;
+}