Feature Request: Text for Dimensions, Callouts, Title Blocks, etc.

[joenewstrom]

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.

[danmarshall]

Thanks for the feedback @joenewstrom. Have you seen the "show path names" feature in the playground? In SVG it's a simplistic text placed at the center of a path. Adding dimensions can become quite elaborate. Can you attach a concept sketch?

[sendel]

SVG has good support of text, but not maker.js

[shrekuntu]

This project is really awesome, but the lack of dimensions is a deal breaker. We are mfg company cutting plasma and laser and it is mandatory for machine operator to get a scale (dimensions) before he nests them on a sheet of metal. I know DXF Dimensions are not easy to implement, but it would be so cool.

[danmarshall]

Thanks for the feedback everyone. To get a better idea of the community needs, it would be helpful to know some more specifics:

• Do you only need this in DXF format?
• Do the dimensions need to be on the drawing itself? Or can they be printed off on another "page"
• Are folks looking for "classic" blueprint style dimensioning (ala paper), or can it be an interactive app (touch to see info)

Architecturally speaking, this sounds like it may be a separate project which takes a dependency on the Maker.js core, because it is a focused scenario.

[shrekuntu]

I would have 2 different use cases for maker.js

First, plasma/laser cutting. DXF is required and dimensions on the drawing are required. Machine operator would have a printed drawing and when he brings dxf to nest, he uses paper drawing to verify dimensions for the part he is cutting. The way to not confuse nesting program with dimensions is to use two different layers, one for cutting shape, other for dimensions.

Second, maybe even more important use case would be general parametric CAD. Just like the front page demo with spoked pulley, user would be able to specify outside diameter, inside diameter, spoke count and offset and would get svg with those dimensions shown. In most cases only svg and pdf would be required. There would be no cutting in this scenario

Thanks

[innominata]

Dimension text would be amazing.

I'm currently using a 10 year old php script I wrote to produce glass cutting sheets for frameless glass shower doors. Here's an example.

Obviously this has a lot of drawbacks (server side, fixed image, no DXF capability), so I'm rewriting the program using maker.js example which has many benefits (to scale, DXF output, clientside, realtime modification using vue.js)

Currently when I send the glass manufacturer a cutting sheet, it will be the first example, and customer service will use templates and drop the dimension numbers in. This is fast and efficient, but doesn't work for anything odd, where they will either get a CAD operator to manually draw the piece, or use a DXF I create and export it to the CNC software. The customer service person will however need all the dimensions supplied as a PDF for pricing, and they get annoyed if I just send them an undimensioned DXF file, as the CAD operator has to go and manually dimension the piece and print it out for customer service.

I also need dimensions on the job sheets our installers get, so they can check the received piece of glass has been produced correctly.

Currently it looks like I'll need to use opentype to draw bezier text for all my preview and PDF print dimensions, which is cumbersome (have to use a hacky single line CAD style font, write functions to create dimension lead lines and arrows etc) but doable (the first example uses php to do the same thing), however if I were to export a dimensioned DXF file, every bit of text is made up of curves, and a lot of crazy lines rather than simple DXF dimensions. I can mitigate a lot of the issues by placing dimensions on a separate layer, but it would be absolutely fantastic if this library could implement it the right way. Here's an image of a dimensioned DXF file using autocad to do it manually

[innominata]

Another reason to have text in DXF : To label individual parts. For example, I might have 3 different mirrors in one DXF file, each with a different identifying number, and instructions for the processor such as '4mm Mirror Flat Polish All Edges'. This is going to be very difficult to do with faked text. Just a thought. I'll probably leave all text off DXF files, and send the processing info as an attached PDF.

[AndyHeinz]

Hi there,
I'm also very interested in Labels and Dimensions in maker.js. Is there any progress yet?
Thanks!

[danmarshall]

Hi @HeinzSchrot, I myself have not done any work, other than some thought, towards this. I don't believe anyone in the community has either.

Here's my thoughts so far:

• This would probably be a separate NPM package. The code that does dimensioning probably would not end up in Maker.js but it would depend on Maker.js.
• It is unclear which features of the drawing should be dimensioned. For example, in @innominata 's example - one angle is dimensioned; the notches are not, and the 2 holes for the handle are not. Since this is a rectangle, it might seem simple, but for an irregular polygon it might get to be messy. There would need to be a way to designate which paths get a dimension, and where to locate that dimension (e.g. inside or outside of the geometry.)
• How to make sure dimensions do not occlude each other?
• Dimensioning in pure SVG seems doable, but I have not looked at how to do it in native DXF format.

