Input implementation progress

docs_md/changelog.md

@@ -0,0 +1,13 @@
+Druid 0.3.0:
+
+- Add swipe basic component
+	- Swipe component handle simple swipe gestures on node. It has single callback with direction on swipe. You can adjust a several parameters of swipe in druid style.
+
+- Add input basic component
+	- Input component handle user text input. Input contains from button and text component. Button needed for selecting input field
+
+- Add button on_click_outside event. You can subscribe on this event in button. Was needed for Input component (click outside to deselect input field).
+
+- Changed input binding settings. Add backspace, enter, text and marked_text. Backspace now is different from android back button.
+
+- Add several examples to druid-assets

druid/base/button.lua

@@ -26,7 +26,6 @@
 -- @tfield function on_click_disabled (self, node)
 -- @tfield function on_hover (self, node, hover_state)
 -- @tfield function on_set_enabled (self, node, enabled_state)
--- @tfield bool IS_HOVER
 
 local Event = require("druid.event")
 local const = require("druid.const")

druid/base/input.lua

@@ -3,6 +3,7 @@
 -- @author Part of code from Britzl gooey input component
 -- @module druid.input
 
+local Event = require("druid.event")
 local const = require("druid.const")
 local component = require("druid.component")
 local utf8 = require("druid.system.utf8")
@@ -12,26 +13,37 @@ local M = component.create("input", { const.ON_INPUT })
 
 local function select(self)
 	gui.reset_keyboard()
+	self.marked_value = ""
 	if not self.selected then
-		print("selected")
 		self.selected = true
 		gui.show_keyboard(gui.KEYBOARD_TYPE_DEFAULT, false)
+		self.on_input_select:trigger(self:get_context())
+
+		if self.style.on_select then
+			self.style.on_select(self)
+		end
 	end
 end
 
 
 local function unselect(self)
 	gui.reset_keyboard()
+	self.marked_value = ""
 	if self.selected then
 		self.selected = false
-		print("unselected")
 		gui.hide_keyboard()
+		self.on_input_unselect:trigger(self:get_context())
+
+		if self.style.on_unselect then
+			self.style.on_unselect(self)
+		end
 	end
 end
 
 
-function M.init(self, click_node, text_node)
+function M.init(self, click_node, text_node, keyboard_type)
 	self.druid = self:get_druid(self)
+	self.style = self:get_style(self)
 	self.text = self.druid:new_text(text_node)
 
 	self.selected = false
@@ -44,12 +56,20 @@ function M.init(self, click_node, text_node)
 	self.market_text_width = 0
 	self.total_width = 0
 
-	self.max_width = 10
+	self.max_length = 18
+	self.allowed_characters = nil
 
-	self.keyboard_type = gui.KEYBOARD_TYPE_DEFAULT
+	self.keyboard_type = keyboard_type or gui.KEYBOARD_TYPE_DEFAULT
 
 	self.button = self.druid:new_button(click_node, select)
+	self.button:set_style(self.style)
 	self.button.on_click_outside:subscribe(unselect)
+
+	self.on_input_select = Event()
+	self.on_input_unselect = Event()
+	self.on_input_text = Event()
+	self.on_input_empty = Event()
+	self.on_input_full = Event()
 end
 
 
@@ -57,7 +77,6 @@ function M.on_input(self, action_id, action)
 	if self.selected then
 		local input_text = nil
 		if action_id == const.ACTION_TEXT then
-			print("usual", action.text)
 			-- ignore return key
 			if action.text == "\n" or action.text == "\r" then
 				return true
@@ -69,17 +88,17 @@ function M.on_input(self, action_id, action)
 
 			-- ignore arrow keys
 			if not string.match(hex, "EF9C8[0-3]") then
-				-- if not config or not config.allowed_characters or action.text:match(config.allowed_characters) then
+				if not self.allowed_characters or action.text:match(self.allowed_characters) then
 					input_text = self.value .. action.text
 					if self.max_length then
-					input_text = utf8.sub(self.value, 1, self.max_length)
+						input_text = utf8.sub(input_text, 1, self.max_length)
+					end
 				end
 				self.marked_value = ""
 			end
 		end
 
 		if action_id == const.ACTION_MARKED_TEXT then
-			print("marked")
 			self.marked_value = action.text or ""
 			if self.max_length then
 				input_text = utf8.sub(self.marked_value, 1, self.max_length)
@@ -101,7 +120,6 @@ function M.on_input(self, action_id, action)
 		end
 
 		if input_text then
-			print("set input_text", input_text)
 			self:set_text(input_text)
 			return true
 		end
@@ -117,7 +135,6 @@ function M.set_text(self, input_text)
 	-- only update the text if it has changed
 	local current_value = self.value .. self.marked_value
 
-	print(self.value)
 	if current_value ~= self.current_value then
 		self.current_value = current_value
 
@@ -138,7 +155,16 @@ function M.set_text(self, input_text)
 		self.marked_text_width = self.text:get_text_width(marked_value)
 		self.total_width = self.text_width + self.marked_text_width
 
