List control now draws its own background

This commit is contained in:
Maruno17
2024-04-04 22:39:01 +01:00
parent 9c3314843a
commit 29140a517e
7 changed files with 57 additions and 90 deletions

View File

@@ -2,17 +2,19 @@
#
#===============================================================================
class UIControls::List < UIControls::BaseControl
LIST_X = 0
LIST_Y = 0
ROW_HEIGHT = 24
TEXT_PADDING_X = 4
TEXT_OFFSET_Y = 3
BORDER_THICKNESS = 2
ROW_HEIGHT = 24
TEXT_PADDING_X = 4
TEXT_OFFSET_Y = 3
SELECTED_ROW_COLOR = Color.green
def initialize(width, height, viewport, values = [])
super(width, height, viewport)
@scrollbar = UIControls::Scrollbar.new(LIST_X + width - UIControls::Scrollbar::SLIDER_WIDTH, LIST_Y, height, viewport)
@scrollbar = UIControls::Scrollbar.new(
width - UIControls::Scrollbar::SLIDER_WIDTH - BORDER_THICKNESS, BORDER_THICKNESS,
height - (BORDER_THICKNESS * 2), viewport
)
@scrollbar.set_interactive_rects
@scrollbar.range = ROW_HEIGHT
@scrollbar.z = self.z + 1
@@ -30,12 +32,12 @@ class UIControls::List < UIControls::BaseControl
def x=(new_val)
super(new_val)
@scrollbar.x = new_val + LIST_X + width - UIControls::Scrollbar::SLIDER_WIDTH
@scrollbar.x = new_val + width - UIControls::Scrollbar::SLIDER_WIDTH - BORDER_THICKNESS
end
def y=(new_val)
super(new_val)
@scrollbar.y = new_val + LIST_Y
@scrollbar.y = new_val + BORDER_THICKNESS
end
def z=(new_val)
@@ -101,7 +103,10 @@ class UIControls::List < UIControls::BaseControl
def set_interactive_rects
@interactions = {}
@values.length.times do |i|
@interactions[i] = Rect.new(LIST_X, LIST_Y + (ROW_HEIGHT * i), width - LIST_X, ROW_HEIGHT)
@interactions[i] = Rect.new(
BORDER_THICKNESS, BORDER_THICKNESS + (ROW_HEIGHT * i),
width - (BORDER_THICKNESS * 2), ROW_HEIGHT
)
end
end
@@ -133,7 +138,11 @@ class UIControls::List < UIControls::BaseControl
end
def refresh
super
self.bitmap.clear
# Draw control outline and background
self.bitmap.outline_rect(0, 0, width, height, Color.black)
self.bitmap.fill_rect(1, 1, width - 2, height - 2, Color.white)
draw_area_highlight
# Draw text options
@values.each_with_index do |val, i|
next if i < @top_row || i >= @top_row + @rows_count

View File

@@ -55,26 +55,16 @@ class UIControls::DropdownList < UIControls::BaseControl
#-----------------------------------------------------------------------------
def make_dropdown_menu
menu_height = UIControls::List::ROW_HEIGHT * [@options.length, @max_rows].min
# Draw menu's background
@dropdown_menu_bg = BitmapSprite.new(@button_rect.width, menu_height + 4, self.viewport)
@dropdown_menu_bg.x = self.x + @button_rect.x
@dropdown_menu_bg.y = self.y + @button_rect.y + @button_rect.height
@dropdown_menu_bg.z = self.z + 1
@dropdown_menu_bg.bitmap.outline_rect(0, 0, @dropdown_menu_bg.width, @dropdown_menu_bg.height, Color.black)
@dropdown_menu_bg.bitmap.fill_rect(1, 1, @dropdown_menu_bg.width - 2, @dropdown_menu_bg.height - 2, Color.white)
# Create menu
@dropdown_menu = UIControls::List.new(@button_rect.width - 4, menu_height, self.viewport, @options)
@dropdown_menu.x = @dropdown_menu_bg.x + 2
@dropdown_menu.y = @dropdown_menu_bg.y + 2
menu_height = (UIControls::List::ROW_HEIGHT * [@options.length, @max_rows].min) + (UIControls::List::BORDER_THICKNESS * 2)
@dropdown_menu = UIControls::List.new(@button_rect.width, menu_height, self.viewport, @options)
@dropdown_menu.x = self.x + @button_rect.x
@dropdown_menu.y = self.y + @button_rect.y + @button_rect.height
@dropdown_menu.z = self.z + 2
@dropdown_menu.set_interactive_rects
@dropdown_menu.repaint
end
def remove_dropdown_menu
@dropdown_menu_bg&.dispose
@dropdown_menu_bg = nil
@dropdown_menu&.dispose
@dropdown_menu = nil
@captured_area = nil

