Skip to content

Commit 493caa1

Browse files
manuqmanuq
authored
Merge pull request #325 from endlessm/new-shapes
UI: Improve block shapes
2 parents 2867d30 + f3c1e45 commit 493caa1

8 files changed

Lines changed: 157 additions & 56 deletions

File tree

‎addons/block_code/drag_manager/drag.gd‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ func _get_distance_to_snap_point(snap_point: SnapPoint) -> float:
179179
func _update_action_hint():
180180
match action:
181181
DragAction.REMOVE:
182-
_block.modulate = Color(1.0, 1.0, 1.0, 0.5)
182+
_block.modulate = Constants.DRAG_REMOVE_COLOR
183183
_:
184184
_block.modulate = Color.WHITE
185185

@@ -193,7 +193,15 @@ func _update_preview():
193193
# Make preview block
194194
_preview_block = Background.new()
195195

196-
_preview_block.color = Color(1, 1, 1, 0.5)
196+
_preview_block.color = Constants.DRAG_PREVIEW_COLOR
197+
if _block.definition.type == Types.BlockType.CONTROL:
198+
# Especial case for control block, use statement shape as preview:
199+
_preview_block.block_type = Types.BlockType.STATEMENT
200+
else:
201+
_preview_block.block_type = _block.definition.type
202+
if _block.definition.type == Types.BlockType.VALUE and _block.definition.variant_type == TYPE_BOOL:
203+
_preview_block.is_pointy_value = true
204+
197205
_preview_block.custom_minimum_size = _block.get_global_rect().size / scale
198206
_preview_block.size_flags_horizontal = Control.SIZE_SHRINK_BEGIN
199207
_preview_block.size_flags_vertical = Control.SIZE_SHRINK_BEGIN

‎addons/block_code/ui/blocks/entry_block/entry_block.tscn‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@ layout_mode = 2
1919
mouse_filter = 2
2020
theme_override_constants/separation = 0
2121

22+
[node name="DragDropArea" parent="VBoxContainer" instance=ExtResource("3_swkpp")]
23+
custom_minimum_size = Vector2(80, 16)
24+
layout_mode = 2
25+
size_flags_horizontal = 0
26+
mouse_default_cursor_shape = 2
27+
2228
[node name="TopMarginContainer" type="MarginContainer" parent="VBoxContainer"]
2329
custom_minimum_size = Vector2(0, 30)
2430
layout_mode = 2
@@ -56,4 +62,5 @@ layout_mode = 2
5662
[node name="SnapPoint" parent="VBoxContainer" instance=ExtResource("4_yj206")]
5763
layout_mode = 2
5864

65+
[connection signal="drag_started" from="VBoxContainer/DragDropArea" to="." method="_on_drag_drop_area_drag_started"]
5966
[connection signal="drag_started" from="VBoxContainer/TopMarginContainer/DragDropArea" to="." method="_on_drag_drop_area_drag_started"]

‎addons/block_code/ui/blocks/parameter_block/parameter_block.gd‎

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,28 @@ const Constants = preload("res://addons/block_code/ui/constants.gd")
66
const Util = preload("res://addons/block_code/ui/util.gd")
77
const ParameterOutput = preload("res://addons/block_code/ui/blocks/utilities/parameter_output/parameter_output.gd")
88

9-
@onready var _panel := $Panel
9+
@onready var _background := %Background
1010

1111
var args_to_add_after_format: Dictionary # Only used when loading
1212
var spawned_by: ParameterOutput
1313

14-
var _panel_normal: StyleBox
15-
var _panel_focus: StyleBox
16-
1714

1815
func _ready():
1916
super()
17+
_background.color = color
18+
_update_block_shape()
19+
2020

21-
_panel_normal = _panel.get_theme_stylebox("panel").duplicate()
22-
_panel_normal.bg_color = color
23-
_panel_normal.border_color = color.darkened(0.2)
21+
func _on_definition_changed():
22+
super()
23+
_update_block_shape()
2424

25-
_panel_focus = _panel.get_theme_stylebox("panel").duplicate()
26-
_panel_focus.bg_color = color
27-
_panel_focus.border_color = Constants.FOCUS_BORDER_COLOR
2825

29-
if not Util.node_is_part_of_edited_scene(self):
30-
_panel.add_theme_stylebox_override("panel", _panel_normal)
26+
func _update_block_shape():
27+
if not definition:
28+
return
29+
await ready
30+
_background.is_pointy_value = definition.variant_type == TYPE_BOOL
3131

3232

