chain almost fixed

Author: drcmda

examples/demos/flip-card/index.js

@@ -13,19 +13,19 @@ export default function Card() {
       opacity: flipped ? 1 : 0,
       transform: `perspective(1400px) rotateX(0deg)`,
     },
-    /*[
+    to: [
       { transform: `perspective(1400px) rotateX(45deg)` },
       { transform: `perspective(1400px) rotateX(${flipped ? 180 : 0}deg)` },
-    ],*/
-    to: async next => {
+    ],
+    /*async next => {
       await next({ transform: `perspective(1400px) rotateX(45deg)` })
       await next(
         {
           transform: `perspective(1400px) rotateX(${flipped ? 180 : 0}deg)`,
         },
         true
       )
-    },
+    },*/
     //onRest: v => console.log(v),
   })
   return (

examples/demos/list-reordering/index.js

@@ -1,11 +1,12 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useTransition, animated } from 'react-spring/hooks'
 import shuffle from 'lodash/shuffle'
 import data from './data'
 import './styles.css'
 
 export default function App() {
   const [rows, set] = useState(data)
+  useEffect(() => void setInterval(() => set(shuffle), 3000), [])
 
   let height = 0
   const transitions = useTransition({
@@ -22,7 +23,7 @@ export default function App() {
   })
 
   return (
-    <div className="list-reorder-scroll" onClick={() => set(shuffle)}>
+    <div className="list-reorder-scroll">
       <div className="list-reorder" style={{ height: height + 15 }}>
         {transitions.map(({ item, props: { y, ...rest }, key }, index) => (
           <animated.div

examples/index.js

@@ -5,8 +5,8 @@ import Demo from './components/Demo'
 import examples from './components/examples-hooks'
 import './styles.css'
 
-//const DEBUG = false
-const DEBUG = 'chain'
+const DEBUG = false
+//const DEBUG = 'reorder'
 
 ReactDOM.render(
   <DemoGrid fullscreen={!!DEBUG}>

src/animated/Controller.js

@@ -27,55 +27,23 @@ export default class Controller {
     this.lastTime = undefined
     this.guid = 0
     this.local = 0
+    this.async = undefined
     this.update(props)
   }
 
   update(props = {}) {
     let { from = {}, to = {}, ...rest } = interpolateTo(props)
     let isArray = is.arr(to)
     let isFunction = is.fun(to)
-    let queue = Promise.resolve()
-
-    if (isArray) {
-      for (let i = 0; i < to.length; i++) {
-        const index = i
-        const last = index === to.length - 1
-        const fresh = { ...props, to: to[index] }
-        if (!last) fresh.onRest = undefined
-        queue = queue.then(
-          () => this.local === this.guid && this.update(interpolateTo(fresh))
-        )
-      }
-    } else if (isFunction) {
-      let index = 0
-      let fn = to
-      queue = queue.then(
-        () =>
-          new Promise(res =>
-            fn(
-              // Next
-              (p, last = false) => {
-                if (this.local === this.guid) {
-                  const fresh = { ...props, ...interpolateTo(p), config }
-                  if (!last) fresh.onRest = undefined
-                  if (is.arr(fresh.config)) fresh.config = fresh.config[index]
-                  index++
-                  return this.update(fresh).then(() => last && res())
-                }
-              },
-              // Cancel
-              () => this.stop({ finished: true })
-            )
-          )
-      )
-    }
 
-    // If "to" is either a function or an array it will be processed async, therefor "to" should be empty right now
-    // If the view relies on certain values "from" has to be present
+    // Test again async "to"
     if (isArray || isFunction) {
       this.local = ++this.guid
+      // If "to" is either a function or an array it will be processed async, therefor "to" should be empty right now
+      // If the view relies on certain values "from" has to be present
+      this.async = { to, props }
       to = {}
-    }
+    } else this.async = undefined
 
     this.props = { ...this.props, ...rest }
     let {
@@ -194,32 +162,82 @@ export default class Controller {
       }
     }
 
-    // Do not attempt to start if this is a referenced controller
-    if (ref) return
-    // Either return the async queue, or start a new animation
-    return isArray || isFunction ? queue : this.start()
+    return this.start()
   }
 
-  start() {
-    this.startTime = now()
-    if (this.isActive) this.stop()
-    this.isActive = true
-    if (this.props.onStart) this.props.onStart()
-    addController(this)
-    return new Promise(res => (this.resolve = res))
+  // When the controller is references, it won't start on its own, even thought every update calls start and receives
+  // a promise. The animation can then only be started by ref, which enforces it by calling start(true)
+  start(force = false) {
+    // This promise tracks the animation until onRest
+    const promise = new Promise(res => (this.resolve = res))
+    // Return immediately if the controller bears a reference
+    if (this.props.ref && force === false) return promise
+    // Stop all occuring animations (without resetting change-detection)
+    this.stop()
+
+    if (this.async) {
+      let { to, props } = this.async
+      let queue = Promise.resolve()
+      if (is.arr(to)) {
+        for (let i = 0; i < to.length; i++) {
+          const index = i
+          const last = index === to.length - 1
+          const fresh = { ...props, to: to[index] }
+          if (is.arr(fresh.config)) fresh.config = fresh.config[index]
+          if (!last) fresh.onRest = undefined
+          queue = queue.then(
+            () => this.local === this.guid && this.update(interpolateTo(fresh))
+          )
+        }
+      } else if (is.fun(to)) {
+        let index = 0
+        let fn = to
+        queue = queue.then(
+          () =>
+            new Promise(res =>
+              fn(
+                // Next
+                (p, last = false) => {
+                  if (this.local === this.guid) {
+                    const fresh = { ...props, ...interpolateTo(p) }
+                    if (!last) fresh.onRest = undefined
+                    if (is.arr(fresh.config)) fresh.config = fresh.config[index]
+                    index++
+                    return this.update(fresh).then(() => last && res())
+                  }
+                },
+                // Cancel
+                () => this.stop({ finished: true })
+              )
+            )
+        )
+      }
+      return queue.then(this.resolve)
+    } else {
+      // Set start time tag
+      this.startTime = now()
+      if (this.isActive) this.stop()
+      this.isActive = true
+      if (this.props.onStart) this.props.onStart()
+      addController(this)
+    }
+    return promise
   }
 
   stop(result = { finished: false }) {
+    this.isActive = false
     removeController(this)
-    // Reset collected changes
-    if (result.finished)
+
+    if (result.finished) {
+      // Reset collected changes
       getValues(this.animations).forEach(a => (a.changes = undefined))
-    this.isActive = false
+      // Call onRest if present
+      if (this.props.onRest) this.props.onRest(this.merged)
 
-    if (this.props.onRest && result.finished) this.props.onRest(this.merged)
-    if (this.resolve) {
-      this.resolve(this.merged)
-      this.resolve = undefined
+      if (this.resolve) {
+        this.resolve(this.merged)
+        this.resolve = undefined
+      }
     }
   }
 

src/useSprings.js

@@ -34,7 +34,7 @@ export const useSprings = (length, props) => {
 
   // The hooks reference api gets defined here ...
   const api = useImperativeMethods(ref, () => ({
-    start: () => Promise.all(ctrl.current.map(c => c.start())),
+    start: () => Promise.all(ctrl.current.map(c => c.start(true))),
     stop: () => ctrl.current.forEach(c => c.stop(/*{ finished: true }*/)),
   }))
 

src/useTransition.js

@@ -73,6 +73,7 @@ export function useTransition(props) {
 
           // update the map object
           const ctrl = instances.current.get(key)
+
           if (name === 'update' || name !== state.current.active[key]) {
             state.current.active[key] = name
 
@@ -87,24 +88,32 @@ export function useTransition(props) {
               ...extra,
             }
 
+            //console.log(name, item.name, destroyed)
             ctrl.update(newProps).then(() => {
+              //console.log('  promise.res > ', name, item.name, destroyed)
               if (mounted.current) {
                 if (destroyed && onDestroyed) onDestroyed(item)
-                // Clean up internal state when items unmount, this doesn't necessrily trigger a forceUpdate
+                // Clean up internal state when items unmount, this doesn't need to trigger a forceUpdate
                 if (destroyed) {
                   delete state.current.active[key]
                   state.current = {
                     ...state.current,
+                    flagged: true,
                     deleted: state.current.deleted.filter(t => t.key !== key),
                     transitions: state.current.transitions.filter(
                       t => t.key !== key
                     ),
                   }
+                }
 
-                  // Only when everything's come to rest we enforce a complete dom clean-up
-                  const currentInstances = Array.from(instances.current)
-                  if (!currentInstances.some(([, c]) => c.isActive))
-                    requestFrame(() => forceUpdate())
+                // Only when everything's come to rest we enforce a complete dom clean-up
+                const currentInstances = Array.from(instances.current)
+                if (
+                  state.current.flagged &&
+                  !currentInstances.some(([, c]) => c.isActive)
+                ) {
+                  requestFrame(() => forceUpdate())
+                  state.current.flagged = false
                 }
               }
             })
@@ -125,7 +134,7 @@ export function useTransition(props) {
 
   useImperativeMethods(ref, () => ({
     start: () =>
-      Promise.all(Array.from(instances.current).map(([, c]) => c.start())),
+      Promise.all(Array.from(instances.current).map(([, c]) => c.start(true))),
     stop: () =>
       Array.from(instances.current).forEach(
         ([, c]) => c.isActive && c.stop(/*{ finished: true }*/)