@solidports/recharts 0.1.0

package/src/util/getActiveCoordinate.ts

@@ -0,0 +1,213 @@
+/* eslint-disable import/no-cycle */
+import {
+	AxisType,
+	CartesianLayout,
+	ChartOffsetInternal,
+	RelativePointer,
+	Coordinate,
+	PolarCoordinate,
+	PolarLayout,
+	RangeObj,
+	TickItem,
+} from "./types"
+import { polarToCartesian } from "./PolarUtils"
+import { AxisRange } from "../state/selectors/axisSelectors"
+import { mathSign } from "./DataUtils"
+
+export const getActiveCartesianCoordinate = (
+	layout: CartesianLayout,
+	tooltipTicks: readonly TickItem[],
+	activeIndex: number | undefined,
+	pointer: RelativePointer,
+): Coordinate => {
+	const entry = tooltipTicks.find((tick) => tick && tick.index === activeIndex)
+
+	if (entry) {
+		if (layout === "horizontal") {
+			return { x: entry.coordinate, y: pointer.relativeY }
+		}
+		if (layout === "vertical") {
+			return { x: pointer.relativeX, y: entry.coordinate }
+		}
+	}
+
+	return { x: 0, y: 0 }
+}
+
+/**
+ * Get the active coordinate in polar coordinate system.
+ * Internally we only really use x and y, but this returned object is part of public API
+ * (because it goes straight to the tooltip content) so we keep all the other properties
+ * for backwards compatibility.
+ *
+ * @param layout - The polar layout type ('centric' or 'radial').
+ * @param tooltipTicks - Array of tick items used for tooltips.
+ * @param activeIndex - The index of the active tick.
+ * @param rangeObj - The range object containing polar chart properties.
+ * @returns The active coordinate object with polar properties.
+ */
+export const getActivePolarCoordinate = (
+	layout: PolarLayout,
+	tooltipTicks: readonly TickItem[],
+	activeIndex: number | undefined,
+	rangeObj: RangeObj,
+): PolarCoordinate => {
+	const entry = tooltipTicks.find((tick) => tick && tick.index === activeIndex)
+
+	if (entry) {
+		if (layout === "centric") {
+			const angle = entry.coordinate
+			const { radius } = rangeObj
+
+			return {
+				...rangeObj,
+				...polarToCartesian(rangeObj.cx, rangeObj.cy, radius, angle),
+				angle,
+				radius,
+			}
+		}
+
+		const radius = entry.coordinate
+		const { angle } = rangeObj
+
+		return {
+			...rangeObj,
+			...polarToCartesian(rangeObj.cx, rangeObj.cy, radius, angle),
+			angle,
+			radius,
+		}
+	}
+
+	return {
+		angle: 0,
+		clockWise: false,
+		cx: 0,
+		cy: 0,
+		endAngle: 0,
+		innerRadius: 0,
+		outerRadius: 0,
+		radius: 0,
+		startAngle: 0,
+		x: 0,
+		y: 0,
+	}
+}
+
+export function isInCartesianRange(pointer: RelativePointer, offset: ChartOffsetInternal): boolean {
+	const { relativeX: x, relativeY: y } = pointer
+	return (
+		x >= offset.left &&
+		x <= offset.left + offset.width &&
+		y >= offset.top &&
+		y <= offset.top + offset.height
+	)
+}
+
+export const calculateActiveTickIndex = (
+	/**
+	 * For different layouts, `coordinate` is different:
+	 * In horizontal layout, this is expected to be the `x` coordinate
+	 * vertical -> y
+	 * centric -> angle
+	 * radial -> radius
+	 */
+	coordinate: number | undefined,
+	ticks: ReadonlyArray<TickItem> | undefined,
+	unsortedTicks: ReadonlyArray<TickItem>,
+	axisType: AxisType | undefined,
+	range: AxisRange | undefined,
+): number | undefined => {
+	const len = ticks?.length ?? 0
+
+	if (len <= 1 || coordinate == null) {
+		return 0
+	}
+
+	if (
+		axisType === "angleAxis" &&
+		range != null &&
+		Math.abs(Math.abs(range[1] - range[0]) - 360) <= 1e-6
+	) {
+		const span = range[1] - range[0]
+		/* The pointer may sit in the wrap-around gap of a full circle; test it shifted by ±360 too. */
+		const isInside = (lowerLimit: number, upperLimit: number, inclusiveLower: boolean): boolean =>
+			[coordinate, coordinate + span, coordinate - span].some(
+				(c) => (inclusiveLower ? c >= lowerLimit : c > lowerLimit) && c <= upperLimit,
+			)
+		for (let i = 0; i < len; i++) {
+			const before = i > 0 ? unsortedTicks[i - 1]?.coordinate : unsortedTicks[len - 1]?.coordinate
+			const cur = unsortedTicks[i]?.coordinate
+			const after = i >= len - 1 ? unsortedTicks[0]?.coordinate : unsortedTicks[i + 1]?.coordinate
+			let sameDirectionCoord
+
+			if (before == null || cur == null || after == null) {
+				continue
+			}
+
+			if (mathSign(cur - before) !== mathSign(after - cur)) {
+				const diffInterval: number[] = []
+				if (mathSign(after - cur) === mathSign(range[1] - range[0])) {
+					sameDirectionCoord = after
+
+					const curInRange = cur + range[1] - range[0]
+					diffInterval[0] = Math.min(curInRange, (curInRange + before) / 2)
+					diffInterval[1] = Math.max(curInRange, (curInRange + before) / 2)
+				} else {
+					sameDirectionCoord = before
+
+					const afterInRange = after + range[1] - range[0]
+					diffInterval[0] = Math.min(cur, (afterInRange + cur) / 2)
+					diffInterval[1] = Math.max(cur, (afterInRange + cur) / 2)
+				}
+				const sameInterval: [number, number] = [
+					Math.min(cur, (sameDirectionCoord + cur) / 2),
+					Math.max(cur, (sameDirectionCoord + cur) / 2),
+				]
+
+				if (
+					isInside(sameInterval[0], sameInterval[1], false) ||
+					isInside(diffInterval[0] ?? 0, diffInterval[1] ?? 0, true)
+				) {
+					return unsortedTicks[i]?.index
+				}
+			} else {
+				const minValue = Math.min(before, after)
+				const maxValue = Math.max(before, after)
+
+				if (isInside((minValue + cur) / 2, (maxValue + cur) / 2, false)) {
+					return unsortedTicks[i]?.index
+				}
+			}
+		}
+	} else if (ticks) {
+		for (let i = 0; i < len; i++) {
+			const curr = ticks[i]
+			if (curr == null) {
+				continue
+			}
+			const next = ticks[i + 1]
+			const prev = ticks[i - 1]
+
+			if (i === 0 && next != null && coordinate <= (curr.coordinate + next.coordinate) / 2) {
+				return curr.index
+			}
+
+			if (i === len - 1 && prev != null && coordinate > (curr.coordinate + prev.coordinate) / 2) {
+				return curr.index
+			}
+
+			if (
+				i > 0 &&
+				i < len - 1 &&
+				prev != null &&
+				next != null &&
+				coordinate > (curr.coordinate + prev.coordinate) / 2 &&
+				coordinate <= (curr.coordinate + next.coordinate) / 2
+			) {
+				return curr.index
+			}
+		}
+	}
+
+	return -1
+}

