Handle dynamic list stencil size change

Fixes #39
britzl · Jul 3, 2022 · 683e2de · 683e2de
1 parent 4bb8b73
commit 683e2de
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 3 deletions.
diff --git a/example/dynamiclist.gui b/example/dynamiclist.gui
@@ -62,6 +62,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
 }
 nodes {
   position {
@@ -117,6 +118,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
 }
 nodes {
   position {
@@ -172,6 +174,7 @@ nodes {
   alpha: 0.0
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
 }
 nodes {
   position {
@@ -227,6 +230,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
 }
 nodes {
   position {
@@ -290,6 +294,7 @@ nodes {
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
+  custom_type: 0
 }
 nodes {
   position {
@@ -345,6 +350,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
 }
 nodes {
   position {
@@ -399,6 +405,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
 }
 nodes {
   position {
@@ -462,6 +469,7 @@ nodes {
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
+  custom_type: 0
 }
 nodes {
   position {
@@ -516,6 +524,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
 }
 nodes {
   position {
@@ -571,6 +580,126 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+}
+nodes {
+  position {
+    x: 514.0
+    y: 1096.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: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.3019608
+    y: 0.3019608
+    z: 0.3019608
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "resize_button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  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_MANUAL
+  custom_type: 0
+}
+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: 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: "RESIZE"
+  font: "example"
+  id: "resize_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: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "resize_button"
+  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
+  custom_type: 0
 }
 layers {
   name: "below"

diff --git a/example/dynamiclist.gui_script b/example/dynamiclist.gui_script
@@ -4,7 +4,6 @@ local image_cache = require "gooey.image_cache"
 local cache = image_cache.create()
 
 local function refresh_dynamiclist(list)
-	print("refrehs", list.over_item)
 	for _,item in ipairs(list.items) do
 		local pos = gui.get_position(item.root)
 		if item == list.selected_item then
@@ -44,6 +43,11 @@ function init(self)
 		{ text = "Light grey", color = "ddd" },
 		{ text = "White", color = "fff" },
 		{ text = "Black", color = "000" },
+		{ text = "Salmon", color = "f87" },
+		{ text = "Pink", color = "fcc" },
+		{ text = "Coral", color = "f75" },
+		{ text = "Lavender", color = "eef" },
+		{ text = "Magenta", color = "f0f" },
 	}
 
 	gooey.dynamic_list("dynamiclist_bg", "dynamiclist_stencil", "listitem_bg", self.list_data, nil, nil, nil, nil, refresh_dynamiclist)
@@ -58,6 +62,18 @@ function on_input(self, action_id, action)
 		msg.post("controller:/go", "show_menu")
 	end)
 
+	gooey.button("resize_button", action_id, action, function(button)
+		local height = math.random(300, 600)
+		local bg = gui.get_node("dynamiclist_bg")
+		local stencil = gui.get_node("dynamiclist_stencil")
+		local bg_size = gui.get_size(bg)
+		local stencil_size = gui.get_size(stencil)
+		bg_size.y = height
+		stencil_size.y = height * 0.95
+		gui.set_size(bg, bg_size)
+		gui.set_size(stencil, stencil_size)
+	end)
+
 	local list = gooey.dynamic_list("dynamiclist_bg", "dynamiclist_stencil", "listitem_bg", self.list_data, action_id, action, nil, function(list)
 		print("selected dynamic list item", list.selected_item.index, list.data[list.selected_item.index].text)
 	end, refresh_dynamiclist)

diff --git a/gooey/internal/list.lua b/gooey/internal/list.lua
@@ -299,7 +299,22 @@ function M.dynamic(list_id, stencil_id, item_id, data, action_id, action, config
 	list.carousel = config and config.carousel
 	list.data = data
 
-	-- create list items (once!)
+	-- detect a change in size of the stencil
+	-- if it has changed we delete the nodes and then recreate
+	local stencil_size = gui.get_size(list.stencil)
+	if stencil_size.x ~= list.stencil_size.x
+	or stencil_size.y ~= list.stencil_size.y then
+		list.stencil_size = stencil_size
+		if list.items then
+			for i=1,#list.items do
+				local item = list.items[i]
+				gui.delete_node(item.root)
+			end
+			list.items = nil
+		end
+	end
+
+	-- create list items
 	if not list.items then
 		item_id = core.to_hash(item_id)
 		local item_node = gui.get_node(item_id)
@@ -317,6 +332,7 @@ function M.dynamic(list_id, stencil_id, item_id, data, action_id, action, config
 		else
 			item_count = (math.ceil(list.stencil_size.y / item_size.y) + 1)
 		end
+		gui.set_enabled(item_node, true)
 		for i=1,item_count do
 			local nodes = gui.clone_tree(item_node)
 			list.items[i] = {
@@ -334,7 +350,7 @@ function M.dynamic(list_id, stencil_id, item_id, data, action_id, action, config
 			end
 			gui.set_position(list.items[i].root, pos)
 		end
-		gui.delete_node(item_node)
+		gui.set_enabled(item_node, false)
 	end
 
 	-- recalculate size of list if the amount of data has changed