From 15920e1b9445ec9579fae05266c349891ba61c1d Mon Sep 17 00:00:00 2001
From: lgtst <lightest13@gmail.com>
Date: Wed, 8 Jun 2022 16:18:22 +0300
Subject: [PATCH] added languageStyle support for TextBox;

---
 src/util/Util.js      | 16 ++++++++++++++++
 src/visual/TextBox.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/src/util/Util.js b/src/util/Util.js
index e4ceb0d..9138d21 100644
--- a/src/util/Util.js
+++ b/src/util/Util.js
@@ -1490,3 +1490,19 @@ export async function getDownloadSpeed(psychoJS, nbDownloads = 1)
 		download.src = `${imageUrl}?salt=${tic}`;
 	});
 }
+
+
+/**
+ * Enum that stores possible text directions.
+ * Note that Arabic is the same as RTL but added here to support PsychoPy's
+ * languageStyle enum. Arabic reshaping is handled by the browser automatically.
+ *
+ * @name module:util.TEXT_DIRECTION
+ * @enum
+ * @public
+ */
+export const TEXT_DIRECTION = {
+	LTR: "ltr",
+	RTL: "rtl",
+	Arabic: "rtl"
+};
diff --git a/src/visual/TextBox.js b/src/visual/TextBox.js
index 0f9d999..dda45b8 100644
--- a/src/visual/TextBox.js
+++ b/src/visual/TextBox.js
@@ -44,6 +44,7 @@ import { VisualStim } from "./VisualStim.js";
  * @param {boolean} [options.flipHoriz= false] - whether or not to flip the text horizontally
  * @param {boolean} [options.flipVert= false] - whether or not to flip the text vertically
  * @param {Color} [options.fillColor= undefined] - fill color of the text-box
+ * @param {String} [options.languageStyle= "LTR"] - sets the direction property of the text inputs. Possible values ["LTR", "RTL", "Arabic"]. "Arabic" is added for consistency with PsychoPy
  * @param {Color} [options.borderColor= undefined] - border color of the text-box
  * @param {PIXI.Graphics} [options.clipMask= null] - the clip mask
  * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every frame flip
@@ -74,6 +75,7 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin)
 			flipHoriz,
 			flipVert,
 			fillColor,
+			languageStyle,
 			borderColor,
 			borderWidth,
 			padding,
@@ -146,6 +148,11 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin)
 			alignment,
 			"left"
 		);
+		this._addAttribute(
+			"languageStyle",
+			languageStyle,
+			"LTR"
+		);
 
 		// colors:
 		this._addAttribute(
@@ -246,6 +253,27 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin)
 		}
 	}
 
+	/**
+	 * Setter for the languageStyle attribute.
+	 *
+	 * @name module:visual.TextBox#setLanguageStyle
+	 * @public
+	 * @param {String} languageStyle - text direction in textbox, accepts values ["LTR", "RTL", "Arabic"]
+	 * @param {boolean} [log= false] - whether or not to log
+	 */
+	setLanguageStyle (languageStyle = "LTR", log = false) {
+		this._setAttribute("languageStyle", languageStyle, log);
+		let langDir = util.TEXT_DIRECTION[languageStyle];
+		if (langDir === undefined)
+		{
+			langDir = util.TEXT_DIRECTION["LTR"];
+		}
+		if (this._pixi !== undefined)
+		{
+			this._pixi.setInputStyle("direction", langDir);
+		}
+	}
+
 	/**
 	 * Setter for the anchor attribute.
 	 *
@@ -501,6 +529,7 @@ export class TextBox extends util.mix(VisualStim).with(ColorMixin)
 				color: this._color === undefined || this._color === null ? 'transparent' : new Color(this._color).hex,
 				fontWeight: (this._bold) ? "bold" : "normal",
 				fontStyle: (this._italic) ? "italic" : "normal",
+				direction: util.TEXT_DIRECTION[this._languageStyle],
 				textAlign: this._alignment,
 				padding: `${padding_px}px`,
 				multiline: this._multiline,