react-native-smooth-clip-view 0.1.0 → 0.2.1

package/src/drivers.ios.ts

@@ -0,0 +1,665 @@
+import { useEffect, useRef } from 'react';
+import { useSharedValue, type SharedValue } from 'react-native-reanimated';
+import { isRNRuntime, scheduleOnRN, scheduleOnUI } from 'react-native-worklets';
+import NativeSmoothClipModule from './smoothClipNative';
+import type {
+  ClipReduceMotion,
+  KeyframedClipAnimation,
+  SmoothClipAnimation,
+  SmoothClipDriver,
+  SmoothClipDriverOptions,
+  SpringClipAnimation,
+  TimingClipAnimation,
+} from './driverTypes';
+import {
+  allocateDriverId,
+  attachDriverState,
+  createDriverState,
+  detachDriverState,
+  getDriverState,
+  setDriverState,
+} from './driverState';
+import {
+  completeNativeAnimation,
+  synchronizeNativeCompletion,
+} from './nativeCompletion';
+import {
+  clipPresentationEquals,
+  createClipPresentation,
+  isFiniteClipPresentation,
+  type ClipGeometry,
+  type SmoothClipPresentation,
+} from './geometry';
+import {
+  createReactRequest,
+  rejectDriverRequests,
+  resolveReactRequest,
+} from './reactRequests';
+
+const INTERACTIVE = 0;
+const NATIVE = 1;
+
+const setPresentationHostFunction = NativeSmoothClipModule.setClipPresentation;
+const beginInteractionHostFunction = NativeSmoothClipModule.beginInteraction;
+const animateTimingHostFunction = NativeSmoothClipModule.animateTiming;
+const animateSpringHostFunction = NativeSmoothClipModule.animateSpring;
+const animateKeyframesHostFunction = NativeSmoothClipModule.animateKeyframes;
+const rejectAnimationHostFunction = NativeSmoothClipModule.rejectAnimation;
+const cancelAnimationHostFunction = NativeSmoothClipModule.cancelAnimation;
+const destroyDriverHostFunction = NativeSmoothClipModule.destroyDriver;
+
+// Workaround for react-native-worklets 0.10: the RN-side serialization cache
+// hands out one remote-function registry id per function forever, but the
+// registry entry is deleted as soon as any transient UI-side proxy of that
+// function is garbage collected. A later scheduleOnRN for the same function
+// then reads `undefined` from the registry and aborts in Value::getObject.
+// Pinning one UI-side reference for the app lifetime keeps the proxy — and
+// with it the registry entry — alive. Remove once worklets decouples registry
+// cleanup from proxy lifetime.
+scheduleOnUI((resolver: typeof resolveReactRequest) => {
+  'worklet';
+  (globalThis as Record<string, unknown>).__smoothClipPinnedResolver = resolver;
+}, resolveReactRequest);
+
+function reduceMotionCode(value: ClipReduceMotion): number {
+  switch (value) {
+    case 'always':
+      return 1;
+    case 'never':
+      return 2;
+    default:
+      return 0;
+  }
+}
+
+function animationIsFinite(
+  target: SmoothClipPresentation,
+  animation: SmoothClipAnimation
+): boolean {
+  'worklet';
+  if (animation.type === 'timing') {
+    return (
+      Number.isFinite(animation.duration) &&
+      animation.controlPoints.every(Number.isFinite)
+    );
+  }
+  if (animation.type === 'spring') {
+    return [
+      animation.mass ?? 1,
+      animation.stiffness ?? 100,
+      animation.damping ?? 10,
+      animation.initialVelocity === 'inherit'
+        ? 0
+        : (animation.initialVelocity ?? 0),
+    ].every(Number.isFinite);
+  }
+  if (!Number.isFinite(animation.duration) || animation.frames.length < 2) {
+    return false;
+  }
+  let previousOffset = -1;
+  for (const frame of animation.frames) {
+    if (
+      !Number.isFinite(frame.offset) ||
+      frame.offset < 0 ||
+      frame.offset > 1 ||
+      frame.offset <= previousOffset ||
+      !isFiniteClipPresentation(frame.presentation)
+    ) {
+      return false;
+    }
+    previousOffset = frame.offset;
+  }
+  return (
+    animation.frames[0]?.offset === 0 &&
+    previousOffset === 1 &&
+    clipPresentationEquals(
+      animation.frames[animation.frames.length - 1]?.presentation ?? null,
+      target
+    )
+  );
+}
+
+function presentationFromNative(
+  values: ReadonlyArray<number>,
+  fallback: SmoothClipPresentation,
+  offset = 0
+): SmoothClipPresentation {
+  'worklet';
+  if (values.length < offset + 7) return fallback;
+  const presentation = {
+    clip: {
+      x: values[offset] as number,
+      y: values[offset + 1] as number,
+      width: values[offset + 2] as number,
+      height: values[offset + 3] as number,
+      radius: values[offset + 4] as number,
+    },
+    contentTranslateX: values[offset + 5] as number,
+    contentTranslateY: values[offset + 6] as number,
+  };
+  return isFiniteClipPresentation(presentation) ? presentation : fallback;
+}
+
+function flattenedKeyframes(animation: KeyframedClipAnimation): number[] {
+  'worklet';
+  const values: number[] = [];
+  for (const frame of animation.frames) {
+    const { clip, contentTranslateX, contentTranslateY } = frame.presentation;
+    values.push(
+      frame.offset,
+      clip.x,
+      clip.y,
+      clip.width,
+      clip.height,
+      clip.radius,
+      contentTranslateX,
+      contentTranslateY
+    );
+  }
+  return values;
+}
+
+function uiOnly(): never {
+  'worklet';
+  throw new Error(
+    '[SmoothClipView] driver.ui methods must run on the UI runtime. Use driver.react from React code.'
+  );
+}
+
+export function useSmoothClipDriver(
+  initialValue: ClipGeometry | SmoothClipPresentation,
+  options: SmoothClipDriverOptions = {}
+): SmoothClipDriver {
+  const initialPresentation =
+    'clip' in initialValue
+      ? initialValue
+      : createClipPresentation(initialValue);
+  const presentation = useSharedValue(initialPresentation);
+  const ownership = useSharedValue(INTERACTIVE);
+  const suppressDeliveries = useSharedValue(0);
+  const activeAnimationId = useSharedValue(0);
+  // Non-zero after a setScalars hot write: driver.presentation is then stale,
+  // so animateTo must start from the native registry's latest value instead
+  // of snapping back to the stale SharedValue.
+  const scalarsStale = useSharedValue(0);
+  const callbackRef = useRef(options.onAnimationComplete);
+  const driverRef = useRef<SmoothClipDriver | null>(null);
+  callbackRef.current = options.onAnimationComplete;
+
+  if (driverRef.current === null) {
+    const driverId = allocateDriverId();
+    const reduceMotion = reduceMotionCode(options.reduceMotion ?? 'system');
+
+    const seedPresentation = (next: SmoothClipPresentation) => {
+      'worklet';
+      if (!clipPresentationEquals(presentation.value, next)) {
+        suppressDeliveries.value += 1;
+        presentation.value = next;
+      }
+    };
+
+    const beginOnUI = (): SmoothClipPresentation => {
+      'worklet';
+      const current = presentationFromNative(
+        beginInteractionHostFunction(driverId),
+        presentation.value
+      );
+      activeAnimationId.value = 0;
+      ownership.value = INTERACTIVE;
+      scalarsStale.value = 0;
+      seedPresentation(current);
+      return current;
+    };
+
+    const setOnUI = (next: SmoothClipPresentation): void => {
+      'worklet';
+      if (!isFiniteClipPresentation(next)) return;
+      activeAnimationId.value = 0;
+      ownership.value = INTERACTIVE;
+      scalarsStale.value = 0;
+      const { clip, contentTranslateX, contentTranslateY } = next;
+      setPresentationHostFunction(
+        driverId,
+        clip.x,
+        clip.y,
+        clip.width,
+        clip.height,
+        clip.radius,
+        contentTranslateX,
+        contentTranslateY,
+        true
+      );
+      seedPresentation(next);
+    };
+
+    const setScalarsOnUI = (
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+      radius: number,
+      contentTranslateX: number,
+      contentTranslateY: number
+    ): void => {
+      'worklet';
+      if (
+        !Number.isFinite(x) ||
+        !Number.isFinite(y) ||
+        !Number.isFinite(width) ||
+        !Number.isFinite(height) ||
+        !Number.isFinite(radius) ||
+        !Number.isFinite(contentTranslateX) ||
+        !Number.isFinite(contentTranslateY)
+      ) {
+        return;
+      }
+      if (activeAnimationId.value !== 0) activeAnimationId.value = 0;
+      if (ownership.value !== INTERACTIVE) ownership.value = INTERACTIVE;
+      if (scalarsStale.value === 0) scalarsStale.value = 1;
+      setPresentationHostFunction(
+        driverId,
+        x,
+        y,
+        width,
+        height,
+        radius,
+        contentTranslateX,
+        contentTranslateY,
+        true
+      );
+    };
+
+    const animateOnUI = (
+      target: SmoothClipPresentation,
+      animation: SmoothClipAnimation
+    ): number => {
+      'worklet';
+      if (
+        !isFiniteClipPresentation(target) ||
+        !animationIsFinite(target, animation)
+      ) {
+        return rejectAnimationHostFunction(driverId);
+      }
+
+      // After a setScalars hot write the SharedValue no longer matches what
+      // is on screen; passing it as the start would snap the animation back.
+      // Without an interactive start, native resolves the start from its own
+      // latest value instead.
+      const scalarsWereStale = scalarsStale.value !== 0;
+      const hasInteractiveStart =
+        ownership.value === INTERACTIVE && !scalarsWereStale;
+      const start = presentation.value;
+      ownership.value = NATIVE;
+      presentation.value = target;
+      scalarsStale.value = 0;
+      const startClip = start.clip;
+      const targetClip = target.clip;
+      let animationId: number;
+
+      if (animation.type === 'timing') {
+        const [x1, y1, x2, y2] = animation.controlPoints;
+        animationId = animateTimingHostFunction(
+          driverId,
+          hasInteractiveStart,
+          startClip.x,
+          startClip.y,
+          startClip.width,
+          startClip.height,
+          startClip.radius,
+          start.contentTranslateX,
+          start.contentTranslateY,
+          targetClip.x,
+          targetClip.y,
+          targetClip.width,
+          targetClip.height,
+          targetClip.radius,
+          target.contentTranslateX,
+          target.contentTranslateY,
+          Math.max(0, animation.duration),
+          x1,
+          y1,
+          x2,
+          y2,
+          reduceMotion
+        );
+      } else if (animation.type === 'spring') {
+        const inheritVelocity =
+          animation.initialVelocity === undefined ||
+          animation.initialVelocity === 'inherit';
+        animationId = animateSpringHostFunction(
+          driverId,
+          hasInteractiveStart,
+          startClip.x,
+          startClip.y,
+          startClip.width,
+          startClip.height,
+          startClip.radius,
+          start.contentTranslateX,
+          start.contentTranslateY,
+          targetClip.x,
+          targetClip.y,
+          targetClip.width,
+          targetClip.height,
+          targetClip.radius,
+          target.contentTranslateX,
+          target.contentTranslateY,
+          Math.max(0.0001, animation.mass ?? 1),
+          Math.max(0.0001, animation.stiffness ?? 100),
+          Math.max(0, animation.damping ?? 10),
+          inheritVelocity ? 0 : (animation.initialVelocity as number),
+          inheritVelocity,
+          reduceMotion
+        );
+      } else {
+        animationId = animateKeyframesHostFunction(
+          driverId,
+          hasInteractiveStart,
+          startClip.x,
+          startClip.y,
+          startClip.width,
+          startClip.height,
+          startClip.radius,
+          start.contentTranslateX,
+          start.contentTranslateY,
+          targetClip.x,
+          targetClip.y,
+          targetClip.width,
+          targetClip.height,
+          targetClip.radius,
+          target.contentTranslateX,
+          target.contentTranslateY,
+          Math.max(0, animation.duration),
+          flattenedKeyframes(animation),
+          reduceMotion
+        );
+      }
+      if (animationId === 0) {
+        // Native rejected the transition after ownership was transferred.
+        // Restore interactive ownership and the pre-animation value, then
+        // emit a standalone finished:false completion so completion-driven
+        // state machines observe exactly one result per animateTo call.
+        ownership.value = INTERACTIVE;
+        presentation.value = start;
+        if (scalarsWereStale) scalarsStale.value = 1;
+        activeAnimationId.value = 0;
+        return rejectAnimationHostFunction(driverId);
+      }
+      activeAnimationId.value = animationId;
+      return animationId;
+    };
+
+    const cancelOnUI = (
+      animationId = 0,
+      behavior: 'current' | 'target' = 'current'
+    ): SmoothClipPresentation => {
+      'worklet';
+      const values = cancelAnimationHostFunction(
+        driverId,
+        animationId,
+        behavior === 'target' ? 1 : 0
+      );
+      if (values.length < 8 || values[0] !== 1) return presentation.value;
+      const current = presentationFromNative(values, presentation.value, 1);
+      activeAnimationId.value = 0;
+      ownership.value = INTERACTIVE;
+      scalarsStale.value = 0;
+      seedPresentation(current);
+      return current;
+    };
+
+    const driver: SmoothClipDriver = {
+      kind: 'hybrid',
+      presentation,
+      ui: {
+        beginInteraction() {
+          'worklet';
+          if (isRNRuntime()) return uiOnly();
+          return beginOnUI();
+        },
+        set(next) {
+          'worklet';
+          if (isRNRuntime()) return uiOnly();
+          setOnUI(next);
+        },
+        setScalars(
+          x,
+          y,
+          width,
+          height,
+          radius,
+          contentTranslateX,
+          contentTranslateY
+        ) {
+          'worklet';
+          if (isRNRuntime()) return uiOnly();
+          setScalarsOnUI(
+            x,
+            y,
+            width,
+            height,
+            radius,
+            contentTranslateX,
+            contentTranslateY
+          );
+        },
+        animateTo(target, animation) {
+          'worklet';
+          if (isRNRuntime()) return uiOnly();
+          return animateOnUI(target, animation);
+        },
+        cancel(animationId = 0, behavior = 'current') {
+          'worklet';
+          if (isRNRuntime()) return uiOnly();
+          return cancelOnUI(animationId, behavior);
+        },
+      },
+      react: {
+        beginInteraction() {
+          const { requestId, promise } =
+            createReactRequest<SmoothClipPresentation>(driverId);
+          scheduleOnUI(() => {
+            'worklet';
+            const result = beginOnUI();
+            scheduleOnRN(resolveReactRequest, driverId, requestId, result);
+          });
+          return promise;
+        },
+        set(next) {
+          const { requestId, promise } = createReactRequest<void>(driverId);
+          scheduleOnUI(() => {
+            'worklet';
+            setOnUI(next);
+            scheduleOnRN(resolveReactRequest, driverId, requestId, undefined);
+          });
+          return promise;
+        },
+        animateTo(target, animation) {
+          const { requestId, promise } = createReactRequest<number>(
+            driverId,
+            true
+          );
+          scheduleOnUI(() => {
+            'worklet';
+            const result = animateOnUI(target, animation);
+            scheduleOnRN(
+              resolveReactRequest,
+              driverId,
+              requestId,
+              result,
+              true
+            );
+          });
+          return promise;
+        },
+        cancel(animationId = 0, behavior = 'current') {
+          const { requestId, promise } =
+            createReactRequest<SmoothClipPresentation>(driverId, true);
+          scheduleOnUI(() => {
+            'worklet';
+            const result = cancelOnUI(animationId, behavior);
+            scheduleOnRN(
+              resolveReactRequest,
+              driverId,
+              requestId,
+              result,
+              true
+            );
+          });
+          return promise;
+        },
+      },
+    };
+
+    setDriverState(
+      driver,
+      createDriverState(
+        driverId,
+        initialPresentation,
+        presentation,
+        callbackRef,
+        activeAnimationId,
+        ownership
+      )
+    );
+    driverRef.current = driver;
+  }
+
+  const driver = driverRef.current;
+
+  useEffect(() => {
+    const currentDriver = driverRef.current;
+    if (!currentDriver) return undefined;
+    const state = getDriverState(currentDriver);
+    const { driverId } = state;
+    // Re-attach on every effect run: StrictMode/<Activity> replay the effect
+    // after its cleanup detached this state and destroyed the native driver.
+    // The authoritative seed below recreates the native entry in that case.
+    attachDriverState(state);
+
+    const subscription = NativeSmoothClipModule.onClipAnimationComplete(
+      (result) => {
+        if (result.driverId !== driverId) return;
+        synchronizeNativeCompletion(
+          activeAnimationId,
+          ownership,
+          result.animationId,
+          result.finished
+        );
+        completeNativeAnimation(driverId, result.animationId, result.finished);
+      }
+    );
+
+    scheduleOnUI(
+      (
+        source: SharedValue<SmoothClipPresentation>,
+        listenerId: number,
+        nativeDriverId: number,
+        owner: SharedValue<number>,
+        suppressed: SharedValue<number>,
+        active: SharedValue<number>,
+        stale: SharedValue<number>,
+        setter: typeof setPresentationHostFunction
+      ) => {
+        'worklet';
+        let last: SmoothClipPresentation | null = null;
+        const deliver = (next: SmoothClipPresentation) => {
+          if (
+            !isFiniteClipPresentation(next) ||
+            clipPresentationEquals(last, next)
+          ) {
+            return;
+          }
+          // Record `last` only for values native has actually observed:
+          // deliveries dropped during native ownership must stay eligible
+          // for re-delivery once interactive ownership returns.
+          if (owner.value !== INTERACTIVE) return;
+          if (suppressed.value > 0) {
+            suppressed.value -= 1;
+            last = next;
+            return;
+          }
+          last = next;
+          if (stale.value !== 0) stale.value = 0;
+          const { clip, contentTranslateX, contentTranslateY } = next;
+          setter(
+            nativeDriverId,
+            clip.x,
+            clip.y,
+            clip.width,
+            clip.height,
+            clip.radius,
+            contentTranslateX,
+            contentTranslateY,
+            false
+          );
+        };
+        source.addListener(listenerId, deliver);
+        // Authoritative take-ownership seed. Creates the native entry before
+        // any view mounts on the first run, and revives a driver destroyed by
+        // an effect-replay cleanup (StrictMode/<Activity>) on later runs.
+        const current = source.value;
+        if (isFiniteClipPresentation(current)) {
+          active.value = 0;
+          owner.value = INTERACTIVE;
+          stale.value = 0;
+          last = current;
+          setter(
+            nativeDriverId,
+            current.clip.x,
+            current.clip.y,
+            current.clip.width,
+            current.clip.height,
+            current.clip.radius,
+            current.contentTranslateX,
+            current.contentTranslateY,
+            true
+          );
+        }
+      },
+      presentation,
+      driverId,
+      driverId,
+      ownership,
+      suppressDeliveries,
+      activeAnimationId,
+      scalarsStale,
+      setPresentationHostFunction
+    );
+
+    return () => {
+      subscription.remove();
+      rejectDriverRequests(driverId);
+      detachDriverState(state);
+      scheduleOnUI(
+        (
+          source: SharedValue<SmoothClipPresentation>,
+          listenerId: number,
+          nativeDriverId: number,
+          destroy: typeof destroyDriverHostFunction
+        ) => {
+          'worklet';
+          source.removeListener(listenerId);
+          destroy(nativeDriverId);
+        },
+        presentation,
+        driverId,
+        driverId,
+        destroyDriverHostFunction
+      );
+    };
+  }, [
+    activeAnimationId,
+    ownership,
+    presentation,
+    scalarsStale,
+    suppressDeliveries,
+  ]);
+
+  return driver;
+}
+
+export type {
+  KeyframedClipAnimation,
+  SpringClipAnimation,
+  TimingClipAnimation,
+};