Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Exception on path parsing #510

Open
PechenTreski opened this issue Sep 1, 2021 · 4 comments
Open

Exception on path parsing #510

PechenTreski opened this issue Sep 1, 2021 · 4 comments
Labels
enhancement help wanted

Comments

@PechenTreski
Copy link

Hello,
I found a path that can not be imported, because it contains arcs that makerjs somehow does not understand, failing to find intersections. The exact error is:

browser.maker.js:2063 Uncaught TypeError: Cannot read property 'intersectionPoints' of null
    at new Arc (browser.maker.js:2063)
    at map.A (browser.maker.js:8187)
    at Object.fromSVGPathData (browser.maker.js:8286)
    at maker-bug.html:12

the code

<html>
    <head>
        <meta charset="UTF-8">

        <script src="https://maker.js.org/target/js/browser.maker.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bezier-js@2/bezier.js"></script>

        <script>
            const m = require('makerjs');
            const svgPath = 'm 6749.8809,410.62695 c -3477.6131,0 -6339.25395,2861.64085 -6339.25395,6339.25395 0,740.1265 129.61746,1474.5598 382.9668,2169.9765 a 179.9415,179.9415 0 0 0 230.20505,107.625 L 3245.291,8224.6738 a 179.9415,179.9415 0 0 0 107.8028,-231.0761 c -145.8833,-398.4212 -220.5293,-819.4197 -220.5293,-1243.7168 0,-1984.3965 1632.9199,-3617.3164 3617.3164,-3617.3164 770.3254,0 1520.8624,246.0596 2141.6543,702.125 a 179.9415,179.9415 0 0 0 0,0 L 14300.08,7807.8613 a 179.9415,179.9415 0 0 0 0,0 c 1087.878,799.163 2403.107,1230.3301 3753.02,1230.3301 3477.702,0 6339.423,-2861.7108 6339.423,-6339.4043 0,-740.0716 -129.576,-1474.4533 -382.865,-2169.8184 a 179.9415,179.9415 0 0 0 -230.209,-107.63281 l -2221.5,802.80861 a 179.9415,179.9415 0 0 0 -107.806,231.0664 c 145.842,398.3745 220.433,819.3257 220.433,1243.5762 0,1984.4872 -1632.979,3617.4668 -3617.476,3617.4668 -770.287,0 -1520.753,-246.0291 -2141.58,-702.0606 l -0,-0 -5408.491,-3973.1231 -0,-0 C 9415.112,841.83402 8099.8234,410.62695 6749.8809,410.62695 Z';
            // const svgPathInAbs = 'M6749.8809 410.62695C3272.2678 410.62695 410.62694999999985 3272.2677999999996 410.62694999999985 6749.8809 C410.62694999999985 7490.0074 540.2444099999998 8224.4407 793.5937499999998 8919.8574A179.9415 179.9415 0 0 0 1023.7987999999998 9027.4824L3245.291 8224.6738A179.9415 179.9415 0 0 0 3353.0938 7993.5977C3207.2105 7595.1765000000005 3132.5645 7174.178 3132.5645 6749.8809C3132.5645 4765.4844 4765.4844 3132.5645 6749.8809 3132.5645C7520.2063 3132.5645 8270.7433 3378.6241 8891.5352 3834.6895A179.9415 179.9415 0 0 0 8891.5352 3834.6895L14300.08 7807.8613A179.9415 179.9415 0 0 0 14300.08 7807.8613C15387.958 8607.0243 16703.186999999998 9038.1914 18053.1 9038.1914C21530.802 9038.1914 24392.522999999997 6176.4806 24392.522999999997 2698.7870999999996C24392.522999999997 1958.7154999999996 24262.946999999996 1224.3337999999997 24009.657999999996 528.9686999999994A179.9415 179.9415 0 0 0 23779.448999999997 421.33588999999944L21557.948999999997 1224.1444999999994A179.9415 179.9415 0 0 0 21450.142999999996 1455.2108999999994C21595.984999999997 1853.5853999999995 21670.575999999997 2274.5365999999995 21670.575999999997 2698.7870999999996C21670.575999999997 4683.274299999999 20037.596999999998 6316.2539 18053.1 6316.2539C17282.813 6316.2539 16532.346999999998 6070.2248 15911.519999999999 5614.1933L15911.519999999999 5614.1933L10503.028999999999 1641.0702L10503.028999999999 1641.0702C9415.112 841.83402 8099.8234 410.62695 6749.8809 410.62695Z';
            const pathModel = m.importer.fromSVGPathData(svgPath, {
                bezierAccuracy: 0.1,
            });
            const svg = m.exporter.toSVG({
                models: {
                    original: pathModel,
                }
            });
            document.write(svg);
        </script>
    </head>
    <body>
        tweet-tweet
    </body>
</html>
@danmarshall
Copy link
Contributor

I see, this path data is using the C curve command to create smooth curves with multiple Bezier control points (more than 4).

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#curve_commands

We currently don't have code to create the smoothed control points. As a workaround, do you have any option of creating separate curves?

@PechenTreski
Copy link
Author

Hi again, Dan! :)
You are partly right, there are curves with multiple control points in the first svg path. Sorry that I did not mention it, but there is another svg path that stays on the next line and is commented out. It is actually the same shape (only written in absolute coordinates and a bit simplified in it's structure), and there are no curves with >4 control points in it. And this second path gives the same result.
I tried to play a bit with the shape in Inkscape, and I found out that the problem disappears when I change the Arc "A179.9415 179.9415 0 0 0 8891.5352 3834.6895", that's why I assumed that the problem is rather with arcs than with curves.

@danmarshall
Copy link
Contributor

Thanks for the clarification. BTW I am using this great tool to analyze SVG paths: https://yqnn.github.io/svg-path-editor/

Pasting in your path data, we can see that there are some arcs which are degenerate - they have 0 0 as their dx, dy, which means zero radius.

image

I suppose Maker.js could catch this, and drop the incoming command. Until then, perhaps you can use svgo (command line) or svgomg (gui) which removes these non-contributing commands.

@PechenTreski
Copy link
Author

Dan, simply wow, thank you for the great tool! :)
Yes, it'd be wonderful if makerjs would ignore such incorrect commands (with warnings?), then one'd not be so surprised seeing Inkscape drawing such paths normally.
Thanks for help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@PechenTreski @danmarshall