Rename layers, layers & frames are now toggle-able buttons

Main.tscn

@@ -23,6 +23,7 @@ size_flags_horizontal = 3
 custom_constants/separation = 0
 
 [node name="ToolPanel" type="Panel" parent="UI"]
+editor/display_folded = true
 margin_right = 230.0
 margin_bottom = 600.0
 rect_min_size = Vector2( 230, 0 )
@@ -35,6 +36,7 @@ size_flags_horizontal = 3
 size_flags_vertical = 3
 
 [node name="MenusAndTools" type="VBoxContainer" parent="UI/ToolPanel/Tools"]
+editor/display_folded = true
 margin_right = 230.0
 margin_bottom = 266.0
 size_flags_vertical = 3
@@ -399,19 +401,20 @@ margin_right = 230.0
 margin_bottom = 600.0
 
 [node name="CanvasAndTimeline" type="VBoxContainer" parent="UI"]
+editor/display_folded = true
 margin_left = 230.0
 margin_right = 864.0
 margin_bottom = 600.0
 size_flags_horizontal = 3
 
-[node name="HBoxContainer" type="HBoxContainer" parent="UI/CanvasAndTimeline"]
+[node name="HViewportContainer" type="HBoxContainer" parent="UI/CanvasAndTimeline"]
 editor/display_folded = true
 margin_right = 634.0
 margin_bottom = 464.0
 size_flags_horizontal = 3
 size_flags_vertical = 3
 
-[node name="ViewportContainer" type="ViewportContainer" parent="UI/CanvasAndTimeline/HBoxContainer"]
+[node name="ViewportContainer" type="ViewportContainer" parent="UI/CanvasAndTimeline/HViewportContainer"]
 margin_right = 634.0
 margin_bottom = 464.0
 mouse_default_cursor_shape = 3
@@ -419,31 +422,31 @@ size_flags_horizontal = 3
 size_flags_vertical = 3
 stretch = true
 
-[node name="Viewport" type="Viewport" parent="UI/CanvasAndTimeline/HBoxContainer/ViewportContainer"]
+[node name="Viewport" type="Viewport" parent="UI/CanvasAndTimeline/HViewportContainer/ViewportContainer"]
 size = Vector2( 634, 464 )
 handle_input_locally = false
 render_target_update_mode = 3
 
-[node name="Canvas" parent="UI/CanvasAndTimeline/HBoxContainer/ViewportContainer/Viewport" instance=ExtResource( 5 )]
+[node name="Canvas" parent="UI/CanvasAndTimeline/HViewportContainer/ViewportContainer/Viewport" instance=ExtResource( 5 )]
 
-[node name="Camera2D" type="Camera2D" parent="UI/CanvasAndTimeline/HBoxContainer/ViewportContainer/Viewport"]
+[node name="Camera2D" type="Camera2D" parent="UI/CanvasAndTimeline/HViewportContainer/ViewportContainer/Viewport"]
 current = true
 zoom = Vector2( 0.15, 0.15 )
 script = ExtResource( 6 )
 
-[node name="SelectionRectangle" type="Polygon2D" parent="UI/CanvasAndTimeline/HBoxContainer/ViewportContainer/Viewport"]
+[node name="SelectionRectangle" type="Polygon2D" parent="UI/CanvasAndTimeline/HViewportContainer/ViewportContainer/Viewport"]
 z_index = 1
 color = Color( 0.0823529, 0.694118, 0.623529, 0.592157 )
 polygon = PoolVector2Array( 0, 0, 0, 0, 0, 0, 0, 0 )
 script = ExtResource( 7 )
 
-[node name="ViewportSeparator" type="VSeparator" parent="UI/CanvasAndTimeline/HBoxContainer"]
+[node name="ViewportSeparator" type="VSeparator" parent="UI/CanvasAndTimeline/HViewportContainer"]
 visible = false
 margin_left = 315.0
 margin_right = 319.0
 margin_bottom = 464.0
 
-[node name="ViewportContainer2" type="ViewportContainer" parent="UI/CanvasAndTimeline/HBoxContainer"]
+[node name="ViewportContainer2" type="ViewportContainer" parent="UI/CanvasAndTimeline/HViewportContainer"]
 editor/display_folded = true
 visible = false
 margin_left = 319.0
@@ -454,13 +457,13 @@ size_flags_horizontal = 3
 size_flags_vertical = 3
 stretch = true
 
