{"version":3,"file":"index.mjs","sources":["../../../../src/effects/style/index.ts"],"sourcesContent":["import { transformGroups } from \"../../animation/waapi/transforms/groups\"\nimport { isCSSVar } from \"../../render/dom/is-css-var\"\nimport { readTransformValue } from \"../../render/dom/parse-transform\"\nimport {\n    transformPropOrder,\n    transformProps,\n} from \"../../render/utils/keys-transform\"\nimport { isHTMLElement } from \"../../utils/is-html-element\"\nimport { isSVGElement } from \"../../utils/is-svg-element\"\nimport { MotionValue } from \"../../value\"\nimport { numberValueTypes } from \"../../value/types/maps/number\"\nimport { getValueAsType } from \"../../value/types/utils/get-as-type\"\nimport { MotionValueState } from \"../MotionValueState\"\nimport { createSelectorEffect } from \"../utils/create-dom-effect\"\nimport { createEffect } from \"../utils/create-effect\"\nimport { buildTransform } from \"./transform\"\n\nexport const originProps = new Set([\"originX\", \"originY\", \"originZ\"])\n\n/**\n * A bound value in its default unit, e.g. `originX: 50` -> `\"50%\"`.\n */\nconst styleValue = (state: MotionValueState, key: string) =>\n    getValueAsType(state.get(key)?.get(), numberValueTypes[key])\n\nexport const addStyleValue = (\n    element: HTMLElement | SVGElement,\n    state: MotionValueState,\n    key: string,\n    value: MotionValue\n) => {\n    let render: VoidFunction | undefined = undefined\n    let computed: MotionValue | undefined = undefined\n\n    if (transformProps.has(key)) {\n        if (key !== \"pathRotation\") {\n            const keys = (state.transformKeys ??= [])\n            ;(state.transformValues ??= {})[key] = value\n\n            if (!keys.includes(key)) {\n                keys.push(key)\n                keys.sort(\n                    (a, b) =>\n                        transformPropOrder.indexOf(a) -\n                        transformPropOrder.indexOf(b)\n                )\n            }\n        }\n\n        if (!state.get(\"transform\")) {\n            // If this is an HTML element, we need to set the transform-box to fill-box\n            // to normalise the transform relative to the element's bounding box\n            if (!isHTMLElement(element) && !state.get(\"transformBox\")) {\n                addStyleValue(\n                    element,\n                    state,\n                    \"transformBox\",\n                    new MotionValue(\"fill-box\")\n                )\n            }\n\n            state.set(\"transform\", new MotionValue(\"none\"), () => {\n                transformGroups.get(element)?.check()\n                element.style.transform = buildTransform(state)\n            })\n        }\n\n        computed = state.get(\"transform\")\n    } else if (originProps.has(key)) {\n        if (!state.get(\"transformOrigin\")) {\n            state.set(\"transformOrigin\", new MotionValue(\"\"), () => {\n                const originX = styleValue(state, \"originX\") ?? \"50%\"\n                const originY = styleValue(state, \"originY\") ?? \"50%\"\n                const originZ = styleValue(state, \"originZ\") ?? 0\n                element.style.transformOrigin = `${originX} ${originY} ${originZ}`\n            })\n        }\n\n        computed = state.get(\"transformOrigin\")\n    } else if (isCSSVar(key)) {\n        render = () => {\n            element.style.setProperty(key, value.getCurrent() as string)\n        }\n    } else {\n        render = () => {\n            element.style[key as any] = getValueAsType(\n                value.getCurrent(),\n                numberValueTypes[key]\n            ) as string\n        }\n    }\n\n    return state.set(key, value, render, computed)\n}\n\nexport type StyleSubject = HTMLElement | SVGElement\n\nconst isStyleSubject = (subject: unknown): subject is StyleSubject =>\n    isHTMLElement(subject) || isSVGElement(subject)\n\n/**\n * Reads the current value of a style from the element, as the initial\n * keyframe when `animate()` targets an element via this effect. Transforms\n * are parsed out of the computed matrix; everything else is the computed\n * style. Units aren't converted to match the target keyframes. A style\n * the browser can't report is 0, as a VisualElement reports it.\n */\nexport const readStyleValue = (element: StyleSubject, key: string) => {\n    if (transformProps.has(key)) {\n        return readTransformValue(element as HTMLElement, key)\n    }\n\n    const computedStyle = getComputedStyle(element)\n    const value = isCSSVar(key)\n        ? computedStyle.getPropertyValue(key)\n        : computedStyle[key as any]\n\n    return (typeof value === \"string\" && value.trim()) || 0\n}\n\n/**\n * The per-element effect `animate()` binds through, so HTML values share\n * state with a direct `styleEffect()` call. The exported `styleEffect`\n * is this wrapped to also accept selectors.\n */\nexport const styleSubjectEffect = /*@__PURE__*/ createEffect(addStyleValue, {\n    test: isStyleSubject,\n    read: readStyleValue,\n})\n\nexport const styleEffect =\n    /*@__PURE__*/ createSelectorEffect(styleSubjectEffect)\n"],"names":[],"mappings":"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"}