-		self.text:set_to(value .. marked_value)
+		local final_text = value .. marked_value
+		self.text:set_to(final_text)
+
+		self.on_input_text:trigger(self:get_context(), final_text)
+		if #final_text == 0 then
+			self.on_input_empty:trigger(self:get_context(), final_text)
+		end
+		if self.max_length and #final_text == self.max_length then
+			self.on_input_full:trigger(self:get_context(), final_text)
+		end
 	end
 end
 
@@ -148,5 +174,4 @@ function M.get_text(self)
 end
 
 
-
 return M

druid/base/text.lua

@@ -194,4 +194,12 @@ function M.set_pivot(self, pivot)
 end
 
 
+--- Return true, if text with line break
+-- @function text:is_multiline
+-- @treturn boolean Is text node with line break
+function M.is_multiline(self)
+	return gui.get_line_break(self.node)
+end
+
+
 return M

druid/const.lua

@@ -10,6 +10,8 @@ M.ACTION_MARKED_TEXT = hash("marked_text")
 M.ACTION_BACKSPACE = hash("key_backspace")
 M.ACTION_ENTER = hash("key_enter")
 M.ACTION_BACK = hash("back")
+M.ACTION_SCROLL_UP = hash("scroll_up")
+M.ACTION_SCROLL_DOWN = hash("scroll_down")
 
 
 M.RELEASED = "released"

druid/styles/default/style.lua

@@ -15,7 +15,6 @@ M["button"] = {
 	LONGTAP_TIME = 0.4,
 	AUTOHOLD_TRIGGER = 0.8,
 	DOUBLETAP_TIME = 0.4,
-	IS_HOVER = true,
 
 	on_hover = function(self, node, state)
 		local scale_to = self.start_scale + M.button.HOVER_SCALE
@@ -51,6 +50,7 @@ M["scroll"] = {
 	INERT_SPEED = 25, -- koef. of inert speed
 	DEADZONE = 6, -- in px
 	SOFT_ZONE_SIZE = 160, -- size of outside zone (back move)
+	SCROLL_WHEEL_SPEED = 10,
 	BACK_SPEED = 0.2, -- lerp speed
 	ANIM_SPEED = 0.3, -- gui.animation speed to point
 }
@@ -82,4 +82,29 @@ M["swipe"] = {
 }
 
 
+M["input"] = {
+	BUTTON_SELECT_INCREASE = 1.1,
+	on_select = function(self)
+		local button = self.button.node
+		local target_scale = self.button.start_scale
+		gui.animate(button, "scale", target_scale * M.input.BUTTON_SELECT_INCREASE, gui.EASING_OUTSINE, 0.15)
+	end,
+	on_unselect = function(self)
+		local button = self.button.node
+		local start_scale = self.button.start_scale
+		gui.animate(button, "scale", start_scale, gui.EASING_OUTSINE, 0.15)
+	end,
+
+	button = {
+		BTN_SOUND = "click",
+		BTN_SOUND_DISABLED = "click",
+		DISABLED_COLOR = vmath.vector4(0, 0, 0, 1),
+		ENABLED_COLOR = vmath.vector4(1),
+		LONGTAP_TIME = 0.4,
+		AUTOHOLD_TRIGGER = 0.8,
+		DOUBLETAP_TIME = 0.4,
+	}
+}
+
+
 return M

druid/styles/empty/style.lua

@@ -8,7 +8,6 @@ M["button"] = {
 	ENABLED_COLOR = vmath.vector4(1),
 	LONGTAP_TIME = 0.4,
 	DOUBLETAP_TIME = 0.4,
-	IS_HOVER = false,
 }
 
 

example/gui/main/main.gui

@@ -3176,13 +3176,13 @@ nodes {
     w: 1.0
   }
   scale {
-    x: 0.4
+    x: 0.7
-    y: 0.4
+    y: 0.7
     z: 1.0
     w: 1.0
   }
   size {
-    x: 450.0
+    x: 250.0
     y: 80.0
     z: 0.0
     w: 1.0
@@ -3195,7 +3195,7 @@ nodes {
   }
   type: TYPE_TEXT
   blend_mode: BLEND_MODE_ALPHA
-  text: "Input text will be here"
+  text: "Hello"
   font: "game"
   id: "input_text"
   xanchor: XANCHOR_NONE
@@ -3214,7 +3214,7 @@ nodes {
     w: 1.0
   }
   adjust_mode: ADJUST_MODE_FIT
-  line_break: false
+  line_break: true
   parent: "input_box"
   layer: ""
   inherit_alpha: true

game.project

@@ -36,3 +36,6 @@ app_manifest = /example/game.appmanifest
 [graphics]
 texture_profiles = /example/custom.texture_profiles
 
+[android]
+package = com.insality.druid
+

input/game.input_binding

@@ -18,6 +18,14 @@ mouse_trigger {
   input: MOUSE_BUTTON_1
   action: "touch"
 }
+mouse_trigger {
+  input: MOUSE_WHEEL_UP
+  action: "scroll_up"
+}
+mouse_trigger {
+  input: MOUSE_WHEEL_DOWN
+  action: "scroll_down"
+}
 text_trigger {
   input: TEXT
   action: "text"