@apexnative/navigation 1.0.0-alpha.0 → 1.0.0-alpha.10

package/android/src/main/java/dev/apexnative/navigation/views/element/TransitionTargets.kt

@@ -2,7 +2,6 @@ package dev.apexnative.navigation.views.element
 
 import android.os.SystemClock
 import android.view.ViewGroup
-import com.facebook.react.uimanager.util.ReactFindViewUtil
 import dev.apexnative.navigation.options.LayoutAnimation
 import dev.apexnative.navigation.utils.DRAW_WAIT_LIMIT
 import dev.apexnative.navigation.viewcontrollers.component.ContentReadiness
@@ -38,13 +37,17 @@ private fun areReady(animation: LayoutAnimation, from: ViewController<*>, to: Vi
     val screen = to.shownScreen()
     val content = screen.view as? ViewGroup
     if (content != null && !ContentReadiness.isReady(screen)) return false
-    val sharedFound = animation.sharedElements.get().all { isIn(to, it.toId.get("")) }
-    return sharedFound && animation.elementTransitions.transitions.all { isIn(to, it.id) || isIn(from, it.id) }
+    // Each screen walked once for all the ids ([TransitionViews.findViews]); an element is looked for in the screen
+    // that goes only when the one that comes doesn't have it.
+    val targets = animation.sharedElements.get().map { it.toId.get("") }.filter { it.isNotEmpty() }
+    val elements = animation.elementTransitions.transitions.map { it.id }.filter { it.isNotEmpty() }
+    if (targets.isEmpty() && elements.isEmpty()) return true
+    val inTo = TransitionViews.findViews(to.view, (targets + elements).toSet())
+    if (!targets.all { it in inTo }) return false
+    val missing = elements.filterNot { it in inTo }.toSet()
+    return missing.isEmpty() || TransitionViews.findViews(from.view, missing).size == missing.size
 }
 