[danmarshall]

I took a quick look at LebreCAD's dimension menu:

And the corresponding DXF doc

It seems tractable to implement this.

[innominata]

this is what im doing at the moment

It's just using the native lines and bezier curve text to output via svg, which is extremely inefficient :)
I turn it off for dxf, because my suppliers don't really need it dimensioned if the units are correctly set.
Actual text dimensions, or even just the ability to output svg text correctly, would be great.
I know it's not the purpose of this library tho (to be a drawing library) but nothing else has dxf output and can output to a web format at the same time.

[danmarshall]

@innominata - cool that you found a workaround 😃 but sorry that it's inefficient. It's a good case for the "native" text feature. We'd need to find a way to rationalize the text feature in a way that works for DXF, PDF, and SVG.
For example, there would be a need to specify a font and font size for PDF and SVG. For DXF it would be automatically handled by the viewer app.

[AndyHeinz]

@innominata very nice! svg would be absolutely good enough. You're right. There is no need for dimensions in dxf, since the part is 1:1 a CAD/CAM will show it correct. I'll need dimensions just for display in the canvas.
@danmarshall
Officialy: Which features should be dimensioned, and how to dimension is regulated by ISO 129-1:2004 (https://www.iso.org/obp/ui/#iso:std:iso:129:-1:ed-1:v1:en)
But from my end the dimensioning @innominata did is very adequate.

[AndyHeinz]

Hi, is there any progress on this topic, or are you @innominata willing to share?

[innominata]

@HeinzSchrot I stopped working on it a while ago due to laziness, but I think I wrote an adapter from makerjs coordinates to svg.js and used that for my user facing display. My memory is terrible, but I believe It's only using makerjs for dxf output now.

[icodk]

@innominata
I try to use maker.js in a vue component. with no sucess.
in my index.html, I have
<script src="https://cdn.jsdelivr.net/npm/makerjs@0/target/js/browser.maker.js"></script>
and in the component function I try

drawProject: function (){
          console.log('Draw Project');
          var makerjs = require('makerjs');

and I get the following error
Module not found: Error: Can't resolve 'makerjs'

Could you please show how do you do it ?

[crumpled]

Dimensioning is critical to my use case too. I'd like to use MakerJS to produce parametric architectural drawings. A primitive example is this: https://jsfiddle.net/crumpled/rypgdLde/.

I have a project with much more complexity, and I'm not sure if I want to use MakerJS if I have to draw dimensions like I did before.

A dimension object like this might be a conversation starter.
{
dimensionType: 'Vertical',
points: [point1, point2],
side: 'left',
textClass: 'myDimensions',
leaderOffset: 3,
leaderLength: 15,
arrows: false
}

[danmarshall]

@crumpled what is your desired output format - SVG or DXF?

[danmarshall]

Hi folks, I started digging into this and a couple of question arose.

• Do dimension objects hang off of a model, or do they exist on their own?
• What happens to dimensions when a model is scaled? Sometimes you want to scale a model to fit a piece of paper like PDF, but you don't want to scale the dimensions. Other times, you do want them scaled.
• What happens to dimensions when a model is distorted? A circle becomes an ellipse, which changes the nature of the dimension.
• Boolean combinations of models - many issues arise here...

Curious what people think. Maybe there is an elegant solution, but I haven't had time to devote to just this.

[innominata]

@danmarshall
1/ It would be preferred if they were in a different layer so they could be enabled/disabled easier. Parametric Dimensions would be driven by the distance between two points, Static Dimensions would be calculated once and then never change. I'm picking most people would want the dimensions to accurately reflect changes in the model.
2/ Scaling for print wouldn't change the dimensions. That would be more like a final output scaling rather than an object scaling
3/ The dimension should reflect the nature of the model. In the case of a circle, the dimensions should be anchored to particular points and change with the distance between those points. Ideally dimensioning should happen last.
4/ Dimensions should be opt in rather than automatic. I'd like to pick the points (end of lines etc) to anchor my dimension lines to, and be able to set the dimension to Vertical, Horizontal, or Aligned. I can draw up a mockup in CAD if that doesn't make sense.

:)

[danmarshall]

Thanks everyone for the discussion. This is now underway, in the first of 2 stages.

1. Add a caption object - this in now a PR captions #367 ready for review.
2. Add dimensions models - similar to @innominata 's implementation but using captions.

I will probably only be building the popular dimensions:

• angular
• linear
• radial, diameter
• callout