framer-motion/dist/es/projection/node/create-projection-node.mjs.map

A simple and powerful JavaScript animation library

{"version":3,"file":"create-projection-node.mjs","sources":["../../../../src/projection/node/create-projection-node.ts"],"sourcesContent":["import {\n    activeAnimations,\n    cancelFrame,\n    frame,\n    frameData,\n    frameSteps,\n    getValueTransition,\n    isSVGElement,\n    isSVGSVGElement,\n    JSAnimation,\n    microtask,\n    mixNumber,\n    MotionValue,\n    motionValue,\n    statsBuffer,\n    time,\n    Transition,\n    ValueAnimationOptions,\n    type Process,\n} from \"motion-dom\"\nimport {\n    Axis,\n    AxisDelta,\n    Box,\n    clamp,\n    Delta,\n    noop,\n    Point,\n    SubscriptionManager,\n} from \"motion-utils\"\nimport { animateSingleValue } from \"../../animation/animate/single-value\"\nimport { getOptimisedAppearId } from \"../../animation/optimized-appear/get-appear-id\"\nimport { MotionStyle } from \"../../motion/types\"\nimport { HTMLVisualElement } from \"../../projection\"\nimport { ResolvedValues } from \"../../render/types\"\nimport { FlatTree } from \"../../render/utils/flat-tree\"\nimport { VisualElement } from \"../../render/VisualElement\"\nimport { delay } from \"../../utils/delay\"\nimport { resolveMotionValue } from \"../../value/utils/resolve-motion-value\"\nimport { mixValues } from \"../animation/mix-values\"\nimport { copyAxisDeltaInto, copyBoxInto } from \"../geometry/copy\"\nimport {\n    applyBoxDelta,\n    applyTreeDeltas,\n    transformBox,\n    translateAxis,\n} from \"../geometry/delta-apply\"\nimport {\n    calcBoxDelta,\n    calcLength,\n    calcRelativeBox,\n    calcRelativePosition,\n    isNear,\n} from \"../geometry/delta-calc\"\nimport { removeBoxTransforms } from \"../geometry/delta-remove\"\nimport { createBox, createDelta } from \"../geometry/models\"\nimport {\n    aspectRatio,\n    axisDeltaEquals,\n    boxEquals,\n    boxEqualsRounded,\n    isDeltaZero,\n} from \"../geometry/utils\"\nimport { NodeStack } from \"../shared/stack\"\nimport { scaleCorrectors } from \"../styles/scale-correction\"\nimport { buildProjectionTransform } from \"../styles/transform\"\nimport { eachAxis } from \"../utils/each-axis\"\nimport { has2DTranslate, hasScale, hasTransform } from \"../utils/has-transform\"\nimport { globalProjectionState } from \"./state\"\nimport {\n    IProjectionNode,\n    LayoutEvents,\n    LayoutUpdateData,\n    Measurements,\n    Phase,\n    ProjectionNodeConfig,\n    ProjectionNodeOptions,\n    ScrollMeasurements,\n} from \"./types\"\n\nconst metrics = {\n    nodes: 0,\n    calculatedTargetDeltas: 0,\n    calculatedProjections: 0,\n}\n\nconst transformAxes = [\"\", \"X\", \"Y\", \"Z\"]\n\n/**\n * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1\n * which has a noticeable difference in spring animations\n */\nconst animationTarget = 1000\n\nlet id = 0\n\nfunction resetDistortingTransform(\n    key: string,\n    visualElement: VisualElement,\n    values: ResolvedValues,\n    sharedAnimationValues?: ResolvedValues\n) {\n    const { latestValues } = visualElement\n\n    // Record the distorting transform and then temporarily set it to 0\n    if (latestValues[key]) {\n        values[key] = latestValues[key]\n        visualElement.setStaticValue(key, 0)\n        if (sharedAnimationValues) {\n            sharedAnimationValues[key] = 0\n        }\n    }\n}\n\nfunction cancelTreeOptimisedTransformAnimations(\n    projectionNode: IProjectionNode\n) {\n    projectionNode.hasCheckedOptimisedAppear = true\n    if (projectionNode.root === projectionNode) return\n\n    const { visualElement } = projectionNode.options\n\n    if (!visualElement) return\n\n    const appearId = getOptimisedAppearId(visualElement)\n\n    if (window.MotionHasOptimisedAnimation!(appearId, \"transform\")) {\n        const { layout, layoutId } = projectionNode.options\n        window.MotionCancelOptimisedAnimation!(\n            appearId,\n            \"transform\",\n            frame,\n            !(layout || layoutId)\n        )\n    }\n\n    const { parent } = projectionNode\n    if (parent && !parent.hasCheckedOptimisedAppear) {\n        cancelTreeOptimisedTransformAnimations(parent)\n    }\n}\n\nexport function createProjectionNode<I>({\n    attachResizeListener,\n    defaultParent,\n    measureScroll,\n    checkIsScrollRoot,\n    resetTransform,\n}: ProjectionNodeConfig<I>) {\n    return class ProjectionNode implements IProjectionNode<I> {\n        /**\n         * A unique ID generated for every projection node.\n         */\n        id: number = id++\n\n        /**\n         * An id that represents a unique session instigated by startUpdate.\n         */\n        animationId: number = 0\n\n        animationCommitId = 0\n\n        /**\n         * A reference to the platform-native node (currently this will be a HTMLElement).\n         */\n        instance: I | undefined\n\n        /**\n         * A reference to the root projection node. There'll only ever be one tree and one root.\n         */\n        root: IProjectionNode\n\n        /**\n         * A reference to this node's parent.\n         */\n        parent?: IProjectionNode\n\n        /**\n         * A path from this node to the root node. This provides a fast way to iterate\n         * back up the tree.\n         */\n        path: IProjectionNode[]\n\n        /**\n         * A Set containing all this component's children. This is used to iterate\n         * through the children.\n         *\n         * TODO: This could be faster to iterate as a flat array stored on the root node.\n         */\n        children = new Set<IProjectionNode>()\n\n        /**\n         * Options for the node. We use this to configure what kind of layout animations\n         * we should perform (if any).\n         */\n        options: ProjectionNodeOptions = {}\n\n        /**\n         * A snapshot of the element's state just before the current update. This is\n         * hydrated when this node's `willUpdate` method is called and scrubbed at the\n         * end of the tree's `didUpdate` method.\n         */\n        snapshot: Measurements | undefined\n\n        /**\n         * A box defining the element's layout relative to the page. This will have been\n         * captured with all parent scrolls and projection transforms unset.\n         */\n        layout: Measurements | undefined\n\n        /**\n         * The layout used to calculate the previous layout animation. We use this to compare\n         * layouts between renders and decide whether we need to trigger a new layout animation\n         * or just let the current one play out.\n         */\n        targetLayout?: Box\n\n        /**\n         * A mutable data structure we use to apply all parent transforms currently\n         * acting on the element's layout. It's from here we can calculate the projectionDelta\n         * required to get the element from its layout into its calculated target box.\n         */\n        layoutCorrected: Box\n\n        /**\n         * An ideal projection transform we want to apply to the element. This is calculated,\n         * usually when an element's layout has changed, and we want the element to look as though\n         * its in its previous layout on the next frame. From there, we animated it down to 0\n         * to animate the element to its new layout.\n         */\n        targetDelta?: Delta\n\n        /**\n         * A mutable structure representing the visual bounding box on the page where we want\n         * and element to appear. This can be set directly but is currently derived once a frame\n         * from apply targetDelta to layout.\n         */\n        target?: Box\n\n        /**\n         * A mutable structure describing a visual bounding box relative to the element's\n         * projected parent. If defined, target will be derived from this rather than targetDelta.\n         * If not defined, we'll attempt to calculate on the first layout animation frame\n         * based on the targets calculated from targetDelta. This will transfer a layout animation\n         * from viewport-relative to parent-relative.\n         */\n        relativeTarget?: Box\n\n        relativeTargetOrigin?: Box\n        relativeParent?: IProjectionNode\n\n        /**\n         * We use this to detect when its safe to shut down part of a projection tree.\n         * We have to keep projecting children for scale correction and relative projection\n         * until all their parents stop performing layout animations.\n         */\n        isTreeAnimating = false\n\n        isAnimationBlocked = false\n\n        /**\n         * If true, attempt to resolve relativeTarget.\n         */\n        attemptToResolveRelativeTarget?: boolean\n\n        /**\n         * A mutable structure that represents the target as transformed by the element's\n         * latest user-set transforms (ie scale, x)\n         */\n        targetWithTransforms?: Box\n\n        /**\n         * The previous projection delta, which we can compare with the newly calculated\n         * projection delta to see if we need to render.\n         */\n        prevProjectionDelta?: Delta\n\n        /**\n         * A calculated transform that will project an element from its layoutCorrected\n         * into the target. This will be used by children to calculate their own layoutCorrect boxes.\n         */\n        projectionDelta?: Delta\n\n        /**\n         * A calculated transform that will project an element from its layoutCorrected\n         * into the targetWithTransforms.\n         */\n        projectionDeltaWithTransform?: Delta\n\n        /**\n         * If we're tracking the scroll of this element, we store it here.\n         */\n        scroll?: ScrollMeasurements\n\n        /**\n         * Flag to true if we think this layout has been changed. We can't always know this,\n         * currently we set it to true every time a component renders, or if it has a layoutDependency\n         * if that has changed between renders. Additionally, components can be grouped by LayoutGroup\n         * and if one node is dirtied, they all are.\n         */\n        isLayoutDirty = false\n\n        /**\n         * Flag to true if we think the projection calculations for this node needs\n         * recalculating as a result of an updated transform or layout animation.\n         */\n        isProjectionDirty = false\n\n        /**\n         * Flag to true if the layout *or* transform has changed. This then gets propagated\n         * throughout the projection tree, forcing any element below to recalculate on the next frame.\n         */\n        isSharedProjectionDirty = false\n\n        /**\n         * Flag transform dirty. This gets propagated throughout the whole tree but is only\n         * respected by shared nodes.\n         */\n        isTransformDirty = false\n\n        /**\n         * Block layout updates for instant layout transitions throughout the tree.\n         */\n        updateManuallyBlocked = false\n\n        updateBlockedByResize = false\n\n        /**\n         * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate`\n         * call.\n         */\n        isUpdating = false\n\n        /**\n         * If this is an SVG element we currently disable projection transforms\n         */\n        isSVG = false\n\n        /**\n         * Flag to true (during promotion) if a node doing an instant layout transition needs to reset\n         * its projection styles.\n         */\n        needsReset = false\n\n        /**\n         * Flags whether this node should have its transform reset prior to measuring.\n         */\n        shouldResetTransform = false\n\n        /**\n         * Store whether this node has been checked for optimised appear animations. As\n         * effects fire bottom-up, and we want to look up the tree for appear animations,\n         * this makes sure we only check each path once, stopping at nodes that\n         * have already been checked.\n         */\n        hasCheckedOptimisedAppear = false\n\n        /**\n         * An object representing the calculated contextual/accumulated/tree scale.\n         * This will be used to scale calculcated projection transforms, as these are\n         * calculated in screen-space but need to be scaled for elements to layoutly\n         * make it to their calculated destinations.\n         *\n         * TODO: Lazy-init\n         */\n        treeScale: Point = { x: 1, y: 1 }\n\n        /**\n         * Is hydrated with a projection node if an element is animating from another.\n         */\n        resumeFrom?: IProjectionNode\n\n        /**\n         * Is hydrated with a projection node if an element is animating from another.\n         */\n        resumingFrom?: IProjectionNode\n\n        /**\n         * A reference to the element's latest animated values. This is a reference shared\n         * between the element's VisualElement and the ProjectionNode.\n         */\n        latestValues: ResolvedValues\n\n        /**\n         *\n         */\n        eventHandlers = new Map<LayoutEvents, SubscriptionManager<any>>()\n\n        nodes?: FlatTree\n\n        depth: number\n\n        /**\n         * If transformTemplate generates a different value before/after the\n         * update, we need to reset the transform.\n         */\n        prevTransformTemplateValue: string | undefined\n\n        preserveOpacity?: boolean\n\n        hasTreeAnimated = false\n\n        layoutVersion: number = 0\n\n        constructor(\n            latestValues: ResolvedValues = {},\n            parent: IProjectionNode | undefined = defaultParent?.()\n        ) {\n            this.latestValues = latestValues\n            this.root = parent ? parent.root || parent : this\n            this.path = parent ? [...parent.path, parent] : []\n            this.parent = parent\n\n            this.depth = parent ? parent.depth + 1 : 0\n\n            for (let i = 0; i < this.path.length; i++) {\n                this.path[i].shouldResetTransform = true\n            }\n\n            if (this.root === this) this.nodes = new FlatTree()\n        }\n\n        addEventListener(name: LayoutEvents, handler: any) {\n            if (!this.eventHandlers.has(name)) {\n                this.eventHandlers.set(name, new SubscriptionManager())\n            }\n\n            return this.eventHandlers.get(name)!.add(handler)\n        }\n\n        notifyListeners(name: LayoutEvents, ...args: any) {\n            const subscriptionManager = this.eventHandlers.get(name)\n            subscriptionManager && subscriptionManager.notify(...args)\n        }\n\n        hasListeners(name: LayoutEvents) {\n            return this.eventHandlers.has(name)\n        }\n\n        /**\n         * Lifecycles\n         */\n        mount(instance: I) {\n            if (this.instance) return\n\n            this.isSVG = isSVGElement(instance) && !isSVGSVGElement(instance)\n\n            this.instance = instance\n\n            const { layoutId, layout, visualElement } = this.options\n            if (visualElement && !visualElement.current) {\n                visualElement.mount(instance)\n            }\n\n            this.root.nodes!.add(this)\n            this.parent && this.parent.children.add(this)\n\n            if (this.root.hasTreeAnimated && (layout || layoutId)) {\n                this.isLayoutDirty = true\n            }\n\n            if (attachResizeListener) {\n                let cancelDelay: VoidFunction\n                let innerWidth = 0\n\n                const resizeUnblockUpdate = () =>\n                    (this.root.updateBlockedByResize = false)\n\n                // Set initial innerWidth in a frame.read callback to batch the read\n                frame.read(() => {\n                    innerWidth = window.innerWidth\n                })\n\n                attachResizeListener(instance, () => {\n                    const newInnerWidth = window.innerWidth\n                    if (newInnerWidth === innerWidth) return\n\n                    innerWidth = newInnerWidth\n\n                    this.root.updateBlockedByResize = true\n\n                    cancelDelay && cancelDelay()\n                    cancelDelay = delay(resizeUnblockUpdate, 250)\n\n                    if (globalProjectionState.hasAnimatedSinceResize) {\n                        globalProjectionState.hasAnimatedSinceResize = false\n                        this.nodes!.forEach(finishAnimation)\n                    }\n                })\n            }\n\n            if (layoutId) {\n                this.root.registerSharedNode(layoutId, this)\n            }\n\n            // Only register the handler if it requires layout animation\n            if (\n                this.options.animate !== false &&\n                visualElement &&\n                (layoutId || layout)\n            ) {\n                this.addEventListener(\n                    \"didUpdate\",\n                    ({\n                        delta,\n                        hasLayoutChanged,\n                        hasRelativeLayoutChanged,\n                        layout: newLayout,\n                    }: LayoutUpdateData) => {\n                        if (this.isTreeAnimationBlocked()) {\n                            this.target = undefined\n                            this.relativeTarget = undefined\n                            return\n                        }\n\n                        // TODO: Check here if an animation exists\n                        const layoutTransition =\n                            this.options.transition ||\n                            visualElement.getDefaultTransition() ||\n                            defaultLayoutTransition\n\n                        const {\n                            onLayoutAnimationStart,\n                            onLayoutAnimationComplete,\n                        } = visualElement.getProps()\n\n                        /**\n                         * The target layout of the element might stay the same,\n                         * but its position relative to its parent has changed.\n                         */\n                        const hasTargetChanged =\n                            !this.targetLayout ||\n                            !boxEqualsRounded(this.targetLayout, newLayout)\n                        /*\n                         * Note: Disabled to fix relative animations always triggering new\n                         * layout animations. If this causes further issues, we can try\n                         * a different approach to detecting relative target changes.\n                         */\n                        // || hasRelativeLayoutChanged\n\n                        /**\n                         * If the layout hasn't seemed to have changed, it might be that the\n                         * element is visually in the same place in the document but its position\n                         * relative to its parent has indeed changed. So here we check for that.\n                         */\n                        const hasOnlyRelativeTargetChanged =\n                            !hasLayoutChanged && hasRelativeLayoutChanged\n\n                        if (\n                            this.options.layoutRoot ||\n                            this.resumeFrom ||\n                            hasOnlyRelativeTargetChanged ||\n                            (hasLayoutChanged &&\n                                (hasTargetChanged || !this.currentAnimation))\n                        ) {\n                            if (this.resumeFrom) {\n                                this.resumingFrom = this.resumeFrom\n                                this.resumingFrom.resumingFrom = undefined\n                            }\n\n                            const animationOptions = {\n                                ...getValueTransition(\n                                    layoutTransition,\n                                    \"layout\"\n                                ),\n                                onPlay: onLayoutAnimationStart,\n                                onComplete: onLayoutAnimationComplete,\n                            }\n\n                            if (\n                                visualElement.shouldReduceMotion ||\n                                this.options.layoutRoot\n                            ) {\n                                animationOptions.delay = 0\n                                animationOptions.type = false\n                            }\n\n                            this.startAnimation(animationOptions)\n                            /**\n                             * Set animation origin after starting animation to avoid layout jump\n                             * caused by stopping previous layout animation\n                             */\n                            this.setAnimationOrigin(\n                                delta,\n                                hasOnlyRelativeTargetChanged\n                            )\n                        } else {\n                            /**\n                             * If the layout hasn't changed and we have an animation that hasn't started yet,\n                             * finish it immediately. Otherwise it will be animating from a location\n                             * that was probably never committed to screen and look like a jumpy box.\n                             */\n\n                            if (!hasLayoutChanged) {\n                                finishAnimation(this)\n                            }\n\n                            if (this.isLead() && this.options.onExitComplete) {\n                                this.options.onExitComplete()\n                            }\n                        }\n\n                        this.targetLayout = newLayout\n                    }\n                )\n            }\n        }\n\n        unmount() {\n            this.options.layoutId && this.willUpdate()\n            this.root.nodes!.remove(this)\n            const stack = this.getStack()\n            stack && stack.remove(this)\n            this.parent && this.parent.children.delete(this)\n            this.instance = undefined\n            this.eventHandlers.clear()\n\n            cancelFrame(this.updateProjection)\n        }\n\n        // only on the root\n        blockUpdate() {\n            this.updateManuallyBlocked = true\n        }\n\n        unblockUpdate() {\n            this.updateManuallyBlocked = false\n        }\n\n        isUpdateBlocked() {\n            return this.updateManuallyBlocked || this.updateBlockedByResize\n        }\n\n        isTreeAnimationBlocked() {\n            return (\n                this.isAnimationBlocked ||\n                (this.parent && this.parent.isTreeAnimationBlocked()) ||\n                false\n            )\n        }\n\n        // Note: currently only running on root node\n        startUpdate() {\n            if (this.isUpdateBlocked()) return\n\n            this.isUpdating = true\n\n            this.nodes && this.nodes.forEach(resetSkewAndRotation)\n            this.animationId++\n        }\n\n        getTransformTemplate() {\n            const { visualElement } = this.options\n            return visualElement && visualElement.getProps().transformTemplate\n        }\n\n        willUpdate(shouldNotifyListeners = true) {\n            this.root.hasTreeAnimated = true\n\n            if (this.root.isUpdateBlocked()) {\n                this.options.onExitComplete && this.options.onExitComplete()\n                return\n            }\n\n            /**\n             * If we're running optimised appear animations then these must be\n             * cancelled before measuring the DOM. This is so we can measure\n             * the true layout of the element rather than the WAAPI animation\n             * which will be unaffected by the resetSkewAndRotate step.\n             *\n             * Note: This is a DOM write. Worst case scenario is this is sandwiched\n             * between other snapshot reads which will cause unnecessary style recalculations.\n             * This has to happen here though, as we don't yet know which nodes will need\n             * snapshots in startUpdate(), but we only want to cancel optimised animations\n             * if a layout animation measurement is actually going to be affected by them.\n             */\n            if (\n                window.MotionCancelOptimisedAnimation &&\n                !this.hasCheckedOptimisedAppear\n            ) {\n                cancelTreeOptimisedTransformAnimations(this)\n            }\n\n            !this.root.isUpdating && this.root.startUpdate()\n\n            if (this.isLayoutDirty) return\n\n            this.isLayoutDirty = true\n            for (let i = 0; i < this.path.length; i++) {\n                const node = this.path[i]\n                node.shouldResetTransform = true\n\n                node.updateScroll(\"snapshot\")\n\n                if (node.options.layoutRoot) {\n                    node.willUpdate(false)\n                }\n            }\n\n            const { layoutId, layout } = this.options\n            if (layoutId === undefined && !layout) return\n\n            const transformTemplate = this.getTransformTemplate()\n            this.prevTransformTemplateValue = transformTemplate\n                ? transformTemplate(this.latestValues, \"\")\n                : undefined\n\n            this.updateSnapshot()\n            shouldNotifyListeners && this.notifyListeners(\"willUpdate\")\n        }\n\n        // Note: Currently only running on root node\n        updateScheduled = false\n\n        update() {\n            this.updateScheduled = false\n\n            const updateWasBlocked = this.isUpdateBlocked()\n\n            // When doing an instant transition, we skip the layout update,\n            // but should still clean up the measurements so that the next\n            // snapshot could be taken correctly.\n            if (updateWasBlocked) {\n                this.unblockUpdate()\n                this.clearAllSnapshots()\n                this.nodes!.forEach(clearMeasurements)\n                return\n            }\n\n            /**\n             * If this is a repeat of didUpdate then ignore the animation.\n             */\n            if (this.animationId <= this.animationCommitId) {\n                this.nodes!.forEach(clearIsLayoutDirty)\n                return\n            }\n\n            this.animationCommitId = this.animationId\n\n            if (!this.isUpdating) {\n                this.nodes!.forEach(clearIsLayoutDirty)\n            } else {\n                this.isUpdating = false\n\n                /**\n                 * Write\n                 */\n                this.nodes!.forEach(resetTransformStyle)\n\n                /**\n                 * Read ==================\n                 */\n                // Update layout measurements of updated children\n                this.nodes!.forEach(updateLayout)\n\n                /**\n                 * Write\n                 */\n                // Notify listeners that the layout is updated\n                this.nodes!.forEach(notifyLayoutUpdate)\n            }\n\n            this.clearAllSnapshots()\n\n            /**\n             * Manually flush any pending updates. Ideally\n             * we could leave this to the following requestAnimationFrame but this seems\n             * to leave a flash of incorrectly styled content.\n             */\n            const now = time.now()\n            frameData.delta = clamp(0, 1000 / 60, now - frameData.timestamp)\n            frameData.timestamp = now\n            frameData.isProcessing = true\n            frameSteps.update.process(frameData)\n            frameSteps.preRender.process(frameData)\n            frameSteps.render.process(frameData)\n            frameData.isProcessing = false\n        }\n\n        scheduleUpdate = () => this.update()\n\n        didUpdate() {\n            if (!this.updateScheduled) {\n                this.updateScheduled = true\n                microtask.read(this.scheduleUpdate)\n            }\n        }\n\n        clearAllSnapshots() {\n            this.nodes!.forEach(clearSnapshot)\n            this.sharedNodes.forEach(removeLeadSnapshots)\n        }\n\n        projectionUpdateScheduled = false\n        scheduleUpdateProjection() {\n            if (!this.projectionUpdateScheduled) {\n                this.projectionUpdateScheduled = true\n                frame.preRender(this.updateProjection, false, true)\n            }\n        }\n\n        scheduleCheckAfterUnmount() {\n            /**\n             * If the unmounting node is in a layoutGroup and did trigger a willUpdate,\n             * we manually call didUpdate to give a chance to the siblings to animate.\n             * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.\n             */\n            frame.postRender(() => {\n                if (this.isLayoutDirty) {\n                    this.root.didUpdate()\n                } else {\n                    this.root.checkUpdateFailed()\n                }\n            })\n        }\n\n        checkUpdateFailed = () => {\n            if (this.isUpdating) {\n                this.isUpdating = false\n                this.clearAllSnapshots()\n            }\n        }\n\n        /**\n         * This is a multi-step process as shared nodes might be of different depths. Nodes\n         * are sorted by depth order, so we need to resolve the entire tree before moving to\n         * the next step.\n         */\n        updateProjection = () => {\n            this.projectionUpdateScheduled = false\n\n            /**\n             * Reset debug counts. Manually resetting rather than creating a new\n             * object each frame.\n             */\n            if (statsBuffer.value) {\n                metrics.nodes =\n                    metrics.calculatedTargetDeltas =\n                    metrics.calculatedProjections =\n                        0\n            }\n\n            this.nodes!.forEach(propagateDirtyNodes)\n            this.nodes!.forEach(resolveTargetDelta)\n            this.nodes!.forEach(calcProjection)\n            this.nodes!.forEach(cleanDirtyNodes)\n\n            if (statsBuffer.addProjectionMetrics) {\n                statsBuffer.addProjectionMetrics(metrics)\n            }\n        }\n\n        /**\n         * Update measurements\n         */\n        updateSnapshot() {\n            if (this.snapshot || !this.instance) return\n\n            this.snapshot = this.measure()\n\n            if (\n                this.snapshot &&\n                !calcLength(this.snapshot.measuredBox.x) &&\n                !calcLength(this.snapshot.measuredBox.y)\n            ) {\n                this.snapshot = undefined\n            }\n        }\n\n        updateLayout() {\n            if (!this.instance) return\n\n            this.updateScroll()\n\n            if (\n                !(this.options.alwaysMeasureLayout && this.isLead()) &&\n                !this.isLayoutDirty\n            ) {\n                return\n            }\n\n            /**\n             * When a node is mounted, it simply resumes from the prevLead's\n             * snapshot instead of taking a new one, but the ancestors scroll\n             * might have updated while the prevLead is unmounted. We need to\n             * update the scroll again to make sure the layout we measure is\n             * up to date.\n             */\n            if (this.resumeFrom && !this.resumeFrom.instance) {\n                for (let i = 0; i < this.path.length; i++) {\n                    const node = this.path[i]\n                    node.updateScroll()\n                }\n            }\n\n            const prevLayout = this.layout\n            this.layout = this.measure(false)\n            this.layoutVersion++\n            this.layoutCorrected = createBox()\n            this.isLayoutDirty = false\n            this.projectionDelta = undefined\n            this.notifyListeners(\"measure\", this.layout.layoutBox)\n\n            const { visualElement } = this.options\n            visualElement &&\n                visualElement.notify(\n                    \"LayoutMeasure\",\n                    this.layout.layoutBox,\n                    prevLayout ? prevLayout.layoutBox : undefined\n                )\n        }\n\n        updateScroll(phase: Phase = \"measure\") {\n            let needsMeasurement = Boolean(\n                this.options.layoutScroll && this.instance\n            )\n\n            if (\n                this.scroll &&\n                this.scroll.animationId === this.root.animationId &&\n                this.scroll.phase === phase\n            ) {\n                needsMeasurement = false\n            }\n\n            if (needsMeasurement && this.instance) {\n                const isRoot = checkIsScrollRoot(this.instance)\n                this.scroll = {\n                    animationId: this.root.animationId,\n                    phase,\n                    isRoot,\n                    offset: measureScroll(this.instance),\n                    wasRoot: this.scroll ? this.scroll.isRoot : isRoot,\n                }\n            }\n        }\n\n        resetTransform() {\n            if (!resetTransform) return\n\n            const isResetRequested =\n                this.isLayoutDirty ||\n                this.shouldResetTransform ||\n                this.options.alwaysMeasureLayout\n\n            const hasProjection =\n                this.projectionDelta && !isDeltaZero(this.projectionDelta)\n\n            const transformTemplate = this.getTransformTemplate()\n            const transformTemplateValue = transformTemplate\n                ? transformTemplate(this.latestValues, \"\")\n                : undefined\n\n            const transformTemplateHasChanged =\n                transformTemplateValue !== this.prevTransformTemplateValue\n\n            if (\n                isResetRequested &&\n                this.instance &&\n                (hasProjection ||\n                    hasTransform(this.latestValues) ||\n                    transformTemplateHasChanged)\n            ) {\n                resetTransform(this.instance, transformTemplateValue)\n                this.shouldResetTransform = false\n                this.scheduleRender()\n            }\n        }\n\n        measure(removeTransform = true) {\n            const pageBox = this.measurePageBox()\n\n            let layoutBox = this.removeElementScroll(pageBox)\n\n            /**\n             * Measurements taken during the pre-render stage\n             * still have transforms applied so we remove them\n             * via calculation.\n             */\n            if (removeTransform) {\n                layoutBox = this.removeTransform(layoutBox)\n            }\n\n            roundBox(layoutBox)\n\n            return {\n                animationId: this.root.animationId,\n                measuredBox: pageBox,\n                layoutBox,\n                latestValues: {},\n                source: this.id,\n            }\n        }\n\n        measurePageBox() {\n            const { visualElement } = this.options\n            if (!visualElement) return createBox()\n\n            const box = visualElement.measureViewportBox()\n\n            const wasInScrollRoot =\n                this.scroll?.wasRoot || this.path.some(checkNodeWasScrollRoot)\n\n            if (!wasInScrollRoot) {\n                // Remove viewport scroll to give page-relative coordinates\n                const { scroll } = this.root\n                if (scroll) {\n                    translateAxis(box.x, scroll.offset.x)\n                    translateAxis(box.y, scroll.offset.y)\n                }\n            }\n\n            return box\n        }\n\n        removeElementScroll(box: Box): Box {\n            const boxWithoutScroll = createBox()\n            copyBoxInto(boxWithoutScroll, box)\n\n            if (this.scroll?.wasRoot) {\n                return boxWithoutScroll\n            }\n\n            /**\n             * Performance TODO: Keep a cumulative scroll offset down the tree\n             * rather than loop back up the path.\n             */\n            for (let i = 0; i < this.path.length; i++) {\n                const node = this.path[i]\n                const { scroll, options } = node\n\n                if (node !== this.root && scroll && options.layoutScroll) {\n                    /**\n                     * If this is a new scroll root, we want to remove all previous scrolls\n                     * from the viewport box.\n                     */\n                    if (scroll.wasRoot) {\n                        copyBoxInto(boxWithoutScroll, box)\n                    }\n\n                    translateAxis(boxWithoutScroll.x, scroll.offset.x)\n                    translateAxis(boxWithoutScroll.y, scroll.offset.y)\n                }\n            }\n\n            return boxWithoutScroll\n        }\n\n        applyTransform(box: Box, transformOnly = false): Box {\n            const withTransforms = createBox()\n            copyBoxInto(withTransforms, box)\n            for (let i = 0; i < this.path.length; i++) {\n                const node = this.path[i]\n\n                if (\n                    !transformOnly &&\n                    node.options.layoutScroll &&\n                    node.scroll &&\n                    node !== node.root\n                ) {\n                    transformBox(withTransforms, {\n                        x: -node.scroll.offset.x,\n                        y: -node.scroll.offset.y,\n                    })\n                }\n\n                if (!hasTransform(node.latestValues)) continue\n                transformBox(withTransforms, node.latestValues)\n            }\n\n            if (hasTransform(this.latestValues)) {\n                transformBox(withTransforms, this.latestValues)\n            }\n\n            return withTransforms\n        }\n\n        removeTransform(box: Box): Box {\n            const boxWithoutTransform = createBox()\n            copyBoxInto(boxWithoutTransform, box)\n\n            for (let i = 0; i < this.path.length; i++) {\n                const node = this.path[i]\n                if (!node.instance) continue\n                if (!hasTransform(node.latestValues)) continue\n\n                hasScale(node.latestValues) && node.updateSnapshot()\n\n                const sourceBox = createBox()\n                const nodeBox = node.measurePageBox()\n                copyBoxInto(sourceBox, nodeBox)\n\n                removeBoxTransforms(\n                    boxWithoutTransform,\n                    node.latestValues,\n                    node.snapshot ? node.snapshot.layoutBox : undefined,\n                    sourceBox\n                )\n            }\n\n            if (hasTransform(this.latestValues)) {\n                removeBoxTransforms(boxWithoutTransform, this.latestValues)\n            }\n\n            return boxWithoutTransform\n        }\n\n        setTargetDelta(delta: Delta) {\n            this.targetDelta = delta\n            this.root.scheduleUpdateProjection()\n            this.isProjectionDirty = true\n        }\n\n        setOptions(options: ProjectionNodeOptions) {\n            this.options = {\n                ...this.options,\n                ...options,\n                crossfade:\n                    options.crossfade !== undefined ? options.crossfade : true,\n            }\n        }\n\n        clearMeasurements() {\n            this.scroll = undefined\n            this.layout = undefined\n            this.snapshot = undefined\n            this.prevTransformTemplateValue = undefined\n            this.targetDelta = undefined\n            this.target = undefined\n            this.isLayoutDirty = false\n        }\n\n        forceRelativeParentToResolveTarget() {\n            if (!this.relativeParent) return\n\n            /**\n             * If the parent target isn't up-to-date, force it to update.\n             * This is an unfortunate de-optimisation as it means any updating relative\n             * projection will cause all the relative parents to recalculate back\n             * up the tree.\n             */\n            if (\n                this.relativeParent.resolvedRelativeTargetAt !==\n                frameData.timestamp\n            ) {\n                this.relativeParent.resolveTargetDelta(true)\n            }\n        }\n\n        /**\n         * Frame calculations\n         */\n        resolvedRelativeTargetAt: number = 0.0\n        resolveTargetDelta(forceRecalculation = false) {\n            /**\n             * Once the dirty status of nodes has been spread through the tree, we also\n             * need to check if we have a shared node of a different depth that has itself\n             * been dirtied.\n             */\n            const lead = this.getLead()\n            this.isProjectionDirty ||= lead.isProjectionDirty\n            this.isTransformDirty ||= lead.isTransformDirty\n            this.isSharedProjectionDirty ||= lead.isSharedProjectionDirty\n\n            const isShared = Boolean(this.resumingFrom) || this !== lead\n\n            /**\n             * We don't use transform for this step of processing so we don't\n             * need to check whether any nodes have changed transform.\n             */\n            const canSkip = !(\n                forceRecalculation ||\n                (isShared && this.isSharedProjectionDirty) ||\n                this.isProjectionDirty ||\n                this.parent?.isProjectionDirty ||\n                this.attemptToResolveRelativeTarget ||\n                this.root.updateBlockedByResize\n            )\n\n            if (canSkip) return\n\n            const { layout, layoutId } = this.options\n\n            /**\n             * If we have no layout, we can't perform projection, so early return\n             */\n            if (!this.layout || !(layout || layoutId)) return\n\n            this.resolvedRelativeTargetAt = frameData.timestamp\n\n            const relativeParent = this.getClosestProjectingParent()\n\n            if (\n                relativeParent &&\n                this.linkedParentVersion !== relativeParent.layoutVersion &&\n                !relativeParent.options.layoutRoot\n            ) {\n                this.removeRelativeTarget()\n            }\n\n            /**\n             * If we don't have a targetDelta but do have a layout, we can attempt to resolve\n             * a relativeParent. This will allow a component to perform scale correction\n             * even if no animation has started.\n             */\n            if (!this.targetDelta && !this.relativeTarget) {\n                if (relativeParent && relativeParent.layout) {\n                    this.createRelativeTarget(\n                        relativeParent,\n                        this.layout.layoutBox,\n                        relativeParent.layout.layoutBox\n                    )\n                } else {\n                    this.removeRelativeTarget()\n                }\n            }\n\n            /**\n             * If we have no relative target or no target delta our target isn't valid\n             * for this frame.\n             */\n            if (!this.relativeTarget && !this.targetDelta) return\n\n            /**\n             * Lazy-init target data structure\n             */\n            if (!this.target) {\n                this.target = createBox()\n                this.targetWithTransforms = createBox()\n            }\n\n            /**\n             * If we've got a relative box for this component, resolve it into a target relative to the parent.\n             */\n            if (\n                this.relativeTarget &&\n                this.relativeTargetOrigin &&\n                this.relativeParent &&\n                this.relativeParent.target\n            ) {\n                this.forceRelativeParentToResolveTarget()\n\n                calcRelativeBox(\n                    this.target,\n                    this.relativeTarget,\n                    this.relativeParent.target\n                )\n\n                /**\n                 * If we've only got a targetDelta, resolve it into a target\n                 */\n            } else if (this.targetDelta) {\n                if (Boolean(this.resumingFrom)) {\n                    // TODO: This is creating a new object every frame\n                    this.target = this.applyTransform(this.layout.layoutBox)\n                } else {\n                    copyBoxInto(this.target, this.layout.layoutBox)\n                }\n\n                applyBoxDelta(this.target, this.targetDelta)\n            } else {\n                /**\n                 * If no target, use own layout as target\n                 */\n                copyBoxInto(this.target, this.layout.layoutBox)\n            }\n\n            /**\n             * If we've been told to attempt to resolve a relative target, do so.\n             */\n            if (this.attemptToResolveRelativeTarget) {\n                this.attemptToResolveRelativeTarget = false\n\n                if (\n                    relativeParent &&\n                    Boolean(relativeParent.resumingFrom) ===\n                        Boolean(this.resumingFrom) &&\n                    !relativeParent.options.layoutScroll &&\n                    relativeParent.target &&\n                    this.animationProgress !== 1\n                ) {\n                    this.createRelativeTarget(\n                        relativeParent,\n                        this.target,\n                        relativeParent.target\n                    )\n                } else {\n                    this.relativeParent = this.relativeTarget = undefined\n                }\n            }\n\n            /**\n             * Increase debug counter for resolved target deltas\n             */\n            if (statsBuffer.value) {\n                metrics.calculatedTargetDeltas++\n            }\n        }\n\n        getClosestProjectingParent() {\n            if (\n                !this.parent ||\n                hasScale(this.parent.latestValues) ||\n                has2DTranslate(this.parent.latestValues)\n            ) {\n                return undefined\n            }\n\n            if (this.parent.isProjecting()) {\n                return this.parent\n            } else {\n                return this.parent.getClosestProjectingParent()\n            }\n        }\n\n        isProjecting() {\n            return Boolean(\n                (this.relativeTarget ||\n                    this.targetDelta ||\n                    this.options.layoutRoot) &&\n                    this.layout\n            )\n        }\n\n        linkedParentVersion: number = 0\n        createRelativeTarget(\n            relativeParent: IProjectionNode,\n            layout: Box,\n            parentLayout: Box\n        ) {\n            this.relativeParent = relativeParent\n            this.linkedParentVersion = relativeParent.layoutVersion\n            this.forceRelativeParentToResolveTarget()\n            this.relativeTarget = createBox()\n            this.relativeTargetOrigin = createBox()\n            calcRelativePosition(\n                this.relativeTargetOrigin,\n                layout,\n                parentLayout\n            )\n\n            copyBoxInto(this.relativeTarget, this.relativeTargetOrigin)\n        }\n\n        removeRelativeTarget() {\n            this.relativeParent = this.relativeTarget = undefined\n        }\n\n        hasProjected: boolean = false\n\n        calcProjection() {\n            const lead = this.getLead()\n            const isShared = Boolean(this.resumingFrom) || this !== lead\n\n            let canSkip = true\n\n            /**\n             * If this is a normal layout animation and neither this node nor its nearest projecting\n             * is dirty then we can't skip.\n             */\n            if (this.isProjectionDirty || this.parent?.isProjectionDirty) {\n                canSkip = false\n            }\n\n            /**\n             * If this is a shared layout animation and this node's shared projection is dirty then\n             * we can't skip.\n             */\n            if (\n                isShared &&\n                (this.isSharedProjectionDirty || this.isTransformDirty)\n            ) {\n                canSkip = false\n            }\n\n            /**\n             * If we have resolved the target this frame we must recalculate the\n             * projection to ensure it visually represents the internal calculations.\n             */\n            if (this.resolvedRelativeTargetAt === frameData.timestamp) {\n                canSkip = false\n            }\n\n            if (canSkip) return\n\n            const { layout, layoutId } = this.options\n\n            /**\n             * If this section of the tree isn't animating we can\n             * delete our target sources for the following frame.\n             */\n            this.isTreeAnimating = Boolean(\n                (this.parent && this.parent.isTreeAnimating) ||\n                    this.currentAnimation ||\n                    this.pendingAnimation\n            )\n            if (!this.isTreeAnimating) {\n                this.targetDelta = this.relativeTarget = undefined\n            }\n\n            if (!this.layout || !(layout || layoutId)) return\n\n            /**\n             * Reset the corrected box with the latest values from box, as we're then going\n             * to perform mutative operations on it.\n             */\n            copyBoxInto(this.layoutCorrected, this.layout.layoutBox)\n\n            /**\n             * Record previous tree scales before updating.\n             */\n            const prevTreeScaleX = this.treeScale.x\n            const prevTreeScaleY = this.treeScale.y\n