-private fun isIn(screen: ViewController<*>, nativeId: String) =
-    nativeId.isEmpty() || ReactFindViewUtil.findView(screen.view, nativeId) != null
-
 // The screen a layout shows: a modal of a stack shows the screen on its top.
 private fun ViewController<*>.shownScreen(): ViewController<*> {
     var controller: ViewController<*> = this

package/android/src/main/java/dev/apexnative/navigation/views/element/TransitionViews.kt

@@ -0,0 +1,100 @@
+package dev.apexnative.navigation.views.element
+
+import android.view.View
+import android.view.ViewGroup
+import com.facebook.react.R as ReactR
+import dev.apexnative.navigation.options.ElementTransitionOptions
+import dev.apexnative.navigation.options.SharedElementTransitionOptions
+
+/**
+ * The views of a transition's elements in its two screens: each screen is walked once, at its first lookup, for the ids
+ * looked for there — the screen that goes ([fromRoot]) for the pairs' `fromId`s and the elements' ids, the one that
+ * comes ([toRoot]) for the pairs' `toId`s and the elements' ids the other doesn't have. A lookup finds what
+ * `ReactFindViewUtil.findView` finds in that screen as it was at its walk (depth first, the first match). Main thread
+ * only.
+ */
+internal class TransitionViews(
+    pairs: List<SharedElementTransitionOptions>,
+    elements: List<ElementTransitionOptions>,
+    private val fromRoot: View?,
+    private val toRoot: View?,
+) {
+    // The ids each screen is walked for: the screen that goes for the sources and the elements, the one that comes for
+    // the targets (and the elements the other screen doesn't have, added at its walk).
+    private val leavingIds = HashSet<String>()
+    private val arrivingIds = HashSet<String>()
+    private val elementIds = ArrayList<String>()
+    private var leavingViews: Map<String, View>? = null
+    private var arrivingViews: Map<String, View>? = null
+
+    init {
+        for (pair in pairs) {
+            pair.fromId.get(null)?.takeIf { it.isNotEmpty() }?.let(leavingIds::add)
+            pair.toId.get(null)?.takeIf { it.isNotEmpty() }?.let(arrivingIds::add)
+        }
+        for (element in elements) {
+            if (element.id.isEmpty()) continue
+            leavingIds += element.id
+            elementIds += element.id
+        }
+    }
+
+    /** The view with [nativeId] in the screen that goes; none when none has it or it isn't one of the transition's. */
+    fun leaving(nativeId: String): View? {
+        val views = leavingViews ?: findViews(fromRoot, leavingIds).also { leavingViews = it }
+        return views[nativeId]
+    }
+
+    /** The view with [nativeId] in the screen that comes; none when none has it or it isn't one of the transition's. */
+    fun arriving(nativeId: String): View? {
+        val views = arrivingViews ?: run {
+            // An element is looked for here only when the screen that goes doesn't have it: the walk stops sooner.
+            for (id in elementIds) if (leaving(id) == null) arrivingIds += id
+            findViews(toRoot, arrivingIds).also { arrivingViews = it }
+        }
+        return views[nativeId]
+    }
+
+    companion object {
+        /** The views with the `nativeID`s of [nativeIds] under [root], in one walk ([firstByKey]). */
+        fun findViews(root: View?, nativeIds: Set<String>): Map<String, View> {
+            if (root == null || nativeIds.isEmpty()) return emptyMap()
+            return firstByKey(
+                root,
+                nativeIds,
+                keyOf = { it.getTag(ReactR.id.view_tag_native_id) as? String },
+                childCount = { (it as? ViewGroup)?.childCount ?: 0 },
+                childAt = { view, index -> (view as ViewGroup).getChildAt(index) },
+            )
+        }
+    }
+}
+
+/**
+ * For each key of [keys], the first node with it in a depth-first walk from [root] (the node, then its children in
+ * order): what a search for that one key finds, for all of them in one walk, which stops once every key is found. A key
+ * no node has is left out. Inline: the walk calls no function objects.
+ */
+internal inline fun <N : Any> firstByKey(
+    root: N,
+    keys: Set<String>,
+    keyOf: (N) -> String?,
+    childCount: (N) -> Int,
+    childAt: (N, Int) -> N,
+): Map<String, N> {
+    val found = HashMap<String, N>()
+    if (keys.isEmpty()) return found
+    // A stack of the nodes still to visit, the next one on top: the order of the recursive search without its depth.
+    val stack = ArrayList<N>()
+    stack.add(root)
+    while (stack.isNotEmpty()) {
+        val node = stack.removeAt(stack.size - 1)
+        val key = keyOf(node)
+        if (key != null && key in keys && key !in found) {
+            found[key] = node
+            if (found.size == keys.size) break
+        }
+        for (index in childCount(node) - 1 downTo 0) stack.add(childAt(node, index))
+    }
+    return found
+}

package/android/src/main/java/dev/apexnative/navigation/views/element/animators/ElementPictures.kt

@@ -1,17 +1,24 @@
 package dev.apexnative.navigation.views.element.animators
 
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
 import android.animation.TimeInterpolator
 import android.animation.ValueAnimator
+import android.graphics.Canvas
+import android.graphics.Paint
 import android.graphics.Picture
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffXfermode
+import android.graphics.RectF
 import android.util.Log
 import android.view.View
 import android.view.animation.LinearInterpolator
 import dev.apexnative.navigation.utils.NavigationLog
+import dev.apexnative.navigation.views.element.elementStep
 
 /**
  * The view's own drawing with its children, as drawing commands: sharp at any scale. Its opacity and place belong to
- * the parent. Recording can fail (a hardware bitmap in an image on an older Android): the element then moves without
- * pictures.
+ * the parent. Recording can fail (a hardware bitmap in an image before Android 9): the pair then doesn't fly.
  */
 internal fun recordPicture(view: View): Picture? = try {
     Picture().also {
@@ -23,19 +30,120 @@ internal fun recordPicture(view: View): Picture? = try {
         }
     }
 } catch (e: RuntimeException) {
-    Log.w(NavigationLog.TAG, "Element transition: no picture of the element, it moves without one", e)
+    Log.w(NavigationLog.TAG, "[ApexNavigation] Element transition: no picture of the element", e)
     null
 }
 
+/**
+ * What a shared pair's flight draws in its transition's layer, in the layer's coordinates: the copy where the flight
+ * has brought it ([update]). The layer draws it while it is [shown]: from the start of the flight, and after a landing
+ * until the layer goes.
+ */
+internal abstract class FlightPicture {
+    /** Whether the layer draws it now. */
+    var shown = false
+
+    /** Whether what it draws changes by itself (an animated image): the layer draws it on every frame while shown. */
+    open val live: Boolean get() = false
+
+    /** What runs after its drawing failed: it is drawn no more, and the views of its pair show again. */
+    var onFailed: (Exception) -> Unit = {}
+
+    /** The copy at [time] (the part of the time), [progress] the curve's value. */
+    abstract fun update(time: Float, progress: Float)
+
+    /** The copy, on the layer's canvas; the layer saves and restores the canvas around it. */
+    abstract fun draw(canvas: Canvas)
+}
+
+/**
+ * The cut of a copy whose views' parents hide part of them ([FlightMask]): it keeps, of the mask the copy draws on its
+ * layer, only the part that shows. A layer of that part's rounded rect laid over the mask (`DST_IN`), not a clip path:
+ * its edges stay smooth.
+ */
+internal class MaskCut(private val mask: FlightMask) {
+    private val values = FloatArray(FlightMask.SIZE)
+    private val rect = RectF()
+    private val shape = Paint(Paint.ANTI_ALIAS_FLAG)
+    private val cut = Paint().apply { xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN) }
+
+    /** The cut at [time] (the part of the time), [progress] the curve's value. */
+    fun update(time: Float, progress: Float) = mask.at(progress, time, values)
+
+    /** Cuts the mask drawn so far on the copy's layer of [bounds], in the copy's coordinates (0, 0 its center). */
+    fun draw(canvas: Canvas, bounds: RectF) {
+        rect.set(values[0], values[1], values[2], values[3])
+        canvas.saveLayer(bounds, cut)
+        if (!rect.isEmpty) canvas.drawRoundRect(rect, values[RADIUS], values[RADIUS], shape)
+        canvas.restore()
+    }
+
+    private companion object {
+        const val RADIUS = 4
+    }
+}
+
 // Runs in linear time and keeps the curve it is given for the move: an element moves along the transition's curve,
