Start scroll rework

alpha_todo.txt

@@ -10,11 +10,10 @@ Simple to-do for Druid Alpha 0.2.0
 + Druid store assets - separate repository with rich components (progress_rich migrate)
 + refactor on_swipe. To on_scroll? Add input priority
 + separate custom data and predefined fields in components? Every component have their fields and events
-- add init/remove stuff for every style in component. How to set custom sprites for button states?
++ How to set custom sprites for button states?
 - add druid settings (add auto_focus input and other stuff)
 
 + button add key trigger
-- button polish, actions
 + button and hover click restriction zone?
 
 - unify component api (get/set/to and other general stuff)
@@ -22,12 +21,13 @@ Simple to-do for Druid Alpha 0.2.0
 - better scroll size management, check different cases. So implicit now
 - better grid + scroll management
 - better default style, add template for custom style
-- add text component for alpha release
+- add input_text component for alpha release
 - compare with gooey
 - add docs for all components
 - add docs folder for every component with gifs? Solutions
 - remove component autoremove all children component
 
+- button polish, actions
 
 -- Low
 - add code template and example for user components

druid/base/scroll.lua

@@ -14,6 +14,19 @@ local M = component.create("scroll", { const.ON_UPDATE, const.ON_INPUT_HIGH })
 M.current_scroll = nil
 
 
+local function get_border(node)
+	local pivot = gui.get_pivot(node)
+	local pivot_offset = helper.get_pivot_offset(pivot)
+	local size = vmath.mul_per_elem(gui.get_size(node), gui.get_scale(node))
+	return vmath.vector4(
+		-size.x*(0.5 + pivot_offset.x),
+		size.y*(0.5 + pivot_offset.y),
+		size.x*(0.5 - pivot_offset.x),
+		-size.y*(0.5 - pivot_offset.y)
+	)
+end
+
+
 function M.init(self, scroll_parent, input_zone, border)
 	self.style = self:get_style()
 	self.node = self:get_node(scroll_parent)
@@ -30,8 +43,7 @@ function M.init(self, scroll_parent, input_zone, border)
 
 	self.is_inert = true
 	self.inert = vmath.vector3(0)
-	self.start_pos = gui.get_position(self.node)
+	self.pos = gui.get_position(self.node)
-	self.pos = self.start_pos
 	self.target = vmath.vector3(self.pos)
 
 	self.input = {
@@ -41,7 +53,14 @@ function M.init(self, scroll_parent, input_zone, border)
 		side = false,
 	}
 
-	self:set_border(border)
+	local input_border = get_border(self.input_zone)
+	local content_border = get_border(self.node)
+	self:set_border(vmath.vector4(
+		input_border.x - content_border.x,
+		-input_border.w + content_border.w,
+		input_border.z - content_border.z,
+		-input_border.y + content_border.y
+	))
 
 	self.on_scroll = Event()
 	self.on_scroll_to = Event()
@@ -69,13 +88,13 @@ local function check_soft_target(self)
 	if t.y < b.y then
 		t.y = helper.step(t.y, b.y, math.abs(t.y - b.y) * self.style.BACK_SPEED)
 	end
-	if t.x < b.x then
+	if t.x > b.x then
 		t.x = helper.step(t.x, b.x, math.abs(t.x - b.x) * self.style.BACK_SPEED)
 	end
 	if t.y > b.w then
 		t.y = helper.step(t.y, b.w, math.abs(t.y - b.w) * self.style.BACK_SPEED)
 	end
-	if t.x > b.z then
+	if t.x < b.z then
 		t.x = helper.step(t.x, b.z, math.abs(t.x - b.z) * self.style.BACK_SPEED)
 	end
 end
@@ -229,10 +248,10 @@ local function add_delta(self, dx, dy)
 	local x_perc = 1
 	local y_perc = 1
 
-	if t.x < b.x and dx < 0 then
+	if t.x > b.x and dx < 0 then
 		x_perc = (soft - (b.x - t.x)) / soft
 	end
-	if t.x > b.z and dx > 0 then
+	if t.x < b.z and dx > 0 then
 		x_perc = (soft - (t.x - b.z)) / soft
 	end
 	-- If disabled scroll by x
