@rafaelaugusto/jolt 0.1.0-beta.3 → 0.1.0-beta.5

package/src/driver/android-color.ts

@@ -0,0 +1,170 @@
+import { type View } from '@nativescript/core'
+import { readColor, type ColorProperty } from '../color.js'
+import { androidPlayback, type AndroidPlayback } from './android-playback.js'
+import type { PlaybackCommand } from '../playback.js'
+import type { Track } from '../track.js'
+
+interface NativeTarget {
+  getColor(): number
+  setColor(value: number): void
+  isSupported(): boolean
+}
+interface ColorHandle {
+  control(elapsed: number, paused: boolean, command?: PlaybackCommand): void
+  cancel(): void
+  elapsed(): number
+  target: NativeTarget
+}
+const playing = new WeakMap<View, Map<ColorProperty, ColorHandle>>()
+
+export function syncAndroidColor(view: View) {
+  for (const handle of playing.get(view)?.values() ?? [])
+    handle.target.setColor(handle.target.getColor())
+}
+
+export function presentedAndroidColor(view: View, property: ColorProperty): number {
+  const active = playing.get(view)?.get(property)
+  if (active) return active.target.getColor() >>> 0
+  if (property === 'color' && view.nativeViewProtected instanceof android.widget.TextView)
+    return view.nativeViewProtected.getCurrentTextColor() >>> 0
+  return readColor(view, property)
+}
+
+export function playAndroidColor(
+  view: View,
+  track: Track,
+  onEnd: (finished?: boolean) => void,
+): ColorHandle {
+  const property = track.property as ColorProperty
+  const changes =
+    property === 'borderColor'
+      ? [
+          'borderTopColorChange',
+          'borderRightColorChange',
+          'borderBottomColorChange',
+          'borderLeftColorChange',
+        ]
+      : [`${property}Change`]
+  const bridge = globalThis as unknown as {
+    org: {
+      rafaelaugusto: {
+        jolt: {
+          ColorTarget: new (
+            view: android.view.View,
+            property: number,
+            color: number,
+          ) => NativeTarget
+        }
+      }
+    }
+  }
+  let target: NativeTarget
+  try {
+    target = new bridge.org.rafaelaugusto.jolt.ColorTarget(
+      view.nativeViewProtected,
+      property === 'backgroundColor' ? 0 : property === 'borderColor' ? 1 : 2,
+      track.values[0]! | 0,
+    )
+  } catch {
+    // A JS-only update cannot install the native plugin. Keep the final model.
+    onEnd(false)
+    return {
+      cancel() {},
+      control() {},
+      elapsed: () => 0,
+      target: {
+        getColor: () => readColor(view, property),
+        setColor() {},
+        isSupported: () => false,
+      },
+    }
+  }
+  const frames = Array.create(android.animation.Keyframe, track.values.length)
+  track.values.forEach((value, index) => {
+    frames[index] = android.animation.Keyframe.ofInt(track.times[index]!, value | 0)
+  })
+  const holder = android.animation.PropertyValuesHolder.ofKeyframe('color', frames)
+  holder.setEvaluator(new android.animation.ArgbEvaluator())
+  const holders = Array.create(android.animation.PropertyValuesHolder, 1)
+  holders[0] = holder
+  const animator = android.animation.ObjectAnimator.ofPropertyValuesHolder(
+    target as unknown as java.lang.Object,
+    holders,
+  )
+  animator.setDuration(Math.max(track.duration, 1))
+  animator.setStartDelay(track.delay)
+  animator.setInterpolator(new android.view.animation.LinearInterpolator())
+  if (track.repeat > 0) {
+    animator.setRepeatCount(
+      Number.isFinite(track.repeat)
+        ? track.repeat
+        : android.animation.ValueAnimator.INFINITE,
+    )
+    animator.setRepeatMode(
+      track.reverse
+        ? android.animation.ValueAnimator.REVERSE
+        : android.animation.ValueAnimator.RESTART,
+    )
+  }
+  let stopped = false,
+    queued = false
+  const cleanup = () => {
+    if (stopped) return
+    stopped = true
+    view.off('unloaded', cancel)
+    if (property === 'color') {
+      view.off('textChange', invalidate)
+      view.off('formattedTextChange', invalidate)
+    }
+    for (const name of changes) view.style.off(name, invalidate)
+    if (playing.get(view)?.get(property) === handle) playing.get(view)?.delete(property)
+  }
+  let player: AndroidPlayback | undefined
+  const cancel = () => {
+    if (stopped) return
+    cleanup()
+    player?.cancel()
+    onEnd(false)
+  }
+  const invalidate = () => {
+    if (stopped || queued) return
+    queued = true
+    void Promise.resolve().then(() => {
+      queued = false
+      if (!stopped) cancel()
+    })
+  }
+  const handle: ColorHandle = {
+    target,
+    elapsed: () => player?.elapsed() ?? 0,
+    control(time, paused, command) {
+      player?.control(time, paused, command)
+    },
+    cancel() {
+      cleanup()
+      player?.cancel()
+    },
+  }
+  let entries = playing.get(view)
+  if (!entries) playing.set(view, (entries = new Map()))
+  entries.set(property, handle)
+  view.on('unloaded', cancel)
+  if (property === 'color') {
+    view.on('textChange', invalidate)
+    view.on('formattedTextChange', invalidate)
+  }
+  for (const name of changes) view.style.on(name, invalidate)
+  if (target.isSupported()) {
+    target.setColor(track.values[0]! | 0)
+    player = androidPlayback(animator, track, () => {
+      if (!stopped) {
+        cleanup()
+        onEnd()
+      }
+    })
+  } else {
+    cleanup()
+    onEnd(false)
+  }
+  return handle
+}

