luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use monospace font for class shape

Browse source
This commit is contained in:
Alexander Wang 2022-12-24 16:10:58 -08:00
parent 3c146ed508
commit a02779cb7f
No known key found for this signature in database
GPG key ID: D89FA31966BDBECE
9 changed files with 77 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ci/release/changelogs/next.md
View file

@ -9,6 +9,7 @@
- Improved label placements for shapes with images to avoid overlapping container labels. [#474](https://github.com/terrastruct/d2/pull/474) - Improved label placements for shapes with images to avoid overlapping container labels. [#474](https://github.com/terrastruct/d2/pull/474)
- Themes are applied to sql_table and class shapes. [#521](https://github.com/terrastruct/d2/pull/521) - Themes are applied to sql_table and class shapes. [#521](https://github.com/terrastruct/d2/pull/521)
- `class` shapes use monospaced font. [#521](https://github.com/terrastruct/d2/pull/521)
- Sequence diagram edge group labels have more reasonable padding. [#512](https://github.com/terrastruct/d2/pull/512) - Sequence diagram edge group labels have more reasonable padding. [#512](https://github.com/terrastruct/d2/pull/512)
- ELK layout engine preserves order of nodes. [#282](https://github.com/terrastruct/d2/issues/282) - ELK layout engine preserves order of nodes. [#282](https://github.com/terrastruct/d2/issues/282)

8
d2graph/d2graph.go
View file

@ -913,6 +913,8 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
} }
} }
innerLabelPadding = 0 innerLabelPadding = 0
} else if obj.Attributes.Shape.Value == d2target.ShapeClass {
dims = getTextDimensions(mtexts, ruler, obj.Text(), go2.Pointer(d2fonts.SourceCodePro))
} else { } else {
dims = getTextDimensions(mtexts, ruler, obj.Text(), fontFamily) dims = getTextDimensions(mtexts, ruler, obj.Text(), fontFamily)
} }
@ -968,7 +970,7 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
maxWidth := dims.Width maxWidth := dims.Width
for _, f := range obj.Class.Fields { for _, f := range obj.Class.Fields {
fdims := getTextDimensions(mtexts, ruler, f.Text(), fontFamily) fdims := getTextDimensions(mtexts, ruler, f.Text(), go2.Pointer(d2fonts.SourceCodePro))
if fdims == nil { if fdims == nil {
return fmt.Errorf("dimensions for class field %#v not found", f.Text()) return fmt.Errorf("dimensions for class field %#v not found", f.Text())
} }
@ -978,7 +980,7 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
} }
} }
for _, m := range obj.Class.Methods { for _, m := range obj.Class.Methods {
mdims := getTextDimensions(mtexts, ruler, m.Text(), fontFamily) mdims := getTextDimensions(mtexts, ruler, m.Text(), go2.Pointer(d2fonts.SourceCodePro))
if mdims == nil { if mdims == nil {
return fmt.Errorf("dimensions for class method %#v not found", m.Text()) return fmt.Errorf("dimensions for class method %#v not found", m.Text())
} }
@ -997,7 +999,7 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
} }
if anyRowText != nil { if anyRowText != nil {
// 10px of padding top and bottom so text doesn't look squished // 10px of padding top and bottom so text doesn't look squished
rowHeight := getTextDimensions(mtexts, ruler, anyRowText, fontFamily).Height + 20 rowHeight := getTextDimensions(mtexts, ruler, anyRowText, go2.Pointer(d2fonts.SourceCodePro)).Height + 20
obj.Height = float64(rowHeight * (len(obj.Class.Fields) + len(obj.Class.Methods) + 2)) obj.Height = float64(rowHeight * (len(obj.Class.Fields) + len(obj.Class.Methods) + 2))
} }
// Leave room for padding // Leave room for padding

10
d2renderers/d2sketch/sketch.go
View file

