microsoft / microsoft/maker.js

toSVG throws "Cannot read properties of undefined (reading 'length')" on text with tiny bezier segments

Open Beginner friendly
#659 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.