From 9c1e7eeb73c003893b27b2a48f9c1d2eac7e62c2 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Thu, 12 Jan 2023 10:51:26 -0800 Subject: [PATCH] test --- d2renderers/d2svg/d2svg.go | 38 ++- d2renderers/d2svg/style.css | 12 - e2etests/stable_test.go | 7 + .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre_special_ids/dagre/sketch.exp.svg | 12 - .../dagre_special_ids/elk/sketch.exp.svg | 12 - .../elk_alignment/dagre/sketch.exp.svg | 12 - .../elk_alignment/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../regression/elk_order/dagre/sketch.exp.svg | 12 - .../regression/elk_order/elk/sketch.exp.svg | 12 - .../empty_sequence/dagre/sketch.exp.svg | 12 - .../empty_sequence/elk/sketch.exp.svg | 12 - .../regression/no-lexer/dagre/sketch.exp.svg | 12 - .../regression/no-lexer/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../overlapping-edge-label/elk/sketch.exp.svg | 12 - .../query_param_escape/dagre/sketch.exp.svg | 12 - .../query_param_escape/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../sql_table_overflow/dagre/sketch.exp.svg | 12 - .../sql_table_overflow/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../sanity/1_to_2/dagre/sketch.exp.svg | 12 - .../testdata/sanity/1_to_2/elk/sketch.exp.svg | 12 - .../sanity/basic/dagre/sketch.exp.svg | 12 - .../testdata/sanity/basic/elk/sketch.exp.svg | 12 - .../child_to_child/dagre/sketch.exp.svg | 12 - .../sanity/child_to_child/elk/sketch.exp.svg | 12 - .../connection_label/dagre/sketch.exp.svg | 12 - .../connection_label/elk/sketch.exp.svg | 12 - .../sanity/empty/dagre/sketch.exp.svg | 12 - .../testdata/sanity/empty/elk/sketch.exp.svg | 12 - .../stable/all_shapes/dagre/sketch.exp.svg | 12 - .../stable/all_shapes/elk/sketch.exp.svg | 12 - .../all_shapes_multiple/dagre/sketch.exp.svg | 12 - .../all_shapes_multiple/elk/sketch.exp.svg | 12 - .../all_shapes_shadow/dagre/sketch.exp.svg | 12 - .../all_shapes_shadow/elk/sketch.exp.svg | 12 - .../stable/animated/dagre/board.exp.json | 224 ++++++++++++++++++ .../stable/animated/dagre/sketch.exp.svg | 62 +++++ .../stable/animated/elk/board.exp.json | 214 +++++++++++++++++ .../stable/animated/elk/sketch.exp.svg | 62 +++++ .../arrowhead_adjustment/dagre/sketch.exp.svg | 12 - .../arrowhead_adjustment/elk/sketch.exp.svg | 12 - .../arrowhead_labels/dagre/sketch.exp.svg | 12 - .../arrowhead_labels/elk/sketch.exp.svg | 12 - .../stable/binary_tree/dagre/sketch.exp.svg | 12 - .../stable/binary_tree/elk/sketch.exp.svg | 12 - .../stable/chaos1/dagre/sketch.exp.svg | 12 - .../testdata/stable/chaos1/elk/sketch.exp.svg | 12 - .../stable/chaos2/dagre/sketch.exp.svg | 12 - .../testdata/stable/chaos2/elk/sketch.exp.svg | 12 - .../child_parent_edges/dagre/sketch.exp.svg | 12 - .../child_parent_edges/elk/sketch.exp.svg | 12 - .../circular_dependency/dagre/sketch.exp.svg | 12 - .../circular_dependency/elk/sketch.exp.svg | 12 - .../stable/class/dagre/sketch.exp.svg | 12 - .../testdata/stable/class/elk/sketch.exp.svg | 12 - .../stable/code_snippet/dagre/sketch.exp.svg | 12 - .../stable/code_snippet/elk/sketch.exp.svg | 12 - .../connected_container/dagre/sketch.exp.svg | 12 - .../connected_container/elk/sketch.exp.svg | 12 - .../constant_near_stress/dagre/sketch.exp.svg | 12 - .../constant_near_stress/elk/sketch.exp.svg | 12 - .../constant_near_title/dagre/sketch.exp.svg | 12 - .../constant_near_title/elk/sketch.exp.svg | 12 - .../container_edges/dagre/sketch.exp.svg | 12 - .../stable/container_edges/elk/sketch.exp.svg | 12 - .../crow_foot_arrowhead/dagre/sketch.exp.svg | 12 - .../crow_foot_arrowhead/elk/sketch.exp.svg | 12 - .../stable/dense/dagre/sketch.exp.svg | 12 - .../testdata/stable/dense/elk/sketch.exp.svg | 12 - .../different_subgraphs/dagre/sketch.exp.svg | 12 - .../different_subgraphs/elk/sketch.exp.svg | 12 - .../stable/direction/dagre/sketch.exp.svg | 12 - .../stable/direction/elk/sketch.exp.svg | 12 - .../stable/font_colors/dagre/sketch.exp.svg | 12 - .../stable/font_colors/elk/sketch.exp.svg | 12 - .../stable/font_sizes/dagre/sketch.exp.svg | 12 - .../stable/font_sizes/elk/sketch.exp.svg | 12 - .../giant_markdown_test/dagre/sketch.exp.svg | 12 - .../giant_markdown_test/elk/sketch.exp.svg | 12 - .../testdata/stable/hr/dagre/sketch.exp.svg | 12 - .../testdata/stable/hr/elk/sketch.exp.svg | 12 - .../stable/icon-label/dagre/sketch.exp.svg | 12 - .../stable/icon-label/elk/sketch.exp.svg | 12 - .../stable/images/dagre/sketch.exp.svg | 12 - .../testdata/stable/images/elk/sketch.exp.svg | 12 - .../stable/investigate/dagre/sketch.exp.svg | 12 - .../stable/investigate/elk/sketch.exp.svg | 12 - .../stable/large_arch/dagre/sketch.exp.svg | 12 - .../stable/large_arch/elk/sketch.exp.svg | 12 - .../stable/latex/dagre/sketch.exp.svg | 12 - .../testdata/stable/latex/elk/sketch.exp.svg | 12 - .../testdata/stable/li1/dagre/sketch.exp.svg | 12 - .../testdata/stable/li1/elk/sketch.exp.svg | 12 - .../testdata/stable/li2/dagre/sketch.exp.svg | 12 - .../testdata/stable/li2/elk/sketch.exp.svg | 12 - .../testdata/stable/li3/dagre/sketch.exp.svg | 12 - .../testdata/stable/li3/elk/sketch.exp.svg | 12 - .../testdata/stable/li4/dagre/sketch.exp.svg | 12 - .../testdata/stable/li4/elk/sketch.exp.svg | 12 - .../stable/links/dagre/sketch.exp.svg | 12 - .../testdata/stable/links/elk/sketch.exp.svg | 12 - .../stable/lone_h1/dagre/sketch.exp.svg | 12 - .../stable/lone_h1/elk/sketch.exp.svg | 12 - .../stable/markdown/dagre/sketch.exp.svg | 12 - .../stable/markdown/elk/sketch.exp.svg | 12 - .../markdown_stroke_fill/dagre/sketch.exp.svg | 12 - .../markdown_stroke_fill/elk/sketch.exp.svg | 12 - .../md_2space_newline/dagre/sketch.exp.svg | 12 - .../md_2space_newline/elk/sketch.exp.svg | 12 - .../md_backslash_newline/dagre/sketch.exp.svg | 12 - .../md_backslash_newline/elk/sketch.exp.svg | 12 - .../md_code_block_fenced/dagre/sketch.exp.svg | 12 - .../md_code_block_fenced/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../md_code_block_indented/elk/sketch.exp.svg | 12 - .../md_code_inline/dagre/sketch.exp.svg | 12 - .../stable/md_code_inline/elk/sketch.exp.svg | 12 - .../multiline_text/dagre/sketch.exp.svg | 12 - .../stable/multiline_text/elk/sketch.exp.svg | 12 - .../multiple_trees/dagre/sketch.exp.svg | 12 - .../stable/multiple_trees/elk/sketch.exp.svg | 12 - .../stable/n22_e32/dagre/sketch.exp.svg | 12 - .../stable/n22_e32/elk/sketch.exp.svg | 12 - .../number_connections/dagre/sketch.exp.svg | 12 - .../number_connections/elk/sketch.exp.svg | 12 - .../one_container_loop/dagre/sketch.exp.svg | 12 - .../one_container_loop/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../testdata/stable/p/dagre/sketch.exp.svg | 12 - e2etests/testdata/stable/p/elk/sketch.exp.svg | 12 - .../testdata/stable/pre/dagre/sketch.exp.svg | 12 - .../testdata/stable/pre/elk/sketch.exp.svg | 12 - .../self-referencing/dagre/sketch.exp.svg | 12 - .../self-referencing/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../sequence_diagram_note/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../sequence_diagram_real/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../sequence_diagram_span/elk/sketch.exp.svg | 12 - .../sequence_diagrams/dagre/sketch.exp.svg | 12 - .../sequence_diagrams/elk/sketch.exp.svg | 12 - .../stable/sql_tables/dagre/sketch.exp.svg | 12 - .../stable/sql_tables/elk/sketch.exp.svg | 12 - .../stable/square_3d/dagre/sketch.exp.svg | 12 - .../stable/square_3d/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../stable/stylish/dagre/sketch.exp.svg | 12 - .../stable/stylish/elk/sketch.exp.svg | 12 - .../text_font_sizes/dagre/sketch.exp.svg | 12 - .../stable/text_font_sizes/elk/sketch.exp.svg | 12 - .../stable/tooltips/dagre/sketch.exp.svg | 12 - .../stable/tooltips/elk/sketch.exp.svg | 12 - .../transparent_3d/dagre/sketch.exp.svg | 12 - .../stable/transparent_3d/elk/sketch.exp.svg | 12 - .../unnamed_only_height/dagre/sketch.exp.svg | 12 - .../unnamed_only_height/elk/sketch.exp.svg | 12 - .../unnamed_only_width/dagre/sketch.exp.svg | 12 - .../unnamed_only_width/elk/sketch.exp.svg | 12 - .../stable/us_map/dagre/sketch.exp.svg | 12 - .../testdata/stable/us_map/elk/sketch.exp.svg | 12 - .../container_child_edge/dagre/sketch.exp.svg | 12 - .../container_child_edge/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../font_sizes_large/dagre/sketch.exp.svg | 12 - .../todo/font_sizes_large/elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../elk/sketch.exp.svg | 12 - .../dagre/sketch.exp.svg | 12 - .../shape_set_width_height/elk/sketch.exp.svg | 12 - .../todo/tall_edge_label/dagre/sketch.exp.svg | 12 - .../todo/tall_edge_label/elk/sketch.exp.svg | 12 - 209 files changed, 602 insertions(+), 2441 deletions(-) create mode 100644 e2etests/testdata/stable/animated/dagre/board.exp.json create mode 100644 e2etests/testdata/stable/animated/dagre/sketch.exp.svg create mode 100644 e2etests/testdata/stable/animated/elk/board.exp.json create mode 100644 e2etests/testdata/stable/animated/elk/sketch.exp.svg diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index 2ff96d2eb..2b48d70ef 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -461,8 +461,12 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co } fmt.Fprintf(writer, out) } else { - fmt.Fprintf(writer, ``, - path, connectionStyle(connection), attrs) + animatedClass := "" + if connection.Animated { + animatedClass = " animated-connection" + } + fmt.Fprintf(writer, ``, + path, animatedClass, connectionStyle(connection), attrs) } if connection.Label != "" { @@ -968,11 +972,14 @@ func connectionStyle(connection d2target.Connection) string { out += fmt.Sprintf(`stroke:%s;`, connection.Stroke) out += fmt.Sprintf(`opacity:%f;`, connection.Opacity) out += fmt.Sprintf(`stroke-width:%d;`, connection.StrokeWidth) - if connection.StrokeDash != 0 { - dashSize, gapSize := svg.GetStrokeDashAttributes(float64(connection.StrokeWidth), connection.StrokeDash) + strokeDash := connection.StrokeDash + if strokeDash == 0 && connection.Animated { + strokeDash = 5 + } + if strokeDash != 0 { + dashSize, gapSize := svg.GetStrokeDashAttributes(float64(connection.StrokeWidth), strokeDash) out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize) } - return out } @@ -1015,6 +1022,27 @@ func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) { } } + triggers = []string{ + `animated-connection`, + } + + for _, t := range triggers { + if strings.Contains(content, t) { + buf.WriteString(` +@keyframes dashdraw { + from { + stroke-dashoffset: 30; + } +} + +.animated-connection { + stroke-dasharray: 15 15; + animation: dashdraw 0.5s linear infinite; +}`) + break + } + } + triggers = []string{ `appendix-icon`, } diff --git a/d2renderers/d2svg/style.css b/d2renderers/d2svg/style.css index 5a7bc3b10..2476c6ae7 100644 --- a/d2renderers/d2svg/style.css +++ b/d2renderers/d2svg/style.css @@ -10,15 +10,3 @@ mix-blend-mode: multiply; opacity: 0.5; } - - -@keyframes dashdraw { - from { - stroke-dashoffset: 30; - } -} - -path[stroke-dasharray] { - stroke-dasharray: 15 15; - animation: dashdraw 0.5s linear infinite; -} diff --git a/e2etests/stable_test.go b/e2etests/stable_test.go index a8acc138a..f9b064710 100644 --- a/e2etests/stable_test.go +++ b/e2etests/stable_test.go @@ -1764,6 +1764,13 @@ e <--> f: { } }`, }, + { + name: "animated", + script: ` +your love life will be -> happy: { style.animated: true } +your love life will be -> harmonious: { style.animated: true } +`, + }, } runa(t, tcs) 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 24918268a..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 @@ -18,18 +18,6 @@ width="2832" height="441" viewBox="-102 -102 2832 441">your love life will behappyharmonious + + + \ No newline at end of file diff --git a/e2etests/testdata/stable/animated/elk/board.exp.json b/e2etests/testdata/stable/animated/elk/board.exp.json new file mode 100644 index 000000000..89d3c0453 --- /dev/null +++ b/e2etests/testdata/stable/animated/elk/board.exp.json @@ -0,0 +1,214 @@ +{ + "name": "", + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "your love life will be", + "type": "", + "pos": { + "x": 111, + "y": 12 + }, + "width": 247, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "your love life will be", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 147, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "happy", + "type": "", + "pos": { + "x": 12, + "y": 238 + }, + "width": 149, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "happy", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 49, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "harmonious", + "type": "", + "pos": { + "x": 181, + "y": 238 + }, + "width": 190, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "#F7F8FE", + "stroke": "#0D32B2", + "shadow": false, + "3d": false, + "multiple": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "harmonious", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 90, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + } + ], + "connections": [ + { + "id": "(your love life will be -> happy)[0]", + "src": "your love life will be", + "srcArrow": "none", + "srcLabel": "", + "dst": "happy", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 193.66666666666669, + "y": 138 + }, + { + "x": 193.66666666666669, + "y": 188 + }, + { + "x": 86.5, + "y": 188 + }, + { + "x": 86.5, + "y": 238 + } + ], + "animated": true, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(your love life will be -> harmonious)[0]", + "src": "your love life will be", + "srcArrow": "none", + "srcLabel": "", + "dst": "harmonious", + "dstArrow": "triangle", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 276, + "y": 138 + }, + { + "x": 276, + "y": 238 + } + ], + "animated": true, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ] +} diff --git a/e2etests/testdata/stable/animated/elk/sketch.exp.svg b/e2etests/testdata/stable/animated/elk/sketch.exp.svg new file mode 100644 index 000000000..6adb4db90 --- /dev/null +++ b/e2etests/testdata/stable/animated/elk/sketch.exp.svg @@ -0,0 +1,62 @@ + +your love life will behappyharmonious + + + \ No newline at end of file diff --git a/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg b/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg index 048039058..90796e221 100644 --- a/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg @@ -18,18 +18,6 @@ width="494" height="793" viewBox="-108 -107 494 793">