SVG Parser: Port @lautr3k 's parser from LW3:Optimisation branch about laserweb4

@tbfleming my SVG parser curently support all basics shapes (line, polyline, polygone, rect, circle, arc, ellipse), all paths commands, group, viewBox, defs and use.

Just created the repo for the ES6 rewrite as NMP module : https://github.com/lautr3k/lw.svg-parser

(: we also really need the dxf parser to come over. I still hate svgs (;

…

On Dec 8, 2016 3:46 PM, "Sébastien Mischler (aka skarab)" < ***@***.***> wrote: Just created the repo for the ES6 rewrite as NMP module : https://github.com/lautr3k/lw.svg-parser — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#58 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHVr26Bulubc3YXwksNuSsTz5lJ0LRjUks5rGApCgaJpZM4LHysM> .

@tbfleming Just finished, when you have time, look at it

https://github.com/lautr3k/lw.svg-parser

Need to port my SVG parser to ES6.

[tbfleming]

"A": May be another OSX issue:

"CUTLETRAS" and "color boxes": No path objects. Current parser only handles groups and paths.

@lautr3k does your parser handle non-path objects?

[tbfleming]

@cojarbi Check Settings -> File Settings -> SVG PX PER INCH. It should have defaulted to 96, but if the defaults didn't initialize properly (e.g. empty or 0) then it may mess up the parser.

[cojarbi]

@tbfleming Settings are on the default 96

@tbfleming I can not find any more you said the format for the paths...

path1 = [
    [x,y,x,y,x,y], // Shape or Line
    [x,y,x,y,x,y]  // Hole if shape
    ...            // Hole...
]

path2 = [
    [[x,y],[x,y],[x,y]], // Shape or Line
    [[x,y],[x,y],[x,y]]  // Hole if shape
    ...                  // Hole...
]

I think path1 ?

[tbfleming]

path1. It can be a mix of open and closed subpaths and the outer order doesn't matter. e.g. this is valid:

path1 = [
    [x,y,x,y,x,y,...], // Open path
    [x,y,x,y,x,y,...], // Closed path for a hole
    [x,y,x,y,x,y,...], // Open path
    [x,y,x,y,x,y,...], // Closed path for a hole
    [x,y,x,y,x,y,...], // Closed path for outer shape #1
    [x,y,x,y,x,y,...], // Closed path for a hole
    [x,y,x,y,x,y,...], // Closed path for outer shape #2
    [x,y,x,y,x,y,...], // Open path
    [x,y,x,y,x,y,...], // Closed path for a hole
    ...
]

[tbfleming]

It uses this for fill and stroke color: [r, g, b, a]

[tbfleming]

I'm attaching a path stress test. This path object mixes up open and closed paths.

path stress.svg.txt

Here's how it behaves:

Hum... In my head a path can not contain another path. The only case is to define the shape holes. Otherwise it is a group of paths. I would like to be able to select only one shape at a time.

[tbfleming]

SVG path objects allow it. It's up to the user to decide when they create them.

[tbfleming]

If SVG didn't support it, then path union operations would sometimes be invalid.

Yes but if my parser gives you each item separately in a group, is not it better? Anyway that's how it works.

[tbfleming]

I hate the placement of that stupid close button :)

Me too !!!

[tbfleming]

That would be fine, as long as it doesn't mess up complicated cases. I'll see if I can construct a case that may give grief when breaking up.

[tbfleming]

path stress 2.svg.txt

The existing parser handles this case, but poly2tri hits a limitation. I just pushed a workaround which skips filling the inside when poly2tri barfs. I may have to dump poly2tri for another library.

Here's what it should look like:

Here's what it actually looks like because of the poly2tri issue:

• Right way to break it up: turn it into a 7-point path and a 5-point path.
• Wrong way: two triangles.

[tbfleming]

This test also exposed a bug in CAM that I'll track down.

What it does (wrong):

What it should do (jscut output):

Ok, I understand. My parser interprets it as two triangles. I will work on that.

[tbfleming]

The CAM bugs for Path Stress 2 are now fixed.

[tbfleming]

Be aware that there's a really nasty numeric stability problem finding intersections within paths. Known algorithms that solve it are complex. Don't try the obvious algebraic equations; they backfire badly with certain border cases. Use Clipper instead.

[jorgerobles]

Un***kBelieveable.

Lol! Yip @lautr3k 's work usually invokes that response (; amazing work always

…

On Dec 15, 2016 7:06 PM, "jorgerobles" ***@***.***> wrote: Un***kBeleiveable. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#58 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHVr2xg1pqZvVl2PS-N98pBETCs_Upsaks5rIXOJgaJpZM4LHysM> .

[tbfleming]

@lautr3k es6 promises! nice!

[tbfleming]

It's now integrated.

[cojarbi]

+1 Jorge's comment

[jorgerobles]

Let spoil the happiness, a bit...

error: TypeError: Cannot read property 'replace' of undefined at TagParser._normalizeTagAttr (http://localhost:8080/index.js:132578:40) at http://localhost:8080/index.js:132546:32 at Array.some (native) at TagParser._parseTagAttrs (http://localhost:8080/index.js:132540:40) at TagParser.parse (http://localhost:8080/index.js:132493:19) at Parser._parseElement (http://localhost:8080/index.js:131925:29) at http://localhost:8080/index.js:131868:39 at Parser.parse (http://localhost:8080/index.js:131861:21) at http://localhost:8080/index.js:131855:41

test_ls3_paths.svg.zip

[tbfleming]

Did you npm run installdev? If so, you might need to wipe node_modules and rerun it.

[tbfleming]

Never mind installdev. I just reproduced it.

[tbfleming]

I'll hold off pushing to https://laserweb.github.io/LaserWeb4/dist/

[tbfleming]

test_ls3_paths.svg also fails at https://lautr3k.github.io/lw.svg-parser/dist/example/

[jorgerobles]

It was running on the previous parser.

Fixed with skarab42/lw.svg-parser@a6562f5 due to trailing ";" on style attribute.

[tbfleming]

Updated. test_ls3_paths.svg exposes another issue. I use viewBox to transform the coordinates I get from Tag.paths. lw.svg-parser scrambles the viewBox values when these are present:

   width="100%"
   height="100%"

Please don't modify the viewBox values in lw.svg-parser; if you adjust the viewBox it then it will mess up the transform on my end.

If you want the document ViewBox use parser.document.viewBox instead of tag.attr.viewBox ;) Sorry not yet documented.

After the main <svg> tag was parsed you can access this two properties on the parser instance :

parser.editor   // Editor info { name, version, fingerprint }
parser.document // Document info { width, height, viewBox } 
                // where viewBox is { x, y, width, height }

https://github.com/LaserWeb/lw.svg-parser/blob/master/src/parser.js#L14-L15

Plus from the Tag object you get two main functions :
tag.getPaths() return an array of Path objects (all contours + holes)
tag.getShapes() return an array of ExPolygons objects from Clipper.js (filled shapes)

Eg.: With your path.stress.2.svg tag.getPaths() return two triangles (3p/3p) and tag.getShapes() two polygons (6p/4p).

Published on NPM ;) npm install lw.svg-parser

