react-native-screen-transitions 3.9.0-beta.2 → 3.9.0

package/src/shared/utils/bounds/navigation/zoom/mask.ts

@@ -0,0 +1,133 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+import { interpolate } from "react-native-reanimated";
+import type {
+	ScreenTransitionState,
+	TransitionSlotStyle,
+} from "../../../../types/animation.types";
+import type {
+	BoundsLink,
+	BoundsScopedAccessor,
+} from "../../../../types/bounds.types";
+import type { Layout } from "../../../../types/screen.types";
+import type { BoundsAnchor } from "../../types/options";
+import { toNumber } from "../helpers";
+import { DRAG_MASK_HEIGHT_COLLAPSE_END } from "../reveal/config";
+import {
+	interpolateClamped,
+	resolveAspectRatioMaskHeight,
+} from "../reveal/math";
+import { ZOOM_SHARED_OPTIONS } from "./config";
+import type { ZoomDragState } from "./drag";
+
+export const ZOOM_NAVIGATION_MASK_BORDER_RADIUS = 64;
+const ZOOM_VERTICAL_DRAG_MASK_COLLAPSE_SCALE = 0.8;
+
+interface ZoomNavigationMaskStyleProps {
+	scopedBounds: BoundsScopedAccessor;
+	link: BoundsLink;
+	sourceBounds: MeasuredDimensions;
+	screenLayout: Layout;
+	transitionProgress: number;
+	drag: ZoomDragState;
+	contentTransform: {
+		translateX: number;
+		translateY: number;
+		scale: number;
+	};
+	sourceBorderRadius: number;
+	expandedBorderRadius: number;
+	active: ScreenTransitionState;
+	anchor: BoundsAnchor;
+}
+
+export function resolveZoomNavigationMaskStyle({
+	scopedBounds,
+	link,
+	sourceBounds,
+	screenLayout,
+	transitionProgress,
+	drag,
+	contentTransform,
+	sourceBorderRadius,
+	expandedBorderRadius,
+	active,
+	anchor,
+}: ZoomNavigationMaskStyleProps): TransitionSlotStyle {
+	"worklet";
+
+	const maskRaw = scopedBounds.values({
+		scaleMode: ZOOM_SHARED_OPTIONS.scaleMode,
+		anchor,
+		method: "size",
+		space: "absolute",
+		target: "fullscreen",
+		progress: transitionProgress,
+	});
+	const maskWidth = maskRaw.width;
+	const maskHeight = maskRaw.height;
+	const maskAspectBounds = link.initialSource?.bounds ?? sourceBounds;
+	const minMaskHeight = resolveAspectRatioMaskHeight({
+		maskWidth,
+		maskHeight,
+		targetWidth: maskAspectBounds.width,
+		targetHeight: maskAspectBounds.height,
+	});
+	const maskHeightCollapseDrag = drag.collapsesMask
+		? Math.max(
+				0,
+				drag.dismissNorm * ZOOM_VERTICAL_DRAG_MASK_COLLAPSE_SCALE,
+				drag.dismissProgress,
+			)
+		: 0;
+	const renderedMaskHeight = interpolateClamped(
+		maskHeightCollapseDrag,
+		0,
+		DRAG_MASK_HEIGHT_COLLAPSE_END,
+		maskHeight,
+		minMaskHeight,
+	);
+	const maskCenterX = maskWidth / 2;
+	const maskCenterY = renderedMaskHeight / 2;
+	const contentCenterX = screenLayout.width / 2;
+	const contentCenterY = screenLayout.height / 2;
+	const maskOriginOffsetY = drag.isVerticalInverted
+		? maskHeight - renderedMaskHeight
+		: 0;
+	const compensatedMaskTranslateX =
+		(maskRaw.translateX -
+			contentTransform.translateX +
+			(1 - contentTransform.scale) * (maskCenterX - contentCenterX)) /
+		contentTransform.scale;
+	const compensatedMaskTranslateY =
+		(maskRaw.translateY -
+			contentTransform.translateY +
+			maskOriginOffsetY +
+			(1 - contentTransform.scale) * (maskCenterY - contentCenterY)) /
+		contentTransform.scale;
+	const initialSourceBorderRadius = toNumber(
+		link.initialSource?.styles.borderRadius,
+		sourceBorderRadius,
+	);
+
+	return {
+		style: {
+			width: maskWidth,
+			height: renderedMaskHeight,
+			borderRadius: interpolate(
+				transitionProgress,
+				[0, 1],
+				[
+					initialSourceBorderRadius,
+					active.animating ? expandedBorderRadius : 0,
+				],
+				"clamp",
+			),
+			borderCurve: "continuous",
+			transform: [
+				{ translateX: compensatedMaskTranslateX },
+				{ translateY: compensatedMaskTranslateY },
+				{ scale: 1 / contentTransform.scale },
+			],
+		},
+	};
+}

package/src/shared/utils/bounds/navigation/zoom/targets.ts

