From ef41c2b469a872efa205222dec1c947ff59e6e0a Mon Sep 17 00:00:00 2001 From: Cody Bennett <23324155+CodyJasonBennett@users.noreply.github.com> Date: Thu, 1 Sep 2022 06:42:11 -0500 Subject: [PATCH 1/2] feat(loop): `flushGlobalEffects` for manual loop manipulation --- packages/fiber/src/core/loop.ts | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/fiber/src/core/loop.ts b/packages/fiber/src/core/loop.ts index c61b102774..1d314ff5f7 100644 --- a/packages/fiber/src/core/loop.ts +++ b/packages/fiber/src/core/loop.ts @@ -35,9 +35,23 @@ export const addAfterEffect = (callback: GlobalRenderCallback) => createSubs(cal export const addTail = (callback: GlobalRenderCallback) => createSubs(callback, globalTailEffects) function run(effects: Set, timestamp: number) { + if (!effects.size) return effects.forEach(({ callback }) => callback(timestamp)) } +export type GlobalEffectType = 'before' | 'after' | 'tail' + +export function flushGlobalEffects(type: GlobalEffectType, timestamp: number): void { + switch (type) { + case 'before': + return run(globalEffects, timestamp) + case 'after': + return run(globalAfterEffects, timestamp) + case 'tail': + return run(globalTailEffects, timestamp) + } +} + let subscribers: Subscription[] let subscription: Subscription function render(timestamp: number, state: RootState, frame?: THREE.XRFrame) { @@ -74,7 +88,7 @@ export function createLoop(roots: Map) { repeat = 0 // Run effects - if (globalEffects.size) run(globalEffects, timestamp) + flushGlobalEffects('before', timestamp) // Render all roots roots.forEach((root) => { @@ -90,12 +104,12 @@ export function createLoop(roots: Map) { }) // Run after-effects - if (globalAfterEffects.size) run(globalAfterEffects, timestamp) + flushGlobalEffects('after', timestamp) // Stop the loop if nothing invalidates it if (repeat === 0) { // Tail call effects, they are called when rendering stops - if (globalTailEffects.size) run(globalTailEffects, timestamp) + flushGlobalEffects('tail', timestamp) // Flag end of operation running = false @@ -121,10 +135,10 @@ export function createLoop(roots: Map) { state?: RootState, frame?: THREE.XRFrame, ): void { - if (runGlobalEffects) run(globalEffects, timestamp) + if (runGlobalEffects) flushGlobalEffects('before', timestamp) if (!state) roots.forEach((root) => render(timestamp, root.store.getState())) else render(timestamp, state, frame) - if (runGlobalEffects) run(globalAfterEffects, timestamp) + if (runGlobalEffects) flushGlobalEffects('after', timestamp) } return { From 488713cafbf0f26aaea8e1147b1c535320b94082 Mon Sep 17 00:00:00 2001 From: Cody Bennett <23324155+CodyJasonBennett@users.noreply.github.com> Date: Fri, 2 Sep 2022 21:04:32 -0500 Subject: [PATCH 2/2] chore(docs): add flushGlobalEffects --- docs/API/additional-exports.mdx | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/docs/API/additional-exports.mdx b/docs/API/additional-exports.mdx index bcf7909602..bed1816b1d 100644 --- a/docs/API/additional-exports.mdx +++ b/docs/API/additional-exports.mdx @@ -3,17 +3,18 @@ title: Additional Exports nav: 9 --- -| export | usage | -| -------------- | -------------------------------------------------------------- | -| addEffect | Adds a global render callback which is called each frame | -| addAfterEffect | Adds a global after-render callback which is called each frame | -| addTail | Adds a global callback which is called when rendering stops | -| invalidate | Forces view global invalidation | -| advance | Advances the frameloop (given that it's set to 'never') | -| extend | Extends the native-object catalogue | -| createPortal | Creates a portal (it's a React feature for re-parenting) | -| createRoot | Creates a root that can render three JSX into a canvas | -| events | Dom pointer-event system | -| applyProps | `applyProps(element, props)` sets element properties, | -| act | usage with react-testing | -| | | +| export | usage | +| ------------------ | -------------------------------------------------------------- | +| addEffect | Adds a global render callback which is called each frame | +| addAfterEffect | Adds a global after-render callback which is called each frame | +| addTail | Adds a global callback which is called when rendering stops | +| flushGlobalEffects | Flushes global render-effects for when manually driving a loop | +| invalidate | Forces view global invalidation | +| advance | Advances the frameloop (given that it's set to 'never') | +| extend | Extends the native-object catalogue | +| createPortal | Creates a portal (it's a React feature for re-parenting) | +| createRoot | Creates a root that can render three JSX into a canvas | +| events | Dom pointer-event system | +| applyProps | `applyProps(element, props)` sets element properties, | +| act | usage with react-testing | +| | |