slidev
slidev copied to clipboard
Bezier curve and arrow
Is your feature request related to a problem? Please describe.
As an instructor, I heavily utilize Slidev and have even self-taught myself to create many components. I desire a feature that, since it's already built-in, I hope the official team can expand upon. This component is the Arrow. When we use an Arrow, we must define its start and end points, which is perfectly reasonable, but it often requires several adjustments to accurately position it. Could the component be designed to be draggable, outputting its coordinates to the console each time it's moved (or alternatively, displaying them on screen based on an option)? This way, the author could write these coordinates into the slides.
Describe the solution you'd like
- when define an Arrow, if there's no coordinates specified, make the Arrow draggable
- when the Arrow is dragged, show its coordinates on the console
- or, controlled by an option, output the coordinates on the screen. By default the option is off.
- even more, allow add control point and make the line is a bezier curve
Describe alternatives you've considered NA
The draggable feature has been implemented: https://sli.dev/guide/draggable.html#draggable-arrow
This is amazing! I had read the part in the doc before, but I don't find when and where to use it. Actually your guys implemention is better than I can imaging. I don't know the data points can be synced back directly.
If I'd like to implement another one, how could I do this(sync data to slides editor)?
By the way, any possibility to add Bezier curve controls? which will make the curve look very much sexier.
Hi, let me share https://github.com/whitphx/slidev-addon-fancy-arrow , an arrow component I recently created for my use cases similar to yours. It's different from what's proposed here (snapped to an element but not draggable, arc curve but not Bezier) but it might be useful.