-[node name="Viewport" type="Viewport" parent="UI/CanvasAndTimeline/HBoxContainer/ViewportContainer2"]
+[node name="Viewport" type="Viewport" parent="UI/CanvasAndTimeline/HViewportContainer/ViewportContainer2"]
 size = Vector2( 315, 464 )
 handle_input_locally = false
 render_target_update_mode = 0
 script = ExtResource( 8 )
 
-[node name="Camera2D2" type="Camera2D" parent="UI/CanvasAndTimeline/HBoxContainer/ViewportContainer2/Viewport"]
+[node name="Camera2D2" type="Camera2D" parent="UI/CanvasAndTimeline/HViewportContainer/ViewportContainer2/Viewport"]
 current = true
 zoom = Vector2( 0.15, 0.15 )
 script = ExtResource( 6 )
@@ -1069,10 +1072,10 @@ align = 1
 [connection signal="value_changed" from="UI/ToolPanel/Tools/ToolOptions/RightToolOptions/InterpolateColor/RightInterpolateFactor" to="." method="_on_RightInterpolateFactor_value_changed"]
 [connection signal="toggled" from="UI/ToolPanel/Tools/ToolOptions/RightToolOptions/RightHorizontalMirroring" to="." method="_on_RightHorizontalMirroring_toggled"]
 [connection signal="toggled" from="UI/ToolPanel/Tools/ToolOptions/RightToolOptions/RightVerticalMirroring" to="." method="_on_RightVerticalMirroring_toggled"]
-[connection signal="mouse_entered" from="UI/CanvasAndTimeline/HBoxContainer/ViewportContainer" to="." method="_on_ViewportContainer_mouse_entered"]
+[connection signal="mouse_entered" from="UI/CanvasAndTimeline/HViewportContainer/ViewportContainer" to="." method="_on_ViewportContainer_mouse_entered"]
-[connection signal="mouse_exited" from="UI/CanvasAndTimeline/HBoxContainer/ViewportContainer" to="." method="_on_ViewportContainer_mouse_exited"]
+[connection signal="mouse_exited" from="UI/CanvasAndTimeline/HViewportContainer/ViewportContainer" to="." method="_on_ViewportContainer_mouse_exited"]
-[connection signal="mouse_entered" from="UI/CanvasAndTimeline/HBoxContainer/ViewportContainer2" to="." method="_on_ViewportContainer_mouse_entered"]
+[connection signal="mouse_entered" from="UI/CanvasAndTimeline/HViewportContainer/ViewportContainer2" to="." method="_on_ViewportContainer_mouse_entered"]
-[connection signal="mouse_exited" from="UI/CanvasAndTimeline/HBoxContainer/ViewportContainer2" to="." method="_on_ViewportContainer_mouse_exited"]
+[connection signal="mouse_exited" from="UI/CanvasAndTimeline/HViewportContainer/ViewportContainer2" to="." method="_on_ViewportContainer_mouse_exited"]
 [connection signal="pressed" from="UI/CanvasAndTimeline/AnimationTimeline/TimelineContainer/ButtonContainer/AnimationButtons/LoopAnim" to="." method="_on_LoopAnim_pressed"]
 [connection signal="toggled" from="UI/CanvasAndTimeline/AnimationTimeline/TimelineContainer/ButtonContainer/AnimationButtons/PlayBackwards" to="." method="_on_PlayBackwards_toggled"]
 [connection signal="toggled" from="UI/CanvasAndTimeline/AnimationTimeline/TimelineContainer/ButtonContainer/AnimationButtons/PlayForward" to="." method="_on_PlayForward_toggled"]

Prefabs/FrameButton.tscn

@@ -13,6 +13,7 @@ rect_min_size = Vector2( 36, 36 )
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 0
 size_flags_vertical = 0
+toggle_mode = true
 script = ExtResource( 1 )
 
 [node name="FrameTexture" type="TextureRect" parent="FrameButton"]

Prefabs/LayerContainer.tscn

@@ -2,17 +2,18 @@
 
 [ext_resource path="res://Scripts/LayerContainer.gd" type="Script" id=1]
 
-[node name="LayerContainer" type="PanelContainer"]
+[node name="LayerContainer" type="Button"]
-margin_top = 42.0
 margin_right = 159.0
-margin_bottom = 88.0
+margin_bottom = 46.0
+rect_min_size = Vector2( 0, 42 )
+toggle_mode = true
 script = ExtResource( 1 )
 
 [node name="HBoxContainer" type="HBoxContainer" parent="."]
 margin_left = 7.0
