@rafaelaugusto/jolt 0.1.0-beta.4 → 0.1.0-beta.6

package/src/playback-group.ts

@@ -0,0 +1,143 @@
+import {
+  arrivalOf,
+  arrivalTimingOf,
+  setArrival,
+  setArrivalTiming,
+  type ViewAnimation,
+} from './engine.js'
+import { getDriver } from './driver/index.js'
+import { createClock, type PlaybackClock } from './playback.js'
+import { validateProgress, type PlaybackAnimation } from './playback.js'
+
+/** Staggered views share a finite time range. Shorter children remain seekable
+ * until the whole group settles, unless another animation has taken ownership. */
+export function playbackGroup(children: readonly ViewAnimation[]): PlaybackAnimation {
+  let paused = false
+  let settled = false
+  let finalProgress: number | undefined
+  let clock: PlaybackClock | undefined
+  let pendingProgress: number | undefined
+  const duration = () => Math.max(0, ...children.map((child) => child.duration))
+  const ensureClock = () => {
+    if (clock || settled || children.some((child) => !child.ready)) return
+    const driver = getDriver()
+    clock = driver.clock?.(duration()) ?? createClock(() => driver.now())
+    clock.seek(Math.max(0, ...children.map((child) => child.currentTime)))
+    if (paused) clock.pause()
+  }
+  const finishIfIdle = () => {
+    if (settled || paused || children.some((child) => !child.idle || child.paused)) return
+    settled = true
+    clock?.cancel()
+    for (const child of children) child.releaseGroup()
+  }
+  const seek = (value: number) => {
+    const total = duration()
+    validateProgress(value, total)
+    if (settled) return
+    if (children.some((child) => !child.ready)) {
+      pendingProgress = value
+      return
+    }
+    pendingProgress = undefined
+    ensureClock()
+    clock?.seek(total * value)
+    for (const child of children) child.seekTime(total * value)
+    finishIfIdle()
+  }
+  for (const child of children) {
+    child.onIdle(finishIfIdle)
+    child.onReady(() => {
+      ensureClock()
+      if (pendingProgress !== undefined && children.every((child) => child.ready))
+        seek(pendingProgress)
+      finishIfIdle()
+    })
+  }
+  const finished = Promise.all(children.map((child) => child.finished)).then(
+    (results) => {
+      finalProgress ??= results.every(Boolean)
+        ? 1
+        : duration()
+          ? Math.min(1, (clock?.time() ?? 0) / duration())
+          : 0
+      settled = true
+      clock?.cancel()
+      return results.every(Boolean)
+    },
+  )
+  const animation: PlaybackAnimation = {
+    finished,
+    get duration() {
+      return duration()
+    },
+    get paused() {
+      return paused
+    },
+    get progress() {
+      if (!Number.isFinite(duration()))
+        throw new RangeError('Progress requires a finite animation.')
+      if (pendingProgress !== undefined) return pendingProgress
+      return (
+        finalProgress ??
+        (settled ? 1 : duration() ? Math.min(1, (clock?.time() ?? 0) / duration()) : 0)
+      )
+    },
+    set progress(value) {
+      seek(value)
+    },
+    pause() {
+      if (!settled && !paused) {
+        paused = true
+        clock?.pause()
+        children.forEach((child) => child.pause())
+      }
+    },
+    play() {
+      if (!settled && paused) {
+        paused = false
+        clock?.play()
+        children.forEach((child) => child.play())
+        finishIfIdle()
+      }
+    },
+    stop() {
+      finalProgress = duration() ? Math.min(1, (clock?.time() ?? 0) / duration()) : 0
+      settled = true
+      clock?.cancel()
+      children.forEach((child) => child.stop())
+    },
+    then: (onfulfilled, onrejected) => finished.then(onfulfilled, onrejected),
+  }
+  setArrival(animation, Promise.all(children.map(arrivalOf)))
+  const listeners = new Set<() => void>()
+  const timings = children.map((child) => arrivalTimingOf(child)!)
+  const notify = () => {
+    for (const callback of [...listeners]) callback()
+  }
+  const unsubscribe = timings.map((timing) => timing.subscribe(notify))
+  setArrivalTiming(animation, {
+    read() {
+      const states = timings.map((timing) => timing.read())
+      return {
+        arrived: settled || states.every((state) => state.arrived),
+        paused: paused || states.some((state) => state.paused && !state.arrived),
+        remaining: states.some((state) => !state.arrived && state.remaining === undefined)
+          ? undefined
+          : Math.max(0, ...states.map((state) => (state.arrived ? 0 : state.remaining!))),
+      }
+    },
+    subscribe(callback) {
+      listeners.add(callback)
+      return () => listeners.delete(callback)
+    },
+  })
+  void finished.then(() => {
+    unsubscribe.forEach((off) => off())
+    notify()
+    listeners.clear()
+  })
+  ensureClock()
+  finishIfIdle()
+  return animation
+}

