Changed FrameTagDialog and made it its own scene

The way frames are being added has changed, and now you can modify existing tags too. Deletion will come soon.

Prefabs/AnimationTimeline.tscn

@@ -1,4 +1,4 @@
-[gd_scene load_steps=60 format=2]
+[gd_scene load_steps=61 format=2]
 
 [ext_resource path="res://Scripts/AnimationTimeline.gd" type="Script" id=1]
 [ext_resource path="res://Assets/Graphics/Dark Themes/Layers/New_Layer.png" type="Texture" id=2]
@@ -41,6 +41,7 @@
 [ext_resource path="res://Assets/Graphics/Dark Themes/Timeline/Expandable_Hover.png" type="Texture" id=39]
 [ext_resource path="res://Assets/Graphics/Dark Themes/Timeline/Tag_Hover.png" type="Texture" id=40]
 [ext_resource path="res://Assets/Graphics/Dark Themes/Timeline/Tag.png" type="Texture" id=41]
+[ext_resource path="res://Prefabs/Dialogs/FrameTagDialog.tscn" type="PackedScene" id=42]
 
 [sub_resource type="InputEventKey" id=1]
 control = true
@@ -577,77 +578,7 @@ margin_bottom = 116.0
 mouse_default_cursor_shape = 2
 text = "Blue-Red Mode"
 
-[node name="TagDialog" type="ConfirmationDialog" parent="."]
-margin_right = 83.0
-margin_bottom = 58.0
-window_title = "Frame Tag Properties"
-resizable = true
-__meta__ = {
-"_edit_use_anchors_": false
-}
-
-[node name="GridContainer" type="GridContainer" parent="TagDialog"]
-margin_left = 8.0
-margin_top = 8.0
-margin_right = 192.0
-margin_bottom = 124.0
-custom_constants/vseparation = 8
-custom_constants/hseparation = 8
-columns = 2
-__meta__ = {
-"_edit_use_anchors_": false
-}
-
-[node name="NameLabel" type="Label" parent="TagDialog/GridContainer"]
-margin_top = 5.0
-margin_right = 42.0
-margin_bottom = 19.0
-text = "Name:"
-
-[node name="NameLineEdit" type="LineEdit" parent="TagDialog/GridContainer"]
-margin_left = 50.0
-margin_right = 124.0
-margin_bottom = 24.0
-
-[node name="ColorLabel" type="Label" parent="TagDialog/GridContainer"]
-margin_top = 35.0
-margin_right = 42.0
-margin_bottom = 49.0
-text = "Color:"
-
-[node name="ColorPickerButton" type="ColorPickerButton" parent="TagDialog/GridContainer"]
-margin_left = 50.0
-margin_top = 32.0
-margin_right = 124.0
-margin_bottom = 52.0
-
-[node name="FromLabel" type="Label" parent="TagDialog/GridContainer"]
-margin_top = 65.0
-margin_right = 42.0
-margin_bottom = 79.0
-text = "From:"
-
-[node name="FromSpinBox" type="SpinBox" parent="TagDialog/GridContainer"]
-margin_left = 50.0
-margin_top = 60.0
-margin_right = 124.0
-margin_bottom = 84.0
-min_value = 1.0
-value = 1.0
-
-[node name="ToLabel" type="Label" parent="TagDialog/GridContainer"]
-margin_top = 97.0
-margin_right = 42.0
-margin_bottom = 111.0
-text = "To:"
-
-[node name="ToSpinBox" type="SpinBox" parent="TagDialog/GridContainer"]
-margin_left = 50.0
-margin_top = 92.0
-margin_right = 124.0
-margin_bottom = 116.0
-min_value = 1.0
-value = 1.0
+[node name="FrameTagDialog" parent="." instance=ExtResource( 42 )]
 [connection signal="pressed" from="AnimationContainer/ForLayerButtons/LayerButtons/AddLayer" to="." method="add_layer" binds= [ true ]]
 [connection signal="pressed" from="AnimationContainer/ForLayerButtons/LayerButtons/RemoveLayer" to="." method="_on_RemoveLayer_pressed"]
 [connection signal="pressed" from="AnimationContainer/ForLayerButtons/LayerButtons/MoveUpLayer" to="." method="change_layer_order" binds= [ 1 ]]
