Give the curve editor some love

[xxSeys1]

Issue description:

I've just used the curve editor for the first time and my impression so far is that it just works. "Just" as in "barely" (I'm exaggerating here obv.).

I've noted down all the issues and flaws I could find and also some suggestions on how to improve it when I had any.

Float Precision Errors

In the image above you can see the number 0.9000000004 being displayed. While this may be correct, no one will ever tweak their curves to an increment that small. Also this is probably an error related to float precision, so I suggest rounding the values shown in the curve editor to two decimal places.

Enter/ Edit Point Coordinates Manually

There is a way to do this by right clicking on a point and then clicking Edit Keyframe or by double clicking on a keyframe, but I think entering precise values for a point is something done so frequently, that it should not be hidden away behind a double click or in a right click menu.

I think having 2 float value boxes present in one corner of the curve editor, at least when a curve point is selected, would be a good and simple fix for this issue.

Zoom

Currently the editor zooms towards the middle of the editor. In my opinion we should change that to zoom towards the current mouse pointer location on the curve. This would not only allow for more precise control over the positioning in the editor but would also remove the need to constantly pan the editor while zooming.

Resizing the editor

Allow the curve editor to be resized in vertically. You can already resize it horizontally by changing the width of the Properties panel. If this is too much work then I suggest implementing this proposal instead and make the curve editor window resizable.

Curve Presets

(This image applies to this topic but also Resizing The Editor)

Provide some of the most commonly used curves as presets the user can click on to instantly set the curve to whatever preset selected. The screenshot above from this issue shows a good implementation of this. From what I can tell the most commonly used curve types are:

• flat
• linear
• ease in
• ease out
• ease in & out

Jitter When Panning

https://github.com/FlaxEngine/FlaxEngine/assets/111653551/6e51e6ee-d402-41a4-a8f2-473803ff1a7e

When panning around in the editor, there is some jitter as shown in the video above. This is only visual from what I can tell but still worth fixing.

DPI When Panning

In my opinion decreasing the DPI when panning the editor is a good idea, but it's currently getting decrease by too much. So make this a bit less. This could be made an editor setting as it's something subjective.

Wrap Mouse When Panning

When panning the curve editor, wrap the mouse inside of the part that shows the curve. This does not add any functionality but would add a nice polishing touch in my opinion.

Editor Folding

As I already described in this issue, the fact that the Properties panel closes everything you had unfolded once you save makes it hard to work with (curves). You have to expand the editor every time after you saved, which some people (me included) do automatically and subconsciously quite often.

Zoom Shortcut

Zooming in and out of the curve editor is something done probably very often, more often than scrolling horizontally at least. So I suggest changing the default zoom shortcut to MMB up/ down instead of CTRL + MMB up/down. Scrolling could be remapped to CTRL + MMB up/down instead.

Tangent handle scale

Not zoomed in Zoomed in When zoomed into the curve editor, the tangent handles can make it hard to see the grid lines, because of which it becomes harder to position your points and the points you can grab can get out of frame. I suggest keeping the tangent handles at the same scale independently of how far you are zoomed in.

Snapping

It's quite hard to position the points at exact values, partly because you (as previously mentioned) can't enter manual coordinates and because the editor is lacking a snapping function. Grid bases snapping that can be toggled with a ui button and temporarily enabled with CTRL would help here.

F To Center Curve and fix Center curve.

When pressing F in any other viewport it centers on the current selection. I think implementing something similar for the curve editor where you press F and the view snaps to show the full curve could be very nice when you just made some up close adjustments to your curve and then want to view the curve as a whole. I know that there is a function called Show whole curve in the right click menu, but it's still not a shortcut and most importantly it does it's job too well. As you can see in the image above there is no padding on any side of the editor so you can't really see the whole curve. Also sometimes parts of the curve are cut off, so the "doing it's job too well" thing only applies some times. What I expected vs. what I got

Tangent handles reset on drag

https://discord.com/channels/437989205315158016/1231709429838250115/1235634404194517082

https://github.com/FlaxEngine/FlaxEngine/assets/111653551/6bc244b5-8acd-4215-88ae-285dd65524f2

See also: #1083

Steps to reproduce:

1. Create a new curve with public BezierCurve<float> Curve
2. Use the curve editor in the Properties panel

Minimal reproduction project:

none

Flax version:

1.8

[mafiesto4]

I scheduled some dev time related to curve editor for 1.9 so we should tackle all of those issues soon. Thanks for a great summary.