Skip to content

Shapes refactor #323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 2, 2024
Merged

Shapes refactor #323

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ca974ce
Blocks background: Factor out outline color
manuq Nov 26, 2024
e149713
Blocks background: Simplify outline drawing
manuq Nov 26, 2024
0118dcd
Blocks background: Separate draw for each type
manuq Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions addons/block_code/ui/blocks/control_block/control_block.gd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ func _ready():
super()

%TopBackground.color = color
%TopBackground.shift_bottom = Constants.CONTROL_MARGIN
%BottomBackground.color = color
%BottomBackground.shift_top = Constants.CONTROL_MARGIN
%SnapPoint.add_theme_constant_override("margin_left", Constants.CONTROL_MARGIN)
%SnapGutter.color = color
%SnapGutter.custom_minimum_size.x = Constants.CONTROL_MARGIN
Expand Down
5 changes: 3 additions & 2 deletions addons/block_code/ui/blocks/control_block/control_block.tscn
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ unique_name_in_owner = true
layout_mode = 2
script = ExtResource("2_tx0qr")
color = Color(1, 1, 1, 1)
shift_bottom = 20.0
block_type = 4

[node name="DragDropArea" parent="VBoxContainer/MarginContainer/Rows/Row" instance=ExtResource("3_21e8n")]
layout_mode = 2
Expand Down Expand Up @@ -91,7 +91,8 @@ layout_mode = 2
size_flags_horizontal = 0
script = ExtResource("2_tx0qr")
color = Color(1, 1, 1, 1)
shift_top = 20.0
block_type = 4
control_part = 1

[node name="SnapPoint" parent="VBoxContainer" instance=ExtResource("3_nhryi")]
layout_mode = 2
Expand Down
2 changes: 1 addition & 1 deletion addons/block_code/ui/blocks/entry_block/entry_block.tscn
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ layout_mode = 2
mouse_filter = 1
script = ExtResource("2_yrw8l")
color = Color(1, 1, 1, 1)
show_top = false
block_type = 1

[node name="DragDropArea" parent="VBoxContainer/TopMarginContainer" instance=ExtResource("3_swkpp")]
layout_mode = 2
Expand Down
3 changes: 0 additions & 3 deletions addons/block_code/ui/blocks/statement_block/statement_block.gd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,6 @@ var args_to_add_after_format: Dictionary # Only used when loading

func _ready():
super()

if definition != null and definition.type != Types.BlockType.STATEMENT:
_background.show_top = false
_background.color = color


Expand Down
1 change: 0 additions & 1 deletion addons/block_code/ui/blocks/statement_block/statement_block.tscn
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ unique_name_in_owner = true
layout_mode = 2
mouse_filter = 1
script = ExtResource("2_lctqt")
color = Color(1, 1, 1, 1)

[node name="DragDropArea" parent="VBoxContainer/TopMarginContainer" instance=ExtResource("3_mbxhq")]
layout_mode = 2
Expand Down
176 changes: 105 additions & 71 deletions addons/block_code/ui/blocks/utilities/background/background.gd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,25 @@ extends Control

const BlockTreeUtil = preload("res://addons/block_code/ui/block_tree_util.gd")
const Constants = preload("res://addons/block_code/ui/constants.gd")
const Types = preload("res://addons/block_code/types/types.gd")

enum ControlPart {
TOP,
BOTTOM,
}

var outline_color: Color
var parent_block: Block

@export var color: Color:
set = _set_color

@export var show_top: bool = true:
set = _set_show_top

## Horizontally shift the top knob
@export var shift_top: float = 0.0:
set = _set_shift_top
@export var block_type: Types.BlockType = Types.BlockType.STATEMENT:
set = _set_block_type

## Horizontally shift the bottom knob
@export var shift_bottom: float = 0.0:
set = _set_shift_bottom
## Only relevant if block_type is CONTROL.
@export var control_part: ControlPart = ControlPart.TOP:
set = _set_control_part