package/src/playback.ts

@@ -0,0 +1,62 @@
+import type { Animation } from './engine.js'
+
+/** Controls returned by animate() and decay(). Effects expose the base Animation. */
+export interface PlaybackAnimation extends Animation {
+  /** Pauses only the properties owned by this animation. */
+  pause(): void
+  /** Continues from the current position. Completed/stopped animations remain terminal. */
+  play(): void
+  readonly paused: boolean
+  /** Total milliseconds, including delays and repeats. Infinity for endless loops. */
+  readonly duration: number
+  /** Finite timeline position, from 0 to 1. Seeking preserves the playing/paused state. */
+  progress: number
+}
+
+export type PlaybackCommand = 'pause' | 'play' | 'seek'
+
+export interface PlaybackClock {
+  time(): number
+  pause(): void
+  play(): void
+  seek(ms: number): void
+  cancel(): void
+}
+
+/** Read only on user commands; there is no frame loop in JavaScript. */
+export function createClock(now: () => number, initial = 0): PlaybackClock {
+  let offset = initial
+  let anchor = now()
+  let paused = false
+  const time = () => offset + (paused ? 0 : now() - anchor)
+  return {
+    time,
+    pause() {
+      offset = time()
+      paused = true
+    },
+    play() {
+      if (paused) {
+        anchor = now()
+        paused = false
+      }
+    },
+    seek(ms) {
+      offset = ms
+      anchor = now()
+    },
+    cancel() {
+      offset = time()
+      paused = true
+    },
+  }
+}
+
+export function validateProgress(value: number, duration: number) {
+  if (!Number.isFinite(value) || value < 0 || value > 1)
+    throw new RangeError('Animation progress must be between 0 and 1.')
+  if (!Number.isFinite(duration))
+    throw new RangeError(
+      'Progress requires a finite animation; endless loops can pause and play.',
+    )
+}

package/src/press.ts

@@ -1,7 +1,7 @@
 import { Color, type EventData, type TouchGestureEventData } from '@nativescript/core'
 import { isColorProperty } from './color.js'
-import { animate, toView } from './animate.js'
-import { isProperty, readValue, type Property } from './properties.js'
+import { animate, startingValues, toView } from './animate.js'
+import { readValue } from './properties.js'
 import type { SpringName, Transition } from './transition.js'
 import type { AnimateOptions, Keyframes, Target } from './types.js'
 