View File

@@ -51,26 +51,16 @@ class UIControls::TextBoxDropdownList < UIControls::TextBox
#-----------------------------------------------------------------------------
def make_dropdown_menu
menu_height = UIControls::List::ROW_HEIGHT * [@options.length, @max_rows].min
# Draw menu's background
@dropdown_menu_bg = BitmapSprite.new(@text_box_rect.width + @button_rect.width, menu_height + 4, self.viewport)
@dropdown_menu_bg.x = self.x + @text_box_rect.x
@dropdown_menu_bg.y = self.y + @text_box_rect.y + @text_box_rect.height
@dropdown_menu_bg.z = self.z + 1
@dropdown_menu_bg.bitmap.outline_rect(0, 0, @dropdown_menu_bg.width, @dropdown_menu_bg.height, Color.black)
@dropdown_menu_bg.bitmap.fill_rect(1, 1, @dropdown_menu_bg.width - 2, @dropdown_menu_bg.height - 2, Color.white)
# Create menu
@dropdown_menu = UIControls::List.new(@text_box_rect.width + @button_rect.width - 4, menu_height, self.viewport, @options)
@dropdown_menu.x = @dropdown_menu_bg.x + 2
@dropdown_menu.y = @dropdown_menu_bg.y + 2
menu_height = (UIControls::List::ROW_HEIGHT * [@options.length, @max_rows].min) + (UIControls::List::BORDER_THICKNESS * 2)
@dropdown_menu = UIControls::List.new(@text_box_rect.width + @button_rect.width, menu_height, self.viewport, @options)
@dropdown_menu.x = self.x + @text_box_rect.x
@dropdown_menu.y = self.y + @text_box_rect.y + @text_box_rect.height
@dropdown_menu.z = self.z + 2
@dropdown_menu.set_interactive_rects
@dropdown_menu.repaint
end
def remove_dropdown_menu
@dropdown_menu_bg&.dispose
@dropdown_menu_bg = nil
@dropdown_menu&.dispose
@dropdown_menu = nil
@captured_area = nil

View File

