Enable drag-and-drop to rearrange remote/ios params

material_maker/nodes/ios/ios.gd

@@ -13,11 +13,6 @@ func on_parameter_changed(p, _v) -> void:
 	if p == "__update_all__":
 		update_node.call_deferred()
 
-func update_up_down_buttons() -> void:
-	for c in get_children():
-		if ! (c is Button):
-			c.update_up_down_button()
-
 func update_node() -> void:
 	for c in get_children():
 		remove_child(c)
@@ -42,7 +37,6 @@ func update_node() -> void:
 	add_child(add_button)
 	add_button.connect("pressed", Callable(generator, "add_port"))
 	set_slot(get_child_count()-1, false, 0, color, false, 0, color)
-	update_up_down_buttons()
 
 func command(command_name : String, command_parameters : Array, update_node : bool = false):
 	var parent_generator = generator.get_parent().get_parent()

material_maker/nodes/ios/ios.tscn

@@ -1,6 +1,6 @@
 [gd_scene load_steps=2 format=3 uid="uid://d1j47uuqrti7e"]
 
-[ext_resource type="Script" path="res://material_maker/nodes/ios/ios.gd" id="1"]
+[ext_resource type="Script" uid="uid://da5v0wx0fxv65" path="res://material_maker/nodes/ios/ios.gd" id="1"]
 
 [node name="IOs" type="GraphNode"]
 offset_right = 32.0

material_maker/nodes/ios/port.gd

@@ -5,6 +5,8 @@ func _ready() -> void:
 	for tn in mm_io_types.type_names:
 		var t = mm_io_types.types[tn]
 		$Type.add_item(t.label)
+	$Drag.icon = get_theme_icon("arrow_updown", "MM_Icons")
+	$Drag.set_drag_forwarding(_row_drag_data, _row_can_drop_data, _row_drop_data)
 
 func set_model_data(data, remaining_group_size = 0) -> int:
 	$Name.set_text(data.name if data.has("name") else "")
@@ -21,13 +23,6 @@ func set_model_data(data, remaining_group_size = 0) -> int:
 		$PortGroupButton.set_state(1)
 	return int(max(remaining_group_size-1, 0))
 
-func update_up_down_button() -> void:
-	var parent = get_parent()
-	if parent == null:
-		return
-	$Up.disabled = (get_index() == 0)
-	$Down.disabled = (get_index() == get_parent().get_child_count()-2)
-
 func _on_Name_label_changed(new_label) -> void:
 	get_parent().command("set_port_name", [get_index(), new_label])
 
@@ -43,10 +38,52 @@ func _on_Description_descriptions_changed(short_description, long_description):
 func _on_Delete_pressed() -> void:
 	get_parent().command("delete_port", [get_index()])
 
-func _on_Up_pressed() -> void:
-	get_parent().command("swap_ports", [get_index(), get_index()-1])
+func _row_drag_data(_at_position: Vector2) -> Variant:
+	var bg_panel := PanelContainer.new()
+	bg_panel.theme_type_variation = "MM_PanelBackground"
+
+	var panel_stylebox := get_theme_stylebox("panel", "GraphNode").duplicate()
+	panel_stylebox.set_corner_radius_all(5)
+	panel_stylebox.set_border_width_all(0)
+	panel_stylebox.set_expand_margin_all(0)
+	panel_stylebox.set_content_margin_all(4.0)
+	panel_stylebox.bg_color.a = 0.8
+	bg_panel.add_theme_stylebox_override("panel", panel_stylebox)
+
+	var row : HBoxContainer = HBoxContainer.new()
+	for control in get_children():
+		var dupe := control.duplicate()
+		dupe.custom_minimum_size.x = control.size.x
+		if dupe.name == "Drag":
+			dupe.toggle_mode = true
+			dupe.button_pressed = true
+		row.add_child(dupe)
+	self.modulate = Color.TRANSPARENT
+
+	bg_panel.add_child(row)
+	bg_panel.position -= Vector2(16, 16)
+
+	var preview_root := Control.new()
+	preview_root.add_child(bg_panel)
+
+	# match control scale to graph edit zoom
+	preview_root.scale = Vector2.ONE * get_parent().get_parent().zoom
+	set_drag_preview(preview_root)
+
+	return { "index": get_index(), "parent_node": get_parent().name }
+
+
+func _row_can_drop_data(_at_position: Vector2, data: Variant) -> bool:
+	return data.index != get_index() and data.parent_node == get_parent().name
+
 
