Place the viewer and editor in separate windows

project.godot

@@ -23,10 +23,10 @@ Globals="*res://src/Globals.gd"
 
 [display]
 
-window/size/viewport_width=1280
+window/size/viewport_width=700
-window/size/viewport_height=720
+window/size/viewport_height=700
-window/size/mode=2
 window/energy_saving/keep_screen_on=false
+window/subwindows/embed_subwindows=false
 window/vsync/vsync_mode=0
 
 [editor_plugins]

scenes/main.tscn

@@ -1,11 +1,11 @@
-[gd_scene load_steps=12 format=3 uid="uid://bjah7k4bxo044"]
+[gd_scene load_steps=11 format=3 uid="uid://bjah7k4bxo044"]
 
 [ext_resource type="Script" path="res://src/Main.gd" id="1_2625y"]
 [ext_resource type="Script" path="res://src/ImageViewport.gd" id="2_hvo65"]
 [ext_resource type="Shader" path="res://src/shader/ivd_outline.gdshader" id="3_6xihe"]
 [ext_resource type="Script" path="res://src/ImageViewportDisplay.gd" id="3_n4itb"]
-[ext_resource type="Shader" path="res://src/shader/ui_background.gdshader" id="4_ty3qx"]
 [ext_resource type="Script" path="res://src/UIAppVersion.gd" id="5_o1ggv"]
+[ext_resource type="Script" path="res://src/UIWindow.gd" id="6_8k0ha"]
 [ext_resource type="Script" path="res://src/Editor.gd" id="7_g8bap"]
 [ext_resource type="Script" path="res://src/Camera.gd" id="8_mls06"]
 
@@ -16,9 +16,6 @@ shader_parameter/zoom_level = Vector2(1, 1)
 [sub_resource type="ViewportTexture" id="ViewportTexture_lct1c"]
 viewport_path = NodePath("ImageViewport")
 
-[sub_resource type="ShaderMaterial" id="ShaderMaterial_onhxk"]
-shader = ExtResource("4_ty3qx")
-
 [node name="Main" type="Node2D"]
 script = ExtResource("1_2625y")
 
@@ -39,38 +36,27 @@ material = SubResource("ShaderMaterial_y2ea0")
 texture = SubResource("ViewportTexture_lct1c")
 script = ExtResource("3_n4itb")
 
-[node name="UI_Layer" type="CanvasLayer" parent="."]
+[node name="Camera" type="Camera2D" parent="."]
+unique_name_in_owner = true
+script = ExtResource("8_mls06")
 
-[node name="FokusStealer" type="Control" parent="UI_Layer"]
+[node name="EditorWindow" type="Window" parent="."]
-layout_mode = 3
+unique_name_in_owner = true
-anchors_preset = 15
+disable_3d = true
-anchor_right = 1.0
+position = Vector2i(50, 100)
-anchor_bottom = 1.0
+size = Vector2i(600, 700)
-grow_horizontal = 2
+script = ExtResource("6_8k0ha")
-grow_vertical = 2
-focus_mode = 2
 
-[node name="UserInterfaceContainer" type="Control" parent="UI_Layer"]
+[node name="UserInterfaceContainer" type="Control" parent="EditorWindow"]
 unique_name_in_owner = true
 layout_mode = 3
-anchor_right = 0.225
-anchor_bottom = 1.0
-offset_right = 288.0
-grow_horizontal = 2
-grow_vertical = 2
-
-[node name="Background" type="ColorRect" parent="UI_Layer/UserInterfaceContainer"]
-material = SubResource("ShaderMaterial_onhxk")
-layout_mode = 1
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
-focus_mode = 2
-color = Color(1, 1, 1, 0)
 
-[node name="AppName" type="Label" parent="UI_Layer/UserInterfaceContainer"]
+[node name="AppName" type="Label" parent="EditorWindow/UserInterfaceContainer"]
 layout_mode = 0
 offset_left = 24.0
 offset_top = 16.0
@@ -80,7 +66,7 @@ theme_override_font_sizes/font_size = 20
 text = "Fragmented"
 vertical_alignment = 2
 
-[node name="AppVersion" type="Label" parent="UI_Layer/UserInterfaceContainer"]
+[node name="AppVersion" type="Label" parent="EditorWindow/UserInterfaceContainer"]
 layout_mode = 0
 offset_left = 152.0
 offset_top = 17.0
@@ -92,7 +78,7 @@ text = "v0
 vertical_alignment = 2
 script = ExtResource("5_o1ggv")
 
-[node name="Editor" type="Control" parent="UI_Layer/UserInterfaceContainer"]
+[node name="Editor" type="Control" parent="EditorWindow/UserInterfaceContainer"]
 layout_mode = 1
 anchors_preset = 15
 anchor_right = 1.0