@@ -673,5 +604,3 @@ value = 1.0
 [connection signal="value_changed" from="OnionSkinningSettings/OnionSkinningButtons/PastOnionSkinning" to="." method="_on_PastOnionSkinning_value_changed"]
 [connection signal="value_changed" from="OnionSkinningSettings/OnionSkinningButtons/FutureOnionSkinning" to="." method="_on_FutureOnionSkinning_value_changed"]
 [connection signal="toggled" from="OnionSkinningSettings/OnionSkinningButtons/BlueRedMode" to="." method="_on_BlueRedMode_toggled"]
-[connection signal="confirmed" from="TagDialog" to="." method="_on_TagDialog_confirmed"]
-[connection signal="popup_hide" from="TagDialog" to="." method="_on_TagDialog_popup_hide"]

Prefabs/Dialogs/FrameTagDialog.tscn

@@ -0,0 +1,127 @@
+[gd_scene load_steps=4 format=2]
+
+[ext_resource path="res://Scripts/Dialogs/FrameTagDialog.gd" type="Script" id=1]
+[ext_resource path="res://Assets/Graphics/Dark Themes/Timeline/New_Frame_Hover.png" type="Texture" id=2]
+[ext_resource path="res://Assets/Graphics/Dark Themes/Timeline/New_Frame.png" type="Texture" id=3]
+
+[node name="FrameTagDialog" type="ConfirmationDialog"]
+margin_right = 83.0
+margin_bottom = 58.0
+rect_min_size = Vector2( 400, 200 )
+window_title = "Frame Tag Properties"
+resizable = true
+script = ExtResource( 1 )
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="ScrollContainer" type="ScrollContainer" parent="."]
+anchor_right = 1.0
+anchor_bottom = 1.0
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="VBoxContainer" type="VBoxContainer" parent="ScrollContainer"]
+margin_right = 400.0
+margin_bottom = 28.0
+size_flags_horizontal = 3
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="HSeparator" type="HSeparator" parent="ScrollContainer/VBoxContainer"]
+margin_right = 400.0
+margin_bottom = 4.0
+size_flags_horizontal = 3
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="AddTag" type="TextureButton" parent="ScrollContainer/VBoxContainer" groups=[
+"UIButtons",
+]]
+margin_top = 8.0
+margin_right = 20.0
+margin_bottom = 28.0
+hint_tooltip = "Add a new frame tag"
+mouse_default_cursor_shape = 2
+size_flags_horizontal = 0
+texture_normal = ExtResource( 3 )
+texture_hover = ExtResource( 2 )
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="TagOptions" type="ConfirmationDialog" parent="."]
+margin_right = 200.0
+margin_bottom = 70.0
+
+[node name="GridContainer" type="GridContainer" parent="TagOptions"]
+margin_left = 8.0
+margin_top = 8.0
+margin_right = 259.0
+margin_bottom = 64.0
+custom_constants/vseparation = 8
+custom_constants/hseparation = 8
+columns = 4
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="NameLabel" type="Label" parent="TagOptions/GridContainer"]
+margin_top = 5.0
+margin_right = 42.0
+margin_bottom = 19.0
+text = "Name:"
+
+[node name="NameLineEdit" type="LineEdit" parent="TagOptions/GridContainer"]
+margin_left = 50.0
+margin_right = 124.0
+margin_bottom = 24.0
+
+[node name="ColorLabel" type="Label" parent="TagOptions/GridContainer"]
+margin_left = 132.0
+margin_top = 5.0
+margin_right = 169.0
+margin_bottom = 19.0
+text = "Color:"
+
+[node name="ColorPickerButton" type="ColorPickerButton" parent="TagOptions/GridContainer"]
+margin_left = 177.0
+margin_right = 251.0
+margin_bottom = 24.0
+color = Color( 1, 0, 0, 1 )
+
+[node name="FromLabel" type="Label" parent="TagOptions/GridContainer"]
+margin_top = 37.0
+margin_right = 42.0
+margin_bottom = 51.0
+text = "From:"
+
+[node name="FromSpinBox" type="SpinBox" parent="TagOptions/GridContainer"]
+margin_left = 50.0
+margin_top = 32.0
+margin_right = 124.0
+margin_bottom = 56.0
+min_value = 1.0
+value = 1.0
+
+[node name="ToLabel" type="Label" parent="TagOptions/GridContainer"]
+margin_left = 132.0
+margin_top = 37.0
+margin_right = 169.0
+margin_bottom = 51.0
+text = "To:"
+
+[node name="ToSpinBox" type="SpinBox" parent="TagOptions/GridContainer"]
+margin_left = 177.0
+margin_top = 32.0
+margin_right = 251.0
+margin_bottom = 56.0
+min_value = 1.0
+value = 1.0
+[connection signal="about_to_show" from="." to="." method="_on_FrameTagDialog_about_to_show"]
+[connection signal="popup_hide" from="." to="." method="_on_FrameTagDialog_popup_hide"]
+[connection signal="pressed" from="ScrollContainer/VBoxContainer/AddTag" to="." method="_on_AddTag_pressed"]
+[connection signal="confirmed" from="TagOptions" to="." method="_on_TagOptions_confirmed"]

