Skip to content

TimeLineCells rewrite part 1 #1880

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 46 commits into
base: master
Choose a base branch
from

Conversation

MrStevns
Copy link
Member

@MrStevns MrStevns commented Sep 26, 2024

This PR consists of a rewrite of the timeline cells part where:

  • TimeLineCells has been split into numerous components:
    • TimeLineLayerHeaderWidget
      This component currently consist of a single button which is the layer visibility dot but has been built so it can be extended trivially
      • LayerVisibilityButton
        A shared component that can either be used to control the local visibility state or the global, depending on the context it's created with.
    • TimeLineLayerList
      a full rewrite of the layer logic of TimeLineLayerCells, now built using these widgets.
      The layer list also takes care of delegating information back to the track list and handles the dragging functionality of each cell.
      • TimeLineBaseCell
        A base call for the different potential cell types, although right now it's only used for TimeLineLayerCell.
      • TimeLineLayerCell
        A derivetive of TimeLineBaseCell that is mostly a container for the TimeLineLayerCellEditorWidget. It sets the base geometry for the editor widget when created and takes care of cleaning it up when removed
      • TimeLineLayerCellEditorWidget
        The component that actually draws the layer cell. Now a QWidget with a simple QHBoxLayout. The editor widget also contains a new widget, namely LineEditWidget.
        • LineEditWidget
          A generic component that can be used to edit a line of text, exists because Qt's own QLineEdit does not auto select the entire text when used...
          For the timeline layer component, this widget can be used to edit the name of the layer, by double-clicking.
      • TimeLineLayerCellGutterWidget
        The component that draws the layer gutter, which is either shown or hidden but always exist as a overlay widget on top of the list.
    • TimeLineTrackHeaderWidget
      The header component consists of drawing of track numbers, small scrubber and the onion skin logic.
      The logic has been left mostly intact.
    • TimeLineTrackList
      TimelineTrackList is mostly a refactoring of the existing logic in TimeLineCells that handled the track, frame visualization and selection logic.

Here's what the timeline look like now:
image

A bunch of other changes and improvements made along the way:

  • The vertical scrollbar has been moved so it's next to the track cells rather than the entire timeline.
  • The visibility dot and the layer type icon are now drawn in higher resolution for HDPI displays.
  • The header visual has been made gray across both lists, separating the track numbers from the track cells a bit more.
  • The visibility dot has been made a tad bigger, 10 pixels instead of nine, which aligns better when the widgets are placed on whole pixels. Before it looked slightly offset
  • The layer gutter has been improved in a few aspects, both visually and functionally. The gutter will only be displayed now when you can move the layer to a different position. It has also been made slightly larger and easier to detect.
  • The camera layer at the bottom can no longer be dragged.
  • The input dialog no longer appears when creating a new layer, instead you have to double-click on the layer label to change it. For the camera, you can still double-click on the camera icon to change its camera settings and name.

You can see the improvements in action here:
timeline-rewrite

TLDR

The left part of the timeline, namely the layer cells has been rewritten to use widgets, are now easier to maintain and extend.
The right part of the timeline, namely the track cells have been left mostly untouched and in large parts have just been moved into it's own component but still uses QPainter and contain the same logic as before.

fixes #1849

This simplifies the painting of layers by moving the layer header into its own widget.

The list is no longer based on our own scrolling logic but has instead been put into a QScrollArea.
Because the map we're iterating on has been detached and erased in the meantime.
and re-implement vertical scrolling
So that we can easily extend this interface in the future
- Gutter now only appears when the layer will move to a different position
- Bottom layer (camera layer) cannot be dragged anymore
- Made the gutter visual more clear
@DearFox
Copy link

DearFox commented Feb 17, 2025

Oh, that sounds cool!
Can I download build this somewhere to try it out?

@J5lx J5lx self-assigned this Feb 18, 2025
@MrStevns
Copy link
Member Author

Oh, that sounds cool! Can I download build this somewhere to try it out?

Not at the moment but I'll look into it.

@DearFox
Copy link

DearFox commented Apr 22, 2025

swr45udtyi
Renaming layers works a little weird and unintuitive at the moment.
You can select text with the mouse cursor outside of the rename state, but during renaming, attempting to select text or move the text pointer will simply reset the layer's rename state.
(on Windows)

@MrStevns
Copy link
Member Author

Nice catch! I'll look into fixing that. Thanks for testing @DearFox

@MrStevns
Copy link
Member Author

MrStevns commented Apr 26, 2025

Should be fixed now.

I've also made some other changes so that:

  • You cannot select the text while you're not editing
  • There's now always a visual distinction for focused layer items.
  • The context menu is only available in edit mode.
  • You can remove focus by clicking anywhere.

Builds:
Windows
macOS
Linux

@DearFox
Copy link

DearFox commented Apr 26, 2025

Thanks, it works pretty intuitively now.
Here's a little demo for anyone who wants to see how it works:
se4ru6dti

Also, I just noticed that for the camera layer you can still open the dialog to change the name and resolution of the frame.
изображение
To do this, you need to double-click on the layer icon, or on the space above or below the text. I think there are about a couple of pixels there that are not affected by the text hitbox.
изображение

I also just discovered a slightly strange feature, when changing text the ESC key in some conditions works like Ctrl + z
ewr4u6dtuki
In this example, first I rename the layer several times and press Enter to confirm the rename. But then I start renaming and reset it using ESC. You can see that the text has a gray background. At this point, if the layer name was not changed, it will revert to the previous version, as if the user used ctrl+z.

@DearFox
Copy link

DearFox commented Apr 26, 2025

изображение
I think it might be a good idea to move the resolution change settings to this settings menu.

Although I don't really like this logic of using tools to access some layer functions. But then we could remove this weird pop-up menu that blocks work with the program.

Ideally, there should be a separate floating window with layer and tool settings, roughly as it is implemented in Flash\Animate. At least, it seems to me that such logic is a bit more intuitive. Although in the case of Flash\Animate, there is a kind of division of focus. That is, when the user selects a tool, he sees the settings of this tool. When the user clicks on a layer in the timeline window, he sees the settings of this layer, but he still has his tool selected. And the user only needs to start drawing or using the previously selected tool on the canvas, so that the settings change again from the layer settings to the settings of the selected tool.
Example:
e56uetdyj
Sorry, I don't know how in Animate I can change the interface language to English.

@MrStevns
Copy link
Member Author

MrStevns commented Apr 26, 2025

I've made another fix for the undo behavior after editing finished. Now it should behave more like a cancel function.

As for the camera dialog, yes it's intentionally still accessible through the the camera layer, by pressing on the icon or near it. While I know that some applications like Flash, OpenToonz and possibly also ToonBoom just add another panel, I don't want to add that kind of clutter to the interface, even if it is temporary. There needs to be a very good reason for a feature to exist as a docked widget.

The "Options" panel changes depending on the tool for the given layer, compared to the camera resolution which affects all key frames. While we could maybe add a Layer options panel, we would need to have more than one or two things for each layer to justify it being a docked widget in my opinion. There's also still no guarantee that this would solve our infamous problem with the dialog being difficult to access since you would still need to click on the camera layer to access it.

I'll think about it... 🤔
For now it's still unsolved, at least in this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Needs Review
Development

Successfully merging this pull request may close these issues.

Idea - Improvement for working with Layers (naming and creating a new layer)
3 participants