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

package/src/driver/ios-decoration.ts

@@ -0,0 +1,332 @@
+import type { View } from '@nativescript/core'
+import {
+  dip,
+  isWritingDecoration,
+  radiusKeys,
+  widthKeys,
+  validateDecorationTarget,
+  type DecorationProperty,
+} from '../decoration.js'
+import { iosPlayback } from './ios-playback.js'
+import type { Track } from '../track.js'
+
+type NativeView = UIView & { outerShadowContainerLayer?: CALayer }
+type Binding = { layer: CALayer; path: string; values: unknown[] }
+interface Handle {
+  elapsed(): number
+  control(elapsed: number, paused: boolean): void
+  track: Track
+  stop(): void
+  presented(): number | undefined
+  attach(): void
+}
+const playing = new WeakMap<View, Map<DecorationProperty, Handle>>()
+const paths = {
+  borderRadius: 'cornerRadius',
+  borderWidth: 'borderWidth',
+  shadowOpacity: 'shadowOpacity',
+  shadowRadius: 'shadowRadius',
+  shadowOffsetX: 'shadowOffset.width',
+  shadowOffsetY: 'shadowOffset.height',
+} as const
+
+export function syncIOSDecoration(view: View, excluding?: string) {
+  for (const [property, handle] of playing.get(view) ?? [])
+    if (property !== excluding) handle.attach()
+}
+export const presentedIOSDecoration = (view: View, property: DecorationProperty) =>
+  playing.get(view)?.get(property)?.presented()
+
+/** Animate Core's uniform border and its separate outer-shadow layers. */
+export function playIOSDecoration(
+  view: View,
+  track: Track,
+  startedAt: number,
+  onEnd: (finished?: boolean) => void,
+): Handle {
+  const timing = iosPlayback(track, startedAt)
+  const property = track.property as Exclude<
+    DecorationProperty,
+    'elevation' | 'translationZ'
+  >
+  const native = view.nativeViewProtected as NativeView
+  const key = `jolt:${property}`
+  let bindings: Binding[] = []
+  let stopped = false
+  let queued = false
+  let generation = 0
+  const entries = playing.get(view) ?? new Map<DecorationProperty, Handle>()
+  playing.set(view, entries)
+  const cleanup = () => {
+    if (stopped) return
+    stopped = true
+    generation++
+    view.off('unloaded', cancel)
+    view.off('layoutChanged', refresh)
+    view.style.off('backgroundInternalChange', refresh)
+    for (const event of changes) view.style.off(event, external)
+    for (const binding of bindings) binding.layer.removeAnimationForKey(key)
+    if (entries.get(property) === handle) entries.delete(property)
+  }
+  const cancel = () => {
+    if (!stopped) {
+      cleanup()
+      onEnd(false)
+    }
+  }
+  const refresh = () => {
+    if (stopped || queued) return
+    queued = true
+    void Promise.resolve().then(() => {
+      queued = false
+      if (!stopped && view.nativeViewProtected === native) handle.attach()
+    })
+  }
+  const external = (event: { eventName: string }) => {
+    if (isWritingDecoration(view)) return
+    const own =
+      property === 'borderRadius'
+        ? radiusKeys
+        : property === 'borderWidth'
+          ? widthKeys
+          : ['boxShadow']
+    void Promise.resolve().then(() => {
+      if (stopped) return
+      if (own.some((name) => event.eventName === `${name}Change`)) return cancel()
+      try {
+        validateDecorationTarget(view, property)
+      } catch {
+        cancel()
+      }
+    })
+  }
+  const changes = [
+    ...radiusKeys,
+    ...widthKeys,
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+    'clipPath',
+    'cornerShape',
+    'boxShadow',
+  ].map((name) => `${name}Change`)
+  const handle: Handle = {
+    track,
+    stop: cancel,
+    elapsed: timing.elapsed,
+    control(time, paused) {
+      if (!stopped) {
+        timing.control(time, paused)
+        handle.attach()
+      }
+    },
+    presented() {
+      if (timing.controlled) return undefined
+      const binding = bindings[0]
+      const layer = binding?.layer.presentationLayer()
+      if (!layer) return track.valueAt(timing.elapsed())
+      if (property === 'shadowOffsetX') return layer.shadowOffset.width
+      if (property === 'shadowOffsetY') return layer.shadowOffset.height
+      return (layer as unknown as Record<string, number>)[paths[property]]!
+    },
+    attach() {
+      if (stopped) return
+      const instance = ++generation
+      for (const binding of bindings) binding.layer.removeAnimationForKey(key)
+      bindings = []
+      // Path clipping and spread are nonlinear. Sample even a linear radius
+      // tween so its shadow and inner cutout follow the capped native corner.
+      const steps = Math.max(1, Math.min(6000, Math.ceil((track.duration * 60) / 1000)))
+      const times =
+        property === 'borderRadius'
+          ? [
+              ...new Set([
+                ...track.times,
+                ...Array.from({ length: steps + 1 }, (_, i) => i / steps),
+              ]),
+            ].sort((a, b) => a - b)
+          : [...track.times]
+      const values =
+        property === 'borderRadius'
+          ? times.map((time) =>
+              time === 1
+                ? track.values.at(-1)!
+                : track.valueAt(track.delay + time * track.duration),
+            )
+          : [...track.values]
+      if (property === 'borderRadius' || property === 'borderWidth') {
+        bindings.push({
+          layer: native.layer,
+          path: paths[property],
+          values:
+            property === 'borderRadius' && native.bounds?.size
+              ? values.map((value) =>
+                  Math.min(
+                    value,
+                    native.bounds.size.width / 2,
+                    native.bounds.size.height / 2,
+                  ),
+                )
+              : values,
+        })
+        if (property === 'borderRadius') {
+          const shadows = view.boxShadow
+          const layers = native.outerShadowContainerLayer?.sublayers
+          if (Array.isArray(shadows) && layers) {
+            for (let i = 0; i < Math.min(shadows.length, layers.count); i++) {
+              const layer = layers.objectAtIndex(i)
+              const spread = dip(shadows[i]!.spreadRadius)
+              bindings.push({
+                layer,
+                path: 'shadowPath',
+                values: values.map((radius) =>
+                  roundedPath(native.bounds, radius, spread),
+                ),
+              })
+              if (layer.mask)
+                bindings.push({
+                  layer: layer.mask,
+                  path: 'path',
+                  values: values.map((radius) =>
+                    shadowMask(native.bounds, radius, maskExtent(view, entries)),
+                  ),
+                })
+            }
+          }
+        }
+      } else {
+        const layer = native.outerShadowContainerLayer?.sublayers?.firstObject
+        if (!layer) return cancel()
+        bindings.push({ layer, path: paths[property], values: [...track.values] })
+        // Core's mask bounds are sized for the final blur/offset. Give intermediate
+        // samples room too. Radius owns the animated inner edge when it is active.
+        if (layer.mask && !entries.has('borderRadius')) {
+          CATransaction.begin()
+          CATransaction.setDisableActions(true)
+          ;(layer.mask as CAShapeLayer).path = shadowMask(
+            native.bounds,
+            native.layer.cornerRadius,
+            maskExtent(view, entries),
+          )
+          CATransaction.commit()
+        }
+      }
+      CATransaction.begin()
+      CATransaction.setDisableActions(true)
+      if (!timing.paused && track.repeat !== Infinity)
+        CATransaction.setCompletionBlock(() => {
+          if (stopped || generation !== instance) return
+          cleanup()
+          onEnd()
+        })
+      // Core treats a zero-alpha shadow as opaque. Commit the native endpoint
+      // explicitly too; otherwise a fade to zero would flash back on completion.
+      const paint = bindings[0]!.layer
+      if (property === 'shadowOpacity') paint.shadowOpacity = track.to
+      else if (property === 'shadowRadius') paint.shadowRadius = track.to
+      else if (property === 'shadowOffsetX')
+        paint.shadowOffset = CGSizeMake(track.to, paint.shadowOffset.height)
+      else if (property === 'shadowOffsetY')
+        paint.shadowOffset = CGSizeMake(paint.shadowOffset.width, track.to)
+      for (const { layer, path, values } of bindings) {
+        const animation = CAKeyframeAnimation.animationWithKeyPath(path)
+        animation.values = NSArray.arrayWithArray(values)
+        animation.keyTimes = NSArray.arrayWithArray(times)
+        animation.duration = Math.max(1, track.duration) / 1000
+        timing.configure(animation, layer)
+        if (track.repeat > 0) {
+          animation.autoreverses = track.reverse
+          animation.repeatCount = track.reverse
+            ? (track.repeat + 1) / 2
+            : track.repeat + 1
+        }
+        if (animation.respondsToSelector('setPreferredFrameRateRange:')) {
+          const max = Math.min(
+            120,
+            native.window?.screen.maximumFramesPerSecond ??
+              UIScreen.mainScreen.maximumFramesPerSecond,
+          )
+          animation.preferredFrameRateRange = CAFrameRateRangeMake(
+            Math.min(80, max),
+            max,
+            max,
+          )
+        }
+        layer.addAnimationForKey(animation, key)
+      }
+      CATransaction.commit()
+    },
+  }
+  entries.set(property, handle)
+  view.on('unloaded', cancel)
+  view.on('layoutChanged', refresh)
+  view.style.on('backgroundInternalChange', refresh)
+  for (const event of changes) view.style.on(event, external)
+  // All model endpoints have been committed before driver.play(). Each handle
+  // follows the same timeline even if Core redraws its layers during layout.
+  for (const active of entries.values()) active.attach()
+  return handle
+}
+
+function maskExtent(view: View, entries: Map<DecorationProperty, Handle>): number {
+  const shadows = Array.isArray(view.boxShadow) ? view.boxShadow : []
+  const maximum = (property: DecorationProperty, fallback: number) =>
+    Math.max(
+      Math.abs(fallback),
+      ...(entries.get(property)?.track.values.map(Math.abs) ?? []),
+    )
+  return Math.max(
+    1,
+    ...shadows.map(
+      (shadow) =>
+        maximum('shadowRadius', dip(shadow.blurRadius) / 2) * 6 +
+        Math.abs(dip(shadow.spreadRadius)) +
+        maximum('shadowOffsetX', dip(shadow.offsetX)) +
+        maximum('shadowOffsetY', dip(shadow.offsetY)) +
+        1,
+    ),
+  )
+}
+
+/** Keep identical path topology at radius zero so CA can interpolate it. */
+function roundedPath(bounds: CGRect, radius: number, spread = 0): interop.Pointer {
+  const rect = CGRectInset(bounds, -spread, -spread)
+  const r = Math.min(
+    Math.max(0, Math.min(radius, bounds.size.width / 2, bounds.size.height / 2) + spread),
+    Math.max(0, rect.size.width / 2),
+    Math.max(0, rect.size.height / 2),
+  )
+  const x = rect.origin.x,
+    y = rect.origin.y,
+    right = x + rect.size.width,
+    bottom = y + rect.size.height
+  const k = r * 0.5522847498307936
+  const path = CGPathCreateMutable()
+  CGPathMoveToPoint(path, null, x + r, y)
+  CGPathAddLineToPoint(path, null, right - r, y)
+  CGPathAddCurveToPoint(path, null, right - r + k, y, right, y + r - k, right, y + r)
+  CGPathAddLineToPoint(path, null, right, bottom - r)
+  CGPathAddCurveToPoint(
+    path,
+    null,
+    right,
+    bottom - r + k,
+    right - r + k,
+    bottom,
+    right - r,
+    bottom,
+  )
+  CGPathAddLineToPoint(path, null, x + r, bottom)
+  CGPathAddCurveToPoint(path, null, x + r - k, bottom, x, bottom - r + k, x, bottom - r)
+  CGPathAddLineToPoint(path, null, x, y + r)
+  CGPathAddCurveToPoint(path, null, x, y + r - k, x + r - k, y, x + r, y)
+  CGPathCloseSubpath(path)
+  return path
+}
+function shadowMask(bounds: CGRect, radius: number, extent: number): interop.Pointer {
+  const path = CGPathCreateMutable()
+  CGPathAddPath(path, null, roundedPath(bounds, radius))
+  CGPathAddRect(path, null, CGRectInset(bounds, -extent, -extent))
+  return path
+}