package/src/driver/android-decoration.ts

@@ -0,0 +1,182 @@
+import { Utils, type View } from '@nativescript/core'
+import {
+  isWritingDecoration,
+  radiusKeys,
+  widthKeys,
+  validateDecorationTarget,
+  type DecorationProperty,
+} from '../decoration.js'
+import { androidPlayback, type AndroidPlayback } from './android-playback.js'
+import type { PlaybackCommand } from '../playback.js'
+import type { Track } from '../track.js'
+interface NativeTarget {
+  getValue(): number
+  setValue(value: number): void
+  isSupported(): boolean
+  acquire(): void
+  release(): void
+}
+interface Handle {
+  control(elapsed: number, paused: boolean, command?: PlaybackCommand): void
+  cancel(): void
+  elapsed(): number
+  target: NativeTarget
+}
+const playing = new WeakMap<View, Map<DecorationProperty, Handle>>()
+const ids = { borderRadius: 0, borderWidth: 1, elevation: 2, translationZ: 3 } as const
+export function syncAndroidDecoration(view: View) {
+  for (const handle of playing.get(view)?.values() ?? [])
+    handle.target.setValue(handle.target.getValue())
+}
+export const presentedAndroidDecoration = (view: View, property: DecorationProperty) => {
+  const target = playing.get(view)?.get(property)?.target
+  return target ? target.getValue() / Utils.layout.getDisplayDensity() : undefined
+}
+export function playAndroidDecoration(
+  view: View,
+  track: Track,
+  onEnd: (finished?: boolean) => void,
+): Handle {
+  const property = track.property as keyof typeof ids
+  const density = Utils.layout.getDisplayDensity()
+  const bridge = globalThis as unknown as {
+    org: {
+      rafaelaugusto: {
+        jolt: {
+          DecorationTarget: new (
+            view: android.view.View,
+            property: number,
+            value: number,
+            borderColor: number,
+          ) => NativeTarget
+        }
+      }
+    }
+  }
+  let target: NativeTarget
+  try {
+    target = new bridge.org.rafaelaugusto.jolt.DecorationTarget(
+      view.nativeViewProtected,
+      ids[property],
+      track.values[0]! * density,
+      view.borderTopColor?.argb ?? 0,
+    )
+  } catch {
+    onEnd(false)
+    return {
+      cancel() {},
+      control() {},
+      elapsed: () => 0,
+      target: {
+        getValue: () => track.to * density,
+        setValue() {},
+        isSupported: () => false,
+        acquire() {},
+        release() {},
+      },
+    }
+  }
+  const frames = Array.create(android.animation.Keyframe, track.values.length)
+  track.values.forEach((value, index) => {
+    frames[index] = android.animation.Keyframe.ofFloat(
+      track.times[index]!,
+      value * density,
+    )
+  })
+  const holders = Array.create(android.animation.PropertyValuesHolder, 1)
+  holders[0] = android.animation.PropertyValuesHolder.ofKeyframe('value', frames)
+  const animator = android.animation.ObjectAnimator.ofPropertyValuesHolder(
+    target as unknown as java.lang.Object,
+    holders,
+  )
+  animator.setDuration(Math.max(track.duration, 1))
+  animator.setStartDelay(track.delay)
+  animator.setInterpolator(new android.view.animation.LinearInterpolator())
+  if (track.repeat > 0) {
+    animator.setRepeatCount(
+      Number.isFinite(track.repeat)
+        ? track.repeat
+        : android.animation.ValueAnimator.INFINITE,
+    )
+    animator.setRepeatMode(
+      track.reverse
+        ? android.animation.ValueAnimator.REVERSE
+        : android.animation.ValueAnimator.RESTART,
+    )
+  }
+  let stopped = false
+  const changes = [
+    ...radiusKeys,
+    ...widthKeys,
+    'clipPath',
+    'cornerShape',
+    'boxShadow',
+    'androidElevation',
+  ].map((name) => `${name}Change`)
+  const cleanup = () => {
+    if (stopped) return
+    stopped = true
+    view.off('unloaded', cancel)
+    for (const event of changes) view.style.off(event, external)
+    target.release()
+    if (playing.get(view)?.get(property) === handle) playing.get(view)?.delete(property)
+  }
+  let player: AndroidPlayback | undefined
+  const cancel = () => {
+    if (!stopped) {
+      cleanup()
+      player?.cancel()
+      onEnd(false)
+    }
+  }
+  const external = (event: { eventName: string }) => {
+    if (isWritingDecoration(view)) return
+    const own =
+      property === 'borderRadius'
+        ? radiusKeys
+        : property === 'borderWidth'
+          ? widthKeys
+          : property === 'elevation'
+            ? ['androidElevation']
+            : []
+    void Promise.resolve().then(() => {
+      if (stopped) return
+      if (own.some((name) => event.eventName === `${name}Change`)) return cancel()
+      try {
+        validateDecorationTarget(view, property)
+      } catch {
+        cancel()
+      }
+    })
+  }
+  const handle: Handle = {
+    target,
+    elapsed: () => player?.elapsed() ?? 0,
+    control(time, paused, command) {
+      player?.control(time, paused, command)
+    },
+    cancel() {
+      cleanup()
+      player?.cancel()
+    },
+  }
+  const entries = playing.get(view) ?? new Map<DecorationProperty, Handle>()
+  playing.set(view, entries)
+  entries.set(property, handle)
+  view.on('unloaded', cancel)
+  for (const event of changes) view.style.on(event, external)
+  if (target.isSupported()) {
+    target.acquire()
+    target.setValue(track.values[0]! * density)
+    player = androidPlayback(animator, track, () => {
+      if (!stopped) {
+        cleanup()
+        onEnd()
+      }
+    })
+  } else {
+    cleanup()
+    onEnd(false)
+  }
+  return handle
+}

