fix: ensure stop calls do not act like cancel: true

Cancellation can lead to unintended outcomes, like a transition being reset to its previous phase.

Author: aleclarson

packages/core/src/Controller.ts

@@ -21,7 +21,7 @@ import {
   AnimationResult,
   AsyncResult,
 } from './AnimationResult'
-import { runAsync, RunAsyncState, cancelAsync } from './runAsync'
+import { runAsync, RunAsyncState, stopAsync } from './runAsync'
 import { scheduleProps } from './scheduleProps'
 import {
   ControllerFlushFn,
@@ -148,8 +148,8 @@ export class Controller<State extends Lookup = Lookup>
   /** Stop one animation, some animations, or all animations */
   stop(keys?: OneOrMore<string>) {
     if (is.und(keys)) {
+      stopAsync(this._state)
       this.each(spring => spring.stop())
-      cancelAsync(this._state, this._lastAsyncId)
     } else {
       const springs = this.springs as Lookup<SpringValue>
       each(toArray(keys), key => springs[key].stop())
@@ -349,7 +349,7 @@ export async function flushUpdate(
           start(props, resolve) {
             let result: AsyncResult | undefined
             if (cancel) {
-              cancelAsync(state, ctrl['_lastAsyncId'])
+              stopAsync(state, ctrl['_lastAsyncId'])
             } else if (!props.cancel) {
               props.onRest = onRest as any
               result = runAsync(asyncTo!, props, state, ctrl)

packages/core/src/SpringValue.ts

@@ -26,7 +26,7 @@ import * as G from 'shared/globals'
 import { Animation } from './Animation'
 import { mergeConfig } from './AnimationConfig'
 import { scheduleProps } from './scheduleProps'
-import { runAsync, RunAsyncState, RunAsyncProps, cancelAsync } from './runAsync'
+import { runAsync, RunAsyncState, RunAsyncProps, stopAsync } from './runAsync'
 import {
   callProp,
   computeGoal,
@@ -401,7 +401,7 @@ export class SpringValue<T = any> extends FrameValue<T> {
    */
   stop(cancel?: boolean) {
     if (!this.is(DISPOSED)) {
-      cancelAsync(this._state, this._lastCallId)
+      stopAsync(this._state, cancel && this._lastCallId)
 
       // Ensure the `to` value equals the current value.
       this._focus(this.get())

packages/core/src/runAsync.ts

@@ -1,4 +1,4 @@
-import { is, each } from 'shared'
+import { is, each, Falsy } from 'shared'
 import * as G from 'shared/globals'
 
 import { PAUSED } from './SpringPhase'
@@ -26,7 +26,7 @@ export interface RunAsyncProps<T = any> extends SpringProps<T> {
   to?: any
 }
 
-export interface RunAsyncState<T> {
+export interface RunAsyncState<T = any> {
   pauseQueue: Set<() => void>
   resumeQueue: Set<() => void>
   asyncId?: number
@@ -182,9 +182,10 @@ export async function runAsync<T>(
   })())
 }
 
-export function cancelAsync(state: RunAsyncState<any>, callId: number) {
-  state.cancelId = callId
+/** Stop the current `runAsync` call with `finished: false` (or with `cancelled: true` when `cancelId` is defined) */
+export function stopAsync(state: RunAsyncState, cancelId?: number | Falsy) {
   state.asyncId = state.asyncTo = state.promise = undefined
+  if (cancelId) state.cancelId = cancelId
 }
 
 /** This error is thrown to signal an interrupted async animation. */