func _set_color(new_color):
Expand All @@ -28,18 +30,13 @@ func _set_color(new_color):
queue_redraw()


func _set_show_top(new_show_top):
show_top = new_show_top
func _set_block_type(new_block_type):
block_type = new_block_type
queue_redraw()


func _set_shift_top(new_shift_top):
shift_top = new_shift_top
queue_redraw()


func _set_shift_bottom(new_shift_bottom):
shift_bottom = new_shift_bottom
func _set_control_part(new_control_part):
control_part = new_control_part
queue_redraw()


Expand All @@ -49,61 +46,98 @@ func _ready():
parent_block.focus_exited.connect(queue_redraw)


func _get_border_color() -> Color:
if parent_block.has_focus():
return Constants.FOCUS_BORDER_COLOR
return outline_color


func _get_box_shape(box_size: Vector2 = Vector2.ONE) -> PackedVector2Array:
return PackedVector2Array(
[
Vector2(0.0, 0.0),
Vector2(box_size.x, 0.0),
Vector2(box_size.x, box_size.y),
Vector2(0.0, box_size.y),
Vector2(0.0, 0.0),
]
)


func _get_knob_shape(displacement: Vector2 = Vector2.ZERO) -> PackedVector2Array:
return PackedVector2Array(
[
Vector2(displacement.x, displacement.y),
Vector2(displacement.x + Constants.KNOB_Z, displacement.y + Constants.KNOB_H),
Vector2(displacement.x + Constants.KNOB_Z + Constants.KNOB_W, displacement.y + Constants.KNOB_H),
Vector2(displacement.x + Constants.KNOB_Z * 2 + Constants.KNOB_W, displacement.y),
]
)


func _get_entry_shape() -> PackedVector2Array:
var box_shape = _get_box_shape(size)
var bottom_knob_shape = _get_knob_shape(Vector2(Constants.KNOB_X, size.y))
bottom_knob_shape.reverse()
return box_shape.slice(0, 3) + bottom_knob_shape + box_shape.slice(3)
Copy link
Member

@wjt wjt Nov 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The magic numbers you're passing to slice() here and in similar functions rely on the fact that _get_box_shape() returns exactly 5 co-ordinates in clockwise order from the top-left. It works but feels a bit error-prone.

I'm not sure what I'd do differently though. I guess you would end up open-coding those 4 coordinates in each of these places. That might be OK, it's just various combinations of 0 and box_size.[xy]. Anyway, no need to change it, it just feels a bit off to me.

Copy link
Contributor Author

@manuq manuq Nov 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. I added the "box shape" a couple minutes before submitting, and I'm not sure if it's worth it. Previously the only thing outside each draw function was the "get knob shape" and the rest was a straightforward list of points, although a bit of a boilerplate. I could go back to the boilerplate.

Another option would be to pass a dict to _get_box_shape() with optional tweaks for each side of the rectangle. Something like _get_box_shape(size, {"bottom": bottom_knob_shape}).

Copy link
Contributor Author

@manuq manuq Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried these 2 options and non of them looked better to me.



func _get_statement_shape() -> PackedVector2Array:
var box_shape = _get_box_shape(size)
var top_knob_shape = _get_knob_shape(Vector2(Constants.KNOB_X, 0.0))
var bottom_knob_shape = _get_knob_shape(Vector2(Constants.KNOB_X, size.y))
bottom_knob_shape.reverse()
return box_shape.slice(0, 1) + top_knob_shape + box_shape.slice(1, 3) + bottom_knob_shape + box_shape.slice(3)


func _get_control_top_fill_shape() -> PackedVector2Array:
var box_shape = _get_box_shape(size)
var top_knob_shape = _get_knob_shape(Vector2(Constants.KNOB_X, 0.0))
var bottom_knob_shape = _get_knob_shape(Vector2(Constants.CONTROL_MARGIN + Constants.KNOB_X, size.y))
bottom_knob_shape.reverse()
return box_shape.slice(0, 1) + top_knob_shape + box_shape.slice(1, 3) + bottom_knob_shape + box_shape.slice(3)


