react-native-screen-transitions 3.4.0-alpha.3 → 3.4.0-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/component-stack/components/component-screen.js +1 -1
- package/lib/commonjs/component-stack/components/component-screen.js.map +1 -1
- package/lib/commonjs/shared/animation/snap-to.js +6 -3
- package/lib/commonjs/shared/animation/snap-to.js.map +1 -1
- package/lib/commonjs/shared/components/create-boundary-component/hooks/helpers/measurement-rules.js +1 -1
- package/lib/commonjs/shared/components/create-boundary-component/hooks/helpers/measurement-rules.js.map +1 -1
- package/lib/commonjs/shared/components/create-boundary-component/hooks/use-group-active-measurement.js +47 -4
- package/lib/commonjs/shared/components/create-boundary-component/hooks/use-group-active-measurement.js.map +1 -1
- package/lib/commonjs/shared/components/create-boundary-component/hooks/use-initial-layout-handler.js +2 -2
- package/lib/commonjs/shared/components/create-boundary-component/hooks/use-initial-layout-handler.js.map +1 -1
- package/lib/commonjs/shared/components/create-boundary-component/index.js +6 -6
- package/lib/commonjs/shared/components/create-boundary-component/index.js.map +1 -1
- package/lib/commonjs/shared/components/native-screen.js +3 -3
- package/lib/commonjs/shared/components/native-screen.js.map +1 -1
- package/lib/commonjs/shared/components/screen-container/deferred-visibility-host.js +1 -1
- package/lib/commonjs/shared/components/screen-container/deferred-visibility-host.js.map +1 -1
- package/lib/commonjs/shared/components/screen-container/hooks/use-content-layout.js +18 -14
- package/lib/commonjs/shared/components/screen-container/hooks/use-content-layout.js.map +1 -1
- package/lib/commonjs/shared/components/screen-container/layers/backdrop.js +8 -5
- package/lib/commonjs/shared/components/screen-container/layers/backdrop.js.map +1 -1
- package/lib/commonjs/shared/components/screen-container/layers/content.js +12 -28
- package/lib/commonjs/shared/components/screen-container/layers/content.js.map +1 -1
- package/lib/commonjs/shared/components/screen-container/layers/maybe-masked-navigation-container.js +17 -4
- package/lib/commonjs/shared/components/screen-container/layers/maybe-masked-navigation-container.js.map +1 -1
- package/lib/commonjs/shared/components/screen-lifecycle/hooks/use-close-transition/helpers/reset-stores-for-screen.js +4 -2
- package/lib/commonjs/shared/components/screen-lifecycle/hooks/use-close-transition/helpers/reset-stores-for-screen.js.map +1 -1
- package/lib/commonjs/shared/components/screen-lifecycle/hooks/use-close-transition/index.js +6 -1
- package/lib/commonjs/shared/components/screen-lifecycle/hooks/use-close-transition/index.js.map +1 -1
- package/lib/commonjs/shared/components/screen-lifecycle/hooks/use-open-transition.js +13 -11
- package/lib/commonjs/shared/components/screen-lifecycle/hooks/use-open-transition.js.map +1 -1
- package/lib/commonjs/shared/components/screen-lifecycle/index.js +5 -3
- package/lib/commonjs/shared/components/screen-lifecycle/index.js.map +1 -1
- package/lib/commonjs/shared/configs/presets.js +3 -4
- package/lib/commonjs/shared/configs/presets.js.map +1 -1
- package/lib/commonjs/shared/constants.js +16 -2
- package/lib/commonjs/shared/constants.js.map +1 -1
- package/lib/commonjs/shared/hooks/animation/use-associated-style.js +2 -2
- package/lib/commonjs/shared/hooks/animation/use-associated-style.js.map +1 -1
- package/lib/commonjs/shared/providers/gestures/handlers/use-handlers.js +12 -9
- package/lib/commonjs/shared/providers/gestures/handlers/use-handlers.js.map +1 -1
- package/lib/commonjs/shared/providers/gestures/helpers/gesture-physics.js +3 -2
- package/lib/commonjs/shared/providers/gestures/helpers/gesture-physics.js.map +1 -1
- package/lib/commonjs/shared/providers/gestures/helpers/gesture-reset.js +7 -5
- package/lib/commonjs/shared/providers/gestures/helpers/gesture-reset.js.map +1 -1
- package/lib/commonjs/shared/providers/gestures/helpers/gesture-snap-points.js +5 -5
- package/lib/commonjs/shared/providers/gestures/helpers/gesture-snap-points.js.map +1 -1
- package/lib/commonjs/shared/providers/gestures/helpers/gesture-targets.js +9 -6
- package/lib/commonjs/shared/providers/gestures/helpers/gesture-targets.js.map +1 -1
- package/lib/commonjs/shared/providers/gestures/helpers/register-direction-claims.js +1 -1
- package/lib/commonjs/shared/providers/gestures/helpers/register-direction-claims.js.map +1 -1
- package/lib/commonjs/shared/providers/gestures/use-build-gestures.js +1 -1
- package/lib/commonjs/shared/providers/gestures/use-build-gestures.js.map +1 -1
- package/lib/commonjs/shared/providers/register-bounds.provider.js +5 -5
- package/lib/commonjs/shared/providers/register-bounds.provider.js.map +1 -1
- package/lib/commonjs/shared/providers/screen/animation/helpers/has-transitions-enabled.js +17 -0
- package/lib/commonjs/shared/providers/screen/animation/helpers/has-transitions-enabled.js.map +1 -0
- package/lib/commonjs/shared/providers/screen/animation/helpers/hydrate-transition-state.js +72 -0
- package/lib/commonjs/shared/providers/screen/animation/helpers/hydrate-transition-state.js.map +1 -0
- package/lib/commonjs/shared/providers/screen/animation/helpers/pipeline.js +22 -108
- package/lib/commonjs/shared/providers/screen/animation/helpers/pipeline.js.map +1 -1
- package/lib/commonjs/shared/providers/screen/animation/helpers/use-build-transition-state.js +42 -0
- package/lib/commonjs/shared/providers/screen/animation/helpers/use-build-transition-state.js.map +1 -0
- package/lib/commonjs/shared/providers/screen/helpers/resolve-interpolated-style-output.js +17 -3
- package/lib/commonjs/shared/providers/screen/helpers/resolve-interpolated-style-output.js.map +1 -1
- package/lib/commonjs/shared/providers/screen/styles.provider.js +4 -1
- package/lib/commonjs/shared/providers/screen/styles.provider.js.map +1 -1
- package/lib/commonjs/shared/providers/stack/direct.provider.js +1 -1
- package/lib/commonjs/shared/providers/stack/direct.provider.js.map +1 -1
- package/lib/commonjs/shared/providers/stack/helpers/use-processed-routes.js +1 -1
- package/lib/commonjs/shared/providers/stack/helpers/use-processed-routes.js.map +1 -1
- package/lib/commonjs/shared/stores/animation.store.js +12 -40
- package/lib/commonjs/shared/stores/animation.store.js.map +1 -1
- package/lib/commonjs/shared/stores/gesture.store.js +13 -33
- package/lib/commonjs/shared/stores/gesture.store.js.map +1 -1
- package/lib/commonjs/shared/stores/system.store.js +31 -0
- package/lib/commonjs/shared/stores/system.store.js.map +1 -0
- package/lib/commonjs/shared/types/bounds.types.js +1 -3
- package/lib/commonjs/shared/types/bounds.types.js.map +1 -1
- package/lib/commonjs/shared/utils/animation/animate-to-progress.js +2 -2
- package/lib/commonjs/shared/utils/animation/animate-to-progress.js.map +1 -1
- package/lib/commonjs/shared/utils/bounds/helpers/compute-bounds-styles.js.map +1 -1
- package/lib/commonjs/shared/utils/bounds/index.js +23 -50
- package/lib/commonjs/shared/utils/bounds/index.js.map +1 -1
- package/lib/commonjs/shared/utils/bounds/zoom/build.js +108 -362
- package/lib/commonjs/shared/utils/bounds/zoom/build.js.map +1 -1
- package/lib/commonjs/shared/utils/bounds/zoom/config.js +15 -101
- package/lib/commonjs/shared/utils/bounds/zoom/config.js.map +1 -1
- package/lib/commonjs/shared/utils/bounds/zoom/math.js +154 -0
- package/lib/commonjs/shared/utils/bounds/zoom/math.js.map +1 -0
- package/lib/commonjs/shared/utils/bounds/zoom/types.js +1 -3
- package/lib/commonjs/shared/utils/bounds/zoom/types.js.map +1 -1
- package/lib/commonjs/shared/utils/create-store.js +54 -0
- package/lib/commonjs/shared/utils/create-store.js.map +1 -0
- package/lib/module/component-stack/components/component-screen.js +1 -1
- package/lib/module/component-stack/components/component-screen.js.map +1 -1
- package/lib/module/shared/animation/snap-to.js +6 -3
- package/lib/module/shared/animation/snap-to.js.map +1 -1
- package/lib/module/shared/components/create-boundary-component/hooks/helpers/measurement-rules.js +1 -1
- package/lib/module/shared/components/create-boundary-component/hooks/helpers/measurement-rules.js.map +1 -1
- package/lib/module/shared/components/create-boundary-component/hooks/use-group-active-measurement.js +48 -5
- package/lib/module/shared/components/create-boundary-component/hooks/use-group-active-measurement.js.map +1 -1
- package/lib/module/shared/components/create-boundary-component/hooks/use-initial-layout-handler.js +2 -2
- package/lib/module/shared/components/create-boundary-component/hooks/use-initial-layout-handler.js.map +1 -1
- package/lib/module/shared/components/create-boundary-component/index.js +6 -6
- package/lib/module/shared/components/create-boundary-component/index.js.map +1 -1
- package/lib/module/shared/components/native-screen.js +3 -3
- package/lib/module/shared/components/native-screen.js.map +1 -1
- package/lib/module/shared/components/screen-container/deferred-visibility-host.js +2 -2
- package/lib/module/shared/components/screen-container/deferred-visibility-host.js.map +1 -1
- package/lib/module/shared/components/screen-container/hooks/use-content-layout.js +18 -14
- package/lib/module/shared/components/screen-container/hooks/use-content-layout.js.map +1 -1
- package/lib/module/shared/components/screen-container/layers/backdrop.js +8 -5
- package/lib/module/shared/components/screen-container/layers/backdrop.js.map +1 -1
- package/lib/module/shared/components/screen-container/layers/content.js +13 -29
- package/lib/module/shared/components/screen-container/layers/content.js.map +1 -1
- package/lib/module/shared/components/screen-container/layers/maybe-masked-navigation-container.js +19 -6
- package/lib/module/shared/components/screen-container/layers/maybe-masked-navigation-container.js.map +1 -1
- package/lib/module/shared/components/screen-lifecycle/hooks/use-close-transition/helpers/reset-stores-for-screen.js +4 -2
- package/lib/module/shared/components/screen-lifecycle/hooks/use-close-transition/helpers/reset-stores-for-screen.js.map +1 -1
- package/lib/module/shared/components/screen-lifecycle/hooks/use-close-transition/index.js +6 -1
- package/lib/module/shared/components/screen-lifecycle/hooks/use-close-transition/index.js.map +1 -1
- package/lib/module/shared/components/screen-lifecycle/hooks/use-open-transition.js +13 -11
- package/lib/module/shared/components/screen-lifecycle/hooks/use-open-transition.js.map +1 -1
- package/lib/module/shared/components/screen-lifecycle/index.js +5 -3
- package/lib/module/shared/components/screen-lifecycle/index.js.map +1 -1
- package/lib/module/shared/configs/presets.js +3 -4
- package/lib/module/shared/configs/presets.js.map +1 -1
- package/lib/module/shared/constants.js +16 -2
- package/lib/module/shared/constants.js.map +1 -1
- package/lib/module/shared/hooks/animation/use-associated-style.js +2 -2
- package/lib/module/shared/hooks/animation/use-associated-style.js.map +1 -1
- package/lib/module/shared/providers/gestures/handlers/use-handlers.js +12 -9
- package/lib/module/shared/providers/gestures/handlers/use-handlers.js.map +1 -1
- package/lib/module/shared/providers/gestures/helpers/gesture-physics.js +3 -2
- package/lib/module/shared/providers/gestures/helpers/gesture-physics.js.map +1 -1
- package/lib/module/shared/providers/gestures/helpers/gesture-reset.js +7 -5
- package/lib/module/shared/providers/gestures/helpers/gesture-reset.js.map +1 -1
- package/lib/module/shared/providers/gestures/helpers/gesture-snap-points.js +5 -5
- package/lib/module/shared/providers/gestures/helpers/gesture-snap-points.js.map +1 -1
- package/lib/module/shared/providers/gestures/helpers/gesture-targets.js +9 -6
- package/lib/module/shared/providers/gestures/helpers/gesture-targets.js.map +1 -1
- package/lib/module/shared/providers/gestures/helpers/register-direction-claims.js +1 -1
- package/lib/module/shared/providers/gestures/helpers/register-direction-claims.js.map +1 -1
- package/lib/module/shared/providers/gestures/use-build-gestures.js +1 -1
- package/lib/module/shared/providers/gestures/use-build-gestures.js.map +1 -1
- package/lib/module/shared/providers/register-bounds.provider.js +5 -5
- package/lib/module/shared/providers/register-bounds.provider.js.map +1 -1
- package/lib/module/shared/providers/screen/animation/helpers/has-transitions-enabled.js +12 -0
- package/lib/module/shared/providers/screen/animation/helpers/has-transitions-enabled.js.map +1 -0
- package/lib/module/shared/providers/screen/animation/helpers/hydrate-transition-state.js +67 -0
- package/lib/module/shared/providers/screen/animation/helpers/hydrate-transition-state.js.map +1 -0
- package/lib/module/shared/providers/screen/animation/helpers/pipeline.js +22 -108
- package/lib/module/shared/providers/screen/animation/helpers/pipeline.js.map +1 -1
- package/lib/module/shared/providers/screen/animation/helpers/use-build-transition-state.js +37 -0
- package/lib/module/shared/providers/screen/animation/helpers/use-build-transition-state.js.map +1 -0
- package/lib/module/shared/providers/screen/helpers/resolve-interpolated-style-output.js +15 -2
- package/lib/module/shared/providers/screen/helpers/resolve-interpolated-style-output.js.map +1 -1
- package/lib/module/shared/providers/screen/styles.provider.js +5 -2
- package/lib/module/shared/providers/screen/styles.provider.js.map +1 -1
- package/lib/module/shared/providers/stack/direct.provider.js +1 -1
- package/lib/module/shared/providers/stack/direct.provider.js.map +1 -1
- package/lib/module/shared/providers/stack/helpers/use-processed-routes.js +1 -1
- package/lib/module/shared/providers/stack/helpers/use-processed-routes.js.map +1 -1
- package/lib/module/shared/stores/animation.store.js +12 -40
- package/lib/module/shared/stores/animation.store.js.map +1 -1
- package/lib/module/shared/stores/gesture.store.js +13 -33
- package/lib/module/shared/stores/gesture.store.js.map +1 -1
- package/lib/module/shared/stores/system.store.js +27 -0
- package/lib/module/shared/stores/system.store.js.map +1 -0
- package/lib/module/shared/types/bounds.types.js +9 -1
- package/lib/module/shared/types/bounds.types.js.map +1 -1
- package/lib/module/shared/utils/animation/animate-to-progress.js +2 -2
- package/lib/module/shared/utils/animation/animate-to-progress.js.map +1 -1
- package/lib/module/shared/utils/bounds/helpers/compute-bounds-styles.js.map +1 -1
- package/lib/module/shared/utils/bounds/index.js +23 -50
- package/lib/module/shared/utils/bounds/index.js.map +1 -1
- package/lib/module/shared/utils/bounds/zoom/build.js +101 -355
- package/lib/module/shared/utils/bounds/zoom/build.js.map +1 -1
- package/lib/module/shared/utils/bounds/zoom/config.js +12 -98
- package/lib/module/shared/utils/bounds/zoom/config.js.map +1 -1
- package/lib/module/shared/utils/bounds/zoom/math.js +136 -0
- package/lib/module/shared/utils/bounds/zoom/math.js.map +1 -0
- package/lib/module/shared/utils/bounds/zoom/types.js +1 -1
- package/lib/module/shared/utils/bounds/zoom/types.js.map +1 -1
- package/lib/module/shared/utils/create-store.js +50 -0
- package/lib/module/shared/utils/create-store.js.map +1 -0
- package/lib/typescript/shared/animation/snap-to.d.ts.map +1 -1
- package/lib/typescript/shared/components/create-boundary-component/hooks/use-group-active-measurement.d.ts +1 -2
- package/lib/typescript/shared/components/create-boundary-component/hooks/use-group-active-measurement.d.ts.map +1 -1
- package/lib/typescript/shared/components/create-boundary-component/hooks/use-initial-layout-handler.d.ts.map +1 -1
- package/lib/typescript/shared/components/create-boundary-component/index.d.ts.map +1 -1
- package/lib/typescript/shared/components/native-screen.d.ts.map +1 -1
- package/lib/typescript/shared/components/screen-container/hooks/use-content-layout.d.ts.map +1 -1
- package/lib/typescript/shared/components/screen-container/layers/backdrop.d.ts.map +1 -1
- package/lib/typescript/shared/components/screen-container/layers/content.d.ts.map +1 -1
- package/lib/typescript/shared/components/screen-container/layers/maybe-masked-navigation-container.d.ts.map +1 -1
- package/lib/typescript/shared/components/screen-lifecycle/hooks/use-close-transition/helpers/reset-stores-for-screen.d.ts.map +1 -1
- package/lib/typescript/shared/components/screen-lifecycle/hooks/use-close-transition/index.d.ts +2 -1
- package/lib/typescript/shared/components/screen-lifecycle/hooks/use-close-transition/index.d.ts.map +1 -1
- package/lib/typescript/shared/components/screen-lifecycle/hooks/use-open-transition.d.ts +2 -1
- package/lib/typescript/shared/components/screen-lifecycle/hooks/use-open-transition.d.ts.map +1 -1
- package/lib/typescript/shared/components/screen-lifecycle/index.d.ts.map +1 -1
- package/lib/typescript/shared/configs/presets.d.ts.map +1 -1
- package/lib/typescript/shared/constants.d.ts.map +1 -1
- package/lib/typescript/shared/hooks/animation/use-associated-style.d.ts.map +1 -1
- package/lib/typescript/shared/index.d.ts +3 -3
- package/lib/typescript/shared/index.d.ts.map +1 -1
- package/lib/typescript/shared/providers/gestures/handlers/use-handlers.d.ts.map +1 -1
- package/lib/typescript/shared/providers/gestures/helpers/gesture-physics.d.ts.map +1 -1
- package/lib/typescript/shared/providers/gestures/helpers/gesture-reset.d.ts.map +1 -1
- package/lib/typescript/shared/providers/gestures/helpers/gesture-snap-points.d.ts +2 -2
- package/lib/typescript/shared/providers/gestures/helpers/gesture-snap-points.d.ts.map +1 -1
- package/lib/typescript/shared/providers/gestures/helpers/gesture-targets.d.ts.map +1 -1
- package/lib/typescript/shared/providers/gestures/use-build-gestures.d.ts.map +1 -1
- package/lib/typescript/shared/providers/register-bounds.provider.d.ts.map +1 -1
- package/lib/typescript/shared/providers/screen/animation/helpers/has-transitions-enabled.d.ts +8 -0
- package/lib/typescript/shared/providers/screen/animation/helpers/has-transitions-enabled.d.ts.map +1 -0
- package/lib/typescript/shared/providers/screen/animation/helpers/hydrate-transition-state.d.ts +22 -0
- package/lib/typescript/shared/providers/screen/animation/helpers/hydrate-transition-state.d.ts.map +1 -0
- package/lib/typescript/shared/providers/screen/animation/helpers/pipeline.d.ts +4 -2
- package/lib/typescript/shared/providers/screen/animation/helpers/pipeline.d.ts.map +1 -1
- package/lib/typescript/shared/providers/screen/animation/helpers/use-build-transition-state.d.ts +21 -0
- package/lib/typescript/shared/providers/screen/animation/helpers/use-build-transition-state.d.ts.map +1 -0
- package/lib/typescript/shared/providers/screen/helpers/resolve-interpolated-style-output.d.ts +6 -2
- package/lib/typescript/shared/providers/screen/helpers/resolve-interpolated-style-output.d.ts.map +1 -1
- package/lib/typescript/shared/providers/screen/styles.provider.d.ts.map +1 -1
- package/lib/typescript/shared/stores/animation.store.d.ts +10 -17
- package/lib/typescript/shared/stores/animation.store.d.ts.map +1 -1
- package/lib/typescript/shared/stores/gesture.store.d.ts +24 -14
- package/lib/typescript/shared/stores/gesture.store.d.ts.map +1 -1
- package/lib/typescript/shared/stores/system.store.d.ts +27 -0
- package/lib/typescript/shared/stores/system.store.d.ts.map +1 -0
- package/lib/typescript/shared/types/animation.types.d.ts +38 -9
- package/lib/typescript/shared/types/animation.types.d.ts.map +1 -1
- package/lib/typescript/shared/types/bounds.types.d.ts +14 -42
- package/lib/typescript/shared/types/bounds.types.d.ts.map +1 -1
- package/lib/typescript/shared/types/index.d.ts +2 -2
- package/lib/typescript/shared/types/index.d.ts.map +1 -1
- package/lib/typescript/shared/types/screen.types.d.ts +11 -0
- package/lib/typescript/shared/types/screen.types.d.ts.map +1 -1
- package/lib/typescript/shared/utils/animation/animate-to-progress.d.ts +3 -1
- package/lib/typescript/shared/utils/animation/animate-to-progress.d.ts.map +1 -1
- package/lib/typescript/shared/utils/bounds/helpers/compute-bounds-styles.d.ts.map +1 -1
- package/lib/typescript/shared/utils/bounds/index.d.ts +2 -3
- package/lib/typescript/shared/utils/bounds/index.d.ts.map +1 -1
- package/lib/typescript/shared/utils/bounds/zoom/build.d.ts +2 -3
- package/lib/typescript/shared/utils/bounds/zoom/build.d.ts.map +1 -1
- package/lib/typescript/shared/utils/bounds/zoom/config.d.ts +15 -41
- package/lib/typescript/shared/utils/bounds/zoom/config.d.ts.map +1 -1
- package/lib/typescript/shared/utils/bounds/zoom/math.d.ts +44 -0
- package/lib/typescript/shared/utils/bounds/zoom/math.d.ts.map +1 -0
- package/lib/typescript/shared/utils/bounds/zoom/types.d.ts +8 -13
- package/lib/typescript/shared/utils/bounds/zoom/types.d.ts.map +1 -1
- package/lib/typescript/shared/utils/create-store.d.ts +14 -0
- package/lib/typescript/shared/utils/create-store.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/component-stack/components/component-screen.tsx +1 -1
- package/src/shared/animation/snap-to.ts +10 -4
- package/src/shared/components/create-boundary-component/hooks/helpers/measurement-rules.ts +1 -1
- package/src/shared/components/create-boundary-component/hooks/use-group-active-measurement.ts +82 -10
- package/src/shared/components/create-boundary-component/hooks/use-initial-layout-handler.ts +2 -5
- package/src/shared/components/create-boundary-component/index.tsx +6 -12
- package/src/shared/components/native-screen.tsx +3 -9
- package/src/shared/components/screen-container/deferred-visibility-host.tsx +2 -2
- package/src/shared/components/screen-container/hooks/use-content-layout.ts +42 -43
- package/src/shared/components/screen-container/layers/backdrop.tsx +12 -6
- package/src/shared/components/screen-container/layers/content.tsx +17 -49
- package/src/shared/components/screen-container/layers/maybe-masked-navigation-container.tsx +26 -5
- package/src/shared/components/screen-lifecycle/hooks/use-close-transition/helpers/reset-stores-for-screen.ts +4 -2
- package/src/shared/components/screen-lifecycle/hooks/use-close-transition/index.ts +8 -0
- package/src/shared/components/screen-lifecycle/hooks/use-open-transition.ts +21 -10
- package/src/shared/components/screen-lifecycle/index.tsx +8 -2
- package/src/shared/configs/presets.ts +8 -7
- package/src/shared/constants.ts +14 -0
- package/src/shared/hooks/animation/use-associated-style.ts +2 -8
- package/src/shared/index.ts +2 -0
- package/src/shared/providers/gestures/handlers/use-handlers.ts +13 -10
- package/src/shared/providers/gestures/helpers/gesture-physics.ts +4 -2
- package/src/shared/providers/gestures/helpers/gesture-reset.ts +9 -5
- package/src/shared/providers/gestures/helpers/gesture-snap-points.ts +12 -10
- package/src/shared/providers/gestures/helpers/gesture-targets.ts +14 -6
- package/src/shared/providers/gestures/helpers/register-direction-claims.ts +1 -1
- package/src/shared/providers/gestures/use-build-gestures.ts +1 -3
- package/src/shared/providers/register-bounds.provider.tsx +5 -11
- package/src/shared/providers/screen/animation/helpers/has-transitions-enabled.ts +14 -0
- package/src/shared/providers/screen/animation/helpers/hydrate-transition-state.ts +108 -0
- package/src/shared/providers/screen/animation/helpers/pipeline.ts +37 -199
- package/src/shared/providers/screen/animation/helpers/use-build-transition-state.ts +77 -0
- package/src/shared/providers/screen/helpers/resolve-interpolated-style-output.ts +24 -4
- package/src/shared/providers/screen/styles.provider.tsx +5 -1
- package/src/shared/providers/stack/direct.provider.tsx +1 -1
- package/src/shared/providers/stack/helpers/use-processed-routes.ts +1 -1
- package/src/shared/stores/animation.store.ts +11 -61
- package/src/shared/stores/gesture.store.ts +25 -45
- package/src/shared/stores/system.store.ts +44 -0
- package/src/shared/types/animation.types.ts +41 -9
- package/src/shared/types/bounds.types.ts +25 -25
- package/src/shared/types/index.ts +2 -0
- package/src/shared/types/screen.types.ts +12 -0
- package/src/shared/utils/animation/animate-to-progress.ts +4 -2
- package/src/shared/utils/bounds/helpers/compute-bounds-styles.ts +0 -1
- package/src/shared/utils/bounds/index.ts +26 -75
- package/src/shared/utils/bounds/zoom/build.ts +179 -502
- package/src/shared/utils/bounds/zoom/config.ts +14 -164
- package/src/shared/utils/bounds/zoom/math.ts +193 -0
- package/src/shared/utils/bounds/zoom/types.ts +15 -17
- package/src/shared/utils/create-store.ts +62 -0
- package/lib/commonjs/shared/utils/bounds/types/frame-props.js +0 -6
- package/lib/commonjs/shared/utils/bounds/types/frame-props.js.map +0 -1
- package/lib/commonjs/shared/utils/bounds/zoom/accessor.js +0 -54
- package/lib/commonjs/shared/utils/bounds/zoom/accessor.js.map +0 -1
- package/lib/commonjs/shared/utils/bounds/zoom/index.js +0 -20
- package/lib/commonjs/shared/utils/bounds/zoom/index.js.map +0 -1
- package/lib/module/shared/utils/bounds/types/frame-props.js +0 -4
- package/lib/module/shared/utils/bounds/types/frame-props.js.map +0 -1
- package/lib/module/shared/utils/bounds/zoom/accessor.js +0 -49
- package/lib/module/shared/utils/bounds/zoom/accessor.js.map +0 -1
- package/lib/module/shared/utils/bounds/zoom/index.js +0 -5
- package/lib/module/shared/utils/bounds/zoom/index.js.map +0 -1
- package/lib/typescript/shared/utils/bounds/types/frame-props.d.ts +0 -5
- package/lib/typescript/shared/utils/bounds/types/frame-props.d.ts.map +0 -1
- package/lib/typescript/shared/utils/bounds/zoom/accessor.d.ts +0 -17
- package/lib/typescript/shared/utils/bounds/zoom/accessor.d.ts.map +0 -1
- package/lib/typescript/shared/utils/bounds/zoom/index.d.ts +0 -3
- package/lib/typescript/shared/utils/bounds/zoom/index.d.ts.map +0 -1
- package/src/shared/utils/bounds/types/frame-props.ts +0 -5
- package/src/shared/utils/bounds/zoom/accessor.ts +0 -69
- package/src/shared/utils/bounds/zoom/index.ts +0 -2
|
@@ -3,308 +3,51 @@
|
|
|
3
3
|
import { interpolate } from "react-native-reanimated";
|
|
4
4
|
import { EPSILON, HIDDEN_STYLE, NAVIGATION_MASK_CONTAINER_STYLE_ID, NAVIGATION_MASK_ELEMENT_STYLE_ID, VISIBLE_STYLE } from "../../../constants";
|
|
5
5
|
import { BoundStore } from "../../../stores/bounds";
|
|
6
|
-
import {
|
|
6
|
+
import { computeBoundStyles } from "../helpers/compute-bounds-styles";
|
|
7
|
+
import { getZoomAnchor, toNumber, ZOOM_DRAG_DIRECTIONAL_SCALE_MAX, ZOOM_DRAG_DIRECTIONAL_SCALE_MIN, ZOOM_DRAG_RESISTANCE, ZOOM_MASK_OUTSET, ZOOM_SHARED_OPTIONS } from "./config";
|
|
8
|
+
import { combineScales, composeCompensatedTranslation, computeCenterScaleShift, normalizedToTranslation, resolveDirectionalDragScale } from "./math";
|
|
7
9
|
const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1];
|
|
8
|
-
const
|
|
10
|
+
const getSourceBorderRadius = resolvedPair => {
|
|
9
11
|
"worklet";
|
|
10
12
|
|
|
11
|
-
|
|
12
|
-
const upper = max > min ? max : min;
|
|
13
|
-
if (value < lower) return lower;
|
|
14
|
-
if (value > upper) return upper;
|
|
15
|
-
return value;
|
|
16
|
-
};
|
|
17
|
-
const clamp01 = value => {
|
|
18
|
-
"worklet";
|
|
19
|
-
|
|
20
|
-
return clamp(value, 0, 1);
|
|
21
|
-
};
|
|
22
|
-
const lerp = (from, to, t) => {
|
|
23
|
-
"worklet";
|
|
24
|
-
|
|
25
|
-
return from + (to - from) * t;
|
|
26
|
-
};
|
|
27
|
-
const safeDivide = (numerator, denominator, fallback = 0) => {
|
|
28
|
-
"worklet";
|
|
29
|
-
|
|
30
|
-
if (denominator === 0) return fallback;
|
|
31
|
-
return numerator / denominator;
|
|
32
|
-
};
|
|
33
|
-
const inverseLerp = (value, inMin, inMax) => {
|
|
34
|
-
"worklet";
|
|
35
|
-
|
|
36
|
-
return safeDivide(value - inMin, inMax - inMin, 0);
|
|
37
|
-
};
|
|
38
|
-
const mapRangeClamped = (value, inMin, inMax, outMin, outMax) => {
|
|
39
|
-
"worklet";
|
|
40
|
-
|
|
41
|
-
const t = clamp01(inverseLerp(value, inMin, inMax));
|
|
42
|
-
return lerp(outMin, outMax, t);
|
|
43
|
-
};
|
|
44
|
-
const applyPowerCurve = (value, exponent) => {
|
|
45
|
-
"worklet";
|
|
46
|
-
|
|
47
|
-
const safeExponent = exponent > 0 ? exponent : 1;
|
|
48
|
-
const magnitude = Math.abs(value) ** safeExponent;
|
|
49
|
-
return value < 0 ? -magnitude : magnitude;
|
|
50
|
-
};
|
|
51
|
-
const normalizedToTranslation = ({
|
|
52
|
-
normalized,
|
|
53
|
-
dimension,
|
|
54
|
-
resistance
|
|
55
|
-
}) => {
|
|
56
|
-
"worklet";
|
|
57
|
-
|
|
58
|
-
const distance = Math.max(0, dimension) * resistance;
|
|
59
|
-
return mapRangeClamped(normalized, -1, 1, -distance, distance);
|
|
60
|
-
};
|
|
61
|
-
const normalizedToScale = ({
|
|
62
|
-
normalized,
|
|
63
|
-
outputRange,
|
|
64
|
-
exponent = 1,
|
|
65
|
-
positiveOnly = true
|
|
66
|
-
}) => {
|
|
67
|
-
"worklet";
|
|
68
|
-
|
|
69
|
-
const [outputStart, outputEnd] = outputRange;
|
|
70
|
-
const raw = positiveOnly ? mapRangeClamped(normalized, 0, 1, outputStart, outputEnd) : mapRangeClamped(normalized, -1, 1, outputStart, outputEnd);
|
|
71
|
-
return applyPowerCurve(raw, exponent);
|
|
72
|
-
};
|
|
73
|
-
const combineScales = (scaleX, scaleY, mode = "multiply") => {
|
|
74
|
-
"worklet";
|
|
75
|
-
|
|
76
|
-
switch (mode) {
|
|
77
|
-
case "average":
|
|
78
|
-
return (scaleX + scaleY) / 2;
|
|
79
|
-
case "max":
|
|
80
|
-
return Math.max(scaleX, scaleY);
|
|
81
|
-
case "min":
|
|
82
|
-
return Math.min(scaleX, scaleY);
|
|
83
|
-
default:
|
|
84
|
-
return scaleX * scaleY;
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
const computeCenterScaleShift = ({
|
|
88
|
-
center,
|
|
89
|
-
containerCenter,
|
|
90
|
-
scale
|
|
91
|
-
}) => {
|
|
92
|
-
"worklet";
|
|
93
|
-
|
|
94
|
-
return (center - containerCenter) * (scale - 1);
|
|
95
|
-
};
|
|
96
|
-
const compensateTranslationForParentScale = ({
|
|
97
|
-
translation,
|
|
98
|
-
parentScale,
|
|
99
|
-
epsilon
|
|
100
|
-
}) => {
|
|
101
|
-
"worklet";
|
|
102
|
-
|
|
103
|
-
const safeParentScale = Math.max(parentScale, epsilon);
|
|
104
|
-
return safeDivide(translation, safeParentScale, translation);
|
|
105
|
-
};
|
|
106
|
-
const composeCompensatedTranslation = ({
|
|
107
|
-
gesture,
|
|
108
|
-
parentScale,
|
|
109
|
-
centerShift = 0,
|
|
110
|
-
epsilon
|
|
111
|
-
}) => {
|
|
112
|
-
"worklet";
|
|
113
|
-
|
|
114
|
-
return compensateTranslationForParentScale({
|
|
115
|
-
translation: gesture,
|
|
116
|
-
parentScale,
|
|
117
|
-
epsilon
|
|
118
|
-
}) + centerShift;
|
|
119
|
-
};
|
|
120
|
-
const resolveDirectionalDragScale = ({
|
|
121
|
-
normalized,
|
|
122
|
-
dismissDirection,
|
|
123
|
-
shrinkMin,
|
|
124
|
-
growMax,
|
|
125
|
-
exponent
|
|
126
|
-
}) => {
|
|
127
|
-
"worklet";
|
|
128
|
-
|
|
129
|
-
const dismissalRelative = dismissDirection === "negative" ? -normalized : normalized;
|
|
130
|
-
if (dismissalRelative >= 0) {
|
|
131
|
-
return normalizedToScale({
|
|
132
|
-
normalized: dismissalRelative,
|
|
133
|
-
outputRange: [1, shrinkMin],
|
|
134
|
-
exponent
|
|
135
|
-
});
|
|
136
|
-
}
|
|
137
|
-
const oppositeDrag = Math.min(1, Math.abs(dismissalRelative));
|
|
138
|
-
return interpolate(oppositeDrag, [0, 1], [1, growMax], "clamp");
|
|
13
|
+
return typeof resolvedPair.sourceStyles?.borderRadius === "number" ? resolvedPair.sourceStyles.borderRadius : 0;
|
|
139
14
|
};
|
|
140
15
|
const getZoomContentTarget = ({
|
|
141
16
|
explicitTarget,
|
|
142
|
-
resolvedTag,
|
|
143
|
-
currentRouteKey,
|
|
144
|
-
previousRouteKey,
|
|
145
|
-
nextRouteKey,
|
|
146
|
-
entering,
|
|
147
17
|
screenLayout,
|
|
148
18
|
anchor,
|
|
149
19
|
resolvedPair
|
|
150
20
|
}) => {
|
|
151
21
|
"worklet";
|
|
152
22
|
|
|
153
|
-
if (explicitTarget
|
|
154
|
-
const
|
|
155
|
-
currentScreenKey: currentRouteKey,
|
|
156
|
-
previousScreenKey: previousRouteKey,
|
|
157
|
-
nextScreenKey: nextRouteKey,
|
|
158
|
-
entering
|
|
159
|
-
});
|
|
160
|
-
const sourceBounds = pair.sourceBounds;
|
|
23
|
+
if (explicitTarget) return explicitTarget;
|
|
24
|
+
const sourceBounds = resolvedPair.sourceBounds;
|
|
161
25
|
const screenWidth = screenLayout.width;
|
|
162
26
|
if (!sourceBounds || sourceBounds.width <= 0 || screenWidth <= 0) {
|
|
163
27
|
return "fullscreen";
|
|
164
28
|
}
|
|
165
29
|
const height = sourceBounds.height / sourceBounds.width * screenWidth;
|
|
166
|
-
|
|
167
|
-
switch (anchor) {
|
|
168
|
-
case "topLeading":
|
|
169
|
-
case "leading":
|
|
170
|
-
case "bottomLeading":
|
|
171
|
-
horizontalAnchor = "leading";
|
|
172
|
-
break;
|
|
173
|
-
case "topTrailing":
|
|
174
|
-
case "trailing":
|
|
175
|
-
case "bottomTrailing":
|
|
176
|
-
horizontalAnchor = "trailing";
|
|
177
|
-
break;
|
|
178
|
-
default:
|
|
179
|
-
horizontalAnchor = "center";
|
|
180
|
-
break;
|
|
181
|
-
}
|
|
182
|
-
let verticalAnchor;
|
|
183
|
-
switch (anchor) {
|
|
184
|
-
case "topLeading":
|
|
185
|
-
case "top":
|
|
186
|
-
case "topTrailing":
|
|
187
|
-
verticalAnchor = "top";
|
|
188
|
-
break;
|
|
189
|
-
case "bottomLeading":
|
|
190
|
-
case "bottom":
|
|
191
|
-
case "bottomTrailing":
|
|
192
|
-
verticalAnchor = "bottom";
|
|
193
|
-
break;
|
|
194
|
-
default:
|
|
195
|
-
verticalAnchor = "center";
|
|
196
|
-
break;
|
|
197
|
-
}
|
|
198
|
-
const x = horizontalAnchor === "leading" ? 0 : horizontalAnchor === "trailing" ? screenLayout.width - screenWidth : (screenLayout.width - screenWidth) / 2;
|
|
30
|
+
const verticalAnchor = anchor === "bottomLeading" || anchor === "bottom" || anchor === "bottomTrailing" ? "bottom" : anchor === "center" || anchor === "leading" || anchor === "trailing" ? "center" : "top";
|
|
199
31
|
const y = verticalAnchor === "top" ? 0 : verticalAnchor === "bottom" ? screenLayout.height - height : (screenLayout.height - height) / 2;
|
|
200
32
|
return {
|
|
201
|
-
x,
|
|
33
|
+
x: 0,
|
|
202
34
|
y,
|
|
203
|
-
pageX:
|
|
35
|
+
pageX: 0,
|
|
204
36
|
pageY: y,
|
|
205
37
|
width: screenWidth,
|
|
206
38
|
height
|
|
207
39
|
};
|
|
208
40
|
};
|
|
209
|
-
const getStyleRadius = (styles, property) => {
|
|
210
|
-
"worklet";
|
|
211
|
-
|
|
212
|
-
if (!styles || typeof styles !== "object") return undefined;
|
|
213
|
-
const styleRecord = styles;
|
|
214
|
-
const direct = styleRecord[property];
|
|
215
|
-
if (typeof direct === "number") return direct;
|
|
216
|
-
if (property !== "borderRadius") {
|
|
217
|
-
const fallback = styleRecord.borderRadius;
|
|
218
|
-
if (typeof fallback === "number") return fallback;
|
|
219
|
-
}
|
|
220
|
-
return undefined;
|
|
221
|
-
};
|
|
222
|
-
const resolveRadiusRange = ({
|
|
223
|
-
value,
|
|
224
|
-
progress,
|
|
225
|
-
sourceRadius,
|
|
226
|
-
destinationRadius,
|
|
227
|
-
fallback
|
|
228
|
-
}) => {
|
|
229
|
-
"worklet";
|
|
230
|
-
|
|
231
|
-
if (typeof value === "number") return value;
|
|
232
|
-
if (value === "auto") {
|
|
233
|
-
const from = sourceRadius ?? fallback;
|
|
234
|
-
const to = destinationRadius ?? fallback;
|
|
235
|
-
return interpolate(progress, [0, 1], [from, to], "clamp");
|
|
236
|
-
}
|
|
237
|
-
if (value && typeof value === "object") {
|
|
238
|
-
const from = typeof value.from === "number" ? value.from : fallback;
|
|
239
|
-
const to = typeof value.to === "number" ? value.to : fallback;
|
|
240
|
-
return interpolate(progress, [0, 1], [from, to], "clamp");
|
|
241
|
-
}
|
|
242
|
-
const from = sourceRadius ?? fallback;
|
|
243
|
-
const to = destinationRadius ?? fallback;
|
|
244
|
-
return interpolate(progress, [0, 1], [from, to], "clamp");
|
|
245
|
-
};
|
|
246
|
-
const resolveMaskRadii = ({
|
|
247
|
-
progress,
|
|
248
|
-
zoomOptions,
|
|
249
|
-
resolvedPair
|
|
250
|
-
}) => {
|
|
251
|
-
"worklet";
|
|
252
|
-
|
|
253
|
-
const sourceStyles = resolvedPair.sourceStyles;
|
|
254
|
-
const destinationStyles = resolvedPair.destinationStyles;
|
|
255
|
-
const defaultRadius = resolveRadiusRange({
|
|
256
|
-
value: zoomOptions.mask.borderRadius,
|
|
257
|
-
progress,
|
|
258
|
-
sourceRadius: getStyleRadius(sourceStyles, "borderRadius"),
|
|
259
|
-
destinationRadius: getStyleRadius(destinationStyles, "borderRadius"),
|
|
260
|
-
fallback: 12
|
|
261
|
-
});
|
|
262
|
-
const topLeftValue = zoomOptions.mask.borderTopLeftRadius ?? zoomOptions.mask.borderRadius;
|
|
263
|
-
const topRightValue = zoomOptions.mask.borderTopRightRadius ?? zoomOptions.mask.borderRadius;
|
|
264
|
-
const bottomLeftValue = zoomOptions.mask.borderBottomLeftRadius ?? zoomOptions.mask.borderRadius;
|
|
265
|
-
const bottomRightValue = zoomOptions.mask.borderBottomRightRadius ?? zoomOptions.mask.borderRadius;
|
|
266
|
-
return {
|
|
267
|
-
borderRadius: defaultRadius,
|
|
268
|
-
borderTopLeftRadius: resolveRadiusRange({
|
|
269
|
-
value: topLeftValue,
|
|
270
|
-
progress,
|
|
271
|
-
sourceRadius: getStyleRadius(sourceStyles, "borderTopLeftRadius"),
|
|
272
|
-
destinationRadius: getStyleRadius(destinationStyles, "borderTopLeftRadius"),
|
|
273
|
-
fallback: defaultRadius
|
|
274
|
-
}),
|
|
275
|
-
borderTopRightRadius: resolveRadiusRange({
|
|
276
|
-
value: topRightValue,
|
|
277
|
-
progress,
|
|
278
|
-
sourceRadius: getStyleRadius(sourceStyles, "borderTopRightRadius"),
|
|
279
|
-
destinationRadius: getStyleRadius(destinationStyles, "borderTopRightRadius"),
|
|
280
|
-
fallback: defaultRadius
|
|
281
|
-
}),
|
|
282
|
-
borderBottomLeftRadius: resolveRadiusRange({
|
|
283
|
-
value: bottomLeftValue,
|
|
284
|
-
progress,
|
|
285
|
-
sourceRadius: getStyleRadius(sourceStyles, "borderBottomLeftRadius"),
|
|
286
|
-
destinationRadius: getStyleRadius(destinationStyles, "borderBottomLeftRadius"),
|
|
287
|
-
fallback: defaultRadius
|
|
288
|
-
}),
|
|
289
|
-
borderBottomRightRadius: resolveRadiusRange({
|
|
290
|
-
value: bottomRightValue,
|
|
291
|
-
progress,
|
|
292
|
-
sourceRadius: getStyleRadius(sourceStyles, "borderBottomRightRadius"),
|
|
293
|
-
destinationRadius: getStyleRadius(destinationStyles, "borderBottomRightRadius"),
|
|
294
|
-
fallback: defaultRadius
|
|
295
|
-
})
|
|
296
|
-
};
|
|
297
|
-
};
|
|
298
41
|
export const buildZoomStyles = ({
|
|
299
|
-
|
|
300
|
-
group,
|
|
42
|
+
resolvedTag,
|
|
301
43
|
zoomOptions,
|
|
302
|
-
props
|
|
303
|
-
resolveTag,
|
|
304
|
-
computeRaw
|
|
44
|
+
props
|
|
305
45
|
}) => {
|
|
306
46
|
"worklet";
|
|
307
47
|
|
|
48
|
+
if (!resolvedTag) return {};
|
|
49
|
+
const explicitTarget = zoomOptions?.target;
|
|
50
|
+
const debug = zoomOptions?.DEBUG === true;
|
|
308
51
|
const focused = props.focused;
|
|
309
52
|
const progress = props.progress;
|
|
310
53
|
const currentRouteKey = props.current?.route.key;
|
|
@@ -312,34 +55,39 @@ export const buildZoomStyles = ({
|
|
|
312
55
|
const nextRouteKey = props.next?.route.key;
|
|
313
56
|
const entering = !props.next;
|
|
314
57
|
const screenLayout = props.layouts.screen;
|
|
315
|
-
const
|
|
58
|
+
const resolvedZoomAnchor = getZoomAnchor(explicitTarget);
|
|
59
|
+
const zoomComputeParams = {
|
|
60
|
+
id: resolvedTag,
|
|
61
|
+
previous: props.previous,
|
|
62
|
+
current: props.current,
|
|
63
|
+
next: props.next,
|
|
64
|
+
progress,
|
|
65
|
+
dimensions: screenLayout
|
|
66
|
+
};
|
|
67
|
+
const baseRawOptions = {
|
|
68
|
+
id: resolvedTag,
|
|
69
|
+
raw: true,
|
|
70
|
+
scaleMode: ZOOM_SHARED_OPTIONS.scaleMode
|
|
71
|
+
};
|
|
72
|
+
const resolvedPair = BoundStore.resolveTransitionPair(resolvedTag, {
|
|
316
73
|
currentScreenKey: currentRouteKey,
|
|
317
74
|
previousScreenKey: previousRouteKey,
|
|
318
75
|
nextScreenKey: nextRouteKey,
|
|
319
76
|
entering
|
|
320
|
-
};
|
|
321
|
-
const resolvedConfig = resolveZoomConfig({
|
|
322
|
-
id,
|
|
323
|
-
group,
|
|
324
|
-
zoomOptions,
|
|
325
|
-
currentRouteKey,
|
|
326
|
-
resolveTag,
|
|
327
|
-
defaultAnchor: "top"
|
|
328
77
|
});
|
|
329
|
-
|
|
330
|
-
const
|
|
331
|
-
resolvedTag,
|
|
332
|
-
sharedOptions,
|
|
333
|
-
explicitTarget,
|
|
334
|
-
zoomOptions: resolvedZoomOptions
|
|
335
|
-
} = resolvedConfig;
|
|
336
|
-
const resolvedPair = BoundStore.resolveTransitionPair(resolvedTag, transitionContext);
|
|
78
|
+
const sourceBorderRadius = getSourceBorderRadius(resolvedPair);
|
|
79
|
+
const targetBorderRadius = zoomOptions?.borderRadius ?? sourceBorderRadius;
|
|
337
80
|
const focusedVisibilityStyles = {
|
|
338
81
|
[resolvedTag]: VISIBLE_STYLE
|
|
339
82
|
};
|
|
340
|
-
|
|
83
|
+
const focusedContainerStyleId = props.navigationMaskEnabled ? NAVIGATION_MASK_CONTAINER_STYLE_ID : "content";
|
|
84
|
+
|
|
85
|
+
// To avoid initial flickering, we'll want to hide if there are no source bounds
|
|
86
|
+
// But to also avoid scenarios where activeId changes in dst and theres a failed measurement,
|
|
87
|
+
// we should only hide if entering and there is no source bounds.
|
|
88
|
+
if (!resolvedPair.sourceBounds && props.active.entering) {
|
|
341
89
|
return {
|
|
342
|
-
[
|
|
90
|
+
[focusedContainerStyleId]: HIDDEN_STYLE
|
|
343
91
|
};
|
|
344
92
|
}
|
|
345
93
|
const normX = props.active.gesture.normX;
|
|
@@ -348,58 +96,62 @@ export const buildZoomStyles = ({
|
|
|
348
96
|
const dragX = normalizedToTranslation({
|
|
349
97
|
normalized: normX,
|
|
350
98
|
dimension: screenLayout.width,
|
|
351
|
-
resistance:
|
|
99
|
+
resistance: ZOOM_DRAG_RESISTANCE
|
|
352
100
|
});
|
|
353
101
|
const dragY = normalizedToTranslation({
|
|
354
102
|
normalized: normY,
|
|
355
103
|
dimension: screenLayout.height,
|
|
356
|
-
resistance:
|
|
104
|
+
resistance: ZOOM_DRAG_RESISTANCE
|
|
357
105
|
});
|
|
358
106
|
const dragXScale = initialDirection === "horizontal" || initialDirection === "horizontal-inverted" ? resolveDirectionalDragScale({
|
|
359
107
|
normalized: normX,
|
|
360
108
|
dismissDirection: initialDirection === "horizontal-inverted" ? "negative" : "positive",
|
|
361
|
-
shrinkMin:
|
|
362
|
-
growMax:
|
|
109
|
+
shrinkMin: ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
|
|
110
|
+
growMax: ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
|
|
363
111
|
exponent: 2
|
|
364
112
|
}) : IDENTITY_DRAG_SCALE_OUTPUT[0];
|
|
365
113
|
const dragYScale = initialDirection === "vertical" || initialDirection === "vertical-inverted" ? resolveDirectionalDragScale({
|
|
366
114
|
normalized: normY,
|
|
367
115
|
dismissDirection: initialDirection === "vertical-inverted" ? "negative" : "positive",
|
|
368
|
-
shrinkMin:
|
|
369
|
-
growMax:
|
|
116
|
+
shrinkMin: ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
|
|
117
|
+
growMax: ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
|
|
370
118
|
exponent: 2
|
|
371
119
|
}) : IDENTITY_DRAG_SCALE_OUTPUT[1];
|
|
372
120
|
const dragScale = combineScales(dragXScale, dragYScale);
|
|
373
121
|
if (focused) {
|
|
374
122
|
const contentTarget = getZoomContentTarget({
|
|
375
123
|
explicitTarget,
|
|
376
|
-
resolvedTag,
|
|
377
|
-
currentRouteKey,
|
|
378
|
-
previousRouteKey,
|
|
379
|
-
nextRouteKey,
|
|
380
|
-
entering,
|
|
381
124
|
screenLayout,
|
|
382
|
-
anchor:
|
|
125
|
+
anchor: ZOOM_SHARED_OPTIONS.anchor,
|
|
383
126
|
resolvedPair
|
|
384
127
|
});
|
|
385
|
-
const contentRaw =
|
|
386
|
-
...
|
|
128
|
+
const contentRaw = computeBoundStyles(zoomComputeParams, {
|
|
129
|
+
...baseRawOptions,
|
|
130
|
+
anchor: resolvedZoomAnchor,
|
|
387
131
|
method: "content",
|
|
388
132
|
target: contentTarget
|
|
389
|
-
});
|
|
390
|
-
const maskRaw =
|
|
391
|
-
...
|
|
133
|
+
}, resolvedPair);
|
|
134
|
+
const maskRaw = computeBoundStyles(zoomComputeParams, {
|
|
135
|
+
...baseRawOptions,
|
|
136
|
+
anchor: ZOOM_SHARED_OPTIONS.anchor,
|
|
392
137
|
method: "size",
|
|
393
138
|
space: "absolute",
|
|
394
139
|
target: "fullscreen"
|
|
395
|
-
});
|
|
396
|
-
const focusedFade = props.active?.closing ? interpolate(progress, [0.6, 1], [0, 1], "clamp") : interpolate(progress, [0, 0.5], [0, 1], "clamp");
|
|
140
|
+
}, resolvedPair);
|
|
141
|
+
const focusedFade = props.active?.closing ? interpolate(progress, [0.6, 1], [0, debug ? 0.5 : 1], "clamp") : interpolate(progress, [0, 0.5], [0, debug ? 0.5 : 1], "clamp");
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* This is also how swiftui handles their navigation zoom.
|
|
145
|
+
* They remove clipping as soon as the screen stops animating
|
|
146
|
+
*/
|
|
147
|
+
const shouldRemoveClipping = !props.active.animating;
|
|
148
|
+
const focusedMaskBorderRadius = interpolate(progress, [0, 1], [sourceBorderRadius, shouldRemoveClipping ? 0 : targetBorderRadius], "clamp");
|
|
397
149
|
const {
|
|
398
150
|
top,
|
|
399
151
|
right,
|
|
400
152
|
bottom,
|
|
401
153
|
left
|
|
402
|
-
} =
|
|
154
|
+
} = ZOOM_MASK_OUTSET;
|
|
403
155
|
const maskWidth = Math.max(1, toNumber(maskRaw.width) + left + right);
|
|
404
156
|
const maskHeight = Math.max(1, toNumber(maskRaw.height) + top + bottom);
|
|
405
157
|
const contentTranslateX = toNumber(contentRaw.translateX) + dragX;
|
|
@@ -407,11 +159,6 @@ export const buildZoomStyles = ({
|
|
|
407
159
|
const contentScale = toNumber(contentRaw.scale, 1) * dragScale;
|
|
408
160
|
const maskTranslateX = toNumber(maskRaw.translateX) + dragX - left;
|
|
409
161
|
const maskTranslateY = toNumber(maskRaw.translateY) + dragY - top;
|
|
410
|
-
const maskRadii = resolveMaskRadii({
|
|
411
|
-
progress,
|
|
412
|
-
zoomOptions: resolvedZoomOptions,
|
|
413
|
-
resolvedPair
|
|
414
|
-
});
|
|
415
162
|
const focusedContentStyle = {
|
|
416
163
|
opacity: focusedFade,
|
|
417
164
|
transform: [{
|
|
@@ -420,60 +167,60 @@ export const buildZoomStyles = ({
|
|
|
420
167
|
translateY: contentTranslateY
|
|
421
168
|
}, {
|
|
422
169
|
scale: contentScale
|
|
423
|
-
}]
|
|
170
|
+
}],
|
|
171
|
+
borderRadius: focusedMaskBorderRadius,
|
|
172
|
+
overflow: "hidden"
|
|
424
173
|
};
|
|
425
|
-
|
|
426
|
-
[
|
|
174
|
+
const focusedStyles = {
|
|
175
|
+
[focusedContainerStyleId]: {
|
|
427
176
|
style: focusedContentStyle
|
|
428
177
|
},
|
|
429
|
-
|
|
178
|
+
...focusedVisibilityStyles
|
|
179
|
+
};
|
|
180
|
+
if (props.navigationMaskEnabled) {
|
|
181
|
+
focusedStyles[NAVIGATION_MASK_ELEMENT_STYLE_ID] = {
|
|
430
182
|
style: {
|
|
431
183
|
width: maskWidth,
|
|
432
184
|
height: maskHeight,
|
|
185
|
+
borderRadius: focusedMaskBorderRadius,
|
|
433
186
|
transform: [{
|
|
434
187
|
translateX: maskTranslateX
|
|
435
188
|
}, {
|
|
436
189
|
translateY: maskTranslateY
|
|
437
190
|
}, {
|
|
438
191
|
scale: dragScale
|
|
439
|
-
}]
|
|
440
|
-
borderRadius: maskRadii.borderRadius,
|
|
441
|
-
borderTopLeftRadius: maskRadii.borderTopLeftRadius,
|
|
442
|
-
borderTopRightRadius: maskRadii.borderTopRightRadius,
|
|
443
|
-
borderBottomLeftRadius: maskRadii.borderBottomLeftRadius,
|
|
444
|
-
borderBottomRightRadius: maskRadii.borderBottomRightRadius,
|
|
445
|
-
...(resolvedZoomOptions.mask.borderCurve ? {
|
|
446
|
-
borderCurve: resolvedZoomOptions.mask.borderCurve
|
|
447
|
-
} : {})
|
|
192
|
+
}]
|
|
448
193
|
}
|
|
449
|
-
}
|
|
450
|
-
|
|
451
|
-
|
|
194
|
+
};
|
|
195
|
+
}
|
|
196
|
+
return focusedStyles;
|
|
452
197
|
}
|
|
453
|
-
const unfocusedFade = props.active?.closing ? interpolate(progress, [1.6, 2], [1, 0], "clamp") : interpolate(progress, [1, 1.5], [1, 0], "clamp");
|
|
198
|
+
const unfocusedFade = props.active?.closing ? interpolate(progress, [1.6, 2], [1, debug ? 1 : 0], "clamp") : interpolate(progress, [1, 1.5], [1, debug ? 1 : 0], "clamp");
|
|
454
199
|
const unfocusedScale = interpolate(progress, [1, 2], [1, 0.95], "clamp");
|
|
455
200
|
const isUnfocusedIdle = props.active.settled === 1;
|
|
456
|
-
const
|
|
201
|
+
const shouldHideUnfocusedIdle = isUnfocusedIdle && !debug;
|
|
202
|
+
const elementTarget = explicitTarget !== undefined || resolvedPair.destinationBounds ? getZoomContentTarget({
|
|
457
203
|
explicitTarget,
|
|
458
|
-
resolvedTag,
|
|
459
|
-
currentRouteKey,
|
|
460
|
-
previousRouteKey,
|
|
461
|
-
nextRouteKey,
|
|
462
|
-
entering,
|
|
463
204
|
screenLayout,
|
|
464
|
-
anchor:
|
|
205
|
+
anchor: ZOOM_SHARED_OPTIONS.anchor,
|
|
465
206
|
resolvedPair
|
|
466
|
-
});
|
|
467
|
-
const elementRaw =
|
|
468
|
-
...
|
|
207
|
+
}) : "fullscreen";
|
|
208
|
+
const elementRaw = computeBoundStyles(zoomComputeParams, {
|
|
209
|
+
...baseRawOptions,
|
|
210
|
+
anchor: resolvedZoomAnchor,
|
|
469
211
|
method: "transform",
|
|
470
212
|
space: "relative",
|
|
471
213
|
target: elementTarget
|
|
214
|
+
}, resolvedPair);
|
|
215
|
+
const boundTargetCenterX = explicitTarget === "bound" && resolvedPair.destinationBounds ? resolvedPair.destinationBounds.pageX + resolvedPair.destinationBounds.width / 2 : undefined;
|
|
216
|
+
const boundTargetCenterY = explicitTarget === "bound" && resolvedPair.destinationBounds ? resolvedPair.destinationBounds.pageY + resolvedPair.destinationBounds.height / 2 : undefined;
|
|
217
|
+
const elementCenterX = boundTargetCenterX ?? (typeof elementTarget === "object" ? elementTarget.pageX + elementTarget.width / 2 : screenLayout.width / 2);
|
|
218
|
+
const elementCenterY = boundTargetCenterY ?? (typeof elementTarget === "object" ? elementTarget.pageY + elementTarget.height / 2 : screenLayout.height / 2);
|
|
219
|
+
const scaleShiftX = computeCenterScaleShift({
|
|
220
|
+
center: elementCenterX,
|
|
221
|
+
containerCenter: screenLayout.width / 2,
|
|
222
|
+
scale: dragScale
|
|
472
223
|
});
|
|
473
|
-
|
|
474
|
-
// Keep compensation tied to the element target's center. In `scaleMode: "match"`
|
|
475
|
-
// this target is fullscreen, so the center offset should resolve to zero.
|
|
476
|
-
const elementCenterY = typeof elementTarget === "object" ? elementTarget.pageY + elementTarget.height / 2 : screenLayout.height / 2;
|
|
477
224
|
const scaleShiftY = computeCenterScaleShift({
|
|
478
225
|
center: elementCenterY,
|
|
479
226
|
containerCenter: screenLayout.height / 2,
|
|
@@ -482,10 +229,9 @@ export const buildZoomStyles = ({
|
|
|
482
229
|
const compensatedGestureX = composeCompensatedTranslation({
|
|
483
230
|
gesture: dragX,
|
|
484
231
|
parentScale: unfocusedScale,
|
|
232
|
+
centerShift: scaleShiftX,
|
|
485
233
|
epsilon: EPSILON
|
|
486
234
|
});
|
|
487
|
-
// dragY is measured in screen space and must be unscaled by the parent
|
|
488
|
-
// content shrink, while scaleShiftY is already in the parent's local space.
|
|
489
235
|
const compensatedGestureY = composeCompensatedTranslation({
|
|
490
236
|
gesture: dragY,
|
|
491
237
|
parentScale: unfocusedScale,
|
|
@@ -496,7 +242,7 @@ export const buildZoomStyles = ({
|
|
|
496
242
|
const elementTranslateY = toNumber(elementRaw.translateY) + compensatedGestureY;
|
|
497
243
|
const elementScaleX = toNumber(elementRaw.scaleX, 1) * dragScale;
|
|
498
244
|
const elementScaleY = toNumber(elementRaw.scaleY, 1) * dragScale;
|
|
499
|
-
const resolvedElementStyle =
|
|
245
|
+
const resolvedElementStyle = shouldHideUnfocusedIdle ? {
|
|
500
246
|
transform: [{
|
|
501
247
|
translateX: 0
|
|
502
248
|
}, {
|
|
@@ -511,15 +257,15 @@ export const buildZoomStyles = ({
|
|
|
511
257
|
elevation: 0
|
|
512
258
|
} : {
|
|
513
259
|
transform: [{
|
|
514
|
-
translateX: elementTranslateX
|
|
260
|
+
translateX: props.active.settled ? 0 : elementTranslateX
|
|
515
261
|
}, {
|
|
516
|
-
translateY: elementTranslateY
|
|
262
|
+
translateY: props.active.settled ? 0 : elementTranslateY
|
|
517
263
|
}, {
|
|
518
|
-
scaleX: elementScaleX
|
|
264
|
+
scaleX: props.active.settled ? 1 : elementScaleX
|
|
519
265
|
}, {
|
|
520
|
-
scaleY: elementScaleY
|
|
266
|
+
scaleY: props.active.settled ? 1 : elementScaleY
|
|
521
267
|
}],
|
|
522
|
-
opacity: unfocusedFade,
|
|
268
|
+
opacity: debug ? 1 : unfocusedFade,
|
|
523
269
|
zIndex: 9999,
|
|
524
270
|
elevation: 9999
|
|
525
271
|
};
|