@@ -50,21 +50,21 @@ class AnimationEditor
CHOOSER_BUTTON_WIDTH = 150
CHOOSER_BUTTON_HEIGHT = MESSAGE_BOX_BUTTON_HEIGHT
CHOOSER_FILE_LIST_X = 8
CHOOSER_FILE_LIST_Y = 32
CHOOSER_FILE_LIST_WIDTH = CHOOSER_BUTTON_WIDTH * 2
CHOOSER_FILE_LIST_HEIGHT = UIControls::List::ROW_HEIGHT * 15
CHOOSER_FILE_LIST_X = 6
CHOOSER_FILE_LIST_Y = 30
CHOOSER_FILE_LIST_WIDTH = (CHOOSER_BUTTON_WIDTH * 2) + (UIControls::List::BORDER_THICKNESS * 2)
CHOOSER_FILE_LIST_HEIGHT = (UIControls::List::ROW_HEIGHT * 15) + (UIControls::List::BORDER_THICKNESS * 2)
GRAPHIC_CHOOSER_PREVIEW_SIZE = 320 # Square
GRAPHIC_CHOOSER_WINDOW_WIDTH = CHOOSER_FILE_LIST_X + CHOOSER_FILE_LIST_WIDTH + 10 + GRAPHIC_CHOOSER_PREVIEW_SIZE + 8
GRAPHIC_CHOOSER_WINDOW_HEIGHT = CHOOSER_FILE_LIST_Y + CHOOSER_FILE_LIST_HEIGHT + 10 + CHOOSER_BUTTON_HEIGHT + 8
GRAPHIC_CHOOSER_WINDOW_WIDTH = CHOOSER_FILE_LIST_X + CHOOSER_FILE_LIST_WIDTH + 8 + GRAPHIC_CHOOSER_PREVIEW_SIZE + 8
GRAPHIC_CHOOSER_WINDOW_HEIGHT = CHOOSER_FILE_LIST_Y + CHOOSER_FILE_LIST_HEIGHT + 8 + CHOOSER_BUTTON_HEIGHT + 8
GRAPHIC_CHOOSER_X = ((WINDOW_WIDTH - GRAPHIC_CHOOSER_WINDOW_WIDTH) / 2)
GRAPHIC_CHOOSER_Y = ((WINDOW_HEIGHT - GRAPHIC_CHOOSER_WINDOW_HEIGHT) / 2)
AUDIO_CHOOSER_LABEL_WIDTH = UIControls::ControlsContainer::OFFSET_FROM_LABEL_X
AUDIO_CHOOSER_LABEL_WIDTH = UIControls::ControlsContainer::OFFSET_FROM_LABEL_X - 10
AUDIO_CHOOSER_SLIDER_WIDTH = (CHOOSER_BUTTON_WIDTH * 2) - AUDIO_CHOOSER_LABEL_WIDTH
AUDIO_CHOOSER_WINDOW_WIDTH = CHOOSER_FILE_LIST_X + CHOOSER_FILE_LIST_WIDTH + 8 + (CHOOSER_BUTTON_WIDTH * 2) + 4
AUDIO_CHOOSER_WINDOW_HEIGHT = CHOOSER_FILE_LIST_Y + CHOOSER_FILE_LIST_HEIGHT + 10 + CHOOSER_BUTTON_HEIGHT + 8
AUDIO_CHOOSER_WINDOW_HEIGHT = CHOOSER_FILE_LIST_Y + CHOOSER_FILE_LIST_HEIGHT + 8 + CHOOSER_BUTTON_HEIGHT + 8
AUDIO_CHOOSER_X = ((WINDOW_WIDTH - AUDIO_CHOOSER_WINDOW_WIDTH) / 2)
AUDIO_CHOOSER_Y = ((WINDOW_HEIGHT - AUDIO_CHOOSER_WINDOW_HEIGHT) / 2)
@@ -124,11 +124,6 @@ class AnimationEditor
# Background for main editor
@screen_bitmap = BitmapSprite.new(WINDOW_WIDTH, WINDOW_HEIGHT, @viewport)
@screen_bitmap.z = -100
# Background in which to draw the outline of the SE list box in the SE side pane
# TODO: Get rid of this by drawing a list's box in the control itself.
@se_list_box_bitmap = BitmapSprite.new(WINDOW_WIDTH, WINDOW_HEIGHT, @viewport)
@se_list_box_bitmap.z = -90
@se_list_box_bitmap.visible = false
# Semi-transparent black overlay to dim the screen while a pop-up window is open
@pop_up_bg_bitmap = BitmapSprite.new(WINDOW_WIDTH, WINDOW_HEIGHT, @pop_up_viewport)
@pop_up_bg_bitmap.z = -100
@@ -193,7 +188,6 @@ class AnimationEditor
def dispose
@screen_bitmap.dispose
@se_list_box_bitmap.dispose
@pop_up_bg_bitmap.dispose
@delete_bitmap.dispose
@delete_disabled_bitmap.dispose
@@ -357,7 +351,7 @@ class AnimationEditor
btn.set_fixed_size
graphic_chooser.add_control_at(option[0], btn,
CHOOSER_FILE_LIST_X + (CHOOSER_BUTTON_WIDTH * i),
CHOOSER_FILE_LIST_Y + CHOOSER_FILE_LIST_HEIGHT + 4)
CHOOSER_FILE_LIST_Y + CHOOSER_FILE_LIST_HEIGHT + 2)
end
graphic_chooser.visible = false
end
@@ -373,14 +367,14 @@ class AnimationEditor
btn = UIControls::Button.new(CHOOSER_BUTTON_WIDTH, MESSAGE_BOX_BUTTON_HEIGHT, audio_chooser.viewport, option[1])
btn.set_fixed_size
audio_chooser.add_control_at(option[0], btn,
CHOOSER_FILE_LIST_X + (CHOOSER_BUTTON_WIDTH * i),
CHOOSER_FILE_LIST_Y + CHOOSER_FILE_LIST_HEIGHT + 4)
CHOOSER_FILE_LIST_X + (CHOOSER_BUTTON_WIDTH * i) + 2,
CHOOSER_FILE_LIST_Y + CHOOSER_FILE_LIST_HEIGHT + 2)
end
# Volume and pitch sliders
[[:volume, _INTL("Volume"), 0, 100], [:pitch, _INTL("Pitch"), 0, 200]].each_with_index do |option, i|
label = UIControls::Label.new(AUDIO_CHOOSER_LABEL_WIDTH, 28, audio_chooser.viewport, option[1])
audio_chooser.add_control_at((option[0].to_s + "_label").to_sym, label,
list.x + list.width + 8, list.y + (28 * i))
list.x + list.width + 6, list.y + (28 * i))
slider = UIControls::NumberSlider.new(AUDIO_CHOOSER_SLIDER_WIDTH, 28, audio_chooser.viewport, option[2], option[3], 100)
audio_chooser.add_control_at(option[0], slider, label.x + label.width, label.y)
end
@@ -389,7 +383,7 @@ class AnimationEditor
btn = UIControls::Button.new(CHOOSER_BUTTON_WIDTH, MESSAGE_BOX_BUTTON_HEIGHT, audio_chooser.viewport, option[1])
btn.set_fixed_size
audio_chooser.add_control_at(option[0], btn,
list.x + list.width + 8 + (CHOOSER_BUTTON_WIDTH * i),
list.x + list.width + 6 + (CHOOSER_BUTTON_WIDTH * i),
list.y + (28 * 2))
end
audio_chooser.visible = false
@@ -420,9 +414,6 @@ class AnimationEditor
BORDER_THICKNESS, Color.white, Color.black)
@screen_bitmap.bitmap.border_rect(PARTICLE_LIST_X, PARTICLE_LIST_Y, PARTICLE_LIST_WIDTH, PARTICLE_LIST_HEIGHT,
BORDER_THICKNESS, Color.white, Color.black)
# Draw box around SE list box in side pane
@se_list_box_bitmap.bitmap.outline_rect(SIDE_PANE_X + 3, SIDE_PANE_Y + 24 + 4,
SIDE_PANE_WIDTH - 6, (5 * UIControls::List::ROW_HEIGHT) + 4, Color.black)
# Make the pop-up background semi-transparent
@pop_up_bg_bitmap.bitmap.fill_rect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT, Color.new(0, 0, 0, 128))
end
@@ -434,7 +425,6 @@ class AnimationEditor
side_pane = AnimationEditor::SidePanes.get_pane(component_sym)
if side_pane && side_pane[:set_visible]
@components[component_sym].visible = side_pane[:set_visible].call(self, @anim, keyframe, particle_index)
@se_list_box_bitmap.visible = @components[component_sym].visible if component_sym == :se_pane
end
end

