Changing End Caps on OvalArc

[milonic]

Hi,

I've been looking at ovalArc and it's perfect for an upcoming project I am working on.

The only trouble is that I'd like to change the end caps from the current semi circle to something else, say fully right angle or maybe even an inner semi circle.

I had a little look at the source code and it's not as trivial as I'd hoped. Is this something that can be added?

I'd be happy to look at building this myself. Is there way somebody that can give me some pointers so I can work on this myself? Just an idea of the basic concepts I'd need to be looking at and I'll see if can achieve something.

[danmarshall]

Hello! Having the OvalArc with flat ends seems like a good idea for a new built-in model, perhaps we'd name it ArcWedge - since it would no longer be an oval :)

If you're familiar with TypeScript and want to contribute to this repo, you could copy the existing OvalArc code file to start, then rename it and remove the code for arc endcaps and replace with lines. Then add the new file to the tsconfig. Note: this repo uses an older version of TypeScript - haven't updated that in a while 🦥. Then you call npm run build and npm start.

Otherwise, you can just feel free to write your own wrapper function in your own project that modifies an existing OvalArc. The built-in models are meant to be malleable for situations like these. Check the docs for modifying models and model trees.

[milonic]

Hi Dan, thanks for responding.

Just to let you know that I spent a bit time on this earlier today and I actually have something working quite nicely. I built it as an extension to the ovalArc function but I now realise that it should be its own function. arcWedge sounds like a perfect name so I'll get working on porting that over tomorrow. There was one little glitch that I might need your help with but I'll get something uploaded and go from there.

Can you please tell me where I can get all the files from? I tried npm install makerjs but it didn't download all the .ts files. I'm not familiar with Typescript but do feel it's about time I got my head around it but might need a little hand holding to get going. Is there something other than npm install makerjs that I should be using?

[danmarshall]

Glad to see you jumping in @milonic ! There's a few things to learn but it's a common & popular workflow. Here's a nice document I found that seems to describe the process neatly: https://github.com/firstcontributions/first-contributions/blob/main/README.md

One quick note: npm install makerjs will get you the "consumer" version for use within your applications. When you want to develop maker.js itself, you'll fork/clone/branch/commit and send a pull request. Hope that helps!

[milonic]

So, trying to build makerjs for testing. After lots of dependency installs, I finally ran into the following errors:

Using TypeScript 4.1.3 from /root/.npm/_npx/5cf08f252b968ea3/node_modules/typescript/lib
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(24)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(57)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(60)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(78)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(91)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(109)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(120)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(153)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(168)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(176)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(186)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(191)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(200)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(276)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(283)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(285)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(300)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(313)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(333)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(348)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(363)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(409)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(422)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(440)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(441)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(452)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(453)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/core/dxf.ts(472)
Cannot find namespace 'DxfParser'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/BezierCurve.ts(26)
Cannot find namespace 'BezierJs'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/BezierCurve.ts(38)
Cannot find namespace 'BezierJs'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/BezierCurve.ts(59)
Cannot find namespace 'BezierJs'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/BezierCurve.ts(71)
Cannot find namespace 'BezierJs'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/BezierCurve.ts(88)
Cannot find namespace 'BezierJs'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/BezierCurve.ts(119)
Cannot find namespace 'BezierJs'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/BezierCurve.ts(129)
Cannot find namespace 'BezierJs'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/BezierCurve.ts(137)
Cannot find namespace 'BezierJs'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/BezierCurve.ts(153)
Cannot find namespace 'BezierJs'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/BezierCurve.ts(220)
Cannot find namespace 'BezierJs'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/BezierCurve.ts(585)
Cannot find name 'BezierJs'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/Text.ts(95)
Property 'x' does not exist on type 'PathCommand'.
 Property 'x' does not exist on type '{ type: "Z"; }'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/Text.ts(95)
Property 'y' does not exist on type 'PathCommand'.
 Property 'y' does not exist on type '{ type: "Z"; }'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/Text.ts(95)
Property 'x1' does not exist on type 'PathCommand'.
 Property 'x1' does not exist on type '{ type: "M"; x: number; y: number; }'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/Text.ts(95)
Property 'y1' does not exist on type 'PathCommand'.
 Property 'y1' does not exist on type '{ type: "M"; x: number; y: number; }'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/Text.ts(95)
Property 'x2' does not exist on type 'PathCommand'.
 Property 'x2' does not exist on type '{ type: "M"; x: number; y: number; }'.
Error: /home/andy/git/maker.js/packages/maker.js/src/models/Text.ts(95)
Property 'y2' does not exist on type 'PathCommand'.
 Property 'y2' does not exist on type '{ type: "M"; x: number; y: number; }'.

This happens to me every time I try to build something using Typescript and one of the reasons I usually quit and just get back to my day job. I've searched for an answer but nothing seems to help. So, wondering if you know where I went wrong and how to fix this?

[milonic]

Well this is weird, I just ran "npm test" and it appears to have built makerjs even though I changed nothing.

Latest error is now:

✖  playground:build
> [email protected] build
> tsc -p . && tsc -p src/worker

../maker.js/dist/index.d.ts(3615,28): error TS2552: Cannot find name 'BezierJs'. Did you mean 'Bezier'?

[milonic]

Managed to get makerjs to build so properly, so I now have a fully functioning arcWedge model tested and ready to go. What's the best way of committing it?

Also, the above error is still there but only for playgound. Be nice to get that up and running because I'd like to create demos for arcWedge

[danmarshall]

Wow great job pushing through! Just commit it to your fork/clone/branch and push it to GitHub, from there you'll be able to create a pull request.

[milonic]

Done that! - if I can get the error fixed for playground I'll be able to do some documentation and examples. See above for the error.

[mucan54]

@milonic How you fixed it? I'm facing same issue but couldn't solve? I am not able to build.