@ -372,7 +372,7 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
) )
if shape.Label != "" { if shape.Label != "" {
tl := label.InsideMiddleLeft.GetPointOnBox( tl := label.InsideMiddleCenter.GetPointOnBox(
headerBox, headerBox,
0, 0,
float64(shape.LabelWidth), float64(shape.LabelWidth),
@ -380,7 +380,7 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
) )
output += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`, output += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
"text", "text-mono",
tl.X+float64(shape.LabelWidth)/2, tl.X+float64(shape.LabelWidth)/2,
tl.Y+float64(shape.LabelHeight)*3/4, tl.Y+float64(shape.LabelHeight)*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s",
@ -437,21 +437,21 @@ func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText str
) )
output += strings.Join([]string{ output += strings.Join([]string{
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`, fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
prefixTL.X, prefixTL.X,
prefixTL.Y+fontSize*3/4, prefixTL.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor), fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor),
prefix, prefix,
), ),
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`, fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
prefixTL.X+d2target.PrefixWidth, prefixTL.X+d2target.PrefixWidth,
prefixTL.Y+fontSize*3/4, prefixTL.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.Fill), fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.Fill),
svg.EscapeText(nameText), svg.EscapeText(nameText),
), ),
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`, fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
typeTR.X, typeTR.X,
typeTR.Y+fontSize*3/4, typeTR.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;", "end", fontSize, shape.SecondaryAccentColor), fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s;", "end", fontSize, shape.SecondaryAccentColor),

38
d2renderers/d2sketch/testdata/class/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 196 KiB

11
d2renderers/d2svg/class.go
View file

@ -24,11 +24,10 @@ func classHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, tex
) )
str += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`, str += fmt.Sprintf(`<text class="%s" x="%f" y="%f" style="%s">%s</text>`,
// TODO use monospace font "text-mono",
"text",
tl.X+textWidth/2, tl.X+textWidth/2,
tl.Y+textHeight*3/4, tl.Y+textHeight*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", fmt.Sprintf(`text-anchor:%s;font-size:%vpx;fill:%s`,
"middle", "middle",
4+fontSize, 4+fontSize,
shape.Stroke, shape.Stroke,
@ -56,21 +55,21 @@ func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText str
) )
return strings.Join([]string{ return strings.Join([]string{
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`, fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
prefixTL.X, prefixTL.X,
prefixTL.Y+fontSize*3/4, prefixTL.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor), fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.PrimaryAccentColor),
prefix, prefix,
), ),
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`, fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
prefixTL.X+d2target.PrefixWidth, prefixTL.X+d2target.PrefixWidth,
prefixTL.Y+fontSize*3/4, prefixTL.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.Fill), fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "start", fontSize, shape.Fill),
svg.EscapeText(nameText), svg.EscapeText(nameText),
), ),
fmt.Sprintf(`<text class="text" x="%f" y="%f" style="%s">%s</text>`, fmt.Sprintf(`<text class="text-mono" x="%f" y="%f" style="%s">%s</text>`,
typeTR.X, typeTR.X,
typeTR.Y+fontSize*3/4, typeTR.Y+fontSize*3/4,
fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "end", fontSize, shape.SecondaryAccentColor), fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "end", fontSize, shape.SecondaryAccentColor),

4
e2etests/testdata/stable/class/dagre/board.exp.json generated vendored
View file

@ -9,7 +9,7 @@
"x": 0, "x": 0,
"y": 0 "y": 0
}, },
"width": 339, "width": 422,
"height": 368, "height": 368,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
@ -68,7 +68,7 @@
"italic": false, "italic": false,
"bold": false, "bold": false,
"underline": false, "underline": false,
"labelWidth": 150, "labelWidth": 175,
"labelHeight": 36, "labelHeight": 36,
"zIndex": 0, "zIndex": 0,
"level": 1, "level": 1,

38
e2etests/testdata/stable/class/dagre/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 327 KiB

After

Width:  |  Height:  |  Size: 184 KiB

4
e2etests/testdata/stable/class/elk/board.exp.json generated vendored
View file

@ -9,7 +9,7 @@
"x": 12, "x": 12,
"y": 12 "y": 12
}, },
"width": 339, "width": 422,
"height": 368, "height": 368,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
@ -68,7 +68,7 @@
"italic": false, "italic": false,
"bold": false, "bold": false,
"underline": false, "underline": false,
"labelWidth": 150, "labelWidth": 175,
"labelHeight": 36, "labelHeight": 36,
"zIndex": 0, "zIndex": 0,
"level": 1, "level": 1,

38
e2etests/testdata/stable/class/elk/sketch.exp.svg vendored
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 327 KiB

After

Width:  |  Height:  |  Size: 184 KiB