@rafaelaugusto/jolt 0.1.0-beta.9 → 0.1.0-rc.2

package/src/bottom-sheet/native.ts

@@ -0,0 +1,214 @@
+import {
+  Application,
+  Screen,
+  Utils,
+  isIOS,
+  type ScrollView,
+  type View,
+} from '@nativescript/core'
+
+function firstResponder(view: UIView): UIView | undefined {
+  if (view.isFirstResponder) return view
+  for (let i = 0; i < view.subviews.count; i++) {
+    const found = firstResponder(view.subviews.objectAtIndex(i))
+    if (found) return found
+  }
+  return undefined
+}
+
+export function windowHeight(view: View): number {
+  if (isIOS)
+    return (
+      (view.nativeViewProtected as UIView)?.window?.bounds.size.height ??
+      Screen.mainScreen.heightDIPs
+    )
+  const activity =
+    Application.android.foregroundActivity ?? Application.android.startActivity
+  if (android.os.Build.VERSION.SDK_INT >= 30 && activity)
+    return (
+      activity.getWindowManager().getCurrentWindowMetrics().getBounds().height() /
+      Utils.layout.getDisplayDensity()
+    )
+  return Screen.mainScreen.heightDIPs
+}
+
+export function captureFocus(panel: View, returnFocus?: View): () => void {
+  if (returnFocus)
+    return () => {
+      if (!returnFocus.isLoaded) return
+      returnFocus.focus()
+      returnFocus.accessibilityScreenChanged()
+    }
+  if (isIOS) {
+    const window = (panel.nativeViewProtected as UIView)?.window
+    const responder = window ? firstResponder(window) : undefined
+    const accessible = UIAccessibilityFocusedElement(null)
+    return () => {
+      if (responder?.window) responder.becomeFirstResponder()
+      UIAccessibilityPostNotification(
+        UIAccessibilityLayoutChangedNotification,
+        accessible ?? responder ?? null,
+      )
+    }
+  }
+  const activity =
+    Application.android.foregroundActivity ?? Application.android.startActivity
+  const previous = activity?.getCurrentFocus()
+  return () => {
+    if (previous?.isAttachedToWindow()) {
+      previous.requestFocus()
+      previous.sendAccessibilityEvent(
+        android.view.accessibility.AccessibilityEvent.TYPE_VIEW_FOCUSED,
+      )
+    }
+  }
+}
+
+export function revealFocusedField(panel: View, scroll?: ScrollView): void {
+  if (!scroll?.nativeViewProtected || !panel.nativeViewProtected) return
+  if (isIOS) {
+    const focused = firstResponder(panel.nativeViewProtected as UIView)
+    const native = scroll.nativeViewProtected as UIScrollView
+    if (focused?.isDescendantOfView(native))
+      native.scrollRectToVisibleAnimated(
+        focused.convertRectToView(focused.bounds, native),
+        false,
+      )
+  } else {
+    const focused = (panel.nativeViewProtected as android.view.View).findFocus()
+    if (focused)
+      focused.requestRectangleOnScreen(
+        new android.graphics.Rect(0, 0, focused.getWidth(), focused.getHeight()),
+        true,
+      )
+  }
+}
+
+export function dismissKeyboard(panel: View): void {
+  if (!panel.nativeViewProtected) return
+  if (isIOS) (panel.nativeViewProtected as UIView).endEditing(true)
+  else {
+    const focused = (panel.nativeViewProtected as android.view.View).findFocus()
+    if (focused) {
+      const manager = focused
+        .getContext()
+        .getSystemService(
+          android.content.Context.INPUT_METHOD_SERVICE,
+        ) as android.view.inputmethod.InputMethodManager
+      manager.hideSoftInputFromWindow(focused.getWindowToken(), 0)
+      focused.clearFocus()
+    }
+  }
+}
+
+/** Add only our actions; preserve an application's existing native accessibility actions. */
+export function sheetActions(
+  handle: View,
+  actions: readonly { label: string; run(): void }[],
+): () => void {
+  if (isIOS) {
+    const native = handle.nativeViewProtected as UIView
+    const previous = native.accessibilityCustomActions
+    const own = actions.map(({ label, run }) =>
+      UIAccessibilityCustomAction.alloc().initWithNameActionHandler(label, () => {
+        run()
+        return true
+      }),
+    )
+    const existing: UIAccessibilityCustomAction[] = []
+    if (previous)
+      for (let i = 0; i < previous.count; i++) existing.push(previous.objectAtIndex(i))
+    native.accessibilityCustomActions = NSArray.arrayWithArray([...existing, ...own])
+    return () => {
+      const current = native.accessibilityCustomActions
+      const retained: UIAccessibilityCustomAction[] = []
+      if (current)
+        for (let i = 0; i < current.count; i++) {
+          const action = current.objectAtIndex(i)
+          if (!own.includes(action)) retained.push(action)
+        }
+      native.accessibilityCustomActions = retained.length
+        ? NSArray.arrayWithArray(retained)
+        : null
+    }
+  }
+  const native = handle.nativeViewProtected as android.view.View
+  const compat = androidx.core.view.ViewCompat
+  const ids: number[] = []
+  let ended = false,
+    timer: ReturnType<typeof setTimeout> | undefined
+  // Core batches accessibility-style updates in a microtask and installs its delegate.
+  // Wrap that delegate afterwards, retaining its semantics and all existing actions.
+  const repair = () => {
+    if (ended || handle.nativeViewProtected !== native) return
+    compat.setAccessibilityDelegate(
+      native,
+      compat.getAccessibilityDelegate(native) ??
+        new androidx.core.view.AccessibilityDelegateCompat(),
+    )
+    if (ids.length) return
+    const node = native.createAccessibilityNodeInfo(),
+      existing = node.getActionList()
+    const used = new Set<number>()
+    for (let index = 0; index < existing.size(); index++)
+      used.add(existing.get(index).getId())
+    node.recycle()
+    const resources = native.getResources(),
+      packageName = native.getContext().getPackageName()
+    const available: number[] = []
+    for (let index = 0; index < 32; index++) {
+      const id = resources.getIdentifier(
+        `accessibility_custom_action_${index}`,
+        'id',
+        packageName,
+      )
+      if (id && !used.has(id)) available.push(id)
+    }
+    if (available.length < actions.length)
+      throw new Error(
+        'Not enough free Android accessibility actions for the sheet handle.',
+      )
+    for (let index = 0; index < actions.length; index++) {
+      const { label, run } = actions[index]!,
+        id = available[index]!
+      const action =
+        new androidx.core.view.accessibility.AccessibilityNodeInfoCompat.AccessibilityActionCompat(
+          id,
+          label,
+        )
+      compat.replaceAccessibilityAction(
+        native,
+        action,
+        label,
+        new androidx.core.view.accessibility.AccessibilityViewCommand({
+          perform: () => {
+            run()
+            return true
+          },
+        }),
+      )
+      ids.push(id)
+    }
+  }
+  const schedule = () => {
+    if (ended || timer !== undefined) return
+    timer = setTimeout(() => {
+      timer = undefined
+      repair()
+    }, 0)
+  }
+  const changes = [
+    'accessibleChange',
+    'accessibilityRoleChange',
+    'accessibilityStateChange',
+    'accessibilityMediaSessionChange',
+  ]
+  for (const event of changes) handle.style.on(event, schedule)
+  schedule()
+  return () => {
+    ended = true
+    if (timer !== undefined) clearTimeout(timer)
+    for (const event of changes) handle.style.off(event, schedule)
+    ids.forEach((id) => compat.removeAccessibilityAction(native, id))
+  }
+}

