Add image cropping area which allows panning and zooming in bounds

Author: NetroScript

MainApplication.tscn

@@ -4,7 +4,7 @@
 [ext_resource type="Texture2D" uid="uid://dmupwt57kqn2w" path="res://assets/icons/Image.svg" id="2_6wrvd"]
 [ext_resource type="FontFile" uid="uid://d10xdr4mlux7w" path="res://assets/fonts/cantarell/Cantarell-Regular.ttf" id="3_kats2"]
 
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_kx105"]
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_7sarn"]
 resource_local_to_scene = true
 content_margin_left = 2.0
 content_margin_right = 2.0
@@ -13,16 +13,16 @@ border_width_left = 1
 border_width_top = 1
 border_width_right = 1
 border_width_bottom = 1
-border_color = Color(0, 0.8, 0.25098, 1)
+border_color = Color(0, 0.8, 0.25098, 0)
 
-[sub_resource type="FontVariation" id="FontVariation_lix7p"]
+[sub_resource type="FontVariation" id="FontVariation_r4gvt"]
 base_font = ExtResource("3_kats2")
 
 [node name="PanelContainer" type="PanelContainer"]
 custom_minimum_size = Vector2(0, 80)
 offset_right = 80.0
 offset_bottom = 80.0
-theme_override_styles/panel = SubResource("StyleBoxFlat_kx105")
+theme_override_styles/panel = SubResource("StyleBoxFlat_7sarn")
 script = ExtResource("1_7r3w4")
 
 [node name="VBoxContainer" type="VBoxContainer" parent="."]
@@ -39,7 +39,7 @@ stretch_mode = 5
 [node name="Label" type="Label" parent="VBoxContainer"]
 unique_name_in_owner = true
 layout_mode = 2
-theme_override_fonts/font = SubResource("FontVariation_lix7p")
+theme_override_fonts/font = SubResource("FontVariation_r4gvt")
 theme_override_font_sizes/font_size = 10
 text = "1"
 horizontal_alignment = 1

components/PreviewContainer.tscn

@@ -11,9 +11,30 @@ signal new_files_loaded
 signal load_subdirectories_changed(flag: bool)
 signal path_invalid(error: int)
 
+signal active_item_changed(item: ProcessedImage)
+
+signal crop_size_changed(size: Vector2i)
+
 var currently_loaded_files: Array[ProcessedImage] = []
 
-var current_index := 0
+var current_loading_index := 0
+var currently_active_item: ProcessedImage
+
+var crop_to_size: Vector2i = Vector2i(512,512) : 
+	set(value): 
+		crop_to_size = value 
+		crop_size_changed.emit(value)
+
+var current_active_index := -1 : 
+	set(value):
+		if current_active_index > -1 and currently_active_item:
+			currently_active_item.is_active = false
+		
+		if value > -1 and value < currently_loaded_files.size():
+			current_active_index = value 
+			currently_active_item = currently_loaded_files[current_active_index]
+			active_item_changed.emit(currently_active_item)
+			currently_active_item.is_active = true
 
 var thread_polling_timer: Timer
 var thread_workers: Array[ImageThreadWorker] = []
@@ -46,8 +67,6 @@ func _ready() -> void:
 	thread_polling_timer.timeout.connect(_poll_threads)
 	thread_polling_timer.paused = false
 	thread_polling_timer.start()
-
-	
 
 func _poll_threads() -> void:
 
@@ -94,16 +113,16 @@ func _entry_path_changed() -> void:
 	# Now create the ProcessedImages instances
 	for file_path in file_list:
 
-		var image := ProcessedImage.new(current_index, file_path)
+		var image := ProcessedImage.new(current_loading_index, file_path)
 		currently_loaded_files.append(image)
-		current_index += 1
+		current_loading_index += 1
 
 	new_files_loaded.emit()
 
 func clear() -> void:
 	pre_clear.emit()
 	currently_loaded_files.clear()
-	current_index = 0
+	current_loading_index = 0
 	post_clear.emit()
 
 class ImageThreadWorkerTask extends Resource:

scripts/Application.gd

@@ -128,3 +128,4 @@ func _process(delta: float) -> void:
 
 		if preview_list.size() == Application.currently_loaded_files.size():
 			filling_images = false
+			Application.current_active_index = 0

scripts/ImageScrollManager.gd

