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.

Sign up for GitHub

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

Jump to bottom

Customizable shape for the Line Arrowheads #380

Open
zweek opened this issue Feb 19, 2023 · 6 comments · May be fixed by #629
Open

Customizable shape for the Line Arrowheads #380

zweek opened this issue Feb 19, 2023 · 6 comments · May be fixed by #629
Assignees
@ksassnowski
Labels
a-2d Relates to the 2d package b-enhancement New feature or request c-accepted The issue is ready to be worked on

Comments

@zweek
Copy link

zweek commented Feb 19, 2023

Description
Right now there seems to be no way to customize the appearance of the arrowheads (beyond the arrowSize property), so they are always drawn as the same right triangle shape

Proposed solution
To have maybe 2 extra properties - one for 'sharpness' that controls the angle at the tip and one radius property for rounding the corners of the triangle. That way you could tweak those properties to get an arrowhead that could look like the one in the screenshot below

Additional context
image
@strau0106
Copy link

strau0106 commented Feb 19, 2023 •
edited

I'd propose that you can pass another shape object as the Arrow Head. Because otherwise we would reimplement features that already exist.

Additionally I think the existing Shape class would need to have an additional property, something like a "connecting point" such that the arrow head shape is aligned to the Line where the connecting point is on the end/start of the line

@zweek
Copy link
Author

zweek commented Feb 19, 2023

Yeah I like that idea a lot more, actually. That also opens up a lot more possibilities for what you can do with Lines if you can pass in whatever shape you want

@strau0106
Copy link

Actually not a Shape but a Node in general, considering that right now triangles and other non 4-edged shapes are made with lines

@aarthificial
Copy link
Contributor

Line extends Shape but I agree that we should accept any Node.

I propose extending the startArrow endArrow properties to Node | bool.
The Node.draw method can be used to reuse the drawing logic of a Node. This method assumes that the canvas' matrix has been already transformed to the node's local space ([0, 0] being the center of the node). This way we won't need to reparent anything.

@aarthificial aarthificial removed their assignment Feb 20, 2023
@aarthificial aarthificial added b-enhancement New feature or request c-accepted The issue is ready to be worked on a-2d Relates to the 2d package labels Feb 20, 2023
@strau0106
Copy link

strau0106 commented Feb 20, 2023 via email •
edited

@strau0106
Copy link

The problem I'm seeing, is that the draw function on a Node is protected. Thus I can't call it from the drawShape function in Line for the respective ArrowHeads

@strau0106 strau0106 mentioned this issue Feb 20, 2023
Closed
@ksassnowski ksassnowski assigned ksassnowski and unassigned strau0106 Apr 28, 2023
@ksassnowski ksassnowski linked a pull request Apr 28, 2023 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ksassnowski ksassnowski

Labels
a-2d Relates to the 2d package b-enhancement New feature or request c-accepted The issue is ready to be worked on
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(2d): custom arrow heads ksassnowski/kai-video
4 participants
@ksassnowski @strau0106 @aarthificial @zweek