3333
func _on_drag_drop_area_drag_started(offset: Vector2) -> void:
@@ -40,11 +40,3 @@ static func get_block_class():
4040

4141
static func get_scene_path():
4242
return "res://addons/block_code/ui/blocks/parameter_block/parameter_block.tscn"
43-
44-
45-
func _on_focus_entered():
46-
_panel.add_theme_stylebox_override("panel", _panel_focus)
47-
48-
49-
func _on_focus_exited():
50-
_panel.add_theme_stylebox_override("panel", _panel_normal)

‎addons/block_code/ui/blocks/parameter_block/parameter_block.tscn‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,9 @@
22

33
[ext_resource type="Script" path="res://addons/block_code/ui/blocks/parameter_block/parameter_block.gd" id="1_0hajy"]
44
[ext_resource type="PackedScene" uid="uid://c7puyxpqcq6xo" path="res://addons/block_code/ui/blocks/utilities/drag_drop_area/drag_drop_area.tscn" id="2_0eadx"]
5+
[ext_resource type="Script" path="res://addons/block_code/ui/blocks/utilities/background/background.gd" id="2_oimwh"]
56
[ext_resource type="PackedScene" uid="uid://b1xvp3u11h41s" path="res://addons/block_code/ui/blocks/utilities/template_editor/template_editor.tscn" id="3_shl1a"]
67

7-
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_dbera"]
8-
bg_color = Color(1, 1, 1, 1)
9-
border_width_left = 3
10-
border_width_top = 3
11-
border_width_right = 3
12-
border_width_bottom = 3
13-
corner_radius_top_left = 16
14-
corner_radius_top_right = 16
15-
corner_radius_bottom_right = 16
16-
corner_radius_bottom_left = 16
17-
188
[node name="ParameterBlock" type="MarginContainer" node_paths=PackedStringArray("template_editor")]
199
offset_right = 16.0
2010
offset_bottom = 8.0
@@ -24,10 +14,13 @@ mouse_filter = 2
2414
script = ExtResource("1_0hajy")
2515
template_editor = NodePath("MarginContainer/TemplateEditor")
2616

27-
[node name="Panel" type="Panel" parent="."]
17+
[node name="Background" type="Control" parent="."]
2818
unique_name_in_owner = true
2919
layout_mode = 2
30-
theme_override_styles/panel = SubResource("StyleBoxFlat_dbera")
20+
script = ExtResource("2_oimwh")
21+
color = Color(1, 1, 1, 1)
22+
block_type = 3
23+
is_pointy_value = null
3124

3225
[node name="DragDropArea" parent="." instance=ExtResource("2_0eadx")]
3326
layout_mode = 2
@@ -36,6 +29,8 @@ mouse_default_cursor_shape = 2
3629
[node name="MarginContainer" type="MarginContainer" parent="."]
3730
layout_mode = 2
3831
mouse_filter = 2
32+
theme_override_constants/margin_left = 10
33+
theme_override_constants/margin_right = 10
3934

4035
[node name="TemplateEditor" parent="MarginContainer" instance=ExtResource("3_shl1a")]
4136
unique_name_in_owner = true

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

Lines changed: 105 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ var parent_block: Block
2323
@export var control_part: ControlPart = ControlPart.TOP:
2424
set = _set_control_part
2525

26+
## Only relevant if block_type is VALUE.
27+
@export var is_pointy_value: bool = false:
28+
set = _set_is_pointy_value
29+
2630

2731
func _set_color(new_color):
2832
color = new_color
@@ -40,6 +44,11 @@ func _set_control_part(new_control_part):
4044
queue_redraw()
4145

4246

47+
func _set_is_pointy_value(new_is_pointy_value):
48+
is_pointy_value = new_is_pointy_value
49+
queue_redraw()
50+
51+
4352
func _ready():
4453
parent_block = BlockTreeUtil.get_parent_block(self)
4554
parent_block.focus_entered.connect(queue_redraw)
@@ -77,9 +86,29 @@ func _get_knob_shape(displacement: Vector2 = Vector2.ZERO) -> PackedVector2Array
7786

