1 line
4.3 KiB
Plaintext
1 line
4.3 KiB
Plaintext
{"version":3,"file":"index.mjs","sources":["../../../../src/effects/style/index.ts"],"sourcesContent":["import { isCSSVar } from \"../../render/dom/is-css-var\"\nimport { transformProps } from \"../../render/utils/keys-transform\"\nimport { isHTMLElement } from \"../../utils/is-html-element\"\nimport { MotionValue } from \"../../value\"\nimport { MotionValueState } from \"../MotionValueState\"\nimport { createSelectorEffect } from \"../utils/create-dom-effect\"\nimport { createEffect } from \"../utils/create-effect\"\nimport { buildTransform } from \"./transform\"\n\nconst originProps = new Set([\"originX\", \"originY\", \"originZ\"])\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 (!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 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 = state.latest.originX ?? \"50%\"\n const originY = state.latest.originY ?? \"50%\"\n const originZ = state.latest.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, state.latest[key] as string)\n }\n } else {\n render = () => {\n element.style[key as any] = state.latest[key] as string\n }\n }\n\n return state.set(key, value, render, computed)\n}\n\nexport const styleEffect = /*@__PURE__*/ createSelectorEffect(\n /*@__PURE__*/ createEffect(addStyleValue)\n)\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAA;AAEvD,MAAM,aAAa,GAAG,CACzB,OAAiC,EACjC,KAAuB,EACvB,GAAW,EACX,KAAkB,KAClB;IACA,IAAI,MAAM,GAA6B,SAAS,CAAA;IAChD,IAAI,QAAQ,GAA4B,SAAS,CAAA;AAEjD,IAAA,IAAI,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QACzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;;;AAGzB,YAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE;AACvD,gBAAA,aAAa,CACT,OAAO,EACP,KAAK,EACL,cAAc,EACd,IAAI,WAAW,CAAC,UAAU,CAAC,CAC9B,CAAA;aACJ;AAED,YAAA,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,IAAI,WAAW,CAAC,MAAM,CAAC,EAAE,MAAK;gBACjD,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;AACnD,aAAC,CAAC,CAAA;SACL;AAED,QAAA,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KACpC;AAAM,SAAA,IAAI,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QAC7B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE;AAC/B,YAAA,KAAK,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,WAAW,CAAC,EAAE,CAAC,EAAE,MAAK;gBACnD,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,IAAI,KAAK,CAAA;gBAC7C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,IAAI,KAAK,CAAA;gBAC7C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,IAAI,CAAC,CAAA;AACzC,gBAAA,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,CAAA,EAAG,OAAO,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA,EAAI,OAAO,CAAA,CAAE,CAAA;AACtE,aAAC,CAAC,CAAA;SACL;AAED,QAAA,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAC1C;AAAM,SAAA,IAAI,QAAQ,CAAC,GAAG,CAAC,EAAE;QACtB,MAAM,GAAG,MAAK;AACV,YAAA,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAW,CAAC,CAAA;AAC/D,SAAC,CAAA;KACJ;SAAM;QACH,MAAM,GAAG,MAAK;AACV,YAAA,OAAO,CAAC,KAAK,CAAC,GAAU,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAW,CAAA;AAC3D,SAAC,CAAA;KACJ;AAED,IAAA,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAA;AAClD,EAAC;AAEY,MAAA,WAAW,iBAAiB,oBAAoB;AACzD,cAAc,YAAY,CAAC,aAAa,CAAC;;;;"} |