{"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 { MotionValue, Owner } from \"../../value\"\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 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 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 * 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 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 derived || visualElement.addValue(key, value)\n })\n}\n"],"names":[],"mappings":";;;;;;;AAgBA,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;IAE7B,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;;;;;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,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,OAAO,IAAI,aAAa,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC;AACjD,IAAA,CAAC,CAAC;AACN;;;;"}