{"version":3,"file":"element.mjs","sources":["../../../../src/animation/animate/element.ts"],"sourcesContent":["import { styleSubjectEffect, StyleSubject } from \"../../effects/style\"\nimport { svgSubjectEffect } from \"../../effects/svg\"\nimport { measureViewportBox } from \"../../projection/utils/measure\"\nimport type { VisualElement } from \"../../render/VisualElement\"\nimport { isSVGElement } from \"../../utils/is-svg-element\"\nimport { activeScope } from \"../../scope/active\"\nimport { MotionValue, Owner } from \"../../value\"\nimport { transformGroups } from \"../waapi/transforms/groups\"\nimport { DOMKeyframesResolver } from \"../keyframes/DOMKeyframesResolver\"\nimport { AnimationElement } from \"../keyframes/types\"\nimport { AnimationPlaybackControlsWithThen } from \"../types\"\nimport {\n    animateEffectSubject,\n    animateValues,\n    EffectKeyframes,\n    EffectTransition,\n} from \"./effects\"\n\nconst noProps = {}\n\ntype ElementEffect = typeof styleSubjectEffect\n\nconst getElementEffect = (element: Element) =>\n    (isSVGElement(element)\n        ? svgSubjectEffect\n        : styleSubjectEffect) as ElementEffect\n\n/**\n * Presents an effect bound to a DOM element in the shape the DOM keyframe\n * resolver and WAAPI expect, which is that of a VisualElement. Holds no\n * state: everything delegates to the effect. Goes once the resolver takes\n * an effect and subject directly.\n */\nclass EffectSubject implements AnimationElement, Owner {\n    KeyframeResolver = DOMKeyframesResolver\n\n    constructor(private effect: ElementEffect, public current: StyleSubject) {}\n\n    getValue(key: string) {\n        return this.effect.get(this.current, key)\n    }\n\n    readValue(key: string, target?: unknown) {\n        return this.effect.read(this.current, key, target as any)\n    }\n\n    render() {\n        this.effect.flush(this.current)\n    }\n\n    measureViewportBox() {\n        return measureViewportBox(this.current as HTMLElement)\n    }\n\n    getProps() {\n        return noProps\n    }\n}\n\n/**\n * Animate a DOM element's styles. HTML elements are bound through\n * styleEffect, SVG through svgEffect, and both are resolved with the DOM\n * keyframe resolver so reads are batched, units are converted by\n * measurement and eligible values run on WAAPI.\n *\n * Pass the element's VisualElement (a <motion.*> component or an\n * animateLayout() node) to animate its values instead, so the two keep\n * sharing values and a renderer.\n */\nexport function animateElement(\n    element: StyleSubject,\n    keyframes: EffectKeyframes,\n    transition?: EffectTransition,\n    visualElement?: VisualElement\n): AnimationPlaybackControlsWithThen[] {\n    activeScope.current?.track(element)\n\n    if (visualElement) {\n        return animateValues(\n            (key) => visualElement.getValue(key, null),\n            keyframes,\n            transition,\n            visualElement\n        )\n    }\n\n    const effect = getElementEffect(element)\n\n    return animateEffectSubject(\n        effect,\n        element,\n        keyframes,\n        transition,\n        new EffectSubject(effect, element)\n    )\n}\n\n/**\n * Detach the values styleEffect/svgEffect bound to `element`, so the\n * next animation reads its starting values from the DOM again.\n */\nexport const releaseElement = (element: Element) =>\n    getElementEffect(element)\n        .state(element as StyleSubject)\n        ?.release()\n\n/**\n * Hand the values styleEffect/svgEffect are rendering on `element`,\n * whether bound by animate() or directly, to a VisualElement that now\n * owns the element (e.g. created by animateLayout()), so a single\n * renderer drives them alongside its own values.\n */\nexport function handOffElementState(\n    element: Element,\n    visualElement: VisualElement\n) {\n    const state = getElementEffect(element).state(element as StyleSubject)\n    if (!state) return\n\n    /**\n     * A transform group reads values through the effect state, which is\n     * about to be emptied. Hand its animations to the main thread (writing\n     * their current transform) and detach it, so animations the\n     * VisualElement starts form a new group that reads from it.\n     */\n    const group = transformGroups.get(element)\n    if (group) {\n        group.demote()\n        transformGroups.delete(element)\n    }\n\n    const { transformKeys } = state\n    state.release().forEach((value: MotionValue, key: string) => {\n        /**\n         * The style effect derives transform (from the bound transform\n         * keys) and transformBox itself; a VisualElement builds its own.\n         */\n        const derived =\n            key === \"transformBox\" ||\n            (key === \"transform\" && transformKeys?.length)\n\n        if (!derived) {\n            value.owner = visualElement\n            visualElement.addValue(key, value)\n        }\n    })\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBA,MAAM,OAAO,GAAG,EAAE;AAIlB,MAAM,gBAAgB,GAAG,CAAC,OAAgB,MACrC,YAAY,CAAC,OAAO;AACjB,MAAE;MACA,kBAAkB,CAAkB;AAE9C;;;;;AAKG;AACH,MAAM,aAAa,CAAA;IAGf,WAAA,CAAoB,MAAqB,EAAS,OAAqB,EAAA;QAAnD,IAAA,CAAA,MAAM,GAAN,MAAM;QAAwB,IAAA,CAAA,OAAO,GAAP,OAAO;QAFzD,IAAA,CAAA,gBAAgB,GAAG,oBAAoB;IAEmC;AAE1E,IAAA,QAAQ,CAAC,GAAW,EAAA;AAChB,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC;IAC7C;IAEA,SAAS,CAAC,GAAW,EAAE,MAAgB,EAAA;AACnC,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,MAAa,CAAC;IAC7D;IAEA,MAAM,GAAA;QACF,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IACnC;IAEA,kBAAkB,GAAA;AACd,QAAA,OAAO,kBAAkB,CAAC,IAAI,CAAC,OAAsB,CAAC;IAC1D;IAEA,QAAQ,GAAA;AACJ,QAAA,OAAO,OAAO;IAClB;AACH;AAED;;;;;;;;;AASG;AACG,SAAU,cAAc,CAC1B,OAAqB,EACrB,SAA0B,EAC1B,UAA6B,EAC7B,aAA6B,EAAA;AAE7B,IAAA,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC;IAEnC,IAAI,aAAa,EAAE;QACf,OAAO,aAAa,CAChB,CAAC,GAAG,KAAK,aAAa,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,EAC1C,SAAS,EACT,UAAU,EACV,aAAa,CAChB;IACL;AAEA,IAAA,MAAM,MAAM,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAExC,IAAA,OAAO,oBAAoB,CACvB,MAAM,EACN,OAAO,EACP,SAAS,EACT,UAAU,EACV,IAAI,aAAa,CAAC,MAAM,EAAE,OAAO,CAAC,CACrC;AACL;AAEA;;;AAGG;AACI,MAAM,cAAc,GAAG,CAAC,OAAgB,KAC3C,gBAAgB,CAAC,OAAO;KACnB,KAAK,CAAC,OAAuB;MAC5B,OAAO;AAEjB;;;;;AAKG;AACG,SAAU,mBAAmB,CAC/B,OAAgB,EAChB,aAA4B,EAAA;IAE5B,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,OAAuB,CAAC;AACtE,IAAA,IAAI,CAAC,KAAK;QAAE;AAEZ;;;;;AAKG;IACH,MAAM,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC;IAC1C,IAAI,KAAK,EAAE;QACP,KAAK,CAAC,MAAM,EAAE;AACd,QAAA,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC;IACnC;AAEA,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK;IAC/B,KAAK,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC,KAAkB,EAAE,GAAW,KAAI;AACxD;;;AAGG;AACH,QAAA,MAAM,OAAO,GACT,GAAG,KAAK,cAAc;aACrB,GAAG,KAAK,WAAW,IAAI,aAAa,EAAE,MAAM,CAAC;QAElD,IAAI,CAAC,OAAO,EAAE;AACV,YAAA,KAAK,CAAC,KAAK,GAAG,aAAa;AAC3B,YAAA,aAAa,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC;QACtC;AACJ,IAAA,CAAC,CAAC;AACN;;;;"}