package/src/driver/android-playback.ts

@@ -0,0 +1,157 @@
+import type { Track } from '../track.js'
+import type { PlaybackClock, PlaybackCommand } from '../playback.js'
+
+export interface AndroidPlayback {
+  cancel(): void
+  elapsed(): number
+  control(elapsed: number, paused: boolean, command?: PlaybackCommand): void
+}
+
+/** Reuse native keyframes when seeking, including rewinding into a start delay. */
+export function androidPlayback(
+  animator: android.animation.ValueAnimator,
+  track: Track,
+  onEnd: () => void,
+  onStart?: () => void,
+  onRelease?: () => void,
+): AndroidPlayback {
+  let suppressed = false
+  let stopped = false
+  let started = false
+  let acquired = false
+  let origin = 0
+  let delay = track.delay
+  let held: number | undefined
+  animator.addListener(
+    new android.animation.Animator.AnimatorListener({
+      onAnimationStart() {
+        if (!suppressed && !stopped) {
+          started = true
+          if (!acquired) {
+            acquired = true
+            onStart?.()
+          }
+        }
+      },
+      onAnimationRepeat() {},
+      onAnimationCancel() {
+        if (!suppressed && !stopped) onRelease?.()
+      },
+      onAnimationEnd() {
+        if (suppressed || stopped || held !== undefined) return
+        stopped = true
+        onRelease?.()
+        onEnd()
+      },
+    }),
+  )
+  const elapsed = () =>
+    held ?? (started ? origin + delay + animator.getCurrentPlayTime() : origin)
+  const control = (
+    position: number,
+    paused: boolean,
+    command: PlaybackCommand = 'seek',
+  ) => {
+    if (stopped) return
+    if (command === 'pause') {
+      held = position
+      animator.pause()
+      return
+    }
+    if (command === 'play') {
+      held = undefined
+      animator.resume()
+      return
+    }
+    suppressed = true
+    animator.cancel()
+    started = false
+    origin = Math.min(position, track.delay)
+    delay = Math.max(0, track.delay - position)
+    animator.setStartDelay(delay)
+    held = paused ? position : undefined
+    suppressed = false
+    animator.start()
+    if (paused) animator.pause()
+    if (position >= track.delay)
+      animator.setCurrentPlayTime(Math.max(0, position - track.delay))
+  }
+  animator.start()
+  return {
+    elapsed,
+    control,
+    cancel() {
+      if (stopped) return
+      stopped = true
+      onRelease?.()
+      animator.cancel()
+    },
+  }
+}
+
+/** Share one native clock among active animations. Pause it when every owner
+ * is paused, and dispose it when the last owner settles. No frame callbacks. */
+export function androidClockFactory() {
+  let animator: android.animation.ValueAnimator | undefined
+  let owners = 0,
+    running = 0,
+    accumulated = 0
+  const now = () => accumulated + (animator?.getCurrentPlayTime() ?? 0)
+  const start = () => {
+    if (animator) return
+    const values = Array.create('float', 2)
+    values[0] = 0
+    values[1] = 1
+    animator = android.animation.ValueAnimator.ofFloat(values)
+    animator.setDuration(60_000)
+    animator.setRepeatCount(android.animation.ValueAnimator.INFINITE)
+    animator.start()
+  }
+  const stop = () => {
+    accumulated = now()
+    animator?.cancel()
+    animator = undefined
+  }
+  return (_duration: number): PlaybackClock => {
+    start()
+    owners++
+    running++
+    let offset = 0,
+      anchor = now(),
+      paused = false,
+      stopped = false
+    const time = () => offset + (paused || stopped ? 0 : now() - anchor)
+    const pause = () => {
+      if (paused || stopped) return
+      offset = time()
+      paused = true
+      // getCurrentPlayTime keeps counting while a ValueAnimator is paused and
+      // corrects itself only on its next frame. Start a fresh marker on resume
+      // so command-time reads cannot jump forward and then backward.
+      if (--running === 0) stop()
+    }
+    return {
+      time,
+      pause,
+      play() {
+        if (!paused || stopped) return
+        if (running++ === 0) start()
+        anchor = now()
+        paused = false
+      },
+      seek(ms) {
+        offset = ms
+        anchor = now()
+      },
+      cancel() {
+        if (stopped) return
+        pause()
+        stopped = true
+        if (--owners === 0) {
+          stop()
+          accumulated = 0
+        }
+      },
+    }
+  }
+}

