@nasser-sw/fabric 7.0.1-beta16 → 7.0.1-beta17

package/dist/src/shapes/IText/IText.mjs

@@ -1,14 +1,14 @@
 import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.mjs';
 import { Canvas } from '../../canvas/Canvas.mjs';
 import { ITextClickBehavior } from './ITextClickBehavior.mjs';
-import { getCursorRect, hitTest } from '../../text/hitTest.mjs';
+import { getCursorRect } from '../../text/hitTest.mjs';
+import { analyzeBiDi } from '../../text/unicode.mjs';
 import { ctrlKeysMapUp, ctrlKeysMapDown, keysMapRtl, keysMap } from './constants.mjs';
 import { classRegistry } from '../../ClassRegistry.mjs';
-import { JUSTIFY, JUSTIFY_RIGHT, JUSTIFY_LEFT, JUSTIFY_CENTER } from '../Text/constants.mjs';
-import { RIGHT, LEFT, CENTER, FILL } from '../../constants.mjs';
+import { JUSTIFY } from '../Text/constants.mjs';
+import { FILL } from '../../constants.mjs';
 import { createCanvasElementFor } from '../../util/misc/dom.mjs';
 import { applyCanvasTransform } from '../../util/internals/applyCanvasTransform.mjs';
-import { Point } from '../../Point.mjs';
 import { invertTransform } from '../../util/misc/matrix.mjs';
 
 // Declare IText protected properties to workaround TS
@@ -105,6 +105,20 @@ class IText extends ITextClickBehavior {
       ...IText.ownDefaults,
       ...options
     });
+    /**
+     * Index where text selection starts (or where cursor is when there is no selection)
+     * @type Number
+     */
+    /**
+     * Index where text selection ends
+     * @type Number
+     */
+    /**
+     * Cache for visual positions per line to ensure consistency
+     * during selection operations
+     * @private
+     */
+    _defineProperty(this, "_visualPositionsCache", new Map());
     this.initBehavior();
   }
 
@@ -228,6 +242,8 @@ class IText extends ITextClickBehavior {
     // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor
     // the correct position but not at every cursor animation.
     this.cursorOffsetCache = {};
+    // Clear visual positions cache on full render since dimensions may have changed
+    this._clearVisualPositionsCache();
     this.renderCursorOrSelection();
   }
 
