Scroll progress. Previous API returing in process

druid/base/drag.lua

@@ -136,6 +136,13 @@ function M.init(self, node, on_drag_callback)
 end
 
 
+function M.on_input_interrupt(self)
+	if self.is_drag or self.is_touch then
+		end_touch(self)
+	end
+end
+
+
 function M.on_input(self, action_id, action)
 	if action_id ~= const.ACTION_TOUCH and action_id ~= const.ACTION_MULTITOUCH then
 		return

druid/base/scroll.lua

@@ -18,10 +18,15 @@ local component = require("druid.component")
 local M = component.create("scroll", { const.ON_UPDATE })
 
 
+local function inverse_lerp(min, max, current)
+	return helper.clamp((current - min) / (max - min), 0, 1)
+end
+
+
 local function on_scroll_drag(self, dx, dy)
-	dy = -dy
 	local t = self.target_pos
-	local b = self.available_soft_pos
+	local b = self.available_pos
+	local eb = self.available_pos_extra
 	local extra_size = self.style.EXTRA_STRECH_SIZE
 
 	-- Handle soft zones
@@ -29,34 +34,40 @@ local function on_scroll_drag(self, dx, dy)
 	local x_perc = 1
 	local y_perc = 1
 
+	-- Right border (minimum x)
 	if t.x < b.x and dx < 0 then
-		x_perc = (-extra_size.x - (b.x - t.x)) / -extra_size.x
+		x_perc = inverse_lerp(eb.x, b.x, t.x)
 	end
+	-- Left border (maximum x)
 	if t.x > b.z and dx > 0 then
-		x_perc = (extra_size.z - (t.x - b.z)) / extra_size.z
+		x_perc = inverse_lerp(eb.z, b.z, t.x)
 	end
-	-- If disabled scroll by x
+	-- Disable x scroll
 	if not self.can_x then
 		x_perc = 0
 	end
 
-	if t.y > b.y and dy < 0 then
+	-- Top border (minimum y)
-		y_perc = (extra_size.y - (t.y - b.y)) / extra_size.y
+	if t.y < b.y and dy < 0 then
+		y_perc = inverse_lerp(eb.y, b.y, t.y)
 	end
-	if t.y < b.w and dy > 0 then
+	-- Bot border (maximum y)
-		y_perc = (-extra_size.w - (b.w - t.y)) / -extra_size.w
+	if t.y > b.w and dy > 0 and extra_size > 0 then
+		y_perc = inverse_lerp(eb.w, b.w, t.y)
 	end
-	-- If disabled scroll by y
 	if not self.can_y then
 		y_perc = 0
 	end
 
 	t.x = t.x + dx * x_perc
-	t.y = t.y - dy * y_perc
+	t.y = t.y + dy * y_perc
 end
 
 
 local function set_pos(self, position)
+	position.x = helper.clamp(position.x, self.available_pos_extra.x, self.available_pos_extra.z)
+	position.y = helper.clamp(position.y, self.available_pos_extra.w, self.available_pos_extra.y)
+
 	if self.current_pos.x ~= position.x or self.current_pos.y ~= position.y then
 		self.current_pos.x = position.x
 		self.current_pos.y = position.y
@@ -80,44 +91,117 @@ end
 
 local function check_soft_zone(self)
 	local t = self.target_pos
-	local b = self.available_soft_pos
+	local b = self.available_pos
 
-	if t.y > b.y then
+	-- Right border (minimum x)
-		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
 		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
+	-- Left border (maximum x)
-		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
 		t.x = helper.step(t.x, b.z, math.abs(t.x - b.z) * self.style.BACK_SPEED)
 	end
