feat(Text): textAlign start, end

and a bit of tidying up
fabricjs · Mar 10, 2022 · 76f94b4 · 76f94b4
1 parent 2e608dc
commit 76f94b4
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 30 deletions.
diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js
@@ -356,7 +356,31 @@
         left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0),
       };
       if (this.direction === 'rtl') {
-        boundaries.left *= -1;
+        switch (this.textAlign) {
+          case 'start':
+          case 'justify':
+          case 'justify-start':
+            boundaries.left *= -1;
+            break;
+          case 'end':
+          case 'justify-end':
+            boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0);
+            break;
+          case 'left':
+          case 'justify-left':
+            boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0);
+            break;
+          case 'center':
+          case 'justify-center':
+            boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0);
+            break;
+          case 'right':
+          case 'justify-right':
+            boundaries.left *= -1;
+            break;
+          default:
+            break;
+        }
       }
       this.cursorOffsetCache = boundaries;
       return this.cursorOffsetCache;
@@ -445,7 +469,31 @@
           ctx.fillStyle = this.selectionColor;
         }
         if (this.direction === 'rtl') {
-          drawStart = this.width - drawStart - drawWidth;
+          switch (this.textAlign) {
+            case 'start':
+            case 'justify':
+            case 'justify-start':
+              drawStart = this.width - drawStart - drawWidth;
+              break;
+            case 'end':
+            case 'justify-end':
+              drawStart = boundaries.left + lineOffset - boxEnd;
+              break;
+            case 'left':
+            case 'justify-left':
+              drawStart = boundaries.left + lineOffset - boxEnd;
+              break;
+            case 'center':
+            case 'justify-center':
+              drawStart = boundaries.left + lineOffset - boxEnd;
+              break;
+            case 'right':
+            case 'justify-right':
+              drawStart = this.width - drawStart - drawWidth;
+              break;
+            default:
+              break;
+          }
         }
         ctx.fillRect(
           drawStart,

diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js
@@ -124,10 +124,11 @@
     /**
      * Text alignment. Possible values: "left", "center", "right", "justify",
      * "justify-left", "justify-center" or "justify-right".
-     * @type String
+     * @typedef {'start' | 'center' | 'end' | 'left' | 'right' | 'justify' | 'justify-start' | 'justify-center' | 'justify-end' | 'justify-left' | 'justify-right'} TextAlign
+     * @type {TextAlign}
      * @default
      */
-    textAlign:            'left',
+    textAlign:            'start',
 
     /**
      * Font style . Possible values: "", "normal", "italic" or "oblique".
@@ -378,6 +379,23 @@
       this.setupState({ propertySet: '_dimensionAffectingProps' });
     },
 
+    /**
+     * 
+     * @param {boolean} rtl 
+     * @param {TextAlign} [textAlign]
+     * @returns {TextAlign}
+     */
+    resolveTextAlign: function (rtl, textAlign) {
+      switch (textAlign) {
+        case 'justify-start':
+          return rtl ? 'justify-right' : 'justify-left';
+        case 'justify-end':
+          return rtl ? 'justify-left' : 'justify-right';
+        default:
+          return textAlign;
+      }
+    },
+
     /**
      * If text has a path, it will add the extra information needed
      * for path and text calculations
@@ -805,7 +823,7 @@
       var width = 0, i, grapheme, line = this._textLines[lineIndex], prevGrapheme,
           graphemeInfo, numOfSpaces = 0, lineBounds = new Array(line.length),
           positionInPath = 0, startingPoint, totalPathLength, path = this.path,
-          reverse = this.pathSide === 'right';
+          reverse = this.pathSide === 'right', textAlign = this.textAlign;
 
       this.__charBounds[lineIndex] = lineBounds;
       for (i = 0; i < line.length; i++) {
@@ -828,17 +846,31 @@
         startingPoint = fabric.util.getPointOnPath(path.path, 0, path.segmentsInfo);
         startingPoint.x += path.pathOffset.x;
         startingPoint.y += path.pathOffset.y;
-        switch (this.textAlign) {
+        var size = totalPathLength - width;
+        switch (textAlign) {
+          case 'start':
+          case 'justify':
+          case 'justify-start':
+            positionInPath = 0;
+            break;
+          case 'end':
+          case 'justify-end':
+            positionInPath = size;
+            break;
           case 'left':
-            positionInPath = reverse ? (totalPathLength - width) : 0;
+          case 'justify-left':
+            positionInPath = reverse ? size : 0;
             break;
           case 'center':
-            positionInPath = (totalPathLength - width) / 2;
+          case 'justify-center':
+            positionInPath = size / 2;
             break;
           case 'right':
-            positionInPath = reverse ? 0 : (totalPathLength - width);
+          case 'justify-right':
+            positionInPath = reverse ? 0 : size;
+            break;
+          default:
             break;
-          //todo - add support for justify
         }
         positionInPath += this.pathStartOffset * (reverse ? -1 : 1);
         for (i = reverse ? line.length - 1 : 0;
@@ -1286,29 +1318,35 @@
      */
     _getLineLeftOffset: function(lineIndex) {
       var lineWidth = this.getLineWidth(lineIndex),
-          lineDiff = this.width - lineWidth, textAlign = this.textAlign, direction = this.direction,
+          lineDiff = this.width - lineWidth, textAlign = this.textAlign, rtl = this.direction === 'rtl',
           isEndOfWrapping, leftOffset = 0, isEndOfWrapping = this.isEndOfWrapping(lineIndex);
-      if (textAlign === 'justify'
-        || (textAlign === 'justify-center' && !isEndOfWrapping)
-        || (textAlign === 'justify-right' && !isEndOfWrapping)
-        || (textAlign === 'justify-left' && !isEndOfWrapping)
-      ) {
+      if (textAlign === 'justify' || (textAlign.startsWith('justify') && !isEndOfWrapping)) {
         return 0;
       }
-      if (textAlign === 'center') {
-        leftOffset = lineDiff / 2;
-      }
-      if (textAlign === 'right') {
-        leftOffset = lineDiff;
-      }
-      if (textAlign === 'justify-center') {
-        leftOffset = lineDiff / 2;
-      }
-      if (textAlign === 'justify-right') {
-        leftOffset = lineDiff;
-      }
-      if (direction === 'rtl') {
-        leftOffset -= lineDiff;
+      switch (textAlign) {
+        case 'start':
+        case 'justify':
+        case 'justify-start':
+          leftOffset = 0;
+          break;
+        case 'end':
+        case 'justify-end':
+          leftOffset = rtl ? -lineDiff : lineDiff;
+          break;
+        case 'left':
+        case 'justify-left':
+          leftOffset = rtl ? -lineDiff : 0;
+          break;
+        case 'center':
+        case 'justify-center':
+          leftOffset = rtl ? -lineDiff / 2 : lineDiff / 2;
+          break;
+        case 'right':
+        case 'justify-right':
+          leftOffset = rtl ? 0 : lineDiff;
+          break;
+        default:
+          break;
       }
       return leftOffset;
     },