feat(2d): custom arrow heads for Lines (Curves) (#380) #389
Conversation
packages/2d/src/components/Line.ts
Outdated
| if (this.endArrow() instanceof Node) { | ||
| const endArrow = this.endArrow() as Node; | ||
| endArrow.position(endPoint); | ||
| context.translate(endPoint.x, endPoint.y); |
There was a problem hiding this comment.
We also need to find a way to scale the arrows down when there's not enough space on the line.
Otherwise animating the start/end parameters will be cumbersome.
There was a problem hiding this comment.
Try running the following example:
import {makeScene2D} from '@motion-canvas/2d';
import {Line} from '@motion-canvas/2d/lib/components';
import {all, waitFor} from '@motion-canvas/core/lib/flow';
import {createRef} from '@motion-canvas/core/lib/utils';
export default makeScene2D(function* (view) {
const line = createRef<Line>();
view.add(
<Line
ref={line}
points={[
[-400, 0],
[400, 0],
]}
lineWidth={8}
stroke={'white'}
startArrow
endArrow
arrowSize={100}
/>,
);
yield* all(
line().start(1, 3),
line().end(0, 3),
);
yield* waitFor(5);
});| Description | Image |
|---|---|
| I exaggerated the size to better illustrate the effect. |  |
| Notice that when the line passes through the point of zero length the arrows get scaled down |  |
| Without that, it results in this ugly effect: |  |
This is done automatically so that you don't need to animate arrowSize each time this happens.
There was a problem hiding this comment.
Should we do this by scaling or "cutting off" the node, if it overlaps?
There was a problem hiding this comment.
I'm really sorry, I didn't notice your comment.
I think scaling down the node would be better because it would work even if the arrow exceeds the actual line (for example a circle whose center is placed at the end of the line).
You should be able to use Node.cacheBBox() to get the size of the node so that you know when to start scaling it down.
|
@strau0106 Are you still interested in finishing this PR? If not, I'd be happy to take it over from here. |
|
Hi!
I had a lot going on irl so I forgot about it completely.... Sorry! I‘ll get this done in a few hours/days
~strau
… Am 30.03.2023 um 07:44 schrieb Kai Sassnowski ***@***.***>:
@strau0106 Are you still interested in finishing this PR? If not, I'd be happy to take it over from here.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.
|
|
No pressure! I just wanted to make sure the work you've done so far doesn't go to waste. Regarding the merge conflicts: we recently extracted a |
|
I‘ll take a look at it! Thanks for the heads up :)
… Am 30.03.2023 um 07:56 schrieb Kai Sassnowski ***@***.***>:
No pressure! I just wanted to make sure the work you've done so far doesn't go to waste.
Regarding the merge conflicts: we recently extracted a Curve base class that Line now extends from (#594). So these changes should also go into the Curve class instead of Line. You should be able just cut/paste them from Line to Curve, though.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.
|
2fcf225 to
1626811
Compare
|
@ksassnowski If this can wait for the next two weeks, I'll finish this PR. If not I am happy to leave it to you |
| * | ||
| * @remarks | ||
| * If `true`, a default arrow will be drawn. This can be used with the {@link arrowSize} signal to change the size of the arrow. | ||
| * If set to a {@link Node}, the node will be used as the arrow. This can be used to edraw a custom arrow. If a custom arrow is used, the {@link arrowSize} signal will be ignored. |
There was a problem hiding this comment.
| * If set to a {@link Node}, the node will be used as the arrow. This can be used to edraw a custom arrow. If a custom arrow is used, the {@link arrowSize} signal will be ignored. | |
| * If set to a {@link Node}, the node will be used as the arrow. This can be used to draw a custom arrow. If a custom arrow is used, the {@link arrowSize} signal will be ignored. |
| * | ||
| * @remarks | ||
| * If `true`, a default arrow will be drawn. This can be used with the {@link arrowSize} signal to change the size of the arrow. | ||
| * If set to a {@link Node}, the node will be used as the arrow. This can be used to edraw a custom arrow. If a custom arrow is used, the {@link arrowSize} signal will be ignored. |
There was a problem hiding this comment.
| * If set to a {@link Node}, the node A016 will be used as the arrow. This can be used to edraw a custom arrow. If a custom arrow is used, the {@link arrowSize} signal will be ignored. | |
| * If set to a {@link Node}, the node will be used as the arrow. This can be used to draw a custom arrow. If a custom arrow is used, the {@link arrowSize} signal will be ignored. |
|
@strau0106 Fine with me. Take your time 👍 |
|
@strau0106 Any updates on this? My offer to take over still stands if you're too busy to continue working on this PR at the moment 👍 |
|
Feel free yes. I‘m sorry.
… Am 28.04.2023 um 11:10 schrieb Kai Sassnowski ***@***.***>:
@strau0106 Any updates on this? My offer to take over still stands if you're too busy to continue working on this PR at the moment 👍
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.
|
|
Then I'll take it from here. Nothing to be sorry about. Thanks for your work so far! |
|
Closing this in favor of #629 |
Hi Everybody,
This PR allows custom arrow heads for lines via signals, as requested in #380.
Best,
Strau