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

d2render: class headers can render multiple lines correctly

Browse source
This commit is contained in:
Alexander Wang 2024-08-12 08:23:47 +08:00
parent 48fa2c6f73
commit 021011afbd
No known key found for this signature in database
GPG key ID: BE3937D0D52D8927
7 changed files with 1029 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
d2graph/d2graph.go
View file

@ -986,7 +986,7 @@ func (obj *Object) GetDefaultSize(mtexts []*d2target.MText, ruler *textmeasure.R
} }
if anyRowText != nil { if anyRowText != nil {
rowHeight := GetTextDimensions(mtexts, ruler, anyRowText, go2.Pointer(d2fonts.SourceCodePro)).Height + d2target.VerticalPadding rowHeight := GetTextDimensions(mtexts, ruler, anyRowText, go2.Pointer(d2fonts.SourceCodePro)).Height + d2target.VerticalPadding
dims.Height = rowHeight * (len(obj.Class.Fields) + len(obj.Class.Methods) + 2) dims.Height = rowHeight*(len(obj.Class.Fields)+len(obj.Class.Methods)) + go2.Max(2*rowHeight, labelDims.Height+2*label.PADDING)
} else { } else {
dims.Height = 2*go2.Max(12, labelDims.Height) + d2target.VerticalPadding dims.Height = 2*go2.Max(12, labelDims.Height) + d2target.VerticalPadding
} }

7
d2renderers/d2svg/class.go
View file

