From 909f38bd0cf249801178ebc52949d25e9b064dd8 Mon Sep 17 00:00:00 2001 From: Variable <77773850+Variable-ind@users.noreply.github.com> Date: Wed, 14 Feb 2024 22:53:35 +0500 Subject: [PATCH] Further Reference UI Improvements (#974) * references UI refactor * changed select icon * fixed a bug --- assets/graphics/reference_images/select.png | Bin 194 -> 183 bytes src/Classes/Project.gd | 2 +- src/UI/Canvas/ReferenceImages.gd | 5 ++- .../ReferenceImages/ReferenceImageButton.tscn | 17 ++++++++- src/UI/ReferenceImages/ReferencesPanel.gd | 27 +++++++++++++- src/UI/ReferenceImages/ReferencesPanel.tscn | 35 +++++++++++++++--- src/UI/UI.tscn | 3 +- 7 files changed, 78 insertions(+), 11 deletions(-) diff --git a/assets/graphics/reference_images/select.png b/assets/graphics/reference_images/select.png index 62f811be77951b72d6fa76f02264ea8f4008e8e8..4fc0cdae04c17dc8db78180bca5f06364c982dd4 100644 GIT binary patch delta 142 zcmV;90CE4q0k;8=F@JGML_t(YiS5)e5WGb2}Cn z+}+{LX2brN%ASZRmjSd~0+@0MU}hu%EFupXMPvX)mH;x)9g+gQ{1ll2vGfF?zG>vm whr=DQ1~MdjMhS=r`}>fPpLf#$j~X-@8!f0@00000Ne4wvM6N<$f;4|PfdBvi delta 153 zcmV;K0A~NU0m1>0F@JnXL_t(YiQSY-4!|G?M4{>ZuS_>xXhj`lOd4kk^7u>?IZkF~ z%z8QksA?0Z0vMnRNy@AZnxJ|RoTf^Sbc%wO0VoK%!AR4UMv`aprlA5nP 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() diff --git a/src/UI/Canvas/ReferenceImages.gd b/src/UI/Canvas/ReferenceImages.gd index 7f7cfe29c..9840c2876 100644 --- a/src/UI/Canvas/ReferenceImages.gd +++ b/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) diff --git a/src/UI/ReferenceImages/ReferenceImageButton.tscn b/src/UI/ReferenceImages/ReferenceImageButton.tscn index be95b6585..b1b125615 100644 --- a/src/UI/ReferenceImages/ReferenceImageButton.tscn +++ b/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 diff --git a/src/UI/ReferenceImages/ReferencesPanel.gd b/src/UI/ReferenceImages/ReferencesPanel.gd index fd604204f..5fc7a4c88 100644 --- a/src/UI/ReferenceImages/ReferencesPanel.gd +++ b/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() diff --git a/src/UI/ReferenceImages/ReferencesPanel.tscn b/src/UI/ReferenceImages/ReferencesPanel.tscn index b735ee78c..725521c0e 100644 --- a/src/UI/ReferenceImages/ReferencesPanel.tscn +++ b/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 -vertical_scroll_mode = 0 +mouse_filter = 1 -[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 diff --git a/src/UI/UI.tscn b/src/UI/UI.tscn index 11cdd6789..7dca1ee79 100644 --- a/src/UI/UI.tscn +++ b/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")]