[jorgerobles]

Badass! 2016-12-16 9:29 GMT+01:00 Sébastien Mischler (aka skarab) < [email protected]>:

…

Published on NPM ;) npm install lw.svg-parser — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#58 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABoIYBjKSUGHTm15J_TOZXfzzIbeaLUDks5rIkvOgaJpZM4LHysM> .

Updated the lw.svg-parser module to v0.2.0 not a big change juste splitted code in smaller modules :
lw.svg-curves and lw.svg-path. https://www.npmjs.com/~skarab

[tbfleming]

What happened to paths? Yesterday the coordinates were in px; today I'm not sure what they are. They don't match px or mm.

I did not touch anything at this level, I just split the code into several modules.

@tbfleming please try to install from NPM npm install lw.svg-parser --save simpler for maintenance ;)

[tbfleming]

@lautr3k It broke when I switched to the NPM package (coordinates messed up), so I didn't commit that.

@tbfleming I think it was already like that before, but you have not seen it. I just saw it on a document with width/height set to 100%. Other documents with a fixed size seems correct... Can you confirm?

[tbfleming]

Confirmed. It now uses the NPM package.

More generally it crashes on relatives units. I'll try to fix it tomorrow.

Finally done right now (em and %). Package updated ;)

Test file : https://www.w3.org/TR/2011/REC-SVG11-20110816/images/coords/Units.svg
Demo : https://lautr3k.github.io/lw.svg-parser/dist/example/

