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

package/platforms/android/java/org/rafaelaugusto/jolt/DecorationTarget.java

@@ -0,0 +1,154 @@
+package org.rafaelaugusto.jolt;
+
+import android.animation.StateListAnimator;
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.ColorDrawable;
+import android.view.View;
+import java.lang.ref.WeakReference;
+import java.lang.reflect.Constructor;
+import java.lang.reflect.Field;
+import java.util.WeakHashMap;
+
+/** ObjectAnimator's float target. No JavaScript enters the native frame loop. */
+public final class DecorationTarget {
+    private static final String BORDER = "org.nativescript.widgets.BorderDrawable";
+    private static final Field[][] FIELDS = fields();
+    private static final Constructor<?> CONSTRUCTOR = constructor();
+    private static final WeakHashMap<View, BackgroundLease> BACKGROUNDS = new WeakHashMap<>();
+    private static final WeakHashMap<View, Lease> LEASES = new WeakHashMap<>();
+    private final WeakReference<View> view;
+    private final int property;
+    private final int borderColor;
+    private float value;
+    private boolean acquired;
+
+    // 0 = uniform radius, 1 = uniform width, 2 = elevation, 3 = translationZ.
+    public DecorationTarget(View view, int property, float value, int borderColor) {
+        this.view = new WeakReference<>(view);
+        this.property = property;
+        this.value = value;
+        this.borderColor = borderColor;
+    }
+    private static Field[][] fields() {
+        try {
+            Class<?> type = Class.forName(BORDER);
+            String[][] names = {
+                {"borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius"},
+                {"borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"}
+            };
+            Field[][] result = new Field[2][4];
+            for (int i = 0; i < 2; i++) for (int j = 0; j < 4; j++) {
+                result[i][j] = type.getDeclaredField(names[i][j]);
+                result[i][j].setAccessible(true);
+            }
+            return result;
+        } catch (ReflectiveOperationException | SecurityException exception) { return null; }
+    }
+    private static Constructor<?> constructor() {
+        try { return Class.forName(BORDER).getConstructor(float.class); }
+        catch (ReflectiveOperationException | SecurityException exception) { return null; }
+    }
+    public boolean isSupported() {
+        View nativeView = view.get();
+        if (nativeView == null) return false;
+        if (property >= 2) return true;
+        Drawable drawable = ColorTarget.background(nativeView);
+        return FIELDS != null && ((drawable != null && drawable.getClass().getName().equals(BORDER)) ||
+            ((drawable == null || drawable.getClass() == ColorDrawable.class) && CONSTRUCTOR != null && ColorTarget.FIELDS != null));
+    }
+    public float getValue() { return value; }
+    public void setValue(float next) {
+        View nativeView = view.get();
+        if (nativeView == null) return;
+        value = next;
+        if (property >= 2) suspendStateAnimator(nativeView);
+        if (property == 2) { nativeView.setElevation(next); return; }
+        if (property == 3) { nativeView.setTranslationZ(next); return; }
+        ensureBackground(nativeView);
+        Drawable drawable = ColorTarget.background(nativeView);
+        if (drawable == null || !drawable.getClass().getName().equals(BORDER) || FIELDS == null) return;
+        try {
+            // Core rebuilds the paths from these fields in draw() and getOutline().
+            // Keep its bitmap, gradient, color and all other state on the same drawable.
+            for (Field field : FIELDS[property]) field.setFloat(drawable, next);
+            drawable.invalidateSelf();
+            nativeView.invalidateOutline();
+        } catch (IllegalAccessException exception) { /* Keep Core's final model. */ }
+    }
+    public void acquire() {
+        View nativeView = view.get();
+        if (nativeView == null || acquired) return;
+        acquired = true;
+        if (property < 2) {
+            BackgroundLease lease = BACKGROUNDS.get(nativeView);
+            if (lease == null) { lease = new BackgroundLease(); BACKGROUNDS.put(nativeView, lease); }
+            lease.count++;
+            ensureBackground(nativeView);
+            return;
+        }
+        Lease lease = LEASES.get(nativeView);
+        if (lease == null) {
+            lease = new Lease(nativeView.getStateListAnimator());
+            LEASES.put(nativeView, lease);
+            nativeView.setStateListAnimator(null);
+        }
+        lease.count++;
+        suspendStateAnimator(nativeView);
+    }
+    public void release() {
+        View nativeView = view.get();
+        if (!acquired || nativeView == null) return;
+        acquired = false;
+        if (property < 2) {
+            BackgroundLease lease = BACKGROUNDS.get(nativeView);
+            if (lease != null && --lease.count == 0) {
+                BACKGROUNDS.remove(nativeView);
+                if (lease.drawable != null && nativeView.getBackground() == lease.drawable) nativeView.setBackground(lease.original);
+            }
+            return;
+        }
+        suspendStateAnimator(nativeView);
+        Lease lease = LEASES.get(nativeView);
+        if (lease != null && --lease.count == 0) {
+            LEASES.remove(nativeView);
+            if (nativeView.getStateListAnimator() == null) {
+                float elevation = nativeView.getElevation(), z = nativeView.getTranslationZ();
+                nativeView.setStateListAnimator(lease.animator);
+                if (lease.animator != null) lease.animator.jumpToCurrentState();
+                nativeView.setElevation(elevation);
+                nativeView.setTranslationZ(z);
+            }
+        }
+    }
+    private void ensureBackground(View nativeView) {
+        BackgroundLease lease = BACKGROUNDS.get(nativeView);
+        Drawable original = nativeView.getBackground();
+        if (lease == null || (original != null && original.getClass() != ColorDrawable.class) || CONSTRUCTOR == null || ColorTarget.FIELDS == null) return;
+        try {
+            Drawable drawable = (Drawable) CONSTRUCTOR.newInstance(nativeView.getResources().getDisplayMetrics().density);
+            ColorTarget.FIELDS[0].setInt(drawable, original == null ? 0 : ((ColorDrawable) original).getColor());
+            for (int i = 1; i < ColorTarget.FIELDS.length; i++) ColorTarget.FIELDS[i].setInt(drawable, borderColor);
+            lease.original = original;
+            lease.drawable = drawable;
+            nativeView.setBackground(drawable);
+        } catch (ReflectiveOperationException exception) { /* Unsupported Core. */ }
+    }
+    private static final class BackgroundLease {
+        Drawable original, drawable;
+        int count;
+    }
+    private static void suspendStateAnimator(View view) {
+        Lease lease = LEASES.get(view);
+        StateListAnimator current = view.getStateListAnimator();
+        if (lease != null && current != null) {
+            // A Core model write may have installed an updated state animator.
+            lease.animator = current;
+            view.setStateListAnimator(null);
+        }
+    }
+    private static final class Lease {
+        StateListAnimator animator;
+        int count;
+        Lease(StateListAnimator animator) { this.animator = animator; }
+    }
+}