@@ -414,15 +433,11 @@ end
 -- @tparam table self Component instance
 -- @tparam vmath.vector3 border Size of scrolling area
 function M.set_border(self, border)
+	-- border.x - min content.x node pos
+	-- border.y - min content.y node pos
+	-- border.z - max content.x node pos
+	-- border.w - max content.y node pos
 	self.border = border
-
-	self.border.x = self.border.x + self.start_pos.x
-	self.border.z = self.border.z + self.start_pos.x
-	self.border.y = self.border.y + self.start_pos.y
-	self.border.w = self.border.w + self.start_pos.y
-
-	border.z = math.max(border.x, border.z)
-	border.w = math.max(border.y, border.w)
 	self.can_x = (border.x ~= border.z)
 	self.can_y = (border.y ~= border.w)
 end

druid/styles/default/style.lua

@@ -7,7 +7,7 @@ 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),
+	SCALE_CHANGE = vmath.vector3(-0.05, -0.05, 1),
 	BTN_SOUND = "click",
 	BTN_SOUND_DISABLED = "click",
 	DISABLED_COLOR = vmath.vector4(0, 0, 0, 1),

example/kenney/gui/main/main.gui

@@ -198,7 +198,7 @@ nodes {
   }
   size {
     x: 600.0
-    y: 900.0
+    y: 1250.0
     z: 0.0
     w: 1.0
   }
@@ -5015,8 +5015,8 @@ nodes {
     w: 1.0
   }
   size {
-    x: 1.0
+    x: 600.0
-    y: 1.0
+    y: 900.0
     z: 0.0
     w: 1.0
   }
@@ -5043,12 +5043,374 @@ nodes {
     z: 0.0
     w: 0.0
   }
+  clipping_mode: CLIPPING_MODE_STENCIL
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+nodes {
+  position {
+    x: 0.0
+    y: 150.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: 600.0
+    y: 300.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/empty"
+  id: "simple_scroll_input"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "scroll_page"
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_STENCIL
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+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: 1200.0
+    y: 300.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.5019608
+    y: 0.4
+    z: 0.8
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "simple_scroll_content"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "simple_scroll_input"
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
   clipping_mode: CLIPPING_MODE_NONE
   clipping_visible: true
   clipping_inverted: false
   alpha: 1.0
   template_node_child: false
-  size_mode: SIZE_MODE_AUTO
+  size_mode: SIZE_MODE_MANUAL
+}
+nodes {
+  position {
+    x: -489.0
+    y: 91.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_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "Hello!"
+  font: "game"
+  id: "content1"
+  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
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "simple_scroll_content"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+nodes {
+  position {
+    x: 220.0
+    y: 71.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_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "Hello!"
+  font: "game"
+  id: "content4"
+  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
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "simple_scroll_content"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+nodes {
+  position {
+    x: -128.0
+    y: -54.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_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "Hello!"
+  font: "game"
+  id: "content2"
+  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
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "simple_scroll_content"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+nodes {
+  position {
+    x: 466.0
+    y: -73.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_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "Hello!"
+  font: "game"
+  id: "content3"
+  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
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "simple_scroll_content"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
 }
 nodes {
   position {

example/kenney/gui/main/main.gui_script

@@ -42,7 +42,7 @@ function init(self)
 	self.druid = druid.new(self)
 
 	init_top_panel(self)
-	self.page = 3
+	self.page = 1
 	main_page.setup_page(self)
 	text_page.setup_page(self)
 	button_page.setup_page(self)

example/kenney/page/main.lua

@@ -96,7 +96,7 @@ end
 
 
 local function setup_scroll(self)
-	self.scroll = self.druid:new_scroll("scroll_content", "main_page", vmath.vector4(0, 0, 0, 200))
+	self.scroll = self.druid:new_scroll("scroll_content", "main_page")
 end
 
 

example/kenney/page/scroll.lua

@@ -2,6 +2,7 @@ local M = {}
 
 
 function M.setup_page(self)
+	self.druid:new_scroll("simple_scroll_content", "simple_scroll_input")
 end