Merge pull request #2834 from ibdafna/drag_behaviour

ibdafna · web-flow · commit c7bd32948ba6 · 2021-09-17T09:44:49.000-07:00
Add dragging behaviour properties to sliders
diff --git a/docs/source/examples/Output Widget.ipynb b/docs/source/examples/Output Widget.ipynb
@@ -350,7 +350,7 @@
     "\n",
     "This always prints in the currently active cell, not the cell that started the background thread.\n",
     "\n",
-    "This can lead to surprising behaviour in output widgets. During the time in which output is captured by the output widget, *any* output generated in the notebook, regardless of thread, will go into the output widget.\n",
+    "This can lead to surprising behavior in output widgets. During the time in which output is captured by the output widget, *any* output generated in the notebook, regardless of thread, will go into the output widget.\n",
     "\n",
     "The best way to avoid surprises is to *never* use an output widget's context manager in a context where multiple threads generate output. Instead, we can pass an output widget to the function executing in a thread, and use `append_display_data()`, `append_stdout()`, or `append_stderr()` methods to append displayable output to the output widget."
    ]
diff --git a/docs/source/examples/Widget Styling.ipynb b/docs/source/examples/Widget Styling.ipynb
@@ -336,7 +336,7 @@
     "\n",
     "#### align-items\n",
     "\n",
-    "`align-items` can be one of `flex-start`, `flex-end`, `center`, `baseline`, `stretch`. This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).\n",
+    "`align-items` can be one of `flex-start`, `flex-end`, `center`, `baseline`, `stretch`. This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).\n",
     "   ![Items](./images/align-items.svg)\n",
     "   \n",
     "#### align-content\n",
diff --git a/ipywidgets/widgets/widget_float.py b/ipywidgets/widgets/widget_float.py
@@ -159,6 +159,8 @@ class FloatSlider(_BoundedFloat):
         default is 'horizontal', orientation of the slider
     readout : {True, False}
         default is True, display the current value of the slider next to it
+    behavior : str
+        slider handle and connector dragging behavior. Default is 'drag-tap'.
     readout_format : str
         default is '.2f', specifier for the format function used to represent
         slider value for human consumption, modeled after Python 3's format
@@ -174,8 +176,9 @@ class FloatSlider(_BoundedFloat):
         '.2f', help="Format for the readout").tag(sync=True)
     continuous_update = Bool(True, help="Update the value of the widget as the user is holding the slider.").tag(sync=True)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
-
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)
 
 
 @register
@@ -200,6 +203,8 @@ class FloatLogSlider(_BoundedLogFloat):
         default is 'horizontal', orientation of the slider
     readout : {True, False}
         default is True, display the current value of the slider next to it
+    behavior : str
+        slider handle and connector dragging behavior. Default is 'drag-tap'.
     readout_format : str
         default is '.3g', specifier for the format function used to represent
         slider value for human consumption, modeled after Python 3's format
@@ -216,8 +221,9 @@ class FloatLogSlider(_BoundedLogFloat):
     continuous_update = Bool(True, help="Update the value of the widget as the user is holding the slider.").tag(sync=True)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
     base = CFloat(10., help="Base for the logarithm").tag(sync=True)
-
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)
 
 
 @register
@@ -343,6 +349,8 @@ class FloatRangeSlider(_BoundedFloatRange):
         default is 'horizontal'
     readout : {True, False}
         default is True, display the current value of the slider next to it
+    behavior : str
+        slider handle and connector dragging behavior. Default is 'drag-tap'.
     readout_format : str
         default is '.2f', specifier for the format function used to represent
         slider value for human consumption, modeled after Python 3's format
@@ -358,5 +366,6 @@ class FloatRangeSlider(_BoundedFloatRange):
         '.2f', help="Format for the readout").tag(sync=True)
     continuous_update = Bool(True, help="Update the value of the widget as the user is sliding the slider.").tag(sync=True)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
-
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)
diff --git a/ipywidgets/widgets/widget_int.py b/ipywidgets/widgets/widget_int.py
@@ -34,6 +34,8 @@
     The upper limit for the value.
 step: integer
     The step between allowed values.