package/src/driver/android.ts

@@ -1,13 +1,27 @@
+import {
+  androidPlayback,
+  androidClockFactory,
+  type AndroidPlayback,
+} from './android-playback.js'
+import { isDecorationProperty } from '../decoration.js'
+import {
+  syncAndroidDecoration,
+  playAndroidDecoration,
+  presentedAndroidDecoration,
+} from './android-decoration.js'
 import { Utils, type View } from '@nativescript/core'
-import type { Property } from '../properties.js'
+import type { NumericProperty } from '../properties.js'
 import type { Driver } from './index.js'
+import { isColorProperty } from '../color.js'
+import {
+  playAndroidColor,
+  presentedAndroidColor,
+  syncAndroidColor,
+} from './android-color.js'
 
 type NativeView = android.view.View
 
-interface Handle {
-  cancel(): void
-  elapsed(): number
-}
+type Handle = AndroidPlayback
 
 /** Own only layers we create; keep app-configured hardware/software layers and paints intact. */
 function fadeLayer(view: View, nativeView: NativeView): (() => void) | undefined {
@@ -44,7 +58,7 @@ function fadeLayer(view: View, nativeView: NativeView): (() => void) | undefined
 }
 
 const accessors: Record<
-  Property,
+  NumericProperty,
   { get(view: NativeView): number; set(view: NativeView, value: number): void }
 > = {
   opacity: { get: (v) => v.getAlpha(), set: (v, value) => v.setAlpha(value) },
@@ -57,7 +71,7 @@ const accessors: Record<
   rotateY: { get: (v) => v.getRotationY(), set: (v, value) => v.setRotationY(value) },
 }
 