+	-- Top border (maximum y)
+	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
+	-- Bot border (minimum y)
+	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
+end
+
+
+--- Find closer point of interest
+-- if no inert, scroll to next point by scroll direction
+-- if inert, find next point by scroll director
+-- @local
+local function check_points(self)
+	if not self.points then
+		return
+	end
+
+	local inert = self.inertion
+	if not self.is_inert then
+		if math.abs(inert.x) > self.style.DEADZONE then
+			self:scroll_to_index(self.selected - helper.sign(inert.x))
+			return
+		end
+		if math.abs(inert.y) > self.style.DEADZONE then
+			self:scroll_to_index(self.selected + helper.sign(inert.y))
+			return
+		end
+	end
+
+	-- Find closest point and point by scroll direction
+	-- Scroll to one of them (by scroll direction in priority)
+
+	local temp_dist = math.huge
+	local temp_dist_on_inert = math.huge
+	local index = false
+	local index_on_inert = false
+	local pos = self.current_pos
+	for i = 1, #self.points do
+		local p = self.points[i]
+		local dist = helper.distance(pos.x, pos.y, p.x, p.y)
+		local on_inert = true
+		-- If inert ~= 0, scroll only by move direction
+		if inert.x ~= 0 and helper.sign(inert.x) ~= helper.sign(p.x - pos.x) then
+			on_inert = false
+		end
+		if inert.y ~= 0 and helper.sign(inert.y) ~= helper.sign(p.y - pos.y) then
+			on_inert = false
+		end
+
+		if dist < temp_dist then
+			index = i
+			temp_dist = dist
+		end
+		if on_inert and dist < temp_dist_on_inert then
+			index_on_inert = i
+			temp_dist_on_inert = dist
+		end
+	end
+
+	self:scroll_to_index(index_on_inert or index)
 end
 
 
 local function check_threshold(self)
-	if math.abs(self.inertion.x) < self.style.INERT_THRESHOLD then
+	local is_stopped = false
+
+	if self.inertion.x ~= 0 and math.abs(self.inertion.x) < self.style.INERT_THRESHOLD then
+		is_stopped = true
 		self.inertion.x = 0
 	end
-	if math.abs(self.inertion.y) < self.style.INERT_THRESHOLD then
+	if self.inertion.y ~= 0 and math.abs(self.inertion.y) < self.style.INERT_THRESHOLD then
+		is_stopped = true
 		self.inertion.y = 0
 	end
+
+	if is_stopped or not self.inert then
+		if self.points then
+			print("check points free inert?")
+		end
+		check_points(self)
+	end
 end
 
 
 local function update_free_scroll(self, dt)
 	local target = self.target_pos
 
-	-- Inertion apply
+	if self.is_inert and (self.inertion.x ~= 0 or self.inertion.y ~= 0) then
-	target.x = self.current_pos.x + self.inertion.x * self.style.INERT_SPEED * dt
+		-- Inertion apply
-	target.y = self.current_pos.y + self.inertion.y * self.style.INERT_SPEED * dt
+		target.x = self.current_pos.x + self.inertion.x * self.style.INERT_SPEED * dt
+		target.y = self.current_pos.y + self.inertion.y * self.style.INERT_SPEED * dt
+
+		check_threshold(self)
+	end
 
 	-- Inertion friction
 	self.inertion = self.inertion * self.style.FRICT
 
-	check_threshold(self)
 	check_soft_zone(self)
 	set_pos(self, target)
 end
@@ -131,48 +215,92 @@ local function on_touch_start(self)
 end
 
 
-local function update_size(self)
+local function on_touch_end(self)
-	self.view_size = helper.get_border(self.view_node)
+	check_threshold(self)
-	self.content_soft_size = helper.get_border(self.content_node)
+end
 
