WIP: timeline drawing, still buggy

Assets/DefaultTheme.tres

@@ -4415,6 +4415,8 @@ TextEdit/styles/read_only = SubResource("StyleBoxFlat_6ucq2")
 ThemeEditor/colors/preview_picker_overlay_color = Color(0.1, 0.1, 0.1, 0.25)
 ThemeEditor/styles/preview_picker_label = SubResource("StyleBoxFlat_jtsa3")
 ThemeEditor/styles/preview_picker_overlay = SubResource("StyleBoxFlat_qixj3")
+Timeline/colors/line_primary_color = Color(0.517184, 0.517184, 0.517184, 1)
+Timeline/colors/line_secondary_color = Color(0.2, 0.2, 0.2, 1)
 TooltipLabel/colors/font_color = Color(0.893137, 0.893137, 0.893137, 1)
 TooltipLabel/colors/font_shadow_color = Color(0, 0, 0, 0)
 TooltipPanel/styles/panel = SubResource("StyleBoxFlat_qr21i")

Controls/Transport.tscn

@@ -0,0 +1,64 @@
+[gd_scene load_steps=4 format=3 uid="uid://bgh1og6p43lsp"]
+
+[ext_resource type="Texture2D" uid="uid://c7bolv16y04n" path="res://Assets/Icons/play_fill.svg" id="1_jt8rc"]
+[ext_resource type="Texture2D" uid="uid://bqmcx807prwj0" path="res://Assets/Icons/pause_fill.svg" id="2_qh4e7"]
+[ext_resource type="Texture2D" uid="uid://bmw8ftyp0yfnq" path="res://Assets/Icons/stop_fill.svg" id="3_222u2"]
+
+[node name="Transport" type="PanelContainer"]
+show_behind_parent = true
+size_flags_horizontal = 4
+size_flags_vertical = 4
+mouse_filter = 2
+
+[node name="HBoxContainer" type="HBoxContainer" parent="."]
+layout_mode = 2
+
+[node name="Controls" type="MarginContainer" parent="HBoxContainer"]
+layout_mode = 2
+size_flags_horizontal = 4
+theme_override_constants/margin_left = 8
+theme_override_constants/margin_top = 8
+theme_override_constants/margin_right = 8
+theme_override_constants/margin_bottom = 8
+
+[node name="HBoxContainer" type="HBoxContainer" parent="HBoxContainer/Controls"]
+layout_mode = 2
+size_flags_horizontal = 4
+size_flags_vertical = 4
+theme_override_constants/separation = 8
+
+[node name="Play" type="Button" parent="HBoxContainer/Controls/HBoxContainer"]
+modulate = Color(0.253333, 1, 0.2, 1)
+layout_mode = 2
+icon = ExtResource("1_jt8rc")
+icon_alignment = 1
+
+[node name="Pause" type="Button" parent="HBoxContainer/Controls/HBoxContainer"]
+modulate = Color(1, 0.986667, 0.2, 1)
+layout_mode = 2
+icon = ExtResource("2_qh4e7")
+icon_alignment = 1
+
+[node name="Stop" type="Button" parent="HBoxContainer/Controls/HBoxContainer"]
+self_modulate = Color(1, 0.2, 0.2, 1)
+layout_mode = 2
+icon = ExtResource("3_222u2")
+icon_alignment = 1
+
+[node name="Time" type="VBoxContainer" parent="HBoxContainer"]
+layout_mode = 2
+alignment = 1
+
+[node name="HBoxContainer" type="HBoxContainer" parent="HBoxContainer/Time"]
+layout_mode = 2
+
+[node name="CurrentTime" type="Label" parent="HBoxContainer/Time/HBoxContainer"]
+layout_mode = 2
+text = "00:00.00"
+
+[node name="VSeparator" type="VSeparator" parent="HBoxContainer/Time/HBoxContainer"]
+layout_mode = 2
+
+[node name="Length" type="Label" parent="HBoxContainer/Time/HBoxContainer"]
+layout_mode = 2
+text = "00:00.00"

Scripts/Timeline.gd