-const unit = (property: Property) =>
+const unit = (property: NumericProperty) =>
   property === 'x' || property === 'y' ? Utils.layout.getDisplayDensity() : 1
 
 export function createAndroidDriver(): Driver {
@@ -71,13 +85,21 @@ export function createAndroidDriver(): Driver {
     rotate: View.ROTATION,
     rotateX: View.ROTATION_X,
     rotateY: View.ROTATION_Y,
-  } satisfies Record<Property, unknown>
+  } satisfies Record<NumericProperty, unknown>
+  const clock = androidClockFactory()
   const interpolator = new android.view.animation.LinearInterpolator()
 
   return {
     now: () => android.os.SystemClock.uptimeMillis(),
+    clock,
+    control(_view, handle, elapsed, paused, command) {
+      ;(handle as Handle).control(elapsed, paused, command)
+    },
 
     play(view, track, _startedAt, onEnd) {
+      if (isDecorationProperty(track.property))
+        return playAndroidDecoration(view, track, onEnd)
+      if (isColorProperty(track.property)) return playAndroidColor(view, track, onEnd)
       const nativeView = view.nativeViewProtected as NativeView
       const scale = unit(track.property)
 
@@ -101,9 +123,6 @@ export function createAndroidDriver(): Driver {
         nativeView,
         holders,
       )
-      let cancelled = false
-      let ended = false
-      let started = false
       let restoreLayer: (() => void) | undefined
       const releaseLayer = () => {
         restoreLayer?.()
@@ -124,52 +143,37 @@ export function createAndroidDriver(): Driver {
             : android.animation.ValueAnimator.RESTART,
         )
       }
-      animator.addListener(
-        new android.animation.Animator.AnimatorListener({
-          onAnimationStart() {
-            started = true
-            if (
-              !cancelled &&
-              !ended &&
-              track.property === 'opacity' &&
-              track.values.some((value) => value !== track.values[0])
-            )
-              restoreLayer = fadeLayer(view, nativeView)
-          },
-          onAnimationRepeat() {},
-          onAnimationCancel() {
-            cancelled = true
-            releaseLayer()
-          },
-          onAnimationEnd() {
-            if (ended) return
-            ended = true
-            releaseLayer()
-            onEnd()
-          },
-        }),
-      )
-
       accessors[track.property].set(nativeView, track.values[0]! * scale)
-      animator.start()
-      return {
-        elapsed: () => (started ? track.delay + animator.getCurrentPlayTime() : 0),
-        cancel() {
-          // Cancel before native callbacks: Android can send onStart while cancelling a delay.
-          cancelled = true
-          releaseLayer()
-          animator.cancel()
+      return androidPlayback(
+        animator,
+        track,
+        onEnd,
+        () => {
+          if (
+            track.property === 'opacity' &&
+            track.values.some((value) => value !== track.values[0])
+          )
+            restoreLayer = fadeLayer(view, nativeView)
         },
-      } satisfies Handle
+        releaseLayer,
+      )
     },
 
     stop(_view, handle) {
       ;(handle as Handle).cancel()
     },
 
+    sync(view) {
+      syncAndroidDecoration(view)
+      syncAndroidColor(view)
+    },
+
     elapsed: (handle) => (handle as Handle).elapsed(),
 
     presented(view, property) {
+      if (isDecorationProperty(property))
+        return presentedAndroidDecoration(view, property)
+      if (isColorProperty(property)) return presentedAndroidColor(view, property)
       const nativeView = view.nativeViewProtected as NativeView | undefined
       return nativeView ? accessors[property].get(nativeView) / unit(property) : undefined
     },

package/src/driver/index.ts

@@ -1,3 +1,4 @@
+import type { PlaybackClock, PlaybackCommand } from '../playback.js'
 import { isAndroid, type View } from '@nativescript/core'
 import type { Property } from '../properties.js'
 import type { Track } from '../track.js'
@@ -8,8 +9,25 @@ export interface Driver {
   /** Milliseconds, on the clock the platform's animations run on. */
   now(): number
   /** Starts the track at `startedAt + track.delay` and calls `onEnd` once, however it ends. */
-  play(view: View, track: Track, startedAt: number, onEnd: () => void): unknown
+  play(
+    view: View,
+    track: Track,
+    startedAt: number,
+    onEnd: (finished?: boolean) => void,
+  ): unknown
   stop(view: View, handle: unknown): void
+  /** A native elapsed-time marker when system animation speed affects time. */
+  clock?(duration: number): PlaybackClock
+  /** Move only this native track to an elapsed time, optionally holding it. */
+  control?(
+    view: View,
+    handle: unknown,
+    elapsed: number,
+    paused: boolean,
+    command?: PlaybackCommand,
+  ): void
+  /** Reapply native presentation after a Core model write rebuilds its drawable/layers. */
+  sync?(view: View, excluding?: Property): void
   /** Track time, including its delay, when the native clock differs from `now()`. */
   elapsed?(handle: unknown): number
   /** The value on screen, when the platform knows it better than the track does. */