package/src/driver/ios-playback.ts

@@ -0,0 +1,37 @@
+import type { Track } from '../track.js'
+
+/** Each CAAnimation owns its clock; the view and its children keep their speed. */
+export function iosPlayback(track: Track, startedAt: number) {
+  let anchor = startedAt
+  let offset = 0
+  let paused = false
+  let controlled = false
+  const elapsed = () => offset + (paused ? 0 : CACurrentMediaTime() * 1000 - anchor)
+  return {
+    elapsed,
+    get controlled() {
+      return controlled
+    },
+    get paused() {
+      return paused
+    },
+    control(time: number, hold: boolean) {
+      controlled = true
+      offset = time
+      anchor = CACurrentMediaTime() * 1000
+      paused = hold
+    },
+    configure(animation: CAAnimation, layer: CALayer) {
+      const now = CACurrentMediaTime()
+      const position = elapsed()
+      animation.speed = paused ? 0 : 1
+      animation.timeOffset = paused ? Math.max(0, position - track.delay) / 1000 : 0
+      animation.beginTime = layer.convertTimeFromLayer(
+        paused ? now : now - position / 1000 + track.delay / 1000,
+        null,
+      )
+      animation.fillMode = paused ? 'both' : kCAFillModeBackwards
+      animation.removedOnCompletion = !paused && track.repeat !== Infinity
+    },
+  }
+}

