Merge pull request #120 from endlessm/zoom-and-pan

Add zoom and pan to block canvas

Author: wnbaum

addons/block_code/drag_manager/drag_manager.gd

@@ -57,9 +57,14 @@ class Drag:
 	func add_delete_area(delete_area: Rect2):
 		_delete_areas.append(delete_area)
 
-	func update_drag_position():
+	func update_drag_state():
 		global_position = get_global_mouse_position()
 
+		if _block_canvas.is_mouse_over():
+			scale = Vector2(_block_canvas.zoom, _block_canvas.zoom)
+		else:
+			scale = Vector2(1, 1)
+
 		for rect in _delete_areas:
 			if rect.has_point(get_global_mouse_position()):
 				action = DragAction.REMOVE
@@ -71,7 +76,7 @@ class Drag:
 		target_snap_point = _find_closest_snap_point()
 
 	func apply_drag() -> Block:
-		update_drag_position()
+		update_drag_state()
 
 		if action == DragAction.PLACE:
 			_place_block()
@@ -147,7 +152,7 @@ class Drag:
 		var closest_distance: int
 		for snap_point in _snap_points:
 			var distance = _get_distance_to_snap_point(snap_point)
-			if distance > Constants.MINIMUM_SNAP_DISTANCE:
+			if distance > Constants.MINIMUM_SNAP_DISTANCE * _block_canvas.zoom:
 				continue
 			elif closest_snap_point == null or distance < closest_distance:
 				closest_snap_point = snap_point
@@ -202,7 +207,7 @@ func _ready():
 
 func _process(_delta):
 	if drag:
-		drag.update_drag_position()
+		drag.update_drag_state()
 
 
 func drag_block(block: Block, copied_from: Block = null):
@@ -215,6 +220,9 @@ func drag_block(block: Block, copied_from: Block = null):
 	else:
 		offset = Vector2.ZERO
 
+	if _block_canvas.is_ancestor_of(block):
+		offset /= _block_canvas.zoom
+
 	var parent = block.get_parent()
 
 	if parent:

addons/block_code/ui/block_canvas/block_canvas.gd

@@ -4,9 +4,9 @@ extends MarginContainer
 
 const EXTEND_MARGIN: float = 800
 const BLOCK_AUTO_PLACE_MARGIN: Vector2 = Vector2(16, 8)
+const ZOOM_FACTOR: float = 1.1
 
 @onready var _window: Control = %Window
-@onready var _window_scroll: ScrollContainer = %WindowScroll
 @onready var _empty_box: BoxContainer = %EmptyBox
 
 @onready var _selected_node_box: BoxContainer = %SelectedNodeBox
@@ -23,7 +23,16 @@ const BLOCK_AUTO_PLACE_MARGIN: Vector2 = Vector2(16, 8)
 
 @onready var _open_scene_icon = _open_scene_button.get_theme_icon("Load", "EditorIcons")
 
+@onready var _mouse_override: Control = %MouseOverride
+@onready var _zoom_label: Label = %ZoomLabel
+
 var _block_scenes_by_class = {}
+var _panning := false
+var zoom: float:
+	set(value):
+		_window.scale = Vector2(value, value)
+	get:
+		return _window.scale.x
 
 signal reconnect_block(block: Block)
 signal add_block_code
@@ -48,10 +57,8 @@ func _populate_block_scenes_by_class():
 
 
 func add_block(block: Block, position: Vector2 = Vector2.ZERO) -> void:
-	block.position = position
-	block.position.y += _window_scroll.scroll_vertical
+	block.position = canvas_to_window(position)
 	_window.add_child(block)
-	_window.custom_minimum_size.y = max(block.position.y + EXTEND_MARGIN, _window.custom_minimum_size.y)
 
 
 func get_blocks() -> Array[Block]:
@@ -79,6 +86,10 @@ func bsd_selected(bsd: BlockScriptData):
 
 	var edited_node = EditorInterface.get_inspector().get_edited_object() as Node
 
+	_window.position = Vector2(0, 0)
+	zoom = 1
+	_zoom_label.visible = false
+
 	_empty_box.visible = false
 	_selected_node_box.visible = false
 	_selected_node_with_block_code_box.visible = false
@@ -88,6 +99,7 @@ func bsd_selected(bsd: BlockScriptData):
 
 	if bsd != null:
 		_load_bsd(bsd)
+		_zoom_label.visible = true
 	elif edited_node == null:
 		_empty_box.visible = true
 	elif BlockCodePlugin.node_has_block_code(edited_node):
@@ -207,3 +219,58 @@ func _on_replace_block_code_button_pressed():
 	_replace_block_code_button.disabled = true
 
 	replace_block_code.emit()
