From 8705212a95d30f215697cc9dd512718607a257a7 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 29 Nov 2022 11:11:05 -0800 Subject: [PATCH 1/7] add font_sizes test --- e2etests/stable_test.go | 28 + .../stable/font_sizes/dagre/board.exp.json | 604 ++++++++++++++++++ .../stable/font_sizes/dagre/sketch.exp.svg | 40 ++ .../stable/font_sizes/elk/board.exp.json | 577 +++++++++++++++++ .../stable/font_sizes/elk/sketch.exp.svg | 40 ++ 5 files changed, 1289 insertions(+) create mode 100644 e2etests/testdata/stable/font_sizes/dagre/board.exp.json create mode 100644 e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg create mode 100644 e2etests/testdata/stable/font_sizes/elk/board.exp.json create mode 100644 e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg diff --git a/e2etests/stable_test.go b/e2etests/stable_test.go index 02b66f0a3..f75a8d6e3 100644 --- a/e2etests/stable_test.go +++ b/e2etests/stable_test.go @@ -1014,6 +1014,34 @@ cube: { stroke-width: 7 } } +`, + }, + { + name: "font_sizes", + script: ` +size XS.style.font-size: 13 +size S.style.font-size: 14 +size M.style.font-size: 16 +size L.style.font-size: 20 +size XL.style.font-size: 24 +size XXL.style.font-size: 28 +size XXXL.style.font-size: 32 + +custom 8.style.font-size: 8 +custom 12.style.font-size: 12 +custom 18.style.font-size: 18 +custom 21.style.font-size: 21 +custom 64.style.font-size: 64 + +custom 8 -> size XS: custom 10 { + style.font-size: 10 +} +size S -> size M: custom 15 { + style.font-size: 15 +} +size XXXL -> custom 64: custom 48 { + style.font-size: 48 +} `, }, } diff --git a/e2etests/testdata/stable/font_sizes/dagre/board.exp.json b/e2etests/testdata/stable/font_sizes/dagre/board.exp.json new file mode 100644 index 000000000..8eeb1f17e --- /dev/null +++ b/e2etests/testdata/stable/font_sizes/dagre/board.exp.json @@ -0,0 +1,604 @@ +{ + "name": "", + "shapes": [ + { + "id": "size XS", + "type": "", + "pos": { + "x": 1084, + "y": 226 + }, + "width": 154, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size XS", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 54, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size S", + "type": "", + "pos": { + "x": 1, + "y": 0 + }, + "width": 145, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size S", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 45, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size M", + "type": "", + "pos": { + "x": 0, + "y": 226 + }, + "width": 147, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size M", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 47, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size L", + "type": "", + "pos": { + "x": 206, + "y": 0 + }, + "width": 144, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size L", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 44, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size XL", + "type": "", + "pos": { + "x": 410, + "y": 0 + }, + "width": 153, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size XL", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 53, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size XXL", + "type": "", + "pos": { + "x": 623, + "y": 0 + }, + "width": 162, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size XXL", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 62, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size XXXL", + "type": "", + "pos": { + "x": 845, + "y": 0 + }, + "width": 171, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size XXXL", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 71, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "custom 8", + "type": "", + "pos": { + "x": 1076, + "y": 0 + }, + "width": 169, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "custom 8", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 69, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "custom 12", + "type": "", + "pos": { + "x": 1305, + "y": 0 + }, + "width": 178, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "custom 12", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 78, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "custom 18", + "type": "", + "pos": { + "x": 1543, + "y": 0 + }, + "width": 178, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "custom 18", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 78, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "custom 21", + "type": "", + "pos": { + "x": 1781, + "y": 0 + }, + "width": 178, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "custom 21", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 78, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "custom 64", + "type": "", + "pos": { + "x": 841, + "y": 226 + }, + "width": 179, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "custom 64", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 79, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + } + ], + "connections": [ + { + "id": "(custom 8 -> size XS)[0]", + "src": "custom 8", + "srcArrow": "none", + "srcLabel": "", + "dst": "size XS", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "custom 10", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 67, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 1160.5, + "y": 126 + }, + { + "x": 1160.5, + "y": 166 + }, + { + "x": 1160.5, + "y": 186 + }, + { + "x": 1160.5, + "y": 226 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(size S -> size M)[0]", + "src": "size S", + "srcArrow": "none", + "srcLabel": "", + "dst": "size M", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "custom 15", + "fontSize": 15, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 67, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 73.5, + "y": 126 + }, + { + "x": 73.5, + "y": 166 + }, + { + "x": 73.5, + "y": 186 + }, + { + "x": 73.5, + "y": 226 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(size XXXL -> custom 64)[0]", + "src": "size XXXL", + "srcArrow": "none", + "srcLabel": "", + "dst": "custom 64", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "custom 48", + "fontSize": 48, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 67, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 930.5, + "y": 126 + }, + { + "x": 930.5, + "y": 166 + }, + { + "x": 930.5, + "y": 186 + }, + { + "x": 930.5, + "y": 226 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + } + ] +} diff --git a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg new file mode 100644 index 000000000..763a935c3 --- /dev/null +++ b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg @@ -0,0 +1,40 @@ + +size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 + + +custom 10 + + +custom 15 + + +custom 48 \ No newline at end of file diff --git a/e2etests/testdata/stable/font_sizes/elk/board.exp.json b/e2etests/testdata/stable/font_sizes/elk/board.exp.json new file mode 100644 index 000000000..ed0b2abdb --- /dev/null +++ b/e2etests/testdata/stable/font_sizes/elk/board.exp.json @@ -0,0 +1,577 @@ +{ + "name": "", + "shapes": [ + { + "id": "size XS", + "type": "", + "pos": { + "x": 1324, + "y": 359 + }, + "width": 154, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size XS", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 54, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size S", + "type": "", + "pos": { + "x": 1505, + "y": 12 + }, + "width": 145, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size S", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 45, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size M", + "type": "", + "pos": { + "x": 1504, + "y": 359 + }, + "width": 147, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size M", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 47, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size L", + "type": "", + "pos": { + "x": 954, + "y": 12 + }, + "width": 144, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size L", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 44, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size XL", + "type": "", + "pos": { + "x": 12, + "y": 12 + }, + "width": 153, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size XL", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 53, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size XXL", + "type": "", + "pos": { + "x": 383, + "y": 12 + }, + "width": 162, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size XXL", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 62, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "size XXXL", + "type": "", + "pos": { + "x": 565, + "y": 12 + }, + "width": 171, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "size XXXL", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 71, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "custom 8", + "type": "", + "pos": { + "x": 1316, + "y": 12 + }, + "width": 169, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "custom 8", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 69, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "custom 12", + "type": "", + "pos": { + "x": 1118, + "y": 12 + }, + "width": 178, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "custom 12", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 78, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "custom 18", + "type": "", + "pos": { + "x": 756, + "y": 12 + }, + "width": 178, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "custom 18", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 78, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "custom 21", + "type": "", + "pos": { + "x": 185, + "y": 12 + }, + "width": 178, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "custom 21", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 78, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "custom 64", + "type": "", + "pos": { + "x": 561, + "y": 359 + }, + "width": 179, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "custom 64", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 79, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + } + ], + "connections": [ + { + "id": "(custom 8 -> size XS)[0]", + "src": "custom 8", + "srcArrow": "none", + "srcLabel": "", + "dst": "size XS", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "custom 10", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 67, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 1400.5, + "y": 138 + }, + { + "x": 1400.5, + "y": 359 + } + ], + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(size S -> size M)[0]", + "src": "size S", + "srcArrow": "none", + "srcLabel": "", + "dst": "size M", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "custom 15", + "fontSize": 15, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 67, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 1577.5, + "y": 138 + }, + { + "x": 1577.5, + "y": 359 + } + ], + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(size XXXL -> custom 64)[0]", + "src": "size XXXL", + "srcArrow": "none", + "srcLabel": "", + "dst": "custom 64", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "custom 48", + "fontSize": 48, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 67, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 650.5, + "y": 138 + }, + { + "x": 650.5, + "y": 359 + } + ], + "animated": false, + "tooltip": "", + "icon": null + } + ] +} diff --git a/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg new file mode 100644 index 000000000..e64669212 --- /dev/null +++ b/e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg @@ -0,0 +1,40 @@ + +size XSsize Ssize Msize Lsize XLsize XXLsize XXXLcustom 8custom 12custom 18custom 21custom 64 + + +custom 10 + + +custom 15 + + +custom 48 \ No newline at end of file From 53cfa31ee19a98a7f99c777da164f84fc89a6ac3 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 29 Nov 2022 11:27:41 -0800 Subject: [PATCH 2/7] render all font sizes in range --- d2graph/d2graph.go | 9 +- d2renderers/textmeasure/textmeasure.go | 29 ++- .../stable/font_sizes/dagre/board.exp.json | 208 +++++++++--------- .../stable/font_sizes/dagre/sketch.exp.svg | 22 +- .../stable/font_sizes/elk/board.exp.json | 190 ++++++++-------- .../stable/font_sizes/elk/sketch.exp.svg | 22 +- 6 files changed, 257 insertions(+), 223 deletions(-) diff --git a/d2graph/d2graph.go b/d2graph/d2graph.go index 7bc2ba1cc..a1be0ebb2 100644 --- a/d2graph/d2graph.go +++ b/d2graph/d2graph.go @@ -415,6 +415,9 @@ func (obj *Object) Text() *d2target.MText { if obj.IsContainer() { fontSize = obj.Level().LabelSize() } + if obj.Attributes.Style.FontSize != nil { + fontSize, _ = strconv.Atoi(obj.Attributes.Style.FontSize.Value) + } // Class and Table objects have Label set to header if obj.Class != nil || obj.SQLTable != nil { fontSize = d2fonts.FONT_SIZE_XL @@ -662,9 +665,13 @@ func (e *Edge) ArrowString() string { } func (e *Edge) Text() *d2target.MText { + fontSize := d2fonts.FONT_SIZE_M + if e.Attributes.Style.FontSize != nil { + fontSize, _ = strconv.Atoi(e.Attributes.Style.FontSize.Value) + } return &d2target.MText{ Text: e.Attributes.Label.Value, - FontSize: d2fonts.FONT_SIZE_M, + FontSize: fontSize, IsBold: false, IsItalic: true, diff --git a/d2renderers/textmeasure/textmeasure.go b/d2renderers/textmeasure/textmeasure.go index 4a96c0c3a..5b9cb5bb4 100644 --- a/d2renderers/textmeasure/textmeasure.go +++ b/d2renderers/textmeasure/textmeasure.go @@ -143,7 +143,34 @@ func NewRuler() (*Ruler, error) { } func (t *Ruler) Measure(font d2fonts.Font, s string) (width, height int) { - w, h := t.MeasurePrecise(font, s) + hasSize := false + for _, size := range d2fonts.FontSizes { + if size == font.Size { + hasSize = true + break + } + } + var w, h float64 + if hasSize { + w, h = t.MeasurePrecise(font, s) + } else { + // find the closest font size we have and scale the measurement + closestSize := d2fonts.FontSizes[0] + smallestDiff := math.Abs(float64(closestSize - font.Size)) + for i := 1; i < len(d2fonts.FontSizes); i++ { + diff := math.Abs(float64(d2fonts.FontSizes[i] - font.Size)) + if diff < smallestDiff { + smallestDiff = diff + closestSize = d2fonts.FontSizes[i] + } + } + scaledFont := font + scaledFont.Size = closestSize + w, h = t.MeasurePrecise(scaledFont, s) + f := float64(font.Size) / float64(closestSize) + w *= f + h *= f + } return int(math.Ceil(w)), int(math.Ceil(h)) } diff --git a/e2etests/testdata/stable/font_sizes/dagre/board.exp.json b/e2etests/testdata/stable/font_sizes/dagre/board.exp.json index 8eeb1f17e..4137c5d24 100644 --- a/e2etests/testdata/stable/font_sizes/dagre/board.exp.json +++ b/e2etests/testdata/stable/font_sizes/dagre/board.exp.json @@ -5,11 +5,11 @@ "id": "size XS", "type": "", "pos": { - "x": 1084, - "y": 226 + "x": 1293, + "y": 278 }, - "width": 154, - "height": 126, + "width": 145, + "height": 122, "level": 1, "opacity": 1, "strokeDash": 0, @@ -28,26 +28,26 @@ "methods": null, "columns": null, "label": "size XS", - "fontSize": 16, + "fontSize": 13, "fontFamily": "DEFAULT", "language": "", "color": "#0A0F25", "italic": false, "bold": true, "underline": false, - "labelWidth": 54, - "labelHeight": 26, + "labelWidth": 45, + "labelHeight": 22, "labelPosition": "INSIDE_MIDDLE_CENTER" }, { "id": "size S", "type": "", "pos": { - "x": 1, - "y": 0 + "x": 4, + "y": 12 }, - "width": 145, - "height": 126, + "width": 140, + "height": 123, "level": 1, "opacity": 1, "strokeDash": 0, @@ -66,15 +66,15 @@ "methods": null, "columns": null, "label": "size S", - "fontSize": 16, + "fontSize": 14, "fontFamily": "DEFAULT", "language": "", "color": "#0A0F25", "italic": false, "bold": true, "underline": false, - "labelWidth": 45, - "labelHeight": 26, + "labelWidth": 40, + "labelHeight": 23, "labelPosition": "INSIDE_MIDDLE_CENTER" }, { @@ -82,7 +82,7 @@ "type": "", "pos": { "x": 0, - "y": 226 + "y": 276 }, "width": 147, "height": 126, @@ -119,11 +119,11 @@ "id": "size L", "type": "", "pos": { - "x": 206, - "y": 0 + "x": 204, + "y": 8 }, - "width": 144, - "height": 126, + "width": 153, + "height": 131, "level": 1, "opacity": 1, "strokeDash": 0, @@ -142,26 +142,26 @@ "methods": null, "columns": null, "label": "size L", - "fontSize": 16, + "fontSize": 20, "fontFamily": "DEFAULT", "language": "", "color": "#0A0F25", "italic": false, "bold": true, "underline": false, - "labelWidth": 44, - "labelHeight": 26, + "labelWidth": 53, + "labelHeight": 31, "labelPosition": "INSIDE_MIDDLE_CENTER" }, { "id": "size XL", "type": "", "pos": { - "x": 410, - "y": 0 + "x": 417, + "y": 5 }, - "width": 153, - "height": 126, + "width": 177, + "height": 136, "level": 1, "opacity": 1, "strokeDash": 0, @@ -180,26 +180,26 @@ "methods": null, "columns": null, "label": "size XL", - "fontSize": 16, + "fontSize": 24, "fontFamily": "DEFAULT", "language": "", "color": "#0A0F25", "italic": false, "bold": true, "underline": false, - "labelWidth": 53, - "labelHeight": 26, + "labelWidth": 77, + "labelHeight": 36, "labelPosition": "INSIDE_MIDDLE_CENTER" }, { "id": "size XXL", "type": "", "pos": { - "x": 623, - "y": 0 + "x": 654, + "y": 3 }, - "width": 162, - "height": 126, + "width": 204, + "height": 141, "level": 1, "opacity": 1, "strokeDash": 0, @@ -218,26 +218,26 @@ "methods": null, "columns": null, "label": "size XXL", - "fontSize": 16, + "fontSize": 28, "fontFamily": "DEFAULT", "language": "", "color": "#0A0F25", "italic": false, "bold": true, "underline": false, - "labelWidth": 62, - "labelHeight": 26, + "labelWidth": 104, + "labelHeight": 41, "labelPosition": "INSIDE_MIDDLE_CENTER" }, { "id": "size XXXL", "type": "", "pos": { - "x": 845, + "x": 918, "y": 0 }, - "width": 171, - "height": 126, + "width": 237, + "height": 146, "level": 1, "opacity": 1, "strokeDash": 0, @@ -256,26 +256,26 @@ "methods": null, "columns": null, "label": "size XXXL", - "fontSize": 16, + "fontSize": 32, "fontFamily": "DEFAULT", "language": "", "color": "#0A0F25", "italic": false, "bold": true, "underline": false, - "labelWidth": 71, - "labelHeight": 26, + "labelWidth": 137, + "labelHeight": 46, "labelPosition": "INSIDE_MIDDLE_CENTER" }, { "id": "custom 8", "type": "", "pos": { - "x": 1076, - "y": 0 + "x": 1297, + "y": 15 }, - "width": 169, - "height": 126, + "width": 138, + "height": 116, "level": 1, "opacity": 1, "strokeDash": 0, @@ -294,26 +294,26 @@ "methods": null, "columns": null, "label": "custom 8", - "fontSize": 16, + "fontSize": 8, "fontFamily": "DEFAULT", "language": "", "color": "#0A0F25", "italic": false, "bold": true, "underline": false, - "labelWidth": 69, - "labelHeight": 26, + "labelWidth": 38, + "labelHeight": 16, "labelPosition": "INSIDE_MIDDLE_CENTER" }, { "id": "custom 12", "type": "", "pos": { - "x": 1305, - "y": 0 + "x": 1495, + "y": 13 }, - "width": 178, - "height": 126, + "width": 160, + "height": 121, "level": 1, "opacity": 1, "strokeDash": 0, @@ -332,26 +332,26 @@ "methods": null, "columns": null, "label": "custom 12", - "fontSize": 16, + "fontSize": 12, "fontFamily": "DEFAULT", "language": "", "color": "#0A0F25", "italic": false, "bold": true, "underline": false, - "labelWidth": 78, - "labelHeight": 26, + "labelWidth": 60, + "labelHeight": 21, "labelPosition": "INSIDE_MIDDLE_CENTER" }, { "id": "custom 18", "type": "", "pos": { - "x": 1543, - "y": 0 + "x": 1715, + "y": 9 }, - "width": 178, - "height": 126, + "width": 187, + "height": 128, "level": 1, "opacity": 1, "strokeDash": 0, @@ -370,26 +370,26 @@ "methods": null, "columns": null, "label": "custom 18", - "fontSize": 16, + "fontSize": 18, "fontFamily": "DEFAULT", "language": "", "color": "#0A0F25", "italic": false, "bold": true, "underline": false, - "labelWidth": 78, - "labelHeight": 26, + "labelWidth": 87, + "labelHeight": 28, "labelPosition": "INSIDE_MIDDLE_CENTER" }, { "id": "custom 21", "type": "", "pos": { - "x": 1781, - "y": 0 + "x": 1962, + "y": 7 }, - "width": 178, - "height": 126, + "width": 200, + "height": 132, "level": 1, "opacity": 1, "strokeDash": 0, @@ -408,26 +408,26 @@ "methods": null, "columns": null, "label": "custom 21", - "fontSize": 16, + "fontSize": 21, "fontFamily": "DEFAULT", "language": "", "color": "#0A0F25", "italic": false, "bold": true, "underline": false, - "labelWidth": 78, - "labelHeight": 26, + "labelWidth": 100, + "labelHeight": 32, "labelPosition": "INSIDE_MIDDLE_CENTER" }, { "id": "custom 64", "type": "", "pos": { - "x": 841, - "y": 226 + "x": 839, + "y": 246 }, - "width": 179, - "height": 126, + "width": 394, + "height": 186, "level": 1, "opacity": 1, "strokeDash": 0, @@ -446,15 +446,15 @@ "methods": null, "columns": null, "label": "custom 64", - "fontSize": 16, + "fontSize": 64, "fontFamily": "DEFAULT", "language": "", "color": "#0A0F25", "italic": false, "bold": true, "underline": false, - "labelWidth": 79, - "labelHeight": 26, + "labelWidth": 294, + "labelHeight": 86, "labelPosition": "INSIDE_MIDDLE_CENTER" } ], @@ -479,26 +479,26 @@ "italic": true, "bold": false, "underline": false, - "labelWidth": 67, - "labelHeight": 21, + "labelWidth": 42, + "labelHeight": 13, "labelPosition": "INSIDE_MIDDLE_CENTER", "labelPercentage": 0, "route": [ { - "x": 1160.5, - "y": 126 + "x": 1365.5, + "y": 131 }, { - "x": 1160.5, - "y": 166 + "x": 1365.5, + "y": 183 }, { - "x": 1160.5, - "y": 186 + "x": 1365.5, + "y": 212.4 }, { - "x": 1160.5, - "y": 226 + "x": 1365.5, + "y": 278 } ], "isCurve": true, @@ -526,26 +526,26 @@ "italic": true, "bold": false, "underline": false, - "labelWidth": 67, - "labelHeight": 21, + "labelWidth": 63, + "labelHeight": 19, "labelPosition": "INSIDE_MIDDLE_CENTER", "labelPercentage": 0, "route": [ { "x": 73.5, - "y": 126 + "y": 135.5 }, { "x": 73.5, - "y": 166 + "y": 183.9 }, { "x": 73.5, - "y": 186 + "y": 212 }, { "x": 73.5, - "y": 226 + "y": 276 } ], "isCurve": true, @@ -573,26 +573,26 @@ "italic": true, "bold": false, "underline": false, - "labelWidth": 67, - "labelHeight": 21, + "labelWidth": 200, + "labelHeight": 61, "labelPosition": "INSIDE_MIDDLE_CENTER", "labelPercentage": 0, "route": [ { - "x": 930.5, - "y": 126 + "x": 1036, + "y": 146 }, { - "x": 930.5, - "y": 166 - }, - { - "x": 930.5, + "x": 1036, "y": 186 }, { - "x": 930.5, - "y": 226 + "x": 1036, + "y": 206 + }, + { + "x": 1036, + "y": 246 } ], "isCurve": true, diff --git a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg index 763a935c3..d68a51a79 100644 --- a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg @@ -2,7 +2,7 @@ \ No newline at end of file diff --git a/e2etests/testdata/todo/font_sizes_containers_large/elk/board.exp.json b/e2etests/testdata/todo/font_sizes_containers_large/elk/board.exp.json new file mode 100644 index 000000000..307837e98 --- /dev/null +++ b/e2etests/testdata/todo/font_sizes_containers_large/elk/board.exp.json @@ -0,0 +1,196 @@ +{ + "name": "", + "shapes": [ + { + "id": "ninety nine", + "type": "", + "pos": { + "x": 12, + "y": 12 + }, + "width": 724, + "height": 716, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#E3E9FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "ninety nine", + "fontSize": 99, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 460, + "labelHeight": 130, + "labelPosition": "INSIDE_TOP_CENTER" + }, + { + "id": "ninety nine.sixty four", + "type": "", + "pos": { + "x": 87, + "y": 87 + }, + "width": 574, + "height": 566, + "level": 2, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "sixty four", + "fontSize": 64, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 253, + "labelHeight": 86, + "labelPosition": "INSIDE_TOP_CENTER" + }, + { + "id": "ninety nine.sixty four.thirty two", + "type": "", + "pos": { + "x": 162, + "y": 162 + }, + "width": 424, + "height": 416, + "level": 3, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "thirty two", + "fontSize": 32, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 135, + "labelHeight": 46, + "labelPosition": "INSIDE_TOP_CENTER" + }, + { + "id": "ninety nine.sixty four.thirty two.sixteen", + "type": "", + "pos": { + "x": 237, + "y": 237 + }, + "width": 274, + "height": 266, + "level": 4, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#FFFFFF", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "sixteen", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 53, + "labelHeight": 26, + "labelPosition": "INSIDE_TOP_CENTER" + }, + { + "id": "ninety nine.sixty four.thirty two.sixteen.eight", + "type": "", + "pos": { + "x": 312, + "y": 312 + }, + "width": 124, + "height": 116, + "level": 5, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#FFFFFF", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "eight", + "fontSize": 8, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 24, + "labelHeight": 16, + "labelPosition": "INSIDE_MIDDLE_CENTER" + } + ], + "connections": [] +} diff --git a/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg new file mode 100644 index 000000000..39dd19532 --- /dev/null +++ b/e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg @@ -0,0 +1,24 @@ + +ninety ninesixty fourthirty twosixteeneight \ No newline at end of file diff --git a/e2etests/testdata/todo/font_sizes_large/dagre/board.exp.json b/e2etests/testdata/todo/font_sizes_large/dagre/board.exp.json new file mode 100644 index 000000000..982458dc1 --- /dev/null +++ b/e2etests/testdata/todo/font_sizes_large/dagre/board.exp.json @@ -0,0 +1,385 @@ +{ + "name": "", + "shapes": [ + { + "id": "eight", + "type": "", + "pos": { + "x": 233, + "y": 0 + }, + "width": 124, + "height": 116, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "eight", + "fontSize": 8, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 24, + "labelHeight": 16, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "sixteen", + "type": "", + "pos": { + "x": 217, + "y": 216 + }, + "width": 157, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "sixteen", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 57, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "thirty two", + "type": "", + "pos": { + "x": 172, + "y": 442 + }, + "width": 247, + "height": 146, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "thirty two", + "fontSize": 32, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 147, + "labelHeight": 46, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "sixty four", + "type": "", + "pos": { + "x": 108, + "y": 688 + }, + "width": 375, + "height": 186, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "sixty four", + "fontSize": 64, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 275, + "labelHeight": 86, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "ninety nine", + "type": "", + "pos": { + "x": 0, + "y": 974 + }, + "width": 590, + "height": 230, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "ninety nine", + "fontSize": 99, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 490, + "labelHeight": 130, + "labelPosition": "INSIDE_MIDDLE_CENTER" + } + ], + "connections": [ + { + "id": "(eight -> sixteen)[0]", + "src": "eight", + "srcArrow": "none", + "srcLabel": "", + "dst": "sixteen", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "twelve", + "fontSize": 12, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 33, + "labelHeight": 16, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 295, + "y": 116 + }, + { + "x": 295, + "y": 156 + }, + { + "x": 295, + "y": 176 + }, + { + "x": 295, + "y": 216 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(sixteen -> thirty two)[0]", + "src": "sixteen", + "srcArrow": "none", + "srcLabel": "", + "dst": "thirty two", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "twenty four", + "fontSize": 24, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 114, + "labelHeight": 31, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 295, + "y": 342 + }, + { + "x": 295, + "y": 382 + }, + { + "x": 295, + "y": 402 + }, + { + "x": 295, + "y": 442 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(thirty two -> sixty four)[0]", + "src": "thirty two", + "srcArrow": "none", + "srcLabel": "", + "dst": "sixty four", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "forty eight", + "fontSize": 48, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 203, + "labelHeight": 61, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 295, + "y": 588 + }, + { + "x": 295, + "y": 628 + }, + { + "x": 295, + "y": 648 + }, + { + "x": 295, + "y": 688 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(sixty four -> ninety nine)[0]", + "src": "sixty four", + "srcArrow": "none", + "srcLabel": "", + "dst": "ninety nine", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "eighty one", + "fontSize": 81, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 343, + "labelHeight": 102, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 295, + "y": 874 + }, + { + "x": 295, + "y": 914 + }, + { + "x": 295, + "y": 934 + }, + { + "x": 295, + "y": 974 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + } + ] +} diff --git a/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg new file mode 100644 index 000000000..a41423f10 --- /dev/null +++ b/e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg @@ -0,0 +1,43 @@ + +eightsixteenthirty twosixty fourninety nine + + +twelve + + +twenty four + + +forty eight + + +eighty one \ No newline at end of file diff --git a/e2etests/testdata/todo/font_sizes_large/elk/board.exp.json b/e2etests/testdata/todo/font_sizes_large/elk/board.exp.json new file mode 100644 index 000000000..85b0d3b12 --- /dev/null +++ b/e2etests/testdata/todo/font_sizes_large/elk/board.exp.json @@ -0,0 +1,349 @@ +{ + "name": "", + "shapes": [ + { + "id": "eight", + "type": "", + "pos": { + "x": 295, + "y": 12 + }, + "width": 124, + "height": 116, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "eight", + "fontSize": 8, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 24, + "labelHeight": 16, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "sixteen", + "type": "", + "pos": { + "x": 279, + "y": 344 + }, + "width": 157, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "sixteen", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 57, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "thirty two", + "type": "", + "pos": { + "x": 234, + "y": 701 + }, + "width": 247, + "height": 146, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "thirty two", + "fontSize": 32, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 147, + "labelHeight": 46, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "sixty four", + "type": "", + "pos": { + "x": 170, + "y": 1108 + }, + "width": 375, + "height": 186, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "sixty four", + "fontSize": 64, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 275, + "labelHeight": 86, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "ninety nine", + "type": "", + "pos": { + "x": 62, + "y": 1596 + }, + "width": 590, + "height": 230, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "ninety nine", + "fontSize": 99, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 490, + "labelHeight": 130, + "labelPosition": "INSIDE_MIDDLE_CENTER" + } + ], + "connections": [ + { + "id": "(eight -> sixteen)[0]", + "src": "eight", + "srcArrow": "none", + "srcLabel": "", + "dst": "sixteen", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "twelve", + "fontSize": 12, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 33, + "labelHeight": 16, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 357, + "y": 128 + }, + { + "x": 357, + "y": 344 + } + ], + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(sixteen -> thirty two)[0]", + "src": "sixteen", + "srcArrow": "none", + "srcLabel": "", + "dst": "thirty two", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "twenty four", + "fontSize": 24, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 114, + "labelHeight": 31, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 357, + "y": 470 + }, + { + "x": 357, + "y": 701 + } + ], + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(thirty two -> sixty four)[0]", + "src": "thirty two", + "srcArrow": "none", + "srcLabel": "", + "dst": "sixty four", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "forty eight", + "fontSize": 48, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 203, + "labelHeight": 61, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 357, + "y": 847 + }, + { + "x": 357, + "y": 1108 + } + ], + "animated": false, + "tooltip": "", + "icon": null + }, + { + "id": "(sixty four -> ninety nine)[0]", + "src": "sixty four", + "srcArrow": "none", + "srcLabel": "", + "dst": "ninety nine", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "eighty one", + "fontSize": 81, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 343, + "labelHeight": 102, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 357, + "y": 1294 + }, + { + "x": 357, + "y": 1596 + } + ], + "animated": false, + "tooltip": "", + "icon": null + } + ] +} diff --git a/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg b/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg new file mode 100644 index 000000000..91a92c371 --- /dev/null +++ b/e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg @@ -0,0 +1,43 @@ + +eightsixteenthirty twosixty fourninety nine + + +twelve + + +twenty four + + +forty eight + + +eighty one \ No newline at end of file diff --git a/e2etests/testdata/todo/tall_edge_label/dagre/board.exp.json b/e2etests/testdata/todo/tall_edge_label/dagre/board.exp.json new file mode 100644 index 000000000..2de602438 --- /dev/null +++ b/e2etests/testdata/todo/tall_edge_label/dagre/board.exp.json @@ -0,0 +1,130 @@ +{ + "name": "", + "shapes": [ + { + "id": "a", + "type": "", + "pos": { + "x": 0, + "y": 0 + }, + "width": 113, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "a", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "b", + "type": "", + "pos": { + "x": 0, + "y": 226 + }, + "width": 113, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "b", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + } + ], + "connections": [ + { + "id": "(a -> b)[0]", + "src": "a", + "srcArrow": "none", + "srcLabel": "", + "dst": "b", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "There\nonce\nwas\na\nvery\ntall\nedge\nlabel", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 38, + "labelHeight": 133, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 56.5, + "y": 126 + }, + { + "x": 56.5, + "y": 166 + }, + { + "x": 56.5, + "y": 186 + }, + { + "x": 56.5, + "y": 226 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null + } + ] +} diff --git a/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg b/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg new file mode 100644 index 000000000..986f6e3a5 --- /dev/null +++ b/e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg @@ -0,0 +1,34 @@ + +ab + + +Thereoncewasaverytalledgelabel \ No newline at end of file diff --git a/e2etests/testdata/todo/tall_edge_label/elk/board.exp.json b/e2etests/testdata/todo/tall_edge_label/elk/board.exp.json new file mode 100644 index 000000000..7b6dc1dad --- /dev/null +++ b/e2etests/testdata/todo/tall_edge_label/elk/board.exp.json @@ -0,0 +1,121 @@ +{ + "name": "", + "shapes": [ + { + "id": "a", + "type": "", + "pos": { + "x": 12, + "y": 12 + }, + "width": 113, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "a", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + }, + { + "id": "b", + "type": "", + "pos": { + "x": 12, + "y": 471 + }, + "width": 113, + "height": 126, + "level": 1, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "fields": null, + "methods": null, + "columns": null, + "label": "b", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 13, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER" + } + ], + "connections": [ + { + "id": "(a -> b)[0]", + "src": "a", + "srcArrow": "none", + "srcLabel": "", + "dst": "b", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "There\nonce\nwas\na\nvery\ntall\nedge\nlabel", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 38, + "labelHeight": 133, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 68.5, + "y": 138 + }, + { + "x": 68.5, + "y": 471 + } + ], + "animated": false, + "tooltip": "", + "icon": null + } + ] +} diff --git a/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg b/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg new file mode 100644 index 000000000..fd896fed3 --- /dev/null +++ b/e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg @@ -0,0 +1,34 @@ + +ab + + +Thereoncewasaverytalledgelabel \ No newline at end of file diff --git a/e2etests/todo_test.go b/e2etests/todo_test.go index 4ec848e48..a0cecce13 100644 --- a/e2etests/todo_test.go +++ b/e2etests/todo_test.go @@ -13,6 +13,58 @@ func testTodo(t *testing.T) { script: ` container.first -> container.second: 1->2 container -> container.second: c->2 +`, + }, + { + // issue https://github.com/terrastruct/d2/issues/263 + name: "tall_edge_label", + script: ` +a -> b: There\nonce\nwas\na\nvery\ntall\nedge\nlabel +`, + }, + { + // issue https://github.com/terrastruct/d2/issues/263 + name: "font_sizes_large", + script: ` +eight.style.font-size: 8 +sixteen.style.font-size: 16 +thirty two.style.font-size: 32 +sixty four.style.font-size: 64 +ninety nine.style.font-size: 99 + +eight -> sixteen : twelve { + style.font-size: 12 +} +sixteen -> thirty two : twenty four { + style.font-size: 24 +} +thirty two -> sixty four: forty eight { + style.font-size: 48 +} +sixty four -> ninety nine: eighty one { + style.font-size: 81 +} +`, + }, + { + // issue https://github.com/terrastruct/d2/issues/19 + name: "font_sizes_containers_large", + script: ` +ninety nine: { + style.font-size: 99 + sixty four: { + style.font-size: 64 + thirty two:{ + style.font-size: 32 + sixteen: { + style.font-size: 16 + eight: { + style.font-size: 8 + } + } + } + } +} `, }, } From acebca973927a73210b00db9b165360535c62265 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 29 Nov 2022 15:10:59 -0800 Subject: [PATCH 4/7] load font at new size on demand --- d2renderers/textmeasure/textmeasure.go | 106 +++++++++++-------------- 1 file changed, 46 insertions(+), 60 deletions(-) diff --git a/d2renderers/textmeasure/textmeasure.go b/d2renderers/textmeasure/textmeasure.go index 5b9cb5bb4..b9192e58d 100644 --- a/d2renderers/textmeasure/textmeasure.go +++ b/d2renderers/textmeasure/textmeasure.go @@ -76,6 +76,8 @@ type Ruler struct { atlases map[d2fonts.Font]*atlas + ttfs map[d2fonts.Font]*truetype.Font + buf []byte prevR rune bounds *rect @@ -97,84 +99,68 @@ type Ruler struct { // }) // txt := text.New(orig, text.NewAtlas(face, text.ASCII)) func NewRuler() (*Ruler, error) { - lineHeights := make(map[d2fonts.Font]float64) - tabWidths := make(map[d2fonts.Font]float64) - atlases := make(map[d2fonts.Font]*atlas) + origin := geo.NewPoint(0, 0) + r := &Ruler{ + Orig: origin, + Dot: origin.Copy(), + LineHeightFactor: 1., + lineHeights: make(map[d2fonts.Font]float64), + tabWidths: make(map[d2fonts.Font]float64), + atlases: make(map[d2fonts.Font]*atlas), + ttfs: make(map[d2fonts.Font]*truetype.Font), + } for _, fontFamily := range d2fonts.FontFamilies { - for _, fontSize := range d2fonts.FontSizes { - for _, fontStyle := range d2fonts.FontStyles { - font := d2fonts.Font{ - Family: fontFamily, - Style: fontStyle, - } - if _, ok := d2fonts.FontFaces[font]; !ok { - continue - } + for _, fontStyle := range d2fonts.FontStyles { + font := d2fonts.Font{ + Family: fontFamily, + Style: fontStyle, + } + // Note: FontFaces lookup is size-agnostic + if _, ok := d2fonts.FontFaces[font]; !ok { + continue + } + if _, loaded := r.ttfs[font]; !loaded { ttf, err := truetype.Parse(d2fonts.FontFaces[font]) if err != nil { return nil, err } - // Added after, since FontFaces lookup is size-agnostic - font.Size = fontSize - face := truetype.NewFace(ttf, &truetype.Options{ - Size: float64(fontSize), - }) - atlas := NewAtlas(face, ASCII) - atlases[font] = atlas - lineHeights[font] = atlas.lineHeight - tabWidths[font] = atlas.glyph(' ').advance * TAB_SIZE + r.ttfs[font] = ttf + } + + for _, fontSize := range d2fonts.FontSizes { + r.addFontSize(font, fontSize) } } } - origin := geo.NewPoint(0, 0) - txt := &Ruler{ - Orig: origin, - Dot: origin.Copy(), - LineHeightFactor: 1., - lineHeights: lineHeights, - tabWidths: tabWidths, - atlases: atlases, - } - txt.clear() + r.clear() - return txt, nil + return r, nil +} + +func (r *Ruler) addFontSize(font d2fonts.Font, fontSize int) { + sizeless := font + sizeless.Size = 0 + face := truetype.NewFace(r.ttfs[sizeless], &truetype.Options{ + Size: float64(fontSize), + }) + font.Size = fontSize + atlas := NewAtlas(face, ASCII) + r.atlases[font] = atlas + r.lineHeights[font] = atlas.lineHeight + r.tabWidths[font] = atlas.glyph(' ').advance * TAB_SIZE } func (t *Ruler) Measure(font d2fonts.Font, s string) (width, height int) { - hasSize := false - for _, size := range d2fonts.FontSizes { - if size == font.Size { - hasSize = true - break - } - } - var w, h float64 - if hasSize { - w, h = t.MeasurePrecise(font, s) - } else { - // find the closest font size we have and scale the measurement - closestSize := d2fonts.FontSizes[0] - smallestDiff := math.Abs(float64(closestSize - font.Size)) - for i := 1; i < len(d2fonts.FontSizes); i++ { - diff := math.Abs(float64(d2fonts.FontSizes[i] - font.Size)) - if diff < smallestDiff { - smallestDiff = diff - closestSize = d2fonts.FontSizes[i] - } - } - scaledFont := font - scaledFont.Size = closestSize - w, h = t.MeasurePrecise(scaledFont, s) - f := float64(font.Size) / float64(closestSize) - w *= f - h *= f - } + w, h := t.MeasurePrecise(font, s) return int(math.Ceil(w)), int(math.Ceil(h)) } func (t *Ruler) MeasurePrecise(font d2fonts.Font, s string) (width, height float64) { + if _, ok := t.atlases[font]; !ok { + t.addFontSize(font, font.Size) + } t.clear() t.buf = append(t.buf, s...) t.drawBuf(font) From 723826ee304a6c8641aea9f723a45ed30252a69e Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 29 Nov 2022 15:11:52 -0800 Subject: [PATCH 5/7] update tests --- .../stable/font_sizes/dagre/board.exp.json | 32 ++++++------- .../stable/font_sizes/dagre/sketch.exp.svg | 22 ++++----- .../stable/font_sizes/elk/board.exp.json | 36 +++++++------- .../stable/font_sizes/elk/sketch.exp.svg | 22 ++++----- .../dagre/board.exp.json | 4 +- .../elk/board.exp.json | 4 +- .../font_sizes_large/dagre/board.exp.json | 48 +++++++++---------- .../font_sizes_large/dagre/sketch.exp.svg | 24 +++++----- .../todo/font_sizes_large/elk/board.exp.json | 38 +++++++-------- .../todo/font_sizes_large/elk/sketch.exp.svg | 28 +++++------ 10 files changed, 129 insertions(+), 129 deletions(-) diff --git a/e2etests/testdata/stable/font_sizes/dagre/board.exp.json b/e2etests/testdata/stable/font_sizes/dagre/board.exp.json index 4137c5d24..7203ab80f 100644 --- a/e2etests/testdata/stable/font_sizes/dagre/board.exp.json +++ b/e2etests/testdata/stable/font_sizes/dagre/board.exp.json @@ -274,7 +274,7 @@ "x": 1297, "y": 15 }, - "width": 138, + "width": 137, "height": 116, "level": 1, "opacity": 1, @@ -301,7 +301,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 38, + "labelWidth": 37, "labelHeight": 16, "labelPosition": "INSIDE_MIDDLE_CENTER" }, @@ -309,7 +309,7 @@ "id": "custom 12", "type": "", "pos": { - "x": 1495, + "x": 1494, "y": 13 }, "width": 160, @@ -347,10 +347,10 @@ "id": "custom 18", "type": "", "pos": { - "x": 1715, + "x": 1714, "y": 9 }, - "width": 187, + "width": 186, "height": 128, "level": 1, "opacity": 1, @@ -377,7 +377,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 87, + "labelWidth": 86, "labelHeight": 28, "labelPosition": "INSIDE_MIDDLE_CENTER" }, @@ -385,7 +385,7 @@ "id": "custom 21", "type": "", "pos": { - "x": 1962, + "x": 1960, "y": 7 }, "width": 200, @@ -423,10 +423,10 @@ "id": "custom 64", "type": "", "pos": { - "x": 839, + "x": 840, "y": 246 }, - "width": 394, + "width": 393, "height": 186, "level": 1, "opacity": 1, @@ -453,7 +453,7 @@ "italic": false, "bold": true, "underline": false, - "labelWidth": 294, + "labelWidth": 293, "labelHeight": 86, "labelPosition": "INSIDE_MIDDLE_CENTER" } @@ -485,19 +485,19 @@ "labelPercentage": 0, "route": [ { - "x": 1365.5, + "x": 1365, "y": 131 }, { - "x": 1365.5, + "x": 1365, "y": 183 }, { - "x": 1365.5, + "x": 1365, "y": 212.4 }, { - "x": 1365.5, + "x": 1365, "y": 278 } ], @@ -526,7 +526,7 @@ "italic": true, "bold": false, "underline": false, - "labelWidth": 63, + "labelWidth": 64, "labelHeight": 19, "labelPosition": "INSIDE_MIDDLE_CENTER", "labelPercentage": 0, @@ -573,7 +573,7 @@ "italic": true, "bold": false, "underline": false, - "labelWidth": 200, + "labelWidth": 199, "labelHeight": 61, "labelPosition": "INSIDE_MIDDLE_CENTER", "labelPercentage": 0, diff --git a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg index d68a51a79..29d19e482 100644 --- a/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg @@ -2,7 +2,7 @@ eightsixteenthirty twosixty fourninety nine + + +twelve -twenty four - - -forty eight - - -eighty oneeightsixteenthirty twosixty fourninety nine - - -twelve - - -twenty four - - -forty eight - - -eighty one