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

package/src/driver/ios-color.ts

@@ -0,0 +1,432 @@
+import { Color, type View } from '@nativescript/core'
+import { colorProperty } from '@nativescript/core/ui/styling/style-properties'
+import { formattedTextProperty, textProperty } from '@nativescript/core/ui/text-base'
+import { readColor, type ColorProperty } from '../color.js'
+import type { Track } from '../track.js'
+
+type TextView = View & {
+  text?: string
+  formattedText?: {
+    toString(): string
+    style: object
+    spans: { length: number; getItem(index: number): { text: string; style: object } }
+  }
+}
+type PaintLayer = {
+  layer: CALayer
+  path: 'backgroundColor' | 'borderColor' | 'fillColor'
+}
+type NativeView = UIView & { borderLayer?: CAShapeLayer }
+interface ColorHandle {
+  stop(): void
+  presented(): number | undefined
+}
+const playing = new WeakMap<View, Map<string, ColorHandle>>()
+const labelOf = (view: View) => {
+  const native = view.nativeViewProtected
+  return native instanceof UILabel
+    ? native
+    : native instanceof UIButton
+      ? native.titleLabel
+      : undefined
+}
+
+export function presentedIOSColor(
+  view: View,
+  property: ColorProperty,
+): number | undefined {
+  const current = playing.get(view)?.get(property)?.presented()
+  if (current !== undefined) return current
+  if (property === 'color' && !view.color) {
+    const label = labelOf(view)
+    if (label?.textColor) return Color.fromIosColor(label.textColor).argb >>> 0
+  }
+  return readColor(view, property)
+}
+
+/** Glyph entrances and color masks cannot own the same UILabel paint at once. */
+export function stopIOSColorText(view: View) {
+  playing.get(view)?.get('color')?.stop()
+}
+
+/** Core Animation paints a solid layer through an exact UILabel alpha mask. */
+export function playIOSColor(
+  view: View,
+  track: Track,
+  startedAt: number,
+  onEnd: (finished?: boolean) => void,
+): ColorHandle {
+  const property = track.property as ColorProperty
+  let target: PaintLayer | undefined
+  let restore: (() => void) | undefined
+  let stopped = false
+  let queued = false
+  let attached = false
+  let generation = 0
+  let textGeometry: string | undefined
+  const native = view.nativeViewProtected as NativeView
+  const label = property === 'color' ? labelOf(view) : undefined
+  const key = `jolt:${property}`
+  const listeners: [
+    object & {
+      on(name: string, callback: () => void): void
+      off(name: string, callback: () => void): void
+    },
+    string,
+    () => void,
+  ][] = []
+  const listen = (
+    object: typeof view | typeof view.style,
+    name: string,
+    callback: () => void,
+  ) => {
+    object.on(name, callback)
+    listeners.push([object, name, callback])
+  }
+  const cleanup = () => {
+    if (stopped) return
+    stopped = true
+    generation++
+    for (const [object, name, callback] of listeners) object.off(name, callback)
+    target?.layer.removeAnimationForKey(key)
+    restore?.()
+    if (playing.get(view)?.get(property) === handle) playing.get(view)?.delete(property)
+  }
+  const cancel = () => {
+    if (stopped) return
+    cleanup()
+    onEnd(false)
+  }
+  const scheduleCancel = () => {
+    if (stopped || queued) return
+    queued = true
+    void Promise.resolve().then(() => {
+      queued = false
+      if (!stopped) cancel()
+    })
+  }
+  const handle: ColorHandle = {
+    stop: cancel,
+    presented() {
+      if (!target) return track.values[0]
+      const layer = target.layer.presentationLayer()
+      // Before CA commits its first frame, the model already contains the target.
+      if (!layer) return track.valueAt(CACurrentMediaTime() * 1000 - startedAt)
+      const color = (layer as unknown as Record<string, interop.Pointer | null>)[
+        target.path
+      ]
+      return color
+        ? Color.fromIosColor(UIColor.colorWithCGColor(color)).argb >>> 0
+        : undefined
+    },
+  }
+  let entries = playing.get(view)
+  if (!entries) playing.set(view, (entries = new Map()))
+  entries.set(property, handle)
+  listen(view, 'unloaded', cancel)
+  for (const name of property === 'borderColor'
+    ? [
+        'borderTopColorChange',
+        'borderRightColorChange',
+        'borderBottomColorChange',
+        'borderLeftColorChange',
+      ]
+    : [`${property}Change`])
+    listen(view.style, name, scheduleCancel)
+  if (property === 'backgroundColor')
+    listen(view.style, 'backgroundImageChange', scheduleCancel)
+
+  const start = () => {
+    if (stopped || attached) return
+    if (property === 'color') {
+      if (
+        !label ||
+        !label.window ||
+        label.bounds.size.width <= 0 ||
+        label.bounds.size.height <= 0
+      )
+        return
+      let paint: ReturnType<typeof textPaint>
+      try {
+        paint = textPaint(view as TextView, label)
+      } catch {
+        return cancel()
+      }
+      if (!paint) return cancel()
+      target = { layer: paint.layer, path: 'backgroundColor' }
+      restore = paint.restore
+    } else {
+      // Core rasterizes an image together with its background into a pattern.
+      // Replacing that CGColor would erase the image.
+      if (
+        property === 'backgroundColor' &&
+        typeof view.backgroundImage === 'string' &&
+        view.backgroundImage
+      )
+        return cancel()
+      target =
+        property === 'borderColor' && native.borderLayer
+          ? { layer: native.borderLayer, path: 'fillColor' }
+          : { layer: native.layer, path: property }
+    }
+    attached = true
+    if (label) textGeometry = geometry(label)
+    attach()
+  }
+  const attach = () => {
+    if (!target || stopped) return
+    const instance = ++generation
+    const { layer, path } = target
+    CATransaction.begin()
+    CATransaction.setDisableActions(true)
+    ;(layer as unknown as Record<string, interop.Pointer>)[path] = new Color(
+      track.to,
+    ).ios.CGColor
+    CATransaction.commit()
+    const animation = CAKeyframeAnimation.animationWithKeyPath(path)
+    animation.values = NSArray.arrayWithArray(
+      track.values.map((color) => new Color(color).ios.CGColor),
+    )
+    animation.keyTimes = NSArray.arrayWithArray(track.times as number[])
+    animation.duration = Math.max(track.duration, 1) / 1000
+    animation.beginTime = layer.convertTimeFromLayer(
+      (startedAt + track.delay) / 1000,
+      null,
+    )
+    animation.fillMode = kCAFillModeBackwards
+    animation.removedOnCompletion = track.repeat !== Infinity
+    if (animation.respondsToSelector('setPreferredFrameRateRange:')) {
+      const maximum = Math.min(
+        120,
+        native.window?.screen.maximumFramesPerSecond ??
+          UIScreen.mainScreen.maximumFramesPerSecond,
+      )
+      animation.preferredFrameRateRange = CAFrameRateRangeMake(
+        Math.min(80, maximum),
+        maximum,
+        maximum,
+      )
+    }
+    if (track.repeat > 0) {
+      animation.autoreverses = track.reverse
+      animation.repeatCount = track.reverse ? (track.repeat + 1) / 2 : track.repeat + 1
+    }
+    CATransaction.begin()
+    if (track.repeat !== Infinity)
+      CATransaction.setCompletionBlock(() => {
+        if (!stopped && instance === generation) {
+          cleanup()
+          onEnd()
+        }
+      })
+    layer.addAnimationForKey(animation, key)
+    CATransaction.commit()
+  }
+
+  if (property === 'color') {
+    for (const name of ['textChange', 'formattedTextChange', 'isEnabledChange'])
+      listen(view, name, scheduleCancel)
+    for (const name of [
+      'fontInternalChange',
+      'textTransformChange',
+      'whiteSpaceChange',
+      'textOverflowChange',
+      'maxLinesChange',
+      'textStrokeChange',
+      'directionChange',
+      'visibilityChange',
+      'paddingLeftChange',
+      'paddingRightChange',
+      'paddingTopChange',
+      'paddingBottomChange',
+      'textAlignmentChange',
+      'letterSpacingChange',
+      'textDecorationChange',
+      'textShadowChange',
+      'lineHeightChange',
+    ])
+      listen(view.style, name, scheduleCancel)
+    listen(view, 'layoutChanged', () => {
+      if (attached) {
+        // Core can relayout after rebuilding an identical attributed string.
+        // Only changed glyph geometry invalidates the captured mask.
+        if (label && geometry(label) !== textGeometry) scheduleCancel()
+      } else start()
+    })
+    const formatted = (view as TextView).formattedText
+    if (formatted) {
+      const object = formatted as unknown as typeof view
+      listen(object, 'propertyChange', scheduleCancel)
+    }
+  } else if (property === 'borderColor') {
+    // Core may rebuild its border layer after a background or geometry change.
+    // Reattach on the same native timeline, without cancelling sibling colors.
+    let pending = false
+    const followBorder = () => {
+      if (stopped || pending) return
+      pending = true
+      void Promise.resolve().then(() => {
+        pending = false
+        if (stopped || !attached || !target) return
+        const next: PaintLayer = native.borderLayer
+          ? { layer: native.borderLayer, path: 'fillColor' }
+          : { layer: native.layer, path: 'borderColor' }
+        if (next.layer === target.layer && next.path === target.path) return
+        const previous = target
+        target = next
+        generation++
+        previous.layer.removeAnimationForKey(key)
+        attach()
+      })
+    }
+    listen(view, 'layoutChanged', followBorder)
+    listen(view.style, 'backgroundInternalChange', followBorder)
+  }
+  start()
+  return handle
+}
+
+function textPaint(
+  view: TextView,
+  native: UILabel,
+): { layer: CALayer; restore(): void } | undefined {
+  const owner = view.nativeViewProtected
+  const original = native.attributedText
+  const text = original?.string ?? native.text ?? ''
+  const bounds = native.bounds
+  const scale = native.window?.screen.scale ?? UIScreen.mainScreen.scale
+  if (
+    !text ||
+    Array.from(text).some((char) => {
+      const cp = char.codePointAt(0)!
+      return (
+        (cp >= 0x1f000 && cp <= 0x1faff) ||
+        (cp >= 0x2600 && cp <= 0x27bf) ||
+        cp === 0x200d ||
+        cp === 0x20e3 ||
+        cp === 0xfe0f
+      )
+    }) ||
+    (native.shadowColor && CGColorGetAlpha(native.shadowColor.CGColor) > 0) ||
+    bounds.size.width * bounds.size.height * scale * scale > 4_000_000
+  )
+    return undefined
+  const source = original
+    ? NSMutableAttributedString.alloc().initWithAttributedString(original)
+    : NSMutableAttributedString.alloc().initWithString(text)
+  const full = { location: 0, length: source.length }
+  let unsupported = false
+  for (const attribute of [NSAttachmentAttributeName, NSShadowAttributeName])
+    source.enumerateAttributeInRangeOptionsUsingBlock(
+      attribute,
+      full,
+      0 as NSAttributedStringEnumerationOptions,
+      (value) => {
+        if (attribute === NSShadowAttributeName) {
+          const color = (value as NSShadow | null)?.shadowColor as UIColor | null
+          if (color && CGColorGetAlpha(color.CGColor) > 0) unsupported = true
+        } else if (value != null) unsupported = true
+      },
+    )
+  if (unsupported) return undefined
+  const ranges: NSRange[] = []
+  const ownColor = (style: object) =>
+    ((style as Record<symbol, number>)[colorProperty.sourceKey] ?? 0) >= 2
+  const formatted = view.formattedText
+  if (formatted) {
+    let offset = 0
+    for (let i = 0; i < formatted.spans.length; i++) {
+      const span = formatted.spans.getItem(i)
+      if (!ownColor(formatted.style) && !ownColor(span.style))
+        ranges.push({ location: offset, length: span.text.length })
+      offset += span.text.length
+    }
+  } else ranges.push(full)
+  const maskText = NSMutableAttributedString.alloc().initWithAttributedString(source)
+  const hidden = NSMutableAttributedString.alloc().initWithAttributedString(source)
+  maskText.addAttributeValueRange(NSFontAttributeName, native.font, full)
+  // Keep per-span fonts, weights and paragraph metrics exactly as UILabel uses them.
+  if (original)
+    original.enumerateAttributeInRangeOptionsUsingBlock(
+      NSFontAttributeName,
+      full,
+      0 as NSAttributedStringEnumerationOptions,
+      (font, range) => {
+        if (font) maskText.addAttributeValueRange(NSFontAttributeName, font, range)
+      },
+    )
+  for (const name of [
+    NSForegroundColorAttributeName,
+    NSBackgroundColorAttributeName,
+    NSUnderlineColorAttributeName,
+    NSStrikethroughColorAttributeName,
+    NSStrokeColorAttributeName,
+  ])
+    maskText.addAttributeValueRange(name, UIColor.clearColor, full)
+  for (const range of ranges)
+    for (const name of [
+      NSForegroundColorAttributeName,
+      NSUnderlineColorAttributeName,
+      NSStrikethroughColorAttributeName,
+      NSStrokeColorAttributeName,
+    ]) {
+      maskText.addAttributeValueRange(name, UIColor.whiteColor, range)
+      hidden.addAttributeValueRange(name, UIColor.clearColor, range)
+    }
+  let image: UIImage | null
+  try {
+    native.attributedText = maskText
+    UIGraphicsBeginImageContextWithOptions(bounds.size, false, scale)
+    try {
+      CGContextTranslateCTM(
+        UIGraphicsGetCurrentContext()!,
+        -bounds.origin.x,
+        -bounds.origin.y,
+      )
+      native.drawTextInRect(bounds)
+      image = UIGraphicsGetImageFromCurrentImageContext()
+    } finally {
+      UIGraphicsEndImageContext()
+    }
+  } finally {
+    if (original) native.attributedText = original
+    else native.text = text
+  }
+  if (!image?.CGImage) return undefined
+  const mask = CALayer.new()
+  mask.frame = CGRectMake(0, 0, bounds.size.width, bounds.size.height)
+  mask.contents = image.CGImage
+  mask.contentsScale = scale
+  const layer = CALayer.new()
+  layer.frame = bounds
+  layer.name = 'jolt:color'
+  layer.mask = mask
+  native.attributedText = hidden
+  native.layer.addSublayer(layer)
+  return {
+    layer,
+    restore() {
+      layer.removeFromSuperlayer()
+      if (view.nativeViewProtected !== owner) return
+      const property = view.formattedText ? formattedTextProperty : textProperty
+      ;(view as unknown as Record<symbol, (value: unknown) => void>)[property.setNative]!(
+        view.formattedText ?? view.text,
+      )
+    },
+  }
+}
+
+function geometry(label: UILabel): string {
+  const bounds = label.bounds
+  const text = label.textRectForBoundsLimitedToNumberOfLines(bounds, label.numberOfLines)
+  return [
+    bounds.origin.x,
+    bounds.origin.y,
+    bounds.size.width,
+    bounds.size.height,
+    text.origin.x,
+    text.origin.y,
+    text.size.width,
+    text.size.height,
+  ].join(',')
+}