7887
func _get_entry_shape() -> PackedVector2Array:
7988
var box_shape = _get_box_shape(size)
89+
var ellipsis = PackedVector2Array(
90+
[
91+
Vector2(5, -4.012612),
92+
Vector2(10, -7.240165),
93+
Vector2(15, -9.822201),
94+
Vector2(20, -11.84718),
95+
Vector2(25, -13.37339),
96+
Vector2(30, -14.43944),
97+
Vector2(35, -15.06994),
98+
Vector2(40, -15.27864),
99+
Vector2(45, -15.06994),
100+
Vector2(50, -14.43944),
101+
Vector2(55, -13.37339),
102+
Vector2(60, -11.84718),
103+
Vector2(65, -9.822201),
104+
Vector2(70, -7.240165),
105+
Vector2(75, -4.012612),
106+
Vector2(80, 0),
107+
]
108+
)
80109
var bottom_knob_shape = _get_knob_shape(Vector2(Constants.KNOB_X, size.y))
81110
bottom_knob_shape.reverse()
82-
return box_shape.slice(0, 3) + bottom_knob_shape + box_shape.slice(3)
111+
return box_shape.slice(0, 1) + ellipsis + box_shape.slice(1, 3) + bottom_knob_shape + box_shape.slice(3)
83112

84113

85114
func _get_statement_shape() -> PackedVector2Array:
@@ -90,6 +119,73 @@ func _get_statement_shape() -> PackedVector2Array:
90119
return box_shape.slice(0, 1) + top_knob_shape + box_shape.slice(1, 3) + bottom_knob_shape + box_shape.slice(3)
91120

92121

122+
# Note: This is a especial case of _get_round_value_shape() with resolution = 2,
123+
# but it's easier this way.
124+
func _get_pointy_value_shape() -> PackedVector2Array:
125+
var radius_x = min(size.x, size.y) / 2
126+
var radius_y = max(radius_x, size.y / 2)
127+
return PackedVector2Array(
128+
[
129+
Vector2(radius_x, 0),
130+
Vector2(size.x - radius_x, 0),
131+
Vector2(size.x, radius_y),
132+
Vector2(size.x - radius_x, size.y),
133+
Vector2(radius_x, size.y),
134+
Vector2(0, radius_y),
135+
Vector2(radius_x, 0),
136+
]
137+
)
138+
139+
140+
func _get_round_value_shape() -> PackedVector2Array:
141+
# Normally radius_y will be equal to radius_x. But if the block is more vertical
142+
# than horizontal, we'll have to deform the arc shapes.
143+
var radius_x = min(size.x, size.y) / 2
144+
var radius_y = max(radius_x, size.y / 2)
145+
146+
var right_arc = []
147+
for i in range(Constants.ROUND_RESOLUTION):
148+
var angle = -PI / 2 + PI * i / Constants.ROUND_RESOLUTION
149+
(
150+
right_arc
151+
. append(
152+
Vector2(
153+
cos(angle) * radius_x + size.x - radius_x,
154+
(sin(angle) + 1) * radius_y,
155+
)
156+
)
157+
)
158+
var left_arc = []
159+
for i in range(Constants.ROUND_RESOLUTION):
160+
var angle = PI / 2 + PI * i / Constants.ROUND_RESOLUTION
161+
(
162+
left_arc
163+
. append(
164+
Vector2(
165+
(cos(angle) + 1) * radius_x,
166+
(sin(angle) + 1) * radius_y,
167+
)
168+
)
169+
)
170+
return PackedVector2Array(
171+
(
172+
[
173+
Vector2(radius_x, 0),
174+
Vector2(size.x - radius_x, 0),
175+
]
176+
+ right_arc
177+
+ [
178+
Vector2(size.x - radius_x, size.y),
179+
Vector2(radius_x, size.y),
180+
]
181+
+ left_arc
182+
+ [
183+
Vector2(radius_x, 0),
184+
]
185+
)
186+
)
187+
188+
93189
func _get_control_top_fill_shape() -> PackedVector2Array:
94190
var box_shape = _get_box_shape(size)
95191
var top_knob_shape = _get_knob_shape(Vector2(Constants.KNOB_X, 0.0))
@@ -131,6 +227,14 @@ func _draw():
131227
var shape = _get_statement_shape()
132228
fill_polygon = shape
133229
stroke_polygon = shape
230+
Types.BlockType.VALUE:
231+
var shape
232+
if is_pointy_value:
233+
shape = _get_pointy_value_shape()
234+
else:
235+
shape = _get_round_value_shape()
236+
fill_polygon = shape
237+
stroke_polygon = shape
134238
Types.BlockType.CONTROL:
135239
if control_part == ControlPart.TOP:
136240
fill_polygon = _get_control_top_fill_shape()

‎addons/block_code/ui/blocks/utilities/parameter_input/parameter_input.gd‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ var default_value: Variant
2121

2222
var _drag_start: Vector2 = Vector2.INF
2323

24-
@onready var _panel := %Panel
24+
@onready var _background := %Background
2525
@onready var snap_point := %SnapPoint
2626
@onready var _input_switcher := %InputSwitcher
2727

