slidev icon indicating copy to clipboard operation
slidev copied to clipboard

Bezier curve and arrow

Open zillionare opened this issue 1 year ago • 3 comments

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

  1. when define an Arrow, if there's no coordinates specified, make the Arrow draggable
  2. when the Arrow is dragged, show its coordinates on the console
  3. or, controlled by an option, output the coordinates on the screen. By default the option is off.
  4. even more, allow add control point and make the line is a bezier curve

Describe alternatives you've considered NA

zillionare avatar Jul 06 '24 15:07 zillionare

The draggable feature has been implemented: https://sli.dev/guide/draggable.html#draggable-arrow

kermanx avatar Jul 06 '24 15:07 kermanx

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.

zillionare avatar Jul 06 '24 16:07 zillionare

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.

whitphx avatar Mar 24 '25 14:03 whitphx