@@ -0,0 +1,119 @@
+extends Sprite2D
+
+var current_image: ProcessedImage
+@onready
+var cutout_area : Control = %CutOutArea 
+var minimum_zoom : float 
+var space_available_from_center : Vector2 
+var additional_offset : Vector2
+var size: Vector2
+var old_relative_position: Vector2
+var pinch_zoom_start: Vector2
+
+# Called when the node enters the scene tree for the first time.
+func _ready() -> void:
+	Application.active_item_changed.connect(update_image)
+	cutout_area.resized.connect(update_positions)
+	
+func update_image(image: ProcessedImage) -> void:
+
+	if current_image != null:
+		current_image.was_loaded.disconnect(update_image.bind(image))
+	
+	current_image = image
+	
+	if image.original_texture == null:
+		image.load_image()
+		image.was_loaded.connect(update_image.bind(image))
+	
+	texture = image.original_texture
+
+func update_positions() -> void:
+	if texture == null:
+		return
+	
+	# Set size to original texture size
+	size = texture.get_size()
+	
+	# Adjust the scale so that it fits our aspectratio container
+	var container_ratio := float(Application.crop_to_size.x)/float(Application.crop_to_size.y)
+	var image_ratio := float(size.x)/float(size.y)
+	
+	var scale_tmp : float
+	
+	if image_ratio < container_ratio:
+		scale_tmp = cutout_area.size.x / size.x 
+	else:
+		scale_tmp = cutout_area.size.y / size.y
+	
+	minimum_zoom = scale_tmp
+	scale = Vector2(scale_tmp, scale_tmp)
+	
+func _input(event: InputEvent) -> void:
+	
+	
+	# Check for mouse events to update the position
+	
+	if event is InputEventMouseMotion and Input.is_mouse_button_pressed(MOUSE_BUTTON_LEFT):
+			
+		additional_offset -= event.relative
+		clamp_position()
+		
+		
+	if event is InputEventMouseMotion and Input.is_mouse_button_pressed(MOUSE_BUTTON_RIGHT):
+		
+		if event.relative.x > 0:
+			scale *= 1.0 + event.relative.x / 200
+			
+
+		elif event.relative.x < 0:
+			scale *= 1.0 + event.relative.x / 200
+			
+		
+		if event.relative.y > 0:
+			scale *= 1.0 + event.relative.y / 1000
+			
+
+		elif event.relative.y < 0:
+			scale *= 1.0 + event.relative.y / 1000
+			
+		if scale.x < minimum_zoom:
+			scale = Vector2(minimum_zoom, minimum_zoom)
+			
+		
+		additional_offset += (pinch_zoom_start - get_local_mouse_position())*scale
+
+		
+	
+	if event is InputEventMouseButton:
+		
+		if event.button_index == MOUSE_BUTTON_RIGHT:
+			if event.pressed:
+				pinch_zoom_start = get_local_mouse_position()
+		
+		if event.button_index == MOUSE_BUTTON_WHEEL_UP:
+			scale *= 1.05		
+			additional_offset += (old_relative_position - get_local_mouse_position())*scale
+
+
+		elif event.button_index == MOUSE_BUTTON_WHEEL_DOWN:
+			scale *= 0.9
+			
+			if scale.x < minimum_zoom:
+				scale = Vector2(minimum_zoom, minimum_zoom)
+			additional_offset += (old_relative_position - get_local_mouse_position())*scale
+			
+	clamp_position()
+
+	
+	old_relative_position = get_local_mouse_position() 
+
+func clamp_position() -> void:
+	space_available_from_center = ((size - (cutout_area.size / scale))/2)*scale
+		
+	if abs(additional_offset.x) > space_available_from_center.x:
+		additional_offset.x = space_available_from_center.x * sign(additional_offset.x)
+	if abs(additional_offset.y) > space_available_from_center.y:
+		additional_offset.y = space_available_from_center.y * sign(additional_offset.y)
+	
+	position = -additional_offset

scripts/ImageViewManager.gd

@@ -12,7 +12,7 @@ var label: Label = %Label
 @onready
 var texture : TextureRect = %Texture
 
-var is_active: bool = false
+var stylebox: StyleBoxFlat
 
 # Called when the node enters the scene tree for the first time.
 func _ready() -> void:
@@ -21,7 +21,9 @@ func _ready() -> void:
 		image_reference.was_loaded.connect(set_texture)
 		image_reference.was_exported.connect(set_texture)
 		image_reference.was_unloaded.connect(set_texture)
+		image_reference.active_changed.connect(update_outline)
 
+	stylebox = get("theme_override_styles/panel")
 
 	# Set the context of the Label to our image_reference index
 	update_label()
@@ -39,14 +41,26 @@ func update_label() -> void:
 		label.text = str(image_reference.index) + " - " + image_reference.get_file_name()
 	else:
 		label.text = str(image_reference.index)
-
-func set_texture() -> void:
+		
+func update_outline() -> void:#
 
 	if image_reference == null:
 		return
+	
+	if image_reference.is_active:
+		stylebox.bg_color = Color(0.2, 0.2, 0.2)
+	else:
+		stylebox.bg_color = Color(0.1, 0.1, 0.1)
+
 
 	if image_reference.was_already_exported:
-		pass
+		stylebox.border_color = Color(0.0247, 0.3438, 0.1081)
+	
+
+func set_texture() -> void:
+	
+	if image_reference == null:
+		return
 
 	if image_reference.preview_texture != null:
 		texture.texture = image_reference.preview_texture

scripts/PreviewContainer.gd

@@ -5,6 +5,8 @@ signal was_exported
 signal was_loaded
 signal was_unloaded
 
+signal active_changed
+
 var source_path: String
 var processed_path: String
 var is_currently_loaded := false 
@@ -17,6 +19,11 @@ var index: int = 0
 
 var is_loading_image: bool = false
 
+var is_active: bool = false :
+	set(value):
+		is_active = value
+		active_changed.emit()
+
 func _init(index: int, source_path: String) -> void:
 	self.index = index 
 	self.source_path = source_path