package/platforms/android/proguard-rules.pro

@@ -0,0 +1,7 @@
+-keep class org.rafaelaugusto.jolt.ColorTarget { *; }
+-keep class org.nativescript.widgets.BorderDrawable { *; }
+-keepnames class org.nativescript.widgets.BoxShadowDrawable
+-keepclassmembers class org.nativescript.widgets.BoxShadowDrawable {
+    public android.graphics.drawable.Drawable getWrappedDrawable();
+}
+-keep class org.rafaelaugusto.jolt.DecorationTarget { *; }

package/src/animate.ts

@@ -1,4 +1,17 @@
+import {
+  isDecorationProperty,
+  validateDecorationTarget,
+  validateDecorationFrames,
+} from './decoration.js'
+import { playbackGroup } from './playback-group.js'
+import type { PlaybackAnimation } from './playback.js'
 import { View } from '@nativescript/core'
+import {
+  isColorProperty,
+  parseColor,
+  validateColorTarget,
+  type ColorKeyframes,
+} from './color.js'
 import { DEFAULT_FRICTION, solveDecay } from './decay.js'
 import {
   arrivalOf,
@@ -51,7 +64,7 @@ export function animate(
   target: Target | readonly Target[],
   animation: Keyframes | PresetName,
   options?: AnimateOptions | SpringName,
-): Animation {
+): PlaybackAnimation {
   const { keyframes, base, overrides, stagger, relative, haptic } = prepare(
     animation,
     options,
@@ -59,15 +72,23 @@ export function animate(
   const feedback = resolveHaptic(haptic)
 
   if (!isList(target)) {
+    const view = toView(target)
+    for (const property of Object.keys(keyframes))
+      if (isColorProperty(property)) validateColorTarget(view, property)
+      else if (isDecorationProperty(property)) validateDecorationTarget(view, property)
     return new ViewAnimation(
-      toView(target),
+      view,
       plan(keyframes, base, overrides, 0, relative),
       feedback,
     )
   }
 
   const views = target.map(toView)
-  return group(
+  for (const view of views)
+    for (const property of Object.keys(keyframes))
+      if (isColorProperty(property)) validateColorTarget(view, property)
+      else if (isDecorationProperty(property)) validateDecorationTarget(view, property)
+  return playbackGroup(
     views.map(
       (view, index) =>
         new ViewAnimation(
@@ -80,6 +101,7 @@ export function animate(
             relative,
           ),
           feedback,
+          true,
         ),
     ),
   )
@@ -90,7 +112,7 @@ export function decay(
   target: Target | readonly Target[],
   velocity: DecayVelocity,
   options: DecayOptions = {},
-): Animation {
+): PlaybackAnimation {
   const friction = options.friction ?? DEFAULT_FRICTION
   if (!Number.isFinite(friction) || friction <= 0 || friction >= 1) {
     throw new RangeError('Decay friction must be between 0 and 1 exclusively.')
@@ -152,8 +174,10 @@ export function decay(
     ]
   })
   const views = toViews(target)
-  if (plans.length === 0) return group([])
-  return group(views.map((view) => new ViewAnimation(view, plans)))
+  if (plans.length === 0) return playbackGroup([])
+  return playbackGroup(
+    views.map((view) => new ViewAnimation(view, plans, undefined, true)),
+  )
 }
 
 /** Stops all or selected properties at their current values. `scale` stops both axes. */
@@ -282,7 +306,10 @@ export function startingValues(
   const { keyframes, relative } = prepare(animation, options)
   if (!keyframes) throw new Error(`Unknown preset "${animation}".`)
   return new Map(
-    expand(keyframes).map(([property, [first]]) => [property, relative ? null : first!]),
+    expand(keyframes).map(([property, [first]]) => [
+      property,
+      relative && !isColorProperty(property) ? null : first!,
+    ]),
   )
 }
 
@@ -290,7 +317,7 @@ function expand(keyframes: Keyframes): [Property, (number | null)[]][] {
   const expanded: [Property, (number | null)[]][] = []
   for (const [key, value] of Object.entries(keyframes) as [
     keyof Keyframes,
-    KeyframeValue | undefined,
+    KeyframeValue | ColorKeyframes | undefined,
   ][]) {
     if (value === undefined) continue
     if (key !== 'scale' && !isProperty(key)) throw new Error(`Can't animate "${key}".`)
@@ -304,7 +331,18 @@ function expand(keyframes: Keyframes): [Property, (number | null)[]][] {
   return expanded
 }
 
-function toKeyframes(property: Property, value: KeyframeValue): (number | null)[] {
+function toKeyframes(
+  property: Property,
+  value: KeyframeValue | ColorKeyframes,
+): (number | null)[] {
+  if (isColorProperty(property)) {
+    const frames = Array.isArray(value) ? [...value] : [null, value]
+    if (!frames.length) throw new TypeError(`Empty color keyframes for "${property}".`)
+    if (frames.length === 1) frames.unshift(null)
+    return frames.map((frame) => (frame === null ? null : parseColor(frame)))
+  }
+  if (typeof value !== 'number' && !Array.isArray(value))
+    throw new TypeError(`Invalid numeric keyframes for "${property}".`)
   const frames = typeof value === 'number' ? [null, value] : [...value]
   if (frames.length === 1) frames.unshift(null)
   if (
@@ -313,6 +351,7 @@ function toKeyframes(property: Property, value: KeyframeValue): (number | null)[
   ) {
     throw new Error(`Invalid keyframes for "${property}": ${JSON.stringify(value)}.`)
   }
+  if (isDecorationProperty(property)) validateDecorationFrames(property, frames)
   return frames
 }
 

package/src/color.ts

@@ -0,0 +1,101 @@
+import { Button, Color, Label, TextBase, isIOS, type View } from '@nativescript/core'
+
+export type ColorProperty = 'backgroundColor' | 'borderColor' | 'color'
+export type ColorValue = string | Color
+export type ColorKeyframes = ColorValue | readonly (ColorValue | null)[]
+export const isColorProperty = (property: string): property is ColorProperty =>
+  property === 'backgroundColor' || property === 'borderColor' || property === 'color'
+
+export function parseColor(value: unknown): number {
+  if (value instanceof Color) return value.argb >>> 0
+  if (typeof value !== 'string' || !Color.isValid(value))
+    throw new TypeError(`Invalid animation color: ${String(value)}.`)
+  return new Color(value).argb >>> 0
+}
+
+export function readColor(view: View, property: ColorProperty): number {
+  const value = property === 'borderColor' ? view.borderTopColor : view[property]
+  return value instanceof Color
+    ? value.argb >>> 0
+    : property === 'backgroundColor'
+      ? 0
+      : 0xff000000
+}
+
+export function validateColorTarget(view: View, property: ColorProperty) {
+  if (
+    property === 'color' &&
+    !(isIOS ? view instanceof Label || view instanceof Button : view instanceof TextBase)
+  )
+    throw new TypeError(
+      'Text color animation requires a Label or Button on iOS, or a TextBase on Android.',
+    )
+  if (property === 'borderColor') {
+    const colors = [
+      view.borderTopColor,
+      view.borderRightColor,
+      view.borderBottomColor,
+      view.borderLeftColor,
+    ]
+    if (
+      colors.some(
+        (color) => (color?.argb ?? 0xff000000) !== (colors[0]?.argb ?? 0xff000000),
+      )
+    )
+      throw new TypeError(
+        'borderColor animation requires the same starting color on every edge.',
+      )
+  }
+}
+
+const clamp = (value: number) => Math.max(0, Math.min(1, value))
+const linear = (channel: number) =>
+  channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
+const encoded = (channel: number) =>
+  channel <= 0.0031308 ? 12.92 * channel : 1.055 * channel ** (1 / 2.4) - 0.055
+
+function lab(value: number) {
+  const r = linear(((value >>> 16) & 255) / 255)
+  const g = linear(((value >>> 8) & 255) / 255)
+  const b = linear((value & 255) / 255)
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+  ] as const
+}
+
+/** Premultiplied OKLab interpolation, clipped to the sRGB output gamut. */
+export function colorMixer(from: number, to: number): (progress: number) => number {
+  const a = lab(from),
+    b = lab(to)
+  const alphaA = (from >>> 24) / 255,
+    alphaB = (to >>> 24) / 255
+  return (progress) => {
+    const p = clamp(progress)
+    if (p === 0) return from
+    if (p === 1) return to
+    const alpha = alphaA + (alphaB - alphaA) * p
+    if (alpha <= 0) return 0
+    const channel = (i: number) => (a[i]! * alphaA * (1 - p) + b[i]! * alphaB * p) / alpha
+    const L = channel(0),
+      A = channel(1),
+      B = channel(2)
+    const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3
+    const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3
+    const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3
+    const r = Math.round(
+      clamp(encoded(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s)) * 255,
+    )
+    const g = Math.round(
+      clamp(encoded(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s)) * 255,
+    )
+    const blue = Math.round(
+      clamp(encoded(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s)) * 255,
+    )
+    return ((Math.round(alpha * 255) << 24) | (r << 16) | (g << 8) | blue) >>> 0
+  }
+}

package/src/decoration.ts

@@ -0,0 +1,180 @@
+import { preserveZeroShadow } from './driver/ios-shadow.js'
+import { Color, Utils, isAndroid, type View } from '@nativescript/core'
+
+type Shadow = Exclude<View['boxShadow'], string>[number]
+export type DecorationProperty =
+  | 'borderRadius'
+  | 'borderWidth'
+  | 'shadowOpacity'
+  | 'shadowRadius'
+  | 'shadowOffsetX'
+  | 'shadowOffsetY'
+  | 'elevation'
+  | 'translationZ'
+
+export const decorationProperties: readonly DecorationProperty[] = [
+  'borderRadius',
+  'borderWidth',
+  'shadowOpacity',
+  'shadowRadius',
+  'shadowOffsetX',
+  'shadowOffsetY',
+  'elevation',
+  'translationZ',
+]
+export const radiusKeys = [
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomRightRadius',
+  'borderBottomLeftRadius',
+] as const
+export const widthKeys = [
+  'borderTopWidth',
+  'borderRightWidth',
+  'borderBottomWidth',
+  'borderLeftWidth',
+] as const
+const writing = new WeakSet<View>()
+export const isWritingDecoration = (view: View) => writing.has(view)
+export const isDecorationProperty = (key: string): key is DecorationProperty =>
+  decorationProperties.includes(key as DecorationProperty)
+
+/** Core lengths may be numbers, px strings or parsed { value, unit } lengths. */
+export function dip(value: unknown): number {
+  if (value === undefined || value === null) return 0
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string') {
+    const match = /^(-?(?:\d+(?:\.\d*)?|\.\d+))(dip|px)?$/.exec(value.trim())
+    if (match)
+      return Number(match[1]) / (match[2] === 'px' ? Utils.layout.getDisplayDensity() : 1)
+  }
+  if (typeof value === 'object' && 'value' in value && 'unit' in value) {
+    const length = value as { value: number; unit: string }
+    if (Number.isFinite(length.value) && (length.unit === 'dip' || length.unit === 'px'))
+      return length.value / (length.unit === 'px' ? Utils.layout.getDisplayDensity() : 1)
+  }
+  throw new TypeError('Decoration animations require finite DIP or px lengths.')
+}
+
+export function singleShadow(view: View): Shadow {
+  const shadows = view.boxShadow
+  if (!Array.isArray(shadows) || shadows.length !== 1 || shadows[0]!.inset)
+    throw new TypeError('Shadow animation requires one existing outer boxShadow.')
+  return shadows[0]!
+}
+
+export function validateDecorationTarget(view: View, property: DecorationProperty) {
+  const shadow = property.startsWith('shadow')
+  const z = property === 'elevation' || property === 'translationZ'
+  if ((shadow && isAndroid) || (z && !isAndroid))
+    throw new TypeError(`"${property}" is only supported on ${z ? 'Android' : 'iOS'}.`)
+  if (z) return
+  if (view.style.clipPath || view.style.cornerShape === 'squircle')
+    throw new TypeError(
+      'Decoration animations require circular corners without a clipPath.',
+    )
+  for (const keys of [radiusKeys, widthKeys]) {
+    const values = keys.map((key) => dip(view[key]))
+    if (values.some((value) => value !== values[0]))
+      throw new TypeError(
+        'Decoration animations require uniform border widths and radii.',
+      )
+  }
+  const colors = [
+    view.borderTopColor,
+    view.borderRightColor,
+    view.borderBottomColor,
+    view.borderLeftColor,
+  ].map((color) => color?.argb ?? 0)
+  if (colors.some((color) => color !== colors[0]))
+    throw new TypeError('Decoration animations require uniform border colors.')
+  if (shadow) {
+    const value = singleShadow(view)
+    for (const length of [
+      value.offsetX,
+      value.offsetY,
+      value.blurRadius,
+      value.spreadRadius,
+    ])
+      dip(length)
+  }
+  if (
+    property === 'borderRadius' &&
+    isAndroid &&
+    view.boxShadow &&
+    (!Array.isArray(view.boxShadow) || view.boxShadow.length)
+  )
+    throw new TypeError(
+      'Animate Android radius with elevation shadows; CSS boxShadow caches its shape.',
+    )
+}
+
+export function validateDecorationFrames(
+  property: DecorationProperty,
+  frames: readonly (number | null)[],
+) {
+  if (
+    frames.some((value) => value !== null && clampDecoration(property, value) !== value)
+  )
+    throw new RangeError(`Invalid keyframes for "${property}".`)
+}
+export function clampDecoration(property: DecorationProperty, value: number): number {
+  if (property === 'shadowOpacity') return Math.max(0, Math.min(1, value))
+  return property === 'borderRadius' ||
+    property === 'borderWidth' ||
+    property === 'shadowRadius' ||
+    property === 'elevation'
+    ? Math.max(0, value)
+    : value
+}
+
+export function readDecoration(view: View, property: DecorationProperty): number {
+  if (property === 'borderRadius') {
+    const radius = !isAndroid ? view.nativeViewProtected?.layer?.cornerRadius : undefined
+    return typeof radius === 'number' ? radius : dip(view.borderTopLeftRadius)
+  }
+  if (property === 'borderWidth') return dip(view.borderTopWidth)
+  if (property === 'elevation')
+    return view.nativeViewProtected?.getElevation
+      ? view.nativeViewProtected.getElevation() / Utils.layout.getDisplayDensity()
+      : view.androidElevation || 0
+  if (property === 'translationZ')
+    return (
+      view.nativeViewProtected?.getTranslationZ?.() / Utils.layout.getDisplayDensity() ||
+      0
+    )
+  const shadow = singleShadow(view)
+  if (property === 'shadowOpacity')
+    return ((shadow.color?.argb ?? 0xff000000) >>> 24) / 255
+  return property === 'shadowRadius'
+    ? dip(shadow.blurRadius) / 2
+    : dip(property === 'shadowOffsetX' ? shadow.offsetX : shadow.offsetY)
+}
+
+export function writeDecoration(view: View, property: DecorationProperty, raw: number) {
+  const value = clampDecoration(property, raw)
+  writing.add(view)
+  try {
+    if (property === 'borderRadius' || property === 'borderWidth') view[property] = value
+    else if (property === 'elevation') view.androidElevation = value
+    else if (property === 'translationZ')
+      view.nativeViewProtected?.setTranslationZ?.(
+        value * Utils.layout.getDisplayDensity(),
+      )
+    else {
+      const shadow = { ...singleShadow(view) }
+      if (property === 'shadowOpacity')
+        shadow.color = new Color(
+          ((Math.round(value * 255) << 24) | ((shadow.color?.argb ?? 0) & 0xffffff)) >>>
+            0,
+        )
+      else if (property === 'shadowRadius') shadow.blurRadius = value * 2
+      else if (property === 'shadowOffsetX') shadow.offsetX = value
+      else shadow.offsetY = value
+      view.boxShadow = [shadow]
+      if (!isAndroid) preserveZeroShadow(view)
+    }
+  } finally {
+    writing.delete(view)
+  }
+}