-	self.available_soft_pos = vmath.vector4(
+
-		self.content_soft_size.x - self.view_size.x,
+local function update_size(self)
-		self.content_soft_size.y - self.view_size.y,
+	self.view_border = helper.get_border(self.view_node)
-		self.content_soft_size.z - self.view_size.z,
+	self.view_size = vmath.mul_per_elem(gui.get_size(self.view_node),
-		self.content_soft_size.w - self.view_size.w
+		gui.get_scale(self.view_node))
+
+	self.content_border = helper.get_border(self.content_node)
+	self.content_size = vmath.mul_per_elem(gui.get_size(self.content_node),
+		gui.get_scale(self.content_node))
+
+	--== AVAILABLE POSITION
+	-- (min_x, min_y, max_x, max_y)
+	self.available_pos = vmath.vector4(
+		self.view_border.x - self.content_border.x,
+		self.view_border.y - self.content_border.y,
+		self.view_border.z - self.content_border.z,
+		self.view_border.w - self.content_border.w
 	)
 
-	self.can_x = math.abs(self.available_soft_pos.x - self.available_soft_pos.z) > 0
+	if self.available_pos.x > self.available_pos.z then
-	self.can_y = math.abs(self.available_soft_pos.y - self.available_soft_pos.w) > 0
+		self.available_pos.x, self.available_pos.z = self.available_pos.z, self.available_pos.x
+	end
+	if self.available_pos.y > self.available_pos.w then
+		self.available_pos.y, self.available_pos.w = self.available_pos.w, self.available_pos.y
+	end
+
+	self.available_size = vmath.vector3(
+		self.available_pos.z - self.available_pos.x,
+		self.available_pos.w - self.available_pos.y,
+	0)
+
+	self.can_x = math.abs(self.available_pos.x - self.available_pos.z) > 0
+	self.can_y = math.abs(self.available_pos.y - self.available_pos.w) > 0
 
 	self.drag.can_x = self.can_x
 	self.drag.can_y = self.can_y
 
-	self.content_size = helper.get_border(self.content_node)
 
+	--== EXTRA CONTENT SIZE
+	self.content_size_extra = helper.get_border(self.content_node)
 	if self.can_x then
-		self.content_size.x = self.content_size.x + self.style.EXTRA_STRECH_SIZE.x
+		local sign = self.content_size.x > self.view_size.x and 1 or -1
-		self.content_size.z = self.content_size.z + self.style.EXTRA_STRECH_SIZE.z
+		self.content_size_extra.x = self.content_size_extra.x - self.style.EXTRA_STRECH_SIZE * sign
+		self.content_size_extra.z = self.content_size_extra.z + self.style.EXTRA_STRECH_SIZE * sign
 	end
 
 	if self.can_y then
-		self.content_size.y = self.content_size.y + self.style.EXTRA_STRECH_SIZE.y
+		local sign = self.content_size.y > self.view_size.y and 1 or -1
-		self.content_size.w = self.content_size.w + self.style.EXTRA_STRECH_SIZE.w
+		self.content_size_extra.y = self.content_size_extra.y + self.style.EXTRA_STRECH_SIZE * sign
+		self.content_size_extra.w = self.content_size_extra.w - self.style.EXTRA_STRECH_SIZE * sign
 	end
 
-	self.available_pos = vmath.vector4(
+	self.available_pos_extra = vmath.vector4(
-		self.content_size.x - self.view_size.x,
+		self.view_border.x - self.content_size_extra.x,
-		self.content_size.y - self.view_size.y,
+		self.view_border.y - self.content_size_extra.y,
-		self.content_size.z - self.view_size.z,
+		self.view_border.z - self.content_size_extra.z,
-		self.content_size.w - self.view_size.w
+		self.view_border.w - self.content_size_extra.w
 	)
+	if self.available_pos_extra.x > self.available_pos_extra.z then
+		self.available_pos_extra.x, self.available_pos_extra.z = self.available_pos_extra.z, self.available_pos_extra.x
+	end
+	if self.available_pos_extra.y > self.available_pos_extra.w then
+		self.available_pos_extra.y, self.available_pos_extra.w = self.available_pos_extra.w, self.available_pos_extra.y
+	end
 
-	print("view", self.view_size)
+	self.available_size_extra = vmath.vector3(
-	print("soft size", self.content_soft_size)
+		self.available_pos_extra.z - self.available_pos_extra.x,
-	print("content size", self.content_size)
+		self.available_pos_extra.w - self.available_pos_extra.y,
-	print(self.can_x, self.can_y)
+	0)
-	print("available pos", self.available_pos)
+	--== END CONTENT EXTRA
-	print("current pos", self.current_pos)
+
+	-- print("VIEW BORDER", self.view_border)
+	-- print("CONTENT BORDER", self.content_border)
+	-- print("AVAILABLE POS", self.available_pos)
+	-- print("CURRENT POS", self.current_pos)
+	-- print("VIEW_SIZE", self.view_size)
+	-- print("CONTENT_SIZE", self.content_size)
+	-- print("AVAILABLE_SIZE", self.available_size)
+
+	-- print("CONTENT SIZE EXTRA", self.content_size_extra)
+	-- print("AVAILABLE POS EXTRA", self.available_pos_extra)
+	-- print("")
 end
 
 
@@ -199,18 +327,20 @@ function M.init(self, view_zone, content_zone)
 	self.view_node = self:get_node(view_zone)
 	self.content_node = self:get_node(content_zone)
 
-
 	self.current_pos = gui.get_position(self.content_node)
 	self.target_pos = vmath.vector3(self.current_pos)
 	self.inertion = vmath.vector3(0)
 
 	self.drag = self.druid:new_drag(view_zone, on_scroll_drag)
 	self.drag.on_touch_start:subscribe(on_touch_start)
+	self.drag.on_touch_end:subscribe(on_touch_end)
 
 	self.on_scroll = Event()
 	self.on_scroll_to = Event()
 	self.on_point_scroll = Event()
 
+	self.is_inert = true
+
 	update_size(self)
 end
 
@@ -237,22 +367,22 @@ end
 -- @usage scroll:scroll_to(vmath.vector3(0, 50, 0))
 -- @usage scroll:scroll_to(vmath.vector3(0), true)
 function M.scroll_to(self, point, is_instant)
-	local b = self.border
+	local b = self.available_pos
 	local target = vmath.vector3(point)
-	target.x = helper.clamp(point.x - self.center_offset.x, b.x, b.z)
+	target.x = helper.clamp(point.x, b.x, b.z)
-	target.y = helper.clamp(point.y - self.center_offset.y, b.y, b.w)
+	target.y = helper.clamp(point.y, b.y, b.w)
 
 	cancel_animate(self)
 
 	self.animate = not is_instant
 
 	if is_instant then
-		self.target = target
+		self.target_pos = target
 		set_pos(self, target)
 	else
-		gui.animate(self.node, gui.PROP_POSITION, target, gui.EASING_OUTSINE, self.style.ANIM_SPEED, 0, function()
+		gui.animate(self.content_node, gui.PROP_POSITION, target, gui.EASING_OUTSINE, self.style.ANIM_SPEED, 0, function()
 			self.animate = false
-			self.target = target
+			self.target_pos = target
 			set_pos(self, target)
 		end)
 	end
@@ -261,8 +391,28 @@ function M.scroll_to(self, point, is_instant)
 end
 
 
+--- Scroll to item in scroll by point index
+-- @function scroll:scroll_to_index
+-- @tparam number index Point index
+-- @tparam[opt] bool skip_cb If true, skip the point callback
+function M.scroll_to_index(self, index, skip_cb)
+	index = helper.clamp(index, 1, #self.points)
+
+	if self.selected ~= index then
+		self.selected = index
+
+		if not skip_cb then
+			self.on_point_scroll:trigger(self:get_context(), index, self.points[index])
+		end
+	end
+
+	self:scroll_to(self.points[index])
+end
+
+
+
 function M.scroll_to_percent(self, percent, is_instant)
-	local border = self.border
+	local border = self.available_pos
 
 	local size_x = math.abs(border.z - border.x)
 	if size_x == 0 then
@@ -282,14 +432,50 @@ end
 
 
 function M.get_percent(self)
-	local y_dist = self.available_soft_pos.y - self.available_soft_pos.w
+	local y_dist = self.available_size.y
-	local y_perc = y_dist ~= 0 and (self.current_pos.y - self.available_soft_pos.w) / y_dist or 1
+	local y_perc = y_dist ~= 0 and (self.current_pos.y - self.available_pos.w) / y_dist or 1
 
-	local x_dist = self.available_soft_pos.z - self.available_soft_pos.x
+	local x_dist = self.available_size.x
-	local x_perc = x_dist ~= 0 and (self.current_pos.x - self.available_soft_pos.z) / x_dist or 1
+	local x_perc = x_dist ~= 0 and (self.current_pos.x - self.available_pos.z) / x_dist or 1
 
 	return vmath.vector3(x_perc, y_perc, 0)
 end
 
 
+--- Enable or disable scroll inert.
+-- If disabled, scroll through points (if exist)
+-- If no points, just simple drag without inertion
+-- @function scroll:set_inert
+-- @tparam bool state Inert scroll state
+function M.set_inert(self, state)
+	self.is_inert = state
+
+	return self
+end
+
+
+--- Set points of interest.
+-- Scroll will always centered on closer points
+-- @function scroll:set_points
+-- @tparam table points Array of vector3 points
+function M.set_points(self, points)
+	self.points = points
+	-- cause of parent move in other side by y
+	for i = 1, #self.points do
+		self.points[i].x = -self.points[i].x
+		self.points[i].y = -self.points[i].y
+	end
+
+	table.sort(self.points, function(a, b)
+		return a.x > b.x or a.y < b.y
+	end)
+
+	check_threshold(self)
+
+	pprint(self.points)
+
+	return self
+end
+
+
 return M

druid/helper.lua

@@ -168,15 +168,18 @@ function M.is_web()
 end
 
 
+--- Distance from node to size border
+-- @function helper.get_border
+-- @return vector4 (left, top, right, down)
 function M.get_border(node)
 	local pivot = gui.get_pivot(node)
 	local pivot_offset = M.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.x*(0.5 + pivot_offset.x),
-		size.y*(0.5 + pivot_offset.y),
+		size.y*(0.5 - pivot_offset.y),
-		size.x*(0.5 + pivot_offset.x),
+		size.x*(0.5 - pivot_offset.x),
-		-size.y*(0.5 - pivot_offset.y)
+		-size.y*(0.5 + pivot_offset.y)
 	)
 end
 

druid/styles/default/style.lua

@@ -51,6 +51,7 @@ M["drag"] = {
 M["scroll"] = {
 	ANIM_SPEED = 0.3, -- gui.animation speed to point
 	SCROLL_WHEEL_SPEED = 10,
+	DEADZONE = 20,
 
 	FRICT = 0.94, -- mult for free inert
 	FRICT_HOLD = 0.75, -- mult. for inert, while touching
@@ -59,7 +60,7 @@ M["scroll"] = {
 
 	BACK_SPEED = 0.35, -- Lerp speed of return to soft position
 
-	EXTRA_STRECH_SIZE = vmath.vector4(-100, 100, 100, -100), -- size of outside zone (back move)
+	EXTRA_STRECH_SIZE = 100, -- size of outside zone (back move)
 }
 
 

example/gui/main/main.gui

@@ -5362,7 +5362,7 @@ nodes {
   }
   size {
     x: 600.0
-    y: 1900.0
+    y: 2100.0
     z: 0.0
     w: 1.0
   }
@@ -6792,7 +6792,337 @@ nodes {
 nodes {
   position {
     x: 0.0
-    y: -1400.0
+    y: -1300.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: "scroll_with_points"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "scroll_page_content"
+  layer: "image"
+  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: -300.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: 2400.0
+    y: 300.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.9019608
+    y: 0.5019608
+    z: 0.3019608
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "scroll_with_points_content"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_W
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "scroll_with_points"
+  layer: "image"
+  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
+}
+nodes {
+  position {
+    x: 300.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: 500.0
+    y: 250.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.9019608
+    y: 0.7019608
+    z: 0.9019608
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "intereset_point_1"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "scroll_with_points_content"
+  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
+}
+nodes {
+  position {
+    x: 900.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: 500.0
+    y: 250.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 0.7019608
+    z: 0.7019608
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "intereset_point_2"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "scroll_with_points_content"
+  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
+}
+nodes {
+  position {
+    x: 1500.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: 500.0
+    y: 250.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 0.9019608
+    z: 0.7019608
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "intereset_point_3"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "scroll_with_points_content"
+  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
+}
+nodes {
+  position {
+    x: 2100.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: 500.0
+    y: 250.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 0.6
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "intereset_point_4"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "scroll_with_points_content"
+  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
+}
+nodes {
+  position {
+    x: 0.0
+    y: -1750.0
     z: 0.0
     w: 1.0
   }

example/page/scroll_page.lua

@@ -51,10 +51,10 @@ function M.setup_page(self)
 
 	self.druid:new_scroll("scroll_with_points", "scroll_with_points_content")
 		:set_points({
-			vmath.vector3(-300, 0, 0),
+			vmath.vector3(300, 0, 0),
-			vmath.vector3(-900, 0, 0),
+			vmath.vector3(900, 0, 0),
-			vmath.vector3(-1500, 0, 0),
+			vmath.vector3(1500, 0, 0),
-			vmath.vector3(-2100, 0, 0),
+			vmath.vector3(2100, 0, 0),
 		})
 
 	init_grid(self)