-func _on_Down_pressed() -> void:
-	get_parent().command("swap_ports", [get_index(), get_index()+1])
+func _row_drop_data(_at_position: Vector2, data: Variant) -> void:
+	get_parent().command("swap_ports", [get_index(), data.index])
+	get_parent().get_child(data.index).modulate = Color.WHITE
 
 
+func _notification(what: int) -> void:
+	match what:
+		NOTIFICATION_DRAG_END:
+			for c in get_parent().get_children():
+				c.modulate = Color.WHITE

material_maker/nodes/ios/port.tscn

@@ -1,40 +1,31 @@
-[gd_scene load_steps=9 format=3 uid="uid://24n1vcw48pi"]
+[gd_scene load_steps=8 format=3 uid="uid://24n1vcw48pi"]
 
-[ext_resource type="Script" path="res://material_maker/nodes/ios/port.gd" id="1"]
+[ext_resource type="Script" uid="uid://74k1155djatm" path="res://material_maker/nodes/ios/port.gd" id="1"]
 [ext_resource type="Texture2D" uid="uid://c0j4px4n72di5" path="res://material_maker/icons/icons.tres" id="2"]
 [ext_resource type="PackedScene" uid="uid://dvp8gd7whg6h7" path="res://material_maker/widgets/linked_widgets/editable_label.tscn" id="3"]
 [ext_resource type="PackedScene" uid="uid://bi88rsdxt0ld7" path="res://material_maker/widgets/port_group_button/port_group_button.tscn" id="4"]
 [ext_resource type="PackedScene" uid="uid://buj231c2gxm4o" path="res://material_maker/widgets/desc_button/desc_button.tscn" id="5"]
 
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_beq70"]
+
 [sub_resource type="AtlasTexture" id="1"]
 atlas = ExtResource("2")
 region = Rect2(2, 17, 12, 14)
 
-[sub_resource type="AtlasTexture" id="2"]
-atlas = ExtResource("2")
-region = Rect2(18, 49, 12, 14)
-
-[sub_resource type="AtlasTexture" id="3"]
-atlas = ExtResource("2")
-region = Rect2(34, 49, 12, 14)
-
 [node name="Port" type="HBoxContainer"]
 anchors_preset = 10
 anchor_right = 1.0
 offset_bottom = 20.0
 script = ExtResource("1")
 
-[node name="Delete" type="Button" parent="."]
+[node name="Drag" type="Button" parent="."]
 layout_mode = 2
-icon = SubResource("1")
-
-[node name="Up" type="Button" parent="."]
-layout_mode = 2
-icon = SubResource("2")
+theme_override_styles/focus = SubResource("StyleBoxEmpty_beq70")
+flat = true
 
-[node name="Down" type="Button" parent="."]
+[node name="Delete" type="Button" parent="."]
 layout_mode = 2
-icon = SubResource("3")
+icon = SubResource("1")
 
 [node name="Name" parent="." instance=ExtResource("3")]
 custom_minimum_size = Vector2(30, 0)
@@ -53,8 +44,6 @@ tooltip_text = "Port type"
 layout_mode = 2
 
 [connection signal="pressed" from="Delete" to="." method="_on_Delete_pressed"]
-[connection signal="pressed" from="Up" to="." method="_on_Up_pressed"]
-[connection signal="pressed" from="Down" to="." method="_on_Down_pressed"]
 [connection signal="label_changed" from="Name" to="." method="_on_Name_label_changed"]
 [connection signal="descriptions_changed" from="Description" to="." method="_on_Description_descriptions_changed"]
 [connection signal="item_selected" from="Type" to="." method="_on_Type_item_selected"]

material_maker/nodes/remote/remote.gd

@@ -13,18 +13,32 @@ var links = {}
 func _ready():
 	super._ready()
 
-func add_control(text : String, control : Control, is_named_param : bool, short_description : String = "", long_description : String = "", is_first : bool = false, is_last : bool = false) -> void:
+
+func add_control(text : String, control : Control, is_named_param : bool, short_description : String = "", long_description : String = "") -> void:
+	var drag_button := Button.new()
+	drag_button.flat = true
+	drag_button.add_theme_stylebox_override("focus", StyleBoxEmpty.new())
+	drag_button.icon = get_theme_icon("arrow_updown", "MM_Icons")
+	drag_button.mouse_filter = Control.MOUSE_FILTER_STOP
+	grid.add_child(drag_button)
+	drag_button.set_drag_forwarding(
+			row_get_data.bind(drag_button.get_index(), control.name),
+			row_can_drop.bind(drag_button.get_index()),
+			row_drop_data.bind(drag_button.get_index()))
+
 	var line_edit : LineEdit = LineEdit.new()
 	line_edit.set_text(control.name)
 	line_edit.custom_minimum_size.x = 80
 	grid.add_child(line_edit)
 	line_edit.connect("text_changed", Callable(self, "on_param_name_changed").bind(control.name, line_edit))
 	line_edit.connect("text_submitted", Callable(self, "on_param_name_entered").bind(control.name, line_edit))
 	line_edit.connect("focus_exited", Callable(self, "on_param_name_entered2").bind(control.name, line_edit))