-margin_top = 7.0
+margin_top = 5.0
 margin_right = 152.0
-margin_bottom = 39.0
+margin_bottom = 37.0
 mouse_default_cursor_shape = 2
 
 [node name="VisibilityButton" type="Button" parent="HBoxContainer"]
@@ -36,6 +37,16 @@ margin_right = 106.0
 margin_bottom = 23.0
 text = "Layer 0"
 align = 1
-[connection signal="button_down" from="HBoxContainer/VisibilityButton" to="." method="_on_VisibilityButton_button_down"]
+
-[connection signal="button_up" from="HBoxContainer/VisibilityButton" to="." method="_on_VisibilityButton_button_up"]
+[node name="LineEdit" type="LineEdit" parent="HBoxContainer"]
+visible = false
+margin_left = 110.0
+margin_right = 168.0
+margin_bottom = 32.0
+text = "Layer 0"
+editable = false
+caret_blink = true
+caret_blink_speed = 0.5
+[connection signal="pressed" from="." to="." method="_on_LayerContainer_pressed"]
 [connection signal="pressed" from="HBoxContainer/VisibilityButton" to="." method="_on_VisibilityButton_pressed"]
+[connection signal="text_changed" from="HBoxContainer/LineEdit" to="." method="_on_LineEdit_text_changed"]

Scripts/Canvas.gd

@@ -43,6 +43,7 @@ func _ready() -> void:
 	frame_button = load("res://Prefabs/FrameButton.tscn").instance()
 	frame_button.name = "Frame_%s" % frame
 	frame_button.get_node("FrameButton").frame = frame
+	frame_button.get_node("FrameButton").pressed = true
 	frame_button.get_node("FrameID").text = str(frame + 1)
 	Global.frame_container.add_child(frame_button)
 
@@ -301,9 +302,9 @@ func update_texture(layer_index : int) -> void:
 	whole_image_texture.create_from_image(whole_image, 0)
 	frame_texture_rect.texture = whole_image_texture
 
-func get_layer_container(layer_index : int) -> PanelContainer:
+func get_layer_container(layer_index : int) -> LayerContainer:
 	for container in Global.vbox_layer_container.get_children():
-		if container is PanelContainer && container.i == layer_index:
+		if container is LayerContainer && container.i == layer_index:
 			return container
 	return null
 
@@ -386,7 +387,7 @@ func _draw() -> void:
 
 func generate_layer_panels() -> void:
 	for child in Global.vbox_layer_container.get_children():
-		if child is PanelContainer:
+		if child is LayerContainer:
 			child.queue_free()
 
 	current_layer_index = layers.size() - 1
@@ -399,9 +400,11 @@ func generate_layer_panels() -> void:
 
 	for i in range(layers.size() -1, -1, -1):
 		var layer_container = load("res://Prefabs/LayerContainer.tscn").instance()
-		layers[i][2] = "Layer %s" % i
+		if !layers[i][2]:
+			layers[i][2] = "Layer %s" % i
 		layer_container.i = i
 		layer_container.get_child(0).get_child(2).text = layers[i][2]
+		layer_container.get_child(0).get_child(3).text = layers[i][2]
 		layers[i][3] = true #set visible
 		layer_container.get_child(0).get_child(1).texture = layers[i][1]
 		Global.vbox_layer_container.add_child(layer_container)

Scripts/Global.gd

@@ -194,6 +194,11 @@ func redo(canvases : Array, layer_index : int = -1) -> void:
 	print("Redo: ", action_name)
 
 func change_frame() -> void:
+	#Make all frame buttons unpressed
+	for child in frame_container.get_children():
+		child.get_node("FrameButton").pressed = false
+	#Make only the current frame button pressed
+	frame_container.get_child(current_frame).get_node("FrameButton").pressed = true
 	for c in canvases:
 		c.visible = false
 	canvas = canvases[current_frame]

Scripts/LayerContainer.gd

@@ -1,31 +1,38 @@
-extends PanelContainer
+extends Button
+class_name LayerContainer
 
 var i
 # warning-ignore:unused_class_variable
 var currently_selected := false
-var visibility_toggled := false
 
 func _ready() -> void:
-	var stylebox := StyleBoxFlat.new()
-	stylebox.bg_color = Color("3d3b45")
-	add_stylebox_override("panel", stylebox)
 	changed_selection()
 