package/src/config.ts

@@ -11,6 +11,9 @@ export interface JoltConfig {
 }
 
 const settings: Required<JoltConfig> = { timeScale: 1, reducedMotion: 'user' }
+const listeners = new Set<(reduced: boolean) => void>()
+let reported = false
+let unwatch: (() => void) | undefined
 const preferences: readonly JoltConfig['reducedMotion'][] = ['user', 'always', 'never']
 
 /**
@@ -32,7 +35,10 @@ export function configure(options: JoltConfig): void {
       `Reduced motion must be 'user', 'always' or 'never', got ${String(reducedMotion)}.`,
     )
   if (timeScale !== undefined) settings.timeScale = timeScale
-  if (reducedMotion !== undefined) settings.reducedMotion = reducedMotion
+  if (reducedMotion !== undefined) {
+    settings.reducedMotion = reducedMotion
+    changed()
+  }
 }
 
 export function timeScale(): number {
@@ -44,3 +50,35 @@ export function reducedMotion(): boolean {
   if (settings.reducedMotion === 'user') return getDriver().reducedMotion?.() ?? false
   return settings.reducedMotion === 'always'
 }
+
+/**
+ * Calls back with the new value whenever `reducedMotion()` changes, from `configure()`
+ * or the platform setting. Returns a cleanup function.
+ *
+ * ```ts
+ * const off = onReducedMotion((reduced) => (illustration.visibility = reduced ? 'visible' : 'collapse'))
+ * ```
+ */
+export function onReducedMotion(callback: (reduced: boolean) => void): () => void {
+  if (typeof callback !== 'function')
+    throw new TypeError('onReducedMotion() takes a callback.')
+  const listener = (reduced: boolean) => callback(reduced)
+  if (listeners.size === 0) {
+    reported = reducedMotion()
+    unwatch = getDriver().watchReducedMotion?.(changed)
+  }
+  listeners.add(listener)
+  return () => {
+    if (!listeners.delete(listener) || listeners.size > 0) return
+    unwatch?.()
+    unwatch = undefined
+  }
+}
+
+function changed() {
+  if (listeners.size === 0) return
+  const reduced = reducedMotion()
+  if (reduced === reported) return
+  reported = reduced
+  for (const listener of [...listeners]) listener(reduced)
+}

