UNPKG

motion-dom

Version:

github.com/motiondivision/motion

motiondivision/motion

1 lines • 4.91 kB
1
{"version":3,"file":"build-transform.mjs","sources":["../../../../../src/render/html/utils/build-transform.ts"],"sourcesContent":["import { getValueAsType } from \"../../../value/types/utils/get-as-type\"\nimport { numberValueTypes } from \"../../../value/types/maps/number\"\nimport { transformValueTypes } from \"../../../value/types/maps/transform\"\nimport type { AnyResolvedKeyframe } from \"../../../animation/types\"\nimport { transformPropOrder } from \"../../utils/keys-transform\"\nimport { ResolvedValues } from \"../../types\"\nimport { HTMLRenderState } from \"../types\"\nimport type { MotionNodeOptions } from \"../../../node/types\"\n\nexport const translateAlias: Record<string, string> = {\n x: \"translateX\",\n y: \"translateY\",\n z: \"translateZ\",\n transformPerspective: \"perspective\",\n}\n\nconst numTransforms = transformPropOrder.length\n\n/**\n * Cache of `translateX(`-style openers so each transform function is a few\n * string concatenations rather than a template.\n */\nconst openers: Record<string, string> = {}\n\n/**\n * A transform function, e.g. `translateX(10px)` for `x: 10`.\n */\nexport const transformFunction = (\n key: string,\n value: AnyResolvedKeyframe,\n valueAsType = getValueAsType(value, transformValueTypes[key])\n) => (openers[key] ||= (translateAlias[key] || key) + \"(\") + valueAsType + \")\"\n\n/**\n * Whether a transform value is at its default, so can be left out.\n */\nexport const isDefaultTransform = (key: string, value: AnyResolvedKeyframe) =>\n (typeof value === \"number\" ? value : parseFloat(value)) ===\n (key.startsWith(\"scale\") ? 1 : 0)\n\n/**\n * Build a CSS transform style from individual x/y/scale etc properties.\n *\n * This outputs with a default order of transforms/scales/rotations, this can be customised by\n * providing a transformTemplate function.\n */\nexport function buildTransform(\n latestValues: ResolvedValues,\n transform: HTMLRenderState[\"transform\"],\n transformTemplate?: MotionNodeOptions[\"transformTemplate\"]\n) {\n // The transform string we're going to build into.\n let transformString = \"\"\n\n /**\n * Loop over all possible transforms in order, adding the ones that\n * are present to the transform string.\n */\n for (let i = 0; i < numTransforms; i++) {\n const key = transformPropOrder[i]\n const value = latestValues[key]\n\n if (value === undefined) continue\n\n const valueAsType =\n transformTemplate &&\n (transform[key] = getValueAsType(value, numberValueTypes[key]))\n\n if (!isDefaultTransform(key, value)) {\n transformString +=\n transformFunction(key, value, valueAsType || undefined) + \" \"\n }\n }\n\n // `pathRotation` composes onto `rotate` as a separate additive term so\n // the user's `rotate` is never clobbered. Deliberately not a slot in\n // `transformPropOrder`.\n const pathRotation = latestValues.pathRotation\n if (pathRotation) {\n transformString += transformFunction(\"rotate\", pathRotation)\n }\n\n transformString = transformString.trim()\n\n // If we have a custom `transform` template, pass our transform values and\n // generated transformString to that before returning\n return transformTemplate\n ? transformTemplate(transform, transformString)\n : transformString || \"none\"\n}\n"],"names":[],"mappings":";;;;;AASO,MAAM,cAAc,GAA2B;AAClD,IAAA,CAAC,EAAE,YAAY;AACf,IAAA,CAAC,EAAE,YAAY;AACf,IAAA,CAAC,EAAE,YAAY;AACf,IAAA,oBAAoB,EAAE,aAAa;;AAGvC,MAAM,aAAa,GAAG,kBAAkB,CAAC,MAAM;AAE/C;;;AAGG;AACH,MAAM,OAAO,GAA2B,EAAE;AAE1C;;AAEG;MACU,iBAAiB,GAAG,CAC7B,GAAW,EACX,KAA0B,EAC1B,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,CAAC,KAC5D,CAAC,OAAO,CAAC,GAAG,CAAA,KAAX,OAAO,CAAC,GAAG,CAAA,GAAM,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,GAAG,KAAI,WAAW,GAAG;AAE3E;;AAEG;AACI,MAAM,kBAAkB,GAAG,CAAC,GAAW,EAAE,KAA0B,KACtE,CAAC,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC;AACtD,KAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC;AAEpC;;;;;AAKG;SACa,cAAc,CAC1B,YAA4B,EAC5B,SAAuC,EACvC,iBAA0D,EAAA;;IAG1D,IAAI,eAAe,GAAG,EAAE;AAExB;;;AAGG;AACH,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE;AACpC,QAAA,MAAM,GAAG,GAAG,kBAAkB,CAAC,CAAC,CAAC;AACjC,QAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC;QAE/B,IAAI,KAAK,KAAK,SAAS;YAAE;QAEzB,MAAM,WAAW,GACb,iBAAiB;AACjB,aAAC,SAAS,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;QAEnE,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE;YACjC,eAAe;gBACX,iBAAiB,CAAC,GAAG,EAAE,KAAK,EAAE,WAAW,IAAI,SAAS,CAAC,GAAG,GAAG;QACrE;IACJ;;;;AAKA,IAAA,MAAM,YAAY,GAAG,YAAY,CAAC,YAAY;IAC9C,IAAI,YAAY,EAAE;AACd,QAAA,eAAe,IAAI,iBAAiB,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChE;AAEA,IAAA,eAAe,GAAG,eAAe,CAAC,IAAI,EAAE;;;AAIxC,IAAA,OAAO;AACH,UAAE,iBAAiB,CAAC,SAAS,EAAE,eAAe;AAC9C,UAAE,eAAe,IAAI,MAAM;AACnC;;;;"}