@ -4,6 +4,7 @@ import (
"fmt" "fmt"
"html" "html"
"io" "io"
"math"
"oss.terrastruct.com/d2/d2target" "oss.terrastruct.com/d2/d2target"
"oss.terrastruct.com/d2/d2themes" "oss.terrastruct.com/d2/d2themes"
@ -34,13 +35,13 @@ func classHeader(diagramHash string, shape d2target.Shape, box *geo.Box, text st
textEl := d2themes.NewThemableElement("text") textEl := d2themes.NewThemableElement("text")
textEl.X = tl.X + textWidth/2 textEl.X = tl.X + textWidth/2
textEl.Y = tl.Y + textHeight*3/4 textEl.Y = tl.Y + fontSize
textEl.Fill = shape.GetFontColor() textEl.Fill = shape.GetFontColor()
textEl.ClassName = "text-mono" textEl.ClassName = "text-mono"
textEl.Style = fmt.Sprintf(`text-anchor:%s;font-size:%vpx;`, textEl.Style = fmt.Sprintf(`text-anchor:%s;font-size:%vpx;`,
"middle", 4+fontSize, "middle", 4+fontSize,
) )
textEl.Content = svg.EscapeText(text) textEl.Content = RenderText(text, textEl.X, textHeight)
str += textEl.Render() str += textEl.Render()
} }
return str return str
@ -107,7 +108,7 @@ func drawClass(writer io.Writer, diagramHash string, targetShape d2target.Shape)
float64(targetShape.Height), float64(targetShape.Height),
) )
rowHeight := box.Height / float64(2+len(targetShape.Class.Fields)+len(targetShape.Class.Methods)) rowHeight := box.Height / float64(2+len(targetShape.Class.Fields)+len(targetShape.Class.Methods))
headerBox := geo.NewBox(box.TopLeft, box.Width, 2*rowHeight) headerBox := geo.NewBox(box.TopLeft, box.Width, math.Max(2*rowHeight, float64(targetShape.LabelHeight)+2*label.PADDING))
fmt.Fprint(writer, fmt.Fprint(writer,
classHeader(diagramHash, targetShape, headerBox, targetShape.Label, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)), classHeader(diagramHash, targetShape, headerBox, targetShape.Label, float64(targetShape.LabelWidth), float64(targetShape.LabelHeight), float64(targetShape.FontSize)),

396
e2etests/testdata/txtar/multiline-class-headers/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,396 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "A",
"type": "class",
"pos": {
"x": 0,
"y": 13
},
"width": 319,
"height": 276,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": [
{
"name": "LeftAligned",
"type": "",
"visibility": "public"
},
{
"name": "CenterAligned",
"type": "",
"visibility": "public"
},
{
"name": "RightAligned",
"type": "",
"visibility": "public"
},
{
"name": "Justified",
"type": "",
"visibility": "public"
}
],
"methods": null,
"columns": null,
"label": "<<enumeration>>\nAlignment",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 214,
"labelHeight": 55,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
},
{
"id": "B",
"type": "sql_table",
"pos": {
"x": 379,
"y": 1
},
"width": 214,
"height": 300,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": [
{
"name": {
"label": "LeftAligned",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 94,
"labelHeight": 26
},
"type": {
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"reference": ""
},
{
"name": {
"label": "CenterAligned",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 117,
"labelHeight": 26
},
"type": {
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"reference": ""
},
{
"name": {
"label": "RightAligned",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 105,
"labelHeight": 26
},
"type": {
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"reference": ""
},
{
"name": {
"label": "Justified",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 72,
"labelHeight": 26
},
"type": {
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"reference": ""
}
],
"label": "<<enumeration>>\nAlignment",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 189,
"labelHeight": 55,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
},
{
"id": "C",
"type": "class",
"pos": {
"x": 653,
"y": 13
},
"width": 254,
"height": 276,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": [
{
"name": "LeftAligned",
"type": "",
"visibility": "public"
},
{
"name": "CenterAligned",
"type": "",
"visibility": "public"
},
{
"name": "RightAligned",
"type": "",
"visibility": "public"
},
{
"name": "Justified",
"type": "",
"visibility": "public"
}
],
"methods": null,
"columns": null,
"label": "Alignment",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 130,
"labelHeight": 31,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
},
{
"id": "D",
"type": "class",
"pos": {
"x": 967,
"y": 0
},
"width": 254,
"height": 302,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": [
{
"name": "LeftAligned",
"type": "",
"visibility": "public"
},
{
"name": "CenterAligned",
"type": "",
"visibility": "public"
},
{
"name": "RightAligned",
"type": "",
"visibility": "public"
},
{
"name": "Justified",
"type": "",
"visibility": "public"
}
],
"methods": null,
"columns": null,
"label": "Alignment\nOf\nAlignment\nOf",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 130,
"labelHeight": 103,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

102
e2etests/testdata/txtar/multiline-class-headers/dagre/sketch.exp.svg vendored Normal file
View file

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

After

Width:  |  Height:  |  Size: 24 KiB

396
e2etests/testdata/txtar/multiline-class-headers/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,396 @@
{
"name": "",
"isFolderOnly": false,
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "A",
"type": "class",
"pos": {
"x": 12,
"y": 25
},
"width": 319,
"height": 276,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": [
{
"name": "LeftAligned",
"type": "",
"visibility": "public"
},
{
"name": "CenterAligned",
"type": "",
"visibility": "public"
},
{
"name": "RightAligned",
"type": "",
"visibility": "public"
},
{
"name": "Justified",
"type": "",
"visibility": "public"
}
],
"methods": null,
"columns": null,
"label": "<<enumeration>>\nAlignment",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 214,
"labelHeight": 55,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
},
{
"id": "B",
"type": "sql_table",
"pos": {
"x": 351,
"y": 13
},
"width": 214,
"height": 300,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": [
{
"name": {
"label": "LeftAligned",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 94,
"labelHeight": 26
},
"type": {
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"reference": ""
},
{
"name": {
"label": "CenterAligned",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 117,
"labelHeight": 26
},
"type": {
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"reference": ""
},
{
"name": {
"label": "RightAligned",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 105,
"labelHeight": 26
},
"type": {
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"reference": ""
},
{
"name": {
"label": "Justified",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 72,
"labelHeight": 26
},
"type": {
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0
},
"constraint": null,
"reference": ""
}
],
"label": "<<enumeration>>\nAlignment",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 189,
"labelHeight": 55,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
},
{
"id": "C",
"type": "class",
"pos": {
"x": 585,
"y": 25
},
"width": 254,
"height": 276,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": [
{
"name": "LeftAligned",
"type": "",
"visibility": "public"
},
{
"name": "CenterAligned",
"type": "",
"visibility": "public"
},
{
"name": "RightAligned",
"type": "",
"visibility": "public"
},
{
"name": "Justified",
"type": "",
"visibility": "public"
}
],
"methods": null,
"columns": null,
"label": "Alignment",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 130,
"labelHeight": 31,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
},
{
"id": "D",
"type": "class",
"pos": {
"x": 859,
"y": 12
},
"width": 254,
"height": 302,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N1",
"stroke": "N7",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": [
{
"name": "LeftAligned",
"type": "",
"visibility": "public"
},
{
"name": "CenterAligned",
"type": "",
"visibility": "public"
},
{
"name": "RightAligned",
"type": "",
"visibility": "public"
},
{
"name": "Justified",
"type": "",
"visibility": "public"
}
],
"methods": null,
"columns": null,
"label": "Alignment\nOf\nAlignment\nOf",
"fontSize": 20,
"fontFamily": "DEFAULT",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 130,
"labelHeight": 103,
"zIndex": 0,
"level": 1,
"primaryAccentColor": "B2",
"secondaryAccentColor": "AA2",
"neutralAccentColor": "N2"
}
],
"connections": [],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

102
e2etests/testdata/txtar/multiline-class-headers/elk/sketch.exp.svg vendored Normal file
View file

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

After

Width:  |  Height:  |  Size: 24 KiB

28
e2etests/txtar.txt
View file

@ -350,3 +350,31 @@ CD
Front-End.t1 -> Libreria.t1: generatePresentationPayload() Front-End.t1 -> Libreria.t1: generatePresentationPayload()
Libreria.t1 -> Libreria.t1: Generar y Firmar\nPrueba de TitularidadPrueba de TitularidadPrueba de TitularidadPrueba de Titularidad Libreria.t1 -> Libreria.t1: Generar y Firmar\nPrueba de TitularidadPrueba de TitularidadPrueba de TitularidadPrueba de Titularidad
Libreria.t1 -> Front-End.t1: Presentacion Firmada Libreria.t1 -> Front-End.t1: Presentacion Firmada
-- multiline-class-headers --
A: "<<enumeration>>\nAlignment"{
shape: class
LeftAligned
CenterAligned
RightAligned
Justified
}
C: "Alignment"{
shape: class
LeftAligned
CenterAligned
RightAligned
Justified
}
D: "Alignment\nOf\nAlignment\nOf"{
shape: class
LeftAligned
CenterAligned
RightAligned
Justified
}