View File

@@ -153,8 +153,6 @@ class AnimationEditor
graphic_chooser.visible = true
# Draw box around list control
list = graphic_chooser.get_control(:list)
bg_bitmap.bitmap.outline_rect(BORDER_THICKNESS + list.x - 2, BORDER_THICKNESS + list.y - 2,
list.width + 4, list.height + 4, Color.black)
# Get a list of files
files = get_all_files_in_folder_and_prepend(
sprite_folder, ["*.png", "*.jpg", "*.jpeg"],
@@ -177,13 +175,13 @@ class AnimationEditor
list.values = files
list.selected = idx
# Create sprite preview
bg_bitmap.bitmap.outline_rect(BORDER_THICKNESS + list.x + list.width + 10 - 2,
BORDER_THICKNESS + list.y - 2,
bg_bitmap.bitmap.outline_rect(BORDER_THICKNESS + list.x + list.width + 6,
BORDER_THICKNESS + list.y,
GRAPHIC_CHOOSER_PREVIEW_SIZE + 4, GRAPHIC_CHOOSER_PREVIEW_SIZE + 4,
Color.black)
preview_sprite = Sprite.new(@pop_up_viewport)
preview_sprite.x = graphic_chooser.x + list.x + list.width + 10 + (GRAPHIC_CHOOSER_PREVIEW_SIZE / 2)
preview_sprite.y = graphic_chooser.y + list.y + (GRAPHIC_CHOOSER_PREVIEW_SIZE / 2)
preview_sprite.x = graphic_chooser.x + list.x + list.width + 8 + (GRAPHIC_CHOOSER_PREVIEW_SIZE / 2)
preview_sprite.y = graphic_chooser.y + list.y + 2 + (GRAPHIC_CHOOSER_PREVIEW_SIZE / 2)
preview_bitmap = nil
set_preview_graphic = lambda do |sprite, filename|
preview_bitmap&.dispose
@@ -209,7 +207,7 @@ class AnimationEditor
end
end
preview_bitmap = AnimatedBitmap.new(folder + fname)
bg_bitmap.bitmap.fill_rect(BORDER_THICKNESS + list.x + list.width + 10, BORDER_THICKNESS + list.y,
bg_bitmap.bitmap.fill_rect(BORDER_THICKNESS + list.x + list.width + 8, BORDER_THICKNESS + list.y + 2,
GRAPHIC_CHOOSER_PREVIEW_SIZE, GRAPHIC_CHOOSER_PREVIEW_SIZE,
Color.white)
next if !preview_bitmap
@@ -219,8 +217,8 @@ class AnimationEditor
sprite.zoom_x = sprite.zoom_y = zoom
sprite.ox = sprite.width / 2
sprite.oy = sprite.height / 2
bg_bitmap.bitmap.fill_rect(BORDER_THICKNESS + sprite.x - graphic_chooser.x - (sprite.width * sprite.zoom_x / 2),
BORDER_THICKNESS + sprite.y - graphic_chooser.y - (sprite.height * sprite.zoom_y / 2),
bg_bitmap.bitmap.fill_rect(BORDER_THICKNESS + sprite.x - graphic_chooser.x - (sprite.width * sprite.zoom_x / 2).round,
BORDER_THICKNESS + sprite.y - graphic_chooser.y - (sprite.height * sprite.zoom_y / 2).round,
sprite.width * sprite.zoom_x, sprite.height * sprite.zoom_y,
Color.magenta)
end
@@ -270,8 +268,6 @@ class AnimationEditor
audio_chooser.visible = true
# Draw box around list control
list = audio_chooser.get_control(:list)
bg_bitmap.bitmap.outline_rect(BORDER_THICKNESS + list.x - 2, BORDER_THICKNESS + list.y - 2,
list.width + 4, list.height + 4, Color.black)
# Get a list of files
files = get_all_files_in_folder_and_prepend(
audio_folder, ["*.wav", "*.ogg", "*.mp3", "*.wma"],

View File

@@ -331,10 +331,10 @@ AnimationEditor::SidePanes.add_property(:se_pane, :header, {
AnimationEditor::SidePanes.add_property(:se_pane, :list, {
:new => proc { |pane, editor|
size = pane.control_size
size[0] -= 10
size[1] = UIControls::List::ROW_HEIGHT * 5 # 5 rows
size[0] -= 6
size[1] = (UIControls::List::ROW_HEIGHT * 5) + (UIControls::List::BORDER_THICKNESS * 2) # 5 rows
list = UIControls::List.new(*size, pane.viewport, [])
pane.add_control_at(:list, list, 5, 30)
pane.add_control_at(:list, list, 3, 28)
},
:refresh_value => proc { |control, editor|
se_particle = editor.anim[:particles].select { |ptcl| ptcl[:name] == "SE" }[0]

View File

@@ -14,19 +14,19 @@ class AnimationEditor::AnimationSelector
TYPE_BUTTON_WIDTH = 100
TYPE_BUTTON_HEIGHT = 48
MOVES_LIST_X = TYPE_BUTTONS_X + TYPE_BUTTON_WIDTH + 4
MOVES_LIST_Y = TYPE_BUTTONS_Y + 4
MOVES_LIST_WIDTH = 200
MOVES_LIST_HEIGHT = 26 * UIControls::List::ROW_HEIGHT
MOVES_LIST_X = TYPE_BUTTONS_X + TYPE_BUTTON_WIDTH + 2
MOVES_LIST_Y = TYPE_BUTTONS_Y + 2
MOVES_LIST_WIDTH = 200 + (UIControls::List::BORDER_THICKNESS * 2)
MOVES_LIST_HEIGHT = (26 * UIControls::List::ROW_HEIGHT) + (UIControls::List::BORDER_THICKNESS * 2)
ANIMATIONS_LIST_X = MOVES_LIST_X + MOVES_LIST_WIDTH + 8
ANIMATIONS_LIST_X = MOVES_LIST_X + MOVES_LIST_WIDTH + 4
ANIMATIONS_LIST_Y = MOVES_LIST_Y
ANIMATIONS_LIST_WIDTH = 300
ANIMATIONS_LIST_WIDTH = 300 + (UIControls::List::BORDER_THICKNESS * 2)
ANIMATIONS_LIST_HEIGHT = MOVES_LIST_HEIGHT
ACTION_BUTTON_WIDTH = 200
ACTION_BUTTON_HEIGHT = 48
ACTION_BUTTON_X = ANIMATIONS_LIST_X + ANIMATIONS_LIST_WIDTH + 4
ACTION_BUTTON_X = ANIMATIONS_LIST_X + ANIMATIONS_LIST_WIDTH + 2
ACTION_BUTTON_Y = TYPE_BUTTONS_Y + ((ANIMATIONS_LIST_HEIGHT - (ACTION_BUTTON_HEIGHT * 3)) / 2) + 4
FILTER_BOX_WIDTH = ACTION_BUTTON_WIDTH
@@ -132,14 +132,6 @@ class AnimationEditor::AnimationSelector
def draw_editor_background
# Fill the whole screen with white
@screen_bitmap.bitmap.fill_rect(0, 0, AnimationEditor::WINDOW_WIDTH, AnimationEditor::WINDOW_HEIGHT, Color.white)
# Outlines around lists
areas = [
[MOVES_LIST_X, MOVES_LIST_Y, MOVES_LIST_WIDTH, MOVES_LIST_HEIGHT],
[ANIMATIONS_LIST_X, ANIMATIONS_LIST_Y, ANIMATIONS_LIST_WIDTH, ANIMATIONS_LIST_HEIGHT]
]
areas.each do |area|
@screen_bitmap.bitmap.outline_rect(area[0] - 2, area[1] - 2, area[2] + 4, area[3] + 4, Color.black)
end
# Make the pop-up background semi-transparent
@pop_up_bg_bitmap.bitmap.fill_rect(0, 0, AnimationEditor::WINDOW_WIDTH, AnimationEditor::WINDOW_HEIGHT, Color.new(0, 0, 0, 128))
end