All files / src/render/svg/utils path.ts

100% Statements 13/13
75% Branches 6/8
100% Functions 1/1
100% Lines 13/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 4335x     35x         35x                       35x     4x 4x 5x     4x       4x     4x     4x 4x 4x    
import { px } from "style-value-types"
import { ResolvedValues } from "../../types"
 
const dashKeys = {
    offset: "stroke-dashoffset",
    array: "stroke-dasharray",
}
 
const camelKeys = {
    offset: "strokeDashoffset",
    array: "strokeDasharray",
}
 
/**
 * Build SVG path properties. Uses the path's measured length to convert
 * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
 * and stroke-dasharray attributes.
 *
 * This function is mutative to reduce per-frame GC.
 */
export function buildSVGPath(
    attrs: ResolvedValues,
    length: number,
    Ispacing = 1,
    Ioffset = 0,
    useDashCase: boolean = true
): void {
    // Normalise path length by setting SVG attribute pathLength to 1
    attrs.pathLength = 1
 
    // We use dash case when setting attributes directly to the DOM node and camel case
    // when defining props on a React component.
    const keys = useDashCase ? dashKeys : camelKeys
 
    // Build the dash offset
    attrs[keys.offset] = px.transform!(-offset)
 
    // Build the dash array
    const pathLength = px.transform!(length)
    const pathSpacing = px.transform!(spacing)
    attrs[keys.array] = `${pathLength} ${pathSpacing}`
}