QOL improvements when adding or selecting keyframes (#1423)

* Add support for animated layer effects and a keyframe-based timeline (#1417)

* Start working on animatable layer effects

* Interpolate colors & animated effects work on apply

* Add nodes to change tween properties

* Use smaller texts for the tween property option buttons

* Fix crash when enabling animation, disabling and enabling it again

* Remove keyframes

* Load and save animated parameters in pxo files

* Format

* Start working on a keyframe based timeline

* Create keyframes in the UI

* Start working on keyframe value changing

* Remove animated layer effect code from the layer FX settings

* Refactor animated_params dictionary

* Probably fix pxo loading

At least old pxo files seem to be working properly

* Update timeline when adding/removing keyframes

* Use a tree for the layer elements

Need to implement folding logic for the keyframes themselves though

* Add a timeline cursor

* Improve cursor moving logic

* More timeline cursor improvements

* Some UI improvements

* Make timeline a bit prettier

* Fix animated params pxo loading

* Some small improvements

* Fix scrolling

* Don't create keyframe if there already is one

* Fix frame container not resizing when clicking on keyframes

* Added Constant transition

* Add undo/redo when adding and deleting keyframes

* Fix keyframe unselection

* Start working on multiple selected keyframes

* Change name of a script

* Change properties of all selected keyframes

With undo/redo support

* [WIP] Move keyframes

While it technically works, the UI side is not being updated. Also, I just realized that the way we're handling keyframe creation and deletion is wrong, because the nodes get freed when switching to a different layer, or a different project. So we most likely should just re-create the keyframe nodes when we add, delete or move them. Which means I also need to change the selected_keyframes array to store param_name and frame_index, instead of nodes.

* Add IDs to keyframes for easier handling

* Don't allow keyframes to go below frame 0

Mostly so they can't be lost. The proper solution would be to support negative frames, like Godot's animation player editor does, but this should work for now.

* Zoom in the timeline

* Support booleans and colors, scroll timeline when changing cel or layer

* Implement the keyframe timeline inside the main timeline panel

I feel like the UI does need some improvements still

* Make properties grid container and delete keyframe button persistent nodes

* Undo/redo refreshes the keyframe property UI

* Hide tags when keyframe timeline is visible

* Fix property nodes not having the correct name

* Use a custom node to draw frames instead of using labels

* Fix group layers passthrough mode not having its effect be animated

* Don't create tracks for properties that currently cannot be animated

Such as textures

* Better documentation and future-proofing

* Keyframe Animation QOL inprovements (#1420)

* Fix keyframe getting created at the wrong frame when the uses right clicks at the same 'x-position' as the frame marking

* Hide extra UI when no FX are present

* formatting

* Rename _hide_extra_UI to _hide_extra_ui

Fix linting error

---------

Co-authored-by: Emmanouil Papadeas <[email protected]>

* Select newly added keyframe

* only select keyframe if it's added for the first time

* Improve selection of keyframes

* Formatting

* To move single keyframe, you no longer have to select it first

* Formatting

* Snap cursor to frame when drag is released

* formatting

---------

Co-authored-by: Emmanouil Papadeas <[email protected]>

Author: Variable-ind

src/UI/Timeline/KeyframeTimeline/KeyframeButton.gd

@@ -25,9 +25,22 @@ func _init() -> void:
 
 func _on_gui_input(event: InputEvent) -> void:
 	var selected_keyframe_buttons := KeyframeTimeline.get_selected_keyframe_buttons()
-	if not self in selected_keyframe_buttons:
-		return
 	var parent := get_parent() as Control
+	if not self in selected_keyframe_buttons:
+		# Check if it was pressed just recently, if it is then we have to reset
+		# selected_keyframe_buttons
+		if (
+			(
+				event is InputEventMouseButton
+				and event.button_index == MOUSE_BUTTON_LEFT
+				and event.pressed
+				and get_rect().has_point(parent.get_local_mouse_position())
+			)
+			or is_dragged
+		):
+			selected_keyframe_buttons = [self]
+		else:
+			return
 	if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_LEFT:
 		if event.pressed:
 			is_dragged = true
@@ -37,6 +50,12 @@ func _on_gui_input(event: InputEvent) -> void:
 		else:
 			if is_dragged:
 				is_dragged = false
+				# if the button was clicked to drag, while it wasn't selected then the
+				# pressed signal isn't emitted yet (it emits on release), so we have to manually
+				# emit it first
+				if not button_pressed and self in selected_keyframe_buttons:
+					button_pressed = true
+					pressed.emit()
 				updated_position.emit()
 
 	if event is InputEventMouseMotion and is_dragged:

src/UI/Timeline/KeyframeTimeline/KeyframeTimeline.gd

@@ -332,7 +332,8 @@ func append_keyframes_to_selection(rect: Rect2) -> void:
 		for keyframe_button in track.get_children():
 			if keyframe_button is not KeyframeButton:
 				continue
-			if rect.has_point(keyframe_button.position + track.position):
+			var key_rect := Rect2(keyframe_button.position + track.position, keyframe_button.size)
+			if rect.intersects(key_rect):
 				selected_keyframes.append(keyframe_button.keyframe_id)
 				keyframe_button.button_pressed = true
 	select_keyframes()
@@ -394,6 +395,7 @@ func _update_keyframe_property_ui(dict: Dictionary, keyframe_id: int) -> void:
 
 func add_effect_keyframe(effect: LayerEffect, frame_index: int, param_name: String) -> void:
 	var next_keyframe_id := effect.layer.next_keyframe_id
+	selected_keyframes = [next_keyframe_id]
 	var undo_redo := Global.current_project.undo_redo
 	undo_redo.create_action("Add keyframe")
 	undo_redo.add_do_method(effect.set_keyframe.bind(param_name, frame_index))

src/UI/Timeline/KeyframeTimeline/KeyframeTimelineCursor.gd

@@ -39,7 +39,18 @@ func _on_keyframe_timeline_frame_display_gui_input(event: InputEvent) -> void:
 			is_dragged = true
 			_change_cel(event.global_position)
 		else:
+			# Snap the cursor to the frame, as we don't have any useful behavior defined for
+			# cursor being in the middle of frames, this makes more sense
+			var container_pos := keyframe_timeline_frame_display.get_global_rect().position.x
+			var x_offset := keyframe_timeline_frame_display.x_offset
+			var frame_pos = (
+				Global.current_project.current_frame * KeyframeTimeline.frame_ui_size
+				+ container_pos
+				- x_offset
+			)
+			pos = frame_pos
 			is_dragged = false
+
 	if event is InputEventMouseMotion and is_dragged:
 		_change_cel(event.global_position)