From 79a5ae7654da7feed89a34c18093e07f5ec107d0 Mon Sep 17 00:00:00 2001
From: Jowan-Spooner <42868150+Jowan-Spooner@users.noreply.github.com>
Date: Tue, 5 Dec 2023 18:44:25 +0100
Subject: [PATCH] Editor UI/UX: Floating window mode (#1880)

* Initial implementation of floating window mode

* Small adjustments to opening/closing behaviour
---
 addons/dialogic/Editor/editor_main.gd         | 50 ++++++++++++++++++-
 addons/dialogic/Editor/editor_main.tscn       | 25 ++++++----
 addons/dialogic/Editor/editors_manager.gd     |  1 -
 .../Modules/StyleEditor/style_editor.gd       |  1 -
 addons/dialogic/plugin.gd                     | 12 +++--
 5 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/addons/dialogic/Editor/editor_main.gd b/addons/dialogic/Editor/editor_main.gd
index c26e081f4..49c5e92d8 100644
--- a/addons/dialogic/Editor/editor_main.gd
+++ b/addons/dialogic/Editor/editor_main.gd
@@ -1,5 +1,5 @@
 @tool
-extends ColorRect
+extends Control
 
 ## Editor root node. Most editor functionality is handled by EditorsManager node!
 
@@ -18,9 +18,11 @@ func _ready() -> void:
 
 	## REFERENCES
 	editors_manager = $Margin/EditorsManager
+	var button :Button = editors_manager.add_icon_button(get_theme_icon("MakeFloating", "EditorIcons"), 'Make floating')
+	button.pressed.connect(toggle_floating_window)
 
 	## STYLING
-	color = get_theme_color("base_color", "Editor")
+	$BG.color = get_theme_color("base_color", "Editor")
 	editor_tab_bg.border_color = get_theme_color("base_color", "Editor")
 	editor_tab_bg.bg_color = get_theme_color("dark_color_2", "Editor")
 	$Margin/EditorsManager.editors_holder.add_theme_stylebox_override('panel', editor_tab_bg)
@@ -155,6 +157,50 @@ func update_theme_additions():
 	theme.set_icon('Plugin', 'Dialogic', load("res://addons/dialogic/Editor/Images/plugin-icon.svg"))
 
 
+## Switches from floating window mode to embedded mode based on current mode
+func toggle_floating_window():
+	if get_parent() is Window:
+		swap_to_embedded_editor()
+	else:
+		swap_to_floating_window()
+
+
+## Removes the main control from it's parent and adds it to a new Window node
+func swap_to_floating_window():
+	if get_parent() is Window:
+		return
+
+	var parent := get_parent()
+	get_parent().remove_child(self)
+	var window := Window.new()
+	parent.add_child(window)
+	window.add_child(self)
+	window.title = "Dialogic"
+	window.close_requested.connect(swap_to_embedded_editor)
+	window.content_scale_mode = Window.CONTENT_SCALE_MODE_CANVAS_ITEMS
+	window.content_scale_aspect = Window.CONTENT_SCALE_ASPECT_EXPAND
+	window.size = size
+	window.min_size = Vector2(500, 500)
+	set_anchors_preset(Control.PRESET_FULL_RECT)
+	window.disable_3d = true
+	window.wrap_controls = true
+	window.popup_centered()
+	plugin_reference.get_editor_interface().set_main_screen_editor('2D')
+
+
+## Removes the main control from the window node and adds it to it's grandparent
+##  which is the original owner.
+func swap_to_embedded_editor():
+	if not get_parent() is Window:
+		return
+
+	var window := get_parent()
+	get_parent().remove_child(self)
+	plugin_reference.get_editor_interface().set_main_screen_editor('Dialogic')
+	window.get_parent().add_child(self)
+	window.queue_free()
+
+
 func godot_file_dialog(callable:Callable, filter:String, mode := EditorFileDialog.FILE_MODE_OPEN_FILE, window_title := "Save", current_file_name := 'New_File', saving_something := false, extra_message:String = "") -> EditorFileDialog:
 	for connection in editor_file_dialog.file_selected.get_connections():
 		editor_file_dialog.file_selected.disconnect(connection.callable)
diff --git a/addons/dialogic/Editor/editor_main.tscn b/addons/dialogic/Editor/editor_main.tscn
index 1ec0d1386..73a30fc5d 100644
--- a/addons/dialogic/Editor/editor_main.tscn
+++ b/addons/dialogic/Editor/editor_main.tscn
@@ -16,7 +16,7 @@
 [ext_resource type="Script" path="res://addons/dialogic/Editor/Common/update_manager.gd" id="14_l6b1p"]
 [ext_resource type="PackedScene" uid="uid://vv3m5m68fwg7" path="res://addons/dialogic/Editor/Common/update_install_window.tscn" id="15_cu4xj"]
 
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_7lxu4"]
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_mdik5"]
 content_margin_left = 4.0
 content_margin_top = 4.0
 content_margin_right = 6.0
@@ -31,7 +31,7 @@ corner_radius_bottom_left = 5
 expand_margin_left = 2.0
 expand_margin_top = 2.0
 
-[sub_resource type="Image" id="Image_x5eud"]
+[sub_resource type="Image" id="Image_1bo4a"]
 data = {
 "data": PackedByteArray(255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 94, 94, 127, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 93, 93, 255, 255, 94, 94, 127, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 94, 94, 127, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 94, 94, 127, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 231, 255, 94, 94, 54, 255, 94, 94, 57, 255, 93, 93, 233, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 231, 255, 94, 94, 54, 255, 94, 94, 57, 255, 93, 93, 233, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 97, 97, 42, 255, 255, 255, 0, 255, 255, 255, 0, 255, 97, 97, 42, 255, 93, 93, 233, 255, 93, 93, 232, 255, 93, 93, 41, 255, 255, 255, 0, 255, 255, 255, 0, 255, 97, 97, 42, 255, 93, 93, 233, 255, 93, 93, 232, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 96, 96, 45, 255, 93, 93, 44, 255, 255, 255, 0, 255, 97, 97, 42, 255, 97, 97, 42, 255, 255, 255, 0, 255, 96, 96, 45, 255, 93, 93, 44, 255, 255, 255, 0, 255, 97, 97, 42, 255, 97, 97, 42, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 96, 96, 45, 255, 93, 93, 235, 255, 94, 94, 234, 255, 95, 95, 43, 255, 255, 255, 0, 255, 255, 255, 0, 255, 96, 96, 45, 255, 93, 93, 235, 255, 94, 94, 234, 255, 95, 95, 43, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 235, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 233, 255, 95, 95, 59, 255, 96, 96, 61, 255, 93, 93, 235, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 233, 255, 95, 95, 59, 255, 96, 96, 61, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 93, 93, 255, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0, 255, 255, 255, 0),
 "format": "RGBA8",
@@ -41,9 +41,10 @@ data = {
 }
 
 [sub_resource type="ImageTexture" id="ImageTexture_drcn6"]
-image = SubResource("Image_x5eud")
+image = SubResource("Image_1bo4a")
 
-[node name="EditorView" type="ColorRect"]
+[node name="EditorView" type="Control"]
+layout_mode = 3
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
@@ -51,13 +52,19 @@ grow_horizontal = 2
 grow_vertical = 2
 size_flags_horizontal = 3
 size_flags_vertical = 3
-color = Color(0, 0, 0, 1)
 script = ExtResource("1_x88ov")
-editor_tab_bg = SubResource("StyleBoxFlat_7lxu4")
+editor_tab_bg = SubResource("StyleBoxFlat_mdik5")
+
+[node name="BG" type="ColorRect" parent="."]
+layout_mode = 2
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+color = Color(0.0588235, 0.0980392, 0.141176, 1)
 
 [node name="Margin" type="MarginContainer" parent="."]
-layout_mode = 1
-anchors_preset = 15
+layout_mode = 2
 anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
@@ -172,8 +179,6 @@ timeout = 5.0
 
 [node name="DownloadRequest" type="HTTPRequest" parent="UpdateManager"]
 
-[connection signal="confirmed" from="SaveConfirmationDialog" to="." method="_on_SaveConfirmationDialog_confirmed"]
-[connection signal="custom_action" from="SaveConfirmationDialog" to="." method="_on_SaveConfirmationDialog_custom_action"]
 [connection signal="close_requested" from="ReferenceManager" to="ReferenceManager" method="_on_close_requested"]
 [connection signal="downdload_completed" from="UpdateManager" to="UpdateManager/Window/UpdateInstallWindow" method="_on_update_manager_downdload_completed"]
 [connection signal="update_check_completed" from="UpdateManager" to="UpdateManager" method="_on_update_check_completed"]
diff --git a/addons/dialogic/Editor/editors_manager.gd b/addons/dialogic/Editor/editors_manager.gd
index 12ac0184a..aca270064 100644
--- a/addons/dialogic/Editor/editors_manager.gd
+++ b/addons/dialogic/Editor/editors_manager.gd
@@ -42,7 +42,6 @@ func _ready() -> void:
 	_add_editor("res://addons/dialogic/Editor/TimelineEditor/timeline_editor.tscn")
 	_add_editor("res://addons/dialogic/Editor/CharacterEditor/character_editor.tscn")
 
-
 	# Load custom editors
 	for indexer in DialogicUtil.get_indexers():
 		for editor_path in indexer._get_editors():
diff --git a/addons/dialogic/Modules/StyleEditor/style_editor.gd b/addons/dialogic/Modules/StyleEditor/style_editor.gd
index 589fd2bd7..d00b5bb81 100644
--- a/addons/dialogic/Modules/StyleEditor/style_editor.gd
+++ b/addons/dialogic/Modules/StyleEditor/style_editor.gd
@@ -78,7 +78,6 @@ func save_style() -> void:
 	if current_style == null:
 		return
 
-	print("[Dialogic] Saved ", current_style.name)
 	ResourceSaver.save(current_style)
 
 
diff --git a/addons/dialogic/plugin.gd b/addons/dialogic/plugin.gd
index 36e0575c5..597ea885a 100644
--- a/addons/dialogic/plugin.gd
+++ b/addons/dialogic/plugin.gd
@@ -1,8 +1,8 @@
 @tool
 extends EditorPlugin
 
-## Main plugin script. Handles communication with the rest of godot. 
-## Most methods are overridables called by godot. 
+## Main plugin script. Handles communication with the rest of godot.
+## Most methods are overridables called by godot.
 
 
 const MainPanel := preload("res://addons/dialogic/Editor/editor_main.tscn")
@@ -70,7 +70,13 @@ func _get_plugin_icon():
 
 func _make_visible(visible:bool) -> void:
 	if editor_view:
-		editor_view.visible = visible
+		if editor_view.get_parent() is Window:
+			if visible:
+				get_editor_interface().set_main_screen_editor("Script")
+				editor_view.show()
+				editor_view.get_parent().grab_focus()
+		else:
+			editor_view.visible = visible
 
 
 func _save_external_data() -> void: