From 2b3faf8f648954f5ca1a67dbf777cb2878dc58ed Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Fri, 6 Jan 2023 12:18:26 -0800 Subject: [PATCH 1/7] fix dagre edge label overlaps --- d2layouts/d2dagrelayout/layout.go | 8 +- e2etests/regression_test.go | 20 + .../dagre/board.exp.json | 600 ++++++++++++++++++ .../dagre/sketch.exp.svg | 69 ++ .../overlapping-edge-label/elk/board.exp.json | 588 +++++++++++++++++ .../overlapping-edge-label/elk/sketch.exp.svg | 69 ++ 6 files changed, 1350 insertions(+), 4 deletions(-) create mode 100644 e2etests/testdata/regression/overlapping-edge-label/dagre/board.exp.json create mode 100644 e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg create mode 100644 e2etests/testdata/regression/overlapping-edge-label/elk/board.exp.json create mode 100644 e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg diff --git a/d2layouts/d2dagrelayout/layout.go b/d2layouts/d2dagrelayout/layout.go index 9969d2080..5543d541f 100644 --- a/d2layouts/d2dagrelayout/layout.go +++ b/d2layouts/d2dagrelayout/layout.go @@ -149,7 +149,7 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err // for `b <- a`, edge.Edge is `a -> b` and we expect this routing result src, dst = dst, src } - loadScript += generateAddEdgeLine(src.AbsID(), dst.AbsID(), edge.AbsID()) + loadScript += generateAddEdgeLine(src.AbsID(), dst.AbsID(), edge.AbsID(), edge.LabelDimensions.Width, edge.LabelDimensions.Height) } if debugJS { @@ -291,6 +291,7 @@ func setGraphAttrs(attrs dagreOpts) string { edgesep: %d, nodesep: %d, rankdir: "%s", + labelpos: "c", }); `, attrs.ranksep, @@ -320,7 +321,6 @@ func generateAddParentLine(childID, parentID string) string { return fmt.Sprintf("g.setParent(`%s`, `%s`);\n", escapeID(childID), escapeID(parentID)) } -func generateAddEdgeLine(fromID, toID, edgeID string) string { - // in dagre v is from, w is to, name is to uniquely identify - return fmt.Sprintf("g.setEdge({v:`%s`, w:`%s`, name:`%s` });\n", escapeID(fromID), escapeID(toID), escapeID(edgeID)) +func generateAddEdgeLine(fromID, toID, edgeID string, width, height int) string { + return fmt.Sprintf("g.setEdge({v:`%s`, w:`%s`, name:`%s`}, { width:%d, height:%d });\n", escapeID(fromID), escapeID(toID), escapeID(edgeID), width, height) } diff --git a/e2etests/regression_test.go b/e2etests/regression_test.go index aa8ca3b37..e0d04390f 100644 --- a/e2etests/regression_test.go +++ b/e2etests/regression_test.go @@ -282,6 +282,26 @@ table with short col: RefreshAuthorizationPolicyCache { } class -> table -> table with short col +`, + }, + { + name: "overlapping-edge-label", + script: `k8s: Kubernetes +k8s.m1: k8s-master1 +k8s.m2: k8s-master2 +k8s.m3: k8s-master3 +k8s.w1: k8s-worker1 +k8s.w2: k8s-worker2 +k8s.w3: k8s-worker3 + +osvc: opensvc +osvc.vm1: VM1 +osvc.vm2: VM2 + +k8s -> osvc: keycloak +k8s -> osvc: heptapod +k8s -> osvc: harbor +k8s -> osvc: vault `, }, } diff --git a/e2etests/testdata/regression/overlapping-edge-label/dagre/board.exp.json b/e2etests/testdata/regression/overlapping-edge-label/dagre/board.exp.json new file mode 100644 index 000000000..fd3010b8a --- /dev/null +++ b/e2etests/testdata/regression/overlapping-edge-label/dagre/board.exp.json @@ -0,0 +1,600 @@ +{ + "name": "", + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "k8s", + "type": "", + "pos": { + "x": 0, + "y": 0 + }, + "width": 1634, + "height": 226, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#E3E9FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Kubernetes", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 138, + "labelHeight": 41, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "k8s.m1", + "type": "", + "pos": { + "x": 129, + "y": 50 + }, + "width": 192, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-master1", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 92, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "k8s.m2", + "type": "", + "pos": { + "x": 381, + "y": 50 + }, + "width": 192, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-master2", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 92, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "k8s.m3", + "type": "", + "pos": { + "x": 633, + "y": 50 + }, + "width": 192, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-master3", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 92, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "k8s.w1", + "type": "", + "pos": { + "x": 885, + "y": 50 + }, + "width": 193, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-worker1", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 93, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "k8s.w2", + "type": "", + "pos": { + "x": 1138, + "y": 50 + }, + "width": 193, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-worker2", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 93, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "k8s.w3", + "type": "", + "pos": { + "x": 1391, + "y": 50 + }, + "width": 193, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-worker3", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 93, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "osvc", + "type": "", + "pos": { + "x": 0, + "y": 347 + }, + "width": 597, + "height": 226, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#E3E9FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "opensvc", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 102, + "labelHeight": 41, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "osvc.vm1", + "type": "", + "pos": { + "x": 192, + "y": 397 + }, + "width": 136, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "VM1", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 36, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "osvc.vm2", + "type": "", + "pos": { + "x": 411, + "y": 397 + }, + "width": 136, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "VM2", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 36, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + } + ], + "connections": [ + { + "id": "(k8s -> osvc)[0]", + "src": "k8s", + "srcArrow": "none", + "srcLabel": "", + "dst": "osvc", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "keycloak", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 59, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 99, + "y": 226 + }, + { + "x": 99, + "y": 274.4 + }, + { + "x": 99, + "y": 298.7 + }, + { + "x": 99, + "y": 347.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(k8s -> osvc)[1]", + "src": "k8s", + "srcArrow": "none", + "srcLabel": "", + "dst": "osvc", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "heptapod", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 65, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 208, + "y": 226 + }, + { + "x": 208, + "y": 274.4 + }, + { + "x": 208, + "y": 298.7 + }, + { + "x": 208, + "y": 347.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(k8s -> osvc)[2]", + "src": "k8s", + "srcArrow": "none", + "srcLabel": "", + "dst": "osvc", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "harbor", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 47, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 323, + "y": 226 + }, + { + "x": 323, + "y": 274.4 + }, + { + "x": 323, + "y": 298.7 + }, + { + "x": 323, + "y": 347.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(k8s -> osvc)[3]", + "src": "k8s", + "srcArrow": "none", + "srcLabel": "", + "dst": "osvc", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "vault", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 35, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 420, + "y": 226 + }, + { + "x": 420, + "y": 274.4 + }, + { + "x": 420, + "y": 298.7 + }, + { + "x": 420, + "y": 347.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ] +} diff --git a/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg b/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg new file mode 100644 index 000000000..7d9fab079 --- /dev/null +++ b/e2etests/testdata/regression/overlapping-edge-label/dagre/sketch.exp.svg @@ -0,0 +1,69 @@ + +Kubernetesopensvck8s-master1k8s-master2k8s-master3k8s-worker1k8s-worker2k8s-worker3VM1VM2 keycloakheptapodharborvault + + + + + + \ No newline at end of file diff --git a/e2etests/testdata/regression/overlapping-edge-label/elk/board.exp.json b/e2etests/testdata/regression/overlapping-edge-label/elk/board.exp.json new file mode 100644 index 000000000..6fd038717 --- /dev/null +++ b/e2etests/testdata/regression/overlapping-edge-label/elk/board.exp.json @@ -0,0 +1,588 @@ +{ + "name": "", + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "k8s", + "type": "", + "pos": { + "x": 12, + "y": 12 + }, + "width": 1405, + "height": 276, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#E3E9FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Kubernetes", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 138, + "labelHeight": 41, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "k8s.m1", + "type": "", + "pos": { + "x": 87, + "y": 87 + }, + "width": 192, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-master1", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 92, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "k8s.m2", + "type": "", + "pos": { + "x": 299, + "y": 87 + }, + "width": 192, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-master2", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 92, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "k8s.m3", + "type": "", + "pos": { + "x": 511, + "y": 87 + }, + "width": 192, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-master3", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 92, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "k8s.w1", + "type": "", + "pos": { + "x": 723, + "y": 87 + }, + "width": 193, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-worker1", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 93, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "k8s.w2", + "type": "", + "pos": { + "x": 936, + "y": 87 + }, + "width": 193, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-worker2", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 93, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "k8s.w3", + "type": "", + "pos": { + "x": 1149, + "y": 87 + }, + "width": 193, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "k8s-worker3", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 93, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "osvc", + "type": "", + "pos": { + "x": 397, + "y": 519 + }, + "width": 442, + "height": 276, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#E3E9FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "opensvc", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 102, + "labelHeight": 41, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "osvc.vm1", + "type": "", + "pos": { + "x": 472, + "y": 594 + }, + "width": 136, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "VM1", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 36, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "osvc.vm2", + "type": "", + "pos": { + "x": 628, + "y": 594 + }, + "width": 136, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#EDF0FD", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "VM2", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 36, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + } + ], + "connections": [ + { + "id": "(k8s -> osvc)[0]", + "src": "k8s", + "srcArrow": "none", + "srcLabel": "", + "dst": "osvc", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "keycloak", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 59, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 293, + "y": 288 + }, + { + "x": 293, + "y": 459 + }, + { + "x": 485.6, + "y": 459 + }, + { + "x": 485.6, + "y": 519 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(k8s -> osvc)[1]", + "src": "k8s", + "srcArrow": "none", + "srcLabel": "", + "dst": "osvc", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "heptapod", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 65, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 574, + "y": 288 + }, + { + "x": 574, + "y": 519 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(k8s -> osvc)[2]", + "src": "k8s", + "srcArrow": "none", + "srcLabel": "", + "dst": "osvc", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "harbor", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 47, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 855, + "y": 288 + }, + { + "x": 855, + "y": 459 + }, + { + "x": 662.4000000000001, + "y": 459 + }, + { + "x": 662.4000000000001, + "y": 519 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(k8s -> osvc)[3]", + "src": "k8s", + "srcArrow": "none", + "srcLabel": "", + "dst": "osvc", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "vault", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 35, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 1136, + "y": 288 + }, + { + "x": 1136, + "y": 469 + }, + { + "x": 750.8, + "y": 469 + }, + { + "x": 750.8, + "y": 519 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ] +} diff --git a/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg b/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg new file mode 100644 index 000000000..c81e90cf4 --- /dev/null +++ b/e2etests/testdata/regression/overlapping-edge-label/elk/sketch.exp.svg @@ -0,0 +1,69 @@ + +Kubernetesopensvck8s-master1k8s-master2k8s-master3k8s-worker1k8s-worker2k8s-worker3VM1VM2 keycloakheptapodharborvault + + + + + + \ No newline at end of file From 1739d79b6b9e93b49b081422dea15efdfef02f88 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Fri, 6 Jan 2023 12:19:01 -0800 Subject: [PATCH 2/7] fix dagre edge label overlaps --- .../dagre/board.exp.json | 40 +- .../dagre/sketch.exp.svg | 14 +- .../elk_alignment/dagre/board.exp.json | 134 ++-- .../elk_alignment/dagre/sketch.exp.svg | 22 +- .../connection_label/dagre/board.exp.json | 8 +- .../connection_label/dagre/sketch.exp.svg | 8 +- .../arrowhead_labels/dagre/board.exp.json | 8 +- .../arrowhead_labels/dagre/sketch.exp.svg | 8 +- .../stable/chaos1/dagre/board.exp.json | 40 +- .../stable/chaos1/dagre/sketch.exp.svg | 10 +- .../stable/chaos2/dagre/board.exp.json | 316 ++++----- .../stable/chaos2/dagre/sketch.exp.svg | 22 +- .../stable/font_colors/dagre/board.exp.json | 8 +- .../stable/font_colors/dagre/sketch.exp.svg | 8 +- .../stable/font_sizes/dagre/board.exp.json | 24 +- .../stable/font_sizes/dagre/sketch.exp.svg | 12 +- .../stable/investigate/dagre/board.exp.json | 630 +++++++++--------- .../stable/investigate/dagre/sketch.exp.svg | 18 +- .../stable/latex/dagre/board.exp.json | 8 +- .../stable/latex/dagre/sketch.exp.svg | 8 +- .../dagre/board.exp.json | 92 +-- .../dagre/sketch.exp.svg | 18 +- .../self-referencing/dagre/board.exp.json | 30 +- .../self-referencing/dagre/sketch.exp.svg | 8 +- .../stable/stylish/dagre/board.exp.json | 8 +- .../stable/stylish/dagre/sketch.exp.svg | 12 +- .../container_child_edge/dagre/board.exp.json | 34 +- .../container_child_edge/dagre/sketch.exp.svg | 10 +- .../font_sizes_large/dagre/board.exp.json | 42 +- .../font_sizes_large/dagre/sketch.exp.svg | 14 +- .../todo/tall_edge_label/dagre/board.exp.json | 8 +- .../todo/tall_edge_label/dagre/sketch.exp.svg | 8 +- 32 files changed, 815 insertions(+), 815 deletions(-) diff --git a/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/board.exp.json b/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/board.exp.json index 0ba8aaac5..2eb8b7fa0 100644 --- a/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/board.exp.json +++ b/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/board.exp.json @@ -9,7 +9,7 @@ "x": 0, "y": 0 }, - "width": 2148, + "width": 2628, "height": 237, "opacity": 1, "strokeDash": 0, @@ -86,7 +86,7 @@ "id": "build_workflow.GHA", "type": "", "pos": { - "x": 644, + "x": 698, "y": 50 }, "width": 269, @@ -126,7 +126,7 @@ "id": "build_workflow.S3", "type": "", "pos": { - "x": 1122, + "x": 1314, "y": 50 }, "width": 131, @@ -166,7 +166,7 @@ "id": "build_workflow.Terraform", "type": "", "pos": { - "x": 1462, + "x": 1773, "y": 50 }, "width": 218, @@ -206,7 +206,7 @@ "id": "build_workflow.AWS", "type": "", "pos": { - "x": 1889, + "x": 2369, "y": 50 }, "width": 155, @@ -274,15 +274,15 @@ "y": 118.5 }, { - "x": 518.3, + "x": 539.9, "y": 118.5 }, { - "x": 559.9, + "x": 592.3, "y": 118.5 }, { - "x": 643.5, + "x": 697.5, "y": 118.5 } ], @@ -318,19 +318,19 @@ "labelPercentage": 0, "route": [ { - "x": 913.5, + "x": 966.5, "y": 118.5 }, { - "x": 996.3, + "x": 1105.3, "y": 118.5 }, { - "x": 1037.9, + "x": 1174.7, "y": 118.5 }, { - "x": 1121.5, + "x": 1313.5, "y": 118.5 } ], @@ -366,19 +366,19 @@ "labelPercentage": 0, "route": [ { - "x": 1253.5, + "x": 1445.5, "y": 118.5 }, { - "x": 1336.3, + "x": 1575.9, "y": 118.5 }, { - "x": 1377.9, + "x": 1641.3, "y": 118.5 }, { - "x": 1461.5, + "x": 1772.5, "y": 118.5 } ], @@ -414,19 +414,19 @@ "labelPercentage": 0, "route": [ { - "x": 1680.5, + "x": 1991.5, "y": 118.5 }, { - "x": 1763.3, + "x": 2141.9, "y": 118.5 }, { - "x": 1804.9, + "x": 2217.3, "y": 118.5 }, { - "x": 1888.5, + "x": 2368.5, "y": 118.5 } ], diff --git a/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg b/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg index 5815a5190..1e7b73085 100644 --- a/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg +++ b/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg @@ -3,7 +3,7 @@ id="d2-svg" style="background: white;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" -width="2352" height="441" viewBox="-102 -102 2352 441">aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 - - - - - - - - - +aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 + + + + + + + + + mixed togethersugarsolution we get - - +mixed togethersugarsolution we get + + aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 - - - - - - - - - +aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 + + + + + + + + +