func _get_control_top_stroke_shape() -> PackedVector2Array:
var shape = _get_control_top_fill_shape()
shape = shape.slice(shape.size() - 2) + shape.slice(0, shape.size() - 2)
shape.append(Vector2(Constants.CONTROL_MARGIN - Constants.OUTLINE_WIDTH / 2, size.y))
return shape


func _get_control_bottom_fill_shape() -> PackedVector2Array:
var box_shape = _get_box_shape(size)
var top_knob_shape = _get_knob_shape(Vector2(Constants.CONTROL_MARGIN + Constants.KNOB_X, 0.0))
var bottom_knob_shape = _get_knob_shape(Vector2(Constants.KNOB_X, size.y))
bottom_knob_shape.reverse()
return box_shape.slice(0, 1) + top_knob_shape + box_shape.slice(1, 3) + bottom_knob_shape + box_shape.slice(3)


func _get_control_bottom_stroke_shape() -> PackedVector2Array:
var shape = PackedVector2Array([Vector2(Constants.CONTROL_MARGIN - Constants.OUTLINE_WIDTH / 2, 0.0)])
return shape + _get_control_bottom_fill_shape().slice(1)


func _draw():
var fill_polygon: PackedVector2Array
fill_polygon.append(Vector2(0.0, 0.0))
if show_top:
fill_polygon.append(Vector2(Constants.KNOB_X + shift_top, 0.0))
fill_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z + shift_top, Constants.KNOB_H))
fill_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z + Constants.KNOB_W + shift_top, Constants.KNOB_H))
fill_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z * 2 + Constants.KNOB_W + shift_top, 0.0))

fill_polygon.append(Vector2(size.x, 0.0))
fill_polygon.append(Vector2(size.x, size.y))
fill_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z * 2 + Constants.KNOB_W + shift_bottom, size.y))
fill_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z + Constants.KNOB_W + shift_bottom, size.y + Constants.KNOB_H))
fill_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z + shift_bottom, size.y + Constants.KNOB_H))
fill_polygon.append(Vector2(Constants.KNOB_X + shift_bottom, size.y))
fill_polygon.append(Vector2(0.0, size.y))
fill_polygon.append(Vector2(0.0, 0.0))

var stroke_polygon: PackedVector2Array
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))
stroke_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z + Constants.KNOB_W + shift_top, Constants.KNOB_H))
stroke_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z * 2 + Constants.KNOB_W + shift_top, 0.0))

stroke_polygon.append(Vector2(size.x, 0.0))
stroke_polygon.append(Vector2(size.x, size.y))
stroke_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z * 2 + Constants.KNOB_W + shift_bottom, size.y))
stroke_polygon.append(Vector2(Constants.KNOB_X + Constants.KNOB_Z + Constants.KNOB_W + shift_bottom, size.y + Constants.KNOB_H))
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))

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))

match block_type:
Types.BlockType.ENTRY:
var shape = _get_entry_shape()
fill_polygon = shape
stroke_polygon = shape
Types.BlockType.STATEMENT:
var shape = _get_statement_shape()
fill_polygon = shape
stroke_polygon = shape
Types.BlockType.CONTROL:
if control_part == ControlPart.TOP:
fill_polygon = _get_control_top_fill_shape()
stroke_polygon = _get_control_top_stroke_shape()
else:
fill_polygon = _get_control_bottom_fill_shape()
stroke_polygon = _get_control_bottom_stroke_shape()

draw_colored_polygon(fill_polygon, color)
draw_polyline(stroke_polygon, Constants.FOCUS_BORDER_COLOR if parent_block.has_focus() else outline_color, Constants.OUTLINE_WIDTH)
draw_polyline(edge_polygon, Constants.FOCUS_BORDER_COLOR if parent_block.has_focus() else outline_color, Constants.OUTLINE_WIDTH)
draw_polyline(stroke_polygon, _get_border_color(), Constants.OUTLINE_WIDTH)
Loading