@@ -105,7 +91,7 @@ grow_horizontal = 2
 grow_vertical = 2
 script = ExtResource("7_g8bap")
 
-[node name="OpenShaderDialog" type="FileDialog" parent="UI_Layer/UserInterfaceContainer/Editor"]
+[node name="OpenShaderDialog" type="FileDialog" parent="EditorWindow/UserInterfaceContainer/Editor"]
 unique_name_in_owner = true
 title = "Load Shader"
 size = Vector2i(521, 175)
@@ -116,7 +102,7 @@ access = 2
 filters = PackedStringArray("*.gdshader")
 use_native_dialog = true
 
-[node name="SaveShaderDialog" type="FileDialog" parent="UI_Layer/UserInterfaceContainer/Editor"]
+[node name="SaveShaderDialog" type="FileDialog" parent="EditorWindow/UserInterfaceContainer/Editor"]
 unique_name_in_owner = true
 title = "Save Shader"
 size = Vector2i(661, 175)
@@ -126,7 +112,7 @@ access = 2
 filters = PackedStringArray("*.gdshader")
 use_native_dialog = true
 
-[node name="SaveImageDialog" type="FileDialog" parent="UI_Layer/UserInterfaceContainer/Editor"]
+[node name="SaveImageDialog" type="FileDialog" parent="EditorWindow/UserInterfaceContainer/Editor"]
 unique_name_in_owner = true
 title = "Export Image"
 size = Vector2i(661, 175)
@@ -136,7 +122,7 @@ access = 2
 filters = PackedStringArray("*.png")
 use_native_dialog = true
 
-[node name="CodeEdit" type="CodeEdit" parent="UI_Layer/UserInterfaceContainer/Editor"]
+[node name="CodeEdit" type="CodeEdit" parent="EditorWindow/UserInterfaceContainer/Editor"]
 unique_name_in_owner = true
 layout_mode = 1
 anchors_preset = 15
@@ -161,27 +147,27 @@ indent_automatic = true
 auto_brace_completion_enabled = true
 auto_brace_completion_highlight_matching = true
 
-[node name="OpenShaderButton" type="Button" parent="UI_Layer/UserInterfaceContainer/Editor"]
+[node name="OpenShaderButton" type="Button" parent="EditorWindow/UserInterfaceContainer/Editor"]
 layout_mode = 1
 offset_right = 56.0
 offset_bottom = 32.0
 text = "Open"
 
-[node name="SaveShaderButton" type="Button" parent="UI_Layer/UserInterfaceContainer/Editor"]
+[node name="SaveShaderButton" type="Button" parent="EditorWindow/UserInterfaceContainer/Editor"]
 layout_mode = 1
 offset_left = 64.0
 offset_right = 120.0
 offset_bottom = 32.0
 text = "Save"
 
-[node name="ApplyShaderButton" type="Button" parent="UI_Layer/UserInterfaceContainer/Editor"]
+[node name="ApplyShaderButton" type="Button" parent="EditorWindow/UserInterfaceContainer/Editor"]
 layout_mode = 1
 offset_left = 128.0
 offset_right = 216.0
 offset_bottom = 32.0
 text = "Apply (F5)"
 
-[node name="SaveImageButton" type="Button" parent="UI_Layer/UserInterfaceContainer/Editor"]
+[node name="SaveImageButton" type="Button" parent="EditorWindow/UserInterfaceContainer/Editor"]
 layout_mode = 1
 anchors_preset = 1
 anchor_left = 1.0
@@ -191,7 +177,7 @@ offset_bottom = 32.0
 grow_horizontal = 0
 text = "Export Image"
 
-[node name="FitImageButton" type="Button" parent="UI_Layer/UserInterfaceContainer/Editor"]
+[node name="FitImageButton" type="Button" parent="EditorWindow/UserInterfaceContainer/Editor"]
 layout_mode = 1
 anchors_preset = 1
 anchor_left = 1.0
@@ -202,16 +188,13 @@ offset_bottom = 32.0
 grow_horizontal = 0
 text = "Fit Image"
 
