added ScrollText

dist/preview release/what's new.md

@@ -17,6 +17,7 @@
 - GUI:
   - Added new [ImageBasedSlider](http://doc.babylonjs.com/how_to/gui#imagebasedslider) to let users customize sliders using images ([Deltakosh](https://github.com/deltakosh))
   - Added support for clipboard events to let users perform `cut`, `copy` and `paste` events ([Saket Saurabh](https://github.com/ssaket))
+  - Added new ScrollText for long text descriptions read in parts using a Slider ([JohnK](https://github.com/BabylonJSGuide/))
 
 ## Updates
 

gui/src/2D/controls/index.ts

@@ -13,6 +13,7 @@ export * from "./multiLine";
 export * from "./radioButton";
 export * from "./stackPanel";
 export * from "./selector";
+export * from "./scrollText";
 export * from "./textBlock";
 export * from "./virtualKeyboard";
 export * from "./rectangle";

gui/src/2D/controls/scrollText.ts

@@ -0,0 +1,292 @@
+import { Measure } from "../measure";
+import { Rectangle } from "./rectangle";
+import { Grid } from "./grid";
+import { Control } from "./control";
+import { TextBlock } from "./textBlock";
+import { Slider } from "./slider";
+import { ValueAndUnit } from "../valueAndUnit";
+
+/** Class used to hold the textBlock and slider in a grid
+*/
+export class ScrollText extends Rectangle {
+    private _grid: Grid;
+    private _textBlock: TextBlock;
+    private _text: string = "";
+    private _fontColor: string = "white";
+    private _bar: Slider;
+    private _barColor: string = "grey";
+    private _barBorderColor: string = "#444444";
+    private _barBackground: string = "white";
+    private _endTop: number;
+    private _scrollGridWidth: number = 30;
+
+    /**
+     * Gets or sets the text to display
+     */
+    public get text(): string {
+        return this._text;
+    }
+
+    public set text(value: string) {
+        if (this._text === value) {
+            return;
+        }
+        this._text = value;
+        this._textBlock.text = value;
+    }
+
+    /**
+     * Gets or sets the fontColor
+     */
+    public get fontColor(): string {
+        return this._fontColor;
+    }
+
+    public set fontColor(color: string) {
+        if (this._fontColor === color) {
+            return;
+        }
+        this._fontColor = color;
+        this._textBlock.color = color;
+    }
+
+    /**
+     * Sets the width of the scrollText, the left grid column and the textBlock
+     */
+    public set width(value: string | number) {
+        if (this._width.toString(this._host) === value) {
+            return;
+        }
+
+        if (this._width.fromString(value)) {
+            this._markAsDirty();
+            this._textBlock.width = (this.widthInPixels - this._scrollGridWidth) + "px";
+            this._grid.setColumnDefinition(0, this._textBlock.widthInPixels, true);
+        }
+    }
+
+    /**
+     * Sets the height of the scrollText, the grid and the textBlock
+     */
+
+    public set height(value: string | number) {
+        if (this._height.toString(this._host) === value) {
+            return;
+        }
+
+        if (this._height.fromString(value)) {
+            this._grid.setRowDefinition(0, this.heightInPixels, true);
+            this._markAsDirty();
+        }
+    }
+
+    /**
+     * Gets or sets a value indicating the padding to use on the left of the text
+     */
+    public get paddingLeft(): string | number {
+        return this._textBlock.paddingLeft;
+    }
+
+    public set paddingLeft(value: string | number) {
+        this._textBlock.paddingLeft = value;
+    }
+
+    /**
+     * Gets a value indicating the padding in pixels to use on the left of the text
+     */
+    public get paddingLeftInPixels(): number {
+        return this._textBlock.paddingLeftInPixels;
+    }
+
+    /**
+     * Gets or sets a value indicating the padding to use on the right of the text
+     */
+    public get paddingRight(): string | number {
+        return this._textBlock.paddingRight;
+    }
+
+    public set paddingRight(value: string | number) {
+        this._textBlock.paddingRight = value;
+    }
+
+    /**
+     * Gets a value indicating the padding in pixels to use on the right of the text
+     */
+    public get paddingRightInPixels(): number {
+        return this._textBlock.paddingRightInPixels;
+    }
+
+    /**
+     * Gets or sets a value indicating the padding to use at the top of the text
+     */
+    public get paddingTop(): string | number {
+        return this._textBlock.paddingTop;
+    }
+
+    public set paddingTop(value: string | number) {
+        this._textBlock.paddingTop = value;
+    }
+
+    /**
+     * Gets a value indicating the padding in pixels to use at the top of the text
+     */
+    public get paddingTopInPixels(): number {
+        return this._textBlock.paddingTopInPixels;
+    }
+
+    /**
+     * Gets or sets a value indicating the padding to use on the bottom of the text
+     */
+    public get paddingBottom(): string | number {
+        return this._textBlock.paddingBottom;
+    }
+
+    public set paddingBottom(value: string | number) {
+        this._textBlock.paddingBottom = value;
+    }
+
+    /**
+     * Gets a value indicating the padding in pixels to use on the bottom of the text
+     */
+    public get paddingBottomInPixels(): number {
+        return this._textBlock.paddingBottomInPixels;
+    }
+
+    /**
+    * Creates a new ScrollText
+    * @param name of ScrollText
+    * @param text of ScrollText
+    */
+    constructor(
+        /** name of ScrollText */
+        public name?: string,
+        text: string = "") {
+        super(name);
+        this._text = text;
+        this._grid = new Grid();
+        this._textBlock = new TextBlock();
+        this._bar = new Slider();
+
+        this._width = new ValueAndUnit(0.25, ValueAndUnit.UNITMODE_PERCENTAGE, false);
+        this._height = new ValueAndUnit(0.25, ValueAndUnit.UNITMODE_PERCENTAGE, false);
+        this._background = "black";
+
+        this.fontSize = "16px";
+
+        this._grid.addColumnDefinition(1, true);
+        this._grid.addColumnDefinition(this._scrollGridWidth, true);
+
+        this.addControl(this._grid);
+
+        this._textBlock.textWrapping = true;
+        this._textBlock.color = this._fontColor;
+        this._textBlock.top = "0px";
+        this._textBlock.paddingLeft = "5px";
+        this._textBlock.paddingRight = "5px";
+        this._textBlock.paddingTop = "5px";
+        this._textBlock.paddingBottom = "5px";
+        this._textBlock.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._textBlock.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        this._textBlock.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._textBlock.textVerticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+
+        this._textBlock.onLinesReadyObservable.add(() => {
+            let textPadding = this._textBlock.paddingTopInPixels + this._textBlock.paddingBottomInPixels + 2 * this.thickness;
+            let textBlockHeight = (this.fontOffset.height) * this._textBlock.lines.length + textPadding;
+            this._textBlock.height = textBlockHeight  + "px";
+            this._endTop = this.heightInPixels - textBlockHeight - textPadding;
+            this._bar.height = ((this.heightInPixels - textPadding) * 0.85) + "px";
+            this._grid.setRowDefinition(0, this.heightInPixels - textPadding, true);
+            if (textBlockHeight > this.heightInPixels) {
+                this._bar.isVisible = true;
+                this._grid.setColumnDefinition(1, this._scrollGridWidth, true);
+            }
+            else {
+                this._bar.isVisible = false;
+                this._grid.setColumnDefinition(1, 1, true);
+            }
+        });
+
+        this._bar.paddingLeft = 0;
+        this._bar.width = "25px";
+        this._bar.value = 0;
+        this._bar.maximum = 100;
+        this._bar.horizontalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+        this._bar.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+        this._bar.left = 0.05;
+        this._bar.isThumbClamped = true;
+        this._bar.color = "grey";
+        this._bar.borderColor = "#444444";
+        this._bar.background = "white";
+        this._bar.isVisible = false;
+        this._bar.isVertical = true;
+        this._bar.rotation = Math.PI;
+        this._grid.addControl(this._bar, 0, 1);
+
+        this._bar.onValueChangedObservable.add((value) => {
+            this._textBlock.top = (value * this._endTop / this._bar.maximum) + "px";
+        });
+    }
+
+    /** Gets or sets the bar color */
+    public get barColor(): string {
+        return this._barColor;
+    }
+
+    public set barColor(color: string) {
+        if (this._barColor === color) {
+            return;
+        }
+
+        this._barColor = color;
+        this._bar.color = color;
+
+    }
+
+    /** Gets or sets the bar color */
+    public get barBorderColor(): string {
+        return this._barBorderColor;
+    }
+
+    public set barBorderColor(color: string) {
+        if (this._barBorderColor === color) {
+            return;
+        }
+
+        this._barBorderColor = color;
+        this._bar.borderColor = color;
+
+    }
+
+    /** Gets or sets the bar background */
+    public get barBackground(): string {
+        return this._barBackground;
+    }
+
+    public set barBackground(color: string) {
+        if (this._barBackground === color) {
+            return;
+        }
+
+        this._barBackground = color;
+        this._bar.background = color;
+    }
+
+    protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
+        super._additionalProcessing(parentMeasure, context);
+
+        this._measureForChildren.width -= 2 * this.thickness;
+        this._measureForChildren.height -= 2 * this.thickness;
+        this._measureForChildren.left += this.thickness;
+        this._measureForChildren.top += this.thickness;
+
+        let innerWidth = this._width.getValueInPixel(this._host, parentMeasure.width)  - this._scrollGridWidth - 4 * this.thickness;
+
+        this._textBlock.width = innerWidth + "px";
+        this._grid.setColumnDefinition(0, innerWidth, true);
+        this._grid.setRowDefinition(0, this._height.getValueInPixel(this._host, parentMeasure.height));
+        this._grid.addControl(this._textBlock, 0, 0);
+        this._textBlock.text = this._text;
+    }
+
+}