From 653f58b1ad9e1915aa95c1d3065cc465585908ae Mon Sep 17 00:00:00 2001 From: Igor Randjelovic Date: Tue, 7 Mar 2023 22:39:41 +0100 Subject: [PATCH] chore: initial android support (wip + hacked into place) --- apps/toolbox/src/pages/transitions.xml | 7 +- .../pages/transitions/transitions-detail.xml | 13 +++- .../ui/frame/fragment.transitions.android.ts | 3 + .../ui/transition/modal-transition.android.ts | 77 ++++++++++++++++++- 4 files changed, 95 insertions(+), 5 deletions(-) diff --git a/apps/toolbox/src/pages/transitions.xml b/apps/toolbox/src/pages/transitions.xml index 3f81958b8..ade477f7b 100644 --- a/apps/toolbox/src/pages/transitions.xml +++ b/apps/toolbox/src/pages/transitions.xml @@ -12,12 +12,15 @@ - + + diff --git a/apps/toolbox/src/pages/transitions/transitions-detail.xml b/apps/toolbox/src/pages/transitions/transitions-detail.xml index 843b00f05..1edad65a7 100644 --- a/apps/toolbox/src/pages/transitions/transitions-detail.xml +++ b/apps/toolbox/src/pages/transitions/transitions-detail.xml @@ -4,7 +4,16 @@ - - + + + + + diff --git a/packages/core/ui/frame/fragment.transitions.android.ts b/packages/core/ui/frame/fragment.transitions.android.ts index 40dcf5fcf..665942390 100644 --- a/packages/core/ui/frame/fragment.transitions.android.ts +++ b/packages/core/ui/frame/fragment.transitions.android.ts @@ -169,6 +169,9 @@ export function _setAndroidFragmentTransitions(animated: boolean, navigationTran } } + // @ts-ignore + transition?.test?.(fragmentTransaction, currentEntry, newEntry); + printTransitions(currentEntry); printTransitions(newEntry); } diff --git a/packages/core/ui/transition/modal-transition.android.ts b/packages/core/ui/transition/modal-transition.android.ts index daf502524..2744ae235 100644 --- a/packages/core/ui/transition/modal-transition.android.ts +++ b/packages/core/ui/transition/modal-transition.android.ts @@ -1,3 +1,78 @@ +import { BackstackEntry } from '../frame'; +import { View } from '../core/view'; import { Transition } from '.'; +import { querySelectorAll } from '../core/view-base'; -export class ModalTransition extends Transition {} +export class ModalTransition extends Transition { + createAndroidAnimator(transitionType: string) { + console.log('HELLO', transitionType); + } + + test(fragmentTransaction: androidx.fragment.app.FragmentTransaction, currentEntry: BackstackEntry, newEntry: BackstackEntry) { + console.log('HELLO', fragmentTransaction); + + const fromPage = currentEntry.resolvedPage; + const toPage = newEntry.resolvedPage; + + const currentFragment: androidx.fragment.app.Fragment = currentEntry ? currentEntry.fragment : null; + const newFragment: androidx.fragment.app.Fragment = newEntry.fragment; + + // 1. Presented view: gather all sharedTransitionTag views + const presentedSharedElements = >querySelectorAll(toPage, 'sharedTransitionTag'); + // console.log('presented sharedTransitionTag total:', presentedSharedElements.length); + + // 2. Presenting view: gather all sharedTransitionTag views + const presentingSharedElements = >querySelectorAll(fromPage, 'sharedTransitionTag'); + // console.log('presenting sharedTransitionTag total:', presentingSharedElements.length); + + // 3. only handle sharedTransitionTag on presenting which match presented + const presentedTags = presentedSharedElements.map((v) => v.sharedTransitionTag); + const presentingViewsToHandle = presentingSharedElements.filter((v) => presentedTags.includes(v.sharedTransitionTag)); + // fragmentTransaction.addSharedElement(); + + toPage.on('loaded', () => { + presentedSharedElements.forEach((v) => { + console.log({ + presentedSharedElements: true, + nativeView: !!v.nativeView, + sharedTransitionTag: v.sharedTransitionTag, + }); + androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag); + }); + + // setTimeout(() => { + newFragment.startPostponedEnterTransition(); + // }, 2000) + }); + + presentingSharedElements.forEach((v) => { + console.log({ + presentingSharedElements: true, + nativeView: !!v.nativeView, + sharedTransitionTag: v.sharedTransitionTag, + }); + androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag); + }); + presentingSharedElements.forEach((v) => { + fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag); + }); + + fragmentTransaction.setReorderingAllowed(true); + + const transitionSet = new androidx.transition.TransitionSet(); + transitionSet.setDuration(2000); + transitionSet.addTransition(new androidx.transition.ChangeBounds()); + transitionSet.addTransition(new androidx.transition.ChangeTransform()); + // transitionSet.addTransition(new androidx.transition.ChangeClipBounds()); + + // postpone enter until we call "loaded" on the new page + newFragment.postponeEnterTransition(); + + newFragment.setSharedElementEnterTransition(transitionSet); + newFragment.setSharedElementReturnTransition(transitionSet); + + // newFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds()); + // currentFragment.setSharedElementEnterTransition(new androidx.transition.ChangeBounds()); + // currentFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds()); + } +}