microsoft / microsoft/maker.js

Outline does not work for some shapes

Open
#493 4 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

The library fails to outline this shape:
image
It is represented by the following SVG path: M 120 0 A 100 100 0 0 1 110.86554718017578 45.92201232910156 L 92.38794708251953 38.26835250854492 A 80 80 0 0 1 38.26828384399414 92.38797760009766 L 45.92204666137695 110.86552429199219 A 100 100 0 0 1 0.00000548346952200518 120 L 0.000009139115718426183 200 A 220 220 0 0 0 76.53670501708984 184.77589416503906 L 84.19052124023438 203.25340270996094 A 240 240 0 0 0 203.2534942626953 84.19031524658203 L 184.7759246826172 76.53665924072266 A 220 220 0 0 0 200 0Z

But the very similar shape is outlined successfully:
image
Path: M 120 0 A 100 100 0 0 1 112.76310729980469 41.04243469238281 L 93.96925354003906 34.20203399658203 A 80 80 0 0 1 49.999942779541016 86.60258483886719 L 59.99997329711914 103.92306518554688 A 100 100 0 0 1 20.83777618408203 118.17693328857422 L 34.72963333129883 196.96156311035156 A 220 220 0 0 0 99.99992370605469 173.2051544189453 L 110.0000228881836 190.52554321289062 A 240 240 0 0 0 206.73239135742188 75.24442291259766 L 187.93850708007812 68.40404510498047 A 220 220 0 0 0 200 0Z
The difference between these two shapes is that in the non-working example the straight lines form an angle of 90 degrees, in the working - 80 degrees.

Here is the code I use to create outline:

const makerjs = require("makerjs");

let notworking = 'M 120 0 A 100 100 0 0 1 110.86554718017578 45.92201232910156 L 92.38794708251953 38.26835250854492 A 80 80 0 0 1 38.26828384399414 92.38797760009766 L 45.92204666137695 110.86552429199219 A 100 100 0 0 1 0.00000548346952200518 120 L 0.000009139115718426183 200 A 220 220 0 0 0 76.53670501708984 184.77589416503906 L 84.19052124023438 203.25340270996094 A 240 240 0 0 0 203.2534942626953 84.19031524658203 L 184.7759246826172 76.53665924072266 A 220 220 0 0 0 200 0Z';
let working = 'M 120 0 A 100 100 0 0 1 112.76310729980469 41.04243469238281 L 93.96925354003906 34.20203399658203 A 80 80 0 0 1 49.999942779541016 86.60258483886719 L 59.99997329711914 103.92306518554688 A 100 100 0 0 1 20.83777618408203 118.17693328857422 L 34.72963333129883 196.96156311035156 A 220 220 0 0 0 99.99992370605469 173.2051544189453 L 110.0000228881836 190.52554321289062 A 240 240 0 0 0 206.73239135742188 75.24442291259766 L 187.93850708007812 68.40404510498047 A 220 220 0 0 0 200 0Z';

let input = makerjs.importer.fromSVGPathData(notworking, { bezierAccuracy: 0.001 });
let result = makerjs.model.outline(input, 5, 1);
makerjs.model.simplify(result);
let outlinePath = makerjs.exporter.toSVGPathData(result, false, [0, 0]);
console.log('Not working:\n', {input, result, outlinePath});

input = makerjs.importer.fromSVGPathData(working, { bezierAccuracy: 0.001 });
result = makerjs.model.outline(input, 5, 1);
makerjs.model.simplify(result);
outlinePath = makerjs.exporter.toSVGPathData(result, false, [0, 0]);
console.log('Working:\n', {input, result, outlinePath});

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 by reproducing the supplied non-working and working SVG paths with importer.fromSVGPathData, then trace model.outline and model.simplify to compare how the 90-degree shape is handled. Use exporter.toSVGPathData to inspect the resulting outline. Done means the failing shape produces a valid outline without regressing the similar working case.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.