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

d2target: add support for cross arrowhead #2190

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

MxHonesty
Copy link

Add support for cross arrowhead in d2target (and d2sketch).

closes #2028

Why i chose polygon
In order to keep the look of the suggestion i went with a rotated polygon instead of simple crossing lines. Would appreciate feedback on this.

End-to-End Tests:

  • Added a new test case for CrossArrowhead in e2etests/stable_test.go.
  • Created test data for CrossArrowhead in e2etests/testdata/files/cross_arrowhead.d2.
  • Added expected output for CrossArrowhead tests in e2etests/testdata/txtar/sketch-cross-arrowhead/dagre/board.exp.json and e2etests/testdata/txtar/sketch-cross-arrowhead/elk/board.exp.json.
  • Included CrossArrowhead in the e2etests/txtar.txt file.

Images

normal
sketch

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.

💯 PR!

Do you mind adding a line to next.md?


I know you emulated what MermaidJS does with the cross, as depicted in the issue, but I wonder if that's ideal. Maybe Mermaid's implementation is not ideal, and a cross really should look like an x instead of this snowflake-look (*) with the endpoint extending all the way. I personally haven't used this endpoint before, so I don't know the answer. What do you think? Also cc @bo-ku-ra who originally filed the issue.

Screenshot 2024-11-04 at 10 38 09 PM

@bo-ku-ra
Copy link
Contributor

bo-ku-ra commented Nov 5, 2024

excellent! @MxHonesty @alixander

the japanese are unique. most Japanese read the following.
'◯' means 'OK', 'correct', 'true', 'pass' and so on.
'x' means 'NG', 'wrong', 'false', 'fail' ...

e.g.

source-arrowhead: OK {
shape: circle
style.filled: false
}

target-arrowhead: NG {
shape: cross
}

what is better for non-Japanese?
looking to the future, there are three patterns.

image

@alixander
Copy link
Collaborator

@bo-ku-ra Good insight, X has distinct meaning. I think the O for ✅ and X for 🚫 is pretty common. In which case * is different from X.

How did you get that screenshot from Mermaid? What's the code for it?

@bo-ku-ra
Copy link
Contributor

bo-ku-ra commented Nov 5, 2024

@alixander

How did you get that screenshot from Mermaid? What's the code for it?

#2028 (comment)
image

@bo-ku-ra
Copy link
Contributor

bo-ku-ra commented Nov 5, 2024

I think the O for ✅ and X for 🚫 is pretty common.

yes, i agree.

surprisingly, '✅' is the same as 'x' in japan.
'x' and '✅' means 'NG', 'wrong', 'false', 'fail' ...

e.x.
do you know DORAEMON?

image

@alixander
Copy link
Collaborator

Hah, interesting.

Well in any case, I think D2's cross should be a true X shape.

E.g. the sketch version looks right

Screenshot 2024-11-05 at 3 01 25 PM

but the non-sketch version looks like a snowflake

Screenshot 2024-11-05 at 3 01 28 PM

@MxHonesty could you investigate that in this PR? I think the circle is an example of where the connection path doesn't extend all the way, instead stopping at the arrowhead shape.

@MxHonesty
Copy link
Author

Sure, i will try doing it this way!

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.

[arrowhead] support cross
3 participants