[tbfleming]

Confirmed fixed.

[tbfleming]

@lautr3k Could you preserve image tags? You don't need to do any processing, the xlink:href="data:..." attribute matches the format I use to store images.

@tbfleming you can access original element via tag.element

[tbfleming]

@lautr3k it says skips them:

Haaaa ok, understood, yes of course !

Next year, promised I take English lessons.

Done <image> and <text> tags ;)

[tbfleming]

Image integrated:

[cojarbi]

Totally killer. Better workflow impossible

[maudette01432]

This rocks. Aside from the "laser diameter" not being a tool setting that gets auto populated from machine settings this is a highly workable work flow. Not much room for improvement on the usability side.

[jorgerobles]

Hmm.. I think "Laser Diameter" on Rasterizer should be called better "Line Density". The minimum should be the Laser diameter setting, of course. 2016-12-21 18:37 GMT+01:00 maudette01432 <[email protected]>:

…

This rocks. Aside from the "laser diameter" not being a tool setting that gets auto populated from machine settings this is a highly workable work flow. Not much room for improvement on the usability side. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#58 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABoIYNVNHfRXEmjtP2Jip9SSWMEwzubuks5rKWPggaJpZM4LHysM> .

[tbfleming]

@lautr3k I assume beamSize controls the distance between lines. Does it control anything else?

@jorgerobles There may be cases where you want the line distance to be less than the laser diameter; it may produce interesting effects.

@lautr3k I assume beamSize controls the distance between lines. Does it control anything else?

The beamSize need to be renamed toolDiameter to be right. It does not handle only the space between the lines, but also the offset (toolRadius) of start /end of line to stay in the shape. And add a lineOffset or toolOffset parameter to add a voluntary gap betwen lines without touching the size of the tool.

New feature in the lab, I just changed the S by a Z, I work on multiple passes.

Would it be possible to add the possibility of opening a gcode file in lw4? I would like to take advantage of the simulator :)

(; @tbfleming yes please lot of existing lw3 users open gcode from other apps like fusion360 etc sometimes... (and dxf too)

…

On Dec 23, 2016 2:10 PM, "Sébastien Mischler (aka skarab)" < ***@***.***> wrote: Would it be possible to add the possibility of opening a gcode file in lw4? I would like to take advantage of the simulator :) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#58 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHVr2-Bfpl3Qu-f5Dbap9qMZchP8S2P3ks5rK7oZgaJpZM4LHysM> .

Add invertColor setting, need to upgrade to [email protected].

[tbfleming]

[iceblu3710]

I have an SVG render gremlin. The parser skipped one path in my file and line does not render on screen at all. The path under shapes show up when selected but not the line items.'

EDIT: Seems the parser doesn't like path 2's formatting.

Source files:

text_as_curves .svg.txt

Example issues:

DevConsole Dump:

[tbfleming]

Some trouble spots with this file, besides the parse error above:

• Based on viewbox + width + height it looks like it's 1,000 px per inch, which is very odd.
• It uses style tags, which we don't support. Since we see no fill or outline, we assign a fill. That doesn't help the open shapes.
• I just reproduced this bug with an SVG from Inkscape: the selection mechanism fails to highlight single lines and paths with only 2 points.

[iceblu3710]

I have solved the missing R in my SVG. The parser does not like the letters grouped with the numbers in the paths. 0 z m 22 displays the letter while 0zm22 throws the error. That's a bit odd since the 98c0 grouping works just fine. The parser may have an issue dealing with more than one letter grouping.

My viewbox is messed up as CorelDraw's export has a precision value and it rounds the internal values and is used to multiply the viewbox. I will need to look into its proper setting. Using internal styling removes the embedded css and properly displays all the lines, polylines, etc. I can select everything except single line and paths with 2 points.

[tbfleming]

It creates a bitmap for hit testing. It uses similar code to paint both the selection and the hit test bitmap.

[tbfleming]

I fixed the line and 2-point path issues.

I'll fix the parser tomorrow.

[iceblu3710]

I can confirm 2 point path and line issues are solved. Thanks!

Fixed in [email protected]

[tbfleming]

updated