@@ -0,0 +1,71 @@
+@tool
+class_name Timeline
+extends Control
+
+@export var font_scale: float = 1.0
+@export var time_offset: float = 0.0
+@export var grid_space_seconds: float = 0.25
+@export var label_interval_seconds: float = 1.0
+@export var line_thickness: int = 1
+@export var primary_line_step: int = 4
+@export var cursor_width: int = 8
+@export var base_scale: float = 2.0
+@export var zoom: float = 1.0
+
+@export var min_zoom: float = 0.1
+
+func _draw():
+	draw_intervals()
+	# draw_top_time_labels()
+	pass
+
+func _gui_input(event):
+	var zoom_factor = 1.1
+	if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_WHEEL_DOWN:
+		zoom /= zoom_factor
+		queue_redraw()
+	if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_WHEEL_UP:
+		zoom *= zoom_factor
+		queue_redraw()
+	if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_WHEEL_LEFT:
+		time_offset -= 0.1 / zoom
+		queue_redraw()
+	if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_WHEEL_RIGHT:
+		time_offset += 0.1 / zoom
+		queue_redraw()
+
+	zoom = max(min_zoom, zoom)
+	time_offset = max(0.0, time_offset)
+
+func draw_intervals():
+	var font = get_theme_default_font()
+	var font_size = get_theme_default_font_size()
+
+	var current_width = size.x
+	var current_height = size.y
+
+	var primary_color = get_theme_color("line_primary_color", "Timeline")
+	var secondary_color = get_theme_color("line_secondary_color", "Timeline")
+
+	var interval = grid_space_seconds * base_scale * zoom * current_width
+
+	var first_line_index = roundi(time_offset / grid_space_seconds)
+	var first_line_position = -(time_offset - (first_line_index * grid_space_seconds)) * interval
+
+	var line_count = ceil(current_width / interval) + 4
+
+	var current_position = first_line_position
+
+	for i in range(first_line_index, first_line_index + line_count):
+		if current_position > current_width:
+			break
+
+		if current_position >= -interval:
+			var color = secondary_color
+			if i % primary_line_step == 0:
+				draw_string(font, Vector2(current_position, 0), str(i * grid_space_seconds), HORIZONTAL_ALIGNMENT_CENTER, -1, font_size * font_scale)
+				color = primary_color
+
+			draw_line(Vector2(current_position, 0), Vector2(current_position, current_height), color, line_thickness)
+
+		current_position += interval

Views/MainView.tscn

@@ -1,4 +1,4 @@
-[gd_scene load_steps=18 format=3 uid="uid://cr2f68sbsegai"]
+[gd_scene load_steps=16 format=3 uid="uid://cr2f68sbsegai"]
 
 [ext_resource type="Theme" uid="uid://b8rk41gjual2b" path="res://Assets/DefaultTheme.tres" id="1_s6hk6"]
 [ext_resource type="Script" path="res://addons/dockable_container/dockable_container.gd" id="2_7b0h5"]
@@ -7,11 +7,9 @@
 [ext_resource type="Texture2D" uid="uid://dxl2qel0qbxrn" path="res://Assets/Icons/mixer.svg" id="3_4tblp"]
 [ext_resource type="Script" path="res://addons/dockable_container/layout_panel.gd" id="3_4twnq"]
 [ext_resource type="Script" path="res://addons/dockable_container/layout.gd" id="4_ixaqo"]
+[ext_resource type="PackedScene" uid="uid://bgh1og6p43lsp" path="res://Controls/Transport.tscn" id="5_aq6v8"]
 [ext_resource type="PackedScene" uid="uid://bpd6g2b3s7tqa" path="res://Views/TrackView.tscn" id="5_rgxdu"]
 [ext_resource type="PackedScene" uid="uid://v4oljx3qrk5q" path="res://Views/Timeline.tscn" id="7_xu70y"]
-[ext_resource type="Texture2D" uid="uid://c7bolv16y04n" path="res://Assets/Icons/play_fill.svg" id="9_5eeih"]
-[ext_resource type="Texture2D" uid="uid://bqmcx807prwj0" path="res://Assets/Icons/pause_fill.svg" id="10_a1xvk"]
-[ext_resource type="Texture2D" uid="uid://bmw8ftyp0yfnq" path="res://Assets/Icons/stop_fill.svg" id="11_6dqcn"]
 
 [sub_resource type="Resource" id="Resource_pfnfv"]
 resource_name = "Tabs"
