Merge pull request #177 from endlessm/T35538-control-block-borders

Improve ControlBlock background drawing

Author: dbnicholson

addons/block_code/drag_manager/drag.gd

@@ -1,6 +1,7 @@
 @tool
 extends Control
 
+const Background = preload("res://addons/block_code/ui/blocks/utilities/background/background.gd")
 const BlockCanvas = preload("res://addons/block_code/ui/block_canvas/block_canvas.gd")
 const Constants = preload("res://addons/block_code/ui/constants.gd")
 const InstructionTree = preload("res://addons/block_code/instruction_tree/instruction_tree.gd")
@@ -189,8 +190,7 @@ func _update_preview():
 
 	if target_snap_point:
 		# Make preview block
-		_preview_block = Control.new()
-		_preview_block.set_script(preload("res://addons/block_code/ui/blocks/utilities/background/background.gd"))
+		_preview_block = Background.new()
 
 		_preview_block.color = Color(1, 1, 1, 0.5)
 		_preview_block.custom_minimum_size = _block.get_global_rect().size

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

@@ -2,8 +2,10 @@
 class_name ControlBlock
 extends Block
 
+const Background = preload("res://addons/block_code/ui/blocks/utilities/background/background.gd")
 const Constants = preload("res://addons/block_code/ui/constants.gd")
 const DragDropArea = preload("res://addons/block_code/ui/blocks/utilities/drag_drop_area/drag_drop_area.gd")
+const Gutter = preload("res://addons/block_code/ui/blocks/utilities/background/gutter.gd")
 
 @export var block_formats: Array = []
 @export var statements: Array = []
@@ -13,15 +15,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:
@@ -109,9 +106,8 @@ func format():
 		row.custom_minimum_size.y = 30
 		row.size_flags_horizontal = Control.SIZE_SHRINK_BEGIN
 
-		var bg := Control.new()
+		var bg := Background.new()
 		bg.name = "Background"
-		bg.set_script(preload("res://addons/block_code/ui/blocks/utilities/background/background.gd"))
 		bg.color = color
 		if i != 0:
 			bg.shift_top = Constants.CONTROL_MARGIN
@@ -148,20 +144,27 @@ 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 := Gutter.new()
+		snap_gutter.name = "Background"
+		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)
 
 		%Rows.add_child(snap_container)
 
-	var bg := Control.new()
+	var bg := Background.new()
 	bg.size_flags_horizontal = Control.SIZE_SHRINK_BEGIN
 	bg.custom_minimum_size.x = 100
 	bg.custom_minimum_size.y = 30
-	bg.set_script(preload("res://addons/block_code/ui/blocks/utilities/background/background.gd"))
 	bg.color = color
 	bg.shift_top = Constants.CONTROL_MARGIN
 	%Rows.add_child(bg)

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)