+behavior : str
+    slider handle and connector dragging behavior. Default is 'drag-tap'.
 """
 
 def _int_doc(cls):
@@ -165,8 +167,9 @@ class IntSlider(_BoundedInt):
         'd', help="Format for the readout").tag(sync=True)
     continuous_update = Bool(True, help="Update the value of the widget as the user is holding the slider.").tag(sync=True)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
-
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)
 
 
 @register
@@ -289,6 +292,20 @@ class IntRangeSlider(_BoundedIntRange):
         The lowest allowed value for `lower`
     max : int
         The highest allowed value for `upper`
+    step : int
+        step of the trackbar
+    description : str
+        name of the slider
+    orientation : {'horizontal', 'vertical'}
+        default is 'horizontal'
+    readout : {True, False}
+        default is True, display the current value of the slider next to it
+    behavior : str
+        slider handle and connector dragging behavior. Default is 'drag-tap'.
+    readout_format : str
+        default is '.2f', specifier for the format function used to represent
+        slider value for human consumption, modeled after Python 3's format
+        specification mini-language (PEP 3101).
     """
     _view_name = Unicode('IntRangeSliderView').tag(sync=True)
     _model_name = Unicode('IntRangeSliderModel').tag(sync=True)
@@ -301,3 +318,5 @@ class IntRangeSlider(_BoundedIntRange):
     continuous_update = Bool(True, help="Update the value of the widget as the user is sliding the slider.").tag(sync=True)
     style = InstanceDict(SliderStyle, help="Slider style customizations.").tag(sync=True, **widget_serialization)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)
diff --git a/ipywidgets/widgets/widget_selection.py b/ipywidgets/widgets/widget_selection.py
@@ -573,6 +573,8 @@ class SelectionSlider(_SelectionNonempty):
         help="Display the current selected label next to the slider").tag(sync=True)
     continuous_update = Bool(True,
         help="Update the value of the widget as the user is holding the slider.").tag(sync=True)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)
 
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
 
@@ -627,3 +629,5 @@ def _validate_index(self, proposal):
         help="Update the value of the widget as the user is holding the slider.").tag(sync=True)
 
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)
diff --git a/packages/controls/src/widget_float.ts b/packages/controls/src/widget_float.ts
@@ -147,8 +147,11 @@ export class FloatLogSliderView extends BaseIntSliderView {
 
   createSlider(): void {
     const orientation = this.model.get('orientation');
+    const behavior = this.model.get('behavior');
+
     noUiSlider.create(this.$slider, {
       start: this.logCalc(this.model.get('value')),
+      behaviour: behavior,
       range: {
         min: this.model.get('min'),
         max: this.model.get('max'),
diff --git a/packages/controls/src/widget_int.ts b/packages/controls/src/widget_int.ts
@@ -203,9 +203,12 @@ export abstract class BaseIntSliderView extends DescriptionView {
    */
   createSlider(): void {
     const orientation = this.model.get('orientation');
+    const behavior = this.model.get('behavior');
+
     noUiSlider.create(this.$slider, {
       start: this.model.get('value'),
       connect: true,
+      behaviour: behavior,
       range: {
         min: this.model.get('min'),
         max: this.model.get('max'),
diff --git a/packages/controls/src/widget_selection.ts b/packages/controls/src/widget_selection.ts
@@ -746,10 +746,12 @@ export class SelectionSliderView extends DescriptionView {
     const min = 0;
     const max = labels.length - 1;
     const orientation = this.model.get('orientation');
+    const behavior = this.model.get('behavior');
 
     noUiSlider.create(this.$slider, {
       start: this.model.get('index'),
       connect: true,
+      behaviour: behavior,
       range: {
         min: min,
         max: max,
diff --git a/packages/schema/jupyterwidgetmodels.latest.md b/packages/schema/jupyterwidgetmodels.latest.md
@@ -509,6 +509,7 @@ Attribute        | Type             | Default          | Help
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'FloatLogSliderView'` | 
 `base`           | number (float)   | `10.0`           | Base for the logarithm
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is holding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -559,6 +560,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'FloatRangeSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is sliding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -586,6 +588,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'FloatSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is holding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -807,6 +810,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'IntRangeSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is sliding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -834,6 +838,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'IntSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is holding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -1112,6 +1117,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'SelectionRangeSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is holding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -1136,6 +1142,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'SelectionSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is holding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.

Original file line number	Diff line number	Diff line change
`@@ -350,7 +350,7 @@`
`350`	`350`	`"\n",`
`351`	`351`	`"This always prints in the currently active cell, not the cell that started the background thread.\n",`
`352`	`352`	`"\n",`
`353`		`- "This can lead to surprising behaviour in output widgets. During the time in which output is captured by the output widget, any output generated in the notebook, regardless of thread, will go into the output widget.\n",`
	`353`	`+ "This can lead to surprising behavior in output widgets. During the time in which output is captured by the output widget, any output generated in the notebook, regardless of thread, will go into the output widget.\n",`
`354`	`354`	`"\n",`
`355`	`355`	"The best way to avoid surprises is to never use an output widget's context manager in a context where multiple threads generate output. Instead, we can pass an output widget to the function executing in a thread, and use `append_display_data()`, `append_stdout()`, or `append_stderr()` methods to append displayable output to the output widget."
`356`	`356`	`]`