diff --git a/docs_md/02-creating_custom_components.md b/docs_md/02-creating_custom_components.md index 9b93470..b2fff06 100644 --- a/docs_md/02-creating_custom_components.md +++ b/docs_md/02-creating_custom_components.md @@ -35,8 +35,12 @@ end function M.on_message(self, message_id, message, sender) end --- Call only if component with ON_ANGUAGECHANinterest -function M.on_anguagechanself) +-- Call only if component with ON_LANGUAGE_CHANGE interest +function M.on_language_change(self) +end + +-- Call only if component with ON_MESSAGE_INPUT interest +function M.on_message_input(self, node_id, message) end -- Call only if component with ON_LAYOUT_CHANGE interest @@ -105,6 +109,8 @@ There is next interests in druid: - **ON_LANGUAGE_CHANGE** - will call _on_language_change_ function on language change trigger +- **ON_MESSAGE_INPUT** - will call _on_message_input_ function on Druid _const.ON_MESSAGE_INPUT_ message + - **ON_LAYOUT_CHANGE** will call _on_layout_change_ function on layout change trigger - **ON_FOCUS_LOST** will call _on_focust_lost_ function in on focus lost event. You need to pass window_callback to global `druid:on_window_callback` diff --git a/docs_md/changelog.md b/docs_md/changelog.md index 428e47e..6b22484 100644 --- a/docs_md/changelog.md +++ b/docs_md/changelog.md @@ -225,7 +225,7 @@ Have a good day. - const.TEXT_ADJUST.SCROLL - Change text's pivot to imitate scrolling in the text box. Use with stencil node for better effect. - const.TEXT_ADJUST.SCALE_THEN_SCROLL - Combine two modes: first limited downscale, then scroll - **#81** Add ability to interact with Druid input via messages - - Currently add only Druid Button component: + - Currently add for Button and Text component only: - Send to _gui.script_ message: `druid_const.ON_MESSAGE_INPUT`. The message table params: - `node_id` - the name of the node with button component on it - `action` - value from `druid_const.MESSAGE_INPUT`. Available values: @@ -233,6 +233,8 @@ Have a good day. - **BUTTON_LONG_CLICK** - button long click callback - **BUTTON_DOUBLE_CLICK** - button double click callback - **BUTTON_REPEATED_CLICK** - button repeated click callback + - **TEXT_SET** - set text for Text component + - `value` - optional field for several actions. For example value is text for **TEXT_SET** - Add Druid component interest: `component.ON_MESSAGE_INPUT` - Implement new interest via function `component:on_message_input(node_id, message)` - See **System: Message input** example \ No newline at end of file diff --git a/druid/base/text.lua b/druid/base/text.lua index c4ce36d..f4f4c7d 100644 --- a/druid/base/text.lua +++ b/druid/base/text.lua @@ -19,6 +19,9 @@ --- Text node -- @tfield node node +--- The node id of text node +-- @tfield hash node_id + --- Current text position -- @tfield vector3 pos @@ -47,7 +50,7 @@ local const = require("druid.const") local utf8 = require("druid.system.utf8") local component = require("druid.component") -local Text = component.create("text", { component.ON_LAYOUT_CHANGE }) +local Text = component.create("text", { component.ON_LAYOUT_CHANGE, component.ON_MESSAGE_INPUT }) local function update_text_size(self) @@ -186,6 +189,7 @@ end function Text.init(self, node, value, adjust_type) self.node = self:get_node(node) self.pos = gui.get_position(self.node) + self.node_id = gui.get_id(self.node) self.start_pivot = gui.get_pivot(self.node) self.start_scale = gui.get_scale(self.node) @@ -215,6 +219,17 @@ function Text.on_layout_change(self) end +function Text.on_message_input(self, node_id, message) + if node_id ~= self.node_id then + return false + end + + if message.action == const.MESSAGE_INPUT.TEXT_SET then + Text.set_to(self, message.value) + end +end + + --- Calculate text width with font with respect to trailing space -- @tparam Text self -- @tparam[opt] string text @@ -241,6 +256,8 @@ end -- @tparam string set_to Text for node -- @treturn Text Current text instance function Text.set_to(self, set_to) + set_to = set_to or "" + self.last_value = set_to gui.set_text(self.node, set_to) diff --git a/druid/const.lua b/druid/const.lua index 62c8e1a..0e1d0c1 100644 --- a/druid/const.lua +++ b/druid/const.lua @@ -50,6 +50,8 @@ M.MESSAGE_INPUT = { BUTTON_LONG_CLICK = "button_long_click", BUTTON_DOUBLE_CLICK = "button_double_click", BUTTON_REPEATED_CLICK = "button_repeated_click", + -- (value) + TEXT_SET = "text_set", } diff --git a/example/examples/system/message_input/message_input.gui b/example/examples/system/message_input/message_input.gui index c127e1c..cf05adf 100644 --- a/example/examples/system/message_input/message_input.gui +++ b/example/examples/system/message_input/message_input.gui @@ -217,7 +217,7 @@ nodes { w: 1.0 } type: TYPE_TEMPLATE - id: "button_left" + id: "button_test" parent: "info_button" layer: "" inherit_alpha: true @@ -259,12 +259,12 @@ nodes { type: TYPE_BOX blend_mode: BLEND_MODE_ALPHA texture: "kenney/button_blue" - id: "button_left/button" + id: "button_test/button" xanchor: XANCHOR_NONE yanchor: YANCHOR_NONE pivot: PIVOT_CENTER adjust_mode: ADJUST_MODE_FIT - parent: "button_left" + parent: "button_test" layer: "image" inherit_alpha: true slice9 { @@ -313,9 +313,9 @@ nodes { } type: TYPE_TEXT blend_mode: BLEND_MODE_ALPHA - text: "Left" + text: "Button" font: "game" - id: "button_left/text" + id: "button_test/text" xanchor: XANCHOR_NONE yanchor: YANCHOR_NONE pivot: PIVOT_CENTER @@ -333,7 +333,7 @@ nodes { } adjust_mode: ADJUST_MODE_FIT line_break: false - parent: "button_left/button" + parent: "button_test/button" layer: "text" inherit_alpha: true alpha: 1.0 @@ -347,7 +347,7 @@ nodes { nodes { position { x: 100.0 - y: 0.0 + y: 6.0 z: 0.0 w: 1.0 } @@ -358,103 +358,8 @@ nodes { w: 1.0 } scale { - x: 1.0 - y: 1.0 - z: 1.0 - w: 1.0 - } - size { - x: 200.0 - y: 100.0 - z: 0.0 - w: 1.0 - } - color { - x: 1.0 - y: 1.0 - z: 1.0 - w: 1.0 - } - type: TYPE_TEMPLATE - id: "button_right" - parent: "info_button" - layer: "" - inherit_alpha: true - alpha: 1.0 - template: "/example/templates/button.gui" - template_node_child: false -} -nodes { - position { - x: 0.0 - y: 0.0 - z: 0.0 - w: 1.0 - } - rotation { - x: 0.0 - y: 0.0 - z: 0.0 - w: 1.0 - } - scale { - x: 1.0 - y: 1.0 - z: 1.0 - w: 1.0 - } - size { - x: 130.0 - y: 60.0 - z: 0.0 - w: 1.0 - } - color { - x: 1.0 - y: 1.0 - z: 1.0 - w: 1.0 - } - type: TYPE_BOX - blend_mode: BLEND_MODE_ALPHA - texture: "kenney/button_blue" - id: "button_right/button" - xanchor: XANCHOR_NONE - yanchor: YANCHOR_NONE - pivot: PIVOT_CENTER - adjust_mode: ADJUST_MODE_FIT - parent: "button_right" - layer: "image" - inherit_alpha: true - slice9 { - x: 15.0 - y: 15.0 - z: 15.0 - w: 15.0 - } - clipping_mode: CLIPPING_MODE_NONE - clipping_visible: true - clipping_inverted: false - alpha: 1.0 - template_node_child: true - size_mode: SIZE_MODE_MANUAL -} -nodes { - position { - x: 0.0 - y: 7.0 - z: 0.0 - w: 1.0 - } - rotation { - x: 0.0 - y: 0.0 - z: 0.0 - w: 1.0 - } - scale { - x: 0.7 - y: 0.7 + x: 0.8 + y: 0.8 z: 1.0 w: 1.0 } @@ -472,34 +377,33 @@ nodes { } type: TYPE_TEXT blend_mode: BLEND_MODE_ALPHA - text: "Right" + text: "Value: 0" font: "game" - id: "button_right/text" + id: "text_random" xanchor: XANCHOR_NONE yanchor: YANCHOR_NONE pivot: PIVOT_CENTER outline { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + shadow { x: 1.0 y: 1.0 z: 1.0 w: 1.0 } - shadow { - x: 0.101960786 - y: 0.2 - z: 0.6 - w: 1.0 - } adjust_mode: ADJUST_MODE_FIT line_break: false - parent: "button_right/button" - layer: "text" + parent: "info_button" + layer: "" inherit_alpha: true alpha: 1.0 - outline_alpha: 0.0 - shadow_alpha: 0.78 - overridden_fields: 8 - template_node_child: true + outline_alpha: 1.0 + shadow_alpha: 0.0 + template_node_child: false text_leading: 1.0 text_tracking: 0.0 } @@ -653,7 +557,7 @@ nodes { w: 1.0 } type: TYPE_TEMPLATE - id: "button_trigger_left" + id: "button_trigger_click" parent: "info_blacklist" layer: "" inherit_alpha: true @@ -695,12 +599,12 @@ nodes { type: TYPE_BOX blend_mode: BLEND_MODE_ALPHA texture: "kenney/button_blue" - id: "button_trigger_left/button" + id: "button_trigger_click/button" xanchor: XANCHOR_NONE yanchor: YANCHOR_NONE pivot: PIVOT_CENTER adjust_mode: ADJUST_MODE_FIT - parent: "button_trigger_left" + parent: "button_trigger_click" layer: "image" inherit_alpha: true slice9 { @@ -749,9 +653,9 @@ nodes { } type: TYPE_TEXT blend_mode: BLEND_MODE_ALPHA - text: "Left" + text: "Click" font: "game" - id: "button_trigger_left/text" + id: "button_trigger_click/text" xanchor: XANCHOR_NONE yanchor: YANCHOR_NONE pivot: PIVOT_CENTER @@ -769,167 +673,7 @@ nodes { } adjust_mode: ADJUST_MODE_FIT line_break: false - parent: "button_trigger_left/button" - layer: "text" - inherit_alpha: true - alpha: 1.0 - outline_alpha: 0.0 - shadow_alpha: 0.78 - overridden_fields: 8 - template_node_child: true - text_leading: 1.0 - text_tracking: 0.0 -} -nodes { - position { - x: 100.0 - y: 0.0 - z: 0.0 - w: 1.0 - } - rotation { - x: 0.0 - y: 0.0 - z: 0.0 - w: 1.0 - } - scale { - x: 1.0 - y: 1.0 - z: 1.0 - w: 1.0 - } - size { - x: 200.0 - y: 100.0 - z: 0.0 - w: 1.0 - } - color { - x: 1.0 - y: 1.0 - z: 1.0 - w: 1.0 - } - type: TYPE_TEMPLATE - id: "button_trigger_right" - parent: "info_blacklist" - layer: "" - inherit_alpha: true - alpha: 1.0 - template: "/example/templates/button.gui" - template_node_child: false -} -nodes { - position { - x: 0.0 - y: 0.0 - z: 0.0 - w: 1.0 - } - rotation { - x: 0.0 - y: 0.0 - z: 0.0 - w: 1.0 - } - scale { - x: 1.0 - y: 1.0 - z: 1.0 - w: 1.0 - } - size { - x: 130.0 - y: 60.0 - z: 0.0 - w: 1.0 - } - color { - x: 1.0 - y: 1.0 - z: 1.0 - w: 1.0 - } - type: TYPE_BOX - blend_mode: BLEND_MODE_ALPHA - texture: "kenney/button_blue" - id: "button_trigger_right/button" - xanchor: XANCHOR_NONE - yanchor: YANCHOR_NONE - pivot: PIVOT_CENTER - adjust_mode: ADJUST_MODE_FIT - parent: "button_trigger_right" - layer: "image" - inherit_alpha: true - slice9 { - x: 15.0 - y: 15.0 - z: 15.0 - w: 15.0 - } - clipping_mode: CLIPPING_MODE_NONE - clipping_visible: true - clipping_inverted: false - alpha: 1.0 - template_node_child: true - size_mode: SIZE_MODE_MANUAL -} -nodes { - position { - x: 0.0 - y: 7.0 - z: 0.0 - w: 1.0 - } - rotation { - x: 0.0 - y: 0.0 - z: 0.0 - w: 1.0 - } - scale { - x: 0.7 - y: 0.7 - z: 1.0 - w: 1.0 - } - size { - x: 200.0 - y: 100.0 - z: 0.0 - w: 1.0 - } - color { - x: 1.0 - y: 1.0 - z: 1.0 - w: 1.0 - } - type: TYPE_TEXT - blend_mode: BLEND_MODE_ALPHA - text: "Right\n" - "" - font: "game" - id: "button_trigger_right/text" - xanchor: XANCHOR_NONE - yanchor: YANCHOR_NONE - pivot: PIVOT_CENTER - outline { - x: 1.0 - y: 1.0 - z: 1.0 - w: 1.0 - } - shadow { - x: 0.101960786 - y: 0.2 - z: 0.6 - w: 1.0 - } - adjust_mode: ADJUST_MODE_FIT - line_break: false - parent: "button_trigger_right/button" + parent: "button_trigger_click/button" layer: "text" inherit_alpha: true alpha: 1.0 @@ -972,7 +716,7 @@ nodes { w: 1.0 } type: TYPE_TEMPLATE - id: "button_trigger_left_double" + id: "button_trigger_double" parent: "info_blacklist" layer: "" inherit_alpha: true @@ -1014,12 +758,12 @@ nodes { type: TYPE_BOX blend_mode: BLEND_MODE_ALPHA texture: "kenney/button_blue" - id: "button_trigger_left_double/button" + id: "button_trigger_double/button" xanchor: XANCHOR_NONE yanchor: YANCHOR_NONE pivot: PIVOT_CENTER adjust_mode: ADJUST_MODE_FIT - parent: "button_trigger_left_double" + parent: "button_trigger_double" layer: "image" inherit_alpha: true slice9 { @@ -1070,7 +814,7 @@ nodes { blend_mode: BLEND_MODE_ALPHA text: "Double click" font: "game" - id: "button_trigger_left_double/text" + id: "button_trigger_double/text" xanchor: XANCHOR_NONE yanchor: YANCHOR_NONE pivot: PIVOT_CENTER @@ -1088,7 +832,7 @@ nodes { } adjust_mode: ADJUST_MODE_FIT line_break: false - parent: "button_trigger_left_double/button" + parent: "button_trigger_double/button" layer: "text" inherit_alpha: true alpha: 1.0 @@ -1132,7 +876,7 @@ nodes { w: 1.0 } type: TYPE_TEMPLATE - id: "button_trigger_left_long" + id: "button_trigger_long" parent: "info_blacklist" layer: "" inherit_alpha: true @@ -1174,12 +918,12 @@ nodes { type: TYPE_BOX blend_mode: BLEND_MODE_ALPHA texture: "kenney/button_blue" - id: "button_trigger_left_long/button" + id: "button_trigger_long/button" xanchor: XANCHOR_NONE yanchor: YANCHOR_NONE pivot: PIVOT_CENTER adjust_mode: ADJUST_MODE_FIT - parent: "button_trigger_left_long" + parent: "button_trigger_long" layer: "image" inherit_alpha: true slice9 { @@ -1230,7 +974,7 @@ nodes { blend_mode: BLEND_MODE_ALPHA text: "Long click" font: "game" - id: "button_trigger_left_long/text" + id: "button_trigger_long/text" xanchor: XANCHOR_NONE yanchor: YANCHOR_NONE pivot: PIVOT_CENTER @@ -1248,7 +992,7 @@ nodes { } adjust_mode: ADJUST_MODE_FIT line_break: false - parent: "button_trigger_left_long/button" + parent: "button_trigger_long/button" layer: "text" inherit_alpha: true alpha: 1.0 @@ -1292,7 +1036,7 @@ nodes { w: 1.0 } type: TYPE_TEMPLATE - id: "button_trigger_left_repeated" + id: "button_trigger_repeated" parent: "info_blacklist" layer: "" inherit_alpha: true @@ -1334,12 +1078,12 @@ nodes { type: TYPE_BOX blend_mode: BLEND_MODE_ALPHA texture: "kenney/button_blue" - id: "button_trigger_left_repeated/button" + id: "button_trigger_repeated/button" xanchor: XANCHOR_NONE yanchor: YANCHOR_NONE pivot: PIVOT_CENTER adjust_mode: ADJUST_MODE_FIT - parent: "button_trigger_left_repeated" + parent: "button_trigger_repeated" layer: "image" inherit_alpha: true slice9 { @@ -1390,7 +1134,7 @@ nodes { blend_mode: BLEND_MODE_ALPHA text: "Repeated" font: "game" - id: "button_trigger_left_repeated/text" + id: "button_trigger_repeated/text" xanchor: XANCHOR_NONE yanchor: YANCHOR_NONE pivot: PIVOT_CENTER @@ -1408,7 +1152,7 @@ nodes { } adjust_mode: ADJUST_MODE_FIT line_break: false - parent: "button_trigger_left_repeated/button" + parent: "button_trigger_repeated/button" layer: "text" inherit_alpha: true alpha: 1.0 @@ -1419,6 +1163,167 @@ nodes { text_leading: 1.0 text_tracking: 0.0 } +nodes { + position { + x: 100.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEMPLATE + id: "button_text_random" + parent: "info_blacklist" + layer: "" + inherit_alpha: true + alpha: 1.0 + template: "/example/templates/button.gui" + template_node_child: false +} +nodes { + position { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + size { + x: 130.0 + y: 60.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_BOX + blend_mode: BLEND_MODE_ALPHA + texture: "kenney/button_green" + id: "button_text_random/button" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + adjust_mode: ADJUST_MODE_FIT + parent: "button_text_random" + layer: "image" + inherit_alpha: true + slice9 { + x: 15.0 + y: 15.0 + z: 15.0 + w: 15.0 + } + clipping_mode: CLIPPING_MODE_NONE + clipping_visible: true + clipping_inverted: false + alpha: 1.0 + overridden_fields: 9 + template_node_child: true + size_mode: SIZE_MODE_MANUAL +} +nodes { + position { + x: 0.0 + y: 7.0 + z: 0.0 + w: 1.0 + } + rotation { + x: 0.0 + y: 0.0 + z: 0.0 + w: 1.0 + } + scale { + x: 0.7 + y: 0.7 + z: 1.0 + w: 1.0 + } + size { + x: 200.0 + y: 100.0 + z: 0.0 + w: 1.0 + } + color { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + type: TYPE_TEXT + blend_mode: BLEND_MODE_ALPHA + text: "Set Text" + font: "game" + id: "button_text_random/text" + xanchor: XANCHOR_NONE + yanchor: YANCHOR_NONE + pivot: PIVOT_CENTER + outline { + x: 1.0 + y: 1.0 + z: 1.0 + w: 1.0 + } + shadow { + x: 0.101960786 + y: 0.3019608 + z: 0.3019608 + w: 1.0 + } + adjust_mode: ADJUST_MODE_FIT + line_break: false + parent: "button_text_random/button" + layer: "text" + inherit_alpha: true + alpha: 1.0 + outline_alpha: 0.0 + shadow_alpha: 0.78 + overridden_fields: 8 + overridden_fields: 16 + template_node_child: true + text_leading: 1.0 + text_tracking: 0.0 +} layers { name: "image" } diff --git a/example/examples/system/message_input/message_input.gui_script b/example/examples/system/message_input/message_input.gui_script index 97e3447..96203be 100644 --- a/example/examples/system/message_input/message_input.gui_script +++ b/example/examples/system/message_input/message_input.gui_script @@ -8,46 +8,50 @@ end local function trigger_callback(self, params) - msg.post(".", const.ON_MESSAGE_INPUT, { - node_id = params.node_id, - action = params.action - }) + msg.post(".", const.ON_MESSAGE_INPUT, params) +end + + +local function set_random_text_callback(self, params) + params.value = "Value: " .. math.random(0, 99) + + trigger_callback(self, params) end function init(self) self.druid = druid.new(self) - self.button_left = self.druid:new_button("button_left/button", click_callback) - self.button_left.on_long_click:subscribe(function() print("long click") end) - self.button_left.on_double_click:subscribe(function() print("double click") end) - self.button_left.on_repeated_click:subscribe(function() print("repeated_click") end) + self.button_test = self.druid:new_button("button_test/button", click_callback) + self.button_test.on_long_click:subscribe(function() print("long click") end) + self.button_test.on_double_click:subscribe(function() print("double click") end) + self.button_test.on_repeated_click:subscribe(function() print("repeated_click") end) - self.button_right = self.druid:new_button("button_right/button", click_callback) + self.druid:new_text("text_random") - self.druid:new_button("button_trigger_left/button", trigger_callback, { - node_id = "button_left/button", + self.druid:new_button("button_trigger_click/button", trigger_callback, { + node_id = "button_test/button", action = const.MESSAGE_INPUT.BUTTON_CLICK }) - self.druid:new_button("button_trigger_left_double/button", trigger_callback, { - node_id = "button_left/button", + self.druid:new_button("button_trigger_double/button", trigger_callback, { + node_id = "button_test/button", action = const.MESSAGE_INPUT.BUTTON_DOUBLE_CLICK }) - self.druid:new_button("button_trigger_left_long/button", trigger_callback, { - node_id = "button_left/button", + self.druid:new_button("button_trigger_long/button", trigger_callback, { + node_id = "button_test/button", action = const.MESSAGE_INPUT.BUTTON_LONG_CLICK }) - self.druid:new_button("button_trigger_left_repeated/button", trigger_callback, { - node_id = "button_left/button", + self.druid:new_button("button_trigger_repeated/button", trigger_callback, { + node_id = "button_test/button", action = const.MESSAGE_INPUT.BUTTON_REPEATED_CLICK }) - self.druid:new_button("button_trigger_right/button", trigger_callback, { - node_id = "button_right/button", - action = const.MESSAGE_INPUT.BUTTON_CLICK + self.druid:new_button("button_text_random/button", set_random_text_callback, { + node_id = "text_random", + action = const.MESSAGE_INPUT.TEXT_SET }) end