package/src/driver/ios.ts

@@ -1,14 +1,17 @@
 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
+  color?: ReturnType<typeof playIOSColor>
 }
 
-const keyPaths: Record<Property, string> = {
+const keyPaths: Record<NumericProperty, string> = {
   opacity: 'opacity',
   x: 'transform.translation.x',
   y: 'transform.translation.y',
@@ -49,6 +52,8 @@ export function createIOSDriver(): Driver {
     now: () => CACurrentMediaTime() * 1000,
 
     play(view, track, startedAt, onEnd): Handle {
+      if (isColorProperty(track.property))
+        return { layers: [], key: '', color: playIOSColor(view, track, startedAt, onEnd) }
       const layers = layersOf(view)
       const key = `jolt:${track.property}`
       const rotation = track.property.startsWith('rotate')
@@ -96,12 +101,17 @@ export function createIOSDriver(): Driver {
     stop(_view, handle) {
       const playing = handle as Handle
       const { layers, key, onStop } = playing
+      if (playing.color) {
+        playing.color.stop()
+        return
+      }
       playing.onStop = undefined
       for (const layer of layers) layer.removeAnimationForKey(key)
       onStop?.()
     },
 
-    presented: () => undefined,
+    presented: (view, property) =>
+      isColorProperty(property) ? presentedIOSColor(view, property) : undefined,
 
     after,
   }

package/src/engine.ts

@@ -4,6 +4,7 @@ import { playHaptics, type HapticOptions } from './haptics.js'
 import { readValue, writeValue, type Property } from './properties.js'
 import { createTrack, type Track } from './track.js'
 import type { ResolvedTransition } from './transition.js'
+import { isColorProperty } from './color.js'
 
 export interface Animation extends PromiseLike<boolean> {
   /**
@@ -112,13 +113,16 @@ export class ViewAnimation implements Animation {
         velocity = previous.track.velocityAt(elapsed)
         release(previous, now, false)
       } else {
-        current = readValue(this.view, property)
+        current =
+          (isColorProperty(property)
+            ? driver.presented(this.view, property)
+            : undefined) ?? readValue(this.view, property)
       }
       return createTrack(
         property,
         keyframes.map((value) => {
           if (value === null) return current
-          if (!relative) return value
+          if (!relative || isColorProperty(property)) return value
           return property === 'opacity' || property.startsWith('scale')
             ? current * value
             : current + value
@@ -147,11 +151,11 @@ export class ViewAnimation implements Animation {
     this.haptics = playHaptics(this.view, tracks, this.haptic, driver, now)
 
     for (const entry of this.entries) {
-      entry.handle = driver.play(this.view, entry.track, now, () => {
+      entry.handle = driver.play(this.view, entry.track, now, (finished = true) => {
         if (entry.done) return
         entry.done = true
         forget(entry)
-        this.ended(true)
+        this.ended(finished)
       })
     }
 
@@ -164,7 +168,7 @@ export class ViewAnimation implements Animation {
 
   private waitForLoad(plans: readonly Plan[]) {
     for (const { property, keyframes, relative } of plans) {
-      if (relative) continue
+      if (relative && !isColorProperty(property)) continue
       const first = keyframes[0]
       if (first !== null && first !== undefined) writeValue(this.view, property, first)
     }

package/src/index.ts

@@ -7,6 +7,8 @@ export { confetti, particles } from './particles.js'
 export type { ConfettiOptions, ParticleOptions } from './particles.js'
 export { shimmer } from './shimmer.js'
 export type { ShimmerOptions } from './shimmer.js'
+export { liquid } from './liquid.js'
+export type { LiquidOptions, LiquidEffect } from './liquid.js'
 export { loader } from './loader.js'
 export type { LoaderOptions, LoaderStyle } from './loader.js'
 export { reveal, conceal } from './reveal.js'
@@ -26,4 +28,5 @@ export type { Spring, SpringName, Timing, Transition, Tween } from './transition
 export { cubicBezier } from './easing.js'
 export type { CubicBezier, Easing, EasingFunction, EasingName } from './easing.js'
 export type { Animation } from './engine.js'
+export type { ColorValue, ColorKeyframes } from './color.js'
 export type * from './types.js'

package/src/liquid-grid.ts

@@ -0,0 +1,28 @@
+/** A periodic displacement field. The fixed boundary keeps transparent edges in bounds. */
+export function liquidGrid(
+  columns: number,
+  rows: number,
+  phase: number,
+  intensity: number,
+) {
+  const positions = new Float32Array((columns + 1) * (rows + 1) * 2)
+  const t = phase * Math.PI * 2
+  let index = 0
+  for (let row = 0; row <= rows; row++) {
+    const y = row / rows
+    for (let column = 0; column <= columns; column++) {
+      const x = column / columns
+      const edge = Math.sin(Math.PI * x) ** 2 * Math.sin(Math.PI * y) ** 2
+      const amount = 0.055 * intensity * edge
+      positions[index++] =
+        x +
+        amount *
+          (Math.sin(Math.PI * 2 * y + t) + 0.4 * Math.sin(Math.PI * 2 * (x + y) - 2 * t))
+      positions[index++] =
+        y +
+        amount *
+          (Math.cos(Math.PI * 2 * x - t) + 0.4 * Math.cos(Math.PI * 2 * (x - y) + 2 * t))
+    }
+  }
+  return positions
+}