feat: Timeline (#31)

* Timeline

Finished the basic setup of the timeline, completed the following features:

Display each frame in order
Allow the user to make a selection of layers in the timeline

The lower half of the timeline panel is leave for the audio timeline

The features of the timeline are not fully completed yet; features under development:
1. copy layer
2. delete layer
3. add layer

* Multi-layer Feature

Now each page can have multiple layers

* Pasteboard and deletion

* Shortcuts

* rename

* Format

* reorder claims

* Update panel_controls.gd

* Fixing _creating_new_layer

setup the arguments correctly

* Update timeline_manager.gd

reformat

* Initialize the timeline

* Order the pasted layers

The pasted layers will follow the original order.

Author: BBlaza

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "godotTools.editorPath.godot4": "/Applications/Godot.app"
+}

system/canvas/canvas.gd

@@ -66,8 +66,8 @@ func set_onion_skin_depth(new_depth: int) -> void:
 ## Bakes [code]dynamic_node[/code] contents to the current page.
 func bake_page() -> void:
 	# Getting items from our project.
-	var current_page = _project.frames[_project._current_frame]
-	var current_layer = _project._current_layer + 1
+	var current_page = _project.frames[_project.current_frame]
+	var current_layer = _project.current_layer
 
 	bake_viewport.size = Vector2(_project.width, _project.height)
 	bake_viewport.render_target_clear_mode = SubViewport.CLEAR_MODE_ALWAYS

system/page/page.gd

@@ -1,8 +1,11 @@
 class_name Page
 extends Resource
 
+signal page_update
+
 @export var layers: Array[Image] = []
 var textures: Array[ImageTexture] = []
+var names: Array[String] = []
 
 
 func _init(w: int = 0, h: int = 0) -> void:
@@ -16,10 +19,15 @@ func _init(w: int = 0, h: int = 0) -> void:
 ## [param w] - Width of layer. [br]
 ## [param h] - Height of layer. [br]
 ## [param c] - Color of background. Defaults to transparent.
-func create_layer(w: int, h: int, c: Color = Color.TRANSPARENT) -> void:
-	layers.append(Image.create_empty(w, h, false, Image.FORMAT_RGBA8))
-	layers[-1].fill(c)
-	textures.append(ImageTexture.create_from_image(layers[-1]))
+func create_layer(w: int, h: int, c: Color = Color.TRANSPARENT, idx: int = -1) -> void:
+	if idx == -1:
+		idx = layers.size()
+	layers.insert(idx, Image.create_empty(w, h, false, Image.FORMAT_RGBA8))
+	layers[idx].fill(c)
+	var new_name = "layer " + str(layers.size() - 1)
+	names.insert(idx, new_name)
+	textures.insert(idx, ImageTexture.create_from_image(layers[idx]))
+	page_update.emit()
 
 
 ## Returns the Page as an array of ImageTextures.
@@ -29,6 +37,7 @@ func get_content() -> Array[ImageTexture]:
 			textures[i].update(layers[i])
 		else:
 			textures.append(ImageTexture.create_from_image(layers[i]))
+			names.append("layer " + str(i))
 	return textures
 
 
@@ -37,6 +46,7 @@ func set_content() -> void:
 	for i in range(layers.size()):
 		if i < textures.size():
 			layers[i] = textures[i].get_image()
+	page_update.emit()
 
 
 ## Updates layer content with provided image.[br]
@@ -45,6 +55,7 @@ func set_content() -> void:
 func set_layer(idx: int, image: Image) -> void:
 	layers[idx] = image
 	textures[idx].update(layers[idx])
+	page_update.emit()
 
 
 ## Flattens the page into a single page. [br]
@@ -57,3 +68,23 @@ func flatten() -> Image:
 			out.blend_rect(img, Rect2(Vector2.ZERO, img.get_size()), Vector2.ZERO)
 		return out
 	return null
+
+
+## Updates the name of a layer
+func rename(idx: int, new_name: String) -> void:
+	names[idx] = new_name
+	page_update.emit()
+
+
+func delete_layer(idx: int) -> void:
+	layers.remove_at(idx)
+	textures.remove_at(idx)
+	names.remove_at(idx)
+	page_update.emit()
+
+
+func insert_layer(idx: int, layer: Image, new_name: String) -> void:
+	layers.insert(idx, layer)
+	textures.insert(idx, ImageTexture.create_from_image(layers[idx]))
+	names.insert(idx, new_name)
+	page_update.emit()

system/project/project.gd

@@ -2,6 +2,7 @@ class_name Project
 extends Resource
 
 signal new_current_page(page: Page)
+signal frames_update
 
 @export var title: String = "New Animation"
 @export var framerate: float = 1.0
@@ -18,8 +19,8 @@ signal new_current_page(page: Page)
 
 @export var last_saved: String = "No Date"
 
-var _current_layer: int = 0
-var _current_frame: int = 0
+var current_layer: int = 1
+var current_frame: int = 0
 
 
 ## Initializes a new project. [br]
@@ -28,62 +29,64 @@ func new_project(w: int, h: int) -> void:
 	width = w
 	height = h
 
-	frames.append(Page.new(width, height))
+	new_page()
 	new_current_page.emit(frames[0])
+
+	frames_update.connect(_on_frame_update)
 	print("[Project] New project created")
 
 
 ## Returns the current focused page in the project.
 func get_current_page() -> Page:
-	return frames[_current_frame]
+	return frames[current_frame]
 
 
 ## Sets the current frame to a specific index. [br]
 ## Returns [code]null[/code] if the page does not exist. [br]
 ## [param index]: The index of the page.
 func get_page_by_index(index: int = 0) -> Page:
 	if index >= 0 and index < len(frames):
-		_current_frame = index
-		new_current_page.emit(frames[_current_frame])
-		return frames[_current_frame]
+		current_frame = index
+		new_current_page.emit(frames[current_frame])
+		return frames[current_frame]
 	return null
 
 
 ## Returns a page some distance removed from the focused page in the project. [br]
 ## Returns [code]null[/code] if the page does not exist. [br]
 ## [param distance]: Determines how far to grab the page.
 func get_distant_page(distance: int = 1) -> Page:
-	if _current_frame + distance >= 0 and _current_frame + distance < len(frames):
-		return frames[_current_frame + distance]
+	if current_frame + distance >= 0 and current_frame + distance < len(frames):
+		return frames[current_frame + distance]
 	return null
 
 
 ## Changes the current project page to the next page. [br]
 ## [param is_loop]: Goes back to page 0 if at the end. Adds a new page otherwise.
 func next_page(is_loop: bool) -> Page:
-	_current_frame += 1
-	if len(frames) < (_current_frame + 1):
+	current_frame += 1
+	if len(frames) < (current_frame + 1):
 		if is_loop:
-			_current_frame = 0
+			current_frame = 0
 		else:
-			frames.append(Page.new(width, height))
-	new_current_page.emit(frames[_current_frame])
-	return frames[_current_frame]
+			new_page()
+	new_current_page.emit(frames[current_frame])
+	return frames[current_frame]
 
 
 ## Changes the current project page to the previous page. Stops at frame 0.
 func prev_page() -> Page:
-	if _current_frame > 0:
-		_current_frame -= 1
-	new_current_page.emit(frames[_current_frame])
-	return frames[_current_frame]
+	if current_frame > 0:
+		current_frame -= 1
+	new_current_page.emit(frames[current_frame])
+	return frames[current_frame]
 
 
 ## Triggers project saving elements.
 func on_project_save() -> void:
 	last_saved = Time.get_datetime_string_from_system(false, true)
 
-	var tn = frames[_current_frame].flatten()
+	var tn = frames[current_frame].flatten()
 	if tn:
 		tn.resize(128, 96, Image.INTERPOLATE_NEAREST)
 		thumbnail = tn
@@ -95,3 +98,37 @@ func get_thumbnail() -> Texture2D:
 	if img != null:
 		return ImageTexture.create_from_image(img)
 	return load("res://system/project/placeholder_thumbnail.png")
