Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement the double_circle shape including basic shape and the sketch. #565

Merged
merged 35 commits into from
Jan 27, 2023

Conversation

OneRain233
Copy link
Contributor

Implement the double_circle shape including basic shape and the sketch.
#564

@ejulio-ts
Copy link
Contributor

@OneRain233 can you include an image of your change? Quite hard to guess what it is from changes :)

Also, can you update this test case https://github.com/terrastruct/d2/blob/master/e2etests/stable_test.go#L26?

@OneRain233
Copy link
Contributor Author

Here are the images that I have implemented :)

test
test1

@OneRain233
Copy link
Contributor Author

For the all_shape test, I found that the size of the double circle shape is larger than others. But when I ran the normal .2d file, it is normal. I dont know the reason.

x1:{shape:double_circle}
x2:{shape:circle}
x1 -> x2

Screenshot from 2022-12-30 21-35-31

test

@pleshevskiy
Copy link

pleshevskiy commented Dec 30, 2022

@OneRain233 The shape stretches from the label size. I think you can make a little less internal padding

@OneRain233
Copy link
Contributor Author

@OneRain233 The shape stretches from the label size. I think you can make a little less internal padding

Maybe I know the reasons, because the name double_circle is longer than others name.

Copy link
Contributor

@ejulio-ts ejulio-ts left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool!
Besides updating the test cases, you need to update their output too

TESTDATA_ACCEPT=1 ./ci/test.sh

and it'll update the SVGs and JSONs of the test cases, otherwise it'll break during the CI run

I'll let @alixander or @nhooyr make the final call on this one.

Copy link
Collaborator

@alixander alixander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @OneRain233 thanks for taking the initiative here!

I don't think a separate shape is right for it though. There'd no 3d_square or multiple_circle or blue_oval; these are just attributes in D2. If this were to be implemented, it should be a style like double: true or double-border: true.

I don't personally know what this double-border style is for, but I've seen it used, and, recently in this: http://www.bpmb.de/images/BPMN2_0_Poster_EN.pdf . So I do think it's good to offer this in D2. Oh I guess I've seen it in state machines too

Btw, is there anything you felt was missing from the CONTRIBUTING.md? (did you use it at all? 😃 )

@OneRain233
Copy link
Contributor Author

OneRain233 commented Dec 31, 2022

hi @OneRain233 thanks for taking the initiative here!

I don't think a separate shape is right for it though. There'd no 3d_square or multiple_circle or blue_oval; these are just attributes in D2. If this were to be implemented, it should be a style like double: true or double-border: true.

I don't personally know what this double-border style is for, but I've seen it used, and, recently in this: http://www.bpmb.de/images/BPMN2_0_Poster_EN.pdf . So I do think it's good to offer this in D2. Oh I guess I've seen it in state machines too

Btw, is there anything you felt was missing from the CONTRIBUTING.md? (did you use it at all? smiley )

Yes, I just want to use the double circle in the accept state of state machine.
I think a style attribute is better than a new shape.

@alixander
Copy link
Collaborator

@OneRain233 how about double-border: true | false? not double, to avoid confusion with multiple

@OneRain233
Copy link
Contributor Author

@OneRain233 how about double-border: true | false? not double, to avoid confusion with multiple
Yes, double-border: true | false is better.

@OneRain233
Copy link
Contributor Author

Should the tag double-border be used only for circles or for all shapes? It may be strange for some shapes to use this tag? @alixander

@OneRain233
Copy link
Contributor Author

I have made double-border for the circle shape only.

@alixander
Copy link
Collaborator

alixander commented Dec 31, 2022

@OneRain233 I think for circles, ovals, squares, and rectangles. you can see how 3d is restricted

@OneRain233
Copy link
Contributor Author

Screenshot from 2022-12-31 15-58-41
Now, it looks like this.

Copy link
Collaborator

@alixander alixander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry for the delay in reviewing this. it looks like all the tests changed because you ran on go 1.19. Can you run with go 1.18 please?

The merge conflicts look like a lot but should mostly be just regenerating tests

Copy link
Collaborator

@alixander alixander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this turned out to look really nice, especially in sketch mode! Just a few more things:

Looks like you also need to account for when pad is 0.
d2 --pad 0 input.d2 gave me this:
Screen Shot 2023-01-21 at 2 32 26 PM