-[node name="Camera" type="Camera2D" parent="."]
+[connection signal="close_requested" from="EditorWindow" to="EditorWindow" method="_on_close_requested"]
-unique_name_in_owner = true
+[connection signal="file_selected" from="EditorWindow/UserInterfaceContainer/Editor/OpenShaderDialog" to="EditorWindow/UserInterfaceContainer/Editor" method="_on_open_shader_dialog_file_selected"]
-script = ExtResource("8_mls06")
+[connection signal="file_selected" from="EditorWindow/UserInterfaceContainer/Editor/SaveShaderDialog" to="EditorWindow/UserInterfaceContainer/Editor" method="_on_save_shader_dialog_file_selected"]
-
+[connection signal="file_selected" from="EditorWindow/UserInterfaceContainer/Editor/SaveImageDialog" to="EditorWindow/UserInterfaceContainer/Editor" method="_on_save_image_dialog_file_selected"]
-[connection signal="file_selected" from="UI_Layer/UserInterfaceContainer/Editor/OpenShaderDialog" to="UI_Layer/UserInterfaceContainer/Editor" method="_on_open_shader_dialog_file_selected"]
+[connection signal="code_completion_requested" from="EditorWindow/UserInterfaceContainer/Editor/CodeEdit" to="EditorWindow/UserInterfaceContainer/Editor" method="_on_code_edit_code_completion_requested"]
-[connection signal="file_selected" from="UI_Layer/UserInterfaceContainer/Editor/SaveShaderDialog" to="UI_Layer/UserInterfaceContainer/Editor" method="_on_save_shader_dialog_file_selected"]
+[connection signal="pressed" from="EditorWindow/UserInterfaceContainer/Editor/OpenShaderButton" to="EditorWindow/UserInterfaceContainer/Editor" method="_on_open_shader_button_pressed"]
-[connection signal="file_selected" from="UI_Layer/UserInterfaceContainer/Editor/SaveImageDialog" to="." method="_on_save_image_dialog_file_selected"]
+[connection signal="pressed" from="EditorWindow/UserInterfaceContainer/Editor/SaveShaderButton" to="EditorWindow/UserInterfaceContainer/Editor" method="_on_save_shader_button_pressed"]
-[connection signal="code_completion_requested" from="UI_Layer/UserInterfaceContainer/Editor/CodeEdit" to="UI_Layer/UserInterfaceContainer/Editor" method="_on_code_edit_code_completion_requested"]
+[connection signal="pressed" from="EditorWindow/UserInterfaceContainer/Editor/ApplyShaderButton" to="EditorWindow/UserInterfaceContainer/Editor" method="_on_apply_shader_button_pressed"]
-[connection signal="pressed" from="UI_Layer/UserInterfaceContainer/Editor/OpenShaderButton" to="UI_Layer/UserInterfaceContainer/Editor" method="_on_open_shader_button_pressed"]
+[connection signal="pressed" from="EditorWindow/UserInterfaceContainer/Editor/SaveImageButton" to="EditorWindow/UserInterfaceContainer/Editor" method="_on_save_image_button_pressed"]
-[connection signal="pressed" from="UI_Layer/UserInterfaceContainer/Editor/SaveShaderButton" to="UI_Layer/UserInterfaceContainer/Editor" method="_on_save_shader_button_pressed"]
+[connection signal="pressed" from="EditorWindow/UserInterfaceContainer/Editor/FitImageButton" to="Camera" method="_on_fit_image_button_pressed"]
-[connection signal="pressed" from="UI_Layer/UserInterfaceContainer/Editor/ApplyShaderButton" to="UI_Layer/UserInterfaceContainer/Editor" method="_on_apply_shader_button_pressed"]
-[connection signal="pressed" from="UI_Layer/UserInterfaceContainer/Editor/SaveImageButton" to="." method="_on_save_image_button_pressed"]
-[connection signal="pressed" from="UI_Layer/UserInterfaceContainer/Editor/FitImageButton" to="Camera" method="_on_fit_image_button_pressed"]

src/Camera.gd

@@ -2,16 +2,15 @@ extends Camera2D
 
 var drag = false
 
-@onready var user_interface_container = %UserInterfaceContainer
 @onready var image_viewport = %ImageViewport
 @onready var image_viewport_display = %ImageViewportDisplay
 
 func _input(event):
-	if event.is_action_pressed("zoom_out") && !Globals.camera_freeze:
+	if event.is_action_pressed("zoom_out"):
 		zoom_out()
-	elif event.is_action_pressed("zoom_in") && !Globals.camera_freeze:
+	elif event.is_action_pressed("zoom_in"):
 		zoom_in()
-	if event.is_action_pressed("drag") && !Globals.camera_freeze:
+	if event.is_action_pressed("drag"):
 		drag = true
 	elif event.is_action_released("drag"):
 		drag = false
@@ -20,14 +19,13 @@ func _input(event):
 
 func fit_image():
 	if image_viewport.image_original_tex != null:
-		var ui_container_size = user_interface_container.size
 		var image_size = image_viewport.image_original_tex.get_size()
 		var viewport_size = get_viewport_rect().size
-		var zoomf = (viewport_size.x - ui_container_size.x) / image_size.x / 1.1
+		var zoomf = viewport_size.x / image_size.x / 1.1
 		if zoomf * image_size.y > viewport_size.y:
 			zoomf = viewport_size.y / image_size.y / 1.1
 		zoom = Vector2(zoomf, zoomf)
-		global_position = Vector2(-((ui_container_size.x) / 2 / zoom.x), 0)
+		global_position = Vector2(0, 0)
 
 func update_viewport_display():
 	image_viewport_display.update_zoom_texture_filter(zoom)