Oldest message

+

Oldest message

Offset

Last message

Next message will be
inserted here

-
M0M1M2M3M4M5M6 - +
M0M1M2M3M4M5M6 + aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 - - - - - - - - - +aabbllmmnnoocciikkddgghhjjeeff1122 334455667788 + + + + + + + + + xyThe top of the mountainJoeDonald

Cats, no less liquid than their shadows, offer no angles to the wind.

+xyThe top of the mountainJoeDonald

Cats, no less liquid than their shadows, offer no angles to the wind.

If we can't fix it, it ain't broke.

Dieters live life in the fasting lane.

-
i am top lefti am top righti am bottom lefti am bottom right - +
i am top lefti am top righti am bottom lefti am bottom right + poll the peopleresultsunfavorablefavorablewill of the people

A winning strategy

-
 - +poll the peopleresultsunfavorablefavorablewill of the people

A winning strategy

+
 +

Markdown: Syntax

+

Markdown: Syntax

  • Overview
      @@ -1053,8 +1053,8 @@ title for the link, surrounded in quotes. For example:

      Code

      Unlike a pre-formatted code block, a code span indicates code within a normal paragraph. For example:

      -
ab - +
ab +

Note: This document is itself written using Markdown; you +

Note: This document is itself written using Markdown; you can see the source for it by adding '.text' to the URL.