+
+
+func _input(event):
+	if event is InputEventKey:
+		if event.keycode == KEY_SHIFT:
+			set_mouse_override(event.pressed)
+
+	if event is InputEventMouseButton:
+		if event.button_index == MOUSE_BUTTON_LEFT or event.button_index == MOUSE_BUTTON_MIDDLE:
+			if event.pressed and is_mouse_over():
+				_panning = true
+			else:
+				_panning = false
+
+		if event.button_index == MOUSE_BUTTON_MIDDLE:
+			set_mouse_override(event.pressed)
+
+		var relative_mouse_pos := get_global_mouse_position() - get_global_rect().position
+
+		if is_mouse_over():
+			var old_mouse_window_pos := canvas_to_window(relative_mouse_pos)
+
+			if event.button_index == MOUSE_BUTTON_WHEEL_UP and zoom < 2:
+				zoom *= ZOOM_FACTOR
+			if event.button_index == MOUSE_BUTTON_WHEEL_DOWN and zoom > 0.2:
+				zoom /= ZOOM_FACTOR
+
+			_zoom_label.text = "%.1fx" % zoom
+
+			_window.position -= (old_mouse_window_pos - canvas_to_window(relative_mouse_pos)) * zoom
+
+	if event is InputEventMouseMotion:
+		if (Input.is_key_pressed(KEY_SHIFT) and _panning) or (Input.is_mouse_button_pressed(MOUSE_BUTTON_MIDDLE) and _panning):
+			_window.position += event.relative
+
+
+func canvas_to_window(v: Vector2) -> Vector2:
+	return _window.get_transform().affine_inverse() * v
+
+
+func window_to_canvas(v: Vector2) -> Vector2:
+	return _window.get_transform() * v
+
+
+func is_mouse_over() -> bool:
+	return get_global_rect().has_point(get_global_mouse_position())
+
+
+func set_mouse_override(override: bool):
+	if override:
+		_mouse_override.mouse_filter = Control.MOUSE_FILTER_PASS
+		_mouse_override.mouse_default_cursor_shape = Control.CURSOR_MOVE
+	else:
+		_mouse_override.mouse_filter = Control.MOUSE_FILTER_IGNORE
+		_mouse_override.mouse_default_cursor_shape = Control.CURSOR_ARROW

addons/block_code/ui/block_canvas/block_canvas.tscn

@@ -3,7 +3,7 @@
 [ext_resource type="Script" path="res://addons/block_code/ui/block_canvas/block_canvas.gd" id="1_tk8h2"]
 [ext_resource type="Texture2D" uid="uid://cmusxj1ppspnp" path="res://addons/block_code/block_code_node/block_code_node.svg" id="2_710vn"]
 
-[sub_resource type="Image" id="Image_2jxnn"]
+[sub_resource type="Image" id="Image_0g48l"]
 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",
@@ -13,7 +13,7 @@ data = {
 }
 
 [sub_resource type="ImageTexture" id="ImageTexture_jgo72"]
-image = SubResource("Image_2jxnn")
+image = SubResource("Image_0g48l")
 
 [node name="BlockCanvas" type="MarginContainer"]
 anchors_preset = 15
@@ -28,16 +28,50 @@ script = ExtResource("1_tk8h2")
 [node name="Panel" type="Panel" parent="."]
 layout_mode = 2
 
-[node name="WindowScroll" type="ScrollContainer" parent="."]
-unique_name_in_owner = true
+[node name="WindowContainer" type="MarginContainer" parent="."]
+clip_contents = true
 layout_mode = 2
 
-[node name="Window" type="Control" parent="WindowScroll"]
+[node name="Window" type="Control" parent="WindowContainer"]
 unique_name_in_owner = true
 layout_mode = 2
 size_flags_horizontal = 3
 mouse_filter = 1
 
+[node name="Overlay" type="Control" parent="WindowContainer"]
+layout_mode = 2
+mouse_filter = 2
+
+[node name="MarginContainer" type="MarginContainer" parent="WindowContainer/Overlay"]
+layout_mode = 1
+anchors_preset = 3
+anchor_left = 1.0
+anchor_top = 1.0
+anchor_right = 1.0
+anchor_bottom = 1.0
+offset_left = -40.0
+offset_top = -40.0
+grow_horizontal = 0
+grow_vertical = 0
+mouse_filter = 2
+theme_override_constants/margin_left = 4
+theme_override_constants/margin_top = 4
+theme_override_constants/margin_right = 4
+theme_override_constants/margin_bottom = 4
+
+[node name="ZoomLabel" type="Label" parent="WindowContainer/Overlay/MarginContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+theme_override_colors/font_color = Color(1, 1, 1, 0.196078)
+theme_override_font_sizes/font_size = 24
+text = "1x"
+horizontal_alignment = 2
+
+[node name="MouseOverride" type="MarginContainer" parent="."]
+unique_name_in_owner = true
+layout_mode = 2
+mouse_filter = 2
+
 [node name="EmptyBox" type="VBoxContainer" parent="."]
 unique_name_in_owner = true
 visible = false