@@ -0,0 +1,132 @@
+import type { MeasuredDimensions } from "react-native-reanimated";
+import type {
+	BoundsLink,
+	BoundsNavigationZoomOptions,
+} from "../../../../types/bounds.types";
+import type { Layout } from "../../../../types/screen.types";
+import type { BoundsAnchor } from "../../types/options";
+
+type ZoomContentTarget = Exclude<
+	BoundsNavigationZoomOptions["target"],
+	undefined
+>;
+
+export function getZoomContentTarget({
+	explicitTarget,
+	screenLayout,
+	link,
+}: {
+	explicitTarget: BoundsNavigationZoomOptions["target"];
+	screenLayout: Layout;
+	link: BoundsLink;
+}): ZoomContentTarget {
+	"worklet";
+
+	if (explicitTarget !== undefined) {
+		return explicitTarget;
+	}
+
+	const sourceBounds = link.source?.bounds;
+	const screenWidth = screenLayout.width;
+	const screenHeight = screenLayout.height;
+
+	if (
+		!sourceBounds ||
+		sourceBounds.width <= 0 ||
+		sourceBounds.height <= 0 ||
+		screenWidth <= 0 ||
+		screenHeight <= 0
+	) {
+		return "fullscreen";
+	}
+
+	const sourceAspectRatio = sourceBounds.width / sourceBounds.height;
+	const screenAspectRatio = screenWidth / screenHeight;
+
+	// Zoom keeps one edge of the virtual destination attached to the source.
+	// A wide source fills the destination width and follows its top edge. A
+	// narrow source fills the destination height instead, so it follows the
+	// destination's leading edge rather than taking a long vertical path.
+	if (sourceAspectRatio < screenAspectRatio) {
+		return {
+			x: 0,
+			y: 0,
+			pageX: 0,
+			pageY: 0,
+			width: (sourceBounds.width / sourceBounds.height) * screenHeight,
+			height: screenHeight,
+		};
+	}
+
+	const height = (sourceBounds.height / sourceBounds.width) * screenWidth;
+
+	return {
+		x: 0,
+		y: 0,
+		pageX: 0,
+		pageY: 0,
+		width: screenWidth,
+		height,
+	};
+}
+
+export function getZoomContentAnchor({
+	explicitTarget,
+	screenLayout,
+	link,
+}: {
+	explicitTarget: BoundsNavigationZoomOptions["target"];
+	screenLayout: Layout;
+	link: BoundsLink;
+}): BoundsAnchor {
+	"worklet";
+
+	if (explicitTarget !== undefined) {
+		return explicitTarget === "bound" ? "center" : "top";
+	}
+
+	const sourceBounds = link.source?.bounds;
+	if (
+		!sourceBounds ||
+		sourceBounds.width <= 0 ||
+		sourceBounds.height <= 0 ||
+		screenLayout.width <= 0 ||
+		screenLayout.height <= 0
+	) {
+		return "top";
+	}
+
+	return sourceBounds.width / sourceBounds.height <
+		screenLayout.width / screenLayout.height
+		? "leading"
+		: "top";
+}
+
+export function resolveZoomTrackingContentTarget({
+	contentTarget,
+	link,
+	screenLayout,
+}: {
+	contentTarget: ZoomContentTarget;
+	link: BoundsLink;
+	screenLayout: Layout;
+}): MeasuredDimensions | undefined {
+	"worklet";
+
+	if (typeof contentTarget === "object") {
+		return contentTarget;
+	}
+
+	if (contentTarget === "bound") {
+		return link.destination?.bounds;
+	}
+
+	return {
+		x: 0,
+		y: 0,
+		pageX: 0,
+		pageY: 0,
+		width: screenLayout.width,
+		height: screenLayout.height,
+	};
+}

package/src/shared/utils/bounds/navigation/zoom/types.ts

@@ -15,6 +15,6 @@ export type ZoomInterpolatedStyle = BoundsNavigationZoomStyle & {
 
 export type BuildZoomStylesParams = {
 	tag?: string;
-	zoomOptions?: BoundsNavigationZoomOptions;
 	props: BoundsInterpolationProps;
+	zoomOptions?: BoundsNavigationZoomOptions;
 };

package/lib/commonjs/shared/utils/bounds/navigation/zoom/math.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.resolveDirectionalDragTranslation = void 0;
-const resolveDirectionalDragTranslation = ({
-  translation,
-  dimension,
-  negativeMax,
-  positiveMax,
-  exponent = 1
-}) => {
-  "worklet";
-
-  const baseDistance = Math.max(1, dimension);
-  const clampedMagnitude = Math.min(1, Math.abs(translation) / baseDistance);
-  const curvedMagnitude = clampedMagnitude ** Math.max(1, exponent);
-  if (translation < 0) {
-    return -baseDistance * negativeMax * curvedMagnitude;
-  }
-  return baseDistance * positiveMax * curvedMagnitude;
-};
-exports.resolveDirectionalDragTranslation = resolveDirectionalDragTranslation;
-//# sourceMappingURL=math.js.map

package/lib/commonjs/shared/utils/bounds/navigation/zoom/math.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["resolveDirectionalDragTranslation","translation","dimension","negativeMax","positiveMax","exponent","baseDistance","Math","max","clampedMagnitude","min","abs","curvedMagnitude","exports"],"sourceRoot":"../../../../../../../src","sources":["shared/utils/bounds/navigation/zoom/math.ts"],"mappings":";;;;;;AAAO,MAAMA,iCAAiC,GAAGA,CAAC;EACjDC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,WAAW;EACXC,QAAQ,GAAG;AAOZ,CAAC,KAAK;EACL,SAAS;;EAET,MAAMC,YAAY,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,SAAS,CAAC;EAC3C,MAAMO,gBAAgB,GAAGF,IAAI,CAACG,GAAG,CAAC,CAAC,EAAEH,IAAI,CAACI,GAAG,CAACV,WAAW,CAAC,GAAGK,YAAY,CAAC;EAC1E,MAAMM,eAAe,GAAGH,gBAAgB,IAAIF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAAC;EAEjE,IAAIJ,WAAW,GAAG,CAAC,EAAE;IACpB,OAAO,CAACK,YAAY,GAAGH,WAAW,GAAGS,eAAe;EACrD;EAEA,OAAON,YAAY,GAAGF,WAAW,GAAGQ,eAAe;AACpD,CAAC;AAACC,OAAA,CAAAb,iCAAA,GAAAA,iCAAA","ignoreList":[]}