package/src/driver/ios-shadow.ts

@@ -0,0 +1,50 @@
+import type { View } from '@nativescript/core'
+
+type BackgroundView = { _redrawNativeBackground?: (...args: unknown[]) => void }
+const repairs = new WeakSet<View>()
+
+/** Core treats alpha 0 as 1. Repair its model layer after background redraws,
+ * not on animation frames. The wrapper belongs only to this view and is
+ * removed when the shadow color changes. */
+export function preserveZeroShadow(view: View) {
+  const target = view as unknown as BackgroundView
+  const hasZero = () =>
+    Array.isArray(view.boxShadow) &&
+    view.boxShadow.some((shadow) => shadow.color.argb >>> 24 === 0)
+  if (!hasZero() || repairs.has(view)) return
+  const descriptor = Object.getOwnPropertyDescriptor(view, '_redrawNativeBackground')
+  const original = target._redrawNativeBackground
+  const apply = () => {
+    if (!hasZero()) return dispose()
+    if (!view.isLoaded) return
+    const layers = view.nativeViewProtected?.outerShadowContainerLayer?.sublayers as
+      NSArray<CALayer> | undefined
+    if (!layers || !Array.isArray(view.boxShadow)) return
+    CATransaction.begin()
+    CATransaction.setDisableActions(true)
+    for (let i = 0; i < Math.min(layers.count, view.boxShadow.length); i++)
+      if (view.boxShadow[i]!.color.argb >>> 24 === 0)
+        layers.objectAtIndex(i).shadowOpacity = 0
+    CATransaction.commit()
+  }
+  const redraw = function (this: BackgroundView, ...args: unknown[]) {
+    original!.apply(this, args)
+    apply()
+  }
+  const dispose = () => {
+    view.style.off('boxShadowChange', apply)
+    view.off('loaded', apply)
+    view.off('layoutChanged', apply)
+    if (original && target._redrawNativeBackground === redraw) {
+      if (descriptor) Object.defineProperty(view, '_redrawNativeBackground', descriptor)
+      else delete target._redrawNativeBackground
+    }
+    repairs.delete(view)
+  }
+  repairs.add(view)
+  if (original) target._redrawNativeBackground = redraw
+  view.style.on('boxShadowChange', apply)
+  view.on('loaded', apply)
+  view.on('layoutChanged', apply)
+  apply()
+}