@@ -23,9 +23,7 @@ export function press(
   options?: AnimateOptions | SpringName,
 ): () => void {
   const view = toView(target)
-  const properties = Object.keys(pressed).flatMap((key): Property[] =>
-    key === 'scale' ? ['scaleX', 'scaleY'] : isProperty(key) ? [key] : [],
-  )
+  const properties = [...startingValues(pressed, options).keys()]
   let rest: Keyframes | undefined
 
   const onTouch = (event: EventData) => {

package/src/properties.ts

@@ -1,9 +1,15 @@
 import { Color, type View } from '@nativescript/core'
+import {
+  isDecorationProperty,
+  readDecoration,
+  writeDecoration,
+  type DecorationProperty,
+} from './decoration.js'
 import { isColorProperty, readColor, type ColorProperty } from './color.js'
 
 export type NumericProperty =
   'opacity' | 'x' | 'y' | 'scaleX' | 'scaleY' | 'rotate' | 'rotateX' | 'rotateY'
-export type Property = NumericProperty | ColorProperty
+export type Property = NumericProperty | ColorProperty | DecorationProperty
 
 const viewKeys = {
   opacity: 'opacity',
@@ -29,6 +35,14 @@ const defaults: Record<NumericProperty, number> = {
 
 /** How close to its target a spring or decay has to be to count as settled. */
 export const precision: Record<Property, number> = {
+  borderRadius: 0.1,
+  borderWidth: 0.1,
+  shadowOpacity: 0.002,
+  shadowRadius: 0.1,
+  shadowOffsetX: 0.1,
+  shadowOffsetY: 0.1,
+  elevation: 0.1,
+  translationZ: 0.1,
   backgroundColor: 0.002,
   borderColor: 0.002,
   color: 0.002,
@@ -43,11 +57,12 @@ export const precision: Record<Property, number> = {
 }
 
 export function isProperty(key: string): key is Property {
-  return key in viewKeys || isColorProperty(key)
+  return Object.hasOwn(viewKeys, key) || isColorProperty(key) || isDecorationProperty(key)
 }
 
 export function readValue(view: View, property: Property): number {
   if (isColorProperty(property)) return readColor(view, property)
+  if (isDecorationProperty(property)) return readDecoration(view, property)
   const value = view[viewKeys[property]]
   return typeof value === 'number' && !Number.isNaN(value) ? value : defaults[property]
 }
@@ -57,5 +72,6 @@ export function writeValue(view: View, property: Property, value: number) {
     view[property] = new Color(value)
     return
   }
+  if (isDecorationProperty(property)) return writeDecoration(view, property, value)
   view[viewKeys[property]] = value
 }

package/src/reveal.ts

@@ -3,6 +3,7 @@ import { toView } from './animate.js'
 import { resolveEasing } from './easing.js'
 import type { Animation } from './engine.js'
 import type { Target } from './types.js'
+import { reducedMotion } from './config.js'
 
 export interface RevealOptions {
   /** Circle origin in DIPs from the target's top-left corner. Defaults to its center. */
@@ -243,14 +244,13 @@ class CircularAnimation implements Animation {
   }
 
   private motionChanged = () => {
-    if (UIAccessibilityIsReduceMotionEnabled()) this.end(true)
+    if (reducedMotion()) this.end(true)
   }
 
   private update() {
     if (!this.opening && !this.inherited && this.view.visibility !== 'visible')
       return this.end(true, true)
-    if (this.duration === 0 || UIAccessibilityIsReduceMotionEnabled())
-      return this.end(true)
+    if (this.duration === 0 || reducedMotion()) return this.end(true)
     if (this.waitingForLoad || !this.view.isLoaded) return
     const native = this.view.nativeViewProtected as MaskedView | undefined
     if (this.shape) {

package/src/roll-diff.ts

@@ -0,0 +1,57 @@
+export interface Grapheme {
+  text: string
+  /** UTF-16 offsets, the units NSString locations and Java char indices use. */
+  start: number
+  end: number
+}
+
+export interface RollChange {
+  /** The grapheme that rolls in, placed in the new text. */
+  next: Grapheme
+  /** The grapheme it replaces at the same position from the end, when there is one. */
+  previous: Grapheme | undefined
+}
+
+export interface RollDiff {
+  /** Positions that differ, from the last one backwards. */
+  changes: RollChange[]
+  /** Old graphemes to the left of the new text's first one; they roll out alone. */
+  removed: Grapheme[]
+}
+
+const segmenter =
+  typeof Intl !== 'undefined' && 'Segmenter' in Intl
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : undefined
+
+export function graphemes(text: string): Grapheme[] {
+  if (segmenter)
+    return [...segmenter.segment(text)].map(({ segment, index }) => ({
+      text: segment,
+      start: index,
+      end: index + segment.length,
+    }))
+  const pieces: Grapheme[] = []
+  let offset = 0
+  for (const character of text) {
+    pieces.push({ text: character, start: offset, end: offset + character.length })
+    offset += character.length
+  }
+  return pieces
+}
+
+/** Aligns both texts on their last grapheme, so the units digit stays put when the count grows. */
+export function diffFromEnd(previous: string, next: string): RollDiff {
+  const before = graphemes(previous)
+  const after = graphemes(next)
+  const changes: RollChange[] = []
+  const removed: Grapheme[] = []
+  const count = Math.max(before.length, after.length)
+  for (let offset = 1; offset <= count; offset++) {
+    const old = before[before.length - offset]
+    const piece = after[after.length - offset]
+    if (!piece) removed.push(old!)
+    else if (!old || old.text !== piece.text) changes.push({ next: piece, previous: old })
+  }
+  return { changes, removed }
+}