package/lib/module/shared/utils/bounds/navigation/zoom/math.js

@@ -1,20 +0,0 @@
-"use strict";
-
-export const resolveDirectionalDragTranslation = ({
-  translation,
-  dimension,
-  negativeMax,
-  positiveMax,
-  exponent = 1
-}) => {
-  "worklet";
-
-  const baseDistance = Math.max(1, dimension);
-  const clampedMagnitude = Math.min(1, Math.abs(translation) / baseDistance);
-  const curvedMagnitude = clampedMagnitude ** Math.max(1, exponent);
-  if (translation < 0) {
-    return -baseDistance * negativeMax * curvedMagnitude;
-  }
-  return baseDistance * positiveMax * curvedMagnitude;
-};
-//# sourceMappingURL=math.js.map

package/lib/module/shared/utils/bounds/navigation/zoom/math.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["resolveDirectionalDragTranslation","translation","dimension","negativeMax","positiveMax","exponent","baseDistance","Math","max","clampedMagnitude","min","abs","curvedMagnitude"],"sourceRoot":"../../../../../../../src","sources":["shared/utils/bounds/navigation/zoom/math.ts"],"mappings":";;AAAA,OAAO,MAAMA,iCAAiC,GAAGA,CAAC;EACjDC,WAAW;EACXC,SAAS;EACTC,WAAW;EACXC,WAAW;EACXC,QAAQ,GAAG;AAOZ,CAAC,KAAK;EACL,SAAS;;EAET,MAAMC,YAAY,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,SAAS,CAAC;EAC3C,MAAMO,gBAAgB,GAAGF,IAAI,CAACG,GAAG,CAAC,CAAC,EAAEH,IAAI,CAACI,GAAG,CAACV,WAAW,CAAC,GAAGK,YAAY,CAAC;EAC1E,MAAMM,eAAe,GAAGH,gBAAgB,IAAIF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAAC;EAEjE,IAAIJ,WAAW,GAAG,CAAC,EAAE;IACpB,OAAO,CAACK,YAAY,GAAGH,WAAW,GAAGS,eAAe;EACrD;EAEA,OAAON,YAAY,GAAGF,WAAW,GAAGQ,eAAe;AACpD,CAAC","ignoreList":[]}

package/lib/typescript/shared/utils/bounds/navigation/zoom/math.d.ts

@@ -1,8 +0,0 @@
-export declare const resolveDirectionalDragTranslation: ({ translation, dimension, negativeMax, positiveMax, exponent, }: {
-    translation: number;
-    dimension: number;
-    negativeMax: number;
-    positiveMax: number;
-    exponent?: number;
-}) => number;
-//# sourceMappingURL=math.d.ts.map

package/lib/typescript/shared/utils/bounds/navigation/zoom/math.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../../../../../../src/shared/utils/bounds/navigation/zoom/math.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iCAAiC,GAAI,iEAM/C;IACF,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,WAYA,CAAC"}

package/src/shared/utils/bounds/navigation/zoom/math.ts

@@ -1,25 +0,0 @@
-export const resolveDirectionalDragTranslation = ({
-	translation,
-	dimension,
-	negativeMax,
-	positiveMax,
-	exponent = 1,
-}: {
-	translation: number;
-	dimension: number;
-	negativeMax: number;
-	positiveMax: number;
-	exponent?: number;
-}) => {
-	"worklet";
-
-	const baseDistance = Math.max(1, dimension);
-	const clampedMagnitude = Math.min(1, Math.abs(translation) / baseDistance);
-	const curvedMagnitude = clampedMagnitude ** Math.max(1, exponent);
-
-	if (translation < 0) {
-		return -baseDistance * negativeMax * curvedMagnitude;
-	}
-
-	return baseDistance * positiveMax * curvedMagnitude;
-};