diagrams / diagrams-doc

Documentation for the diagrams project
19 stars 27 forks source link

Better documentation on how to use the same output measurement for multiple diagrams #112

Open meygerjos opened 7 years ago

meygerjos commented 7 years ago

The user manual says this:

One situation in which output units can be particularly useful is when preparing a document (paper, blog post, etc.) with multiple embedded diagrams of various physical sizes. Using the same output value for the line width (or arrowhead length, arrow gap, font size, etc.) of every diagram ensures that the diagrams will all look consistent.

This is exactly what I'd like to do. I am making a webpage with multiple diagrams-generated svg files of different sizes inline, and I'd like the line widths, arrowhead sizes, and circle radii to be consistent. But I'm not sure how. How would I pass the same output value to all the arrows, arrowheads, circles, etc.? And when I ultimately render with renderPretty, what would I set size to in the SVGOptions argument so that it just makes the svg whatever size its contents are?

meygerjos commented 7 years ago

I have just crossposted this question to stackoverflow.

meygerjos commented 7 years ago

I finally managed to figure this out.

I had some arrows: for these I used the arrowOpts:

(with & arrowHead .~ myTri
      & arrowTail .~ lineTail
      & lengths .~ output 15
      & arrowShaft .~ idShaft offset
      & shaftStyle %~ lwO 1)

For SVG rendering I used renderPretty' outFile svgOpt diagram with

svgOpt :: Num n => Options SVG V2 n
svgOpt = SVGOptions {
  _size = absolute,
  _idPrefix = empty,
  _svgDefinitions = Nothing,
  _svgAttributes = [],
  _generateDoctype = False
}

The crucial part is setting _size = absolute, which causes the resulting svg to not be scaled at all.

I'm still trying to track down the other measurements that aren't output yet.

I think examples such as these should be added to the documentation, because this was really difficult to figure out.

byorgey commented 7 years ago

Thanks for the suggestions! I agree, this should be better documented.

For other measurements you can use lwO to set the line width in output units, and fontSizeO to set the font size. Those are the main ones. If you have any dashed lines or gradients I think there are others related to those.

meygerjos commented 7 years ago

If I do atPoints (map (p2) [(0,0), (100,0)]) ((map circle [20,50]), are the two circles 100 output units apart? And are the radii of the circles 20 and 50 output units respectively?

meygerjos commented 7 years ago

Also, I'm guessing that output units are pixels. Is this true?

byorgey commented 7 years ago

If I do atPoints (map (p2) [(0,0), (100,0)]) ((map circle [20,50]), are the two circles 100 output units apart? And are the radii of the circles 20 and 50 output units respectively?

Yes, they should be, if you use _size = absolute.

Also, I'm guessing that output units are pixels. Is this true?

It depends on the backend. I am not sure specifically for the SVG backend.