Overview

-
ab - +
ab + mixed togethersugarsolution we get - - +mixed togethersugarsolution we get + +
    +
    • Overview
      • Philosophy
        • @@ -808,8 +808,8 @@ width="583" height="756" viewBox="-102 -102 583 756">
          +
          • Overview ok this is all measured
            • Philosophy
              • @@ -804,8 +804,8 @@ width="449" height="732" viewBox="-102 -102 449 732">
                +
                • Overview
                  • Philosophy
                    • @@ -829,8 +829,8 @@ width="551" height="1168" viewBox="-102 -102 551 1168">

                    List items may consist of multiple paragraphs. Each subsequent +

                    List items may consist of multiple paragraphs. Each subsequent paragraph in a list item must be indented by either 4 spaces or one tab:

                      @@ -827,8 +827,8 @@ sit amet, consectetuer adipiscing elit.

                      Another item in the same list.

                  -
                ab - +
              ab +

              Markdown: Syntax

              -
              ab - +

              Markdown: Syntax

              +
              ab +

              Every frustum longs to be a cone

              +

              Every frustum longs to be a cone

              • A continuing flow of paper is sufficient to continue the flow of paper
              • Please remain calm, it's no use both of us being hysterical at the same time
              • Visits always give pleasure: if not on arrival, then on the departure

              Festivity Level 1: Your guests are chatting amiably with each other.

              -
              xy - +
              xy + container

              they did it in style

              -

              a header

              +container

              they did it in style

              +

              a header

              a line of text and an

              {
 	indented: "block",
@@ -805,8 +805,8 @@ width="516" height="685" viewBox="-102 -102 516 685">markdown
              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
              
+markdown
              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
              
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              
-
              
-
+
              
+
 
 markdown
              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
              
+markdown
              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
              
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              
-
              
-
+
              
+
 
 
              {
+
              {
 	fenced: "block",
 	of: "json",
 }
 
              
-
              ab  
-
+
              ab  
+
 
 
              a line of text and an
              
+
              a line of text and an
              
 
              {
 	indented: "block",
 	of: "json",
 }
 
              
-
              ab  
-
+
              ab  
+
 
 
              code
              
-
              ab  
-
+
              code
              
+
              ab  
+
 
 
              A paragraph is simply one or more consecutive lines of text, separated
+
              A paragraph is simply one or more consecutive lines of text, separated
 by one or more blank lines. (A blank line is any line that looks like a
 blank line -- a line containing nothing but spaces or tabs is considered
 blank.) Normal paragraphs should not be indented with spaces or tabs.
              
-
              ab  
-
+
              ab  
+
 
 
              Here is an example of AppleScript:
              
+
              Here is an example of AppleScript:
              
 
              tell application "Foo"
     beep
 end tell
 
              
 
              A code block continues until it reaches a line that is not indented
 (or the end of the article).
              
-
              ab  
-
+
              ab  
+
 
 bearmama bearpapa bear  
-
+bearmama bearpapa bear  
+
 
 
              Oldest message
              
+
              Oldest message
              
 
              Offset
              
 
              Last message
              
 
              Next message will be
              
 inserted here
              
-
              M0M1M2M3M4M5M6  
-
+
              M0M1M2M3M4M5M6  
+
 
 aabbllmmnnoocciikkddgghhjjeeff1122    334455667788
-
-
-
-
-
-
-
-
-
+aabbllmmnnoocciikkddgghhjjeeff1122    334455667788
+
+
+
+
+
+
+
+
+
 xyThe top of the mountainJoeDonald
              Cats, no less liquid than their shadows, offer no angles to the wind.
              
+xyThe top of the mountainJoeDonald
              Cats, no less liquid than their shadows, offer no angles to the wind.
              
 
              If we can't fix it, it ain't broke.
              
 
              Dieters live life in the fasting lane.
              
-
              i am top lefti am top righti am bottom lefti am bottom right  
-
+
              i am top lefti am top righti am bottom lefti am bottom right  
+
 
 poll the peopleresultsunfavorablefavorablewill of the people
              A winning strategy
              
-
                
-
+poll the peopleresultsunfavorablefavorablewill of the people
              A winning strategy
              
+
                
+
 
 
              Markdown: Syntax
              
+
              Markdown: Syntax
              
 
                
 
              • Overview
 
                  
@@ -1053,8 +1053,8 @@ title for the link, surrounded in quotes. For example:
                  
 
                  Code
                  
 
                  Unlike a pre-formatted code block, a code span indicates code within a
 normal paragraph. For example:
                  
-
              ab  
-
+
              ab  
+
 
 
              Note: This document is itself written using Markdown; you
+
              Note: This document is itself written using Markdown; you
 can see the source for it by adding '.text' to the URL.
              
 
              
 
              Overview
              
-
              ab  
-
+
              ab  
+
 
 mixed togethersugarsolution  we get
-
-
+mixed togethersugarsolution  we get
+
+
 
                
+
                  
 
                • Overview
 
                    
 
                  • Philosophy
                    • 
@@ -808,8 +808,8 @@ width="583" height="556" viewBox="-102 -102 583 556">
                      
+
                        
 
                      • Overview ok this is all measured
 
                          
 
                        • Philosophy
                          • 
@@ -804,8 +804,8 @@ width="449" height="532" viewBox="-102 -102 449 532">
                            
+
                              
 
                            • Overview
 
                                
 
                              • Philosophy
                                • 
@@ -829,8 +829,8 @@ width="551" height="968" viewBox="-102 -102 551 968">
                                List items may consist of multiple paragraphs. Each subsequent
+
                                List items may consist of multiple paragraphs. Each subsequent
 paragraph in a list item must be indented by either 4 spaces
 or one tab:
                                
 
                                  
@@ -827,8 +827,8 @@ sit amet, consectetuer adipiscing elit.
                                  
 
                                  Another item in the same list.
                                  
 
 
                              
-
                            ab  
-
+
                          ab  
+
 
 
                          Markdown: Syntax
                          
-
                          ab  
-
+
                          Markdown: Syntax
                          
+
                          ab  
+
 
 
                          Every frustum longs to be a cone
                          
+
                          Every frustum longs to be a cone
                          
 
                            
 
                          • A continuing flow of paper is sufficient to continue the flow of paper
                            • 
 
                          • Please remain calm, it's no use both of us being hysterical at the same time
                            • 
 
                          • Visits always give pleasure: if not on arrival, then on the departure
                            • 
 
                          
 
                          Festivity Level 1: Your guests are chatting amiably with each other.
                          
-
                          xy  
-
+
                          xy  
+
 
 container
                          they did it in style
                          
-
                          a header
                          
+container
                          they did it in style
                          
+
                          a header
                          
 
                          a line of text and an
                          
 
                          {
 	indented: "block",
@@ -805,8 +805,8 @@ width="516" height="485" viewBox="-102 -102 516 485">markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
+markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          
-
                          
-
+
                          
+
 
 markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
+markdown
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                          
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          
-
                          
-
+
                          
+
 
 
                          {
+
                          {
 	fenced: "block",
 	of: "json",
 }
 
                          
-
                          ab  
-
+
                          ab  
+
 
 
                          a line of text and an
                          
+
                          a line of text and an
                          
 
                          {
 	indented: "block",
 	of: "json",
 }
 
                          
-
                          ab  
-
+
                          ab  
+
 
 
                          code
                          
-
                          ab  
-
+
                          code
                          
+
                          ab  
+
 
 
                          A paragraph is simply one or more consecutive lines of text, separated
+
                          A paragraph is simply one or more consecutive lines of text, separated
 by one or more blank lines. (A blank line is any line that looks like a
 blank line -- a line containing nothing but spaces or tabs is considered
 blank.) Normal paragraphs should not be indented with spaces or tabs.
                          
-
                          ab  
-
+
                          ab  
+
 
 
                          Here is an example of AppleScript:
                          
+
                          Here is an example of AppleScript:
                          
 
                          tell application "Foo"
     beep
 end tell
 
                          
 
                          A code block continues until it reaches a line that is not indented
 (or the end of the article).
                          
-
                          ab  
-
+
                          ab  
+
 
 bearmama bearpapa bear  
-
+bearmama bearpapa bear  
+