microsoft / microsoft/maker.js

Import with `fromSVGPathData` breaks circle/arc.

Open
#499 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
2k
Forks
302
Avg merge
21h 28m
Merged PRs (30d)
5

Description

What is happening

When using fromSVGPathData to generate a model from the string M77.497 2.497a75 75 0 0 1 0 150 75 75 0 0 1 0-150z, makerJS incorrectly imports the shape as a half-circle. It produces the following pathdata:

{ paths:
       { p_1:
          Arc {
            radius: 75,
            origin: [Array],
            startAngle: 270,
            endAngle: 450,
            type: 'arc' },
         p_2: Line { type: 'line', origin: [Array], end: [Array] } } }

When exported to DXF this shows:
Screenshot from 2021-05-20 13-36-54

What is expected

In the browser (tested on chrome, firefox, latest), the PathData M77.497 2.497a75 75 0 0 1 0 150 75 75 0 0 1 0-150z produces a full circle:

Screenshot from 2021-05-20 13-29-02

Also, adding an extra a in the PathData string results in the same shape in the browser, and a correct full circle model in MakerJS:

Bad:  M77.497 2.497a75 75 0 0 1 0 150 75 75 0 0 1 0-150z
Good: M77.497 2.497a75 75 0 0 1 0 150 a 75 75 0 0 1 0-150z

MakerJS converts the pathData with the extra a to a model correctly:

{ paths:
       { p_1:
          Arc {
            radius: 75,
            origin: [Array],
            startAngle: 270,
            endAngle: 450,
            type: 'arc' },
         p_2:
          Arc {
            radius: 75,
            origin: [Array],
            startAngle: 90,
            endAngle: 270,
            type: 'arc' } } }

Samples

bad.svg.txt
good.svg.txt

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 at the fromSVGPathData entry point and reproduce the reported path M77.497 2.497a75 75 0 0 1 0 150 75 75 0 0 1 0-150z, comparing it with the version containing an extra a. Done means the original path imports as a full circle with two Arc paths and exports correctly to DXF, matching the browser result.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.