microsoft / microsoft/maker.js
toSVG throws "Cannot read properties of undefined (reading 'length')" on text with tiny bezier segments
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 302
- Avg merge
- 21h 28m
- Merged PRs (30d)
- 5
Description
Since 0.19.1, exporting text models to SVG can throw
Cannot read properties of undefined (reading 'length'), depending on the
font and size. We hit this with models.Text using Allerta Stencil — the
5 glyph at font sizes around 1.25–2.25 crashes the export.
The winding check added in #643 calls path.toKeyPoints on every chain link,
and that function returns undefined (instead of IPoint[]) for degenerate
bezier seeds. Glyph outlines commonly contain near-zero-length curve
segments, so text is a reliable way to trigger it. 0.19.0 and earlier don't
hit this code path during export.
Repro without fonts, using a seed captured from the Allerta 5:
const makerjs = require('makerjs') // 0.19.2
const seed = {
type: 'bezier-seed',
origin: [0.271728515625, 0.642333984375],
controls: [[0.27099609375, 0.6357421875]],
end: [0.27099609375, 0.63427734375]
}
console.log(makerjs.path.toKeyPoints(seed)) // undefined
makerjs.exporter.toSVG({
paths: {
seed,
line1: new makerjs.paths.Line(seed.end, [0, 0]),
line2: new makerjs.paths.Line([0, 0], seed.origin)
}
})
// TypeError: Cannot read properties of undefined (reading 'length')
// at chain.toKeyPoints / isChainClockwise / chainToSVGPathData
The cause is in path.toKeyPoints: the BezierSeed branch only assigns
curveKeyPoints when findChains finds exactly one chain or one loose path.
This seed's arc approximation produces two tiny chains, so nothing is
assigned and undefined comes back. chain.toKeyPoints then reads
.length on it.
return curveKeyPoints || [] would fix it — a segment this small doesn't
meaningfully affect the winding result, and the chain's other links still
determine direction. Happy to submit a PR with a test if that sounds right.
We're currently working around this by monkey-patching path.toKeyPoints
to return [] instead of undefined.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with path.toKeyPoints and the BezierSeed branch described in the issue, then reproduce the captured seed with exporter.toSVG. Confirm that the degenerate seed returns an empty point list and that SVG export completes without the TypeError; add a regression test for this seed if the repository's test location is identified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100