full support for auto tallscreen/widescreen panel layout

src/Autoload/Global.gd

@@ -6,6 +6,7 @@ enum PressureSensitivity {NONE, ALPHA, SIZE, ALPHA_AND_SIZE}
 enum Direction {UP, DOWN, LEFT, RIGHT}
 enum ThemeTypes {DARK, BLUE, CARAMEL, LIGHT}
 enum TileMode {NONE, BOTH, X_AXIS, Y_AXIS}
+enum PanelLayout {AUTO, WIDESCREEN, TALLSCREEN}
 # Stuff for arrowkey-based canvas movements nyaa ^.^
 const low_speed_move_rate := 150.0
 const medium_speed_move_rate := 750.0
@@ -127,6 +128,7 @@ var zoom_level_label : Label
 var recent_projects_submenu : PopupMenu
 var tile_mode_submenu : PopupMenu
 var window_transparency_submenu : PopupMenu
+var panel_layout_submenu : PopupMenu
 
 var new_image_dialog : ConfirmationDialog
 var open_sprites_dialog : FileDialog
@@ -256,6 +258,14 @@ func _ready() -> void:
 	window_transparency_submenu.set_item_checked(10, true)
 	window_transparency_submenu.hide_on_checkable_item_selection = false
 
+	panel_layout_submenu = PopupMenu.new()
+	panel_layout_submenu.set_name("panel_layout_submenu")
+	panel_layout_submenu.add_radio_check_item("Auto", PanelLayout.AUTO)
+	panel_layout_submenu.set_item_checked(PanelLayout.AUTO, true)
+	panel_layout_submenu.add_radio_check_item("Widescreen", PanelLayout.WIDESCREEN)
+	panel_layout_submenu.add_radio_check_item("Tallscreen", PanelLayout.TALLSCREEN)
+	panel_layout_submenu.hide_on_checkable_item_selection = false
+
 	new_image_dialog = find_node_by_name(root, "CreateNewImage")
 	open_sprites_dialog = find_node_by_name(root, "OpenSprite")
 	save_sprites_dialog = find_node_by_name(root, "SaveSprite")

src/Classes/Project.gd

@@ -6,6 +6,7 @@ var name := "" setget name_changed
 var size : Vector2 setget size_changed
 var undo_redo : UndoRedo
 var tile_mode : int = Global.TileMode.NONE
+var panel_layout : int = Global.PanelLayout.AUTO
 var tile_mode_rects := [] # Cached to avoid recalculation
 var undos := 0 # The number of times we added undo properties
 var has_changed := false setget has_changed_changed
@@ -208,6 +209,8 @@ func change_project() -> void:
 
 	for j in Global.TileMode.values():
 		Global.tile_mode_submenu.set_item_checked(j, j == tile_mode)
+	for j in Global.PanelLayout.values():
+		Global.panel_layout_submenu.set_item_checked(j, j == panel_layout)
 
 
 

src/Main.gd

@@ -4,6 +4,16 @@ var opensprite_file_selected := false
 var redone := false
 var is_quitting_on_save := false
 
+var tallscreen_is_active = false
+onready var UI                     := $MenuAndUI/UI
+onready	var BottomPanel            := $MenuAndUI/UI/CanvasAndTimeline/HBoxContainer/BottomPanel
+onready var RightPanel             := $MenuAndUI/UI/RightPanel
+onready var ToolAndPaletteVSplit   := $MenuAndUI/UI/RightPanel/PreviewAndPalettes/ToolAndPaletteVSplit
+onready var ColorAndToolOptions    := $MenuAndUI/UI/RightPanel/PreviewAndPalettes/ToolAndPaletteVSplit/ColorAndToolOptions
+onready var CanvasPreviewContainer := $MenuAndUI/UI/RightPanel/PreviewAndPalettes/CanvasPreviewContainer
+onready var ToolPanel              := $MenuAndUI/UI/ToolPanel
+onready var myScrollContainer   := $MenuAndUI/UI/RightPanel/PreviewAndPalettes/ToolAndPaletteVSplit/ColorAndToolOptions/ScrollContainer
+
 
 # Called when the node enters the scene tree for the first time.
 func _ready() -> void:
@@ -19,6 +29,9 @@ func _ready() -> void:
 
 	get_tree().set_auto_accept_quit(false)
 	setup_application_window_size()