-// while what has to follow the clock (the pictures of a text changing over) can.
+// while what has to follow the clock (the pictures of a text changing over) can. Its start and its frames each run in
+// [elementStep]: one that fails stops the element — it is cancelled, so its ends put back what it changed and the
+// transition plays on without it.
 internal class MoveAnimator : ValueAnimator() {
     var curve: TimeInterpolator = LinearInterpolator()
         private set
 
+    /** The element's name in the log ([pairName]). */
+    var element = "''"
+
+    private val starts = ArrayList<() -> Unit>()
+    private val frames = ArrayList<(Float) -> Unit>()
+    private val ends = ArrayList<() -> Unit>()
+    private var failed = false
+    private var cancelled = false
+
+    /**
+     * Whether the flight ran to its end: it wasn't cancelled and nothing in it failed. Read at its end; a flight that
+     * landed may keep showing its last frame until the transition gives its views back.
+     */
+    val landed: Boolean get() = !cancelled
+
     init {
         setFloatValues(0f, 1f)
         super.setInterpolator(LinearInterpolator())
+        addListener(object : AnimatorListenerAdapter() {
+            override fun onAnimationStart(animation: Animator) = guarded { for (start in starts) start() }
+
+            override fun onAnimationCancel(animation: Animator) {
+                cancelled = true
+            }
+
+            override fun onAnimationEnd(animation: Animator) {
+                for (end in ends) elementStep(element) { end() }
+            }
+        })
+        addUpdateListener { animation ->
+            if (!failed) guarded { for (frame in frames) frame(animation.animatedFraction) }
+        }
+    }
+
+    /** At the start of the flight, after its delay. */
+    fun onStart(action: () -> Unit) {
+        starts += action
+    }
+
+    /** Each frame, with the fraction of the time, linear. */
+    fun onFrame(action: (fraction: Float) -> Unit) {
+        frames += action
+    }
+
+    /** At its end, also when it is cancelled or its start or a frame failed. */
+    fun onEnd(action: () -> Unit) {
+        ends += action
+    }
+
+    private fun guarded(work: () -> Unit) {
+        if (failed || elementStep(element, work = work)) return
+        failed = true
+        cancel()
     }
 
     override fun setInterpolator(value: TimeInterpolator?) {