Need these! Can't believe we got this far without em.

This means that walkPaths should be passed an offset as a parameter.

Need to keep previous builds around in case of breaking changes.

Whilst debugging a relatively complex drawing generator I find myself thinking that it would be useful to be able to control the display color of models/paths. Though color probably would never play a part in a final drawing for cut, I would be able to use it to spot where this particular line is in the drawing, because currently it's hiding over another black line...

Is it possible to create a curved text with MakerJS?
If not, is it possible to create a text SVG with another library and then combine it with the makerJS SVG variable? I need to convert the final result to DXF eventually

I had asked this as a side question in my previous post. However, it did not solve my problem.

What I need to do is combining both paths and models in one variable and return it from a function.

Below I made a quick example;

I actually have several problems;

1. Not being able to put paths and models into one variable
2. Not being able to return the text objects generated within the callback function

var makerjs = require('makerjs')

function draw(rad)
{
    var finalModel = { models: {} };

    pathArray = [];
    pathArray.push (new makerjs.paths.Circle([0,0],rad)); 
    pathArray.push (new makerjs.paths.Circle([0,0],rad*2));

    finalModel = {paths: pathArray}

    opentype.load('fonts/Roboto-Black.ttf', function(err, font) {
        if (err)
        {
            alert('Could not load font: ' + err);
        }
        else
        {
            for (var i = 0; i<2; i++)
            {
                finalModel.models[i] = new makerjs.models.Text(font, 'Hello', 100*i, false);
                finalModel.models[i] = new makerjs.model.rotate(finalModel.models[i],50,[0,0]);
                finalModel.models[i].origin = [100,200*i];
            }
        }
    });

    return finalModel
}

document.getElementById('div1').innerHTML = makerjs.exporter.toSVG(draw(50));

This code draws the two circles but no Text is drawn. I also got the following error

TypeError: undefined is not an object (evaluating 'finalModel.models[i] = new makerjs.models.Text(font, 'Hello', 100*i, false)')

I suspect callback function of opentype leads some problems.

Being able to convert models into paths would be very useful for pushing them into an array. Or is there any alternative way to that?

Would really appreciate if you can help me on tackling this problem.

This may be a great feature for creating paper-based models. Not sure if there is any community interest for this.

Is it possible to convert output of the makerjs.exporter.toSVG() method to a canvas element for faster drawing? Most of the existing examples either gets the SVG file as an URL or a text.

I tried serving playground/index.html on a simple node server but it is not functional.
Is there a easy way to run a fully functional playground locally?

The JavaScript editor can be re-purposed to be a JSON editor so that the rendering can be fiddled with.

Hello,

I've found a strange error when I want to move relatively a model. I run maker.js on nodejs 7.2.1

makerjs.model.moveRelative(underlineModel, [20, -20]);
Make the process always running. So the request never end.

But with a positive y it work
makerjs.model.moveRelative(underlineModel, [20, 10]);

And with a negative x it work as well
makerjs.model.moveRelative(underlineModel, [-20, 20]);

So I really don't know what can be this error. And yeah, there is no error in the console nodejs. So even harder to debug.

If someone can try model.moveRelative with a negative y and tell me if it's just me or a bug in makerjs.

Thank you
PS: I've just discovered Maker.js and it's so well designed. +1 for the team

I am defining a variable like;

var finalModel = {paths:{},models:{}};

Setting the unit as milimeter

finalModel.units = makerjs.unitType.Millimeter;

And then I am generating some paths and pushing them into an array called path. And then I am assigning those paths to finalModel object's paths

for (var i = 0; i<path.length; i++)
{
    finalModel.paths[i] = path[i];
}

Then returning that finalModel object and using it in a promise to add some text objects into it. And eventually I am converting it into DXF and saving it as a DXF file.

Then I am measuring a distance, which should be 6 Millimeters, but it is 6 inches instead.

Where am I doing wrong?

I also tried to define the finalModel variable as

var finalModel = {paths: path, units:makerjs.unitType.Millimeter}

This didn't work as well.

sorry to open ticket for my question but actually I'm looking for light gcode visualizer or probably cad2gcode convertor in my webpage , but this webpage hosted on tiny ESP826612F module which is connected to Arduino GRBL gcode interpreter by serial line, so I should have great care about its weight , My plan is just connect to wifi module and open the browser and do designated CAM job.,As I'm not pro in client side script like JavaScript I was hopping could have good advise here, do you suggest to make some plugin from such library so I shouldn't have to download or call all library ?
thanks

Creates bad code:

function main(){return .extrude({"offset":[0,0,1]});}

May intersection operations can be avoided by caching the rectangle of a path or model, and only do an intersection when the rects overlap.

