slidevjs / slidev

Presentation Slides for Developers
https://sli.dev
MIT License
33.4k stars 1.36k forks source link

Bezier curve and arrow #1735

Open zillionare opened 4 months ago

zillionare commented 4 months ago

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

KermanX commented 4 months ago

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

zillionare commented 4 months ago

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.