+
 	var label = preload("res://material_maker/widgets/linked_widgets/editable_label.tscn").instantiate()
 	label.set_text(text)
 	label.connect("label_changed", Callable(self, "on_label_changed").bind(control.name))
 	grid.add_child(label)
+
 	var description = preload("res://material_maker/widgets/desc_button/desc_button.tscn").instantiate()
 	description.short_description = short_description
 	description.long_description = long_description
@@ -34,6 +48,7 @@ func add_control(text : String, control : Control, is_named_param : bool, short_
 	control.connect("mouse_entered", Callable(self, "on_enter_widget").bind(control))
 	control.connect("mouse_exited", Callable(self, "on_exit_widget").bind(control))
 	control.tooltip_text = ""
+
 	var button = Button.new()
 	if is_named_param:
 		button.icon = preload("res://material_maker/icons/edit.tres")
@@ -50,22 +65,6 @@ func add_control(text : String, control : Control, is_named_param : bool, short_
 	button.tooltip_text = "Remove parameter"
 	grid.add_child(button)
 	button.connect("pressed", Callable(self, "remove_parameter").bind(control.name))
-	button = Button.new()
-	button.icon = preload("res://material_maker/icons/up.tres")
-	button.tooltip_text = "Move parameter up"
-	grid.add_child(button)
-	if is_first:
-		button.disabled = true
-	else:
-		button.connect("pressed", Callable(self, "move_parameter").bind(control.name, -1))
-	button = Button.new()
-	button.icon = preload("res://material_maker/icons/down.tres")
-	button.tooltip_text = "Move parameter down"
-	grid.add_child(button)
-	if is_last:
-		button.disabled = true
-	else:
-		button.connect("pressed", Callable(self, "move_parameter").bind(control.name, 1))
 
 func update_node() -> void:
 	await get_tree().process_frame
@@ -88,7 +87,7 @@ func update_node() -> void:
 			var shortdesc : String = widget.shortdesc if widget.has("shortdesc") else ""
 			var longdesc : String = widget.longdesc if widget.has("longdesc") else ""
 			var is_named_param : bool = ( p.widget_type == "named_parameter" )
-			add_control(generator.get_widget(p.name).label, control, is_named_param, shortdesc, longdesc, i == 0, i == parameter_count-1)
+			add_control(generator.get_widget(p.name).label, control, is_named_param, shortdesc, longdesc)
 			if generator.widgets[i].type == "config_control" and control is OptionButton:
 				var current = null
 				if control.get_item_count() > 0 and generator.parameters.has(p.name):
@@ -269,3 +268,72 @@ func on_exit_widget(widget) -> void:
 		for l in links[widget]:
 			l.queue_free()
 		links.erase(widget)
+
+
+func modulate_row_controls(row_index: int, color: Color):
+	for i in range(grid.columns * row_index, grid.columns * row_index + grid.columns):
+		grid.get_child(i).modulate = color
+
+
+func row_get_data(_at_pos: Vector2, index: int, widget_name: String) -> Dictionary:
+	var preview_root := Control.new()
+
+	var bg_panel := PanelContainer.new()
+	bg_panel.theme_type_variation = "MM_PanelBackground"
+
+	var panel_stylebox := get_theme_stylebox("panel", "GraphNode").duplicate()
+	panel_stylebox.set_corner_radius_all(5)
+	panel_stylebox.set_border_width_all(0)
+	panel_stylebox.set_expand_margin_all(0)
+	panel_stylebox.set_content_margin_all(4.0)
+	panel_stylebox.bg_color.a = 0.8
+	bg_panel.add_theme_stylebox_override("panel", panel_stylebox)
+
+	var grid_container := GridContainer.new()
+	bg_panel.add_child(grid_container)
+	grid_container.columns = grid.columns
+	for c in range(index, index + grid.columns):
+		var src := grid.get_child(c)
+		var dupe := src.duplicate(true)
+
+		if c == index and dupe is Button:
+			dupe.toggle_mode = true
+			dupe.button_pressed = true
+
+		dupe.custom_minimum_size.x = src.size.x
+		grid_container.add_child(dupe)
+
+	bg_panel.position = -Vector2(16, 16)
+	preview_root.add_child(bg_panel)
+
+	# match control scale to graph edit zoom
+	preview_root.scale = Vector2.ONE * get_parent().zoom
+
+	var row_index : int = floor(index / grid.columns)
+	modulate_row_controls(row_index, Color.TRANSPARENT)
+	set_drag_preview(preview_root)
+
+	return { "row_index": row_index, "widget_name": widget_name, "node_name": name }
+
+
+func row_can_drop(_at_pos: Vector2, data: Dictionary, index: int) -> bool:
+	return data.row_index != floor(index / grid.columns) and data.node_name == name
+
+
+func row_drop_data(_at_pos: Vector2, data: Dictionary, index: int) -> void:
+	move_parameter(data.widget_name, floor(index / grid.columns) - data.row_index)
+
+	# workaround FloatEdits' focused state when dropping rows
+	await get_tree().process_frame
+	for float_edit in grid.get_children():
+		if float_edit is PanelContainer:
+			float_edit.get_child(0).add_theme_stylebox_override(
+					"fill", get_theme_stylebox("fill_normal", "MM_NodeFloatEdit"))
+			float_edit.get_child(0).add_theme_stylebox_override(
+					"background", get_theme_stylebox("normal","MM_NodeFloatEdit"))
+
+
+func _notification(what: int) -> void:
+	match what:
+		NOTIFICATION_DRAG_END:
+			grid.get_children().map(func(c): c.modulate = Color.WHITE)

material_maker/nodes/remote/remote.tscn

@@ -1,6 +1,6 @@
 [gd_scene load_steps=6 format=3 uid="uid://bg8ghn24uo0cr"]
 
-[ext_resource type="Script" path="res://material_maker/nodes/remote/remote.gd" id="1"]
+[ext_resource type="Script" uid="uid://b2ail0itjyaba" path="res://material_maker/nodes/remote/remote.gd" id="1"]
 [ext_resource type="Texture2D" uid="uid://c0j4px4n72di5" path="res://material_maker/icons/icons.tres" id="2"]
 
 [sub_resource type="Theme" id="1"]
@@ -19,7 +19,6 @@ offset_bottom = 52.0
 mouse_filter = 1
 theme = SubResource("1")
 title = "Remote"
-show_close = true
 slot/0/left_enabled = false
 slot/0/left_type = 0
 slot/0/left_color = Color(0.5, 0.5, 1, 1)
@@ -42,7 +41,7 @@ script = ExtResource("1")
 
 [node name="Controls" type="GridContainer" parent="."]
 layout_mode = 2
-columns = 8
+columns = 7
 
 [node name="HBoxContainer" type="HBoxContainer" parent="."]
 layout_mode = 2

material_maker/theme/default.tres

@@ -1,4 +1,4 @@
-[gd_resource type="Theme" load_steps=143 format=3 uid="uid://b628lwfk6ig2c"]
+[gd_resource type="Theme" load_steps=144 format=3 uid="uid://b628lwfk6ig2c"]
 
 [ext_resource type="FontFile" uid="uid://lro0qdrhfytt" path="res://material_maker/theme/font_rubik/Rubik-Light.ttf" id="1_5tfb1"]
 [ext_resource type="Texture2D" uid="uid://1s0c37uoj4rf" path="res://material_maker/theme/default_theme_icons.svg" id="1_s43fy"]
@@ -372,6 +372,10 @@ region = Rect2(32, 48, 16, 16)
 atlas = ExtResource("1_s43fy")
 region = Rect2(48, 48, 16, 16)
 
+[sub_resource type="AtlasTexture" id="AtlasTexture_rqjp3"]
+atlas = ExtResource("1_s43fy")
+region = Rect2(112, 176, 16, 16)
+
 [sub_resource type="AtlasTexture" id="AtlasTexture_j13i3"]
 atlas = ExtResource("1_s43fy")
 region = Rect2(64, 160, 16, 16)
@@ -1095,6 +1099,7 @@ MM_Icons/icons/add_image = SubResource("AtlasTexture_86qok")
 MM_Icons/icons/arrange_nodes = SubResource("AtlasTexture_60g77")
 MM_Icons/icons/arrow_left = SubResource("AtlasTexture_q32qs")
 MM_Icons/icons/arrow_right = SubResource("AtlasTexture_r3xak")
+MM_Icons/icons/arrow_updown = SubResource("AtlasTexture_rqjp3")
 MM_Icons/icons/color_picker = SubResource("AtlasTexture_j13i3")
 MM_Icons/icons/connection_bezier = SubResource("AtlasTexture_ovvp6")
 MM_Icons/icons/connection_diagonal = SubResource("AtlasTexture_8tn7x")