Further Reference UI Improvements (#974)

* references UI refactor

* changed select icon

* fixed a bug

src/Classes/Project.gd

@@ -439,7 +439,7 @@ func deserialize(dict: Dictionary) -> void:
 			var ri := ReferenceImage.new()
 			ri.project = self
 			ri.deserialize(g)
-			Global.canvas.add_child(ri)
+			Global.canvas.reference_image_container.add_child(ri)
 	if dict.has("vanishing_points"):
 		vanishing_points = dict.vanishing_points
 		Global.perspective_editor.queue_redraw()

src/UI/Canvas/ReferenceImages.gd

@@ -237,8 +237,11 @@ func populate_reference_menu(items: Array[ReferenceImage], default := false):
 		reference_menu.add_separator()
 
 	for ri: ReferenceImage in items:
+		# NOTE: using image_path.get_file() instead of full image_path because usually paths are
+		# long and if we are limiting to 22 characters as well, then every entry will end up
+		# looking the same
 		var idx: int = ri.get_index() + 1
-		var label: String = "(%o) %s" % [idx, ri.image_path]
+		var label: String = "(%o) %s" % [idx, ri.image_path.get_file()]
 		# We trim the length of the title
 		label = label.left(22) + "..."
 		reference_menu.add_item(label, idx)

src/UI/ReferenceImages/ReferenceImageButton.tscn

@@ -1,6 +1,10 @@
-[gd_scene load_steps=4 format=3 uid="uid://by3300fom3plf"]
+[gd_scene load_steps=6 format=3 uid="uid://by3300fom3plf"]
 
 [ext_resource type="Script" path="res://src/UI/ReferenceImages/ReferenceImageButton.gd" id="1_nf0dd"]
+[ext_resource type="PackedScene" uid="uid://3pmb60gpst7b" path="res://src/UI/Nodes/TransparentChecker.tscn" id="2_mf5ob"]
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_ytt38"]
+bg_color = Color(0, 0, 0, 0.470588)
 
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_53xjd"]
 draw_center = false
@@ -13,9 +17,20 @@ border_width_bottom = 2
 
 [node name="ReferenceImageButton" type="Button"]
 custom_minimum_size = Vector2(64, 64)
+theme_override_styles/normal = SubResource("StyleBoxFlat_ytt38")
+theme_override_styles/hover = SubResource("StyleBoxFlat_ytt38")
 theme_override_styles/pressed = SubResource("StyleBoxFlat_53xjd")
 theme_override_styles/focus = SubResource("StyleBoxEmpty_tuwm6")
 toggle_mode = true
 icon_alignment = 1
 expand_icon = true
 script = ExtResource("1_nf0dd")
+
+[node name="TransparentChecker" parent="." instance=ExtResource("2_mf5ob")]
+show_behind_parent = true
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2

src/UI/ReferenceImages/ReferencesPanel.gd

@@ -7,11 +7,17 @@ const ReferenceImageButton = preload("res://src/UI/ReferenceImages/ReferenceImag
 var list_btn_group := ButtonGroup.new()
 var transform_button_group: ButtonGroup
 
-@onready var list := %List as HBoxContainer
+@onready var list := %List as HFlowContainer
 @onready var drag_highlight := $Overlay/DragHighlight as ColorRect
 @onready var remove_btn := $ScrollContainer/Container/ReferenceEdit/ImageOptions/Remove as Button
 @onready var transform_tools_btns := $ScrollContainer/Container/Tools/TransformTools
 
+# these will change their visibility if there are no references
+@onready var tip: Label = $ScrollContainer/Container/Tip
+@onready var import_tip: Label = $ScrollContainer/Container/Images/ImportTip
+@onready var reference_edit: VBoxContainer = $ScrollContainer/Container/ReferenceEdit
+@onready var tools: HBoxContainer = $ScrollContainer/Container/Tools
+
 
 func _ready() -> void:
 	transform_button_group = transform_tools_btns.get_child(0).button_group
@@ -80,10 +86,12 @@ func _update_ui() -> void:
 	# Enable the buttons as a default
 	%MoveImageRightBtn.disabled = false
 	%MoveImageLeftBtn.disabled = false
+	reference_edit.visible = true
 
 	if index == -1:
 		%MoveImageLeftBtn.disabled = true
 		%MoveImageRightBtn.disabled = true
+		reference_edit.visible = false
 	if index == 0:
 		%MoveImageLeftBtn.disabled = true
 	if index == Global.current_project.reference_images.size() - 1:
@@ -121,7 +129,10 @@ func _on_reference_image_changed(index: int) -> void:
 		for b: Button in list_btn_group.get_buttons():
 			b.set_pressed_no_signal(false)
 		# Then we get the wanted button and we press it
-		list_btn_group.get_buttons()[index + 1].set_pressed_no_signal(true)
+		# NOTE: using list_btn_group.get_buttons()[index + 1] here was causing a bug that
+		# if you re-arrange by drag and drop, then click on a button, then button before it
+		# becomes selected instead of the clicked button
+		list.get_child(index + 1).set_pressed_no_signal(true)
 
 
 func project_changed() -> void:
@@ -144,9 +155,21 @@ func _on_references_changed():
 	var default = ReferenceImageButton.instantiate()
 	default.button_group = list_btn_group
 	default.text = "none"
+	default.get_child(0).visible = false  # Hide it's transparent checker
 	default.button_pressed = true
 	list.add_child(default)
 
+	# if there are no references, hide the none button and show message
+	tools.visible = true
+	tip.visible = true
+	import_tip.visible = false
+	reference_edit.visible = true
+	if Global.current_project.reference_images.size() == 0:
+		default.visible = false
+		tip.visible = false
+		import_tip.visible = true
+		reference_edit.visible = false
+
 	# And update.
 	for ref in Global.current_project.reference_images:
 		var l: Button = ReferenceImageButton.instantiate()

src/UI/ReferenceImages/ReferencesPanel.tscn

@@ -29,6 +29,7 @@ script = ExtResource("1")
 
 [node name="ScrollContainer" type="ScrollContainer" parent="."]
 layout_mode = 2
+horizontal_scroll_mode = 0
 
 [node name="Container" type="VBoxContainer" parent="ScrollContainer"]
 layout_mode = 2
@@ -47,7 +48,7 @@ text = "My Reference Images"
 [node name="Tip" type="Label" parent="ScrollContainer/Container"]
 custom_minimum_size = Vector2(10, 0)
 layout_mode = 2
-text = "When opening an image, it may be imported as a reference."
+text = "Select an image below to change it's properties"
 autowrap_mode = 2
 
 [node name="Tools" type="HBoxContainer" parent="ScrollContainer/Container"]
@@ -210,20 +211,44 @@ grow_horizontal = 2
 grow_vertical = 2
 texture = ExtResource("6_7v0q5")
 
-[node name="ReferenceImages" type="ScrollContainer" parent="ScrollContainer/Container"]
+[node name="Images" type="Panel" parent="ScrollContainer/Container"]
+clip_contents = true
+custom_minimum_size = Vector2(0, 200)
 layout_mode = 2
-horizontal_scroll_mode = 2
+mouse_filter = 1
-vertical_scroll_mode = 0
 
-[node name="List" type="HBoxContainer" parent="ScrollContainer/Container/ReferenceImages"]
+[node name="ImportTip" type="Label" parent="ScrollContainer/Container/Images"]
+custom_minimum_size = Vector2(10, 0)
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+text = "When opening an image, it may be imported as a reference."
+autowrap_mode = 2
+
+[node name="ScrollContainer" type="ScrollContainer" parent="ScrollContainer/Container/Images"]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+
+[node name="List" type="HFlowContainer" parent="ScrollContainer/Container/Images/ScrollContainer"]
 unique_name_in_owner = true
 custom_minimum_size = Vector2(0, 64)
 layout_mode = 2
+size_flags_horizontal = 3
 
 [node name="ReferenceEdit" type="VBoxContainer" parent="ScrollContainer/Container"]
 layout_mode = 2
 script = ExtResource("3_skjtb")
 
+[node name="HSeparator" type="HSeparator" parent="ScrollContainer/Container/ReferenceEdit"]
+layout_mode = 2
+
 [node name="ImageOptions" type="HBoxContainer" parent="ScrollContainer/Container/ReferenceEdit"]
 layout_mode = 2
 

src/UI/UI.tscn

@@ -202,6 +202,7 @@ hidden_tabs = {
 "Color Picker Sliders": true,
 "Perspective Editor": true,
 "Recorder": true,
+"Reference Images": true,
 "Second Canvas": true
 }
 save_on_change = false
@@ -312,7 +313,7 @@ camera_path = NodePath("SubViewport/Camera2D")
 [node name="SubViewport" type="SubViewport" parent="DockableContainer/Main Canvas/ViewportandVerticalRuler/SubViewportContainer"]
 handle_input_locally = false
 canvas_item_default_texture_filter = 0
-size = Vector2i(2, 2)
+size = Vector2i(862, 515)
 render_target_update_mode = 4
 
 [node name="TransparentChecker" parent="DockableContainer/Main Canvas/ViewportandVerticalRuler/SubViewportContainer/SubViewport" instance=ExtResource("5")]