You can see here for example of fixing: #685

Also just more merge conflicts with tests and changelog, sorry about that.

@ejulio-ts
Copy link
Contributor

@OneRain233, yes.
You merge/rebase the current master and update the tests.

# Conflicts:
#	d2renderers/d2sketch/testdata/all_shapes/sketch.exp.svg
#	d2renderers/d2sketch/testdata/basic/sketch.exp.svg
#	d2renderers/d2sketch/testdata/child_to_child/sketch.exp.svg
#	d2renderers/d2sketch/testdata/class/sketch.exp.svg
#	d2renderers/d2sketch/testdata/connection_label/sketch.exp.svg
#	d2renderers/d2sketch/testdata/sql_tables/sketch.exp.svg
#	d2renderers/d2sketch/testdata/twitter/sketch.exp.svg
#	d2renderers/d2svg/appendix/testdata/diagram_wider_than_tooltip/sketch.exp.svg
#	d2renderers/d2svg/appendix/testdata/links/sketch.exp.svg
#	d2renderers/d2svg/appendix/testdata/tooltip_wider_than_diagram/sketch.exp.svg
#	d2renderers/d2svg/d2svg.go
#	e2etests/testdata/regression/dagre_edge_label_spacing/dagre/sketch.exp.svg
#	e2etests/testdata/regression/dagre_edge_label_spacing/elk/sketch.exp.svg
#	e2etests/testdata/regression/dagre_special_ids/dagre/sketch.exp.svg
#	e2etests/testdata/regression/dagre_special_ids/elk/sketch.exp.svg
#	e2etests/testdata/regression/elk_alignment/dagre/sketch.exp.svg
#	e2etests/testdata/regression/elk_alignment/elk/sketch.exp.svg
#	e2etests/testdata/regression/elk_img_empty_label_panic/dagre/sketch.exp.svg
#	e2etests/testdata/regression/elk_img_empty_label_panic/elk/sketch.exp.svg
#	e2etests/testdata/regression/elk_order/dagre/sketch.exp.svg
#	e2etests/testdata/regression/elk_order/elk/sketch.exp.svg
#	e2etests/testdata/regression/empty_sequence/dagre/sketch.exp.svg
#	e2etests/testdata/regression/empty_sequence/elk/sketch.exp.svg
#	e2etests/testdata/regression/only_header_class_table/dagre/sketch.exp.svg
#	e2etests/testdata/regression/only_header_class_table/elk/sketch.exp.svg
#	e2etests/testdata/regression/query_param_escape/dagre/sketch.exp.svg
#	e2etests/testdata/regression/query_param_escape/elk/sketch.exp.svg
#	e2etests/testdata/regression/sequence_diagram_name_crash/dagre/sketch.exp.svg
#	e2etests/testdata/regression/sequence_diagram_name_crash/elk/sketch.exp.svg
#	e2etests/testdata/regression/sequence_diagram_no_message/dagre/sketch.exp.svg
#	e2etests/testdata/regression/sequence_diagram_no_message/elk/sketch.exp.svg
#	e2etests/testdata/regression/sequence_diagram_span_cover/dagre/sketch.exp.svg
#	e2etests/testdata/regression/sequence_diagram_span_cover/elk/sketch.exp.svg
#	e2etests/testdata/regression/sql_table_overflow/dagre/sketch.exp.svg
#	e2etests/testdata/regression/sql_table_overflow/elk/sketch.exp.svg
#	e2etests/testdata/regression/unnamed_class_table_code/dagre/sketch.exp.svg
#	e2etests/testdata/regression/unnamed_class_table_code/elk/sketch.exp.svg
#	e2etests/testdata/sanity/1_to_2/dagre/sketch.exp.svg
#	e2etests/testdata/sanity/1_to_2/elk/sketch.exp.svg
#	e2etests/testdata/sanity/basic/dagre/sketch.exp.svg
#	e2etests/testdata/sanity/basic/elk/sketch.exp.svg
#	e2etests/testdata/sanity/child_to_child/dagre/sketch.exp.svg
#	e2etests/testdata/sanity/child_to_child/elk/sketch.exp.svg
#	e2etests/testdata/sanity/connection_label/dagre/sketch.exp.svg
#	e2etests/testdata/sanity/connection_label/elk/sketch.exp.svg
#	e2etests/testdata/stable/all_shapes/dagre/sketch.exp.svg
#	e2etests/testdata/stable/all_shapes/elk/sketch.exp.svg
#	e2etests/testdata/stable/all_shapes_multiple/dagre/sketch.exp.svg
#	e2etests/testdata/stable/all_shapes_multiple/elk/sketch.exp.svg
#	e2etests/testdata/stable/all_shapes_shadow/dagre/sketch.exp.svg
#	e2etests/testdata/stable/all_shapes_shadow/elk/sketch.exp.svg
#	e2etests/testdata/stable/arrowhead_adjustment/dagre/sketch.exp.svg
#	e2etests/testdata/stable/arrowhead_adjustment/elk/sketch.exp.svg
#	e2etests/testdata/stable/arrowhead_labels/dagre/sketch.exp.svg
#	e2etests/testdata/stable/arrowhead_labels/elk/sketch.exp.svg
#	e2etests/testdata/stable/binary_tree/dagre/sketch.exp.svg
#	e2etests/testdata/stable/binary_tree/elk/sketch.exp.svg
#	e2etests/testdata/stable/chaos1/dagre/sketch.exp.svg
#	e2etests/testdata/stable/chaos1/elk/sketch.exp.svg
#	e2etests/testdata/stable/chaos2/dagre/sketch.exp.svg
#	e2etests/testdata/stable/chaos2/elk/sketch.exp.svg
#	e2etests/testdata/stable/child_parent_edges/dagre/sketch.exp.svg
#	e2etests/testdata/stable/child_parent_edges/elk/sketch.exp.svg
#	e2etests/testdata/stable/circular_dependency/dagre/sketch.exp.svg
#	e2etests/testdata/stable/circular_dependency/elk/sketch.exp.svg
#	e2etests/testdata/stable/class/dagre/sketch.exp.svg
#	e2etests/testdata/stable/class/elk/sketch.exp.svg
#	e2etests/testdata/stable/code_snippet/dagre/sketch.exp.svg
#	e2etests/testdata/stable/code_snippet/elk/sketch.exp.svg
#	e2etests/testdata/stable/connected_container/dagre/sketch.exp.svg
#	e2etests/testdata/stable/connected_container/elk/sketch.exp.svg
#	e2etests/testdata/stable/constant_near_stress/dagre/board.exp.json
#	e2etests/testdata/stable/constant_near_stress/dagre/sketch.exp.svg
#	e2etests/testdata/stable/constant_near_stress/elk/board.exp.json
#	e2etests/testdata/stable/constant_near_stress/elk/sketch.exp.svg
#	e2etests/testdata/stable/constant_near_title/dagre/sketch.exp.svg
#	e2etests/testdata/stable/constant_near_title/elk/sketch.exp.svg
#	e2etests/testdata/stable/container_edges/dagre/sketch.exp.svg
#	e2etests/testdata/stable/container_edges/elk/sketch.exp.svg
#	e2etests/testdata/stable/dense/dagre/sketch.exp.svg
#	e2etests/testdata/stable/dense/elk/sketch.exp.svg
#	e2etests/testdata/stable/different_subgraphs/dagre/sketch.exp.svg
#	e2etests/testdata/stable/different_subgraphs/elk/sketch.exp.svg
#	e2etests/testdata/stable/direction/dagre/sketch.exp.svg
#	e2etests/testdata/stable/direction/elk/sketch.exp.svg
#	e2etests/testdata/stable/font_colors/dagre/sketch.exp.svg
#	e2etests/testdata/stable/font_colors/elk/sketch.exp.svg
#	e2etests/testdata/stable/font_sizes/dagre/sketch.exp.svg
#	e2etests/testdata/stable/font_sizes/elk/sketch.exp.svg
#	e2etests/testdata/stable/giant_markdown_test/dagre/sketch.exp.svg
#	e2etests/testdata/stable/giant_markdown_test/elk/sketch.exp.svg
#	e2etests/testdata/stable/hr/dagre/sketch.exp.svg
#	e2etests/testdata/stable/hr/elk/sketch.exp.svg
#	e2etests/testdata/stable/icon-label/dagre/sketch.exp.svg
#	e2etests/testdata/stable/icon-label/elk/sketch.exp.svg
#	e2etests/testdata/stable/images/dagre/sketch.exp.svg
#	e2etests/testdata/stable/images/elk/sketch.exp.svg
#	e2etests/testdata/stable/investigate/dagre/sketch.exp.svg
#	e2etests/testdata/stable/investigate/elk/sketch.exp.svg
#	e2etests/testdata/stable/large_arch/dagre/sketch.exp.svg
#	e2etests/testdata/stable/large_arch/elk/sketch.exp.svg
#	e2etests/testdata/stable/latex/dagre/sketch.exp.svg
#	e2etests/testdata/stable/latex/elk/sketch.exp.svg
#	e2etests/testdata/stable/li1/dagre/sketch.exp.svg
#	e2etests/testdata/stable/li1/elk/sketch.exp.svg
#	e2etests/testdata/stable/li2/dagre/sketch.exp.svg
#	e2etests/testdata/stable/li2/elk/sketch.exp.svg
#	e2etests/testdata/stable/li3/dagre/sketch.exp.svg
#	e2etests/testdata/stable/li3/elk/sketch.exp.svg
#	e2etests/testdata/stable/li4/dagre/sketch.exp.svg
#	e2etests/testdata/stable/li4/elk/sketch.exp.svg
#	e2etests/testdata/stable/links/dagre/sketch.exp.svg
#	e2etests/testdata/stable/links/elk/sketch.exp.svg
#	e2etests/testdata/stable/lone_h1/dagre/sketch.exp.svg
#	e2etests/testdata/stable/lone_h1/elk/sketch.exp.svg
#	e2etests/testdata/stable/markdown/dagre/sketch.exp.svg
#	e2etests/testdata/stable/markdown/elk/sketch.exp.svg
#	e2etests/testdata/stable/markdown_stroke_fill/dagre/sketch.exp.svg
#	e2etests/testdata/stable/markdown_stroke_fill/elk/sketch.exp.svg
#	e2etests/testdata/stable/md_2space_newline/dagre/sketch.exp.svg
#	e2etests/testdata/stable/md_2space_newline/elk/sketch.exp.svg
#	e2etests/testdata/stable/md_backslash_newline/dagre/sketch.exp.svg
#	e2etests/testdata/stable/md_backslash_newline/elk/sketch.exp.svg
#	e2etests/testdata/stable/md_code_block_fenced/dagre/sketch.exp.svg
#	e2etests/testdata/stable/md_code_block_fenced/elk/sketch.exp.svg
#	e2etests/testdata/stable/md_code_block_indented/dagre/sketch.exp.svg
#	e2etests/testdata/stable/md_code_block_indented/elk/sketch.exp.svg
#	e2etests/testdata/stable/md_code_inline/dagre/sketch.exp.svg
#	e2etests/testdata/stable/md_code_inline/elk/sketch.exp.svg
#	e2etests/testdata/stable/multiline_text/dagre/sketch.exp.svg
#	e2etests/testdata/stable/multiline_text/elk/sketch.exp.svg
#	e2etests/testdata/stable/multiple_trees/dagre/sketch.exp.svg
#	e2etests/testdata/stable/multiple_trees/elk/sketch.exp.svg
#	e2etests/testdata/stable/n22_e32/dagre/sketch.exp.svg
#	e2etests/testdata/stable/n22_e32/elk/sketch.exp.svg
#	e2etests/testdata/stable/number_connections/dagre/sketch.exp.svg
#	e2etests/testdata/stable/number_connections/elk/sketch.exp.svg
#	e2etests/testdata/stable/one_container_loop/dagre/sketch.exp.svg
#	e2etests/testdata/stable/one_container_loop/elk/sketch.exp.svg
#	e2etests/testdata/stable/one_three_one_container/dagre/sketch.exp.svg
#	e2etests/testdata/stable/one_three_one_container/elk/sketch.exp.svg
#	e2etests/testdata/stable/overlapping_image_container_labels/dagre/sketch.exp.svg
#	e2etests/testdata/stable/overlapping_image_container_labels/elk/sketch.exp.svg
#	e2etests/testdata/stable/p/dagre/sketch.exp.svg
#	e2etests/testdata/stable/p/elk/sketch.exp.svg
#	e2etests/testdata/stable/pre/dagre/sketch.exp.svg
#	e2etests/testdata/stable/pre/elk/sketch.exp.svg
#	e2etests/testdata/stable/self-referencing/dagre/sketch.exp.svg
#	e2etests/testdata/stable/self-referencing/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_actor_distance/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_actor_distance/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_all_shapes/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_all_shapes/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_distance/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_distance/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_groups/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_groups/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_long_note/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_long_note/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_nested_groups/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_nested_span/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_nested_span/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_note/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_note/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_self_edges/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_self_edges/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_simple/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_simple/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_span/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagram_span/elk/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagrams/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sequence_diagrams/elk/sketch.exp.svg
#	e2etests/testdata/stable/sql_tables/dagre/sketch.exp.svg
#	e2etests/testdata/stable/sql_tables/elk/sketch.exp.svg
#	e2etests/testdata/stable/square_3d/dagre/sketch.exp.svg
#	e2etests/testdata/stable/square_3d/elk/sketch.exp.svg
#	e2etests/testdata/stable/straight_hierarchy_container/dagre/sketch.exp.svg
#	e2etests/testdata/stable/straight_hierarchy_container/elk/sketch.exp.svg
#	e2etests/testdata/stable/stylish/dagre/sketch.exp.svg
#	e2etests/testdata/stable/stylish/elk/sketch.exp.svg
#	e2etests/testdata/stable/text_font_sizes/dagre/sketch.exp.svg
#	e2etests/testdata/stable/text_font_sizes/elk/sketch.exp.svg
#	e2etests/testdata/stable/tooltips/dagre/sketch.exp.svg
#	e2etests/testdata/stable/tooltips/elk/sketch.exp.svg
#	e2etests/testdata/stable/transparent_3d/dagre/sketch.exp.svg
#	e2etests/testdata/stable/transparent_3d/elk/sketch.exp.svg
#	e2etests/testdata/stable/unnamed_only_height/dagre/sketch.exp.svg
#	e2etests/testdata/stable/unnamed_only_height/elk/sketch.exp.svg
#	e2etests/testdata/stable/unnamed_only_width/dagre/sketch.exp.svg
#	e2etests/testdata/stable/unnamed_only_width/elk/sketch.exp.svg
#	e2etests/testdata/stable/us_map/dagre/sketch.exp.svg
#	e2etests/testdata/stable/us_map/elk/sketch.exp.svg
#	e2etests/testdata/todo/container_child_edge/dagre/sketch.exp.svg
#	e2etests/testdata/todo/container_child_edge/elk/sketch.exp.svg
#	e2etests/testdata/todo/font_sizes_containers_large/dagre/sketch.exp.svg
#	e2etests/testdata/todo/font_sizes_containers_large/elk/sketch.exp.svg
#	e2etests/testdata/todo/font_sizes_large/dagre/sketch.exp.svg
#	e2etests/testdata/todo/font_sizes_large/elk/sketch.exp.svg
#	e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/dagre/sketch.exp.svg
#	e2etests/testdata/todo/sequence_diagram_actor_padding_nested_groups/elk/sketch.exp.svg
#	e2etests/testdata/todo/shape_set_width_height/dagre/sketch.exp.svg
#	e2etests/testdata/todo/shape_set_width_height/elk/sketch.exp.svg
#	e2etests/testdata/todo/tall_edge_label/dagre/sketch.exp.svg
#	e2etests/testdata/todo/tall_edge_label/elk/sketch.exp.svg
@alixander
Copy link
Collaborator

@OneRain233 looks like all the commits were pulled in

@OneRain233
Copy link
Contributor Author

I think the issue #685 is solved. Now it looks like this.
test
test1

Copy link
Collaborator

@alixander alixander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ready to merge after 1 minor thing.

@alixander
Copy link
Collaborator

looks like one more merge + test regeneration plz @OneRain233

Copy link
Collaborator

@alixander alixander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we'll just merge and fix the conflict in another commit on master. Thank you @OneRain233 ! Sorry for the delays in this one

@alixander alixander merged commit bea8a47 into terrastruct:master Jan 27, 2023
@alixander alixander mentioned this pull request Jan 27, 2023
@nhooyr
Copy link
Contributor

nhooyr commented Feb 10, 2023

@alixander note for the future, github normally automatically gives you write access to a contributor's branch unless the contributor has declined your access.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants