Moved tile mode drawing logic from Canvas to a new script

I mostly did it so I could move tile mode logic into a new node, so I could have control over the drawing order. TileMode.gd also always draws 8 blank rectangles, which are being drawn on top of the grid, in order to hide it if it gets out of boundaries. We are now very close to implementing an isometric grid, #305.

This shouldn't have much of a performance impact, but some more testing is most likely needed.

src/Autoload/Global.gd

@@ -28,9 +28,7 @@ var key_move_press_time := [0.0, 0.0, 0.0, 0.0]
 
 # Canvas related stuff
 var layers_changed_skip := false
-
 var can_draw := false
-
 var has_focus := false
 var cursor_image = preload("res://assets/graphics/cursor_icons/cursor.png")
 var left_cursor_tool_texture := ImageTexture.new()
@@ -40,6 +38,7 @@ var image_clipboard : Image
 var play_only_tags := true
 var show_x_symmetry_axis := false
 var show_y_symmetry_axis := false
+var default_clear_color := Color.gray
 
 # Preferences
 var pressure_sensitivity_mode = Pressure_Sensitivity.NONE

src/Preferences/HandleThemes.gd

@@ -62,11 +62,11 @@ func change_theme(ID : int) -> void:
 
 	Global.control.theme = main_theme
 	Global.control.theme.default_font = font
-	var default_clear_color : Color = main_theme.get_stylebox("panel", "PanelContainer").bg_color
-	VisualServer.set_default_clear_color(Color(default_clear_color))
+	Global.default_clear_color = main_theme.get_stylebox("panel", "PanelContainer").bg_color
+	VisualServer.set_default_clear_color(Color(Global.default_clear_color))
 	(Global.animation_timeline.get_stylebox("panel", "Panel") as StyleBoxFlat).bg_color = main_theme.get_stylebox("panel", "Panel").bg_color
 	var layer_button_panel_container : PanelContainer = Global.find_node_by_name(Global.animation_timeline, "LayerButtonPanelContainer")
-	(layer_button_panel_container.get_stylebox("panel", "PanelContainer") as StyleBoxFlat).bg_color = default_clear_color
+	(layer_button_panel_container.get_stylebox("panel", "PanelContainer") as StyleBoxFlat).bg_color = Global.default_clear_color
 
 	var top_menu_style = main_theme.get_stylebox("TopMenu", "Panel")
 	var ruler_style = main_theme.get_stylebox("Ruler", "Button")

src/UI/Canvas/Canvas.gd

@@ -10,6 +10,7 @@ var cursor_image_has_changed := false
 var sprite_changed_this_frame := false # for optimization purposes
 
 onready var grid = $Grid
+onready var tile_mode = $TileMode
 onready var indicators = $Indicators
 
 
@@ -24,8 +25,8 @@ func _ready() -> void:
 func _draw() -> void:
 	Global.second_viewport.get_child(0).get_node("CanvasPreview").update()
 	Global.small_preview_viewport.get_child(0).get_node("CanvasPreview").update()
+
 	var current_cels : Array = Global.current_project.frames[Global.current_project.current_frame].cels
-	var size : Vector2 = Global.current_project.size
 	if Global.onion_skinning:
 		onion_skinning()
 
@@ -35,15 +36,7 @@ func _draw() -> void:
 		if Global.current_project.layers[i].visible: # if it's visible
 			draw_texture(current_cels[i].image_texture, location, modulate_color)
 
-			if Global.tile_mode:
-				draw_texture(current_cels[i].image_texture, Vector2(location.x, location.y + size.y), modulate_color) # Down
-				draw_texture(current_cels[i].image_texture, Vector2(location.x - size.x, location.y + size.y), modulate_color) # Down Left
-				draw_texture(current_cels[i].image_texture, Vector2(location.x - size.x, location.y), modulate_color) # Left
-				draw_texture(current_cels[i].image_texture, location - size, modulate_color) # Up left
-				draw_texture(current_cels[i].image_texture, Vector2(location.x, location.y - size.y), modulate_color) # Up
-				draw_texture(current_cels[i].image_texture, Vector2(location.x + size.x, location.y - size.y), modulate_color) # Up right
-				draw_texture(current_cels[i].image_texture, Vector2(location.x + size.x, location.y), modulate_color) # Right
-				draw_texture(current_cels[i].image_texture, location + size, modulate_color) # Down right
+	tile_mode.update()
 
 
 func _input(event : InputEvent) -> void:

src/UI/Canvas/Canvas.tscn

@@ -1,8 +1,9 @@
-[gd_scene load_steps=4 format=2]
+[gd_scene load_steps=5 format=2]
 
 [ext_resource path="res://src/UI/Canvas/Canvas.gd" type="Script" id=1]
 [ext_resource path="res://src/UI/Canvas/Grid.gd" type="Script" id=2]
 [ext_resource path="res://src/UI/Canvas/Indicators.gd" type="Script" id=3]
+[ext_resource path="res://src/UI/Canvas/TileMode.gd" type="Script" id=4]
 
 [node name="Canvas" type="Node2D"]
 script = ExtResource( 1 )
@@ -10,5 +11,8 @@ script = ExtResource( 1 )
 [node name="Grid" type="Node2D" parent="."]
 script = ExtResource( 2 )
 
+[node name="TileMode" type="Node2D" parent="."]
+script = ExtResource( 4 )
+
 [node name="Indicators" type="Node2D" parent="."]
 script = ExtResource( 3 )

src/UI/Canvas/Grid.gd

@@ -23,8 +23,8 @@ func draw_grid(grid_type : int) -> void:
 	# Has problems when the canvas isn't a square, and with some grid sizes
 	if grid_type == Global.Grid_Types.ISOMETRIC || grid_type == Global.Grid_Types.ALL:
 		var i := 0
-		for x in range(Global.grid_width, size.x, Global.grid_width * 2):
-			for y in range(0, size.y, Global.grid_width):
+		for x in range(Global.grid_width, size.x + 2, Global.grid_width * 2):
+			for y in range(0, size.y + 1, Global.grid_width):
 				draw_isometric_tile(i, Vector2(x, y))
 				i += 1
 

src/UI/Canvas/TileMode.gd

@@ -0,0 +1,31 @@
+extends Node2D
+
+
+var location := Vector2.ZERO
+
+
+func _draw() -> void:
+	var current_cels : Array = Global.current_project.frames[Global.current_project.current_frame].cels
+	var size : Vector2 = Global.current_project.size
+	var positions := [
+		Vector2(location.x, location.y + size.y), # Down
+		Vector2(location.x - size.x, location.y + size.y), # Down left
+		Vector2(location.x - size.x, location.y), # Left
+		location - size, # Up left
+		Vector2(location.x, location.y - size.y), # Up
+		Vector2(location.x + size.x, location.y - size.y), # Up right
+		Vector2(location.x + size.x, location.y), # Right
+		location + size # Down right
+	]
+
+	for pos in positions:
+		# Draw a blank rectangle behind the textures
+		# Mostly used to hide the grid if it goes outside the canvas boundaries
+		draw_rect(Rect2(pos, size), Global.default_clear_color)
+
+	for i in range(Global.current_project.layers.size()):
+		var modulate_color := Color(1, 1, 1, current_cels[i].opacity)
+		if Global.current_project.layers[i].visible: # if it's visible
+			if Global.tile_mode:
+				for pos in positions:
+					draw_texture(current_cels[i].image_texture, pos, modulate_color)