Scripts/AnimationTimeline.gd

@@ -314,19 +314,5 @@ func _on_OpacitySlider_value_changed(value) -> void:
 	Global.canvas.update()
 
 
-func _on_TagDialog_confirmed() -> void:
-	var tag_name : String = Global.tag_dialog.get_node("GridContainer/NameLineEdit").text
-	var tag_color : Color = Global.tag_dialog.get_node("GridContainer/ColorPickerButton").color
-	var tag_from : int = Global.tag_dialog.get_node("GridContainer/FromSpinBox").value
-	var tag_to : int = Global.tag_dialog.get_node("GridContainer/ToSpinBox").value
-	Global.animation_tags.append([tag_name, tag_color, tag_from, tag_to])
-	Global.animation_tags = Global.animation_tags # To execute animation_tags_changed()
-
-
 func _on_OnionSkinningSettings_popup_hide() -> void:
 	Global.can_draw = true
-
-
-func _on_TagDialog_popup_hide() -> void:
-	Global.can_draw = true
-

Scripts/Dialogs/FrameTagDialog.gd

@@ -0,0 +1,86 @@
+extends ConfirmationDialog
+
+
+var current_tag_id := 0
+var tag_vboxes := []
+
+onready var main_vbox_cont : VBoxContainer = $ScrollContainer/VBoxContainer
+onready var add_tag_button : TextureButton = $ScrollContainer/VBoxContainer/AddTag
+onready var options_dialog = $TagOptions
+
+
+func _on_FrameTagDialog_about_to_show() -> void:
+	Global.can_draw = false
+	for vbox in tag_vboxes:
+		vbox.queue_free()
+	tag_vboxes.clear()
+
+	var i := 0
+	for tag in Global.animation_tags:
+		var vbox_cont := VBoxContainer.new()
+
+		var hbox_cont := HBoxContainer.new()
+		var tag_label := Label.new()
+		if tag[2] == tag[3]:
+			tag_label.text = "Tag %s (Frame %s)" % [i + 1, tag[2]]
+		else:
+			tag_label.text = "Tag %s (Frames %s-%s)" % [i + 1, tag[2], tag[3]]
+		hbox_cont.add_child(tag_label)
+
+		var edit_button := Button.new()
+		edit_button.text = "Edit"
+		edit_button.connect("pressed", self, "_on_EditButton_pressed", [i])
+		hbox_cont.add_child(edit_button)
+		vbox_cont.add_child(hbox_cont)
+
+		var name_label := Label.new()
+		name_label.text = tag[0]
+		name_label.modulate = tag[1]
+		vbox_cont.add_child(name_label)
+
+		var hsep := HSeparator.new()
+		hsep.size_flags_horizontal = SIZE_EXPAND_FILL
+		vbox_cont.add_child(hsep)
+
+		main_vbox_cont.add_child(vbox_cont)
+		tag_vboxes.append(vbox_cont)
+
+		i += 1
+
+	add_tag_button.visible = true
+	main_vbox_cont.move_child(add_tag_button, main_vbox_cont.get_child_count() - 1)
+
+
+func _on_FrameTagDialog_popup_hide() -> void:
+	Global.can_draw = true
+
+
+func _on_AddTag_pressed() -> void:
+	options_dialog.popup_centered()
+	current_tag_id = Global.animation_tags.size()
+
+
+func _on_EditButton_pressed(_tag_id : int) -> void:
+	options_dialog.popup_centered()
+	current_tag_id = _tag_id
+	options_dialog.get_node("GridContainer/NameLineEdit").text = Global.animation_tags[_tag_id][0]
+	options_dialog.get_node("GridContainer/ColorPickerButton").color = Global.animation_tags[_tag_id][1]
+	options_dialog.get_node("GridContainer/FromSpinBox").value = Global.animation_tags[_tag_id][2]
+	options_dialog.get_node("GridContainer/ToSpinBox").value = Global.animation_tags[_tag_id][3]
+
+
+func _on_TagOptions_confirmed() -> void:
+	var tag_name : String = options_dialog.get_node("GridContainer/NameLineEdit").text
+	var tag_color : Color = options_dialog.get_node("GridContainer/ColorPickerButton").color
+	var tag_from : int = options_dialog.get_node("GridContainer/FromSpinBox").value
+	var tag_to : int = options_dialog.get_node("GridContainer/ToSpinBox").value
+	if current_tag_id == Global.animation_tags.size():
+		Global.animation_tags.append([tag_name, tag_color, tag_from, tag_to])
+	else:
+		Global.animation_tags[current_tag_id][0] = tag_name
+		Global.animation_tags[current_tag_id][1] = tag_color
+		Global.animation_tags[current_tag_id][2] = tag_from
+		Global.animation_tags[current_tag_id][3] = tag_to
+
+	Global.animation_tags = Global.animation_tags # To execute animation_tags_changed()
+	_on_FrameTagDialog_about_to_show()