-# warning-ignore:unused_argument
+func _on_LayerContainer_pressed() -> void:
-func _process(delta) -> void:
+	var initially_pressed := pressed
-	var mouse_pos := get_local_mouse_position() + rect_position
+	var label_initially_visible : bool = $HBoxContainer/Label.visible
-	if Rect2(rect_position, rect_position + rect_size).has_point(mouse_pos) && !visibility_toggled:
+	Global.canvas.current_layer_index = i
-		if Input.is_action_just_pressed("left_mouse"):
+	changed_selection()
-			Global.canvas.current_layer_index = i
+	if !initially_pressed:
-			changed_selection()
+		if label_initially_visible:
+			$HBoxContainer/Label.visible = false
+			$HBoxContainer/LineEdit.visible = true
+			$HBoxContainer/LineEdit.editable = true
+		else:
+			$HBoxContainer/Label.visible = true
+			$HBoxContainer/LineEdit.visible = false
+			$HBoxContainer/LineEdit.editable = false
 
 func changed_selection() -> void:
 	var parent = get_parent()
 	for child in parent.get_children():
-		if child is PanelContainer:
+		if child is Button:
+			child.get_node("HBoxContainer/Label").visible = true
+			child.get_node("HBoxContainer/LineEdit").visible = false
+			child.get_node("HBoxContainer/LineEdit").editable = false
 			if Global.canvas.current_layer_index == child.i:
 				child.currently_selected = true
-				child.get_stylebox("panel").bg_color = Color("282532")
+				child.pressed = true
 
 				if Global.canvas.current_layer_index < Global.canvas.layers.size() - 1:
 					Global.move_up_layer_button.disabled = false
@@ -46,7 +53,7 @@ func changed_selection() -> void:
 					Global.merge_down_layer_button.mouse_default_cursor_shape = Control.CURSOR_FORBIDDEN
 			else:
 				child.currently_selected = false
-				child.get_stylebox("panel").bg_color = Color("3d3b45")
+				child.pressed = false
 
 func _on_VisibilityButton_pressed() -> void:
 	if Global.canvas.layers[i][3]:
@@ -56,9 +63,6 @@ func _on_VisibilityButton_pressed() -> void:
 		Global.canvas.layers[i][3] = true
 		get_child(0).get_child(0).text = "V"
 
-
+func _on_LineEdit_text_changed(new_text : String) -> void:
-func _on_VisibilityButton_button_down() -> void:
+	Global.canvas.layers[i][2] = new_text
-	visibility_toggled = true
+	$HBoxContainer/Label.text = new_text
-
-func _on_VisibilityButton_button_up() -> void:
-	visibility_toggled = false

Scripts/Main.gd

@@ -585,6 +585,8 @@ func _on_AddFrame_pressed() -> void:
 	var canvas = load("res://Prefabs/Canvas.tscn").instance()
 	canvas.size = Global.canvas.size
 	canvas.frame = Global.canvases.size()
+	for child in Global.frame_container.get_children():
+		child.get_node("FrameButton").pressed = false
 	for canvas in Global.canvases:
 		canvas.visible = false
 	Global.canvases.append(canvas)
@@ -612,6 +614,7 @@ func _on_RemoveFrame_pressed() -> void:
 		Global.remove_frame_button.disabled = true
 		Global.remove_frame_button.mouse_default_cursor_shape = Control.CURSOR_FORBIDDEN
 	Global.canvas = Global.canvases[Global.current_frame]
+	Global.frame_container.get_child(Global.current_frame).get_node("FrameButton").pressed = true
 	Global.canvas.visible = true
 	Global.canvas.generate_layer_panels()
 	Global.handle_layer_order_buttons()
@@ -629,6 +632,8 @@ func _on_CloneFrame_pressed() -> void:
 		tex.create_from_image(sprite, 0)
 		canvas.layers.append([sprite, tex, layer[2], layer[3]])
 	canvas.frame = Global.canvases.size()
+	for child in Global.frame_container.get_children():
+		child.get_node("FrameButton").pressed = false
 	for canvas in Global.canvases:
 		canvas.visible = false
 	Global.canvases.append(canvas)

project.godot

@@ -13,9 +13,15 @@ _global_script_classes=[ {
 "class": "Canvas",
 "language": "GDScript",
 "path": "res://Scripts/Canvas.gd"
+}, {
+"base": "Button",
+"class": "LayerContainer",
+"language": "GDScript",
+"path": "res://Scripts/LayerContainer.gd"
 } ]
 _global_script_class_icons={
-"Canvas": ""
+"Canvas": "",
+"LayerContainer": ""
 }
 
 [application]