diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md index 163ebafa99..2cd289bf0a 100644 --- a/ci/release/changelogs/next.md +++ b/ci/release/changelogs/next.md @@ -18,3 +18,4 @@ - Fixes error with an empty nested grid [#1594](https://github.com/terrastruct/d2/issues/1594) - Fixes incorrect `d2fmt` with variable substitution mid-string [#1611](https://github.com/terrastruct/d2/issues/1611) - Fixes dagre error with child named id [#1610](https://github.com/terrastruct/d2/issues/1610) +- Fixes font-size missing from rendered code shape [#1614](https://github.com/terrastruct/d2/issues/1614) diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index f4994f1377..f4d470998e 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -1267,7 +1267,13 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape if !isLight { class = "dark-code" } - fmt.Fprintf(writer, ``, box.TopLeft.X, box.TopLeft.Y, class) + var fontSize string + if targetShape.FontSize != d2fonts.FONT_SIZE_M { + fontSize = fmt.Sprintf(` style="font-size:%v"`, targetShape.FontSize) + } + fmt.Fprintf(writer, ``, + box.TopLeft.X, box.TopLeft.Y, class, fontSize, + ) rectEl := d2themes.NewThemableElement("rect") rectEl.Width = float64(targetShape.Width) rectEl.Height = float64(targetShape.Height) diff --git a/e2etests/regression_test.go b/e2etests/regression_test.go index ede9871219..6636773a68 100644 --- a/e2etests/regression_test.go +++ b/e2etests/regression_test.go @@ -1045,6 +1045,7 @@ cf many required: { loadFromFile(t, "arrowhead_font_color"), loadFromFile(t, "multiple_constant_nears"), loadFromFile(t, "empty_nested_grid"), + loadFromFile(t, "code_font_size"), } runa(t, tcs) diff --git a/e2etests/testdata/files/code_font_size.d2 b/e2etests/testdata/files/code_font_size.d2 new file mode 100644 index 0000000000..3e2d4dc0c1 --- /dev/null +++ b/e2etests/testdata/files/code_font_size.d2 @@ -0,0 +1,25 @@ +'Data' -- y +x -- 'Data' +'Data': { + style.fill: "#c8e9ad" + style.stroke: "#c8e9ad" + style.stroke-width: 15 + ex: |go + Testing 001: AAA + Testing 002: BBB + Testing 003: CCC + Testing 004: DDD + Testing 005: EEE + Testing 006: FFF + Testing 007: GGG + Testing 008: HHH + Testing 009: III + Testing 010: JJJ + Testing 011: KKK + Testing 012: LLL + Testing 013: MMM + Testing 014: NNN + Testing 015: OOO + | + ex.style.font-size: 10 +} diff --git a/e2etests/testdata/regression/code_font_size/dagre/board.exp.json b/e2etests/testdata/regression/code_font_size/dagre/board.exp.json new file mode 100644 index 0000000000..e05ad58d59 --- /dev/null +++ b/e2etests/testdata/regression/code_font_size/dagre/board.exp.json @@ -0,0 +1,306 @@ +{ + "name": "", + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "Data", + "type": "rectangle", + "pos": { + "x": 10, + "y": 186 + }, + "width": 208, + "height": 265, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 15, + "borderRadius": 0, + "fill": "#c8e9ad", + "stroke": "#c8e9ad", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Data", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 52, + "labelHeight": 36, + "labelPosition": "OUTSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "y", + "type": "rectangle", + "pos": { + "x": 87, + "y": 571 + }, + "width": 54, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "y", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 9, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "x", + "type": "rectangle", + "pos": { + "x": 88, + "y": 0 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "x", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "Data.ex", + "type": "code", + "pos": { + "x": 40, + "y": 216 + }, + "width": 148, + "height": 205, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "N7", + "stroke": "N1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Testing 001: AAA\nTesting 002: BBB\nTesting 003: CCC\nTesting 004: DDD\nTesting 005: EEE\nTesting 006: FFF\nTesting 007: GGG\nTesting 008: HHH\nTesting 009: III\nTesting 010: JJJ\nTesting 011: KKK\nTesting 012: LLL\nTesting 013: MMM\nTesting 014: NNN\nTesting 015: OOO", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "golang", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 138, + "labelHeight": 195, + "zIndex": 0, + "level": 2 + } + ], + "connections": [ + { + "id": "(Data -- y)[0]", + "src": "Data", + "srcArrow": "none", + "dst": "y", + "dstArrow": "none", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 114, + "y": 451 + }, + { + "x": 114, + "y": 507 + }, + { + "x": 114, + "y": 531 + }, + { + "x": 114, + "y": 571 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(x -- Data)[0]", + "src": "x", + "srcArrow": "none", + "dst": "Data", + "dstArrow": "none", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 114, + "y": 66 + }, + { + "x": 114, + "y": 106 + }, + { + "x": 114, + "y": 121.80000305175781 + }, + { + "x": 114, + "y": 145 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ], + "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 + } +} diff --git a/e2etests/testdata/regression/code_font_size/dagre/sketch.exp.svg b/e2etests/testdata/regression/code_font_size/dagre/sketch.exp.svg new file mode 100644 index 0000000000..b51896075d --- /dev/null +++ b/e2etests/testdata/regression/code_font_size/dagre/sketch.exp.svg @@ -0,0 +1,140 @@ +DatayxTesting 001:        AAA +Testing 002:        BBB +Testing 003:        CCC +Testing 004:        DDD +Testing 005:        EEE +Testing 006:        FFF +Testing 007:        GGG +Testing 008:        HHH +Testing 009:        III +Testing 010:        JJJ +Testing 011:        KKK +Testing 012:        LLL +Testing 013:        MMM +Testing 014:        NNN +Testing 015:        OOOTesting 001:        AAA +Testing 002:        BBB +Testing 003:        CCC +Testing 004:        DDD +Testing 005:        EEE +Testing 006:        FFF +Testing 007:        GGG +Testing 008:        HHH +Testing 009:        III +Testing 010:        JJJ +Testing 011:        KKK +Testing 012:        LLL +Testing 013:        MMM +Testing 014:        NNN +Testing 015:        OOO + + + + + + \ No newline at end of file diff --git a/e2etests/testdata/regression/code_font_size/elk/board.exp.json b/e2etests/testdata/regression/code_font_size/elk/board.exp.json new file mode 100644 index 0000000000..d8c2567aed --- /dev/null +++ b/e2etests/testdata/regression/code_font_size/elk/board.exp.json @@ -0,0 +1,288 @@ +{ + "name": "", + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "Data", + "type": "rectangle", + "pos": { + "x": 12, + "y": 148 + }, + "width": 248, + "height": 305, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 15, + "borderRadius": 0, + "fill": "#c8e9ad", + "stroke": "#c8e9ad", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Data", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 52, + "labelHeight": 36, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "y", + "type": "rectangle", + "pos": { + "x": 109, + "y": 523 + }, + "width": 54, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "y", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 9, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "x", + "type": "rectangle", + "pos": { + "x": 109, + "y": 12 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "x", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "Data.ex", + "type": "code", + "pos": { + "x": 62, + "y": 198 + }, + "width": 148, + "height": 205, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "N7", + "stroke": "N1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Testing 001: AAA\nTesting 002: BBB\nTesting 003: CCC\nTesting 004: DDD\nTesting 005: EEE\nTesting 006: FFF\nTesting 007: GGG\nTesting 008: HHH\nTesting 009: III\nTesting 010: JJJ\nTesting 011: KKK\nTesting 012: LLL\nTesting 013: MMM\nTesting 014: NNN\nTesting 015: OOO", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "golang", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 138, + "labelHeight": 195, + "zIndex": 0, + "level": 2 + } + ], + "connections": [ + { + "id": "(Data -- y)[0]", + "src": "Data", + "srcArrow": "none", + "dst": "y", + "dstArrow": "none", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 136, + "y": 453 + }, + { + "x": 136, + "y": 523 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(x -- Data)[0]", + "src": "x", + "srcArrow": "none", + "dst": "Data", + "dstArrow": "none", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 136, + "y": 78 + }, + { + "x": 136, + "y": 148 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ], + "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 + } +} diff --git a/e2etests/testdata/regression/code_font_size/elk/sketch.exp.svg b/e2etests/testdata/regression/code_font_size/elk/sketch.exp.svg new file mode 100644 index 0000000000..7231382d95 --- /dev/null +++ b/e2etests/testdata/regression/code_font_size/elk/sketch.exp.svg @@ -0,0 +1,140 @@ +DatayxTesting 001:        AAA +Testing 002:        BBB +Testing 003:        CCC +Testing 004:        DDD +Testing 005:        EEE +Testing 006:        FFF +Testing 007:        GGG +Testing 008:        HHH +Testing 009:        III +Testing 010:        JJJ +Testing 011:        KKK +Testing 012:        LLL +Testing 013:        MMM +Testing 014:        NNN +Testing 015:        OOOTesting 001:        AAA +Testing 002:        BBB +Testing 003:        CCC +Testing 004:        DDD +Testing 005:        EEE +Testing 006:        FFF +Testing 007:        GGG +Testing 008:        HHH +Testing 009:        III +Testing 010:        JJJ +Testing 011:        KKK +Testing 012:        LLL +Testing 013:        MMM +Testing 014:        NNN +Testing 015:        OOO + + + + + + \ No newline at end of file