package/src/util/getAxisTypeBasedOnLayout.ts

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-cycle */
+import { AxisDomainTypeInput, AxisType, EvaluatedAxisDomainType, LayoutType } from "./types"
+import { isCategoricalAxis } from "./ChartUtils"
+
+/**
+ * This function evaluates the "auto" axis domain type based on the chart layout and axis type.
+ * It outputs a definitive axis domain type that can be used for further processing.
+ */
+export function getAxisTypeBasedOnLayout(
+	layout: LayoutType | undefined,
+	axisType: AxisType,
+	axisDomainType: AxisDomainTypeInput,
+): EvaluatedAxisDomainType | undefined {
+	if (axisDomainType !== "auto") {
+		return axisDomainType
+	}
+	if (layout == null) {
+		return undefined
+	}
+	return isCategoricalAxis(layout, axisType) ? "category" : "number"
+}

package/src/util/getClassNameFromUnknown.ts

@@ -0,0 +1,6 @@
+export function getClassNameFromUnknown(u: unknown): string {
+	if (u && typeof u === "object" && "className" in u && typeof u.className === "string") {
+		return u.className
+	}
+	return ""
+}

package/src/util/getEveryNth.ts

@@ -0,0 +1,27 @@
+/**
+ * Given an array and a number N, return a new array which contains every nTh
+ * element of the input array. For n below 1, an empty array is returned.
+ * For n equal to 1, the input array is returned as is.
+ * For n greater than the length of the array, an array containing the first element
+ * and every nTh element after that (if any) is returned.
+ *
+ * @param array An input array.
+ * @param n A number specifying which elements to take.
+ * @returns The result array of the same type as the input array.
+ */
+export function getEveryNth<Type>(array: ReadonlyArray<Type>, n: number): ReadonlyArray<Type> {
+	if (n < 1) {
+		return []
+	}
+	if (n === 1) {
+		return array
+	}
+	const result: Type[] = []
+	for (let i = 0; i < array.length; i += n) {
+		const item = array[i]
+		if (item !== undefined) {
+			result.push(item)
+		}
+	}
+	return result
+}