Would like to know if anyone would find this feature useful.

In this example, there should be an additional shape between the R and the A:

http://microsoft.github.io/maker.js/playground/?script=https://gist.githubusercontent.com/danmarshall/d54b7512805a3912c437097a906fb822/raw/03502d09e60cda61f045dca0150035a176516712/outline-text.js

I have only begun to work with maker.js, which I have to say really fills a niche that has been missing from the javascript toolset for some time. So many thanks for publishing such a great toolset. However, one feature it seems to be missing is the concept of groups (svg) or layers (dxf). The ability to set these, is important in CNC machining in order to map tool paths to specific tools and other cut and tool specifics. Although I see a few places to start, being so new to the codebase, I am not sure what the best approach would be. I'd be inclined toward adding a group property to the path and model objects. Such that went the model group is set, contained paths would also be set. Then depending on the filetype being exported either group or layer would be named appropriately.

If I could either be pointed in the right direction, or maybe this is a planned feature, which would be great, let me know. Either way, even though I'm still pretty green with javascript, I've submitted a CLA and forked just incase we get to the point of a pull request.

Another feature, I would like to hear from the community if it would be useful.
Currently all paths are "standalone" - however SVG has the continuous path. This would allow one to use a fill, although in MakerJs there are only lines and no fill.

'Twould be nice to pass a collection of models to a routine, along with the material size, for it to return the collection optimally placed for cutting. Of course, it would also be nice to win the lottery :o)

Anyway, I mention it in case anyone out there likes a (big) challenge; I fear it's a bit outside my capability.

Is it possible to find the bounding box dimensions of the geometry defined as combination of paths and models?

var finalModel = {paths:{},models:{}};

Is it possible to select areas like circles or squares for programmatically adding other nested models inside?

Hi, we just discovered this cool library.
Great stuff!
We have a request for you. How we can manage or obtain layers in exporting DXF?
In svg it worked in this way:

var fs = require('fs');
var makerjs = require('makerjs');
//some code to build line and circle
var cut = makerjs.exporter.toSVG('', {svgAttrs: {id:'Cut'}});
var decoration = makerjs.exporter.toSVG('', {svgAttrs: {id:'Decoration'}});
var svgToexport = cut + decoration;
fs.writeFileSync('test.svg', svgToexport);

I there any solution for handle this for the dxf file?

Layers are very important for machine to handle better different elements such as in this case decoration and cut.

All the best.

We need to support downloads for browsers which do not handle the a[download] attribute.
Just show a popup with the file data, and copy the text, and tell the user to save the clipboard to a new file.

Hello, is it possible to :

1- load a DXF file;
2- parse to SVG in order to view it;
3- edit through makerjs;
4- re-export to DXF;

i know it's possible from step 2 to 4... didn't found a solution for the first step above. It's important because i have to start from existing dxf files...

Please let me know and thanks again

Zoom % is the wrong number sometimes. Also, do not use "native" units of the model - always convert to pixel.

I need a clarification which is the best way to draw a Bezier curve? Excuse me if a request this in GitHub i understand that is not the appropriate place to do that!
If anyone post my an example.
Thanks

I am building a model by pushing paths into an array. If I am not mistaken makerjs does not allow to push models into an array, am I correct?

Now I came to a point that I have to add text to my model and as far as I checked the example on documentation page, text object is defined as model. So, my first question is; Is it possible to convert this model into a path and then push it into a model. I will be creating multiple text models within a for loop, hence the need of pushing into an array.

All those aside my first attemp for creating a text failed;

var makerjs = require('makerjs')
var textObj = new makerjs.models.Text("verdana", 'Hello', 12, false);
var svg = makerjs.exporter.toSVG(textObj)
document.write(svg)

Where am I wrong?

My idea is to extend the playground ui.
When you click on a element a parameter window should open where you can adjust meta parameters specific to the model instance you clicked on.

I am having trouble finding out where to start. Are there any convenient methods inside makerjs to create EventListeners ?

Thanks

Hello,

I want to color and stroke several models. I haven't seen any other way to do it properly. So I end up doing it when I export the model. But the problem is I have several model with different colors. So I have to export each of the models :

var textSvg = makerjs.exporter.toSVG(textModel, {
				"fill": textColor,
				"strokeWidth": 0
			});

var text2Svg = makerjs.exporter.toSVG(text2Model, {
				"fill": text2Color,
				"strokeWidth": 0
			});

So I have 2 svg generated. With the good color and the good stroke. Now I would like to merge these 2 svg.

I thought about using the method : fromSVGPathData() but I don't have the path but the whole svg. And even If I extract the path from the svg I will lose the style (color, stroke...) so not the good solution.

