UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

1 lines 2.06 kB
{"version":3,"file":"path.mjs","sources":["../../../../../src/render/svg/utils/path.ts"],"sourcesContent":["import { px } from \"motion-dom\"\nimport { ResolvedValues } from \"../../types\"\n\nconst dashKeys = {\n offset: \"stroke-dashoffset\",\n array: \"stroke-dasharray\",\n}\n\nconst camelKeys = {\n offset: \"strokeDashoffset\",\n array: \"strokeDasharray\",\n}\n\n/**\n * Build SVG path properties. Uses the path's measured length to convert\n * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset\n * and stroke-dasharray attributes.\n *\n * This function is mutative to reduce per-frame GC.\n */\nexport function buildSVGPath(\n attrs: ResolvedValues,\n length: number,\n spacing = 1,\n offset = 0,\n useDashCase: boolean = true\n): void {\n // Normalise path length by setting SVG attribute pathLength to 1\n attrs.pathLength = 1\n\n // We use dash case when setting attributes directly to the DOM node and camel case\n // when defining props on a React component.\n const keys = useDashCase ? dashKeys : camelKeys\n\n // Build the dash offset\n attrs[keys.offset] = px.transform!(-offset)\n\n // Build the dash array\n const pathLength = px.transform!(length)\n const pathSpacing = px.transform!(spacing)\n attrs[keys.array] = `${pathLength} ${pathSpacing}`\n}\n"],"names":[],"mappings":";;AAGA,MAAM,QAAQ,GAAG;AACb,IAAA,MAAM,EAAE,mBAAmB;AAC3B,IAAA,KAAK,EAAE,kBAAkB;CAC5B,CAAA;AAED,MAAM,SAAS,GAAG;AACd,IAAA,MAAM,EAAE,kBAAkB;AAC1B,IAAA,KAAK,EAAE,iBAAiB;CAC3B,CAAA;AAED;;;;;;AAMG;SACa,YAAY,CACxB,KAAqB,EACrB,MAAc,EACd,OAAO,GAAG,CAAC,EACX,MAAM,GAAG,CAAC,EACV,cAAuB,IAAI,EAAA;;AAG3B,IAAA,KAAK,CAAC,UAAU,GAAG,CAAC,CAAA;;;IAIpB,MAAM,IAAI,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAA;;AAG/C,IAAA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,SAAU,CAAC,CAAC,MAAM,CAAC,CAAA;;IAG3C,MAAM,UAAU,GAAG,EAAE,CAAC,SAAU,CAAC,MAAM,CAAC,CAAA;IACxC,MAAM,WAAW,GAAG,EAAE,CAAC,SAAU,CAAC,OAAO,CAAC,CAAA;IAC1C,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,WAAW,CAAA,CAAE,CAAA;AACtD;;;;"}