@@ -127,65 +125,8 @@ mouse_filter = 2
 layout_mode = 2
 size_flags_vertical = 3
 
-[node name="Transport" type="PanelContainer" parent="VBoxContainer/VSplitContainer"]
+[node name="Transport" parent="VBoxContainer/VSplitContainer" instance=ExtResource("5_aq6v8")]
-show_behind_parent = true
 layout_mode = 2
-size_flags_horizontal = 4
-size_flags_vertical = 4
-mouse_filter = 2
-
-[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer/VSplitContainer/Transport"]
-layout_mode = 2
-
-[node name="Controls" type="MarginContainer" parent="VBoxContainer/VSplitContainer/Transport/HBoxContainer"]
-layout_mode = 2
-size_flags_horizontal = 4
-theme_override_constants/margin_left = 8
-theme_override_constants/margin_top = 8
-theme_override_constants/margin_right = 8
-theme_override_constants/margin_bottom = 8
-
-[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer/VSplitContainer/Transport/HBoxContainer/Controls"]
-layout_mode = 2
-size_flags_horizontal = 4
-size_flags_vertical = 4
-theme_override_constants/separation = 8
-
-[node name="Play" type="Button" parent="VBoxContainer/VSplitContainer/Transport/HBoxContainer/Controls/HBoxContainer"]
-modulate = Color(0.253333, 1, 0.2, 1)
-layout_mode = 2
-icon = ExtResource("9_5eeih")
-icon_alignment = 1
-
-[node name="Pause" type="Button" parent="VBoxContainer/VSplitContainer/Transport/HBoxContainer/Controls/HBoxContainer"]
-modulate = Color(1, 0.986667, 0.2, 1)
-layout_mode = 2
-icon = ExtResource("10_a1xvk")
-icon_alignment = 1
-
-[node name="Stop" type="Button" parent="VBoxContainer/VSplitContainer/Transport/HBoxContainer/Controls/HBoxContainer"]
-self_modulate = Color(1, 0.2, 0.2, 1)
-layout_mode = 2
-icon = ExtResource("11_6dqcn")
-icon_alignment = 1
-
-[node name="Time" type="VBoxContainer" parent="VBoxContainer/VSplitContainer/Transport/HBoxContainer"]
-layout_mode = 2
-alignment = 1
-
-[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer/VSplitContainer/Transport/HBoxContainer/Time"]
-layout_mode = 2
-
-[node name="CurrentTime" type="Label" parent="VBoxContainer/VSplitContainer/Transport/HBoxContainer/Time/HBoxContainer"]
-layout_mode = 2
-text = "00:00.00"
-
-[node name="VSeparator" type="VSeparator" parent="VBoxContainer/VSplitContainer/Transport/HBoxContainer/Time/HBoxContainer"]
-layout_mode = 2
-
-[node name="Length" type="Label" parent="VBoxContainer/VSplitContainer/Transport/HBoxContainer/Time/HBoxContainer"]
-layout_mode = 2
-text = "00:00.00"
 
 [node name="HSplitContainer" type="HSplitContainer" parent="VBoxContainer/VSplitContainer"]
 layout_mode = 2

Views/Timeline.tscn

@@ -1,15 +1,36 @@
-[gd_scene format=3 uid="uid://v4oljx3qrk5q"]
+[gd_scene load_steps=2 format=3 uid="uid://v4oljx3qrk5q"]
+
+[ext_resource type="Script" path="res://Scripts/Timeline.gd" id="1_h2mev"]
 
 [node name="Timeline" type="Control"]
 layout_mode = 3
-anchors_preset = 0
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
 size_flags_horizontal = 3
+script = ExtResource("1_h2mev")
+base_scale = 0.05
+
+[node name="ScrollBar" type="HScrollBar" parent="."]
+custom_minimum_size = Vector2(0, 20)
+layout_mode = 1
+anchors_preset = -1
+anchor_top = 0.97
+anchor_right = 1.0
+anchor_bottom = 1.0
+offset_top = 24.4
+grow_horizontal = 2
+grow_vertical = 0
 
 [node name="Panel" type="Panel" parent="."]
 modulate = Color(0.329158, 0.329158, 0.329158, 1)
+show_behind_parent = true
 layout_mode = 1
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
 grow_horizontal = 2
 grow_vertical = 2
+mouse_filter = 2