+	handle_resize()
+	get_tree().get_root().connect("size_changed", self, "handle_resize")
+
 
 	Global.window_title = tr("untitled") + " - Pixelorama " + Global.current_version
 
@@ -55,6 +68,89 @@ func _ready() -> void:
 	get_tree().connect("files_dropped", self, "_on_files_dropped")
 
 
+func handle_resize() -> void:
+	var aspect_ratio = get_viewport_rect().size.x/(0.00001 if get_viewport_rect().size.y == 0 else get_viewport_rect().size.y)
+	if (  (aspect_ratio <= 3.0/4.0 and Global.current_project.panel_layout != Global.PanelLayout.WIDESCREEN) 
+		or Global.current_project.panel_layout == Global.PanelLayout.TALLSCREEN):
+		change_ui_layout("tallscreen")
+	else:
+		change_ui_layout("widescreen")
+
+
+func change_ui_layout(mode : String) -> void:
+	var colorpicker_is_switched = true if ToolAndPaletteVSplit.has_node("ScrollContainer") else false
+
+	if mode == "tallscreen" and not tallscreen_is_active:
+		tallscreen_is_active = true
+		reparent_node_to(RightPanel, BottomPanel, 0)
+		RightPanel.rect_min_size.y = 300
+		reparent_node_to(CanvasPreviewContainer, ToolAndPaletteVSplit, 1) 
+		ToolAndPaletteVSplit = replace_node_with(ToolAndPaletteVSplit, HBoxContainer.new())
+		ColorAndToolOptions.rect_min_size.x = 280
+		reparent_node_to(ToolPanel, UI.get_node("CanvasAndTimeline/HBoxContainer"), 0)
+	elif mode == "widescreen" and tallscreen_is_active:
+		tallscreen_is_active = false
+		reparent_node_to(RightPanel, UI, -1)
+		RightPanel.rect_min_size.y = 0
+		reparent_node_to(CanvasPreviewContainer, RightPanel.get_node("PreviewAndPalettes"), 0) 
+		ToolAndPaletteVSplit = replace_node_with(ToolAndPaletteVSplit, VSplitContainer.new())
+		ColorAndToolOptions.rect_min_size.x = 0
+		CanvasPreviewContainer.visible = true
+		reparent_node_to(ToolPanel, UI, 0)
+
+	if get_viewport_rect().size.x < 908 and mode == "tallscreen":
+		CanvasPreviewContainer.visible = false
+	else:
+		CanvasPreviewContainer.visible = true
+
+	if not colorpicker_is_switched and CanvasPreviewContainer.visible and mode == "tallscreen":
+		reparent_node_to(myScrollContainer, ToolAndPaletteVSplit, 0)
+		myScrollContainer.rect_min_size = Vector2(268, 196)
+		ColorAndToolOptions.set("custom_constants/separation", 20)
+		reparent_node_to(CanvasPreviewContainer, ColorAndToolOptions, -1)
+	elif colorpicker_is_switched and (not CanvasPreviewContainer.visible or mode != "tallscreen"):
+		reparent_node_to(myScrollContainer, ColorAndToolOptions, -1)
+		myScrollContainer.rect_min_size = Vector2(0, 0)
+		ColorAndToolOptions.set("custom_constants/separation", 8)
+		if mode == "widescreen":
+			reparent_node_to(CanvasPreviewContainer, RightPanel.get_node("PreviewAndPalettes"), 0)
+		else:
+			reparent_node_to(CanvasPreviewContainer, ToolAndPaletteVSplit, 1)
+
+
+# helper function (change_ui_layout)
+# warning: this doesn't really copy any sort of attributes, except a few that were needed in my particular case
+func replace_node_with(old : Node, new : Node) -> Node:
+	var tempname = old.name
+	old.name = "old"
+	new.name = tempname
+	new.size_flags_vertical = old.size_flags_horizontal
+	new.size_flags_vertical = old.size_flags_vertical
+	# new.set("custom_constants/autohide", old.get("custom_constants/autohide"))
+	if new is HBoxContainer:
+		new.set_alignment(HBoxContainer.ALIGN_CENTER)
+		new.set("custom_constants/separation", 20)
+	old.get_parent().add_child(new)
+	for n in old.get_children():
+		reparent_node_to(n, new, -1)
+	old.get_parent().remove_child(old)
+	old.queue_free()
+	return new
+
+
+# helper function (change_ui_layout)
+func reparent_node_to(node : Node, dest : Node, pos : int) -> bool:
+	if dest is Node and node is Node:
+		node.get_parent().remove_child(node)
+		dest.add_child(node)
+		node.set_owner(dest)
+		if pos >= 0:
+			dest.move_child(node, pos)
+		return true
+	else:
+		return false
+
+
 func _input(event : InputEvent) -> void:
 	Global.left_cursor.position = get_global_mouse_position() + Vector2(-32, 32)
 	Global.left_cursor.texture = Global.left_cursor_tool_texture