package/src/util/getRadiusAndStrokeWidthFromDot.ts

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-cycle */
+import { ActiveDotType, DotType } from "./types"
+import { svgPropertiesNoEventsFromUnknown } from "./svgPropertiesNoEvents"
+
+export function getRadiusAndStrokeWidthFromDot(dot: ActiveDotType | DotType): {
+	r: number
+	strokeWidth: number
+} {
+	const props = svgPropertiesNoEventsFromUnknown(dot) as
+		| Record<string, unknown>
+		| null
+	const defaultR = 3
+	const defaultStrokeWidth = 2
+	if (props != null) {
+		const r = props.r
+		/* svgPropertiesNoEvents canonicalizes camelCase → kebab; check both forms. */
+		const strokeWidth = props["stroke-width"] ?? props.strokeWidth
+		let realR = Number(r)
+		let realStrokeWidth = Number(strokeWidth)
+		if (Number.isNaN(realR) || realR < 0) {
+			realR = defaultR
+		}
+		if (Number.isNaN(realStrokeWidth) || realStrokeWidth < 0) {
+			realStrokeWidth = defaultStrokeWidth
+		}
+		return {
+			r: realR,
+			strokeWidth: realStrokeWidth,
+		}
+	}
+	return {
+		r: defaultR,
+		strokeWidth: defaultStrokeWidth,
+	}
+}

package/src/util/getRelativeCoordinate.ts

@@ -0,0 +1,80 @@
+/* eslint-disable import/no-cycle */
+import {
+	RelativePointer,
+	MousePointer,
+	SVGMousePointer,
+	TouchPointer,
+	SVGTouchPointer,
+} from "./types"
+
+/**
+ * Type guard to check if the pointer event is from an SVG element.
+ */
+function isSvgPointer(
+	pointer: MousePointer | TouchPointer,
+): pointer is SVGMousePointer | SVGTouchPointer {
+	return "getBBox" in pointer.currentTarget && typeof pointer.currentTarget.getBBox === "function"
+}
+
+/**
+ * Computes relative element coordinates from mouse or touch event.
+ *
+ * The output coordinates are relative to the top-left corner of the active element (= currentTarget),
+ * where the top-left corner is (0, 0).
+ * Moving right, the x-coordinate increases, and moving down, the y-coordinate increases.
+ *
+ * The coordinates are rounded to the nearest integer and account for CSS transform scale.
+ * So element that's scaled will return the same coordinates as element that's not scaled.
+ *
+ * In other words: you zoom in or out, numbers stay the same.
+ *
+ * This function works with both HTML elements and SVG elements.
+ *
+ * It works with both Mouse and Touch events.
+ * For Touch events, it returns an array of coordinates, one for each touch point.
+ * For Mouse events, it returns a single coordinate object.
+ *
+ * @since 3.8
+ * @param event The mouse or touch event (works with both HTML and SVG elements)
+ * @returns Coordinates relative to the top-left corner of the element. Single object for Mouse events, array of objects for Touch events.
+ */
+export function getRelativeCoordinate(event: MousePointer): RelativePointer
+export function getRelativeCoordinate(event: TouchPointer): Array<RelativePointer>
+export function getRelativeCoordinate(
+	event: MousePointer | TouchPointer,
+): RelativePointer | Array<RelativePointer> {
+	const rect = event.currentTarget.getBoundingClientRect()
+
+	let scaleX: number, scaleY: number
+
+	if (isSvgPointer(event)) {
+		const bbox = event.currentTarget.getBBox()
+		scaleX = bbox.width > 0 ? rect.width / bbox.width : 1
+		scaleY = bbox.height > 0 ? rect.height / bbox.height : 1
+	} else {
+		const element = event.currentTarget
+		scaleX = element.offsetWidth > 0 ? rect.width / element.offsetWidth : 1
+		scaleY = element.offsetHeight > 0 ? rect.height / element.offsetHeight : 1
+	}
+
+	const getCoordinates = (clientX: number, clientY: number): RelativePointer => ({
+		/*
+		 * Here it's important to use:
+		 * - event.clientX and event.clientY to get the mouse position relative to the viewport, including scroll.
+		 * - pageX and pageY are not used because they are relative to the whole document, and ignore scroll.
+		 * - rect.left and rect.top are used to get the position of the chart relative to the viewport.
+		 * - offsetX and offsetY are not used because they are relative to the offset parent
+		 *  which may or may not be the same as the clientX and clientY, depending on the position of the chart in the DOM
+		 *  and surrounding element styles. CSS position: relative, absolute, fixed, will change the offset parent.
+		 * - scaleX and scaleY are necessary for when the chart element is scaled using CSS `transform: scale(N)`.
+		 */
+		relativeX: Math.round((clientX - rect.left) / scaleX),
+		relativeY: Math.round((clientY - rect.top) / scaleY),
+	})
+
+	if ("touches" in event) {
+		return Array.from(event.touches).map((touch) => getCoordinates(touch.clientX, touch.clientY))
+	}
+
+	return getCoordinates(event.clientX, event.clientY)
+}

