From f39406800d04b92414d5769fee68e86828f736f6 Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Thu, 23 Mar 2023 20:28:24 -0700 Subject: [PATCH] chore: cleanup --- .../shared-transition-helper.ios.ts | 69 ++++++++++++++----- .../core/ui/transition/shared-transition.ts | 33 ++++++--- 2 files changed, 76 insertions(+), 26 deletions(-) diff --git a/packages/core/ui/transition/shared-transition-helper.ios.ts b/packages/core/ui/transition/shared-transition-helper.ios.ts index e257a82f1..2543bd62a 100644 --- a/packages/core/ui/transition/shared-transition-helper.ios.ts +++ b/packages/core/ui/transition/shared-transition-helper.ios.ts @@ -1,8 +1,10 @@ import type { SharedInteractiveState, SharedTransitionType } from '.'; import { getPageStartDefaultsForType, getRectFromProps, getSpringFromProps, SharedTransition, SharedTransitionAnimationType, SharedTransitionState } from './shared-transition'; +import { fromObject } from '../../data/observable'; import { isNumber } from '../../utils/types'; import { Screen } from '../../platform'; import { iOSNativeHelper } from '../../utils/native-helper'; + interface PlatformSharedInteractiveState extends SharedInteractiveState { transitionContext?: UIViewControllerContextTransitioning; propertyAnimator?: UIViewPropertyAnimator; @@ -19,6 +21,11 @@ export class SharedTransitionHelper { // console.log('-- Transition present --'); SharedTransition.events().notify({ eventName: SharedTransition.startedEvent, + object: fromObject({ + id: transition.id, + type, + action: 'present', + }), }); if (type === 'modal') { @@ -29,9 +36,16 @@ export class SharedTransitionHelper { transition.presented.view.layoutIfNeeded(); const { sharedElements, presented, presenting } = SharedTransition.getSharedElements(state.page, state.toPage); + if (!transition.sharedElements) { + transition.sharedElements = { + presented: [], + presenting: [], + independent: [], + }; + } if (SharedTransition.DEBUG) { - console.log(' ModalTransition: Present'); + console.log(` ${type}: Present`); console.log( `1. Found sharedTransitionTags to animate:`, sharedElements.map((v) => v.sharedTransitionTag) @@ -49,13 +63,6 @@ export class SharedTransitionHelper { // console.log('pageEndIndependentTags:', pageEndIndependentTags); for (const presentingView of sharedElements) { - if (!transition.sharedElements) { - transition.sharedElements = { - presented: [], - presenting: [], - independent: [], - }; - } const presentingSharedElement = presentingView.ios; // console.log('fromTarget instanceof UIImageView:', fromTarget instanceof UIImageView) @@ -216,6 +223,11 @@ export class SharedTransitionHelper { transitionContext.completeTransition(true); SharedTransition.events().notify({ eventName: SharedTransition.finishedEvent, + object: fromObject({ + id: transition?.id, + type, + action: 'present', + }), }); }; @@ -302,6 +314,11 @@ export class SharedTransitionHelper { // console.log('-- Transition dismiss --'); SharedTransition.events().notify({ eventName: SharedTransition.startedEvent, + object: fromObject({ + id: transition?.id, + type, + action: 'dismiss', + }), }); if (type === 'page') { transitionContext.containerView.insertSubviewBelowSubview(transition.presenting.view, transition.presented.view); @@ -310,7 +327,7 @@ export class SharedTransitionHelper { // console.log('transitionContext.containerView.subviews.count:', transitionContext.containerView.subviews.count); if (SharedTransition.DEBUG) { - console.log(' ModalTransition: Dismiss'); + console.log(` ${type}: Dismiss`); console.log( `1. Dismiss sharedTransitionTags to animate:`, transition.sharedElements.presented.map((p) => p.view.sharedTransitionTag) @@ -347,6 +364,11 @@ export class SharedTransitionHelper { transitionContext.completeTransition(true); SharedTransition.events().notify({ eventName: SharedTransition.finishedEvent, + object: fromObject({ + id: transition?.id, + type, + action: 'dismiss', + }), }); }; @@ -413,9 +435,14 @@ export class SharedTransitionHelper { }); } - static interactiveStart(state: SharedTransitionState, interactiveState: SharedInteractiveState, type: SharedTransitionType) { + static interactiveStart(state: SharedTransitionState, interactiveState: PlatformSharedInteractiveState, type: SharedTransitionType) { SharedTransition.events().notify({ eventName: SharedTransition.startedEvent, + object: fromObject({ + id: state?.instance?.id, + type, + action: 'interactiveStart', + }), }); switch (type) { case 'page': @@ -424,8 +451,8 @@ export class SharedTransitionHelper { } } - static interactiveUpdate(state: SharedTransitionState, interactiveState: SharedInteractiveState, type: SharedTransitionType, percent: number) { - if (!interactiveState.added) { + static interactiveUpdate(state: SharedTransitionState, interactiveState: PlatformSharedInteractiveState, type: SharedTransitionType, percent: number) { + if (!interactiveState?.added) { interactiveState.added = true; for (const p of state.instance.sharedElements.presented) { p.view.opacity = 0; @@ -452,8 +479,8 @@ export class SharedTransitionHelper { interactiveState.propertyAnimator.fractionComplete = percent; } - static interactiveCancel(state: SharedTransitionState, interactiveState: SharedInteractiveState, type: SharedTransitionType) { - if (state.instance && interactiveState.added && interactiveState.propertyAnimator) { + static interactiveCancel(state: SharedTransitionState, interactiveState: PlatformSharedInteractiveState, type: SharedTransitionType) { + if (state?.instance && interactiveState?.added && interactiveState?.propertyAnimator) { interactiveState.propertyAnimator.reversed = true; const duration = isNumber(state.pageStart?.duration) ? state.pageStart?.duration / 1000 : 0.35; interactiveState.propertyAnimator.continueAnimationWithTimingParametersDurationFactor(null, duration); @@ -471,13 +498,18 @@ export class SharedTransitionHelper { interactiveState.transitionContext.completeTransition(false); SharedTransition.events().notify({ eventName: SharedTransition.cancelledEvent, + object: fromObject({ + id: state?.instance?.id, + type, + action: 'interactiveCancel', + }), }); }, duration * 1000); } } - static interactiveFinish(state: SharedTransitionState, interactiveState: SharedInteractiveState, type: SharedTransitionType) { - if (state.instance && interactiveState.added && interactiveState.propertyAnimator) { + static interactiveFinish(state: SharedTransitionState, interactiveState: PlatformSharedInteractiveState, type: SharedTransitionType) { + if (state?.instance && interactiveState?.added && interactiveState?.propertyAnimator) { interactiveState.propertyAnimator.reversed = false; const duration = isNumber(state.pageReturn?.duration) ? state.pageReturn?.duration / 1000 : 0.35; @@ -495,6 +527,11 @@ export class SharedTransitionHelper { interactiveState.transitionContext.completeTransition(true); SharedTransition.events().notify({ eventName: SharedTransition.finishedEvent, + object: fromObject({ + id: state?.instance?.id, + type, + action: 'interactiveFinish', + }), }); }, duration * 1000); } diff --git a/packages/core/ui/transition/shared-transition.ts b/packages/core/ui/transition/shared-transition.ts index b827bbf99..70ccee6af 100644 --- a/packages/core/ui/transition/shared-transition.ts +++ b/packages/core/ui/transition/shared-transition.ts @@ -97,6 +97,7 @@ type SharedTransitionPageProperties = SharedProperties & { spring?: SharedSpringProperties; }; let sharedTransitionEvents: Observable; +let currentStack: Array; /** * Shared Element Transitions (preview) * Allows you to auto animate between shared elements on two different screesn to create smooth navigational experiences. @@ -131,16 +132,12 @@ export class SharedTransition { * Enable to see various console logging output of Shared Element Transition behavior. */ static DEBUG = false; - /** - * @private - */ - static currentStack: Array; /** * @private */ static updateState(id: number, state: SharedTransitionState) { - if (!SharedTransition.currentStack) { - SharedTransition.currentStack = []; + if (!currentStack) { + currentStack = []; } const existingTransition = SharedTransition.getState(id); if (existingTransition) { @@ -150,22 +147,22 @@ export class SharedTransition { // console.log(' ... updating state: ', key, state[key]) } } else { - SharedTransition.currentStack.push(state); + currentStack.push(state); } } /** * @private */ static getState(id: number) { - return SharedTransition.currentStack?.find((t) => t.instance.id === id); + return currentStack?.find((t) => t.instance?.id === id); } /** * @private */ static finishState(id: number) { - const index = SharedTransition.currentStack?.findIndex((t) => t.instance.id === id); + const index = currentStack?.findIndex((t) => t.instance?.id === id); if (index > -1) { - SharedTransition.currentStack.splice(index, 1); + currentStack.splice(index, 1); } } /** @@ -203,6 +200,12 @@ export class SharedTransition { } } +/** + * Get dimensional rectangle (x,y,width,height) from properties with fallbacks for any undefined values. + * @param props combination of properties conformed to SharedTransitionPageProperties + * @param defaults fallback properties when props doesn't contain a value for it + * @returns { x,y,width,height } + */ export function getRectFromProps(props: SharedTransitionPageProperties, defaults?: SharedRect): SharedRect { defaults = { x: 0, @@ -219,6 +222,11 @@ export function getRectFromProps(props: SharedTransitionPageProperties, defaults }; } +/** + * Get spring properties with default fallbacks for any undefined values. + * @param props various spring related properties conforming to SharedSpringProperties + * @returns + */ export function getSpringFromProps(props: SharedSpringProperties) { return { tension: isNumber(props?.tension) ? props?.tension : DEFAULT_SPRING.tension, @@ -229,6 +237,11 @@ export function getSpringFromProps(props: SharedSpringProperties) { }; } +/** + * Page starting defaults for provided type. + * @param type 'page' | 'modal' + * @returns { x,y,width,height } + */ export function getPageStartDefaultsForType(type: 'page' | 'modal') { return { x: type === 'page' ? Screen.mainScreen.widthDIPs : 0,