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

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
+        if (track.repeat > 0) {
+          animation.autoreverses = track.reverse
+          animation.repeatCount = track.reverse
+            ? (track.repeat + 1) / 2
+            : track.repeat + 1
+        }
+        timing.configure(animation, layer)
+        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-layout.ts

@@ -0,0 +1,63 @@
+import type { View } from '@nativescript/core'
+
+type LayoutView = View & {
+  _isTransformed: boolean
+  _modifyNativeViewFrame(native: UIView, frame: CGRect): void
+}
+const retained = new WeakMap<View, { count: number; restore(): void }>()
+
+/**
+ * NativeScript caches whether its JS transform is nonidentity. Interactive native
+ * playback can move the actual model while that cached destination is identity.
+ * Let Core reset/restore the real transform when it next assigns a layout frame.
+ * This hook belongs only to the opted-in instance and only while tracks own it.
+ */
+export function retainInteractiveLayout(view: View): () => void {
+  const host = view as LayoutView
+  let entry = retained.get(view)
+  if (!entry) {
+    const original = host._modifyNativeViewFrame
+    if (typeof original !== 'function') return () => {}
+    const descriptor = Object.getOwnPropertyDescriptor(host, '_modifyNativeViewFrame')
+    let active = true
+    const wrapper: LayoutView['_modifyNativeViewFrame'] = function (
+      this: LayoutView,
+      native,
+      frame,
+    ) {
+      if (active)
+        this._isTransformed = !CATransform3DEqualToTransform(
+          native.layer.transform,
+          CATransform3DIdentity,
+        )
+      original.call(this, native, frame)
+    }
+    host._modifyNativeViewFrame = wrapper
+    entry = {
+      count: 0,
+      restore() {
+        active = false
+        const native = host.nativeViewProtected as UIView | undefined
+        if (native)
+          host._isTransformed = !CATransform3DEqualToTransform(
+            native.layer.transform,
+            CATransform3DIdentity,
+          )
+        if (host._modifyNativeViewFrame !== wrapper) return
+        if (descriptor) Object.defineProperty(host, '_modifyNativeViewFrame', descriptor)
+        else delete (host as Partial<LayoutView>)._modifyNativeViewFrame
+      },
+    }
+    retained.set(view, entry)
+  }
+  entry.count++
+  let released = false
+  return () => {
+    if (released) return
+    released = true
+    if (--entry.count === 0) {
+      entry.restore()
+      retained.delete(view)
+    }
+  }
+}

package/src/driver/ios-playback.ts

@@ -0,0 +1,51 @@
+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: CAKeyframeAnimation, 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
+      // With speed 0, CA folds an exact duration boundary back to the first
+      // frame. Hold the actual endpoint with a constant copy, also when a
+      // shorter property waits at its end while another one is being scrubbed.
+      if (paused && Number.isFinite(track.end) && position >= track.end) {
+        const values = animation.values!
+        const index = track.reverse && track.repeat % 2 === 1 ? 0 : values.count - 1
+        const value = values.objectAtIndex(index)
+        animation.values = NSArray.arrayWithArray([value, value])
+        animation.keyTimes = NSArray.arrayWithArray([0, 1])
+        animation.duration = 1
+        animation.repeatCount = 0
+        animation.autoreverses = false
+        animation.timeOffset = 0
+      }
+    },
+  }
+}

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()
+}