src/Editor.gd

@@ -4,6 +4,9 @@ extends Control
 @onready var open_shader_dialog = %OpenShaderDialog
 @onready var save_shader_dialog = %SaveShaderDialog
 
+@onready var image_viewport = %ImageViewport
+@onready var ui_control_filesave = %SaveImageDialog
+
 # # # # # # # # # # #
 # GDShader keywords #
 # https://github.com/godotengine/godot/blob/e96ad5af98547df71b50c4c4695ac348638113e0/servers/rendering/shader_language.cpp
@@ -165,18 +168,9 @@ func _on_code_edit_code_completion_requested():
 #
 # # # # # # # # # # # #
 
-func _camera_freeze():
-	Globals.camera_freeze = true
-
-func _camera_unfreeze():
-	Globals.camera_freeze = false
-
 func _ready():
 	code_editor.code_completion_enabled = true
 	code_editor.syntax_highlighter = ShaderSyntaxHighlighter.new()
-	for c in get_children():
-		c.connect("mouse_entered", _camera_freeze)
-		c.connect("mouse_exited", _camera_unfreeze)
 	update()
 
 func _input(event):
@@ -208,7 +202,7 @@ func _on_open_shader_dialog_file_selected(path: String):
 	Globals.shader = shader
 	if "/" in path: # update current working directory
 		Globals.cwd = path.substr(0, path.rfind("/"))
-	Globals.target_viewport.update()
+	image_viewport.update()
 	update()
 	Globals.last_shader_savepath = path
 
@@ -225,4 +219,17 @@ func _on_apply_shader_button_pressed():
 	var shader = Shader.new()
 	shader.code = code_editor.text
 	Globals.shader = shader
-	Globals.target_viewport.update()
+	image_viewport.update()
+
+func _on_save_image_button_pressed():
+	if image_viewport.get_result() != null:
+		ui_control_filesave.current_path = Globals.last_image_savepath
+		ui_control_filesave.show()
+
+func _on_save_image_dialog_file_selected(path):
+	print("Export ", path)
+	var err = image_viewport.get_result().save_png(path)
+	if err != OK:
+		print("An error occured!")
+	else:
+		Globals.last_image_savepath = path

src/Globals.gd

@@ -1,8 +1,6 @@
 extends Node
 
-var camera_freeze = false
 @onready var shader: Shader = load("res://src/shader/template.gdshader")
-var target_viewport: SubViewport
 var cwd = "."
 var last_image_savepath = ""
 var last_shader_savepath = ""

src/Main.gd

@@ -1,22 +1,11 @@
-extends Node2D
+extends Node
-
-@onready var image_viewport = %ImageViewport
-@onready var ui_control_filesave = %SaveImageDialog
 
+@onready var editor_window = %EditorWindow
 
 func _ready():
-	DisplayServer.window_set_min_size(Vector2i(900, 500))
+	# position windows
-	Globals.target_viewport = image_viewport
+	get_window().position = Vector2i(
-
+		editor_window.position.x + editor_window.size.x + 50,
-func _on_save_image_button_pressed():
+		editor_window.position.y)
-	if image_viewport.get_result() != null:
+	get_window().title = ProjectSettings.get_setting("application/config/name") + " - Viewer"
-		ui_control_filesave.current_path = Globals.last_image_savepath
+	editor_window.title = ProjectSettings.get_setting("application/config/name") + " - Editor"
-		ui_control_filesave.show()
-
-func _on_save_image_dialog_file_selected(path):
-	print("Export ", path)
-	var err = image_viewport.get_result().save_png(path)
-	if err != OK:
-		print("An error occured!")
-	else:
-		Globals.last_image_savepath = path

src/UIWindow.gd

@@ -0,0 +1,4 @@
+extends Window
+
+func _on_close_requested() -> void:
+	get_tree().quit()

src/shader/ui_background.gdshader

@@ -1,17 +0,0 @@
-shader_type canvas_item;
-
-uniform sampler2D SCREEN_TEXTURE: hint_screen_texture, repeat_disable, filter_linear_mipmap_anisotropic;
-
-float rand(vec2 uv) {
-	return fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453123);
-}
-
-void fragment() {
-	vec2 new_uv;
-	new_uv.x = mix(SCREEN_UV.x, rand(UV), 0.2);
-	new_uv.y = mix(SCREEN_UV.y, rand(UV), 0.2);
-	new_uv.x = mix(new_uv.x, rand(UV), -0.2);
-	new_uv.y = mix(new_uv.y, rand(UV), -0.2);
-	COLOR.rgb = clamp(textureLod(SCREEN_TEXTURE, new_uv, 10.0).rgb, 0.05, 0.7);
-	COLOR.a = 1.0;
-}