Any idea ?
Thank you for you help

Is it punto or the height of a single letter in any other unit?

I've probably missed something obvious and/or am not using maker.js properly but the only way I seem to be able to place some text anywhere other than at 0,0 is to run through and move the origin of every part of the generated text. Would be nice to just give it an origin when requesting the text.

Also, without some more jiggery-pokery, subsequent texts overwrite previous texts as I add them to my overall drawing model. But like I say, I probably just don't see how I'm supposed to do these things the right way.

Hi,
I'm trying to make multiple subtractions at one object. The first subtraction works well, but subtraction change the model from closed geometry to open one.

This is sample the fiddle, inspired from boolean example [(example source)](https://microsoft.github.io/maker.js/docs/advanced-drawing/#Combining with Boolean operations):
sample
uncommenting this row, you will see the unwanted result:
// makerjs.model.combineSubtraction(x.x1.models.rect, x.x1.models.ovallow);

It's possible to generate a new model with closed geometry from 2 open geometry model? I think is the solution of my problem.

Thanks for this great work!

Need a feature to follow paths and make them wider - to allow for kerf, etc.

I am trying to set up a local installation of the playground.

I guess there are some functionalities like including metaParameters that only work when I spin up a node server.
I tried running this code in the browser code editor:

var makerjs = require('makerjs');

function Heart(r, a2) {

    var a = a2 / 2;

    var a_radians = makerjs.angle.toRadians(a);

    var x = Math.cos(a_radians) * r;
    var y = Math.sin(a_radians) * r;

    var z = makerjs.solvers.solveTriangleASA(90, 2 * r, 90 - a);

    this.paths = {
        arc1: new makerjs.paths.Arc([x , 0], r, -a, 180 - a),
        line1: new makerjs.paths.Line([x * 2, -y], [0, -z + y])
    };

    this.paths.arc2 = makerjs.path.mirror(this.paths.arc1, true, false);
    this.paths.line2 = makerjs.path.mirror(this.paths.line1, true, false);
}

Heart.metaParameters = [
    { title: "radius", type: "range", min: .01, max: 100, step: 1, value: 10 },
    { title: "angle", type: "range", min: 60, max: 120, step: 1, value: 90 }
];

module.exports = Heart;

`
I get this errror:

Uncaught DOMException: Failed to construct 'Worker': Script at 'file:///Users/andreasdaiminger/Desktop/wood/maker_origin.js/playground/worker/render-worker.js' cannot be accessed from origin 'null'.(…)

Please point me in the right direction. Do I have to spin up a node server to make metaParameters work?

Is it already possible to add an external file to the playground? This way I don't have to set up my own Maker.js platform. See also at OpenJSCAD:
http://openjscad.org/#http://www.thingiverse.com/download:164128 (STL) or
http://openjscad.org/#http://openjscad.org/examples/slices/tor.jscad

Hi Dan

I'm not sure if this is intentional (I think its just the way js works ;-) )

But its worth noting that you don't need to name the paths or the models, both paths and models work OK as arrays.

As an example I modified your origin example to push a load of boxes into an array

https://jsfiddle.net/ddkqk1s8/

I'm using this technique as I need to create hundreds of cutting lines to make plywood bendable , when laser cut, and its not practical to name every line (though I suppose I could programmatically name them e.g. line0, line1,line2 etc etc)

Drawing text is a critical component in most CAD-involved projects (in order to add dimensions, callouts, title blocks, etc.). Adding text to SVG outputs is trivial but adding text to other options such as DFX may not be without some documentation and possibly shim methods. This is a great project and by adding the ability to include dimensions and so forth without having to dig into source code, it would be even more useful.

Having an output property with a collection of all the deleted segments will allow maintaining a closed geometry for secondary combine() calls.

Hi guys!
I'm used to the polygon() function in OpenJSCAD which accepts n points and creates a closed polygon between them. Here in makerjs polygon can only be used to create regular polygons.
It would be great to have it here, too!
For now, I'm just creating lines one by one but it would be a lot more readable to create a single polygon object with n lines instead of creating n lines individually.

This:

var lineAB = new makerjs.paths.Line(A, B);
var lineBC = new makerjs.paths.Line(B, C);
var lineCD = new makerjs.paths.Line(C, D);
var lineDA = new makerjs.paths.Line(D, A);

would become

var polyABCD = new makerjs.models.Polygon(A, B, C, D);

Thanks

PS: this library is really great for laser cutter owners! ❤️

Is it possible to provide support for importing plugin with npm using es6 style?

I am having hard times using this in es6 (webpack and babel) with import command with browser application. If I install with npm and try to import that it complains about the detectEnvironment.

What are the reasons behind using this require method?

Hi all,

i'm trying to integrate this beautiful tool into an angularjs project, but when i include makerjs's src core into the project i have a lot of error

<script src="makerjs/src/core/maker.js"></script> <script src="makerjs/src/core/angle.js"></script> <script src="makerjs/src/core/point.js"></script> <script src="makerjs/src/core/units.js"></script> <script src="makerjs/src/core/equal.js"></script> <script src="makerjs/src/core/measure.js"></script> <script src="makerjs/src/core/path.js"></script> <script src="makerjs/src/core/break.js"></script> <script src="makerjs/src/core/paths.js"></script> <script src="makerjs/src/core/model.js"></script> <script src="makerjs/src/core/combine.js"></script> <script src="makerjs/src/core/collect.js"></script> <script src="makerjs/src/core/simplify.js"></script> <script src="makerjs/src/core/loops.js"></script> <script src="makerjs/src/core/expand.js"></script> <script src="makerjs/src/core/kit.js"></script> <script src="makerjs/src/core/exporter.js"></script> <script src="makerjs/src/core/dxf.js"></script> <script src="makerjs/src/core/xml.js"></script> <script src="makerjs/src/core/svg.js"></script> <script src="makerjs/src/core/openjscad.js"></script> <script src="makerjs/src/core/solvers.js"></script> <script src="makerjs/src/core/fillet.js"></script> <script src="makerjs/src/core/intersect.js"></script> <script src="makerjs/src/models/BoltCircle.js"></script> <script src="makerjs/src/models/BoltRectangle.js"></script> <script src="makerjs/src/models/Dome.js"></script> <script src="makerjs/src/models/RoundRectangle.js"></script> <script src="makerjs/src/models/Oval.js"></script> <script src="makerjs/src/models/OvalArc.js"></script> <script src="makerjs/src/models/ConnectTheDots.js"></script> <script src="makerjs/src/models/Rectangle.js"></script> <script src="makerjs/src/models/Ring.js"></script> <script src="makerjs/src/models/Polygon.js"></script> <script src="makerjs/src/models/Square.js"></script> <script src="makerjs/src/models/Slot.js"></script> <script src="makerjs/src/models/SCurve.js"></script> <script src="makerjs/src/models/Star.js"></script>

below the errors

Uncaught ReferenceError: pathType is not defined Uncaught ReferenceError: unitType is not defined Uncaught ReferenceError: pathType is not defined Uncaught ReferenceError: pathType is not defined Uncaught ReferenceError: pathType is not defined Uncaught ReferenceError: pathType is not defined Uncaught ReferenceError: pathType is not defined Uncaught ReferenceError: unitType is not defined Uncaught ReferenceError: unitType is not defined Uncaught ReferenceError: pathType is not defined Uncaught ReferenceError: pathType is not defined Uncaught TypeError: Cannot read property 'easing' of undefined Uncaught TypeError: Cannot read property 'offsetLeft' of null

please help me, i'm stuck and i want to use makerjs so hard!

I saw in another question that's possible to import SVG into maker.js ... where can i find the snippet in the repository?

Then, using this code (angularjs project) :

` var makerjs = require('makerjs');

var model = {
    paths: {
        head: new makerjs.paths.Circle([0, 0], 90),
        eye: new makerjs.paths.Circle([25, 25], 10),
        mouth: new makerjs.paths.Arc([0, 0], 50, 225, 315),
        wink: new makerjs.paths.Line([-35, 20], [-15, 20])
    }
};

var svg = makerjs.exporter.toSVG(model);

$scope.myHTML = $sce.trustAsHtml(svg);`

How can i add an ID as an attribute to this exported SVG?

thanks in advance

Hello,

I'd look to modify the letter-spacing, kerning...when creating a Text model. I tweak the code but thought it would be cool to integrate it officially.

Text.ts : https://github.com/Microsoft/maker.js/blob/master/src/models/Text.ts#7
constructor(font: opentype.Font, text: string, fontSize: number, combine = false, centerCharacterOrigin = false, bezierAccuracy?: number, **optionsOpenType**)

And modify https://github.com/Microsoft/maker.js/blob/master/src/models/Text.ts#95
by font.forEachGlyph(text, 0, 0, fontSize, **optionsOpenType**, cb);

Then when creating a model we can add the opentype option :

{
                letterSpacing: -0.1,
                kerning: true 
}

I've seen https://github.com/Microsoft/maker.js/blob/master/src/models/Text.ts#L12
there is already a parameter options: opentype.RenderOptions
But I don't understand why it is there.

If someone can give me his thought on this.