@@ -255,6 +271,9 @@ class IText extends ITextClickBehavior {
     if (!ctx) {
       return;
     }
+    // Clear cache to ensure fresh cursor position calculation
+    // This is important during selection drag when positions change frequently
+    this.cursorOffsetCache = {};
     const boundaries = this._getCursorBoundaries();
     const ancestors = this.findAncestorsWithClipPath();
     const hasAncestorsWithClipping = ancestors.length > 0;
@@ -332,12 +351,8 @@ class IText extends ITextClickBehavior {
   _getCursorBoundaries() {
     let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.selectionStart;
     let skipCaching = arguments.length > 1 ? arguments[1] : undefined;
-    // Use advanced cursor positioning if available
-    if (this.enableAdvancedLayout) {
-      return this._getCursorBoundariesAdvanced(index);
-    }
-
-    // Fall back to original method
+    // Always use original method which uses __charBounds directly
+    // and has proper RTL handling built-in
     return this._getCursorBoundariesOriginal(index, skipCaching);
   }
 
@@ -376,19 +391,261 @@ class IText extends ITextClickBehavior {
   }
 
   /**
-   * Enhanced selection start from pointer using BiDi-aware hit testing
-   * @override
+   * Override selection to use measureText-based visual positions
+   * This ensures hit testing matches actual browser BiDi rendering
    */
   getSelectionStartFromPointer(e) {
-    if (!this.enableAdvancedLayout || !this._layoutTextAdvanced) {
-      return super.getSelectionStartFromPointer(e);
+    // Get mouse position in object-local coordinates (origin at center)
+    const scenePoint = this.canvas.getScenePoint(e);
+    const localPoint = scenePoint.transform(invertTransform(this.calcTransformMatrix()));
+
+    // Convert to top-left origin coordinates
+    const mouseX = localPoint.x + this.width / 2;
+    const mouseY = localPoint.y + this.height / 2;
+
+    // Find the line based on Y position
+    let height = 0,
+      lineIndex = 0;
+    for (let i = 0; i < this._textLines.length; i++) {
+      const lineHeight = this.getHeightOfLine(i);
+      if (mouseY >= height && mouseY < height + lineHeight) {
+        lineIndex = i;
+        break;
+      }
+      height += lineHeight;
+      if (i === this._textLines.length - 1) {
+        lineIndex = i;
+      }
     }
-    const mouseOffset = this.canvas.getScenePoint(e).transform(invertTransform(this.calcTransformMatrix())).add(new Point(-this._getLeftOffset(), -this._getTopOffset()));
 
-    // Use BiDi-aware hit testing instead of naive RTL coordinate flipping
-    const layout = this._layoutTextAdvanced();
-    const hitResult = hitTest(mouseOffset.x, mouseOffset.y, layout, this._getAdvancedLayoutOptions());
-    return Math.min(hitResult.charIndex, this._text.length);
+    // Calculate line start index using ORIGINAL line lengths (without tatweels)
+    // This ensures selection indices refer to the original text, not the display text
+    let lineStartIndex = 0;
+    for (let i = 0; i < lineIndex; i++) {
+      const origLen = this._getOriginalLineLength(i);
+      const newlineOffset = this.missingNewlineOffset(i);
+      console.log(`📍 Line ${i}: origLen=${origLen}, displayLen=${this._textLines[i].length}, tatweels=${this._getTatweelCountForLine(i)}, newlineOffset=${newlineOffset}`);
+      lineStartIndex += origLen + newlineOffset;
+    }
+    console.log(`📍 Click on line ${lineIndex}, lineStartIndex=${lineStartIndex}`);
+    const line = this._textLines[lineIndex];
+    const lineText = line.join('');
+    const displayCharLength = line.length;
+    const originalCharLength = this._getOriginalLineLength(lineIndex);
+    if (displayCharLength === 0) {
+      return lineStartIndex;
+    }
+
+    // Use measureText to get actual visual character positions
+    // This matches exactly how the canvas renders BiDi text
+    const visualPositions = this._measureVisualPositions(lineIndex, lineText);
+
+    // Calculate line offset based on alignment
+    const lineWidth = this.getLineWidth(lineIndex);
+    let lineStartX = 0;
+    if (this.textAlign === 'center' || this.textAlign === 'justify-center') {
+      lineStartX = (this.width - lineWidth) / 2;
+    } else if (this.textAlign === 'right' || this.textAlign === 'justify-right') {
+      lineStartX = this.width - lineWidth;
+    } else if (this.direction === 'rtl' && (this.textAlign === 'justify' || this.textAlign === 'left')) {
+      // For RTL with left/justify, text starts from right
+      lineStartX = this.width - lineWidth;
+    }
+
+    // Find which character was clicked based on visual position
+    const clickX = mouseX - lineStartX;
+
+    // Sort positions by visual X for hit testing
+    const sortedPositions = [...visualPositions].sort((a, b) => a.visualX - b.visualX);
+
+    // Handle click before first character
+    if (sortedPositions.length > 0 && clickX < sortedPositions[0].visualX) {
+      // Before first visual character - cursor at visual left edge
+      // For RTL base direction, this means logical end of line
+      return this.direction === 'rtl' ? lineStartIndex + originalCharLength : lineStartIndex;
+    }
+
+    // Handle click after last character
+    if (sortedPositions.length > 0) {
+      const lastPos = sortedPositions[sortedPositions.length - 1];
+      if (clickX > lastPos.visualX + lastPos.width) {
+        // After last visual character - cursor at visual right edge
+        // For RTL base direction, this means logical start of line
+        return this.direction === 'rtl' ? lineStartIndex : lineStartIndex + originalCharLength;
+      }
+    }
+
+    // Find the character at click position
+    for (let i = 0; i < sortedPositions.length; i++) {
+      const pos = sortedPositions[i];
+      const charEnd = pos.visualX + pos.width;
+      if (clickX >= pos.visualX && clickX <= charEnd) {
+        // Convert display index to original index
+        // This also handles tatweels - they map to the character they extend
+        const originalCharIndex = this._displayToOriginalIndex(lineIndex, pos.logicalIndex);
+
+        // Check if this is a tatweel - if so, treat click as clicking on the extended character
+        const isTatweel = this._isTatweelAtDisplayIndex(lineIndex, pos.logicalIndex);
+        console.log(`📍 Hit char: displayIdx=${pos.logicalIndex}, origIdx=${originalCharIndex}, isTatweel=${isTatweel}, char="${this._textLines[lineIndex][pos.logicalIndex]}"`);
+        const charMiddle = pos.visualX + pos.width / 2;
+        const clickedLeftHalf = clickX <= charMiddle;
+
+        // For tatweels, clicking anywhere on it should place cursor after the extended character
+        if (isTatweel) {
+          // Tatweel extends the character before it, so cursor goes after that character
+          // originalCharIndex from _displayToOriginalIndex already maps tatweel to char+1
+          const result = lineStartIndex + originalCharIndex;
+          console.log(`📍 Tatweel click result: ${result}`);
+          return result;
+        }
+
+        // For RTL characters: left visual half means cursor AFTER (higher logical index)
+        // For LTR characters: left visual half means cursor BEFORE (lower logical index)
+        if (pos.isRtl) {
+          // RTL character
+          const result = lineStartIndex + (clickedLeftHalf ? originalCharIndex + 1 : originalCharIndex);
+          console.log(`📍 RTL char result: ${result} (clickedLeftHalf=${clickedLeftHalf})`);
+          return result;
+        } else {
+          // LTR character
+          const result = lineStartIndex + (clickedLeftHalf ? originalCharIndex : originalCharIndex + 1);
+          console.log(`📍 LTR char result: ${result} (clickedLeftHalf=${clickedLeftHalf})`);
+          return result;
+        }
+      }
+    }
+
+    // console.log(`📍 No match, returning end: ${lineStartIndex + originalCharLength}`);
+    return lineStartIndex + originalCharLength;
+  }
+
+  /**
+   * Clear the visual positions cache
+   * Should be called when text content or dimensions change
+   */
+  _clearVisualPositionsCache() {
+    this._visualPositionsCache.clear();
+  }
+
+  /**
+   * Measure visual character positions for hit testing using BiDi analysis
+   * This properly handles mixed RTL/LTR text by analyzing BiDi runs
+   * Results are cached per line for consistency during selection operations
+   */
+  _measureVisualPositions(lineIndex, lineText) {
+    // Check cache first
+    if (this._visualPositionsCache.has(lineIndex)) {
+      return this._visualPositionsCache.get(lineIndex);
+    }
+    const line = this._textLines[lineIndex];
+    const positions = [];
+    const chars = this.__charBounds[lineIndex];
+    if (!chars || chars.length === 0) {
+      this._visualPositionsCache.set(lineIndex, positions);
+      return positions;
+    }
+
+    // For LTR direction, use logical positions directly
+    if (this.direction !== 'rtl') {
+      for (let i = 0; i < line.length; i++) {
+        var _chars$i, _chars$i2;
+        positions.push({
+          logicalIndex: i,
+          visualX: ((_chars$i = chars[i]) === null || _chars$i === void 0 ? void 0 : _chars$i.left) || 0,
+          width: ((_chars$i2 = chars[i]) === null || _chars$i2 === void 0 ? void 0 : _chars$i2.kernedWidth) || 0,
+          isRtl: false
+        });
+      }
+      this._visualPositionsCache.set(lineIndex, positions);
+      return positions;
+    }
+
+    // For RTL, use BiDi analysis to determine visual positions
+    const runs = analyzeBiDi(lineText, 'rtl');
+
+    // Build mapping from string position to grapheme index
+    // This is needed because analyzeBiDi works on string positions (code points)
+    // but we need grapheme indices for charBounds
+    const stringPosToGrapheme = [];
+    let strPos = 0;
+    for (let gi = 0; gi < line.length; gi++) {
+      const grapheme = line[gi];
+      for (let j = 0; j < grapheme.length; j++) {
+        stringPosToGrapheme[strPos + j] = gi;
+      }
+      strPos += grapheme.length;
+    }
+
+    // Calculate width for each run
+
+    const runInfos = [];
+    for (const run of runs) {
+      const runChars = [];
+      let runWidth = 0;
+      const seenGraphemes = new Set();
+
+      // Map string positions in this run to grapheme indices
+      for (let sp = run.start; sp < run.end; sp++) {
+        const gi = stringPosToGrapheme[sp];
+        if (gi !== undefined && !seenGraphemes.has(gi)) {
+          var _chars$gi;
+          seenGraphemes.add(gi);
+          runChars.push(gi);
+          runWidth += ((_chars$gi = chars[gi]) === null || _chars$gi === void 0 ? void 0 : _chars$gi.kernedWidth) || 0;
+        }
+      }
+      runInfos.push({
+        run,
+        width: runWidth,
+        charIndices: runChars
+      });
+    }
+
+    // For RTL base direction, runs are displayed right-to-left
+    // So first run appears on the right, last run on the left
+    const totalWidth = this.getLineWidth(lineIndex);
+    let visualX = totalWidth; // Start from right edge
+
+    for (const runInfo of runInfos) {
+      visualX -= runInfo.width; // Move left by run width
+
+      const isRtlRun = runInfo.run.direction === 'rtl';
+      if (isRtlRun) {
+        // RTL run: characters displayed right-to-left within run
+        // First char of run at visual right of run, last at visual left
+        let charX = visualX + runInfo.width;
+        for (const idx of runInfo.charIndices) {
+          var _chars$idx;
+          const charWidth = ((_chars$idx = chars[idx]) === null || _chars$idx === void 0 ? void 0 : _chars$idx.kernedWidth) || 0;
+          charX -= charWidth;
+          positions.push({
+            logicalIndex: idx,
+            visualX: charX,
+            width: charWidth,
+            isRtl: true
+          });
+        }
+      } else {
+        // LTR run: characters displayed left-to-right within run
+        // First char of run at visual left of run, last at visual right
+        let charX = visualX;
+        for (const idx of runInfo.charIndices) {
+          var _chars$idx2;
+          const charWidth = ((_chars$idx2 = chars[idx]) === null || _chars$idx2 === void 0 ? void 0 : _chars$idx2.kernedWidth) || 0;
+          positions.push({
+            logicalIndex: idx,
+            visualX: charX,
+            width: charWidth,
+            isRtl: false
+          });
+          charX += charWidth;
+        }
+      }
+    }
+
+    // Cache the result
+    this._visualPositionsCache.set(lineIndex, positions);
+    return positions;
   }
 
   /**
@@ -408,40 +665,140 @@ class IText extends ITextClickBehavior {
   }
 
   /**
-   * Calculates cursor left/top offset relative to instance's center point
+   * Calculates cursor left/top offset relative to _getLeftOffset()
+   * Uses visual positions for BiDi text support
+   * Handles kashida by converting original indices to display indices
    * @private
-   * @param {number} index index from start
+   * @param {number} index index from start (in original text space, without tatweels)
    */
   __getCursorBoundariesOffsets(index) {
-    let topOffset = 0,
-      leftOffset = 0;
-    const {
-      charIndex,
-      lineIndex
-    } = this.get2DCursorLocation(index);
+    let topOffset = 0;
+
+    // Find line index and original char index using original line lengths
+    let lineIndex = 0;
+    let originalCharIndex = index;
+    for (let i = 0; i < this._textLines.length; i++) {
+      const originalLineLength = this._getOriginalLineLength(i);
+      if (originalCharIndex <= originalLineLength) {
+        lineIndex = i;
+        break;
+      }
+      originalCharIndex -= originalLineLength + this.missingNewlineOffset(i);
+      lineIndex = i + 1;
+    }
+
+    // Clamp lineIndex to valid range
+    if (lineIndex >= this._textLines.length) {
+      lineIndex = this._textLines.length - 1;
+      originalCharIndex = this._getOriginalLineLength(lineIndex);
+    }
     for (let i = 0; i < lineIndex; i++) {
       topOffset += this.getHeightOfLine(i);
     }
-    const lineLeftOffset = this._getLineLeftOffset(lineIndex);
-    const bound = this.__charBounds[lineIndex][charIndex];
-    bound && (leftOffset = bound.left);
-    if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) {
-      leftOffset -= this._getWidthOfCharSpacing();
+
+    // Convert original char index to display char index for visual lookup
+    const displayCharIndex = this._originalToDisplayIndex(lineIndex, originalCharIndex);
+
+    // Get visual positions for cursor placement
+    const lineText = this._textLines[lineIndex].join('');
+    const visualPositions = this._measureVisualPositions(lineIndex, lineText);
+    const lineWidth = this.getLineWidth(lineIndex);
+    this._textLines[lineIndex].length;
+    const originalLineLength = this._getOriginalLineLength(lineIndex);
+
+    // Find visual X position for cursor (0 to lineWidth, from visual left)
+    let visualX = 0;
+    if (visualPositions.length === 0) {
+      // Fallback for empty line
+      return {
+        top: topOffset,
+        left: 0
+      };
     }
-    const boundaries = {
-      top: topOffset,
-      left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0)
-    };
-    if (this.direction === 'rtl') {
-      if (this.textAlign === RIGHT || this.textAlign === JUSTIFY || this.textAlign === JUSTIFY_RIGHT) {
-        boundaries.left *= -1;
-      } else if (this.textAlign === LEFT || this.textAlign === JUSTIFY_LEFT) {
-        boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0);
-      } else if (this.textAlign === CENTER || this.textAlign === JUSTIFY_CENTER) {
-        boundaries.left = lineLeftOffset - (leftOffset > 0 ? leftOffset : 0);
+    if (originalCharIndex === 0) {
+      // Cursor at logical start
+      // For RTL base direction, logical start is at visual right
+      if (this.direction === 'rtl') {
+        visualX = lineWidth; // Right edge
+      } else {
+        visualX = 0; // Left edge
+      }
+    } else if (originalCharIndex >= originalLineLength) {
+      // Cursor at logical end
+      // For RTL base direction, logical end is at visual left
+      if (this.direction === 'rtl') {
+        visualX = 0; // Left edge
+      } else {
+        visualX = lineWidth; // Right edge
       }
+    } else {
+      // Cursor between characters - find visual position of character at displayCharIndex
+      const charPos = visualPositions.find(p => p.logicalIndex === displayCharIndex);
+      if (charPos) {
+        // Use character's direction to determine cursor position
+        // For RTL char: cursor "before" it appears at its right visual edge
+        // For LTR char: cursor "before" it appears at its left visual edge
+        if (charPos.isRtl) {
+          visualX = charPos.visualX + charPos.width;
+        } else {
+          visualX = charPos.visualX;
+        }
+      } else {
+        // Fallback - try the previous character in display space
+        const prevDisplayIndex = displayCharIndex > 0 ? displayCharIndex - 1 : 0;
+        const prevCharPos = visualPositions.find(p => p.logicalIndex === prevDisplayIndex);
+        if (prevCharPos) {
+          // Cursor after previous character
+          if (prevCharPos.isRtl) {
+            visualX = prevCharPos.visualX;
+          } else {
+            visualX = prevCharPos.visualX + prevCharPos.width;
+          }
+        } else {
+          // Ultimate fallback
+          const bound = this.__charBounds[lineIndex][displayCharIndex];
+          visualX = (bound === null || bound === void 0 ? void 0 : bound.left) || 0;
+        }
+      }
+    }
+
+    // Calculate alignment offset (how much line is shifted from left edge)
+    let alignOffset = 0;
+    if (this.textAlign === 'center' || this.textAlign === 'justify-center') {
+      alignOffset = (this.width - lineWidth) / 2;
+    } else if (this.textAlign === 'right' || this.textAlign === 'justify-right') {
+      alignOffset = this.width - lineWidth;
+    } else if (this.direction === 'rtl' && (this.textAlign === 'justify' || this.textAlign === 'left')) {
+      alignOffset = this.width - lineWidth;
     }
-    return boundaries;
+
+    // The returned left value is added to _getLeftOffset() in _getCursorBoundaries
+    // _getLeftOffset() returns -width/2 for LTR, +width/2 for RTL
+    // Final cursor X = _getLeftOffset() + leftOffset
+    //
+    // For LTR: cursor X = -width/2 + (alignOffset + visualX)
+    // For RTL: cursor X = +width/2 + leftOffset
+    //          We want cursor at: -width/2 + alignOffset + visualX
+    //          So leftOffset = -width/2 + alignOffset + visualX - width/2 = alignOffset + visualX - width
+
+    let leftOffset;
+    if (this.direction === 'rtl') {
+      // For RTL, _getLeftOffset() = +width/2
+      // We want final X = -width/2 + alignOffset + visualX
+      // So: +width/2 + leftOffset = -width/2 + alignOffset + visualX
+      // leftOffset = -width + alignOffset + visualX
+      leftOffset = -this.width + alignOffset + visualX;
+    } else {
+      // For LTR, _getLeftOffset() = -width/2
+      // We want final X = -width/2 + alignOffset + visualX
+      // So: -width/2 + leftOffset = -width/2 + alignOffset + visualX
+      // leftOffset = alignOffset + visualX
+      leftOffset = alignOffset + visualX;
+    }
+    return {
+      top: topOffset,
+      left: leftOffset
+    };
   }
 
   /**
@@ -533,51 +890,119 @@ class IText extends ITextClickBehavior {
   }
 
   /**
-   * Renders text selection
+   * Renders text selection using visual positions for BiDi support
+   * Handles kashida by converting original indices to display indices
    * @private
-   * @param {{ selectionStart: number, selectionEnd: number }} selection
+   * @param {{ selectionStart: number, selectionEnd: number }} selection (in original text space)
    * @param {Object} boundaries Object with left/top/leftOffset/topOffset
    * @param {CanvasRenderingContext2D} ctx transformed context to draw on
    */
   _renderSelection(ctx, selection, boundaries) {
     const selectionStart = selection.selectionStart,
       selectionEnd = selection.selectionEnd,
-      isJustify = this.textAlign.includes(JUSTIFY),
-      start = this.get2DCursorLocation(selectionStart),
-      end = this.get2DCursorLocation(selectionEnd),
-      startLine = start.lineIndex,
-      endLine = end.lineIndex,
-      startChar = start.charIndex < 0 ? 0 : start.charIndex,
-      endChar = end.charIndex < 0 ? 0 : end.charIndex;
+      isJustify = this.textAlign.includes(JUSTIFY);
+
+    // Convert selection indices to line/char using original text space
+    // This handles kashida properly since selection indices don't include tatweels
+    let startLine = 0,
+      endLine = 0;
+    let originalStartChar = selectionStart,
+      originalEndChar = selectionEnd;
+
+    // Find start line and char
+    let charCount = 0;
+    for (let i = 0; i < this._textLines.length; i++) {
+      const originalLineLength = this._getOriginalLineLength(i);
+      if (charCount + originalLineLength >= selectionStart) {
+        startLine = i;
+        originalStartChar = selectionStart - charCount;
+        break;
+      }
+      charCount += originalLineLength + this.missingNewlineOffset(i);
+    }
+
+    // Find end line and char
+    charCount = 0;
+    for (let i = 0; i < this._textLines.length; i++) {
+      const originalLineLength = this._getOriginalLineLength(i);
+      if (charCount + originalLineLength >= selectionEnd) {
+        endLine = i;
+        originalEndChar = selectionEnd - charCount;
+        break;
+      }
+      charCount += originalLineLength + this.missingNewlineOffset(i);
+      if (i === this._textLines.length - 1) {
+        endLine = i;
+        originalEndChar = originalLineLength;
+      }
+    }
     for (let i = startLine; i <= endLine; i++) {
-      const lineOffset = this._getLineLeftOffset(i) || 0;
       let lineHeight = this.getHeightOfLine(i),
-        realLineHeight = 0,
-        boxStart = 0,
-        boxEnd = 0;
+        realLineHeight = 0;
 
-      // Simplified selection rendering that works for both LTR and RTL
+      // Get visual positions for this line
+      const lineText = this._textLines[i].join('');
+      const visualPositions = this._measureVisualPositions(i, lineText);
+      this._textLines[i].length;
+      const originalLineLength = this._getOriginalLineLength(i);
+
+      // Calculate selection bounds in original space, then convert to display
+      let originalLineStartChar = 0;
+      let originalLineEndChar = originalLineLength;
       if (i === startLine) {
-        boxStart = this.__charBounds[startLine][startChar].left;
+        originalLineStartChar = originalStartChar;
+      }
+      if (i === endLine) {
+        originalLineEndChar = originalEndChar;
       }
-      if (i >= startLine && i < endLine) {
-        boxEnd = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5;
-      } else if (i === endLine) {
-        if (endChar === 0) {
-          boxEnd = this.__charBounds[endLine][endChar].left;
+
+      // Convert original char indices to display indices for visual lookup
+      const displayLineStartChar = this._originalToDisplayIndex(i, originalLineStartChar);
+      const displayLineEndChar = this._originalToDisplayIndex(i, originalLineEndChar);
+
+      // Get visual X positions for selection range
+      let minVisualX = Infinity;
+      let maxVisualX = -Infinity;
+      for (const pos of visualPositions) {
+        if (pos.logicalIndex >= displayLineStartChar && pos.logicalIndex < displayLineEndChar) {
+          minVisualX = Math.min(minVisualX, pos.visualX);
+          maxVisualX = Math.max(maxVisualX, pos.visualX + pos.width);
+        }
+      }
+
+      // Handle edge cases
+      if (minVisualX === Infinity || maxVisualX === -Infinity) {
+        if (i >= startLine && i < endLine) {
+          // Full line selection
+          minVisualX = 0;
+          maxVisualX = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5;
         } else {
-          const charSpacing = this._getWidthOfCharSpacing();
-          boxEnd = this.__charBounds[endLine][endChar - 1].left + this.__charBounds[endLine][endChar - 1].width - charSpacing;
+          continue; // No selection on this line
         }
       }
       realLineHeight = lineHeight;
       if (this.lineHeight < 1 || i === endLine && this.lineHeight > 1) {
         lineHeight /= this.lineHeight;
       }
-      let drawStart = boundaries.left + lineOffset + boxStart,
-        drawHeight = lineHeight,
-        extraTop = 0;
-      const drawWidth = boxEnd - boxStart;
+
+      // Calculate draw position
+      // Visual positions are relative to line start (0 to lineWidth)
+      // Need to add alignment offset
+      const lineWidth = this.getLineWidth(i);
+      let alignOffset = 0;
+      if (this.textAlign === 'center' || this.textAlign === 'justify-center') {
+        alignOffset = (this.width - lineWidth) / 2;
+      } else if (this.textAlign === 'right' || this.textAlign === 'justify-right') {
+        alignOffset = this.width - lineWidth;
+      } else if (this.direction === 'rtl' && (this.textAlign === 'justify' || this.textAlign === 'left')) {
+        alignOffset = this.width - lineWidth;
+      }
+
+      // Draw from center origin (-width/2 to width/2)
+      const drawStart = -this.width / 2 + alignOffset + minVisualX;
+      const drawWidth = maxVisualX - minVisualX;
+      let drawHeight = lineHeight;
+      let extraTop = 0;
       if (this.inCompositionMode) {
         ctx.fillStyle = this.compositionColor || 'black';
         drawHeight = 1;
@@ -585,15 +1010,6 @@ class IText extends ITextClickBehavior {
       } else {
         ctx.fillStyle = this.selectionColor;
       }
-      if (this.direction === 'rtl') {
-        if (this.textAlign === RIGHT || this.textAlign === JUSTIFY || this.textAlign === JUSTIFY_RIGHT) {
-          drawStart = this.width - drawStart - drawWidth;
-        } else if (this.textAlign === LEFT || this.textAlign === JUSTIFY_LEFT) {
-          drawStart = boundaries.left + lineOffset - boxEnd;
-        } else if (this.textAlign === CENTER || this.textAlign === JUSTIFY_CENTER) {
-          drawStart = boundaries.left + lineOffset - boxEnd;
-        }
-      }
       ctx.fillRect(drawStart, boundaries.top + boundaries.topOffset + extraTop, drawWidth, drawHeight);
       boundaries.topOffset += realLineHeight;
     }
@@ -642,53 +1058,6 @@ class IText extends ITextClickBehavior {
     super.dispose();
   }
 }
-/**
- * Index where text selection starts (or where cursor is when there is no selection)
- * @type Number
- */
-/**
- * Index where text selection ends
- * @type Number
- */
-/**
- * Color of text selection
- * @type String
- */
-/**
- * Indicates whether text is in editing mode
- * @type Boolean
- */
-/**
- * Indicates whether a text can be edited
- * @type Boolean
- */
-/**
- * Border color of text object while it's in editing mode
- * @type String
- */
-/**
- * Width of cursor (in px)
- * @type Number
- */
-/**
- * Color of text cursor color in editing mode.
- * if not set (default) will take color from the text.
- * if set to a color value that fabric can understand, it will
- * be used instead of the color of the text at the current position.
- * @type String
- */
-/**
- * Delay between cursor blink (in ms)
- * @type Number
- */
-/**
- * Duration of cursor fade in (in ms)
- * @type Number
- */
-/**
- * Indicates whether internal text char widths can be cached
- * @type Boolean
- */
 _defineProperty(IText, "ownDefaults", iTextDefaultValues);
 _defineProperty(IText, "type", 'IText');
 classRegistry.setClass(IText);