Add zoom and pan to block canvas

Author: wnbaum

addons/block_code/ui/block_canvas/block_canvas.gd

@@ -4,13 +4,16 @@ 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 _mouse_override: Control = %MouseOverride
+@onready var _zoom_label: Label = %ZoomLabel
 @onready var _choose_block_code_label: Label = %ChooseBlockCodeLabel
 @onready var _create_block_code_label: Label = %CreateBlockCodeLabel
 
 var _block_scenes_by_class = {}
+var _panning := false
 
 signal reconnect_block(block: Block)
 
@@ -30,10 +33,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]:
@@ -59,14 +60,20 @@ func set_child(n: Node):
 func bsd_selected(bsd: BlockScriptData):
 	clear_canvas()
 
+	_window.position = Vector2(0, 0)
+	_window.scale = Vector2(1, 1)
+
+	_zoom_label.visible = true
 	_choose_block_code_label.visible = false
 	_create_block_code_label.visible = false
 
 	if not bsd and scene_has_bsd_nodes():
 		_choose_block_code_label.visible = true
+		_zoom_label.visible = false
 		return
 	elif not bsd and not scene_has_bsd_nodes():
 		_create_block_code_label.visible = true
+		_zoom_label.visible = false
 		return
 
 	for tree in bsd.block_trees.array:
@@ -151,3 +158,51 @@ func set_scope(scope: String):
 func release_scope():
 	for block in _window.get_children():
 		block.modulate = Color.WHITE
+
+
+func _input(event):
+	if event is InputEventKey:
+		if event.keycode == KEY_SHIFT:
+			if event.pressed:
+				_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
+
+	if event is InputEventMouseButton:
+		if event.button_index == MOUSE_BUTTON_LEFT:
+			if event.pressed and is_mouse_over():
+				_panning = true
+			else:
+				_panning = false
+
+		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 _window.scale.x < 2:
+				_window.scale *= ZOOM_FACTOR
+			if event.button_index == MOUSE_BUTTON_WHEEL_DOWN and _window.scale.x > 0.2:
+				_window.scale /= ZOOM_FACTOR
+
+			_zoom_label.text = "%.1fx" % _window.scale.x
+
+			_window.position -= (old_mouse_window_pos - canvas_to_window(relative_mouse_pos)) * _window.scale.x
+
+	if event is InputEventMouseMotion:
+		if Input.is_key_pressed(KEY_SHIFT) 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())

addons/block_code/ui/block_canvas/block_canvas.tscn

@@ -15,16 +15,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="ChooseBlockCodeLabel" type="Label" parent="."]
 unique_name_in_owner = true
 visible = false