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

package/src/particles.ts

@@ -1,6 +1,7 @@
 import { Application, Color, isIOS, type View } from '@nativescript/core'
 import { toView } from './animate.js'
 import type { Target } from './types.js'
+import { reducedMotion } from './config.js'
 
 export interface ConfettiOptions {
   /** Approximate number of particles in the burst. Defaults to 80. */
@@ -78,8 +79,7 @@ function start(target: Target, settings: Settings, overlay: boolean): () => void
   const view = toView(target)
   const running = overlay ? bursts : emitters
   running.get(view)?.()
-  if (!isIOS || settings.rate === 0 || UIAccessibilityIsReduceMotionEnabled())
-    return () => {}
+  if (!isIOS || settings.rate === 0 || reducedMotion()) return () => {}
   return new Emitter(view, settings, overlay, running).stop
 }
 
@@ -191,12 +191,12 @@ class Emitter {
   }
 
   private motionChanged = () => {
-    if (UIAccessibilityIsReduceMotionEnabled()) this.stop()
+    if (reducedMotion()) this.stop()
   }
 
   private update() {
     if (!this.view.isLoaded) return
-    if (UIAccessibilityIsReduceMotionEnabled()) return this.stop()
+    if (reducedMotion()) return this.stop()
     const native = this.view.nativeViewProtected as UIView | undefined
     const window = native?.window
     if (this.layer && (!native || !window)) return this.stop()

package/src/path.ts

@@ -0,0 +1,124 @@
+import { parsePath, type MotionPath } from './svg-path.js'
+import { reducedMotion, timeScale } from './config.js'
+import { createTrack, instantTrack, type Track } from './track.js'
+import {
+  mergeTransitions,
+  resolveTransition,
+  type Transition,
+  type ResolvedTransition,
+} from './transition.js'
+import type { Keyframes, KeyframeProperty } from './types.js'
+
+export type PathProperty = 'x' | 'y' | 'rotate'
+export interface PreparedPath {
+  readonly properties: readonly PathProperty[]
+  readonly starts: ReadonlyMap<PathProperty, number>
+  readonly transition: ResolvedTransition
+  track(property: PathProperty, offset: number, delay: number): Track
+}
+
+export function preparePath(
+  keyframes: Keyframes,
+  base: Transition,
+  overrides: Partial<Record<KeyframeProperty | 'path', Transition>>,
+): PreparedPath | undefined {
+  if (keyframes.orient !== undefined && typeof keyframes.orient !== 'boolean')
+    throw new TypeError('Path orient must be a boolean.')
+  if (keyframes.path === undefined) {
+    if (keyframes.orient !== undefined) throw new TypeError('orient requires a path.')
+    return undefined
+  }
+  if (keyframes.x !== undefined || keyframes.y !== undefined)
+    throw new TypeError('A path owns x and y; omit explicit x/y keyframes.')
+  if (keyframes.orient && keyframes.rotate !== undefined)
+    throw new TypeError('An oriented path owns rotate; omit explicit rotate keyframes.')
+  if (overrides.x || overrides.y || (keyframes.orient && overrides.rotate))
+    throw new TypeError('Use the path transition to time its coordinates together.')
+  const geometry = parsePath(keyframes.path)
+  const orient = keyframes.orient === true
+  const transition = resolveTransition(
+    overrides.path ? mergeTransitions(base, overrides.path) : base,
+    'opacity',
+    2,
+  )
+  if (
+    !Number.isFinite(transition.curve.type === 'tween' ? transition.curve.duration : 0) ||
+    !Number.isFinite(transition.delay)
+  )
+    throw new RangeError('Path duration and delay must be finite.')
+  const properties: readonly PathProperty[] = orient ? ['x', 'y', 'rotate'] : ['x', 'y']
+  const first = geometry.at(0)
+  let motion: ReturnType<typeof sample> | undefined
+  return {
+    properties,
+    starts: new Map(properties.map((property) => [property, first[property]])),
+    transition,
+    track(property, offset, requested) {
+      motion ??= sample(geometry, transition, orient)
+      const { progress, times, frames } = motion
+      const to = geometry.at(progress.to)[property] + offset
+      if (reducedMotion()) return instantTrack(property, to)
+      const delay = requested / timeScale()
+      const shift = delay - progress.delay
+      const pose = (time: number) =>
+        geometry.at(progress.valueAt(time - shift))[property] + offset
+      return {
+        ...progress,
+        property,
+        delay,
+        end: progress.end + shift,
+        arrival: progress.arrival + shift,
+        times,
+        values: offset
+          ? frames[property].map((value) => value + offset)
+          : frames[property],
+        to,
+        valueAt: pose,
+        velocityAt(time) {
+          if (time <= delay || time >= progress.end + shift) return 0
+          const position = progress.valueAt(time - shift)
+          if (position < 0 || position > 1) return 0
+          const epsilon = Math.min(1e-5, 0.01 / Math.max(1, geometry.length))
+          const a = Math.max(0, position - epsilon),
+            b = Math.min(1, position + epsilon)
+          return (
+            ((geometry.at(b)[property] - geometry.at(a)[property]) / (b - a)) *
+            progress.velocityAt(time - shift)
+          )
+        },
+      }
+    },
+  }
+}
+
+/** Sample scalar timing once, then project all coordinates through the same path. */
+function sample(geometry: MotionPath, transition: ResolvedTransition, orient: boolean) {
+  const progress = createTrack('opacity', [0, 1], transition, 0)
+  const count = Math.max(
+    1,
+    Math.min(
+      6000,
+      Math.max(
+        Math.ceil((progress.duration / 1000) * 60),
+        Math.ceil(geometry.length / 2),
+      ),
+    ),
+  )
+  const times = Array.from({ length: count + 1 }, (_, i) => i / count)
+  const frames: Record<PathProperty, number[]> = { x: [], y: [], rotate: [] }
+  for (const time of times) {
+    const position =
+      time === 0
+        ? 0
+        : time === 1
+          ? 1
+          : progress.valueAt(progress.delay + time * progress.duration)
+    if (!Number.isFinite(position))
+      throw new RangeError('Path easing must return finite progress.')
+    const pose = geometry.at(position)
+    frames.x.push(pose.x)
+    frames.y.push(pose.y)
+    if (orient) frames.rotate.push(pose.rotate)
+  }
+  return { progress, times, frames }
+}

package/src/playback-group.ts

@@ -1,4 +1,10 @@
-import { arrivalOf, setArrival, type ViewAnimation } from './engine.js'
+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'
@@ -104,6 +110,33 @@ export function playbackGroup(children: readonly ViewAnimation[]): PlaybackAnima
     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/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/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 }
+}