Solve #44 Add slider drag not only by pin, but can additional add input zone

druid/extended/slider.lua

@@ -94,6 +94,17 @@ function Slider.on_input(self, action_id, action)
 		end
 	end
 
+	if not self.is_drag and self._input_node and gui.pick_node(self._input_node, action.x, action.y) then
+		if action.pressed and gui.screen_to_local then
+			self.pos = gui.screen_to_local(self.node, vmath.vector3(action.screen_x, action.screen_y, 0))
+			self.pos.x = helper.clamp(self.pos.x, self.start_pos.x, self.end_pos.x)
+			self.pos.y = helper.clamp(self.pos.y, self.start_pos.y, self.end_pos.y)
+
+			gui.set_position(self.node, self.pos)
+			self.is_drag = true
+		end
+	end
+
 	if self.is_drag and not action.pressed then
 		-- move
 		self.pos.x = self.pos.x + action.dx
@@ -166,8 +177,23 @@ end
 -- @tparam Slider self @{Slider}
 -- @tparam number[] steps Array of steps
 -- @usage slider:set_steps({0, 0.2, 0.6, 1})
+-- @treturn Slider @{Slider}
 function Slider.set_steps(self, steps)
 	self.steps = steps
+	return self
+end
+
+
+--- Set input zone for slider.
+-- User can touch any place of node, pin instantly will
+-- move at this position and node drag will start.
+-- This function require the Defold version 1.3.0+
+-- @tparam Slider self @{Slider}
+-- @tparam input_node Node
+-- @treturn Slider @{Slider}
+function Slider.set_input_node(self, input_node)
+	self._input_node = self:get_node(input_node)
+	return self
 end
 
 

example/examples/general/sliders/sliders.gui

@@ -66,6 +66,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
 }
 nodes {
   position {
@@ -121,6 +122,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -176,6 +178,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -239,6 +242,63 @@ nodes {
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
+  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: 300.0
+    y: 45.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: "slider_input"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "slider_back_simple"
+  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 {
@@ -294,6 +354,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -349,6 +410,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -404,6 +466,7 @@ nodes {
   alpha: 0.5
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -459,6 +522,7 @@ nodes {
   alpha: 0.5
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -514,6 +578,7 @@ nodes {
   alpha: 0.5
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -569,6 +634,7 @@ nodes {
   alpha: 0.5
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -624,6 +690,7 @@ nodes {
   alpha: 0.5
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -679,6 +746,7 @@ nodes {
   alpha: 0.5
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -734,6 +802,7 @@ nodes {
   alpha: 0.5
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -789,6 +858,7 @@ nodes {
   alpha: 0.5
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -844,6 +914,7 @@ nodes {
   alpha: 0.5
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -899,6 +970,7 @@ nodes {
   alpha: 0.5
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -954,6 +1026,7 @@ nodes {
   alpha: 0.5
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -1009,6 +1082,7 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_AUTO
+  custom_type: 0
 }
 nodes {
   position {
@@ -1072,6 +1146,63 @@ nodes {
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
+  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: 300.0
+    y: 45.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: "slider_notched_input"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "slider_back_notched"
+  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
 }
 layers {
   name: "image"

example/examples/general/sliders/sliders.gui_script

@@ -9,6 +9,7 @@ function init(self)
 	end)
 
 	slider:set(0.2)
+	slider:set_input_node("slider_input")
 
 	local slider_notched = self.druid:new_slider("slider_notched_pin", vmath.vector3(95, 0, 0), function(_, value)
 		gui.set_text(gui.get_node("slider_notched_text"), math.ceil(value * 100) .. "%")
@@ -16,6 +17,7 @@ function init(self)
 
 	slider_notched:set_steps({0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1})
 	slider_notched:set(0.2)
+	slider_notched:set_input_node("slider_notched_input")
 end