Merge pull request #526 from wiztivi-framework/feature/rtl

feature: TextTexture handle right to left text direction

Author: uguraslan

src/textures/TextTexture.mjs

@@ -466,6 +466,17 @@ export default class TextTexture extends Texture {
         return this._textIndent;
     }
 
+    set rtl(v) {
+        if (this._rtl !== v) {
+            this._rtl = v;
+            this._changed();
+        }
+    }
+
+    get rtl() {
+        return this._rtl;
+    }
+
     get precision() {
         return super.precision;
     }
@@ -620,6 +631,7 @@ export default class TextTexture extends Texture {
         if (this.highlightPaddingRight !== 0) nonDefaults["highlightPaddingRight"] = this.highlightPaddingRight;
         if (this.letterSpacing !== 0) nonDefaults["letterSpacing"] = this.letterSpacing;
         if (this.textIndent !== 0) nonDefaults["textIndent"] = this.textIndent;
+        if (this.rtl !== 0) nonDefaults["rtl"] = this.rtl;
 
         if (this.cutSx) nonDefaults["cutSx"] = this.cutSx;
         if (this.cutEx) nonDefaults["cutEx"] = this.cutEx;
@@ -667,6 +679,7 @@ export default class TextTexture extends Texture {
         obj.highlightPaddingRight = this._highlightPaddingRight;
         obj.letterSpacing = this._letterSpacing;
         obj.textIndent = this._textIndent;
+        obj.rtl = this._rtl;
         obj.cutSx = this._cutSx;
         obj.cutEx = this._cutEx;
         obj.cutSy = this._cutSy;
@@ -714,6 +727,7 @@ proto._highlightPaddingLeft = 0;
 proto._highlightPaddingRight = 0;
 proto._letterSpacing = 0;
 proto._textIndent = 0;
+proto._rtl = 0;
 proto._cutSx = 0;
 proto._cutEx = 0;
 proto._cutSy = 0;

src/textures/TextTextureRenderer.mjs

@@ -43,6 +43,7 @@ export default class TextTextureRenderer {
             this._stage.getOption('defaultFontFace'),
         );
         this._context.textBaseline = this._settings.textBaseline;
+        this._context.direction = this._settings.rtl ? "rtl" : "ltr";
     };
 
     _load() {
@@ -306,6 +307,9 @@ export default class TextTextureRenderer {
                 linePositionX += ((renderInfo.innerWidth - renderInfo.lineWidths[i]) / 2);
             }
             linePositionX += renderInfo.paddingLeft;
+            if (this._settings.rtl) {
+                linePositionX += renderInfo.lineWidths[i];
+            }
 
             drawLines.push({text: renderInfo.lines[i], x: linePositionX, y: linePositionY, w: renderInfo.lineWidths[i]});
         }