Convert dxf string to models

[LucasSoaresGit]

Hi

I'm drawing a plant and i have some components ready in dxf files.

I already did the major plant, now I need to include those dxf components into my current plant.

The maker.js lib doesn't have a dxf parser to maker.js model.

How can i do this?

Best regards

[danmarshall]

Hello, no there is no DXF parser here in Maker.js but there are a few out there on NPM. See #291

[Bersaelor]

I actually tried both https://www.npmjs.com/package/dxf-parser and https://www.npmjs.com/package/dxf but in both cases the result was only nearly perfect. For example with the dxf library for converting dxf to svg, the resulting curves were piecewise straight lines, instead of curves bezier paths.

In the end we needed to take https://github.com/qcad/qcad , compile it and use a command line tool running on a small linux instance to convert the *.dxf to *.svg. Then we take the *.svg and convert it component wise to maker.js. I.e. each path using .importer.fromSVGPathData(path), circles as circles etc. It would be really great if makerjs had a full importer for a whole svg though! (then we could chain dxf -> svg -> makerjs)

[danmarshall]

Hi @Bersaelor, we don't have an SVG importer, for a number of reasons. I should probably create a new issue for this, but in summary, it depends on how people need handling of:

1. svg document retrieval - network/file system/HTML DOM
2. svg DOM parsing - this is sometimes accomplished by retrieval, otherwise we need a parser
3. svg fill, svg patterns (like the grid background in the Playground)
4. svg transforms (this is tractable, if we add Skew & Matrix to Maker.js)

[z3dev]

I’m following this library which is probably has the most complete DXF to SVG conversion.

https://github.com/bjnortier/dxf

[Bersaelor]

@z3dev thats the package I had linked above, and it does not convert bezier paths properly, which was the reason I couldn't use it.

@danmarshall When importing via importer.fromSVGPathData I get a ton of very short path pieces that just end in the point where the next one starts. Is there an easy way in maker.js to glue all those path pieces together into one continuous path? I was looking through the Documentation, but I only found converge which only works for straight lines. Do you happen to have a solution for this problem already?

[danmarshall]

@Bersaelor you may want to find a chain then re-export as svgPathData.

[Bersaelor]

Thank you so much for your help @danmarshall , finding the chains correctly identified the pieces of my geometry I am actually interested in.

For the "then re-export as svgPathData." I took that to mean

        const chains = makerjs.model.findChains(part, options) as makerjs.IChain[]
        console.log(`part[${key}]:`, chains)
        if (chains.length === 1) {
            let model = makerjs.chain.toNewModel(chains[0], true)
            let svgPath = makerjs.exporter.toSVGPathData(model) as string
            let convertedModel = makerjs.importer.fromSVGPathData(svgPath)
       // ...

But the convertedModel again has little piece wise ARCs, Lines, etc, i.e. a model with a long path map with entries p_1, p_2 .... I was hoping to eventually get each chain converted to a single path, so that I can use the path names option to render nice annotations for each path.

PS: The annotation aside, the chain-searching tehcnique did create the model objects I could use. Thank you so much, the end result got pretty close to what I needed. You saved me weeks of playing around with all the commands in the maker.js library!

[danmarshall]

@Bersaelor You had it right! Except for when you re-imported it 😁 which puts you back at the start. Remember Maker.js will always break up a Bezier curve into pieces: https://maker.js.org/docs/advanced-drawing/#Bezier%20curves

If you really want to get under the hood, you may try using the BezierSeed pathType: https://maker.js.org/docs/api/index.html#pathtype but in doing so you will lose the ability to do many of the operations such as combine() and intersection() but it probably will export as SVG. Advanced territory for sure. Feel free to open a new issue for specific questions or feature requests.

[Bersaelor]

Ok, understood, yeah, guess I'll work with the piece wise bezier paths now. The final results look great. The messy annotation in between we'll live with.

Let me buy you lunch sometime if you're ever in Berlin!

[danmarshall]

@Bersaelor DXF and Bezier are not friends. DXF supports Splines, and looks like there's math involved to convert to Bezier 😕 https://math.stackexchange.com/questions/417859/convert-a-b-spline-into-bezier-curves

Pretty much the reason we convert to circular arcs! Cheers!

[Bersaelor]

Mhmm interesting. We use qcad to first convert the dxf to svg and the result looks exactly like the original dxf, so we're happy with that. (The js dxf tool mentioned above was missing some curves) We're also bootstrapped and a pretty small team at looc.io, thats why I'm trying to be as economical as possible with our tools. That said, once upon a time I did in fact study math (and only minored in CS), so given enough slack in between I'd love to help out. Would be cool to cut the step (2) out of the below, to have less networking going on, but in the meantime it solves the problem: (1) user uploads original default .dxf (2) Linux instance with compiled command line qcad >makersjs does .dxf -> .svg (3) react downloads .svg, which is imported as maker.js (4) users may adjust maker.js with parameters, similar to the makerjs playground params (5) export to dxf, dxf goes to CNC laser

But yeah, you know how it is, many open construction sites, only some many h in the day :)

[Bersaelor]

@danmarshall , hope you are still doing well and are keeping healthy.

I'm looking back into the dxf manipulation, and I was thinking that maybe most of my problems come from the issue of converting my dxf to svg, importing the svg paths into maker.js, manipulating the form via maker.js, exporting the result.

In https://github.com/microsoft/maker.js/issues/291 you talked about parsers to load dxf's into js objects. Has there been an progress of importing dxf's directly to maker.js ? It looks like most of the dxf files I import are in fact lines and arcs, but then converting to svg and importing that to maker.js, some of the arcs have changed (as you mentioned dxf and svg are not friends). Do you think it's possible to rig a converter, say import with https://www.npmjs.com/package/dxf and convert the js object to an object from maker.js? Did you ever start that extra lib you mentioned in august 2019, that may import dxf directly into maker.js?

[danmarshall]

Hi @Bersaelor , hope you are well also 🍻 I have not personally worked on a dxf importer, but I do believe it should be straighforward using that dxf package. And as long as your import files are compatible. The main issue with trying to create a general purpose add-in is trying to support all of the entities possible in dxf.

[z3dev]

And blocks, and transforms, etc. DXF is almost as complicated as SVG.

It would be wise to use just one format for the intermediate data (input) to maker.js Which at this time means SVG.

Does the original authoring tool support exporting to SVG?

[Bersaelor]

@z3dev the problem is that converting to svg is the step where the arcs are changed.

The original is a cad dxf/dwg that only consists of lines and arcs and when I use FreeCAD to convert those to svg many of the arcs are divided into weird bezier curves. Is there a lossless way of converting to svg? I think @danmarshall said that svg and dxf aren't really friends.

[z3dev]

@Bersaelor understood.

The best library that I know of is the DXF library, as it tries to retain the curvature specification rather then converting to short line segments.

https://github.com/bjnortier/dxf

Again, if the original application (that creates the DXF) can export to SVG then the chain of conversions is improved. Possible?