+
+
+## Emit signal when page updates
+func _on_page_update() -> void:
+	frames_update.emit()
+
+
+## Create a new blank page
+func new_page() -> void:
+	var pg := Page.new(width, height)
+	pg.page_update.connect(_on_page_update)
+	frames.append(pg)
+	frames_update.emit()
+
+
+## Switch to new frame
+func set_frame(idx: int) -> void:
+	current_frame = idx
+	new_current_page.emit(frames[current_frame])
+
+
+func set_layer(idx: int) -> void:
+	current_layer = idx
+
+
+func delete_frame(idx: int) -> void:
+	frames.remove_at(idx)
+	if current_frame >= frames.size():
+		current_frame = frames.size() - 1
+	new_current_page.emit(frames[current_frame])
+
+
+func _on_frame_update() -> void:
+	new_current_page.emit(frames[current_frame])

tools/eraser/eraser.gd

@@ -83,8 +83,8 @@ func _place_stamp(_position: Vector2, _canvas: Canvas) -> void:
 	)
 
 	var project: Project = _canvas._project
-	var current_page: Page = project.frames[project._current_frame]
-	var layer: Image = current_page.layers[project._current_layer + 1]
+	var current_page: Page = project.frames[project.current_frame]
+	var layer: Image = current_page.layers[project.current_layer]
 
 	var filter_width = img.get_width()
 	var filter_height = img.get_height()
@@ -114,4 +114,4 @@ func _place_stamp(_position: Vector2, _canvas: Canvas) -> void:
 			base.a = new_alpha
 			layer.set_pixel(pixel_x, pixel_y, base)
 
-	current_page.set_layer(project._current_layer + 1, layer)
+	current_page.set_layer(project.current_layer, layer)

tools/paint_bucket.gd

@@ -12,8 +12,8 @@ func _init() -> void:
 
 func on_pointer_down(_position: Vector2, _canvas: Canvas) -> void:
 	var project: Project = _canvas._project
-	var current_page: Page = project.frames[project._current_frame]
-	var layer: Image = current_page.layers[project._current_layer + 1]
+	var current_page: Page = project.frames[project.current_frame]
+	var layer: Image = current_page.layers[project.current_layer]
 
 	var directions = [Vector2i.DOWN, Vector2i.UP, Vector2i.LEFT, Vector2i.RIGHT]
 
@@ -46,4 +46,4 @@ func on_pointer_down(_position: Vector2, _canvas: Canvas) -> void:
 			):
 				pixels.append(new_pixel)
 				visited[new_pixel] = true
-	current_page.set_layer(project._current_layer + 1, layer)
+	current_page.set_layer(project.current_layer, layer)

views/editor/containers/page_controls/page_controls.gd

@@ -42,7 +42,7 @@ func attach_project(project: Project):
 func _update_view(_page: Page) -> void:
 	framerate_slider.value = _project.framerate
 	framerate_label.text = str(int(_project.framerate))
-	page_count_label.text = "%d/%d" % [_project._current_frame + 1, _project.frames.size()]
+	page_count_label.text = "%d/%d" % [_project.current_frame + 1, _project.frames.size()]
 
 
 func _on_next_button_pressed() -> void:

views/editor/containers/timeline_manager/background.gd

@@ -0,0 +1,21 @@
+class_name CheckerBackground
+extends Control
+
+@export var square_size: int = 3
+@export var color_a: Color = Color(0.75, 0.75, 0.75, 1.0)
+@export var color_b: Color = Color(0.95, 0.95, 0.95, 1.0)
+
+
+func _draw() -> void:
+	var cols := ceili(size.x / square_size)
+	var rows := ceili(size.y / square_size)
+
+	for y in range(rows):
+		for x in range(cols):
+			var use_a := (x + y) % 2 == 0
+			var color := color_a if use_a else color_b
+
+			draw_rect(
+				Rect2(Vector2(x * square_size, y * square_size), Vector2(square_size, square_size)),
+				color
+			)

views/editor/containers/timeline_manager/background.gd.uid

@@ -0,0 +1 @@
+uid://bpj0rhv141ii4