package/src/util/getSliced.ts

@@ -0,0 +1,13 @@
+export function getSliced<T>(
+	arr: ReadonlyArray<T>,
+	startIndex: number,
+	endIndex: number,
+): ReadonlyArray<T> {
+	if (!Array.isArray(arr)) {
+		return arr
+	}
+	if (arr && startIndex + endIndex !== 0) {
+		return arr.slice(startIndex, endIndex + 1)
+	}
+	return arr
+}

package/src/util/hoverDedupe.ts

@@ -0,0 +1,41 @@
+/**
+ * React derives onMouseEnter/onMouseLeave from the bubbling mouseover/mouseout events. Solid binds
+ * native events 1:1, so items bind both pairs; one pointer move then fires both mouseover and
+ * mouseenter (and mouseout + mouseleave), which must dispatch once.
+ *
+ * Shared by one list of items: entering another item ends the previous entry, the way moving the
+ * pointer from one item to the next does, so re-entering an item always dispatches again. A
+ * mouseout into the item's own descendant is not a leave.
+ */
+export type HoverDedupe = {
+	/** True when this enter event should dispatch. */
+	enter(event: Event): boolean
+	/** True when this leave event should dispatch. */
+	leave(event: Event): boolean
+}
+
+export function createHoverDedupe(): HoverDedupe {
+	let current: EventTarget | null = null
+	return {
+		enter(event) {
+			const target = event.currentTarget
+			if (target == null || current === target) {
+				return false
+			}
+			current = target
+			return true
+		},
+		leave(event) {
+			const target = event.currentTarget
+			if (target == null || current !== target) {
+				return false
+			}
+			const next = (event as MouseEvent).relatedTarget
+			if (event.type === "mouseout" && next instanceof Node && target instanceof Node && target.contains(next)) {
+				return false
+			}
+			current = null
+			return true
+		},
+	}
+}

package/src/util/isDomainSpecifiedByUser.ts

