Timeline based timing screen

[minetoblend]

I want to propose replacing the current timing screen with a timeline-based ui. While the current spreadsheet-like approach works I think a timeline would bring several improvements. I've been working on a prototype of it to see how well this idea works and I like how interacting with timing points this way feels a lot so far. The prototype isn't using the lazer code base though I think I could make one for lazer fairly quickly if this proposal is deemed worth exploring. I can also provide a standalone version of the current prototype if needed before I move on to a lazer version.

Keep in mind that the types of layers present in this image don't really map one-to-one to lazer's control points (i.e. slider velocity), as it has different control point types compared to my own editor.

Basic controls

While not present in the screenshots, I think the timeline should be paired with the current inspector window of the timing screen, which would reside next to it and remain mostly unchanged. I have some concerns with the inspector regarding selecting multiple control points, as those could be having different values. This could be solved by what other programs do often and displaying the values as "mixed", or like stable does for the control point time, which replaces it with a text field to move the selected control points by a given time span in that case.

For the basic controls I want to propose the following:

Click a control point to select it, the control key can be used for selecting multiple control points.

Screen.Recording.2024-12-25.at.00.12.36.mov

Double click a control point to select all points at the same time.

Screen.Recording.2024-12-24.at.23.52.36.mov

Change the time of control points by dragging them in the timeline. Holding shift will disable snapping to the beat snap divisor. For timing points the snapping behavior could be inverted since you probably don't want them to snap by default (there's also concerns about the timing point snapping to itself). The inspector can be used for entering precise values.

Screen.Recording.2024-12-24.at.23.48.12.mov

Hovering over another control point while dragging could snap to the hovered control point's time.

Screen.Recording.2024-12-25.at.00.15.28.mov

Placing control points

For placing control points I propose having 2 modes/tools which can be selected next to the timeline. When the placement tool is active, a preview of the new control point shows up and clicking anywhere on the timeline will place it. I experimented with the control key temporarily activating the placement mode too, however this would create a conflict with using ctrl for selecting multiple control points (unless maybe shift is used for that).

Screen.Recording.2024-12-25.at.00.10.25.mov

Inline values

Values associated with each control point could be displayed, and editable in the timeline. They should of course still be editable through the inspector though. I'm kinda torn on having them editable in the timeline, as it tends to make them use up more space, however I do think that they should be displayed either way.

Screen.Recording.2024-12-25.at.00.01.44.mov

Timing point controls

For timing points, dragging the timeline ticks could be used as a way of changing the bpm, allowing for a quick way of aligning the ticks with the waveform visually.

Screen.Recording.2024-12-24.at.23.43.01.mov

Just like when dragging a control point, hovering over another control point while dragging could also snap to the hovered control point to give a neat way of making sure the beats align between two timing points when dealing with variable bpm.

Screen.Recording.2024-12-25.at.00.16.15.mov

Copy-paste

Iirc you can't copy-paste timing points at all right now in lazer (kind of not feasable since you can't select multiple control points currently), however in stable you can but it's kind of confusing. With a timeline copy-pasting would be much more intuitive.

Screen.Recording.2024-12-24.at.23.24.55.mov

Kiai

I'm aware that effect points hold more than just the kiai status, but I still think it's worth looking into.
When placing the control point, dragging could set both the start & end point, allowing for a quick way of placing down a specific duration during which the state should change.

Screen.Recording.2024-12-25.at.00.49.55.mov

Remove the need for control point groups

From what I can tell from the code base, control point groups only really exist for the timing screen right now. Giving each control point type it's own timeline would allow treating them as separate instead of grouping them, and would allow removing a lot of complexity from the control point data structures.

Two-dimensional keyframes

Keyframes that essentially just hold 1 (ranged) floating point value could use the y-axis to add a quicker way of changing the values.

Screen.Recording.2024-12-24.at.23.35.42.mov

This is more of a toy I made just because I can but it'd be fairly simple to expand this to stuff like easing functions or even cubic-bezier easing. Could be useful if a timeline like this were used for storyboarding though.

Screen.Recording.2024-12-24.at.23.36.20.mov

[minisbett]

This would be an insane addition, I love this idea so much