From cc0a04875745bfb1ea06e537c2251e99efa6b479 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Thu, 12 Jan 2023 10:29:13 -0800 Subject: [PATCH 1/6] test --- d2renderers/d2svg/style.css | 12 ++++++++++++ .../dagre_edge_label_spacing/dagre/sketch.exp.svg | 12 ++++++++++++ .../dagre_edge_label_spacing/elk/sketch.exp.svg | 12 ++++++++++++ .../dagre_special_ids/dagre/sketch.exp.svg | 12 ++++++++++++ .../regression/dagre_special_ids/elk/sketch.exp.svg | 12 ++++++++++++ .../regression/elk_alignment/dagre/sketch.exp.svg | 12 ++++++++++++ .../regression/elk_alignment/elk/sketch.exp.svg | 12 ++++++++++++ .../elk_img_empty_label_panic/dagre/sketch.exp.svg | 12 ++++++++++++ .../elk_img_empty_label_panic/elk/sketch.exp.svg | 12 ++++++++++++ .../regression/elk_order/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/regression/elk_order/elk/sketch.exp.svg | 12 ++++++++++++ .../regression/empty_sequence/dagre/sketch.exp.svg | 12 ++++++++++++ .../regression/empty_sequence/elk/sketch.exp.svg | 12 ++++++++++++ .../regression/no-lexer/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/regression/no-lexer/elk/sketch.exp.svg | 12 ++++++++++++ .../only_header_class_table/dagre/sketch.exp.svg | 12 ++++++++++++ .../only_header_class_table/elk/sketch.exp.svg | 12 ++++++++++++ .../overlapping-edge-label/dagre/sketch.exp.svg | 12 ++++++++++++ .../overlapping-edge-label/elk/sketch.exp.svg | 12 ++++++++++++ .../query_param_escape/dagre/sketch.exp.svg | 12 ++++++++++++ .../regression/query_param_escape/elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_name_crash/dagre/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_name_crash/elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_no_message/dagre/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_no_message/elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_span_cover/dagre/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_span_cover/elk/sketch.exp.svg | 12 ++++++++++++ .../sql_table_overflow/dagre/sketch.exp.svg | 12 ++++++++++++ .../regression/sql_table_overflow/elk/sketch.exp.svg | 12 ++++++++++++ .../unnamed_class_table_code/dagre/sketch.exp.svg | 12 ++++++++++++ .../unnamed_class_table_code/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/sanity/basic/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/sanity/basic/elk/sketch.exp.svg | 12 ++++++++++++ .../sanity/child_to_child/dagre/sketch.exp.svg | 12 ++++++++++++ .../sanity/child_to_child/elk/sketch.exp.svg | 12 ++++++++++++ .../sanity/connection_label/dagre/sketch.exp.svg | 12 ++++++++++++ .../sanity/connection_label/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/sanity/empty/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/sanity/empty/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/all_shapes/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/all_shapes/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/all_shapes_multiple/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/all_shapes_multiple/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/all_shapes_shadow/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/all_shapes_shadow/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/arrowhead_adjustment/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/arrowhead_adjustment/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/arrowhead_labels/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/arrowhead_labels/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/binary_tree/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/binary_tree/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/chaos1/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/chaos2/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/child_parent_edges/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/child_parent_edges/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/circular_dependency/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/circular_dependency/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/class/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/class/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/code_snippet/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/code_snippet/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/connected_container/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/connected_container/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/constant_near_stress/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/constant_near_stress/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/constant_near_title/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/constant_near_title/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/container_edges/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/container_edges/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/crow_foot_arrowhead/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/crow_foot_arrowhead/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/dense/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/dense/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/different_subgraphs/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/different_subgraphs/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/direction/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/direction/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/font_colors/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/font_colors/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/font_sizes/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/font_sizes/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/giant_markdown_test/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/giant_markdown_test/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/hr/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/hr/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/icon-label/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/icon-label/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/images/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/images/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/investigate/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/investigate/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/large_arch/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/large_arch/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/latex/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/latex/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/li1/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/li1/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/li2/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/li2/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/li3/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/li3/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/li4/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/li4/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/links/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/links/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/lone_h1/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/markdown/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/markdown/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/markdown_stroke_fill/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/markdown_stroke_fill/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/md_2space_newline/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/md_2space_newline/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/md_backslash_newline/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/md_backslash_newline/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/md_code_block_fenced/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/md_code_block_fenced/elk/sketch.exp.svg | 12 ++++++++++++ .../md_code_block_indented/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/md_code_block_indented/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/md_code_inline/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/md_code_inline/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/multiline_text/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/multiline_text/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/multiple_trees/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/multiple_trees/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/n22_e32/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/number_connections/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/number_connections/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/one_container_loop/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/one_container_loop/elk/sketch.exp.svg | 12 ++++++++++++ .../one_three_one_container/dagre/sketch.exp.svg | 12 ++++++++++++ .../one_three_one_container/elk/sketch.exp.svg | 12 ++++++++++++ .../dagre/sketch.exp.svg | 12 ++++++++++++ .../elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/p/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/p/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/pre/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/pre/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/self-referencing/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/self-referencing/elk/sketch.exp.svg | 12 ++++++++++++ .../dagre/sketch.exp.svg | 12 ++++++++++++ .../elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_all_shapes/dagre/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_all_shapes/elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_distance/dagre/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_distance/elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_groups/dagre/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_groups/elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_long_note/dagre/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_long_note/elk/sketch.exp.svg | 12 ++++++++++++ .../dagre/sketch.exp.svg | 12 ++++++++++++ .../elk/sketch.exp.svg | 12 ++++++++++++ .../dagre/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_nested_span/elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_note/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/sequence_diagram_note/elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_real/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/sequence_diagram_real/elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_self_edges/dagre/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_self_edges/elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_simple/dagre/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_simple/elk/sketch.exp.svg | 12 ++++++++++++ .../sequence_diagram_span/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/sequence_diagram_span/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/sequence_diagrams/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/sequence_diagrams/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/sql_tables/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/sql_tables/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/square_3d/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/square_3d/elk/sketch.exp.svg | 12 ++++++++++++ .../dagre/sketch.exp.svg | 12 ++++++++++++ .../straight_hierarchy_container/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/stylish/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/stylish/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/text_font_sizes/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/text_font_sizes/elk/sketch.exp.svg | 12 ++++++++++++ .../testdata/stable/tooltips/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/tooltips/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/transparent_3d/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/transparent_3d/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/unnamed_only_height/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/unnamed_only_height/elk/sketch.exp.svg | 12 ++++++++++++ .../stable/unnamed_only_width/dagre/sketch.exp.svg | 12 ++++++++++++ .../stable/unnamed_only_width/elk/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/us_map/dagre/sketch.exp.svg | 12 ++++++++++++ e2etests/testdata/stable/us_map/elk/sketch.exp.svg | 12 ++++++++++++ .../todo/container_child_edge/dagre/sketch.exp.svg | 12 ++++++++++++ .../todo/container_child_edge/elk/sketch.exp.svg | 12 ++++++++++++ .../font_sizes_containers_large/dagre/sketch.exp.svg | 12 ++++++++++++ .../font_sizes_containers_large/elk/sketch.exp.svg | 12 ++++++++++++ .../todo/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 ++++++++++++ .../todo/shape_set_width_height/dagre/sketch.exp.svg | 12 ++++++++++++ .../todo/shape_set_width_height/elk/sketch.exp.svg | 12 ++++++++++++ .../todo/tall_edge_label/dagre/sketch.exp.svg | 12 ++++++++++++ .../testdata/todo/tall_edge_label/elk/sketch.exp.svg | 12 ++++++++++++ 203 files changed, 2436 insertions(+) diff --git a/d2renderers/d2svg/style.css b/d2renderers/d2svg/style.css index 2476c6ae7..5a7bc3b10 100644 --- a/d2renderers/d2svg/style.css +++ b/d2renderers/d2svg/style.css @@ -10,3 +10,15 @@ 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/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg b/e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg index 1e7b73085..24918268a 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,6 +18,18 @@ 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">your love life will behappyharmonious - - +]]>your love life will behappyharmoniousboredomimmortalityFridayMondayInsomniaSleepWakeDreamListenTalk hear + + \ 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 index 89d3c0453..92badcbf0 100644 --- a/e2etests/testdata/stable/animated/elk/board.exp.json +++ b/e2etests/testdata/stable/animated/elk/board.exp.json @@ -121,6 +121,406 @@ "labelPosition": "INSIDE_MIDDLE_CENTER", "zIndex": 0, "level": 1 + }, + { + "id": "boredom", + "type": "", + "pos": { + "x": 402, + "y": 12 + }, + "width": 168, + "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": "boredom", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 68, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "immortality", + "type": "", + "pos": { + "x": 391, + "y": 238 + }, + "width": 191, + "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": "immortality", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 91, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "Friday", + "type": "", + "pos": { + "x": 607, + "y": 12 + }, + "width": 150, + "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": "Friday", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 50, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "Monday", + "type": "", + "pos": { + "x": 602, + "y": 238 + }, + "width": 161, + "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": "Monday", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 61, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "Insomnia", + "type": "", + "pos": { + "x": 935, + "y": 12 + }, + "width": 170, + "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": "Insomnia", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 70, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "Sleep", + "type": "", + "pos": { + "x": 783, + "y": 238 + }, + "width": 145, + "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": "Sleep", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 45, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "Wake", + "type": "", + "pos": { + "x": 948, + "y": 238 + }, + "width": 144, + "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": "Wake", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 44, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "Dream", + "type": "", + "pos": { + "x": 1112, + "y": 238 + }, + "width": 151, + "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": "Dream", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 51, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "Listen", + "type": "", + "pos": { + "x": 1225, + "y": 12 + }, + "width": 148, + "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": "Listen", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 48, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "Talk", + "type": "", + "pos": { + "x": 1231, + "y": 464 + }, + "width": 136, + "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": "Talk", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0A0F25", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 36, + "labelHeight": 26, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 } ], "connections": [ @@ -150,11 +550,11 @@ "labelPercentage": 0, "route": [ { - "x": 193.66666666666669, + "x": 193.66666666666652, "y": 138 }, { - "x": 193.66666666666669, + "x": 193.66666666666652, "y": 188 }, { @@ -197,7 +597,7 @@ "labelPercentage": 0, "route": [ { - "x": 276, + "x": 275.9999999999999, "y": 138 }, { @@ -209,6 +609,256 @@ "tooltip": "", "icon": null, "zIndex": 0 + }, + { + "id": "(boredom <- immortality)[0]", + "src": "boredom", + "srcArrow": "triangle", + "srcLabel": "", + "dst": "immortality", + "dstArrow": "none", + "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": 486.5, + "y": 138 + }, + { + "x": 486.5, + "y": 238 + } + ], + "animated": true, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(Friday <-> Monday)[0]", + "src": "Friday", + "srcArrow": "triangle", + "srcLabel": "", + "dst": "Monday", + "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": 682.5, + "y": 138 + }, + { + "x": 682.5, + "y": 238 + } + ], + "animated": true, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(Insomnia -- Sleep)[0]", + "src": "Insomnia", + "srcArrow": "none", + "srcLabel": "", + "dst": "Sleep", + "dstArrow": "none", + "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": 977.5, + "y": 138 + }, + { + "x": 977.5, + "y": 188 + }, + { + "x": 855.5, + "y": 188 + }, + { + "x": 855.5, + "y": 238 + } + ], + "animated": true, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(Insomnia -- Wake)[0]", + "src": "Insomnia", + "srcArrow": "none", + "srcLabel": "", + "dst": "Wake", + "dstArrow": "none", + "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": 1020, + "y": 138 + }, + { + "x": 1020, + "y": 238 + } + ], + "animated": true, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(Insomnia -- Dream)[0]", + "src": "Insomnia", + "srcArrow": "none", + "srcLabel": "", + "dst": "Dream", + "dstArrow": "none", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 8, + "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": 1062.5, + "y": 138 + }, + { + "x": 1062.5, + "y": 188 + }, + { + "x": 1187.5, + "y": 188 + }, + { + "x": 1187.5, + "y": 238 + } + ], + "animated": true, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(Listen <-> Talk)[0]", + "src": "Listen", + "srcArrow": "cf-one", + "srcLabel": "", + "dst": "Talk", + "dstArrow": "diamond", + "dstLabel": "", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#0D32B2", + "label": "hear", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "#676C7E", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 32, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 1299, + "y": 138 + }, + { + "x": 1299, + "y": 464 + } + ], + "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 index 6adb4db90..5d3c01de3 100644 --- a/e2etests/testdata/stable/animated/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/animated/elk/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="563" height="556" viewBox="-90 -90 563 556"> \ No newline at end of file From 2d43fbdb6413136d31bcc5097982a7055557844c Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Thu, 12 Jan 2023 11:11:58 -0800 Subject: [PATCH 4/6] changelog --- ci/release/changelogs/next.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md index 489a520f2..4d0ab566d 100644 --- a/ci/release/changelogs/next.md +++ b/ci/release/changelogs/next.md @@ -1,5 +1,7 @@ #### Features 🚀 +- `animated` keyword implemented for connections. [#652](https://github.com/terrastruct/d2/pull/652) + #### Improvements 🧹 - ELK layouts tuned to have better defaults. [#627](https://github.com/terrastruct/d2/pull/627) From 48c9cc792972ea8f0c6917d1c88c70129f2ba573 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Thu, 12 Jan 2023 11:20:18 -0800 Subject: [PATCH 5/6] sketch --- d2renderers/d2sketch/sketch.go | 22 ++---- d2renderers/d2sketch/sketch_test.go | 5 ++ .../d2sketch/testdata/animated/sketch.exp.svg | 77 +++++++++++++++++++ d2renderers/d2svg/d2svg.go | 28 +------ d2target/d2target.go | 27 +++++++ 5 files changed, 116 insertions(+), 43 deletions(-) create mode 100644 d2renderers/d2sketch/testdata/animated/sketch.exp.svg diff --git a/d2renderers/d2sketch/sketch.go b/d2renderers/d2sketch/sketch.go index 4c4913a2b..ea9b7035b 100644 --- a/d2renderers/d2sketch/sketch.go +++ b/d2renderers/d2sketch/sketch.go @@ -163,20 +163,6 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) { return output, nil } -func connectionStyle(connection d2target.Connection) string { - out := "" - - 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) - out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize) - } - - return out -} - func Connection(r *Runner, connection d2target.Connection, path, attrs string) (string, error) { roughness := 1.0 js := fmt.Sprintf(`node = rc.path("%s", {roughness: %f, seed: 1});`, path, roughness) @@ -185,10 +171,14 @@ func Connection(r *Runner, connection d2target.Connection, path, attrs string) ( return "", err } output := "" + animatedClass := "" + if connection.Animated { + animatedClass = " animated-connection" + } for _, p := range paths { output += fmt.Sprintf( - ``, - p, connectionStyle(connection), attrs, + ``, + animatedClass, p, connection.CSSStyle(), attrs, ) } return output, nil diff --git a/d2renderers/d2sketch/sketch_test.go b/d2renderers/d2sketch/sketch_test.go index c2b8dadea..f35eb1be7 100644 --- a/d2renderers/d2sketch/sketch_test.go +++ b/d2renderers/d2sketch/sketch_test.go @@ -39,6 +39,11 @@ func TestSketch(t *testing.T) { script: `winter.snow -> summer.sun `, }, + { + name: "animated", + script: `winter.snow -> summer.sun -> trees -> winter.snow: { style.animated: true } + `, + }, { name: "connection label", script: `a -> b: hello diff --git a/d2renderers/d2sketch/testdata/animated/sketch.exp.svg b/d2renderers/d2sketch/testdata/animated/sketch.exp.svg new file mode 100644 index 000000000..25a6c8c99 --- /dev/null +++ b/d2renderers/d2sketch/testdata/animated/sketch.exp.svg @@ -0,0 +1,77 @@ + + + + + + +wintersummertreessnowsun + + + \ No newline at end of file diff --git a/d2renderers/d2svg/d2svg.go b/d2renderers/d2svg/d2svg.go index b4b352b67..0f28eccb2 100644 --- a/d2renderers/d2svg/d2svg.go +++ b/d2renderers/d2svg/d2svg.go @@ -466,7 +466,7 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co animatedClass = " animated-connection" } fmt.Fprintf(writer, ``, - path, animatedClass, connectionStyle(connection), attrs) + path, animatedClass, connection.CSSStyle(), attrs) } if connection.Label != "" { @@ -966,32 +966,6 @@ func shapeStyle(shape d2target.Shape) string { return out } -func connectionStyle(connection d2target.Connection) string { - out := "" - - out += fmt.Sprintf(`stroke:%s;`, connection.Stroke) - out += fmt.Sprintf(`opacity:%f;`, connection.Opacity) - out += fmt.Sprintf(`stroke-width:%d;`, connection.StrokeWidth) - 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) - - if connection.Animated { - dashOffset := -10 - if connection.SrcArrow != d2target.NoArrowhead && connection.DstArrow == d2target.NoArrowhead { - dashOffset = 10 - } - out += fmt.Sprintf(`stroke-dashoffset:%f;`, float64(dashOffset)*(dashSize+gapSize)) - out += fmt.Sprintf(`animation: dashdraw %fs linear infinite;`, gapSize*0.5) - } - } - return out -} - func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) { content := buf.String() buf.WriteString(`