Add gapLength parameter

examples/ui-textarea/bitmaptext-snap.bat

@@ -0,0 +1,5 @@
+@echo off
+set main=./examples/ui-textarea/bitmaptext-snap.js
+cd ..
+cd ..
+npm run dev

examples/ui-textarea/bitmaptext-snap.js

@@ -0,0 +1,75 @@
+import phaser from 'phaser/src/phaser.js';
+import UIPlugin from '../../templates/ui/ui-plugin.js';
+
+const COLOR_MAIN = 0x4e342e;
+const COLOR_LIGHT = 0x7b5e57;
+const COLOR_DARK = 0x260e04;
+
+class Demo extends Phaser.Scene {
+    constructor() {
+        super({
+            key: 'examples'
+        })
+    }
+
+    preload() {
+        this.load.bitmapFont('gothic', 'assets/fonts/gothic.png', 'assets/fonts/gothic.xml');
+    }
+
+    create() {
+        var textArea = this.rexUI.add.textArea({
+            x: 400,
+            y: 300,
+            width: 220,
+            height: 260,
+
+            background: this.rexUI.add.roundRectangle(0, 0, 2, 2, 0, COLOR_MAIN),
+
+            text: this.add.bitmapText(0, 0, 'gothic'),
+            // textMask: false,
+
+            slider: {
+                track: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_DARK),
+                thumb: this.rexUI.add.roundRectangle(0, 0, 0, 0, 13, COLOR_LIGHT),
+
+                gapLength: 75
+            },
+
+            content: CreateContent(1000),
+        })
+            .layout()
+        //.drawBounds(this.add.graphics(), 0xff0000);
+
+    }
+
+    update() { }
+}
+
+var CreateContent = function (linesCount) {
+    var numbers = [];
+    for (var i = 0; i < linesCount; i++) {
+        numbers.push(i.toString());
+    }
+    return numbers.join('\n');
+}
+
+var config = {
+    type: Phaser.AUTO,
+    parent: 'phaser-example',
+    width: 800,
+    height: 600,
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    scene: Demo,
+    plugins: {
+        scene: [{
+            key: 'rexUI',
+            plugin: UIPlugin,
+            mapping: 'rexUI'
+        }]
+    }
+};
+
+var game = new Phaser.Game(config);

examples/ui-textarea/bitmaptext.bat

@@ -0,0 +1,5 @@
+@echo off
+set main=./examples/ui-textarea/bitmaptext.js
+cd ..
+cd ..
+npm run dev

templates/ui/scrollbar/ScrollBar.js

@@ -183,6 +183,13 @@ class ScrollBar extends Sizer {
         }
         return this;
     }
+
+    setGap(gap, min, max) {
+        if (this.childrenMap.slider) {
+            this.childrenMap.slider.setGap(gap, min, max);
+        }
+        return this;
+    }
 }
 
 export default ScrollBar;

templates/ui/utils/scrollable/AddSlider.js

@@ -30,6 +30,8 @@ var AddSlider = function (topPatent, sliderParent, axis, config) {
         sliderConfig.orientation = (isAxisY) ? 1 : 0;
         slider = CreateScrollbar(topPatent.scene, sliderConfig);
 
+        slider.gapLength = GetValue(sliderConfig, 'gapLength', undefined);
+
         var column, row, padding;
 
         var sliderPosition = GetValue(sliderConfig, 'position', 0);

templates/ui/utils/scrollable/ResizeController.js

@@ -59,13 +59,18 @@ var SetControllerBounds = function (axis) {
             slider = this.childrenMap[`slider${axis}`];
     }
 
+    var scale = (axis === 'Y') ? this.scaleY : this.scaleX;
+    bound1 *= scale;
+
     if (scroller) {
-        // Scale will force to 1 during layout, get saved scale value back
-        var scale = (axis === 'Y') ? this.scaleY : this.scaleX;
-        scroller.setBounds(bound0, bound1 * scale);
+        scroller.setBounds(bound0, bound1);
     }
     if (slider) {
         slider.setEnable(bound0 !== bound1);
+
+        if (slider.gapLength) {
+            slider.setGap(slider.gapLength, bound0, bound1);
+        }
     }
 }
 

templates/ui/utils/scrollable/Scrollable.d.ts

@@ -18,6 +18,7 @@ declare namespace Scrollable {
         input?: SliderInputTypes,
         position?: SliderPositionTypes,
         gap?: number,
+        gapLength?: number,
 
         hideUnscrollableSlider?: boolean,
         disableUnscrollableDrag?: boolean,