@@ -0,0 +1,219 @@
+/* eslint-disable import/no-cycle */
+import { MAX_VALUE_REG, MIN_VALUE_REG } from "./ChartUtils"
+import { isNumber } from "./DataUtils"
+import { AxisDomain, NumberDomain } from "./types"
+import { isWellBehavedNumber } from "./isWellBehavedNumber"
+
+export function isWellFormedNumberDomain(v: unknown): v is NumberDomain {
+	if (Array.isArray(v) && v.length === 2) {
+		const [min, max] = v
+		if (isWellBehavedNumber(min) && isWellBehavedNumber(max)) {
+			return true
+		}
+	}
+	return false
+}
+
+export function extendDomain(
+	providedDomain: NumberDomain,
+	boundaryDomain: NumberDomain,
+	allowDataOverflow: boolean,
+): NumberDomain {
+	if (allowDataOverflow) {
+		return providedDomain
+	}
+	/*
+	 * If the data are not allowed to overflow - we need to extend the domain.
+	 * Means that effectively the user is allowed to make the domain larger
+	 * but not smaller.
+	 */
+	return [
+		Math.min(providedDomain[0], boundaryDomain[0]),
+		Math.max(providedDomain[1], boundaryDomain[1]),
+	]
+}
+
+/**
+ * So Recharts allows users to provide their own domains,
+ * but it also places some expectations on what the domain is.
+ * We can improve on the typescript typing, but we also need a runtime test
+ * to observe that the user-provided domain is well-formed,
+ * that is: an array with exactly two numbers.
+ *
+ * This function does not accept data as an argument.
+ * This is to enable a performance optimization - if the domain is there,
+ * and we know what it is without traversing all the data,
+ * then we don't have to traverse all the data!
+ *
+ * If the user-provided domain is not well-formed,
+ * this function will return undefined - in which case we should traverse the data to calculate the real domain.
+ *
+ * This function is for parsing the numerical domain only.
+ *
+ * @param userDomain external prop, user provided, before validation. Can have various shapes: array, function, special magical strings inside too.
+ * @param allowDataOverflow boolean, provided by users. If true then the data domain wins
+ *
+ * @return [min, max] domain if it's well-formed; undefined if the domain is invalid
+ */
+export function numericalDomainSpecifiedWithoutRequiringData(
+	userDomain: AxisDomain | undefined,
+	allowDataOverflow: boolean,
+) {
+	if (!allowDataOverflow) {
+		return undefined
+	}
+	if (typeof userDomain === "function") {
+		return undefined
+	}
+	if (Array.isArray(userDomain) && userDomain.length === 2) {
+		const [providedMin, providedMax] = userDomain
+		let finalMin, finalMax: string | number | undefined
+
+		if (isWellBehavedNumber(providedMin)) {
+			finalMin = providedMin
+		} else if (typeof providedMin === "function") {
+			return undefined
+		}
+
+		if (isWellBehavedNumber(providedMax)) {
+			finalMax = providedMax
+		} else if (typeof providedMax === "function") {
+			return undefined
+		}
+
+		const candidate = [finalMin, finalMax]
+		if (isWellFormedNumberDomain(candidate)) {
+			return candidate
+		}
+	}
+	return undefined
+}
+
+/**
+ * So Recharts allows users to provide their own domains,
+ * but it also places some expectations on what the domain is.
+ * We can improve on the typescript typing, but we also need a runtime test
+ * to observe that the user-provided domain is well-formed,
+ * that is: an array with exactly two numbers.
+ * If the user-provided domain is not well-formed,
+ * this function will return undefined - in which case we should traverse the data to calculate the real domain.
+ *
+ * This function is for parsing the numerical domain only.
+ *
+ * You are probably thinking, why does domain need tick count?
+ * Well it adjusts the domain based on where the "nice ticks" land, and nice ticks depend on the tick count.
+ *
+ * @param userDomain external prop, user provided, before validation. Can have various shapes: array, function, special magical strings inside too.
+ * @param dataDomain calculated from data. Can be undefined, as an option for performance optimization
+ * @param allowDataOverflow provided by users. If true then the data domain wins
+ *
+ * @return [min, max] domain if it's well-formed; undefined if the domain is invalid
+ */
+/*
+ * Upstream evaluates the user's domain functions inside memoized (reselect) selectors, so a
+ * function runs once per distinct input. Our selectors are plain functions evaluated by several
+ * memos; remember the last call per function to keep the same call pattern.
+ */
+const lastDomainCalls = new WeakMap<Function, { args: ReadonlyArray<unknown>; result: unknown }>()
+
+function sameArg(a: unknown, b: unknown): boolean {
+	if (Array.isArray(a) && Array.isArray(b)) {
+		return a.length === b.length && a.every((value, i) => Object.is(value, b[i]))
+	}
+	return Object.is(a, b)
+}
+
+function callDomainFunction<R>(fn: (...args: never[]) => R, ...args: ReadonlyArray<unknown>): R {
+	const last = lastDomainCalls.get(fn)
+	if (last != null && last.args.length === args.length && last.args.every((arg, i) => sameArg(arg, args[i]))) {
+		return last.result as R
+	}
+	const result = (fn as (...a: ReadonlyArray<unknown>) => R)(...args)
+	lastDomainCalls.set(fn, { args, result })
+	return result
+}
+
+export function parseNumericalUserDomain(
+	userDomain: AxisDomain | undefined,
+	dataDomain: NumberDomain | undefined,
+	allowDataOverflow: boolean,
+): NumberDomain | undefined {
+	if (!allowDataOverflow && dataDomain == null) {
+		return undefined
+	}
+	if (typeof userDomain === "function" && dataDomain != null) {
+		try {
+			const result = callDomainFunction(userDomain, dataDomain, allowDataOverflow)
+			if (isWellFormedNumberDomain(result)) {
+				return extendDomain(result, dataDomain, allowDataOverflow)
+			}
+		} catch {
+			/* ignore the exception and compute domain from data later */
+		}
+	}
+	if (Array.isArray(userDomain) && userDomain.length === 2) {
+		const [providedMin, providedMax] = userDomain
+		let finalMin, finalMax: string | number | undefined
+
+		if (providedMin === "auto") {
+			if (dataDomain != null) {
+				finalMin = Math.min(...dataDomain)
+			}
+		} else if (isNumber(providedMin)) {
+			finalMin = providedMin
+		} else if (typeof providedMin === "function") {
+			try {
+				if (dataDomain != null) {
+					finalMin = callDomainFunction(providedMin, dataDomain?.[0])
+				}
+			} catch {
+				/* ignore the exception and compute domain from data later */
+			}
+		} else if (typeof providedMin === "string" && MIN_VALUE_REG.test(providedMin)) {
+			const match = MIN_VALUE_REG.exec(providedMin)
+			if (match == null || match[1] == null || dataDomain == null) {
+				finalMin = undefined
+			} else {
+				const value = +match[1]
+				finalMin = dataDomain[0] - value
+			}
+		} else {
+			finalMin = dataDomain?.[0]
+		}
+
+		if (providedMax === "auto") {
+			if (dataDomain != null) {
+				finalMax = Math.max(...dataDomain)
+			}
+		} else if (isNumber(providedMax)) {
+			finalMax = providedMax
+		} else if (typeof providedMax === "function") {
+			try {
+				if (dataDomain != null) {
+					finalMax = callDomainFunction(providedMax, dataDomain?.[1])
+				}
+			} catch {
+				/* ignore the exception and compute domain from data later */
+			}
+		} else if (typeof providedMax === "string" && MAX_VALUE_REG.test(providedMax)) {
+			const match = MAX_VALUE_REG.exec(providedMax)
+			if (match == null || match[1] == null || dataDomain == null) {
+				finalMax = undefined
+			} else {
+				const value = +match[1]
+				finalMax = dataDomain[1] + value
+			}
+		} else {
+			finalMax = dataDomain?.[1]
+		}
+
+		const candidate = [finalMin, finalMax]
+		if (isWellFormedNumberDomain(candidate)) {
+			if (dataDomain == null) {
+				return candidate
+			}
+			return extendDomain(candidate, dataDomain, allowDataOverflow)
+		}
+	}
+	return undefined
+}

package/src/util/isWellBehavedNumber.ts

@@ -0,0 +1,7 @@
+export function isWellBehavedNumber(n: unknown): n is number {
+	return Number.isFinite(n)
+}
+
+export function isPositiveNumber(n: unknown): n is number {
+	return typeof n === "number" && n > 0 && Number.isFinite(n)
+}

package/src/util/pathTotalLength.ts

@@ -0,0 +1,25 @@
+/*
+ * getTotalLength forces path geometry (layout) on every call. The line draw animation asks for it
+ * on every frame while the path `d` stays fixed, so the length is cached per element and `d`.
+ * Keyed by the element itself: the entry dies with the DOM node.
+ */
+const measured = new WeakMap<SVGPathElement, { d: string | null; length: number }>()
+
+export function pathTotalLength(path: SVGPathElement | null | undefined): number {
+	if (path == null || typeof path.getTotalLength !== "function") {
+		return 0
+	}
+	const d = path.getAttribute("d")
+	const cached = measured.get(path)
+	if (cached != null && cached.d === d) {
+		return cached.length
+	}
+	let length = 0
+	try {
+		length = path.getTotalLength() || 0
+	} catch {
+		length = 0
+	}
+	measured.set(path, { d, length })
+	return length
+}