From 51c03985e78b4d05c6bc1bff599364df98f1dd03 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Wed, 28 Dec 2022 22:51:16 -0800 Subject: [PATCH 1/4] add only_header_class_table regression test --- e2etests/regression_test.go | 20 ++ .../dagre/board.exp.json | 259 ++++++++++++++++++ .../dagre/sketch.exp.svg | 40 +++ .../elk/board.exp.json | 241 ++++++++++++++++ .../elk/sketch.exp.svg | 40 +++ 5 files changed, 600 insertions(+) create mode 100644 e2etests/testdata/regression/only_header_class_table/dagre/board.exp.json create mode 100644 e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg create mode 100644 e2etests/testdata/regression/only_header_class_table/elk/board.exp.json create mode 100644 e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg diff --git a/e2etests/regression_test.go b/e2etests/regression_test.go index a3698795b..aa8ca3b37 100644 --- a/e2etests/regression_test.go +++ b/e2etests/regression_test.go @@ -262,6 +262,26 @@ ico: { label: "" icon: https://icons.terrastruct.com/infra/019-network.svg } +`, + }, + { + name: "only_header_class_table", + script: ` + +class: RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer { + shape: class +} + +table: RefreshAuthorizationPolicyCache { + shape: sql_table +} + +table with short col: RefreshAuthorizationPolicyCache { + shape: sql_table + ok +} + +class -> table -> table with short col `, }, } diff --git a/e2etests/testdata/regression/only_header_class_table/dagre/board.exp.json b/e2etests/testdata/regression/only_header_class_table/dagre/board.exp.json new file mode 100644 index 000000000..2b2cfb0cc --- /dev/null +++ b/e2etests/testdata/regression/only_header_class_table/dagre/board.exp.json @@ -0,0 +1,259 @@ +{ + "name": "", + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "class", + "type": "class", + "pos": { + "x": 0, + "y": 0 + }, + "width": 1082, + "height": 36, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#0A0F25", + "stroke": "#FFFFFF", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer", + "fontSize": 20, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 982, + "labelHeight": 36, + "zIndex": 0, + "level": 1, + "primaryAccentColor": "#0D32B2", + "secondaryAccentColor": "#4A6FF3", + "neutralAccentColor": "#676C7E" + }, + { + "id": "table", + "type": "sql_table", + "pos": { + "x": 516, + "y": 136 + }, + "width": 50, + "height": 36, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#0A0F25", + "stroke": "#FFFFFF", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "RefreshAuthorizationPolicyCache", + "fontSize": 20, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 361, + "labelHeight": 36, + "zIndex": 0, + "level": 1, + "primaryAccentColor": "#0D32B2", + "secondaryAccentColor": "#4A6FF3", + "neutralAccentColor": "#676C7E" + }, + { + "id": "table with short col", + "type": "sql_table", + "pos": { + "x": 506, + "y": 272 + }, + "width": 71, + "height": 72, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#0A0F25", + "stroke": "#FFFFFF", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": [ + { + "name": { + "label": "ok", + "fontSize": 0, + "fontFamily": "", + "language": "", + "color": "", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 21, + "labelHeight": 26 + }, + "type": { + "label": "", + "fontSize": 0, + "fontFamily": "", + "language": "", + "color": "", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0 + }, + "constraint": "", + "reference": "" + } + ], + "label": "RefreshAuthorizationPolicyCache", + "fontSize": 20, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 361, + "labelHeight": 36, + "zIndex": 0, + "level": 1, + "primaryAccentColor": "#0D32B2", + "secondaryAccentColor": "#4A6FF3", + "neutralAccentColor": "#676C7E" + } + ], + "connections": [ + { + "id": "(class -> table)[0]", + "src": "class", + "srcArrow": "none", + "srcLabel": "", + "dst": "table", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 541, + "y": 36 + }, + { + "x": 541, + "y": 76 + }, + { + "x": 541, + "y": 96 + }, + { + "x": 541, + "y": 136 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(table -> table with short col)[0]", + "src": "table", + "srcArrow": "none", + "srcLabel": "", + "dst": "table with short col", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 541, + "y": 172 + }, + { + "x": 541, + "y": 212 + }, + { + "x": 541, + "y": 232 + }, + { + "x": 541, + "y": 272 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ] +} diff --git a/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg b/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg new file mode 100644 index 000000000..8fe8b6bc4 --- /dev/null +++ b/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg @@ -0,0 +1,40 @@ + +RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBufferRefreshAuthorizationPolicyCacheRefreshAuthorizationPolicyCacheok + + + + + \ No newline at end of file diff --git a/e2etests/testdata/regression/only_header_class_table/elk/board.exp.json b/e2etests/testdata/regression/only_header_class_table/elk/board.exp.json new file mode 100644 index 000000000..142ca5423 --- /dev/null +++ b/e2etests/testdata/regression/only_header_class_table/elk/board.exp.json @@ -0,0 +1,241 @@ +{ + "name": "", + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "class", + "type": "class", + "pos": { + "x": 12, + "y": 12 + }, + "width": 1082, + "height": 36, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#0A0F25", + "stroke": "#FFFFFF", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBuffer", + "fontSize": 20, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 982, + "labelHeight": 36, + "zIndex": 0, + "level": 1, + "primaryAccentColor": "#0D32B2", + "secondaryAccentColor": "#4A6FF3", + "neutralAccentColor": "#676C7E" + }, + { + "id": "table", + "type": "sql_table", + "pos": { + "x": 528, + "y": 148 + }, + "width": 50, + "height": 36, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#0A0F25", + "stroke": "#FFFFFF", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "RefreshAuthorizationPolicyCache", + "fontSize": 20, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 361, + "labelHeight": 36, + "zIndex": 0, + "level": 1, + "primaryAccentColor": "#0D32B2", + "secondaryAccentColor": "#4A6FF3", + "neutralAccentColor": "#676C7E" + }, + { + "id": "table with short col", + "type": "sql_table", + "pos": { + "x": 517, + "y": 284 + }, + "width": 71, + "height": 72, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#0A0F25", + "stroke": "#FFFFFF", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": [ + { + "name": { + "label": "ok", + "fontSize": 0, + "fontFamily": "", + "language": "", + "color": "", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 21, + "labelHeight": 26 + }, + "type": { + "label": "", + "fontSize": 0, + "fontFamily": "", + "language": "", + "color": "", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0 + }, + "constraint": "", + "reference": "" + } + ], + "label": "RefreshAuthorizationPolicyCache", + "fontSize": 20, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 361, + "labelHeight": 36, + "zIndex": 0, + "level": 1, + "primaryAccentColor": "#0D32B2", + "secondaryAccentColor": "#4A6FF3", + "neutralAccentColor": "#676C7E" + } + ], + "connections": [ + { + "id": "(class -> table)[0]", + "src": "class", + "srcArrow": "none", + "srcLabel": "", + "dst": "table", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 553, + "y": 48 + }, + { + "x": 553, + "y": 148 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(table -> table with short col)[0]", + "src": "table", + "srcArrow": "none", + "srcLabel": "", + "dst": "table with short col", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 553, + "y": 184 + }, + { + "x": 553, + "y": 284 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ] +} diff --git a/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg b/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg new file mode 100644 index 000000000..1c0e13989 --- /dev/null +++ b/e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg @@ -0,0 +1,40 @@ + +RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBufferRefreshAuthorizationPolicyCacheRefreshAuthorizationPolicyCacheok + + + + + \ No newline at end of file From 8b814286939ee3120406e1447a986c028006e367 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Wed, 28 Dec 2022 23:15:16 -0800 Subject: [PATCH 2/4] use header width for sql_tables if larger than row width --- d2graph/d2graph.go | 4 +++- d2renderers/d2svg/table.go | 4 ++-- d2target/sqltable.go | 5 +++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/d2graph/d2graph.go b/d2graph/d2graph.go index 7bc38cfa7..7bd59ec6a 100644 --- a/d2graph/d2graph.go +++ b/d2graph/d2graph.go @@ -805,7 +805,9 @@ func (obj *Object) GetDefaultSize(mtexts []*d2target.MText, ruler *textmeasure.R // The rows get padded a little due to header font being larger than row font dims.Height = labelDims.Height * (len(obj.SQLTable.Columns) + 1) - dims.Width = d2target.NamePadding + maxNameWidth + d2target.TypePadding + maxTypeWidth + d2target.TypePadding + constraintWidth + headerWidth := d2target.HeaderPadding + labelDims.Width + d2target.HeaderPadding + rowsWidth := d2target.NamePadding + maxNameWidth + d2target.TypePadding + maxTypeWidth + d2target.TypePadding + constraintWidth + dims.Width = go2.Max(headerWidth, rowsWidth) } return &dims, nil diff --git a/d2renderers/d2svg/table.go b/d2renderers/d2svg/table.go index 9ec48e0a9..46bdef37c 100644 --- a/d2renderers/d2svg/table.go +++ b/d2renderers/d2svg/table.go @@ -19,8 +19,8 @@ func tableHeader(shape d2target.Shape, box *geo.Box, text string, textWidth, tex if text != "" { tl := label.InsideMiddleLeft.GetPointOnBox( box, - 20, - textWidth, + float64(d2target.HeaderPadding), + float64(shape.Width), textHeight, ) diff --git a/d2target/sqltable.go b/d2target/sqltable.go index f19f2a94b..8332a34c8 100644 --- a/d2target/sqltable.go +++ b/d2target/sqltable.go @@ -3,8 +3,9 @@ package d2target import "oss.terrastruct.com/d2/d2renderers/d2fonts" const ( - NamePadding = 10 - TypePadding = 20 + NamePadding = 10 + TypePadding = 20 + HeaderPadding = 20 ) type SQLTable struct { From 6489f05e81edcf5a0cc2269f8388c70879bedb2e Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Wed, 28 Dec 2022 23:25:49 -0800 Subject: [PATCH 3/4] update tests --- .../only_header_class_table/dagre/board.exp.json | 8 ++++---- .../only_header_class_table/dagre/sketch.exp.svg | 6 +++--- .../regression/only_header_class_table/elk/board.exp.json | 8 ++++---- .../regression/only_header_class_table/elk/sketch.exp.svg | 6 +++--- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/e2etests/testdata/regression/only_header_class_table/dagre/board.exp.json b/e2etests/testdata/regression/only_header_class_table/dagre/board.exp.json index 2b2cfb0cc..c35935f77 100644 --- a/e2etests/testdata/regression/only_header_class_table/dagre/board.exp.json +++ b/e2etests/testdata/regression/only_header_class_table/dagre/board.exp.json @@ -48,10 +48,10 @@ "id": "table", "type": "sql_table", "pos": { - "x": 516, + "x": 341, "y": 136 }, - "width": 50, + "width": 401, "height": 36, "opacity": 1, "strokeDash": 0, @@ -90,10 +90,10 @@ "id": "table with short col", "type": "sql_table", "pos": { - "x": 506, + "x": 341, "y": 272 }, - "width": 71, + "width": 401, "height": 72, "opacity": 1, "strokeDash": 0, diff --git a/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg b/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg index 8fe8b6bc4..f4ee758ba 100644 --- a/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg +++ b/e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg @@ -18,9 +18,9 @@ width="1282" height="544" viewBox="-100 -100 1282 544">RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBufferRefreshAuthorizationPolicyCacheRefreshAuthorizationPolicyCacheok - - +RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBufferRefreshAuthorizationPolicyCacheRefreshAuthorizationPolicyCacheok + + RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBufferRefreshAuthorizationPolicyCacheRefreshAuthorizationPolicyCacheok - - +RefreshAuthorizationPolicyProtocolServerSideTranslatorProtocolBufferRefreshAuthorizationPolicyCacheRefreshAuthorizationPolicyCacheok + +