@rafaelaugusto/jolt 0.1.0-beta.10 → 0.1.0-beta.12

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.raw() }
     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.stop()
+        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.set(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.play(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,109 @@
+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
+
+  const wrap = () => {
+    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 {
+        cancel() {
+          if (!active) return
+          active = false
+          layer.cancel()
+          onEnd(false)
+        },
+      }
+    },
+    remove() {
+      view.off('loaded', wrap)
+      view.style.off('backgroundInternalChange', rewrap)
+      view.style.off('borderTopLeftRadiusChange', rewrap)
+      layer.cancel()
+      const native = view.nativeViewProtected as android.view.View | undefined
+      if (native && stack && native.getBackground() === stack)
+        native.setBackground(stack.getDrawable(0))
+      stack = undefined
+    },
+  }
+}

package/src/driver/ios-gradient.ts

@@ -0,0 +1,114 @@
+import { Color, type View } from '@nativescript/core'
+import {
+  gradientPoints,
+  type GradientFrame,
+  type GradientPainter,
+  type GradientType,
+} from '../gradient.js'
+
+const keys = ['colors', 'locations', 'startPoint', 'endPoint'] as const
+
+/** A CAGradientLayer at the back of the view's layer: above its background, below its children. */
+export function iosGradient(view: View, type: GradientType): GradientPainter {
+  const layer = CAGradientLayer.new()
+  layer.type =
+    type === 'linear'
+      ? kCAGradientLayerAxial
+      : type === 'radial'
+        ? kCAGradientLayerRadial
+        : kCAGradientLayerConic
+  let current: GradientFrame | undefined
+  let generation = 0
+
+  const native = () => view.nativeViewProtected as UIView | undefined
+  const size = () => {
+    const bounds = native()?.layer.bounds
+    return { width: bounds?.size.width ?? 0, height: bounds?.size.height ?? 0 }
+  }
+  const values = (frame: GradientFrame) => {
+    const { width, height } = size()
+    const { start, end: toward } = gradientPoints(type, frame, width, height)
+    // Core Animation starts a conic gradient on the side opposite its end point.
+    const end =
+      type === 'conic' ? { x: 2 * start.x - toward.x, y: 2 * start.y - toward.y } : toward
+    return {
+      colors: NSArray.arrayWithArray(
+        frame.colors.map((argb) => new Color(argb).ios.CGColor),
+      ),
+      locations: NSArray.arrayWithArray(frame.stops),
+      startPoint: NSValue.valueWithCGPoint(CGPointMake(start.x, start.y)),
+      endPoint: NSValue.valueWithCGPoint(CGPointMake(end.x, end.y)),
+    }
+  }
+  const attach = () => {
+    const host = native()
+    if (!host) return
+    CATransaction.begin()
+    CATransaction.setDisableActions(true)
+    if (layer.superlayer !== host.layer) host.layer.insertSublayerAtIndex(layer, 0)
+    layer.frame = host.layer.bounds
+    layer.cornerRadius = host.layer.cornerRadius
+    if (current) {
+      const model = values(current)
+      layer.colors = model.colors
+      layer.locations = model.locations
+      layer.startPoint = model.startPoint.CGPointValue
+      layer.endPoint = model.endPoint.CGPointValue
+    }
+    CATransaction.commit()
+  }
+  view.on('loaded', attach)
+  view.on('layoutChanged', attach)
+
+  return {
+    paint(frame) {
+      current = frame
+      generation++
+      for (const key of keys) layer.removeAnimationForKey(`jolt:gradient:${key}`)
+      attach()
+    },
+    play(frames, times, timing, onEnd) {
+      const instance = ++generation
+      current = frames[frames.length - 1]!
+      attach()
+      const sampled = frames.map(values)
+      const now = CACurrentMediaTime()
+      CATransaction.begin()
+      if (timing.repeat !== Infinity)
+        CATransaction.setCompletionBlock(() => {
+          if (instance === generation) onEnd(true)
+        })
+      for (const key of keys) {
+        const animation = CAKeyframeAnimation.animationWithKeyPath(key)
+        animation.values = NSArray.arrayWithArray(sampled.map((value) => value[key]))
+        animation.keyTimes = NSArray.arrayWithArray(times as number[])
+        animation.duration = Math.max(timing.duration, 1) / 1000
+        animation.beginTime = layer.convertTimeFromLayer(now + timing.delay / 1000, null)
+        animation.fillMode = kCAFillModeBackwards
+        if (timing.repeat > 0) {
+          animation.autoreverses = timing.reverse
+          animation.repeatCount = timing.reverse
+            ? (timing.repeat + 1) / 2
+            : timing.repeat + 1
+        }
+        layer.addAnimationForKey(animation, `jolt:gradient:${key}`)
+      }
+      CATransaction.commit()
+      return {
+        cancel() {
+          if (instance !== generation) return
+          generation++
+          for (const key of keys) layer.removeAnimationForKey(`jolt:gradient:${key}`)
+          onEnd(false)
+        },
+      }
+    },
+    remove() {
+      generation++
+      view.off('loaded', attach)
+      view.off('layoutChanged', attach)
+      layer.removeAllAnimations()
+      layer.removeFromSuperlayer()
+    },
+  }
+}

package/src/easing.ts

@@ -15,6 +15,7 @@ export type EasingName =
   | 'backOut'
   | 'backInOut'
   | 'anticipate'
+  | `${'quad' | 'cubic' | 'quart' | 'quint' | 'sine' | 'expo'}${'In' | 'Out' | 'InOut'}`
 
 export type Easing = EasingName | CubicBezier | EasingFunction
 
@@ -73,6 +74,13 @@ const mirror =
   (p) =>
     p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2
 
+const family = <N extends string>(name: N, easeIn: EasingFunction) =>
+  ({
+    [`${name}In`]: easeIn,
+    [`${name}Out`]: reverse(easeIn),
+    [`${name}InOut`]: mirror(easeIn),
+  }) as Record<`${N}${'In' | 'Out' | 'InOut'}`, EasingFunction>
+
 const easings: Record<EasingName, EasingFunction> = {
   linear,
   ease: cubicBezier(0.25, 0.1, 0.25, 1),
@@ -87,6 +95,12 @@ const easings: Record<EasingName, EasingFunction> = {
   backInOut: mirror(backIn),
   anticipate: (p) =>
     p <= 0.5 ? backIn(2 * p) / 2 : p >= 1 ? 1 : 1 - Math.pow(2, 10 - 20 * p) / 2,
+  ...family('quad', (p) => p ** 2),
+  ...family('cubic', (p) => p ** 3),
+  ...family('quart', (p) => p ** 4),
+  ...family('quint', (p) => p ** 5),
+  ...family('sine', (p) => (p >= 1 ? 1 : 1 - Math.cos((p * Math.PI) / 2))),
+  ...family('expo', (p) => (p <= 0 ? 0 : 2 ** (10 * p - 10))),
 }
 
 export function resolveEasing(easing: Easing): EasingFunction {