src/UI/CanvasPreviewContainer.tscn

@@ -23,6 +23,7 @@ margin_right = 278.0
 margin_bottom = 164.0
 rect_min_size = Vector2( 300, 0 )
 size_flags_horizontal = 4
+size_flags_vertical = 0
 script = ExtResource( 3 )
 __meta__ = {
 "_edit_use_anchors_": false

src/UI/TopMenuContainer.gd

@@ -83,6 +83,7 @@ func setup_view_menu() -> void:
 	var view_menu_items := { # order as in ViewMenuId enum
 		"Tile Mode" : 0,
 		"Window Transparency" : 0,
+		"Panel Layout" : 0,
 		"Mirror View" : InputMap.get_action_list("mirror_view")[0].get_scancode_with_modifiers(),
 		"Show Grid" : InputMap.get_action_list("show_grid")[0].get_scancode_with_modifiers(),
 		"Show Pixel Grid" : InputMap.get_action_list("show_pixel_grid")[0].get_scancode_with_modifiers(),
@@ -100,6 +101,8 @@ func setup_view_menu() -> void:
 			setup_tile_mode_submenu(item)
 		elif item == "Window Transparency":
 			setup_window_transparency_submenu(item)
+		elif item == "Panel Layout":
+			setup_panel_layout_submenu(item)
 		else:
 			view_menu.add_check_item(item, i, view_menu_items[item])
 		i += 1
@@ -124,6 +127,12 @@ func setup_window_transparency_submenu(item : String):
 	view_menu.add_submenu_item(item, Global.window_transparency_submenu.get_name())
 
 
+func setup_panel_layout_submenu(item : String):
+	Global.panel_layout_submenu.connect("id_pressed", self, "panel_layout_submenu_id_pressed")
+	view_menu.add_child(Global.panel_layout_submenu)
+	view_menu.add_submenu_item(item, Global.panel_layout_submenu.get_name())
+
+
 func setup_image_menu() -> void:
 	var image_menu_items := { # order as in ImageMenuId enum
 		"Scale Image" : 0,
@@ -314,6 +323,13 @@ func window_transparency_submenu_id_pressed(id : float) -> void:
 		window_transparency(id/10)
 
 
+func panel_layout_submenu_id_pressed(id : int) -> void:
+	Global.current_project.panel_layout = id
+	for i in Global.TileMode.values():
+		Global.panel_layout_submenu.set_item_checked(i, i == id)
+	get_tree().get_root().get_node("Control").handle_resize()
+
+
 func window_transparency(value :float) -> void:
 	if value == 1:
 		get_node("../../AlternateTransparentBackground").visible = false

src/UI/UI.tscn

@@ -359,9 +359,23 @@ current = true
 zoom = Vector2( 0.15, 0.15 )
 script = ExtResource( 7 )
 
-[node name="AnimationTimeline" parent="CanvasAndTimeline" instance=ExtResource( 18 )]
+[node name="HBoxContainer" type="HBoxContainer" parent="CanvasAndTimeline"]
 margin_top = 492.0
+margin_right = 902.0
 margin_bottom = 692.0
+size_flags_horizontal = 3
+
+[node name="BottomPanel" type="VSplitContainer" parent="CanvasAndTimeline/HBoxContainer"]
+margin_right = 902.0
+margin_bottom = 200.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+custom_constants/autohide = 0
+
+[node name="AnimationTimeline" parent="CanvasAndTimeline/HBoxContainer/BottomPanel" instance=ExtResource( 18 )]
+margin_top = 0.0
+margin_bottom = 200.0
+size_flags_vertical = 3
 custom_styles/panel = SubResource( 3 )
 
 [node name="RightPanel" type="Panel" parent="."]
@@ -388,6 +402,7 @@ margin_right = 315.0
 margin_top = 168.0
 margin_right = 330.0
 margin_bottom = 676.0
+size_flags_horizontal = 3
 size_flags_vertical = 3
 custom_constants/autohide = 0