package/src/decay.ts

@@ -3,6 +3,7 @@ export interface DecayMotion {
   to: number
   position(time: number): number
   velocity(time: number): number
+  interpolationError(start: number, end: number): number
 }
 
 /** Velocity retains this fraction every millisecond, independently of the display's refresh rate. */
@@ -41,5 +42,13 @@ export function solveDecay(
       time >= duration ? to : from - distance * Math.expm1(-rate * Math.max(0, time)),
     velocity: (time) =>
       time >= duration ? 0 : velocity * Math.exp(-rate * Math.max(0, time)),
+    interpolationError: (start, end) =>
+      (Math.abs(distance) *
+        rate *
+        rate *
+        Math.exp(-rate * Math.max(0, start)) *
+        (end - start) ** 2) /
+        8 +
+      (end >= duration ? Math.abs(distance) * Math.exp(-rate * duration) : 0),
   }
 }

package/src/drag.ts

@@ -5,7 +5,7 @@ import {
   type TouchGestureEventData,
   type View,
 } from '@nativescript/core'
-import { stop, toView } from './animate.js'
+import { toView } from './animate.js'
 import { DEFAULT_FRICTION } from './decay.js'
 import { DragInput } from './drag-input.js'
 import {
@@ -15,9 +15,18 @@ import {
   solveDragRelease,
   type DragCurve,
 } from './drag-physics.js'
-import { currentValue, ViewAnimation, type Plan } from './engine.js'
+import {
+  baseValue,
+  currentValue,
+  setBase,
+  stopBase,
+  ViewAnimation,
+  type Animation,
+  type Plan,
+} from './engine.js'
+import { asRoot, isMotionValue, type MotionValue } from './motion-value.js'
 import type { PlaybackAnimation } from './playback.js'
-import { readValue, writeValue } from './properties.js'
+import { createTrack } from './track.js'
 import type { Target } from './types.js'
 
 export interface DragPoint {
@@ -29,10 +38,10 @@ export interface DragEvent extends DragPoint {
   readonly velocityX: number
   readonly velocityY: number
 }
-export interface DragRelease extends DragEvent {
+export interface DragRelease<A extends Animation = PlaybackAnimation> extends DragEvent {
   readonly target: DragPoint
   /** False on interruption/cancellation. Check before applying completion effects. */
-  readonly animation: PlaybackAnimation
+  readonly animation: A
 }
 export interface DragOptions {
   /** Defaults to both. One finger only. */
@@ -51,6 +60,17 @@ export interface DragOptions {
   onCancel?: (event: DragEvent) => void
   onSettle?: (position: DragPoint) => void
 }
+/** Drags a motion value instead of the view. Bounds and snap points are in the value's units. */
+export interface DragValueOptions extends Omit<
+  DragOptions,
+  'axis' | 'snap' | 'onRelease'
+> {
+  /** Takes the position on every move and plays the release; bind views to it to follow. */
+  value: MotionValue
+  axis: 'x' | 'y'
+  snap?: readonly number[]
+  onRelease?: (event: DragRelease<Animation>) => void
+}
 export interface Drag {
   readonly dragging: boolean
   readonly settling: boolean
@@ -67,22 +87,28 @@ export interface Drag {
 }
 
 type Axis = 'x' | 'y'
+type Root = ReturnType<typeof asRoot>
 interface Settings {
   axes: Axis[]
   curves: Record<Axis, DragCurve>
-  callbacks: Pick<
-    DragOptions,
-    'onStart' | 'onMove' | 'onRelease' | 'onCancel' | 'onSettle'
-  >
+  value: Root | undefined
+  callbacks: Pick<DragOptions, 'onStart' | 'onMove' | 'onCancel' | 'onSettle'> & {
+    onRelease?: (event: DragRelease<Animation>) => void
+  }
 }
 const owners = new WeakMap<View, Drag>()
 
-function settings(options: DragOptions): Settings {
+function settings(options: DragOptions | DragValueOptions): Settings {
   if (!options || typeof options !== 'object')
     throw new TypeError('Drag options must be an object.')
   const axis = options.axis ?? 'both'
   if (!['x', 'y', 'both'].includes(axis))
     throw new TypeError('Drag axis must be x, y or both.')
+  const value = 'value' in options ? options.value : undefined
+  if (value !== undefined && !isMotionValue(value))
+    throw new TypeError('Drag value must be a motion value.')
+  if (value !== undefined && axis === 'both')
+    throw new TypeError('Dragging a motion value needs axis "x" or "y".')
   const friction = options.friction ?? DEFAULT_FRICTION
   if (!Number.isFinite(friction) || friction <= 0 || friction >= 1)
     throw new RangeError('Drag friction must be between 0 and 1 exclusively.')
@@ -152,18 +178,23 @@ function settings(options: DragOptions): Settings {
   const callbacks = {
     onStart: options.onStart,
     onMove: options.onMove,
-    onRelease: options.onRelease,
+    onRelease: options.onRelease as Settings['callbacks']['onRelease'],
     onCancel: options.onCancel,
     onSettle: options.onSettle,
   }
   for (const callback of Object.values(callbacks))
     if (callback !== undefined && typeof callback !== 'function')
       throw new TypeError('Drag callbacks must be functions.')
-  return { axes, curves, callbacks }
+  return { axes, curves, value: value && asRoot(value), callbacks }
 }
 
-/** Main-thread pan updates; release physics play through Jolt's native animation drivers. */
-export function drag(target: Target, options: DragOptions = {}): Drag {
+/**
+ * Main-thread pan updates; release physics play through Jolt's native animation drivers.
+ * With `value`, the gesture drives a motion value and the views bound to it.
+ */
+export function drag(target: Target, options: DragValueOptions): Drag
+export function drag(target: Target, options?: DragOptions): Drag
+export function drag(target: Target, options: DragOptions | DragValueOptions = {}): Drag {
   const view = toView(target)
   const config = settings(options) // Invalid replacements leave the existing owner intact.
   const previous = owners.get(view)
@@ -187,7 +218,7 @@ class DragController implements Drag {
   private attached = false
   private blocked = false
   private generation = 0
-  private release: PlaybackAnimation | undefined
+  private release: Animation | undefined
   private input = new DragInput()
   private origin = { x: 0, y: 0 }
   private last: DragEvent = { x: 0, y: 0, velocityX: 0, velocityY: 0 }
@@ -215,6 +246,8 @@ class DragController implements Drag {
     return this.destroyed
   }
   get position(): DragPoint {
+    const value = this.config.value
+    if (value) return { x: 0, y: 0, [this.config.axes[0]!]: value.base() }
     return { x: currentValue(this.view, 'x'), y: currentValue(this.view, 'y') }
   }
   cancel = () => {
@@ -303,9 +336,15 @@ class DragController implements Drag {
       this.cancel()
       if (!this.attached || this.destroyed || this.disabled) return
       this.blocked = false
-      // Claim just the enabled axes, preserving the native presentation on takeover.
-      stop(this.view, this.config.axes)
-      this.origin = { x: readValue(this.view, 'x'), y: readValue(this.view, 'y') }
+      const value = this.config.value
+      if (value) {
+        value.stopBase()
+        this.origin = this.position
+      } else {
+        // Claim just the enabled axes, preserving the native presentation on takeover.
+        stopBase(this.view, this.config.axes)
+        this.origin = { x: baseValue(this.view, 'x'), y: baseValue(this.view, 'y') }
+      }
       const size =
         (this.view.parent as View | undefined)?.getActualSize() ??
         this.view.getActualSize()
@@ -346,8 +385,11 @@ class DragController implements Drag {
           : clampDrag(raw, curve.bounds)
         if (axis === 'x') vx = input.velocityX * resistance
         else vy = input.velocityY * resistance
-        stop(this.view, [axis])
-        writeValue(this.view, axis, position[axis])
+        if (this.config.value) this.config.value.setBase(position[axis])
+        else {
+          stopBase(this.view, [axis])
+          setBase(this.view, axis, position[axis])
+        }
       }
       this.last = { ...position, velocityX: vx, velocityY: vy }
       if (event.state !== 3)
@@ -383,7 +425,11 @@ class DragController implements Drag {
         transition: { curve, delay: 0, repeat: 0, reverse: false },
       }
     })
-    const animation = new ViewAnimation(this.view, plans)
+    const [axis] = this.config.axes
+    const value = this.config.value
+    const animation = value
+      ? value.playTrack(createTrack(axis!, [event[axis!]], plans[0]!.transition, 0))
+      : new ViewAnimation(this.view, plans)
     this.release = animation
     void animation.finished.then((finished) => {
       if (generation !== this.generation || this.destroyed) return

package/src/driver/android-gradient.ts

@@ -0,0 +1,116 @@
+import { Utils, type View } from '@nativescript/core'
+import type { GradientFrame, GradientPainter, GradientType } from '../gradient.js'
+
+const floats = (values: readonly number[]) => {
+  const array = Array.create('float', values.length)
+  values.forEach((value, i) => (array[i] = value))
+  return array
+}
+const ints = (values: readonly number[]) => {
+  const array = Array.create('int', values.length)
+  values.forEach((value, i) => (array[i] = value | 0))
+  return array
+}
+
+/** A gradient drawable stacked on the view's own background: above its color, below its children. */
+export function androidGradient(
+  view: View,
+  type: GradientType,
+): GradientPainter | undefined {
+  let layer: org.rafaelaugusto.jolt.GradientLayer
+  try {
+    layer = new org.rafaelaugusto.jolt.GradientLayer(
+      type === 'linear' ? 0 : type === 'radial' ? 1 : 2,
+    )
+  } catch {
+    // A JS-only update cannot install the native plugin.
+    return undefined
+  }
+  let stack: android.graphics.drawable.LayerDrawable | undefined
+  let queued = false
+  let removed = false
+
+  const wrap = () => {
+    if (removed) return
+    const native = view.nativeViewProtected as android.view.View | undefined
+    if (!native) return
+    const corner = typeof view.borderRadius === 'number' ? view.borderRadius : 0
+    layer.setCorner(corner * Utils.layout.getDisplayDensity())
+    const background = native.getBackground()
+    if (stack && background === stack) return
+    const layers = Array.create(android.graphics.drawable.Drawable, 2)
+    layers[0] = background ?? new android.graphics.drawable.ColorDrawable(0)
+    layers[1] = layer
+    stack = new android.graphics.drawable.LayerDrawable(layers)
+    native.setBackground(stack)
+  }
+  // Core replaces the background drawable when its style changes; stack on the new one.
+  const rewrap = () => {
+    if (queued) return
+    queued = true
+    void Promise.resolve().then(() => {
+      queued = false
+      wrap()
+    })
+  }
+  view.on('loaded', wrap)
+  view.style.on('backgroundInternalChange', rewrap)
+  view.style.on('borderTopLeftRadiusChange', rewrap)
+  wrap()
+
+  return {
+    paint(frame: GradientFrame) {
+      layer.paint(
+        ints(frame.colors),
+        floats(frame.stops),
+        frame.angle,
+        frame.x,
+        frame.y,
+        frame.radius,
+      )
+    },
+    play(frames, times, timing, onEnd) {
+      let active = true
+      layer.play(
+        floats(times),
+        ints(frames.flatMap((frame) => frame.colors)),
+        floats(frames.flatMap((frame) => frame.stops)),
+        floats(frames.flatMap((frame) => [frame.angle, frame.x, frame.y, frame.radius])),
+        Math.round(timing.duration),
+        Math.round(timing.delay),
+        timing.repeat === Infinity ? -1 : timing.repeat,
+        timing.reverse,
+        new org.rafaelaugusto.jolt.GradientLayer.Listener({
+          onEnd: (finished: boolean) => {
+            if (!active) return
+            active = false
+            onEnd(finished)
+          },
+        }),
+      )
+      return {
+        control(elapsed, paused) {
+          if (active) layer.control(Math.round(elapsed), paused)
+        },
+        cancel() {
+          if (!active) return
+          active = false
+          layer.cancel()
+          onEnd(false)
+        },
+      }
+    },
+    remove() {
+      if (removed) return
+      removed = true
+      view.off('loaded', wrap)
+      view.style.off('backgroundInternalChange', rewrap)
+      view.style.off('borderTopLeftRadiusChange', rewrap)
+      layer.dispose()
+      const native = view.nativeViewProtected as android.view.View | undefined
+      if (native && stack && native.getBackground() === stack)
+        native.setBackground(stack.getDrawable(0))
+      stack = undefined
+    },
+  }
+}