Merge pull request #14819 from RaananW/textInputOutline

GUI - Allow InputText text outline
BabylonJS · Feb 29, 2024 · 680a72b · 680a72b
2 parents bdb477c + c43af7f
commit 680a72b
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 48 deletions.
diff --git a/packages/dev/gui/src/2D/controls/inputText.ts b/packages/dev/gui/src/2D/controls/inputText.ts
@@ -50,6 +50,8 @@ export class InputText extends Control implements IFocusableControl {
     private _startHighlightIndex = 0;
     private _endHighlightIndex = 0;
     private _cursorIndex = -1;
+    private _outlineWidth: number = 0;
+    private _outlineColor: string = "white";
     protected _onFocusSelectAll = false;
     protected _isPointerDown = false;
     protected _onClipboardObserver: Nullable<Observer<ClipboardInfo>>;
@@ -65,6 +67,36 @@ export class InputText extends Control implements IFocusableControl {
     @serialize()
     public disableMobilePrompt = false;
 
+    /**
+     * Gets or sets outlineWidth of the text to display
+     */
+    public get outlineWidth(): number {
+        return this._outlineWidth;
+    }
+
+    public set outlineWidth(value: number) {
+        if (this._outlineWidth === value) {
+            return;
+        }
+        this._outlineWidth = value;
+        this._markAsDirty();
+    }
+
+    /**
+     * Gets or sets outlineColor of the text to display
+     */
+    public get outlineColor(): string {
+        return this._outlineColor;
+    }
+
+    public set outlineColor(value: string) {
+        if (this._outlineColor === value) {
+            return;
+        }
+        this._outlineColor = value;
+        this._markAsDirty();
+    }
+
     /** Observable raised when the text changes */
     public onTextChangedObservable = new Observable<InputText>();
     /** Observable raised just before an entered character is to be added */
@@ -73,9 +105,9 @@ export class InputText extends Control implements IFocusableControl {
     public onFocusObservable = new Observable<InputText>();
     /** Observable raised when the control loses the focus */
     public onBlurObservable = new Observable<InputText>();
-    /**Observable raised when the text is highlighted */
+    /** Observable raised when the text is highlighted */
     public onTextHighlightObservable = new Observable<InputText>();
-    /**Observable raised when copy event is triggered */
+    /** Observable raised when copy event is triggered */
     public onTextCopyObservable = new Observable<InputText>();
     /** Observable raised when cut event is triggered */
     public onTextCutObservable = new Observable<InputText>();
@@ -337,6 +369,14 @@ export class InputText extends Control implements IFocusableControl {
         this.onTextChangedObservable.notifyObservers(this);
     }
 
+    protected _applyStates(context: ICanvasRenderingContext): void {
+        super._applyStates(context);
+        if (this.outlineWidth) {
+            context.lineWidth = this.outlineWidth;
+            context.strokeStyle = this.outlineColor;
+        }
+    }
+
     /** Gets or sets control width */
     @serialize()
     public get width(): string | number {
@@ -931,6 +971,10 @@ export class InputText extends Control implements IFocusableControl {
             this._scrollLeft = clipTextLeft;
         }
 
+        if (this.outlineWidth) {
+            context.strokeText(text.text, this._scrollLeft, this._currentMeasure.top + rootY);
+        }
+
         context.fillText(text.text, this._scrollLeft, this._currentMeasure.top + rootY);
 
         // Cursor

diff --git a/packages/dev/gui/src/2D/controls/inputTextArea.ts b/packages/dev/gui/src/2D/controls/inputTextArea.ts
@@ -25,8 +25,6 @@ export class InputTextArea extends InputText {
 
     private _lines: any[];
     private _lineSpacing: ValueAndUnit = new ValueAndUnit(0);
-    private _outlineWidth: number = 0;
-    private _outlineColor: string = "white";
     private _maxHeight = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
 
     private _clipTextTop: number;
@@ -53,42 +51,6 @@ export class InputTextArea extends InputText {
 
     private _autoStretchHeight: boolean;
 
-    /**
-     * Gets or sets outlineWidth of the text to display
-     */
-    public get outlineWidth(): number {
-        return this._outlineWidth;
-    }
-
-    /**
-     * Gets or sets outlineWidth of the text to display
-     */
-    public set outlineWidth(value: number) {
-        if (this._outlineWidth === value) {
-            return;
-        }
-        this._outlineWidth = value;
-        this._markAsDirty();
-    }
-
-    /**
-     * Gets or sets outlineColor of the text to display
-     */
-    public get outlineColor(): string {
-        return this._outlineColor;
-    }
-
-    /**
-     * Gets or sets outlineColor of the text to display
-     */
-    public set outlineColor(value: string) {
-        if (this._outlineColor === value) {
-            return;
-        }
-        this._outlineColor = value;
-        this._markAsDirty();
-    }
-
     /** Gets or sets a boolean indicating if the control can auto stretch its height to adapt to the text */
     @serialize()
     public get autoStretchHeight(): boolean {
@@ -1012,14 +974,6 @@ export class InputTextArea extends InputText {
         }, 500);
     }
 
-    protected _applyStates(context: ICanvasRenderingContext): void {
-        super._applyStates(context);
-        if (this.outlineWidth) {
-            context.lineWidth = this.outlineWidth;
-            context.strokeStyle = this.outlineColor;
-        }
-    }
-
     public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {
         if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {
             return false;