mirror of
https://github.com/Insality/druid
synced 2025-06-27 18:37:45 +02:00
Add first implementation of druid styles (only button)
This commit is contained in:
parent
89933dfaf5
commit
efef4d194d
@ -6,21 +6,15 @@
|
||||
-- Repeated tap
|
||||
|
||||
local const = require("druid.const")
|
||||
local ui_animate = require("druid.helper.druid_animate")
|
||||
local settings = require("druid.settings")
|
||||
local helper = require("druid.helper")
|
||||
local b_settings = settings.button
|
||||
local helper = require("druid.helper")
|
||||
|
||||
local M = {}
|
||||
M.interest = {
|
||||
const.ON_INPUT
|
||||
}
|
||||
|
||||
M.DEFAULT_DEACTIVATE_COLOR = vmath.vector4(0, 0, 0, 0)
|
||||
M.DEFAULT_DEACTIVATE_SCALE = vmath.vector3(0.8, 0.9, 1)
|
||||
M.DEFAULT_ACTIVATE_SCALE = vmath.vector3(1, 1, 1)
|
||||
M.DEFAULT_ACTIVATION_TIME = 0.2
|
||||
|
||||
|
||||
--- Component init function
|
||||
-- @function button:init
|
||||
@ -31,37 +25,26 @@ M.DEFAULT_ACTIVATION_TIME = 0.2
|
||||
-- @tparam[opt] node anim_node Button anim node (node, if not provided)
|
||||
-- @tparam[opt] string event Button react event, const.ACTION_TOUCH by default
|
||||
function M.init(self, node, callback, params, anim_node, event)
|
||||
assert(callback, "Button should have callback. To block input on zone use blocker component")
|
||||
self.style = self.druid_style.BUTTON or {}
|
||||
|
||||
self.node = helper.node(node)
|
||||
self.event = const.ACTION_TOUCH
|
||||
self.anim_node = anim_node and helper.node(anim_node) or self.node
|
||||
self.scale_from = gui.get_scale(self.anim_node)
|
||||
self.scale_to = self.scale_from + b_settings.SCALE_CHANGE
|
||||
self.scale_hover_to = self.scale_from + b_settings.HOVER_SCALE
|
||||
self.pos = gui.get_position(self.anim_node)
|
||||
self.callback = callback
|
||||
self.params = params
|
||||
self.tap_anim = M.tap_scale_animation
|
||||
self.back_anim = M.back_scale_animation
|
||||
self.hover_anim = b_settings.IS_HOVER
|
||||
self.sound = b_settings.BTN_SOUND
|
||||
self.sound_disable = b_settings.BTN_SOUND_DISABLED
|
||||
self.click_zone = nil
|
||||
|
||||
-- TODO: to separate component "block_input"?
|
||||
-- If callback is nil, so the buttons is stub and without anim
|
||||
-- Used for zones, what should dont pass the input to other UI elements
|
||||
if not callback then
|
||||
self.stub = true
|
||||
self.hover_anim = false
|
||||
self.callback = function() end
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
local function set_hover(self, state)
|
||||
if self.hover_anim and self._is_hovered ~= state then
|
||||
local target_scale = state and self.scale_hover_to or self.scale_from
|
||||
ui_animate.scale(self, self.anim_node, target_scale, b_settings.HOVER_TIME)
|
||||
if self._is_hovered ~= state then
|
||||
if self.style.on_hover then
|
||||
self.style.on_hover(self, self.anim_node, state)
|
||||
end
|
||||
self._is_hovered = state
|
||||
end
|
||||
end
|
||||
@ -71,17 +54,18 @@ local function on_button_release(self)
|
||||
if not self.disabled then
|
||||
if not self.stub and self.can_action then
|
||||
self.can_action = false
|
||||
if self.tap_anim then
|
||||
self.tap_anim(self)
|
||||
if self.style.on_click then
|
||||
self.style.on_click(self, self.anim_node)
|
||||
end
|
||||
self.callback(self.context, self.params, self)
|
||||
settings.play_sound(self.sound)
|
||||
else
|
||||
set_hover(self, false)
|
||||
end
|
||||
return true
|
||||
else
|
||||
settings.play_sound(self.sound_disable)
|
||||
if self.style.on_click_disabled then
|
||||
self.style.on_click_disabled(self, self.anim_node)
|
||||
end
|
||||
return false
|
||||
end
|
||||
end
|
||||
@ -129,76 +113,20 @@ function M.on_swipe(self)
|
||||
end
|
||||
|
||||
|
||||
function M.tap_scale_animation(self)
|
||||
ui_animate.scale_to(self, self.anim_node, self.scale_to,
|
||||
function()
|
||||
if self.back_anim then
|
||||
self.back_anim(self)
|
||||
end
|
||||
end
|
||||
)
|
||||
end
|
||||
function M.set_enabled(self, state)
|
||||
-- if self.disabled == state then
|
||||
-- return
|
||||
-- end
|
||||
|
||||
|
||||
function M.back_scale_animation(self)
|
||||
ui_animate.scale_to(self, self.anim_node, self.scale_from)
|
||||
end
|
||||
|
||||
|
||||
function M.deactivate(self, is_animate, callback)
|
||||
self.disabled = true
|
||||
if is_animate then
|
||||
-- callback call three times in gui.animation
|
||||
local clbk = helper.after(3, function()
|
||||
if callback then
|
||||
callback(self.context)
|
||||
end
|
||||
end)
|
||||
|
||||
ui_animate.color(self, self.node, M.DEFAULT_DEACTIVATE_COLOR,
|
||||
clbk, M.DEFAULT_ACTIVATION_TIME, 0, gui.EASING_OUTBOUNCE)
|
||||
|
||||
ui_animate.scale_y_from_to(self, self.node, M.DEFAULT_ACTIVATE_SCALE.x,
|
||||
M.DEFAULT_DEACTIVATE_SCALE.x, clbk, M.DEFAULT_ACTIVATION_TIME, gui.EASING_OUTBOUNCE)
|
||||
|
||||
ui_animate.scale_x_from_to(self, self.node, M.DEFAULT_ACTIVATE_SCALE.y,
|
||||
M.DEFAULT_DEACTIVATE_SCALE.y, clbk, M.DEFAULT_ACTIVATION_TIME, gui.EASING_OUTBOUNCE)
|
||||
else
|
||||
gui.set_color(self.node, M.DEFAULT_DEACTIVATE_COLOR)
|
||||
gui.set_scale(self.node, M.DEFAULT_DEACTIVATE_SCALE)
|
||||
if callback then
|
||||
callback(self.context)
|
||||
end
|
||||
self.disabled = not state
|
||||
if self.style.on_set_enabled then
|
||||
self.style.on_set_enabled(self, self.node, state)
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
function M.activate(self, is_animate, callback)
|
||||
if is_animate then
|
||||
-- callback call three times in gui.animation
|
||||
local clbk = helper.after(3, function()
|
||||
self.disabled = false
|
||||
if callback then
|
||||
callback(self.context)
|
||||
end
|
||||
end)
|
||||
|
||||
ui_animate.color(self, self.node, ui_animate.TINT_SHOW,
|
||||
clbk, M.DEFAULT_ACTIVATION_TIME, 0, gui.EASING_OUTBOUNCE)
|
||||
|
||||
ui_animate.scale_y_from_to(self, self.node, M.DEFAULT_DEACTIVATE_SCALE.x,
|
||||
M.DEFAULT_ACTIVATE_SCALE.x, clbk, M.DEFAULT_ACTIVATION_TIME, gui.EASING_OUTBOUNCE)
|
||||
|
||||
ui_animate.scale_x_from_to(self, self.node, M.DEFAULT_DEACTIVATE_SCALE.y,
|
||||
M.DEFAULT_ACTIVATE_SCALE.y, clbk, M.DEFAULT_ACTIVATION_TIME, gui.EASING_OUTBOUNCE)
|
||||
else
|
||||
gui.set_color(self.node, ui_animate.TINT_SHOW)
|
||||
gui.set_scale(self.node, M.DEFAULT_ACTIVATE_SCALE)
|
||||
self.disabled = false
|
||||
if callback then
|
||||
callback(self.context)
|
||||
end
|
||||
end
|
||||
function M.get_enabled(self)
|
||||
return not self.disabled
|
||||
end
|
||||
|
||||
|
||||
@ -207,8 +135,6 @@ end
|
||||
-- @tparam table self Component instance
|
||||
function M.disable_animation(self)
|
||||
self.hover_anim = false
|
||||
self.tap_anim = nil
|
||||
self.back_anim = nil
|
||||
end
|
||||
|
||||
|
||||
|
@ -12,6 +12,8 @@ local M = {}
|
||||
|
||||
local log = settings.log
|
||||
local _fct_metatable = {}
|
||||
-- Temporary, what the place for it?
|
||||
local default_style = {}
|
||||
|
||||
--- Basic components
|
||||
M.comps = {
|
||||
@ -57,9 +59,9 @@ function M.register(name, module)
|
||||
end
|
||||
|
||||
|
||||
--- Create UI instance for ui elements
|
||||
--- Create Druid instance for creating components
|
||||
-- @return instance with all ui components
|
||||
function M.new(component_script)
|
||||
function M.new(component_script, style)
|
||||
if register_basic_components then
|
||||
register_basic_components()
|
||||
register_basic_components = false
|
||||
@ -68,10 +70,16 @@ function M.new(component_script)
|
||||
-- Druid context here (who created druid)
|
||||
-- Usually gui_script, but can be component from helper.get_druid(component)
|
||||
self._context = component_script
|
||||
self._style = style or default_style
|
||||
return self
|
||||
end
|
||||
|
||||
|
||||
function M.set_default_style(style)
|
||||
default_style = style
|
||||
end
|
||||
|
||||
|
||||
local function input_init(self)
|
||||
if not self.input_inited then
|
||||
self.input_inited = true
|
||||
@ -80,10 +88,12 @@ local function input_init(self)
|
||||
end
|
||||
|
||||
|
||||
-- Create the component
|
||||
local function create(self, module)
|
||||
local instance = setmetatable({}, { __index = module })
|
||||
-- Component context, self from component creation
|
||||
instance.context = self._context
|
||||
instance.druid_style = self._style
|
||||
table.insert(self, instance)
|
||||
|
||||
local register_to = module.interest
|
||||
|
@ -7,12 +7,7 @@ local M = {}
|
||||
M.is_debug = false
|
||||
M.button = {
|
||||
IS_HOVER = true,
|
||||
IS_HOLD = true,
|
||||
BTN_SOUND = "click",
|
||||
BTN_SOUND_DISABLED = "click_disabled",
|
||||
HOVER_SCALE = vmath.vector3(-0.025, -0.025, 1),
|
||||
HOVER_TIME = 0.05,
|
||||
SCALE_CHANGE = vmath.vector3(-0.05, - 0.05, 1),
|
||||
IS_HOLD = true
|
||||
}
|
||||
|
||||
M.progress = {
|
||||
|
26
druid/styles/bounce/anims.lua
Normal file
26
druid/styles/bounce/anims.lua
Normal file
@ -0,0 +1,26 @@
|
||||
local ui_animate = require("druid.helper.druid_animate")
|
||||
|
||||
|
||||
local M = {}
|
||||
|
||||
|
||||
function M.back_scale_animation(self, node, target_scale)
|
||||
ui_animate.scale_to(self, node, target_scale)
|
||||
end
|
||||
|
||||
|
||||
function M.tap_scale_animation(self, node, target_scale)
|
||||
ui_animate.scale_to(self, node, target_scale,
|
||||
function()
|
||||
M.back_scale_animation(self, node, self.scale_from)
|
||||
end
|
||||
)
|
||||
end
|
||||
|
||||
|
||||
function M.hover_scale(self, target, time)
|
||||
ui_animate.scale(self, self.anim_node, target, time)
|
||||
end
|
||||
|
||||
|
||||
return M
|
14
druid/styles/bounce/const.lua
Normal file
14
druid/styles/bounce/const.lua
Normal file
@ -0,0 +1,14 @@
|
||||
local M = {}
|
||||
|
||||
|
||||
M.BUTTON = {
|
||||
HOVER_SCALE = vmath.vector3(-0.025, -0.025, 1),
|
||||
HOVER_TIME = 0.05,
|
||||
SCALE_CHANGE = vmath.vector3(-0.05, - 0.05, 1),
|
||||
BTN_SOUND = "click",
|
||||
BTN_SOUND_DISABLED = "click",
|
||||
DISABLED_COLOR = vmath.vector4(0, 0, 0, 1),
|
||||
ENABLED_COLOR = vmath.vector4(1),
|
||||
}
|
||||
|
||||
return M
|
37
druid/styles/bounce/style.lua
Normal file
37
druid/styles/bounce/style.lua
Normal file
@ -0,0 +1,37 @@
|
||||
local settings = require("druid.settings")
|
||||
local anims = require("druid.styles.bounce.anims")
|
||||
local const = require("druid.styles.bounce.const")
|
||||
|
||||
local M = {}
|
||||
|
||||
|
||||
M.BUTTON = {
|
||||
on_hover = function(self, node, state)
|
||||
if self.hover_anim then
|
||||
local scale_to = self.scale_from + const.BUTTON.HOVER_SCALE
|
||||
|
||||
local target_scale = state and scale_to or self.scale_from
|
||||
anims.hover_scale(self, target_scale, const.BUTTON.HOVER_TIME)
|
||||
end
|
||||
end,
|
||||
|
||||
on_click = function(self, node)
|
||||
local scale_to = self.scale_from + const.BUTTON.SCALE_CHANGE
|
||||
anims.tap_scale_animation(self, node, scale_to)
|
||||
settings.play_sound(const.BUTTON.BTN_SOUND)
|
||||
end,
|
||||
|
||||
on_click_disabled = function(self, node)
|
||||
settings.play_sound(const.BUTTON.BTN_SOUND_DISABLED)
|
||||
end,
|
||||
|
||||
on_set_enabled = function(self, node, state)
|
||||
if state then
|
||||
gui.set_color(node, const.BUTTON.ENABLED_COLOR)
|
||||
else
|
||||
gui.set_color(node, const.BUTTON.DISABLED_COLOR)
|
||||
end
|
||||
end
|
||||
}
|
||||
|
||||
return M
|
@ -58,7 +58,7 @@ local function init_progress(self)
|
||||
local simple = self.druid:new_progress("simple_fill", "x", val)
|
||||
local vert = self.druid:new_progress("simple_vert_fill", "y", val)
|
||||
|
||||
simple:set_steps({0, 0.3, 0.6, 1}, function(self, step)
|
||||
simple:set_steps({0, 0.3, 0.6, 1}, function(_, step)
|
||||
print("STEP:", step)
|
||||
end)
|
||||
|
||||
|
@ -1,4 +1,5 @@
|
||||
local druid = require("druid.druid")
|
||||
local bounce_style = require("druid.styles.bounce.style")
|
||||
|
||||
local main_page = require("example.kenney.page.main")
|
||||
|
||||
@ -15,6 +16,7 @@ end
|
||||
|
||||
|
||||
function init(self)
|
||||
druid.set_default_style(bounce_style)
|
||||
self.druid = druid.new(self)
|
||||
|
||||
init_top_panel(self)
|
||||
|
@ -17,8 +17,11 @@ end
|
||||
|
||||
|
||||
local function setup_button(self)
|
||||
self.druid:new_button("button_simple", lang.toggle_locale, "button_param")
|
||||
self.druid:new_button("button_template/button", empty_callback, "button_param")
|
||||
local b = self.druid:new_button("button_simple", lang.toggle_locale, "button_param")
|
||||
self.druid:new_button("button_template/button", function()
|
||||
print(b:get_enabled())
|
||||
b:set_enabled(not b:get_enabled())
|
||||
end, "button_param")
|
||||
end
|
||||
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user