Update document

docs/docs/ui-scrollablepanel.md

@@ -15,6 +15,7 @@ A container with a panel, slider, and scroller.
 - [Scroll to child](https://codepen.io/rexrainbow/pen/ZEmWwaN)
 - [Drag item](https://codepen.io/rexrainbow/pen/yLRYqWe)
 - [Destory](https://codepen.io/rexrainbow/pen/rNvKdqg)
+- [XY sliders](https://codepen.io/rexrainbow/pen/VwVVyYV)
 
 ## Usage
 
@@ -141,6 +142,9 @@ var panel = scene.rexUI.add.scrollablePanel({
         // }
     },
 
+    // sliderX: {...},
+    // sliderY: {...},
+
     // scroller: {
     //     threshold: 10,
     //     slidingDeceleration: 5000,
@@ -149,13 +153,20 @@ var panel = scene.rexUI.add.scrollablePanel({
     //     dragRate: 1,
     // },
 
+    // scrollerX: {...},
+    // scrollerY: {...},
+
     mouseWheelScroller: false,
     // mouseWheelScroller: {
     //     focus: false,
     //     speed: 0.1
     // },
 
+    // mouseWheelScrollerX: {...},
+    // mouseWheelScrollerY: {...},
+
     clamplChildOY: false,
+    // clamplChildOX: false,
 
     header: headerGameObject,
     footer: footerGameObject,
@@ -181,6 +192,8 @@ var panel = scene.rexUI.add.scrollablePanel({
         //     left: 0,
         //     right: 0,
         // },
+        // sliderX: 0,
+        // sliderY: 0,
 
         header: 0,
         footer: 0,
@@ -217,6 +230,7 @@ var panel = scene.rexUI.add.scrollablePanel({
 - `scrollMode` : Scroll panel vertically, or horizontally.
     - `0`, `'vertical'`, or `'v'`, `'y'` : Scroll panel vertically. Default value.
     - `1`, `'horizontal'`, or `'h'`. `'x'` : Scroll panel horizontally.
+    - `2`, or `'xy'` : Two-sliders mode, scroll panel vertically and horizontally.
 - `background` : [Game object of background](ui-basesizer.md#background), optional. This background game object will be resized to fit the size of scroll-able panel.
 - `panel` : Configuration of panel game object.
     - `panel.child` : Panel game object.
@@ -295,6 +309,7 @@ var panel = scene.rexUI.add.scrollablePanel({
         - `slider.buttons.left`, `slider.buttons.right` : Left and right buttons
         - `slider.buttons.step` : Scrolling step in each tick. Default value is `0.01`.
     - Set to `false` to skip creating slider.
+- `sliderX`, `sliderY` : Componments of sliderX and sliderY, for two-sliders mode.
 - `scroller` : Configuration of scroller behavior.
     - `scroller.threshold` : Minimal movement to scroll. Set `0` to scroll immediately.
     - `scroller.slidingDeceleration` : Deceleration of slow down when dragging released.
@@ -304,13 +319,16 @@ var panel = scene.rexUI.add.scrollablePanel({
     - `scroller.pointerOutRelease` : Set to `true` to release input control when pointer out of gameObject.
     - `scroller.dragRate` : Rate of dragging distance/dragging speed. Default value is `1`.
     - Set to `false` to skip creating scroller.
+- `scrollerX`, `scrollerY` : Configuration of scrollerX, scrollerY behavior, for two-sliders mode.
 - `mouseWheelScroller` : Configuration of mouse-wheel-scroller behavior.
     - `mouseWheelScroller.focus` : 
         - `true` : Only scrolling when cursor is over panel.
         - `false` : Scrolling without checking cursor. Default behavior.
     - `mouseWheelScroller.speed` : Scrolling speed, default value is `0.1`.
     - Set to `false` to skip creating mouse-wheel-scroller. Default behavior.
+- `mouseWheelScrollerX`, `mouseWheelScrollerY` : Configuration of mouse-wheel-scrollerX, or mouse-wheel-scrollerY behavior, for two-sliders mode.
 - `clamplChildOY` : Set `true` to clamp scrolling.
+- `clamplChildOX` : Set `true` to clamp scrolling, for two-sliders mode.
 - `header` : Game object of header, optional.
 - `footer` : Game object of footer, optional.
 - `space` : Pads spaces
@@ -324,9 +342,13 @@ var panel = scene.rexUI.add.scrollablePanel({
             - If `scrollMode` is `1` (horizontal) :
                 - `space.panel.left`, `space.panel.right` : Left, right padding space of panel object.
                 - `space.panel.bottom` : Space between panel object and slider object.
+            - If two-sliders mode (`scrollMode` is `2`):
+                - `space.panel.top`, `space.panel.bottom`, `space.panel.left`, `space.panel.right` : Top, bottom, left, right padding space of panel object.
     - `space.slider` :
         - `0` : No space around slider.
         - `space.slider.left`, `space.slider.right`, `space.slider.top`, `space.slider.bottom` : Space around slider.
+    - `space.sliderX`, `space.sliderX` : Space configuration of sliderX, sliderX, for two-sliders mode.
+        - `0` : No space around slider.
     - `space.header` : Space between header and panel.
     - `space.footer` : Space between footer and panel.
 - `expand` : Expand width or height of element
@@ -342,6 +364,12 @@ var panel = scene.rexUI.add.scrollablePanel({
 - `draggable` : Set `true` to drag top-most object.
 - `sizerEvents` : Set `true` to fire [sizer events](ui-basesizer.md#events). Default value is `false`.
 
+#### Scroll mode
+
+- Scrollable panel can scroll on both x/y axis if configuration has `sliderX`, `sliderY`, or `scrollerX`, `scrollerY` parameters.
+- Otherwiser, scrollable panel can scroll on x or y axis if configuration has `slider`, or `slider` parameters.
+    - Set `scrollMode` to `0` for vertical scrolling, or `1` for horizontal scrolling.
+
 #### Child bounds
 
 Scrollable panel will mask child if child's bounds (`child.getBounds()`)  is across mask area. 

templates/ui/utils/scrollablexy/Scrollable.js

@@ -14,7 +14,9 @@ class Scrollable extends Sizer {
             config = {};
         }
 
-        if (!!config.sliderY && !!config.sliderX) {
+        var hasSliderXY = !!config.sliderY && !!config.sliderX;
+        var hasScrollerXY = !!config.scrollerX && !!config.scrollerY;
+        if (hasSliderXY || hasScrollerXY) {
             config.scrollMode = 2;
         }
         var scrollMode = GetScrollMode(config); // 0:y, 1:x, 2:xy