package/src/driver/ios.ts

@@ -1,14 +1,23 @@
+import { iosPlayback } from './ios-playback.js'
+import { isDecorationProperty } from '../decoration.js'
+import {
+  playIOSDecoration,
+  presentedIOSDecoration,
+  syncIOSDecoration,
+} from './ios-decoration.js'
 import type { View } from '@nativescript/core'
-import type { Property } from '../properties.js'
+import type { NumericProperty } from '../properties.js'
+import { isColorProperty } from '../color.js'
+import { playIOSColor, presentedIOSColor } from './ios-color.js'
 import { after, type Driver } from './index.js'
 
 interface Handle {
-  layers: CALayer[]
-  key: string
-  onStop?: () => void
+  stop(): void
+  elapsed(): number
+  control(elapsed: number, paused: boolean): void
 }
 
-const keyPaths: Record<Property, string> = {
+const keyPaths: Record<NumericProperty, string> = {
   opacity: 'opacity',
   x: 'transform.translation.x',
   y: 'transform.translation.y',
@@ -49,6 +58,10 @@ export function createIOSDriver(): Driver {
     now: () => CACurrentMediaTime() * 1000,
 
     play(view, track, startedAt, onEnd): Handle {
+      if (isDecorationProperty(track.property))
+        return playIOSDecoration(view, track, startedAt, onEnd)
+      if (isColorProperty(track.property))
+        return playIOSColor(view, track, startedAt, onEnd)
       const layers = layersOf(view)
       const key = `jolt:${track.property}`
       const rotation = track.property.startsWith('rotate')
@@ -57,51 +70,87 @@ export function createIOSDriver(): Driver {
         ensurePerspective(view, layers)
       }
 
-      const animation = CAKeyframeAnimation.animationWithKeyPath(keyPaths[track.property])
-      // iOS 15+. The app must opt in through CADisableMinimumFrameDurationOnPhone.
-      if (animation.respondsToSelector('setPreferredFrameRateRange:')) {
-        const nativeView = view.nativeViewProtected as UIView
-        const screen = nativeView.window?.screen ?? UIScreen.mainScreen
-        const maximum = Math.min(120, screen.maximumFramesPerSecond)
-        animation.preferredFrameRateRange = CAFrameRateRangeMake(
-          Math.min(80, maximum),
-          maximum,
-          maximum,
+      const timing = iosPlayback(track, startedAt)
+      let stopped = false,
+        generation = 0
+      const attach = () => {
+        const instance = ++generation
+        const animation = CAKeyframeAnimation.animationWithKeyPath(
+          keyPaths[track.property as NumericProperty],
         )
+        // iOS 15+. The app must opt in through CADisableMinimumFrameDurationOnPhone.
+        if (animation.respondsToSelector('setPreferredFrameRateRange:')) {
+          const nativeView = view.nativeViewProtected as UIView
+          const screen = nativeView.window?.screen ?? UIScreen.mainScreen
+          const maximum = Math.min(120, screen.maximumFramesPerSecond)
+          animation.preferredFrameRateRange = CAFrameRateRangeMake(
+            Math.min(80, maximum),
+            maximum,
+            maximum,
+          )
+        }
+        animation.values = NSArray.arrayWithArray(
+          track.values.map((value) => (rotation ? radians(value) : value)),
+        )
+        animation.keyTimes = NSArray.arrayWithArray(track.times as number[])
+        animation.duration = Math.max(track.duration, 1) / 1000
+        // Keep infinite loops when iOS removes animations on backgrounding.
+        // They are removed explicitly when stopped or replaced.
+        if (track.repeat > 0) {
+          animation.autoreverses = track.reverse
+          animation.repeatCount = track.reverse
+            ? (track.repeat + 1) / 2
+            : track.repeat + 1
+        }
+
+        CATransaction.begin()
+        if (!timing.paused && !infinite)
+          CATransaction.setCompletionBlock(() => {
+            if (stopped || instance !== generation) return
+            stopped = true
+            onEnd()
+          })
+        for (const layer of layers) {
+          timing.configure(animation, layer)
+          layer.addAnimationForKey(animation, key)
+        }
+        CATransaction.commit()
       }
-      animation.values = NSArray.arrayWithArray(
-        track.values.map((value) => (rotation ? radians(value) : value)),
-      )
-      animation.keyTimes = NSArray.arrayWithArray(track.times as number[])
-      animation.duration = Math.max(track.duration, 1) / 1000
-      animation.beginTime = (startedAt + track.delay) / 1000
-      animation.fillMode = kCAFillModeBackwards
-      // Keep infinite loops when iOS removes animations on backgrounding.
-      // They are removed explicitly when stopped or replaced.
-      animation.removedOnCompletion = !infinite
-      if (track.repeat > 0) {
-        animation.autoreverses = track.reverse
-        animation.repeatCount = track.reverse ? (track.repeat + 1) / 2 : track.repeat + 1
+      attach()
+      return {
+        elapsed: timing.elapsed,
+        control(time, paused) {
+          if (!stopped) {
+            timing.control(time, paused)
+            attach()
+          }
+        },
+        stop() {
+          if (stopped) return
+          stopped = true
+          generation++
+          for (const layer of layers) layer.removeAnimationForKey(key)
+          onEnd(false)
+        },
       }
-
-      CATransaction.begin()
-      // iOS completes the transaction on backgrounding even if the loop is retained.
-      if (!infinite) CATransaction.setCompletionBlock(onEnd)
-      for (const layer of layers) layer.addAnimationForKey(animation, key)
-      CATransaction.commit()
-
-      return { layers, key, onStop: infinite ? onEnd : undefined }
     },
 
     stop(_view, handle) {
-      const playing = handle as Handle
-      const { layers, key, onStop } = playing
-      playing.onStop = undefined
-      for (const layer of layers) layer.removeAnimationForKey(key)
-      onStop?.()
+      ;(handle as Handle).stop()
+    },
+    control(_view, handle, elapsed, paused) {
+      ;(handle as Handle).control(elapsed, paused)
     },
+    elapsed: (handle) => (handle as Handle).elapsed(),
+
+    sync: syncIOSDecoration,
 
-    presented: () => undefined,
+    presented: (view, property) =>
+      isDecorationProperty(property)
+        ? presentedIOSDecoration(view, property)
+        : isColorProperty(property)
+          ? presentedIOSColor(view, property)
+          : undefined,
 
     after,
   }