@@ -68,7 +68,7 @@ func set_raw_input(raw_input: Variant):
6868
match variant_type:
6969
TYPE_COLOR:
7070
_color_input.color = raw_input
71-
_update_panel_bg_color(raw_input)
71+
_update_background_color(raw_input)
7272
TYPE_VECTOR2:
7373
# Rounding because floats are doubles by default but Vector2s have single components
7474
_x_line_edit.text = ("%.4f" % raw_input.x).rstrip("0").rstrip(".") if raw_input != null else ""
@@ -140,8 +140,7 @@ func _set_placeholder(new_placeholder: String) -> void:
140140

141141

142142
func _ready():
143-
var stylebox = _panel.get_theme_stylebox("panel")
144-
stylebox.bg_color = Color.WHITE
143+
_background.color = Color.WHITE
145144

146145
_set_placeholder(placeholder)
147146
_set_option_data(option_data)
@@ -224,7 +223,8 @@ func _update_visible_input():
224223
func _switch_input(node: Node):
225224
for c in _input_switcher.get_children():
226225
c.visible = c == node
227-
_panel.visible = node not in [_option_input]
226+
_background.visible = node not in [_option_input, null]
227+
_background.is_pointy_value = node == _bool_input
228228

229229

230230
func _update_option_input(current_value: Variant = null):
@@ -276,14 +276,12 @@ func _update_option_input(current_value: Variant = null):
276276

277277

278278
func _on_color_input_color_changed(color):
279-
_update_panel_bg_color(color)
279+
_update_background_color(color)
280280
modified.emit()
281281

282282

283-
func _update_panel_bg_color(new_color):
284-
var stylebox = _panel.get_theme_stylebox("panel").duplicate()
285-
stylebox.bg_color = new_color
286-
_panel.add_theme_stylebox_override("panel", stylebox)
283+
func _update_background_color(new_color):
284+
_background.color = new_color
287285

288286

289287
func _on_option_input_item_selected(index):

‎addons/block_code/ui/blocks/utilities/parameter_input/parameter_input.tscn‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,7 @@
33
[ext_resource type="Script" path="res://addons/block_code/ui/blocks/utilities/parameter_input/parameter_input.gd" id="1_rgmxn"]
44
[ext_resource type="PackedScene" uid="uid://c7puyxpqcq6xo" path="res://addons/block_code/ui/blocks/utilities/drag_drop_area/drag_drop_area.tscn" id="2_05gck"]
55
[ext_resource type="PackedScene" uid="uid://b1oge52xhjqnu" path="res://addons/block_code/ui/blocks/utilities/snap_point/snap_point.tscn" id="2_6esp3"]
6-
7-
[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_tn6h4"]
8-
bg_color = Color(1, 1, 1, 1)
9-
corner_radius_top_left = 40
10-
corner_radius_top_right = 40
11-
corner_radius_bottom_right = 40
12-
corner_radius_bottom_left = 40
6+
[ext_resource type="Script" path="res://addons/block_code/ui/blocks/utilities/background/background.gd" id="2_68spp"]
137

148
[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_afyv2"]
159

@@ -41,11 +35,11 @@ grow_vertical = 2
4135
mouse_filter = 2
4236
script = ExtResource("1_rgmxn")
4337

44-
[node name="Panel" type="Panel" parent="."]
38+
[node name="Background" type="Control" parent="."]
4539
unique_name_in_owner = true
4640
layout_mode = 2
47-
mouse_filter = 2
48-
theme_override_styles/panel = SubResource("StyleBoxFlat_tn6h4")
41+
script = ExtResource("2_68spp")
42+
block_type = 3
4943

5044
[node name="InputSwitcher" type="MarginContainer" parent="."]
5145
unique_name_in_owner = true

‎addons/block_code/ui/constants.gd‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,11 @@ const CONTROL_MARGIN = 20.0
1010
const OUTLINE_WIDTH = 3.0
1111
const MINIMUM_SNAP_DISTANCE = 80.0
1212
const MINIMUM_DRAG_THRESHOLD = 25
13+
const ROUND_RESOLUTION = 10
1314

1415
const FOCUS_BORDER_COLOR = Color(225, 242, 0)
16+
const DRAG_REMOVE_COLOR = Color(1, 1, 1, 0.5)
17+
const DRAG_PREVIEW_COLOR = Color(225, 242, 0, 0.3)
1518

1619
## Properties for builtin categories. Order starts at 10 for the first
1720
## category and then are separated by 10 to allow custom categories to

0 commit comments

Comments
 (0)