Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | 20x 20x 20x 20x 20x 20x 20x 10x 10x 10x 10x 10x 10x 20x 20x 10x 20x 20x 10x 10x 10x 10x 10x 10x 10x 20x 20x 10x 10x 10x 20x 20x 10x 10x 20x 20x 10x 10x 10x 10x 20x 20x | /*
* Copyright (c) 2022-2023 Braun Nathanael
*
* This project is dual licensed under one of the following licenses:
* - Creative Commons Attribution-NoDerivatives 4.0 International License.
* - GNU AFFERO GENERAL PUBLIC LICENSE Version 3
*
* You should have received a copy of theses licenses along with this work.
* If not, see <http://creativecommons.org/licenses/by-nd/4.0/> or <http://www.gnu.org/licenses/agpl-3.0.txt>.
*/
import React from "react";
import is from "is";
import TweenerContext from "../comps/TweenerContext";
import Tweener from "../comps/Tweener";
/**
* useVoodoo — the primary hook for creating or inheriting a Tweener animation engine.
*
* Three usage modes:
*
* useVoodoo(options)
* Creates a new Tweener instance. Returns [tweener, ViewBox] where ViewBox is a
* memoized component that provides TweenerContext and attaches the root DOM ref
* used by the Tweener to measure the viewport box (box.x/y/z).
*
* useVoodoo(true)
* Inherits the nearest parent Tweener from context. Used internally by Node,
* Axis, and Draggable to access the engine without creating a new one.
*
* useVoodoo("name")
* Traverses up the tweener tree (via _parentTweener links) to find an ancestor
* whose options.name matches the given string. Useful for reaching a specific
* engine in deeply nested or portal-based layouts.
*/
export default ( tweenerOptions, RootNodeComp = 'div' ) => {
const parentTweener = React.useContext(TweenerContext),
nodeRef = React.useRef(),
lastTweener = React.useRef(),
doUseParentTweener = React.useMemo(
() => (tweenerOptions === true || is.string(tweenerOptions)),
[]
),
tweener = React.useMemo(
() => {
if ( tweenerOptions === true )// keep tweener from context ( parent )
return parentTweener;
Iif ( is.string(tweenerOptions) ) {// return named tweener or most root tweener
let pTweener = parentTweener;
while ( pTweener?._ && pTweener._.options.name !== tweenerOptions )
if ( pTweener._parentTweener )
pTweener = pTweener._parentTweener;
else {
console.warn('[react-voodoo] useVoodoo: no parent tweener found with options.name === "' + tweenerOptions + '"');
break;
}
return pTweener;
}
let tw = new Tweener({
forwardedRef: nodeRef,
tweenerOptions
});
tw.isMountedFromHook = true;
tw._parentTweener = parentTweener;
return tw;
},
[]
),
ViewBox = React.useMemo(
() => (
React.forwardRef(
( { children, ...props }, ref ) => {
return <TweenerContext.Provider value={tweener}>
<RootNodeComp
ref={!ref
? nodeRef
: ( node ) => (ref.current = nodeRef.current = node)} {...props}>
{
children
}
</RootNodeComp>
</TweenerContext.Provider>
}
)
),
[]
)
// Mount/unmount effect: drives the Tweener lifecycle since the Tweener class is
// not mounted as a React component — useVoodoo owns its mount/unmount calls.
React.useEffect(
() => {
if ( doUseParentTweener )
return;
tweener.componentDidMount();
lastTweener.current = tweener;
return () => {
Iif ( !lastTweener.current?._ )
return;
lastTweener.current.componentWillUnmount();
lastTweener.current = null;
}
}, []
)
// nodeRef.current effect: fires after the root DOM node becomes available;
// triggers box measurement and an initial DOM write so CSS is correct
// before the first visible frame.
React.useEffect(
() => {
if ( doUseParentTweener || !lastTweener.current?._ )
return;
lastTweener.current._updateBox();
lastTweener.current._updateTweenRefs();
}
,
[nodeRef.current]
)
// parentTweener effect: keeps the _parentTweener link up to date as context
// changes (e.g. when the component is reparented). Draggable uses this link
// to traverse the tweener tree during drag gestures.
React.useEffect(
() => {
if ( doUseParentTweener || !lastTweener.current?._ )
return;
lastTweener.current._parentTweener = parentTweener;
},
[parentTweener]
)
// tweenerOptions effect: hot-updates options (e.g. drag thresholds, axis config)
// without destroying or recreating the Tweener instance.
React.useEffect(
() => {
if ( doUseParentTweener || !lastTweener.current?._ )
return;
// merge over the current options — a raw assign would wipe the defaults
// merged by the Tweener constructor (maxClickTm/maxClickOffset…), NaN-
// poisoning every click-vs-drag threshold comparison downstream
lastTweener.current._.options = {
...lastTweener.current._.options,
...(tweenerOptions || {})
};
lastTweener.current._updateBox();
lastTweener.current._updateTweenRefs();
},
[tweenerOptions]
)
return React.useMemo(
() => ([tweener, ViewBox]),
[ViewBox, tweener]
);
}
|