Improve ControlBlock background drawing

Instead of reusing the background.gd script to draw a gutter in
ControlBlock, define a new script (gutter.gd) specifically for that
purpose. In the existing background.gd script, draw a left border which
is expected to flow into the gutter if shift_top or shift_bottom is set.

https://phabricator.endlessm.com/T35538

Author: dylanmccall

addons/block_code/ui/blocks/control_block/control_block.gd

@@ -13,15 +13,10 @@ var snaps: Array
 var param_name_input_pairs_array: Array
 var param_input_strings_array: Array  # Only loaded from serialized
 
-@onready var _background := %Background
-
 
 func _ready():
 	super()
 
-	_background.color = color
-	_background.custom_minimum_size.x = Constants.CONTROL_MARGIN
-
 	format()
 
 	if param_input_strings_array:
@@ -148,9 +143,18 @@ func format():
 		snap_container.custom_minimum_size.x = 30
 		snap_container.custom_minimum_size.y = 30
 		snap_container.size_flags_horizontal = Control.SIZE_SHRINK_BEGIN
-		snap_container.add_theme_constant_override("margin_left", Constants.CONTROL_MARGIN)
+
+		var snap_gutter := Control.new()
+		snap_gutter.name = "Background"
+		snap_gutter.set_script(preload("res://addons/block_code/ui/blocks/utilities/background/gutter.gd"))
+		snap_gutter.custom_minimum_size.x = Constants.CONTROL_MARGIN
+		snap_gutter.size_flags_horizontal = Control.SIZE_SHRINK_BEGIN
+		snap_gutter.size_flags_vertical = Control.SIZE_EXPAND_FILL
+		snap_gutter.color = color
+		snap_container.add_child(snap_gutter)
 
 		var snap_point: SnapPoint = preload("res://addons/block_code/ui/blocks/utilities/snap_point/snap_point.tscn").instantiate()
+		snap_point.add_theme_constant_override("margin_left", Constants.CONTROL_MARGIN)
 		snap_container.add_child(snap_point)
 
 		snaps.append(snap_point)

addons/block_code/ui/blocks/control_block/control_block.tscn

@@ -27,13 +27,6 @@ mouse_filter = 2
 theme_override_constants/margin_top = 30
 theme_override_constants/margin_bottom = 30
 
-[node name="Background" type="ColorRect" parent="VBoxContainer/MarginContainer/MarginContainer"]
-unique_name_in_owner = true
-custom_minimum_size = Vector2(20, 0)
-layout_mode = 2
-size_flags_horizontal = 0
-color = Color(0.59979, 0.536348, 0.876215, 1)
-
 [node name="Rows" type="VBoxContainer" parent="VBoxContainer/MarginContainer"]
 unique_name_in_owner = true
 layout_mode = 2

addons/block_code/ui/blocks/utilities/background/background.gd

@@ -60,7 +60,14 @@ func _draw():
 	fill_polygon.append(Vector2(0.0, 0.0))
 
 	var stroke_polygon: PackedVector2Array
-	stroke_polygon.append(Vector2(shift_top, 0.0))
+	var edge_polygon: PackedVector2Array
+	var outline_middle = Constants.OUTLINE_WIDTH / 2
+
+	if shift_top > 0:
+		stroke_polygon.append(Vector2(shift_top - outline_middle, 0.0))
+	else:
+		stroke_polygon.append(Vector2(shift_top, 0.0))
+
 	if show_top:
 		stroke_polygon.append(Vector2(Constants.KNOB_X + shift_top, 0.0))
 		stroke_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z + shift_top, Constants.KNOB_H))
@@ -74,9 +81,21 @@ func _draw():
 	stroke_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z + shift_bottom, size.y + Constants.KNOB_H))
 	stroke_polygon.append(Vector2(Constants.KNOB_X + shift_bottom, size.y))
 
-	stroke_polygon.append(Vector2(shift_bottom, size.y))
-	if shift_top + shift_bottom == 0:
-		stroke_polygon.append(Vector2(0.0, 0.0))
+	if shift_bottom > 0:
+		stroke_polygon.append(Vector2(shift_bottom - outline_middle, size.y))
+	else:
+		stroke_polygon.append(Vector2(shift_bottom, size.y))
+
+	if shift_top > 0:
+		edge_polygon.append(Vector2(0.0, 0.0))
+	else:
+		edge_polygon.append(Vector2(0.0, 0.0 - outline_middle))
+
+	if shift_bottom > 0:
+		edge_polygon.append(Vector2(0.0, size.y))
+	else:
+		edge_polygon.append(Vector2(0.0, size.y + outline_middle))
 
 	draw_colored_polygon(fill_polygon, color)
 	draw_polyline(stroke_polygon, outline_color, Constants.OUTLINE_WIDTH)
+	draw_polyline(edge_polygon, outline_color, Constants.OUTLINE_WIDTH)

addons/block_code/ui/blocks/utilities/background/gutter.gd

@@ -0,0 +1,37 @@
+@tool
+extends Control
+
+const Constants = preload("res://addons/block_code/ui/constants.gd")
+
+var outline_color: Color
+
+@export var color: Color:
+	set = _set_color
+
+
+func _set_color(new_color):
+	color = new_color
+	outline_color = color.darkened(0.2)
+	queue_redraw()
+
+
+func _draw():
+	var fill_polygon: PackedVector2Array
+	fill_polygon.append(Vector2(0.0, 0.0))
+	fill_polygon.append(Vector2(size.x, 0.0))
+	fill_polygon.append(Vector2(size.x, size.y))
+	fill_polygon.append(Vector2(0.0, size.y))
+	fill_polygon.append(Vector2(0.0, 0.0))
+
+	var left_polygon: PackedVector2Array
+	var right_polygon: PackedVector2Array
+
+	left_polygon.append(Vector2(0.0, 0.0))
+	left_polygon.append(Vector2(0.0, size.y))
+
+	right_polygon.append(Vector2(size.x, 0.0))
+	right_polygon.append(Vector2(size.x, size.y))
+
+	draw_colored_polygon(fill_polygon, color)
+	draw_polyline(left_polygon, outline_color, Constants.OUTLINE_WIDTH)
+	draw_polyline(right_polygon, outline_color, Constants.OUTLINE_WIDTH)