Keyframe repositionaing is finally here!

(the second time I attach the wrong video to the devlog)
Timeline is about to be finished. Now you can select keyframes and reposition them. Press shift to add to the selection. Use the selection box to select many keyframes at once. And you can also select keyframes from multiple layers at once.

some Quality of life changes

Keyframe selection works by searching for the nearest keyframe inside a search radius on the same layer. At first I made it select the keyframe at the exact frame the mouse is currently at, but that became very annoying when zooming out as the frame width gets smaller.

Viewport does not update in real time on every mouse move while dragging layers or keyframes, but instead uses some tricks to delay heavy operations until the the mouse button is released. One trick is to when I drag a layer, I only shift the layer drawing, but I do not commit the changes to keyframes yet. To appear as if it was live updating, I send a signal to the viewport to show the viewport a few frames later or prior than the actual current frame is. For keyframe dragging, I actually don’t have a work around. Cavalry uses some visuals like arrows to indicate how that change in keyframes corresponds to changes in viewport but I’m not sure if I’m going to implement it this way (open for suggestions)

Additions

• Added a whilte outline to selected keyframes
• Click on a keyframe to select it; Click and drag to reposition it
• Drag over keyframes to select many keyframes using the selection box (called a rubber band)
• Use shift in combination of the previous two moves to add to the existing selection
• Time cursor now allows mouse events through instead of blocking it
• Made pixel level adjustments to layer resizing handles

Next, I want to add layer reordering and multi-layer/multi-path selection, then I could consider the timeline milestone finished (maybe I add color coding and tags). I want to move on to the graph editor because I think I spent too much time on polishing the timeline and the event is ending soon (I don’t think 9 weeks are enough :|)

More layer manipulation!

This was, I think, the most enjoyable coding session in stardance because coding went smoothly with almost no headaches figuring out why things do not work. It also brought many new features after many devlogs of mostly debugging.

features

• visibility button to show/hide paths
• Dragging and resizing layers so the path only renderes at the given boundaries
• Dragging layers outside of the visible scroller area expands the scroller size (no current way of retracting it. Open for suggestions :D)
• Different mouse cursors for different layer manipulations

I’m thinking now of two missing features of the timeline: dragging keyframes, and reordering layers, then I might consider the timeline milestone finished (maybe will need some cleaning up) and I could start on the next milestone: graph editors

Help needed!

I just noticed that my previous devlog videos are choppy/laggy. That was because of my screen recording software (I used the Win 11 snipping tool because it was convinient). Can someone suggest a fix or something? I don’t want to install a new software if not necessary, but if you know a good one please tell me. (I used windows gamebar to record this one but I don’t like it. The color selector window is not displayed in the recording)

A lot of bug fixes 🫠

I didn’t add a lot of features in this devlog, but the fixed bugs made a huge difference. I really hate debugging. You fix something that goes unnoticed if fixed but it takes the life out of you.
These are some of the fixed bugs:

• Color keyframes were not displayed
• Color interpolation did not work for strokes
• Color selector did not update the color spinboxes
• Keyframes were not updating in the attribute panel or the timeline
• Clicking on a layer inside the scroller did not select it nor did it select the path
• Bound handles did not visually change the timeline

Features

• Timeline shows color keyframes in 4 RGBA channels for both fill and stroke
• Bound handles make the timeline darker and give the layers a dark tint
  (I’m not sure about the choice of 3 colors. The margins for the scroller are the darkes; the area not covered by the bounds are lighter; and the working area is the lightest. I’m thinking of making them only 2 colors. What is your opinion?)

Updates to viewport

I’m currently too tired of working on the timeline again, so I moved to some simple tasks (two of them were not that simple).

changes

• Added cap styles to paths
• When drawing a path and pressing Enter/Return, the path is completed, and you end up with a curved line :D
• Choosing the bezier draw tool now deselects any paths (that was annoying, to me at least)
• You could now select and deselect shapes using node tool without switching to the selection tool (only difference is that you cannot rotate or scale, but you can edit individual nodes and handles)

Huge update to Layers!

I’m proud that the program is getting more usable with updates, and more visually appealing too! The thing I’m most proud of in this update is the huge speed upgrade to the layer algorithm.

First major fix is using insertWidget() instead of addWidget(). The former gets and index of the widget position in the layout instead of previously deleting the whole layout and redrawing it. Second major fix is to use a hash map to link the path to its corresponding layer. Previously, when the path asked for a layer update, it emitted a signal that iterated through all layers and updated them, now the hash table stored within the Timeline can search for that layer in O(1) instead of O(n). the difference is more noticable when many layers are added.

features

• Selected layer is now highlighted
• Expantion arrow is only displayed when there are keyframes to expand
• Keyframes are shown as dots on the layer itself, and as green diamonds 🔹when expanded. The dots get darker the more there are keyframes on that specific frame (Totally intended behaviour :D)
• Huge speed upgrade from O(n) to O(1)

It doesn’t look like I’ve done much, but the whole layering architecture was changed

Now the layers support vertical scrolling

The new architecture

1. I place the playback controls at the top, then I split the remaining part horizontally.
2. A vertical scroller contains the hierarchy of the layers in the left part. The right part contains a horizontal scroller that contains the tick bar
3. The horizontal scroller contains another vertical scroller linked to the one on the left

The aims were to allow vertical and horizontal scrolling on the right, but keeping the left panel and the tick bar visible. Now I have the layers_ vector, the tick bar, and the time cursor all inside the Timeline class, instead of the odd spaghetti way I did it before.

Added a layer keyframe dropdown menu

This is the first updated feature of my motion graphics software “Before Effects”. I was really annoyed by the old layer system where you know where the keyframes are, but not what attributes are keyed. This is now fixed!

Features

• Added a default path on start so I could debug easily
• Added a clickable dropdown arrow. When clicked, it shows a bunch of sub-layers named by their corresponding attributes
• Renamed a lot of variables and functions as a result of my spaghetti-coding habits

I still need to draw the keyframe diamonds on their correct sub-layers.