Scripts/Global.gd

@@ -352,7 +352,7 @@ func _ready() -> void:
 	play_forward = find_node_by_name(animation_timeline, "PlayForward")
 	play_backwards = find_node_by_name(animation_timeline, "PlayBackwards")
 	tag_container = find_node_by_name(animation_timeline, "TagContainer")
-	tag_dialog = find_node_by_name(animation_timeline, "TagDialog")
+	tag_dialog = find_node_by_name(animation_timeline, "FrameTagDialog")
 
 	remove_layer_button = find_node_by_name(animation_timeline, "RemoveLayer")
 	move_up_layer_button = find_node_by_name(animation_timeline, "MoveUpLayer")
@@ -620,20 +620,24 @@ func layer_changed(value : int) -> void:
 
 func animation_tags_changed(value : Array) -> void:
 	animation_tags = value
-	var tag : Container = load("res://Prefabs/AnimationTag.tscn").instance()
-	tag_container.add_child(tag)
-	var tag_position := tag_container.get_child_count() - 1
-	tag_container.move_child(tag, tag_position)
-	tag.get_node("Label").text = animation_tags[tag_position][0]
-	tag.get_node("Label").modulate = animation_tags[tag_position][1]
-	tag.get_node("Line2D").default_color = animation_tags[tag_position][1]
+	for child in tag_container.get_children():
+		child.queue_free()
 
-	tag.rect_position.x = (animation_tags[tag_position][2] - 1) * 39 + animation_tags[tag_position][2]
+	for tag in animation_tags:
+		var tag_c : Container = load("res://Prefabs/AnimationTag.tscn").instance()
+		tag_container.add_child(tag_c)
+		var tag_position := tag_container.get_child_count() - 1
+		tag_container.move_child(tag_c, tag_position)
+		tag_c.get_node("Label").text = tag[0]
+		tag_c.get_node("Label").modulate = tag[1]
+		tag_c.get_node("Line2D").default_color = tag[1]
 
-	var size : int = animation_tags[tag_position][3] - animation_tags[tag_position][2]
-	tag.rect_min_size.x = (size + 1) * 39
-	tag.get_node("Line2D").points[2] = Vector2(tag.rect_min_size.x, 0)
-	tag.get_node("Line2D").points[3] = Vector2(tag.rect_min_size.x, 32)
+		tag_c.rect_position.x = (tag[2] - 1) * 39 + tag[2]
+
+		var size : int = tag[3] - tag[2]
+		tag_c.rect_min_size.x = (size + 1) * 39
+		tag_c.get_node("Line2D").points[2] = Vector2(tag_c.rect_min_size.x, 0)
+		tag_c.get_node("Line2D").points[3] = Vector2(tag_c.rect_min_size.x, 32)
 
 
 func create_brush_button(brush_img : Image, brush_type := Brush_Types.CUSTOM, hint_tooltip := "") -> void: